/* ============================================================
   OB Path – Aster Health Collective Brand Stylesheet
   Brand: tactyl.io demo
   Colors: LuminaTouch-inspired navy, cyan, violet, magenta, and orange
   Fonts: Adrianna DemiBold / Bold (headings) + Adrianna (body)
   ============================================================ */

/* Adrianna font stack — commercial font via @font-face */
@font-face {
  font-family: 'Adrianna';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local('Adrianna'), local('Adrianna-Regular');
}
@font-face {
  font-family: 'Adrianna';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: local('Adrianna DemiBold'), local('Adrianna-DemiBold'), local('AdriannaDemiBold');
}
@font-face {
  font-family: 'Adrianna';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local('Adrianna Bold'), local('Adrianna-Bold'), local('AdriannaBold');
}

/* Fallback: Montserrat from Google Fonts (closest geometric sans match) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

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

:root {
  /* ── AHC Brand Colors ── */
  --teal:          #18B8FF;   /* primary UI teal — matches site-wide accent */
  --teal-dark:     #2563EB;
  --teal-light:    #EEF6FF;
  --teal-xlight:   #F8FBFF;
  --navy:          #070B3A;   /* primary navy — header, sidebar, bottom nav */
  --navy-mid:      #111A5A;
  --gold:          #FF9F1C;
  --gold-light:    #FFF4DF;

  /* ── Neutrals ── */
  --white:         #FFFFFF;
  --warm-white:    #F3F7FF;
  --off-white:     #E8EEFB;
  --gray-100:      #DDE2E8;
  --gray-200:      #C8CDD5;
  --gray-300:      #A8B0BA;
  --gray-400:      #7A8490;
  --gray-600:      #4E5A66;
  --gray-800:      #2A3540;
  --text:          #111827;
  --text-muted:    #4E5A66;

  /* ── Category Accents ── */
  --cat-protocol:   #18B8FF;
  --cat-vaccines:   #2563EB;
  --cat-epds:       #E23AA6;
  --cat-labs:       #3B82F6;
  --cat-us:         #7C3AED;
  --cat-antenatal:  #FF6B35;
  --cat-admin:      #64748B;
  --cat-consent:    #FF9F1C;
  --cat-education:  #06B6D4;
  --cat-nextsteps:  #070B3A;
  --cat-fetal:      #18B8FF;

  /* ── Site-wide accent aliases ── */
  --ps-mint:       #18B8FF;
  --ps-mint-dark:  #2563EB;
  --ps-mint-light: #EEF6FF;

  /* ── Layout ── */
  --header-info-h: 48px;   /* Row 1 (index.html): date | logo | weather */
  --header-nav-h:  58px;   /* Row 2 (index.html): logo text | band | actions */
  --header-h:      87px;   /* top-bar 80px + teal stripe 7px */
  --top-bar-h:     80px;
  --teal-stripe-h:  7px;
  --bottom-nav-h:  84px;
  --sidebar-w:     300px;
  --radius-sm:     6px;
  --radius:        10px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --shadow-soft:   0 2px 12px rgba(26,46,59,.07), 0 1px 3px rgba(26,46,59,.05);
  --shadow-card:   0 4px 20px rgba(26,46,59,.09);
  --shadow-hover:  0 8px 32px rgba(26,46,59,.14);
  --font-head:     'Adrianna', 'Montserrat', system-ui, sans-serif;
  --font-body:     'Adrianna', 'Montserrat', system-ui, sans-serif;
  --content-max:   1760px;
}

html {
  scroll-behavior: smooth;
  overflow: hidden;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: #EEF0F3;
  color: var(--text);
  /* 16:9 touchscreen: fixed full-screen layout, no scroll */
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 1.65;
}

/* ══════════════════════════════════════
   TOP ANNOUNCEMENT BAR
══════════════════════════════════════ */
.announcement-bar {
  background: var(--navy);
  color: rgba(255,255,255,.85);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-align: center;
  padding: .45rem 1.5rem;
}
.announcement-bar strong { color: #fff; font-weight: 600; }

/* ══════════════════════════════════════
   HEADER — site-wide top-bar style
══════════════════════════════════════ */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--navy);
  box-shadow: 0 2px 16px rgba(0,0,0,.2);
  flex-shrink: 0;
  height: var(--top-bar-h);
  display: flex;
  align-items: center;
  padding: 0 3rem;
  justify-content: space-between;
}

/* Teal stripe — just below header, logo overlaps it */
.teal-stripe {
  position: fixed;
  top: var(--top-bar-h);
  left: 0; right: 0;
  height: var(--teal-stripe-h);
  background: var(--teal);
  z-index: 199;
}

/* Date — left */
.top-bar-date {
  font-size: 1.1rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  letter-spacing: .01em;
  flex-shrink: 0;
}

/* Centred raised logo */
.top-bar-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -35px;
  z-index: 201;
}

.logo-circle {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: #18B8FF;
  border: 4px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 0 0 3px rgba(26,188,176,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.logo-circle svg { width: 100%; height: 100%; display: block; }

/* Weather — right */
.top-bar-weather {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  min-width: 180px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.topbar-weather-icon { font-size: 1.2rem; color: var(--teal); }

/* ── Legacy header classes (kept for any remaining references) ── */
.logo-wrap { display: none; }
.header-trimester-band { display: none; }
.header-hero-text { display: none; }
.header-hero-weeks { display: none; }

/* ── Header right actions ── */
.header-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

.logo-sub {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  display: block;
  margin-top: .15rem;
}

/* Back to Care Paths link */
.back-to-dash {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.back-to-dash i { font-size: .65rem; }
.back-to-dash:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

/* SAB header pill */
.header-sab-pill {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .45rem 1.05rem;
  border-radius: 50px;
  background: #FFF0F0;
  border: 1.5px solid #E8A0A0;
  color: #B83232;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}
.header-sab-pill i {
  font-size: .7rem;
  opacity: .85;
}

/* Trimester tabs */
.trimester-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: 50px;
  padding: .3rem;
}

.tab-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: .6rem 1.35rem;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: all .2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.tab-btn i { font-size: .78rem; }
.tab-btn:hover { background: var(--white); color: var(--navy); }

.tab-btn.active {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-soft);
}

/* Active accent line per trimester */
.tab-btn.active[data-trimester="1"]  { color: var(--teal-dark);  border-bottom: 2px solid var(--teal); }
.tab-btn.active[data-trimester="2"]  { color: #3A7A4A;           border-bottom: 2px solid #5A9A6A; }
.tab-btn.active[data-trimester="3"]  { color: #2856A0;           border-bottom: 2px solid #4A78C8; }
.tab-btn.active[data-trimester="pp"] { color: #8A3060;           border-bottom: 2px solid #C05890; }

/* ══════════════════════════════════════
   TRIMESTER HERO BAND
══════════════════════════════════════ */
.trimester-hero {
  background: var(--teal);
  padding: .9rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
}

.trimester-hero.t2 { background: #5A9A6A; }
.trimester-hero.t3 { background: #4A78C8; }
.trimester-hero.pp { background: #C05890; }

.trimester-hero-text {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(255,255,255,.9);
  letter-spacing: .02em;
}

.trimester-hero-weeks {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.15);
  padding: .28rem .85rem;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.25);
}

/* ── Calculator Trigger Button ── */
.calc-trigger {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  padding: .52rem 1.2rem;
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.18);
  color: #fff;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s;
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.calc-trigger:hover {
  background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.calc-trigger.open {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.calc-wheel-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.calc-trigger.open .calc-wheel-icon { color: var(--teal-dark); }
.calc-caret {
  font-size: .6rem;
  transition: transform .25s ease;
}
.calc-trigger.open .calc-caret { transform: rotate(180deg); }
.calc-trigger-label { /* hide text on very small screens via media query */ }

/* ── Calculator Panel ── */
.calc-panel {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 6px 30px rgba(26,46,59,.14);
  position: relative;
  z-index: 9;
  overflow: hidden;
  /* Animate open/close */
  max-height: 0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  opacity: 0;
  pointer-events: none;
}
.calc-panel.visible {
  max-height: 760px;
  opacity: 1;
  pointer-events: all;
}

.calc-panel-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2rem 2.5rem;
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

/* Left column – inputs */
.calc-left {
  flex: 1;
  min-width: 260px;
  max-width: 380px;
}

.calc-title {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.calc-title > i { color: var(--teal); font-size: .9rem; }

/* ── Calculator close button — absolute top-right of panel ── */
.calc-close-btn {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.5rem .65rem 1.2rem;
  border-radius: 99px;
  border: none;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(26,188,176,.40);
  transition: background .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
  z-index: 2;
}
.calc-close-btn i { font-size: 1rem; }
.calc-close-btn:hover {
  background: var(--teal-dark);
  box-shadow: 0 5px 18px rgba(26,188,176,.55);
  transform: translateY(-1px);
}
.calc-close-btn:active { transform: translateY(0); }

.calc-subtitle {
  font-size: .78rem;
  color: var(--gray-400);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

.calc-inputs { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; }

.calc-field { display: flex; flex-direction: column; gap: .3rem; }
.calc-field label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-600);
}
.calc-date-input {
  padding: .55rem .85rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--text);
  background: var(--warm-white);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.calc-date-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(79,141,150,.12);
}

.calc-field-or {
  text-align: center;
  font-size: .72rem;
  color: var(--gray-300);
  font-style: italic;
  letter-spacing: .05em;
}

/* Cycle length stepper */
.calc-cycle-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
  font-size: .78rem;
  color: var(--gray-600);
  font-weight: 500;
}
.calc-cycle-stepper {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: 50px;
  padding: .2rem .6rem;
  font-weight: 700;
  color: var(--navy);
  font-size: .82rem;
}
.stepper-btn {
  border: none;
  background: transparent;
  color: var(--teal-dark);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 .2rem;
  line-height: 1;
  transition: color .12s;
}
.stepper-btn:hover { color: var(--teal); }

/* Buttons */
.calc-btn {
  width: 100%;
  padding: .65rem;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .15s, box-shadow .15s;
  margin-bottom: .4rem;
}
.calc-btn:hover { background: var(--teal-dark); box-shadow: 0 3px 10px rgba(79,141,150,.3); }

.calc-clear-btn {
  width: 100%;
  padding: .5rem;
  background: transparent;
  color: var(--gray-400);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .78rem;
  cursor: pointer;
  transition: all .15s;
}
.calc-clear-btn:hover { background: var(--off-white); color: var(--gray-600); }

/* Right column – wheel */
.calc-right {
  flex: 1.4;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.wheel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

#pregnancyWheel {
  width: 280px;
  height: 280px;
  filter: drop-shadow(0 4px 16px rgba(26,46,59,.1));
}

/* Wheel SVG text styles (applied as SVG class, referenced via CSS) */
.wheel-label-sm {
  font-family: var(--font-body);
  font-size: 11px;
  fill: #9A9590;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wheel-week-num {
  font-family: var(--font-head);
  font-size: 36px;
  fill: var(--navy);
  font-weight: 700;
}
.wheel-edd {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--teal-dark);
  font-weight: 700;
}

/* Arc colours */
.wheel-arc { fill: none; stroke-width: 22; stroke-linecap: butt; }
.arc-t1 { stroke: rgba(79,141,150,.22); }
.arc-t2 { stroke: rgba(90,154,106,.22); }
.arc-t3 { stroke: rgba(74,120,200,.22); }
.arc-pp { stroke: rgba(192,88,144,.22); }

.wheel-progress {
  fill: none;
  stroke: var(--teal);
  stroke-width: 22;
  stroke-linecap: round;
  transition: d .5s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 0 6px rgba(79,141,150,.45));
}

/* Tick marks */
.wheel-tick       { stroke: rgba(26,46,59,.15); stroke-width: 1; }
.wheel-tick-major { stroke: rgba(26,46,59,.4);  stroke-width: 1.5; }
.wheel-tick-label {
  font-family: var(--font-body);
  font-size: 7.5px;
  fill: #9A9590;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Legend */
.wheel-legend {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.legend-pill {
  font-size: .62rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 50px;
  letter-spacing: .04em;
}
.legend-t1 { background: rgba(79,141,150,.15);  color: var(--teal-dark); }
.legend-t2 { background: rgba(90,154,106,.15);  color: #2A6A3A; }
.legend-t3 { background: rgba(74,120,200,.15);  color: #1E3C7A; }

/* Results strip */
.calc-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem 1.25rem;
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  min-width: 190px;
}

.result-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.result-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--teal-light);
  color: var(--teal-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
}
.result-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gray-400);
  font-weight: 600;
}
.result-val {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: .05rem;
}

.result-jump-btn {
  margin-top: .4rem;
  padding: .55rem .9rem;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .45rem;
  justify-content: center;
  transition: background .15s, box-shadow .15s;
  letter-spacing: .03em;
}
.result-jump-btn:hover {
  background: var(--teal-dark);
  box-shadow: 0 3px 10px rgba(79,141,150,.3);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .calc-panel-inner { flex-direction: column; gap: 1.5rem; }
  .calc-left { max-width: 100%; }
  .calc-right { flex-direction: column; align-items: center; width: 100%; }
  .calc-results { width: 100%; }
}
@media (max-width: 600px) {
  .calc-trigger-label { display: none; }
  .calc-trigger { padding: .4rem .7rem; }
  #pregnancyWheel { width: 200px; height: 200px; }
}

/* Fetal strip responsive */
@media (max-width: 860px) {
  .fetal-strip { padding: .25rem 1.5rem; }
  .fetal-info-desc { display: none; }
}
@media (max-width: 600px) {
  .fetal-strip { padding: .2rem 1rem; }
  .fetal-strip-inner { gap: .6rem; }
  .fetal-figure-wrap { width: 32px; height: 32px; }
  .fetal-figure { width: 32px; height: 32px; }
  .fetal-figure svg { max-width: 32px; max-height: 32px; }
  .fetal-info-stage { font-size: .72rem; }
  .fetal-size-badge { padding: .2rem .5rem; }
  .fetal-size-icon { font-size: .85rem; }
  .fetal-size-name { font-size: .65rem; }
}

/* ══════════════════════════════════════
   MAIN LAYOUT — fills between header and bottom nav
══════════════════════════════════════ */
.app-main {
  /* Fills exactly the viewport between fixed header and fixed bottom nav */
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  bottom: var(--bottom-nav-h);
  overflow: hidden;
  overflow-x: hidden;
  display: flex;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* ══════════════════════════════════════
   SIDEBAR — full-height scrollable left column
══════════════════════════════════════ */
/* ── Visit pill list (in bottom nav row 2) — styles moved to bottom nav section ── */

/* ══════════════════════════════════════
   AGENDA PANEL — scrollable right column
══════════════════════════════════════ */
.agenda-panel {
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  /* No scrolling — cards must fit within the visible area */
  overflow: hidden;
  padding: .25rem .5rem .25rem;
  background: #EEF0F3;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}

.agenda-panel::-webkit-scrollbar { width: 5px; }
.agenda-panel::-webkit-scrollbar-track { background: transparent; }
.agenda-panel::-webkit-scrollbar-thumb { background: rgba(26,46,59,.18); border-radius: 99px; }

/* Placeholder */
.agenda-placeholder {
  background: rgba(255,255,255,.85);
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 4rem 2rem;
  text-align: center;
  backdrop-filter: blur(4px);
  width: 100%;
}

.placeholder-seal {
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
  opacity: .2;
  object-fit: contain;
}

.agenda-placeholder h2 {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .5rem;
}

.agenda-placeholder p {
  font-size: .88rem;
  color: var(--gray-400);
  max-width: 360px;
  margin: 0 auto;
}

/* Agenda content — fills full panel height, no overflow */
.agenda-content {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  width: 100%;
  min-width: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Compact Visit Banner (replaces large hero card) ── */
.visit-banner {
  margin-bottom: .2rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .38rem .85rem;
  border-radius: var(--radius);
  background: var(--teal-dark);
  border-left: 4px solid var(--teal);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.visit-banner.t2 { background: #3A7A4A; border-left-color: #5A9A6A; }
.visit-banner.t3 { background: #2856A0; border-left-color: #4A78C8; }
.visit-banner.pp { background: #8A3060; border-left-color: #C05890; }

.visit-banner-icon {
  font-size: 1rem;
  color: rgba(255,255,255,.85);
  flex-shrink: 0;
}

.visit-banner-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}

.visit-banner-week {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-right: auto;
}

.visit-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 600;
  padding: .25rem .75rem;
  border-radius: 50px;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.2);
}

/* ── Section Title ── */
.section-heading {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--gray-400);
  padding: .25rem 0;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: .75rem;
}

/* ── Cards Grid — 2-row column-flow: all cards fit without scrolling ── */
.agenda-grid {
  display: grid;
  /* Two fixed rows fill available height; columns auto-created as needed */
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 1fr);
  gap: .3rem;
  width: 100%;
  min-width: 0;
  /* Grid fills the remaining panel space exactly */
  flex: 1;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.agenda-card {
  background: var(--white);
  border: 1px solid rgba(26,46,59,.09);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(26,46,59,.08);
  transition: box-shadow .2s ease;
  /* Width and height are fluid — set by grid */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  /* Left colour bar — overridden per category below */
  border-left: 4px solid var(--gray-200);
}

/* Suppress the old top accent strip — left border replaces it */
.card-accent {
  display: none;
}

.card-header {
  padding: .42rem .7rem .38rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--gray-100);
  background: rgba(26,46,59,.025);
  flex-shrink: 0;
}

.card-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  flex-shrink: 0;
}

.card-title {
  font-size: clamp(.78rem, .68rem + .3vw, .96rem);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .01em;
  flex: 1;
}

/* Logo displayed in the card header (e.g. Natera on Genetic Testing card) */
.card-header-logo {
  height: 20px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: auto;
}

.card-body {
  padding: .28rem .65rem .32rem;
  flex: 1;           /* grows to fill card height */
  overflow-y: auto;  /* scroll within card if content overflows */
  overflow-x: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.12) transparent;
}
.card-body::-webkit-scrollbar { width: 4px; }
.card-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 2px; }

.item-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  flex: 1;
  justify-content: flex-start;
}

.item-list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: clamp(.78rem, .7rem + .35vw, 1rem);
  color: var(--gray-800);
  line-height: 1.45;
}

.item-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-top: .32rem;
  flex-shrink: 0;
}

.empty-note {
  font-size: .78rem;
  color: var(--gray-300);
  font-style: italic;
}

/* ── Patient Education playlist button (MA card) ── */
.ma-playlist-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: .38rem 1rem .38rem .8rem;
  font-size: clamp(.78rem, .7rem + .3vw, .92rem);
  font-weight: 700;
  cursor: pointer;
  line-height: 1.3;
  box-shadow: 0 2px 8px rgba(26,188,176,.35);
  transition: background .18s, transform .12s, box-shadow .18s;
  white-space: nowrap;
}
.ma-playlist-btn i {
  font-size: 1em;
}
.ma-playlist-btn:hover {
  background: var(--teal-dark, #13a99f);
  box-shadow: 0 4px 14px rgba(26,188,176,.45);
  transform: translateY(-1px);
}
.ma-playlist-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(26,188,176,.30);
}

/* ── Item content wrapper (text + below-link) ── */
.item-content {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.item-text {
  line-height: 1.55;
}

/* ── Group label (parent bullet) ── */
.group-label {
  font-weight: 600;
  color: var(--text);
}

/* ── Sub-bullet list ── */
.sub-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  margin-top: .2rem;
  padding-left: .25rem;
}

/* Compact spacing for Natera genetic sub-bullets */
.cat-genetic .sub-list {
  gap: .35rem;
}

.sub-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .82rem;
  color: var(--gray-600);
  line-height: 1.5;
}

.sub-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-top: .52rem;
  flex-shrink: 0;
  background: var(--gray-300);
  border: 1.5px solid currentColor;
  background: transparent;
}

/* ── Sub-item with an inline link pill ── */
.sub-item-has-link {
  align-items: flex-start;
}

.sub-content {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* ── Document / PDF link pill attached to an agenda item ── */
.item-doc-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: .5rem;
  padding: .18rem .55rem;
  border-radius: 50px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  background: #FEF2F2;
  color: #C0392B;
  border: 1px solid rgba(192,57,43,.22);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  font-family: var(--font-body);
  line-height: 1.4;
}
.item-doc-link i {
  font-size: .65rem;
}
.item-doc-link:hover {
  background: #C0392B;
  color: #fff;
  border-color: #C0392B;
  box-shadow: 0 2px 8px rgba(192,57,43,.25);
  transform: translateY(-1px);
}
.item-doc-link:active {
  transform: translateY(0);
}

/* ── Below-bullet variant: sits on its own line, indented ── */
.item-doc-link--below {
  display: inline-flex;
  margin-left: 0;
  align-self: flex-start;
}

/* ── Two-pill row (PDF + Video side by side) ── */
.item-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-top: .18rem;
}

/* Tab-style separator between the first red PDF pill and the next pill */
.item-pill-row .item-doc-link + .item-video-link,
.item-pill-row .item-doc-link + .item-doc-link {
  margin-left: 1rem;
}

/* Fixed-width red pill so all video pills column-align across Natera rows */
.item-pill-row .item-doc-link {
  min-width: 90px;
  justify-content: center;
}

/* ── Video link pill (teal) ── */
.item-video-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 50px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  background: #EAF6F5;
  color: var(--teal-dark);
  border: 1px solid rgba(29,130,124,.22);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}
.item-video-link i { font-size: .65rem; }
.item-video-link:hover {
  background: var(--teal-dark);
  color: #fff;
  border-color: var(--teal-dark);
  box-shadow: 0 2px 8px rgba(29,130,124,.25);
  transform: translateY(-1px);
}
.item-video-link:active { transform: translateY(0); }

/* ── Card body reference row (below list items) ── */
.card-ref-row {
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px dashed var(--gray-200);
  display: flex;
}

/* ── QR Code Placeholder ── */
.qr-placeholder-wrap {
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px dashed var(--gray-200);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .85rem;
}

.qr-label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--gray-600);
  letter-spacing: .02em;
  line-height: 1.45;
  flex: 1;
}

.qr-placeholder {
  width: 80px;
  height: 80px;
  padding: 8px;
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--warm-white);
  color: var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-svg {
  width: 100%;
  height: 100%;
}

/* .qr-label defined above with .qr-placeholder-wrap */

/* ── Inline item logo (e.g. FamilyWell) ── */
.item-logo {
  height: 22px;
  width: auto;
  vertical-align: middle;
  object-fit: contain;
  display: inline-block;
}

/* ── Bullet-replacement logo (e.g. Natera Horizon image) ── */
.item-logo-bullet {
  height: 22px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  margin-bottom: .1rem;
}

.qr-real-img {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  padding: 4px;
  background: #fff;
}

.qr-resources {
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.qr-resources:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(26,46,59,.18);
}

.card-ref-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 50px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  background: #FEF2F2;
  color: #C0392B;
  border: 1px solid rgba(192,57,43,.2);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--font-body);
  line-height: 1.4;
}
.card-ref-link i { font-size: .62rem; }
.card-ref-link:hover {
  background: #C0392B;
  color: #fff;
  border-color: #C0392B;
  box-shadow: 0 2px 8px rgba(192,57,43,.22);
  transform: translateY(-1px);
}
.card-ref-link:active { transform: translateY(0); }

/* ══ Category Colour System — left border + tinted card + icon bg ══ */

/* Protocol */
.cat-protocol { border-left-color: var(--cat-protocol); background: #F5FAFA; }
.cat-protocol .card-icon   { background: #E6F5F4; color: var(--cat-protocol); }
.cat-protocol .item-dot    { background: var(--cat-protocol); }

/* Vaccines */
.cat-vaccines { border-left-color: var(--cat-vaccines); background: #F5FAF3; }
.cat-vaccines .card-icon   { background: #EDF5EA; color: var(--cat-vaccines); }
.cat-vaccines .item-dot    { background: var(--cat-vaccines); }

/* EPDS / Mental Health */
.cat-epds { border-left-color: var(--cat-epds); background: #FBF5F8; }
.cat-epds .card-icon   { background: #F8EEF4; color: var(--cat-epds); }
.cat-epds .item-dot    { background: var(--cat-epds); }

/* Labs */
.cat-labs { border-left-color: var(--cat-labs); background: #F3F7FC; }
.cat-labs .card-icon   { background: #EAF1F8; color: var(--cat-labs); }
.cat-labs .item-dot    { background: var(--cat-labs); }

/* Ultrasound */
.cat-ultrasound { border-left-color: var(--cat-us); background: #F5F4FB; }
.cat-ultrasound .card-icon   { background: #F0EEF9; color: var(--cat-us); }
.cat-ultrasound .item-dot    { background: var(--cat-us); }

/* Antenatal */
.cat-antenatal { border-left-color: var(--cat-antenatal); background: #FBF7F3; }
.cat-antenatal .card-icon   { background: #F8F0E8; color: var(--cat-antenatal); }
.cat-antenatal .item-dot    { background: var(--cat-antenatal); }

/* Admin */
.cat-admin { border-left-color: var(--cat-admin); background: #F6F8F4; }
.cat-admin .card-icon   { background: #EEF1EB; color: var(--cat-admin); }
.cat-admin .item-dot    { background: var(--cat-admin); }

/* Consent */
.cat-consent { border-left-color: var(--cat-consent); background: #FBF9F3; }
.cat-consent .card-icon   { background: #F7F2E8; color: var(--cat-consent); }
.cat-consent .item-dot    { background: var(--cat-consent); }

/* Education */
.cat-education { border-left-color: var(--cat-education); background: #F3F8FA; }
.cat-education .card-icon   { background: #EAF2F6; color: var(--cat-education); }
.cat-education .item-dot    { background: var(--cat-education); }

/* Next Steps */
.cat-nextsteps { border-left-color: var(--cat-nextsteps); background: #F3F5F7; }
.cat-nextsteps .card-icon   { background: #E8EDF2; color: var(--cat-nextsteps); }
.cat-nextsteps .item-dot    { background: var(--cat-nextsteps); }

/* Genetic Testing */
.cat-genetic { border-left-color: #9B59B6; background: #FAF5FC; }
.cat-genetic .card-icon   { background: #F5EEF8; color: #9B59B6; }
.cat-genetic .item-dot    { background: #9B59B6; }
.cat-genetic .group-label { color: #9B59B6; font-size: .72rem; }
.cat-genetic .sub-dot     { background: #9B59B6; opacity: .6; }

/* MA Prep card */
.cat-ma { border-left-color: #18B8FF; background: #F3F9FA; }

/* Health Tips carousel card removed from OB Path grid — tips now shown in screensaver */
/* .cat-tips styles retained only in case card is re-enabled elsewhere */
.cat-tips { border-left-color: #FF9F1C; background: #FBF9F3; }
.cat-tips .card-icon { background: #FBF5E8; color: #FF9F1C; }

/* ══════════════════════════════════════
   FETAL DEVELOPMENT – STANDALONE CARD
══════════════════════════════════════ */

/* Fetal card category accent (kept for legacy reference) */
.cat-fetal .card-accent { background: var(--cat-fetal); }
.cat-fetal .card-icon   { background: var(--teal-xlight, #EEF6FF); color: var(--cat-fetal); }

/* MA Prep card icon + dot (border/bg defined in category colour system above) */
.cat-ma .card-icon      { background: #EAF4F5; color: #18B8FF; }
.cat-ma .item-dot       { background: #18B8FF; }

/* Outer wrapper – fills the card body cleanly */
.fetal-card-wrap {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
  transition: border-top-color .4s ease;
}

/* Section heading row */
.fetal-card-heading {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal-dark);
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.fetal-card-heading i {
  font-size: .75rem;
  opacity: .85;
}

/* Outer card body — vertical stack: top row + info text below */
.fetal-card-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: linear-gradient(160deg, var(--teal-xlight) 0%, #fff 65%);
  border: 1px solid rgba(79,141,150,.18);
  border-radius: var(--radius-md);
  padding: .6rem .8rem;
}

/* Top row: centered figure + fruit badge on the right */
.fetal-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: .5rem;
}

/* SVG figure container — centered in top row */
.fetal-figure-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fetal-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transition: background .5s ease;
}

.fetal-figure {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(26,46,59,.18));
  transition: filter .3s ease;
}

.fetal-figure svg {
  width: 100%;
  height: 100%;
  max-width: 80px;
  max-height: 80px;
}

/* Animate illustration swap */
@keyframes fetalFadeIn {
  0%   { opacity: 0; transform: scale(.82) translateY(6px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(-1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.fetal-animate-in {
  animation: fetalFadeIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Info text — sits to the right of the figure */
.fetal-info {
  text-align: left;
  flex: 1;
  min-width: 0;
}

.fetal-info-stage {
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .2rem;
  line-height: 1.2;
}

.fetal-info-desc {
  font-size: .72rem;
  color: var(--gray-600);
  line-height: 1.45;
  max-width: 100%;
}

/* Fruit size badge — flex item in the top row */
.fetal-size-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  background: rgba(79,141,150,.07);
  border: 1px solid rgba(79,141,150,.22);
  border-radius: var(--radius-md);
  padding: .55rem .75rem;
  min-width: 80px;
  text-align: center;
  transition: border-color .3s ease;
  flex-shrink: 0;
}

.fetal-size-icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.1));
}

.fetal-size-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}

.fetal-size-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-400);
  font-weight: 600;
}

.fetal-size-name {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}

.fetal-size-cm {
  font-size: .68rem;
  color: var(--teal-dark);
  font-weight: 600;
  letter-spacing: .03em;
}

/* ── LEGACY footer strip (unused) ── */
.fetal-strip { display: none; }
.fetal-strip-inner { display: none; }

/* ══════════════════════════════════════
   FETAL DEVELOPMENT — INLINE (inside Ultrasound card)
══════════════════════════════════════ */
.fetal-inline-wrap {
  margin-top: .3rem;
  flex-shrink: 0;
}
.fetal-inline-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,110,184,.25) 30%, rgba(123,110,184,.25) 70%, transparent);
  margin-bottom: .35rem;
}
.fetal-inline-body {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: linear-gradient(135deg, rgba(123,110,184,.07) 0%, rgba(26,188,176,.05) 100%);
  border: 1px solid rgba(123,110,184,.15);
  border-radius: var(--radius-sm);
  padding: .5rem .65rem;
}
.fetal-inline-figure {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 10px rgba(26,46,59,.18));
}
.fetal-inline-figure svg {
  width: 80px;
  height: 80px;
}
.fetal-inline-info {
  flex: 1;
  min-width: 0;
}
.fetal-inline-stage {
  font-family: var(--font-head);
  font-size: .76rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fetal-inline-desc {
  font-size: .68rem;
  color: var(--gray-600);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.fetal-inline-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .08rem;
  background: rgba(123,110,184,.08);
  border: 1px solid rgba(123,110,184,.18);
  border-radius: var(--radius-sm);
  padding: .25rem .45rem;
  min-width: 56px;
  text-align: center;
  flex-shrink: 0;
}
.fetal-inline-icon { font-size: 1.4rem; line-height: 1; }
.fetal-inline-name {
  font-size: .68rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.fetal-inline-cm {
  font-size: .64rem;
  color: var(--teal-dark);
  font-weight: 600;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════
   PDF VIEWER MODAL
══════════════════════════════════════ */
.pdf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 25, 35, 0.72);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: pdfOverlayIn .18s ease;
}

.pdf-modal-overlay[hidden] { display: none; }

@keyframes pdfOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pdf-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(15,25,35,.45), 0 4px 16px rgba(15,25,35,.2);
  display: flex;
  flex-direction: column;
  width: min(1280px, calc(100vw - 2.5rem));
  height: min(880px, calc(100vh - 2.5rem));
  overflow: hidden;
  animation: pdfModalIn .22s cubic-bezier(.34,1.2,.64,1);
}

@keyframes pdfModalIn {
  from { opacity: 0; transform: scale(.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Header bar */
.pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.25rem;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.pdf-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}

.pdf-modal-icon {
  color: #E57373;
  font-size: 1rem;
  flex-shrink: 0;
}

.pdf-modal-title {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-modal-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

.pdf-modal-open-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .85rem;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  letter-spacing: .02em;
}
.pdf-modal-open-btn i { font-size: .68rem; }
.pdf-modal-open-btn:hover {
  background: rgba(255,255,255,.2);
  color: #fff;
  border-color: rgba(255,255,255,.45);
}

.pdf-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  font-size: .95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.pdf-modal-close:hover {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* iframe body */
.pdf-modal-body {
  flex: 1;
  position: relative;
  background: #f0f2f5;
  min-height: 0;
}

.pdf-modal-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Loading spinner overlay */
.pdf-modal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: #f0f2f5;
  color: var(--gray-400);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .03em;
  pointer-events: none;
  transition: opacity .25s ease;
}
.pdf-modal-loading i { font-size: 1.5rem; color: var(--teal); }
.pdf-modal-loading.hidden { opacity: 0; }

/* Responsive */
@media (max-width: 640px) {
  .pdf-modal {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .pdf-modal-overlay { padding: 0; }
  .pdf-modal-open-btn span { display: none; }
}

/* ══════════════════════════════════════
   VIDEO MODAL
══════════════════════════════════════ */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(10,15,22,.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: pdfOverlayIn .15s ease;
}
.video-modal-overlay[hidden] { display: none; }

.video-modal {
  background: #000;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  width: min(960px, calc(100vw - 2.5rem));
  max-height: calc(100vh - 2.5rem);
  overflow: hidden;
  animation: pdfModalIn .22s cubic-bezier(.34,1.2,.64,1);
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.1rem;
  background: var(--navy);
  border-bottom: 3px solid var(--teal);
  flex-shrink: 0;
}
.video-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.video-modal-icon { color: var(--teal); font-size: 1rem; }
.video-modal-title {
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-modal-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.video-modal-close:hover { background: rgba(255,255,255,.2); color: #fff; }

.video-modal-body {
  position: relative;
  flex: 1;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal-player {
  width: 100%;
  max-height: calc(100vh - 8rem);
  display: block;
  outline: none;
}

@media (max-width: 640px) {
  .video-modal { width: 100vw; border-radius: 0; }
  .video-modal-overlay { padding: 0; }
}

/* ══════════════════════════════════════
   3D ANATOMY IFRAME MODAL
   ─ Full true-viewport overlay (position:fixed
     on every layer — no flex-stretch quirks).
   ─ z-index 1400: above PDF (1000) & video (1200).
   ─ Keep-alive: the iframe is never destroyed
     after first load; only the overlay is
     shown/hidden so the Unity app stays warm.
══════════════════════════════════════ */

/* ── Outer overlay — covers everything ── */
.anatomy-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1400;
  background: #0a1018;          /* solid — no gaps around iframe */
  overflow: hidden;
}
.anatomy-modal-overlay[hidden] { display: none !important; }

/* Fade-in on open */
.anatomy-modal-overlay.anatomy-visible {
  animation: anatomyOverlayIn .22s ease forwards;
}
@keyframes anatomyOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Slim header bar pinned to top ── */
.anatomy-modal-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  background: var(--navy, #1A2535);
  border-bottom: 2px solid var(--teal, #18B8FF);
  gap: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.anatomy-modal-title {
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
.anatomy-modal-title i {
  color: var(--teal, #18B8FF);
  font-size: 1.05rem;
}

/* ── Status badge shown while loading ── */
.anatomy-loading-badge {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
  transition: opacity .4s ease;
}
.anatomy-loading-badge i { font-size: .78rem; }
.anatomy-loading-badge.loaded {
  color: var(--teal, #18B8FF);
}

/* ── Close / exit button — large and obvious ── */
.anatomy-modal-close {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem 1rem .4rem .75rem;
  border-radius: 99px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.anatomy-modal-close i { font-size: .85rem; }
.anatomy-modal-close:hover {
  background: rgba(220,40,40,.75);
  border-color: rgba(220,40,40,.9);
  color: #fff;
}
.anatomy-modal-close:active {
  background: rgba(180,20,20,.9);
}

/* ── The iframe — pinned below the header bar, fills everything else ── */
.anatomy-modal-frame {
  position: absolute;
  top: 48px;           /* exactly the header height */
  left: 0;
  width: 100%;
  height: calc(100% - 48px);
  border: none;
  display: block;
  background: #0a1018;
}

/* ── Full-frame loading splash — shown until iframe fires 'load' ── */
.anatomy-loading-splash {
  position: absolute;
  top: 48px; left: 0;
  width: 100%;
  height: calc(100% - 48px);
  z-index: 5;
  background: #0c1219;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  transition: opacity .6s ease;
  pointer-events: none;
}
.anatomy-loading-splash.hidden {
  opacity: 0;
  pointer-events: none;
}
.anatomy-loading-spinner {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 4px solid rgba(26,188,176,.18);
  border-top-color: var(--teal, #18B8FF);
  animation: anatomySpin 1s linear infinite;
}
@keyframes anatomySpin {
  to { transform: rotate(360deg); }
}
.anatomy-loading-text {
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  letter-spacing: .05em;
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}
.anatomy-loading-sub {
  font-size: .72rem;
  color: rgba(255,255,255,.3);
  letter-spacing: .04em;
}

/* ══════════════════════════════════════
   PROGRESS BAR — legacy selectors kept for JS compat; actual UI is .bottom-progress
══════════════════════════════════════ */
#progressBanner { display: none !important; }
.progress-banner { display: none; }
.progress-inner  { display: none; }

/* These ids are still read/written by app.js — keep elements present but invisible */
.progress-label { display: none; }
.progress-track { display: none; }
.progress-week  { display: none; }

/* .progress-fill is inside .bottom-nav; we keep the fill rule there */
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ps-mint-dark), var(--ps-mint));
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════
   FOOTER — hidden on kiosk
══════════════════════════════════════ */
.app-footer { display: none; }

/* ══════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-300); }

/* ══════════════════════════════════════
   LARGE SCREEN — 1920×1080 OPTIMIZATION
══════════════════════════════════════ */
@media (min-width: 1600px) {
  :root {
    --header-h:     96px;   /* top-bar 88px + teal stripe 8px at 1600px+ */
    --top-bar-h:    88px;
    --teal-stripe-h: 8px;
    --sidebar-w:   340px;
  }

  body { font-size: 17px; }

  .logo-circle { width: 124px; height: 124px; }
  .top-bar-date, .top-bar-weather { font-size: 1.3rem; }

  .tab-btn {
    padding: .7rem 1.6rem;
    font-size: .92rem;
  }

  .trimester-hero { padding: 1rem 3rem; }
  .trimester-hero-text { font-size: 1.2rem; }
  .trimester-hero-weeks { font-size: .84rem; padding: .32rem .95rem; }
  .calc-trigger { padding: .58rem 1.4rem; font-size: .9rem; }

  .calc-panel-inner { padding: 2.25rem 3rem; gap: 3.5rem; }
  .calc-left { max-width: 420px; }
  #pregnancyWheel { width: 310px; height: 310px; }

  .app-main {
    padding: 0;
    gap: 0;
  }

  .sidebar-header { padding: 1.6rem 1.8rem 1.25rem; }
  .sidebar-title { font-size: 1.25rem; }
  .sidebar-label { font-size: .75rem; }

  .visit-item { padding: .9rem 1.15rem; gap: 1rem; }
  .visit-badge { width: 44px; height: 44px; font-size: .82rem; }
  .visit-name  { font-size: .95rem; }
  .visit-sub   { font-size: .78rem; }

  /* On 1920×1080: same 2-row column flow, slightly larger auto-column */
  .agenda-grid {
    grid-auto-columns: minmax(175px, 1fr);
    gap: .35rem;
  }

  .card-header { padding: .5rem .85rem .45rem; }
  .card-icon   { width: 28px; height: 28px; font-size: .78rem; }
  .card-title  { font-size: .84rem; }
  .card-body   { padding: .45rem .85rem .5rem; }
  .item-list li { font-size: .84rem; gap: .55rem; }

  .item-doc-link  { font-size: .68rem; padding: .15rem .55rem; }
  .card-ref-link  { font-size: .68rem; padding: .2rem .6rem; }
  .empty-note     { font-size: .78rem; }

  .placeholder-seal { width: 100px; height: 100px; }
  .agenda-placeholder h2 { font-size: 1.3rem; }
  .agenda-placeholder p  { font-size: .88rem; max-width: 400px; }

  /* Fetal card: compact to keep ultrasound card same height as others */
  .fetal-figure-wrap  { width: 90px; height: 90px; }
  .fetal-figure       { width: 90px; height: 90px; }
  .fetal-figure svg   { max-width: 90px; max-height: 90px; }
  .fetal-card-body    { padding: .6rem .8rem; gap: .5rem; }
  .fetal-info-stage   { font-size: .88rem; }
  .fetal-info-desc    { font-size: .72rem; }
  .fetal-size-badge   { padding: .5rem .65rem; min-width: 80px; }
  .fetal-size-icon    { font-size: 1.5rem; }
  .fetal-size-name    { font-size: .82rem; }
  .fetal-size-cm      { font-size: .68rem; }
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 960px) {
  :root { --top-bar-h: 60px; --teal-stripe-h: 6px; --header-h: 66px; }
  .app-header { padding: 0 1.25rem; }
  .logo-circle { width: 76px; height: 76px; }
  .top-bar-logo { bottom: -24px; }
  .top-bar-date, .top-bar-weather { font-size: .85rem; }
  .announcement-bar { display: none; }
  .progress-banner { display: none; }
  .fetal-strip-inner { flex-wrap: wrap; }
  .agenda-panel { overflow-y: auto; }
  .agenda-grid { grid-template-rows: unset; grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(2, 1fr); overflow: unset; }
}

/* ══════════════════════════════════════
   BOTTOM NAVIGATION BAR — OB Path combined nav
   Two rows:
     Row 1 (bnav-top-row):    Home | Trimester tabs | Due Date
     Row 2 (bnav-visits-row): label + scrollable visit pills
══════════════════════════════════════ */

/* Total nav height = combined row + page nav row */
:root {
  --bnav-combined-h: 46px;  /* trimester tabs + visit pills in one row */
  --bnav-page-h:     48px;
  --bottom-nav-h:    calc(var(--bnav-combined-h) + var(--bnav-page-h) + 3px); /* +3px border */
  --bnav-top-h:    var(--bnav-combined-h);  /* legacy alias */
  --bnav-visit-h:  0px;                     /* legacy alias — row merged */
}

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--navy);
  border-top: 3px solid var(--teal);
  box-shadow: 0 -3px 20px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Thin progress bar (appears above nav when a visit is selected) ── */
.bottom-progress {
  height: 4px;
  background: rgba(255,255,255,.1);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.bottom-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--teal-dark), var(--teal));
  border-radius: 0 99px 99px 0;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

.bottom-progress-label {
  position: absolute;
  left: 1rem;
  top: 50%; transform: translateY(-50%);
  font-size: .58rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .06em;
  z-index: 1;
  white-space: nowrap;
}

.bottom-progress-week {
  position: absolute;
  right: 1rem;
  top: 50%; transform: translateY(-50%);
  font-size: .58rem;
  color: rgba(255,255,255,.5);
  z-index: 1;
  white-space: nowrap;
}

/* ══ ROW 1 (legacy two-row layout — now hidden, replaced by .bnav-combined-row) ══ */
.bnav-top-row {
  display: none;
}

/* ══ COMBINED ROW — matches white secondary nav bar on team.html / patient-hub.html ══ */
.bnav-combined-row {
  height: var(--bnav-combined-h);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  background: var(--white);
  border-bottom: 2px solid var(--gray-200, #E8E8E8);
  flex-shrink: 0;
}
/* Trimester colour is now conveyed by the active tab accent only — row stays white */
.bnav-combined-row[data-trimester="1"]  { border-bottom-color: rgba(26,188,176,.25); }
.bnav-combined-row[data-trimester="2"]  { border-bottom-color: rgba(58,122,74,.25); }
.bnav-combined-row[data-trimester="3"]  { border-bottom-color: rgba(40,86,160,.25); }
.bnav-combined-row[data-trimester="pp"] { border-bottom-color: rgba(138,48,96,.25); }

/* Hairline separator between tab group and visit list */
.bnav-combined-sep {
  width: 1px;
  background: rgba(0,0,0,.08);
  flex-shrink: 0;
  align-self: center;
  height: 60%;
  border-radius: 1px;
}

/* EDD / Due Date button — right-docked, styled to match tab-btn / filter-btn on other pages */
.bnav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: 0 1rem;
  border: none;
  border-top: 3px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
  position: relative;
  bottom: 1px;
}

.bnav-btn i { font-size: .9rem; }

.bnav-btn:hover { color: var(--teal); }
.bnav-btn.open  { color: var(--teal); border-top-color: var(--teal); }

/* Divider bar — hidden now that btn is absolute */
.bnav-divider { display: none; }

/* Trimester tab group — flex, centred within the row */
.bnav-trimester-group {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

/* Individual trimester tab — matches .filter-btn on team.html / .tab-btn on patient-hub.html */
.bnav-tab {
  width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  border: none;
  border-top: 3px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  bottom: 1px;
}

.bnav-tab-label { line-height: 1; }
.bnav-tab i { font-size: 1rem; }
.bnav-tab:hover { color: var(--teal); }

/* Active — teal top border + teal text, per trimester colour accent */
.bnav-tab.active { color: var(--teal); border-top-color: var(--teal); }
.bnav-tab[data-trimester="1"].active  { color: var(--teal-dark);  border-top-color: var(--teal); }
.bnav-tab[data-trimester="2"].active  { color: #3A7A4A;           border-top-color: #5A9A6A; }
.bnav-tab[data-trimester="3"].active  { color: #2856A0;           border-top-color: #4A78C8; }
.bnav-tab[data-trimester="pp"].active { color: #8A3060;           border-top-color: #C05890; }

/* ══ Legacy visits row — now hidden, merged into .bnav-combined-row ══ */
.bnav-visits-row { display: none; }

/* ── Row 3: Universal persistent page nav ── */
.bnav-page-row {
  height: var(--bnav-page-h);
  display: flex;
  align-items: stretch;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.bnav-page-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  flex: 1;
  min-width: 0;
  max-width: 160px;
  padding: 0 .4rem;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.5);
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, background .15s;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.bnav-page-btn i { font-size: .95rem; margin-bottom: .05rem; }
.bnav-page-btn:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); }
.bnav-page-btn.active { color: var(--teal); }
.bnav-page-btn.active i { color: var(--teal); }
.bnav-page-btn.active::after {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--teal);
  border-radius: 0 0 2px 2px;
}
/* Home pill — highlighted centre button */
.bnav-page-btn.home-btn {
  color: #fff;
  flex: 1.4;
}
.bnav-page-btn.home-btn .home-btn-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  background: var(--teal);
  border-radius: 10px;
  padding: .25rem .9rem;
  box-shadow: 0 3px 12px rgba(26,188,176,.4);
  transition: background .15s, box-shadow .15s, transform .15s;
  min-width: 52px;
}
.bnav-page-btn.home-btn:hover .home-btn-inner {
  background: var(--teal-dark);
  box-shadow: 0 5px 16px rgba(26,188,176,.5);
  transform: translateY(-1px);
}
.bnav-page-btn.home-btn i { font-size: .95rem; margin-bottom: 0; }
.bnav-page-btn.home-btn span { font-size: .58rem; }

/* "1st Trimester" label */
.bnav-visits-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Scrollable pill list — fills flex-1 between tab group and EDD button */
.bnav-visit-list {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 .5rem;
  min-width: 0;
  justify-content: flex-start;
}

.bnav-visit-list::-webkit-scrollbar { display: none; }

/* Visit pill — white-bg context: teal border/text on white, solid fill when active */
.visit-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .72rem;
  border-radius: 50px;
  border: 1.5px solid var(--gray-200, #E0E0E0);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-align: left;
}

.visit-item:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(26,188,176,.06);
}

/* Active pill — solid teal fill with white text */
.visit-item.active {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}
/* Per-trimester active colours */
[data-trimester-active="1"]  .visit-item.active { background: var(--teal-dark) !important; border-color: var(--teal-dark) !important; }
[data-trimester-active="2"]  .visit-item.active { background: #3A7A4A !important; border-color: #3A7A4A !important; }
[data-trimester-active="3"]  .visit-item.active { background: #2856A0 !important; border-color: #2856A0 !important; }
[data-trimester-active="pp"] .visit-item.active { background: #8A3060 !important; border-color: #8A3060 !important; }

/* .visit-badge removed — visit numbers no longer shown in pills */

/* ── Calculator panel — slides up from above the bottom nav ── */
.calc-panel[role="dialog"] {
  position: fixed;
  bottom: var(--bottom-nav-h);
  left: 0; right: 0;
  z-index: 290;
  background: var(--white);
  border-top: 1px solid #E4E4E4;
  box-shadow: 0 -8px 32px rgba(0,0,0,.14);
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  opacity: 0;
  pointer-events: none;
}

.calc-panel[role="dialog"].visible {
  max-height: calc(100vh - var(--header-h) - var(--bottom-nav-h));
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════
   LARGE SCREEN 1920×1080 OVERRIDES
══════════════════════════════════════ */
@media (min-width: 1600px) {
  :root {
    --bnav-combined-h: 50px;  /* combined row at 1920px */
    --bnav-page-h:     54px;   /* page nav at 1920px */
  }

  .bnav-btn   { font-size: .66rem; }
  .bnav-tab   { font-size: .64rem; width: 80px; }
  .bnav-tab i { font-size: 1.1rem; }
  .visit-item  { font-size: .76rem; padding: .25rem .9rem; }

  .agenda-panel { padding: .75rem 1rem; }
  /* On 1920px: wide columns, cards fill row height */
  .agenda-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }

  .card-header { padding: .65rem 1.1rem .55rem; }
  .card-body   { padding: .65rem 1.1rem .65rem; }
  .card-icon   { width: 30px; height: 30px; font-size: .82rem; }
  .card-title  { font-size: .92rem; }
  .item-list li { font-size: .88rem; gap: .6rem; }

  .header-hero-text  { font-size: 1.05rem; }
  .header-hero-weeks { font-size: .75rem; }

  /* Fetal card stays compact at 1600px+ too */
  .fetal-figure-wrap  { width: 90px; height: 90px; }
  .fetal-figure       { width: 90px; height: 90px; }
  .fetal-figure svg   { max-width: 90px; max-height: 90px; }
  .fetal-info-stage   { font-size: .92rem; }
  .fetal-info-desc    { font-size: .78rem; }
  .fetal-size-icon    { font-size: 1.6rem; }
  .fetal-size-name    { font-size: .95rem; }
  .fetal-size-cm      { font-size: .78rem; }
}

/* ══════════════════════════════════════
   LUMINA SCREENSAVER — Health Tips
   Full-screen overlay after 10 min idle
══════════════════════════════════════ */
#lumina-screensaver {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
  overflow: hidden;
}
#lumina-screensaver.ss-visible {
  opacity: 1;
  pointer-events: all;
}

/* Dark gradient backdrop */
.ss-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #0D1B26 0%, #1A2E3E 45%, #0F2030 100%);
  z-index: 0;
}

/* Animated decorative rings */
.ss-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(26,188,176,.08);
  pointer-events: none;
  z-index: 0;
  animation: ssRingPulse 8s ease-in-out infinite;
}
.ss-ring-1 { width: 600px; height: 600px; top: -200px; left: -150px; animation-delay: 0s; }
.ss-ring-2 { width: 900px; height: 900px; bottom: -400px; right: -300px; animation-delay: 2.5s; border-color: rgba(26,188,176,.05); }
.ss-ring-3 { width: 400px; height: 400px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: 5s; border-color: rgba(255,255,255,.04); }
@keyframes ssRingPulse {
  0%, 100% { transform: scale(1);   opacity: .6; }
  50%       { transform: scale(1.04); opacity: 1; }
}
.ss-ring-3 { animation-name: ssRingPulseCenter; }
@keyframes ssRingPulseCenter {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50%       { transform: translate(-50%,-50%) scale(1.06); }
}

/* AHC watermark logo */
.ss-logo-wrap {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  z-index: 2;
  opacity: .35;
  pointer-events: none;
}
.ss-logo-wrap svg { width: 100%; height: 100%; }

/* Slide container */
.ss-content {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Individual slide */
.ss-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 6rem 5rem;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.ss-slide.ss-slide-active {
  opacity: 1;
  pointer-events: all;
}

/* Tip card */
.ss-tip-wrap {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 80px rgba(0,0,0,.4), 0 4px 20px rgba(0,0,0,.2);
  overflow: hidden;
  max-width: 860px;
  width: 100%;
  animation: ssTipIn .65s cubic-bezier(.34,1.2,.64,1) forwards;
}
@keyframes ssTipIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Coloured accent bar at top of card */
.ss-tip-accent {
  height: 4px;
  width: 100%;
}

/* Card inner body */
.ss-tip-body {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem 2.5rem 2.2rem;
}

/* Large icon badge */
.ss-tip-badge {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}

/* Text group */
.ss-tip-text-group {
  flex: 1;
  min-width: 0;
}
.ss-tip-trimester {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: .45rem;
}
.ss-tip-title {
  font-family: 'Adrianna','Montserrat',system-ui,sans-serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: .75rem;
}
.ss-tip-body-text {
  font-size: clamp(.88rem, 1.1vw, 1.1rem);
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  max-width: 620px;
}

/* Footer bar */
.ss-footer {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,.35);
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1.5rem;
  gap: 1.5rem;
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.ss-footer-left {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.ss-footer-icon { color: #FF9F1C; font-size: .9rem; flex-shrink: 0; }
.ss-footer-label {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .04em;
  white-space: nowrap;
}
.ss-footer-sep { color: rgba(255,255,255,.3); font-size: .8rem; }
.ss-footer-sub {
  font-size: .7rem;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-dismiss-hint {
  font-size: .7rem;
  color: rgba(255,255,255,.35);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  animation: ssDismissPulse 2.5s ease-in-out infinite;
}
.ss-dismiss-hint i { font-size: .75rem; }
@keyframes ssDismissPulse {
  0%, 100% { opacity: .35; }
  50%       { opacity: .7; }
}

/* Progress bar */
.ss-progress-track {
  flex: 1;
  max-width: 360px;
  height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}
.ss-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-dark, #2563EB), var(--teal, #18B8FF));
  border-radius: 99px;
  width: 0%;
}

/* Dot pager */
.ss-pager {
  position: absolute;
  bottom: 4.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: .4rem;
  align-items: center;
}
.ss-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  transition: background .3s, transform .2s;
  flex-shrink: 0;
}
.ss-dot.ss-dot-active {
  background: var(--teal, #18B8FF);
  transform: scale(1.5);
}

/* Responsive compact layout on smaller kiosk sizes */
@media (max-width: 960px) {
  .ss-slide { padding: 4rem 2rem 4rem; }
  .ss-tip-body { gap: 1.25rem; padding: 1.5rem 1.75rem; }
  .ss-tip-badge { width: 52px; height: 52px; font-size: 1.3rem; border-radius: 12px; }
  .ss-tip-title { font-size: 1.3rem; }
  .ss-tip-body-text { font-size: .88rem; }
  .ss-footer { padding: .5rem 1rem; }
  .ss-footer-sub { display: none; }
}
@media (min-width: 1600px) {
  .ss-tip-badge { width: 88px; height: 88px; font-size: 2.2rem; }
  .ss-tip-title { font-size: 2.2rem; }
  .ss-tip-body-text { font-size: 1.15rem; }
  .ss-tip-body { padding: 2.5rem 3rem 2.8rem; gap: 2.5rem; }
}