@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Account/PasswordGenerationModal.razor.rz.scp.css */
/* Password Generation Modal - Modern Minimalist Design */

/* Backdrop */
.password-modal-backdrop[b-xsy14pxieg] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 1rem;
  animation: fade-in-b-xsy14pxieg 0.2s ease-out;
}

@keyframes fade-in-b-xsy14pxieg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal Dialog */
.password-modal-dialog[b-xsy14pxieg] {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  animation: scale-in-b-xsy14pxieg 0.2s ease-out;
}

@keyframes scale-in-b-xsy14pxieg {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal Content */
.password-modal-content[b-xsy14pxieg] {
  background: var(--fs-bg-primary);
  border-radius: 20px;
  box-shadow: var(--fs-shadow-dialog);
  border: 1px solid var(--fs-shade-a08);
  overflow: hidden;
}

/* Header */
.password-modal-header[b-xsy14pxieg] {
  text-align: center;
  padding: 2.5rem 2rem 1.5rem;
  background: linear-gradient(135deg, var(--fs-bg-secondary) 0%, var(--fs-bg-secondary) 100%);
  border-bottom: 1px solid var(--fs-shade-a05);
}

.password-modal-icon[b-xsy14pxieg] {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  background: var(--fs-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fs-text-inverse);
  box-shadow: none;
}

.password-modal-title[b-xsy14pxieg] {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fs-text-primary);
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.password-modal-subtitle[b-xsy14pxieg] {
  font-size: 0.9375rem;
  color: var(--fs-text-secondary);
  margin: 0;
  font-weight: 400;
}

/* Body */
.password-modal-body[b-xsy14pxieg] {
  padding: 2rem;
}

/* Password Display */
.password-display[b-xsy14pxieg] {
  margin-bottom: 2rem;
}

.password-label[b-xsy14pxieg] {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fs-text-body);
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
}

.password-input-wrapper[b-xsy14pxieg] {
  position: relative;
  display: flex;
}

.password-input[b-xsy14pxieg] {
  flex: 1;
  padding: 1rem 3.5rem 1rem 1rem;
  border: 1.5px solid var(--fs-border-default);
  border-radius: 12px;
  font-size: 0.9375rem;
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
  background: var(--fs-bg-secondary);
  color: var(--fs-text-primary);
  transition: all 0.2s ease;
  letter-spacing: 0.025em;
  font-weight: 500;
}

.password-input:focus[b-xsy14pxieg] {
  outline: none;
  border-color: var(--fs-primary-text);
  background: var(--fs-bg-primary);
  box-shadow: 0 0 0 3px var(--fs-primary-a08);
}

.password-input:hover[b-xsy14pxieg] {
  border-color: var(--fs-border-hover);
  background: var(--fs-bg-primary);
}

.password-copy-btn[b-xsy14pxieg] {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--fs-text-muted);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.password-copy-btn:hover[b-xsy14pxieg] {
  color: var(--fs-primary-text);
  background: var(--fs-primary-a10);
}

.password-copy-btn:active[b-xsy14pxieg] {
  transform: translateY(-50%) scale(0.95);
}

/* Warning Section */
.password-warning[b-xsy14pxieg] {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, var(--fs-warning-light) 0%, var(--fs-warning-light) 100%);
  border: 1px solid var(--fs-warning-light);
  border-radius: 12px;
  align-items: flex-start;
}

.warning-icon[b-xsy14pxieg] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--fs-warning);
  margin-top: 0.125rem;
}

.warning-content[b-xsy14pxieg] {
  flex: 1;
}

.warning-title[b-xsy14pxieg] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fs-warning-text);
  margin: 0 0 0.25rem 0;
}

.warning-text[b-xsy14pxieg] {
  font-size: 0.8125rem;
  color: var(--fs-warning-text);
  margin: 0;
  line-height: 1.4;
}

/* Footer */
.password-modal-footer[b-xsy14pxieg] {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.modal-primary-actions[b-xsy14pxieg] {
  display: flex;
  gap: 0.75rem;
}

/* Buttons */
.btn-primary[b-xsy14pxieg] {
  background: var(--fs-primary);
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fs-text-inverse);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  white-space: nowrap;
}

.btn-primary:hover[b-xsy14pxieg] {
  background: var(--fs-primary-hover);
  box-shadow: none;
}

.btn-primary:active[b-xsy14pxieg] {
  transform: translateY(0);
}

.btn-outline[b-xsy14pxieg] {
  background: transparent;
  border: 1.5px solid var(--fs-border-default);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fs-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  white-space: nowrap;
}

.btn-outline:hover[b-xsy14pxieg] {
  border-color: var(--fs-border-hover);
  background: var(--fs-bg-hover);
  color: var(--fs-text-body);
}

.btn-outline:active[b-xsy14pxieg] {
  background: var(--fs-bg-tertiary);
}

.btn-secondary[b-xsy14pxieg] {
  background: transparent;
  border: 1.5px solid var(--fs-primary-text);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fs-primary-text);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  white-space: nowrap;
}

.btn-secondary:hover[b-xsy14pxieg] {
  background: var(--fs-primary-a05);
  border-color: var(--fs-primary-text-hover);
  color: var(--fs-primary-text-hover);
}

.btn-secondary:active[b-xsy14pxieg] {
  background: var(--fs-primary-a10);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .password-modal-backdrop[b-xsy14pxieg] {
    padding: 0.5rem;
  }

  .password-modal-header[b-xsy14pxieg] {
    padding: 2rem 1.5rem 1.25rem;
  }

  .password-modal-icon[b-xsy14pxieg] {
    width: 56px;
    height: 56px;
    margin-bottom: 1.25rem;
  }

  .password-modal-title[b-xsy14pxieg] {
    font-size: 1.375rem;
  }

  .password-modal-body[b-xsy14pxieg] {
    padding: 1.5rem;
  }

  .password-modal-footer[b-xsy14pxieg] {
    padding: 1.25rem 1.5rem 1.75rem;
    flex-direction: column;
    gap: 1rem;
  }

  .modal-primary-actions[b-xsy14pxieg] {
    width: 100%;
    justify-content: stretch;
  }

  .btn-primary[b-xsy14pxieg],
  .btn-outline[b-xsy14pxieg] {
    flex: 1;
    justify-content: center;
  }

  .btn-secondary[b-xsy14pxieg] {
    width: 100%;
    justify-content: center;
  }

  .password-warning[b-xsy14pxieg] {
    padding: 1rem;
    gap: 0.75rem;
  }

  .warning-title[b-xsy14pxieg] {
    font-size: 0.8125rem;
  }

  .warning-text[b-xsy14pxieg] {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .password-modal-header[b-xsy14pxieg] {
    padding: 1.5rem 1rem 1rem;
  }

  .password-modal-body[b-xsy14pxieg] {
    padding: 1.25rem;
  }

  .password-modal-footer[b-xsy14pxieg] {
    padding: 1rem 1.25rem 1.5rem;
  }

  .password-input[b-xsy14pxieg] {
    font-size: 0.875rem;
    padding: 0.875rem 3rem 0.875rem 0.875rem;
  }

  .password-copy-btn[b-xsy14pxieg] {
    padding: 0.375rem;
    right: 0.625rem;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .password-modal-backdrop[b-xsy14pxieg],
  .password-modal-dialog[b-xsy14pxieg],
  *[b-xsy14pxieg] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus states for keyboard navigation */
.password-copy-btn:focus-visible[b-xsy14pxieg],
.btn-primary:focus-visible[b-xsy14pxieg],
.btn-outline:focus-visible[b-xsy14pxieg],
.btn-secondary:focus-visible[b-xsy14pxieg] {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 2px;
}

.password-input:focus-visible[b-xsy14pxieg] {
  outline: none; /* We use box-shadow instead */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .password-modal-content[b-xsy14pxieg] {
    border-width: 2px;
  }

  .password-input[b-xsy14pxieg],
  .btn-outline[b-xsy14pxieg] {
    border-width: 2px;
  }

  .password-warning[b-xsy14pxieg] {
    border-width: 2px;
  }
}
/* /Components/Account/ResetProfileModal.razor.rz.scp.css */
/* Moved from the global profile-modal-improvements.css (#884); scoped to this modal. */

.reset-profile-content[b-uc7w7imjg2] {
  padding: 4px 0;
}

.reset-profile-intro[b-uc7w7imjg2] {
  font-size: 15px;
  color: var(--fs-text-body);
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
}

.reset-section[b-uc7w7imjg2] {
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.reset-section-cleared[b-uc7w7imjg2] {
  background: var(--fs-bg-hover);
  border: 1px solid var(--fs-border-default);
}

.reset-section-kept[b-uc7w7imjg2] {
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
  border: 1px solid var(--fs-success-light);
}

.reset-section-title[b-uc7w7imjg2] {
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-text-body);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
}

.reset-section-kept .reset-section-title[b-uc7w7imjg2] {
  color: var(--fs-success-text);
}

.reset-section-kept .reset-section-title i[b-uc7w7imjg2] {
  color: var(--fs-success);
}

.reset-list[b-uc7w7imjg2] {
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 14px;
  color: var(--fs-text-secondary);
  line-height: 1.8;
}

.reset-list-kept[b-uc7w7imjg2] {
  list-style: none;
  padding-left: 0;
}

.reset-list-kept li[b-uc7w7imjg2] {
  display: flex;
  align-items: center;
  color: var(--fs-success-text);
  font-weight: 500;
  padding: 4px 0;
}

/* Responsive */
@media (max-width: 576px) {
  .reset-profile-intro[b-uc7w7imjg2] {
    font-size: 14px;
  }

  .reset-section[b-uc7w7imjg2] {
    padding: 14px;
  }

  .reset-list[b-uc7w7imjg2] {
    font-size: 13px;
  }
}
/* /Components/Diet/AnswerAdvisoryAlert.razor.rz.scp.css */
/* Flat, 1px edge in the role colour, no shadow (#1178 design). */
.answer-advisory[b-99rgyffb7x] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-md);
  padding: var(--fs-spacing-md) var(--fs-spacing-lg) var(--fs-spacing-lg);
  margin-top: var(--fs-spacing-sm);
  background: var(--fs-warning-light);
  border: 1px solid var(--fs-warning);
  border-radius: var(--fs-radius-md);
  color: var(--fs-text-primary);
  text-align: left;
}

.answer-advisory__lead[b-99rgyffb7x] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-xs);
}

.answer-advisory__role[b-99rgyffb7x] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  color: var(--fs-warning);
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-semibold);
}

.answer-advisory__headline[b-99rgyffb7x],
.answer-advisory__detail[b-99rgyffb7x] {
  margin: 0;
  font-size: var(--fs-font-size-base);
  line-height: 1.4;
}

.answer-advisory__headline[b-99rgyffb7x] {
  font-weight: var(--fs-font-weight-semibold);
}

.answer-advisory__confirm[b-99rgyffb7x] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-md);
  width: 100%;
  min-height: var(--fs-mobile-tap-target-sm); /* 44px, as the number box and buttons beside it */
  padding: var(--fs-spacing-sm) var(--fs-spacing-md);
  background: var(--fs-bg-primary);
  border: 1.5px solid var(--fs-border-control);
  border-radius: var(--fs-radius-sm);
  color: var(--fs-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.answer-advisory__confirm:disabled[b-99rgyffb7x] {
  background: var(--fs-disabled-bg);
  color: var(--fs-disabled-text);
  cursor: default;
}

.answer-advisory__confirm:focus-visible[b-99rgyffb7x] {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 2px;
}

.answer-advisory__confirm.is-checked[b-99rgyffb7x] {
  background: var(--fs-bg-selected);
  border-color: var(--fs-border-selected);
}

.answer-advisory__box[b-99rgyffb7x] {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fs-spacing-xs);
  background: var(--fs-bg-primary);
  border: 2px solid var(--fs-border-control);
  color: var(--fs-text-inverse);
}

.is-checked .answer-advisory__box[b-99rgyffb7x] {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
}

.answer-advisory__confirm-text[b-99rgyffb7x] {
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-medium);
  line-height: 1.35;
}
/* /Components/Diet/DietQuestionnaire.razor.rz.scp.css */
/* ============================================
   Welcome-Back Banner (returning users)
   ============================================ */

.welcome-back-banner[b-c2kj072vd3] {
  background: linear-gradient(135deg, var(--fs-bg-selected), var(--fs-bg-selected));
  border-left: 4px solid var(--fs-border-default);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: var(--fs-text-primary);
  line-height: 1.5;
  animation: welcome-fade-in-b-c2kj072vd3 0.6s ease-out both;
}

.welcome-back-icon[b-c2kj072vd3] {
  color: var(--fs-text-primary);
  font-size: 1.1rem;
  flex-shrink: 0;
}

@keyframes welcome-fade-in-b-c2kj072vd3 {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .welcome-back-banner[b-c2kj072vd3] {
    animation: none;
  }
}

/* ============================================
   Form Input Sizing - Match width to expected input
   ============================================ */

/* Input groups should be compact but readable. The number box's own lives in NumberAnswerBox.razor.css: this
   file's rules carry this component's scope and cannot reach it (#1178). This one is the Select + add-on. */
.input-group[b-c2kj072vd3] {
  width: 100%;
  max-width: 320px; /* Enough for number input + addon text like "hours per week" */
  margin: 0 auto; /* Center the input */
}

/* Select dropdowns can be slightly wider for longer option text */
.form-select[b-c2kj072vd3] {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

/* Primary CTA button - not too wide */
.my-special-button[b-c2kj072vd3] {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  display: block;
}

/* Navigation area (Previous Questions) - match question content width */
.questionnaire-nav[b-c2kj072vd3] {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================
   Button Styles
   ============================================ */

/* Brand orange outline buttons for questionnaire */
.btn-outline-primary[b-c2kj072vd3] {
  color: var(--fs-primary-text);
  border-color: var(--fs-primary-text);
  background-color: transparent;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover[b-c2kj072vd3],
.btn-outline-primary:focus[b-c2kj072vd3] {
  color: var(--fs-text-inverse);
  background-color: var(--fs-primary);
  border-color: var(--fs-primary);
  box-shadow: none;
}

/* Button selection bounce animation on click */
.btn-outline-primary:active:not(:disabled)[b-c2kj072vd3] {
  animation: btn-select-bounce-b-c2kj072vd3 0.12s ease-out;
  transform: scale(0.95);
}

.transition[b-c2kj072vd3] {
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .btn-lg[b-c2kj072vd3] {
    font-size: 1rem;
    padding: 0.5rem 1rem !important;
  }
}

/* CardSelect - Visual card grid for answer selection */
.card-select-container[b-c2kj072vd3] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1rem;
}

.card-select-option[b-c2kj072vd3] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  min-height: 130px;
  background: var(--fs-bg-primary);
  border: 2px solid var(--fs-border-default);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: none;
  /* For ripple effect */
  position: relative;
  overflow: hidden;
}

/* Wider layout for cards with structured labels (research documents) */
.card-select-container:has(.card-label-title)[b-c2kj072vd3] {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 700px;
  align-items: stretch;
}

.card-select-option:has(.card-label-title)[b-c2kj072vd3] {
  justify-content: flex-start;
  padding: 1.25rem 1rem;
  min-height: auto;
}

.card-select-option:hover:not(:disabled)[b-c2kj072vd3] {
  border-color: var(--fs-primary-text);
  box-shadow: none;
}

.card-select-option:focus[b-c2kj072vd3] {
  outline: none;
  border-color: var(--fs-primary-text);
  box-shadow: 0 0 0 3px var(--fs-primary-a25);
}

.card-select-option:disabled[b-c2kj072vd3] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Card selection bounce animation on click */
.card-select-option:active:not(:disabled)[b-c2kj072vd3] {
  animation: card-select-bounce-b-c2kj072vd3 0.15s ease-out;
  transform: scale(0.97);
}

/* Ripple effect pseudo-element */
.card-select-option[b-c2kj072vd3]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  opacity: 0;
  transform: scale(0);
  transition:
    transform 0.4s ease-out,
    opacity 0.4s ease-out;
  pointer-events: none;
}

.card-select-option:active:not(:disabled)[b-c2kj072vd3]::after {
  transform: scale(2.5);
  opacity: 1;
  transition:
    transform 0.1s ease-out,
    opacity 0.1s ease-out;
}

.card-select-icon[b-c2kj072vd3] {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--fs-text-primary);
  line-height: 1;
}

.card-select-icon i[b-c2kj072vd3],
.card-select-icon svg[b-c2kj072vd3] {
  font-size: inherit;
  width: 2rem;
  height: 2rem;
}

.card-select-label[b-c2kj072vd3] {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fs-text-primary);
  text-align: center;
  line-height: 1.3;
}

/* CardSelect responsive adjustments */
@media (max-width: 480px) {
  .card-select-container[b-c2kj072vd3] {
    /* Auto-fit with larger minimum - naturally adapts to content */
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 0.75rem;
  }

  .card-select-option[b-c2kj072vd3] {
    padding: 1rem 0.75rem;
    min-height: auto; /* Let content determine height for long text */
  }

  .card-select-icon[b-c2kj072vd3] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .card-select-label[b-c2kj072vd3] {
    font-size: 0.85rem;
  }
}

/* Narrow mobile: single column for better readability */
@media (max-width: 360px) {
  .card-select-container[b-c2kj072vd3] {
    grid-template-columns: 1fr;
  }

  .card-select-option[b-c2kj072vd3] {
    /* Horizontal layout for narrow screens with long text */
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 0.75rem;
  }

  .card-select-icon[b-c2kj072vd3] {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .card-select-label[b-c2kj072vd3] {
    text-align: left;
  }
}

/* CardSelect - Long text support
   Better text wrapping and flexible height for cards with longer labels */
.card-select-label[b-c2kj072vd3] {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: manual; /* Schibsted's wider set made "auto" split words like "Calo-rie" */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Structured card label - Title, Meta, Organizations */
.card-label-title[b-c2kj072vd3] {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  line-height: 1.3;
}

.card-label-meta[b-c2kj072vd3] {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fs-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.card-label-orgs[b-c2kj072vd3] {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--fs-text-muted);
  font-style: italic;
}

/* Mobile adjustments for structured labels */
@media (max-width: 480px) {
  .card-label-title[b-c2kj072vd3] {
    font-size: 0.85rem;
  }

  .card-label-meta[b-c2kj072vd3] {
    font-size: 0.7rem;
  }

  .card-label-orgs[b-c2kj072vd3] {
    font-size: 0.75rem;
  }
}

/* Narrow mobile - align structured labels left */
@media (max-width: 360px) {
  .card-select-label[b-c2kj072vd3] {
    align-items: flex-start;
  }
}

/* ============================================
   Progress Header - Segmented Stage Indicator
   ============================================ */

.progress-header[b-c2kj072vd3] {
  background: var(--fs-bg-primary);
  padding: 1rem 0;
  border-radius: 12px;
  width: 100%;
  max-width: 700px; /* Slightly wider than question content to fit 4 stages */
  min-width: 320px;
  margin: 0 auto;
}

/* Stage indicators container */
.progress-stages[b-c2kj072vd3] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0 0.5rem;
}

/* Individual stage */
.stage[b-c2kj072vd3] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.75rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.stage-icon[b-c2kj072vd3] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.stage-label[b-c2kj072vd3] {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

/* Stage states */
.stage.pending .stage-icon[b-c2kj072vd3] {
  background: var(--fs-border-default);
  color: var(--fs-text-muted);
}

.stage.pending .stage-label[b-c2kj072vd3] {
  color: var(--fs-text-muted);
}

.stage.active .stage-icon[b-c2kj072vd3] {
  background: var(--fs-primary); /* the current step is a selected state; done steps stay ink */
  color: var(--fs-text-inverse);
  box-shadow: none;
}

.stage.active .stage-label[b-c2kj072vd3] {
  color: var(--fs-primary-text);
  font-weight: 600;
}

.stage.completed .stage-icon[b-c2kj072vd3] {
  background: var(--fs-success);
  color: var(--fs-text-on-inverse);
}

.stage.completed .stage-label[b-c2kj072vd3] {
  color: var(--fs-success);
}

/* Connector between stages */
.stage-connector[b-c2kj072vd3] {
  width: 24px;
  height: 2px;
  background: var(--fs-border-default);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.stage-connector.completed[b-c2kj072vd3] {
  background: var(--fs-success);
}

.stage-connector.active[b-c2kj072vd3] {
  background: var(--fs-text-primary);
}

/* Progress bar animation */
.progress-bar-animated[b-c2kj072vd3] {
  transition: width 0.5s ease;
}

/* Progress is status, not an action, so the fill is ink rather than Beet (the theme's Primary). */
.progress-header[b-c2kj072vd3]  .mud-progress-linear-bar {
  background-color: var(--fs-text-primary) !important;
}

/* Progress meta info */
.progress-meta[b-c2kj072vd3] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--fs-text-secondary);
}

.progress-meta .separator[b-c2kj072vd3] {
  width: 4px;
  height: 4px;
  background: var(--fs-border-hover);
  border-radius: 50%;
}

.progress-meta .question-count[b-c2kj072vd3] {
  font-weight: 500;
}

.progress-meta .current-stage-label[b-c2kj072vd3] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.progress-meta .current-stage-label i[b-c2kj072vd3] {
  font-size: 0.85rem;
}

.progress-meta .time-estimate[b-c2kj072vd3] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.progress-meta .time-estimate i[b-c2kj072vd3] {
  font-size: 0.8rem;
}

/* Progress header responsive */
@media (max-width: 576px) {
  .progress-stages[b-c2kj072vd3] {
    gap: 0;
  }

  .stage[b-c2kj072vd3] {
    padding: 0.5rem;
  }

  .stage-icon[b-c2kj072vd3] {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .stage-label[b-c2kj072vd3] {
    font-size: 0.65rem;
  }

  .stage-connector[b-c2kj072vd3] {
    width: 16px;
  }

  .progress-meta[b-c2kj072vd3] {
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
  }

  .progress-meta .separator[b-c2kj072vd3] {
    display: none;
  }
}

/* ============================================
   Selection Animations
   ============================================ */

/* Card selection bounce keyframe */
@keyframes card-select-bounce-b-c2kj072vd3 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Button selection bounce keyframe */
@keyframes btn-select-bounce-b-c2kj072vd3 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.93);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================================
   Question Transitions
   ============================================ */

/* Question content container - constrained width for optimal UX */
.question-content[b-c2kj072vd3] {
  width: 100%;
  max-width: 600px; /* Optimal form width per UX best practices */
  margin: 0 auto;
}

/* Slide in from right */
@keyframes question-enter-b-c2kj072vd3 {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide out to left */
@keyframes question-exit-b-c2kj072vd3 {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

.question-content.entering[b-c2kj072vd3] {
  animation: question-enter-b-c2kj072vd3 0.3s ease-out forwards;
}

.question-content.exiting[b-c2kj072vd3] {
  animation: question-exit-b-c2kj072vd3 0.2s ease-in forwards;
}

/* ============================================
   Mobile Fixed CTA Bar
   ============================================ */

/* On mobile, keep the submit button fixed at bottom when scrolling */
@media (max-width: 768px) {
  .mobile-sticky-cta[b-c2kj072vd3] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--fs-bg-primary);
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    box-shadow: inset 0 1px 0 var(--fs-border-default);
    z-index: 1000;
  }

  /* Ensure button is centered and properly sized */
  .mobile-sticky-cta .my-special-button[b-c2kj072vd3] {
    margin: 0 auto;
    display: block;
  }

  /* Add bottom padding to question-content so fixed bar doesn't cover content */
  .question-content[b-c2kj072vd3] {
    padding-bottom: 80px;
  }
}

/* ============================================
   Preset Buttons (for Input type questions)
   ============================================ */

.preset-buttons-container[b-c2kj072vd3] {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.preset-label[b-c2kj072vd3] {
  font-size: 0.9rem;
  font-weight: 500;
}

.preset-buttons[b-c2kj072vd3] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.preset-btn[b-c2kj072vd3] {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fs-text-body);
  background: var(--fs-bg-primary);
  border: 2px solid var(--fs-border-default);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 70px;
}

.preset-btn:hover:not(:disabled):not(.selected)[b-c2kj072vd3] {
  border-color: var(--fs-primary-text);
  color: var(--fs-primary-text);
  box-shadow: none;
}

.preset-btn:focus[b-c2kj072vd3] {
  outline: none;
  border-color: var(--fs-primary-text);
  box-shadow: 0 0 0 3px var(--fs-primary-a20);
}

.preset-btn.selected[b-c2kj072vd3] {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
  color: var(--fs-text-inverse);
  box-shadow: none;
}

.preset-btn:disabled[b-c2kj072vd3] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ⚠️ Not undersized. This label used to be 0.85rem AND text-muted, which is the visual grammar of
   a footnote - and for an athlete outside the photo grid (male 3-5%, female 8-12%) this control is
   the only correct answer on the screen. */
.manual-label[b-c2kj072vd3] {
  font-size: 1rem;
  color: var(--bs-body-color);
}

/* ============================================
   Skip Option Link
   ============================================ */

.skip-option-container[b-c2kj072vd3] {
  text-align: center;
}

.skip-option-link[b-c2kj072vd3] {
  color: var(--fs-text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

.skip-option-link:hover:not(:disabled)[b-c2kj072vd3] {
  color: var(--fs-primary-text);
  text-decoration: underline;
}

.skip-option-link:disabled[b-c2kj072vd3] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Preset buttons responsive */
@media (max-width: 480px) {
  .preset-btn[b-c2kj072vd3] {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    min-width: 60px;
  }

  .preset-buttons[b-c2kj072vd3] {
    gap: 0.4rem;
  }
}

/* ============================================
   Image Card Select (Body Fat Percentage, etc.)
   ============================================ */

.image-card-select-container[b-c2kj072vd3] {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.image-card-instruction[b-c2kj072vd3] {
  font-size: 0.95rem;
  text-align: center;
}

.image-card-grid[b-c2kj072vd3] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 0 auto;
}

.image-card-option[b-c2kj072vd3] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  background: var(--fs-bg-primary);
  border: 2px solid var(--fs-border-default);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.image-card-option:hover:not(:disabled)[b-c2kj072vd3] {
  border-color: var(--fs-primary-text);
  box-shadow: none;
}

.image-card-option:focus[b-c2kj072vd3] {
  outline: none;
  border-color: var(--fs-primary-text);
  box-shadow: 0 0 0 3px var(--fs-primary-a25);
}

.image-card-option.selected[b-c2kj072vd3] {
  border-color: var(--fs-primary-text);
  background: var(--fs-primary-a08);
  box-shadow: none;
}

.image-card-option.selected[b-c2kj072vd3]::before {
  content: "\2713";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 24px;
  height: 24px;
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  z-index: 2;
}

.image-card-option:disabled[b-c2kj072vd3] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.image-card-option:active:not(:disabled)[b-c2kj072vd3] {
  transform: scale(0.97);
}

.image-card-visual[b-c2kj072vd3] {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.image-card-label[b-c2kj072vd3] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  text-align: center;
}

.image-card-option.selected .image-card-label[b-c2kj072vd3] {
  color: var(--fs-primary-text);
}

/* Manual input section for ImageCardSelect */
.image-card-manual-input[b-c2kj072vd3] {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid var(--fs-border-default);
}

/* Submit button for ImageCardSelect */
.image-card-submit[b-c2kj072vd3] {
  text-align: center;
}

.image-card-submit .my-special-button[b-c2kj072vd3] {
  max-width: 300px;
}

/* ImageCardSelect responsive */
@media (max-width: 480px) {
  .image-card-grid[b-c2kj072vd3] {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .image-card-option[b-c2kj072vd3] {
    padding: 0.375rem;
  }

  .image-card-visual[b-c2kj072vd3] {
    aspect-ratio: 3 / 4;
  }

  .image-card-label[b-c2kj072vd3] {
    font-size: 0.9rem;
  }

  .image-card-option.selected[b-c2kj072vd3]::before {
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
    top: 0.25rem;
    right: 0.25rem;
  }
}

/* ============================================
   Reduced Motion Support (Accessibility)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .card-select-option[b-c2kj072vd3],
  .btn-outline-primary[b-c2kj072vd3],
  .question-content[b-c2kj072vd3],
  .stage-icon[b-c2kj072vd3],
  .progress-bar-animated[b-c2kj072vd3],
  .preset-btn[b-c2kj072vd3],
  .image-card-option[b-c2kj072vd3] {
    animation: none !important;
    transition: opacity 0.1s ease !important;
  }

  .card-select-option[b-c2kj072vd3]::after {
    display: none;
  }

  .question-content.entering[b-c2kj072vd3],
  .question-content.exiting[b-c2kj072vd3] {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Help icon cursor */
.help-icon[b-c2kj072vd3] {
  cursor: help;
}

/* The promise callout keeps its left ink bar; only the right corners take the card radius
   (a rounded left corner bends the 4px bar into a bracket). */
.questionnaire-promise-section[b-c2kj072vd3] {
  border-radius: 0 var(--fs-radius-lg) var(--fs-radius-lg) 0;
}

/* ============================================
   Next while a heads-up waits (#1178). The number box's edge lives in NumberAnswerBox.razor.css.
   ============================================ */

/* The disabled look without the disabled attribute: see the note on the button. */
.my-special-button[aria-disabled="true"][b-c2kj072vd3] {
  --bs-btn-bg: var(--fs-disabled-bg);
  --bs-btn-border-color: var(--fs-disabled-bg);
  --bs-btn-color: var(--fs-disabled-text);
  --bs-btn-hover-bg: var(--fs-disabled-bg);
  --bs-btn-hover-border-color: var(--fs-disabled-bg);
  --bs-btn-hover-color: var(--fs-disabled-text);
  --bs-btn-active-bg: var(--fs-disabled-bg);
  --bs-btn-active-border-color: var(--fs-disabled-bg);
  --bs-btn-active-color: var(--fs-disabled-text);
}
/* /Components/Diet/NumberAnswerBox.razor.rz.scp.css */
/* The number box's edge (#1178): the error colour for a refused number, the warning colour for a heads-up. */
.answer-box--error[b-5rcv82d1j7]  .form-control {
  border: 2px solid var(--fs-error);
}

.answer-box--advisory[b-5rcv82d1j7]  .form-control {
  border: 2px solid var(--fs-warning);
}

/* Sized here, not in DietQuestionnaire.razor.css: that file's rules carry its own scope and never reach this
   markup, so the boxes stretched full width (#1178 review). On the wrapper that always renders, so a box with
   no add-on is sized too. */
.answer-box[b-5rcv82d1j7] {
  width: 100%;
  max-width: 320px; /* Enough for number input + addon text like "hours per week" */
  margin: 0 auto;
}

/* The exact body-fat number beside the photo grid. */
.answer-box--compact[b-5rcv82d1j7] {
  max-width: 200px;
}

/* A tap target on touch screens, like the buttons beside it (#1167's rule in brand-overrides.css; Claude Design
   review of the build, #1178): the plain form-control was 38px tall on a phone. The add-on grows with it,
   because the input group stretches. */
@media (max-width: 768px), (pointer: coarse) {
  .answer-box[b-5rcv82d1j7]  .form-control {
    min-height: var(--fs-mobile-tap-target-sm);
  }
}
/* /Components/Diet/QuestionErrorAlert.razor.rz.scp.css */
/* Flat, 1px edge in the role colour, no shadow (#1178 design). */
.question-error-alert[b-pp78ml1ga4] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-xs);
  padding: var(--fs-spacing-md) var(--fs-spacing-lg);
  margin-top: var(--fs-spacing-sm);
  background: var(--fs-error-light);
  border: 1px solid var(--fs-error);
  border-radius: var(--fs-radius-md);
  color: var(--fs-text-primary);
  text-align: left;
}

.question-error-alert__role[b-pp78ml1ga4] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  color: var(--fs-error);
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-semibold);
}

.question-error-alert__message[b-pp78ml1ga4] {
  margin: 0;
  font-size: var(--fs-font-size-base);
  line-height: 1.5;
}
/* /Components/Diet/QuestionGuidance.razor.rz.scp.css */
/* QuestionGuidance.razor.css - Scoped styles for guidance section */

/* Base container */
.guidance-section[b-in49bsqqzq] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-md, 12px);
  max-width: 600px;
  margin: var(--fs-spacing-xl, 20px) auto 0;
  text-align: left; /* Override inherited centering */
}

/* Individual guidance item */
.guidance-item[b-in49bsqqzq] {
  background: var(--fs-bg-secondary);
  border: 1px solid var(--fs-border-default);
  border-radius: 12px;
  transition: all 0.2s ease;
  overflow: hidden;
}

.guidance-item:hover[b-in49bsqqzq] {
  border-color: var(--fs-primary-text);
  box-shadow: none;
}

/* Open state - light orange tint */
.guidance-item[open][b-in49bsqqzq] {
  background: var(--fs-bg-selected);
  border-color: var(--fs-primary-a30);
}

/* Research quote variant */
.guidance-item--research[b-in49bsqqzq] {
  background: var(--fs-bg-secondary);
}

.guidance-item--research[open][b-in49bsqqzq] {
  background: var(--fs-bg-tertiary);
  border-color: var(--fs-border-default);
}

/* Summary (clickable header) */
.guidance-header[b-in49bsqqzq] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm, 8px);
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Hide default marker in all browsers */
.guidance-header[b-in49bsqqzq]::-webkit-details-marker {
  display: none;
}

.guidance-header[b-in49bsqqzq]::marker {
  display: none;
  content: "";
}

/* Icon container */
.guidance-icon[b-in49bsqqzq] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--fs-text-secondary-a15);
  color: var(--fs-text-secondary);
  font-size: 0.9rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Icon colors when open */
.guidance-item[open] .guidance-icon[b-in49bsqqzq] {
  background: var(--fs-primary-a20);
  color: var(--fs-primary-text);
}

.guidance-item--research[open] .guidance-icon[b-in49bsqqzq] {
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-primary);
}

/* Title text */
.guidance-title[b-in49bsqqzq] {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  text-align: left;
}

/* Chevron indicator */
.guidance-chevron[b-in49bsqqzq] {
  color: var(--fs-text-muted);
  font-size: 0.75rem;
  transition:
    transform 0.3s ease,
    color 0.2s ease;
  flex-shrink: 0;
}

.guidance-item[open] .guidance-chevron[b-in49bsqqzq] {
  transform: rotate(180deg);
  color: var(--fs-primary-text);
}

.guidance-item--research[open] .guidance-chevron[b-in49bsqqzq] {
  color: var(--fs-text-primary);
}

/* Content area */
.guidance-content[b-in49bsqqzq] {
  padding: 0 1.25rem 1rem 3.5rem; /* Left indent aligns with title */
  text-align: left;
}

.guidance-content p[b-in49bsqqzq] {
  color: var(--fs-text-body);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0 0 0.5rem 0;
  text-align: left;
}

.guidance-content p:last-child[b-in49bsqqzq] {
  margin-bottom: 0;
}

/* Blockquote for research quotes */
.guidance-blockquote[b-in49bsqqzq] {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
}

.guidance-content--quote[b-in49bsqqzq] {
  padding-left: 3.5rem;
}

.guidance-content--quote .guidance-blockquote[b-in49bsqqzq] {
  border-left: 3px solid var(--fs-border-default);
  padding-left: 1rem;
}

.guidance-content--quote .guidance-blockquote p[b-in49bsqqzq] {
  color: var(--fs-text-body);
  font-style: italic;
}

/* Plain text remarks (no collapsible) */
.guidance-plain[b-in49bsqqzq] {
  background: var(--fs-bg-tertiary);
  border: 1px solid var(--fs-border-default);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-align: left;
}

.guidance-plain--research[b-in49bsqqzq] {
  background: var(--fs-bg-secondary);
  border-color: var(--fs-border-default);
}

.guidance-plain-label[b-in49bsqqzq] {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--fs-text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-align: left;
}

.guidance-plain p[b-in49bsqqzq] {
  color: var(--fs-text-body);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0 0 0.5rem 0;
  text-align: left;
}

.guidance-plain p:last-child[b-in49bsqqzq] {
  margin-bottom: 0;
}

.guidance-plain .guidance-blockquote[b-in49bsqqzq] {
  margin: 0;
  padding: 0;
  border: none;
}

/* Guidance image */
.guidance-image[b-in49bsqqzq] {
  margin-top: var(--fs-spacing-md, 12px);
  text-align: center;
}

.guidance-image img[b-in49bsqqzq] {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

/* Accessibility - focus states */
.guidance-header:focus[b-in49bsqqzq] {
  outline: 2px solid var(--fs-primary-text, var(--fs-border-focus));
  outline-offset: 2px;
  border-radius: 8px;
}

.guidance-header:focus:not(:focus-visible)[b-in49bsqqzq] {
  outline: none;
}

.guidance-header:focus-visible[b-in49bsqqzq] {
  outline: 2px solid var(--fs-primary-text, var(--fs-border-focus));
  outline-offset: 2px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .guidance-item[b-in49bsqqzq],
  .guidance-icon[b-in49bsqqzq],
  .guidance-chevron[b-in49bsqqzq] {
    transition: none;
  }
}

/* Mobile responsiveness */
@media (max-width: 576px) {
  .guidance-section[b-in49bsqqzq] {
    margin-top: var(--fs-spacing-lg, 16px);
  }

  .guidance-header[b-in49bsqqzq] {
    padding: 0.875rem 1rem;
  }

  .guidance-content[b-in49bsqqzq] {
    padding: 0 1rem 0.875rem 2.75rem;
  }

  .guidance-content--quote[b-in49bsqqzq] {
    padding-left: 2.75rem;
  }

  .guidance-icon[b-in49bsqqzq] {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .guidance-title[b-in49bsqqzq] {
    font-size: 0.9rem;
  }

  .guidance-plain[b-in49bsqqzq] {
    padding: 0.875rem 1rem;
  }
}

/* Extra small devices */
@media (max-width: 400px) {
  .guidance-header[b-in49bsqqzq] {
    padding: 0.75rem 0.875rem;
    gap: 6px;
  }

  .guidance-content[b-in49bsqqzq] {
    padding: 0 0.875rem 0.75rem 2.5rem;
  }

  .guidance-icon[b-in49bsqqzq] {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }

  .guidance-title[b-in49bsqqzq] {
    font-size: 0.85rem;
  }
}
/* /Components/Diet/QuestionnaireHistoryComponent.razor.rz.scp.css */
/* ============================================
   Answer History - Vertical Timeline Component
   ============================================ */

.answer-history[b-88bfruyhv4] {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  background: var(--fs-bg-primary);
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* ============================================
   Toggle Header
   ============================================ */

.answer-history-toggle[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  background: var(--fs-bg-primary);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.answer-history-toggle:hover[b-88bfruyhv4] {
  background: var(--fs-bg-hover);
}

.answer-history-toggle:focus[b-88bfruyhv4] {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--fs-primary-a30);
}

.toggle-content[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.history-toggle-icon[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--fs-primary);
  border-radius: 10px;
  color: var(--fs-text-inverse);
  font-size: 1rem;
}

.toggle-text[b-88bfruyhv4] {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.answer-count[b-88bfruyhv4] {
  padding: 0.25rem 0.75rem;
  background: var(--fs-success-light);
  color: var(--fs-success);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 50px;
}

.toggle-actions[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toggle-chevron[b-88bfruyhv4] {
  color: var(--fs-text-muted);
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.answer-history.expanded .toggle-chevron[b-88bfruyhv4] {
  color: var(--fs-primary-text);
}

.close-btn[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--fs-bg-tertiary);
  border: none;
  border-radius: 50%;
  color: var(--fs-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover[b-88bfruyhv4] {
  background: var(--fs-border-default);
  color: var(--fs-text-primary);
}

/* ============================================
   Timeline Content
   ============================================ */

.answer-timeline[b-88bfruyhv4] {
  padding: 0 1.25rem 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    padding 0.3s ease,
    visibility 0s 0.35s;
}

.answer-history.expanded .answer-timeline[b-88bfruyhv4] {
  max-height: 600px;
  overflow-y: auto;
  padding-top: 0.5rem;
  padding-bottom: 1.25rem;
  opacity: 1;
  visibility: visible;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease 0.1s,
    padding 0.3s ease,
    visibility 0s 0s;
}

/* ============================================
   Stage Cards
   ============================================ */

.stage-card[b-88bfruyhv4] {
  background: var(--fs-bg-primary);
  border: 2px solid var(--fs-border-default);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.25s ease;
  position: relative;
}

.stage-card.completed[b-88bfruyhv4] {
  border-color: var(--fs-success-light);
  background: var(--fs-bg-primary);
}

.stage-card.active[b-88bfruyhv4] {
  border-color: var(--fs-primary-text);
  background: var(--fs-bg-primary);
  box-shadow: none;
}

.stage-card.pending[b-88bfruyhv4] {
  border-color: var(--fs-border-default);
  background: var(--fs-bg-secondary);
  opacity: 0.7;
}

/* Stage Header */
.stage-header[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.stage-info[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stage-card .history-stage-icon[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.85rem;
  transition: all 0.25s ease;
}

.stage-card.completed .history-stage-icon[b-88bfruyhv4] {
  background: var(--fs-success);
  color: var(--fs-text-on-inverse);
}

.stage-card.active .history-stage-icon[b-88bfruyhv4] {
  background: var(--fs-bg-inverse);
  color: var(--fs-text-on-inverse);
}

.stage-card.pending .history-stage-icon[b-88bfruyhv4] {
  background: var(--fs-border-default);
  color: var(--fs-text-muted);
}

.stage-details[b-88bfruyhv4] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.history-stage-name[b-88bfruyhv4] {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.stage-status[b-88bfruyhv4] {
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stage-card.active .stage-status[b-88bfruyhv4] {
  color: var(--fs-primary-text);
}

/* Edit Button */
.edit-btn[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid var(--fs-border-default);
  border-radius: 6px;
  color: var(--fs-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-btn:hover[b-88bfruyhv4] {
  border-color: var(--fs-primary-text);
  color: var(--fs-primary-text);
  background: var(--fs-primary-a05);
}

.edit-btn:focus[b-88bfruyhv4] {
  outline: none;
  box-shadow: 0 0 0 2px var(--fs-primary-a20);
}

/* ============================================
   Answer List
   ============================================ */

.answer-list[b-88bfruyhv4] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.answer-row[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--fs-shade-a02);
  border-radius: 8px;
  gap: 1rem;
}

.answer-label[b-88bfruyhv4] {
  font-size: 0.85rem;
  color: var(--fs-text-secondary);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}

.answer-value[b-88bfruyhv4] {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  text-align: right;
  flex-shrink: 0;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.answer-unit[b-88bfruyhv4] {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--fs-text-secondary);
  margin-left: 0.25rem;
}

/* ============================================
   Answer Placeholder
   ============================================ */

.answer-placeholder[b-88bfruyhv4] {
  padding: 0.75rem;
  text-align: center;
}

.answer-placeholder span[b-88bfruyhv4] {
  font-size: 0.85rem;
  color: var(--fs-text-muted);
  font-style: italic;
}

.stage-card.active .answer-placeholder span[b-88bfruyhv4] {
  color: var(--fs-primary-text);
  font-style: normal;
}

/* ============================================
   Timeline Connector
   ============================================ */

.timeline-connector[b-88bfruyhv4] {
  width: 2px;
  height: 24px;
  margin: 0 auto;
  background: var(--fs-border-default);
  transition: all 0.25s ease;
}

.timeline-connector.completed[b-88bfruyhv4] {
  background: var(--fs-success);
}

.timeline-connector.active[b-88bfruyhv4] {
  background: var(--fs-text-primary);
}

/* ============================================
   Mobile Responsive - Inline Collapsible
   (Avoids conflict with mobile sticky CTA)
   ============================================ */

@media (max-width: 768px) {
  .answer-history[b-88bfruyhv4] {
    /* Stay inline, not fixed - avoids conflict with mobile sticky CTA */
    position: relative;
    margin: 0 0.5rem 1rem;
    border-radius: 12px;
    box-shadow: none;
  }

  .answer-history-toggle[b-88bfruyhv4] {
    padding: 0.75rem 1rem;
  }

  .answer-history.expanded .answer-timeline[b-88bfruyhv4] {
    max-height: 40vh;
  }

  .history-toggle-icon[b-88bfruyhv4] {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .toggle-text[b-88bfruyhv4] {
    font-size: 0.9rem;
  }

  .answer-count[b-88bfruyhv4] {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
  }

  .stage-card[b-88bfruyhv4] {
    padding: 0.875rem;
  }

  .stage-card .history-stage-icon[b-88bfruyhv4] {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .history-stage-name[b-88bfruyhv4] {
    font-size: 0.9rem;
  }

  .answer-row[b-88bfruyhv4] {
    padding: 0.375rem 0.5rem;
  }

  .answer-label[b-88bfruyhv4] {
    font-size: 0.8rem;
  }

  .answer-value[b-88bfruyhv4] {
    font-size: 0.85rem;
  }
}

/* ============================================
   Large Desktop - Wider layout
   ============================================ */

@media (min-width: 1200px) {
  .answer-history[b-88bfruyhv4] {
    max-width: 700px;
  }
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .answer-history[b-88bfruyhv4],
  .answer-timeline[b-88bfruyhv4],
  .stage-card[b-88bfruyhv4],
  .toggle-chevron[b-88bfruyhv4],
  .stage-card .history-stage-icon[b-88bfruyhv4],
  .timeline-connector[b-88bfruyhv4],
  .edit-btn[b-88bfruyhv4],
  .close-btn[b-88bfruyhv4],
  .answer-history-toggle[b-88bfruyhv4] {
    animation: none !important;
    transition: none !important;
  }

  /* Ensure timeline is visible/hidden instantly */
  .answer-timeline[b-88bfruyhv4] {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
  }

  .answer-history.expanded .answer-timeline[b-88bfruyhv4] {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
  }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
  .answer-history[b-88bfruyhv4] {
    border: 2px solid var(--fs-text-primary);
  }

  .stage-card[b-88bfruyhv4] {
    border-width: 2px;
  }

  .stage-card.completed[b-88bfruyhv4] {
    border-color: var(--fs-success);
  }

  .stage-card.active[b-88bfruyhv4] {
    border-color: var(--fs-primary-text);
  }

  .answer-count[b-88bfruyhv4] {
    background: var(--fs-success);
    color: var(--fs-text-on-inverse);
  }
}
/* /Components/Diet/ResearchRangeComparisonBlock.razor.rz.scp.css */
.range-comparison[b-545qf7hy3y] {
  background: var(--fs-bg-primary);
  border-radius: var(--fs-radius-sm);
  overflow: hidden;
}

.range-comparison__row[b-545qf7hy3y] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-sm) var(--fs-spacing-md);
}

.range-comparison__row--research[b-545qf7hy3y] {
  border-left: 3px solid var(--fs-text-primary);
}

.range-comparison__row--guidance[b-545qf7hy3y] {
  border-left: 3px dashed var(--fs-text-muted);
}

/* No source to name: no edge, so the row claims neither research nor Portion Pilot. */
.range-comparison__row--unattributed[b-545qf7hy3y] {
  border-left: 3px solid transparent;
}

.range-comparison__row--user[b-545qf7hy3y] {
  padding-left: var(--fs-spacing-lg);
  background: var(--fs-bg-secondary);
}

.range-comparison__label[b-545qf7hy3y] {
  /* Sentence case, not the design's capitals: a study is named by its full title (#1178). */
  font-size: var(--fs-font-size-xs);
  color: var(--fs-text-muted);
}

.range-comparison__value[b-545qf7hy3y] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--fs-spacing-sm);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  white-space: nowrap;
}

.range-comparison__band-key[b-545qf7hy3y] {
  width: 14px;
  height: 6px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-text-muted);
}

.range-comparison__marker-key[b-545qf7hy3y] {
  width: 10px;
  height: 10px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-warning);
}

.range-comparison__bar[b-545qf7hy3y] {
  padding: var(--fs-spacing-md) var(--fs-spacing-md) var(--fs-spacing-sm);
}

.range-comparison__track[b-545qf7hy3y] {
  position: relative;
  height: 16px;
}

/* The track: a neutral line behind the band. */
.range-comparison__track[b-545qf7hy3y]::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-border-default);
}

.range-comparison__band[b-545qf7hy3y] {
  position: absolute;
  top: 4px;
  height: 8px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-text-muted);
}

/* Muted by default, matching the dashed and bare row edges; only a paper's range is drawn in solid ink (#1148). */
.range-comparison--research .range-comparison__band[b-545qf7hy3y],
.range-comparison--research .range-comparison__band-key[b-545qf7hy3y] {
  background: var(--fs-text-primary);
}

.range-comparison__marker[b-545qf7hy3y] {
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-warning);
  border: 2px solid var(--fs-bg-primary);
}

.range-comparison__axis[b-545qf7hy3y] {
  display: flex;
  justify-content: space-between;
  margin-top: var(--fs-spacing-xs);
  font-size: var(--fs-font-size-xs);
  color: var(--fs-text-muted);
}
/* /Components/FoodEntry/CustomFoodCreationModal.razor.rz.scp.css */
/* CustomFoodCreationModal.razor.css */
.modal-overlay[b-cfxh71ealx] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  animation: fadeIn-b-cfxh71ealx 0.2s ease-out;
}

@keyframes fadeIn-b-cfxh71ealx {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-container[b-cfxh71ealx] {
  background: var(--fs-bg-primary);
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--fs-shadow-dialog);
  animation: slideUp-b-cfxh71ealx 0.3s ease-out;
}

@keyframes slideUp-b-cfxh71ealx {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-content[b-cfxh71ealx] {
  padding: 1.5rem;
}

.modal-header[b-cfxh71ealx] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: 1.5rem;
  background: var(--fs-bg-tertiary);
  border-bottom: 1px solid var(--fs-bg-tertiary);
  border-radius: 12px 12px 0 0;
}

.modal-header h2[b-cfxh71ealx] {
  margin: 0;
  color: var(--fs-text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-subtitle[b-cfxh71ealx] {
  margin: 0.25rem 0 0 0;
  color: var(--fs-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
}

.close-button[b-cfxh71ealx] {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--fs-text-body);
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}

.close-button:hover[b-cfxh71ealx] {
  color: var(--fs-text-primary);
}

.search-results-container[b-cfxh71ealx] {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--fs-bg-secondary);
  border: 1px solid var(--fs-border-default);
  border-radius: 8px;
  animation: fadeIn-b-cfxh71ealx 0.2s ease-out;
}

.search-results-grid[b-cfxh71ealx] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}

.search-result-card[b-cfxh71ealx] {
  padding: 0.75rem;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.search-result-card:hover[b-cfxh71ealx] {
  border-color: var(--fs-primary-text);
  box-shadow: none;
}

.similar-foods-grid[b-cfxh71ealx] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.similar-food-card[b-cfxh71ealx] {
  padding: 1rem;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.similar-food-card:hover[b-cfxh71ealx] {
  border-color: var(--fs-primary-text);
  box-shadow: none;
}

.macro-info[b-cfxh71ealx] {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--fs-text-body);
}

/* "Similar foods" reuse hint + card affordance */
.similar-foods-hint[b-cfxh71ealx] {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--fs-text-secondary);
}

.similar-food-card-head[b-cfxh71ealx] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.use-chip[b-cfxh71ealx] {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fs-primary-text);
  border: 1px solid var(--fs-primary-light);
  border-radius: 8px;
  padding: 4px 10px;
}

.similar-food-card:hover .use-chip[b-cfxh71ealx] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  border-color: var(--fs-primary);
}

/* Progress Steps */
.progress-steps[b-cfxh71ealx] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 1.5rem 2rem;
  padding: 1rem 0;
}

.step[b-cfxh71ealx] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.step.active[b-cfxh71ealx] {
  opacity: 1;
}

.step-number[b-cfxh71ealx] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--fs-border-default);
  color: var(--fs-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.step.active .step-number[b-cfxh71ealx] {
  background: var(--fs-bg-inverse);
  color: var(--fs-text-on-inverse);
  box-shadow: none;
}

.step-label[b-cfxh71ealx] {
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
  font-weight: 500;
}

.step-connector[b-cfxh71ealx] {
  width: 4rem;
  height: 2px;
  background: var(--fs-border-default);
  margin: 0 0.5rem;
  margin-bottom: 1.5rem;
  transition: background 0.3s ease;
}

.step-connector.active[b-cfxh71ealx] {
  background: var(--fs-text-primary);
}

/* Form Styles */
.form-section[b-cfxh71ealx] {
  padding: 0 1.5rem;
}

.form-group[b-cfxh71ealx] {
  margin-bottom: 1.5rem;
}

.form-label[b-cfxh71ealx] {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  margin-bottom: 0.5rem;
}

.form-label i[b-cfxh71ealx] {
  color: var(--fs-text-primary);
  font-size: 1rem;
}

.required[b-cfxh71ealx] {
  color: var(--fs-error);
  margin-left: 0.25rem;
}

.input-wrapper[b-cfxh71ealx] {
  position: relative;
}

/* Custom input styling for MudTextField */
[b-cfxh71ealx] .custom-input .mud-input-root {
  border-radius: 8px;
  transition: all 0.2s ease;
}

[b-cfxh71ealx] .custom-input .mud-input-root:hover {
  border-color: var(--fs-primary-text);
}

[b-cfxh71ealx]
  .custom-input
  .mud-input-root.mud-input-root-outlined.Mui-focused
  .mud-input-outlined-border {
  border-color: var(--fs-primary-text);
  border-width: 2px;
}

[b-cfxh71ealx] .custom-input .mud-input-helper-text {
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
  margin-top: 0.25rem;
}

/* Action Buttons */
.modal-actions[b-cfxh71ealx] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--fs-bg-secondary);
  margin: 2rem -1.5rem -1.5rem;
  border-radius: 0 0 12px 12px;
  border-top: 1px solid var(--fs-border-default);
}

.btn-cancel[b-cfxh71ealx] {
  background: none;
  border: none;
  color: var(--fs-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 1.5rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn-cancel:hover[b-cfxh71ealx] {
  color: var(--fs-text-primary);
}

.btn-continue[b-cfxh71ealx] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: none;
}

.btn-continue:hover:not(.disabled)[b-cfxh71ealx] {
  background: var(--fs-primary-hover);
  box-shadow: none;
}

.btn-continue.disabled[b-cfxh71ealx] {
  background: var(--fs-border-hover);
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 640px) {
  .modal-container[b-cfxh71ealx] {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-header[b-cfxh71ealx] {
    border-radius: 0;
  }

  .progress-steps[b-cfxh71ealx] {
    margin: 0 1rem 1.5rem;
  }

  .step-label[b-cfxh71ealx] {
    font-size: 0.7rem;
  }

  .form-section[b-cfxh71ealx] {
    padding: 0 1rem;
  }

  .modal-actions[b-cfxh71ealx] {
    flex-direction: column-reverse;
    gap: 0.75rem;
    padding: 1rem;
  }

  .btn-cancel[b-cfxh71ealx],
  .btn-continue[b-cfxh71ealx] {
    width: 100%;
    justify-content: center;
  }

  .search-results-grid[b-cfxh71ealx],
  .similar-foods-grid[b-cfxh71ealx] {
    grid-template-columns: 1fr;
  }
}

/* Unauthenticated button styles */
.custom-food-btn.unauthenticated[b-cfxh71ealx] {
  background-color: var(--fs-border-default);
  color: var(--fs-text-body);
  border-color: var(--fs-border-hover);
}

.custom-food-btn.unauthenticated:hover[b-cfxh71ealx] {
  background-color: var(--fs-border-hover);
  border-color: var(--fs-text-muted);
  color: var(--fs-text-primary);
}

/* Authentication Modal Styles */
.auth-modal-container[b-cfxh71ealx] {
  background: var(--fs-bg-primary);
  border-radius: 16px;
  width: 90%;
  max-width: 450px;
  box-shadow: var(--fs-shadow-dialog);
  animation: slideUp-b-cfxh71ealx 0.3s ease-out;
}

.auth-modal-content[b-cfxh71ealx] {
  padding: 0;
}

.auth-modal-header[b-cfxh71ealx] {
  text-align: center;
  padding: 2rem 2rem 1.5rem;
  position: relative;
}

.auth-modal-header h2[b-cfxh71ealx] {
  margin: 1rem 0 0.5rem;
  color: var(--fs-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.auth-modal-header .modal-close-button[b-cfxh71ealx] {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.auth-icon[b-cfxh71ealx] {
  color: var(--fs-text-primary);
  font-size: 3rem !important;
}

.auth-modal-body[b-cfxh71ealx] {
  padding: 0 2rem 2rem;
}

.value-props[b-cfxh71ealx] {
  background-color: var(--fs-bg-secondary);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.value-prop-item[b-cfxh71ealx] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--fs-text-body);
  font-size: 0.95rem;
}

.value-prop-item:last-child[b-cfxh71ealx] {
  margin-bottom: 0;
}

.value-prop-item .mud-icon-root[b-cfxh71ealx] {
  font-size: 1.25rem !important;
}

.auth-actions[b-cfxh71ealx] {
  text-align: center;
}

.auth-actions .mud-button[b-cfxh71ealx] {
  text-transform: none;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.auth-actions .mud-button-filled[b-cfxh71ealx] {
  background-color: var(--fs-primary) !important;
  box-shadow: none;
}

.auth-actions .mud-button-filled:hover[b-cfxh71ealx] {
  background-color: var(--fs-primary-hover) !important;
  box-shadow: none;
}

.auth-actions .mud-button-outlined[b-cfxh71ealx] {
  border-color: var(--fs-primary-text) !important;
  color: var(--fs-primary-text) !important;
}

.auth-actions .mud-button-outlined:hover[b-cfxh71ealx] {
  background-color: var(--fs-primary-a08) !important;
}

@media (max-width: 640px) {
  .auth-modal-container[b-cfxh71ealx] {
    width: 95%;
    margin: 1rem;
  }

  .auth-modal-header[b-cfxh71ealx] {
    padding: 1.5rem 1.5rem 1rem;
  }

  .auth-modal-body[b-cfxh71ealx] {
    padding: 0 1.5rem 1.5rem;
  }
}

/* Tab styling */
.mud-tabs[b-cfxh71ealx] {
  margin-bottom: 1rem;
}

/* The two tabs share the row. Mud's 160px minimum (set inline — hence MinimumTabWidth="0px" on the
   MudTabs) plus uppercase labels pushed "Manual Entry" off-screen. ::deep because the tab is rendered by the child component; not under .modal-content
   because the phone layout renders its tabs outside it. */
[b-cfxh71ealx] .mud-tab {
  flex: 1 1 0;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

/* The tab bar clips overflow, so the global 2px-outside ring was cut on three sides: draw it inside. */
[b-cfxh71ealx] .mud-tab:focus-visible {
  outline-offset: -2px;
}

/* Mud sizes the tab bar to max-content, so the tabs above could never shrink into a narrow sheet. */
[b-cfxh71ealx] .mud-tabs-tabbar-wrapper {
  width: 100%;
}

/* Below 360px two icon + label tabs cannot fit (Mud then adds scroll arrows and hides "Manual Entry");
   the labels alone do. */
@media (max-width: 359.98px) {
  [b-cfxh71ealx] .mud-tab {
    padding-inline: 6px;
  }

  [b-cfxh71ealx] .mud-tab .mud-icon-root {
    display: none;
  }
}

/* Scan tab content styling */
.scan-tab-content[b-cfxh71ealx] {
  min-height: 400px;
}

.scan-intro[b-cfxh71ealx] {
  padding: 2rem;
}

.scan-intro h4[b-cfxh71ealx] {
  color: var(--mud-palette-text-primary);
  margin-bottom: 1rem;
}

/* Modal improvements - Override existing modal-container styles for tabs */
.modal-container[b-cfxh71ealx] {
  max-width: 900px;
  width: 90%;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
}

.modal-content[b-cfxh71ealx] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Tab panel content scrolling.
   MudTabs renders `.mud-tabs > .mud-tabs-panels`, both owned by the child component, so these need
   ::deep to escape this component's scope. Without it the selectors compile to `.mud-tabs-panels[b-hash]`
   and match nothing, `.modal-content`'s overflow:hidden clips the panel, and tall content dead-ends.
   min-height:0 is what makes it scroll: a flex item's automatic minimum size is its content height, so
   without it the panel outgrows its flex allocation instead of overflowing inside itself. */
.modal-content[b-cfxh71ealx]  .mud-tabs {
  flex: 1;
  min-height: 0;
}

.modal-content[b-cfxh71ealx]  .mud-tabs-panels {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal-container[b-cfxh71ealx] {
    width: 95%;
    max-height: 95vh;
  }

  .scan-tab-content[b-cfxh71ealx] {
    min-height: 300px;
  }

  .scan-intro[b-cfxh71ealx] {
    padding: 1rem;
  }
}

/* Scan-first hero — the primary path into the modal (design decision: never bury scan) */
.scan-hero[b-cfxh71ealx] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--fs-primary);
  border: none;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  font-family: inherit;
  transition: background 0.2s ease;
}

.scan-hero:hover[b-cfxh71ealx] {
  background: var(--fs-primary-hover);
}

.scan-hero[b-cfxh71ealx]  .scan-hero-icon {
  color: var(--fs-text-inverse);
  font-size: 2rem;
}

.scan-hero-text[b-cfxh71ealx] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.scan-hero-title[b-cfxh71ealx] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-inverse);
}

.scan-hero-subtitle[b-cfxh71ealx] {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

.scan-hero[b-cfxh71ealx]  .scan-hero-arrow {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.375rem;
}

/* "or enter manually" divider between the scan hero and the manual fields */
.manual-divider[b-cfxh71ealx] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1.25rem 0;
}

.manual-divider[b-cfxh71ealx]::before,
.manual-divider[b-cfxh71ealx]::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fs-border-default);
}

.manual-divider span[b-cfxh71ealx] {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fs-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* /Components/FoodEntry/CustomFoodDeleteConfirm.razor.rz.scp.css */
/* CustomFoodDeleteConfirm.razor.css */

.cfd-body[b-qd1plsxygn] {
  display: flex;
  gap: 14px;
  padding: 0.5rem 0.25rem 0;
}

.cfd-icon[b-qd1plsxygn] {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--fs-error-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fs-error);
  font-size: 0.95rem;
}

.cfd-title[b-qd1plsxygn] {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fs-text-primary);
}

.cfd-copy[b-qd1plsxygn] {
  font-size: 0.85rem;
  color: var(--fs-text-body);
  line-height: 1.55;
  margin-top: 6px;
}

.cfd-actions[b-qd1plsxygn] {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 1.25rem;
}
/* /Components/FoodEntry/CustomFoodEditorModal.razor.rz.scp.css */
/* CustomFoodEditorModal.razor.css — inner-content styles mirrored from CustomFoodCreationModal.
   The AdaptiveModal shell supplies the outer chrome, so only the body needs styling here. */

.editor-body[b-2crx021ne8] {
  padding: 1rem 1.25rem 0;
}

/* The tabs stay mounted (to preserve the form's validation state) but are hidden while the
   rescan diff is shown over them. */
.editor-tabs-hidden[b-2crx021ne8] {
  display: none;
}

/* Rescan hero — the promoted path, mirroring the create modal's scan-first hero. */
.scan-hero[b-2crx021ne8] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--fs-primary);
  border: none;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  font-family: inherit;
  transition: background 0.2s ease;
}

.scan-hero:hover[b-2crx021ne8] {
  background: var(--fs-primary-hover);
}

.scan-hero[b-2crx021ne8]  .scan-hero-icon {
  color: var(--fs-text-inverse);
  font-size: 2rem;
}

.scan-hero-text[b-2crx021ne8] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.scan-hero-title[b-2crx021ne8] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-inverse);
}

.scan-hero-subtitle[b-2crx021ne8] {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

.scan-hero[b-2crx021ne8]  .scan-hero-arrow {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.375rem;
}

/* "or edit manually" divider between the rescan hero and the manual fields */
.manual-divider[b-2crx021ne8] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1.25rem 0;
}

.manual-divider[b-2crx021ne8]::before,
.manual-divider[b-2crx021ne8]::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fs-border-default);
}

.manual-divider span[b-2crx021ne8] {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fs-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Form fields */
.form-section[b-2crx021ne8] {
  padding: 0;
}

.form-group[b-2crx021ne8] {
  margin-bottom: 1.5rem;
}

.form-label[b-2crx021ne8] {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  margin-bottom: 0.5rem;
}

.form-label i[b-2crx021ne8] {
  color: var(--fs-primary-text);
  font-size: 1rem;
}

.required[b-2crx021ne8] {
  color: var(--fs-error);
  margin-left: 0.25rem;
}

.input-wrapper[b-2crx021ne8] {
  position: relative;
}

[b-2crx021ne8] .custom-input .mud-input-root {
  border-radius: 8px;
  transition: all 0.2s ease;
}

[b-2crx021ne8] .custom-input .mud-input-root:hover {
  border-color: var(--fs-primary-text);
}

[b-2crx021ne8]
  .custom-input
  .mud-input-root.mud-input-root-outlined.Mui-focused
  .mud-input-outlined-border {
  border-color: var(--fs-primary-text);
  border-width: 2px;
}

[b-2crx021ne8] .custom-input .mud-input-helper-text {
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
  margin-top: 0.25rem;
}

/* Rescan tab */
.scan-tab-content[b-2crx021ne8] {
  min-height: 400px;
}

@media (max-width: 640px) {
  .editor-body[b-2crx021ne8] {
    padding: 0.75rem 1rem 0;
  }

  .scan-tab-content[b-2crx021ne8] {
    min-height: 300px;
  }
}
/* /Components/FoodEntry/CustomFoodList.razor.rz.scp.css */
/* CustomFoodsList.razor.css */
.custom-foods-container[b-dhnh9zxiw0] {
  margin-bottom: 1.5rem;
}

/* Quick Access Section */
.quick-access-scroll[b-dhnh9zxiw0] {
  display: flex;
  overflow-x: auto;
  gap: 0.5rem;
  padding: 0.25rem 0;
  scrollbar-width: thin;
  -ms-overflow-style: none;
}

.quick-access-scroll[b-dhnh9zxiw0]::-webkit-scrollbar {
  height: 4px;
}

.quick-access-scroll[b-dhnh9zxiw0]::-webkit-scrollbar-track {
  background: var(--fs-bg-tertiary);
  border-radius: 2px;
}

.quick-access-scroll[b-dhnh9zxiw0]::-webkit-scrollbar-thumb {
  background: var(--fs-text-muted);
  border-radius: 2px;
}

.quick-access-item[b-dhnh9zxiw0] {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: var(--fs-bg-selected);
  border: 1px solid var(--fs-bg-selected);
  border-radius: 2rem;
  color: var(--fs-primary-text);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-access-item:hover[b-dhnh9zxiw0] {
  background-color: var(--fs-bg-selected);
}

.quick-access-item .brand-name[b-dhnh9zxiw0] {
  color: var(--fs-text-secondary);
  margin-left: 0.5rem;
  font-size: 0.8em;
}

.quick-access-more[b-dhnh9zxiw0] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  background-color: var(--fs-bg-secondary);
  border: 1px solid var(--fs-border-default);
  border-radius: 50%;
  color: var(--fs-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-access-more:hover[b-dhnh9zxiw0] {
  background-color: var(--fs-border-default);
}

/* Expanded Grid View */
.custom-foods-grid[b-dhnh9zxiw0] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.food-card[b-dhnh9zxiw0] {
  background-color: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.food-card:hover[b-dhnh9zxiw0] {
  border-color: var(--fs-primary-text);
  box-shadow: none;
}

.food-card-header[b-dhnh9zxiw0] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.food-card-header i[b-dhnh9zxiw0] {
  color: var(--fs-primary-text);
  font-size: 0.875rem;
}

.food-card .food-name[b-dhnh9zxiw0] {
  font-weight: 500;
  color: var(--fs-text-primary);
}

.food-card .brand-name[b-dhnh9zxiw0] {
  color: var(--fs-text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.food-card .nutrition-info[b-dhnh9zxiw0] {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--fs-text-body);
  margin-bottom: 0.25rem;
}

/* Custom Foods Badge */
.custom-foods-badge[b-dhnh9zxiw0] {
  color: var(--fs-primary-text);
  background-color: var(--fs-bg-selected);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .custom-foods-grid[b-dhnh9zxiw0] {
    grid-template-columns: 1fr;
  }

  .food-card[b-dhnh9zxiw0] {
    padding: 0.75rem;
  }
}
/* /Components/FoodEntry/CustomFoodNutritionForm.razor.rz.scp.css */
/* CustomFoodNutritionForm.razor.css */

h3[b-ljrioza629],
h4[b-ljrioza629] {
  color: var(--fs-text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--fs-border-default);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

[b-ljrioza629] .mud-input {
  margin-bottom: 0.5rem;
}

[b-ljrioza629] .validation-message {
  color: var(--fs-error); /* MudBlazor default error color */
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

@media (max-width: 600px) {
  [b-ljrioza629] .mud-grid {
    margin-top: 1rem;
  }

  [b-ljrioza629] .mud-grid-item {
    padding: 0.5rem;
  }
}

/* Section hint under a heading */
.section-hint[b-ljrioza629] {
  margin: -0.5rem 0 1rem;
  font-size: 0.82rem;
  color: var(--fs-text-secondary);
}

/* Live macro-split bar */
.macro-split[b-ljrioza629] {
  margin-bottom: 0.5rem;
}

.macro-split-bar[b-ljrioza629] {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--fs-bg-tertiary);
}

.macro-seg[b-ljrioza629] {
  transition: width 0.25s ease;
}

.macro-seg-carbs[b-ljrioza629] {
  background: var(--fs-macro-carbs);
}

.macro-seg-protein[b-ljrioza629] {
  background: var(--fs-macro-protein);
}

.macro-seg-fat[b-ljrioza629] {
  background: var(--fs-macro-fat);
}

.macro-split-legend[b-ljrioza629] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: var(--fs-text-secondary);
}

.macro-split-legend strong[b-ljrioza629] {
  color: var(--fs-text-primary); /* the numbers are ink; only the key words carry macro colour */
}

.macro-split-legend .macro-carbs[b-ljrioza629] {
  color: var(--fs-macro-carbs); /* legend words key the bar segments */
}

.macro-split-legend .macro-protein[b-ljrioza629] {
  color: var(--fs-macro-protein);
}

.macro-split-legend .macro-fat[b-ljrioza629] {
  color: var(--fs-macro-fat);
}

.macro-split-legend .macro-kcal[b-ljrioza629] {
  margin-left: auto;
  color: var(--fs-text-muted);
}

/* Collapsible detailed-nutrition toggle (::deep — the class lands on MudButton's rendered button) */
[b-ljrioza629] .detailed-nutrition-toggle {
  text-transform: none;
}

.detailed-nutrition-hint[b-ljrioza629] {
  margin-left: 0.4rem;
  font-weight: 500;
  color: var(--fs-text-muted);
  text-transform: none;
}

/* Error summary banner shown above the form after a blocked save */
.validation-banner[b-ljrioza629] {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--fs-error-light);
  border: 1px solid var(--fs-error-light);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

[b-ljrioza629] .validation-banner-icon {
  color: var(--fs-error);
  font-size: 1.25rem;
}

.validation-banner-title[b-ljrioza629] {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fs-error-text);
}

.validation-banner-items[b-ljrioza629] {
  font-size: 0.8rem;
  color: var(--fs-error-text);
  margin-top: 2px;
}

/* Live calories-vs-macros mismatch strip under the macro bar */
.macro-mismatch[b-ljrioza629] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
  background: var(--fs-error-light);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  color: var(--fs-error-text);
  line-height: 1.4;
}

[b-ljrioza629] .macro-mismatch-icon {
  color: var(--fs-error);
  font-size: 1rem;
}

/* "N issues above" note next to the disabled save button */
.issues-count[b-ljrioza629] {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fs-error);
  margin-right: 0.75rem;
  white-space: nowrap;
}

/* Phones: three actions share one row, so their labels wrap and a pill turns into an oval. Tighter
   padding keeps most on one line, and the row takes the 12px control shape together. (px-6 is !important.) */
@media (max-width: 575.98px) {
  .cf-form-actions[b-ljrioza629],
  .cf-form-actions > div[b-ljrioza629] {
    flex-wrap: wrap;
    gap: 8px;
  }

  .cf-form-actions[b-ljrioza629]  .mud-button-root {
    margin-right: 0 !important; /* the 8px gap replaces mr-3 */
    padding-inline: 12px !important;
    border-radius: var(--fs-radius-md);
  }
}
/* /Components/FoodEntry/CustomFoodRescanDiff.razor.rz.scp.css */
/* CustomFoodRescanDiff.razor.css — the Current → Scanned review table. */

.rescan-diff[b-3pcejzirvw] {
  padding: 0.5rem 1.25rem 1rem;
}

.rescan-diff-lead[b-3pcejzirvw] {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--fs-text-secondary);
}

.rescan-diff-head[b-3pcejzirvw],
.rescan-diff-row[b-3pcejzirvw] {
  display: grid;
  grid-template-columns: 1fr 108px 24px 108px;
  gap: 8px;
  align-items: center;
}

.rescan-diff-head[b-3pcejzirvw] {
  padding: 6px 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
}

.rescan-diff-head .col-value[b-3pcejzirvw] {
  text-align: right;
}

.rescan-diff-row[b-3pcejzirvw] {
  padding: 9px 0;
  border-top: 1px solid var(--fs-bg-tertiary);
  font-size: 0.9rem;
  font-variant-numeric: normal;
}

.row-label[b-3pcejzirvw] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fs-text-body);
  font-weight: 500;
}

.dot[b-3pcejzirvw] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.col-value[b-3pcejzirvw] {
  text-align: right;
}

.col-value.old[b-3pcejzirvw] {
  color: var(--fs-text-body);
}

.col-value.new[b-3pcejzirvw] {
  color: var(--fs-text-muted);
}

.arrow[b-3pcejzirvw] {
  text-align: center;
  font-size: 0.72rem;
  color: var(--fs-text-muted);
}

/* A changed row: strike the old value, spotlight the new one. */
.is-changed .col-value.old[b-3pcejzirvw] {
  color: var(--fs-text-muted);
  text-decoration: line-through;
}

.is-changed .col-value.new[b-3pcejzirvw] {
  color: var(--fs-success-text);
  font-weight: 600;
  background: var(--fs-success-light);
  border-radius: 6px;
  padding: 2px 8px;
}

.rescan-diff-actions[b-3pcejzirvw] {
  display: flex;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fs-border-default);
}

.rescan-diff-actions .spacer[b-3pcejzirvw] {
  flex: 1;
}
/* /Components/FoodEntry/CustomFoodsManagerModal.razor.rz.scp.css */
/* CustomFoodsManagerModal.razor.css */

.cfm-list[b-8ach0r6yop] {
  display: flex;
  flex-direction: column;
}

.cfm-row[b-8ach0r6yop] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--fs-bg-tertiary);
}

.cfm-row:hover[b-8ach0r6yop] {
  background: var(--fs-bg-hover);
}

.cfm-row-main[b-8ach0r6yop] {
  flex: 1;
  min-width: 0;
}

.cfm-row-name[b-8ach0r6yop] {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fs-text-primary);
}

.cfm-brand[b-8ach0r6yop] {
  font-weight: 400;
  color: var(--fs-text-secondary);
}

.cfm-macros[b-8ach0r6yop] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--fs-text-body);
  font-variant-numeric: normal;
}

.cfm-kcal[b-8ach0r6yop] {
  font-weight: 600;
}

.cfm-macro[b-8ach0r6yop] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cfm-macro .dot[b-8ach0r6yop] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.cfm-serving[b-8ach0r6yop] {
  color: var(--fs-text-muted);
}

.cfm-action[b-8ach0r6yop]  .mud-icon-root {
  color: var(--fs-text-muted);
}

.cfm-action-edit:hover[b-8ach0r6yop]  .mud-icon-root {
  color: var(--fs-primary-text);
}

.cfm-action-delete:hover[b-8ach0r6yop]  .mud-icon-root {
  color: var(--fs-error);
}

/* Footer: count + create chip */
.cfm-footer[b-8ach0r6yop] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 4px;
  margin-top: 8px;
  border-top: 1px solid var(--fs-border-default);
}

.cfm-count[b-8ach0r6yop] {
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
}

/* Empty state */
.cfm-empty[b-8ach0r6yop] {
  padding: 2.5rem 1rem 3rem;
  text-align: center;
}

.cfm-empty-icon[b-8ach0r6yop] {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--fs-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fs-text-secondary);
  font-size: 1.25rem;
}

.cfm-empty-title[b-8ach0r6yop] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.cfm-empty-text[b-8ach0r6yop] {
  font-size: 0.85rem;
  color: var(--fs-text-secondary);
  line-height: 1.55;
  margin: 6px auto 0;
  max-width: 320px;
}

.cfm-empty-actions[b-8ach0r6yop] {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
/* /Components/FoodSelection/FoodSelection.razor.rz.scp.css */
/* FoodSelection.razor.css */
/* Note: Design tokens are imported globally in _Layout.cshtml */
/* This file uses CSS variables defined in design-tokens.css */

/* ============================================
   FOOD SEARCH FIELD — Claude Design "1a Outline" (#983)
   One 44px outlined field: magnifier, text and a round mic on one centre line.
   .search-hero-zone owns the single border and focus ring; everything inside is
   borderless. Phones and tablets render a tap-to-open .search-chip-trigger (typing
   happens in the bottom sheet); desktop renders TomSelect's inline .ts-control.
   ============================================ */

[b-3soal3mqbs] .search-hero-zone {
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-control);
  border-radius: var(--fs-radius-md);
  padding: 0; /* Children fill edge-to-edge */
  margin-bottom: var(--fs-spacing-lg);
  max-width: 560px; /* Keeps the mic near the text in a wide desktop column */
  box-shadow: none;
  transition: var(--fs-transition-all);
  overflow: clip; /* Clip children to border-radius without new BFC (avoids iOS Safari reflow issues) */
}

/* Ring on desktop typing, but only on keyboard focus for the mobile button — a tap must not
   leave a ring behind while the sheet is open. */
[b-3soal3mqbs] .search-hero-zone:has(.ts-wrapper.focus),
[b-3soal3mqbs] .search-hero-zone:has(.search-chip-trigger:focus-visible) {
  border-color: var(--fs-border-focus);
  box-shadow: 0 0 0 3px var(--fs-primary-a18);
}

[b-3soal3mqbs] .search-hero-zone:has(.search-chip-trigger:active:not(:disabled)) {
  border-color: var(--fs-primary-border);
}

/* Recording keeps the mic's red (#dc3545, Bootstrap danger) on the whole field. */
[b-3soal3mqbs] .search-hero-zone:has(.voice-mic-btn.recording) {
  border-color: var(--fs-recording);
  box-shadow: 0 0 0 3px var(--fs-recording-a18);
}

/* Search microcopy — hidden in V3, placeholder text is sufficient */
[b-3soal3mqbs] .search-microcopy {
  display: none;
}

/* The wrapper's mobile margin-bottom (here and in split-layout.css) sat INSIDE the border and
   left a 16px empty strip under the 60px button — the "off-centre" field. */
[b-3soal3mqbs] .search-hero-zone .search-bar-wrapper {
  margin-bottom: 0;
}

[b-3soal3mqbs] .search-hero-zone .search-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  min-height: 42px; /* 44px with the 1px border */
  padding-right: var(--fs-spacing-xs); /* The mic's inset */
}

[b-3soal3mqbs] .search-hero-zone .tomselect-container-integrated {
  flex: 1;
  min-width: 0;
}

/* ── Mobile: tap-to-open button ── */
[b-3soal3mqbs] .search-hero-zone .search-chip-trigger {
  min-height: 42px;
  padding: 0 0 0 var(--fs-spacing-md);
  gap: var(--fs-spacing-sm);
  border: none !important;
  border-radius: 0 !important;
  background: var(--fs-bg-primary) !important;
  line-height: 1;
  /* NOTE: no `box-shadow:none` here — the chip has no resting shadow, and overriding it with
     !important would kill the search-pulse glow animation (keyframes animate box-shadow). The
     :hover/:focus rule below suppresses the chip's own focus ring; the hero owns the ring. */
}
[b-3soal3mqbs] .search-hero-zone .search-chip-trigger:hover:not(:disabled),
[b-3soal3mqbs] .search-hero-zone .search-chip-trigger:focus {
  border: none !important;
  box-shadow: none !important;
}
[b-3soal3mqbs] .search-hero-zone .search-chip-trigger:active:not(:disabled) {
  background: var(--fs-bg-selected) !important;
  transform: none;
}

/* Plain magnifier — no raised white badge. `.search-chip-trigger` in each selector outranks
   TomSelectDropdown's own `.search-chip-trigger .chip-*` rules, which would otherwise tie. */
[b-3soal3mqbs] .search-hero-zone .search-chip-trigger .chip-icon-wrapper {
  width: 20px;
  height: 20px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  color: var(--fs-text-secondary);
}
[b-3soal3mqbs] .search-hero-zone .search-chip-trigger .chip-icon-wrapper svg {
  width: 20px;
  height: 20px;
}

/* Grey, regular weight: dark blue read as a link */
[b-3soal3mqbs] .search-hero-zone .search-chip-trigger .chip-text {
  color: var(--fs-text-secondary);
  font-weight: var(--fs-font-weight-normal);
  font-size: 16px; /* Prevent iOS zoom */
  line-height: 1;
}

/* ── Desktop: inline TomSelect ── */
/* !important beats split-layout.css `.food-search-primary input, .ts-control { padding: 12px
   !important }`, which padded BOTH the control and its input into a 71px field. */
[b-3soal3mqbs] .search-hero-zone .ts-control {
  min-height: 42px !important;
  padding: 0 0 0 var(--fs-spacing-md) !important;
  gap: var(--fs-spacing-sm);
  align-items: center;
  font-size: 16px !important;
  line-height: 1;
  border: none !important;
  box-shadow: none !important;
  background: var(--fs-bg-primary);
  border-radius: 0; /* Parent clips corners */
}

[b-3soal3mqbs] .search-hero-zone .ts-control input {
  padding: 0 !important;
  font-size: 16px !important;
  color: var(--fs-text-primary);
  caret-color: var(--fs-primary-text);
}

[b-3soal3mqbs] .search-hero-zone .ts-control:hover,
[b-3soal3mqbs] .search-hero-zone .ts-control:focus,
[b-3soal3mqbs] .search-hero-zone .ts-wrapper.focus .ts-control {
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

/* Same magnifier as the mobile button, drawn as a mask so it takes the field's colour. */
[b-3soal3mqbs] .search-hero-zone .ts-control::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-color: var(--fs-text-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13L17 17'/%3E%3C/svg%3E")
    center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13L17 17'/%3E%3C/svg%3E")
    center / 20px 20px no-repeat;
}
[b-3soal3mqbs] .search-hero-zone .ts-wrapper.focus .ts-control::before {
  background-color: var(--fs-primary);
}

/* !important: style.css sets every ::placeholder to #7a7c6a !important. */
[b-3soal3mqbs] .search-hero-zone .ts-control input::placeholder {
  color: var(--fs-text-secondary) !important;
  font-weight: var(--fs-font-weight-normal);
  opacity: 1;
}
[b-3soal3mqbs] .search-hero-zone .ts-wrapper.focus .ts-control input::placeholder {
  color: var(--fs-text-muted) !important;
}

[b-3soal3mqbs] .search-hero-zone .ts-wrapper .clear-button {
  color: var(--fs-text-muted);
  font-size: 18px;
}
[b-3soal3mqbs] .search-hero-zone .ts-wrapper .clear-button:hover {
  color: var(--fs-text-secondary);
}

/* ── Mic: round tinted button inside the field, no divider ── */
[b-3soal3mqbs] .search-hero-zone .voice-mic-btn,
[b-3soal3mqbs] .search-hero-zone .voice-mic-skeleton {
  position: relative;
  flex: none;
  align-self: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: var(--fs-radius-pill);
  font-size: 1.125rem; /* 18px glyph */
}

/* 44px tap target around the 36px circle */
[b-3soal3mqbs] .search-hero-zone .voice-mic-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
}

[b-3soal3mqbs] .search-hero-zone .voice-mic-btn:focus-visible {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 1px; /* Stays inside the field, which clips */
}

[b-3soal3mqbs] .search-hero-zone .voice-mic-compact:not(.recording):not(.processing):not(.success):not(.voice-mic-unsupported) {
  background: var(--fs-primary-light);
  color: var(--fs-primary-text);
}

[b-3soal3mqbs] .search-hero-zone .voice-mic-compact:not(.recording):not(.processing):not(.success):not(.voice-mic-unsupported):hover:not(:disabled) {
  background: var(--fs-primary-bg);
  color: var(--fs-primary-text-hover);
  transform: none;
  box-shadow: none;
}

[b-3soal3mqbs] .search-hero-zone .voice-mic-compact:not(.recording):not(.processing):not(.success):not(.voice-mic-unsupported):active:not(:disabled) {
  color: var(--fs-primary-text-active);
}

/* Mobile adjustments for search hero */
@media (max-width: 768px) {
  [b-3soal3mqbs] .search-hero-zone {
    margin-bottom: var(--fs-spacing-md);
  }
}


/* ============================================ */

[b-3soal3mqbs] .page-title {
  color: var(--fs-text-primary);
  font-weight: var(--fs-font-weight-semibold);
  text-align: center;
  margin: var(--fs-spacing-4xl) auto var(--fs-spacing-3xl);
  font-size: var(--fs-font-size-2xl);
  line-height: var(--fs-line-height-relaxed);
  max-width: 700px;
  letter-spacing: -0.02em;
}

/* Highlight key phrase in title */
[b-3soal3mqbs] .page-title strong {
  color: var(--fs-text-primary);
  font-weight: var(--fs-font-weight-bold);
}

/* Card container polish */
[b-3soal3mqbs] .card.border-0.shadow-sm {
  border-radius: var(--fs-radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
}

[b-3soal3mqbs] .card-body.p-4 {
  padding: var(--fs-spacing-2xl) !important;
}

/* TomSelect Integration - Core styling is in tomselect-custom.css */
/* Component-specific overrides and integrations only */

[b-3soal3mqbs] .tomselect-wrapper {
  position: relative;
  width: 100%;
  /* TomSelect wrapper styling handled by tomselect-custom.css */
}

/* Ensure TomSelect inherits the design system properly */
[b-3soal3mqbs] .ts-wrapper {
  font-family: var(--fs-font-family);
  /* All other styling handled by tomselect-custom.css */
}

/* TomSelect focus state enhancement */
[b-3soal3mqbs] .ts-wrapper.focus .ts-control {
  border-color: var(--fs-primary-text) !important;
  box-shadow: 0 0 0 3px var(--fs-primary-a12) !important;
}

/* TomSelect input placeholder styling */
[b-3soal3mqbs] .ts-control input::placeholder {
  color: var(--fs-text-muted);
  font-weight: var(--fs-font-weight-normal);
}

/* TomSelect animations are defined in tomselect-custom.css */

/* Custom Foods Badge */
[b-3soal3mqbs] .custom-foods-badge {
  color: var(--fs-text-secondary);
  background-color: var(--fs-bg-tertiary);
  padding: var(--fs-spacing-xs) var(--fs-spacing-md);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-font-size-xs);
  display: inline-block;
}

/* Custom Food Section */
[b-3soal3mqbs] .custom-food-section {
  margin-top: 1rem;
  text-align: center;
}

/* Custom Food Button - Using accent color */
[b-3soal3mqbs] .custom-food-btn {
  background-color: var(--fs-accent);
  color: var(--fs-text-inverse);
  border: 2px solid var(--fs-accent);
  padding: var(--fs-button-padding-y) var(--fs-button-padding-x);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  transition: var(--fs-transition-all);
  box-shadow: var(--fs-shadow-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  touch-action: manipulation; /* Remove 300ms tap delay on mobile */
}

[b-3soal3mqbs] .custom-food-btn:hover {
  background-color: var(--fs-accent-hover);
  border-color: var(--fs-accent-hover);
  box-shadow: none;
}

[b-3soal3mqbs] .custom-food-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

[b-3soal3mqbs] .custom-food-btn i {
  transition: transform 0.2s ease;
}

[b-3soal3mqbs] .custom-food-btn:hover .fa-plus {
  transform: rotate(90deg);
}

/* Bootstrap Tooltip Customization for Custom Food Button */
[b-3soal3mqbs] .tooltip {
  transition: opacity 0.15s ease-in-out !important;
}

[b-3soal3mqbs] .tooltip.show {
  opacity: 1;
}

[b-3soal3mqbs] .custom-food-btn + .tooltip .tooltip-inner {
  background-color: var(--fs-bg-inverse);
  color: var(--fs-text-on-inverse);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  max-width: 250px;
  box-shadow: none;
}

[b-3soal3mqbs] .custom-food-btn + .tooltip .tooltip-arrow::before {
  border-top-color: var(--fs-bg-inverse);
}

/* Calculate Button Row - Stack button and helper text vertically */
[b-3soal3mqbs] .calculate-button-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--fs-spacing-sm);
}

/* Calculate Button - Prominent CTA with gradient */
[b-3soal3mqbs] .btn-calculate,
[b-3soal3mqbs] .calculate-btn {
  background: var(--fs-primary);
  border: none;
  font-weight: var(--fs-font-weight-semibold);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  touch-action: manipulation; /* Remove 300ms tap delay on mobile */
}

[b-3soal3mqbs] .btn-calculate::before,
[b-3soal3mqbs] .calculate-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: none;
}

[b-3soal3mqbs] .btn-calculate:hover,
[b-3soal3mqbs] .calculate-btn:hover {
  background: var(--fs-primary-hover);
  box-shadow: none;
}

[b-3soal3mqbs] .btn-calculate:hover::before,
[b-3soal3mqbs] .calculate-btn:hover::before {
  transform: translateX(100%);
}

[b-3soal3mqbs] .btn-calculate:active,
[b-3soal3mqbs] .calculate-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Disabled state - subtle but clear */
[b-3soal3mqbs] .btn-calculate:disabled,
[b-3soal3mqbs] .calculate-btn:disabled {
  /* The spec's disabled pill: flat tone, quiet label, a hairline edge. It must not read as a live
     secondary button (WCAG exempts disabled controls from contrast). */
  background: var(--fs-disabled-bg);
  color: var(--fs-disabled-text);
  box-shadow: inset 0 0 0 1px var(--fs-border-hover);
  opacity: 1; /* Bootstrap's .btn:disabled fade would stack on the quiet label */
  cursor: not-allowed;
  transform: none;
}

[b-3soal3mqbs] .btn-calculate:disabled::before,
[b-3soal3mqbs] .calculate-btn:disabled::before {
  display: none;
}

/* Excitement Text - subtle call-to-action hint */
[b-3soal3mqbs] .excitement-text {
  color: var(--fs-text-secondary);
  margin-top: var(--fs-spacing-sm) !important;
  font-style: normal;
  font-size: var(--fs-font-size-sm);
  opacity: 0.8;
}

/* Selection feedback text */
[b-3soal3mqbs] .calculate-button-row p {
  transition: all 0.2s ease;
}

[b-3soal3mqbs] .calculate-button-row .text-success {
  color: var(--fs-success) !important;
  font-weight: var(--fs-font-weight-medium);
}

[b-3soal3mqbs] .calculate-button-row .text-success i {
  animation: checkPop-b-3soal3mqbs 0.3s ease-out;
}

@keyframes checkPop-b-3soal3mqbs {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

[b-3soal3mqbs] .calculate-button-row .text-muted {
  color: var(--fs-text-muted) !important;
}

/* Quick Add Buttons */
[b-3soal3mqbs] .quick-add-section {
  padding-top: var(--fs-spacing-sm);
}

[b-3soal3mqbs] .quick-add-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-spacing-sm);
}

[b-3soal3mqbs] .quick-add-btn {
  background-color: var(--fs-bg-secondary);
  border: 1px solid var(--fs-border-default);
  color: var(--fs-text-primary);
  padding: var(--fs-spacing-sm) var(--fs-spacing-md);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-medium);
  transition: var(--fs-transition-all);
  cursor: pointer;
  position: relative;
  padding-left: var(--fs-spacing-2xl);
  touch-action: manipulation; /* Remove 300ms tap delay on mobile */
}

[b-3soal3mqbs] .quick-add-btn::before {
  content: "+";
  position: absolute;
  left: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
  color: var(--fs-text-secondary);
  transition: color 0.2s ease;
}

[b-3soal3mqbs] .quick-add-btn:hover {
  background-color: var(--fs-primary-light);
  border-color: var(--fs-primary-text);
  color: var(--fs-primary-text);
  box-shadow: var(--fs-shadow-sm);
}

[b-3soal3mqbs] .quick-add-btn:hover::before {
  color: var(--fs-primary-text);
}

[b-3soal3mqbs] .quick-add-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Serving Grid Styling */
[b-3soal3mqbs] .serving-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-md);
  overflow: hidden;
  background-color: var(--fs-bg-secondary);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

[b-3soal3mqbs] .serving-row {
  display: grid;
  grid-template-columns: 200px auto;
  padding: var(--fs-spacing-lg);
  background-color: var(--fs-bg-primary);
  border-bottom: 1px solid var(--fs-border-default);
  transition: var(--fs-transition-colors);
}

[b-3soal3mqbs] .serving-row:hover {
  background-color: var(--fs-bg-hover);
}

[b-3soal3mqbs] .serving-row:last-child {
  border-bottom: none;
}

[b-3soal3mqbs] .food-name {
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-primary);
  padding: var(--fs-spacing-sm) 0;
  flex: 1;
}

/* ─────────────────────────────────────────────
   COMPACT ROW: Minimalist inline layout
   Inspired by Notion/Linear/Todoist
   ───────────────────────────────────────────── */
/* V5 redesign: row is a divider-separated list item, not a card.
   Per-row border/background/border-radius were removed so long lists read
   as a continuous scan rather than a stack of chrome. The divider lives on
   the row itself (adjacent-sibling) so the first row has no top rule. */
[b-3soal3mqbs] .selected-food-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  margin: 0;
  min-height: 44px;
  transition: background-color 0.15s ease;
  /* Entrance animation for newly-added rows (moved from split-layout.css so
     all .selected-food-item rules live in one place). */
  animation: slideIn-b-3soal3mqbs var(--fs-transition-slow);
}

[b-3soal3mqbs] .selected-food-item + .selected-food-item {
  border-top: 1px solid var(--fs-border-default);
}

[b-3soal3mqbs] .selected-food-item:last-child {
  margin-bottom: 0;
}

/* Hover is subtle now — a gentle tint, no border-left shift (which caused
   a 3px horizontal jump on every hover in the card design). */
[b-3soal3mqbs] .selected-food-item:hover {
  background: var(--fs-bg-hover);
}

@keyframes slideIn-b-3soal3mqbs {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Serving controls - grouped tightly */
[b-3soal3mqbs] .selected-food-item .serving-controls-compact {
  display: contents; /* Children flow into grid */
}

/* Fixed serving controls - consistent 30px height matching design system */
[b-3soal3mqbs] .selected-food-item .fixed-amount-input,
[b-3soal3mqbs] .selected-food-item .fixed-unit-select {
  height: 30px !important;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 6px;
  border: 1px solid var(--fs-border-default);
  background-color: var(--fs-bg-secondary);
  transition: all 0.1s ease;
  box-sizing: border-box;
}

[b-3soal3mqbs] .selected-food-item .fixed-amount-input {
  width: 55px;
  padding: 5px 6px;
  text-align: center;
}

[b-3soal3mqbs] .selected-food-item .fixed-unit-select {
  width: auto;
  min-width: 60px;
  max-width: 100px;
  padding: 5px 24px 5px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

[b-3soal3mqbs] .selected-food-item .fixed-amount-input:hover,
[b-3soal3mqbs] .selected-food-item .fixed-unit-select:hover {
  border-color: var(--fs-border-hover);
  background-color: var(--fs-bg-tertiary);
}

[b-3soal3mqbs] .selected-food-item .fixed-amount-input:focus,
[b-3soal3mqbs] .selected-food-item .fixed-unit-select:focus {
  border-color: var(--fs-border-focus);
  box-shadow: 0 0 0 2px var(--fs-primary-a10);
  outline: none;
}

/* Remove number input spinners */
[b-3soal3mqbs] .selected-food-item .fixed-amount-input::-webkit-outer-spin-button,
[b-3soal3mqbs] .selected-food-item .fixed-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
[b-3soal3mqbs] .selected-food-item .fixed-amount-input[type="number"] {
  -moz-appearance: textfield;
}

[b-3soal3mqbs] .selected-food-item .fixed-calories {
  font-size: 12px;
  color: var(--fs-text-secondary);
  white-space: nowrap;
}

/* Select dropdowns - fixed width for alignment */
[b-3soal3mqbs] .serving-controls-compact .form-select-sm {
  width: 100%;
  min-width: 85px;
  max-width: 130px;
  font-size: 12px;
  padding: 4px 24px 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--fs-border-default);
  background-color: var(--fs-bg-secondary);
  height: 28px;
  line-height: 1.2;
  transition: all 0.1s ease;
  cursor: pointer;
}

[b-3soal3mqbs] .serving-controls-compact .form-select-sm:hover {
  border-color: var(--fs-border-hover);
  background-color: var(--fs-bg-tertiary);
}

[b-3soal3mqbs] .serving-controls-compact .form-select-sm:focus {
  border-color: var(--fs-border-focus);
  box-shadow: 0 0 0 2px var(--fs-primary-a10);
  outline: none;
}

/* Fixed amount input - matches select styling */
[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input {
  width: 60px;
  min-width: 60px;
  max-width: 70px;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--fs-border-default);
  background-color: var(--fs-bg-secondary);
  height: 30px;
  line-height: 1.2;
  text-align: center;
  transition: all 0.1s ease;
}

[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input:hover {
  border-color: var(--fs-border-hover);
  background-color: var(--fs-bg-tertiary);
}

[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input:focus {
  border-color: var(--fs-border-focus);
  box-shadow: 0 0 0 2px var(--fs-primary-a10);
  outline: none;
}

/* Remove number input spinners */
[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input::-webkit-outer-spin-button,
[b-3soal3mqbs]
  .serving-controls-compact
  .fixed-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input[type="number"] {
  -moz-appearance: textfield;
}

/* Fixed serving inline controls - unit select + amount input */
[b-3soal3mqbs] .selected-food-item .fixed-serving-inline {
  grid-column: 2 / 4; /* Span both select columns */
  display: flex;
  align-items: center;
  gap: 4px;
}

[b-3soal3mqbs] .fixed-serving-inline .fixed-serving-unit-amount {
  display: flex;
  align-items: center;
  gap: 4px;
}

[b-3soal3mqbs] .fixed-serving-inline .unit-select {
  width: auto;
  min-width: 60px;
  max-width: 100px;
  font-size: 13px;
  padding: 5px 24px 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--fs-border-default);
  background-color: var(--fs-bg-secondary);
  height: 30px;
  line-height: 1.2;
  transition: all 0.1s ease;
  cursor: pointer;
}

[b-3soal3mqbs] .fixed-serving-inline .unit-select:hover {
  border-color: var(--fs-border-hover);
  background-color: var(--fs-bg-tertiary);
}

[b-3soal3mqbs] .fixed-serving-inline .unit-select:focus {
  border-color: var(--fs-border-focus);
  box-shadow: 0 0 0 2px var(--fs-primary-a10);
  outline: none;
}

[b-3soal3mqbs] .fixed-serving-inline .amount-input {
  width: 55px;
  font-size: 13px;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid var(--fs-border-default);
  background-color: var(--fs-bg-secondary);
  height: 30px;
  text-align: center;
  transition: all 0.1s ease;
}

[b-3soal3mqbs] .fixed-serving-inline .amount-input:hover {
  border-color: var(--fs-border-hover);
  background-color: var(--fs-bg-tertiary);
}

[b-3soal3mqbs] .fixed-serving-inline .amount-input:focus {
  border-color: var(--fs-border-focus);
  box-shadow: 0 0 0 2px var(--fs-primary-a10);
  outline: none;
}

/* Remove number input spinners for fixed serving */
[b-3soal3mqbs] .fixed-serving-inline .amount-input::-webkit-outer-spin-button,
[b-3soal3mqbs] .fixed-serving-inline .amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
[b-3soal3mqbs] .fixed-serving-inline .amount-input[type="number"] {
  -moz-appearance: textfield;
}

[b-3soal3mqbs] .fixed-serving-inline .fixed-serving-calories {
  font-size: 12px;
  color: var(--fs-text-secondary);
  white-space: nowrap;
  margin-left: 4px;
}

/* Fixed serving badge - displays gram amount for fixed servings */
[b-3soal3mqbs] .selected-food-item .fixed-serving-badge {
  grid-column: 2 / 4; /* Span both select columns */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--fs-success) 0%, var(--fs-success) 100%);
  color: var(--fs-text-on-inverse);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 16px;
  white-space: nowrap;
  box-shadow: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

[b-3soal3mqbs] .selected-food-item .fixed-serving-badge:hover {
  box-shadow: none;
}

[b-3soal3mqbs] .fixed-serving-badge .fixed-serving-calories {
  font-weight: 500;
  opacity: 0.9;
  font-size: 11px;
}

/* Selected foods label - hidden for minimalist design */
[b-3soal3mqbs] .selected-label {
  display: none !important;
}

/* 2-column grid for desktop */
[b-3soal3mqbs] .selected-foods-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

[b-3soal3mqbs] .serving-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fs-spacing-md);
}

/* Loading State - Polished overlay with backdrop blur */
[b-3soal3mqbs] .loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--fs-bg-primary-a85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--fs-z-modal);
  animation: fadeIn-b-3soal3mqbs 0.2s ease-out;
}

@keyframes fadeIn-b-3soal3mqbs {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[b-3soal3mqbs] .loading-content {
  background: var(--fs-bg-primary);
  padding: var(--fs-spacing-2xl) var(--fs-spacing-3xl);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-dialog);
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-lg);
  animation: scaleIn-b-3soal3mqbs 0.25s ease-out;
}

@keyframes scaleIn-b-3soal3mqbs {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

[b-3soal3mqbs] .loading-content .spinner-border {
  animation: spin-b-3soal3mqbs 0.8s linear infinite;
}

@keyframes spin-b-3soal3mqbs {
  to {
    transform: rotate(360deg);
  }
}

/* Helper text styling */
[b-3soal3mqbs] .helper-text-desktop {
  font-size: var(--fs-font-size-sm);
  font-style: italic;
  color: var(--fs-text-secondary);
}

[b-3soal3mqbs] .helper-text-mobile {
  display: none;
}

/* Mobile Fix for TomSelect Dropdown Visibility */
@media (max-width: 768px) {
  /* CRITICAL: Make TomSelect dropdown visible on mobile */
  [b-3soal3mqbs] .ts-dropdown {
    position: fixed !important;
    z-index: 9999 !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: auto !important;
    max-height: 50vh !important;
    background: var(--fs-bg-primary) !important;
    border: 1px solid var(--fs-border-default) !important;
    border-radius: 8px !important;
    box-shadow: var(--fs-shadow-dialog) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Make dropdown options touch-friendly */
  [b-3soal3mqbs] .ts-dropdown .option {
    padding: 12px 16px !important;
    font-size: 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--fs-bg-tertiary) !important;
  }

  /* Ensure input is properly sized for mobile */
  [b-3soal3mqbs] .ts-control {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
  }

  /* Better contrast for selected items */
  [b-3soal3mqbs] .ts-dropdown .option.active {
    background-color: var(--fs-primary-light) !important;
    color: var(--fs-primary-text) !important;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Mobile Layout Reordering - Button comes before selected foods */
  [b-3soal3mqbs] .split-food-selection {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Order 1: Search bar stays at top */
  [b-3soal3mqbs] .search-bar-wrapper {
    order: 1;
    margin-bottom: var(--fs-spacing-lg);
  }

  /* Order 2: Calculate button comes immediately after search */
  [b-3soal3mqbs] .calculate-button-row {
    order: 2 !important;
    margin-top: 0;
    margin-bottom: var(--fs-spacing-xl);
    padding: var(--fs-spacing-md) 0;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--fs-bg-primary-a95) 20%
    );
    position: relative;
  }

  /* Add subtle separator after button */
  [b-3soal3mqbs] .calculate-button-row::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: var(--fs-border-default);
    opacity: 0.3;
  }

  /* Order 3: Selected foods display comes last */
  [b-3soal3mqbs] .selected-foods-display {
    order: 3;
    margin-top: 0;
  }

  /* Ensure button is always visible and prominent on mobile */
  [b-3soal3mqbs] .calculate-btn {
    padding: var(--fs-spacing-md) var(--fs-spacing-xl);
    font-size: var(--fs-font-size-lg);
    font-weight: var(--fs-font-weight-semibold);
    box-shadow: none;
    border-radius: var(--fs-radius-md);
  }

  /* Page title mobile */
  [b-3soal3mqbs] .page-title {
    font-size: var(--fs-font-size-xl);
    margin: var(--fs-spacing-2xl) auto var(--fs-spacing-3xl);
    padding: 0 var(--fs-spacing-lg);
  }

  /* Custom Food Button Mobile */
  [b-3soal3mqbs] .custom-food-btn {
    width: 100%;
    justify-content: center;
    padding: var(--fs-spacing-md) var(--fs-spacing-2xl);
    font-size: var(--fs-font-size-lg);
  }

  [b-3soal3mqbs] .serving-row {
    grid-template-columns: 1fr;
    padding: var(--fs-spacing-md);
  }

  [b-3soal3mqbs] .serving-controls {
    grid-template-columns: 1fr 1fr;
    gap: var(--fs-spacing-sm);
    padding-top: var(--fs-spacing-sm);
  }

  [b-3soal3mqbs] .food-name {
    margin-bottom: 0;
    padding: var(--fs-spacing-xs) 0;
  }

  [b-3soal3mqbs] .form-select {
    font-size: 14px;
    padding: 6px 8px;
  }

  /* Mobile: Selected food item - Single line, no wrapping */
  [b-3soal3mqbs] .selected-food-item {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    max-width: 100%;
    overflow: hidden;
    min-height: 40px;
  }

  [b-3soal3mqbs] .selected-food-item:hover {
    background: var(--fs-bg-secondary);
  }

  /* Mobile: Food name - flexible width, truncate if needed */
  [b-3soal3mqbs] .selected-food-item .food-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--fs-text-body);
    flex: 1 1 auto;
    min-width: 40px;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    order: unset;
  }

  /* Mobile: Serving controls inline */
  [b-3soal3mqbs] .selected-food-item .serving-controls-compact {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
    order: 2;
  }

  [b-3soal3mqbs] .serving-controls-compact .form-select-sm {
    min-width: 80px;
    height: 32px;
    font-size: 13px;
    padding: 6px 28px 6px 10px;
  }

  /* Mobile: Fixed serving controls - touch-friendly, consistent 30px height */
  [b-3soal3mqbs] .selected-food-item .fixed-amount-input,
  [b-3soal3mqbs] .selected-food-item .fixed-unit-select {
    height: 30px !important;
    font-size: 13px;
  }

  [b-3soal3mqbs] .selected-food-item .fixed-amount-input {
    width: 55px;
  }

  [b-3soal3mqbs] .selected-food-item .fixed-unit-select {
    min-width: 60px;
    max-width: 90px;
  }

  [b-3soal3mqbs] .selected-food-item .fixed-calories {
    font-size: 11px;
  }

  /* Mobile: Fixed serving inline controls - touch-friendly */
  [b-3soal3mqbs] .selected-food-item .fixed-serving-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    order: 2;
    flex: 1 1 auto;
  }

  [b-3soal3mqbs] .fixed-serving-inline .fixed-serving-unit-amount {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  [b-3soal3mqbs] .fixed-serving-inline .unit-select {
    min-width: 70px;
    max-width: 110px;
    font-size: 14px;
    padding: 8px 28px 8px 10px;
    height: 36px;
  }

  [b-3soal3mqbs] .fixed-serving-inline .amount-input {
    width: 60px;
    font-size: 14px;
    padding: 8px 8px;
    height: 36px;
  }

  [b-3soal3mqbs] .fixed-serving-inline .fixed-serving-calories {
    font-size: 12px;
  }

  /* Mobile: Fixed serving badge - touch-friendly */
  [b-3soal3mqbs] .selected-food-item .fixed-serving-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--fs-success) 0%, var(--fs-success) 100%);
    color: var(--fs-text-on-inverse);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 16px;
    order: 2;
    flex: 0 0 auto;
  }

  [b-3soal3mqbs] .fixed-serving-badge .fixed-serving-calories {
    font-size: 11px;
  }

  /* Mobile: Selected foods grid - compact stack */
  [b-3soal3mqbs] .selected-foods-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
  }

  /* Hide desktop helper text on mobile */
  [b-3soal3mqbs] .helper-text-desktop {
    display: none !important;
  }

  /* Show and style mobile helper text */
  [b-3soal3mqbs] .helper-text-mobile {
    display: block !important;
    font-size: var(--fs-font-size-sm);
    color: var(--fs-text-primary);
    background-color: var(--fs-bg-tertiary);
    border: 1px solid var(--fs-primary-text);
    padding: var(--fs-spacing-md);
    border-radius: var(--fs-radius-sm);
    margin: var(--fs-spacing-sm) 0 var(--fs-spacing-lg);
    text-align: center;
    font-weight: var(--fs-font-weight-medium);
  }

  [b-3soal3mqbs] .helper-text-mobile i {
    color: var(--fs-primary-text);
  }
}

/* ============================================
   ACCESSIBILITY: Focus States
   WCAG 2.4.7 Focus Visible (Level AA)
   Shows focus indicator only for keyboard navigation
   ============================================ */
[b-3soal3mqbs] .btn-calculate:focus-visible,
[b-3soal3mqbs] .calculate-btn:focus-visible {
  outline: 3px solid var(--fs-primary-text);
  outline-offset: 2px;
}

[b-3soal3mqbs] .custom-food-btn:focus-visible {
  outline: 3px solid var(--fs-primary-text);
  outline-offset: 2px;
}

[b-3soal3mqbs] .quick-add-btn:focus-visible {
  outline: 3px solid var(--fs-primary-text);
  outline-offset: 2px;
}

[b-3soal3mqbs] .serving-controls-compact .form-select-sm:focus-visible {
  outline: 3px solid var(--fs-primary-text);
  outline-offset: 2px;
}

/* ============================================
   ACCESSIBILITY: Reduced Motion Support
   WCAG 2.3.3 Animation from Interactions (Level AAA)
   Respects user preference for reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  [b-3soal3mqbs] *,
  [b-3soal3mqbs] *::before,
  [b-3soal3mqbs] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Disable specific animations */
  [b-3soal3mqbs] .selected-food-item {
    animation: none;
  }

  [b-3soal3mqbs] .loading-content {
    animation: none;
  }

  [b-3soal3mqbs] .loading-overlay {
    animation: none;
  }

  /* Hide shimmer effect */
  [b-3soal3mqbs] .btn-calculate::before,
  [b-3soal3mqbs] .calculate-btn::before {
    display: none;
  }
}

/* ============================================
   MOBILE: Hover Effect Isolation
   Prevents "sticky hover" on touch devices
   Only applies hover effects on devices that support hover
   ============================================ */
@media (hover: none) {
  /* Cancel hover transforms on touch devices */
  [b-3soal3mqbs] .custom-food-btn:hover {
    transform: none;
  }

  [b-3soal3mqbs] .btn-calculate:hover,
  [b-3soal3mqbs] .calculate-btn:hover {
    transform: none;
  }

  [b-3soal3mqbs] .btn-calculate:hover::before,
  [b-3soal3mqbs] .calculate-btn:hover::before {
    transform: translateX(-100%);
  }

  [b-3soal3mqbs] .quick-add-btn:hover {
    transform: none;
    background-color: var(--fs-bg-secondary);
    border-color: var(--fs-border-default);
    color: var(--fs-text-primary);
    box-shadow: none;
  }

  [b-3soal3mqbs] .quick-add-btn:hover::before {
    color: var(--fs-text-secondary);
  }

  [b-3soal3mqbs] .selected-food-item:hover {
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  [b-3soal3mqbs] .custom-food-btn:hover .fa-plus {
    transform: none;
  }
}

/* ============================================
   MINIMAL MODE STYLES
   When embedded in MealPlanner split layout
   Removes card wrapper to prevent nested island effect
   ============================================ */

/* Container adjustments for minimal mode */
[b-3soal3mqbs] .minimal-mode-container {
  padding: 0 !important;
}

[b-3soal3mqbs] .minimal-mode-container .row {
  margin: 0 !important;
}

[b-3soal3mqbs] .minimal-mode-container .col-12 {
  padding: 0 !important;
}

/* Card wrapper becomes transparent in minimal mode */
[b-3soal3mqbs] .minimal-card-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Card body has no padding in minimal mode */
[b-3soal3mqbs] .minimal-card-body {
  padding: 0 !important;
  background: transparent !important;
}

/* ==========================================================================
   SELECTED-FOOD ROW — V5 layout
   --------------------------------------------------------------------------
   Each row renders: food-title, amount-input[.filled], unit-pill, delete.
   Domain model:
     - .amount-input          Single control; empty value = auto portion,
                              filled value = manual override (user typed in).
     - .amount-input.filled   Manual-mode chrome (amber). The razor toggles
                              this from SelectedAmountValue.HasValue, so the
                              nullable-float IS the auto/manual discriminator
                              — no separate viewmodel state.
     - .unit-pill             <select> restyled as a rounded chip with a
                              self-chevron (SVG background-image) — applied
                              directly to the select, no wrapper element.
     - .btn-delete-quiet      Ambient grey, warms to red on hover.
     - .food-title            Title column with ellipsis so long names don't
                              push the controls off-screen.
     - .food-title .sub       Optional second line (brand or category).
   Container rules for .selected-food-item live higher up in this file (see
   "COMPACT ROW" section) — they strip the per-row card and add dividers.
   ========================================================================== */

[b-3soal3mqbs] .amount-input {
  width: 4.5rem;
  min-width: 4.5rem;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--fs-border-default, var(--fs-border-hover));
  border-radius: 999px;
  background: var(--fs-bg-primary);
  color: var(--fs-text-primary);
  font-size: 1rem;
  font-variant-numeric: normal;
  text-align: center;
  outline: none;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

[b-3soal3mqbs] .amount-input::placeholder {
  color: var(--fs-text-secondary);
}

[b-3soal3mqbs] .amount-input:focus-visible {
  border-color: var(--fs-border-focus);
  box-shadow: 0 0 0 3px var(--fs-primary-a20);
}

/* Manual-mode: a firmer edge and bold value signal the user overrode the default portion. */
[b-3soal3mqbs] .amount-input.filled {
  border-color: var(--fs-border-hover);
  background: var(--fs-bg-primary);
  color: var(--fs-text-primary);
  font-weight: 600;
}

[b-3soal3mqbs] .amount-input.filled:focus-visible {
  border-color: var(--fs-border-focus);
  box-shadow: 0 0 0 3px var(--fs-primary-a20);
}

/* Unit pill — <select> styled as a chip. SVG chevron is a background-image
   so we don't need a sibling element (and therefore can't render a duplicate
   native chevron next to ours). */
[b-3soal3mqbs] .unit-pill {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 36px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--fs-border-control);
  border-radius: 999px;
  background-color: var(--fs-bg-primary);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.25 7.5 10 12.25 14.75 7.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px 14px;
  color: var(--fs-text-primary);
  font-size: 1rem;
  /* `normal`, not 1 — line-height:1 clips glyph descenders so the gram unit "g"
     rendered with its tail cut off ("half g"). */
  line-height: normal;
  cursor: pointer;
  outline: none;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

[b-3soal3mqbs] .unit-pill:focus-visible {
  border-color: var(--fs-border-focus);
  box-shadow: 0 0 0 3px var(--fs-primary-a20);
}

/* Quiet delete — ambient grey, warms to red on hover so the destructive
   action stays discoverable without shouting. */
[b-3soal3mqbs] .btn-delete-quiet {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--fs-text-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

/* Expand the tap target to ~44×44pt per Apple HIG without enlarging the
   visible glyph — invisible ::before absorbs fat-finger taps around the icon. */
[b-3soal3mqbs] .btn-delete-quiet::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

[b-3soal3mqbs] .btn-delete-quiet:hover {
  background: var(--fs-error-light);
  color: var(--fs-error);
}

[b-3soal3mqbs] .btn-delete-quiet:focus-visible {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 2px;
}

/* Food title — same ellipsis contract as the old .food-name so long names
   never push the controls off-screen. */
[b-3soal3mqbs] .food-title {
  flex: 1 1 auto;
  min-width: 60px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--fs-text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[b-3soal3mqbs] .food-title .sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--fs-text-secondary);
}

/* Mobile: match the tighter-row convention already used for the unified
   serving controls, but stay above the 28px legacy size for touch comfort. */
@media (max-width: 768px) {
  [b-3soal3mqbs] .amount-input,
  [b-3soal3mqbs] .unit-pill {
    height: 32px;
    font-size: 0.9375rem;
  }
}

/* iOS Safari: force 16px+ font-size on focusable inputs to prevent the
   autozoom-on-focus behavior. Mirrors the rule above for unified-serving-*. */
@supports (-webkit-touch-callout: none) {
  [b-3soal3mqbs] .amount-input,
  [b-3soal3mqbs] .unit-pill {
    font-size: 16px;
  }
}

/* ==========================================================================
   Serving stepper — amount + unit unified into ONE segmented control so a
   selected food reads as a single "120 g" value instead of two mismatched
   pills. The wrapper owns the border / height / focus-ring; the amount input
   and the unit <select> sit inside it borderless, split by a hairline divider.
   A manual/fixed override tints the whole control with a calm amber accent
   instead of rendering a lone shouting amber capsule.
   ========================================================================== */
[b-3soal3mqbs] .serving-stepper {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--fs-border-control);
  border-radius: var(--fs-radius-pill, 999px);
  background: var(--fs-bg-primary);
  overflow: hidden;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

[b-3soal3mqbs] .serving-stepper:focus-within {
  border-color: var(--fs-primary-text, var(--fs-border-focus));
  box-shadow: 0 0 0 3px var(--fs-primary-a18);
}

/* Clinic direction: a fixed serving reads with the single calm accent (indigo/primary),
   not amber — keeps one accent on the screen and a premium, data-forward feel. */
[b-3soal3mqbs] .serving-stepper.is-set {
  border-color: var(--fs-primary-text);
  background: var(--fs-primary-light, var(--fs-bg-selected));
}

/* Amount input — borderless, right-aligned, fills the wrapper height.
   Fixed 3.9rem, sized to comfortably fit "1000" / "12.5" right-aligned (the old
   3.1rem clipped both; digits are proportional since the Schibsted restyle, which
   only narrows them). A fixed width is intentional:
   iOS WebKit — the primary target — ignores field-sizing:content, and
   width:auto on a text input there expands to the default ~20ch size. */
[b-3soal3mqbs] .serving-stepper .amount-input {
  width: 3.9rem;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 6px 0 14px;
  text-align: right;
  font-weight: 600;
  color: var(--fs-text-primary);
  box-shadow: none;
}

[b-3soal3mqbs] .serving-stepper .amount-input:focus-visible {
  border: none;
  box-shadow: none; /* the wrapper shows the focus ring via :focus-within */
}

[b-3soal3mqbs] .serving-stepper.is-set .amount-input {
  color: var(--fs-primary-text);
}

/* Unit <select> — borderless, divided from the amount by a hairline; keeps the
   chevron background-image from the base .unit-pill rule. */
[b-3soal3mqbs] .serving-stepper .unit-pill {
  height: 100%;
  min-width: 2.5rem;
  /* Bound long unit labels so they can't widen the stepper and shove the
     delete button off-row (native <select> auto-sizes to its widest option). */
  max-width: 7rem;
  text-overflow: ellipsis;
  border: none;
  border-left: 1px solid var(--fs-border-default);
  border-radius: 0;
  margin-left: 8px;
  padding: 0 28px 0 11px;
  background-color: transparent;
  background-position: right 9px center;
  color: var(--fs-text-secondary);
  box-shadow: none;
}

[b-3soal3mqbs] .serving-stepper .unit-pill:focus-visible {
  border: none;
  border-left: 1px solid var(--fs-border-default);
  box-shadow: none;
}

[b-3soal3mqbs] .serving-stepper.is-set .unit-pill {
  border-left-color: var(--fs-primary-a30);
  color: var(--fs-primary-text);
}

@media (max-width: 768px) {
  [b-3soal3mqbs] .serving-stepper {
    height: 40px;
  }
}

/* Per-row macros for a locked (fixed) food: a muted line under the row content.
   :has() scopes the wrap to ONLY rows that carry a macro line, so category/custom
   rows (which must stay single-line) are unaffected. */
[b-3soal3mqbs] .selected-food-item:has(.fixed-row-macros) {
  flex-wrap: wrap;
}
[b-3soal3mqbs] .fixed-row-macros {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  gap: 13px;
  align-items: center;
  margin-top: 4px;
  padding-left: 1px;
  font-size: 13px;
  line-height: 1.2;
  /* secondary, not muted — #9ca3af failed WCAG AA on white */
  color: var(--fs-text-secondary);
  font-variant-numeric: normal;
}
[b-3soal3mqbs] .fixed-row-macros .frm-cal {
  font-weight: 700;
  color: var(--fs-text-primary);
}
/* Clinic: each macro gets a small colour dot (protein/carb/fat) for fast scanning. */
[b-3soal3mqbs] .fixed-row-macros .frm-macro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
[b-3soal3mqbs] .fixed-row-macros .frm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
[b-3soal3mqbs] .fixed-row-macros .frm-dot.p {
  background: var(--fs-macro-protein, var(--fs-primary));
}
[b-3soal3mqbs] .fixed-row-macros .frm-dot.c {
  background: var(--fs-macro-carbs, var(--fs-success));
}
[b-3soal3mqbs] .fixed-row-macros .frm-dot.f {
  background: var(--fs-macro-fat, var(--fs-warning));
}
[b-3soal3mqbs] .fixed-row-macros .frm-sep {
  display: none;
}
[b-3soal3mqbs] .fixed-row-macros.loading {
  font-style: italic;
  opacity: 0.7;
}

[b-3soal3mqbs] .fixed-row-macros.error {
  color: var(--fs-warning-text);
  font-style: italic;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-53vfg3vg6c] {
  /* A Heads-up band: MudBlazor paints this text white, which vanished on the old light yellow. */
  background: var(--fs-warning-light);
  color: var(--fs-warning-text);
  bottom: 0;
  box-shadow: inset 0 1px 0 var(--fs-border-default);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss[b-53vfg3vg6c] {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}
/* /Components/Layout/TopNavBar.razor.rz.scp.css */
/* Enhanced Brand Navigation */
.enhanced-brand-link[b-no0s44qxgm] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--fs-primary-text);
  font-weight: 700;
  font-size: 1.125rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin-right: auto;
}

.enhanced-brand-link:hover[b-no0s44qxgm] {
  color: var(--fs-primary-text-hover);
  text-decoration: none;
  background: var(--fs-primary-a08);
}

.enhanced-brand-link:focus[b-no0s44qxgm] {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 2px;
}

.brand-home-icon[b-no0s44qxgm] {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  stroke: currentColor;
  flex-shrink: 0;
}

.enhanced-brand-link:hover .brand-home-icon[b-no0s44qxgm] {
  opacity: 1;
  transform: translateX(0);
}

.brand-text[b-no0s44qxgm] {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.enhanced-brand-link:hover .brand-text[b-no0s44qxgm] {
  transform: translateX(2px);
}

/* Mobile adjustments for brand link */
@media (max-width: 575.98px) {
  .enhanced-brand-link[b-no0s44qxgm] {
    font-size: 1rem;
    padding: 0.375rem 0.5rem;
  }

  .brand-home-icon[b-no0s44qxgm] {
    width: 16px;
    height: 16px;
  }
}

/* Mobile Navigation Fixes */
.fixed-top-nav[b-no0s44qxgm] {
  position: relative;
  z-index: 1050;
}

/* Custom hamburger button styling */
.custom-toggler[b-no0s44qxgm] {
  border: none;
  padding: 4px 8px;
  background: transparent;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.custom-toggler:focus[b-no0s44qxgm] {
  box-shadow: none;
  outline: 2px solid var(--fs-border-focus);
}

.custom-toggler .navbar-toggler-icon[b-no0s44qxgm] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2855, 65, 81, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 1.5em;
  height: 1.5em;
}

.custom-toggler:hover[b-no0s44qxgm] {
  background-color: var(--fs-shade-a05);
}

/* Mobile navigation menu styling */
@media (max-width: 991.98px) {
  .navbar-collapse[b-no0s44qxgm] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--fs-bg-primary);
    border-top: 1px solid var(--fs-border-default);
    box-shadow: inset 0 -1px 0 var(--fs-border-default);
    z-index: 1040;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
  }

  .navbar-collapse.show[b-no0s44qxgm] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .mobile-nav-menu[b-no0s44qxgm] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem 0;
  }

  .mobile-nav-item[b-no0s44qxgm] {
    color: var(--fs-text-primary) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--fs-border-default);
    transition: all 0.2s ease;
    text-decoration: none;
    display: block;
  }

  .mobile-nav-item:last-child[b-no0s44qxgm] {
    border-bottom: none;
  }

  .mobile-nav-item:hover[b-no0s44qxgm] {
    background-color: var(--fs-bg-secondary);
    color: var(--fs-primary-text) !important;
    text-decoration: none;
    padding-left: 2rem !important;
  }

  .mobile-nav-item:active[b-no0s44qxgm] {
    background-color: var(--fs-primary-light);
  }

  /* Mobile navigation overlay */
  .mobile-nav-overlay[b-no0s44qxgm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--fs-sheet-backdrop);
    z-index: 1030;
    backdrop-filter: blur(2px);
  }
}

/* Desktop styling remains unchanged */
@media (min-width: 992px) {
  .navbar-collapse[b-no0s44qxgm] {
    display: flex !important;
  }

  .mobile-nav-overlay[b-no0s44qxgm] {
    display: none;
  }

  .nav-link[b-no0s44qxgm] {
    color: var(--fs-text-primary) !important;
    margin-right: 10px;
    transition: color 0.3s ease;
  }

  .nav-link:hover[b-no0s44qxgm] {
    color: var(--fs-primary-text) !important;
  }

  /* The profile button is an account action: it sits with Log Out on the right, not against the brand.
     The gap goes before it (not `order`), so keyboard focus still runs left to right. */
  .nav-profile-slot[b-no0s44qxgm] {
    margin-left: auto;
  }

  .navbar-collapse[b-no0s44qxgm] {
    flex-grow: 0;
  }

  /* Both account links get the same pill focus ring. */
  .navbar-collapse .mobile-nav-item[b-no0s44qxgm],
  .nav-profile-slot[b-no0s44qxgm]  .nav-link {
    border-radius: var(--fs-radius-pill);
  }

  /* Same height as Log Out, so the two focus rings match (and the target grows past 24px). */
  .nav-profile-slot[b-no0s44qxgm]  .nav-link {
    padding-block: 0.5rem !important;
  }

  /* .navbar-collapse outranks the phone-menu :focus fill further down. */
  .navbar-collapse .mobile-nav-item:focus[b-no0s44qxgm] {
    background-color: transparent;
  }
}

/* style.css gives every .nav-link `padding: .75rem 1rem !important`; the profile button is tighter so
   its focus ring sits close to the text and the phone row fits at 320px. */
.nav-profile-slot[b-no0s44qxgm]  .nav-link {
  padding-inline: 0.5rem !important;
  white-space: nowrap;
}

/* Fix for mobile layout issues */
@media (max-width: 575.98px) {
  .container-fluid[b-no0s44qxgm] {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .mobile-nav-item[b-no0s44qxgm] {
    font-size: 1rem;
    padding: 1rem 1.5rem !important;
  }
}

/* Animation improvements */
.navbar-collapse[b-no0s44qxgm] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-item[b-no0s44qxgm] {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure proper z-index stacking */
.navbar[b-no0s44qxgm] {
  z-index: 1050;
}

.navbar-collapse[b-no0s44qxgm] {
  z-index: 1040;
}

/* Fix for profile button positioning */
.d-flex.align-items-center[b-no0s44qxgm] {
  z-index: 1051;
  position: relative;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .navbar-collapse[b-no0s44qxgm],
  .mobile-nav-item[b-no0s44qxgm],
  .custom-toggler[b-no0s44qxgm] {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mobile-nav-item[b-no0s44qxgm] {
    border-bottom: 2px solid var(--fs-bg-primary);
  }

  .custom-toggler:focus[b-no0s44qxgm] {
    outline: 3px solid var(--fs-border-focus);
  }
}

/* Prevent body scroll when mobile menu is open */
:global(body.mobile-nav-open)[b-no0s44qxgm] {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Focus management for accessibility */
.mobile-nav-item:focus[b-no0s44qxgm] {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 2px;
  background-color: var(--fs-bg-hover);
}

/* Smooth transitions for better UX */
.navbar-collapse[b-no0s44qxgm] {
  will-change: transform, opacity;
}

.mobile-nav-item[b-no0s44qxgm] {
  will-change: background-color, padding-left;
}

/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
  .mobile-nav-overlay[b-no0s44qxgm] {
    height: -webkit-fill-available;
  }
}

/* 320px: brand + My Profile + menu must stay on one row (Schibsted is ~20px wider than the old font). */
@media (max-width: 359.98px) {
  /* Wins over Bootstrap's .navbar > .container-fluid { flex-wrap: inherit } through the scope attribute's
     extra specificity (the scoped bundle loads before Bootstrap). */
  .navbar > .container-fluid[b-no0s44qxgm] {
    flex-wrap: nowrap;
  }

  .enhanced-brand-link[b-no0s44qxgm] {
    padding-inline: 0;
  }
}
/* /Components/Meals/AllFixedMealSummary.razor.rz.scp.css */
/* ==========================================================================
   All-Fixed Meal Summary — a first-class result card (matches MealScoreCard)
   Uses the shared --fs-* design tokens for cohesion with sibling result cards.
   ========================================================================== */

.all-fixed-summary[b-fdeiy384be] {
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-xl);
  padding: var(--fs-spacing-xl);
  margin-bottom: var(--fs-spacing-2xl);
  box-shadow: var(--fs-shadow-sm);
  transition: var(--fs-transition-all);
  /* one tasteful page-load reveal */
  animation: afs-rise-b-fdeiy384be var(--fs-transition-slow) ease-out both;
}

.all-fixed-summary:hover[b-fdeiy384be] {
  box-shadow: var(--fs-shadow-md);
}

@keyframes afs-rise-b-fdeiy384be {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Header ------------------------------------------------------------- */
.afs-header[b-fdeiy384be] {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-spacing-md);
  margin-bottom: var(--fs-spacing-lg);
}

.afs-lock[b-fdeiy384be] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--fs-radius-lg);
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-primary);
  font-size: 1rem;
}

.afs-title[b-fdeiy384be] {
  margin: 0;
  font-size: var(--fs-font-size-xl);
  font-weight: var(--fs-font-weight-bold);
  color: var(--fs-text-primary);
  line-height: 1.2;
}

.afs-subtitle[b-fdeiy384be] {
  margin: 2px 0 0;
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-secondary);
}

/* --- Gauge (hero) ------------------------------------------------------- */
.afs-gauge[b-fdeiy384be] {
  margin-bottom: var(--fs-spacing-lg);
  padding: var(--fs-spacing-md) var(--fs-spacing-lg);
  background: var(--fs-bg-secondary);
  border-radius: var(--fs-radius-lg);
}

.afs-gauge-top[b-fdeiy384be] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fs-spacing-sm);
  margin-bottom: var(--fs-spacing-sm);
  flex-wrap: wrap;
}

.afs-figures[b-fdeiy384be] {
  display: flex;
  align-items: baseline;
  gap: var(--fs-spacing-xs);
}

.afs-current[b-fdeiy384be] {
  font-size: var(--fs-font-size-3xl);
  font-weight: var(--fs-font-weight-bold);
  line-height: 1;
  color: var(--fs-text-primary);
  font-variant-numeric: normal;
}

.afs-target[b-fdeiy384be] {
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-secondary);
  font-variant-numeric: normal;
}

.afs-gap-pill[b-fdeiy384be] {
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  padding: 2px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  white-space: nowrap;
}

.afs-gap-pill.afs-short[b-fdeiy384be] {
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-secondary);
}
.afs-gap-pill.afs-over[b-fdeiy384be] {
  background: var(--fs-warning-light);
  color: var(--fs-warning-text);
}
.afs-gap-pill.afs-ontarget[b-fdeiy384be] {
  background: var(--fs-success-light);
  color: var(--fs-success-text);
}

/* track + fill + target zone */
.afs-track[b-fdeiy384be] {
  position: relative;
  height: 10px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-border-default);
  overflow: hidden;
}

.afs-zone[b-fdeiy384be] {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--fs-success-a22),
    var(--fs-success-a22) 4px,
    var(--fs-success-a10) 4px,
    var(--fs-success-a10) 8px
  );
  border-left: 1px solid var(--fs-success);
  border-right: 1px solid var(--fs-success);
}

.afs-fill[b-fdeiy384be] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--fs-radius-pill);
  transition: width var(--fs-transition-slower);
}

.afs-fill.afs-short[b-fdeiy384be] {
  background: var(--fs-text-primary);
}
.afs-fill.afs-over[b-fdeiy384be] {
  background: var(--fs-warning);
}
.afs-fill.afs-ontarget[b-fdeiy384be] {
  background: var(--fs-success);
}

/* --- Locked foods ------------------------------------------------------- */
.afs-foods[b-fdeiy384be] {
  list-style: none;
  margin: 0 0 var(--fs-spacing-lg);
  padding: 0;
}

.afs-food[b-fdeiy384be] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-sm) 0;
  border-bottom: 1px solid var(--fs-border-default);
  flex-wrap: wrap;
}

.afs-food:last-child[b-fdeiy384be] {
  border-bottom: none;
}

.afs-food-name[b-fdeiy384be] {
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-primary);
}

.afs-grams[b-fdeiy384be] {
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-secondary);
  background: var(--fs-bg-tertiary);
  padding: 1px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  font-variant-numeric: normal;
}

.afs-food-macros[b-fdeiy384be] {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--fs-spacing-sm);
  font-size: var(--fs-font-size-xs);
  font-variant-numeric: normal;
}

.afs-cal[b-fdeiy384be] {
  color: var(--fs-text-primary);
  font-weight: var(--fs-font-weight-medium);
}
.afs-macro-rest[b-fdeiy384be] {
  color: var(--fs-text-muted);
}

/* --- Fixed total -------------------------------------------------------- */
.afs-total[b-fdeiy384be] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-spacing-sm);
  padding-top: var(--fs-spacing-md);
  border-top: 1px solid var(--fs-border-default);
  margin-bottom: var(--fs-spacing-lg);
  flex-wrap: wrap;
}

.afs-total-label[b-fdeiy384be] {
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-secondary);
}

.afs-total-badges[b-fdeiy384be] {
  display: flex;
  gap: var(--fs-spacing-xs);
  flex-wrap: wrap;
}

.afs-badge[b-fdeiy384be] {
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  padding: 2px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  font-variant-numeric: normal;
  color: var(--fs-text-on-macro);
}

.afs-badge-cal[b-fdeiy384be] {
  background: var(--fs-macro-kcal);
}
/* Clinic: canonical macro fills. carbs/fat were swapped (c=accent orange, f=success green). */
.afs-badge-p[b-fdeiy384be] {
  background: var(--fs-macro-protein);
}
/* darker -text tokens as fills: these badges carry white text, so the bright
   the carbs/fat fills clear WCAG AA with white text (5.5:1 / 5.4:1); the -text tokens are ink. */
.afs-badge-c[b-fdeiy384be] {
  background: var(--fs-macro-carbs);
}
.afs-badge-f[b-fdeiy384be] {
  background: var(--fs-macro-fat);
}

/* --- Actions ------------------------------------------------------------ */
.afs-actions[b-fdeiy384be] {
  display: grid;
  gap: var(--fs-spacing-sm);
  margin-bottom: var(--fs-spacing-sm);
}

@media (min-width: 576px) {
  .afs-actions[b-fdeiy384be] {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.afs-btn[b-fdeiy384be] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-md) var(--fs-spacing-lg);
  border-radius: var(--fs-radius-md);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  cursor: pointer;
  transition: var(--fs-transition-all);
  border: 1px solid transparent;
}

.afs-btn-primary[b-fdeiy384be] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  box-shadow: var(--fs-shadow-primary-subtle);
}

.afs-btn-primary:hover[b-fdeiy384be] {
  background: var(--fs-primary-hover);
  box-shadow: var(--fs-shadow-primary);
}

.afs-btn-ghost[b-fdeiy384be] {
  background: var(--fs-bg-primary);
  color: var(--fs-text-secondary);
  border-color: var(--fs-border-hover);
}

.afs-btn-ghost:hover[b-fdeiy384be] {
  background: var(--fs-bg-hover);
  color: var(--fs-text-primary);
  border-color: var(--fs-text-secondary);
}

.afs-btn:focus-visible[b-fdeiy384be] {
  outline: none;
  box-shadow: var(--fs-focus-ring-primary);
}

/* --- Back link ---------------------------------------------------------- */
.afs-back[b-fdeiy384be] {
  text-align: center;
}

.afs-link[b-fdeiy384be] {
  background: none;
  border: none;
  padding: var(--fs-spacing-xs);
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--fs-spacing-xs);
  transition: color var(--fs-transition-fast);
}

.afs-link:hover[b-fdeiy384be] {
  color: var(--fs-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .all-fixed-summary[b-fdeiy384be] {
    animation: none;
  }
  .afs-fill[b-fdeiy384be] {
    transition: none;
  }
  .afs-btn-primary:hover[b-fdeiy384be] {
    transform: none;
  }
}
/* /Components/Meals/ClosestMealHeader.razor.rz.scp.css */
/* ClosestMealHeader — diagnostic header for the closest-match panel.
   Leads with the actual gap and emphasizes only the deficient macro;
   other macros collapse into a compact summary line.
   Reuses design tokens from design-tokens.css. */

.closest-match-header[b-jiuaaezst9] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-md);
  padding-bottom: var(--fs-spacing-lg);
  border-bottom: 1px solid var(--fs-border-default);
}

.closest-match-eyebrow[b-jiuaaezst9] {
  margin: 0;
  font-size: var(--fs-font-size-xs);
  color: var(--fs-text-secondary);
  letter-spacing: 0.04em;
}

.closest-match-headline[b-jiuaaezst9] {
  margin: 0;
  font-size: var(--fs-font-size-lg);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-primary);
  line-height: var(--fs-line-height-tight, 1.3);
}

/* Primary gauge — emphasized progress display for the deficient macro. */

.primary-gauge[b-jiuaaezst9] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-xs);
}

.primary-gauge-row[b-jiuaaezst9] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.primary-gauge-label[b-jiuaaezst9] {
  font-weight: var(--fs-font-weight-semibold);
  font-size: var(--fs-font-size-base);
  color: var(--fs-text-primary);
}

.primary-gauge-status[b-jiuaaezst9] {
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-semibold);
  padding: 2px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  white-space: nowrap;
}

.primary-gauge-status.macro-status-in-range[b-jiuaaezst9] {
  background: var(--fs-success-light);
  color: var(--fs-success-text);
}
.primary-gauge-status.macro-status-over[b-jiuaaezst9] {
  background: var(--fs-error-light);
  color: var(--fs-error-text);
}
.primary-gauge-status.macro-status-under[b-jiuaaezst9] {
  background: var(--fs-warning-light);
  color: var(--fs-warning-text);
}
.primary-gauge-status.macro-status-no-target[b-jiuaaezst9] {
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-muted);
}

.primary-gauge-bar[b-jiuaaezst9] {
  position: relative;
  height: 10px;
  background: var(--fs-bg-tertiary);
  border-radius: 5px;
  overflow: hidden;
}

.primary-gauge-bar .progress-target-zone[b-jiuaaezst9] {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--fs-shade-a08);
  border-radius: 5px;
  z-index: 1;
}

.primary-gauge-bar .progress-fill[b-jiuaaezst9] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 5px;
  z-index: 2;
  transition: width 0.4s ease;
}

.primary-gauge-bar .progress-fill-in-range[b-jiuaaezst9] {
  background: var(--fs-success);
}
.primary-gauge-bar .progress-fill-over[b-jiuaaezst9] {
  background: var(--fs-error);
}
.primary-gauge-bar .progress-fill-under[b-jiuaaezst9] {
  background: var(--fs-primary);
}
.primary-gauge-bar .progress-fill-no-target[b-jiuaaezst9] {
  background: var(--fs-text-muted);
  opacity: 0.4;
}

.primary-gauge-meta[b-jiuaaezst9] {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-font-size-xs);
  color: var(--fs-text-secondary);
}

/* Compact macro summary — every targeted macro that isn't the headline gauge,
   inline so the user can scan all four at a glance. */

.compact-macro-summary[b-jiuaaezst9] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-spacing-md) var(--fs-spacing-lg);
  font-size: var(--fs-font-size-sm);
}

.compact-macro[b-jiuaaezst9] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--fs-spacing-xs);
}

.compact-macro-label[b-jiuaaezst9] {
  color: var(--fs-text-secondary);
  font-weight: var(--fs-font-weight-medium);
}

.compact-macro-status[b-jiuaaezst9] {
  color: var(--fs-text-primary);
}

.compact-macro-status.macro-status-in-range[b-jiuaaezst9] {
  color: var(--fs-success-text);
  font-weight: var(--fs-font-weight-medium);
}
.compact-macro-status.macro-status-over[b-jiuaaezst9] {
  color: var(--fs-error-text);
  font-weight: var(--fs-font-weight-medium);
}
.compact-macro-status.macro-status-under[b-jiuaaezst9] {
  color: var(--fs-warning-text);
  font-weight: var(--fs-font-weight-medium);
}
.compact-macro-status.macro-status-no-target[b-jiuaaezst9] {
  color: var(--fs-text-muted);
}

/* Tighten layout on narrow viewports — phone-screen first. */

@media (max-width: 576px) {
  .closest-match-headline[b-jiuaaezst9] {
    font-size: var(--fs-font-size-base);
  }

  .compact-macro-summary[b-jiuaaezst9] {
    gap: var(--fs-spacing-sm) var(--fs-spacing-md);
  }
}
/* /Components/Meals/ClosestMealPanel.razor.rz.scp.css */
/* ==========================================================================
   Closest-meal panel - shown when no combination hits every target.
   Moved from MealCombinations.razor.css (#1172): scoped rules only reach the
   component whose .razor.css holds them, so these were dead there.
   ========================================================================== */

/* A plain wrapper: the closest-match card below is the one block (#1172 design check). */
.no-match-alert[b-x33c2to30t] {
  margin-bottom: var(--fs-spacing-2xl);
}

/* Excluded Foods - Horizontal Pills */
.excluded-pills[b-x33c2to30t] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-spacing-sm);
  margin: var(--fs-spacing-lg) 0;
}

.food-pill[b-x33c2to30t] {
  /* Refined: Soft neutral with subtle warm tint */
  background: var(--fs-bg-secondary); /* Very light warm gray */
  border: 1px solid var(--fs-border-default); /* Warm gray border */
  border-radius: var(--fs-radius-pill);
  padding: var(--fs-spacing-xs) var(--fs-spacing-md);
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-secondary); /* Stone-500 - warm neutral */
  display: inline-flex;
  align-items: center;
  gap: var(--fs-spacing-xs);
  font-weight: var(--fs-font-weight-medium);
  transition: var(--fs-transition-all);
}

.food-pill:hover[b-x33c2to30t] {
  background: var(--fs-bg-tertiary); /* Slightly darker warm gray */
  border-color: var(--fs-border-hover);
  color: var(--fs-text-body); /* Stone-600 */

  box-shadow: none;
}

.excess-badge[b-x33c2to30t] {
  background: var(--fs-bg-inverse-muted);
  color: var(--fs-text-on-inverse);
  border-radius: var(--fs-radius-sm);
  padding: 2px var(--fs-spacing-xs);
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Closest Match - Card with food item rows
   ========================================================================== */

.closest-match-card[b-x33c2to30t] {
  background: var(--fs-bg-primary);
  border-radius: var(--fs-radius-lg);
  padding: var(--fs-spacing-xl);
}

/* The guidance inside the card is a flat grey panel: no edge, no bracket. The cards style themselves
   globally (ShortfallGuidanceCard's <style>) or not at all (OvershootGuidanceCard), so reach them with
   ::deep from the card, which is a plain element carrying this component's scope attribute. */
.closest-match-card[b-x33c2to30t]  .shortfall-guidance-card,
.closest-match-card[b-x33c2to30t]  .overshoot-guidance-card {
  background: var(--fs-bg-secondary);
  border: 0;
  border-radius: var(--fs-radius-md);
  padding: var(--fs-spacing-lg);
  margin: var(--fs-spacing-lg) 0 0;
}

.closest-match-card[b-x33c2to30t]  .overshoot-guidance-card {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-spacing-md);
}

.closest-match-card[b-x33c2to30t]  .overshoot-guidance-card p:last-child {
  margin-bottom: 0;
}

/* Food items list - card rows */
.food-items-list[b-x33c2to30t] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-sm);
  margin: var(--fs-spacing-lg) 0;
}

.food-item-row[b-x33c2to30t] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--fs-spacing-md) var(--fs-spacing-lg);
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-md);
  transition: var(--fs-transition-fast);
}

.food-item-row:hover[b-x33c2to30t] {
  border-color: var(--fs-border-hover);
  background: var(--fs-bg-hover);
}

.food-info[b-x33c2to30t] {
  display: flex;
  align-items: baseline;
  gap: var(--fs-spacing-md);
  flex: 1;
  min-width: 0;
}

/* Also styled in MealCombinations.razor.css, which still renders its own .food-name. */
.food-name[b-x33c2to30t] {
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.food-serving[b-x33c2to30t] {
  color: var(--fs-text-secondary);
  font-size: var(--fs-font-size-sm);
  white-space: nowrap;
}

/* Portion warning badge - inline, visible */
.portion-badge[b-x33c2to30t] {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-spacing-xs);
  padding: var(--fs-spacing-xs) var(--fs-spacing-sm);
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-primary);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
}

.portion-badge i[b-x33c2to30t] {
  font-size: 0.75rem;
}

.portion-badge.very-large[b-x33c2to30t] {
  background: var(--fs-warning-light); /* Amber-200 */
  color: var(--fs-warning-text); /* Amber-900 */
}

.closest-match-actions[b-x33c2to30t] {
  display: flex;
  gap: var(--fs-spacing-md);
  margin-top: var(--fs-spacing-lg);
}

/* Bootstrap + brand-overrides style the buttons (colour, pill, focus ring, 44px touch minimum since
   #1171). Only their layout lives here. */
.btn-try-different[b-x33c2to30t],
.btn-use-anyway[b-x33c2to30t] {
  flex: 1;
}

/* The two actions sit side by side, so they share one shape, like a dialog footer's pair. */
.closest-match-actions .btn[b-x33c2to30t] {
  --bs-btn-border-radius: var(--fs-radius-pill);
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .closest-match-card[b-x33c2to30t] {
    padding: var(--fs-spacing-lg);
  }

  .excluded-pills[b-x33c2to30t] {
    gap: var(--fs-spacing-xs);
  }

  .food-pill[b-x33c2to30t] {
    font-size: var(--fs-font-size-xs);
    padding: var(--fs-spacing-xs) var(--fs-spacing-sm);
  }

  .food-item-row[b-x33c2to30t] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fs-spacing-sm);
    padding: var(--fs-spacing-md);
  }

  .food-info[b-x33c2to30t] {
    flex-direction: column;
    gap: var(--fs-spacing-xs);
    width: 100%;
  }

  .food-name[b-x33c2to30t] {
    white-space: normal;
  }

  .portion-badge[b-x33c2to30t] {
    align-self: flex-start;
  }

  .closest-match-actions[b-x33c2to30t] {
    flex-direction: column;
  }

  .btn-try-different[b-x33c2to30t],
  .btn-use-anyway[b-x33c2to30t] {
    width: 100%;
  }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .food-pill[b-x33c2to30t] {
    transition: none;
  }

  .food-pill:hover[b-x33c2to30t] {
    transform: none;
  }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
  .food-pill[b-x33c2to30t] {
    border-width: 2px;
  }

  .closest-match-card[b-x33c2to30t] {
    border: 2px solid var(--fs-border-default);
  }
}
/* /Components/Meals/CombinationRow.razor.rz.scp.css */
/* Dense combination row — canvas 2a collapsed rows / 4a show-all rows. */

.combo-row[b-x1s0pymzta] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 10px;
  padding: 4px 12px 4px 4px;
  margin-bottom: 8px;
}

.combo-row-main[b-x1s0pymzta] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  min-height: 44px; /* whole row is the tap target */
  border: none;
  background: none;
  padding: 0 8px;
  text-align: left;
  cursor: pointer;
}

div.combo-row-main[b-x1s0pymzta] {
  cursor: default;
}

/* Expand affordance — the chevron plus hover/focus tint are scoped to the BUTTON variant
   only; show-all's static div rows must not advertise a gesture they don't have. */
.combo-row-chevron[b-x1s0pymzta] {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--fs-text-muted);
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}

button.combo-row-main:hover[b-x1s0pymzta],
button.combo-row-main:focus-visible[b-x1s0pymzta] {
  background: var(--fs-bg-tertiary);
  border-radius: 8px;
}

button.combo-row-main:focus-visible[b-x1s0pymzta] {
  outline: 2px solid var(--fs-primary-text, var(--fs-border-focus));
  outline-offset: -2px;
}

button.combo-row-main:hover .combo-row-chevron[b-x1s0pymzta],
button.combo-row-main:focus-visible .combo-row-chevron[b-x1s0pymzta] {
  color: var(--fs-text-body);
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .combo-row-chevron[b-x1s0pymzta] {
    transition: none;
  }

  button.combo-row-main:hover .combo-row-chevron[b-x1s0pymzta],
  button.combo-row-main:focus-visible .combo-row-chevron[b-x1s0pymzta] {
    transform: none;
  }
}

.combo-row-summary[b-x1s0pymzta] {
  font-size: 13.5px;
  color: var(--fs-text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-row-excluded[b-x1s0pymzta] {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fs-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Dim only non-interactive content: at 0.55 container opacity the Add button's primary-blue
   border fell below the WCAG 3:1 UI-component minimum. The button stays full-contrast and
   its label switches to "Add anyway". */
.combo-row-dimmed[b-x1s0pymzta] {
  background: var(--fs-bg-secondary);
}

.combo-row-dimmed > .combo-row-main[b-x1s0pymzta],
.combo-row-dimmed > .combo-row-macros[b-x1s0pymzta] {
  opacity: 0.55;
}

.combo-row-macros[b-x1s0pymzta] {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: normal;
  white-space: nowrap;
  flex-shrink: 0;
}

.crm-kcal[b-x1s0pymzta] {
  color: var(--fs-macro-kcal, var(--fs-text-body));
  font-weight: 700;
}

.crm-p[b-x1s0pymzta] {
  color: var(--fs-macro-protein-text);
}

.crm-c[b-x1s0pymzta] {
  color: var(--fs-macro-carbs-text, var(--fs-success-text));
}

.crm-f[b-x1s0pymzta] {
  color: var(--fs-macro-fat-text, var(--fs-warning-text));
}

.combo-row-add[b-x1s0pymzta] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--fs-primary-text);
  color: var(--fs-primary-text);
  background: var(--fs-bg-primary);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.combo-row-add:hover[b-x1s0pymzta] {
  background: var(--fs-primary);
  border-color: var(--fs-primary); /* a filled button edges in the fill, not the lighter text Beet */
  color: var(--fs-text-inverse);
}

@media (max-width: 575.98px) {
  /* canvas 3a: summary wraps, macros drop to a second line under it */
  .combo-row[b-x1s0pymzta] {
    flex-wrap: wrap;
    padding: 8px 12px;
  }

  .combo-row-main[b-x1s0pymzta] {
    flex-basis: 100%;
  }

  .combo-row-summary[b-x1s0pymzta] {
    white-space: normal;
  }
}
/* /Components/Meals/CompareMatrix.razor.rz.scp.css */
/* Compare view host (canvas 2b/3b) — header chrome plus the bar/verdict visuals shared
   by the desktop grid and the mobile tabs (::deep reaches both child components). */

.compare-matrix[b-pdgq4wn2z8] {
  margin-top: 1rem;
}

.cm-header[b-pdgq4wn2z8] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: none;
  margin-bottom: 16px;
}

.cm-heading[b-pdgq4wn2z8] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cm-title[b-pdgq4wn2z8] {
  font:
    700 16px var(--fs-font-family);
  color: var(--fs-text-primary);
}

.cm-context[b-pdgq4wn2z8] {
  font-size: 12.5px;
  color: var(--fs-text-secondary);
}

.cm-actions[b-pdgq4wn2z8] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.cm-btn[b-pdgq4wn2z8] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fs-border-hover);
  color: var(--fs-text-body);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--fs-bg-primary);
  cursor: pointer;
}

.cm-btn-refine[b-pdgq4wn2z8] {
  border-color: var(--fs-primary-text);
  color: var(--fs-primary-text);
}

.cm-clear-link[b-pdgq4wn2z8],
.cm-view-as-list[b-pdgq4wn2z8] {
  border: none;
  background: none;
  font-size: 12.5px;
  color: var(--fs-text-secondary);
  text-decoration: underline;
  padding: 10px 6px;
  cursor: pointer;
}

.cm-coaching[b-pdgq4wn2z8] {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fs-bg-secondary);
  border-left: 3px solid var(--fs-border-default);
  border-radius: 0 8px 8px 0;
  padding: 9px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--fs-text-body);
}

.cm-coaching .fa-lightbulb[b-pdgq4wn2z8] {
  color: var(--fs-text-primary);
  font-size: 12px;
  flex-shrink: 0;
}

/* ---- Shared verdict / value visuals (grid + tabs) ---- */
/* The bar track/zone/fill moved to the shared MacroBar component; only the macro-identity
   value-text colors and verdict/lock chrome remain host concerns here. */

.compare-matrix[b-pdgq4wn2z8]  .cmg-value-calories {
  color: var(--fs-macro-kcal, var(--fs-text-body));
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-value-protein {
  color: var(--fs-text-primary);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-value-carbs {
  color: var(--fs-macro-carbs-text);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-value-fat {
  color: var(--fs-macro-fat-text);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-verdict-inrange {
  color: var(--fs-success-text);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-verdict-over,
.compare-matrix[b-pdgq4wn2z8]  .cmg-verdict-under {
  color: var(--fs-error-text);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-lock {
  font-size: 11px;
  color: var(--fs-text-muted);
  margin-right: 6px;
}
/* /Components/Meals/CompareMatrixGrid.razor.rz.scp.css */
/* Desktop compare grid (canvas 2b) — semantic table restyled to the bordered matrix.
   Hidden below 768px; CompareOptionTabs takes over. */

.cm-grid[b-1o1lrpdnu8] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 14px;
  overflow: hidden;
  font-size: 13.5px;
}

.cm-grid th[b-1o1lrpdnu8],
.cm-grid td[b-1o1lrpdnu8] {
  padding: 10px 14px;
  border-bottom: 1px solid var(--fs-bg-tertiary);
  text-align: left;
  vertical-align: top;
}

.cmg-corner[b-1o1lrpdnu8] {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fs-text-secondary);
}

.cmg-option[b-1o1lrpdnu8] {
  font:
    700 13px var(--fs-font-family);
  color: var(--fs-primary-text);
  background: var(--fs-bg-selected);
  white-space: nowrap;
}

.cmg-food[b-1o1lrpdnu8] {
  font-weight: 500;
  color: var(--fs-text-primary);
}

.cmg-locked-row .cmg-food[b-1o1lrpdnu8],
.cmg-locked-row .cmg-portion[b-1o1lrpdnu8] {
  color: var(--fs-text-muted);
}

.cmg-locked-pill[b-1o1lrpdnu8] {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fs-text-secondary);
  background: var(--fs-bg-tertiary);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.cmg-portion .cmg-serving[b-1o1lrpdnu8] {
  display: block;
  font-weight: 600;
  font-variant-numeric: normal;
}

.cmg-portion .cmg-grams[b-1o1lrpdnu8] {
  display: block;
  font-size: 12px;
  color: var(--fs-text-muted);
}

.cmg-macro-label[b-1o1lrpdnu8] {
  font-weight: 600;
}

.cmg-target-range[b-1o1lrpdnu8] {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--fs-text-muted);
}

.cmg-macro-cell[b-1o1lrpdnu8] {
  min-width: 110px;
}

.cmg-value[b-1o1lrpdnu8] {
  font-weight: 700;
  font-variant-numeric: normal;
}

.cmg-verdict[b-1o1lrpdnu8] {
  font-size: 12.5px;
  font-weight: 600;
}

.cmg-verdict .fa-check-circle[b-1o1lrpdnu8] {
  margin-right: 4px;
}

.cmg-add[b-1o1lrpdnu8] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.cmg-add:hover[b-1o1lrpdnu8] {
  background: var(--fs-primary-hover);
}

@media (max-width: 767.98px) {
  .cm-grid[b-1o1lrpdnu8] {
    display: none;
  }
}
/* /Components/Meals/CompareOptionTabs.razor.rz.scp.css */
/* Mobile compare tabs (canvas 3b) — food names stay put, tabs swap only amounts and
   bars. Shown only below 768px. */

.compare-tabs[b-0cggxmhrxn] {
  display: none;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 14px;
  padding: 14px;
}

@media (max-width: 767.98px) {
  .compare-tabs[b-0cggxmhrxn] {
    display: block;
  }
}

.ct-tablist[b-0cggxmhrxn] {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.ct-tab[b-0cggxmhrxn] {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--fs-border-hover);
  background: var(--fs-bg-primary);
  color: var(--fs-text-body);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.ct-tab-active[b-0cggxmhrxn] {
  border-color: var(--fs-primary-text);
  background: var(--fs-bg-selected);
  color: var(--fs-primary-text-hover);
}

.ct-food-row[b-0cggxmhrxn] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--fs-bg-tertiary);
  font-size: 13.5px;
}

.ct-locked[b-0cggxmhrxn] {
  color: var(--fs-text-muted);
}

.ct-portion[b-0cggxmhrxn] {
  white-space: nowrap;
  font-variant-numeric: normal;
}

.ct-grams[b-0cggxmhrxn] {
  margin-left: 6px;
  font-size: 12px;
  color: var(--fs-text-muted);
}

.ct-macro-row[b-0cggxmhrxn] {
  padding: 8px 0;
  font-size: 13px;
}

.ct-macro-label[b-0cggxmhrxn] {
  font-weight: 600;
}

.ct-target[b-0cggxmhrxn] {
  margin-left: 6px;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--fs-text-muted);
}

.ct-value[b-0cggxmhrxn] {
  float: right;
  font-weight: 700;
  font-variant-numeric: normal;
}

.ct-verdict[b-0cggxmhrxn] {
  padding: 10px 0 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.ct-add[b-0cggxmhrxn] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
/* /Components/Meals/DayStateRows.razor.rz.scp.css */
/* Shared shape; only the palette separates a standing condition from an event. */
.day-state-pinned[b-7un6zyqsi6],
.day-state-warning[b-7un6zyqsi6] {
  margin: 0 0 10px;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  /* Prose, so it wraps on its own terms instead of stranding a word on the last line. */
  text-wrap: pretty;
}

/* Neutral grey: a state readout, not a warning. Amber here would make a permanent condition
   look like a recurring alarm. */
.day-state-pinned[b-7un6zyqsi6] {
  border: 1px solid var(--fs-border-default);
  background: var(--fs-bg-secondary);
  color: var(--fs-text-body);
}

/* The size sheet's amber, so the dashboard and the sheet read as one voice. */
.day-state-warning[b-7un6zyqsi6] {
  border: 1px solid var(--fs-warning-light);
  background: var(--fs-warning-light);
  color: var(--fs-warning-text);
}
/* /Components/Meals/FixedServingsOverCapWarning.razor.rz.scp.css */
/* ==========================================================================
   Locked-foods-over-cap warning — a first-class result card in the band family,
   matching the sibling AllFixedMealSummary lock state (shared --fs-* tokens).
   The header carries a warning accent because this is a hard-stop.
   ========================================================================== */

.over-cap-warning[b-7yckobjwfx] {
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-xl);
  padding: var(--fs-spacing-xl);
  margin-bottom: var(--fs-spacing-2xl);
  box-shadow: var(--fs-shadow-sm);
  transition: var(--fs-transition-all);
  /* Same one tasteful page-load reveal as the sibling AllFixedMealSummary lock state. */
  animation: ocw-rise-b-7yckobjwfx var(--fs-transition-slow) ease-out both;
}

.over-cap-warning:hover[b-7yckobjwfx] {
  box-shadow: var(--fs-shadow-md);
}

@keyframes ocw-rise-b-7yckobjwfx {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Header (warning accent) -------------------------------------------- */
.ocw-header[b-7yckobjwfx] {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-spacing-md);
  margin-bottom: var(--fs-spacing-lg);
}

.ocw-icon[b-7yckobjwfx] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--fs-radius-lg);
  background: var(--fs-warning-light);
  color: var(--fs-warning);
  font-size: 1rem;
}

.ocw-title[b-7yckobjwfx] {
  margin: 0;
  font-size: var(--fs-font-size-xl);
  font-weight: var(--fs-font-weight-bold);
  color: var(--fs-text-primary);
  line-height: 1.2;
}

.ocw-subtitle[b-7yckobjwfx] {
  margin: 2px 0 0;
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-secondary);
}

/* --- Locked foods ------------------------------------------------------- */
.ocw-foods[b-7yckobjwfx] {
  list-style: none;
  margin: 0 0 var(--fs-spacing-lg);
  padding: 0;
}

.ocw-food[b-7yckobjwfx] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-sm) 0;
  border-bottom: 1px solid var(--fs-border-default);
  flex-wrap: wrap;
}

.ocw-food:last-child[b-7yckobjwfx] {
  border-bottom: none;
}

.ocw-food-name[b-7yckobjwfx] {
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-primary);
}

.ocw-food-lock[b-7yckobjwfx] {
  color: var(--fs-text-muted);
  margin-right: var(--fs-spacing-sm);
}

.ocw-grams[b-7yckobjwfx] {
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-secondary);
  background: var(--fs-bg-tertiary);
  padding: 1px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  font-variant-numeric: normal;
}

.ocw-food-macros[b-7yckobjwfx] {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--fs-spacing-sm);
  font-size: var(--fs-font-size-xs);
  font-variant-numeric: normal;
}

.ocw-cal[b-7yckobjwfx] {
  color: var(--fs-text-primary);
  font-weight: var(--fs-font-weight-medium);
}

.ocw-macro-rest[b-7yckobjwfx] {
  color: var(--fs-text-muted);
}

/* --- Locked total ------------------------------------------------------- */
.ocw-total[b-7yckobjwfx] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-spacing-sm);
  padding-top: var(--fs-spacing-md);
  border-top: 1px solid var(--fs-border-default);
  margin-bottom: var(--fs-spacing-lg);
  flex-wrap: wrap;
}

.ocw-total-label[b-7yckobjwfx] {
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-secondary);
}

.ocw-total-badges[b-7yckobjwfx] {
  display: flex;
  gap: var(--fs-spacing-xs);
  flex-wrap: wrap;
}

.ocw-badge[b-7yckobjwfx] {
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  padding: 2px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  font-variant-numeric: normal;
  color: var(--fs-text-on-macro);
}

.ocw-badge-cal[b-7yckobjwfx] {
  background: var(--fs-macro-kcal);
}

.ocw-badge-p[b-7yckobjwfx] {
  background: var(--fs-macro-protein);
}

/* Macro fills; white badge text clears AA on each (carbs 5.5:1, fat 5.4:1). The -text tokens are ink. */
.ocw-badge-c[b-7yckobjwfx] {
  background: var(--fs-macro-carbs);
}

.ocw-badge-f[b-7yckobjwfx] {
  background: var(--fs-macro-fat);
}

/* --- Action ------------------------------------------------------------- */
.ocw-actions[b-7yckobjwfx] {
  display: flex;
  justify-content: center;
}

.ocw-btn[b-7yckobjwfx] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-md) var(--fs-spacing-lg);
  border-radius: var(--fs-radius-md);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  cursor: pointer;
  transition: var(--fs-transition-all);
  border: 1px solid transparent;
}

.ocw-btn-primary[b-7yckobjwfx] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  box-shadow: var(--fs-shadow-primary-subtle);
}

.ocw-btn-primary:hover[b-7yckobjwfx] {
  background: var(--fs-primary-hover);
  box-shadow: var(--fs-shadow-primary);
}

.ocw-btn:focus-visible[b-7yckobjwfx] {
  outline: none;
  box-shadow: var(--fs-focus-ring-primary);
}

@media (prefers-reduced-motion: reduce) {
  .over-cap-warning[b-7yckobjwfx] {
    animation: none;
  }

  .ocw-btn-primary:hover[b-7yckobjwfx] {
    transform: none;
  }
}
/* /Components/Meals/FixedTotalStrip.razor.rz.scp.css */
/* "Fixed total" — light summary card with a blue left-accent, coherent with the rest of the
   (light) site rather than a lone dark surface. The status PILL carries the semantic colour
   (neutral / on-target green / over-cap red); the card itself stays calm and neutral. */
.fixed-total-strip[b-gjo2wuqs7m] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px;
  margin: 10px 0;
  border-radius: 14px;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-left: 3px solid var(--fs-border-default);
  color: var(--fs-text-primary);
  box-shadow: none;
}

.fts-row[b-gjo2wuqs7m] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fts-label[b-gjo2wuqs7m] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-text-secondary);
}

.fts-cal[b-gjo2wuqs7m] {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: normal;
  color: var(--fs-text-primary);
}

.fts-cal.calculating[b-gjo2wuqs7m] {
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  color: var(--fs-text-secondary);
}

.fts-detail[b-gjo2wuqs7m] {
  align-items: center;
}

.fts-macros[b-gjo2wuqs7m] {
  font-size: 13px;
  color: var(--fs-text-secondary);
  font-weight: 500;
  font-variant-numeric: normal;
}

/* Status pill — neutral by default; colour only signals real status. */
.fts-status[b-gjo2wuqs7m] {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--fs-border-default);
  color: var(--fs-text-body);
  border-radius: 99px;
  padding: 4px 10px;
}

.fixed-total-strip.ok .fts-status[b-gjo2wuqs7m] {
  background: var(--fs-success-light);
  color: var(--fs-success-text);
}

.fixed-total-strip.warn .fts-status[b-gjo2wuqs7m] {
  background: var(--fs-error-light);
  color: var(--fs-error-text);
}
/* /Components/Meals/MacroBar.razor.rz.scp.css */
/* Shared macro bar visuals — the single home for the track / target-zone / identity fill
   used by the compare grid, the compare tabs, and the fit gauges. (clear:both lets the
   float-right value in the gauges and the tabs sit above the bar; the bar already laid out
   below that single-line value, so it changes nothing in the no-float compare grid.) */

.mb-bar[b-jbuyjcoub7] {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--fs-bg-tertiary);
  overflow: hidden;
  margin-top: 5px;
  clear: both;
}

.mb-zone[b-jbuyjcoub7] {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--fs-bg-tertiary);
  border-left: 1px dashed var(--fs-border-default);
  border-right: 1px dashed var(--fs-border-default);
}

.mb-fill[b-jbuyjcoub7] {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  border-radius: 3px;
}

.mb-fill-calories[b-jbuyjcoub7] {
  background: var(--fs-macro-kcal, var(--fs-text-body));
}

.mb-fill-protein[b-jbuyjcoub7] {
  background: var(--fs-macro-protein);
}

.mb-fill-carbs[b-jbuyjcoub7] {
  background: var(--fs-macro-carbs);
}

.mb-fill-fat[b-jbuyjcoub7] {
  background: var(--fs-macro-fat);
}
/* /Components/Meals/MacroDonutLegend.razor.rz.scp.css */
/* First-visit donut legend — canvas 4d. */

.macro-donut-legend[b-ux5wqma17v] {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fs-bg-secondary);
  border: 1px solid var(--fs-border-default);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--fs-text-body);
}

.macro-donut-legend:focus-visible[b-ux5wqma17v] {
  outline: 2px solid var(--fs-primary-text, var(--fs-border-focus));
  outline-offset: 2px;
}

.mdl-text[b-ux5wqma17v] {
  flex: 1;
  min-width: 0;
}

.mdl-protein[b-ux5wqma17v] {
  color: var(--fs-macro-protein); /* a key word, so it carries its ring's colour */
}

.mdl-carbs[b-ux5wqma17v] {
  color: var(--fs-macro-carbs);
}

.mdl-fat[b-ux5wqma17v] {
  color: var(--fs-macro-fat);
}

.mdl-dismiss[b-ux5wqma17v] {
  position: relative;
  border: none;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: var(--fs-text-muted);
  padding: 4px 6px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ≥44px hit area without visual bloat. */
.mdl-dismiss[b-ux5wqma17v]::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.mdl-dismiss:hover[b-ux5wqma17v],
.mdl-dismiss:focus-visible[b-ux5wqma17v] {
  color: var(--fs-text-body);
}
/* /Components/Meals/MacroFitGauges.razor.rz.scp.css */
/* "Fit vs your targets" gauges — canvas 2c right column. */

.macro-fit-gauges[b-al03gyzx7f] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mfg-row[b-al03gyzx7f] {
  font-size: 13px;
}

.mfg-label[b-al03gyzx7f] {
  font-weight: 600;
  color: var(--fs-text-body);
}

.mfg-value[b-al03gyzx7f] {
  float: right;
  font-weight: 700;
  font-variant-numeric: normal;
}

.mfg-range[b-al03gyzx7f] {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--fs-text-muted);
}

.mfg-value-calories[b-al03gyzx7f] {
  color: var(--fs-macro-kcal, var(--fs-text-body));
}

.mfg-value-protein[b-al03gyzx7f] {
  color: var(--fs-macro-protein-text);
}

.mfg-value-carbs[b-al03gyzx7f] {
  color: var(--fs-macro-carbs-text);
}

.mfg-value-fat[b-al03gyzx7f] {
  color: var(--fs-macro-fat-text);
}

/* Bar track/zone/fill now live in the shared MacroBar component. */
/* /Components/Meals/MacroPreferenceDial.razor.rz.scp.css */
/* Per-macro dial. Tokens: --fs-*. Funnel/count mirror the portion wizard's pattern so the funnel
   narrative reads consistently across the refine hub's two routes. */

.mpd-hint[b-965a3kbygz] {
  margin: 0 0 1rem;
  font-size: 13px;
  color: var(--fs-text-secondary);
  line-height: 1.4;
}

.mpd-empty[b-965a3kbygz] {
  padding: 1rem 0;
  text-align: center;
  color: var(--fs-text-secondary);
}

.mpd-rows[b-965a3kbygz] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mpd-row-head[b-965a3kbygz] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.mpd-label[b-965a3kbygz] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.mpd-dot[b-965a3kbygz] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.mpd-thresh[b-965a3kbygz] {
  font-size: 11px;
  color: var(--fs-text-muted);
}

.mpd-segments[b-965a3kbygz] {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--fs-bg-tertiary);
  border-radius: var(--fs-radius-md, 8px);
}

.mpd-seg[b-965a3kbygz] {
  flex: 1;
  min-height: 44px;
  /* 2px transparent border reserved so the active state's coloured border doesn't shift layout. */
  border: 2px solid transparent;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fs-text-muted);
  border-radius: calc(var(--fs-radius-sm, 4px) - 3px);
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

/* Clearly distinct selected state: white pill + a 2px macro-coloured border (set inline) + bold colour
   + a stronger shadow, so which of Less/Any/More is active reads at a glance. */
.mpd-seg.is-active[b-965a3kbygz] {
  background: var(--fs-bg-primary);
  font-weight: 700;
  box-shadow: none;
  /* active text + border colour are set inline per-macro (AA-text token) */
}

.mpd-seg:focus-visible[b-965a3kbygz] {
  outline: 2px solid var(--fs-primary-text, var(--fs-border-focus));
  outline-offset: 1px;
}

/* Distribution strip — where the matched meals fall for this macro. Non-interactive (the chips drive the
   lean); bars on the kept side take the macro fill (set inline), the cut side stays grey, and a thin
   marker sits at the exact lean threshold. */
.mpd-histo[b-965a3kbygz] {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 30px;
  margin-top: 9px;
  cursor: default;
}

.mpd-histo-bar[b-965a3kbygz] {
  flex: 1;
  min-height: 2px;
  border-radius: 1.5px 1.5px 0 0;
  background: var(--fs-border-hover);
}

.mpd-histo-marker[b-965a3kbygz] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  border-radius: 1px;
  opacity: 0.85;
}

.mpd-recovery[b-965a3kbygz] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fs-error-text);
  background: var(--fs-error-light);
  border: 1px solid var(--fs-error-light);
  border-radius: var(--fs-radius-md, 8px);
}

.mpd-recovery-link[b-965a3kbygz] {
  background: none;
  border: none;
  padding: 0;
  color: var(--fs-error);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- count + funnel (mirrors the portion wizard) ---- */
.mpd-count-row[b-965a3kbygz] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.4rem;
  margin-top: 16px;
}

.mpd-count[b-965a3kbygz] {
  font-size: 13px;
  font-weight: 600;
}

.mpd-count.is-ok[b-965a3kbygz] {
  color: var(--fs-success-text); /* AA on white for 13px text */
}
.mpd-count.is-low[b-965a3kbygz] {
  color: var(--fs-warning-text); /* AA on white for 13px text */
}
.mpd-count.is-empty[b-965a3kbygz] {
  color: var(--fs-error-text);
}

.mpd-reset[b-965a3kbygz] {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--fs-text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.mpd-funnel[b-965a3kbygz] {
  margin: 8px 0 4px;
  height: 6px;
  border-radius: var(--fs-radius-pill, 9999px);
  background: var(--fs-border-default);
  overflow: hidden;
}

.mpd-funnel-fill[b-965a3kbygz] {
  height: 100%;
  border-radius: var(--fs-radius-pill, 9999px);
  transition: width 0.25s ease;
}

.mpd-funnel-fill.is-ok[b-965a3kbygz] {
  background: var(--fs-success);
}
.mpd-funnel-fill.is-low[b-965a3kbygz] {
  background: var(--fs-warning);
}
.mpd-funnel-fill.is-empty[b-965a3kbygz] {
  background: var(--fs-error);
}
/* /Components/Meals/MacroRangeFilter.razor.rz.scp.css */
/* Unified macro range filter (design frame F). Chips = presets of a min–max range; histogram = distribution;
   dual-thumb slider = fine-tune. Macro colours come in inline via --fs-macro-* tokens. */

.mrf-hint[b-714k6rzacl] {
  margin: 0 0 1rem;
  font-size: 13px;
  color: var(--fs-text-secondary);
  line-height: 1.4;
}

.mrf-rows[b-714k6rzacl] {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mrf-row-head[b-714k6rzacl] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mrf-label[b-714k6rzacl] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.mrf-dot[b-714k6rzacl] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.mrf-summary[b-714k6rzacl] {
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-text-muted);
}

/* ---- chips (presets) ---- */
.mrf-chips[b-714k6rzacl] {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.mrf-chip[b-714k6rzacl] {
  flex: 1;
  min-height: 38px;
  border: 1.5px solid var(--fs-border-default);
  background: var(--fs-bg-primary);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fs-text-muted, var(--fs-text-secondary));
  border-radius: var(--fs-radius-sm, 6px);
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.mrf-chip.is-active[b-714k6rzacl] {
  background: var(--fs-bg-primary);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--fs-text-primary);
}

.mrf-chip:focus-visible[b-714k6rzacl] {
  outline: 2px solid var(--fs-primary-text, var(--fs-border-focus));
  outline-offset: 1px;
}

/* ---- distribution histogram ---- */
.mrf-histo[b-714k6rzacl] {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 28px;
  margin-bottom: 2px;
}

.mrf-histo-bar[b-714k6rzacl] {
  flex: 1;
  min-height: 2px;
  border-radius: 1.5px 1.5px 0 0;
  background: var(--fs-border-hover);
}

/* ---- dual-thumb range ---- */
.mrf-range[b-714k6rzacl] {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}

.mrf-range-track[b-714k6rzacl] {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 9999px;
  background: var(--fs-border-default);
}

.mrf-range-fill[b-714k6rzacl] {
  position: absolute;
  height: 5px;
  border-radius: 9999px;
}

/* two range inputs share the track; only their thumbs are interactive */
.mrf-thumb[b-714k6rzacl] {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  height: 24px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.mrf-thumb[b-714k6rzacl]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fs-bg-primary);
  border: 2px solid var(--fs-text-secondary);
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

.mrf-thumb[b-714k6rzacl]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fs-bg-primary);
  border: 2px solid var(--fs-text-secondary);
  cursor: pointer;
  pointer-events: auto;
}

.mrf-thumb:focus-visible[b-714k6rzacl]::-webkit-slider-thumb {
  border-color: var(--fs-primary-text, var(--fs-border-focus));
}

.mrf-range-labels[b-714k6rzacl] {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--fs-text-muted);
  margin-top: 2px;
}

/* ---- count + funnel (shared vocabulary with the wizard) ---- */
.mrf-count-row[b-714k6rzacl] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.4rem;
  margin-top: 16px;
}

.mrf-count[b-714k6rzacl] {
  font-size: 13px;
  font-weight: 600;
}

.mrf-count.is-ok[b-714k6rzacl] {
  color: var(--fs-success-text);
}
.mrf-count.is-low[b-714k6rzacl] {
  color: var(--fs-warning-text);
}
.mrf-count.is-empty[b-714k6rzacl] {
  color: var(--fs-error-text);
}

.mrf-reset[b-714k6rzacl] {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--fs-text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.mrf-funnel[b-714k6rzacl] {
  margin: 8px 0 4px;
  height: 6px;
  border-radius: 9999px;
  background: var(--fs-border-default);
  overflow: hidden;
}

.mrf-funnel-fill[b-714k6rzacl] {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.25s ease;
}

.mrf-funnel-fill.is-ok[b-714k6rzacl] {
  background: var(--fs-success-text);
}
.mrf-funnel-fill.is-low[b-714k6rzacl] {
  background: var(--fs-warning-text);
}
.mrf-funnel-fill.is-empty[b-714k6rzacl] {
  background: var(--fs-error);
}
/* /Components/Meals/MacroSplitDonut.razor.rz.scp.css */
/* Food-row macro-split donut — canvas 2c. Butt caps so segments abut and tile the
   ring exactly (shares always sum to 100); only the status band's ring is round-capped. */

.macro-split-donut[b-s8miqj8urt] {
  display: inline-block;
  width: var(--msd-size, 26px);
  height: var(--msd-size, 26px);
  flex-shrink: 0;
  vertical-align: middle;
}

.macro-split-donut svg[b-s8miqj8urt] {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.msd-track[b-s8miqj8urt] {
  fill: none;
  stroke: var(--fs-bg-tertiary);
  stroke-width: 7;
}

.msd-arc[b-s8miqj8urt] {
  fill: none;
  stroke-width: 7;
}

.msd-protein[b-s8miqj8urt] {
  stroke: var(--fs-macro-protein);
}

.msd-carbs[b-s8miqj8urt] {
  stroke: var(--fs-macro-carbs);
}

.msd-fat[b-s8miqj8urt] {
  stroke: var(--fs-macro-fat);
}

.msd-info[b-s8miqj8urt] {
  position: relative;
  border: none;
  background: none;
  padding: 2px 4px;
  font-size: 11px;
  color: var(--fs-text-muted);
  cursor: pointer;
  vertical-align: middle;
}

/* ≥44px touch target around the small ⓘ glyph (matches .mdl-dismiss / .undo-link). */
.msd-info[b-s8miqj8urt]::after {
  content: "";
  position: absolute;
  inset: -14px;
}

.msd-info:hover[b-s8miqj8urt],
.msd-info:focus-visible[b-s8miqj8urt] {
  color: var(--fs-primary-text);
}
/* /Components/Meals/MealCombinations.razor.rz.scp.css */
/* MealCombinations Component Styles */

/* Meal Sorting Select Styles */
.meal-sorting-select[b-006q9xvo64] {
  min-width: 150px;
}

/* Override MudSelect styles for meal sorting */
.meal-sorting-select .mud-input-control[b-006q9xvo64] {
  border: 2px solid var(--mud-palette-error) !important;
  box-shadow: none !important;
  font-size: 1.25rem !important;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.meal-sorting-select .mud-input-control:hover[b-006q9xvo64] {
  box-shadow: none !important;
  border-color: var(--mud-palette-error-darken) !important;
}

.meal-sorting-select .mud-input-control:focus-within[b-006q9xvo64] {
  box-shadow: 0 0 0 0.2rem rgba(var(--mud-palette-error-rgb), 0.25) !important;
  border-color: var(--mud-palette-error-darken) !important;
}

/* Ensure proper alignment with Bootstrap grid */
.meal-sorting-select .mud-input[b-006q9xvo64] {
  width: 100%;
}

/* Style the dropdown items */
.meal-sorting-select .mud-list-item[b-006q9xvo64] {
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
}

.meal-sorting-select .mud-list-item:hover[b-006q9xvo64] {
  background-color: var(--mud-palette-error-hover);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .meal-sorting-select .mud-input-control[b-006q9xvo64] {
    font-size: 1.1rem !important;
  }

  .meal-sorting-select .mud-list-item[b-006q9xvo64] {
    font-size: 1rem;
    padding: 0.625rem 0.875rem;
  }
}

/* Accessibility - High contrast mode */
@media (prefers-contrast: high) {
  .meal-sorting-select .mud-input-control[b-006q9xvo64] {
    border-width: 3px !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .meal-sorting-select .mud-input-control[b-006q9xvo64] {
    transition: none;
  }
}

/* ==========================================================================
   Perfect Match Celebration Animations
   ========================================================================== */

/* Animated Checkmark SVG */
.animated-checkmark[b-006q9xvo64] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.checkmark-svg[b-006q9xvo64] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  stroke-width: 3;
  stroke: var(--fs-text-inverse);
  stroke-miterlimit: 10;
  animation:
    checkmark-fill-b-006q9xvo64 0.4s ease-in-out 0.4s forwards,
    checkmark-scale-b-006q9xvo64 0.3s ease-in-out 0.9s both;
}

.checkmark-circle[b-006q9xvo64] {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke: rgba(255, 255, 255, 0.8);
  fill: none;
  animation: checkmark-stroke-b-006q9xvo64 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check[b-006q9xvo64] {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke: var(--fs-text-inverse);
  stroke-width: 4;
  animation: checkmark-stroke-b-006q9xvo64 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes checkmark-stroke-b-006q9xvo64 {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes checkmark-fill-b-006q9xvo64 {
  100% {
  }
}

@keyframes checkmark-scale-b-006q9xvo64 {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

/* Celebration text animation */
.celebration-text[b-006q9xvo64] {
  animation: celebration-text-pop-b-006q9xvo64 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)
    0.6s both;
}

@keyframes celebration-text-pop-b-006q9xvo64 {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Perfect match alert animation */
.perfect-match-alert[b-006q9xvo64] {
  position: relative;
  overflow: hidden;
  animation: perfect-match-entrance-b-006q9xvo64 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)
    forwards;
}

@keyframes perfect-match-entrance-b-006q9xvo64 {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Success celebration pulse effect */
.perfect-match-alert.success-celebration[b-006q9xvo64]::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    var(--fs-success-a40) 0%,
    var(--fs-success-a20) 50%,
    var(--fs-success-a40) 100%
  );
  opacity: 0;
  animation: success-pulse-glow-b-006q9xvo64 2s ease-in-out 0.5s;
  pointer-events: none;
  z-index: -1;
}

@keyframes success-pulse-glow-b-006q9xvo64 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .checkmark-svg[b-006q9xvo64],
  .checkmark-circle[b-006q9xvo64],
  .checkmark-check[b-006q9xvo64],
  .celebration-text[b-006q9xvo64],
  .perfect-match-alert[b-006q9xvo64],
  .perfect-match-alert[b-006q9xvo64]::before {
    animation: none !important;
  }

  .checkmark-circle[b-006q9xvo64] {
    stroke-dashoffset: 0;
  }

  .checkmark-check[b-006q9xvo64] {
    stroke-dashoffset: 0;
  }

  .celebration-text[b-006q9xvo64],
  .perfect-match-alert[b-006q9xvo64] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   No Match Alert - Compact Design (~200px total)
   Uses design tokens from design-tokens.css for consistency
   ========================================================================== */

.no-match-header[b-006q9xvo64] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  color: var(--fs-text-body); /* Slate-600 - professional, not alarming */
  font-weight: var(--fs-font-weight-semibold);
  font-size: var(--fs-font-size-lg);
  margin-bottom: var(--fs-spacing-sm);
}

.no-match-header i[b-006q9xvo64] {
  font-size: var(--fs-font-size-xl);
  color: var(--fs-text-muted); /* Slate-400 - subtle icon */
}

.no-match-explanation[b-006q9xvo64] {
  margin: var(--fs-spacing-sm) 0 0 0;
  color: var(--fs-text-primary);
  font-size: var(--fs-font-size-base);
  line-height: var(--fs-line-height-normal);
}

/* ==========================================================================
   Target Miss Callout - Prominent warning banner
   ========================================================================== */

.target-miss-callout[b-006q9xvo64] {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-spacing-md);
  padding: var(--fs-spacing-lg);
  background: var(--fs-warning-light); /* Amber-100 */
  border-left: 4px solid var(--fs-warning); /* Amber-500 */
  border-radius: var(--fs-radius-md);
  margin-top: var(--fs-spacing-lg);
  margin-bottom: var(--fs-spacing-md);
}

.target-miss-callout .callout-icon[b-006q9xvo64] {
  font-size: var(--fs-font-size-xl);
  color: var(--fs-warning); /* Amber-600 */
  flex-shrink: 0;
  line-height: 1;
}

.target-miss-callout .callout-content[b-006q9xvo64] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-xs);
}

.target-miss-callout strong[b-006q9xvo64] {
  color: var(--fs-warning-text); /* Amber-800 */
  font-weight: var(--fs-font-weight-semibold);
  font-size: var(--fs-font-size-base);
}

.target-miss-callout span[b-006q9xvo64] {
  color: var(--fs-warning-text); /* Amber-900 */
  font-size: var(--fs-font-size-sm);
}

.food-name[b-006q9xvo64] {
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Macro Breakdown Section — all macros vs targets
   ========================================================================== */

.macro-breakdown[b-006q9xvo64] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-lg) 0;
  border-bottom: 1px solid var(--fs-border-default);
}

.macro-row[b-006q9xvo64] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-xs);
}

.macro-row-info[b-006q9xvo64] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
}

.macro-label[b-006q9xvo64] {
  font-weight: var(--fs-font-weight-semibold);
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-primary);
  min-width: 60px;
}

.macro-actual[b-006q9xvo64] {
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-primary);
}

.macro-target-range[b-006q9xvo64] {
  font-size: var(--fs-font-size-xs);
  color: var(--fs-text-secondary);
}

.macro-status-badge[b-006q9xvo64] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  white-space: nowrap;
  margin-left: auto;
}

.macro-status-badge i[b-006q9xvo64] {
  font-size: 0.625rem;
}

.macro-status-in-range[b-006q9xvo64] {
  background: var(--fs-success-light);
  color: var(--fs-success-text);
}

.macro-status-over[b-006q9xvo64] {
  background: var(--fs-error-light);
  color: var(--fs-error-text);
}

.macro-status-under[b-006q9xvo64] {
  background: var(--fs-warning-light);
  color: var(--fs-warning-text);
}

.macro-status-no-target[b-006q9xvo64] {
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-muted);
}

/* ==========================================================================
   Fixed Portions summary — Clinic light card (coherent with FixedTotalStrip).
   Neutral white surface + blue left-accent; kcal neutral, P/C/F in the
   canonical macro palette. Replaces the old grey box with swapped badges.
   ========================================================================== */
.fixed-portions-section[b-006q9xvo64] {
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-left: 3px solid var(--fs-border-default);
  border-radius: 14px;
  padding: var(--fs-spacing-md);
  box-shadow: none;
}

.fps-section-title[b-006q9xvo64] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-text-secondary);
}

.fps-section-title .fa-lock[b-006q9xvo64] {
  color: var(--fs-text-muted);
}

.fps-count[b-006q9xvo64] {
  font-size: 11px;
  font-weight: 700;
  color: var(--fs-text-secondary);
  background: var(--fs-bg-tertiary);
  border-radius: var(--fs-radius-pill);
  padding: 1px 8px;
}

.fixed-serving-item:last-child[b-006q9xvo64] {
  border-bottom: 0 !important;
}

.fps-lock[b-006q9xvo64] {
  font-size: 0.75rem;
  color: var(--fs-text-muted);
}

.fps-macros[b-006q9xvo64] {
  color: var(--fs-text-secondary);
  font-variant-numeric: normal;
}

.fps-sep[b-006q9xvo64] {
  margin: 0 0.35rem;
  color: var(--fs-text-muted);
}

.fps-kcal[b-006q9xvo64] {
  color: var(--fs-text-primary);
  font-weight: 600;
}

.fps-p[b-006q9xvo64] {
  color: var(--fs-macro-protein-text);
  font-weight: 600;
}

.fps-c[b-006q9xvo64] {
  color: var(--fs-macro-carbs-text);
  font-weight: 600;
}

.fps-f[b-006q9xvo64] {
  color: var(--fs-macro-fat-text);
  font-weight: 600;
}

.fps-total[b-006q9xvo64] {
  border-top: 1px solid var(--fs-border-default);
}

.fps-total-label[b-006q9xvo64] {
  font-weight: 600;
  color: var(--fs-text-secondary);
}

.fps-total-macros .fps-kcal[b-006q9xvo64],
.fps-total-macros .fps-p[b-006q9xvo64],
.fps-total-macros .fps-c[b-006q9xvo64],
.fps-total-macros .fps-f[b-006q9xvo64] {
  font-weight: 700;
}

/* Progress bar */
.macro-progress-bar[b-006q9xvo64] {
  position: relative;
  height: 6px;
  background: var(--fs-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.progress-target-zone[b-006q9xvo64] {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--fs-shade-a08);
  border-radius: 3px;
  z-index: 1;
}

.progress-fill[b-006q9xvo64] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
  z-index: 2;
  transition: width 0.4s ease;
}

.progress-fill-in-range[b-006q9xvo64] {
  background: var(--fs-success);
}
.progress-fill-over[b-006q9xvo64] {
  background: var(--fs-error);
}
.progress-fill-under[b-006q9xvo64] {
  background: var(--fs-primary);
}
.progress-fill-no-target[b-006q9xvo64] {
  background: var(--fs-text-muted);
  opacity: 0.4;
}

/* ==========================================================================
   Mobile responsive - Closest Match section
   ========================================================================== */

@media (max-width: 576px) {
  .target-miss-callout[b-006q9xvo64] {
    flex-direction: row;
    padding: var(--fs-spacing-md);
  }

  .food-name[b-006q9xvo64] {
    white-space: normal;
  }
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .no-match-header[b-006q9xvo64] {
    font-size: var(--fs-font-size-base);
  }

  .portion-item[b-006q9xvo64] {
    display: block;
    margin-right: 0;
    margin-bottom: var(--fs-spacing-xs);
  }

  .macro-row-info[b-006q9xvo64] {
    gap: var(--fs-spacing-xs);
    flex-wrap: wrap;
  }
  .macro-label[b-006q9xvo64] {
    min-width: 48px;
    font-size: var(--fs-font-size-xs);
  }
  .macro-actual[b-006q9xvo64] {
    font-size: var(--fs-font-size-xs);
  }
  .macro-status-badge[b-006q9xvo64] {
    font-size: 0.625rem;
    padding: 1px var(--fs-spacing-xs);
  }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .progress-fill[b-006q9xvo64] {
    transition: none;
  }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
  .macro-progress-bar[b-006q9xvo64] {
    border: 1px solid var(--fs-text-secondary);
  }
  .progress-target-zone[b-006q9xvo64] {
    background: var(--fs-shade-a20);
    border: 1px dashed var(--fs-text-secondary);
  }
  .macro-status-badge[b-006q9xvo64] {
    border: 1px solid currentColor;
  }
}

/* Inline notice shown in place of the Refine surface when there is nothing to refine (F2). */
.refine-unavailable[b-006q9xvo64] {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  background: var(--fs-bg-secondary);
  color: var(--fs-text-secondary);
  font-size: 0.875rem;
  line-height: 1.35;
}

/* No-combinations dead-end (phase 4) — an explained state in the band family, not a bare button. */
.results-dead-end[b-006q9xvo64] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  max-width: 420px;
  margin: 2rem auto;
  padding: 2rem 1.5rem;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 14px;
  box-shadow: none;
}

.results-dead-end-icon[b-006q9xvo64] {
  font-size: 22px;
  color: var(--fs-text-muted);
}

.results-dead-end-title[b-006q9xvo64] {
  margin: 0;
  font:
    700 16px var(--fs-font-family);
  color: var(--fs-text-primary);
}

.results-dead-end-sub[b-006q9xvo64] {
  margin: 0;
  font-size: 13.5px;
  color: var(--fs-text-secondary);
  line-height: 1.5;
}

/* Shared result-card button contract (matches afs-btn / ocw-btn): filled primary, radius-md,
   hover lift, focus-visible ring — not a bespoke pill. */
/* A fault is not an empty state. Both cards share .results-dead-end geometry, so without this the only
   difference is the glyph — 22px at --fs-text-muted, ~2.5:1, which nobody registers. --fs-error-text is
   documented in design-tokens.css as ~6:1 on light. Shape AND colour, never colour alone. */
.results-dead-end-icon.is-error[b-006q9xvo64] {
  color: var(--fs-error-text);
}

/* Two classes so the muted grey beats Bootstrap's single-class .btn-link blue regardless of load order —
   the pattern split-layout.css:1041 documents. Otherwise this renders #0d6efd directly under a
   --fs-primary #2563eb button. 44px is this app's floor; .btn-sm alone lands at ~31px. */
.btn.results-dead-end-ghost[b-006q9xvo64] {
  color: var(--fs-text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  min-height: 44px;
  padding: 8px 12px;
}

.btn.results-dead-end-ghost:hover[b-006q9xvo64],
.btn.results-dead-end-ghost:focus-visible[b-006q9xvo64] {
  color: var(--fs-text-primary);
  text-decoration: underline;
}

.results-dead-end-btn[b-006q9xvo64] {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  margin-top: 8px;
  padding: var(--fs-spacing-md) var(--fs-spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--fs-radius-md);
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  cursor: pointer;
  box-shadow: var(--fs-shadow-primary-subtle);
  transition: var(--fs-transition-all);
}

.results-dead-end-btn:hover[b-006q9xvo64] {
  background: var(--fs-primary-hover);
  box-shadow: var(--fs-shadow-primary);
}

.results-dead-end-btn:focus-visible[b-006q9xvo64] {
  outline: none;
  box-shadow: var(--fs-focus-ring-primary);
}

@media (prefers-reduced-motion: reduce) {
  .results-dead-end-btn:hover[b-006q9xvo64] {
    transform: none;
  }
}
/* /Components/Meals/MealItem.razor.rz.scp.css */
/* Meal-specific styles - macro badge colors are in macro-badges.css */

/* Ensure badges have proper sizing in meal items */
.meal-macro-badges[b-89pbbw0w70] {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 1rem;
  width: 100%;
}

.meal-macro-badges .badge[b-89pbbw0w70] {
  border-radius: 8px !important;
  box-shadow: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.meal-macro-badges .badge:hover[b-89pbbw0w70] {
  box-shadow: none !important;
}

/* Button styles */
.meal-select-button[b-89pbbw0w70] {
  font-weight: 500;
  letter-spacing: 0.3px;
}

.meal-details-toggle[b-89pbbw0w70] {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.meal-details-toggle:hover[b-89pbbw0w70] {
  text-decoration: underline;
}

/* Responsive adjustments for meal badges container */
@media (max-width: 1400px) {
  .meal-macro-badges[b-89pbbw0w70] {
    gap: 5px;
  }
}

@media (max-width: 1200px) {
  .meal-macro-badges[b-89pbbw0w70] {
    gap: 4px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .meal-macro-badges[b-89pbbw0w70] {
    gap: 3px;
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 576px) {
  .meal-macro-badges[b-89pbbw0w70] {
    gap: 2px;
    margin-bottom: 0.5rem;
  }
}

/* Fix alignment issues on mobile */
@media (max-width: 767px) {
  .meal-item-mobile-align[b-89pbbw0w70] {
    text-align: left !important;
  }

  .meal-macro-badges[b-89pbbw0w70] {
    justify-content: flex-start !important;
    margin-top: 0.5rem;
  }
}

/* Food name styling in nutrition facts view */
.meal-food-name[b-89pbbw0w70] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  display: inline-block;
  margin-bottom: 0.25rem;
}

/* Larger screens - make food names bigger */
@media (min-width: 992px) {
  .meal-food-name[b-89pbbw0w70] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 1200px) {
  .meal-food-name[b-89pbbw0w70] {
    font-size: 1.35rem;
  }
}

@media (min-width: 1400px) {
  .meal-food-name[b-89pbbw0w70] {
    font-size: 1.5rem;
  }
}

/* Fixed Portion Styling */
.fixed-portion-item[b-89pbbw0w70] {
  background-color: var(--fs-text-secondary-a06);
  border-left: 3px solid var(--fs-text-secondary);
  padding-left: 0.75rem;
  margin-left: -0.5rem;
  border-radius: 0 4px 4px 0;
}

.fixed-portion-item .meal-food-name[b-89pbbw0w70] {
  color: var(--fs-text-body);
}

/* Fixed portion lock icon sizing */
.fixed-lock-icon[b-89pbbw0w70] {
  font-size: 0.75rem;
}

/* Lock icon animation on hover */
.fixed-portion-item .fa-lock[b-89pbbw0w70] {
  transition: transform 0.2s ease;
}

.fixed-portion-item:hover .fa-lock[b-89pbbw0w70] {
  transform: scale(1.1);
}

/* "Mostly protein" dominance sublabel next to the food-row donut (canvas 2c). */
.course-macro-sublabel[b-89pbbw0w70] {
  margin-left: 8px;
  font-size: 12px;
  color: var(--fs-text-secondary);
  white-space: nowrap;
}
/* /Components/Meals/MealPlanner.razor.rz.scp.css */
/* Note: Design tokens are imported globally in _Layout.cshtml */
/* This file uses CSS variables defined in design-tokens.css */

/* Loading-screen entrance easing: a 200ms fade-in so the loader settles in rather than popping (the
   original "moves too fast" complaint). Plays once on mount; re-renders while loading (e.g. the dwell
   message escalating) keep the same element, so it does not retrigger.

   No show-delay is applied: an anti-flash delay only helps loads that complete faster than it, and 14 days
   of telemetry showed every dashboard load completing above 750ms (min 959ms) — the fast band is empty, so
   a delay would just add blank time to every load while preventing nothing. Revisit only if the FAST TAIL
   (min / p5 / p10 warm-load) ever drops below ~750ms, not the median. */
.loading-container[b-o3gi61li3j] {
  /* Duration in design-tokens.css (--fs-dur-loading-fade). */
  animation: pp-loading-fade-in-b-o3gi61li3j var(--fs-dur-loading-fade, 200ms) ease-out both;
}

@keyframes pp-loading-fade-in-b-o3gi61li3j {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reduced motion: no fade — the loader appears immediately at full opacity, which is the expected behavior
   for users who have opted out of motion. */
@media (prefers-reduced-motion: reduce) {
  .loading-container[b-o3gi61li3j] {
    animation: none;
  }
}

/* ============================================
   Existing Styles - Meal Planner
   ============================================ */

.meal-planner[b-o3gi61li3j] {
  padding-bottom: var(--fs-spacing-3xl);
}

.section-title[b-o3gi61li3j] {
  font-size: var(--fs-font-size-xl);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-primary);
}

.meals-container[b-o3gi61li3j] {
  margin-top: var(--fs-spacing-lg);
}

.snacks-section[b-o3gi61li3j] {
  margin-top: var(--fs-spacing-3xl);
}

/* ============================================
   Empty State Onboarding Guide
   ============================================ */

.empty-state-hint[b-o3gi61li3j] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-sm) 0;
  margin-bottom: var(--fs-spacing-sm);
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-muted);
  letter-spacing: 0.01em;
}

.hint-dot[b-o3gi61li3j] {
  color: var(--fs-text-muted);
  opacity: 0.5;
  flex-shrink: 0;
  line-height: 1;
  font-size: 1em;
  user-select: none;
}

/* Wave F: fixed edit-undo banner. The inner UndoNotice live region stays mounted unconditionally;
   this wrapper only fades in / becomes interactive when a recent edit is undoable (.active), so the
   aria-live region pre-exists and its announcement isn't lost (opacity, not display:none). */
.custom-food-undo-bar[b-o3gi61li3j] {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1080;
  max-width: calc(100vw - 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.custom-food-undo-bar.active[b-o3gi61li3j] {
  opacity: 1;
  padding: 0.6rem 1rem;
  background: var(--fs-bg-primary);
  color: var(--fs-text-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-md, 8px);
  box-shadow: var(--fs-shadow-dialog) /* a toast floats over the meal cards */;
}

/* The bar itself stays pointer-events:none (base rule above) so it can float over an open modal
   (editing starts from the Custom Foods manager, which stays open) like a snackbar WITHOUT blocking
   the modal's controls — only the Undo button is interactive. */
.custom-food-undo-bar[b-o3gi61li3j]  .undo-link {
  pointer-events: auto;
}

/* Resize confirmation. Fixed, so applying a size never pushes the dashboard down at the instant the
   dashboard changes — the original banner was inserted in flow at the top of the page, which on a
   scrolled phone moved the meal row out from under the user's thumb while the message itself rendered
   off-screen above them.

   left/right rather than left:50% + translateX: for a shrink-to-fit fixed box, left:50% caps the
   available width at half the viewport, so the sibling undo bar renders 195px wide on a 390px phone and
   wraps into a column. The transform recentres it but never gives the width back.

   Same opacity-not-display rule as the undo bar, so the live region inside pre-exists its content. */
.meal-size-notice-bar[b-o3gi61li3j] {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 1080;
  max-width: 520px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.meal-size-notice-bar.active[b-o3gi61li3j] {
  opacity: 1;
  padding: 0.6rem 0.85rem;
  background: var(--fs-bg-primary);
  color: var(--fs-text-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-md, 8px);
  box-shadow: var(--fs-shadow-dialog) /* a toast floats over the meal cards */;

  /* Tappable, unlike the undo bar it sits beside. That bar is small and floats over a modal backdrop;
     this one is 288-398px of opaque card lying across the meal list, and pointer-events:none sent a tap
     meant to dismiss it straight through to the meal-size row underneath — which opened a sheet on a
     meal the user had not chosen, with a live stepper, one tap from undoing the balance just set. */
  pointer-events: auto;
  cursor: pointer;
}

/* It has to report the write, not just the plan. Both lines below are statements of fact about the day;
   a user who pressed a button whose job was to save still needs to be told that it saved. */
.meal-size-notice-saved[b-o3gi61li3j] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fs-success-text);
}

.meal-size-notice-headline[b-o3gi61li3j] {
  font-size: 14px;
  font-weight: 600;
}

.meal-size-notice-detail[b-o3gi61li3j] {
  font-size: 12px;
  line-height: 1.4;
  color: var(--fs-text-secondary);
}

/* One step quieter than the movement line above it. That line is the answer the user came for; this one
   reports a state change they did not ask for and can undo elsewhere, so it should read as a footnote
   rather than compete with the number.

   --fs-text-secondary, NOT --fs-text-tertiary: that token does not exist anywhere in the repo, so the
   #9ca3af fallback always applied — 2.5:1 on white at 11px, against WCAG AA's 4.5:1. This is the ONLY
   place the automatic hold is explained, and the notice dismisses itself after 8 seconds, so a reader who
   cannot resolve it in that time never learns their meal was frozen. --fs-text-muted is the same failing
   #9ca3af and is not the alternative; --fs-text-secondary is #6b7280, 4.83:1. */
.meal-size-notice-hold[b-o3gi61li3j] {
  font-size: 11px;
  line-height: 1.4;
  color: var(--fs-text-secondary);
}

/* The promotion outcome, and the way back out of it, on the size notice.
   The line was announced but never shown from #549 until it was rendered here. */
.meal-size-notice-promotion[b-o3gi61li3j] {
  display: block;
  font-size: 0.8125rem;
  opacity: 0.9;
}

.meal-size-notice-undo[b-o3gi61li3j] {
  /* The one hit target on a bar that otherwise dismisses on click, so it is a real button rather than
     text: it needs its own focus ring and its own accessible name. */
  align-self: flex-start;
  margin-top: 4px;
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
/* /Components/Meals/MealPortionRow.razor.rz.scp.css */
/* MealPortionRow — one food in the portion sheet (#1005, A1). Colours are --fs-* role tokens (#1028).

   SPECIFICITY: MobileBottomSheet.razor.css has `.mobile-bottom-sheet ::deep button` at (0,2,1), which forces
   every button in a sheet to 16px/44px on mobile. The amount button is meant to be a 44px tap target anyway,
   so it only needs its text styling back; see MealSizeSheet.razor.css for the full story. */

.portion-sheet-row .portion-sheet-amount[b-qy6yotnosk] {
  display: block;
  width: 100%; /* a button is only as wide as its text otherwise: "5 g" was a 20px target */
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.portion-sheet-row .portion-sheet-amount:focus-visible[b-qy6yotnosk] {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 2px;
}

/* The weight is the hero of the design: primary text, semibold. Counts and kcal stay secondary. */
.portion-sheet-grams[b-qy6yotnosk] {
  color: var(--fs-text-primary);
  font-weight: 600;
}

.portion-sheet-quiet[b-qy6yotnosk] {
  color: var(--fs-text-secondary);
}

/* 16px so iOS Safari does not zoom the page when the box takes focus. Corners are the global control radius. */
.portion-sheet-amount-input[b-qy6yotnosk] {
  width: 5.5rem;
  font-size: 16px;
}

/* The box and its unit picker share a line, so one height: the sheet gives inputs 44px on phones, while
   meal-planner-mobile.css forces every select to 36px !important there — and off the sheet neither is 44. */
.portion-sheet-row .portion-sheet-amount-input[b-qy6yotnosk],
.portion-sheet-row .portion-sheet-unit[b-qy6yotnosk] {
  min-height: 44px !important;
}

/* Never colour alone: the box also carries aria-invalid and points at the hint (aria-describedby). */
.portion-sheet-amount-input[aria-invalid="true"][b-qy6yotnosk] {
  border-color: var(--fs-error);
}

/* Not .form-select-sm: meal-planner-mobile.css caps `select.form-select-sm` at 100px !important, which clips
   "medium (44 g)" under its own arrow. */
.portion-sheet-unit[b-qy6yotnosk] {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  width: auto;
  min-width: 0;
  font-size: 16px;
}

/* Reserves the line, so a message appearing does not push the rows below it. */
.portion-sheet-problem[b-qy6yotnosk] {
  min-height: 1.25em;
  color: var(--fs-error-text);
}
/* /Components/Meals/MealPortionSheet.razor.rz.scp.css */
/* MealPortionSheet — the portion sheet's footer (#1005, A1). The rows style themselves: MealPortionRow.razor.css.
   Colours are --fs-* role tokens, never Bootstrap colour classes, so the #1028 restyle reaches them.

   Two classes to outrank `.mobile-bottom-sheet ::deep button` (0,2,1), which repaints every sheet button as an
   outline one on mobile.

   Hover and pressed are spelled out: these rules outrank Bootstrap's `.btn:hover`, and its `.btn:first-child:active`
   ties with them, loads later and reads --bs-btn-active-* a plain .btn never sets — a pressed Done lost its fill. The
   shades are .btn-primary's (brand-overrides.css). */

/* Done is the sheet's one main action: --fs-primary, filled, a pill like every sheet's main action (#1028). */
.portion-sheet-footer .portion-sheet-done[b-clula7p67i] {
  min-height: 44px;
  border-radius: var(--fs-radius-pill);
  background-color: var(--fs-primary);
  border-color: var(--fs-primary);
  color: var(--fs-text-inverse);
}

.portion-sheet-footer .portion-sheet-done:hover[b-clula7p67i] {
  background-color: var(--fs-primary-hover);
  border-color: var(--fs-primary-hover);
  color: var(--fs-text-inverse);
}

.portion-sheet-footer .portion-sheet-done:active[b-clula7p67i] {
  background-color: var(--fs-primary-active);
  border-color: var(--fs-primary-active);
  color: var(--fs-text-inverse);
}

/* The rare path: a text link, not a second button. */
.portion-sheet-footer .portion-sheet-pick-food[b-clula7p67i] {
  min-height: 44px;
  color: var(--fs-primary-text);
  text-decoration: underline;
}

.portion-sheet-footer .portion-sheet-pick-food:hover[b-clula7p67i] {
  color: var(--fs-primary-text-hover);
}

.portion-sheet-footer .portion-sheet-pick-food:active[b-clula7p67i] {
  background-color: transparent;
  border-color: transparent;
  color: var(--fs-primary-text-active);
}

/* Bootstrap's .btn focus ring is a shadow only its colour variants define, so neither button showed one. */
.portion-sheet-footer .portion-sheet-done:focus-visible[b-clula7p67i],
.portion-sheet-footer .portion-sheet-pick-food:focus-visible[b-clula7p67i] {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 2px;
}
/* /Components/Meals/MealScoreCard.razor.rz.scp.css */
/* ==========================================================================
   Meal Score Card - Modern Minimalist Design
   Uses design tokens from design-tokens.css for consistency
   ========================================================================== */

.meal-score-card[b-9ctzo6x3e7] {
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-xl);
  padding: var(--fs-spacing-xl);
  margin-bottom: var(--fs-spacing-2xl);
  box-shadow: var(--fs-shadow-sm);
  transition: var(--fs-transition-all);
}

.meal-score-card:hover[b-9ctzo6x3e7] {
  box-shadow: var(--fs-shadow-md);
}

/* Score Header - Left-aligned icon with grade */
.score-header[b-9ctzo6x3e7] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-lg);
  margin-bottom: var(--fs-spacing-lg);
}

/* Circular Progress Ring */
.score-visual[b-9ctzo6x3e7] {
  flex-shrink: 0;
}

.score-ring[b-9ctzo6x3e7] {
  position: relative;
  width: 56px;
  height: 56px;
}

.circular-progress[b-9ctzo6x3e7] {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle-bg[b-9ctzo6x3e7] {
  fill: none;
  stroke: var(--fs-border-default);
  stroke-width: 3;
}

.circle-progress[b-9ctzo6x3e7] {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease-out;
}

/* Progress Colors - Semantic meaning */
.progress-excellent[b-9ctzo6x3e7] {
  stroke: var(--fs-success);
}
.progress-very-good[b-9ctzo6x3e7] {
  stroke: var(--fs-text-primary);
}
.progress-good[b-9ctzo6x3e7] {
  stroke: var(--fs-text-primary);
}
.progress-all-right[b-9ctzo6x3e7] {
  stroke: var(--fs-warning);
}
.progress-needs-improvement[b-9ctzo6x3e7] {
  stroke: var(--fs-error);
}
.progress-no-match[b-9ctzo6x3e7] {
  stroke: var(--fs-text-secondary);
}

/* Icon inside ring */
.score-icon[b-9ctzo6x3e7] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
}

.icon-excellent[b-9ctzo6x3e7] {
  color: var(--fs-success);
}
.icon-very-good[b-9ctzo6x3e7] {
  color: var(--fs-text-primary);
}
.icon-good[b-9ctzo6x3e7] {
  color: var(--fs-text-primary);
}
.icon-all-right[b-9ctzo6x3e7] {
  color: var(--fs-warning);
}
.icon-needs-improvement[b-9ctzo6x3e7] {
  color: var(--fs-error);
}
.icon-no-match[b-9ctzo6x3e7] {
  color: var(--fs-text-secondary);
}

/* Score Content */
.score-content[b-9ctzo6x3e7] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-xs);
}

.score-label[b-9ctzo6x3e7] {
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-secondary);
  font-weight: var(--fs-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.score-grade[b-9ctzo6x3e7] {
  font-size: var(--fs-font-size-xl);
  font-weight: var(--fs-font-weight-bold);
  line-height: 1.2;
}

/* Grade Colors - Match icon colors */
.grade-excellent[b-9ctzo6x3e7] {
  color: var(--fs-success);
}
.grade-very-good[b-9ctzo6x3e7] {
  color: var(--fs-text-primary);
}
.grade-good[b-9ctzo6x3e7] {
  color: var(--fs-text-primary);
}
.grade-all-right[b-9ctzo6x3e7] {
  color: var(--fs-warning);
}
.grade-needs-improvement[b-9ctzo6x3e7] {
  color: var(--fs-error);
}
.grade-no-match[b-9ctzo6x3e7] {
  color: var(--fs-text-secondary);
}

/* Card Accent Border - Subtle left border */
.score-very-good[b-9ctzo6x3e7] {
  border-left: 4px solid var(--fs-border-default);
}
.score-good[b-9ctzo6x3e7] {
  border-left: 4px solid var(--fs-border-default);
}
.score-all-right[b-9ctzo6x3e7] {
  border-left: 4px solid var(--fs-warning);
}
.score-needs-improvement[b-9ctzo6x3e7] {
  border-left: 4px solid var(--fs-error);
}
.score-no-match[b-9ctzo6x3e7] {
  border-left: 4px solid var(--fs-text-secondary);
}

/* Perfect Match - Celebratory styling */
.score-excellent[b-9ctzo6x3e7] {
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
  border: 1px solid var(--fs-success-light);
  border-left: 4px solid var(--fs-success);
}

/* Ensure actions border matches celebratory theme */
.score-excellent .score-actions[b-9ctzo6x3e7] {
  border-top-color: var(--fs-success-light);
}

/* Celebration Section - Perfect Match */
.score-celebration[b-9ctzo6x3e7] {
  margin-top: var(--fs-spacing-md);
  padding-top: var(--fs-spacing-md);
  border-top: 1px solid var(--fs-success-light);
}

.score-celebration p[b-9ctzo6x3e7] {
  margin: 0;
  color: var(--fs-success-text);
  font-size: var(--fs-font-size-base);
  line-height: var(--fs-line-height-relaxed);
  font-weight: var(--fs-font-weight-medium);
}

/* Guidance Section */
.score-guidance[b-9ctzo6x3e7] {
  margin-top: var(--fs-spacing-md);
  padding-top: var(--fs-spacing-md);
  border-top: 1px solid var(--fs-border-default);
}

/* Aggregate Insight - guidance based on ALL combinations */
.aggregate-insight[b-9ctzo6x3e7] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-sm);
}

.aggregate-insight .guidance-problem[b-9ctzo6x3e7] {
  margin: 0;
  color: var(--fs-text-primary);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-medium);
  line-height: var(--fs-line-height-relaxed);
}

.aggregate-insight .guidance-action[b-9ctzo6x3e7] {
  margin: 0;
  color: var(--fs-text-secondary);
  font-size: var(--fs-font-size-sm);
  line-height: var(--fs-line-height-relaxed);
  padding-left: var(--fs-spacing-md);
  border-left: 2px solid var(--fs-primary-text);
}

/* Remove nested card styling from ShortfallGuidanceCard */
.score-guidance :deep(.shortfall-guidance-card)[b-9ctzo6x3e7] {
  background: transparent;
  border-left: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
}

/* Description Section */
.score-description[b-9ctzo6x3e7] {
  margin-top: var(--fs-spacing-md);
  padding-top: var(--fs-spacing-md);
  border-top: 1px solid var(--fs-border-default);
}

.score-description p[b-9ctzo6x3e7] {
  margin: 0;
  color: var(--fs-text-secondary);
  font-size: var(--fs-font-size-base);
  line-height: var(--fs-line-height-relaxed);
}

.suggestion-text[b-9ctzo6x3e7] {
  margin-top: var(--fs-spacing-sm) !important;
  padding-left: var(--fs-spacing-md);
  border-left: 2px solid var(--fs-border-default);
}

/* Actions Section */
.score-actions[b-9ctzo6x3e7] {
  margin-top: var(--fs-spacing-lg);
  padding-top: var(--fs-spacing-lg);
  border-top: 1px solid var(--fs-border-default);
}

.btn-change-foods[b-9ctzo6x3e7] {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-md) var(--fs-spacing-xl);
  background: var(--fs-bg-primary);
  border: 2px solid var(--fs-primary-text);
  color: var(--fs-primary-text);
  border-radius: var(--fs-radius-md);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  cursor: pointer;
  transition: var(--fs-transition-all);
  min-height: var(--fs-mobile-tap-target-sm);
}

.btn-change-foods:hover[b-9ctzo6x3e7] {
  background: var(--fs-primary);
  border-color: var(--fs-primary); /* a filled button edges in the fill, not the lighter text Beet */
  color: var(--fs-text-inverse);
  box-shadow: var(--fs-shadow-primary);
}

.btn-change-foods:active[b-9ctzo6x3e7] {
  transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .meal-score-card[b-9ctzo6x3e7] {
    padding: var(--fs-spacing-lg);
    border-radius: var(--fs-radius-lg);
  }

  .score-header[b-9ctzo6x3e7] {
    gap: var(--fs-spacing-md);
  }

  .score-ring[b-9ctzo6x3e7] {
    width: 48px;
    height: 48px;
  }

  .score-icon[b-9ctzo6x3e7] {
    font-size: 1.25rem;
  }

  .score-grade[b-9ctzo6x3e7] {
    font-size: var(--fs-font-size-lg);
  }

  .btn-change-foods[b-9ctzo6x3e7] {
    width: 100%;
    justify-content: center;
    min-height: var(--fs-mobile-tap-target);
  }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .meal-score-card[b-9ctzo6x3e7],
  .circle-progress[b-9ctzo6x3e7],
  .btn-change-foods[b-9ctzo6x3e7] {
    transition: none;
  }

  .btn-change-foods:hover[b-9ctzo6x3e7] {
    transform: none;
  }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
  .meal-score-card[b-9ctzo6x3e7] {
    border-width: 2px;
  }

  .btn-change-foods[b-9ctzo6x3e7] {
    border-width: 3px;
  }

  .circle-progress[b-9ctzo6x3e7] {
    stroke-width: 4;
  }
}
/* /Components/Meals/MealSizeScopePicker.razor.rz.scp.css */
/* Scope control -- the slot that used to hold a single sentence.

   Its own isolated stylesheet, beside its own markup. These rules briefly lived in
   MealSizeSheet.razor.css and applied to nothing: CSS isolation stamps each file's rules with the scope
   attribute of ITS component, and this component's elements do not carry the sheet's. */

.size-sheet-scope[b-77pnolfnh5] {
  border-top: 1px solid var(--fs-border-default);
  padding-top: 8px;
  font-size: 12px;
  color: var(--bs-secondary-color, var(--fs-text-secondary));
}

/* Two options on one row. Below 380px the sheet's rows already collapse to two columns, so each option
   has about 170px; the labels are sized to fit that without wrapping. */
.size-sheet-scope-group[b-77pnolfnh5] {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.size-sheet-scope-legend[b-77pnolfnh5] {
  padding: 0;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fs-text-body);
}

.size-sheet-scope-option[b-77pnolfnh5] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--fs-text-body);
  cursor: pointer;
  /* The pair must survive the two-column collapse without either option wrapping mid-word. */
  flex: 1 1 150px;
  min-width: 0;
}

.size-sheet-scope-option input[b-77pnolfnh5] {
  /* A real radio, not a styled div: it announces its own selection, which is why scope changes never
       go through the sheet's single-utterance live region. */
  margin: 0;
  flex: none;
}

/* Why the promotion is not on offer. Deliberately the same weight as the scope sentence below it and
   NOT a warning colour: the resize still applies, and only the permanent split is unavailable. Amber on
   white is about 1.6:1 and fails AA outright; #5f6368 on #fff is 6.6:1 and clears it. Same declarations
   as .size-sheet-scope-sentence, including the top margin -- this stands where the legend would be, and
   the legend carries margin-bottom: 6px, so without it the text sits flush against the border-top. */
.size-sheet-scope-withheld[b-77pnolfnh5] {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
}

.size-sheet-scope-sentence[b-77pnolfnh5] {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
}

/* The promoted state: a statement and the way out of it, on one row like the two options above. */
.size-sheet-scope-usual[b-77pnolfnh5] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.size-sheet-scope-clear[b-77pnolfnh5] {
  /* A link, not a button: it is the quieter of the two things on this row, and the statement beside it
     is the point. Styled as text so it cannot read as the primary action of the sheet. */
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--bs-link-color, var(--fs-primary-text));
  text-decoration: underline;
  cursor: pointer;
  flex: none;
}

/* The split the promotion would store. Here and not in MealSizeSheet.razor.css for the reason at the top
   of this file: rules for this component's elements only apply from this component's stylesheet. */
.size-sheet-scope-readback[b-77pnolfnh5] {
  margin-top: 8px;
  border-top: 1px dashed var(--fs-border-default);
  padding-top: 6px;
}

/* Name left, movement right, on one line each. The pair must survive the sheet's two-column collapse
   below 380px, so the value is allowed to keep its width and the name gives way. */
.size-sheet-scope-readback-row[b-77pnolfnh5] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--fs-text-body);
}

.size-sheet-scope-readback-name[b-77pnolfnh5] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.size-sheet-scope-readback-value[b-77pnolfnh5] {
  flex: none;
  font-variant-numeric: normal;
}

.size-sheet-scope-readback-count[b-77pnolfnh5] {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
}
/* /Components/Meals/MealSizeSheet.razor.rz.scp.css */
/* MealSizeSheet — body, stepper, bar and peer rows.

   Colours follow the app's Bootstrap/MudBlazor variables with the design's hex as the fallback, so the
   sheet keeps its intended look where a variable is not defined. Note that --bs-secondary-color does not
   exist in Bootstrap 5.2.3 (it arrived in 5.3), so those fallbacks are what renders today — a Bootstrap
   upgrade would repaint the receipt, the bar captions and the scope line unless they are revisited.

   SPECIFICITY: MobileBottomSheet.razor.css has `.mobile-bottom-sheet ::deep button`, which compiles to
   (0,2,1) and outranks a single class plus this file's scope attribute (0,2,0). It forces every button in
   this sheet to 16px/44px on mobile — which shrank the stepper glyphs to a sixth of their intended size
   and pushed the footer's three nowrap buttons past the sheet's own width, where overflow:hidden clipped
   the end of "Apply · Dinner 745" off the screen. Desktop was unaffected, so nothing on a desktop QA pass
   would ever show it. The two-class selectors below reclaim the sizes at (0,3,0) without !important. */

.size-sheet[b-f0lwgoo42g] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 0 4px;
}

.size-sheet-receipt[b-f0lwgoo42g] {
  font-size: 11px;
  color: var(--bs-secondary-color, var(--fs-text-secondary));
  line-height: 1.4;
}

/* ── Stepper ─────────────────────────────────────────────────────────────────────────────────────── */

.size-sheet-stepper[b-f0lwgoo42g] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.size-sheet-step[b-f0lwgoo42g] {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 16px;
  border: 1px solid var(--bs-border-color, var(--fs-border-hover));
  background: var(--fs-bg-primary);
  color: var(--bs-body-color, var(--fs-text-body));
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* .sheet-body clips overflow, so the ring sits inside the button instead of being cut at the top. */
.size-sheet-step:focus-visible[b-f0lwgoo42g] {
  outline-offset: -3px;
}

.size-sheet-stepper .size-sheet-step[b-f0lwgoo42g] {
  font-size: 26px;
  min-height: 56px;
}

.size-sheet-step.is-primary[b-f0lwgoo42g] {
  border: 1.5px solid var(--fs-primary-text);
  background: var(--fs-bg-selected);
  color: var(--fs-primary-text);
}

/* Greyed, never disabled — the press still explains itself. */
.size-sheet-step.is-at-limit[b-f0lwgoo42g],
.size-sheet-step.is-primary.is-at-limit[b-f0lwgoo42g] {
  border: 1px solid var(--fs-border-hover);
  background: var(--fs-bg-secondary);
  color: var(--fs-text-secondary);
}

.size-sheet-draft[b-f0lwgoo42g] {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.size-sheet-draft-number[b-f0lwgoo42g] {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.size-sheet-draft-unit[b-f0lwgoo42g] {
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-secondary-color, var(--fs-text-secondary));
  margin-left: 4px;
}

.size-sheet-draft-band[b-f0lwgoo42g] {
  font-size: 12px;
  color: var(--bs-secondary-color, var(--fs-text-secondary));
  margin-top: 3px;
}

.size-sheet-draft-band strong[b-f0lwgoo42g] {
  color: var(--bs-body-color, var(--fs-text-body));
}

/* ── Mandatory readout ───────────────────────────────────────────────────────────────────────────── */

.size-sheet-mandatory[b-f0lwgoo42g] {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-radius: 10px;
  background: var(--fs-bg-selected);
  padding: 10px 12px;
}

.size-sheet-mandatory-head[b-f0lwgoo42g] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, var(--fs-text-secondary));
}

.size-sheet-mandatory-row[b-f0lwgoo42g] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.size-sheet-mandatory-label[b-f0lwgoo42g] {
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.size-sheet-mandatory-value[b-f0lwgoo42g] {
  font-size: 14px;
  font-weight: 700;
  color: var(--fs-text-primary);
  white-space: nowrap;
}

/* ── Bar ─────────────────────────────────────────────────────────────────────────────────────────── */

.size-sheet-bar[b-f0lwgoo42g] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.size-sheet-bar-track[b-f0lwgoo42g] {
  position: relative;
  height: 20px;
  border-radius: 10px;
  background: var(--fs-border-default);
  overflow: hidden;
}

.size-sheet-bar-draft[b-f0lwgoo42g],
.size-sheet-bar-hatch[b-f0lwgoo42g],
.size-sheet-bar-hard[b-f0lwgoo42g] {
  position: absolute;
  top: 0;
  bottom: 0;
}

.size-sheet-bar-draft[b-f0lwgoo42g] {
  left: 0;
  background: var(--fs-primary-border);
}

/* The hatch's far edge IS the soft limit — no separate tick to fall out of step with it. */
.size-sheet-bar-hatch[b-f0lwgoo42g] {
  background: repeating-linear-gradient(
    45deg,
    var(--fs-warning-a34),
    var(--fs-warning-a34) 4px,
    var(--fs-warning-a13) 4px,
    var(--fs-warning-a13) 8px
  );
}

/* Translucent, like the hatch: it is drawn OVER the draft so that the caption naming it has something
   to point at. Opaque, it would erase the draft on every meal below its floor. */
.size-sheet-bar-hard[b-f0lwgoo42g] {
  left: 0;
  background: var(--fs-primary-a62);
}

/* Positioned, not spaced: each caption sits under the band it names — and on its own line, because the
   first is wider than the second's offset and they overlapped into an unreadable smear. */
.size-sheet-bar-captions[b-f0lwgoo42g] {
  position: relative;
  min-height: 30px;
  font-size: 11px;
  color: var(--fs-text-secondary);
}

.size-sheet-bar-caption[b-f0lwgoo42g] {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

/* Second line, so it cannot collide with the caption before it, and bounded by BOTH edges. max-width
   resolved against the container rather than the space remaining after `left`, so a band starting far
   along the bar ran off the card with the ellipsis never engaging — no signal that text was missing. */
.size-sheet-bar-caption.is-soft[b-f0lwgoo42g] {
  top: 15px;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Messages ────────────────────────────────────────────────────────────────────────────────────── */

.size-sheet-note[b-f0lwgoo42g] {
  border-radius: 10px;
  border: 1px solid var(--bs-border-color, var(--fs-border-default));
  background: var(--fs-bg-secondary);
  padding: 11px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bs-body-color, var(--fs-text-body));
}

.size-sheet-note.is-warning[b-f0lwgoo42g] {
  border-color: var(--fs-warning-light);
  background: var(--fs-warning-light);
  color: var(--fs-warning-text);
}

/* ── Movement: sentence, peer rows, disclosure ───────────────────────────────────────────────────── */

.size-sheet-movement[b-f0lwgoo42g] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--fs-border-default);
  padding-top: 12px;
}

.size-sheet-sentence[b-f0lwgoo42g] {
  font-size: 13px;
  line-height: 1.55;
  color: var(--bs-body-color, var(--fs-text-body));
  text-wrap: pretty;
}

.size-sheet-row[b-f0lwgoo42g] {
  display: grid;
  grid-template-columns: 1fr auto minmax(0, auto);
  gap: 9px;
  align-items: center;
  border-radius: 8px;
  padding: 6px 8px;
  margin: 0 -8px;
  font-size: 12px;
  color: var(--bs-body-color, var(--fs-text-body));
}

.size-sheet-row.is-edited[b-f0lwgoo42g] {
  background: var(--fs-bg-selected);
  font-weight: 600;
  color: var(--fs-primary-text-active);
}

/* Eaten, held and skipped read the same here on purpose — all are out of the rebalance. What tells them
   apart is the label's own "· planned" / "· held" / "· skipped", because colour alone is not a distinction
   (WCAG 1.4.1) and this palette's grey is not one many people can resolve from body text anyway. */
.size-sheet-row.is-eaten[b-f0lwgoo42g],
.size-sheet-row.is-held[b-f0lwgoo42g],
.size-sheet-row.is-skipped[b-f0lwgoo42g] {
  color: var(--fs-text-secondary);
}

/* The label is "{name} · {delta} · hard to fill" — the name is the least useful part of it, and a
   nowrap ellipsis spent the whole row on the name and cut the delta off. Two lines of 12px text is a
   better answer than a truncated one; at 200% zoom it was the difference between a readable row and an
   ellipsis on its own. */
.size-sheet-row-label[b-f0lwgoo42g] {
  min-width: 0;
  overflow-wrap: anywhere;
}

.size-sheet-row-value[b-f0lwgoo42g] {
  white-space: nowrap;
}

.size-sheet-row-action[b-f0lwgoo42g] {
  text-align: right;
}

/* Narrow, or zoomed: three columns leave the label nothing. Measured at 195px — a 390px phone at 200%
   browser zoom, which WCAG 1.4.10 puts in scope — the value and the note took the whole row and the
   label collapsed to zero width, wrapping one character per line into a 372px-tall column. Below this
   width the note takes its own line and the name gets the room back. */
@media (max-width: 380px) {
  .size-sheet-row[b-f0lwgoo42g] {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .size-sheet-row-action:not(:empty)[b-f0lwgoo42g] {
    grid-column: 1 / -1;
  }

  /* 48px still clears the 44px touch target; at 56px the two buttons plus the 34px draft overflowed. */
  .size-sheet-stepper[b-f0lwgoo42g] {
    gap: 8px;
  }

  .size-sheet-stepper .size-sheet-step[b-f0lwgoo42g] {
    width: 48px;
    height: 48px;
    min-height: 48px;
    font-size: 22px;
  }

  .size-sheet-draft-number[b-f0lwgoo42g] {
    font-size: 28px;
  }
}

.size-sheet-row-note[b-f0lwgoo42g] {
  font-size: 11px;
  line-height: 1.3;
  color: var(--fs-text-secondary);
}

/* The Hold toggle. Quiet when off — it sits on every absorbing row, and a row of blue pills would
   compete with the one control the sheet actually wants pressed (Apply). Loud enough when on that a
   held row reads as different at a glance, backing up its "· held" suffix rather than replacing it.

   36px min-height, not the 3/9 padding the design's static pill uses: this one is a tap target, and
   the peer rows sit directly under the stepper where a mis-tap costs the user their edit. */
.size-sheet-hold[b-f0lwgoo42g] {
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--bs-border-color, var(--fs-border-hover));
  border-radius: 999px;
  background: var(--fs-bg-primary);
  color: var(--fs-text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.size-sheet-hold.is-held[b-f0lwgoo42g] {
  border-color: var(--fs-primary-bg);
  background: var(--fs-bg-selected);
  color: var(--fs-primary-text-active);
}

/* Focus must be visible on both states — the off state is a grey pill on white, which is exactly where
   a browser default outline is easiest to lose. */
.size-sheet-hold:focus-visible[b-f0lwgoo42g] {
  outline: 2px solid var(--bs-primary, var(--fs-border-focus));
  outline-offset: 2px;
}

.size-sheet-hold:disabled[b-f0lwgoo42g] {
  opacity: 0.55;
  cursor: default;
}

.size-sheet-more[b-f0lwgoo42g] {
  width: 100%;
  text-align: left;
  border: 1px dashed var(--fs-border-default);
  border-radius: 8px;
  background: var(--fs-bg-primary);
  color: var(--bs-secondary-color, var(--fs-text-secondary));
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Read-only and blocked ───────────────────────────────────────────────────────────────────────── */

.size-sheet-readonly[b-f0lwgoo42g] {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-radius: 10px;
  background: var(--fs-bg-secondary);
  padding: 13px;
}

.size-sheet-readonly-title[b-f0lwgoo42g] {
  font-size: 13px;
  font-weight: 700;
  color: var(--bs-body-color, var(--fs-text-body));
}

.size-sheet-readonly-body[b-f0lwgoo42g] {
  font-size: 12px;
  line-height: 1.55;
  color: var(--bs-secondary-color, var(--fs-text-secondary));
}

.size-sheet-blocked[b-f0lwgoo42g] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid var(--fs-warning-light);
  background: var(--fs-warning-light);
  padding: 12px;
}

.size-sheet-blocked-message[b-f0lwgoo42g] {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fs-warning-text);
}

/* Carries the column that .size-sheet-blocked used to give these pills directly. The role="list"
   wrapper made them grandchildren, so the parent's gap no longer reaches them; without this the pills
   render flush and their borders weld together. No test can see this — bUnit has no layout. */
.size-sheet-blocker-list[b-f0lwgoo42g] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.size-sheet-blocker[b-f0lwgoo42g] {
  display: flex;
  align-items: center;
  /* The label wraps and the action does not, so the two never collide at 320px — the width this sheet
     has already been bitten at once. */
  gap: 10px;
  border-radius: 8px;
  border: 1px solid var(--fs-warning);
  background: var(--fs-bg-primary);
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-warning-text);
}

.size-sheet-blocker-label[b-f0lwgoo42g] {
  flex: 1;
  min-width: 0;
}

.size-sheet-blocker-release[b-f0lwgoo42g] {
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--fs-warning);
  background: var(--fs-warning-light);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fs-warning-text);
  /* 32px of vertical target on a 22px pill: the sheet's one-handed reach case. */
  min-height: 32px;
}

.size-sheet-blocker-release:hover[b-f0lwgoo42g] {
  background: var(--fs-warning-light);
}

/* ── Footer ──────────────────────────────────────────────────────────────────────────────────────── */

/* In the footer, which is pinned, on its own line ABOVE the buttons.

   It has been in three places. Inside the button row it broke the flex line and grew Cancel to a full
   width above the primary action. Moved to the end of the body it followed the body's scroll: measured
   OFF-SCREEN on a 390x667 phone, and COVERED by the Apply button on a 390x844 phone as soon as the sheet
   carried a warning box — which is the ordinary case once one meal is planned. A guest then sees three
   buttons, no Apply, and no sentence explaining why.

   `order: -1` puts it first without depending on where it sits in the markup, and `flex: 1 0 100%` gives
   it the whole line so the buttons keep theirs. */
.size-sheet-guest-note[b-f0lwgoo42g] {
  flex: 1 0 100%;
  order: -1;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fs-text-secondary);
}

.size-sheet-footer .size-sheet-signin[b-f0lwgoo42g] {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--fs-primary-text);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 4px;
  cursor: pointer;
  white-space: nowrap;
}

.size-sheet-footer[b-f0lwgoo42g] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* 24x24 is WCAG 2.2's floor for a target (2.5.8); at 2px of padding this measured 75x22 on desktop. */
.size-sheet-footer .size-sheet-reset[b-f0lwgoo42g] {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--fs-primary-text);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 4px;
  cursor: pointer;
  white-space: nowrap;
}

/* 0, not 1: growing meant that at 320px — where the primary CTA's 227px no longer fits beside Reset —
   Cancel expanded into the space the CTA vacated and claimed a 203px line ABOVE it. That is the shape
   this footer was rewritten to remove. Sized to content it is 68px, and a 68px outline under a 227px
   filled primary reads as the secondary it is. Its type matches the CTA's 14px for the same reason: the
   discard was a point LARGER than the action it sits under. */
.size-sheet-footer .size-sheet-cancel[b-f0lwgoo42g] {
  flex: 0 1 auto;
  min-width: 0;
  border: 1px solid var(--fs-border-control); /* a 3:1 edge, like every footer secondary */
  border-radius: var(--fs-radius-pill);
  background: var(--fs-bg-primary);
  color: var(--bs-body-color, var(--fs-text-body));
  padding: 13px 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* min-width keeps the button at its content size — so a footer that cannot fit all three wraps Apply
   onto its own full-width line instead of ellipsing the label. The label ends in the number being
   committed, and "Apply · Breakfas…" hides precisely the thing the user is confirming. The 100% arm is
   the last resort: a meal name long enough to exceed the whole sheet ellipses rather than overflowing. */
.size-sheet-footer .size-sheet-apply[b-f0lwgoo42g] {
  flex: 1.6 1 auto;
  min-width: min(100%, max-content);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  border-radius: var(--fs-radius-pill); /* the sheet's commit action is a pill like every primary */
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  padding: 13px 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.size-sheet-apply:disabled[b-f0lwgoo42g],
.size-sheet-apply[aria-disabled="true"][b-f0lwgoo42g] {
  /* Disabled is a neutral surface with muted text, not a faded action colour: white on a pale
     action tint falls to ~2.7:1 and reads as broken rather than "not yet". */
  background: var(--fs-disabled-bg);
  color: var(--fs-disabled-text);
  cursor: default;
  box-shadow: inset 0 0 0 1px var(--fs-border-hover);
}

/* The failed-save message, above the buttons in the pinned footer. Full-width like the guest note so it
   cannot share the button row, and ordered ahead of it: when a guest cannot save at all there is no
   failure to report, so the two never appear together. */
.size-sheet-failure[b-f0lwgoo42g] {
  flex: 1 0 100%;
  order: -2;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--fs-error);
  background: var(--fs-error-light);
  color: var(--fs-error-text);
  font-size: 13px;
  line-height: 1.4;
}

/* The scope slot's own styles live in MealSizeScopePicker.razor.css, with the markup.
   They were briefly here, which meant they never applied at all: CSS isolation stamps this file's rules
   with THIS component's scope attribute, and the picker's elements do not carry it. */
/* /Components/Meals/MealsList.razor.rz.scp.css */
/* Stack layout — div-based (the old ul inherited style.css's leaky
   `.meal-option-list li` padding; finding 9). */

.meal-option-list[b-c6ozzwyl1l] {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.meal-item-card[b-c6ozzwyl1l] {
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: none;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.meal-item-card:hover[b-c6ozzwyl1l] {
  border-color: var(--fs-primary-border);
  box-shadow: none;
}

.stack-more-caption[b-c6ozzwyl1l] {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fs-text-secondary);
  margin: 4px 2px 10px;
}

.stack-show-more[b-c6ozzwyl1l],
.stack-show-all[b-c6ozzwyl1l] {
  display: block;
  width: 100%;
  border: 1px dashed var(--fs-border-hover);
  background: none;
  border-radius: 10px;
  padding: 12px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fs-primary-text);
  cursor: pointer;
}

.stack-show-more:hover[b-c6ozzwyl1l],
.stack-show-all:hover[b-c6ozzwyl1l] {
  border-color: var(--fs-primary-text);
  background: var(--fs-bg-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .meal-item-card[b-c6ozzwyl1l] {
    transition: none;
  }
}
/* /Components/Meals/MealsMacrosFilter.razor.rz.scp.css */
.macros-filter-card[b-lhd5oguxah] {
  background-color: var(--fs-bg-primary);
  border-radius: 12px;
}

.macros-filter-header[b-lhd5oguxah] {
  background-color: var(--fs-bg-secondary);
  border-radius: 12px 12px 0 0;
  padding: 1.25rem;
}
/* /Components/Meals/NearMissRow.razor.rz.scp.css */
/* "Just outside your filters" mini-card — canvas 2c near-miss strip. */

.near-miss-row[b-8gm3j0zt6s] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 10px;
  padding: 12px;
  font-size: 12.5px;
}

.nmr-summary[b-8gm3j0zt6s] {
  color: var(--fs-text-body);
  font-weight: 500;
}

.nmr-macros[b-8gm3j0zt6s] {
  color: var(--fs-text-secondary);
  font-variant-numeric: normal;
}

.nmr-verdict[b-8gm3j0zt6s] {
  font-weight: 600;
}

.nmr-verdict .fa-check-circle[b-8gm3j0zt6s] {
  margin-right: 4px;
}

.nmr-verdict-inrange[b-8gm3j0zt6s] {
  color: var(--fs-success-text);
}

.nmr-verdict-over[b-8gm3j0zt6s],
.nmr-verdict-under[b-8gm3j0zt6s] {
  color: var(--fs-error-text);
}

.nmr-add[b-8gm3j0zt6s] {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--fs-primary-text);
  color: var(--fs-primary-text);
  background: var(--fs-bg-primary);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.nmr-add:hover[b-8gm3j0zt6s] {
  background: var(--fs-primary);
  border-color: var(--fs-primary); /* a filled button edges in the fill, not the lighter text Beet */
  color: var(--fs-text-inverse);
}
/* /Components/Meals/NutritionFactsDisclosure.razor.rz.scp.css */
/* "Full nutrition facts" disclosure (canvas 4b). The label itself is styled by the shared
   .performance-facts grid; this file owns only the inline-collapse frame and the per-food rows. */

.nfd-inline[b-928j1ucs2u] {
  margin-top: 12px;
  animation: nfd-reveal-b-928j1ucs2u 0.18s ease;
}

/* The classic label (.performance-facts) is a fixed 280px; on a very narrow card (<=320px)
   let it scroll inside the panel instead of overflowing/clipping the meal card. */
.nfd-panel[b-928j1ucs2u] {
  overflow-x: auto;
}

@keyframes nfd-reveal-b-928j1ucs2u {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nfd-per-food[b-928j1ucs2u] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.nfd-per-food-head[b-928j1ucs2u] {
  font:
    700 12px var(--fs-font-family);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fs-text-secondary);
}

.nfd-food-toggle[b-928j1ucs2u] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--fs-border-default);
  border-radius: 8px;
  background: var(--fs-bg-primary);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fs-text-primary);
  cursor: pointer;
  text-align: left;
}

.nfd-food-chevron[b-928j1ucs2u] {
  font-size: 12px;
  color: var(--fs-text-muted);
  transition: transform 0.15s ease;
}

.nfd-food-open .nfd-food-chevron[b-928j1ucs2u] {
  transform: rotate(180deg);
}

.nfd-food-facts[b-928j1ucs2u] {
  padding: 4px 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  .nfd-inline[b-928j1ucs2u] {
    animation: none;
  }

  .nfd-food-chevron[b-928j1ucs2u] {
    transition: none;
  }
}
/* /Components/Meals/PortionWizard.razor.rz.scp.css */
/* Portion wizard — chip-based, funnel-narrated. Always rendered inside the RefineHub's dialog (the hub
   owns the desktop-modal / mobile-sheet container); this file styles only the body+footer content.
   All values map to the --fs-* design tokens (hex fallbacks for safety). */

/* Embedded inside the RefineHub (no own modal/sheet wrapper) — mirror the prototype's panel chrome so
   the "Pick your portions" body + footer keep their padding and the footer's top divider. */
.pw-embedded[b-l9rxh2xu7v] {
  display: flex;
  flex-direction: column;
}

.pw-embedded-body[b-l9rxh2xu7v] {
  padding: 4px 2px 6px;
}

.pw-embedded-footer[b-l9rxh2xu7v] {
  padding: 14px 2px 4px;
  margin-top: 6px;
  border-top: 1px solid var(--fs-border-default);
}

/* ---------- Shared content (renders in both modal body and bottom-sheet body) ---------- */
.pw-empty[b-l9rxh2xu7v] {
  padding: 1.5rem 0;
  color: var(--fs-text-secondary);
  text-align: center;
}

.pw-intro[b-l9rxh2xu7v] {
  margin: 0 0 1rem;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fs-text-primary);
  background: var(--fs-bg-tertiary);
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-md, 8px);
}

.pw-step-label[b-l9rxh2xu7v] {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fs-text-muted);
}

.pw-food[b-l9rxh2xu7v] {
  margin: 0.25rem 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fs-text-primary);
  font-family: var(
    --fs-font-family,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif
  );
}

.pw-food:focus-visible[b-l9rxh2xu7v] {
  outline: none;
}

.pw-hint[b-l9rxh2xu7v] {
  margin: 0.15rem 0 0.85rem;
  font-size: 13px;
  color: var(--fs-text-secondary);
}

.pw-chips[b-l9rxh2xu7v] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pw-note[b-l9rxh2xu7v] {
  margin: -2px 0 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fs-text-secondary);
}

.pw-chip-controls[b-l9rxh2xu7v] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.pw-selected-summary[b-l9rxh2xu7v] {
  font-size: 11.5px;
  color: var(--fs-text-muted);
}

.pw-quick[b-l9rxh2xu7v] {
  display: flex;
  gap: 6px;
}

.pw-quick-btn[b-l9rxh2xu7v] {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  min-height: 32px;
  border-radius: var(--fs-radius-sm, 7px);
  border: 1px solid var(--fs-border-default);
  background: var(--fs-bg-primary);
  color: var(--fs-text-secondary);
  cursor: pointer;
}

.pw-quick-btn:disabled[b-l9rxh2xu7v] {
  opacity: 0.4;
  cursor: default;
}

.pw-tip[b-l9rxh2xu7v] {
  margin: 8px 0 14px;
  font-size: 11px;
  color: var(--fs-text-muted);
}

.pw-chip[b-l9rxh2xu7v] {
  min-height: 44px;
  padding: 9px 16px;
  font-size: 14px;
  /* Regular weight when unselected; only the selected pill goes bold (matches the design). */
  font-weight: 400;
  color: var(--fs-text-primary, var(--fs-text-body));
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-hover);
  border-radius: var(--fs-radius-pill, 9999px);
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.pw-chip.is-selected[b-l9rxh2xu7v] {
  color: var(--fs-text-inverse);
  font-weight: 600;
  background: var(--fs-primary);
  border-color: var(--fs-primary);
}

.pw-chip.is-disabled[b-l9rxh2xu7v] {
  color: var(--fs-text-muted);
  background: var(--fs-bg-tertiary);
  border-color: var(--fs-border-default);
  text-decoration: line-through;
  cursor: not-allowed;
}

.pw-chip:focus-visible[b-l9rxh2xu7v] {
  outline: 2px solid var(--fs-primary-text, var(--fs-border-focus));
  outline-offset: 1px;
}

.pw-whole[b-l9rxh2xu7v] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 0.85rem;
  font-size: 14px;
  cursor: pointer;
}

.pw-whole input[b-l9rxh2xu7v] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--fs-primary);
}

.pw-recovery[b-l9rxh2xu7v] {
  margin-top: 0.85rem;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fs-error-text);
  background: var(--fs-error-light);
  border: 1px solid var(--fs-error-light);
  border-radius: var(--fs-radius-md, 8px);
}

.pw-recovery-link[b-l9rxh2xu7v] {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  color: var(--fs-error);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Footer (count + funnel + nav) ---------- */
.pw-count-row[b-l9rxh2xu7v] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.4rem;
}

.pw-count[b-l9rxh2xu7v] {
  font-size: 13px;
  font-weight: 600;
}

.pw-count.is-ok[b-l9rxh2xu7v] {
  color: var(--fs-success-text); /* AA on white for 13px text */
}
.pw-count.is-low[b-l9rxh2xu7v] {
  color: var(--fs-warning-text); /* AA on white for 13px text */
}
.pw-count.is-empty[b-l9rxh2xu7v] {
  color: var(--fs-error-text);
}

.pw-reset-all[b-l9rxh2xu7v] {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  font-size: 12.5px;
  color: var(--fs-text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.pw-funnel[b-l9rxh2xu7v] {
  margin: 8px 0 12px;
  height: 6px;
  border-radius: var(--fs-radius-pill, 9999px);
  background: var(--fs-border-default);
  overflow: hidden;
}

.pw-funnel-fill[b-l9rxh2xu7v] {
  height: 100%;
  border-radius: var(--fs-radius-pill, 9999px);
  transition: width 0.25s ease;
}

.pw-funnel-fill.is-ok[b-l9rxh2xu7v] {
  background: var(--fs-success);
}
.pw-funnel-fill.is-low[b-l9rxh2xu7v] {
  background: var(--fs-warning);
}
.pw-funnel-fill.is-empty[b-l9rxh2xu7v] {
  background: var(--fs-error);
}

.pw-nav[b-l9rxh2xu7v] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pw-back[b-l9rxh2xu7v] {
  background: none;
  border: none;
  padding: 8px 4px;
  font-size: 13.5px;
  color: var(--fs-text-primary, var(--fs-text-body));
  cursor: pointer;
  min-height: 44px;
}

.pw-back:disabled[b-l9rxh2xu7v] {
  color: var(--fs-border-hover);
  cursor: default;
}

.pw-skip[b-l9rxh2xu7v] {
  background: none;
  border: none;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--fs-text-secondary);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}

.pw-next[b-l9rxh2xu7v] {
  margin-left: auto;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fs-text-inverse);
  background: var(--fs-primary);
  border: 1px solid var(--fs-primary);
  border-radius: var(--fs-radius-pill, 9999px);
  box-shadow: var(--fs-shadow-primary-subtle, 0 2px 4px var(--fs-primary-a20));
  cursor: pointer;
  min-height: 44px;
}
/* /Components/Meals/ProcessSteps.razor.rz.scp.css */
.step-container[b-ql1i95zvez] {
  width: 6rem !important;
}

.step-circle[b-ql1i95zvez]::before {
  width: calc(6rem + 1rem - 1.5rem) !important;
}
/* /Components/Meals/RefineHub.razor.rz.scp.css */
/* RefineHub container + chooser. One responsive container styled here for every width: a centered card
   on desktop, a bottom-anchored sheet under 769px — same markup, only restyled, so a resize across the
   breakpoint never re-mounts the embedded wizard. (No MobileBottomSheet: this dialog closes via backdrop
   tap, the × button, or Esc rather than a swipe gesture.) */

.rh-overlay[b-fxofuhycs7] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 1rem;
}

.rh-card[b-fxofuhycs7] {
  background: var(--fs-bg-primary);
  border-radius: var(--fs-radius-lg, 14px);
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  /* This is the scroll container, so contain here keeps scroll momentum from chaining out to the meal
     list behind the dialog (the mobile "background scrolls behind the sheet" problem) — CSS-only, no
     body-lock JS. (The overlay isn't a scroll container, so the property only belongs here.) */
  overscroll-behavior: contain;
  box-shadow: var(--fs-shadow-dialog);
}

/* Narrow viewport: reflow the same card into a bottom-anchored sheet (full-width, rounded top only).
   Purely presentational — the DOM is unchanged from desktop. No entrance transform on .rh-card: a
   transform would make the card the containing block for any position:fixed descendant of the wizard,
   and would also visibly replay whenever the viewport crosses the breakpoint while open (which defeats
   the point of the live-resize container). */
@media (max-width: 768px) {
  .rh-overlay[b-fxofuhycs7] {
    align-items: flex-end;
    padding: 0;
  }

  .rh-card[b-fxofuhycs7] {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--fs-radius-lg, 14px) var(--fs-radius-lg, 14px) 0 0;
    box-shadow: var(--fs-shadow-lg);
  }

  /* Safe-area inset on the inner content (not the scroll container, where WebKit can drop end-padding),
     so the sheet's bottom-most controls stay clear of the iOS home-indicator gesture zone. */
  .rh-body[b-fxofuhycs7] {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
}

.rh-header[b-fxofuhycs7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--fs-border-default);
}

.rh-title[b-fxofuhycs7] {
  font-size: 16px;
  font-weight: 700;
  color: var(--fs-text-primary);
}

.rh-close[b-fxofuhycs7] {
  position: relative;
  min-width: 24px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--fs-text-muted);
  cursor: pointer;
}

/* Tap target (#1101): the × is 24px, the hit area 44px. */
.rh-close[b-fxofuhycs7]::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.rh-body[b-fxofuhycs7] {
  padding: 1.25rem;
}

/* ---- chooser ---- */
.rh-chooser-head[b-fxofuhycs7] {
  margin: 0 0 1rem;
  font-size: 14px;
  color: var(--fs-text-secondary);
  line-height: 1.4;
}

.rh-tiles[b-fxofuhycs7] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rh-tile[b-fxofuhycs7] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 16px;
  min-height: 44px;
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-md, 8px);
  background: var(--fs-bg-primary);
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.rh-tile:hover[b-fxofuhycs7] {
  border-color: var(--fs-primary-text);
  background: var(--fs-bg-tertiary);
}

.rh-tile-primary[b-fxofuhycs7] {
  border-color: var(--fs-primary-text);
  border-width: 2px;
}

.rh-tile-title[b-fxofuhycs7] {
  font-size: 15px;
  font-weight: 700;
  color: var(--fs-text-primary);
}

.rh-tile-sub[b-fxofuhycs7] {
  font-size: 12.5px;
  color: var(--fs-text-secondary);
}

.rh-back[b-fxofuhycs7] {
  background: none;
  border: none;
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-primary-text);
  cursor: pointer;
}

/* First-step "heads up" alert — a clear, unmissable panel (not the old quiet gray note). Amber accent
   says "read me" without the red alarm of an error; it explains why a food the user picked stays tiny. */
.rh-headsup[b-fxofuhycs7] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--fs-warning);
  border-left: 4px solid var(--fs-warning);
  border-radius: var(--fs-radius-md, 12px);
  background: var(--fs-warning-light);
}

.rh-headsup-icon[b-fxofuhycs7] {
  font-size: 20px;
  color: var(--fs-warning);
  line-height: 1;
}

.rh-headsup-lead[b-fxofuhycs7] {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--fs-text-primary);
}

.rh-headsup-body[b-fxofuhycs7] {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fs-text-secondary, var(--fs-text-body));
}

.rh-headsup-continue[b-fxofuhycs7] {
  align-self: stretch;
  margin-top: 4px;
  padding: 11px 16px;
  border: none;
  border-radius: var(--fs-radius-md, 12px);
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.rh-headsup-continue:hover[b-fxofuhycs7] {
  background: var(--fs-primary-hover);
}
/* /Components/Meals/ResultsStatusBand.razor.rz.scp.css */
/* One persistent status band — canvas 2a. Identity colors come from the
   design tokens; the ring arc / thumbs-up use the lighter blue-500 the canvas
   specifies (no --fs- token exists for it). */

.results-status-band[b-g2y1qiooxh] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: none;
  margin-bottom: 20px;
}

.rsb-fit[b-g2y1qiooxh] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rsb-ring[b-g2y1qiooxh] {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.rsb-ring svg[b-g2y1qiooxh] {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.rsb-ring-track[b-g2y1qiooxh] {
  fill: none;
  stroke: var(--fs-border-default);
  stroke-width: 3;
}

.rsb-ring-arc[b-g2y1qiooxh] {
  fill: none;
  stroke: var(--fs-text-primary);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}

.rsb-ring-icon[b-g2y1qiooxh] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: var(--fs-text-primary);
}

/* Grade-aware ring tiers. Amber/green are deliberately NOT used here — they are the fat and
   carbs identity colors on this very band, and reusing them for status would reintroduce the
   WCAG 1.4.1 ambiguity the redesign fixed. */
.rsb-tier-mixed .rsb-ring-arc[b-g2y1qiooxh] {
  stroke: var(--fs-text-secondary);
}

.rsb-tier-mixed .rsb-ring-icon[b-g2y1qiooxh] {
  color: var(--fs-text-secondary);
}

.rsb-tier-off .rsb-ring-arc[b-g2y1qiooxh] {
  stroke: var(--fs-error);
}

.rsb-tier-off .rsb-ring-icon[b-g2y1qiooxh] {
  color: var(--fs-error);
}

/* Visible grade label — poorly-graded tiers only (solid grades keep it aria-only). */
.rsb-grade-text[b-g2y1qiooxh] {
  margin-left: 8px;
  font:
    600 11.5px var(--fs-font-family);
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

.rsb-grade-text.rsb-tier-mixed[b-g2y1qiooxh] {
  color: var(--fs-text-secondary);
  background: var(--fs-bg-tertiary);
}

.rsb-grade-text.rsb-tier-off[b-g2y1qiooxh] {
  color: var(--fs-error-text);
  background: var(--fs-error-light);
}

.rsb-headline[b-g2y1qiooxh] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rsb-count[b-g2y1qiooxh] {
  font:
    700 16px var(--fs-font-family);
  color: var(--fs-text-primary);
}

/* Replays on every count change (keyed remount) — the same CSS-transition family as the
   ring arc, not a JS digit counter. Guarded under prefers-reduced-motion below. */
.rsb-count-flip[b-g2y1qiooxh] {
  display: inline-block;
  animation: rsb-count-change-b-g2y1qiooxh 0.34s ease;
}

@keyframes rsb-count-change-b-g2y1qiooxh {
  from {
    opacity: 0.35;
    transform: translateY(-0.18em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rsb-context[b-g2y1qiooxh] {
  font-size: 12.5px;
  color: var(--fs-text-secondary);
}

.rsb-chips[b-g2y1qiooxh] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.rsb-chip[b-g2y1qiooxh] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.rsb-chip-dot[b-g2y1qiooxh] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.rsb-chip-kcal[b-g2y1qiooxh] {
  background: var(--fs-bg-tertiary);
  color: var(--fs-macro-kcal, var(--fs-text-body));
}

.rsb-chip-protein[b-g2y1qiooxh] {
  background: var(--fs-macro-protein-light);
  color: var(--fs-macro-protein-text);
}

.rsb-chip-protein .rsb-chip-dot[b-g2y1qiooxh] {
  background: var(--fs-macro-protein);
}

.rsb-chip-carbs[b-g2y1qiooxh] {
  background: var(--fs-macro-carbs-light);
  color: var(--fs-macro-carbs-text);
}

.rsb-chip-carbs .rsb-chip-dot[b-g2y1qiooxh] {
  background: var(--fs-macro-carbs);
}

.rsb-chip-fat[b-g2y1qiooxh] {
  background: var(--fs-macro-fat-light);
  color: var(--fs-macro-fat-text);
}

.rsb-chip-fat .rsb-chip-dot[b-g2y1qiooxh] {
  background: var(--fs-macro-fat);
}

.rsb-controls[b-g2y1qiooxh] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--fs-border-default);
}

.rsb-btn[b-g2y1qiooxh] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--fs-bg-primary);
  cursor: pointer;
}

.rsb-btn-refine[b-g2y1qiooxh] {
  border: 1px solid var(--fs-primary-text);
  color: var(--fs-primary-text);
}

/* Filter-active state uses the brand accent, NOT #d97706 — that amber is the fat macro's
   identity color on this same band. The accent alone is ~2.5:1 on white, so the background
   tint carries the state alongside the label text (which shows the filter summary). */
.rsb-btn-refine.rsb-filter-active[b-g2y1qiooxh] {
  border-color: var(--fs-primary-text);
  background: var(--fs-accent-light);
}

.rsb-btn-sort[b-g2y1qiooxh] {
  border: 1px solid var(--fs-border-hover);
  color: var(--fs-text-body);
}

.rsb-clear-link[b-g2y1qiooxh] {
  position: relative;
  border: none;
  background: none;
  padding: 6px 4px;
  font-size: 12.5px;
  color: var(--fs-warning-text);
  cursor: pointer;
}

/* ≥44px hit area; -6px horizontal stays inside the 8px control gap (no overlap). */
.rsb-clear-link[b-g2y1qiooxh]::after {
  content: "";
  position: absolute;
  inset: -9px -6px;
}

.rsb-coaching[b-g2y1qiooxh] {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fs-bg-secondary);
  border-left: 3px solid var(--fs-border-default);
  border-radius: 0 8px 8px 0;
  padding: 9px 14px;
  margin: -8px 0 20px 0;
  font-size: 13px;
  color: var(--fs-text-body);
}

.rsb-coaching .fa-lightbulb[b-g2y1qiooxh] {
  color: var(--fs-text-primary);
  font-size: 12px;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .rsb-chips[b-g2y1qiooxh] {
    margin-left: 0;
    width: 100%;
    order: 3;
  }

  .rsb-controls[b-g2y1qiooxh] {
    border-left: none;
    padding-left: 0;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rsb-ring-arc[b-g2y1qiooxh] {
    transition: none;
  }

  .rsb-count-flip[b-g2y1qiooxh] {
    animation: none;
  }
}
/* /Components/Meals/ShowAllCombinations.razor.rz.scp.css */
/* Show-all view — canvas 4a. */

.showall[b-247iphtxfy] {
  margin-top: 1rem;
}

.showall-header[b-247iphtxfy] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: none;
  margin-bottom: 16px;
}

.showall-heading[b-247iphtxfy] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.showall-title[b-247iphtxfy] {
  font:
    700 16px var(--fs-font-family);
  color: var(--fs-text-primary);
}

.showall-context[b-247iphtxfy] {
  font-size: 12.5px;
  color: var(--fs-text-secondary);
}

.showall-actions[b-247iphtxfy] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.showall-back[b-247iphtxfy],
.showall-refine[b-247iphtxfy] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--fs-bg-primary);
  cursor: pointer;
}

.showall-back[b-247iphtxfy] {
  border: 1px solid var(--fs-primary-text);
  color: var(--fs-primary-text);
}

.showall-refine[b-247iphtxfy] {
  border: 1px solid var(--fs-border-hover);
  color: var(--fs-text-body);
}

.showall-more[b-247iphtxfy] {
  display: block;
  width: 100%;
  border: 1px dashed var(--fs-border-hover);
  background: none;
  border-radius: 10px;
  padding: 12px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fs-primary-text);
  cursor: pointer;
}

.showall-more:hover[b-247iphtxfy] {
  border-color: var(--fs-primary-text);
  background: var(--fs-bg-secondary);
}
/* /Components/Meals/SimpleMealLoader.razor.rz.scp.css */
/* Meal-combinations loading state — card in the band family, macro-identity icons.
   Moved here from an inline <style> so it no longer leaks to the whole document. */

.simple-meal-loader[b-zwtjr32ohh] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  min-height: 300px;
}

.loader-card[b-zwtjr32ohh] {
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 14px;
  padding: 3rem 2rem;
  box-shadow: var(--fs-shadow-sm);
  max-width: 500px;
  width: 100%;
  text-align: center;
}

.macro-icons-container[b-zwtjr32ohh] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.macro-icon-wrapper[b-zwtjr32ohh] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.macro-icon[b-zwtjr32ohh] {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  animation: pulse-b-zwtjr32ohh 2s infinite;
  box-shadow: none;
}

.macro-icon.protein[b-zwtjr32ohh] {
  background: linear-gradient(135deg, var(--fs-macro-protein-light), var(--fs-macro-protein-light));
  color: var(--fs-macro-protein);
  border: 2px solid var(--fs-macro-protein);
  animation-delay: 0s;
}

.macro-icon.carbs[b-zwtjr32ohh] {
  background: linear-gradient(135deg, var(--fs-macro-carbs-light), var(--fs-macro-carbs-light));
  color: var(--fs-macro-carbs-text);
  border: 2px solid var(--fs-macro-carbs);
  animation-delay: 0.3s;
}

.macro-icon.fats[b-zwtjr32ohh] {
  background: linear-gradient(135deg, var(--fs-warning-light), var(--fs-warning-light));
  color: var(--fs-macro-fat-text);
  border: 2px solid var(--fs-macro-fat);
  animation-delay: 0.6s;
}

.macro-text[b-zwtjr32ohh] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--fs-text-secondary);
}

.center-plus[b-zwtjr32ohh] {
  color: var(--fs-border-hover);
  font-size: 18px;
  margin: 0 0.5rem;
  animation: fade-b-zwtjr32ohh 2s infinite;
}

.loading-bar-container[b-zwtjr32ohh] {
  margin: 2rem auto;
  width: 80%;
  max-width: 300px;
}

.loading-bar[b-zwtjr32ohh] {
  height: 4px;
  background: var(--fs-bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.loading-bar-fill[b-zwtjr32ohh] {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--fs-macro-protein),
    var(--fs-macro-carbs),
    var(--fs-macro-fat)
  );
  background-size: 300% 100%;
  /* Duration in design-tokens.css (--fs-dur-meal-combo-bar). */
  animation: loading-b-zwtjr32ohh var(--fs-dur-meal-combo-bar, 2s) linear infinite;
  border-radius: 2px;
}

.loading-message h5[b-zwtjr32ohh] {
  color: var(--fs-text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sub-text[b-zwtjr32ohh] {
  color: var(--fs-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

@keyframes pulse-b-zwtjr32ohh {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

@keyframes fade-b-zwtjr32ohh {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

@keyframes loading-b-zwtjr32ohh {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Respect reduced-motion: hold the icons/bar still, keep the message (canvas 4d). */
@media (prefers-reduced-motion: reduce) {
  .macro-icon[b-zwtjr32ohh],
  .center-plus[b-zwtjr32ohh],
  .loading-bar-fill[b-zwtjr32ohh] {
    animation: none;
  }

  .loading-bar-fill[b-zwtjr32ohh] {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .loader-card[b-zwtjr32ohh] {
    padding: 2rem 1rem;
  }

  .macro-icon[b-zwtjr32ohh] {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }

  .macro-icons-container[b-zwtjr32ohh] {
    gap: 0.5rem;
  }

  .center-plus[b-zwtjr32ohh] {
    font-size: 14px;
    margin: 0 0.25rem;
  }
}
/* /Components/Meals/SingleResultHero.razor.rz.scp.css */
/* Single-result hero — canvas 2c. Two-column desktop; stacks on mobile (3a language). */

.single-result-hero[b-ub34ihemat] {
  margin-top: 1rem;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 16px;
  padding: 24px;
  box-shadow: none;
}

.srh-eyebrow[b-ub34ihemat] {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fs-text-secondary);
}

.srh-headline[b-ub34ihemat] {
  margin: 4px 0 2px;
  font:
    700 22px var(--fs-font-family);
  color: var(--fs-text-primary);
}

.srh-subcopy[b-ub34ihemat] {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--fs-text-secondary);
}

.srh-body[b-ub34ihemat] {
  display: flex;
  gap: 28px;
  margin-top: 14px;
}

.srh-foods[b-ub34ihemat] {
  flex: 1;
  min-width: 0;
}

.srh-food-row[b-ub34ihemat] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--fs-bg-tertiary);
}

.srh-food-main[b-ub34ihemat] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.srh-food-name[b-ub34ihemat] {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--fs-text-primary);
}

.srh-food-sub[b-ub34ihemat] {
  font-size: 12px;
  color: var(--fs-text-secondary);
}

.srh-locked .srh-food-name[b-ub34ihemat],
.srh-locked .srh-portion[b-ub34ihemat] {
  color: var(--fs-text-muted);
}

.srh-lock[b-ub34ihemat] {
  font-size: 11px;
  color: var(--fs-text-muted);
  margin-right: 6px;
}

.srh-portion[b-ub34ihemat] {
  white-space: nowrap;
  font-variant-numeric: normal;
  font-size: 14px;
  color: var(--fs-text-secondary);
}

.srh-portion b[b-ub34ihemat] {
  color: var(--fs-text-primary);
}

.srh-grams[b-ub34ihemat] {
  margin-left: 6px;
  font-size: 12px;
  color: var(--fs-text-muted);
}

.srh-fit[b-ub34ihemat] {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid var(--fs-bg-tertiary);
}

.srh-fit-title[b-ub34ihemat] {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fs-text-body);
}

.srh-fit-line[b-ub34ihemat] {
  font-size: 12.5px;
  font-weight: 600;
}

.srh-fit-line .fa-check-circle[b-ub34ihemat] {
  margin-right: 4px;
}

.srh-fit-inrange[b-ub34ihemat] {
  color: var(--fs-success-text);
}

.srh-fit-over[b-ub34ihemat],
.srh-fit-under[b-ub34ihemat] {
  color: var(--fs-error-text);
}

.srh-add[b-ub34ihemat] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  border: none;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 15.5px;
  font-weight: 600;
  margin-top: auto;
  cursor: pointer;
}

.srh-add:hover[b-ub34ihemat] {
  background: var(--fs-primary-hover);
}

.srh-secondary[b-ub34ihemat] {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.srh-link[b-ub34ihemat] {
  position: relative;
  border: none;
  background: none;
  font-size: 12.5px;
  color: var(--fs-text-secondary);
  text-decoration: underline;
  padding: 8px 4px;
  cursor: pointer;
}

/* ≥44px touch target without inflating the small underlined label (matches .undo-link). */
.srh-link[b-ub34ihemat]::after {
  content: "";
  position: absolute;
  inset: -8px -6px;
}

.srh-near-misses[b-ub34ihemat] {
  margin-top: 20px;
  border-top: 1px solid var(--fs-bg-tertiary);
  padding-top: 14px;
}

.srh-nm-title[b-ub34ihemat] {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--fs-text-body);
  margin-bottom: 10px;
}

.srh-nm-grid[b-ub34ihemat] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.srh-browse-all[b-ub34ihemat] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border: 1px dashed var(--fs-border-hover);
  background: none;
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fs-primary-text);
  cursor: pointer;
}

.srh-browse-all:hover[b-ub34ihemat] {
  border-color: var(--fs-primary-text);
  background: var(--fs-bg-secondary);
}

@media (max-width: 767.98px) {
  .srh-body[b-ub34ihemat] {
    flex-direction: column;
    gap: 16px;
  }

  .srh-fit[b-ub34ihemat] {
    width: auto;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--fs-bg-tertiary);
    padding-top: 14px;
  }
}
/* /Components/Meals/UndoNotice.razor.rz.scp.css */
/* Shared undo notice — identical chrome in every host (band/compare/hero). */

.undo-notice[b-llt0jwlj7t] {
  font-size: 12.5px;
  color: var(--fs-text-secondary);
}

.undo-link[b-llt0jwlj7t] {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fs-primary-text);
  text-decoration: underline;
  cursor: pointer;
}

/* ≥44px hit area without visual bloat. */
.undo-link[b-llt0jwlj7t]::after {
  content: "";
  position: absolute;
  inset: -15px -10px;
}
/* /Components/Nutrition/DailyNutrientTargetProgress.razor.rz.scp.css */
/* The day's four rows, stacked. Was a four-across flex of bars whose headers carried only a
   remaining figure; the rows are now tall enough to hold a range, so they read down. */

.dnt-card[b-07zjxzxzxl] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  /* Unconstrained, the card inherits ~1170px on desktop: a label ends up a screen-width from
     its own numbers, and the bar becomes a 130:1 hairline whose notches drift too far apart to
     read as a pair. The information here is a position, and position does not want length. */
  max-width: 560px;
}

.dnt-key[b-07zjxzxzxl] {
  display: flex;
  align-items: center;
  /* --fs-border-default, not an invented name: the only border tokens this system defines are
     default/focus/hover/selected, and a var() naming a property that does not exist is what
     made the calories row render transparent. */
  border-top: 1px solid var(--fs-border-default);
  padding-top: 11px;
  /* 12px and the secondary token: 11px is below this system's smallest type token, and
     --fs-text-muted is #9ca3af — 2.54:1 on white, which fails AA at any size. */
  font-size: 12px;
  color: var(--fs-text-secondary);
}

/* Repeats the row's ring rather than sharing it: scoped CSS does not cross component
   boundaries, and the alternative — hoisting one nine-line rule into a global sheet — buys
   less than it costs. The shared marks that DO matter live in range-bar.css. */
.dnt-key-ring[b-07zjxzxzxl] {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border: 2px solid var(--fs-text-secondary);
  border-radius: 50%;
  vertical-align: middle;
}
/* /Components/Nutrition/DailyTargetsStrip.razor.rz.scp.css */
/* The strip is the card's frame, so it owns the spacing below it; the card's own 24px bottom margin
   would only pad the frame's foot. */
.targets-strip[b-rqb1klxg56] {
  margin-bottom: 24px;
  padding: 12px 20px 4px;
  border: 1px solid var(--fs-border-default);
  border-radius: 12px;
  background: var(--fs-bg-primary);
}

.targets-strip--collapsed[b-rqb1klxg56] {
  padding: 8px 12px 8px 20px;
}

/* The toggle's row in both states: the eyebrow when open, the whole folded line when not. */
.targets-strip-bar[b-rqb1klxg56] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.targets-strip:not(.targets-strip--collapsed) .targets-strip-bar[b-rqb1klxg56] {
  margin-bottom: 6px;
}

.targets-strip-eyebrow[b-rqb1klxg56] {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-text-secondary);
}

/* Hide when open, Macros when folded — styled after the phone strip's Macros button, with a target big
   enough to hit with a mouse or a thumb. */
.targets-strip-toggle[b-rqb1klxg56] {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--fs-border-default);
  border-radius: 999px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-primary-text);
  cursor: pointer;
  white-space: nowrap;
}

.targets-strip-toggle:hover[b-rqb1klxg56] {
  background: var(--fs-bg-hover, var(--fs-bg-secondary));
}

.targets-strip-toggle:focus-visible[b-rqb1klxg56] {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 2px;
}

.targets-strip-toggle i[b-rqb1klxg56] {
  font-size: 10px;
}

.targets-strip-body[b-rqb1klxg56]  .dnt-card {
  margin-bottom: 0;
}

/* Folded: one line, read left to right as the phone strip reads — the calorie bar, its figure, then
   the three macros. Wraps rather than squeezes on a narrow tablet. The figure is CalorieReadoutLabel's
   element, so it is reached with ::deep. */
.targets-strip-meter[b-rqb1klxg56] {
  flex: 0 0 220px;
}

.targets-strip-bar[b-rqb1klxg56]  .targets-strip-figure,
.targets-strip-macros[b-rqb1klxg56] {
  font-size: 13px;
  color: var(--fs-text-secondary);
  font-variant-numeric: normal;
  white-space: nowrap;
}

.targets-strip-bar[b-rqb1klxg56]  .targets-strip-figure strong {
  color: var(--fs-text-primary);
  font-weight: 700;
}

.targets-strip-macros[b-rqb1klxg56] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.targets-strip-letter[b-rqb1klxg56] {
  margin-right: 0.25em;
}

.targets-strip-macro strong[b-rqb1klxg56] {
  color: var(--fs-text-primary);
  font-weight: 700;
}

/* Over target: the design system's error-text red, as on the phone strip. The calorie readout reddens
   only its figure, as the phone does; an over macro reddens its whole remainder. */
.targets-strip-bar[b-rqb1klxg56]  .targets-strip-figure.is-over strong,
.targets-strip-macro.is-over[b-rqb1klxg56],
.targets-strip-macro.is-over strong[b-rqb1klxg56] {
  color: var(--fs-error-text);
}

/* From 768px: the four rows in a 2×2 grid — each bar about 300px at 768px and ~530px once the page
   stops widening, around 1280px — and the card spans the strip instead of stopping at 560px beside
   an empty stretch of frame.
   The key and "How we worked this out" take full rows under the grid. */
@media (min-width: 768px) {
  .targets-strip-body[b-rqb1klxg56]  .dnt-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 40px;
    max-width: none;
  }

  .targets-strip-body[b-rqb1klxg56]  .dnt-card > :not(.trr-row) {
    grid-column: 1 / -1;
  }
}
/* /Components/Nutrition/NutrientTotal.razor.rz.scp.css */
/* Nutrient Total Styles */
.nutrient-total[b-sqn43byqmu] {
  font-size: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.nutrient-total .nutrient-value[b-sqn43byqmu] {
  font-weight: bold;
  margin-right: 4px;
}

.nutrient-total i[b-sqn43byqmu],
.nutrient-total-compact i[b-sqn43byqmu] {
  cursor: help;
  margin-left: 4px;
}

/* Compact Icon Styles */
.nutrient-total-compact[b-sqn43byqmu] {
  font-size: 0.9rem;
  font-weight: bold;
}

.nutrient-total-compact .compact-icon[b-sqn43byqmu] {
  font-size: 0.7rem;
  vertical-align: super;
  margin-left: 2px;
}
/* /Components/Nutrition/TargetRangeRow.razor.rz.scp.css */
/* One macro's row: a header line of numbers above the bar. The bar's own marks live in the
   shared range-bar.css — only this row's typography and spacing are local. */

.trr-row[b-azq8gciltl] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trr-header[b-azq8gciltl] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.trr-label[b-azq8gciltl] {
  font-size: 12px;
  color: var(--fs-text-secondary);
  white-space: nowrap;
  /* Reserve the ring's width on every row. Set on the ring alone, a mandatory label sits 17px
     right of its neighbours — a ragged label column on a card whose argument is that things
     line up, and the label column is what pairs a row to its numbers. */
  padding-left: 15px;
}

/* The ring is pulled back into the space the padding reserved. */
.trr-label--mandatory[b-azq8gciltl] {
  padding-left: 0;
}

.trr-numbers[b-azq8gciltl] {
  font-size: 12px;
  color: var(--fs-text-secondary);
  font-variant-numeric: normal;
  text-align: right;
  /* Wrapping here breaks the card's rhythm and shifts every bar below it, and the longest
     realistic line — the calorie row, whose unit repeats on the delta — clears 320px by a
     hair. Overflow is the better failure than reflow. */
  white-space: nowrap;
}

.trr-numbers strong[b-azq8gciltl] {
  font-weight: 700;
  color: var(--fs-text-primary);
}

/* The range and the delta are context for the amount, not competing with it — but they are
   also the whole payload of this row, so they take the secondary token rather than the muted
   one. --fs-text-muted is #9ca3af, which is 2.54:1 on white at 12px and fails AA; the
   fallback written here previously said #6b7280 and hid that. */
.trr-target[b-azq8gciltl] {
  color: var(--fs-text-secondary);
}

/* "Must hit". Neutral rather than macro-coloured: it says something about the plan's demand,
   not about which macro this is — the fill already carries that. */
.trr-ring[b-azq8gciltl] {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border: 2px solid var(--fs-text-secondary);
  border-radius: 50%;
  vertical-align: middle;
}

/* The row the rest of the day is measured against. The old component gave calories a bolder
   label and this card had flattened all four to one weight — leaving protein's "must hit" ring
   as the only distinguishing mark on the card, which put the eye on protein first. */
.trr-label--anchor[b-azq8gciltl] {
  font-weight: 600;
  color: var(--fs-text-primary);
}
/* /Components/NutritionFacts/MobileScanCamera.razor.rz.scp.css */
/* Full-screen dark camera viewfinder (canvas: mobscan). Its own visual world — the strict-fit
   in-modal skin governs the light confirm/upload UI, not this. Sits above the mobile sheet. */
.mobcam[b-j8o635qe2h] {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--fs-scrim);
  display: flex;
  flex-direction: column;
  color: var(--fs-text-inverse);
  /* Respect notches: top bar clears the status bar, controls clear the home indicator. */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobcam-topbar[b-j8o635qe2h] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  flex-shrink: 0;
}

.mobcam-title[b-j8o635qe2h] {
  font-size: 0.95rem;
  font-weight: 700;
}

.mobcam-round[b-j8o635qe2h] {
  background: rgba(255, 255, 255, 0.14);
  border: none;
  cursor: pointer;
  color: var(--fs-text-inverse);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobcam-round:disabled[b-j8o635qe2h] {
  opacity: 0.4;
  cursor: default;
}

.mobcam-round-active[b-j8o635qe2h] {
  background: var(--fs-on-scrim);
  color: var(--fs-scrim);
}

.mobcam-round-lg[b-j8o635qe2h] {
  width: 44px;
  height: 44px;
}

/* ---- viewfinder stage ---- */
.mobcam-stage[b-j8o635qe2h] {
  position: relative;
  flex: 1;
  margin: 6px 22px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--fs-scrim) 0%, var(--fs-scrim) 100%);
}

.mobcam-video[b-j8o635qe2h] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobcam-frame[b-j8o635qe2h] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mobcam-bracket[b-j8o635qe2h] {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 3px solid var(--fs-on-scrim);
}

.mobcam-bracket-tl[b-j8o635qe2h] {
  top: 18%;
  left: 8%;
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0 0;
}
.mobcam-bracket-tr[b-j8o635qe2h] {
  top: 18%;
  right: 8%;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 8px 0 0;
}
.mobcam-bracket-bl[b-j8o635qe2h] {
  bottom: 18%;
  left: 8%;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 8px;
}
.mobcam-bracket-br[b-j8o635qe2h] {
  bottom: 18%;
  right: 8%;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 8px 0;
}

.mobcam-hint[b-j8o635qe2h] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 220px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.mobcam-hint-icon[b-j8o635qe2h] {
  display: block;
  margin: 0 auto 8px;
  font-size: 34px !important;
  color: rgba(255, 255, 255, 0.6);
}

.mobcam-rail[b-j8o635qe2h] {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}

.mobcam-thumb[b-j8o635qe2h] {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mobcam-thumb-filled[b-j8o635qe2h] {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.6);
}

.mobcam-thumb img[b-j8o635qe2h] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobcam-thumb-label[b-j8o635qe2h] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62rem;
  font-weight: 700;
}

.mobcam-thumb-check[b-j8o635qe2h] {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 18px !important;
  /* The selection check: Beet disc, white tick (was ink on ink once success became ink). */
  color: var(--fs-text-inverse);
  background: var(--fs-primary);
  border-radius: 50%;
}

/* ---- starting spinner ---- */
.mobcam-starting[b-j8o635qe2h] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}

.mobcam-spinner[b-j8o635qe2h] {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--fs-text-inverse); /* on the dark camera view */
  animation: mobcam-spin-b-j8o635qe2h 0.9s linear infinite;
}

@keyframes mobcam-spin-b-j8o635qe2h {
  to {
    transform: rotate(360deg);
  }
}

/* ---- error card ---- */
.mobcam-error[b-j8o635qe2h] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  background: var(--fs-scrim-a85);
}

.mobcam-error-card[b-j8o635qe2h] {
  background: var(--fs-on-scrim);
  color: var(--fs-scrim);
  border-radius: 16px;
  padding: 24px 22px;
  text-align: center;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobcam-error-icon[b-j8o635qe2h] {
  font-size: 40px !important;
  color: var(--fs-error);
  margin: 0 auto;
}

.mobcam-error-text[b-j8o635qe2h] {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--fs-text-body);
}

/* ---- bottom controls ---- */
.mobcam-controls[b-j8o635qe2h] {
  flex-shrink: 0;
  padding: 8px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mobcam-chips[b-j8o635qe2h] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.mobcam-chip[b-j8o635qe2h] {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 100px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
}

.mobcam-chip-active[b-j8o635qe2h] {
  color: var(--fs-scrim);
  background: var(--fs-on-scrim);
  font-weight: 700;
}

.mobcam-chip-dot[b-j8o635qe2h] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fs-primary);
}

.mobcam-chip-done[b-j8o635qe2h] {
  font-size: 15px !important;
  color: var(--fs-success);
}

.mobcam-caption[b-j8o635qe2h] {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  text-align: center;
}

.mobcam-slot-error[b-j8o635qe2h] {
  color: var(--fs-error-light);
  background: var(--fs-error-a18);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.76rem;
  text-align: center;
}

.mobcam-shutter-row[b-j8o635qe2h] {
  display: flex;
  align-items: center;
  gap: 38px;
}

.mobcam-shutter[b-j8o635qe2h] {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid var(--fs-on-scrim);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.mobcam-shutter:disabled[b-j8o635qe2h] {
  cursor: default;
  opacity: 0.7;
}

.mobcam-shutter-core[b-j8o635qe2h] {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--fs-on-scrim);
  transition: transform 0.1s ease;
}

.mobcam-shutter-busy .mobcam-shutter-core[b-j8o635qe2h] {
  transform: scale(0.85);
  background: rgba(255, 255, 255, 0.7);
}

/* ---- buttons (shared with error card + extract) ---- */
.mobcam-btn[b-j8o635qe2h] {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: none;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
}

.mobcam-btn-primary[b-j8o635qe2h] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  box-shadow: none;
}

.mobcam-btn-ghost[b-j8o635qe2h] {
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-body);
  height: 42px;
}

.mobcam-btn-icon[b-j8o635qe2h] {
  font-size: 19px !important;
}

.mobcam-extract[b-j8o635qe2h] {
  max-width: 320px;
}
/* /Components/NutritionFacts/ProductImageScanner.razor.rz.scp.css */
/* ProductImageScanner.razor.css — strict-fit skin (app tokens, 4px radii) */

.product-image-scanner[b-rydmx4jesk] {
  padding: 1rem 1.5rem;
}

/* ===== Shared buttons ===== */

.scan-btn[b-rydmx4jesk] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

[b-rydmx4jesk] .scan-btn-icon {
  font-size: 1.125rem;
}

.scan-btn-primary[b-rydmx4jesk] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  box-shadow: none;
}

.scan-btn-primary:hover:not(:disabled)[b-rydmx4jesk] {
  background: var(--fs-primary-hover);
}

.scan-btn-primary:disabled[b-rydmx4jesk],
.scan-btn-disabled[b-rydmx4jesk] {
  background: var(--fs-disabled-bg);
  color: var(--fs-disabled-text);
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px var(--fs-border-hover);
}

.scan-btn-outline[b-rydmx4jesk] {
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-primary-text);
  color: var(--fs-primary-text);
}

.scan-btn-outline:hover[b-rydmx4jesk] {
  background: var(--fs-primary-a08);
}

.scan-btn-muted[b-rydmx4jesk] {
  background: none;
  color: var(--fs-text-secondary);
}

.scan-btn-muted:hover[b-rydmx4jesk] {
  background: var(--fs-shade-a04);
}

/* ===== Footer row ===== */

.scan-footer[b-rydmx4jesk] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fs-border-default);
}

/* ===== Upload: typed slots ===== */

.scan-upload-intro[b-rydmx4jesk] {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--fs-text-body);
}

.scan-slots[b-rydmx4jesk] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.scan-slot[b-rydmx4jesk] {
  position: relative;
  border: 2px dashed var(--fs-border-hover);
  border-radius: 4px;
  padding: 1rem;
  text-align: center;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.scan-slot:hover[b-rydmx4jesk] {
  border-color: var(--fs-primary-text);
  background: var(--fs-primary-a03);
}

.scan-slot-filled[b-rydmx4jesk],
.scan-slot-filled:hover[b-rydmx4jesk] {
  border: 1px solid var(--fs-success-light);
  background: var(--fs-success-light);
}

/* The file input covers the whole card so both click-to-browse and drag-drop work natively. */
[b-rydmx4jesk] .scan-slot-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

[b-rydmx4jesk] .scan-slot-icon {
  font-size: 2.125rem;
  color: var(--fs-text-muted);
}

[b-rydmx4jesk] .scan-slot-icon-filled {
  color: var(--fs-success);
}

[b-rydmx4jesk] .scan-slot-check {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 1.25rem;
  color: var(--fs-success);
}

.scan-slot-title[b-rydmx4jesk] {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fs-text-body);
  margin-top: 0.5rem;
}

.scan-slot-filled .scan-slot-title[b-rydmx4jesk] {
  color: var(--fs-text-primary);
}

.scan-slot-required[b-rydmx4jesk] {
  color: var(--fs-error);
}

.scan-slot-hint[b-rydmx4jesk] {
  font-size: 0.76rem;
  color: var(--fs-text-muted);
  margin-top: 0.25rem;
}

.scan-slot-file[b-rydmx4jesk] {
  font-size: 0.76rem;
  color: var(--fs-success);
  margin-top: 0.25rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-slot-thumb[b-rydmx4jesk] {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--fs-success-light);
}

/* Raised above the invisible full-card file input so Remove receives its own clicks;
   Replace is a label targeting the input, so it opens the picker from up here too.
   The whole strip (including the gap between the words) blocks the input beneath: a
   stray click in the gap must NOT open the picker, because cancelling that picker
   destroys the kept photo (the browser clears the input's file table). Drops anywhere
   on the strip are preventDefault-ed in the markup so they can't navigate the tab away —
   the small silent-swallow zone is the accepted price of never navigating. */
.scan-slot-actions[b-rydmx4jesk] {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

/* Replace is a <label> and Remove is a <button>, and they must be indistinguishable. That
   pairing is deliberate — see the markup — but it means every property the two tags can
   disagree on has to be stated, because two things went wrong here at once and both hit the
   button alone:

   1. MobileBottomSheet.razor.css has `.mobile-bottom-sheet ::deep button { min-height: 44px;
      font-size: 16px }`, which compiles to (0,2,1) and outranks a single class plus this file's
      scope attribute (0,2,0). Remove rendered 16px in a 44px box, centred, while Replace stayed
      12.5px at the top of the stretched flex row. TWO classes here — (0,3,0) — reclaim it
      without !important. MealSizeSheet.razor.css hit the identical collision; this is the second
      time, so the selector is written to survive it rather than to be minimal.
   2. Bootstrap's reboot re-arms `-webkit-appearance: button` after MudBlazor resets it, and
      nothing here competed. On iOS that restores native control metrics on the button only.

   The white box came from a third place — the `html body .mobile-bottom-sheet button` override
   in mobile-dropdown-fix.css, whose :not() list is the documented way out. `.scan-slot-action`
   is on that list now; if this class is ever renamed, rename it there too.

   Desktop never showed any of it: the sheet only exists on phones. */
.scan-slot-actions .scan-slot-action[b-rydmx4jesk] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Both get the sheet's 44px on a phone rather than neither. Reclaiming the size naively
     would have taken Remove — which destroys a captured photo — from the 44px the sheet had
     given it down to a 24px minimum, while Replace went up from ~19px. Matching them is the
     point, but matching them DOWNWARD on the destructive one is the wrong direction, so the
     phone case keeps 44 for the pair and the desktop case takes the AA floor of 24. */
  min-height: 24px;
  padding: 0 0.25rem;
  margin: 0;
  color: var(--fs-text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 0;
}

.scan-slot-actions .scan-slot-action:hover[b-rydmx4jesk] {
  color: var(--fs-text-body);
}

.scan-slots-caption[b-rydmx4jesk] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--fs-text-secondary);
}

[b-rydmx4jesk] .scan-caption-icon {
  font-size: 1rem;
  color: var(--fs-text-muted);
}

.scan-error[b-rydmx4jesk] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  background: var(--fs-error-light);
  border: 1px solid var(--fs-error-light);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  color: var(--fs-error-text);
}

/* ===== Processing ===== */

.scan-processing[b-rydmx4jesk] {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.scan-spinner[b-rydmx4jesk] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--fs-border-default);
  border-top-color: var(--fs-text-primary);
  animation: scanSpin-b-rydmx4jesk 1s linear infinite;
  margin-bottom: 1.25rem;
}

@keyframes scanSpin-b-rydmx4jesk {
  to {
    transform: rotate(360deg);
  }
}

.scan-processing h4[b-rydmx4jesk],
.scan-failed h4[b-rydmx4jesk] {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: var(--fs-text-primary);
  font-weight: 600;
}

.scan-processing p[b-rydmx4jesk],
.scan-failed p[b-rydmx4jesk] {
  margin: 0 0 1.5rem;
  color: var(--fs-text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 420px;
}

/* ===== Failed ===== */

.scan-failed[b-rydmx4jesk] {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.scan-failed-icon[b-rydmx4jesk] {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--fs-error-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

[b-rydmx4jesk] .scan-failed-icon .mud-icon-root {
  font-size: 1.75rem;
  color: var(--fs-error);
}

.scan-failed-actions[b-rydmx4jesk] {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Result confirmation ===== */

.scan-result-header[b-rydmx4jesk] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.scan-result-check[b-rydmx4jesk] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fs-success-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[b-rydmx4jesk] .scan-result-check .mud-icon-root {
  font-size: 1.3rem;
  color: var(--fs-macro-carbs-text, var(--fs-success-text));
}

.scan-result-title[b-rydmx4jesk] {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.scan-result-subtitle[b-rydmx4jesk] {
  font-size: 0.8rem;
  color: var(--fs-text-secondary);
}

.scan-result-grid[b-rydmx4jesk] {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1rem;
}

.scan-card[b-rydmx4jesk] {
  background: var(--fs-bg-primary);
  border-radius: 4px;
  padding: 1rem;
  box-shadow: none;
}

.scan-identity-row[b-rydmx4jesk] {
  margin-bottom: 0.9rem;
}

.scan-identity-row:last-child[b-rydmx4jesk] {
  margin-bottom: 0;
}

.scan-identity-serving[b-rydmx4jesk] {
  padding-top: 0.9rem;
  border-top: 1px solid var(--fs-bg-tertiary);
}

.scan-identity-ingredients[b-rydmx4jesk] {
  padding-top: 0.9rem;
  border-top: 1px solid var(--fs-bg-tertiary);
}

/* Ingredient lists can be long; let them wrap and cap the height so the card stays compact. */
.scan-ingredients-text[b-rydmx4jesk] {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fs-text-body);
  white-space: normal;
  overflow-wrap: anywhere;
  max-height: 6.5em;
  overflow-y: auto;
}

.scan-identity-label[b-rydmx4jesk] {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fs-text-muted);
}

.scan-identity-value-row[b-rydmx4jesk] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.scan-identity-value[b-rydmx4jesk] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.scan-chip[b-rydmx4jesk] {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--fs-macro-carbs-text, var(--fs-success-text));
  background: var(--fs-success-light);
  border-radius: 100px;
  padding: 3px 9px;
  white-space: nowrap;
}

.scan-nutrition-head[b-rydmx4jesk] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.scan-tiles[b-rydmx4jesk] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.scan-tile[b-rydmx4jesk] {
  background: var(--fs-bg-secondary);
  border-radius: 4px;
  padding: 0.7rem 0.5rem;
  text-align: center;
}

.scan-tile-value[b-rydmx4jesk] {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fs-text-primary);
}

.scan-tile-carbs[b-rydmx4jesk] {
  color: var(--fs-macro-carbs-text);
}

.scan-tile-protein[b-rydmx4jesk] {
  color: var(--fs-macro-protein);
}

.scan-tile-fat[b-rydmx4jesk] {
  color: var(--fs-macro-fat-text);
}

.scan-tile-label[b-rydmx4jesk] {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--fs-text-secondary);
}

.scan-caution[b-rydmx4jesk] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  background: var(--fs-warning-light);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  color: var(--fs-warning-text);
  line-height: 1.4;
}

[b-rydmx4jesk] .scan-caution-icon {
  font-size: 1rem;
  color: var(--fs-warning);
}

.scan-also-read[b-rydmx4jesk] {
  font-size: 0.78rem;
  color: var(--fs-text-muted);
  margin-top: 0.6rem;
}

/* ===== Responsive ===== */

@media (max-width: 640px) {
  .product-image-scanner[b-rydmx4jesk] {
    padding: 0.75rem 0.5rem;
  }

  .scan-slots[b-rydmx4jesk] {
    grid-template-columns: 1fr;
  }

  .scan-result-grid[b-rydmx4jesk] {
    grid-template-columns: 1fr;
  }

  .scan-footer[b-rydmx4jesk] {
    flex-direction: column-reverse;
    gap: 0.5rem;
    align-items: stretch;
  }

  /* The 44px the bottom sheet was already giving Remove, kept and given to Replace too. This is
     the touch surface, and Remove destroys a captured photo — the pair should match at the
     larger of the two, not the smaller. */
  .scan-slot-actions .scan-slot-action[b-rydmx4jesk] {
    min-height: 44px;
  }
}

/* Mobile camera call-to-action: the primary scan action on phones opens the live viewfinder;
   the file-picker slots below stay as the "or upload photos" fallback. */
.scan-camera-cta[b-rydmx4jesk] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--fs-primary);
  border: none;
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  color: var(--fs-text-inverse);
  box-shadow: none;
  font-family: inherit;
}

.scan-camera-cta-icon[b-rydmx4jesk] {
  font-size: 30px !important;
}

.scan-camera-cta-text[b-rydmx4jesk] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scan-camera-cta-title[b-rydmx4jesk] {
  font-size: 0.98rem;
  font-weight: 700;
}

.scan-camera-cta-sub[b-rydmx4jesk] {
  font-size: 0.78rem;
  opacity: 0.85;
}

.scan-upload-or[b-rydmx4jesk] {
  text-align: center;
  color: var(--mud-palette-text-secondary, var(--fs-text-secondary));
  font-size: 0.8rem;
  font-weight: 600;
  margin: 14px 0 6px;
}
/* /Components/Onboarding/EmailCaptureModal.razor.rz.scp.css */
/* EmailCaptureModal Component Styles */

/* Content Container */
.email-capture-content[b-aeuxvvh4ia] {
  padding: 8px 0;
  text-align: center;
}

/* Header Section */
.email-capture-header[b-aeuxvvh4ia] {
  margin-bottom: 24px;
}

.header-icon[b-aeuxvvh4ia] {
  font-size: 48px;
  margin-bottom: 16px;
  line-height: 1;
}

.header-text[b-aeuxvvh4ia] {
  color: var(--bs-secondary-color, var(--fs-text-secondary));
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* Form Styles */
.email-capture-form[b-aeuxvvh4ia] {
  margin-bottom: 16px;
}

.input-wrapper[b-aeuxvvh4ia] {
  position: relative;
}

.input-wrapper .form-control[b-aeuxvvh4ia] {
  padding-right: 48px;
  font-size: 16px; /* Prevents iOS zoom */
  border-radius: 8px;
  border: 2px solid var(--bs-border-color, var(--fs-border-default));
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.input-wrapper .form-control:focus[b-aeuxvvh4ia] {
  border-color: var(--fs-primary-text, var(--fs-border-focus));
  box-shadow: 0 0 0 3px var(--fs-primary-a15);
}

.input-wrapper.has-error .form-control[b-aeuxvvh4ia] {
  border-color: var(--bs-danger, var(--fs-error));
}

.input-wrapper.has-error .form-control:focus[b-aeuxvvh4ia] {
  box-shadow: 0 0 0 3px var(--fs-error-a15);
}

.input-spinner[b-aeuxvvh4ia] {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color, var(--fs-text-secondary));
}

/* Error Message */
.error-message[b-aeuxvvh4ia] {
  color: var(--bs-danger, var(--fs-error));
  font-size: 13px;
  margin-top: 8px;
  text-align: left;
}

/* Typo Suggestion */
.typo-suggestion[b-aeuxvvh4ia] {
  background-color: var(--bs-warning-bg-subtle, var(--fs-warning-light));
  border: 1px solid var(--bs-warning-border-subtle, var(--fs-warning-light));
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--bs-warning-text-emphasis, var(--fs-warning-text));
}

.suggestion-link[b-aeuxvvh4ia] {
  background: none;
  border: none;
  color: var(--fs-primary-text);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.suggestion-link:hover[b-aeuxvvh4ia] {
  color: var(--fs-primary-text-hover);
}

/* Submit Button */
.submit-btn[b-aeuxvvh4ia] {
  background-color: var(--fs-primary);
  border-color: var(--fs-primary);
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.submit-btn:hover:not(:disabled)[b-aeuxvvh4ia] {
  background-color: var(--fs-primary-hover);
  border-color: var(--fs-primary-hover);
}

.submit-btn:disabled[b-aeuxvvh4ia] {
  opacity: 0.65;
}

/* Trust Signal */
.trust-signal[b-aeuxvvh4ia] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 12px;
  color: var(--bs-secondary-color, var(--fs-text-secondary));
  font-size: 13px;
}

.trust-signal i[b-aeuxvvh4ia] {
  color: var(--bs-success, var(--fs-success));
}

/* Dismiss Link */
.dismiss-link[b-aeuxvvh4ia] {
  background: none;
  border: none;
  color: var(--bs-secondary-color, var(--fs-text-secondary));
  font-size: 14px;
  cursor: pointer;
  padding: 8px 16px;
  transition: color 0.2s ease;
}

.dismiss-link:hover:not(:disabled)[b-aeuxvvh4ia] {
  color: var(--bs-body-color, var(--fs-text-primary));
}

.dismiss-link:disabled[b-aeuxvvh4ia] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Success State */
.email-capture-success[b-aeuxvvh4ia] {
  padding: 24px 0;
}

.success-icon[b-aeuxvvh4ia] {
  font-size: 64px;
  color: var(--bs-success, var(--fs-success));
  margin-bottom: 16px;
  animation: success-pop-b-aeuxvvh4ia 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes success-pop-b-aeuxvvh4ia {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.success-title[b-aeuxvvh4ia] {
  font-size: 20px;
  font-weight: 600;
  color: var(--bs-body-color, var(--fs-text-primary));
  margin: 0 0 8px;
}

.success-message[b-aeuxvvh4ia] {
  color: var(--bs-secondary-color, var(--fs-text-secondary));
  font-size: 14px;
  margin: 0;
}

.success-message strong[b-aeuxvvh4ia] {
  color: var(--bs-body-color, var(--fs-text-primary));
}

/* Mobile Optimizations */
@media (max-width: 576px) {
  .email-capture-content[b-aeuxvvh4ia] {
    padding: 4px 0;
  }

  .header-icon[b-aeuxvvh4ia] {
    font-size: 40px;
    margin-bottom: 12px;
  }

  .header-text[b-aeuxvvh4ia] {
    font-size: 14px;
  }

  .submit-btn[b-aeuxvvh4ia] {
    padding: 16px 24px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .success-icon[b-aeuxvvh4ia] {
    animation: none;
  }

  .submit-btn[b-aeuxvvh4ia],
  .input-wrapper .form-control[b-aeuxvvh4ia] {
    transition: none;
  }
}
/* /Components/Onboarding/HowItWorksAnimation.razor.rz.scp.css */
/* ==========================================================================
   HowItWorksAnimation - Animated Value Proposition Schema
   Shows: Your Foods → Portion Pilot → Your Portions
   ========================================================================== */

.how-it-works-animation[b-lmkkoyxiae] {
  padding: 2rem 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.how-it-works-animation.visible[b-lmkkoyxiae] {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Main Container - Horizontal Flow Layout
   ========================================================================== */

.animation-container[b-lmkkoyxiae] {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 320px;
}

/* ==========================================================================
   Panel Styles (Foods & Portions)
   ========================================================================== */

.panel[b-lmkkoyxiae] {
  flex: 1;
  max-width: 280px;
  background: var(--fs-bg-primary);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: none;
  border: 1px solid var(--fs-border-default);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel.active[b-lmkkoyxiae] {
  opacity: 1;
  transform: scale(1);
}

.panel-header[b-lmkkoyxiae] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--fs-bg-secondary);
}

.panel-icon[b-lmkkoyxiae] {
  font-size: 1.5rem;
}

.panel-header h3[b-lmkkoyxiae] {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  margin: 0;
}

/* The sets share one grid cell (see the markup); each set lays out its items. */
.panel-content[b-lmkkoyxiae] {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a wider hidden set must not widen the panel */
}

.set-slot[b-lmkkoyxiae] {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* The sets hide with .stack-hidden (see "Stacked states"). The outgoing set vanishes at once: its items' fade
   would otherwise keep them drawn over the incoming set. */
.stack-hidden .food-item[b-lmkkoyxiae],
.stack-hidden .portion-item[b-lmkkoyxiae] {
  transition: none;
}

.panel-footer[b-lmkkoyxiae] {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--fs-bg-secondary);
}

.panel-tagline[b-lmkkoyxiae] {
  font-size: 0.8rem;
  color: var(--fs-text-secondary);
  font-style: italic;
}

/* ==========================================================================
   Food Items (Left Panel)
   ========================================================================== */

.food-item[b-lmkkoyxiae] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--fs-bg-secondary);
  border-radius: 10px;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.food-item.visible[b-lmkkoyxiae] {
  opacity: 1;
  transform: translateX(0);
}

.food-emoji[b-lmkkoyxiae] {
  font-size: 1.4rem;
}

.food-name[b-lmkkoyxiae] {
  font-size: 0.95rem;
  color: var(--fs-text-body);
  font-weight: 500;
}

/* ==========================================================================
   Flow Section (Arrows + Calculator)
   ========================================================================== */

.flow-section[b-lmkkoyxiae] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  flex-shrink: 0;
}

.flow-arrow[b-lmkkoyxiae] {
  width: 50px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.flow-arrow.active[b-lmkkoyxiae] {
  opacity: 1;
}

.arrow-svg[b-lmkkoyxiae] {
  width: 100%;
  height: 20px;
}

.arrow-line[b-lmkkoyxiae] {
  stroke-dashoffset: 60;
  animation: none;
}

.flow-arrow.active .arrow-line[b-lmkkoyxiae] {
  animation: drawLine-b-lmkkoyxiae 0.8s ease-out forwards;
}

@keyframes drawLine-b-lmkkoyxiae {
  to {
    stroke-dashoffset: 0;
  }
}

.arrow-head[b-lmkkoyxiae] {
  opacity: 0;
  transition: opacity 0.3s ease 0.5s;
}

.flow-arrow.active .arrow-head[b-lmkkoyxiae] {
  opacity: 1;
}

/* ==========================================================================
   Calculator Box (Center)
   ========================================================================== */

.calculator-box[b-lmkkoyxiae] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, var(--fs-bg-selected) 0%, var(--fs-bg-selected) 100%);
  border: 2px solid var(--fs-border-default);
  border-radius: 16px;
  min-width: 160px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.calculator-box.active[b-lmkkoyxiae] {
  opacity: 1;
  transform: scale(1);
}

.calculator-box.processing[b-lmkkoyxiae] {
  border-color: var(--fs-border-default);
  box-shadow: none;
}

.calculator-box.complete[b-lmkkoyxiae] {
  border-color: var(--fs-success-a50);
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
}

/* Grid, for the stacked emoji and spinner (see "Stacked states" below). align-content keeps the 2rem emoji's
   taller-than-40px line box centred, overflowing evenly as it did under flex, instead of spilling downward. */
.calculator-icon[b-lmkkoyxiae] {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  height: 40px;
  display: grid;
  place-items: center;
  align-content: center;
}

.processing-spinner[b-lmkkoyxiae] {
  width: 32px;
  height: 32px;
  border: 3px solid var(--fs-border-default);
  border-top-color: var(--fs-text-primary);
  border-radius: 50%;
  animation: spin-b-lmkkoyxiae 0.8s linear infinite;
}

@keyframes spin-b-lmkkoyxiae {
  to {
    transform: rotate(360deg);
  }
}

.calculator-label[b-lmkkoyxiae] {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fs-text-primary);
  margin-bottom: 0.25rem;
}

.calculator-subtitle[b-lmkkoyxiae] {
  display: grid;
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
  text-align: center;
  max-width: 120px;
}

.calculating-text[b-lmkkoyxiae] {
  color: var(--fs-text-primary);
  font-weight: 500;
}

/* ==========================================================================
   Stacked states (#1067): the food and portion sets, the icon (emoji or spinner) and the subtitle ("Personalized…"
   or "Calculating…") each lay out every state in one grid cell and hide the idle ones, so the card is always as
   big as its largest state at any font size, and nothing beside or below it moves as the loop runs. Hidden keeps
   the space: visibility, never display: none.
   ========================================================================== */

.calculator-icon > *[b-lmkkoyxiae],
.calculator-subtitle > span[b-lmkkoyxiae] {
  grid-area: 1 / 1;
}

.stack-hidden[b-lmkkoyxiae] {
  visibility: hidden;
}

/* Only the hidden food and portion sets are clipped, so a long hidden line can't widen a narrow page. Not the icon
   or subtitle states: a clipped grid item stops holding its column's width, and the subtitle would re-wrap. */
.set-slot.stack-hidden[b-lmkkoyxiae] {
  overflow: hidden;
}

/* Hidden, so it need not spin (outranks .processing-spinner's own animation). */
.processing-spinner.stack-hidden[b-lmkkoyxiae] {
  animation: none;
}

.calculator-timer[b-lmkkoyxiae] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding: 0.375rem 0.75rem;
  background: var(--fs-bg-tertiary);
  border-radius: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease 0.3s;
}

.calculator-timer.visible[b-lmkkoyxiae] {
  opacity: 1;
  transform: translateY(0);
}

.timer-icon[b-lmkkoyxiae] {
  font-size: 0.875rem;
}

.timer-text[b-lmkkoyxiae] {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

/* ==========================================================================
   Portion Items (Right Panel)
   ========================================================================== */

.portions-panel .panel-header[b-lmkkoyxiae] {
  border-bottom-color: var(--fs-success-a30);
}

.portions-panel .panel-icon[b-lmkkoyxiae] {
  color: var(--fs-success);
}

.portion-item[b-lmkkoyxiae] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
  border-radius: 10px;
  border-left: 3px solid var(--fs-success);
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portion-item.visible[b-lmkkoyxiae] {
  opacity: 1;
  transform: translateX(0);
}

.portion-check[b-lmkkoyxiae] {
  color: var(--fs-success);
  font-weight: 700;
  font-size: 0.875rem;
}

.portion-unit[b-lmkkoyxiae] {
  font-size: 0.9rem;
  color: var(--fs-text-primary);
  font-weight: 600;
}

.portion-grams[b-lmkkoyxiae] {
  font-size: 0.8rem;
  color: var(--fs-text-secondary);
  margin-left: auto;
}

/* ==========================================================================
   Cycle Indicator Dots
   ========================================================================== */

.cycle-indicators[b-lmkkoyxiae] {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* A 24px tap target (#1101); the background stops at the content box, so the drawn dot stays 10px. */
.cycle-dot[b-lmkkoyxiae] {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background-color: var(--fs-border-default);
  background-clip: content-box;
  cursor: pointer;
  padding: 7px;
  transition: all 0.3s ease;
}

/* The dot grows by giving up padding, not by scaling: a scaled 24px button would cover its neighbours. */
.cycle-dot:hover[b-lmkkoyxiae] {
  background-color: var(--fs-border-hover);
  padding: 6px;
}

.cycle-dot.active[b-lmkkoyxiae] {
  background-color: var(--fs-primary);
  padding: 6px;
}

/* ==========================================================================
   Responsive: Tablet
   ========================================================================== */

@media (max-width: 900px) {
  .animation-container[b-lmkkoyxiae] {
    gap: 0;
  }

  .panel[b-lmkkoyxiae] {
    max-width: 220px;
    padding: 1.25rem;
  }

  .flow-arrow[b-lmkkoyxiae] {
    width: 40px;
  }

  .calculator-box[b-lmkkoyxiae] {
    min-width: 140px;
    padding: 1rem 1.25rem;
  }

  .calculator-icon[b-lmkkoyxiae] {
    font-size: 1.75rem;
  }

  .calculator-label[b-lmkkoyxiae] {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Responsive: Mobile - Stack Vertically
   ========================================================================== */

@media (max-width: 700px) {
  /* --- Outer wrapper: minimal vertical padding --- */
  .how-it-works-animation[b-lmkkoyxiae] {
    padding: 0.25rem 0.75rem;
  }

  /* --- Main container: tight vertical stack --- */
  .animation-container[b-lmkkoyxiae] {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: auto;
  }

  /* --- Panels: subtle card chrome for visual grouping --- */
  .panel[b-lmkkoyxiae] {
    max-width: 100%;
    width: 100%;
    background: var(--fs-bg-primary);
    border: 1px solid var(--fs-border-default);
    border-radius: 12px;
    box-shadow: none;
    padding: 0.75rem;
  }

  /* --- Panel headers: compact single line --- */
  .panel-header[b-lmkkoyxiae] {
    margin-bottom: 0.375rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--fs-bg-tertiary);
  }

  .panel-icon[b-lmkkoyxiae] {
    font-size: 1.1rem;
  }

  .panel-header h3[b-lmkkoyxiae] {
    font-size: 1rem;
  }

  /* --- Food & portion items: inline chips that wrap horizontally --- */
  .set-slot[b-lmkkoyxiae] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .food-item[b-lmkkoyxiae] {
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    flex: 0 0 auto;
    transform: translateX(0);
    background: var(--fs-bg-secondary);
  }

  .food-item.visible[b-lmkkoyxiae] {
    transform: translateX(0);
  }

  .food-emoji[b-lmkkoyxiae] {
    font-size: 1rem;
  }

  .food-name[b-lmkkoyxiae] {
    font-size: 0.9rem;
  }

  .portion-item[b-lmkkoyxiae] {
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    border-left: 2px solid var(--fs-success);
    flex: 0 0 auto;
    transform: translateX(0);
  }

  .portion-item.visible[b-lmkkoyxiae] {
    transform: translateX(0);
  }

  .portion-check[b-lmkkoyxiae] {
    font-size: 0.75rem;
  }

  .portion-unit[b-lmkkoyxiae] {
    font-size: 0.9rem;
  }

  .portion-grams[b-lmkkoyxiae] {
    font-size: 0.8rem;
  }

  /* --- Panel footers: visible on mobile for context --- */
  .panel-footer[b-lmkkoyxiae] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  /* --- Flow section: tight vertical connector --- */
  .flow-section[b-lmkkoyxiae] {
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 0;
  }

  /* --- Arrows: tiny downward chevrons --- */
  .flow-arrow[b-lmkkoyxiae] {
    width: 24px;
    height: 16px;
    margin: 0.125rem 0;
    transform: rotate(90deg);
  }

  .arrow-svg[b-lmkkoyxiae] {
    height: 14px;
  }

  /* --- Calculator box: compact horizontal layout --- */
  .calculator-box[b-lmkkoyxiae] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    min-width: auto;
    width: 100%;
  }

  .calculator-icon[b-lmkkoyxiae] {
    font-size: 1.25rem;
    margin-bottom: 0;
    height: auto;
    flex-shrink: 0;
  }

  .processing-spinner[b-lmkkoyxiae] {
    width: 20px;
    height: 20px;
    border-width: 2px;
  }

  .calculator-label[b-lmkkoyxiae] {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .calculator-subtitle[b-lmkkoyxiae] {
    font-size: 0.8rem;
    max-width: none;
    text-align: left;
  }

  .calculator-timer[b-lmkkoyxiae] {
    margin-top: 0;
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    transform: translateY(0);
    flex-shrink: 0;
  }

  .calculator-timer.visible[b-lmkkoyxiae] {
    transform: translateY(0);
  }

  .timer-icon[b-lmkkoyxiae] {
    font-size: 0.75rem;
  }

  .timer-text[b-lmkkoyxiae] {
    font-size: 0.75rem;
  }

  /* --- Ordering: preserved vertical sequence --- */
  .foods-panel[b-lmkkoyxiae] {
    order: 0;
  }

  .left-arrow[b-lmkkoyxiae] {
    order: 1;
  }

  .calculator-box[b-lmkkoyxiae] {
    order: 2;
  }

  .right-arrow[b-lmkkoyxiae] {
    order: 3;
  }

  .portions-panel[b-lmkkoyxiae] {
    order: 4;
  }

  /* --- Cycle indicators: tighter spacing --- */
  .cycle-indicators[b-lmkkoyxiae] {
    margin-top: 0.75rem;
  }

  .cycle-dot[b-lmkkoyxiae] {
    padding: 8px;
  }

  .cycle-dot:hover[b-lmkkoyxiae],
  .cycle-dot.active[b-lmkkoyxiae] {
    padding: 7px;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

/* ==========================================================================
   On the grey "See It In Action" landing screen (below 992px, #1067)
   Its own greys vanish on the grey: the calculator box stays white like the panels beside it in every phase (its
   "done" fill is that same grey; the done state still shows in its border), and the inactive set dots take the
   control edge colour, hovered or not, so they still read as dots to tap (WCAG 1.4.11).
   ========================================================================== */

@media (max-width: 991.98px) {
  .calculator-box[b-lmkkoyxiae],
  .calculator-box.complete[b-lmkkoyxiae] {
    background: var(--fs-bg-primary);
  }

  .cycle-dot[b-lmkkoyxiae],
  .cycle-dot:not(.active):hover[b-lmkkoyxiae] {
    background-color: var(--fs-border-control);
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-it-works-animation[b-lmkkoyxiae],
  .panel[b-lmkkoyxiae],
  .food-item[b-lmkkoyxiae],
  .portion-item[b-lmkkoyxiae],
  .calculator-box[b-lmkkoyxiae],
  .flow-arrow[b-lmkkoyxiae],
  .calculator-timer[b-lmkkoyxiae],
  .cycle-dot[b-lmkkoyxiae] {
    transition: none;
    animation: none;
  }

  /* The card no longer slides in either, so its screen doesn't jump 20px after an arrow tap (#1067). */
  .how-it-works-animation[b-lmkkoyxiae],
  .panel.active[b-lmkkoyxiae],
  .food-item.visible[b-lmkkoyxiae],
  .portion-item.visible[b-lmkkoyxiae],
  .calculator-box.active[b-lmkkoyxiae],
  .flow-arrow.active[b-lmkkoyxiae],
  .calculator-timer.visible[b-lmkkoyxiae] {
    opacity: 1;
    transform: none;
  }

  .processing-spinner[b-lmkkoyxiae] {
    animation: none;
    border-color: var(--fs-text-primary);
  }

  .arrow-line[b-lmkkoyxiae] {
    stroke-dashoffset: 0;
  }
}

/* Schibsted is wider: under 360px the "60 seconds" chip no longer fits beside the subtitle, so it
   wraps to its own line instead of overlapping it or running past the card. */
@media (max-width: 359.98px) {
  .calculator-box[b-lmkkoyxiae] {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  /* Fixed lines in every phase (label, subtitle, chip), so the card doesn't change height as the loop
     swaps "Personalized for your goals" for "Calculating...". */
  .calculator-subtitle[b-lmkkoyxiae] {
    flex-basis: 100%;
    text-align: center;
  }

  .calculator-timer[b-lmkkoyxiae] {
    margin-inline: auto;
    padding: 0.2rem 0.35rem;
    font-size: 0.75rem;
  }
}
/* /Components/Onboarding/LandingNextArrow.razor.rz.scp.css */
/* Its own 64px row at the end of the screen, transparent so the screen's colour shows through. */
.landing-arrow-row[b-ras2pzpqn2] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  flex-shrink: 0;
}

/* Focus comes from the global :focus-visible ring in brand-overrides.css. */
.landing-next[b-ras2pzpqn2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--fs-border-control);
  border-radius: var(--fs-radius-pill);
  background-color: var(--fs-bg-primary);
  color: var(--fs-text-primary);
  cursor: pointer;
}

/* Desktop keeps the page as it was: the side dots move between sections there. */
/* Exactly the complement of the phone query, so a fractional width (zoom) never falls between the two. */
@media not all and (max-width: 991.98px) {
  .landing-arrow-row[b-ras2pzpqn2] {
    display: none;
  }
}
/* /Components/Onboarding/LandingScreen.razor.rz.scp.css */
@media (max-width: 991.98px) {
  .landing-screen[b-goi92h4pi5] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh; /* for browsers without small-viewport units */
    min-height: 100svh;
    padding: var(--fs-spacing-2xl) var(--fs-spacing-lg) 0;
  }

  /* The content is centred in the space above the arrow row. */
  .landing-screen-body[b-goi92h4pi5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .screen-white[b-goi92h4pi5] {
    background: var(--fs-bg-primary);
  }

  .screen-grey[b-goi92h4pi5] {
    background: var(--fs-bg-secondary);
  }

  /* The hero sits under the site's 64px top bar. A banner above the page pushes its arrow just past the fold,
     as a short phone does; that was accepted with the design. */
  .under-top-bar[b-goi92h4pi5] {
    padding: 0;
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
  }
}

/* Exactly the complement of the phone query, so a fractional width (zoom) never falls between the two. */
@media not all and (max-width: 991.98px) {
  .landing-screen[b-goi92h4pi5],
  .landing-screen-body[b-goi92h4pi5] {
    display: contents;
  }
}
/* /Components/Onboarding/MainPageIntro.razor.rz.scp.css */
/* ==========================================================================
   Scroll-Reveal Landing Page - Natural Flow with Reveal Animations
   Better UX than scroll-snap for content-light sections (avoids false bottom)
   ========================================================================== */

.snap-container[b-tkasyd4w7l] {
  /* Normal scrolling - no snap */
}

.snap-section[b-tkasyd4w7l] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 1rem;
  position: relative;
  /* Scroll-reveal animation */
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.snap-section.visible[b-tkasyd4w7l] {
  opacity: 1;
  transform: translateY(0);
}

/* Hero section - no animation, always visible */
.snap-hero[b-tkasyd4w7l] {
  padding: 0;
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Side Pagination Dots - Shows current section position
   Best practice for full-page scroll experiences (fullPage.js pattern)
   ========================================================================== */

.snap-pagination[b-tkasyd4w7l] {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 0.375rem 0.125rem;
  background: var(--fs-bg-primary-a10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
}

/* The button is a 24px tap target (#1101); the dot inside it is drawn by .snap-dot-mark. The buttons
   touch, so the dots keep their old 24px spacing. */
.snap-dot[b-tkasyd4w7l] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.snap-dot-mark[b-tkasyd4w7l] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--fs-text-secondary-a40);
  background: transparent;
  transition: all 0.3s ease;
  pointer-events: none;
}

.snap-dot:hover .snap-dot-mark[b-tkasyd4w7l] {
  border-color: var(--fs-primary-text);
  transform: scale(1.2);
}

.snap-dot.active .snap-dot-mark[b-tkasyd4w7l] {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
  transform: scale(1.1);
}

/* Tooltip on hover */
.snap-dot[b-tkasyd4w7l]::before {
  content: attr(title);
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--fs-bg-inverse-a95);
  color: var(--fs-text-on-inverse);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
}

.snap-dot[b-tkasyd4w7l]::after {
  content: "";
  position: absolute;
  right: calc(100% - 2px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--fs-bg-inverse-a95);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.snap-dot:hover[b-tkasyd4w7l]::before,
.snap-dot:hover[b-tkasyd4w7l]::after {
  opacity: 1;
  visibility: visible;
}

/* Focus styles for accessibility */
.snap-dot:focus[b-tkasyd4w7l],
.snap-dot:focus-visible[b-tkasyd4w7l] {
  outline: none;
}

.snap-dot:focus .snap-dot-mark[b-tkasyd4w7l] {
  box-shadow: 0 0 0 3px var(--fs-primary-a30);
}

.snap-dot:focus-visible .snap-dot-mark[b-tkasyd4w7l] {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 2px;
}

/* Section title — reusable heading for snap sections */
.snap-section-title[b-tkasyd4w7l] {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fs-text-primary);
}

/* Content wrapper for centering within sections */
.snap-content[b-tkasyd4w7l] {
  width: 100%;
  max-width: 1100px;
  padding: 0 1rem;
}

/* Alternating section backgrounds */
.snap-animation[b-tkasyd4w7l] {
  background: var(--fs-bg-primary);
}

.snap-journey[b-tkasyd4w7l] {
  background: var(--fs-bg-primary);
}

.snap-comparison[b-tkasyd4w7l] {
  background: linear-gradient(180deg, var(--fs-bg-secondary) 0%, var(--fs-bg-secondary) 50%, var(--fs-bg-secondary) 100%);
}

.snap-features[b-tkasyd4w7l] {
  background: var(--fs-bg-primary);
}

.snap-faq[b-tkasyd4w7l] {
  background: var(--fs-bg-secondary);
}

.snap-cta[b-tkasyd4w7l] {
  background: linear-gradient(135deg, var(--fs-bg-selected) 0%, var(--fs-bg-selected) 100%);
}

/* Features + Beta combined wrapper */
.features-beta-wrapper[b-tkasyd4w7l] {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}

/* FAQ wrapper for centering */
.faq-wrapper[b-tkasyd4w7l] {
  max-width: 700px;
  margin: 0 auto;
}

/* Mobile: a shorter reveal. The screen box itself is set by the landing-screens block at the end (#1067). */
@media (max-width: 768px) {
  .snap-section[b-tkasyd4w7l] {
    transform: translateY(15px);
  }

  /* The hero never reveals (same weight as the rule above, so it must follow it; .visible still outranks both). */
  .snap-hero[b-tkasyd4w7l] {
    transform: none;
  }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .snap-section[b-tkasyd4w7l] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .snap-dot-mark[b-tkasyd4w7l],
  .snap-dot[b-tkasyd4w7l]::before,
  .snap-dot[b-tkasyd4w7l]::after {
    transition: none;
  }
}

/* ==========================================================================
   Original Styles Below
   ========================================================================== */

.intro-card[b-tkasyd4w7l] {
  background-color: var(--fs-bg-primary);
  border-radius: 1rem;
  padding: 2rem 3rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Video Section Styles */
.video-section[b-tkasyd4w7l] {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  /*
     * REMOVED: animation: fadeInUp 0.8s ease-out;
     * This animation was causing a white flash during Blazor prerender-to-interactive transition
     * because it starts at opacity: 0 and the animation restarts during hydration.
     * The video section now appears instantly without animation to prevent the flash.
     */
}

/* Kept for reference but no longer used on .video-section */
@keyframes fadeInUp-b-tkasyd4w7l {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .video-section[b-tkasyd4w7l] {
    animation: none;
  }

  .video-container[b-tkasyd4w7l],
  .intro-video[b-tkasyd4w7l],
  .video-container[b-tkasyd4w7l]::before {
    transition: none;
  }

  .video-container:hover[b-tkasyd4w7l] {
    transform: none;
  }

  .intro-video:hover[b-tkasyd4w7l] {
    transform: none;
  }
}

.video-container[b-tkasyd4w7l] {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 1rem auto 2rem;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: none;
  background: var(--fs-bg-secondary);
  padding: 0.5rem;
  transition: all 0.3s ease;
}

.video-container[b-tkasyd4w7l]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--fs-bg-tertiary);
  border-radius: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.video-container:hover[b-tkasyd4w7l]::before {
  opacity: 1;
}

.video-container:hover[b-tkasyd4w7l] {
  box-shadow: none;
}

.video-container .ratio[b-tkasyd4w7l] {
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: var(--fs-scrim);
  position: relative;
  z-index: 2;
}

.video-wrapper[b-tkasyd4w7l] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.intro-video[b-tkasyd4w7l] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
  border-radius: 0.75rem;
  background-color: var(--fs-scrim);
  z-index: 2;
  pointer-events: auto;
}

.video-poster-overlay[b-tkasyd4w7l] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fs-bg-secondary);
  border-radius: 0.75rem;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.video-poster-overlay.hidden[b-tkasyd4w7l] {
  opacity: 0 !important;
  pointer-events: none;
}

.poster-image[b-tkasyd4w7l] {
  max-width: 50%;
  max-height: 50%;
  object-fit: contain;
  opacity: 0.8;
}

.intro-video:focus[b-tkasyd4w7l] {
  outline: 3px solid var(--fs-primary-a50);
  outline-offset: 2px;
}

/* Enhanced Feature List Styles - Horizontal for scroll-snap */
.feature-list[b-tkasyd4w7l] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.25rem;
  margin-bottom: 0;
}

.feature-item[b-tkasyd4w7l] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 1.25rem;
  transition: transform 0.2s ease-in-out;
  flex: 0 0 280px;
  background: var(--fs-bg-primary);
  border-radius: 15px;
  box-shadow: none;
  margin-bottom: 0;
}

.feature-item:hover[b-tkasyd4w7l] {
}

.feature-icon[b-tkasyd4w7l] {
  display: none;
}

.feature-content[b-tkasyd4w7l] {
  text-align: center;
}

.feature-content h2[b-tkasyd4w7l] {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  margin-bottom: 0.5rem;
}

.feature-content p[b-tkasyd4w7l] {
  color: var(--fs-text-secondary);
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 0;
}

/* CTA Button */
.cta-container[b-tkasyd4w7l] {
  text-align: center;
}

.cta-button[b-tkasyd4w7l] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  font-weight: 600;
  font-size: 1.1rem;
  padding: 1.2rem 2.5rem; /* Increased height by ~20% */
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-button:hover[b-tkasyd4w7l],
.cta-button:focus[b-tkasyd4w7l] {
  box-shadow: none;
}

.cta-button:active[b-tkasyd4w7l] {
  box-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .intro-card[b-tkasyd4w7l] {
    padding: 2.5rem;
  }

  .video-container[b-tkasyd4w7l] {
    max-width: 100%;
    padding: 0.4rem;
  }

  .video-section[b-tkasyd4w7l] {
    margin-bottom: 2.5rem;
  }

  .feature-item[b-tkasyd4w7l] {
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .intro-card[b-tkasyd4w7l] {
    padding: 1rem 1.5rem;
  }

  .video-container[b-tkasyd4w7l] {
    width: 100%;
    margin: 1rem auto 2rem;
    padding: 0.3rem;
    border-radius: 0.75rem;
  }

  .video-container .ratio[b-tkasyd4w7l] {
    border-radius: 0.5rem;
  }

  .video-section[b-tkasyd4w7l] {
    margin-bottom: 1.5rem;
  }

  .feature-content h3[b-tkasyd4w7l] {
    font-size: 1.15rem;
  }

  .feature-content p[b-tkasyd4w7l] {
    font-size: 0.95rem;
  }

  .cta-button[b-tkasyd4w7l] {
    width: 100%;
    padding: 1.2rem 1.5rem; /* Increased height by ~20% */
  }
}

@media (max-width: 576px) {
  .intro-card[b-tkasyd4w7l] {
    padding: 0.75rem 1rem;
  }

  .video-container[b-tkasyd4w7l] {
    width: 100%;
    margin: 0.5rem auto 1.5rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    box-shadow: none;
  }

  .video-container .ratio[b-tkasyd4w7l] {
    border-radius: 0.375rem;
  }

  .video-container:hover[b-tkasyd4w7l] {
    transform: none;
  }

  .intro-video:hover[b-tkasyd4w7l] {
    transform: none;
  }

  .video-section[b-tkasyd4w7l] {
    margin-bottom: 1rem;
  }

  .feature-list[b-tkasyd4w7l] {
    gap: 0.5rem;
  }

  .feature-item[b-tkasyd4w7l] {
    padding: 0.625rem 0.875rem;
    max-width: 100%;
    border-radius: 8px;
  }

  .feature-content h2[b-tkasyd4w7l] {
    font-size: 0.95rem;
  }

  .feature-content p[b-tkasyd4w7l] {
    font-size: 0.825rem;
  }
}

/* Benefits Section */
.benefits-section[b-tkasyd4w7l] {
  background: var(--fs-bg-secondary);
  padding: 4rem 0;
}

.benefit-card[b-tkasyd4w7l] {
  background: var(--fs-bg-primary);
  border-radius: 15px;
  padding: 3rem 2rem;
  min-height: 250px;
  height: 100%;
  box-shadow: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.benefit-card:hover[b-tkasyd4w7l] {
  box-shadow: none;
}

.benefit-card i[b-tkasyd4w7l] {
  margin-bottom: 1rem;
}

.benefit-card h3[b-tkasyd4w7l] {
  color: var(--fs-text-body);
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  line-height: 1.5;
}

.benefit-card p[b-tkasyd4w7l] {
  color: var(--fs-text-secondary);
  line-height: 1.6;
}

/* Video section styling */
.video-section[b-tkasyd4w7l] {
  margin-bottom: 3rem;
}

.video-container[b-tkasyd4w7l] {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none;
}

/* CTA section - Soft warm background, orange button pops */
.cta-container[b-tkasyd4w7l] {
  background: linear-gradient(135deg, var(--fs-bg-selected) 0%, var(--fs-bg-selected) 100%);
  color: var(--fs-text-primary);
  padding: 4rem 2rem;
  border-radius: 20px;
  margin-top: 3rem;
  border: 1px solid var(--fs-primary-a15);
}

.cta-container h2[b-tkasyd4w7l] {
  color: var(--fs-text-primary);
  font-weight: 700;
}

/* CTA subtext styling for better readability */
.cta-subtext[b-tkasyd4w7l] {
  font-size: 0.875rem;
  color: var(--fs-text-secondary);
  font-weight: 500;
  letter-spacing: 0.025em;
}

.cta-disclaimer[b-tkasyd4w7l] {
  max-width: 520px;
  margin: 0.75rem auto 0;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--fs-border-default);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--fs-text-muted);
}

.cta-button[b-tkasyd4w7l] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  border: none;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: none;
}

.cta-button:hover[b-tkasyd4w7l] {
  box-shadow: none;
  background: var(--fs-primary-hover);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .feature-list[b-tkasyd4w7l] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }

  .feature-item[b-tkasyd4w7l] {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    min-width: unset;
    max-width: 100%;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid var(--fs-shade-a06);
  }

  .feature-item:hover[b-tkasyd4w7l] {
    transform: none;
  }

  .feature-content[b-tkasyd4w7l] {
    text-align: left;
  }

  .feature-content h2[b-tkasyd4w7l] {
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
  }

  .feature-content p[b-tkasyd4w7l] {
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .cta-container[b-tkasyd4w7l] {
    padding: 2rem 1rem;
  }

  .cta-button[b-tkasyd4w7l] {
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
  }
}

/* ==========================================================================
   Why Choose Us & Beta Sections - Mobile Alignment Fix (Gestalt Proximity)
   Fixes checkmark/text grouping on mobile for better visual association
   ========================================================================== */

.why-choose-section h3[b-tkasyd4w7l],
.beta-section h3[b-tkasyd4w7l] {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

/* Mobile: Card-style layout with left-aligned content */
@media (max-width: 768px) {
  .why-choose-section .d-flex[b-tkasyd4w7l],
  .beta-section .d-flex[b-tkasyd4w7l] {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    background: var(--fs-bg-secondary);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    text-align: left;
    border: 1px solid var(--fs-border-default);
  }

  .why-choose-section .d-flex:last-child[b-tkasyd4w7l],
  .beta-section .d-flex:last-child[b-tkasyd4w7l] {
    margin-bottom: 0;
  }

  .why-choose-section .fa-check[b-tkasyd4w7l],
  .why-choose-section .fa-check-circle[b-tkasyd4w7l],
  .beta-section .fa-check[b-tkasyd4w7l],
  .beta-section .fa-check-circle[b-tkasyd4w7l] {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.875rem;
  }

  .why-choose-section span[b-tkasyd4w7l],
  .beta-section span[b-tkasyd4w7l] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--fs-text-body);
  }
}

/* Tablet: Slightly smaller cards */
@media (min-width: 769px) and (max-width: 992px) {
  .why-choose-section .d-flex[b-tkasyd4w7l],
  .beta-section .d-flex[b-tkasyd4w7l] {
    padding: 0.75rem 1rem;
  }
}

/* ==========================================================================
   Sticky CTA Bar (Mobile) - Hidden during scroll-snap experience
   ========================================================================== */

.sticky-cta-bar[b-tkasyd4w7l] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--fs-bg-primary-a98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--fs-border-default);
  padding: 0.875rem 1rem;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 1px solid var(--fs-primary-a20);
  display: none; /* Hidden by default when using scroll-snap */
}

.sticky-cta-bar.visible[b-tkasyd4w7l] {
  transform: translateY(0);
}

.sticky-cta-bar.hidden-by-user[b-tkasyd4w7l] {
  display: none;
}

.sticky-cta-content[b-tkasyd4w7l] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  margin: 0 auto;
  gap: 1rem;
}

.sticky-cta-text[b-tkasyd4w7l] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sticky-cta-headline[b-tkasyd4w7l] {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.sticky-cta-subtext[b-tkasyd4w7l] {
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
}

.sticky-cta-button[b-tkasyd4w7l] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  border: none;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.sticky-cta-button:hover[b-tkasyd4w7l] {
  box-shadow: none;
}

.sticky-cta-button:active[b-tkasyd4w7l] {
  transform: scale(0.98);
}

.sticky-cta-close[b-tkasyd4w7l] {
  position: absolute;
  top: -10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--fs-bg-secondary);
  color: var(--fs-text-secondary);
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: all 0.2s ease;
}

.sticky-cta-close:hover[b-tkasyd4w7l] {
  background: var(--fs-border-default);
  color: var(--fs-text-primary);
}

/* ==========================================================================
   Floating CTA Button (Desktop) - Bottom right corner
   ========================================================================== */

.floating-cta[b-tkasyd4w7l] {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-cta.visible[b-tkasyd4w7l] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.floating-cta-button[b-tkasyd4w7l] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  border: none;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
}

.floating-cta-button:hover[b-tkasyd4w7l] {
  box-shadow: none;
}

.floating-cta-button:active[b-tkasyd4w7l] {
}

.floating-cta-icon[b-tkasyd4w7l] {
  font-size: 1.25rem;
}

.floating-cta-text[b-tkasyd4w7l] {
  font-size: 0.95rem;
}

/* ==========================================================================
   Responsive Behavior: Mobile vs Desktop
   ========================================================================== */

/* Mobile: Show sticky bar, hide floating button */
@media (max-width: 991px) {
  .sticky-cta-bar[b-tkasyd4w7l] {
    /* Shown on mobile */
  }

  .floating-cta[b-tkasyd4w7l] {
    display: none !important;
  }
}

/* Desktop: Hide sticky bar, show floating button */
@media (min-width: 992px) {
  .sticky-cta-bar[b-tkasyd4w7l] {
    display: none !important;
  }

  .floating-cta[b-tkasyd4w7l] {
    /* Shown on desktop */
  }
}

/* Extra small screens - more compact sticky bar */
@media (max-width: 400px) {
  .sticky-cta-content[b-tkasyd4w7l] {
    gap: 0.5rem;
  }

  .sticky-cta-headline[b-tkasyd4w7l] {
    font-size: 0.85rem;
  }

  .sticky-cta-subtext[b-tkasyd4w7l] {
    display: none;
  }

  .sticky-cta-button[b-tkasyd4w7l] {
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .sticky-cta-bar[b-tkasyd4w7l],
  .floating-cta[b-tkasyd4w7l],
  .sticky-cta-button[b-tkasyd4w7l],
  .floating-cta-button[b-tkasyd4w7l] {
    transition: none;
  }
}

/* ==========================================================================
   FAQ Section - Expandable Q&A

   SEO Note: FAQPage schema is included for AI search optimization (3.2x more
   likely to appear in AI Overviews). Traditional FAQ rich snippets in Google
   SERPs are restricted to government/health authorities since 2023.
   ========================================================================== */

.faq-section[b-tkasyd4w7l] {
  background: var(--fs-bg-primary);
  padding: 3rem 0;
}

.faq-section h2[b-tkasyd4w7l] {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fs-text-primary);
  margin-bottom: 2rem;
}

.faq-list[b-tkasyd4w7l] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item[b-tkasyd4w7l] {
  background: var(--fs-bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--fs-border-default);
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-item:hover[b-tkasyd4w7l] {
  border-color: var(--fs-primary-text);
  box-shadow: none;
}

.faq-item[open][b-tkasyd4w7l] {
  background: var(--fs-bg-selected);
  border-color: var(--fs-border-default);
}

.faq-question[b-tkasyd4w7l] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-question[b-tkasyd4w7l]::-webkit-details-marker {
  display: none;
}

/* WCAG 2.4.7 Focus Visible - Clear focus indicator for keyboard users */
.faq-question:focus[b-tkasyd4w7l] {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 2px;
  border-radius: 8px;
}

.faq-question:focus:not(:focus-visible)[b-tkasyd4w7l] {
  outline: none;
}

.faq-question:focus-visible[b-tkasyd4w7l] {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 2px;
  border-radius: 8px;
}

.faq-question span[b-tkasyd4w7l] {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  flex: 1;
  padding-right: 1rem;
}

.faq-icon[b-tkasyd4w7l] {
  color: var(--fs-text-secondary);
  font-size: 0.875rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item[open] .faq-icon[b-tkasyd4w7l] {
  transform: rotate(180deg);
  color: var(--fs-text-primary);
}

.faq-answer[b-tkasyd4w7l] {
  padding: 0 1.5rem 1.25rem;
}

.faq-answer p[b-tkasyd4w7l] {
  color: var(--fs-text-body);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .faq-section[b-tkasyd4w7l] {
    padding: 2rem 0;
  }

  .faq-section h2[b-tkasyd4w7l] {
    font-size: 1.5rem;
  }

  .faq-question[b-tkasyd4w7l] {
    padding: 1rem 1.25rem;
  }

  .faq-question span[b-tkasyd4w7l] {
    font-size: 0.95rem;
  }

  .faq-answer[b-tkasyd4w7l] {
    padding: 0 1.25rem 1rem;
  }

  .faq-answer p[b-tkasyd4w7l] {
    font-size: 0.9rem;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .faq-item[b-tkasyd4w7l],
  .faq-icon[b-tkasyd4w7l] {
    transition: none;
  }
}

/* ==========================================================================
   Social Proof Section - Stats Display
   ========================================================================== */

.social-proof-section[b-tkasyd4w7l] {
  background: var(--fs-bg-secondary);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  border: 1px solid var(--fs-border-default);
}

.social-proof-stats[b-tkasyd4w7l] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.stat-item[b-tkasyd4w7l] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.stat-number[b-tkasyd4w7l] {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fs-text-primary);
  line-height: 1.2;
}

.stat-label[b-tkasyd4w7l] {
  font-size: 0.875rem;
  color: var(--fs-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .social-proof-section[b-tkasyd4w7l] {
    padding: 1.5rem 1rem;
  }

  .social-proof-stats[b-tkasyd4w7l] {
    gap: 1.5rem;
  }

  .stat-number[b-tkasyd4w7l] {
    font-size: 1.5rem;
  }

  .stat-label[b-tkasyd4w7l] {
    font-size: 0.75rem;
  }
}

@media (max-width: 576px) {
  .social-proof-stats[b-tkasyd4w7l] {
    gap: 1rem;
  }

  .stat-item[b-tkasyd4w7l] {
    min-width: 100px;
  }

  .stat-number[b-tkasyd4w7l] {
    font-size: 1.35rem;
  }
}

/* The Features screen's title is read by screen readers but shows only when a keyboard user's "Next: Features"
   lands focus on it (#1067). It keeps its space either way, so it never covers a card and nothing moves when it
   appears. (Transparent rather than visibility: hidden, which could not take focus.) */
.features-screen-title:not(:focus-visible)[b-tkasyd4w7l] {
  opacity: 0;
}

/* Desktop has no arrows to land on it, and keeps the layout it had (the complement of the phone query). */
@media not all and (max-width: 991.98px) {
  .features-screen-title[b-tkasyd4w7l] {
    display: none;
  }
}

/* ==========================================================================
   Landing screens (#1067, Claude Design "Landing Screens")
   Below 992px each section holds one or two LandingScreens, which paint the page; the section itself has no box.
   ========================================================================== */

@media (max-width: 991.98px) {
  .snap-container > .snap-section[b-tkasyd4w7l] {
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    background: none;
  }

  /* The screen has the side gutter. */
  .snap-section > .snap-content[b-tkasyd4w7l],
  .landing-screen .snap-content[b-tkasyd4w7l] {
    max-width: none;
    padding: 0;
  }

  .features-beta-wrapper[b-tkasyd4w7l] {
    display: block;
  }

  /* The FAQ screen is grey: the section's own white box would hide that, so it goes, and the question cards turn
     white to stand off the grey (their usual tints are that same grey). */
  .faq-section[b-tkasyd4w7l] {
    background: none;
  }

  .faq-item[b-tkasyd4w7l],
  .faq-item[open][b-tkasyd4w7l] {
    background: var(--fs-bg-primary);
  }

  /* No side dots where the screens have arrows (#1067): the fixed column sat on top of text and cards, and
     there is no room for a gutter. The arrows and swiping move between screens. */
  .snap-pagination[b-tkasyd4w7l] {
    display: none;
  }
}
/* /Components/Onboarding/TrackerComparisonAnimation.razor.rz.scp.css */
/* ==========================================================================
   TrackerComparisonAnimation - Comparison between Trackers and Portion Pilot
   Shows: Tedious guess/log/adjust loop vs Quick pick/answer/done
   ========================================================================== */

.tracker-comparison[b-cebaoif3wa] {
  padding: 2rem 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.tracker-comparison.visible[b-cebaoif3wa] {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Title Section
   ========================================================================== */

.comparison-title[b-cebaoif3wa] {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fs-text-primary);
  margin-bottom: 0.5rem;
}

.comparison-subtitle[b-cebaoif3wa] {
  text-align: center;
  font-size: 1rem;
  color: var(--fs-text-secondary);
  font-style: italic;
  margin-bottom: 2rem;
}

/* ==========================================================================
   Main Container - Side by Side Layout
   ========================================================================== */

.comparison-container[b-cebaoif3wa] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

/* ==========================================================================
   Panel Styles
   ========================================================================== */

.comparison-panel[b-cebaoif3wa] {
  flex: 1;
  max-width: 380px;
  background: var(--fs-bg-primary);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: none;
  border: 2px solid var(--fs-border-default);
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.comparison-panel.active[b-cebaoif3wa] {
  opacity: 1;
  transform: scale(1);
}

/* Tracker panel - neutral slate (no good/bad colour coding — ED-sensitive brand fix) */
.tracker-panel[b-cebaoif3wa] {
  border-color: var(--fs-text-secondary-a25);
  background: var(--fs-bg-primary);
}

/* Portion Pilot panel - the signature orange accent */
.portion-pilot-panel[b-cebaoif3wa] {
  border-color: var(--fs-border-default);
  background: var(--fs-bg-tertiary);
}

/* ==========================================================================
   Panel Headers
   ========================================================================== */

.panel-header[b-cebaoif3wa] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--fs-bg-secondary);
}

.tracker-header[b-cebaoif3wa] {
  border-bottom-color: var(--fs-text-secondary-a25);
}

.pilot-header[b-cebaoif3wa] {
  border-bottom-color: var(--fs-border-default);
}

.header-icon[b-cebaoif3wa] {
  font-size: 1.25rem;
}

.panel-header h4[b-cebaoif3wa] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  margin: 0;
}

/* ==========================================================================
   Steps Container
   ========================================================================== */

.steps-container[b-cebaoif3wa] {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.step-item[b-cebaoif3wa] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease-out;
}

.step-item.visible[b-cebaoif3wa] {
  opacity: 1;
  transform: translateY(0);
}

.step-icon[b-cebaoif3wa] {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.step-text[b-cebaoif3wa] {
  font-size: 0.875rem;
  color: var(--fs-text-body);
}

.step-arrow[b-cebaoif3wa] {
  text-align: center;
  color: var(--fs-text-muted);
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  line-height: 1;
  padding: 0.125rem 0;
}

.step-arrow.visible[b-cebaoif3wa] {
  opacity: 1;
}

/* Tracker steps are uniform neutral now (no good/bad tinting) — the old step-guess/log/error/repeat
   classes were removed with the ED-safety rework. */

/* ==========================================================================
   Portion Pilot Step Styles
   ========================================================================== */

.step-pick[b-cebaoif3wa] {
  background: var(--fs-bg-secondary);
}

.step-pick .step-text[b-cebaoif3wa] {
  color: var(--fs-text-primary);
}

.step-calculating[b-cebaoif3wa] {
  background: var(--fs-bg-tertiary);
  border: 1px dashed var(--fs-border-default);
  margin: 0.5rem 0;
}

.step-calculating .step-icon[b-cebaoif3wa] {
  animation: pulse-b-cebaoif3wa 0.8s ease-in-out infinite;
}

.step-calculating .step-text[b-cebaoif3wa] {
  color: var(--fs-text-primary);
  font-weight: 500;
  font-style: italic;
}

@keyframes pulse-b-cebaoif3wa {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.step-result[b-cebaoif3wa] {
  background: var(--fs-bg-tertiary);
  border-left: 3px solid var(--fs-border-default);
}

.step-result .step-text[b-cebaoif3wa] {
  color: var(--fs-text-primary);
  font-weight: 600;
}

.step-done[b-cebaoif3wa] {
  background: var(--fs-bg-secondary);
  border: 2px solid var(--fs-border-default);
}

.step-done .step-icon[b-cebaoif3wa] {
  font-size: 1.25rem;
}

.step-done .step-text[b-cebaoif3wa] {
  color: var(--fs-text-primary);
  font-weight: 700;
  font-size: 0.95rem;
}

/* ==========================================================================
   Panel Footers
   ========================================================================== */

.panel-footer[b-cebaoif3wa] {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--fs-bg-secondary);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease-out;
}

.panel-footer.visible[b-cebaoif3wa] {
  opacity: 1;
  transform: translateY(0);
}

.footer-text[b-cebaoif3wa] {
  font-size: 0.85rem;
  font-weight: 600;
}

.tracker-footer .footer-text[b-cebaoif3wa] {
  color: var(--fs-text-body);
}

.pilot-footer .footer-text[b-cebaoif3wa] {
  color: var(--fs-text-primary);
}

.footer-time[b-cebaoif3wa] {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.tracker-footer .footer-time[b-cebaoif3wa] {
  color: var(--fs-text-body);
}

.pilot-footer .footer-time[b-cebaoif3wa] {
  color: var(--fs-text-primary);
}

/* ==========================================================================
   Divider
   ========================================================================== */

.comparison-divider[b-cebaoif3wa] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  align-self: center;
}

.divider-text[b-cebaoif3wa] {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fs-text-muted);
  padding: 0.5rem;
}

/* ==========================================================================
   Responsive: Tablet
   ========================================================================== */

@media (max-width: 800px) {
  .comparison-container[b-cebaoif3wa] {
    gap: 0.75rem;
  }

  .comparison-panel[b-cebaoif3wa] {
    padding: 1.25rem;
  }

  .steps-container[b-cebaoif3wa] {
    min-height: 180px;
  }

  .step-text[b-cebaoif3wa] {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   Responsive: Mobile - Stack Vertically, Tighter Spacing
   ========================================================================== */

@media (max-width: 650px) {
  /* Tighten outer wrapper */
  .tracker-comparison[b-cebaoif3wa] {
    padding: 1rem 0.75rem;
  }

  .comparison-title[b-cebaoif3wa] {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }

  .comparison-subtitle[b-cebaoif3wa] {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  /* Stack panels */
  .comparison-container[b-cebaoif3wa] {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* Compact panels — lighter borders at tight spacing */
  .comparison-panel[b-cebaoif3wa] {
    max-width: 100%;
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border-width: 1px;
    box-shadow: none;
  }

  .step-text[b-cebaoif3wa] {
    font-size: 0.8rem;
  }

  .panel-header[b-cebaoif3wa] {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom-width: 1px;
  }

  .panel-header h4[b-cebaoif3wa] {
    font-size: 0.9rem;
  }

  /* Compact steps */
  .steps-container[b-cebaoif3wa] {
    min-height: auto;
    gap: 0.125rem;
  }

  .step-item[b-cebaoif3wa] {
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
  }

  .step-result[b-cebaoif3wa] {
    border-left-width: 2px;
  }

  .step-calculating[b-cebaoif3wa] {
    margin: 0.25rem 0;
  }

  /* Hide arrows on mobile — vertical order is self-evident */
  .step-arrow[b-cebaoif3wa] {
    display: none;
  }

  /* Give the celebration step (Eat. Done!) room to breathe */
  .step-done[b-cebaoif3wa] {
    padding: 0.5rem 0.625rem;
    margin-top: 0.25rem;
  }

  /* Compact footers — time is the star, text is supporting */
  .panel-footer[b-cebaoif3wa] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  .footer-text[b-cebaoif3wa] {
    font-size: 0.75rem;
  }

  /* Make the time callout visually dominant — this is the punchline */
  .footer-time[b-cebaoif3wa] {
    font-size: 1rem;
    display: inline-block;
    margin-top: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
  }

  .tracker-footer .footer-time[b-cebaoif3wa] {
    background: var(--fs-text-secondary-a10);
  }

  .pilot-footer .footer-time[b-cebaoif3wa] {
    background: var(--fs-bg-tertiary);
  }
}

/* ==========================================================================
   Landing screens (#1067, Claude Design "Landing Screens")
   Below 992px the two sides are two screens: the tracker side with the title, then the Portion Pilot side
   with the title again and the VS pill. The screen box and its colour come from LandingScreen.razor.css.
   ========================================================================== */

.screen-title[b-cebaoif3wa] {
  display: none;
}

@media (max-width: 991.98px) {
  .desktop-title[b-cebaoif3wa] {
    display: none;
  }

  .screen-title[b-cebaoif3wa] {
    display: block;
  }

  /* The card holds two screens, so it doesn't fade or slide in as one: the screens stay put and painted (their
     arrows included), and only the panels inside reveal (.comparison-panel.active). */
  .tracker-comparison[b-cebaoif3wa] {
    padding: 0;
    opacity: 1;
    transform: none;
  }

  .comparison-container[b-cebaoif3wa] {
    display: block;
    max-width: none;
  }

  /* The card is as tall as its steps, centred on its screen; it doesn't stretch to fill it. */
  .comparison-panel[b-cebaoif3wa] {
    flex: none;
    width: 100%;
    margin: 0 auto;
  }

  /* VS as a horizontal rule with the pill in the middle, opening the second screen */
  .comparison-divider[b-cebaoif3wa] {
    padding: 0 0 var(--fs-spacing-lg);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .comparison-divider[b-cebaoif3wa]::before,
  .comparison-divider[b-cebaoif3wa]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fs-border-default);
  }

  .divider-text[b-cebaoif3wa] {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fs-text-secondary);
    padding: 0.25rem 0.5rem;
    background: var(--fs-text-secondary-a08);
    border-radius: 4px;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tracker-comparison[b-cebaoif3wa],
  .comparison-panel[b-cebaoif3wa],
  .step-item[b-cebaoif3wa],
  .step-arrow[b-cebaoif3wa],
  .panel-footer[b-cebaoif3wa] {
    transition: none;
  }

  /* The whole card no longer slides in either: a reduced-motion arrow tap lands on the screen, not 20px above
     where it will slide to (#1067). */
  .tracker-comparison[b-cebaoif3wa],
  .comparison-panel.active[b-cebaoif3wa],
  .step-item.visible[b-cebaoif3wa],
  .step-arrow.visible[b-cebaoif3wa],
  .panel-footer.visible[b-cebaoif3wa] {
    opacity: 1;
    transform: none;
  }

  .step-calculating .step-icon[b-cebaoif3wa] {
    animation: none;
  }
}
/* /Components/Onboarding/UserJourney.razor.rz.scp.css */
/* ==========================================================================
   User Journey Section - Clean Phase Cards Design
   Based on SaaS best practices: simple cards, no connecting lines, clear hierarchy
   ========================================================================== */

.journey-section[b-jv06fmk409] {
  padding: 2rem 1rem;
  text-align: center;
}

.journey-title[b-jv06fmk409] {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fs-text-primary);
  margin-bottom: 0.5rem;
}

.journey-subtitle[b-jv06fmk409] {
  font-size: 1rem;
  color: var(--fs-text-secondary);
  margin-bottom: 2rem;
}

/* Phase cards container - horizontal on desktop, stack on mobile */
.journey-phases[b-jv06fmk409] {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

/* Individual phase card */
.phase-card[b-jv06fmk409] {
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-border-default);
  border-radius: 12px;
  padding: 1.25rem;
  flex: 1;
  min-width: 240px;
  max-width: 280px;
  text-align: left;
  box-shadow: none;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.phase-card:hover[b-jv06fmk409] {
  box-shadow: none;
}

/* Phase header with number and info */
.phase-header[b-jv06fmk409] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--fs-bg-tertiary);
}

.phase-number[b-jv06fmk409] {
  width: 36px;
  height: 36px;
  background: var(--fs-bg-inverse);
  color: var(--fs-text-on-inverse);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: none;
}

.phase-info[b-jv06fmk409] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.phase-name[b-jv06fmk409] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-primary);
}

.phase-time[b-jv06fmk409] {
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
}

/* Steps within each phase */
.phase-steps[b-jv06fmk409] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.step-item[b-jv06fmk409] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--fs-text-body);
  line-height: 1.4;
}

.step-bullet[b-jv06fmk409] {
  color: var(--fs-text-primary);
  font-weight: 600;
  flex-shrink: 0;
}

.step-item strong[b-jv06fmk409] {
  color: var(--fs-text-primary);
}

/* ==========================================================================
   Tablet Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .journey-section[b-jv06fmk409] {
    padding: 1.5rem 1rem;
  }

  .journey-title[b-jv06fmk409] {
    font-size: 1.5rem;
  }

  .journey-subtitle[b-jv06fmk409] {
    margin-bottom: 1.5rem;
  }

  .journey-phases[b-jv06fmk409] {
    gap: 0.75rem;
  }

  .phase-card[b-jv06fmk409] {
    min-width: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */
@media (max-width: 576px) {
  .journey-section[b-jv06fmk409] {
    padding: 1.25rem 0.75rem;
  }

  .journey-title[b-jv06fmk409] {
    font-size: 1.5rem;
  }

  .journey-subtitle[b-jv06fmk409] {
    font-size: 1rem;
  }

  .phase-card[b-jv06fmk409] {
    padding: 1rem;
  }

  .phase-number[b-jv06fmk409] {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .phase-name[b-jv06fmk409] {
    font-size: 0.95rem;
  }

  .step-item[b-jv06fmk409] {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .phase-card[b-jv06fmk409] {
    transition: none;
  }

  .phase-card:hover[b-jv06fmk409] {
    transform: none;
  }
}
/* /Components/Pages/Demo/MobileComponentsDemo.razor.rz.scp.css */
/* Mobile Components Demo Page Styles */

.mobile-demo-page[b-y1qk5thrc6] {
  padding-bottom: 80px; /* Space for bottom nav */
  min-height: 100vh;
}

.page-header[b-y1qk5thrc6] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--md-sys-color-surface, var(--fs-bg-primary));
  border-bottom: 1px solid var(--md-sys-color-outline-variant, var(--fs-border-default));
  position: sticky;
  top: 0;
  z-index: 100;
}

.page-header h1[b-y1qk5thrc6] {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--md-sys-color-on-surface, var(--fs-text-primary));
}

.filter-btn[b-y1qk5thrc6] {
  position: relative;
  padding: 8px 16px;
  border: 1px solid var(--md-sys-color-primary, var(--fs-success));
  border-radius: 20px;
  background: transparent;
  color: var(--md-sys-color-primary, var(--fs-success));
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-btn:hover[b-y1qk5thrc6] {
  background: var(--md-sys-color-primary-container, var(--fs-success-light));
}

.filter-btn:active[b-y1qk5thrc6] {
  transform: scale(0.95);
}

.filter-btn .badge[b-y1qk5thrc6] {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--md-sys-color-error, var(--fs-error));
  color: var(--fs-text-on-status);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
}

.demo-section[b-y1qk5thrc6] {
  padding: 16px;
  background: var(--md-sys-color-surface, var(--fs-bg-primary));
}

.demo-section h2[b-y1qk5thrc6] {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--md-sys-color-on-surface, var(--fs-text-primary));
}

.demo-section p[b-y1qk5thrc6] {
  margin: 0;
  font-size: 14px;
}

/* Product Card Styles */
.product-card[b-y1qk5thrc6] {
  display: flex;
  gap: 12px;
  padding: 12px;
}

.product-image-placeholder[b-y1qk5thrc6] {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--fs-primary-border) 0%, var(--fs-primary) 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--fs-text-inverse);
  flex-shrink: 0;
}

.product-info[b-y1qk5thrc6] {
  flex: 1;
  min-width: 0; /* For text truncation */
}

.product-name[b-y1qk5thrc6] {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface, var(--fs-text-primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-category[b-y1qk5thrc6] {
  margin: 0 0 4px 0;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant, var(--fs-text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-description[b-y1qk5thrc6] {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant, var(--fs-text-secondary));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-footer[b-y1qk5thrc6] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.product-price[b-y1qk5thrc6] {
  font-size: 18px;
  font-weight: 700;
  color: var(--md-sys-color-primary, var(--fs-success));
}

.product-rating[b-y1qk5thrc6] {
  font-size: 14px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant, var(--fs-text-secondary));
}

/* Filter Styles */
.filter-group[b-y1qk5thrc6] {
  margin-bottom: 24px;
}

.filter-group h3[b-y1qk5thrc6] {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface, var(--fs-text-primary));
}

.filter-checkbox[b-y1qk5thrc6] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.filter-checkbox:hover[b-y1qk5thrc6] {
  background: var(--md-sys-color-surface-variant, var(--fs-bg-tertiary));
}

.filter-checkbox input[type="checkbox"][b-y1qk5thrc6] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.filter-checkbox span[b-y1qk5thrc6] {
  font-size: 14px;
  color: var(--md-sys-color-on-surface, var(--fs-text-primary));
}

.price-slider[b-y1qk5thrc6] {
  width: 100%;
  margin: 8px 0;
  accent-color: var(--md-sys-color-primary, var(--fs-success));
}

.filter-group p[b-y1qk5thrc6] {
  margin: 8px 0 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-sys-color-primary, var(--fs-success));
}

.rating-filters[b-y1qk5thrc6] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rating-btn[b-y1qk5thrc6] {
  padding: 8px 12px;
  border: 1px solid var(--md-sys-color-outline, var(--fs-border-hover));
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rating-btn:hover[b-y1qk5thrc6] {
  background: var(--md-sys-color-surface-variant, var(--fs-bg-tertiary));
}

.rating-btn.active[b-y1qk5thrc6] {
  background: var(--md-sys-color-primary, var(--fs-success));
  color: var(--fs-text-on-inverse);
  border-color: var(--md-sys-color-primary, var(--fs-success));
}

/* Mobile optimizations */
@media (max-width: 360px) {
  .page-header[b-y1qk5thrc6] {
    padding: 12px;
  }

  .page-header h1[b-y1qk5thrc6] {
    font-size: 18px;
  }

  .filter-btn[b-y1qk5thrc6] {
    padding: 6px 12px;
    font-size: 13px;
  }

  .product-card[b-y1qk5thrc6] {
    padding: 10px;
  }

  .product-image-placeholder[b-y1qk5thrc6] {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .product-name[b-y1qk5thrc6] {
    font-size: 15px;
  }

  .product-price[b-y1qk5thrc6] {
    font-size: 16px;
  }
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
.card[b-bmszhao9x2] {
  border-color: var(--fs-border-default);
  border-radius: var(--fs-radius-lg);
}

.card-title[b-bmszhao9x2] {
  color: var(--fs-text-primary);
}

.form-control.custom-input[b-bmszhao9x2] {
  width: 100%;
  padding: 0.375rem 0.75rem;
  border-color: var(--fs-border-default);
}

.form-control.custom-input:focus[b-bmszhao9x2] {
  box-shadow: none;
  border-color: var(--fs-primary-text);
}

.btn-primary[b-bmszhao9x2] {
  background-color: var(--fs-primary);
  border-color: var(--fs-primary);
}

.btn-primary:hover[b-bmszhao9x2] {
  background-color: var(--fs-primary-hover);
  border-color: var(--fs-primary-hover);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Below 992px the landing page is a deck of full-width screens (#1067): the card around the page (side padding,
   border, rounded corners, shadow and bottom padding) would frame them with white strips and edges. The utilities
   it strips are Bootstrap's !important ones, hence !important here. */
@media (max-width: 991.98px) {
  .landing-host[b-8bd6wjeoxk] {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}
/* /Components/Pages/Legal/LegalDocument.razor.rz.scp.css */
/* A 16px gutter on a 360px phone, and a white sheet on the dew page like the other static pages. */
.legal-page[b-t2uuvsidpj] {
    max-width: 44rem;
    margin-inline: auto;
    padding-inline: var(--fs-spacing-lg);
}

.legal-document[b-t2uuvsidpj] {
    background: var(--fs-bg-primary);
    border-radius: var(--fs-radius-lg);
    padding: var(--fs-spacing-xl);
    color: var(--fs-text-body);
}

.legal-document h1[b-t2uuvsidpj] {
    color: var(--fs-text-primary);
    margin-bottom: var(--fs-spacing-sm);
}

.legal-updated[b-t2uuvsidpj] {
    color: var(--fs-text-muted);
    font-size: var(--fs-font-size-sm);
    margin-bottom: var(--fs-spacing-xl);
}

.legal-document[b-t2uuvsidpj]  h2 {
    color: var(--fs-text-primary);
    font-size: var(--fs-font-size-xl);
    margin-top: var(--fs-spacing-xl);
    margin-bottom: var(--fs-spacing-sm);
}

.legal-document[b-t2uuvsidpj]  li {
    margin-bottom: var(--fs-spacing-sm);
}

/* Prose links stay ink-grey and underlined; Beet is for actions. */
.legal-document[b-t2uuvsidpj]  a {
    color: var(--fs-text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-document[b-t2uuvsidpj]  a:hover {
    color: var(--fs-text-primary);
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Modern Minimalist Login Design */
.login-container[b-pwyxsh4my2] {
  min-height: calc(100vh - 60px); /* Adjust for existing header */
  background: var(--fs-bg-page);
  padding-top: 2rem;
}

/* Main Content */
.auth-main[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 2rem 1rem;
}

.auth-card[b-pwyxsh4my2] {
  background: var(--fs-bg-primary);
  border-radius: 16px;
  box-shadow: none;
  padding: 3rem;
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--fs-shade-a05);
}

.auth-card-header[b-pwyxsh4my2] {
  text-align: center;
  margin-bottom: 2.5rem;
}

.auth-title[b-pwyxsh4my2] {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--fs-text-primary);
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.auth-subtitle[b-pwyxsh4my2] {
  font-size: 1rem;
  color: var(--fs-text-secondary);
  margin: 0;
  font-weight: 400;
}

/* Modern Alert Styles */
/* Above the sign-in result alert, after an ended session (#1054). */
.session-ended-notice[b-pwyxsh4my2] {
  margin-bottom: var(--fs-spacing-md);
}

.alert-modern[b-pwyxsh4my2] {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  border: none;
  font-weight: 500;
}

.alert-modern.alert-success[b-pwyxsh4my2] {
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
  color: var(--fs-success-text);
  border-left: 4px solid var(--fs-success);
}

.alert-modern.alert-danger[b-pwyxsh4my2] {
  background: linear-gradient(135deg, var(--fs-error-light) 0%, var(--fs-error-light) 100%);
  color: var(--fs-error);
  border-left: 4px solid var(--fs-error);
}

.alert-modern.alert-info[b-pwyxsh4my2] {
  background: linear-gradient(135deg, var(--fs-bg-selected) 0%, var(--fs-bg-selected) 100%);
  color: var(--fs-text-primary);
  border-left: 4px solid var(--fs-border-default);
}

/* Form Styles */
.auth-form[b-pwyxsh4my2] {
  margin-bottom: 2rem;
}

.form-group[b-pwyxsh4my2] {
  margin-bottom: 1.5rem;
}

.form-label[b-pwyxsh4my2] {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fs-text-body);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

.input-wrapper[b-pwyxsh4my2] {
  position: relative;
}

.form-input[b-pwyxsh4my2] {
  width: 100%;
  padding: 0.875rem 1rem;
  padding-left: 3rem;
  border: 1.5px solid var(--fs-border-control); /* 3:1 field edge (#1099) */
  border-radius: 12px;
  font-size: 1rem;
  background: var(--fs-bg-secondary);
  transition: all 0.2s ease;
  color: var(--fs-text-primary);
}

.form-input[b-pwyxsh4my2]::placeholder {
  color: var(--fs-text-muted);
}

.form-input:focus[b-pwyxsh4my2] {
  outline: none;
  border-color: var(--fs-primary-text);
  background: var(--fs-bg-primary);
  box-shadow: 0 0 0 3px var(--fs-primary-a08);
}

.input-icon[b-pwyxsh4my2] {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fs-text-muted);
  pointer-events: none;
  z-index: 2;
}

.form-input:focus + .input-icon[b-pwyxsh4my2] {
  color: var(--fs-primary-text);
}

.password-toggle[b-pwyxsh4my2] {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--fs-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 2;
}

.password-toggle:hover[b-pwyxsh4my2] {
  color: var(--fs-text-secondary);
}

/* Form Options */
.form-options[b-pwyxsh4my2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.checkbox-wrapper[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}

.checkbox-custom[b-pwyxsh4my2] {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--fs-border-control);
  border-radius: 4px;
  background: var(--fs-bg-primary);
  position: relative;
  transition: all 0.2s ease;
}

.checkbox-input:checked + .checkbox-custom[b-pwyxsh4my2] {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
}

.checkbox-input:checked + .checkbox-custom[b-pwyxsh4my2]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--fs-text-inverse);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox-label[b-pwyxsh4my2] {
  font-size: 0.875rem;
  color: var(--fs-text-secondary);
  user-select: none;
}

.forgot-link[b-pwyxsh4my2] {
  font-size: 0.875rem;
  color: var(--fs-primary-text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.forgot-link:hover[b-pwyxsh4my2] {
  color: var(--fs-primary-text-hover);
  text-decoration: none;
}

/* Primary Button */
.btn-primary[b-pwyxsh4my2] {
  width: 100%;
  background: var(--fs-primary);
  border: none;
  border-radius: var(--fs-radius-pill);
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-inverse);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
}

.btn-primary:hover:not(:disabled)[b-pwyxsh4my2] {
  background: var(--fs-primary-hover);
  box-shadow: none;
}

.btn-primary:active:not(:disabled)[b-pwyxsh4my2] {
  transform: translateY(0);
}

.btn-primary:disabled[b-pwyxsh4my2] {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-loading[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.spinner[b-pwyxsh4my2] {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid var(--fs-text-inverse);
  border-radius: 50%;
  animation: spin-b-pwyxsh4my2 1s linear infinite;
}

@keyframes spin-b-pwyxsh4my2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Auth Divider */
.auth-divider[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  margin: 2rem 0 1.5rem;
  text-align: center;
  color: var(--fs-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.auth-divider[b-pwyxsh4my2]::before,
.auth-divider[b-pwyxsh4my2]::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fs-border-default);
}

.auth-divider span[b-pwyxsh4my2] {
  padding: 0 1rem;
  background: var(--fs-bg-primary);
  position: relative;
  z-index: 1;
}

/* Ghost Button */
.btn-ghost[b-pwyxsh4my2] {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--fs-border-default);
  border-radius: 12px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  margin-bottom: 1rem;
}

.btn-ghost:hover[b-pwyxsh4my2] {
  background: var(--fs-bg-hover);
  border-color: var(--fs-border-hover);
  color: var(--fs-text-body);
  box-shadow: none;
}

.btn-ghost:active[b-pwyxsh4my2] {
  transform: translateY(0);
  background: var(--fs-bg-tertiary);
}

.btn-ghost svg[b-pwyxsh4my2] {
  transition: all 0.2s ease;
}

.btn-ghost:hover svg[b-pwyxsh4my2] {
  stroke: var(--fs-text-body);
}

/* Footer */
.auth-footer[b-pwyxsh4my2] {
  text-align: center;
  margin-top: 2rem;
}

.signup-prompt[b-pwyxsh4my2] {
  font-size: 0.875rem;
  color: var(--fs-text-secondary);
  margin: 0;
}

.signup-link[b-pwyxsh4my2] {
  color: var(--fs-primary-text);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.signup-link:hover[b-pwyxsh4my2] {
  color: var(--fs-primary-text-hover);
  text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .auth-card[b-pwyxsh4my2] {
    padding: 2rem 1.5rem;
    margin: 1rem;
    border-radius: var(--fs-radius-lg);
  }

  .auth-title[b-pwyxsh4my2] {
    font-size: 1.5rem;
  }

  .auth-nav[b-pwyxsh4my2] {
    gap: 1rem;
  }

  .auth-link[b-pwyxsh4my2] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .form-options[b-pwyxsh4my2] {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}

@media (max-width: 320px) {
  .auth-card[b-pwyxsh4my2] {
    padding: 1.5rem 1rem;
  }

  .brand-text[b-pwyxsh4my2] {
    font-size: 1.25rem;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *[b-pwyxsh4my2] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for better keyboard navigation */
.btn-primary:focus-visible[b-pwyxsh4my2],
.btn-ghost:focus-visible[b-pwyxsh4my2],
.forgot-link:focus-visible[b-pwyxsh4my2],
.signup-link:focus-visible[b-pwyxsh4my2],
.auth-link:focus-visible[b-pwyxsh4my2] {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 2px;
}
/* /Components/Pages/Logout.razor.rz.scp.css */
/* Claude Design "Sign-out Redesign" (#1162): one white block on the dew page. */
.sign-out-page[b-vxzdyy1e68] {
  /* Top-aligned, not centred: the three cards differ in height, and a centred card jumps between them. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--fs-spacing-3xl) var(--fs-spacing-lg);
}

.sign-out-card[b-vxzdyy1e68] {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-spacing-lg);
  padding: var(--fs-spacing-3xl) var(--fs-spacing-2xl);
  background: var(--fs-bg-primary);
  /* The shared inset hairline (.pp-outline): white on dew is too faint without an edge. */
  box-shadow: inset 0 0 0 1px var(--fs-border-default);
  border-radius: var(--fs-radius-lg);
  text-align: center;
  font-family: var(--fs-font-family);
  color: var(--fs-text-primary);
}

.sign-out-card-roomy[b-vxzdyy1e68] {
  gap: var(--fs-spacing-2xl);
  padding: var(--fs-spacing-3xl) var(--fs-spacing-2xl) var(--fs-spacing-2xl);
}

.sign-out-spinner[b-vxzdyy1e68] {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 3px solid var(--fs-border-default);
  border-top-color: var(--fs-text-primary);
  border-radius: 50%;
  animation: sign-out-spin-b-vxzdyy1e68 0.9s linear infinite;
}

@keyframes sign-out-spin-b-vxzdyy1e68 {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sign-out-spinner[b-vxzdyy1e68] {
    animation: none;
  }
}

.sign-out-badge[b-vxzdyy1e68] {
  display: block;
  width: 88px;
  height: 88px;
}

.sign-out-error-icon[b-vxzdyy1e68] {
  display: block;
  color: var(--fs-error);
}

.sign-out-text[b-vxzdyy1e68] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-xs);
}

.sign-out-text-roomy[b-vxzdyy1e68] {
  gap: var(--fs-spacing-sm);
}

/* Not the global h1 accent: that token becomes Beet, which is kept for actions. */
.sign-out-title[b-vxzdyy1e68] {
  margin: 0;
  font-size: var(--fs-font-size-xl);
  font-weight: var(--fs-font-weight-semibold);
  line-height: 1.3;
  color: var(--fs-text-primary);
}

.sign-out-title-large[b-vxzdyy1e68] {
  font-size: var(--fs-font-size-2xl);
  font-weight: var(--fs-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.sign-out-title-error[b-vxzdyy1e68] {
  color: var(--fs-error);
}

.sign-out-hint[b-vxzdyy1e68] {
  margin: 0;
  font-size: var(--fs-font-size-sm);
  line-height: 1.5;
  color: var(--fs-text-secondary);
}

.sign-out-body[b-vxzdyy1e68] {
  margin: 0;
  font-size: var(--fs-font-size-base);
  line-height: 1.5;
  color: var(--fs-text-secondary);
  text-wrap: pretty;
}

.sign-out-actions[b-vxzdyy1e68] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-spacing-lg);
}

.sign-out-primary[b-vxzdyy1e68] {
  box-sizing: border-box;
  width: 100%;
  height: var(--fs-mobile-tap-target);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  font-family: inherit;
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.sign-out-primary:hover[b-vxzdyy1e68] {
  background: var(--fs-primary-hover);
  color: var(--fs-text-inverse);
}

.sign-out-primary:active[b-vxzdyy1e68] {
  background: var(--fs-primary-active);
}

.sign-out-secondary[b-vxzdyy1e68] {
  min-height: var(--fs-mobile-tap-target-sm);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--fs-spacing-sm);
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-primary-text);
  text-decoration: none;
}

.sign-out-secondary:hover[b-vxzdyy1e68] {
  color: var(--fs-primary-text-hover);
  text-decoration: underline;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* Not the global h1 accent: that token becomes Beet, which is kept for actions. */
.not-found-title[b-3h7q2ckyd7] {
    color: var(--fs-text-primary);
}

.not-found-hint[b-3h7q2ckyd7] {
    color: var(--fs-text-secondary);
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.input-group-text[b-tc4spw4f0n] {
  background-color: transparent;
  border-right: none;
}
.input-group .form-control[b-tc4spw4f0n] {
  border-left: none;
}
.input-group .btn[b-tc4spw4f0n] {
  border-left: none;
}
.card[b-tc4spw4f0n] {
  border: none;
  box-shadow: none;
}
.card-title[b-tc4spw4f0n] {
  color: var(--fs-text-primary);
}
.btn-primary[b-tc4spw4f0n] {
  background-color: var(--fs-primary);
  border-color: var(--fs-primary);
}
.btn-primary:hover[b-tc4spw4f0n] {
  background-color: var(--fs-primary-hover);
  border-color: var(--fs-primary-hover);
}
/* /Components/Pages/SignUp.razor.rz.scp.css */
/* Modern Minimalist SignUp Design */
.signup-container[b-wjadusrl0v] {
  min-height: calc(100vh - 60px); /* Adjust for existing header */
  background: var(--fs-bg-page);
  padding-top: 2rem;
}

/* Main Content */
.auth-main[b-wjadusrl0v] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 2rem 1rem;
}

.auth-card[b-wjadusrl0v] {
  background: var(--fs-bg-primary);
  border-radius: 16px;
  box-shadow: none;
  padding: 3rem;
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--fs-shade-a05);
}

.auth-card-header[b-wjadusrl0v] {
  text-align: center;
  margin-bottom: 2.5rem;
}

.auth-title[b-wjadusrl0v] {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--fs-text-primary);
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.auth-subtitle[b-wjadusrl0v] {
  font-size: 1rem;
  color: var(--fs-text-secondary);
  margin: 0;
  font-weight: 400;
}

/* Modern Alert Styles */
.alert-modern[b-wjadusrl0v] {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  border: none;
  font-weight: 500;
}

.alert-modern.alert-success[b-wjadusrl0v] {
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
  color: var(--fs-success-text);
  border-left: 4px solid var(--fs-success);
}

.alert-modern.alert-danger[b-wjadusrl0v] {
  background: linear-gradient(135deg, var(--fs-error-light) 0%, var(--fs-error-light) 100%);
  color: var(--fs-error);
  border-left: 4px solid var(--fs-error);
}

.alert-modern.alert-warning[b-wjadusrl0v] {
  background: linear-gradient(135deg, var(--fs-warning-light) 0%, var(--fs-warning-light) 100%);
  color: var(--fs-warning);
  border-left: 4px solid var(--fs-warning);
}

.alert-modern.alert-info[b-wjadusrl0v] {
  background: linear-gradient(135deg, var(--fs-bg-selected) 0%, var(--fs-bg-selected) 100%);
  color: var(--fs-text-primary);
  border-left: 4px solid var(--fs-border-default);
}

/* Form Styles */
.auth-form[b-wjadusrl0v] {
  margin-bottom: 2rem;
}

.form-group[b-wjadusrl0v] {
  margin-bottom: 1.5rem;
}

.form-label[b-wjadusrl0v] {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fs-text-body);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

.input-wrapper[b-wjadusrl0v] {
  position: relative;
}

.form-input[b-wjadusrl0v] {
  width: 100%;
  padding: 0.875rem 1rem;
  padding-left: 3rem;
  border: 1.5px solid var(--fs-border-control); /* 3:1 field edge (#1099) */
  border-radius: 12px;
  font-size: 1rem;
  background: var(--fs-bg-secondary);
  transition: all 0.2s ease;
  color: var(--fs-text-primary);
}

.form-input.password-with-generator[b-wjadusrl0v] {
  padding-right: 5.5rem; /* Extra space for both generator and toggle buttons */
}

.form-input[b-wjadusrl0v]::placeholder {
  color: var(--fs-text-muted);
}

.form-input:focus[b-wjadusrl0v] {
  outline: none;
  border-color: var(--fs-primary-text);
  background: var(--fs-bg-primary);
  box-shadow: 0 0 0 3px var(--fs-primary-a08);
}

.input-icon[b-wjadusrl0v] {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fs-text-muted);
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-input:focus + .input-icon[b-wjadusrl0v] {
  color: var(--fs-primary-text);
}

/* Password Generator Button */
.password-generator[b-wjadusrl0v] {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--fs-text-muted);
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}

.password-generator:hover[b-wjadusrl0v] {
  color: var(--fs-primary-text);
  background: var(--fs-primary-a10);
}

.password-generator:active[b-wjadusrl0v] {
  transform: translateY(-50%) scale(0.95);
}

/* Password Toggle Button */
.password-toggle[b-wjadusrl0v] {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--fs-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 2;
}

.password-toggle:hover[b-wjadusrl0v] {
  color: var(--fs-text-secondary);
}

/* Form Options */
.form-options[b-wjadusrl0v] {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.checkbox-wrapper[b-wjadusrl0v] {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  gap: 0.5rem;
  line-height: 1.5;
}

.checkbox-custom[b-wjadusrl0v] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 1.5px solid var(--fs-border-control);
  border-radius: 4px;
  background: var(--fs-bg-primary);
  position: relative;
  transition: all 0.2s ease;
  margin-top: 2px;
}

.checkbox-input:checked + .checkbox-custom[b-wjadusrl0v] {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
}

.checkbox-input:checked + .checkbox-custom[b-wjadusrl0v]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--fs-text-inverse);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox-label[b-wjadusrl0v] {
  font-size: 0.875rem;
  color: var(--fs-text-secondary);
  user-select: none;
  line-height: 1.5;
}

.checkbox-label .signup-link[b-wjadusrl0v] {
  font-size: 0.875rem;
}

/* Primary Button */
.btn-primary[b-wjadusrl0v] {
  width: 100%;
  background: var(--fs-primary);
  border: none;
  border-radius: var(--fs-radius-pill);
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-inverse);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
}

.btn-primary:hover:not(:disabled)[b-wjadusrl0v] {
  background: var(--fs-primary-hover);
  box-shadow: none;
}

.btn-primary:active:not(:disabled)[b-wjadusrl0v] {
  transform: translateY(0);
}

.btn-primary:disabled[b-wjadusrl0v] {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-loading[b-wjadusrl0v] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.spinner[b-wjadusrl0v] {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid var(--fs-text-inverse);
  border-radius: 50%;
  animation: spin-b-wjadusrl0v 1s linear infinite;
}

@keyframes spin-b-wjadusrl0v {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Validation Summary */
.validation-summary[b-wjadusrl0v] {
  text-align: center;
  margin-top: 1rem;
}

/* Footer */
.auth-footer[b-wjadusrl0v] {
  text-align: center;
  margin-top: 2rem;
}

.signup-prompt[b-wjadusrl0v] {
  font-size: 0.875rem;
  color: var(--fs-text-secondary);
  margin: 0;
}

.signup-link[b-wjadusrl0v] {
  color: var(--fs-primary-text);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.signup-link:hover[b-wjadusrl0v] {
  color: var(--fs-primary-text-hover);
  text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .auth-card[b-wjadusrl0v] {
    padding: 2rem 1.5rem;
    margin: 1rem;
    border-radius: var(--fs-radius-lg);
  }

  .auth-title[b-wjadusrl0v] {
    font-size: 1.5rem;
  }

  .auth-subtitle[b-wjadusrl0v] {
    font-size: 0.875rem;
  }

  .form-input.password-with-generator[b-wjadusrl0v] {
    padding-right: 4.5rem; /* Reduced space for mobile */
  }

  .password-generator[b-wjadusrl0v] {
    right: 2.5rem;
    padding: 0.25rem;
  }

  .password-toggle[b-wjadusrl0v] {
    padding: 0.125rem;
  }
}

@media (max-width: 320px) {
  .auth-card[b-wjadusrl0v] {
    padding: 1.5rem 1rem;
  }

  .auth-title[b-wjadusrl0v] {
    font-size: 1.375rem;
  }

  .form-input[b-wjadusrl0v] {
    font-size: 0.9375rem;
  }

  .form-input.password-with-generator[b-wjadusrl0v] {
    padding-right: 4rem;
  }

  .password-generator[b-wjadusrl0v] {
    right: 2.25rem;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *[b-wjadusrl0v] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for better keyboard navigation */
.btn-primary:focus-visible[b-wjadusrl0v],
.password-generator:focus-visible[b-wjadusrl0v],
.password-toggle:focus-visible[b-wjadusrl0v],
.signup-link:focus-visible[b-wjadusrl0v] {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 2px;
}

.form-input:focus-visible[b-wjadusrl0v] {
  outline: none; /* We use box-shadow instead for inputs */
}

/* Focus target for refusals; the alert inside carries the visible styling. */
.signup-alert-region:focus[b-wjadusrl0v] {
  outline: none;
}
/* /Components/PortionRevealMoment/PortionRevealMoment.razor.rz.scp.css */
/* PortionRevealMoment - The "Aha Moment" Component */

.portion-reveal-container[b-722e3d2588] {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--fs-bg-primary);
  border-radius: 24px;
  box-shadow: none;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.portion-reveal-container.revealed[b-722e3d2588] {
  opacity: 1;
  transform: translateY(0);
}

/* FALLBACK: If animation doesn't trigger after 2s, show content anyway */
/* This prevents blank page if JS fails or animation sequence has issues */
@keyframes fallback-reveal-b-722e3d2588 {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.portion-reveal-container:not(.loading):not(.revealed)[b-722e3d2588] {
  animation: fallback-reveal-b-722e3d2588 0.4s ease 2s forwards;
}

/* Header */
.reveal-header[b-722e3d2588] {
  text-align: center;
  margin-bottom: 2rem;
}

.reveal-title[b-722e3d2588] {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fs-text-primary);
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--fs-success) 0%, var(--fs-success) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.perfect-match-badge[b-722e3d2588] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, var(--fs-success) 0%, var(--fs-success) 100%);
  border-radius: 50px;
  color: var(--fs-text-on-inverse);
  font-weight: 600;
  box-shadow: none;
}

.badge-text[b-722e3d2588] {
  font-size: 0.9rem;
}

/* Animated Checkmark */
.animated-checkmark[b-722e3d2588] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark-svg[b-722e3d2588] {
  width: 100%;
  height: 100%;
}

.checkmark-circle[b-722e3d2588] {
  stroke: var(--fs-text-on-inverse-a50); /* the ring sits on the success (ink) badge */
  stroke-width: 2;
  animation: circle-fill-b-722e3d2588 0.6s ease-out forwards;
}

.checkmark-check[b-722e3d2588] {
  stroke: var(--fs-text-on-inverse);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: check-draw-b-722e3d2588 0.4s ease-out 0.4s forwards;
}

@keyframes circle-fill-b-722e3d2588 {
  0% {
    stroke-dasharray: 0, 157;
  }
  100% {
    stroke-dasharray: 157, 157;
  }
}

@keyframes check-draw-b-722e3d2588 {
  100% {
    stroke-dashoffset: 0;
  }
}

/* Portions List */
.portions-list[b-722e3d2588] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.portion-item[b-722e3d2588] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--fs-bg-primary);
  border-radius: 16px;
  box-shadow: none;
  border: 1px solid var(--fs-shade-a04);
  opacity: 0;
  transform: translateX(-20px);
  animation: slide-in-b-722e3d2588 0.4s ease forwards;
}

.stagger-item[b-722e3d2588] {
  animation-fill-mode: both;
}

@keyframes slide-in-b-722e3d2588 {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Food Icons */
.portion-icon[b-722e3d2588] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.portion-icon.icon-poultry[b-722e3d2588] {
  background: var(--fs-bg-tertiary);
}
.portion-icon.icon-poultry[b-722e3d2588]::before {
  content: "\1F357";
}

.portion-icon.icon-meat[b-722e3d2588] {
  background: linear-gradient(135deg, var(--fs-error-light) 0%, var(--fs-error-light) 100%);
}
.portion-icon.icon-meat[b-722e3d2588]::before {
  content: "\1F969";
}

.portion-icon.icon-fish[b-722e3d2588] {
  background: linear-gradient(135deg, var(--fs-primary-border) 0%, var(--fs-primary-border) 100%);
}
.portion-icon.icon-fish[b-722e3d2588]::before {
  content: "\1F41F";
}

.portion-icon.icon-grain[b-722e3d2588] {
  background: linear-gradient(135deg, var(--fs-warning-light) 0%, var(--fs-warning-light) 100%);
}
.portion-icon.icon-grain[b-722e3d2588]::before {
  content: "\1F35A";
}

.portion-icon.icon-egg[b-722e3d2588] {
  background: linear-gradient(135deg, var(--fs-warning-light) 0%, var(--fs-warning-light) 100%);
}
.portion-icon.icon-egg[b-722e3d2588]::before {
  content: "\1F95A";
}

.portion-icon.icon-dairy[b-722e3d2588] {
  background: var(--fs-bg-tertiary);
}
.portion-icon.icon-dairy[b-722e3d2588]::before {
  content: "\1F95B";
}

.portion-icon.icon-vegetable[b-722e3d2588] {
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
}
.portion-icon.icon-vegetable[b-722e3d2588]::before {
  content: "\1F966";
}

.portion-icon.icon-fruit[b-722e3d2588] {
  background: linear-gradient(135deg, var(--fs-error-light) 0%, var(--fs-error-light) 100%);
}
.portion-icon.icon-fruit[b-722e3d2588]::before {
  content: "\1F34E";
}

.portion-icon.icon-nut[b-722e3d2588] {
  background: var(--fs-bg-tertiary);
}
.portion-icon.icon-nut[b-722e3d2588]::before {
  content: "\1F95C";
}

.portion-icon.icon-default[b-722e3d2588] {
  background: var(--fs-bg-tertiary);
}
.portion-icon.icon-default[b-722e3d2588]::before {
  content: "\1F37D\FE0F";
}

/* Portion Details */
.portion-details[b-722e3d2588] {
  flex: 1;
  min-width: 0;
}

.portion-name[b-722e3d2588] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Portion Amount */
.portion-amount[b-722e3d2588] {
  text-align: right;
}

.amount-value[b-722e3d2588] {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fs-success);
  background: var(--fs-success-a10);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
}

/* Summary Section */
.reveal-summary[b-722e3d2588] {
  text-align: center;
  padding: 1.5rem;
  background: var(--fs-success-a05);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.reveal-summary.visible[b-722e3d2588] {
  opacity: 1;
  transform: translateY(0);
}

.macro-summary[b-722e3d2588] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.macro-item[b-722e3d2588] {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.macro-value[b-722e3d2588] {
  font-size: 1.1rem;
  font-weight: 700;
}

.macro-label[b-722e3d2588] {
  font-size: 0.8rem;
  color: var(--fs-text-secondary);
}

.macro-item.calories .macro-value[b-722e3d2588] {
  color: var(--fs-error);
}
.macro-item.protein .macro-value[b-722e3d2588] {
  color: var(--fs-macro-protein-text);
}
.macro-item.carbs .macro-value[b-722e3d2588] {
  color: var(--fs-primary-text);
}
.macro-item.fat .macro-value[b-722e3d2588] {
  color: var(--fs-success);
}

.macro-divider[b-722e3d2588] {
  color: var(--fs-border-hover);
  font-weight: 300;
}

.summary-message[b-722e3d2588] {
  font-size: 0.95rem;
  color: var(--fs-success);
  font-weight: 500;
  margin: 0;
}

/* Action Buttons */
.reveal-actions[b-722e3d2588] {
  display: flex;
  gap: 1rem;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.reveal-actions.visible[b-722e3d2588] {
  opacity: 1;
  transform: translateY(0);
}

.btn-see-options[b-722e3d2588] {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 12px;
  border: 2px solid var(--fs-border-default);
  background: var(--fs-bg-primary);
  color: var(--fs-text-body);
  transition: all 0.2s ease;
}

.btn-see-options:hover[b-722e3d2588] {
  border-color: var(--fs-success);
  color: var(--fs-success);
  background: var(--fs-success-a05);
}

.btn-done[b-722e3d2588] {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--fs-success) 0%, var(--fs-success) 100%);
  border: none;
  color: var(--fs-text-on-inverse);
  box-shadow: none;
  transition: all 0.2s ease;
}

.btn-done:hover[b-722e3d2588] {
  box-shadow: none;
}

/* Error/No Meal State */
.no-meal-state[b-722e3d2588] {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--fs-text-secondary);
}

.no-meal-state .error-icon[b-722e3d2588] {
  font-size: 3rem;
  color: var(--fs-text-secondary);
  margin-bottom: 1rem;
}

.no-meal-state .error-title[b-722e3d2588] {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  margin-bottom: 0.75rem;
}

.no-meal-state .error-message[b-722e3d2588] {
  font-size: 0.95rem;
  color: var(--fs-text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.no-meal-state .btn-primary[b-722e3d2588] {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--fs-success) 0%, var(--fs-success) 100%);
  border: none;
  color: var(--fs-text-on-inverse);
  box-shadow: none;
  transition: all 0.2s ease;
}

.no-meal-state .btn-primary:hover[b-722e3d2588] {
  box-shadow: none;
}

/* Loading State */
.portion-reveal-container.loading[b-722e3d2588] {
  opacity: 1;
  transform: translateY(0);
}

.loading-state[b-722e3d2588] {
  text-align: center;
  padding: 3rem 2rem;
}

.loading-animation[b-722e3d2588] {
  margin-bottom: 1.5rem;
}

.food-icons-spinner[b-722e3d2588] {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.spinner-icon[b-722e3d2588] {
  font-size: 2.5rem;
  animation: bounce-rotate-b-722e3d2588 1.5s ease-in-out infinite;
}

.spinner-icon:nth-child(1)[b-722e3d2588] {
  animation-delay: 0s;
}
.spinner-icon:nth-child(2)[b-722e3d2588] {
  animation-delay: 0.2s;
}
.spinner-icon:nth-child(3)[b-722e3d2588] {
  animation-delay: 0.4s;
}

@keyframes bounce-rotate-b-722e3d2588 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(-10deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(10deg);
  }
}

.loading-title[b-722e3d2588] {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  margin-bottom: 0.5rem;
}

.loading-subtitle[b-722e3d2588] {
  font-size: 0.95rem;
  color: var(--fs-text-secondary);
  margin: 0;
}

/* Responsive Design */
@media (max-width: 576px) {
  .portion-reveal-container[b-722e3d2588] {
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 20px;
  }

  .reveal-title[b-722e3d2588] {
    font-size: 1.5rem;
  }

  .portion-item[b-722e3d2588] {
    padding: 0.875rem 1rem;
  }

  .portion-icon[b-722e3d2588] {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .portion-name[b-722e3d2588] {
    font-size: 0.9rem;
  }

  .amount-value[b-722e3d2588] {
    font-size: 1rem;
    padding: 0.3rem 0.6rem;
  }

  .reveal-actions[b-722e3d2588] {
    flex-direction: column;
  }

  .btn-see-options[b-722e3d2588],
  .btn-done[b-722e3d2588] {
    width: 100%;
  }

  .macro-summary[b-722e3d2588] {
    gap: 0.25rem;
  }

  .macro-value[b-722e3d2588] {
    font-size: 1rem;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .portion-reveal-container[b-722e3d2588],
  .portion-item[b-722e3d2588],
  .reveal-summary[b-722e3d2588],
  .reveal-actions[b-722e3d2588] {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .checkmark-circle[b-722e3d2588],
  .checkmark-check[b-722e3d2588] {
    animation: none;
    stroke-dashoffset: 0;
    stroke-dasharray: 157, 157;
  }
}
/* /Components/Shared/Comparison/ComparisonPageLayout.razor.rz.scp.css */
/* Comparison Page Layout Styles */

.comparison-page[b-p0dii8uo09] {
  --section-padding: 4rem 0;
  --container-max-width: 1200px;
  min-height: 100vh;
}

/* Section base styles */
[b-p0dii8uo09] section {
  padding: var(--section-padding);
}

[b-p0dii8uo09] .container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .comparison-page[b-p0dii8uo09] {
    --section-padding: 2.5rem 0;
  }

  [b-p0dii8uo09] .container {
    padding: 0 1rem;
  }
}

/* Utility classes for comparison pages */
[b-p0dii8uo09] .text-center {
  text-align: center;
}

[b-p0dii8uo09] .text-primary {
  color: var(--primary-color, var(--fs-primary-text));
}

[b-p0dii8uo09] .bg-light {
  background-color: var(--bg-light, var(--fs-bg-hover));
}

[b-p0dii8uo09] .bg-primary {
  background-color: var(--primary-color, var(--fs-primary));
}

[b-p0dii8uo09] .text-white {
  color: var(--fs-text-inverse);
}

/* Animations */
[b-p0dii8uo09] .fade-in {
  animation: fadeIn-b-p0dii8uo09 0.5s ease-out;
}

@keyframes fadeIn-b-p0dii8uo09 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* /Components/Shared/GuestDaysSheet.razor.rz.scp.css */
/* The guest-days sheet (#1027), to the "Site design" session's spec. Tokens only (#1028). */
.gd-intro[b-e0m5c5j9k5] { margin: 0 0 12px; font-size: 14px; color: var(--fs-text-secondary); }
.gd-list[b-e0m5c5j9k5] { list-style: none; margin: 0; padding: 0; }
.gd-row[b-e0m5c5j9k5] { padding: 4px 0; border-bottom: 1px solid var(--fs-border-default); }
.gd-row:last-child[b-e0m5c5j9k5] { border-bottom: none; }
.gd-line[b-e0m5c5j9k5] { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; cursor: pointer; }
.gd-row--clash .gd-line[b-e0m5c5j9k5] { cursor: default; }
/* Under .gd-line: the sheet gives every input a 44px min-height, which outranks a single class. */
.gd-line .gd-check[b-e0m5c5j9k5] { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--fs-primary); }
.gd-date[b-e0m5c5j9k5] { font-weight: 600; color: var(--fs-text-primary); white-space: nowrap; }
.gd-meta[b-e0m5c5j9k5] { margin-left: auto; font-size: 14px; color: var(--fs-text-secondary); white-space: nowrap; }
/* The design system's warning notice (HeadsUpNotice); only its placement is ours. */
.gd-headsup[b-e0m5c5j9k5] { margin: 0 0 8px; font-size: 13px; }
.gd-choice[b-e0m5c5j9k5] { display: flex; gap: 4px; padding: 4px; margin-bottom: 8px; border-radius: var(--fs-radius-pill); background: var(--fs-bg-secondary); }
/* Under .gd-choice and .gd-actions: the sheet's own 16px button text outranks a single class. */
.gd-choice .gd-opt[b-e0m5c5j9k5] { flex: 1; min-height: 44px; border: none; border-radius: var(--fs-radius-pill); background: none; color: var(--fs-text-secondary); font: inherit; font-size: 14px; font-weight: 600; }
.gd-opt[aria-checked="true"][b-e0m5c5j9k5] { background: var(--fs-bg-primary); color: var(--fs-text-primary); box-shadow: inset 0 0 0 1px var(--fs-text-primary); }
/* gd-btn opts out of mobile-dropdown-fix.css, which repaints every sheet button white. */
.gd-actions[b-e0m5c5j9k5] { width: 100%; }
.gd-failed[b-e0m5c5j9k5] { margin: 0 0 8px; font-size: 14px; color: var(--fs-text-primary); text-align: center; }
/* Under .gd-actions to outrank the sheet's own 44px button height. */
.gd-actions .gd-primary[b-e0m5c5j9k5] { width: 100%; min-height: var(--fs-tap-primary); border: none; border-radius: var(--fs-radius-pill); background: var(--fs-primary); color: var(--fs-text-inverse); font: inherit; font-weight: 600; }
.gd-btn[aria-disabled="true"][b-e0m5c5j9k5] { opacity: 0.6; cursor: progress; }
.gd-primary:hover[b-e0m5c5j9k5] { background: var(--fs-primary-hover); }
.gd-actions .gd-discard[b-e0m5c5j9k5] { display: block; margin: 8px auto 0; min-height: 44px; padding: 0 12px; border: none; background: none; color: var(--fs-text-secondary); font: inherit; font-size: 14px; text-decoration: underline; }
/* /Components/Shared/HeadsUpNotice.razor.rz.scp.css */
/* The warning notice (#1054), with the rules agreed for the #1031 banner. Role tokens only. */

.heads-up-notice[b-x2p1pzet26] {
    background: var(--fs-warning-light);
    color: var(--fs-text-primary);
    border: 0;
    border-radius: var(--fs-radius-lg);
    padding: var(--fs-spacing-md) var(--fs-spacing-lg);
}

/* Warning text is just at AA on warning-light: the icon and the label only, never the message. */
.heads-up-icon[b-x2p1pzet26],
.heads-up-label[b-x2p1pzet26] {
    color: var(--fs-warning-text);
    margin-right: var(--fs-spacing-xs);
}

.heads-up-label[b-x2p1pzet26] {
    font-weight: 600;
}
/* /Components/Shared/LegalLinks.razor.rz.scp.css */
.legal-links[b-b2cs3invt2] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--fs-spacing-sm);
    font-size: var(--fs-font-size-xs);
    color: var(--fs-text-muted);
}

/* Underlined so it reads as a link, not muted text; the padding gives each a 24px tap height (WCAG 2.5.8). */
.legal-links a[b-b2cs3invt2] {
    display: inline-block;
    padding-block: var(--fs-spacing-xs);
    color: var(--fs-text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-links a:hover[b-b2cs3invt2] {
    color: var(--fs-text-primary);
}
/* /Components/Shared/Mobile/AdaptiveForm.razor.rz.scp.css */
/* AdaptiveForm - Responsive Form Styles */

/* Base Form Styles */
.adaptive-form[b-67nd5xiqhu] {
  width: 100%;
}

.form-content[b-67nd5xiqhu] {
  margin-bottom: 1.5rem;
}

.form-actions[b-67nd5xiqhu] {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  align-items: center;
}

/* Desktop Mode - Multi-column Grid */
@media (min-width: 769px) {
  .adaptive-form.desktop-mode .form-content[b-67nd5xiqhu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  /* Support 1-4 columns via CSS custom properties */
  .adaptive-form.desktop-mode[data-columns="1"] .form-content[b-67nd5xiqhu] {
    grid-template-columns: 1fr;
  }

  .adaptive-form.desktop-mode[data-columns="3"] .form-content[b-67nd5xiqhu] {
    grid-template-columns: repeat(3, 1fr);
  }

  .adaptive-form.desktop-mode[data-columns="4"] .form-content[b-67nd5xiqhu] {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Full-width form groups (for textareas, etc.) */
  .adaptive-form.desktop-mode[b-67nd5xiqhu] (.form-group-full) {
    grid-column: 1 / -1;
  }

  .adaptive-form.desktop-mode .form-actions[b-67nd5xiqhu] {
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--fs-border-default);
  }

  .adaptive-form.desktop-mode .form-actions button[b-67nd5xiqhu] {
    min-width: 120px;
  }
}

/* Mobile Mode - Single Column */
@media (max-width: 768px) {
  .adaptive-form.mobile-mode .form-content[b-67nd5xiqhu] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .adaptive-form.mobile-mode .form-actions[b-67nd5xiqhu] {
    flex-direction: column-reverse;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .adaptive-form.mobile-mode .form-actions button[b-67nd5xiqhu] {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 12px 24px;
  }

  /* iOS Zoom Prevention - All form inputs get 16px minimum */
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-control),
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-select),
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (input),
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (select),
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (textarea) {
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 16px;
  }

  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-label),
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (label) {
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-text-body);
    margin-bottom: 8px;
  }

  /* Larger checkboxes and radios for touch */
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-check-input) {
    width: 24px;
    height: 24px;
    margin-top: 0;
  }

  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-check-label) {
    font-size: 16px;
    padding-left: 12px;
  }

  /* Input groups */
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.input-group) {
    flex-wrap: nowrap;
  }

  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.input-group-text) {
    font-size: 16px;
    padding: 12px 16px;
    min-width: 60px;
  }
}

/* Form Group Styles (both modes) */
[b-67nd5xiqhu](.form-group) {
  display: flex;
  flex-direction: column;
}

[b-67nd5xiqhu](.form-label) {
  margin-bottom: 0.5rem;
}

[b-67nd5xiqhu](.form-control:focus),
[b-67nd5xiqhu](.form-select:focus) {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 2px;
  border-color: var(--fs-primary-text);
}

/* Validation Styles */
[b-67nd5xiqhu](.invalid-feedback) {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--fs-error);
}

[b-67nd5xiqhu](.form-control.is-invalid),
[b-67nd5xiqhu](.form-select.is-invalid) {
  border-color: var(--fs-error);
}

[b-67nd5xiqhu](.form-control.is-valid),
[b-67nd5xiqhu](.form-select.is-valid) {
  border-color: var(--fs-success);
}

/* Loading State */
.adaptive-form[b-67nd5xiqhu] (.spinner-border-sm) {
  width: 1rem;
  height: 1rem;
  border-width: 0.15rem;
}

/* Button States */
.form-actions button:disabled[b-67nd5xiqhu] {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-actions button:not(:disabled):hover[b-67nd5xiqhu] {
  box-shadow: none;
}

.form-actions button:not(:disabled):active[b-67nd5xiqhu] {
  transform: translateY(0);
  box-shadow: none;
}

/* Accessibility: Focus Visible */
.form-actions button:focus-visible[b-67nd5xiqhu] {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 2px;
}

/* Responsive Breakpoints */
@media (max-width: 576px) {
  .form-content[b-67nd5xiqhu] {
    gap: 1rem !important;
  }

  .form-actions[b-67nd5xiqhu] {
    margin-top: 1rem;
  }
}

@media (min-width: 1200px) {
  .adaptive-form.desktop-mode .form-content[b-67nd5xiqhu] {
    gap: 2rem;
  }
}
/* /Components/Shared/Mobile/AdaptiveModal.razor.rz.scp.css */
/* AdaptiveModal - Responsive Modal Styles */

/* Desktop Modal Enhancements */
@media (min-width: 769px) {
  .modal-dialog[b-f08dit0uy3] {
    max-width: 600px;
    margin: 1.75rem auto;
  }

  .modal-content[b-f08dit0uy3] {
    border-radius: 12px;
    box-shadow: var(--fs-shadow-dialog);
  }

  .modal-header[b-f08dit0uy3] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--fs-border-default);
  }

  .modal-title[b-f08dit0uy3] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fs-text-primary);
  }

  .btn-close[b-f08dit0uy3] {
    width: 32px;
    height: 32px;
    padding: 0;
  }

  .modal-body[b-f08dit0uy3] {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
  }

  .modal-footer[b-f08dit0uy3] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--fs-border-default);
    gap: 0.5rem;
  }
}

/* Mobile Optimizations (Modal transforms to Bottom Sheet) */
@media (max-width: 768px) {
  /* Mobile uses MobileBottomSheet component - no additional styles needed */
  /* Bottom sheet styles are defined in MobileBottomSheet.razor.css */
}

/* Modal Backdrop */
.modal-backdrop[b-f08dit0uy3] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--fs-sheet-backdrop);
  z-index: 1040;
}

.modal-backdrop.fade[b-f08dit0uy3] {
  opacity: 0;
}

.modal-backdrop.show[b-f08dit0uy3] {
  opacity: 1;
}

/* Modal Container */
.modal[b-f08dit0uy3] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  z-index: 1050;
}

.modal.fade .modal-dialog[b-f08dit0uy3] {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog[b-f08dit0uy3] {
  transform: none;
}

/* Scrollable Modal Body */
.modal-body[b-f08dit0uy3] {
  position: relative;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar {
  width: 6px;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar-track {
  background: var(--fs-bg-tertiary);
  border-radius: 3px;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar-thumb {
  background: var(--fs-text-muted);
  border-radius: 3px;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar-thumb:hover {
  background: var(--fs-text-muted);
}

/* Accessibility: Focus Styles */
.btn-close:focus[b-f08dit0uy3] {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 2px;
}

.modal-footer .btn:focus[b-f08dit0uy3] {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: 2px;
}

/* Surfaces follow the tokens, so they flip with dark mode (#1179) */
.modal-content[b-f08dit0uy3] {
  background-color: var(--fs-bg-primary) !important;
  color: var(--fs-text-primary) !important;
}

.modal-header[b-f08dit0uy3] {
  background-color: var(--fs-bg-primary) !important;
}

.modal-title[b-f08dit0uy3] {
  color: var(--fs-text-primary) !important;
}

.modal-body[b-f08dit0uy3] {
  background-color: var(--fs-bg-primary) !important;
}

.modal-footer[b-f08dit0uy3] {
  /* White like the body: a tonal footer swallowed the tonal secondary button (Cancel). */
  background-color: var(--fs-bg-primary) !important;
}

/* Close Button - Ensure visible on light background */
.btn-close[b-f08dit0uy3] {
  background-color: transparent !important;
  opacity: 0.5;
  filter: none;
}

.btn-close:hover[b-f08dit0uy3] {
  opacity: 0.8;
}
/* /Components/Shared/Mobile/AdaptiveTable.razor.rz.scp.css */
/* AdaptiveTable - Responsive Table/Card View Styles */

/* Base Container */
.adaptive-table[b-pj8aogpng8] {
  width: 100%;
}

/* Desktop Mode - Table View */
@media (min-width: 769px) {
  .adaptive-table.desktop-mode .desktop-table-wrapper[b-pj8aogpng8] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: none;
  }

  .adaptive-table.desktop-mode .table[b-pj8aogpng8] {
    margin-bottom: 0;
    background-color: var(--fs-bg-primary);
  }

  .adaptive-table.desktop-mode .table thead[b-pj8aogpng8] {
    background-color: var(--fs-bg-tertiary);
  }

  .adaptive-table.desktop-mode .table thead th[b-pj8aogpng8] {
    font-weight: 600;
    color: var(--fs-text-body);
    border-bottom: 2px solid var(--fs-border-default);
    padding: 1rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
  }

  .adaptive-table.desktop-mode .table tbody tr[b-pj8aogpng8] {
    transition: background-color 0.2s;
  }

  .adaptive-table.desktop-mode .table tbody tr:hover[b-pj8aogpng8] {
    background-color: var(--fs-bg-secondary);
  }

  .adaptive-table.desktop-mode .table tbody td[b-pj8aogpng8] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--fs-border-default);
  }

  /* Scrollbar Styling */
  .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar {
    height: 8px;
  }

  .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar-track {
    background: var(--fs-bg-tertiary);
    border-radius: 4px;
  }

  .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar-thumb {
    background: var(--fs-text-muted);
    border-radius: 4px;
  }

  .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar-thumb:hover {
    background: var(--fs-text-muted);
  }
}

/* Mobile Mode - Card View */
@media (max-width: 768px) {
  .adaptive-table.mobile-mode .mobile-card-list[b-pj8aogpng8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  .mobile-table-card[b-pj8aogpng8] {
    background: var(--fs-bg-primary);
    border-radius: 12px;
    padding: 16px;
    box-shadow: none;
    transition: all 0.2s;
    cursor: pointer;
    -webkit-tap-highlight-color: var(--fs-shade-a05);
    min-height: 72px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-table-card:active[b-pj8aogpng8] {
    transform: scale(0.98);
    box-shadow: none;
  }

  .mobile-table-card:focus[b-pj8aogpng8] {
    outline: 2px solid var(--fs-primary-text);
    outline-offset: 2px;
  }

  /* Card Content Rows */
  .mobile-table-card .card-row[b-pj8aogpng8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--fs-bg-tertiary);
  }

  .mobile-table-card .card-row:last-child[b-pj8aogpng8] {
    border-bottom: none;
    padding-bottom: 0;
  }

  .mobile-table-card .card-row strong[b-pj8aogpng8] {
    color: var(--fs-text-secondary);
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
  }

  /* Default Card Content (fallback) */
  .default-card-content[b-pj8aogpng8] {
    font-size: 16px;
    color: var(--fs-text-primary);
    line-height: 1.5;
  }

  .default-card-content tr[b-pj8aogpng8],
  .default-card-content tbody[b-pj8aogpng8],
  .default-card-content table[b-pj8aogpng8] {
    display: block;
  }

  .default-card-content td[b-pj8aogpng8] {
    display: block;
    padding: 6px 0;
    border: none;
  }

  .default-card-content td[b-pj8aogpng8]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--fs-text-secondary);
    margin-right: 8px;
  }

  /* Empty State */
  .empty-state[b-pj8aogpng8] {
    text-align: center;
    padding: 48px 16px;
    color: var(--fs-text-secondary);
  }

  .empty-state p[b-pj8aogpng8] {
    margin: 0;
    font-size: 16px;
  }
}

/* Accessibility Improvements */
.mobile-table-card[role="button"][b-pj8aogpng8] {
  user-select: none;
}

/* Loading State (Optional) */
.adaptive-table.loading[b-pj8aogpng8] {
  opacity: 0.6;
  pointer-events: none;
}

/* Responsive Enhancements */
@media (max-width: 576px) {
  .mobile-table-card[b-pj8aogpng8] {
    padding: 12px;
    gap: 6px;
  }

  .mobile-table-card .card-row[b-pj8aogpng8] {
    font-size: 14px;
    padding: 6px 0;
  }

  .mobile-table-card .card-row strong[b-pj8aogpng8] {
    min-width: 80px;
    font-size: 14px;
  }
}
/* /Components/Shared/Mobile/MobileBottomNavigation.razor.rz.scp.css */
/* Mobile Bottom Navigation - Material Design 3 */
/* Safe area aware, 60fps animations, haptic feedback */

.mobile-bottom-nav[b-2ftv56q4kq] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--md-sys-color-surface-container, var(--fs-bg-primary));
  border-top: 1px solid var(--md-sys-color-outline-variant, var(--fs-border-default));
  box-shadow: none;

  /* Safe area insets for iOS notch/Dynamic Island */
  padding-bottom: env(safe-area-inset-bottom, 0);

  /* GPU acceleration for smooth animations */
  transform: translateZ(0);
  will-change: transform;
}

.nav-container[b-2ftv56q4kq] {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  height: 64px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

/* Navigation Item */
.nav-item[b-2ftv56q4kq] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px 12px;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;

  /* Touch target size (minimum 48x48) */
  min-width: 48px;
  min-height: 48px;

  /* Smooth transitions */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Prevent text selection on tap */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.nav-item-content[b-2ftv56q4kq] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}

/* Icon Container */
.icon-container[b-2ftv56q4kq] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-container i[b-2ftv56q4kq],
.icon-container svg[b-2ftv56q4kq] {
  width: 24px;
  height: 24px;
  color: var(--md-sys-color-on-surface-variant, var(--fs-text-secondary));
  transition:
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-container svg[b-2ftv56q4kq] {
  fill: currentColor;
}

/* Label */
.label[b-2ftv56q4kq] {
  font-size: 12px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant, var(--fs-text-secondary));
  transition:
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Badge */
.badge[b-2ftv56q4kq] {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--md-sys-color-error, var(--fs-error));
  color: var(--md-sys-color-on-error, var(--fs-text-on-status));
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  animation: badgePulse-b-2ftv56q4kq 2s ease-in-out infinite;
  z-index: 2;
}

/* Active State */
.nav-item.active .icon-container[b-2ftv56q4kq] {
  background: var(--md-sys-color-secondary-container, var(--fs-success-light));
}

.nav-item.active .icon-container i[b-2ftv56q4kq],
.nav-item.active .icon-container svg[b-2ftv56q4kq] {
  color: var(--md-sys-color-on-secondary-container, var(--fs-success-text));
  transform: scale(1.1);
}

.nav-item.active .label[b-2ftv56q4kq] {
  color: var(--md-sys-color-on-surface, var(--fs-text-primary));
  font-weight: 600;
}

/* Active Indicator */
.active-indicator[b-2ftv56q4kq] {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: var(--md-sys-color-primary, var(--fs-success));
  border-radius: 0 0 3px 3px;
  animation: slideDown-b-2ftv56q4kq 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Touch/Hover States */
.nav-item:hover:not(.active) .icon-container[b-2ftv56q4kq] {
  background: var(--md-sys-color-surface-variant, var(--fs-bg-tertiary));
}

.nav-item:active[b-2ftv56q4kq] {
  transform: scale(0.95);
}

.nav-item:active .icon-container[b-2ftv56q4kq] {
  transform: scale(0.9);
}

/* Focus State (keyboard navigation) */
.nav-item:focus-visible[b-2ftv56q4kq] {
  outline: 2px solid var(--md-sys-color-primary, var(--fs-success));
  outline-offset: 2px;
  border-radius: 8px;
}

/* Animations */
@keyframes slideDown-b-2ftv56q4kq {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes badgePulse-b-2ftv56q4kq {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Ripple Effect (Material Design) */
.nav-item[b-2ftv56q4kq]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--fs-shade-a10);
  transform: translate(-50%, -50%);
  transition:
    width 0.3s,
    height 0.3s;
  pointer-events: none;
}

.nav-item:active[b-2ftv56q4kq]::before {
  width: 100px;
  height: 100px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav[b-2ftv56q4kq],
  .nav-item[b-2ftv56q4kq],
  .icon-container[b-2ftv56q4kq],
  .icon-container i[b-2ftv56q4kq],
  .icon-container svg[b-2ftv56q4kq],
  .label[b-2ftv56q4kq],
  .active-indicator[b-2ftv56q4kq] {
    animation: none;
    transition: none;
  }

  .badge[b-2ftv56q4kq] {
    animation: none;
  }
}

/* Landscape Orientation (Smaller height) */
@media (orientation: landscape) {
  .nav-container[b-2ftv56q4kq] {
    height: 56px;
  }

  .nav-item[b-2ftv56q4kq] {
    padding: 6px 12px 8px;
  }

  .label[b-2ftv56q4kq] {
    font-size: 11px;
  }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
  .label[b-2ftv56q4kq] {
    font-size: 11px;
  }

  .icon-container[b-2ftv56q4kq] {
    width: 28px;
    height: 28px;
  }

  .icon-container i[b-2ftv56q4kq],
  .icon-container svg[b-2ftv56q4kq] {
    width: 20px;
    height: 20px;
  }
}
/* /Components/Shared/Mobile/MobileCardView.razor.rz.scp.css */
/* Mobile Card View - Material Design 3 */
/* Generic card component with swipe gestures and virtual scrolling */

.mobile-card-view[b-r3yb2w62y3] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Card Item Wrapper */
.card-item-wrapper[b-r3yb2w62y3] {
  position: relative;
  background: var(--md-sys-color-surface, var(--fs-bg-primary));
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;

  /* GPU acceleration */
  transform: translateZ(0);
  will-change: transform;

  /* Touch optimization */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.card-item-wrapper:active[b-r3yb2w62y3] {
  transform: scale(0.98);
  box-shadow: none;
}

/* Swipe indicator (shown during swipe) */
.card-item-wrapper.swiping[b-r3yb2w62y3] {
  transition: transform 0.1s linear;
}

.card-item-wrapper.swipe-action[b-r3yb2w62y3] {
  animation: swipeOut-b-r3yb2w62y3 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Default Card (when no template provided) */
.card-default[b-r3yb2w62y3] {
  padding: 16px;
  min-height: 80px;
  display: flex;
  align-items: center;
  color: var(--md-sys-color-on-surface, var(--fs-text-primary));
}

/* Loading Skeleton State */
.card-loading-state[b-r3yb2w62y3] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-skeleton[b-r3yb2w62y3] {
  background: var(--md-sys-color-surface, var(--fs-bg-primary));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  padding: 16px;
  gap: 12px;
}

.skeleton-image[b-r3yb2w62y3] {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--md-sys-color-surface-variant, var(--fs-bg-tertiary)) 25%,
    var(--md-sys-color-surface-container, var(--fs-border-default)) 50%,
    var(--md-sys-color-surface-variant, var(--fs-bg-tertiary)) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-b-r3yb2w62y3 1.5s infinite;
}

.skeleton-content[b-r3yb2w62y3] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-line[b-r3yb2w62y3] {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--md-sys-color-surface-variant, var(--fs-bg-tertiary)) 25%,
    var(--md-sys-color-surface-container, var(--fs-border-default)) 50%,
    var(--md-sys-color-surface-variant, var(--fs-bg-tertiary)) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-b-r3yb2w62y3 1.5s infinite;
}

.skeleton-line-1[b-r3yb2w62y3] {
  width: 70%;
}

.skeleton-line-2[b-r3yb2w62y3] {
  width: 90%;
}

.skeleton-line-3[b-r3yb2w62y3] {
  width: 60%;
}

/* Empty State */
.card-empty-state[b-r3yb2w62y3] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 32px;
}

.empty-state-default[b-r3yb2w62y3] {
  text-align: center;
  color: var(--md-sys-color-on-surface-variant, var(--fs-text-secondary));
}

.empty-icon[b-r3yb2w62y3] {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state-default h3[b-r3yb2w62y3] {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--md-sys-color-on-surface, var(--fs-text-primary));
}

.empty-state-default p[b-r3yb2w62y3] {
  font-size: 14px;
  margin: 0;
  color: var(--md-sys-color-on-surface-variant, var(--fs-text-secondary));
}

/* Animations */
@keyframes shimmer-b-r3yb2w62y3 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes swipeOut-b-r3yb2w62y3 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slideInUp-b-r3yb2w62y3 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.card-item-wrapper[b-r3yb2w62y3] {
  animation: slideInUp-b-r3yb2w62y3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger animation for list items */
.card-item-wrapper:nth-child(1)[b-r3yb2w62y3] {
  animation-delay: 0ms;
}
.card-item-wrapper:nth-child(2)[b-r3yb2w62y3] {
  animation-delay: 50ms;
}
.card-item-wrapper:nth-child(3)[b-r3yb2w62y3] {
  animation-delay: 100ms;
}
.card-item-wrapper:nth-child(4)[b-r3yb2w62y3] {
  animation-delay: 150ms;
}
.card-item-wrapper:nth-child(5)[b-r3yb2w62y3] {
  animation-delay: 200ms;
}

/* Virtual Scrolling Container */
[b-r3yb2w62y3] .mobile-card-view > div[role="list"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .card-item-wrapper[b-r3yb2w62y3],
  .skeleton-image[b-r3yb2w62y3],
  .skeleton-line[b-r3yb2w62y3] {
    animation: none;
    transition: none;
  }

  .card-item-wrapper:active[b-r3yb2w62y3] {
    transform: none;
  }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
  .mobile-card-view[b-r3yb2w62y3] {
    padding: 12px;
    gap: 10px;
  }

  .card-skeleton[b-r3yb2w62y3] {
    padding: 12px;
  }

  .skeleton-image[b-r3yb2w62y3] {
    width: 60px;
    height: 60px;
  }

  .empty-state-default[b-r3yb2w62y3] {
    padding: 24px;
  }

  .empty-icon[b-r3yb2w62y3] {
    font-size: 48px;
  }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
  .card-empty-state[b-r3yb2w62y3] {
    min-height: 200px;
    padding: 24px;
  }

  .empty-icon[b-r3yb2w62y3] {
    font-size: 48px;
    margin-bottom: 12px;
  }
}

/* Pull-to-refresh indicator */
.mobile-card-view.refreshing[b-r3yb2w62y3]::before {
  content: "";
  display: block;
  width: 100%;
  height: 40px;
  background: var(--md-sys-color-primary, var(--fs-success));
  opacity: 0.1;
  border-radius: 0 0 20px 20px;
  animation: pullDown-b-r3yb2w62y3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pullDown-b-r3yb2w62y3 {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 40px;
    opacity: 0.1;
  }
}
/* /Components/Shared/Mobile/MobileFilterSheet.razor.rz.scp.css */
/* Mobile Filter Sheet - Material Design 3 */
/* Specialized bottom sheet for filtering with sticky footer */

.filter-sheet-container[b-pzgmqzes4c] {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100vh - 120px);
}

.filter-content[b-pzgmqzes4c] {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  overscroll-behavior: contain;

  /* Smooth scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}

/* Filter Footer (Sticky) */
.filter-footer[b-pzgmqzes4c] {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--md-sys-color-surface-container, var(--fs-bg-primary));
  border-top: 1px solid var(--md-sys-color-outline-variant, var(--fs-border-default));
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
  box-shadow: inset 0 1px 0 var(--fs-border-default);
  z-index: 10;
}

.filter-footer-content[b-pzgmqzes4c] {
  display: flex;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

/* Buttons */
.btn-clear[b-pzgmqzes4c],
.btn-apply[b-pzgmqzes4c] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Touch target size */
  min-height: 48px;

  /* Prevent text selection */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-clear[b-pzgmqzes4c] {
  background: var(--md-sys-color-surface-variant, var(--fs-bg-tertiary));
  color: var(--md-sys-color-on-surface-variant, var(--fs-text-secondary));
  border: 1px solid var(--md-sys-color-outline, var(--fs-border-hover));
}

.btn-clear:hover[b-pzgmqzes4c] {
  background: var(--md-sys-color-surface-variant-hover, var(--fs-border-default));
}

.btn-clear:active[b-pzgmqzes4c] {
  transform: scale(0.98);
  background: var(--md-sys-color-surface-variant-pressed, var(--fs-border-default));
}

.btn-apply[b-pzgmqzes4c] {
  background: var(--md-sys-color-primary, var(--fs-success));
  color: var(--md-sys-color-on-primary, var(--fs-text-on-inverse));
  box-shadow: none;
}

.btn-apply:hover[b-pzgmqzes4c] {
  background: var(--md-sys-color-primary-hover, var(--fs-success));
  box-shadow: none;
}

.btn-apply:active[b-pzgmqzes4c] {
  transform: scale(0.98);
  background: var(--md-sys-color-primary-pressed, var(--fs-success));
}

.btn-apply:disabled[b-pzgmqzes4c] {
  background: var(--md-sys-color-surface-variant, var(--fs-border-default));
  color: var(--md-sys-color-on-surface-variant, var(--fs-text-muted));
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Button Icons & Text */
.btn-icon[b-pzgmqzes4c] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.btn-text[b-pzgmqzes4c] {
  font-size: 14px;
  font-weight: 600;
}

/* Filter Count Badge */
.filter-count-badge[b-pzgmqzes4c] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.3);
  color: var(--md-sys-color-on-primary, var(--fs-text-inverse));
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
}

/* Spacer when no clear button */
.btn-spacer[b-pzgmqzes4c] {
  flex: 1;
}

/* Focus States (Keyboard Navigation) */
.btn-clear:focus-visible[b-pzgmqzes4c],
.btn-apply:focus-visible[b-pzgmqzes4c] {
  outline: 2px solid var(--md-sys-color-primary, var(--fs-success));
  outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .btn-clear[b-pzgmqzes4c],
  .btn-apply[b-pzgmqzes4c] {
    transition: none;
  }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
  .filter-footer-content[b-pzgmqzes4c] {
    gap: 8px;
  }

  .btn-clear[b-pzgmqzes4c],
  .btn-apply[b-pzgmqzes4c] {
    padding: 12px 16px;
    font-size: 13px;
  }

  .btn-text[b-pzgmqzes4c] {
    font-size: 13px;
  }
}

/* Keyboard Visible State */
[b-pzgmqzes4c] .filter-sheet.keyboard-visible .filter-footer {
  /* Adjust footer position when keyboard is open */
  padding-bottom: calc(16px + var(--keyboard-height, 0px));
}

/* Loading State */
.filter-content.loading[b-pzgmqzes4c] {
  opacity: 0.6;
  pointer-events: none;
}

/* Empty State */
.filter-content:empty[b-pzgmqzes4c]::before {
  content: "No filters available";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--md-sys-color-on-surface-variant, var(--fs-text-muted));
  font-size: 14px;
}
/* /Components/Shared/MobileBottomSheet.razor.rz.scp.css */
/*
    Mobile Bottom Sheet Component - Scoped Styles
    Material Design 3 compliant styling with animations
    Features: GPU acceleration, dark mode, safe area insets, responsive design
*/

/* ========================================
   CSS Custom Properties (Theme Variables)
   ======================================== */

.mobile-bottom-sheet[b-m1nztuzuee] {
  /* Light mode colors */
  --sheet-bg: var(--fs-bg-primary);
  --sheet-text: var(--fs-text-primary);
  --sheet-border: var(--fs-border-default);
  --backdrop-bg: var(--fs-sheet-backdrop);
  --handle-color: var(--fs-border-hover);
  --close-btn-hover: var(--fs-bg-tertiary);
  --shadow-color: rgba(0, 0, 0, 0.15);

  /* Animation timings */
  --open-duration: 350ms;
  --close-duration: 250ms;
  --open-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --close-easing: cubic-bezier(0.4, 0, 1, 1);

  /* Dimensions */
  --sheet-radius: 16px;
  --handle-width: 32px;
  --handle-height: 4px;
  --header-height: 56px;
  --footer-height: 72px;
  --min-touch-target: 44px;

  /* Safe area insets for iOS notch/Dynamic Island */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Dark mode: the sheet follows the tokens above, which flip with the phone (#1179). */

/* ========================================
   Container & Layout
   ======================================== */

.mobile-bottom-sheet[b-m1nztuzuee] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  pointer-events: none;
}

/* Show only when open or closing */
.mobile-bottom-sheet.open[b-m1nztuzuee],
.mobile-bottom-sheet.closing[b-m1nztuzuee] {
  display: block;
  pointer-events: auto;
}

/* CRITICAL: Parent container uses dvh so it shrinks when keyboard opens.
   This means bottom: 0 on child = top of keyboard automatically! */
@supports (height: 100dvh) {
  .mobile-bottom-sheet.open[b-m1nztuzuee],
  .mobile-bottom-sheet.closing[b-m1nztuzuee] {
    height: 100dvh;
  }
}

/* Hide on desktop - mobile only (≤768px) */
@media (min-width: 769px) {
  .mobile-bottom-sheet[b-m1nztuzuee] {
    display: none !important;
  }
}

/* ========================================
   Backdrop
   ======================================== */

.sheet-backdrop[b-m1nztuzuee] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--backdrop-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--open-duration) var(--open-easing);
}

.mobile-bottom-sheet.open .sheet-backdrop[b-m1nztuzuee] {
  opacity: 1;
}

.mobile-bottom-sheet.closing .sheet-backdrop[b-m1nztuzuee] {
  opacity: 0;
  transition: opacity var(--close-duration) var(--close-easing);
}

/* ========================================
   Sheet Container
   ======================================== */

.sheet-container[b-m1nztuzuee] {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 768px;
  margin: 0 auto;
  background: var(--sheet-bg);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow: var(--fs-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Default height - portrait orientation */
  /* FIXED: vh fallback FIRST, then dvh override (CSS takes last valid value) */
  height: 85vh; /* Fallback for older browsers */
  max-height: calc(100vh - var(--safe-top, 0px) - 16px); /* Fallback */

  /* GPU acceleration for smooth animations */
  transform: translateY(100%);
  will-change: transform;
  transition: transform var(--open-duration) var(--open-easing);

  /* CRITICAL: Prevent iOS double-tap zoom inside sheet */
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
}

/* Modern browsers that support dvh - this OVERRIDES the vh values */
@supports (height: 100dvh) {
  .sheet-container[b-m1nztuzuee] {
    /* Simple positioning - parent container already uses dvh,
           so bottom: 0 = top of keyboard automatically */
    bottom: 0;

    /* Use min() to handle both keyboard-open and keyboard-closed states:
           - 85dvh: Good height when keyboard is closed (leaves 15% gap)
           - 100dvh - 140px: Ensures header visible when keyboard open (140px = safe-area + app-header + margin) */
    height: min(85dvh, calc(100dvh - 140px));
    max-height: none;

    /* Smooth animation as keyboard opens/closes */
    transition: height 250ms ease-out;
  }
}

/* Landscape orientation - taller sheet */
@media (orientation: landscape) {
  .sheet-container[b-m1nztuzuee] {
    height: 90vh; /* Fallback first */
    max-height: calc(100vh - var(--safe-top, 0px) - 8px); /* Fallback */
  }
}

/* Landscape with dvh support */
@supports (height: 100dvh) {
  @media (orientation: landscape) {
    .sheet-container[b-m1nztuzuee] {
      bottom: 0;
      height: min(90dvh, calc(100dvh - 80px));
      max-height: none;
    }
  }
}

/* Opening animation - slide up with subtle bounce */
@keyframes slideUp-b-m1nztuzuee {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.mobile-bottom-sheet.open .sheet-container[b-m1nztuzuee] {
  transform: translateY(0);
  animation: slideUp-b-m1nztuzuee var(--open-duration) var(--open-easing);
}

/* Closing animation - slide down (faster, no bounce) */
@keyframes slideDown-b-m1nztuzuee {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

.mobile-bottom-sheet.closing .sheet-container[b-m1nztuzuee] {
  animation: slideDown-b-m1nztuzuee var(--close-duration) var(--close-easing);
}

/* Dragging state - disable transition for smooth tracking */
.mobile-bottom-sheet.dragging .sheet-container[b-m1nztuzuee] {
  transition: none;
}

/* ========================================
   Drag Handle
   ======================================== */

.sheet-drag-handle[b-m1nztuzuee] {
  width: 100%;
  padding: 14px 0 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.sheet-drag-handle:active[b-m1nztuzuee] {
  cursor: grabbing;
}

.drag-indicator[b-m1nztuzuee] {
  width: 40px;
  height: 5px;
  background: var(--fs-border-hover);
  border-radius: 3px;
  transition: background-color 200ms ease;
}

.sheet-drag-handle:hover .drag-indicator[b-m1nztuzuee],
.sheet-drag-handle:active .drag-indicator[b-m1nztuzuee] {
  background: var(--sheet-text);
  opacity: 0.4;
}

/* ========================================
   Loading State (Improvement #2)
   ======================================== */

.sheet-loading-state[b-m1nztuzuee] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 16px;
}

.spinner[b-m1nztuzuee] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--sheet-border);
  border-top-color: var(--sheet-text);
  border-radius: 50%;
  animation: spinner-rotate-b-m1nztuzuee 0.8s linear infinite;
}

@keyframes spinner-rotate-b-m1nztuzuee {
  to {
    transform: rotate(360deg);
  }
}

.loading-text[b-m1nztuzuee] {
  margin: 0;
  color: var(--sheet-text);
  opacity: 0.6;
  font-size: 14px;
}

.visually-hidden[b-m1nztuzuee] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   Header
   ======================================== */

.sheet-header[b-m1nztuzuee] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 12px 20px;
  min-height: 48px;
  border-bottom: 1px solid var(--sheet-border);
  flex-shrink: 0;
}

.sheet-title[b-m1nztuzuee] {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--sheet-text);
  line-height: 1.3;
}

/* A 44px tap target (#1119). The padding keeps the drawn circle at 36px: the background stops at the
   content box, and the negative margin keeps the circle where it was against the header's edge. */
.sheet-close-btn[b-m1nztuzuee] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  padding: 4px;
  margin: 0 -4px 0 0;
  background-color: var(--fs-bg-tertiary);
  background-clip: content-box;
  border: none;
  border-radius: 50%;
  color: var(--fs-text-secondary);
  cursor: pointer;
  transition: all 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.sheet-close-btn:hover[b-m1nztuzuee] {
  background-color: var(--fs-border-default);
  color: var(--fs-text-body);
}

.sheet-close-btn:active[b-m1nztuzuee] {
  background-color: var(--fs-border-hover);
  transform: scale(0.95);
}

.sheet-close-btn:focus-visible[b-m1nztuzuee] {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 2px;
}

.sheet-close-btn svg[b-m1nztuzuee] {
  width: 18px;
  height: 18px;
}

/* ========================================
   Body (Scrollable Content)
   ======================================== */

.sheet-body[b-m1nztuzuee] {
  flex: 1;
  /* CRITICAL: flex items default to min-height:auto (content-sized), so tall
     content grows the body past the fixed-height container instead of scrolling,
     and the container's overflow:hidden clips it (dead-end scroll). min-height:0
     lets the body honor its flex-allocated height so overflow-y:auto actually scrolls. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  padding-bottom: calc(20px + var(--safe-bottom));
}

/* Custom scrollbar for webkit browsers */
.sheet-body[b-m1nztuzuee]::-webkit-scrollbar {
  width: 6px;
}

.sheet-body[b-m1nztuzuee]::-webkit-scrollbar-track {
  background: transparent;
}

.sheet-body[b-m1nztuzuee]::-webkit-scrollbar-thumb {
  background: var(--handle-color);
  border-radius: 3px;
}

.sheet-body[b-m1nztuzuee]::-webkit-scrollbar-thumb:hover {
  background: var(--sheet-text);
  opacity: 0.4;
}

/* ========================================
   Footer (Optional)
   ======================================== */

.sheet-footer[b-m1nztuzuee] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  padding-bottom: calc(16px + var(--safe-bottom));
  border-top: 1px solid var(--sheet-border);
  flex-shrink: 0;
  min-height: var(--footer-height);
}

/* ========================================
   Child Content Overrides (::deep)
   ======================================== */

/* Ensure child inputs and selects are touch-friendly */
.mobile-bottom-sheet[b-m1nztuzuee]  input,
.mobile-bottom-sheet[b-m1nztuzuee]  select,
.mobile-bottom-sheet[b-m1nztuzuee]  textarea,
.mobile-bottom-sheet[b-m1nztuzuee]  button {
  min-height: var(--min-touch-target);
  font-size: 16px; /* Prevents iOS zoom on focus */
}

/* CRITICAL FIX: Ensure text visibility in mobile option buttons */
.mobile-bottom-sheet[b-m1nztuzuee]  .mobile-option-item {
  color: var(--sheet-text) !important;
}

.mobile-bottom-sheet[b-m1nztuzuee]  .mobile-option-item .option-text {
  color: inherit !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-bottom-sheet[b-m1nztuzuee]  .mobile-option-item.selected {
  color: var(--fs-primary-text) !important;
}

/* Ensure TomSelect dropdown doesn't overflow */
.mobile-bottom-sheet[b-m1nztuzuee]  .ts-dropdown {
  max-height: 50vh;
  overflow-y: auto;
}

/* ========================================
   Keyboard Adjustments - Full Screen Takeover
   ======================================== */

/* When keyboard is open (detected via JS VisualViewport API),
   expand sheet to cover app header for MAXIMUM space.
   This is critical for showing enough options when typing. */
.sheet-container.keyboard-visible[b-m1nztuzuee] {
  /* Full-screen takeover - cover app header to maximize option space */
  height: calc(100dvh - 20px) !important;

  /* Smoother transition when keyboard opens */
  transition: height 200ms ease-out !important;
}

/* Fallback for browsers without dvh */
@supports not (height: 100dvh) {
  .sheet-container.keyboard-visible[b-m1nztuzuee] {
    height: calc(100vh - 20px) !important;
  }
}

/* Also hide drag handle when keyboard is open to save space */
.keyboard-visible .sheet-drag-handle[b-m1nztuzuee] {
  padding: 8px 0 4px 0;
}

.keyboard-visible .drag-indicator[b-m1nztuzuee] {
  width: 32px;
  height: 4px;
}

/* Compact header when keyboard is open */
.keyboard-visible .sheet-header[b-m1nztuzuee] {
  padding: 2px 16px 8px 16px;
  min-height: 40px;
}

.keyboard-visible .sheet-title[b-m1nztuzuee] {
  font-size: 15px;
}

.keyboard-visible .sheet-close-btn[b-m1nztuzuee] {
  padding: 6px;
  margin-right: -6px;
}

.keyboard-visible .sheet-close-btn svg[b-m1nztuzuee] {
  width: 16px;
  height: 16px;
}

/* Compact TomSelect mobile content when keyboard is open */
/* These styles maximize space for options when typing on mobile */
.keyboard-visible[b-m1nztuzuee]  .mobile-search-container {
  padding: 8px 12px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-search-input {
  padding: 8px 12px 8px 36px;
  font-size: 15px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-search-container .search-icon {
  left: 22px;
  width: 16px;
  height: 16px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-options-list {
  padding: 4px 8px;
  /* Extra bottom padding so last item isn't cut off by action buttons */
  padding-bottom: 8px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-option-item {
  padding: 8px 12px;
  font-size: 15px;
  min-height: 38px;
  margin-bottom: 1px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-actions {
  padding: 8px 12px;
  gap: 8px;
}

.keyboard-visible[b-m1nztuzuee]  .action-button {
  padding: 10px 16px;
  font-size: 14px;
  min-height: 40px;
}

/* ===== COLLAPSIBLE CHIPS SECTION ===== */
/* When keyboard opens, collapse chips to save vertical space for options */

.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips {
  min-height: 28px;
  max-height: 28px;
  padding: 4px 12px;
  gap: 6px;
  transition: all 200ms ease-out;
  overflow: hidden;
}

/* Hide individual chips when keyboard is open - show only count */
.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips .chips-container {
  display: none;
}

/* Transform label to be the main indicator */
.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips .chips-label {
  font-size: 13px;
  padding: 2px 10px;
  /* an ink chip: its label takes the inverse pair so both flip together in dark mode */
  background: var(--fs-bg-inverse);
  color: var(--fs-text-on-inverse);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Add expand hint arrow after the count */
.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips .chips-label::after {
  content: "selected • tap to edit";
  font-weight: 400;
  opacity: 0.9;
  margin-left: 4px;
}

/* ========================================
   Accessibility
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mobile-bottom-sheet[b-m1nztuzuee] {
    --sheet-border: currentColor;
  }

  .sheet-container[b-m1nztuzuee] {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-sheet[b-m1nztuzuee],
  .sheet-backdrop[b-m1nztuzuee],
  .sheet-container[b-m1nztuzuee],
  .drag-indicator[b-m1nztuzuee],
  .sheet-close-btn[b-m1nztuzuee] {
    animation: none !important;
    transition: none !important;
  }

  /* Instant show/hide without animation */
  .mobile-bottom-sheet.open .sheet-container[b-m1nztuzuee] {
    transform: translateY(0);
  }

  .mobile-bottom-sheet.closing .sheet-container[b-m1nztuzuee] {
    transform: translateY(100%);
  }
}

/* Focus visible styles for keyboard navigation */
.sheet-drag-handle:focus-visible[b-m1nztuzuee],
.sheet-body:focus-visible[b-m1nztuzuee] {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .mobile-bottom-sheet[b-m1nztuzuee] {
    display: none !important;
  }
}
/* /Components/Shared/MobileBottomSheetList.razor.rz.scp.css */
/* ==========================================================================
   Mobile Bottom Sheet List Component Styles
   Material Design 3 with Dark Mode Support
   ========================================================================== */

.mobile-bottom-sheet-list[b-874xsn7eru] {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--surface, var(--fs-bg-primary));
  color: var(--on-surface, var(--fs-text-primary));
}

/* ==========================================================================
   Search Container
   ========================================================================== */

.search-container[b-874xsn7eru] {
  flex-shrink: 0;
  padding: 16px;
  background-color: var(--surface, var(--fs-bg-primary));
  border-bottom: 1px solid var(--outline-variant, var(--fs-border-hover));
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-input-wrapper[b-874xsn7eru] {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--surface-container-high, var(--fs-bg-selected));
  border-radius: 28px;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.search-input-wrapper:focus-within[b-874xsn7eru] {
  background-color: var(--surface-container-highest, var(--fs-bg-selected));
}

.search-icon[b-874xsn7eru] {
  position: absolute;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface-variant, var(--fs-text-body));
  pointer-events: none;
}

.search-input[b-874xsn7eru] {
  flex: 1;
  width: 100%;
  height: 56px;
  padding: 16px 48px 16px 52px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: var(--on-surface, var(--fs-text-primary));
  outline: none;
}

.search-input[b-874xsn7eru]::placeholder {
  color: var(--on-surface-variant, var(--fs-text-body));
  opacity: 1;
}

.search-input[b-874xsn7eru]::-webkit-search-cancel-button {
  display: none;
}

.clear-search-btn[b-874xsn7eru] {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--on-surface-variant, var(--fs-text-body));
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.clear-search-btn:hover[b-874xsn7eru] {
  background-color: var(--surface-container-highest, var(--fs-bg-selected));
}

.clear-search-btn:active[b-874xsn7eru] {
  background-color: var(--surface-container, var(--fs-bg-selected));
}

/* ==========================================================================
   Results Count
   ========================================================================== */

.results-count[b-874xsn7eru] {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--on-surface-variant, var(--fs-text-body));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   List Container
   ========================================================================== */

.list-container[b-874xsn7eru] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ==========================================================================
   List Items
   ========================================================================== */

.list-item[b-874xsn7eru] {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 16px;
  gap: 16px;
  background-color: var(--surface, var(--fs-bg-primary));
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.list-item:hover[b-874xsn7eru] {
  background-color: var(--surface-container-high, var(--fs-bg-selected));
}

.list-item:active[b-874xsn7eru] {
  background-color: var(--surface-container-highest, var(--fs-bg-selected));
}

.list-item:focus[b-874xsn7eru] {
  outline: 2px solid var(--primary, var(--fs-primary-text));
  outline-offset: -2px;
}

.list-item.selected[b-874xsn7eru] {
  background-color: var(--secondary-container, var(--fs-primary-light));
}

.list-item.selected:hover[b-874xsn7eru] {
  background-color: var(--secondary-container, var(--fs-primary-light));
  opacity: 0.9;
}

/* Touch-friendly minimum target size */
@media (pointer: coarse) {
  .list-item[b-874xsn7eru] {
    min-height: 60px;
  }
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.checkbox-wrapper[b-874xsn7eru] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.list-item-checkbox[b-874xsn7eru] {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.checkbox-checkmark[b-874xsn7eru] {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid var(--on-surface-variant, var(--fs-text-body));
  border-radius: 4px;
  background-color: transparent;
  transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}

.list-item-checkbox:checked + .checkbox-checkmark[b-874xsn7eru] {
  background-color: var(--primary, var(--fs-primary));
  border-color: var(--primary, var(--fs-primary));
}

.list-item-checkbox:checked + .checkbox-checkmark[b-874xsn7eru]::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid var(--on-primary, var(--fs-bg-primary));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.list-item-checkbox:focus + .checkbox-checkmark[b-874xsn7eru] {
  outline: 2px solid var(--primary, var(--fs-primary-text));
  outline-offset: 2px;
}

/* ==========================================================================
   List Item Content
   ========================================================================== */

.list-item-content[b-874xsn7eru] {
  flex: 1;
  min-width: 0;
}

.list-item-text[b-874xsn7eru] {
  display: block;
  font-size: 16px;
  line-height: 24px;
  color: var(--on-surface, var(--fs-text-primary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item-text[b-874xsn7eru]  mark.search-highlight {
  background-color: var(--tertiary-container, var(--fs-error-light));
  color: var(--on-tertiary-container, var(--fs-text-primary));
  font-weight: 600;
  border-radius: 2px;
  padding: 0 2px;
}

/* ==========================================================================
   Selected Indicator
   ========================================================================== */

.selected-indicator[b-874xsn7eru] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--primary, var(--fs-primary-text));
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-state[b-874xsn7eru] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
}

.loading-spinner[b-874xsn7eru] {
  width: 40px;
  height: 40px;
  border: 4px solid var(--surface-container-highest, var(--fs-bg-selected));
  border-top-color: var(--fs-text-primary);
  border-radius: 50%;
  animation: spin-b-874xsn7eru 1s linear infinite;
}

@keyframes spin-b-874xsn7eru {
  to {
    transform: rotate(360deg);
  }
}

.loading-text[b-874xsn7eru] {
  font-size: 14px;
  color: var(--on-surface-variant, var(--fs-text-body));
}

/* ==========================================================================
   No Results State
   ========================================================================== */

.no-results-state[b-874xsn7eru] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.no-results-icon[b-874xsn7eru] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-color: var(--surface-container-high, var(--fs-bg-selected));
  color: var(--on-surface-variant, var(--fs-text-body));
}

.no-results-title[b-874xsn7eru] {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--on-surface, var(--fs-text-primary));
}

.no-results-message[b-874xsn7eru] {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: var(--on-surface-variant, var(--fs-text-body));
}

.no-results-action[b-874xsn7eru] {
  padding: 10px 24px;
  border: none;
  border-radius: 20px;
  background-color: var(--primary-container, var(--fs-primary-light));
  color: var(--on-primary-container, var(--fs-primary-text-active));
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.no-results-action:hover[b-874xsn7eru] {
  background-color: var(--primary-container, var(--fs-primary-light));
  opacity: 0.9;
}

.no-results-action:active[b-874xsn7eru] {
  background-color: var(--primary-container, var(--fs-primary-light));
  opacity: 0.8;
}

/* ==========================================================================
   Placeholder
   ========================================================================== */

.list-item-placeholder[b-874xsn7eru] {
  height: 56px;
  margin: 0 16px;
  background-color: var(--surface-container-high, var(--fs-bg-selected));
  border-radius: 8px;
  overflow: hidden;
}

.placeholder-shimmer[b-874xsn7eru] {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--surface-container-highest, var(--fs-bg-selected)) 50%,
    transparent 100%
  );
  animation: shimmer-b-874xsn7eru 1.5s infinite;
}

@keyframes shimmer-b-874xsn7eru {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ==========================================================================
   Selection Summary
   ========================================================================== */

.selection-summary[b-874xsn7eru] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: var(--surface-container-low, var(--fs-bg-selected));
  border-top: 1px solid var(--outline-variant, var(--fs-border-hover));
}

.selection-count[b-874xsn7eru] {
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface, var(--fs-text-primary));
}

.clear-selection-btn[b-874xsn7eru] {
  padding: 8px 16px;
  border: none;
  border-radius: 16px;
  background-color: transparent;
  color: var(--primary, var(--fs-primary-text));
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.clear-selection-btn:hover[b-874xsn7eru] {
  background-color: var(--surface-container-high, var(--fs-bg-selected));
}

.clear-selection-btn:active[b-874xsn7eru] {
  background-color: var(--surface-container-highest, var(--fs-bg-selected));
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *[b-874xsn7eru] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .list-item:focus[b-874xsn7eru] {
    outline-width: 3px;
  }

  .checkbox-checkmark[b-874xsn7eru] {
    border-width: 3px;
  }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
  .search-container[b-874xsn7eru] {
    padding: 12px;
  }

  .list-item[b-874xsn7eru] {
    padding: 12px 16px;
  }

  .list-item-text[b-874xsn7eru] {
    font-size: 15px;
  }

  .no-results-state[b-874xsn7eru] {
    padding: 32px 16px;
  }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  .selection-summary[b-874xsn7eru] {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}
/* /Components/Shared/ModalComponent.razor.rz.scp.css */
.modal-dialog-centered[b-kbd0ofdeoa] {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}
/* /Components/Shared/ReconnectionModal.razor.rz.scp.css */
/* ============================================
   Reconnection Modal - Delightful UX Design
   Transform connection issues into positive experiences
   ============================================ */

/* Container and Overlay */
.reconnection-modal-container[b-0gqya0cj8t] {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  animation: fadeIn-b-0gqya0cj8t 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.reconnection-modal-container.active[b-0gqya0cj8t] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reconnection-overlay[b-0gqya0cj8t] {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--fs-primary-a05) 0%,
    var(--fs-warning-a05) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Main Content Container */
.reconnection-content[b-0gqya0cj8t] {
  position: relative;
  background: var(--fs-bg-primary);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  max-width: 480px;
  width: 90%;
  box-shadow: var(--fs-shadow-dialog);
  transform: translateY(0);
  animation: slideUp-b-0gqya0cj8t 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

/* Connection Visual Animation */
.connection-visual[b-0gqya0cj8t] {
  position: relative;
  height: 160px;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.connection-hub[b-0gqya0cj8t] {
  position: relative;
  width: 80px;
  height: 80px;
}

.hub-core[b-0gqya0cj8t] {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-border-selected) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hubPulse-b-0gqya0cj8t 2s ease-in-out infinite;
  z-index: 3;
}

.hub-core svg[b-0gqya0cj8t] {
  width: 36px;
  height: 36px;
  color: var(--fs-text-inverse);
  animation: iconFloat-b-0gqya0cj8t 3s ease-in-out infinite;
}

/* Pulse Rings */
.pulse-ring[b-0gqya0cj8t] {
  position: absolute;
  inset: -20px;
  border: 2px solid;
  border-radius: 50%;
  opacity: 0;
  animation: pulseRing-b-0gqya0cj8t 3s ease-out infinite;
}

.pulse-ring-1[b-0gqya0cj8t] {
  border-color: var(--fs-primary-a30);
  animation-delay: 0s;
}

.pulse-ring-2[b-0gqya0cj8t] {
  border-color: var(--fs-primary-a20);
  animation-delay: 1s;
}

.pulse-ring-3[b-0gqya0cj8t] {
  border-color: var(--fs-primary-a10);
  animation-delay: 2s;
}

/* Orbiting Connection Points */
.connection-point[b-0gqya0cj8t] {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--fs-bg-primary);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: orbitFloat-b-0gqya0cj8t 8s ease-in-out infinite;
}

.point-1[b-0gqya0cj8t] {
  top: 10px;
  left: -60px;
  background: linear-gradient(135deg, var(--fs-error-light) 0%, var(--fs-error-light) 100%);
  animation-delay: 0s;
}

.point-2[b-0gqya0cj8t] {
  top: 10px;
  right: -60px;
  background: linear-gradient(135deg, var(--fs-bg-selected) 0%, var(--fs-primary-bg) 100%);
  animation-delay: 2.67s;
}

.point-3[b-0gqya0cj8t] {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
  animation-delay: 5.33s;
}

.point-icon svg[b-0gqya0cj8t] {
  width: 24px;
  height: 24px;
  opacity: 0.7;
}

.point-1 .point-icon svg[b-0gqya0cj8t] {
  color: var(--fs-error);
}
.point-2 .point-icon svg[b-0gqya0cj8t] {
  color: var(--fs-primary-text);
}
.point-3 .point-icon svg[b-0gqya0cj8t] {
  color: var(--fs-success);
}

/* Progress Indicator */
.reconnection-progress[b-0gqya0cj8t] {
  margin-bottom: 2rem;
}

.progress-track[b-0gqya0cj8t] {
  height: 4px;
  background: var(--fs-border-default);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-fill[b-0gqya0cj8t] {
  height: 100%;
  background: linear-gradient(90deg, var(--fs-primary) 0%, var(--fs-border-selected) 50%, var(--fs-primary-border) 100%);
  border-radius: 2px;
  width: 0%;
  animation: progressFill-b-0gqya0cj8t 3s ease-in-out infinite;
}

.progress-dots[b-0gqya0cj8t] {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.progress-dot[b-0gqya0cj8t] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fs-border-default);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-dot.active[b-0gqya0cj8t] {
  background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-border-selected) 100%);
  transform: scale(1.4);
  box-shadow: none;
}

/* Messaging Section */
.reconnection-messaging[b-0gqya0cj8t] {
  text-align: center;
  margin-bottom: 1.5rem;
}

.reconnection-title[b-0gqya0cj8t] {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.title-icon[b-0gqya0cj8t] {
  font-size: 1.25rem;
  animation: sparkle-b-0gqya0cj8t 2s ease-in-out infinite;
}

.reconnection-subtitle[b-0gqya0cj8t] {
  font-size: 0.9375rem;
  color: var(--fs-text-secondary);
  margin: 0 0 1rem;
  font-weight: 400;
}

/* Message Carousel */
.message-carousel[b-0gqya0cj8t] {
  position: relative;
  height: 32px;
  overflow: hidden;
}

.carousel-message[b-0gqya0cj8t] {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
  color: var(--fs-success);
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
  padding: 0.375rem 1rem;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-message.active[b-0gqya0cj8t] {
  opacity: 1;
  transform: translateY(0);
}

/* Status Information */
.reconnection-status[b-0gqya0cj8t] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--fs-bg-hover);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.status-item[b-0gqya0cj8t] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-label[b-0gqya0cj8t] {
  font-size: 0.8125rem;
  color: var(--fs-text-muted);
  font-weight: 500;
}

.status-value[b-0gqya0cj8t] {
  font-size: 0.875rem;
  color: var(--fs-text-primary);
  font-weight: 600;
}

.status-timer[b-0gqya0cj8t] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fs-primary-text);
}

.timer-icon[b-0gqya0cj8t] {
  animation: tick-b-0gqya0cj8t 1s steps(1) infinite;
}

/* Action Buttons */
.reconnection-actions[b-0gqya0cj8t] {
  display: flex;
  gap: 0.75rem;
}

.btn-reconnect-primary[b-0gqya0cj8t] {
  flex: 1;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-border-selected) 100%);
  color: var(--fs-text-inverse);
  border: none;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-reconnect-primary:hover[b-0gqya0cj8t] {
  box-shadow: none;
}

.btn-reconnect-primary:active[b-0gqya0cj8t] {
  transform: translateY(0);
}

.btn-icon[b-0gqya0cj8t] {
  animation: rotate-b-0gqya0cj8t 2s linear infinite;
  font-size: 1.125rem;
}

.btn-reconnect-secondary[b-0gqya0cj8t] {
  padding: 0.75rem 1.25rem;
  background: var(--fs-bg-primary);
  color: var(--fs-text-secondary);
  border: 1px solid var(--fs-border-default);
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-reconnect-secondary:hover[b-0gqya0cj8t] {
  background: var(--fs-bg-hover);
  border-color: var(--fs-border-hover);
}

/* Decorative Elements */
.decorative-elements[b-0gqya0cj8t] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 24px;
}

.floating-orb[b-0gqya0cj8t] {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
}

.orb-1[b-0gqya0cj8t] {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, var(--fs-primary) 0%, transparent 70%);
  top: -40px;
  right: -40px;
  animation: floatOrb1-b-0gqya0cj8t 15s ease-in-out infinite;
}

.orb-2[b-0gqya0cj8t] {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--fs-warning) 0%, transparent 70%);
  bottom: -20px;
  left: -20px;
  animation: floatOrb2-b-0gqya0cj8t 20s ease-in-out infinite;
}

.orb-3[b-0gqya0cj8t] {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, var(--fs-success) 0%, transparent 70%);
  top: 50%;
  right: -30px;
  animation: floatOrb3-b-0gqya0cj8t 18s ease-in-out infinite;
}

.floating-line[b-0gqya0cj8t] {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent,
    var(--fs-primary-a10),
    transparent
  );
  height: 1px;
}

.line-1[b-0gqya0cj8t] {
  width: 200px;
  top: 30%;
  left: -50px;
  animation: slideLine1-b-0gqya0cj8t 10s ease-in-out infinite;
}

.line-2[b-0gqya0cj8t] {
  width: 150px;
  bottom: 25%;
  right: -50px;
  animation: slideLine2-b-0gqya0cj8t 12s ease-in-out infinite;
}

/* Animations */
@keyframes fadeIn-b-0gqya0cj8t {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp-b-0gqya0cj8t {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes hubPulse-b-0gqya0cj8t {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes iconFloat-b-0gqya0cj8t {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes pulseRing-b-0gqya0cj8t {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes orbitFloat-b-0gqya0cj8t {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(10px, -10px) rotate(90deg);
  }
  50% {
    transform: translate(0, -20px) rotate(180deg);
  }
  75% {
    transform: translate(-10px, -10px) rotate(270deg);
  }
}

@keyframes progressFill-b-0gqya0cj8t {
  0% {
    width: 0%;
  }
  50% {
    width: 65%;
  }
  100% {
    width: 30%;
  }
}

@keyframes sparkle-b-0gqya0cj8t {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@keyframes rotate-b-0gqya0cj8t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes tick-b-0gqya0cj8t {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.5;
  }
}

@keyframes floatOrb1-b-0gqya0cj8t {
  0%,
  100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(-30px, 20px);
  }
  66% {
    transform: translate(20px, -10px);
  }
}

@keyframes floatOrb2-b-0gqya0cj8t {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(40px, -30px);
  }
}

@keyframes floatOrb3-b-0gqya0cj8t {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-20px, 15px);
  }
  75% {
    transform: translate(15px, -25px);
  }
}

@keyframes slideLine1-b-0gqya0cj8t {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    transform: translateX(100px);
    opacity: 1;
  }
}

@keyframes slideLine2-b-0gqya0cj8t {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    transform: translateX(-80px);
    opacity: 1;
  }
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .reconnection-content[b-0gqya0cj8t] {
    padding: 2rem 1.5rem;
    width: 95%;
    border-radius: 20px;
  }

  .connection-visual[b-0gqya0cj8t] {
    height: 120px;
    margin-bottom: 1.5rem;
  }

  .connection-hub[b-0gqya0cj8t] {
    width: 64px;
    height: 64px;
  }

  .hub-core svg[b-0gqya0cj8t] {
    width: 28px;
    height: 28px;
  }

  .connection-point[b-0gqya0cj8t] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .point-1[b-0gqya0cj8t] {
    left: -40px;
  }
  .point-2[b-0gqya0cj8t] {
    right: -40px;
  }

  .point-icon svg[b-0gqya0cj8t] {
    width: 20px;
    height: 20px;
  }

  .reconnection-title[b-0gqya0cj8t] {
    font-size: 1.125rem;
  }

  .reconnection-subtitle[b-0gqya0cj8t] {
    font-size: 0.875rem;
  }

  .reconnection-actions[b-0gqya0cj8t] {
    flex-direction: column;
  }

  .floating-orb[b-0gqya0cj8t],
  .floating-line[b-0gqya0cj8t] {
    display: none; /* Hide decorative elements on mobile for performance */
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *[b-0gqya0cj8t] {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }
}
/* /Components/Shared/ServingAmountInput.razor.rz.scp.css */
.serving-amount-input[b-pts3w9b1wt] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.amount-input[b-pts3w9b1wt] {
  max-width: 100px;
}

.grams-display[b-pts3w9b1wt] {
  font-size: 0.85rem;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}
/* /Components/Shared/SessionUnverifiedBanner.razor.rz.scp.css */
/* The "Can't reach Portion Pilot" banner (#981). Role tokens only (design-tokens.css), so the restyle
   (#1028, slice 2) repaints it with the rest of the app. Rules from the design-system session. */

.session-banner[b-0s75qd0zr5] {
    background: var(--fs-warning-light);
    color: var(--fs-text-primary);
    border: 0;
    border-radius: var(--fs-radius-lg);
    padding: var(--fs-spacing-md) var(--fs-spacing-lg);
    margin: var(--fs-spacing-sm) var(--fs-spacing-sm) 0;
}

/* Warning text is just at AA (4.51:1) on warning-light: the icon and the label only, never the body. */
.session-banner-icon[b-0s75qd0zr5],
.session-banner-label[b-0s75qd0zr5] {
    color: var(--fs-warning-text);
}

.session-banner-label[b-0s75qd0zr5] {
    font-weight: 600;
    margin-right: var(--fs-spacing-xs);
}

.session-banner-icon[b-0s75qd0zr5] {
    margin-right: var(--fs-spacing-xs);
}

.session-banner-link[b-0s75qd0zr5] {
    color: var(--fs-text-primary);
    text-decoration: underline;
    font-size: var(--fs-font-size-sm);
}

/* Secondary: the primary colour is reserved for a screen's one main action. */
.session-banner-button[b-0s75qd0zr5] {
    background: var(--fs-bg-primary);
    color: var(--fs-text-primary);
    border: 1px solid var(--fs-border-hover);
    border-radius: var(--fs-radius-lg);
    min-height: var(--fs-mobile-tap-target-sm);
    padding: 0 var(--fs-spacing-md);
}

.session-banner-button:focus-visible[b-0s75qd0zr5] {
    outline: 2px solid var(--fs-border-focus);
    outline-offset: 2px;
}

.session-banner-button:disabled[b-0s75qd0zr5] {
    color: var(--fs-text-secondary);
}
/* /Components/Shared/TomSelectDropdown.razor.rz.scp.css */
/* TomSelect Modern Minimalist Design */
/* Matches the polished design of the application with clean, professional styling */

/* ⚠️ Dead: CSS isolation rewrites this to :root[b-…], which never matches <html>, so no --ts-* here
   resolves. Radii therefore read the global --fs-radius-* tokens directly. */
:root[b-pomttcjnb0] {
  --ts-primary: var(--fs-primary); /* brand blue (was indigo #4f46e5) */
  --ts-primary-hover: var(--fs-primary-hover);
  --ts-primary-light: var(--fs-bg-selected);
  --ts-background: var(--fs-bg-secondary);
  --ts-surface: var(--fs-bg-primary);
  --ts-text-primary: var(--fs-text-primary);
  --ts-text-secondary: var(--fs-text-secondary);
  --ts-text-placeholder: var(--fs-text-muted);
  --ts-border: var(--fs-border-default);
  --ts-hover: var(--fs-bg-tertiary);
  --ts-focus: var(--fs-bg-selected);
  --ts-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ts-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ts-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ts-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tom-select-container[b-pomttcjnb0] {
  width: 100%;
  position: relative;
  z-index: 100; /* Ensure container can stack dropdown above other elements */
}

.tom-select-wrapper[b-pomttcjnb0] {
  width: 100%;
}

/* Loading State */
.tom-select-loading[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--fs-radius-md);
  min-height: 48px;
}

.loading-spinner[b-pomttcjnb0] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--fs-border-default);
  border-top-color: var(--fs-text-primary);
  border-radius: 50%;
  animation: spin-b-pomttcjnb0 600ms linear infinite;
}

@keyframes spin-b-pomttcjnb0 {
  to {
    transform: rotate(360deg);
  }
}

/* Error State */
.tom-select-error[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--fs-error-light);
  border: 1px solid var(--fs-error-light);
  border-radius: var(--fs-radius-md);
  color: var(--fs-error-text);
  font-size: 14px;
}

.error-icon[b-pomttcjnb0] {
  font-size: 18px;
  color: var(--fs-error);
}

.retry-button[b-pomttcjnb0] {
  margin-left: auto;
  padding: 6px 12px;
  background: var(--fs-error);
  color: var(--fs-text-on-status);
  border: none;
  border-radius: var(--fs-radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--ts-transition);
}

.retry-button:hover[b-pomttcjnb0] {
  background: var(--fs-error-text);
}

/* Label Styling */
.tom-select-label[b-pomttcjnb0] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ts-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.tom-select-label.required[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 4px;
}

.required-indicator[b-pomttcjnb0] {
  color: var(--fs-error);
  font-size: 14px;
}

/* Base TomSelect Styling */
.tom-select[b-pomttcjnb0] {
  width: 100%;
}

/* Control (Search Input) */
.tom-select .ts-control[b-pomttcjnb0] {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--fs-radius-md);
  padding: 10px 16px;
  min-height: 48px;
  font-size: 16px;
  color: var(--ts-text-primary);
  transition: var(--ts-transition);
  box-shadow: none;
  cursor: text;
}

.tom-select .ts-control:hover[b-pomttcjnb0] {
  border-color: var(--ts-text-secondary);
  box-shadow: none;
}

.tom-select.focus .ts-control[b-pomttcjnb0],
.tom-select .ts-control:focus[b-pomttcjnb0] {
  border-color: var(--ts-primary);
  outline: none;
  box-shadow:
    0 0 0 3px var(--ts-primary-light),
    var(--ts-shadow-md);
  background: var(--ts-surface);
}

/* Input inside control */
.tom-select .ts-control input[b-pomttcjnb0] {
  font-size: 16px !important;
  color: var(--ts-text-primary);
  font-family: inherit;
}

.tom-select .ts-control input[b-pomttcjnb0]::placeholder {
  color: var(--ts-text-placeholder);
  opacity: 1;
}

/* Items (selected values) */
.tom-select .ts-control .item[b-pomttcjnb0] {
  background: var(--ts-primary);
  color: var(--fs-text-inverse);
  border: none;
  border-radius: var(--fs-radius-sm);
  padding: 4px 10px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 4px 2px 0;
  transition: var(--ts-transition);
}

.tom-select .ts-control .item:hover[b-pomttcjnb0] {
  background: var(--ts-primary-hover);
}

/* Dropdown Container */
.tom-select .ts-dropdown[b-pomttcjnb0] {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--fs-radius-md);
  box-shadow: var(--fs-shadow-dialog);
  margin-top: 4px;
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 9999 !important; /* CRITICAL FIX: Increase z-index to overlay properly */
  position: absolute !important; /* Ensure dropdown overlays content */
  animation: fadeInSlide-b-pomttcjnb0 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInSlide-b-pomttcjnb0 {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown scrollbar styling */
.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar {
  width: 8px;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-track {
  background: transparent;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-thumb {
  background: var(--ts-border);
  border-radius: 4px;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-thumb:hover {
  background: var(--ts-text-secondary);
}

/* Options */
.tom-select .ts-dropdown .option[b-pomttcjnb0] {
  padding: 12px 16px;
  border-radius: var(--fs-radius-sm);
  cursor: pointer;
  color: var(--ts-text-primary);
  font-size: 15px;
  transition: var(--ts-transition);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.tom-select .ts-dropdown .option:hover[b-pomttcjnb0] {
  background: var(--ts-hover);
  color: var(--ts-text-primary);
}

.tom-select .ts-dropdown .option.active[b-pomttcjnb0] {
  background: var(--ts-focus);
  color: var(--ts-primary);
  font-weight: 500;
}

.tom-select .ts-dropdown .option.selected[b-pomttcjnb0] {
  background: var(--ts-primary-light);
  color: var(--ts-primary);
  font-weight: 500;
}

.tom-select .ts-dropdown .option.selected[b-pomttcjnb0]::after {
  content: "✓";
  margin-left: auto;
  font-weight: 600;
  color: var(--ts-primary);
}

/* Option groups */
.tom-select .ts-dropdown .optgroup-header[b-pomttcjnb0] {
  padding: 8px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ts-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.tom-select .ts-dropdown .optgroup-header:first-child[b-pomttcjnb0] {
  margin-top: 0;
}

.tom-select .ts-dropdown .optgroup .option[b-pomttcjnb0] {
  padding-left: 28px;
}

/* Create option */
.tom-select .ts-dropdown .create[b-pomttcjnb0] {
  padding: 12px 16px;
  border-radius: var(--fs-radius-sm);
  color: var(--ts-primary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--ts-transition);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tom-select .ts-dropdown .create[b-pomttcjnb0]::before {
  content: "+";
  font-size: 18px;
  font-weight: 600;
}

.tom-select .ts-dropdown .create:hover[b-pomttcjnb0] {
  background: var(--ts-focus);
}

/* No results */
.tom-select .ts-dropdown .no-results[b-pomttcjnb0] {
  padding: 12px 16px;
  color: var(--ts-text-secondary);
  font-size: 15px;
  text-align: center;
}

/* Plugin: Clear Button */
.tom-select .ts-control .clear-button[b-pomttcjnb0] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ts-text-secondary);
  color: var(--fs-text-on-inverse);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.6;
  transition: var(--ts-transition);
}

.tom-select .ts-control .clear-button:hover[b-pomttcjnb0] {
  opacity: 1;
  background: var(--ts-text-primary);
}

/* Plugin: Dropdown Header */
.tom-select .ts-dropdown .dropdown-header[b-pomttcjnb0] {
  padding: 8px 16px;
  border-bottom: 1px solid var(--ts-border);
  margin: -8px -8px 8px;
  background: var(--ts-background);
  border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0;
  font-size: 13px;
  color: var(--ts-text-secondary);
  font-weight: 500;
}

/* Disabled State */
.tom-select.disabled .ts-control[b-pomttcjnb0],
.tom-select .ts-control[disabled][b-pomttcjnb0] {
  background: var(--ts-background);
  color: var(--ts-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.tom-select.disabled .ts-control:hover[b-pomttcjnb0] {
  border-color: var(--ts-border);
  box-shadow: none;
}

/* Helper Text */
.tom-select-helper-text[b-pomttcjnb0] {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ts-text-secondary);
  line-height: 1.4;
}

/* Validation Message */
.tom-select-validation-message[b-pomttcjnb0] {
  margin-top: 6px;
  font-size: 13px;
  color: var(--fs-error);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tom-select-validation-message[b-pomttcjnb0]::before {
  content: "⚠";
  font-size: 14px;
}

/* Screen reader only */
.sr-only[b-pomttcjnb0] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== MOBILE MODE STYLES ===== */

/* Pulse for the search chip, triggered by JS after scroll completes: a small scale nudge, no glow ring. */
@keyframes search-pulse-b-pomttcjnb0 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

/* Class added by JS after scroll completes to trigger pulse */
.search-chip-trigger.search-chip-pulse[b-pomttcjnb0] {
  animation: search-pulse-b-pomttcjnb0 800ms ease-out;
}

/* Search Chip Trigger - Mobile food search with clear affordance */
.search-chip-trigger[b-pomttcjnb0] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Clinic: neutral search field (was a lavender gradient that clashed with the theme) —
     calm white with a neutral border; the blue focus ring is the only colour event. */
  background: var(--fs-bg-primary);
  border: 1.5px solid var(--fs-border-default);
  border-radius: 14px;
  padding: 14px 18px;
  min-height: 52px; /* Touch target - exceeds 44px minimum */
  font-size: 16px; /* Prevents iOS zoom */
  cursor: pointer;
  transition: all 200ms ease;
  /* Animation triggered by JS after scroll completes - see .search-chip-pulse class */
  text-align: left;
  font-family: inherit;
}

.search-chip-trigger:hover:not(:disabled)[b-pomttcjnb0] {
  border-color: var(--fs-border-hover);
}

.search-chip-trigger:focus[b-pomttcjnb0] {
  outline: none;
  border-color: var(--fs-primary-text, var(--fs-border-focus));
  box-shadow: 0 0 0 3px var(--fs-primary-a12);
}

.search-chip-trigger:active:not(:disabled)[b-pomttcjnb0] {
  transform: scale(0.98);
}

.search-chip-trigger:disabled[b-pomttcjnb0] {
  background: var(--ts-background);
  border-color: var(--ts-border);
  cursor: not-allowed;
  opacity: 0.6;
  animation: none;
}

/* Search icon in white badge */
.search-chip-trigger .chip-icon-wrapper[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--fs-bg-primary);
  border-radius: 8px;
  color: var(--ts-primary); /* brand blue (was hardcoded indigo #4f46e5) */
  box-shadow: none;
  flex-shrink: 0;
}

.search-chip-trigger .chip-text[b-pomttcjnb0] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fs-text-primary); /* Dark brand blue for readability (was indigo #3730a3) */
  font-weight: 500;
}

/* Legacy support - keep old class for backwards compatibility */
.mobile-trigger-button[b-pomttcjnb0] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--fs-radius-md);
  padding: 12px 16px;
  min-height: 44px;
  font-size: 16px;
  color: var(--ts-text-primary);
  cursor: pointer;
  transition: var(--ts-transition);
  box-shadow: none;
  text-align: left;
  font-family: inherit;
}

.mobile-trigger-button:hover:not(:disabled)[b-pomttcjnb0] {
  border-color: var(--ts-text-secondary);
  box-shadow: none;
  background: var(--ts-hover);
}

.mobile-trigger-button:focus[b-pomttcjnb0] {
  outline: none;
  border-color: var(--ts-primary);
  box-shadow:
    0 0 0 3px var(--ts-primary-light),
    var(--ts-shadow-md);
}

.mobile-trigger-button:active:not(:disabled)[b-pomttcjnb0] {
  transform: scale(0.98);
}

.mobile-trigger-button:disabled[b-pomttcjnb0] {
  background: var(--ts-background);
  color: var(--ts-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.mobile-trigger-button .trigger-text[b-pomttcjnb0] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ts-text-primary);
}

.mobile-trigger-button .trigger-icon[b-pomttcjnb0] {
  flex-shrink: 0;
  margin-left: 8px;
  color: var(--ts-text-secondary);
  transition: transform 150ms;
}

.mobile-trigger-button[aria-expanded="true"] .trigger-icon[b-pomttcjnb0] {
  transform: rotate(180deg);
}

/* Mobile Selection List Container */
/* CRITICAL FIX: Container should NOT scroll - only the options list inside scrolls.
   This ensures search input and action buttons are always visible. */
.mobile-selection-list[b-pomttcjnb0] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* Container doesn't scroll - options list does */
  min-height: 200px;
  /* CRITICAL: Prevent iOS auto-zoom on interactions */
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%; /* Prevent text resizing */
  /* FIX: Counteract .sheet-body padding so the selection list goes edge-to-edge.
     The sheet-body has padding: 20px (bottom includes safe-area), but the food
     selection list needs full-width layout for proper centering and dimensions. */
  margin: -20px;
  margin-bottom: calc(-20px - env(safe-area-inset-bottom, 0px));
}

/* Mobile Search Container - Fixed at top, doesn't shrink */
.mobile-search-container[b-pomttcjnb0] {
  position: relative;
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ts-border);
  background: var(--ts-surface);
}

.mobile-search-input[b-pomttcjnb0] {
  width: 100%;
  padding: 10px 16px 10px 52px;
  border: 1px solid var(--ts-border);
  border-radius: var(--fs-radius-sm);
  font-size: 16px; /* Prevents iOS zoom */
  color: var(--ts-text-primary);
  background: var(--ts-background);
  transition: var(--ts-transition);
}

.mobile-search-input:focus[b-pomttcjnb0] {
  outline: none;
  border-color: var(--ts-primary);
  box-shadow: 0 0 0 2px var(--ts-primary-light);
  background: var(--ts-surface);
}

.mobile-search-input[b-pomttcjnb0]::placeholder {
  color: var(--ts-text-placeholder);
}

.mobile-search-container .search-icon[b-pomttcjnb0] {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ts-text-secondary);
  pointer-events: none;
}

/* Mobile Options List - This is the ONLY scrollable element */
/* The options list fills remaining space and scrolls independently */
.mobile-options-list[b-pomttcjnb0] {
  flex: 1;
  min-height: 0; /* CRITICAL for flex item scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
  /* Prevent iOS zoom on double-tap */
  touch-action: pan-y;
}

.mobile-options-list[b-pomttcjnb0]::-webkit-scrollbar {
  width: 6px;
}

.mobile-options-list[b-pomttcjnb0]::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-options-list[b-pomttcjnb0]::-webkit-scrollbar-thumb {
  background: var(--ts-border);
  border-radius: 3px;
}

/* Mobile Option Item */
.mobile-option-item[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--fs-radius-sm);
  background: transparent;
  color: var(--ts-text-primary);
  font-size: 16px; /* Prevents iOS zoom */
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--ts-transition);
  margin-bottom: 4px;
  min-height: 44px; /* Touch target minimum */
  /* FIX: Prevent iOS auto-zoom on tap */
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: var(--fs-primary-a10);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.mobile-option-item:hover[b-pomttcjnb0] {
  background: var(--ts-hover);
}

.mobile-option-item:active[b-pomttcjnb0] {
  transform: scale(0.98);
  background: var(--ts-focus);
}

.mobile-option-item.selected[b-pomttcjnb0] {
  background: var(--ts-primary-light);
  border-color: var(--ts-primary);
  color: var(--ts-primary);
  font-weight: 500;
}

.mobile-option-item .option-text[b-pomttcjnb0] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit; /* CRITICAL FIX: Inherit text color from parent button */
}

/* Checkbox Indicator (for multiple selection) */
.checkbox-indicator[b-pomttcjnb0] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  border: 2px solid var(--ts-border);
  border-radius: 4px;
  background: var(--ts-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--ts-transition);
}

.checkbox-indicator.checked[b-pomttcjnb0] {
  background: var(--ts-primary);
  border-color: var(--ts-primary);
}

.mobile-option-item:hover .checkbox-indicator[b-pomttcjnb0] {
  border-color: var(--ts-text-secondary);
}

.mobile-option-item.selected .checkbox-indicator[b-pomttcjnb0] {
  border-color: var(--ts-primary);
}

/* Selected Icon (for single selection) */
.selected-icon[b-pomttcjnb0] {
  flex-shrink: 0;
  margin-left: 12px;
  color: var(--ts-primary);
}

/* ===== SELECTED CHIPS SECTION - HORIZONTAL SCROLL ===== */
/* Inspired by Gmail recipients, SAP Fiori Filter Feedback Bar, Wise Design Chips */

/* Selected Chips Container - Compact horizontal row */
/* Collapses to compact badge when keyboard opens (see MobileBottomSheet.razor.css) */
.mobile-selected-chips[b-pomttcjnb0] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: linear-gradient(to right, var(--fs-success-light), var(--fs-success-light));
  border-bottom: 1px solid var(--fs-success-light);
  flex-shrink: 0;
  /* min-height is a floor; no max-height so a taller (34px) chip can't re-clip. */
  min-height: 44px;
  /* Smooth collapse/expand transition */
  transition: all 200ms ease-out;
  /* Prevent iOS auto-zoom */
  touch-action: pan-x pan-y;
}

.mobile-selected-chips .chips-label[b-pomttcjnb0] {
  font-size: 13px; /* Keep small for visual hierarchy */
  font-weight: 600;
  /* AA-safe success-text green (~5:1 on the light-green bar; #059669 was ~3.6:1, failed). */
  color: var(--fs-success-text);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  padding-right: 4px;
  /* Smooth transition for keyboard collapse state */
  transition: all 200ms ease-out;
}

/* Horizontal scrolling chips container */
.mobile-selected-chips .chips-container[b-pomttcjnb0] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-width: 0; /* Allow shrinking */
  padding: 2px 0;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
  /* Right-edge fade hints that more chips exist when the row overflows.
     Horizontal gradient only — every column stays fully opaque top-to-bottom,
     so it never clips descenders or the × icon. */
  -webkit-mask-image: linear-gradient(
    to right,
    var(--fs-text-primary) calc(100% - 24px),
    transparent
  );
  mask-image: linear-gradient(to right, var(--fs-text-primary) calc(100% - 24px), transparent);
}

.mobile-selected-chips .chips-container[b-pomttcjnb0]::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Individual Chip - Compact version. Native <button> (Enter/Space activation, tab
   order, no Space-scroll for free) — reset UA button chrome so it matches the design. */
.selected-chip[b-pomttcjnb0] {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit; /* buttons don't inherit font-family by default */
  margin: 0;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--fs-bg-primary);
  border: 1px solid var(--fs-success-light); /* one-off light mint border; no semantic token */
  border-radius: 14px;
  font-size: 14px; /* Increased slightly - visual only, not focusable input */
  font-weight: 500;
  color: var(--fs-success-text);
  cursor: pointer;
  transition: all 120ms ease;
  box-shadow: none;
  flex-shrink: 0; /* Don't shrink chips */
  height: 34px; /* Comfortable mobile tap target (whole chip removes on tap) */
  line-height: 1;
  /* CRITICAL: Prevent iOS auto-zoom on tap */
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
}

.selected-chip:hover[b-pomttcjnb0] {
  background: var(--fs-error-light);
  border-color: var(--fs-error-light);
  color: var(--fs-error-text);
}

.selected-chip:hover .chip-remove-icon[b-pomttcjnb0] {
  color: var(--fs-error);
  background: var(--fs-error-light); /* puck tracks the destructive red hover (was a green puck in a red chip) */
}

.selected-chip:active[b-pomttcjnb0] {
  transform: scale(0.95);
}

/* Keyboard focus ring only (mouse focus stays clean) — the chip is now a real button. */
.selected-chip:focus[b-pomttcjnb0] {
  outline: none;
}

.selected-chip:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--fs-success-text);
  outline-offset: 2px;
}

.selected-chip .chip-text[b-pomttcjnb0] {
  max-width: 100px; /* Slightly shorter for horizontal layout */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* The chip sets line-height:1; inherited here it makes the line box exactly 1em,
     so overflow:hidden (needed for the ellipsis) shears glyph descenders (g/y/p).
     line-height:normal grows the line box to the font's glyph extent (≈16.8px),
     well within the 34px chip's 22px content area — descenders no longer clip. */
  line-height: normal;
}

.selected-chip .chip-remove-icon[b-pomttcjnb0] {
  flex-shrink: 0;
  /* Standing "remove" affordance — a soft green puck so touch users (no hover) see
     the chip is removable. Darker glyph (var(--fs-success-text)) is AA-safe on the puck. */
  color: var(--fs-success-text);
  background: var(--fs-success-light); /* one-off light puck tint; no semantic token */
  padding: 2px;
  border-radius: 50%;
  box-sizing: content-box; /* keep the 16px glyph; padding grows the puck to ~20px */
  transition:
    color 120ms ease,
    background 120ms ease;
  width: 16px;
  height: 16px;
}

/* Chip Appearance Animation - Faster for horizontal flow */
@keyframes chip-pop-in-b-pomttcjnb0 {
  0% {
    opacity: 0;
    transform: scale(0.7) translateX(-10px);
  }
  60% {
    transform: scale(1.05) translateX(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

.selected-chip.chip-animate-in[b-pomttcjnb0] {
  animation: chip-pop-in-b-pomttcjnb0 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== SELECTION FLASH ANIMATION ===== */

/* Success flash animation for selected items */
@keyframes selection-flash-b-pomttcjnb0 {
  0% {
    background: var(--ts-primary-light);
  }
  25% {
    background: var(--fs-success-light);
  }
  50% {
    background: var(--fs-success-light);
  }
  100% {
    background: var(--ts-primary-light);
  }
}

.mobile-option-item.selection-flash[b-pomttcjnb0] {
  animation: selection-flash-b-pomttcjnb0 500ms ease-out;
}

/* Checkbox checkmark animation */
@keyframes checkmark-pop-b-pomttcjnb0 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.mobile-option-item.selection-flash .checkbox-indicator.checked[b-pomttcjnb0] {
  animation: checkmark-pop-b-pomttcjnb0 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mobile Actions (footer buttons) - Fixed at bottom, doesn't shrink */
.mobile-actions[b-pomttcjnb0] {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--ts-border);
  background: var(--ts-surface);
}

.action-button[b-pomttcjnb0] {
  flex: 1;
  /* block, not the inline-flex Mud gives every button: text-overflow only draws on a block box. */
  display: block;
  text-align: center;
  padding: 12px;
  border: none;
  border-radius: var(--fs-radius-pill);
  /* One line down to 360px ("Done (12 selected)" fits at 15px); narrower screens wrap to two lines,
     as before the restyle, rather than cut the count off. */
  white-space: nowrap;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: var(--ts-transition);
  min-height: 44px; /* Touch target minimum */
}

/* Under 360px the label may wrap; a two-line pill reads as a blob, so it becomes a 12px control. */
@media (max-width: 359.98px) {
  .action-button[b-pomttcjnb0] {
    white-space: normal;
    border-radius: var(--fs-radius-md);
  }
}

.action-button.primary[b-pomttcjnb0] {
  background: var(--ts-primary);
  color: var(--fs-text-inverse);
}

.action-button.primary:hover[b-pomttcjnb0] {
  background: var(--ts-primary-hover);
}

.action-button.primary:active[b-pomttcjnb0] {
  transform: scale(0.98);
}

.action-button.secondary[b-pomttcjnb0] {
  background: transparent;
  color: var(--ts-text-secondary);
  border: 1px solid var(--ts-border);
}

.action-button.secondary:hover[b-pomttcjnb0] {
  background: var(--ts-hover);
  border-color: var(--ts-text-secondary);
}

.action-button.secondary:active[b-pomttcjnb0] {
  transform: scale(0.98);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .tom-select .ts-control[b-pomttcjnb0] {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .tom-select .ts-dropdown[b-pomttcjnb0] {
    max-height: 240px;
  }

  .tom-select .ts-dropdown .option[b-pomttcjnb0] {
    padding: 14px 16px;
    font-size: 16px;
  }

  .tom-select-label[b-pomttcjnb0] {
    font-size: 15px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .tom-select .ts-control[b-pomttcjnb0] {
    border-width: 2px;
  }

  .tom-select .ts-dropdown .option.active[b-pomttcjnb0],
  .tom-select .ts-dropdown .option.selected[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: -2px;
  }

  .mobile-option-item.selected[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: -2px;
  }

  .mobile-trigger-button:focus[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  /* .loading-spinner is NOT in this list. Here it IS the ring (TomSelectDropdown.razor:9 is an empty
     div), and its only companion is an sr-only label a sighted user cannot read — so stopping it leaves
     a static grey circle and no indication anything is happening, which is #259 exactly. `animation:
     none` also clears animation-name, which the global exemption in animations.css cannot restore
     (it sets duration and iteration-count only), so this rule had the last word. */
  .tom-select .ts-control[b-pomttcjnb0],
  .tom-select .ts-dropdown .option[b-pomttcjnb0],
  .mobile-trigger-button[b-pomttcjnb0],
  .search-chip-trigger[b-pomttcjnb0],
  .mobile-option-item[b-pomttcjnb0],
  .action-button[b-pomttcjnb0] {
    animation: none;
    transition: none;
  }

  .tom-select .ts-dropdown[b-pomttcjnb0] {
    animation: none;
  }

  .mobile-trigger-button[aria-expanded="true"] .trigger-icon[b-pomttcjnb0] {
    transform: none;
  }
}

/* Focus visible (keyboard navigation) */
.tom-select .ts-dropdown .option:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: -2px;
}

.mobile-option-item:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: -2px;
}

.mobile-trigger-button:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: 2px;
}

.action-button:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: 2px;
}

/* ===== Parsed Result Styles ===== */

.parsed-result-loading[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--fs-bg-selected) 0%, var(--fs-bg-selected) 100%);
  border-bottom: 1px solid var(--fs-border-default);
  color: var(--fs-text-secondary);
  font-size: 14px;
}

.loading-spinner-small[b-pomttcjnb0] {
  width: 16px;
  height: 16px;
  border: 2px solid var(--fs-border-default);
  border-top-color: var(--fs-text-primary);
  border-radius: 50%;
  animation: spin-b-pomttcjnb0 0.8s linear infinite;
}

/* Uniform-grams mode banner ("Adding at: 100 g · tap any food"). Sticky so the quantity
   stays visible while the user scrolls the food list. Amber to match the fixed-serving pills. */
.uniform-grams-banner[b-pomttcjnb0] {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--fs-warning-light) 0%, var(--fs-warning-light) 100%);
  border-bottom: 2px solid var(--fs-warning);
  font-size: 14px;
  color: var(--fs-warning-text);
}

.uniform-grams-label[b-pomttcjnb0] {
  font-weight: 500;
}

.uniform-grams-value[b-pomttcjnb0] {
  font-size: 15px;
  font-weight: 700;
  color: var(--fs-warning-text);
}

.uniform-grams-hint[b-pomttcjnb0] {
  color: var(--fs-text-secondary);
  font-size: 13px;
}

.parsed-result-item[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
  border-bottom: 2px solid var(--fs-success);
  cursor: pointer;
  transition: all 0.2s ease;
}

.parsed-result-item:hover[b-pomttcjnb0],
.parsed-result-item:focus[b-pomttcjnb0] {
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%);
  outline: none;
}

.parsed-result-item:active[b-pomttcjnb0] {
  transform: scale(0.98);
}

.parsed-result-icon[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--fs-success);
  border-radius: 8px;
  color: var(--fs-text-on-inverse);
  flex-shrink: 0;
}

.parsed-result-content[b-pomttcjnb0] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.parsed-result-name[b-pomttcjnb0] {
  font-weight: 600;
  font-size: 15px;
  color: var(--fs-success-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.parsed-result-grams[b-pomttcjnb0] {
  font-size: 14px;
  font-weight: 500;
  color: var(--fs-success-text);
}

.parsed-result-calories[b-pomttcjnb0] {
  font-size: 13px;
  color: var(--fs-text-secondary);
  margin-left: 4px;
}

.parsed-result-badge[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--fs-success);
  border-radius: 20px;
  color: var(--fs-text-on-inverse);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== Mid-word completion candidates ("Did you mean…") ===== */
/* Shown when the typed food name is still an unfinished word ("egg wh"):
   the single resolved card would name the wrong food, so we offer the longer
   completions ("egg white", "egg whites") as tappable "Add as Fixed" cards. */
.parsed-candidates[b-pomttcjnb0] {
  border-bottom: 1px solid var(--fs-success-light);
}

.parsed-candidates-header[b-pomttcjnb0] {
  padding: 10px 16px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fs-text-secondary);
}

.parsed-candidate-item[b-pomttcjnb0] {
  border-bottom-width: 1px;
}

.parsed-candidate-item:last-child[b-pomttcjnb0] {
  border-bottom-color: var(--fs-success);
  border-bottom-width: 2px;
}

/* ===== Desktop TomSelect Parsed Result Option ===== */
/* Styles for the special parsed result option in TomSelect dropdown */
/* Note: Option ordering is done via DOM manipulation in JS, not CSS order property */

.ts-dropdown .ts-parsed-result-option[b-pomttcjnb0],
.ts-dropdown-content .ts-parsed-result-option[b-pomttcjnb0] {
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%) !important;
  border-left: 4px solid var(--fs-success) !important;
  font-weight: 600 !important;
  color: var(--fs-success-text) !important;
  padding-left: 12px !important;
  position: relative !important;
  /* Separator line below parsed option */
  border-bottom: 2px solid var(--fs-success) !important;
  margin-bottom: 4px !important;
}

.ts-dropdown .ts-parsed-result-option:hover[b-pomttcjnb0],
.ts-dropdown-content .ts-parsed-result-option:hover[b-pomttcjnb0],
.ts-dropdown .ts-parsed-result-option.active[b-pomttcjnb0],
.ts-dropdown-content .ts-parsed-result-option.active[b-pomttcjnb0] {
  background: linear-gradient(135deg, var(--fs-success-light) 0%, var(--fs-success-light) 100%) !important;
  color: var(--fs-success-text) !important;
}

/* Tap target (#1101): the chip's × is 21px wide from Tom Select's own CSS. Tom Select builds the chips in
   JS, so only a ::deep rule reaches them. */
.tom-select-wrapper[b-pomttcjnb0]  .plugin-remove_button .item .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}
/* /Components/Shared/UserMessages/UserMessageHost.razor.rz.scp.css */
/*
    The form's own styles. The trigger that used to live here — a fixed pill at bottom-right, z-index
    1070 — is gone: deleted rather than hidden, because a hidden floating layer keeps its z-index, its
    touch target on some browsers, and its occlusion over the bottom of a scrolling wizard.
*/
.user-message-layer[b-6eyv4z2tsg] {
  position: relative;
  z-index: 1060;
}

.user-message-content[b-6eyv4z2tsg] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.user-message-kinds[b-6eyv4z2tsg] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.user-message-kind[b-6eyv4z2tsg] {
  flex: 1 1 auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-border-color, var(--fs-border-default));
  border-radius: 50rem;
  background-color: transparent;
  color: var(--bs-body-color, var(--fs-text-primary));
  font-size: 0.875rem;
}

.user-message-kind.is-selected[b-6eyv4z2tsg] {
  border-color: var(--fs-primary-text);
  background-color: var(--bs-primary-bg-subtle, var(--fs-primary-light));
  font-weight: 600;
}

.user-message-body[b-6eyv4z2tsg] {
  resize: vertical;
  min-height: 7rem;
}

.user-message-hint[b-6eyv4z2tsg] {
  color: var(--bs-secondary-color, var(--fs-text-secondary));
  font-size: 0.8125rem;
  text-align: center;
}

.user-message-error[b-6eyv4z2tsg] {
  color: var(--bs-danger, var(--fs-error));
  font-size: 0.875rem;
}

.user-message-success[b-6eyv4z2tsg] {
  padding: 1rem 0;
  text-align: center;
}

.user-message-success .success-icon[b-6eyv4z2tsg] {
  color: var(--bs-success, var(--fs-success));
  font-size: 2.5rem;
}

.user-message-success .success-message[b-6eyv4z2tsg] {
  margin: 0.75rem 0 0;
}
/* /Components/Shared/UserMessages/UserMessageLink.razor.rz.scp.css */
/*
    Reads as a link, not a button: it sits inside an error card that already has the primary action
    ("Try Again"), and competing with it would push people to report instead of retry.
*/
.user-message-link[b-b0wtxxurcw] {
  /* A real tap target. As a pill this had its own 44px-square rule; as a text link it collapsed to the
     height of one line — roughly 20px — on what is now the ONLY doorway every user can reach. 48px is
     this product's stated mobile minimum. Inline-flex so the BOX is the target, not just the glyphs. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The label and the arrow are separate flex items, so the single literal space between them is
     trimmed and it renders "Send feedback→". */
  gap: 0.25rem;
  min-height: 48px;
  padding: 0 0.5rem;

  border: 0;
  background: none;
  color: var(--bs-link-color, var(--fs-primary-text));
  font-size: 0.875rem;
  text-decoration: underline;
}

.user-message-link:hover[b-b0wtxxurcw],
.user-message-link:focus-visible[b-b0wtxxurcw] {
  color: var(--bs-link-hover-color, var(--fs-primary-text));
}
/* /Components/Shared/VoiceRecorderButton.razor.rz.scp.css */
/* VoiceRecorderButton.razor.css */

/* ============================================
   BASE BUTTON
   Shared styles for both compact and full modes
   ============================================ */

.voice-mic-btn[b-f8jo2vb6k6] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease,
    transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
  will-change: transform;
}

.voice-mic-btn:disabled[b-f8jo2vb6k6] {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Keyboard focus indicator (WCAG 2.4.7) */
.voice-mic-btn:focus-visible[b-f8jo2vb6k6] {
  outline: 3px solid var(--fs-primary-text, var(--fs-border-focus));
  outline-offset: 2px;
}

/* ============================================
   COMPACT MODE (search bar suffix)
   Flush right-edge, no left radius.
   Parent container provides the shared border.
   ============================================ */

.voice-mic-compact[b-f8jo2vb6k6] {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  align-self: stretch;
  flex-shrink: 0;
  font-size: 1rem;

  /* No border-radius: parent container clips.
     FoodSelection scoped CSS sets right-side
     radius to match the hero zone. */
  border-radius: 0;

  /* Idle: plain — share the search field's background, just a blue glyph (no filled tile,
     which competed with the input). The active states (hover/recording/processing/success)
     fill themselves, so the colour now signals "something's happening" instead of decorating. */
  background: transparent;
  color: var(--fs-primary-text);
}

/* Desktop hover: solid blue, white icon, subtle lift */
.voice-mic-compact:hover:not(:disabled)[b-f8jo2vb6k6] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  box-shadow: none;
}

/* Desktop active press: snappy feedback */
.voice-mic-compact:active:not(:disabled)[b-f8jo2vb6k6] {
  transform: scale(0.96);
  transition-duration: 80ms;
  box-shadow: none;
}

/* ============================================
   ONE-TIME INTRO ANIMATION
   Plays once on first render to draw attention.
   Spring-pop from 85% scale with blue glow.
   ============================================ */

.voice-mic-compact.voice-intro[b-f8jo2vb6k6] {
  animation: voice-entrance-b-f8jo2vb6k6 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s 1 both;
}

@keyframes voice-entrance-b-f8jo2vb6k6 {
  0% {
    opacity: 0.7;
    transform: scale(0.85);
  }
  50% {
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   STATE: Recording
   Bounce on entry, then organic dual-ring pulse.
   ============================================ */

.voice-mic-btn.recording[b-f8jo2vb6k6] {
  background: var(--fs-recording);
  color: var(--fs-text-inverse);
  animation:
    voice-mic-bounce-b-f8jo2vb6k6 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    voice-pulse-organic-b-f8jo2vb6k6 2s ease-in-out 0.35s infinite;
}

.voice-mic-btn.recording:hover:not(:disabled)[b-f8jo2vb6k6] {
  background: var(--fs-recording-hover);
  color: var(--fs-text-inverse);
}

/* Subtle mic icon sway during recording */
.voice-mic-btn.recording .fas[b-f8jo2vb6k6] {
  animation: voice-icon-sway-b-f8jo2vb6k6 1.2s ease-in-out infinite;
}

/* ============================================
   STATE: Processing (thinking glow)
   ============================================ */

.voice-mic-btn.processing[b-f8jo2vb6k6] {
  background: var(--fs-bg-secondary, var(--fs-bg-tertiary));
  color: var(--fs-text-muted);
  animation: voice-processing-think-b-f8jo2vb6k6 2s ease-in-out infinite;
}

/* ============================================
   STATE: Success (celebration pop)
   ============================================ */

.voice-mic-btn.success[b-f8jo2vb6k6] {
  background: var(--fs-success);
  color: var(--fs-text-on-inverse);
  animation: voice-success-pop-b-f8jo2vb6k6 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voice-mic-btn.success:hover:not(:disabled)[b-f8jo2vb6k6] {
  background: var(--fs-success);
  color: var(--fs-text-on-inverse);
}

/* Checkmark stamp animation */
.voice-mic-btn.success .fas[b-f8jo2vb6k6] {
  animation: voice-check-stamp-b-f8jo2vb6k6 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

/* ============================================
   KEYFRAMES
   ============================================ */

/* Anticipatory bounce on recording start */
@keyframes voice-mic-bounce-b-f8jo2vb6k6 {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.88);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* Organic dual-ring pulse with breathing */
@keyframes voice-pulse-organic-b-f8jo2vb6k6 {
  0% {
    box-shadow:
      0 0 0 0 var(--fs-recording-a40),
      0 0 0 0 var(--fs-recording-a20);
    transform: scale(1);
  }
  25% {
    box-shadow:
      0 0 0 6px var(--fs-recording-a00),
      0 0 0 3px var(--fs-recording-a30);
  }
  50% {
    box-shadow:
      0 0 0 6px var(--fs-recording-a00),
      0 0 0 8px var(--fs-recording-a00);
    transform: scale(1.02);
  }
  75% {
    box-shadow:
      0 0 0 0 var(--fs-recording-a00),
      0 0 0 0 var(--fs-recording-a00);
  }
  100% {
    box-shadow:
      0 0 0 0 var(--fs-recording-a40),
      0 0 0 0 var(--fs-recording-a20);
    transform: scale(1);
  }
}

/* Subtle mic icon sway — feels alive */
@keyframes voice-icon-sway-b-f8jo2vb6k6 {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  75% {
    transform: rotate(-2deg);
  }
}

/* Processing thinking glow */
@keyframes voice-processing-think-b-f8jo2vb6k6 {
  0%,
  100% {
    background: var(--fs-bg-secondary, var(--fs-bg-tertiary));
  }
  50% {
    background: var(--fs-primary-light);
  }
}

/* Success celebration pop */
@keyframes voice-success-pop-b-f8jo2vb6k6 {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

/* Checkmark stamp-in */
@keyframes voice-check-stamp-b-f8jo2vb6k6 {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ============================================
   ACCESSIBILITY: Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .voice-mic-btn[b-f8jo2vb6k6] {
    transition-duration: 0ms;
  }

  .voice-mic-btn.recording[b-f8jo2vb6k6] {
    animation: none;
    box-shadow: 0 0 0 3px var(--fs-recording-a50);
  }

  .voice-mic-btn.recording .fas[b-f8jo2vb6k6] {
    animation: none;
  }

  .voice-mic-btn.processing[b-f8jo2vb6k6] {
    animation: none;
  }

  .voice-mic-btn.success[b-f8jo2vb6k6] {
    animation: none;
  }

  .voice-mic-btn.success .fas[b-f8jo2vb6k6] {
    animation: none;
  }

  .voice-mic-compact.voice-intro[b-f8jo2vb6k6] {
    animation: none;
  }

  .voice-mic-compact:hover:not(:disabled)[b-f8jo2vb6k6] {
    transform: none;
  }

  .voice-mic-compact:active:not(:disabled)[b-f8jo2vb6k6] {
    transform: none;
  }
}

/* ============================================
   TOUCH DEVICES: Prevent sticky hover
   ============================================ */

@media (hover: none) {
  .voice-mic-compact:hover:not(:disabled)[b-f8jo2vb6k6] {
    /* Keep idle colors on touch — no sticky dark blue */
    background: var(--fs-primary-light);
    color: var(--fs-primary-text);
    transform: none;
    box-shadow: none;
  }

  .voice-mic-btn.recording:hover:not(:disabled)[b-f8jo2vb6k6] {
    background: var(--fs-recording);
    color: var(--fs-text-inverse);
  }

  .voice-mic-btn.success:hover:not(:disabled)[b-f8jo2vb6k6] {
    background: var(--fs-success);
    color: var(--fs-text-on-inverse);
  }

  .voice-mic-compact:active:not(:disabled)[b-f8jo2vb6k6] {
    transform: none;
  }
}

/* ============================================
   SKELETON PLACEHOLDER
   Reserves space while browser support loads.
   Prevents Cumulative Layout Shift (CLS).
   ============================================ */

.voice-mic-skeleton[b-f8jo2vb6k6] {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  align-self: stretch;
  flex-shrink: 0;
  border-radius: 0;
  background: var(--fs-bg-tertiary);
  border: none;
}

/* Unsupported browser — grayed out, non-interactive */
.voice-mic-unsupported[b-f8jo2vb6k6] {
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}