/*
 * 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 absolutely-positioned children to the bar's own box (not the
   * viewport), which matters 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;
  /* Holds either the patient's photo or the person icon — clip whichever it
   * is to the circle. */
  overflow: hidden;
}

.peppi-app-header__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.peppi-app-header__avatar-icon {
  display: block;
  opacity: 0.9;
}

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

/* ---------------------------------------------------------------------------
 * 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,
.pa-report-tile {
  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-consent-locked__hint,
.profile-account__org,
.insights-archive__empty,
.insights-card__note,
.pa-report-tile__label {
  color: #3A5070;
  font-size: var(--font-size-13);
  line-height: var(--line-height-relaxed);
}

/* A line under a chart explaining something the chart itself cannot say —
 * today, why the Daily Protein bars are grey for a patient we have no weight
 * for. Everything but the spacing comes from the body-copy group above. */
.insights-card__note {
  margin: var(--space-2) 0 0;
}

.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%;
}

/* The resistance-training duration placeholder uses secondary text, which is
   8.2:1 on the white check-in section. Setting opacity: 1 overrides any
   browser default that dims placeholders, which would pull the ratio under
   4.5:1. */
.checkin-rt-session-form .checkin-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}

.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;
}

/* One dot and its label, kept together across a line break. The gap here
 * replaces the whitespace between the dot and the text, which `flex` on the
 * row used to collapse away. */
.insights-tier-legend__item {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

/* The Daily Protein legend dots. They wear the Home meal counter-timer's
 * colours so the legend, the bars it explains and the timer on Home all say
 * the same thing, and none of them is red (Felicia, 2026-09-09). These are
 * the same three values the canvas inlines as TOKEN.proteinOnTarget and its
 * neighbours in web/src/screens/insights/InsightsCharts.ts — canvas cannot
 * read custom properties, so the pair has to be kept in step by hand.
 *
 * The classes used to be named for the colours (--green, --yellow, --red),
 * which is how a legend ends up with a class called "red" that is not red. */
.tier-dot--on-target { background: var(--color-meal-protected-text, #0F6E56); }
.tier-dot--near-target { background: var(--color-meal-fading-text, #854F0B); }
.tier-dot--below-target { background: var(--color-meal-vulnerable-text, #2F5060); }

.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--none {
  color: #6B7A8C;
  font-size: 20px;
  font-weight: 600;
}

.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__title {
  color: var(--color-text-inverse);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
}

.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%;
}

.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-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__last-shot {
  margin-top: var(--space-3);
}

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

.checkin-shot-cycle__last-shot-input {
  border: 1.5px solid var(--color-border, #D6E6F7);
  border-radius: 8px;
  box-sizing: border-box;
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  padding: 8px 10px;
  width: 100%;
}

.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
 * --------------------------------------------------------------------------- */

/* 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;
}

/* The identity link inside the navy card's note. The browser default link
 * colour fails contrast on navy, so it takes the same teal and underline as
 * the retry button, plus a visible keyboard focus ring. */
.profile-pa-report-card__link {
  color: var(--color-brand-teal);
  text-decoration: underline;
}

.profile-pa-report-card__link:focus-visible {
  outline: 2px solid var(--color-brand-teal);
  outline-offset: 2px;
}

/* 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;
}

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

.billing-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);
}

.billing-banner__message {
  flex: 1 1 240px;
}

.billing-banner__action {
  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;
}

.billing-banner__action[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Billing section of Profile. */
.profile-billing__rows {
  margin: 8px 0;
}

.profile-billing__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.profile-billing__row dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.profile-billing__actions,
.profile-billing__confirm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-billing__confirm p {
  flex: 1 1 100%;
  margin: 0;
}

.profile-billing__btn {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  padding: 8px 16px;
}

.profile-billing__btn--primary {
  font-weight: var(--font-weight-semibold);
}

.profile-billing__btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.profile-billing__notice {
  margin: 8px 0;
}

.profile-billing__error {
  color: var(--color-danger, #B91C1C);
  margin: 8px 0;
}


peppi-consent-refusal-banner[hidden] {
  display: none;
}

.consent-refusal-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  background: var(--color-warning-bg, #FFFBEB);
  color: var(--color-text-primary, #1F2937);
  border-bottom: 1px solid var(--color-warning, #B45309);
  font-size: var(--font-size-14, 14px);
}

.consent-refusal-banner__message {
  flex: 1 1 240px;
}

.consent-refusal-banner__review {
  background: #fff;
  border: 1px solid var(--color-warning, #B45309);
  border-radius: 999px;
  color: var(--color-warning, #B45309);
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  min-height: 36px;
  padding: 6px 14px;
}

peppi-onboarding-refusal-banner[hidden] {
  display: none;
}

/* The live region stays in the DOM while nothing is on show, so the first
 * refusal is announced. Only a box with something to show takes up space. */
.onboarding-refusal-banner:not(.onboarding-refusal-banner--shown) {
  display: block;
  height: 0;
  overflow: hidden;
}

.onboarding-refusal-banner--shown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  background: var(--color-warning-bg, #FFFBEB);
  color: var(--color-text-primary, #1F2937);
  border-bottom: 1px solid var(--color-warning, #B45309);
  font-size: var(--font-size-14, 14px);
}

.onboarding-refusal-banner__text {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.onboarding-refusal-banner__title,
.onboarding-refusal-banner__message,
.onboarding-refusal-banner__error {
  margin: 0;
}

.onboarding-refusal-banner__title {
  font-weight: var(--font-weight-semibold);
}

.onboarding-refusal-banner__error {
  color: var(--color-danger, #B91C1C);
}

.onboarding-refusal-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.onboarding-refusal-banner__retry,
.onboarding-refusal-banner__update,
.onboarding-refusal-banner__dismiss {
  background: #fff;
  border: 1px solid var(--color-warning, #B45309);
  border-radius: 999px;
  color: var(--color-warning, #B45309);
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  min-height: 36px;
  padding: 6px 14px;
}

.onboarding-refusal-banner__retry[aria-disabled="true"],
.onboarding-refusal-banner__update[aria-disabled="true"],
.onboarding-refusal-banner__dismiss[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* ---------------------------------------------------------------------------
 * pa-report — patient-facing PA report screen (confirmation, hero, tiles,
 * actions). No class beginning with pa-report carried any CSS before this;
 * .pa-report-tile and .pa-report-tile__label join the shared card and
 * body-copy groups above instead of repeating them here. Everything else on
 * this screen is a shape no other screen has, so it lives in this block.
 * --------------------------------------------------------------------------- */

.pa-report-confirm {
  text-align: center;
  margin-bottom: var(--space-5);
}

.pa-report-confirm__ring {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-meal-protected-bg);
  border: 2px solid var(--color-success-ring);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --color-meal-protected-bg / --color-meal-protected-text are named for the
 * Home meal counter-timer cards; the values are right for this confirmation
 * ring but the names are not — anyone renaming those tokens later should
 * check here too. */
.pa-report-confirm__ring svg {
  width: 26px;
  height: 26px;
  color: var(--color-meal-protected-text);
}

.pa-report-confirm__heading {
  font-family: var(--font-sans);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  letter-spacing: -0.3px;
  line-height: var(--line-height-snug);
  margin: 0;
}

.pa-report-confirm__subline {
  font-size: var(--font-size-12);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.pa-report-hero {
  background: var(--gradient-clinical-header);
  border-radius: 20px;
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.pa-report-hero::after {
  content: '';
  position: absolute;
  right: -56px;
  top: -60px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-brand-teal) 18%, transparent) 0%,
    transparent 68%
  );
}

.pa-report-hero__number {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.pa-report-hero__count {
  font-family: var(--font-sans);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  line-height: 1;
  letter-spacing: -0.03em;
}

.pa-report-hero__label {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
  color: var(--color-meal-counted-bg);
}

.pa-report-hero__sentence,
.pa-report-hero__fallback {
  position: relative;
  font-size: var(--font-size-13);
  color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent);
  margin-top: var(--space-2);
  line-height: var(--line-height-normal);
  max-width: 255px;
}

.pa-report-hero__fallback {
  color: var(--color-text-inverse);
}

.pa-report-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

@media (max-width: 320px) {
  .pa-report-tiles {
    grid-template-columns: 1fr;
  }
}

.pa-report-tile {
  box-shadow: var(--shadow-sm);
}

.pa-report-tile__value {
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

/* A value the report never captured is a short sentence rather than a figure,
   so it drops out of the number style and reads as quiet supporting text. */
.pa-report-tile__value--absent {
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.pa-report-tile__unit {
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin-left: 2px;
}

.pa-report-tile__label {
  font-size: var(--font-size-11);
  margin-top: var(--space-2);
}

.pa-report-outdated {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: 13px;
  background: var(--color-surface-raised);
}

.pa-report-outdated__heading {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-15);
}

.pa-report-outdated__body {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-13);
}

.pa-report-outdated__link {
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-primary);
  text-decoration: underline;
}

.pa-report-actions {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

/*
 * Narrow screens pin the action bar to the bottom of the scroll area, just
 * above the fixed tab bar, the way the design mock does. Sticky rather than
 * fixed, so the bar sits in the flow: at the end of the page it rests under
 * the last tile instead of covering it, and the page's own bottom padding
 * (which already clears the tab bar) keeps it clear of the tab bar there.
 *
 * The tab bar's 92px height is set directly on peppi-tab-bar and on #app's
 * bottom padding, with no shared custom property. The fallback below matches
 * both; if the tab bar ever publishes --tab-bar-height, this picks it up.
 * The bar extends to the screen's edges by cancelling the screen's side
 * padding, and adds the bottom safe-area inset to its own padding.
 */
@media (max-width: 640px) {
  .pa-report-actions {
    position: sticky;
    bottom: var(--tab-bar-height, 92px);
    z-index: 10;
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface-raised);
  }
}

.pa-report-btn {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.pa-report-btn--view {
  width: 100%;
  padding: var(--space-4);
  border-radius: 13px;
  border: 0;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-15);
}

/* The global :focus-visible rule also resets border-radius, which would square
 * these buttons off while focused, so each variant restates its own radius. */
.pa-report-btn:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.pa-report-btn--view:focus-visible {
  border-radius: 13px;
}

.pa-report-btn--view:active:not(:disabled) {
  background: var(--color-brand-navy);
}

.pa-report-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pa-report-btn[aria-busy="true"] {
  cursor: progress;
}

.pa-report-error {
  margin-top: var(--space-2);
  color: var(--color-danger, #B91C1C);
  font-size: var(--font-size-13);
}

@media print {
  peppi-app-header,
  peppi-tab-bar,
  .pa-report-actions {
    display: none;
  }

  .pa-report-hero {
    background: none;
  }
}

/* ---------------------------------------------------------------------------
 * Home stat card: the meal a patient logged after eating it
 *
 * The border marks which figures one meal moved, and the pop draws the eye to
 * them once. The pop is the part that has to be optional: a number changing
 * under a patient who asked for reduced motion should change quietly, so the
 * animation is declared only under prefers-reduced-motion: no-preference and
 * the border stands on its own for everyone else.
 * --------------------------------------------------------------------------- */

.home-stat-card--added {
  border-color: var(--color-shield-protected);
}

@media (prefers-reduced-motion: no-preference) {
  .home-stat-card--added {
    animation: home-stat-added-pop 220ms var(--easing-standard) 1;
  }
}

@keyframes home-stat-added-pop {
  from { transform: scale(1); }
  50%  { transform: scale(1.03); }
  to   { transform: scale(1); }
}

/*
 * pa-send — the "Back to report" link on step 1 reads as text, not as a
 * button. It keeps a 44px tap height and restates the focus ring so the
 * outline does not depend on the global rule alone.
 */
.pa-send-btn--link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  background: none;
  border: 0;
  color: var(--color-brand-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-13);
  text-decoration: underline;
}

.pa-send-btn--link:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/*
 * Generate screen: stacked label and input fields, danger-colored errors, and
 * buttons that match the report screen's primary and secondary actions.
 */
.pa-generate {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pa-generate__title {
  margin: 0;
}

.pa-generate__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.pa-generate__field label {
  font-weight: var(--font-weight-semibold);
}

.pa-generate__field input {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-surface-raised);
  color: inherit;
}

.pa-generate__field input[aria-invalid='true'] {
  border-color: var(--color-danger);
}

.pa-generate__hint {
  margin: 0;
  font-size: var(--font-size-13);
  color: var(--color-text-muted);
}

.peppi-patient-identity-panel__hint {
  margin: 0;
  font-size: var(--font-size-13);
  color: var(--color-text-muted);
}

.pa-generate__error,
.pa-generate__note {
  margin: 0;
  font-size: var(--font-size-13);
  color: var(--color-danger);
}

.pa-generate__row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.pa-generate__row dt {
  font-weight: var(--font-weight-semibold);
}

.pa-generate__row dd {
  margin: 0;
}

.pa-generate-preview__sample {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 13px;
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

.pa-generate-preview__label {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-semibold);
}

.pa-generate-preview__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
}

.pa-generate-preview__tile dt {
  font-size: var(--font-size-13);
}

.pa-generate-preview__tile dd {
  margin: 0;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
}

.pa-generate-btn {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-4);
  border-radius: 13px;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-15);
  cursor: pointer;
}

.pa-generate-btn--primary {
  border: 0;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.pa-generate-btn--secondary {
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-brand-primary);
}

.pa-generate-btn:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-radius: 13px;
}

.pa-generate-btn--primary:active:not(:disabled) {
  background: var(--color-brand-navy);
}

.pa-generate-btn--secondary:active:not(:disabled) {
  background: var(--color-surface-tint);
  border-color: var(--color-brand-primary);
}

.pa-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* dose-plus:begin */
/* ---------------------------------------------------------------------------
 * Dose+ screen
 *
 * Every rule here hangs on `.dose-plus`, the class the screen puts on its own
 * host, so nothing in this block can reach another screen or the Profile shot
 * card. The shot card is drawn inside the screen, so its Dose+ layout is styled
 * from here and its Profile layout is left as it was.
 *
 * Colors come from the design tokens only, so a white-label theme still
 * applies. The one tint the tokens do not carry, the Ready pill, is mixed from
 * the brand teal and the raised surface.
 *
 * Reading order is the DOM order. Nothing here sets `order` or reverses a
 * direction, and every flex row keeps its children in the order they were
 * written.
 *
 * Every link, button, chip, and slider is at least 48 by 48 pixels, and
 * nothing on the screen truncates: names, doses, and chips wrap onto more
 * lines as the phone's text size grows.
 * --------------------------------------------------------------------------- */

.dose-plus {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Nothing on this screen truncates or holds its text on one line. */
.dose-plus h2,
.dose-plus h3,
.dose-plus p,
.dose-plus ul,
.dose-plus li,
.dose-plus a,
.dose-plus button,
.dose-plus div,
.dose-plus label,
.dose-plus section,
.dose-plus span,
.dose-plus strong {
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* Touch targets. `inline-flex` is set on the controls below because a
   min-height does nothing on an inline box. */
.dose-plus a,
.dose-plus button,
.dose-plus input[type='range'] {
  box-sizing: border-box;
  min-height: 48px;
  min-width: 48px;
}

.dose-plus button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Design preview banner, shown above the sections while a sample frame is open */
.dose-plus__preview-banner {
  background: var(--color-surface-tint);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

/* Sections */
.dose-plus__section {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  min-width: 0;
  padding: var(--space-4);
}

.dose-plus__story {
  background: var(--color-surface-tint);
}

.dose-plus__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.dose-plus__heading {
  color: var(--color-text-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin: 0;
  min-width: 0;
}

.dose-plus__body,
.dose-plus__empty,
.dose-plus__status,
.dose-plus__subline {
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-3);
}

/* Story card */
.dose-plus__pill {
  align-items: center;
  border-radius: var(--border-radius-pill);
  display: inline-flex;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  padding: var(--space-1) var(--space-3);
}

.dose-plus__pill--needs_details {
  background: var(--color-border);
  color: var(--color-brand-navy);
}

.dose-plus__pill--update_ready,
.dose-plus__pill--ready {
  background: color-mix(in srgb, var(--color-brand-teal) 45%, var(--color-surface-raised));
  color: var(--color-brand-navy);
}

.dose-plus__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dose-plus__share,
.dose-plus__preview,
.dose-plus__retry {
  align-items: center;
  border-radius: 13px;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-semibold);
  justify-content: center;
  line-height: 1.2;
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

.dose-plus__share {
  background: var(--color-brand-primary);
  border: 1px solid var(--color-brand-primary);
  color: var(--color-text-inverse);
  flex: 1 1 auto;
}

.dose-plus__share:active:not(:disabled) {
  background: var(--color-brand-navy);
  border-color: var(--color-brand-navy);
}

.dose-plus__preview,
.dose-plus__retry {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-brand-primary);
}

.dose-plus__preview:active:not(:disabled),
.dose-plus__retry:active:not(:disabled) {
  background: var(--color-surface-tint);
  border-color: var(--color-brand-primary);
}

/* Medication */
.dose-plus__medication {
  margin-bottom: var(--space-2);
}

.dose-plus__medication-title {
  color: var(--color-text-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-1);
}

.dose-plus__medication .dose-plus__subline {
  margin-bottom: 0;
}

/* Edit and Add links, and the chips */
.dose-plus__edit {
  align-items: center;
  color: var(--color-brand-blue-bright);
  display: inline-flex;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  justify-content: center;
  padding: 0 var(--space-2);
  text-decoration: none;
}

.dose-plus__add,
.dose-plus__chip {
  align-items: center;
  border-radius: var(--border-radius-pill);
  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.2;
  padding: var(--space-2) var(--space-4);
  text-align: center;
  text-decoration: none;
}

.dose-plus__chip {
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border);
  color: var(--color-brand-navy);
}

.dose-plus__add {
  background: transparent;
  border: 1px dashed var(--color-text-muted);
  color: var(--color-brand-blue-bright);
}

.dose-plus__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.dose-plus__chip-item {
  display: flex;
  min-width: 0;
}

/* Tried rows. Each row is one link: the name and subline on the left, a
   decorative chevron on the right. The link is a flex box so the 48 pixel
   minimum above is honored, and the text column wraps. */
.dose-plus__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.dose-plus__row-item {
  min-width: 0;
}

.dose-plus__row {
  align-items: center;
  border-radius: 12px;
  color: var(--color-text-primary);
  display: flex;
  font-size: var(--font-size-15);
  gap: var(--space-3);
  justify-content: space-between;
  line-height: var(--line-height-snug);
  min-width: 0;
  padding: var(--space-2) 0;
  text-decoration: none;
}

.dose-plus__row:active {
  background: var(--color-surface-tint);
}

.dose-plus__row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.dose-plus__row-name {
  display: block;
  font-weight: var(--font-weight-semibold);
}

.dose-plus__row-sub {
  color: var(--color-text-secondary);
  display: block;
  font-size: var(--font-size-14);
}

.dose-plus__row-chevron {
  flex: none;
}

.dose-plus__row-chevron::after {
  color: var(--color-text-muted);
  content: '\203A';
  font-size: var(--font-size-18);
  line-height: 1;
}

/* The shot card, Dose+ layout. It is the Profile card's markup and styling, set
   inside the medication section. This block draws what differs there: the
   separator above the card, the heading size, wrapped button text, the logged
   row with its Undo, and the unavailable notice. */
.dose-plus .checkin-shot-cycle {
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

/* The card's h3 sits under the section's 16px h2, so it is drawn no larger and
   no heavier than that heading. Profile keeps the 18px bold title. */
.dose-plus .checkin-shot-cycle .profile-section__title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
}

/* Button labels wrap at larger text sizes, so they wrap centered and loose. */
.dose-plus .checkin-shot-cycle .checkin-btn {
  line-height: 1.2;
  text-align: center;
}

.dose-plus .checkin-shot-cycle__ctas--logged {
  align-items: center;
  gap: var(--space-1);
}

.dose-plus .checkin-shot-cycle__ctas--logged .profile-row-edit-btn {
  background: transparent;
  border: 0;
  color: var(--color-brand-blue-bright);
  font-size: var(--font-size-14);
  line-height: 1.2;
  margin-top: 0;
  padding: 0 var(--space-2);
}

.dose-plus .checkin-shot-cycle__ctas--logged .profile-row-edit-btn:disabled {
  color: var(--color-text-muted);
}

.dose-plus .checkin-shot-cycle__sep {
  color: var(--color-text-muted);
}

.dose-plus .checkin-shot-cycle__undo-state {
  align-items: center;
  display: inline-flex;
}

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

.dose-plus .checkin-shot-cycle__unavailable p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
  margin: 0;
}

.dose-plus .checkin-shot-cycle__interval-edit input[type='range'] {
  width: 100%;
}
/* dose-plus:end */

/*
 * Upgrade and checkout return screens: a stacked column, a term picker made of
 * radio cards, a Free against Plus list, and the disclosures above one
 * required checkbox and one button.
 */
.upgrade {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.upgrade__title {
  margin: 0;
}

.upgrade__lead,
.upgrade__hint,
.upgrade__note {
  margin: 0;
}

.upgrade__hint {
  font-size: var(--font-size-13);
  color: var(--color-text-muted);
}

.upgrade__error {
  margin: 0;
  font-size: var(--font-size-13);
  color: var(--color-danger);
}

.upgrade__notice {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-surface-tint);
}

.upgrade__terms {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.upgrade__term {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-surface-raised);
  cursor: pointer;
}

.upgrade__term[data-selected='true'] {
  border-color: var(--color-brand-primary);
}

.upgrade__term-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.upgrade__term-name {
  font-weight: var(--font-weight-semibold);
}

.upgrade__badge {
  font-size: var(--font-size-13);
  color: var(--color-brand-primary);
}

.upgrade__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.upgrade__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.upgrade__row-label {
  font-weight: var(--font-weight-semibold);
}

.upgrade__pa-label {
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-primary);
}

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

.upgrade__disclosures p {
  margin: 0;
  font-size: var(--font-size-13);
}

.upgrade__agree {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.upgrade-btn {
  width: 100%;
  padding: var(--space-4);
  border-radius: 13px;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-15);
  cursor: pointer;
}

.upgrade-btn--primary {
  border: 0;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.upgrade-btn--secondary {
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-brand-primary);
}

.upgrade-btn:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.upgrade-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}