/*
 * Component styles for Peppi design-system Custom Elements.
 * All values use design tokens defined in tokens.css.
 * Each block targets the Custom Element's host selector and its internal parts.
 */

/* ---------------------------------------------------------------------------
 * peppi-app-header
 * --------------------------------------------------------------------------- */

peppi-app-header {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--color-brand-primary);
  padding-top: env(safe-area-inset-top, 0px);
  box-shadow: var(--shadow-md);
}

.peppi-app-header__bar {
  /* Anchors the absolutely-positioned account menu to the bar's own box
   * (not the viewport), so the menu hugs the avatar's bottom-right corner
   * on wide screens where the 480px bar is centered. */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  padding: 0 var(--space-4);
  max-width: 480px;
  margin: 0 auto;
}

.peppi-app-header__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
}

/* Peppi brand mark — Home route only (top-left header slot). A CSS mask
 * silhouette of the wordmark asset, filled with --color-text-inverse (the
 * same token the plain text title uses) so a partner-theme override of that
 * token re-tints the mark automatically with no separate logo-swap wiring. */
.peppi-app-header__brand-mark {
  /* Fixed 120px track (shrinkable on very narrow phones), and the row's free
   * space is released to its right so the trailing chrome — Beta pill, then
   * avatar — lands hard right, matching the text-title routes where the
   * uncapped title does the same job. This slot used to be `flex: 1 1 auto`
   * with a 120px cap: the grow factor was inert against the cap, so the
   * leftover space piled up after the avatar and parked it mid-row. The mask
   * silhouette has no intrinsic width, so the track has to come from the
   * basis, not from growing. */
  flex: 0 1 120px;
  margin-right: auto;
  min-width: 0;
  height: 22px;
  background-color: var(--color-text-inverse);
  -webkit-mask-image: url('/assets/brand/peppi-wordmark.svg');
  mask-image: url('/assets/brand/peppi-wordmark.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Partner logo — Home route only, replaces .peppi-app-header__brand-mark
 * when the signed-in org has a fullLockup/mark logo (PeppiAppHeader.ts's
 * _brandSlotHtml). Unlike the mask above, this is the partner's actual
 * (potentially multi-color) SVG rendered as-is, so it is not tinted via
 * --color-text-inverse — object-fit keeps it from overflowing the fixed
 * header row regardless of the source asset's aspect ratio. */
.peppi-app-header__brand-logo {
  /* Same 120px track and free-space release as the silhouette above, so the
   * avatar sits right-justified whichever brand slot renders. */
  flex: 0 1 120px;
  margin-right: auto;
  min-width: 0;
  height: 22px;
  object-fit: contain;
  object-position: left center;
}

/* "Beta" MVP label (feedback General #2). Translucent-white pill echoing the
 * avatar treatment so it reads as chrome, not content. On Home it hugs the
 * capped brand mark; on text-title routes the flex-growing title pushes it
 * toward the right. */
.peppi-app-header__beta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--border-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.peppi-app-header__context {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.82);
  text-align: right;
}

.peppi-app-header__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-pill);
  border: 2px solid rgba(255, 255, 255, 0.35);
  background-color: color-mix(in srgb, var(--color-brand-navy) 35%, transparent);
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  padding: 0;
}

.peppi-app-header__avatar:hover {
  background-color: color-mix(in srgb, var(--color-brand-navy) 50%, transparent);
}

/* Account menu — anchored dropdown under the avatar (bar's right edge).
 * Opened/closed by PeppiAppHeader.ts; only exists in the DOM while open. */
.peppi-app-header__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: var(--space-4);
  min-width: 180px;
  padding: var(--space-1) 0;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 101;
}

.peppi-app-header__menu-item {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
}

.peppi-app-header__menu-item:hover {
  background-color: var(--color-surface-tint);
}

.peppi-app-header__menu-item--signout {
  color: var(--color-danger);
}

/* ---------------------------------------------------------------------------
 * peppi-tab-bar
 * --------------------------------------------------------------------------- */

peppi-tab-bar {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 92px;
  background-color: #EDF4FC;
  border-top: 1px solid rgba(214, 230, 247, 0.95);
  box-shadow: 0 -10px 30px color-mix(in srgb, var(--color-brand-navy) 6%, transparent);
}

/* ---------------------------------------------------------------------------
 * peppi-bottom-sheet
 * --------------------------------------------------------------------------- */

/*
 * The host is the full-viewport overlay, not the sheet itself. It used to be a
 * fixed strip pinned above the tab bar with no backdrop at all, which left the
 * screen behind a dialog declaring `aria-modal="true"` fully visible and fully
 * clickable. The panel keeps the old geometry; the backdrop is what makes the
 * modality real, and it is what the component's documented backdrop-dismissal
 * needs something to listen on.
 */
peppi-bottom-sheet {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
}

peppi-bottom-sheet .peppi-bottom-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-brand-navy) 45%, transparent);
}

/* The panel is nested inside the backdrop so a click on it bubbles to the
 * backdrop's dismissal listener, where `e.target === backdrop` is what keeps
 * the sheet open. It positions against the backdrop, which fills the host,
 * which fills the viewport, so the geometry is unchanged. */

peppi-bottom-sheet .peppi-bottom-sheet__panel {
  position: absolute;
  bottom: 92px; /* above tab bar */
  left: 0;
  right: 0;
  max-height: 80dvh;
  overflow-y: auto;
  padding: var(--space-4);
  background-color: var(--color-surface-raised);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  box-shadow: var(--shadow-xl);
  outline: none;
}

peppi-bottom-sheet .peppi-bottom-sheet__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

peppi-bottom-sheet .peppi-bottom-sheet__title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

peppi-bottom-sheet .peppi-bottom-sheet__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: var(--border-radius-sm);
}

/* ---------------------------------------------------------------------------
 * peppi-window-banner
 * --------------------------------------------------------------------------- */

peppi-window-banner {
  display: block;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-tint);
  border-bottom: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------------
 * peppi-button
 * --------------------------------------------------------------------------- */

peppi-button {
  display: inline-block;
}

/* ---------------------------------------------------------------------------
 * peppi-card
 * --------------------------------------------------------------------------- */

peppi-card {
  display: block;
  background-color: var(--color-surface-raised);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

/* ---------------------------------------------------------------------------
 * peppi-priority-alert-card
 * --------------------------------------------------------------------------- */

peppi-priority-alert-card {
  display: block;
  background-color: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--border-radius-card);
  padding: var(--space-3) var(--space-4);
}

/* ---------------------------------------------------------------------------
 * peppi-shield-gauge
 * --------------------------------------------------------------------------- */

peppi-shield-gauge {
  display: block;
  width: 200px;
  height: 200px;
}

peppi-shield-gauge canvas {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------
 * Form inputs
 * --------------------------------------------------------------------------- */

peppi-input,
peppi-toggle {
  display: block;
  margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------------------
 * peppi-spinner
 * --------------------------------------------------------------------------- */

peppi-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
}

/* ---------------------------------------------------------------------------
 * peppi-toast
 * --------------------------------------------------------------------------- */

peppi-toast {
  display: block;
  position: fixed;
  bottom: 80px; /* above tab bar + clearance */
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Shared post-onboarding screen polish
 * --------------------------------------------------------------------------- */

.checkin-drawer,
.insights-container,
.profile-container,
.navigate-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: calc(100dvh - 92px);
  width: 100%;
}

.checkin-drawer .peppi-screen__title,
.insights-screen__title,
.profile-screen__title,
.navigate-screen__title {
  color: var(--color-brand-navy);
  font-family: var(--font-sans);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.checkin-section,
.insights-card,
.profile-section,
.navigate-card {
  background: #FFFFFF;
  border: 1px solid #D6E6F7;
  border-radius: 16px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-brand-navy) 4%, transparent);
  padding: var(--space-4);
}

.checkin-section__label,
.insights-card__title,
.profile-section__title,
.navigate-section-label {
  color: var(--color-brand-navy);
  font-family: var(--font-sans);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-2);
}

.checkin-section__summary,
.checkin-note-saved,
.profile-caregiver-empty,
.profile-info-row__body,
.profile-pa-tile__detail,
.profile-consent-locked__hint,
.profile-account__org,
.insights-archive__empty {
  color: #3A5070;
  font-size: var(--font-size-13);
  line-height: var(--line-height-relaxed);
}

.checkin-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.checkin-chip,
.checkin-btn,
.profile-caregiver-btn,
.profile-save-btn,
.insights-archive-toggle,
.insights-archive__dismiss-btn,
.insights-more-link,
.navigate-action,
.navigate-back {
  align-items: center;
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 999px;
  color: var(--color-brand-navy);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  justify-content: center;
  line-height: 1.1;
  min-height: 40px;
  padding: 10px 14px;
  text-decoration: none;
  transition: background var(--motion-fast) var(--easing-standard),
              border-color var(--motion-fast) var(--easing-standard),
              color var(--motion-fast) var(--easing-standard);
}

.checkin-chip.is-selected,
.checkin-chip.is-active,
.checkin-btn--primary,
.profile-save-btn,
.profile-caregiver-btn--submit,
.navigate-action--primary {
  background: var(--color-brand-teal);
  border-color: var(--color-brand-teal);
  color: var(--color-brand-navy);
}

.checkin-btn--primary,
.profile-save-btn,
.navigate-action--primary {
  min-height: 48px;
  width: 100%;
}

.checkin-input,
.checkin-select,
.profile-time-input,
.profile-tz-select,
.profile-caregiver-form__input,
.profile-caregiver-form__select {
  appearance: none;
  background: #FFFFFF;
  border: 1px solid #C7DCF2;
  border-radius: 12px;
  color: var(--color-brand-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-15);
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

.checkin-select,
.profile-tz-select,
.profile-caregiver-form__select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-brand-primary) 50%),
    linear-gradient(135deg, var(--color-brand-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  padding-right: 34px;
}

.checkin-label,
.profile-notif-label,
.profile-consent-label,
.profile-caregiver-form__label {
  color: var(--color-brand-navy);
  display: block;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.checkin-section__kicker {
  color: #7A9EC5;
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.09em;
  line-height: 1;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.checkin-supports-label {
  margin: var(--space-1) 0 calc(var(--space-2) * -1);
}

.checkin-mic-btn {
  align-items: center;
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 999px;
  color: var(--color-brand-navy);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: var(--font-size-18);
  height: 36px;
  justify-content: center;
  line-height: 1;
  width: 36px;
}

.checkin-mic-btn[aria-pressed="true"] {
  background: var(--color-brand-teal);
  border-color: var(--color-brand-teal);
}

.checkin-textarea {
  background: var(--color-surface-page);
  border: 1px solid #D6E6F7;
  border-radius: 14px;
  color: var(--color-brand-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-15);
  line-height: var(--line-height-relaxed);
  min-height: 112px;
  padding: var(--space-3);
  resize: vertical;
  width: 100%;
}

.checkin-note-actions {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  margin-top: var(--space-3);
}

.checkin-note-actions .checkin-btn {
  width: auto;
}

.checkin-past-meal-card {
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #D6E6F7;
  border-radius: 16px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-brand-navy) 4%, transparent);
  color: var(--color-brand-navy);
  cursor: pointer;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 72px;
  padding: var(--space-3);
  text-align: left;
  width: 100%;
}

.checkin-card-icon {
  align-items: center;
  background: var(--color-brand-teal);
  border-radius: 999px;
  color: var(--color-brand-navy);
  display: flex;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  height: 44px;
  justify-content: center;
  line-height: 1;
  width: 44px;
}

.checkin-past-meal-card__title {
  color: var(--color-brand-ink);
  display: block;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
}

.checkin-past-meal-card__sub {
  color: #7A9EC5;
  display: block;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  margin-top: 4px;
}

.checkin-past-meal-card__chevron {
  color: #7A9EC5;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
}

.checkin-weight-row,
.checkin-fiber-row,
.profile-notif-row,
.profile-consent-row {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.checkin-weight-row .checkin-input {
  flex: 1 1 auto;
  min-width: 0;
}

.checkin-inline-error {
  color: #DC2626;
  font-size: var(--font-size-12);
  line-height: var(--line-height-normal);
  margin-top: var(--space-1);
}

.is-hidden {
  display: none !important;
}

.checkin-slider-row {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.checkin-slider {
  accent-color: var(--color-brand-primary);
  width: 100%;
}

.checkin-slider-anchor {
  color: #3A5070;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
}

.checkin-slider-value {
  color: var(--color-brand-primary);
  margin-left: 4px;
}

.profile-caregiver-form {
  background: var(--color-surface-page);
  border: 1px solid #D6E6F7;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
}

.checkin-actions {
  background: var(--color-surface-page);
  bottom: 92px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 calc(var(--space-4) * -1) calc(var(--space-6) * -1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  position: sticky;
}

/* ---------------------------------------------------------------------------
 * Navigate
 * --------------------------------------------------------------------------- */

.navigate-container {
  /* Scoped tints with no global-token equivalent (see peppi-design-tokens.css) —
     kept local to the Eat tab rather than added to the shared token file. */
  --eat-tint-vulnerable-border: #FECACA;
  --eat-tint-vulnerable-text: #B45309;
  padding: var(--space-4) var(--space-4) var(--space-6);
}

.navigate-header {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 88px 1fr 88px;
}

.navigate-topbar {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 74px minmax(0, 1fr) auto;
}

.navigate-title-block {
  min-width: 0;
  text-align: center;
}

.navigate-screen__title {
  font-size: var(--font-size-22);
  text-align: center;
}

.navigate-subtitle {
  color: #3A5070;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin: 4px 0 0;
}

.navigate-status-pill {
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 999px;
  color: var(--color-brand-primary);
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  padding: 8px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.navigate-back {
  background: transparent;
  border-color: transparent;
  color: var(--color-brand-primary);
  justify-content: flex-start;
  min-height: 36px;
  padding: 6px 0;
}

/* ---------------------------------------------------------------------------
 * Recommendations section (Lean Guard gauge/timer/banner/rec cards) —
 * UNWIRED from the Eat tab's live render path (Felicia Eat #8, Option A —
 * see NavigateScreen.ts's class doc comment). Kept in the tree for the
 * still-present, just-uncalled render methods that reference these classes.
 * --------------------------------------------------------------------------- */

.navigate-rec-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.navigate-rec-header__tag {
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-brand-primary);
}
.navigate-rec-header__title {
  margin: 0;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
}
.navigate-rec-header__body {
  margin: 0;
  font-size: var(--font-size-13);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

.navigate-hero {
  background: #FFFFFF;
  border: 1px solid #D6E6F7;
  border-radius: 22px;
  overflow: hidden;
}

.navigate-hero__inner {
  align-items: center;
  background: linear-gradient(180deg, #F8FBFF 0%, #EDF4FC 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.navigate-state-label {
  color: #7A9EC5;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.navigate-timer {
  background: #FFFFFF;
  border: 1px solid #D6E6F7;
  border-radius: 14px;
  padding: var(--space-3);
  text-align: center;
  width: 100%;
}

.navigate-timer__label {
  color: #7A9EC5;
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navigate-timer__value {
  color: var(--color-brand-navy);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  margin-top: 4px;
}

.navigate-timer__sub {
  color: #7A9EC5;
  font-size: var(--font-size-12);
  line-height: var(--line-height-normal);
  margin-top: 4px;
}

.navigate-stat-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.navigate-stat {
  background: #FFFFFF;
  border: 1px solid #D6E6F7;
  border-radius: 14px;
  min-width: 0;
  padding: 12px 8px;
  text-align: center;
}

.navigate-stat__value {
  color: var(--color-brand-navy);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.navigate-stat__unit {
  color: #7A9EC5;
  font-size: var(--font-size-12);
  margin-left: 2px;
}

.navigate-stat__label {
  color: #7A9EC5;
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  margin-top: 6px;
  text-transform: uppercase;
}

.navigate-banner {
  border-radius: 16px;
  color: var(--color-text-inverse);
  padding: var(--space-4);
}

.navigate-banner--protected {
  background: var(--color-brand-navy);
}

.navigate-banner--vulnerable {
  background: #92400E;
}

.navigate-banner--expired {
  background: #DC2626;
}

.navigate-banner__label {
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navigate-banner__body {
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin-top: var(--space-1);
}

.navigate-rec-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.navigate-rec-title {
  color: var(--color-brand-ink);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.navigate-rec-sub {
  color: #7A9EC5;
  font-size: var(--font-size-12);
  margin-top: 2px;
}

.navigate-macro-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-3);
}

.navigate-macro {
  background: var(--color-surface-page);
  border: 1px solid #D6E6F7;
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
}

.navigate-macro__value {
  color: var(--color-brand-navy);
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-bold);
}

.navigate-macro__label {
  color: #7A9EC5;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.navigate-leucine {
  align-items: center;
  background: color-mix(in srgb, var(--color-brand-teal) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-brand-teal) 24%, transparent);
  border-radius: 12px;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  margin-top: var(--space-3);
  padding: var(--space-3);
}

.navigate-leucine__value {
  color: #23BCCC;
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-bold);
}

.navigate-leucine__sub,
.navigate-leucine__status {
  color: #7A9EC5;
  font-size: var(--font-size-11);
}

.navigate-leucine__status {
  color: #23BCCC;
  flex: 0 0 auto;
  font-weight: var(--font-weight-semibold);
}

/* ---------------------------------------------------------------------------
 * Eat tab — merged food logger (peppi_food_logger_v2 wireframe)
 *
 * The "I just ate" quick-log button (.eat-quick-log) was removed from the
 * Eat tab (Felicia Eat feedback #1 — Home keeps its own); its now-unused
 * rule was removed with it.
 * --------------------------------------------------------------------------- */

.eat-photo-tile {
  align-items: center;
  background: var(--color-brand-navy);
  border: 1.5px solid var(--color-brand-navy);
  border-radius: 16px;
  cursor: not-allowed;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  text-align: center;
  width: 100%;
}

/* fatsecret_food_search flag on: the tile is a real <button> that opens the
   photo picker/camera instead of the informational, disabled div above. */
.eat-photo-tile--interactive {
  cursor: pointer;
}

.eat-photo-tile--interactive:disabled {
  cursor: wait;
  opacity: 0.85;
}

.eat-photo-error {
  color: var(--color-danger);
  font-family: var(--font-sans);
  font-size: var(--font-size-13);
  margin: 0;
  text-align: center;
}

.eat-photo-error-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-2);
}

.eat-photo-error-action {
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 999px;
  color: var(--color-brand-primary);
  cursor: pointer;
  flex: 1 1 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  min-height: 36px;
  padding: 8px 12px;
}

.eat-photo-tile__icon {
  align-items: center;
  background: color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
  border-radius: 999px;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.eat-photo-tile__label {
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-bold);
}

.eat-photo-tile__chip {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-semibold);
  padding: 3px 10px;
}

.eat-section-heading {
  color: var(--color-brand-navy);
  font-family: var(--font-sans);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.eat-saved-meal-card {
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #D6E6F7;
  border-radius: 14px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-brand-navy) 4%, transparent);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
}

.eat-saved-meal-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.eat-saved-meal-card__name {
  color: var(--color-brand-ink);
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eat-saved-meal-card__serving {
  color: var(--color-brand-navy);
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
  margin-top: 2px;
}

.eat-saved-meal-card__badge {
  background: var(--color-signal-protected, #0D9488);
  border-radius: 999px;
  color: var(--color-text-inverse, #FFFFFF);
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-semibold);
  margin-top: 4px;
  padding: 2px 8px;
}

.eat-saved-meal-card__macros {
  color: #7A9EC5;
  font-size: var(--font-size-11);
  margin-top: 2px;
}

.eat-saved-meal-card__action {
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 999px;
  color: var(--color-brand-primary);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  min-height: 36px;
  padding: 8px 12px;
  white-space: nowrap;
}

.eat-saved-meal-card__action:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.eat-saved-meal-card__badge--pinned {
  background: var(--color-brand-primary);
  margin-right: 4px;
}

.eat-saved-meal-card__pin {
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 999px;
  color: var(--color-brand-primary);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: var(--font-size-16);
  line-height: 1;
  min-height: 36px;
  min-width: 36px;
  padding: 6px;
}

.eat-saved-meal-card__pin--active {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverse, #FFFFFF);
}

.eat-saved-meal-card__pin:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.eat-saved-meal-empty {
  color: #7A9EC5;
  font-size: var(--font-size-13);
  font-family: var(--font-sans);
  margin: 0;
}

.eat-saved-meal-error {
  color: #DC2626;
  font-size: var(--font-size-12);
  font-family: var(--font-sans);
  margin: var(--space-1) 0 0;
}

/* UNWIRED (Felicia Eat #8, Option A) — .eat-suggestions-link* styled the
   "What should I eat?" entry point inside the recommendations section,
   which is not rendered by NavigateScreen.ts's live `_render()`. Kept for
   when that section is reintroduced elsewhere. */
.eat-suggestions-link {
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #D6E6F7;
  border-radius: 12px;
  color: var(--color-brand-primary);
  cursor: pointer;
  display: flex;
  font-family: var(--font-sans);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  justify-content: space-between;
  padding: 10px 14px;
  text-decoration: none;
  width: 100%;
}

.eat-suggestions-link__chevron {
  color: #7A9EC5;
  font-size: var(--font-size-16);
}

/* ---------------------------------------------------------------------------
 * Insights
 * --------------------------------------------------------------------------- */

.insights-container {
  padding-bottom: var(--space-5);
}

.insights-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.insights-chart-wrap {
  align-items: center;
  background: var(--color-surface-page);
  border: 1px solid #E2EEF8;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  min-height: 144px;
  overflow: hidden;
  padding: var(--space-2);
}

.insights-chart-wrap--line {
  min-height: 176px;
}

.insights-chart-wrap--bar {
  min-height: 144px;
}

.insights-canvas {
  height: 100%;
  width: 100%;
}

.insights-tier-legend,
.insights-mpi-direction {
  align-items: center;
  color: #3A5070;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-12);
  gap: 8px;
  line-height: var(--line-height-normal);
}

.tier-dot {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.tier-dot--green { background: #27A760; }
.tier-dot--yellow { background: #EF9F27; }
.tier-dot--red { background: #DC2626; }

.mpi-direction {
  border-radius: 999px;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  padding: 6px 10px;
}

.mpi-direction--improving {
  background: rgba(39, 167, 96, 0.12);
  color: #1F8F50;
}

.mpi-direction--stable {
  background: #EDF4FC;
  color: var(--color-brand-primary);
}

.mpi-direction--declining {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

/* Lean Guard Score card (score card, not a graph — 2026-08-17 redesign). */
.lgs-score-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.lgs-score {
  color: var(--color-brand-navy);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.lgs-score__denom {
  color: #7A9EC5;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  margin-left: 2px;
}

.lgs-pill {
  border-radius: 999px;
  display: inline-block;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  padding: 4px 10px;
  white-space: nowrap;
}

.lgs-pill--sm {
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  text-transform: uppercase;
}

.lgs-pill--good { background: rgba(39, 167, 96, 0.12); color: #1F8F50; }
.lgs-pill--warn { background: #FEF3DE; color: #8A5A05; }
.lgs-pill--bad { background: rgba(220, 38, 38, 0.1); color: #B91C1C; }
.lgs-pill--muted { background: #F0F3F6; color: #6B7A8C; }

.lgs-provisional,
.lgs-empty {
  color: #7A9EC5;
  font-size: var(--font-size-12);
  margin: 0;
}

.lgs-delta {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.lgs-delta--up { color: #1F8F50; }
.lgs-delta--down { color: #B91C1C; }
.lgs-delta--flat { color: #6B7A8C; }

.lgs-table {
  border-top: 1px solid #E2EEF8;
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.lgs-row {
  align-items: center;
  border-bottom: 1px solid #EEF4FA;
  display: grid;
  gap: 8px;
  grid-template-columns: 1.4fr 1fr 1fr;
  padding: 8px 0;
}

.lgs-row--head {
  border-bottom: 1px solid #E2EEF8;
  color: #7A9EC5;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  padding: 6px 0 4px;
  text-transform: uppercase;
}

.lgs-row__label {
  align-items: center;
  color: #3A5070;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-12);
  gap: 6px;
}

.lgs-row__value {
  color: var(--color-brand-navy);
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
}

.lgs-row__secondary {
  color: #7A9EC5;
  font-size: 11px;
  font-weight: var(--font-weight-regular);
}

.lgs-row__target {
  color: #6B7A8C;
  font-size: var(--font-size-12);
}

.lgs-footer {
  color: #7A9EC5;
  font-size: 11px;
  margin: 0;
}

.insights-staleness-badge {
  background: #FEF9E7;
  border: 1px solid #FAC775;
  border-radius: 12px;
  color: #8A4B05;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  padding: 8px 10px;
}

.insights-archive-toggle {
  align-self: flex-start;
  min-height: 36px;
}

.insights-archive-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.insights-archive-list--collapsed {
  display: none;
}

.insights-archive__entry {
  align-items: center;
  background: var(--color-surface-page);
  border: 1px solid #E2EEF8;
  border-radius: 12px;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  padding: var(--space-3);
}

.insights-archive__entry-type {
  color: var(--color-brand-navy);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-bold);
  text-transform: capitalize;
}

.insights-archive__entry-date {
  color: #7A9EC5;
  font-size: var(--font-size-12);
  margin-top: 2px;
}

.insights-archive__dismiss-btn {
  min-height: 34px;
  padding: 8px 10px;
}

.insights-more-nav,
.profile-tools-nav {
  display: grid;
  gap: var(--space-2);
}

.insights-more-link,
.profile-tools-link {
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 12px;
  color: var(--color-brand-primary);
  display: block;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  padding: 12px;
  text-decoration: none;
}

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

.profile-container {
  padding-bottom: var(--space-5);
}

.profile-hero {
  align-items: center;
  background: linear-gradient(180deg, #071C3E 0%, var(--color-brand-navy) 100%);
  border-radius: 22px;
  color: var(--color-text-inverse);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--space-4);
}

.profile-hero__avatar {
  align-items: center;
  background: var(--color-brand-teal);
  border-radius: 999px;
  color: var(--color-brand-navy);
  display: flex;
  flex-shrink: 0;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  height: 64px;
  justify-content: center;
  overflow: hidden;
  width: 64px;
}

.profile-hero__avatar-img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.profile-hero__copy {
  min-width: 0;
}

.profile-section__header-row {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.profile-section__header-row .profile-section__title {
  margin: 0;
}

.profile-section__edit-link {
  flex-shrink: 0;
  margin-top: 0;
}

.profile-hero__title {
  color: var(--color-text-inverse);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  margin: 0;
}

.profile-hero__subtitle {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin: 4px 0 0;
}

.profile-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.profile-hero__badge {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  padding: 7px 10px;
  text-transform: uppercase;
}

.profile-hero__badge--connected {
  background: color-mix(in srgb, var(--color-brand-teal) 18%, transparent);
  border-color: color-mix(in srgb, var(--color-brand-teal) 34%, transparent);
  color: var(--color-brand-teal);
}

.profile-hero__member-since {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-2) 0 0;
}

.profile-support-details {
  background: #FFFFFF;
  border: 1px solid #D6E6F7;
  border-radius: 16px;
  padding: var(--space-3) var(--space-4);
}

.profile-support-details__summary {
  color: var(--color-brand-primary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  list-style: none;
}

.profile-support-details__summary::-webkit-details-marker {
  display: none;
}

.profile-support-details[open] .profile-support-details__summary {
  margin-bottom: var(--space-2);
}

.profile-account-row {
  display: grid;
  gap: var(--space-2);
}

.profile-account__patient {
  color: var(--color-brand-ink);
  display: block;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}

.profile-account__org {
  overflow-wrap: anywhere;
}

.profile-menu-card,
.profile-pa-report-card {
  background: var(--color-surface-page);
  border: 1px solid #E2EEF8;
  border-radius: 14px;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.profile-info-row {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.profile-info-row__icon {
  background: #D6E6F7;
  border-radius: 999px;
  height: 10px;
  width: 10px;
}

.profile-info-row__title {
  color: var(--color-brand-navy);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.profile-info-row__body {
  margin-top: 2px;
}

.profile-pa-report-card {
  background: var(--color-brand-navy);
  border-color: var(--color-brand-navy);
  margin-top: var(--space-3);
}

.profile-pa-report-card .profile-info-row__icon {
  background: var(--color-brand-teal);
}

.profile-pa-report-card .profile-info-row__title {
  color: var(--color-text-inverse);
}

.profile-pa-report-card .profile-info-row__body {
  color: rgba(255, 255, 255, 0.58);
}

.profile-pa-report-card__title {
  color: var(--color-text-inverse);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
}

.profile-pa-report-card__grid {
  display: grid;
  gap: var(--space-2);
}

.profile-pa-report-card__button {
  background: var(--color-brand-teal);
  border: 0;
  border-radius: 12px;
  color: var(--color-brand-navy);
  cursor: pointer;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  min-height: 44px;
  padding: 10px 14px;
  width: 100%;
}

/* Generate and Send stack at the foot of the card. Two full-width teal
   buttons flush against each other read as one control, and the tap target
   boundary is invisible. Scoped to direct children so the confirm panel's own
   button pair keeps its grid gap instead of stacking both spacings.

   The --space-* scale is defined only under [data-oat-root] (the admin and
   support shells), so on this patient screen it resolves to nothing and the
   declaration would be dropped. Hence the literal fallbacks — the rest of
   this card's spacing is silently inert for the same reason. */
.profile-pa-report-card > .profile-pa-report-card__button + .profile-pa-report-card__button {
  margin-top: var(--space-2, 8px);
}

/* Pre-cadence eligibility warning (docs/design/mvp/10-prior-auth-flow.md:88-89).
   Lives inside the navy card, so it takes the card's palette, not the page's. */
.profile-pa-report-card__confirm {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-brand-teal);
  border-radius: 12px;
  display: grid;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
  padding: var(--space-3, 12px);
}

/* "Not now" — the way out of the warning. Must not compete with Continue. */
.profile-pa-report-card__button--secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: var(--color-text-inverse);
}

.profile-voucher-form {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.profile-voucher-input {
  flex: 1 1 auto;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #D6E6F7;
  border-radius: var(--border-radius-cta);
  color: var(--color-brand-navy);
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  min-height: 44px;
  padding: 10px 14px;
}

.profile-voucher-btn,
.profile-data-export-btn,
.profile-data-export-download-btn {
  background: var(--gradient-cta-primary);
  border: 0;
  border-radius: var(--border-radius-cta);
  color: var(--color-text-inverse);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  min-height: 44px;
  padding: 10px 16px;
}

.profile-voucher-btn:disabled,
.profile-data-export-btn:disabled,
.profile-data-export-download-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Premium tiering — locked feature list shown greyed out (feedback General #4). */
.profile-premium-features {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.profile-premium-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-surface-page);
  border: 1px solid #D6E6F7;
  border-radius: 12px;
  padding: 10px 14px;
  opacity: 0.6;
}

.profile-premium-feature__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  color: var(--color-brand-navy);
}

.profile-premium-feature__badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--border-radius-pill);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
}

.profile-premium-upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-cta-primary);
  border: 0;
  border-radius: var(--border-radius-cta);
  color: var(--color-text-inverse);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  min-height: 44px;
  padding: 10px 16px;
  text-decoration: none;
}

.profile-pa-tile {
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 12px;
  color: var(--color-brand-navy);
  display: grid;
  gap: 4px;
  padding: var(--space-3);
}

.profile-pa-tile__label {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
}

.profile-persona-group {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-persona-option {
  align-items: center;
  background: var(--color-surface-page);
  border: 1px solid #D6E6F7;
  border-radius: 14px;
  cursor: pointer;
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-3);
  text-align: center;
}

.profile-persona-option--selected {
  background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
  border-color: var(--color-brand-teal);
}

.profile-persona-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-persona-avatar {
  border-radius: 999px;
  height: 64px;
  width: 64px;
}

.profile-persona-label {
  color: var(--color-brand-navy);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
}

.profile-notif-row,
.profile-consent-row,
.profile-consent-locked {
  background: var(--color-surface-page);
  border: 1px solid #E2EEF8;
  border-radius: 12px;
  justify-content: space-between;
  margin-top: var(--space-2);
  padding: 12px;
}

.profile-notif-checkbox,
.profile-consent-checkbox {
  accent-color: var(--color-brand-primary);
  flex: 0 0 auto;
  height: 22px;
  width: 22px;
}

.profile-time-input {
  flex: 0 0 124px;
  width: 124px;
}

.profile-tz-select {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-notif-actions {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Save shares its row with Cancel (feedback item #7 — was full-width,
   pushing Cancel to its own line below). Scoped to this row only: the
   shared .profile-save-btn class stays full-width everywhere else. */
.profile-notif-actions .profile-save-btn {
  flex: 1 1 0;
  width: auto;
}

.profile-consent-locked {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.profile-consent-locked__label {
  color: var(--color-brand-navy);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
}

.profile-caregiver-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
}

.profile-caregiver-item {
  background: var(--color-surface-page);
  border: 1px solid #E2EEF8;
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: var(--space-3);
}

.profile-caregiver-email {
  color: var(--color-brand-navy);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.profile-caregiver-rel {
  color: #7A9EC5;
  font-size: var(--font-size-12);
}

.profile-caregiver-form__actions {
  display: flex;
  gap: var(--space-2);
}

.profile-row-summary {
  display: grid;
  gap: var(--space-2);
}

/* Shown inside a collapsed profile row when the stored values behind it could
   not be read, so the defaults on screen are not presented as the patient's
   own settings. */
.profile-row-note {
  color: var(--color-text-muted, #5B6B7C);
  font-family: var(--font-sans);
  font-size: var(--font-size-12);
  margin: 0;
}

.profile-row-edit-btn,
.profile-row-cancel-btn {
  align-items: center;
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 999px;
  color: var(--color-brand-navy);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  justify-content: center;
  margin-top: var(--space-2);
  min-height: 36px;
  padding: 8px 14px;
  width: fit-content;
}

.profile-caregiver-form__error {
  color: #DC2626;
  font-size: var(--font-size-12);
}

@media (max-width: 360px) {
  .checkin-section,
  .insights-card,
  .profile-section,
  .navigate-card {
    padding: var(--space-3);
  }

  .profile-persona-group {
    grid-template-columns: 1fr;
  }

  .navigate-header {
    grid-template-columns: 72px 1fr 72px;
  }

  .navigate-topbar {
    grid-template-columns: 1fr auto;
  }

  .navigate-topbar .navigate-back {
    display: none;
  }

  .navigate-title-block {
    text-align: left;
  }

  .navigate-screen__title {
    text-align: left;
  }

  .navigate-macro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * Required-field convention
 * Apply .peppi-required to a field's <label> to append a colored asterisk;
 * pair with a .peppi-required-legend note ("* Required") once per form/screen.
 * --------------------------------------------------------------------------- */

.peppi-required::after {
  content: ' *';
  color: var(--color-danger, #DC2626);
}

.peppi-required-legend {
  font-family: var(--font-sans);
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.peppi-required-legend::before {
  content: '* ';
  color: var(--color-danger, #DC2626);
}

/* ---------------------------------------------------------------------------
 * FatSecret Platform API attribution
 * The anchor inside is the published Attribution Snippet and must not be
 * modified (no class, no attributes), so it is styled by descendant selector
 * from the wrapper .peppi-fatsecret-attribution. See util/fatsecretAttribution.ts.
 * --------------------------------------------------------------------------- */

.peppi-fatsecret-attribution {
  margin-top: var(--space-3);
}

.peppi-fatsecret-attribution a {
  font-family: var(--font-sans);
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
  text-decoration: underline;
  line-height: 1.4;
}

.peppi-fatsecret-attribution--on-dark a {
  color: var(--color-text-inverse, #FFFFFF);
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
 * Shot cycle card + missed-dose reason dialog
 *
 * The dialog previously carried every rule inline, including
 * `background: var(--color-surface)`. That token does not exist anywhere in
 * this codebase — the real surface tokens are --color-surface-page,
 * --color-surface-raised, --color-surface-tint and --color-surface-default
 * (assets/tokens/peppi-design-tokens.css). An unresolvable `var()` with no
 * fallback makes the whole declaration invalid, so the dialog rendered with
 * NO background and the shot-cycle section read straight through it. The
 * inline `z-index: 10` could never have fixed that: a transparent panel is
 * transparent at every stacking level.
 *
 * The section is the stacking context (`position: relative`), so the scrim
 * and dialog z-indexes are LOCAL to this card — they cannot climb over the
 * app header or the tab bar, which is what a global z-index would risk.
 * --------------------------------------------------------------------------- */

.checkin-shot-cycle {
  position: relative;
}

.checkin-shot-cycle__loading,
.checkin-shot-cycle__empty-sub,
.checkin-shot-cycle__due-label,
.checkin-shot-cycle__due-copy {
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
  margin: 0 0 var(--space-1);
}

.checkin-shot-cycle__empty {
  color: var(--color-text-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-1);
}

.checkin-shot-cycle__due-value {
  color: var(--color-text-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2);
}

/* Provisional: a locally derived estimate. Dashed border and a muted tint,
   so it reads as "not settled yet" beside the solid cards around it. */
.checkin-shot-cycle__provisional {
  background: var(--color-surface-tint);
  border: 1px dashed #A9C6E4;
  border-radius: 12px;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
}

.checkin-shot-cycle__provisional-hint {
  color: var(--color-text-secondary);
  font-size: var(--font-size-12);
  margin: 0 0 var(--space-2);
}

.checkin-shot-cycle__overdue {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 12px;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
}

.checkin-shot-cycle__overdue-label {
  color: #B91C1C;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  margin: 0 0 2px;
  text-transform: uppercase;
}

.checkin-shot-cycle__overdue-copy {
  color: #7F1D1D;
  font-size: var(--font-size-14);
  margin: 0 0 var(--space-1);
}

.checkin-shot-cycle__overdue .checkin-shot-cycle__due-value {
  color: #7F1D1D;
  margin-bottom: 0;
}

.checkin-shot-cycle__interval {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.checkin-shot-cycle__interval .profile-row-edit-btn {
  margin-top: 0;
}

.checkin-shot-cycle__interval-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-13);
}

.checkin-shot-cycle__interval-edit {
  margin-bottom: var(--space-3);
}

.checkin-shot-cycle__interval-edit .checkin-shot-cycle__interval-label {
  display: block;
  margin-bottom: var(--space-1);
}

.checkin-shot-cycle__interval-bounds {
  color: var(--color-text-secondary);
  display: flex;
  font-size: var(--font-size-11);
  justify-content: space-between;
  margin-top: 2px;
}

.checkin-shot-cycle__interval-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.checkin-shot-cycle__interval-actions .checkin-btn--primary {
  width: auto;
  flex: 1 1 0;
}

.checkin-shot-cycle__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.checkin-shot-cycle__strikes {
  color: var(--color-text-secondary);
  font-size: var(--font-size-12);
  margin: var(--space-2) 0 0;
}

.checkin-shot-cycle__status {
  border-radius: 10px;
  font-size: var(--font-size-13);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
}

.checkin-shot-cycle__status--ok {
  background: var(--color-surface-tint);
  color: var(--color-brand-navy);
}

.checkin-shot-cycle__status--error {
  background: #FEF2F2;
  color: #7F1D1D;
}

.checkin-shot-cycle__status--error .checkin-btn {
  margin-top: var(--space-2);
}

/* Scrim: dims the card behind the dialog and swallows taps aimed at it.
   Absolute, not fixed, so it covers this section only — a full-viewport
   overlay from a card would darken the whole app for a local choice. */
.checkin-reason-picker__scrim {
  background: color-mix(in srgb, var(--color-brand-ink) 45%, transparent);
  border-radius: inherit;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.checkin-reason-picker {
  background: var(--color-surface-raised);
  border: 1px solid #D6E6F7;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-brand-ink) 24%, transparent);
  left: var(--space-3);
  padding: var(--space-4);
  position: absolute;
  right: var(--space-3);
  top: var(--space-4);
  z-index: 2;
}

.checkin-reason-picker__title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-3);
}

.checkin-reason-picker__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checkin-reason-picker__option {
  text-align: left;
  justify-content: flex-start;
}

.checkin-reason-picker__cancel {
  margin-top: var(--space-3);
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * Profile — round-3 remediation
 * --------------------------------------------------------------------------- */

/* Collapsible section groups. */
.profile-group__toggle {
  align-items: center;
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 14px;
  color: var(--color-brand-navy);
  cursor: pointer;
  display: flex;
  font-family: var(--font-sans);
  font-size: var(--font-size-15, var(--font-size-16));
  font-weight: var(--font-weight-bold);
  justify-content: space-between;
  margin-top: var(--space-4);
  min-height: 48px;
  padding: 12px var(--space-4);
  width: 100%;
}

.profile-group__chevron {
  font-size: var(--font-size-12);
  opacity: 0.7;
}

.profile-group__body {
  display: grid;
  gap: 0;
}

/* `hidden` must win over the grid display above — without this the attribute
   is inert on a grid container and the group never collapses. */
.profile-group__body[hidden] {
  display: none;
}

/* Support-identifier rows: label, masked value, copy button.
   Grid rather than flex so the copy button keeps a fixed column and the
   masked value can shrink; `overflow-wrap: anywhere` on the value is what
   stops a 26-character ULID pushing the button off a 320 px viewport. */
.profile-support-id {
  align-items: center;
  background: var(--color-surface-page);
  border: 1px solid #E2EEF8;
  border-radius: 12px;
  display: grid;
  gap: var(--space-1) var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.profile-support-id__label {
  color: var(--color-brand-navy);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
  grid-column: 1 / -1;
}

.profile-support-id__value {
  color: var(--color-brand-primary);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--font-size-13);
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-support-id__copy {
  background: #EDF4FC;
  border: 1px solid #D6E6F7;
  border-radius: 999px;
  color: var(--color-brand-navy);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  min-height: 32px;
  padding: 6px 12px;
  white-space: nowrap;
}

.profile-support-id__error {
  color: #B91C1C;
  font-size: var(--font-size-12);
  margin-top: var(--space-1);
}

/* Consent rows.
 *
 * This was a two-child flex row with no column control, so the label took
 * whatever width it wanted and squeezed the hint into a sliver — and the
 * hint then broke after its hyphen, giving "Non-" on one line and a lone
 * "revocable" on the next. That is an ordinary post-hyphen break, NOT an
 * overflow: overflow-wrap/word-break do nothing to it, because the browser
 * is taking a break opportunity the text legitimately offers.
 *
 * Two changes together fix it, and neither is sufficient alone:
 *   1. explicit grid columns, so the hint column is sized to its content
 *      instead of being crushed by a greedy label;
 *   2. `white-space: nowrap` here plus U+2011 NON-BREAKING HYPHEN in the
 *      i18n value (see 'screen.profile.consent.non_revocable').
 */
.profile-consent-locked {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}

.profile-consent-locked__label {
  min-width: 0;
  overflow-wrap: break-word;
}

.profile-consent-locked__hint {
  color: #7A9EC5;
  font-size: var(--font-size-12);
  white-space: nowrap;
}

/* HIPAA revocation — a real control where a "Non-revocable" chip used to be. */
.profile-consent-hipaa__revoke {
  background: none;
  border: 1px solid #FCA5A5;
  border-radius: 999px;
  color: #B91C1C;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 36px;
  padding: 8px 14px;
}

.profile-consent-hipaa__revoke--confirm {
  background: #B91C1C;
  border-color: #B91C1C;
  color: var(--color-text-inverse);
}

.profile-consent-hipaa__revoke:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.profile-consent-hipaa-confirm {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 12px;
  margin-top: var(--space-2);
  padding: var(--space-3);
}

.profile-consent-hipaa-confirm__title {
  color: #7F1D1D;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.profile-consent-hipaa-confirm__rights {
  color: #7F1D1D;
  font-size: var(--font-size-13);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2);
}

.profile-consent-hipaa-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.profile-consent-hipaa-confirm__actions .profile-row-cancel-btn,
.profile-consent-hipaa-confirm__actions .profile-consent-hipaa__revoke {
  grid-column: auto;
  margin-top: 0;
}

.profile-consent-hipaa__result {
  color: var(--color-brand-navy);
  font-size: var(--font-size-13);
  margin-top: var(--space-2);
}

.profile-consent-hipaa__result--error {
  color: #B91C1C;
}

/* Quiet-hours hour pickers — same chrome as the timezone select they sit with. */
.profile-hour-select {
  appearance: none;
  background: #FFFFFF;
  border: 1px solid #C7DCF2;
  border-radius: var(--border-radius-md);
  color: var(--color-brand-navy);
  flex: 0 0 148px;
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  min-height: 44px;
  padding: 8px 12px;
  width: 148px;
}

/* PA card — real disabled styling.
 *
 * The disabled state was an inline `opacity: 0.55`, which on the card's teal
 * button still reads as a live, tappable control: it is a slightly paler
 * teal on navy, not a greyed-out button. Patients tapped it repeatedly and
 * reported the report as broken. A disabled control has to look disabled —
 * flat grey, muted text, not-allowed cursor — and the rule lives here rather
 * than inline so `:disabled` alone drives it. */
.profile-pa-report-card__button:disabled {
  background: #2A4A78;
  color: #8FA9C9;
  cursor: not-allowed;
}

.profile-pa-report-card__note {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-sans);
  font-size: var(--font-size-13);
  margin: 0 0 var(--space-2);
}

.profile-pa-report-card__retry {
  background: none;
  border: 0;
  color: var(--color-brand-teal);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

/* Premium price — rendered only when the tier catalog has answered. */
.profile-premium-price {
  color: var(--color-brand-navy);
  font-size: var(--font-size-16);
  margin: var(--space-1) 0 var(--space-2);
}

/* Voucher CTA must not squeeze on a narrow viewport.
   The row is `display: flex` with an input at `flex: 1 1 auto`; without an
   explicit `flex-shrink: 0` the button is also shrinkable, and on a 320 px
   screen "Redeem" compressed until it wrapped mid-word. */
.profile-voucher-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Delete my account (Profile) + the app-wide deletion-hold banner.
 * ------------------------------------------------------------------------- */
.profile-section--danger {
  border-color: #FCA5A5;
}

.profile-delete-account {
  display: grid;
  gap: var(--space-3, 12px);
}

.profile-delete-account__title {
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.profile-delete-account__steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: var(--font-size-14, 14px);
  color: var(--color-text-secondary, inherit);
}

.profile-delete-account__confirm-label {
  display: grid;
  gap: 6px;
  font-size: var(--font-size-12, 12px);
}

.profile-delete-account__confirm-input {
  font: inherit;
  letter-spacing: 0.08em;
  max-width: 200px;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #D4D4D8);
  border-radius: 8px;
}

.profile-delete-account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.profile-delete-account__pending {
  margin: 0;
  color: #B91C1C;
  font-weight: var(--font-weight-semibold);
}

.profile-delete-account__error,
.deletion-hold-banner__error {
  margin: 0;
  color: var(--color-danger, #B91C1C);
  font-size: var(--font-size-12, 12px);
}

.profile-delete-account__result {
  margin: 0;
  color: var(--color-text-secondary, inherit);
}

peppi-deletion-hold-banner[hidden] {
  display: none;
}

.deletion-hold-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  background: var(--color-danger-bg, #FEF2F2);
  color: var(--color-danger, #B91C1C);
  border-bottom: 1px solid var(--color-danger, #B91C1C);
  font-size: var(--font-size-14, 14px);
}

.deletion-hold-banner__message {
  flex: 1 1 240px;
}

.deletion-hold-banner__keep {
  background: #fff;
  border: 1px solid var(--color-danger, #B91C1C);
  border-radius: 999px;
  color: var(--color-danger, #B91C1C);
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  min-height: 36px;
  padding: 6px 14px;
}

.deletion-hold-banner__keep[disabled] {
  opacity: 0.6;
  cursor: progress;
}