/*
 * slAinte — Shared Design System
 * Canonical source of truth for all mockup components.
 *
 * Usage in a component file:
 *   <link rel="stylesheet" href="shared.css">
 *
 * Add component-specific overrides in a <style> block AFTER this link.
 *
 * Typography stack (loaded via @import below):
 *   Lora            — screen titles / section headings only (--font-serif)
 *   Figtree         — all UI chrome: buttons, cards, labels, nav, chips (--font-body)
 *   JetBrains Mono  — monospace / code surfaces (--font-mono)
 *   Syne            — removed from import; legacy files fall back to sans-serif
 *
 * Rule: serif (Lora) for titles ≥ 1rem that introduce a screen or section.
 *       sans-serif (Figtree) for everything interactive or informational.
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&family=Raleway:wght@300;400&display=swap');

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Semantic Color Tokens — Light ───────────────────────────── */
:root {
  /* Brand */
  --brand:                  #1f6f6b;
  --brand-subtle:           #e3f0ef;
  --brand-mid:              #195c59;

  /* Primary action foreground */
  --primary-action-fg:      #FFFFFF;

  /* Surfaces */
  --bg-base:                #F8FAFB;
  --bg-surface:             #FFFFFF;
  --bg-elevated:            #FFFFFF;

  /* Phone chrome (shared across all mockup widgets) */
  --phone-bg:               #FFFFFF;

  /* Content */
  --content-primary:        #323233;
  --content-secondary:      #6B7280;
  --content-disabled:       #D1D5DB;
  --content-inverse:        #FFFFFF;

  /* Borders */
  --border-default:         #E5E7EB;
  --border-strong:          #9CA3AF;

  /* Semantic */
  --success:                #059669;
  --success-subtle:         #D1FAE5;
  --warning:                #D97706;
  --warning-subtle:         #FEF3C7;
  --error:                  #DC2626;
  --error-subtle:           #FEE2E2;
  --info:                   #2563EB;
  --info-subtle:            #DBEAFE;

  /* Record category accents */
  --cat-medical:            #1f6f6b;
  --cat-visits:             #EA580C;
  --cat-screening:          #2563EB;
  --cat-imaging:            #7C3AED;
  --cat-bloodwork:          #DC2626;
  --cat-medicines:          #059669;
  --cat-allergy:            #D97706;
  --cat-immunise:           #0891B2;
  --cat-specialist:         #4F46E5;
  --cat-genetics:           #A21CAF;
  --cat-acp:                #BE185D;
  --cat-family:             #92400E;

  /* Record category subtle backgrounds (light mode) */
  --cat-medical-subtle:     #e3f0ef;
  --cat-visits-subtle:      #fff1e8;
  --cat-screening-subtle:   #dbeafe;
  --cat-imaging-subtle:     #ede9fe;
  --cat-bloodwork-subtle:   #fee2e2;
  --cat-medicines-subtle:   #d1fae5;
  --cat-allergy-subtle:     #fef3c7;
  --cat-immunise-subtle:    #e0f2fe;
  --cat-specialist-subtle:  #e0e7ff;
  --cat-genetics-subtle:    #fae8ff;
  --cat-acp-subtle:         #fce7f3;
  --cat-family-subtle:      #fef7ee;

  /* Spacing scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* Radii */
  --r-sm:   8px;
  --r-md:   12px;
  --r-card: 16px;
  --r-pill: 999px;

  /* Borders (shorthand --border → --border-default) */
  --border:         var(--border-default);

  /* Typography tokens */
  --font-serif:     'Lora', serif;
  --font-body:      'Figtree', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Accent colours (app-showcase / older mockups) */
  --coral:          #d96a3b;
  --coral-dark:     #b8532c;
  --amber:          #FBBF24;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);

  /* Soft divider — more subtle than --border-default; theme-aware */
  --divider: rgba(0,0,0,0.07);
}

/* ── Semantic Color Tokens — Dark ────────────────────────────── */
body.dark, .dark {
  --brand:                  #3dc4ba;
  --brand-subtle:           #0d3533;
  --brand-mid:              #31aba1;

  --primary-action-fg:      #03201f;

  --bg-base:                #0B1120;
  --bg-surface:             #111827;
  --bg-elevated:            #1F2937;

  /* Phone chrome */
  --phone-bg:               #0b1117;

  --content-primary:        #F9FAFB;
  --content-secondary:      #9CA3AF;
  --content-disabled:       #374151;
  --content-inverse:        #111827;

  --border-default:         #1F2937;
  --border-strong:          #374151;

  --success:                #10B981;
  --success-subtle:         #064E3B;
  --warning:                #FBBF24;
  --warning-subtle:         #78350F;
  --error:                  #F87171;
  --error-subtle:           #7F1D1D;
  --info:                   #60A5FA;
  --info-subtle:            #1E3A5F;

  /* Record category subtle backgrounds (dark mode) */
  --cat-medical-subtle:     #0d3533;
  --cat-visits-subtle:      #431407;
  --cat-screening-subtle:   #1e3a5f;
  --cat-imaging-subtle:     #2e1065;
  --cat-bloodwork-subtle:   #7f1d1d;
  --cat-medicines-subtle:   #064e3b;
  --cat-allergy-subtle:     #78350f;
  --cat-immunise-subtle:    #0c4a6e;
  --cat-specialist-subtle:  #1e1b4b;
  --cat-genetics-subtle:    #4a044e;
  --cat-acp-subtle:         #831843;
  --cat-family-subtle:      #431407;

  --divider: rgba(255,255,255,0.07);
}

/* ── Theme transition ─────────────────────────────────────────── */
body, .phone-frame, .status-bar, .nav-bar, .nav-bar-transparent,
.home-indicator, .field-card, .field-row, .lifestyle-card,
.lifestyle-row, .seg-control, .seg, .consent-note,
.avatar-circle, .bmi-badge, .modal-sheet {
  transition: background-color 0.3s, border-color 0.3s,
              color 0.3s, box-shadow 0.3s;
}

/* ── Page shell ───────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  min-height: 100vh;
  background-color: #E8EDF2;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%,
      rgba(13,155,138,.09) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence \
type='fractalNoise' baseFrequency='0.75' numOctaves='4' \
stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' \
filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 24px 80px;
}

body.dark {
  background-color: #060C17;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%,
      rgba(45,212,191,.07) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence \
type='fractalNoise' baseFrequency='0.75' numOctaves='4' \
stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' \
filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── Light/Dark mode toggle ───────────────────────────────────── */
.mode-toggle {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-pill);
  padding: 3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.dark .mode-toggle {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(17,24,39,.45);
  cursor: pointer;
  transition: all .2s;
  user-select: none;
}
body.dark .mode-btn { color: rgba(249,250,251,.35); }
.mode-btn.active {
  background: #fff;
  color: var(--content-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
body.dark .mode-btn.active {
  background: #1F2937;
  color: #F9FAFB;
  box-shadow: 0 1px 6px rgba(0,0,0,.4);
}

/* ── Page heading (standalone page header) ────────────────────── */
.page-heading {
  text-align: center;
  margin-bottom: 44px;
}
.page-heading .eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
}
.page-heading h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  color: var(--content-primary);
  line-height: 1.2;
}
.page-heading .sub {
  font-size: 14px;
  color: var(--content-secondary);
  margin-top: 6px;
}

/* ── Phone frame ──────────────────────────────────────────────── */
/*
 * Canonical phone frame — based on story-04 double-ring style.
 * Adapts to light/dark via CSS tokens on the ring layers.
 * For dark-hero screens (subscription flows), override locally.
 */
.phone-frame {
  width: 390px;
  height: 844px;
  flex-shrink: 0;
  background: var(--phone-bg);
  border-radius: 44px;
  border: 1.5px solid var(--border-default);
  overflow: hidden;
  box-shadow:
    0 0 0 6px var(--bg-base),
    0 0 0 7px var(--border-default),
    0 24px 64px rgba(0,0,0,.18);
  position: relative;
  display: flex;
  flex-direction: column;
}
body.dark .phone-frame {
  box-shadow:
    0 0 0 6px rgba(255,255,255,.03),
    0 0 0 7px rgba(255,255,255,.07),
    0 24px 64px rgba(0,0,0,.55);
}

/* Dynamic Island notch (explicit div) */
.notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  background: #131313;
  border-radius: 0 0 24px 24px;
  z-index: 20;
}

/* ── Status bar ───────────────────────────────────────────────── */
.status-bar {
  height: 59px;
  padding: 16px 28px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--bg-surface);
}
.status-time {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--content-primary);
  padding-bottom: 4px;
}
.status-icons {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 4px;
}

/* Status bar SVG icons — set color so currentColor works in SVG children */
.status-icons { color: var(--content-primary); }
.status-icons svg path,
.status-icons svg rect { fill: var(--content-primary); }

/* ── Navigation bar ───────────────────────────────────────────── */
.nav-bar {
  height: 52px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 0;
}
.nav-back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
  color: var(--brand);
}
.nav-back-btn:hover { background: var(--bg-base); }
.nav-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--content-primary);
  flex: 1;
  text-align: center;
}
.nav-action-btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  min-width: 36px;
  text-align: right;
  transition: opacity .15s;
}
.nav-action-btn:hover { opacity: .7; }

/* ── Scroll content ───────────────────────────────────────────── */
.scroll-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.scroll-content::-webkit-scrollbar { display: none; }
.scroll-end { height: 32px; }

/* ── Home indicator ───────────────────────────────────────────── */
.home-indicator {
  height: 34px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-base);
}
.home-bar {
  width: 134px;
  height: 5px;
  background: var(--content-primary);
  border-radius: 3px;
  opacity: .18;
}

/* ── Section headers ──────────────────────────────────────────── */
.section {
  padding: 24px 20px 0;
}
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.section-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--content-secondary);
  white-space: nowrap;
}
.section-rule {
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

/* ── Field card / row ─────────────────────────────────────────── */
.field-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  overflow: hidden;
}
.field-row {
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  transition: background .12s;
}
.field-row:last-child { border-bottom: none; }
.field-row:hover { background: var(--bg-base); }
.field-row.no-action { cursor: default; }
.field-row.no-action:hover { background: var(--bg-surface); }

.field-info { flex: 1; min-width: 0; }
.field-lbl {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--content-secondary);
  margin-bottom: 3px;
}
.field-val {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--content-primary);
}
.field-val .muted {
  color: var(--content-secondary);
  font-weight: 400;
  font-size: 13px;
}
.field-val.empty {
  color: var(--content-disabled);
  font-style: italic;
  font-weight: 400;
}
.chevron { flex-shrink: 0; color: var(--content-disabled); stroke: currentColor; }
.auto-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--content-disabled);
  flex-shrink: 0;
}

/* ── BMI badge ────────────────────────────────────────────────── */
/* Note: .bmi-badge is intentionally distinct from .status-badge.resolved-st.
 * Both use success colours but differ in font (body/700 vs mono/600),
 * size (10px vs 9.5px), and structure (has .bmi-dot child). */
.bmi-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--success-subtle);
  color: var(--success);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-pill);
}
.bmi-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

/* ── Segmented control ────────────────────────────────────────── */
.seg-control {
  display: flex;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.seg {
  flex: 1;
  text-align: center;
  padding: 6px 2px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--content-secondary);
  cursor: pointer;
  transition: all .18s;
  user-select: none;
}
.seg:hover:not(.active) { color: var(--content-primary); }
.seg.active {
  background: var(--bg-surface);
  color: var(--content-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.seg.active.brand {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 4px rgba(13,155,138,.3);
}
.seg.xs { font-size: 10.5px; padding: 6px 1px; }

/* ── Consent / info note ──────────────────────────────────────── */
.consent-note {
  margin: 20px 20px 0;
  padding: 13px 15px;
  background: var(--brand-subtle);
  border-radius: var(--r-md);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.consent-icon { flex-shrink: 0; margin-top: 1px; color: var(--brand); }
.consent-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--brand);
  font-weight: 500;
}
.consent-text strong { font-weight: 700; }

/* ── Tag chip (inline metadata tag, teal-tinted) ─────────────── */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--brand-subtle);
  border: 1px solid var(--brand-mid);
  border-radius: 10px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--brand);
}

/* ── Source tags ──────────────────────────────────────────────── */
/*
 * Semantic tags showing where a record came from.
 * Uses system-wide semantic tokens so they adapt to light/dark.
 */
.source-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.source-tag.manual    { background: var(--brand-subtle);   color: var(--brand); }
.source-tag.mhr       { background: var(--warning-subtle); color: var(--warning); }
.source-tag.healthkit { background: var(--success-subtle); color: var(--success); }
.source-tag.wearable  { background: var(--info-subtle);    color: var(--info); }

/* ── Buttons ──────────────────────────────────────────────────── */
/* ── Primary button ───────────────────────────────────────────── */
.btn-primary {
  width: 100%;
  height: 52px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 16px rgba(31,111,107,.28);
}
.btn-primary:hover { opacity: .92; }
.btn-primary:active { transform: scale(.98); }

/* ── Secondary button ─────────────────────────────────────────── */
.btn-secondary {
  width: 100%;
  height: 52px;
  background: var(--bg-surface);
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, opacity .15s;
}
.btn-secondary:hover { background: var(--brand-subtle); }

/* ── Ghost button ─────────────────────────────────────────────── */
.btn-ghost {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--content-secondary);
  border: none;
  border-radius: var(--r-pill);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: color .15s;
}
.btn-ghost:hover { color: var(--content-primary); }

/* ── Compact button modifier ──────────────────────────────────── */
/* Use with .btn-primary or .btn-secondary inside phone-frame screens
 * where the standard 52px height is too tall for the available space.
 * <div class="btn-primary btn--compact">Label</div>
 */
.btn--compact {
  height: auto;
  padding: 14px;
  box-shadow: none;
}

/* ── Lifestyle card (segmented rows) ──────────────────────────── */
.lifestyle-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  overflow: hidden;
}
.lifestyle-row {
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
}
.lifestyle-row:last-child { border-bottom: none; }
.lifestyle-lbl {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--content-secondary);
  margin-bottom: 9px;
}

/* ── Tab bar ──────────────────────────────────────────────────── */
/*
 * App-level bottom tab navigation: Passport / Athena / Profile.
 * Place directly before .home-indicator inside the phone frame.
 * Mark the active tab with the .active modifier on .tab-item.
 */
.tab-bar {
  display: flex;
  align-items: stretch;
  background: var(--bg-surface);
  border-top: 1px solid var(--divider);
  flex-shrink: 0;
  /* Pin to the physical bottom of the phone container.
   * Works for both .phone-frame (position:relative flex column) and
   * .phone-inner (position:relative block) layouts. */
  position: absolute;
  bottom: 34px; /* height of .home-indicator */
  left: 0;
  right: 0;
  z-index: 5;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 0 7px;
  cursor: pointer;
  transition: color .15s;
  color: var(--content-secondary);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tab-item.active { color: var(--brand); }
.tab-item svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}
/* Active indicator — thin line along top of tab item */
.tab-item { position: relative; }
.tab-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--brand);
  border-radius: 0 0 2px 2px;
}

/* ── Bottom sheet — shared component ─────────────────────────── */
/*
 * Standard iOS-style bottom sheet with action rows.
 *
 * Usage:
 *   <!-- scrim (optional, inside phone-frame) -->
 *   <div class="sheet-dim"></div>
 *
 *   <!-- sheet itself (absolute, bottom:0) -->
 *   <div class="sheet">
 *     <div class="sheet-handle"></div>
 *     <div class="sheet-title">Title</div>
 *     <div class="sheet-sub">Subtitle</div>
 *     <div class="sheet-row">
 *       <div class="sheet-icon" style="background:rgba(…);">…svg…</div>
 *       <div class="sheet-row-text">
 *         <div class="sheet-row-title">Label</div>
 *         <div class="sheet-row-desc">Description</div>
 *       </div>
 *       <svg class="sheet-chevron" …></svg>
 *     </div>
 *     <div class="sheet-divider"></div>
 *     <!-- repeat sheet-row / sheet-divider pairs -->
 *     <div class="sheet-link">Link text</div>  <!-- optional -->
 *   </div>
 *
 * For a stacked (second-level) sheet pushed behind the front one:
 *   <div class="sheet sheet--back">…</div>   <!-- compressed peek -->
 *   <div class="sheet sheet--tall">…</div>   <!-- front, taller -->
 */
.sheet-dim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55); z-index: 5;
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  background: #111c26;
  border-radius: 24px 24px 0 0;
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 0 0 32px;
}
body:not(.dark) .sheet {
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,.08);
}
/* Second sheet compressed behind the front one (iOS stack peek) */
.sheet--back {
  transform: scale(0.93) translateY(-18px);
  transform-origin: bottom center;
  opacity: .5;
  z-index: 9;
  pointer-events: none;
}
/* Taller sheet (e.g. record picker) */
.sheet--tall {
  height: 72%;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  z-index: 11;
}
.sheet-handle {
  width: 36px; height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 3px;
  margin: 12px auto 20px;
  flex-shrink: 0;
}
body:not(.dark) .sheet-handle { background: rgba(0,0,0,.12); }
.sheet-title {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 500;
  color: var(--content-primary);
  padding: 0 22px; margin-bottom: 4px;
  flex-shrink: 0;
}
.sheet-sub {
  font-size: 13px; color: var(--content-secondary);
  padding: 0 22px; margin-bottom: 20px;
  flex-shrink: 0;
}
.sheet-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; cursor: pointer;
  transition: background .12s;
}
.sheet-row:hover  { background: rgba(255,255,255,.03); }
body:not(.dark) .sheet-row:hover { background: rgba(0,0,0,.02); }
.sheet-icon {
  width: 44px; height: 44px;
  border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sheet-row-text { flex: 1; min-width: 0; }
.sheet-row-title {
  font-size: 15px; font-weight: 600;
  color: var(--content-primary); margin-bottom: 2px;
}
.sheet-row-desc { font-size: 12.5px; color: var(--content-secondary); }
.sheet-chevron { color: var(--content-secondary); flex-shrink: 0; }
.sheet-divider {
  height: 1px; background: var(--divider);
  margin: 4px 22px;
}
.sheet-link {
  text-align: center;
  padding: 16px 22px 0;
  font-size: 13.5px; color: var(--brand);
  cursor: pointer;
}

/* ── Toggle row ───────────────────────────────────────────────── */
/*
 * Used in forms to show a labelled on/off switch.
 * Place inside a .field-card as a .field-row sibling,
 * or stand-alone inside any card container.
 *
 * <div class="toggle-row">
 *   <div class="toggle-label">
 *     <span class="toggle-lbl-text">Label</span>
 *     <span class="toggle-lbl-sub">Optional description</span>
 *   </div>
 *   <div class="toggle-switch [off]"></div>
 * </div>
 */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--divider);
  gap: 12px;
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label { flex: 1; min-width: 0; }
.toggle-lbl-text {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--content-primary);
  display: block;
}
.toggle-lbl-sub {
  font-size: 12px;
  color: var(--content-secondary);
  display: block;
  margin-top: 2px;
}
.toggle-switch {
  width: 44px;
  height: 26px;
  background: var(--brand);
  border-radius: var(--r-pill);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .2s;
}
.toggle-switch.off { background: var(--border-strong); }
.toggle-switch::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  right: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: right .2s;
}
.toggle-switch.off::after { right: auto; left: 3px; }

/* ── Status badge ─────────────────────────────────────────────── */
/*
 * Compact mono badge for health record status.
 * Variants: .active-st  .managed-st  .resolved-st  .error-st
 *
 * <span class="status-badge active-st">Active</span>
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.status-badge.active-st   { background: var(--warning-subtle);  color: var(--warning); }
.status-badge.managed-st  { background: var(--brand-subtle);    color: var(--brand);   }
.status-badge.resolved-st { background: var(--success-subtle);  color: var(--success); }
.status-badge.error-st    { background: var(--error-subtle);    color: var(--error);   }

/* ── Inline health tags (allergy / condition) ─────────────────── */
/*
 * Pill-shaped tags used inside the Emergency Passport widget and
 * anywhere allergies or conditions are shown inline.
 * Uses semantic tokens so they adapt correctly in both light and dark.
 *
 * <span class="health-tag allergy">Penicillin</span>
 * <span class="health-tag condition">Type 2 Diabetes</span>
 */
.health-tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  border: 1px solid transparent;
  margin-right: 4px;
  margin-top: 3px;
  white-space: nowrap;
}
.health-tag.allergy   { background: var(--error-subtle);   border-color: var(--error);   color: var(--error);   }
.health-tag.condition { background: var(--warning-subtle); border-color: var(--warning); color: var(--warning); }

/* Compact variant for the lock-screen EP widget */
.health-tag.sm { font-size: 8.5px; padding: 1px 5px; margin-right: 3px; margin-top: 2px; }

/* ── Metadata tags (advisor / ep-visible) ─────────────────────── */
/*
 * Tiny inline tags on list items (e.g. conditions, allergies).
 *
 * <span class="meta-tag brand">Athena active</span>
 * <span class="meta-tag warning">EP visible</span>
 */
.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.meta-tag.brand   { background: var(--brand-subtle);   color: var(--brand);   }
.meta-tag.warning { background: var(--warning-subtle); color: var(--warning); }
.meta-tag.success { background: var(--success-subtle); color: var(--success); }
.meta-tag.error   { background: var(--error-subtle);   color: var(--error);   }
.meta-tag.info    { background: var(--info-subtle);    color: var(--info);    }

/* ── Phone wrap (label + frame column) ───────────────────────── */
/*
 * Wraps a phone frame with a label below.
 * Used in widget library files and multi-phone story rows.
 *
 * <div class="phone-wrap">
 *   <div class="phone-label">hero</div>
 *   <div class="phone-frame">...</div>
 * </div>
 */
.phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.phone-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--content-secondary);
  text-align: center;
}

/* ── Entry animation helpers ──────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-fade-up { animation: fade-up 0.4s ease both; }

/* ── Athena icon — shared component ─────────────────────────── */
/*
 * The advisor identity mark: a near-complete teal arc with an orange dot
 * at the open end, matching the app icon geometry.
 *
 * Sizes — use via width/height on the <svg>:
 *   Tab bar:  22×22   Button: 18×18   Overlay avatar: 26×26
 *
 * HTML pattern:
 *   <span class="adv-icon [thinking]">
 *     <svg viewBox="0 0 100 100" width="22" height="22">
 *       <g class="adv-icon-g">
 *         <circle class="adv-dot-glow" cx="72.5" cy="23.2" r="9" fill="#d96a3b"/>
 *         <path fill="none" stroke="currentColor" stroke-width="9"
 *               stroke-linecap="round"
 *               d="M 80,32 A 35,35 0 1 1 62.5,17.3"/>
 *         <circle cx="72.5" cy="23.2" r="4.5" fill="#d96a3b"/>
 *       </g>
 *     </svg>
 *   </span>
 *
 * Tab bar variant (stroke inherits currentColor for active/inactive tinting):
 *   <svg viewBox="0 0 100 100" width="22" height="22">
 *     <g>
 *       <circle cx="72.5" cy="23.2" r="7" fill="#d96a3b" opacity=".25"/>
 *       <path fill="none" stroke="currentColor" stroke-width="9"
 *             stroke-linecap="round" d="M 80,32 A 35,35 0 1 1 62.5,17.3"/>
 *       <circle cx="72.5" cy="23.2" r="4.5" fill="#d96a3b"/>
 *     </g>
 *   </svg>
 *
 * Avatar (wrap in .adv-avatar; add .thinking to both .adv-avatar and .adv-icon):
 *   <div class="adv-avatar [thinking]">
 *     <span class="adv-icon [thinking]">...</span>
 *   </div>
 */
.adv-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.adv-icon svg { overflow: visible; display: block; }
.adv-icon-g { transform-origin: 50px 50px; }

.adv-avatar {
  width: 38px; height: 38px; border-radius: 50%; position: relative;
  background: rgba(8,174,184,.08); border: 1px solid rgba(8,174,184,.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Thinking: glow pulses as box-shadow — stays within the circle's visual footprint */
@keyframes adv-bloom {
  0%, 100% { box-shadow: 0 0 0   0px rgba(8,174,184,.0),  0 0 0   0px rgba(217,106,59,.0);  }
  40%       { box-shadow: 0 0 10px 3px rgba(8,174,184,.55), 0 0 16px 5px rgba(8,174,184,.18); }
  70%       { box-shadow: 0 0 14px 5px rgba(8,174,184,.3),  0 0 6px  2px rgba(217,106,59,.25); }
}
.adv-avatar.thinking { animation: adv-bloom 2.2s ease-in-out infinite; }

/* Thinking: icon spins + dot glow pulses */
@keyframes adv-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes adv-glow {
  0%, 100% { opacity: .12; r: 9;  }
  50%       { opacity: .55; r: 14; }
}
.adv-icon.thinking .adv-icon-g  { animation: adv-spin 1.8s linear infinite; }
.adv-icon.thinking .adv-dot-glow { animation: adv-glow 1.8s ease-in-out infinite; }
.adv-icon:not(.thinking) .adv-dot-glow { r: 8; opacity: .18; }

/* ── Chat mark — universal "tap to discuss" affordance ────────── */
/*
 * A small advisor arc+dot indicating every item is chattable.
 * The whole parent element is the tap target — this is just the signal.
 *
 * Sizes:  9px = category grid   11px = metric tiles   13px = rows   16px = cards
 * Color:  inherits currentColor for the arc (dim teal), dot always orange
 *
 * Inline row usage:
 *   <span class="chat-mark">
 *     <svg viewBox="0 0 100 100" width="13" height="13">
 *       <g><circle cx="72.5" cy="23.2" r="8" fill="#d96a3b" opacity=".2"/>
 *          <path fill="none" stroke="currentColor" stroke-width="10"
 *                stroke-linecap="round" d="M 80,32 A 35,35 0 1 1 62.5,17.3"/>
 *          <circle cx="72.5" cy="23.2" r="5" fill="#d96a3b"/>
 *       </g>
 *     </svg>
 *   </span>
 *
 * Corner usage (parent needs position:relative):
 *   <span class="chat-mark" style="position:absolute;top:7px;right:8px;">
 *     [svg at 9–11px]
 *   </span>
 */
.chat-mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: rgba(8,174,184,.28);
}
.chat-mark img { opacity: .35; }

/* ═══════════════════════════════════════════════════════════════
   s2-* WIDGET COMPONENT LIBRARY
   Shared components for the main app screens (Home, Passport,
   Athena, Profile, More). All use semantic tokens so they
   adapt to both light and dark mode automatically.
   ═══════════════════════════════════════════════════════════════ */

/* ── Screen title + back button ──────────────────────────────── */
/*
 * Used at the top of sub-screens (drill-down from a list item).
 *
 *   <div class="back-link">‹ More</div>
 *   <h1 class="screen-title">Settings</h1>
 */
.back-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--brand);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.screen-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--content-primary);
  padding: 0 18px 14px;
  flex-shrink: 0;
  line-height: 1.2;
}
/* ── Hero title — primary screen heading ──────────────────────
 * Large serif heading that introduces a screen or section.
 * Usage: <div class="hero-title">Grant</div>
 * Override font-size or color inline for screen-specific variants.
 */
.hero-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--content-primary);
  letter-spacing: -.02em;
}

/* ── Settings-style grouped list ─────────────────────────────── */
/*
 * iOS Settings pattern: grouped cards of tappable rows.
 *
 *   <div class="list-group">
 *     <div class="list-group-label">Security</div>   ← optional
 *     <div class="list-card">
 *       <div class="list-item">
 *         <div class="list-item-icon" style="background:rgba(61,196,186,.1);">
 *           <svg .../>
 *         </div>
 *         <div class="list-item-body">
 *           <div class="list-item-title">Face ID</div>
 *           <div class="list-item-sub">Required to unlock</div>
 *         </div>
 *         <svg class="list-chevron" .../>
 *       </div>
 *     </div>
 *   </div>
 */
.list-group        { margin-bottom: 4px; }
.list-group-label  {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--content-secondary);
  padding: 14px 0 8px;
}
.list-card {
  background: var(--bg-surface);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 8px;
}
.list-item {
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--divider);
  transition: background .12s;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--bg-elevated); }
.list-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.list-item-body { flex: 1; min-width: 0; }
.list-item-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--content-primary);
  margin-bottom: 2px;
}
.list-item-sub {
  font-size: 12px;
  color: var(--content-secondary);
}
.list-chevron { color: var(--content-disabled); flex-shrink: 0; }

/* Inline value / trailing text on a list-item */
.list-item-value {
  font-size: 13px;
  color: var(--content-secondary);
  flex-shrink: 0;
}

/* ── Empty state ──────────────────────────────────────────────── */
/*
 *   <div class="empty-state">
 *     <div class="empty-icon-box"><svg .../></div>
 *     <div class="empty-title">No connections yet</div>
 *     <div class="empty-desc">Description text.</div>
 *     <button class="btn-primary">CTA</button>
 *   </div>
 */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  text-align: center;
}
.empty-icon-box {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--content-disabled);
}
.empty-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--content-secondary);
  margin-bottom: 10px;
}
.empty-desc {
  font-size: 13px;
  color: var(--content-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* ── "How it works" steps ─────────────────────────────────────── */
/*
 *   <div class="hiw-section">
 *     <div class="hiw-header">How it works</div>
 *     <div class="hiw-step">
 *       <div class="hiw-num">1</div>
 *       <div class="hiw-text">Step description.</div>
 *     </div>
 *   </div>
 */
.hiw-section { margin: 20px 18px 0; }
.hiw-header {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--content-secondary);
  margin-bottom: 12px;
}
.hiw-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.hiw-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-subtle);
  border: 1px solid var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand);
  flex-shrink: 0;
}
.hiw-text {
  font-size: 13px;
  color: var(--content-secondary);
  line-height: 1.5;
  padding-top: 2px;
}

/* ── Note card (Athena insight saved to My Notes) ────────────── */
/*
 *   <div class="note-card">
 *     <div class="note-text">Insight text here.</div>
 *     <div class="note-meta">
 *       <div class="note-dot" style="background:#f87171;"></div>
 *       <span class="note-source">Athena · Iron Studies · Mar 2023</span>
 *       <span class="note-date">2 Apr 2026</span>
 *     </div>
 *   </div>
 */
.note-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 13px 14px;
  margin-bottom: 8px;
}
.note-text {
  font-size: 13px;
  color: var(--content-primary);
  line-height: 1.55;
  margin-bottom: 10px;
}
.note-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.note-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.note-source {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--content-secondary);
  flex: 1;
}
.note-date {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--content-disabled);
}

/* ── Group header (thin mono caps between note sections) ─────── */
.group-header {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--content-secondary);
  padding: 12px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Version label (app bottom) ──────────────────────────────── */
.version-label {
  padding: 20px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--content-disabled);
  letter-spacing: .06em;
}

/* ── Toggle row (Settings-style) ─────────────────────────────── */
/*
 * Compact toggle inside a .list-card. Reuses shared .toggle-switch.
 * Unlike .toggle-row, this sits inside a .list-item layout.
 *
 *   <div class="list-item">
 *     <div class="list-item-body">
 *       <div class="list-item-title">Face ID</div>
 *       <div class="list-item-sub">Required to unlock</div>
 *     </div>
 *     <div class="toggle-switch [off]"></div>
 *   </div>
 */
/* (no additional CSS needed — .toggle-switch from shared covers this) */

/* ── Scroll area for phone sub-screens ───────────────────────── */
/*
 * Used in any phone screen that scrolls vertically.
 * Add padding-bottom to account for tab bar height.
 */
.phone-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 18px 130px;
  display: block;
  scrollbar-width: none;
}
.phone-scroll::-webkit-scrollbar { display: none; }

/* ── Marketing-site embeds ─────────────────────────────────────────
   The website tags embedded phone iframes with .frame-embed (always) and
   .frame-desktop (when the parent is a desktop viewport, via assets/site-nav.js).
   Show the in-screen status bar only in the desktop mockup; hide it on mobile,
   where the real device status bar is used. Storyboard pages never set
   .frame-embed, so they are unaffected. */
html.frame-embed .sb { display: none !important; }
html.frame-embed.frame-desktop .sb { display: flex !important; }