/* Avela Intelligence — application stylesheet.
   Extracted verbatim from the <style> block in index.html; no rules changed.
   Loaded via <link> in the head, so it is render-blocking exactly as the
   inline block was. netlify.toml sets must-revalidate on /*, so this file
   cannot go stale against a new index.html despite not being fingerprinted. */

/* ============================================================
   FONTS — self-hosted (latin subset, variable). Served from our
   own origin so no request reaches a third party on load, and no
   render-blocking external stylesheet. Playfair + DM Sans are
   variable fonts, so one file per family covers its weight range.
============================================================ */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/dmsans.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/playfair.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/playfair-italic.woff2') format('woff2');
}

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  /* brand */
  --terra:        #B0563E;
  --terra-light:  #CD8470;
  --terra-bg:     #EBD2CB;
  --terra-pale:   #F5E9E5;
  --terra-dark:   #8C412C;
  --terra-mid: #9C4C36;

  /* surfaces — warm.
     --wash is decorative only. Never use it to encode state: it sits on top of
     --gold-bg in hue, and --gold-bg means "watch"/aneuploid. Semantic tints live
     in the brand block above and must keep their hue separation from gold. */
  --cream:       #FBF9F4;
  --sand:        #F7F1E8;
  --wash:        #F4E6D9;
  --line:        #E6DECF;
  --line-soft:   #EFE7D8;

  /* accent */
  --gold:        #BE9A57;
  --gold-bg:     #F7EBD2;

  /* dark + text */
  --charcoal:    #322C26;
  --ink:         #2C2822;
  --mid:         #635C54;
  --light:       #978F85;

  /* unchanged */
  --blush: #F2E8E4;
  --mid-gray: #666666;
  --light-gray: #F5F5F5;
  --white: #FFFFFF;
  --border: #E0E0E0;
  --error: #A62639;
  --error-bg: #F9E3E6;

  /* status — positive */
  --sage: #567553;
  --sage-bg: #E9F0E5;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;

  --nav-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* In a browser this is always 0: the tab's chrome already occupies that
     space. In the iOS and Android shells the WebView runs edge to edge under
     the status bar and notch, so anything anchored to the top has to add this
     or the OS draws its clock over our headings. Added to existing padding
     rather than replacing it, which is why the web layout is unchanged. */
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ============================================================
   RESET + BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: var(--font-body);
  font-size: 16px; /* prevents iOS zoom */
}

/* Keyboard focus only — touch and mouse taps stay clean */
:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

.btn-primary:focus-visible,
.btn-primary.btn-danger:focus-visible { outline-color: var(--terra-dark); }

/* Sheets receive programmatic focus when they open (screen-reader entry
   point); the ring is for interactive elements, not the container. */
.modal-sheet:focus-visible,
.ext-review-sheet:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   SCREEN MANAGEMENT
============================================================ */
.screen { display: none; width: 100%; min-height: 100dvh; }
.screen.active { display: flex; flex-direction: column; }

/* ============================================================
   APP SHELL
============================================================ */
#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  background: var(--cream);
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
}

/* ============================================================
   BOTTOM NAV
============================================================ */
#bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: calc(var(--nav-height) + var(--safe-bottom));
  background: var(--white);
  border-top: 1px solid var(--border);
  z-index: 100;
  padding-bottom: var(--safe-bottom);
}

#bottom-nav.visible { display: flex; }

.nav-inner {
  display: flex;
  width: 100%;
  height: var(--nav-height);
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  color: var(--mid-gray);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  position: relative;
}
/* "Something new in your embryo insight" dot on the Cycle tab. Sits at the
   top-right of the tab's icon; clears when she opens the Cycle screen. */
.nav-dot {
  position: absolute;
  top: 6px;
  left: calc(50% + 9px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terra);
  border: 1.5px solid var(--cream);
}

.nav-tab.active {
  color: var(--terra);
  font-weight: 600;
}

.nav-tab svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   SHARED COMPONENTS
============================================================ */

/* Page header */
.page-header {
  padding: calc(56px + var(--safe-top)) 24px 20px;
  background: var(--cream);
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.2;
}

.page-header .subtitle {
  font-size: 13px;
  color: var(--mid-gray);
  margin-top: 4px;
}

/* Dark header variant */
.page-header-dark {
  padding: calc(56px + var(--safe-top)) 24px 20px;
  background: var(--ink);
}

.page-header-dark h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--white);
}

.page-header-dark .subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

/* Scrollable content area */
.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  -webkit-overflow-scrolling: touch;
}

/* Primary button */
.btn-primary {
  width: 100%;
  background: var(--terra);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 24px;
  border-radius: 12px;
  text-align: center;
  transition: background 0.15s, transform 0.1s;
  min-height: 52px;
}

.btn-primary:active { background: var(--terra-mid); transform: scale(0.98); }
.btn-primary:disabled { background: var(--light); cursor: not-allowed; transform: none; }

/* Secondary button */
.btn-secondary {
  width: 100%;
  background: var(--light-gray);
  color: var(--charcoal);
  font-size: 15px;
  font-weight: 500;
  padding: 16px 24px;
  border-radius: 12px;
  text-align: center;
  min-height: 52px;
}

/* Ghost link */
.btn-ghost {
  background: none;
  color: var(--terra);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  padding: 8px 0;
  display: inline-block;
}

/* The footer row of a sheet: a destructive action beside Cancel.
   Flex with a gap rather than two inline-blocks separated by whitespace —
   Vue's whitespace: 'condense' drops a whitespace-only text node between two
   elements when it contains a newline, so the buttons rendered touching
   ("Delete documentCancel"). The gap is owned by the container, which cannot
   be lost to reformatting. */
.sheet-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}

/* "Manage this cycle" footer on the Cycle screen */
.cycle-manage {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.cycle-manage-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 14px;
}
.cycle-manage-row { display: flex; gap: 10px; }
/* flex:1 1 0 + width:0 keeps both buttons exactly equal width regardless of label length */
.cycle-manage-btn {
  flex: 1 1 0;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  min-height: 40px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: none;
  color: var(--mid-gray);
  cursor: pointer;
}
.cycle-manage-btn svg { width: 15px; height: 15px; flex: none; }
.cycle-manage-btn .mng-ic { color: var(--terra); display: inline-flex; }
.cycle-manage-btn.is-end { color: var(--terra); border-color: var(--terra); }
.cycle-manage-btn:active { transform: scale(0.98); }

/* Form elements */
.form-group { margin-bottom: 20px; }

/* Two fields on one line — first/last name. Each column holds a full form-group
   so the labels and inputs keep their normal spacing. */
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; min-width: 0; }

/* Quiet helper text under a field. */
.form-hint { font-size: 12px; color: var(--mid-gray); margin-top: 6px; line-height: 1.4; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--mid-gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--charcoal);
  background: var(--white);
  outline: none;
  min-height: 52px;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}

.form-input:focus { border-color: var(--terra); }

/* In-app date field button (dateFieldButton) — replaces native date inputs
   that iOS auto-commits. Reuses .form-input's box when given that class;
   lays out a left label + right calendar glyph and opens the picker sheet. */
.date-field {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; cursor: pointer;
  font-family: var(--font-body); color: var(--charcoal);
}
.date-field .date-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-field.placeholder .date-field-label { color: var(--mid-gray); }
/* Calendar glyph as a pseudo-element so button markup stays a plain label. */
.date-field::after {
  content: ""; flex-shrink: 0; width: 16px; height: 16px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.date-field:active { background: var(--light); }

.form-select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--charcoal);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center;
  outline: none;
  min-height: 52px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.form-select:focus { border-color: var(--terra); }

/* In-app result-type picker — replaces the ~50-item native <select> scroll.
   The trigger mirrors .form-select; tapping opens a searchable sheet. */
.type-picker-trigger { display: flex; align-items: center; text-align: left; }
.type-picker-trigger .type-picker-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.type-picker-trigger.placeholder .type-picker-label { color: var(--mid-gray); }
.type-picker-trigger:disabled { opacity: 0.55; cursor: default; }

#type-picker-modal { z-index: 600; }
.tp-search {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px 12px 40px; font-size: 15px; color: var(--charcoal);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat left 14px center;
  outline: none; -webkit-appearance: none;
}
.tp-search:focus { border-color: var(--terra); }
.tp-list { margin-top: 6px; }
.tp-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--light); padding: 16px 4px 6px;
}
.tp-list .tp-group-label:first-child { padding-top: 8px; }
.tp-row {
  display: block; width: 100%; text-align: left;
  padding: 13px 12px; border-radius: 10px; font-size: 15px; color: var(--charcoal);
  -webkit-tap-highlight-color: transparent;
}
.tp-row:active { background: var(--terra-pale); }
.tp-row.tp-selected { background: var(--terra-pale); color: var(--terra-dark); font-weight: 600; }
.tp-empty { padding: 28px 4px; text-align: center; color: var(--mid-gray); font-size: 14px; line-height: 1.6; }
.tp-empty-link { color: var(--terra); font-weight: 600; }

/* Error text */
.form-error {
  font-size: 13px;
  color: var(--error);
  margin-top: 6px;
}

/* Insight card */
.insight-card {
  background: var(--wash);
  border-radius: 12px;
  padding: 15px 17px;
  margin-bottom: 16px;
}
/* Quiet variant for empty/no-data and error/retry states: keeps the wash
   fill reserved for real insights so a placeholder never reads as loud as
   one. Body text is already muted at each call site. */
.insight-card--muted {
  background: transparent;
  border: 1px solid var(--line);
}

.insight-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--terra-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.insight-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terra);
  flex-shrink: 0;
}

.insight-text {
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.6;
}
/* Secondary line within an insight card (red-flag routing, reveal detail):
   quieter than the lead sentence without dropping out of the card's voice. */
.insight-text.muted { color: var(--mid); }

/* ── Unified insight-card header + collapse ──────────────────────────────
   Every insight card (except the lazy per-marker one) shares this header:
   terracotta dot + label + one chevron, the whole bar toggling the card to
   a clean pill. Collapsed state persists per card, tied to a signature of
   the insight so a regenerated insight re-opens. See insightCard() in JS and
   docs/insight-card-pattern.md. */
.ic-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  margin-bottom: 9px;
  -webkit-tap-highlight-color: transparent;
}
.ic-head .insight-label { margin-bottom: 0; flex: 1; }
.insight-card.ic-collapsed .ic-head { margin-bottom: 0; }
.ic-chev { color: var(--terra-light); transition: transform 0.22s ease; flex-shrink: 0; }
.insight-card.ic-collapsed .ic-chev { transform: rotate(-90deg); }
.ic-body {
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.2s;
  max-height: 1600px;
  opacity: 1;
}
.insight-card.ic-collapsed .ic-body { max-height: 0; opacity: 0; }
.ic-head:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 4px; }

/* One reveal primitive for in-card secondary detail (recap, attribution).
   Not persisted — per-visit. Replaces the per-card ei-more-btn variants. */
.ic-more { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.ic-more[hidden] { display: none; }
.ic-more-btn {
  margin-top: 12px;
  font-size: 12px;
  color: var(--terra);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ic-more-chev { transition: transform 0.2s; }
@media (prefers-reduced-motion: reduce) {
  .ic-body, .ic-chev, .ic-more-chev { transition: none; }
}

.ei-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Forward-looking "what usually comes next" projection: leads the card while
   waiting for the next result, set off from the funnel-stage reads below by a
   soft divider. Label sits above its text (full width) since it is longer
   than the 90px side-labels and reads as a different kind of statement. */
.ei-projection {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--terra-light);
}
.ei-projection-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--terra-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
/* "New" indicators: a quiet pill on each sub-section unlocked since she last
   viewed the card, and a count chip on the card (section) header. */
.ei-pill-new {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terra-dark);
  background: var(--terra-pale);
  border: 1px solid var(--terra-bg);
  border-radius: 999px;
  padding: 1px 6px;
  vertical-align: middle;
}
.ei-new-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--terra);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ei-chip-cnt {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0 5px;
}
/* Sections stack the label above full-width body text (was a 90px side
   label). The stacked read gives the longer result copy room to breathe and
   lets the label carry the terra accent, matching the insight redesign. */
.ei-section { display: block; }
.ei-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--terra-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.ei-section-text {
  font-size: 13.5px;
  color: var(--charcoal);
  line-height: 1.6;
}
.ei-notable {
  padding-top: 10px;
  border-top: 1px solid var(--terra-light);
}
.ei-notable-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--terra);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

/* ── Embryo-grade decoder + two-zone layout (eg-*) ──────────────────────
   The Retrieval Insight card splits into "Your chances" (model reads) and a
   collapsible "Your embryos" list where each embryo's day + grade is decoded
   deterministically by decodeEmbryoGrade(). Sits on the .insight-card wash. */
.eg-zone { display: flex; flex-direction: column; gap: 11px; }
.eg-zone + .eg-zone, .eg-zone + .eg-collapse { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.eg-zone-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terra-dark); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.eg-zone-count { background: var(--terra-pale); color: var(--terra-dark); border-radius: 999px; font-size: 10px; font-weight: 700; padding: 1px 8px; }
.eg-read { font-size: 13.5px; line-height: 1.6; color: var(--charcoal); }
.eg-read .eg-rl { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terra); font-weight: 600; display: block; margin-bottom: 3px; }
.eg-read .eg-mosaic { display: block; margin-top: 6px; font-size: 12.5px; color: var(--mid); font-style: italic; }

/* collapsible "Your embryos" */
.eg-collapse { border: none; }
.eg-collapse > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.eg-collapse > summary::-webkit-details-marker { display: none; }
.eg-collapse > summary .eg-chev { margin-left: auto; color: var(--light); transition: transform .15s ease; display: inline-flex; }
.eg-collapse[open] > summary .eg-chev { transform: rotate(180deg); }
.eg-collapse[open] > summary { margin-bottom: 11px; }
.eg-collapse > summary:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
.eg-body { display: flex; flex-direction: column; gap: 10px; }

/* per-embryo row */
.eg-emb { background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; }
.eg-emb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eg-emb-id { display: flex; align-items: baseline; gap: 9px; min-width: 0; flex-wrap: wrap; }
.eg-day { font-size: 11px; font-weight: 600; color: var(--mid); text-transform: uppercase; letter-spacing: 0.04em; flex: none; }
.eg-grade { font-family: ui-monospace, Menlo, monospace; font-size: 17px; font-weight: 600; color: var(--charcoal); }
.eg-sex { font-size: 11px; color: var(--light); }
/* ploidy: the dominant signal once PGT is in */
.eg-ploidy { flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; padding: 5px 12px; border-radius: 999px; border: 1px solid transparent; }
.eg-ploidy.eu { color: var(--sage); background: var(--sage-bg); border-color: #CFE0C6; }
.eg-ploidy.an { color: #8A6B1E; background: var(--gold-bg); border-color: #E9D3A6; }
.eg-ploidy.mo { color: var(--mid); background: var(--blush); border-color: #E6D5CE; }
.eg-ploidy.untested { color: var(--mid); background: var(--light-gray); border-color: var(--border); }
/* verdict: deliberately quieter than the ploidy pill */
.eg-verdict-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eg-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; line-height: 1; }
.eg-verdict .eg-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.eg-verdict.top  { color: var(--terra-dark); background: var(--terra-pale); }
.eg-verdict.high { color: var(--terra-mid);  background: #FBF1EA; }
.eg-verdict.good { color: #806224;           background: var(--gold-bg); }
.eg-verdict.fair { color: var(--mid);         background: var(--light-gray); }
.eg-byapp { font-size: 12px; color: var(--light); }

/* per-embryo grade breakdown (tap to open) */
.eg-more { border-top: 1px dashed var(--line); padding-top: 8px; }
.eg-more > summary { cursor: pointer; font-size: 12.5px; color: var(--terra); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.eg-more > summary::-webkit-details-marker { display: none; }
.eg-more > summary::after { content: "\25BE"; font-size: 9px; transition: transform .15s ease; }
.eg-more[open] > summary::after { transform: rotate(180deg); }
.eg-more > summary:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
.eg-parse { margin-top: 10px; display: flex; flex-direction: column; }
.eg-parse-line { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 11px; padding: 6px 0; }
.eg-parse-line + .eg-parse-line { border-top: 1px dashed var(--line); }
.eg-glyph { font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 700; text-align: center; color: var(--terra-dark); background: var(--terra-pale); border-radius: 6px; padding: 3px 0; line-height: 1.25; }
.eg-parse-text { font-size: 13px; color: var(--charcoal); line-height: 1.45; }
.eg-parse-text b { font-weight: 600; }
.eg-parse-text .eg-scale { color: var(--light); font-size: 12px; }

.eg-defer { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--terra-dark); line-height: 1.45; }
.eg-defer .eg-defer-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-top: 6px; }

.eg-caveat { margin: 3px 1px 0; font-size: 12.5px; line-height: 1.5; color: var(--light); }
.eg-caveat b { color: var(--mid); font-weight: 600; }

/* verdict-scale reference, tucked in a disclosure */
.eg-help { border-top: 1px dashed var(--line); padding-top: 12px; }
.eg-help > summary { cursor: pointer; font-size: 12px; color: var(--mid); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.eg-help > summary::-webkit-details-marker { display: none; }
.eg-help > summary::after { content: "\25BE"; font-size: 9px; transition: transform .15s ease; }
.eg-help[open] > summary::after { transform: rotate(180deg); }
.eg-help > summary:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
.eg-key { margin-top: 11px; border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--sand); }
.eg-key-h { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--light); font-weight: 600; }
.eg-key-row { display: flex; align-items: center; gap: 10px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--mid); }
.eg-key-row .eg-verdict { min-width: 58px; justify-content: center; }

.insight-q-wrap {
  margin-top: 14px;
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  overflow: hidden;
}

.insight-q-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.insight-q-toggle svg.insight-q-arrow {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.insight-q-list {
  display: none;
  flex-direction: column;
  border-top: 1.5px solid var(--gold);
}

.insight-q-list.open { display: flex; }

.insight-q-item {
  display: flex;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
}

.insight-q-item:last-child { border-bottom: none; }

.insight-q-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--terra);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.insight-q-body { flex: 1; min-width: 0; }

.insight-q-signal {
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.5;
  margin-bottom: 5px;
}

.insight-q-question {
  font-size: 13px;
  color: var(--terra);
  font-style: italic;
  line-height: 1.5;
}

/* Opt-in footer inside the collapsible question list (between-cycles prep
   CTA). Reveals together with the questions when the caret is opened. Terra
   treatment = the app's action color, distinct from the gold toggle and the
   italic question quotes. */
.insight-q-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-top: 1px dashed var(--gold);
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.insight-q-cta .iqc-ic { flex-shrink: 0; color: var(--terra); display: flex; }
.insight-q-cta .iqc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.insight-q-cta .iqc-h { font-size: 12.5px; font-weight: 700; color: var(--terra-dark); line-height: 1.3; }
.insight-q-cta .iqc-s { font-size: 11px; color: var(--mid); line-height: 1.35; margin-top: 2px; }
.insight-q-cta .iqc-go {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--terra);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insight-q-cta:active { background: var(--terra-pale); }

.insight-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mid-gray);
  font-size: 13px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--terra);
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* Phase banner */
.phase-banner {
  background: none;
  padding: 0;
  margin-bottom: 16px;
}

/* Section heading */
.section-heading {
  font-size: 11px;
  font-weight: 600;
  color: var(--mid-gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  margin-top: 24px;
}

.section-heading:first-child { margin-top: 0; }

/* Collapsible lab sections */
.lab-section { margin-top: 6px; }

.lab-section-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 0 10px;
  border-top: 1px solid var(--border);
  border-bottom: none;
  background: none;
}

.lab-section-hd:active { opacity: 0.7; }

.lab-section-icon {
  width: 18px;
  height: 18px;
  stroke: var(--terra);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.lab-section-title {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  color: var(--mid-gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

/* .sched-count is the collapsed schedule header's pill. It shares this rule
   rather than copying it because the visual parity with the Labs count is the
   point: both answer "how many?" from a collapsed header, and they sit one
   screen apart. Restyling one should restyle the other. */
.lab-count, .sched-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--terra);
  background: var(--terra-pale);
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}
.lab-count.empty, .sched-count.muted { color: var(--mid-gray); background: #F0EDE7; }
.lab-count:empty, .sched-count:empty { display: none; }

.lab-section-arrow {
  width: 15px;
  height: 15px;
  stroke: var(--mid-gray);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.lab-section-body { padding-bottom: 4px; }
.lab-section.collapsed .lab-section-body { display: none; }
.lab-section.collapsed .lab-section-arrow { transform: rotate(-90deg); }

/* Collapsible cycle sections */
.cycle-section { margin-bottom: 4px; }
.cycle-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.cycle-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mid-gray);
}
.cs-hd-right { display: flex; align-items: center; gap: 8px; }
.cs-chevron {
  color: var(--mid-gray);
  transition: transform 0.22s ease;
  flex-shrink: 0;
}
.cs-chevron.open { transform: rotate(0deg); }
.cs-chevron:not(.open) { transform: rotate(-90deg); }
.cycle-section-body {
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.2s;
  max-height: 4000px;
  opacity: 1;
}
.cycle-section-body.closed { max-height: 0; opacity: 0; }

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

/* Toast */
#toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 24px;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
  max-width: calc(100% - 48px);
  text-align: center;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Spinner overlay */
#spinner {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.7);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#spinner.active { display: flex; }

.spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--terra-light);
  border-top-color: var(--terra);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   DOCUMENT EXTRACTION
============================================================ */
/* ---- Full-screen flow overlays (Extracting / Saved) ---- */
.ext-fullscreen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--cream);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 26px;
}
.ext-fullscreen.active { display: flex; }
.ext-spinner-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid var(--terra-bg);
  border-top-color: var(--terra);
  animation: spin 0.9s linear infinite;
}
.ext-fs-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--charcoal);
}
.ext-fs-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mid-gray);
  line-height: 1.5;
  max-width: 250px;
  margin: 8px auto 0;
}
.ext-check-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--terra);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ivfPop 0.5s ease-out;
}
@keyframes ivfPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ivfSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ivfFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Review sheet (matches IVF Upload Flow prototype) ---- */
.ext-review-sheet {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 26px 26px 0 0;
  height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ivfSlideUp 0.34s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
}
.ext-rv-body { flex: 1; overflow: auto; padding: 18px 22px 16px; }
.ext-rv-footer { border-top: 1px solid #efece6; padding: 13px 22px calc(16px + var(--safe-bottom)); background: var(--white); }
.ext-rv-input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  color: var(--charcoal);
}

/* ============================================================
   AUTH SCREENS
============================================================ */
.auth-screen {
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  padding: calc(48px + var(--safe-top)) 28px calc(40px + var(--safe-bottom));
  background: var(--cream);
  max-width: 480px;
  margin: 0 auto;
}

.auth-logo-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.auth-logo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.auth-wordmark {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 28px;
}
.auth-wordmark .wm-mark,
.intake-wordmark .wm-mark {
  font-size: 1em;
  font-weight: 400;
  color: var(--terra);
  letter-spacing: 0.28em;
  position: relative;
  padding-bottom: 0.14em;
}
.auth-wordmark .wm-mark::after,
.intake-wordmark .wm-mark::after {
  content: '';
  position: absolute;
  left: 0.05em;
  right: 0.3em;
  bottom: 0;
  height: 1.3px;
  background: var(--terra-light);
}
.auth-wordmark .wm-sub,
.intake-wordmark .wm-sub {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--terra);
  letter-spacing: 0.015em;
}

.auth-tagline {
  font-size: 14px;
  color: var(--mid-gray);
  margin-bottom: 40px;
  line-height: 1.6;
}

.auth-heading {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 8px;
  line-height: 1.15;
}

.auth-sub {
  font-size: 14px;
  color: var(--mid-gray);
  margin-bottom: 28px;
  line-height: 1.5;
}

.auth-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--mid-gray);
}

.auth-footer button {
  color: var(--terra);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
}

/* ============================================================
   INTAKE / ONBOARDING
============================================================ */
.intake-screen {
  min-height: 100dvh;
  flex-direction: column;
  background: var(--cream);
}

/* Top bar with wordmark + step counter */
.intake-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(20px + var(--safe-top)) 24px 0;
  flex-shrink: 0;
}

.intake-wordmark {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 20px;
}

.intake-step-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--mid-gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Progress bar */
.intake-progress-bar {
  height: 3px;
  background: var(--border);
  margin: 16px 24px 0;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.intake-progress-fill {
  height: 100%;
  background: var(--terra);
  border-radius: 2px;
  transition: width 0.35s ease;
}

/* Scrollable step content */
.intake-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px 0;
  -webkit-overflow-scrolling: touch;
}

.intake-step-heading {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.18;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.intake-step-sub {
  font-size: 14px;
  color: var(--mid-gray);
  line-height: 1.6;
  margin-bottom: 28px;
}

.intake-context-note {
  background: var(--blush);
  border-left: 3px solid var(--gold);
  border-radius: 4px 10px 10px 4px;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.55;
  margin-bottom: 20px;
}

/* Stage cards (step 2) */
.intake-stage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

@media (max-width: 340px) {
  .intake-stage-grid { grid-template-columns: 1fr; }
}

.intake-stage-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 108px;
  -webkit-tap-highlight-color: transparent;
}

.intake-stage-card:active { background: var(--light-gray); }

.intake-stage-card.selected {
  border-color: var(--terra);
  box-shadow: 0 0 0 1.5px var(--terra);
  background: var(--terra-pale);
}

.intake-stage-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--terra-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--terra);
}

.intake-stage-card.selected .intake-stage-icon {
  background: var(--terra);
  color: var(--white);
}

.intake-stage-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.3;
}

.intake-stage-sub {
  font-size: 12px;
  color: var(--mid-gray);
  line-height: 1.4;
}

/* Tap-list options */
.intake-tap-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.intake-tap {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 15px 18px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.intake-tap:active { background: var(--light-gray); }

.intake-tap.selected {
  border-color: var(--terra);
  box-shadow: 0 0 0 1px var(--terra);
}

.intake-tap-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}

.intake-tap.selected .intake-tap-marker {
  border-color: var(--terra);
  background: var(--terra);
}

.intake-tap.selected .intake-tap-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}

.intake-tap-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.3;
}

.intake-tap-sub {
  font-size: 12.5px;
  color: var(--mid-gray);
  margin-top: 3px;
  line-height: 1.4;
}

/* "What do these mean?" glossary under protocol dropdowns */
details.proto-help { margin-top: 8px; }

details.proto-help summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--terra);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}

details.proto-help summary::-webkit-details-marker { display: none; }

details.proto-help summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid var(--terra);
  border-bottom: 1.5px solid var(--terra);
  transform: rotate(45deg);
  transition: transform 0.15s;
}

details.proto-help[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

details.proto-help summary:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 4px;
}

.proto-help-list {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--light-gray);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* intake prior-cycle cards are already light-gray; flip the panel to white there */
.intake-detail-card .proto-help-list { background: var(--white); }

.proto-help-list div {
  font-size: 12.5px;
  color: var(--mid-gray);
  line-height: 1.5;
}

.proto-help-list b { color: var(--charcoal); font-weight: 600; }

/* Diagnosis multi-select grid */
.intake-dx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.intake-dx-chip {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mid-gray);
  text-align: left;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 62px;
  -webkit-tap-highlight-color: transparent;
}

.intake-dx-chip:active { background: var(--light-gray); }

.intake-dx-chip.selected {
  border-color: var(--terra);
  background: var(--terra-pale);
  color: var(--charcoal);
}

.intake-dx-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.intake-dx-chip.selected .intake-dx-check {
  background: var(--terra);
  border-color: var(--terra);
}

.intake-dx-chip.selected .intake-dx-check::after {
  content: '';
  width: 8px;
  height: 4px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: translateY(-1px) rotate(-45deg);
}

.intake-dx-full {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 13px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--mid-gray);
  text-align: center;
  transition: all 0.15s;
  width: 100%;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
}

.intake-dx-full.selected {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--white);
}

/* Upload zone */
.intake-upload-zone {
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  padding: 36px 24px;
  background: var(--light-gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.intake-upload-zone:active,
.intake-upload-zone:hover { border-color: var(--terra); background: var(--terra-light); }

.intake-upload-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terra);
}

.intake-upload-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
}

.intake-upload-sub {
  font-size: 12.5px;
  color: var(--mid-gray);
  line-height: 1.5;
}

.intake-upload-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}

.intake-upload-tag {
  font-size: 11px;
  color: var(--mid-gray);
  background: var(--white);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
}

/* Sticky footer */
.intake-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px calc(20px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
  gap: 12px;
  margin-top: 20px;
}

.intake-back-btn {
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  color: var(--mid-gray);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.intake-back-btn:active { color: var(--charcoal); }

.intake-footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.intake-skip {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--mid-gray);
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: underline;
  text-decoration-color: rgba(102,102,102,0.35);
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}

.intake-cta {
  background: var(--ink);
  color: var(--terra-light);
  border: none;
  padding: 14px 24px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}

.intake-cta:active:not(:disabled) { background: #1E1A16; }
.intake-cta:disabled { background: var(--border); color: var(--mid-gray); cursor: not-allowed; }

/* Inline detail card for branch data */
.intake-detail-card {
  background: var(--light-gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.intake-detail-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid-gray);
}

/* Stage-routed segmented control (replaced the old .phase-bar-strip in renderCycle).
   3 equal cells; each cell a real button at >=44px tap height. */
.cycle-seg-bar {
  display: flex;
  gap: 4px;
  background: var(--light-gray);
  border-radius: 13px;
  padding: 4px;
  margin-bottom: 20px;
}
.cycle-seg {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 8px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mid-gray);
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}
.cycle-seg.active {
  background: var(--terra);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* live-but-not-active: terra text + a small centred dot so "where you are"
   stays legible while the patient is browsing another stage */
.cycle-seg.live:not(.active) { color: var(--terra); }
.cycle-seg.live:not(.active)::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terra);
}
.seg-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: 6px;
  vertical-align: middle;
}
.cycle-seg.active .seg-dot { background: var(--white); }

/* Day pill CD label */
.day-pill-cd {
  font-size: 9px;
  color: var(--mid-gray);
  letter-spacing: 0.02em;
}
.day-pill.active .day-pill-cd { color: rgba(255,255,255,0.75); }
.day-pill.past { opacity: 0.5; }

/* Guideline cards */
.guideline-card {
  background: var(--blush);
  border-left: 3px solid var(--gold);
  border-radius: 4px 10px 10px 4px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.guideline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.guideline-body {
  font-size: 12px;
  color: var(--mid-gray);
  line-height: 1.55;
}

/* Appointment events */
.appt-event {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.appt-event:last-child { border-bottom: none; }

.appt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 5px;
}

.appt-text strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
}

.appt-text span {
  font-size: 12px;
  color: var(--mid-gray);
}

/* ============================================================
   HOME SCREEN
============================================================ */

/* Quick actions */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.quick-action-btn {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: left;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.quick-action-btn:active { background: var(--terra-light); border-color: var(--terra-light); }

.quick-action-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--terra-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terra);
  flex-shrink: 0;
}

.quick-action-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-action-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.3;
}

.quick-action-sub {
  font-size: 11px;
  color: var(--mid-gray);
  margin-top: 1px;
  line-height: 1.35;
}

.quick-action-primary {
  background: var(--terra);
  border-color: var(--terra);
}

.quick-action-primary:active { background: var(--terra-mid); border-color: var(--terra-mid); }

.quick-action-primary .quick-action-icon {
  background: rgba(255,255,255,0.18);
  color: var(--white);
}

.quick-action-primary .quick-action-label { color: var(--white); }
.quick-action-primary .quick-action-sub { color: rgba(255,255,255,0.65); }

/* Today schedule */
.schedule-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.schedule-item:last-child { border-bottom: none; }

.schedule-time {
  font-size: 12px;
  color: var(--mid-gray);
  min-width: 44px;
  flex-shrink: 0;
  padding-top: 2px;
  white-space: nowrap;
}

.schedule-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terra);
  flex-shrink: 0;
  margin-top: 5px;
}

.schedule-text {
  flex: 1;
}

.schedule-text strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
}

.schedule-text span {
  font-size: 12px;
  color: var(--mid-gray);
}

.home-schedule-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 0 16px;
}

.home-sched-empty {
  padding: 16px 0;
  font-size: 13px;
  color: var(--mid-gray);
  text-align: center;
}

.home-sched-upcoming {
  padding: 10px 0 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--mid-gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Prominent per-day header inside the upcoming preview, so future days read
   clearly as future rather than blending into today's rows. */
.home-sched-day {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
}
.home-sched-day::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--mid-gray);
  flex-shrink: 0;
}

/* Key lab tiles */
.lab-tiles {
  display: grid;
  /* minmax(0, 1fr) rather than a bare 1fr: 1fr floors at min-content, so four
     tiles that do not fit the width collapse to unequal columns sized by their
     longest word, and the row overflows the page sideways. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

/* Four across a 375px phone leaves about 46px of content per tile, which the
   longest unit ("follicles") overflows. The row only needs the tighter gutter
   at four. */
.lab-tiles--four .lab-tile {
  padding-left: 11px;
  padding-right: 11px;
}

.lab-tile {
  background: var(--light-gray);
  border-radius: 12px;
  padding: 14px;
  min-height: 80px;
  /* A column so the three rows inside can be pinned. Left to flow, a one-line
     marker like "E2" sits a line higher than "Follicles Right" and drags its
     value and date up with it, which reads as one tile being misaligned. */
  display: flex;
  flex-direction: column;
}

.lab-tile-marker {
  font-size: 11px;
  font-weight: 600;
  color: var(--mid-gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  /* Two lines' worth whether or not the label needs them, so every value in the
     row starts at the same height regardless of how its marker wraps. */
  min-height: 2.6em;
}

.lab-tile-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--charcoal);
}

.lab-tile-unit {
  font-size: 11px;
  color: var(--mid-gray);
}

.lab-tile-date {
  font-size: 11px;
  color: var(--mid-gray);
  /* Pinned to the bottom: a value that wraps to two lines in a narrow tile
     would otherwise push its date below the dates beside it. */
  margin-top: auto;
  padding-top: 4px;
}

.lab-tile-empty {
  border: 1.5px dashed var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* One quiet card when nothing is logged yet, instead of a grid of
   per-marker "not logged" tiles */
.lab-tile-empty-combined {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 18px;
  min-height: 0;
}

.lab-tile-empty-combined .lab-tile-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
}

.lab-tile-empty span {
  font-size: 12px;
  color: var(--mid-gray);
}

/* ============================================================
   CYCLE SCREEN
============================================================ */

/* Day strip */
.day-strip-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 12px;
  scrollbar-width: none;
}

.day-strip-wrap::-webkit-scrollbar { display: none; }

.day-strip {
  display: flex;
  gap: 6px;
  width: max-content;
  padding-bottom: 4px;
}

.day-pill {
  width: 44px;
  border-radius: 22px;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.day-pill.active {
  background: var(--terra);
}

.day-pill.today:not(.active) {
  background: var(--terra-pale);
}

.day-pill-label {
  font-size: 10px;
  color: var(--mid-gray);
  font-weight: 500;
}

.day-pill.active .day-pill-label,
.day-pill.active .day-pill-num {
  color: var(--white);
}

.day-pill.today:not(.active) .day-pill-label,
.day-pill.today:not(.active) .day-pill-num {
  color: var(--terra);
}

.day-pill-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal);
}

/* Event dots under a day pill: one per event type present that day. The row
   keeps a fixed height so pills stay vertically aligned on dot-free days. */
.day-pill-dots {
  display: flex;
  gap: 3px;
  height: 5px;
  align-items: center;
  margin-top: 1px;
}
.day-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terra);
}
/* Colors mirror the schedule rows: med = terra, appt/scan/task = gold. Cycle
   milestones (CD1, retrieval/transfer, funnel reports) have no schedule row, so
   they keep a deeper terra to stand out as pivotal days. */
.day-pill-dot.milestone { background: var(--terra-dark); }
.day-pill-dot.appt      { background: var(--gold); }
.day-pill-dot.scan      { background: var(--gold); }
.day-pill-dot.med       { background: var(--terra); }
.day-pill-dot.task      { background: var(--gold); }
/* On the selected (terracotta) pill, colored dots wouldn't read — show them white. */
.day-pill.active .day-pill-dot { background: var(--white); }

/* Strip header (label + History toggle) */
.strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 8px;
}
.strip-head-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: 0.02em;
}
.hist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--terra);
  background: var(--terra-pale);
  border: 1px solid var(--terra-bg);
  border-radius: 16px;
  padding: 5px 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hist-toggle svg { width: 13px; height: 13px; }
.hist-toggle.active { background: var(--terra); color: var(--white); border-color: var(--terra); }

/* History event list */
.hist-sheet {
  margin: 0 24px 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 6px 6px 8px;
  box-shadow: 0 8px 22px rgba(40,30,20,0.07);
  display: none;
}
.hist-sheet.open { display: block; }
.hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
}
.hist-head-title { font-size: 13px; font-weight: 650; color: var(--charcoal); }
.hist-sort {
  font-size: 11px;
  font-weight: 600;
  color: var(--terra);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.hist-sort svg { width: 12px; height: 12px; }
.hist-list { position: relative; padding: 4px 8px 2px; }
.hist-rail {
  position: absolute;
  left: 25px; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--terra-bg);
}
.hist-row {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 9px 8px;
  border-radius: 12px;
  cursor: pointer;
  align-items: flex-start;
  -webkit-tap-highlight-color: transparent;
}
.hist-row:active { background: var(--terra-pale); }
.hist-row.selected { background: var(--terra-pale); }
.hist-node {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  margin-left: 3px;
  background: var(--white);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--border);
  z-index: 1;
}
.hist-node.milestone { background: var(--terra-dark); box-shadow: 0 0 0 1px var(--terra-dark); }
/* Scheduled-ahead days: hollow ring — not yet logged. No dimming; the date says it's ahead. */
.hist-node.future { background: var(--white); box-shadow: 0 0 0 1.5px var(--terra-light); }
/* Today: the single emphasized point on the rail. */
.hist-node.today { background: var(--terra); box-shadow: 0 0 0 3px var(--terra-pale), 0 0 0 4px var(--terra); }
.hist-body { flex: 1; min-width: 0; }
.hist-daymeta { display: flex; align-items: baseline; gap: 8px; }
.hist-cd { font-size: 13px; font-weight: 700; color: var(--charcoal); }
.hist-date { font-size: 11.5px; color: var(--mid-gray); font-weight: 500; }
.hist-today-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terra);
  background: var(--terra-pale);
  border-radius: 6px;
  padding: 1px 5px;
}
.hist-headline { font-size: 13.5px; font-weight: 600; color: var(--charcoal); margin-top: 3px; }
.hist-headline.milestone { color: var(--terra-dark); }
.hist-types { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 5px; }
.hist-type { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--mid-gray); }
.hist-type i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.hist-chev { color: var(--terra-light); flex-shrink: 0; align-self: center; }
.hist-chev svg { width: 16px; height: 16px; }

/* Medication events */
.med-event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.med-event:last-child { border-bottom: none; }

.med-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}

.med-check.done {
  background: var(--terra);
  border-color: var(--terra);
}

.med-check.done::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) translate(1px, -1px);
}

.med-text strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
}

.med-text span {
  font-size: 12px;
  color: var(--mid-gray);
}

/* Today's Schedule Card */
.today-sched-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 4px;
}

.today-sched-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.today-sched-date {
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
}

.today-sched-cd {
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
}

.btn-log-event {
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
}

.completed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--light-gray);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.completed-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
}

.sched-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.sched-row:last-child { border-bottom: none; }

.sched-row-confirmed {
  opacity: 0.55;
  background: var(--light-gray);
}

.sched-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--terra);
  flex-shrink: 0;
}

.sched-indicator.patch {
  background: none;
  border: 2px solid var(--terra);
  width: 10px;
  height: 10px;
  box-sizing: border-box;
}

.sched-indicator.appt {
  background: var(--gold);
}

.sched-indicator.done {
  background: var(--terra);
}

.sched-body {
  flex: 1;
  min-width: 0;
}

.sched-body-tap {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sched-edit-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--light-gray);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--mid-gray);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}

.sched-edit-btn:active {
  background: var(--terra-light);
  color: var(--terra);
  border-color: var(--terra-light);
}

/* Beta hCG trend — the interpretation renders as a collapsible Avela
   Insight (see renderBetaTrendPanel). .trend-hint is the one-draw pending
   line; .trend-caveat is the muted timing note inside the insight. The
   insight stays neutral by design: no red, no gold, no icons. */
.trend-hint {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--mid-gray);
  border-top: 1px solid var(--border);
}

.trend-caveat { font-size: 11px; color: var(--mid-gray); margin-top: 8px; }

/* Two-week-wait capture rows (renderTriggerCard / renderBetaCard). Slim,
   self-bordered rows — no outer card wrapper — one action or value each. */
.tww-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 8px;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
}
.tww-row:last-child { margin-bottom: 0; }
.tww-row-main { flex: 1; min-width: 0; }
.tww-row-label {
  font-size: 14px; font-weight: 600; color: var(--charcoal);
  display: flex; align-items: center; gap: 7px;
}
.tww-row-cap { font-size: 12px; color: var(--mid-gray); margin-top: 2px; line-height: 1.4; }
.tww-row-cap.warm { color: var(--terra-dark); }
.tww-mini {
  font-size: 12.5px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
  padding: 6px 13px; border-radius: 16px; cursor: pointer;
  background: var(--white); border: 1px solid var(--border); color: var(--charcoal);
  font-family: var(--font-body); -webkit-tap-highlight-color: transparent;
}
.tww-mini.hero { background: var(--terra); border-color: var(--terra); color: #fff; }
.tww-linky {
  font-size: 12px; font-weight: 600; color: var(--light); flex-shrink: 0;
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.tww-check {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: var(--sage); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Home TWW orientation strip (buildTwwHomeStrip): a slim band beneath the
   phase banner. Filled state = countdown + progress bar; prompt state adds
   .prompt for the dashed terracotta "set your beta date" ask. */
.tww-strip {
  margin-top: 14px; padding: 12px 14px;
  background: var(--terra-pale); border-radius: 12px;
}
.tww-strip.prompt {
  display: flex; align-items: center; gap: 12px;
  background: none; border: 1px dashed var(--terra);
}
.tww-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tww-strip-lead { font-size: 13px; font-weight: 600; color: var(--terra-dark); }
.tww-strip.prompt .tww-strip-lead { flex: 1; min-width: 0; }
.tww-strip-meta { font-size: 12px; color: var(--mid-gray); flex-shrink: 0; }
.tww-strip-bar {
  margin-top: 9px; height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(176, 86, 62, 0.18);
}
.tww-strip-fill { height: 100%; border-radius: 3px; background: var(--terra); }

/* Home TWW entry nudge (buildTwwNudge): a one-time slim line above the fold
   that points at the Outcome capture rows. Auto-retires once both the beta
   date and the trigger question are answered; the x honors an early manual
   dismissal (localStorage). */
.tww-nudge {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding: 11px 12px 11px 14px;
  background: var(--terra-pale); border-radius: 12px;
}
.tww-nudge-body {
  flex: 1; text-align: left; background: none; border: none; padding: 0;
  cursor: pointer; font-family: var(--font-body);
  font-size: 12.5px; line-height: 1.45; color: var(--terra-dark);
}
.tww-nudge-go { font-weight: 700; white-space: nowrap; }
.tww-nudge-x {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--mid-gray); padding: 0 2px;
}

/* Home onboarding nudge carousel (buildHomeNudges): a Function-style
   horizontal rail of blush cards that backfill history / labs / the current
   round, each gated independently (spec docs/onboarding-nudge-backfill-spec
   §2.4). --acc/--acc-wash are scoped to this component so blush doesn't
   repaint the terracotta rest of the app. Cards drop off as their data
   arrives; :empty collapses the whole band when none remain. */
.home-nudges { --acc: #BC7266; --acc-wash: #F7EAE6; margin-top: 16px; margin-bottom: 20px; }
.home-nudges:empty { display: none; }
.hn-head { padding: 0 2px; margin-bottom: 10px; }
.hn-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mid);
}
.hn-title b { color: var(--acc); font-weight: 700; }
.hn-rail {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 0 2px 2px; margin: 0 -2px;
}
.hn-rail::-webkit-scrollbar { display: none; }
.hn-card {
  flex: 0 0 84%; scroll-snap-align: center; position: relative;
  background:
    radial-gradient(120% 80% at 85% -15%, var(--acc-wash) 0%, rgba(255,255,255,0) 62%),
    var(--white);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 16px 16px; box-shadow: 0 3px 12px rgba(80,60,40,.05);
  display: flex; flex-direction: column; min-height: 186px;
}
.hn-card.solo { flex-basis: 100%; }
.hn-glyph {
  width: 38px; height: 38px; border-radius: 11px; background: var(--acc);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.hn-glyph svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hn-card-t { font-family: var(--font-display); font-size: 18px; color: var(--ink); line-height: 1.18; padding-right: 22px; }
.hn-card-s { font-size: 12px; color: var(--mid); margin-top: 6px; line-height: 1.5; flex: 1; }
.hn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 13px; padding: 11px; border: none; border-radius: 10px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  cursor: pointer; color: #fff; background: var(--acc);
  -webkit-tap-highlight-color: transparent;
}
.hn-cta svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hn-alt {
  margin-top: 8px; background: none; border: none; font-family: var(--font-body);
  font-size: 12px; font-weight: 600; color: var(--mid); cursor: pointer;
  text-align: center; -webkit-tap-highlight-color: transparent;
}
.hn-x {
  position: absolute; top: 12px; right: 12px; background: none; border: none;
  cursor: pointer; font-size: 18px; line-height: 1; color: var(--light);
  padding: 0 2px; -webkit-tap-highlight-color: transparent;
}
.hn-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.hn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: all .2s; }
.hn-dot.on { background: var(--acc); width: 18px; border-radius: 3px; }

/* Backfill add-cycle sheet (renderBackfillSheet): a streamlined front-end
   over historyCycleState + saveHistoryCycle opened from the history nudge.
   Terracotta (full app chrome, not a blush nudge). Vocab mirrors
   renderHistoryCycleModal; ported from the mockup's add-cycle sheet. */
.bf-title { font-family: var(--font-display); font-size: 21px; color: var(--ink); }
.bf-sub { font-size: 12.5px; color: var(--mid); margin-top: 3px; line-height: 1.45; }
.bf-body { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.bf-field-l { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mid); margin-bottom: 9px; }
.bf-field-opt { color: var(--light); font-weight: 500; text-transform: none; letter-spacing: 0; }
.bf-type-row { display: flex; gap: 8px; }
.bf-type-btn { flex: 1; padding: 12px 4px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); cursor: pointer; font-family: var(--font-body); text-align: center; font-size: 13.5px; font-weight: 600; color: var(--charcoal); -webkit-tap-highlight-color: transparent; }
.bf-type-btn.on.retrieval { border-color: var(--terra); background: var(--terra-pale); color: var(--terra-dark); }
.bf-type-btn.on.FET { border-color: var(--sage); background: var(--sage-bg); color: var(--sage); }
.bf-type-btn.on.iui { border-color: var(--gold); background: var(--gold-bg); color: #8a6d2f; }
.bf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-chip { padding: 9px 14px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--white); font-size: 13px; font-weight: 600; color: var(--mid); cursor: pointer; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; }
.bf-chip.on { border-color: var(--terra); background: var(--terra-pale); color: var(--terra-dark); }
.bf-chip.exact { color: var(--terra-dark); border-style: dashed; border-color: var(--terra-light); }
.bf-seg2 { display: flex; gap: 8px; margin-bottom: 14px; }
.bf-seg2 button { flex: 1; padding: 10px 4px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--white); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--mid); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bf-seg2 button.on { border-color: var(--terra); background: var(--terra-pale); color: var(--terra-dark); }
.bf-funnel { display: flex; gap: 6px; }
.bf-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bf-cell input { width: 100%; text-align: center; font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--charcoal); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 2px; background: var(--white); }
.bf-cl { font-size: 9.5px; font-weight: 600; color: var(--mid); text-transform: uppercase; letter-spacing: .02em; text-align: center; line-height: 1.2; }
.bf-pgt-toggle { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--charcoal); cursor: pointer; }
.bf-pgt-toggle input { width: 16px; height: 16px; accent-color: var(--terra); }
.bf-pgt-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.bf-pgt-grid .bf-cell input { font-size: 16px; }
.bf-out-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bf-out-btn { padding: 11px 8px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--white); cursor: pointer; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--charcoal); text-align: center; -webkit-tap-highlight-color: transparent; }
.bf-out-btn.on { border-color: var(--terra); background: var(--terra-pale); color: var(--terra-dark); }
.bf-out-btn.on.good { border-color: var(--sage); background: var(--sage-bg); color: var(--sage); }
.bf-out-btn.on.bad { border-color: var(--error); background: var(--error-bg); color: var(--error); }
.bf-grade-row { display: flex; gap: 8px; }
.bf-grade-in { flex: 1; min-width: 0; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: 14px; background: var(--white); color: var(--charcoal); }
.bf-grade-day { flex: 0 0 84px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 8px; font-size: 13.5px; font-family: var(--font-body); color: var(--charcoal); background: var(--white); cursor: pointer; }
.bf-grade-add { background: var(--terra); color: #fff; border: none; border-radius: 10px; padding: 0 16px; font-weight: 600; font-family: var(--font-body); cursor: pointer; }
.bf-help { font-size: 12.5px; color: var(--light); }
.bf-foot { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.bf-save { width: 100%; padding: 14px; border: none; border-radius: 12px; background: var(--terra); color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; }
.bf-save:disabled { opacity: .45; pointer-events: none; }
.bf-save-again { width: 100%; padding: 2px; border: none; background: none; color: var(--terra-dark); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; }
.bf-save-again:disabled { opacity: .4; pointer-events: none; }

/* Beta hCG — one unified card (renderBetaCard): the scheduled draw as a
   tinted anchor on top, logged results filing beneath it in the same card,
   the Avela Insight sitting separately underneath. Replaces the tall 3-line
   .sched-row stack + the earlier multi-container split. */
.beta-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
/* Tinted anchor: the scheduled draw / the ask to schedule one. */
.beta-draw {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--terra-pale);
}
.beta-draw-main { flex: 1; min-width: 0; }
.beta-draw-title { font-size: 15px; font-weight: 700; color: var(--charcoal); letter-spacing: -0.01em; }
.beta-draw-sub { font-size: 12px; color: var(--mid-gray); margin-top: 2px; }
.beta-draw-sub.warm { color: var(--terra-dark); font-weight: 600; }
/* Default .tww-linky grey is too faint on the terra tint — lift for contrast. */
.beta-draw .tww-linky { color: var(--mid-gray); }
/* Logged result — one line: dot · label · muted date, value emphasised. */
.beta-result {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.beta-result .sched-indicator { width: 7px; height: 7px; }
.beta-result-main {
  flex: 1; min-width: 0; display: flex; align-items: baseline;
  gap: 9px; flex-wrap: wrap;
}
.beta-result-label { font-size: 14px; font-weight: 650; color: var(--charcoal); }
.beta-result-date { font-size: 12px; color: var(--mid-gray); }
.beta-result-val {
  font-size: 16px; font-weight: 750; color: var(--terra-dark);
  white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.beta-result-val .u { font-size: 11px; font-weight: 600; color: var(--mid-gray); margin-left: 3px; }
.beta-edit {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: none; border: none; cursor: pointer; color: var(--mid-gray);
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; transition: background 0.15s, color 0.15s;
}
.beta-edit:active { background: var(--terra-light); color: var(--terra); }

.sched-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
}

.sched-sub {
  font-size: 12px;
  color: var(--mid-gray);
  margin-top: 2px;
}

.sched-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.sched-time {
  font-size: 12px;
  color: var(--mid-gray);
  white-space: nowrap;
}

.btn-confirm {
  font-size: 12px;
  font-weight: 500;
  color: var(--charcoal);
  background: var(--light-gray);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
}

/* Tap target to un-confirm a completed item. It's a real button, so the
   whole confirmed-state label reverts on tap/Enter without colliding with
   the row's Edit button or a stray scroll-tap on the row itself. */
.confirmed-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--terra);
  font-weight: 500;
  font-family: var(--font-body);
  background: none;
  border: none;
  padding: 3px 4px;
  margin: -3px -4px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}

.confirmed-label svg { opacity: 0.7; transition: transform 0.3s ease, opacity 0.15s; }
.confirmed-label:hover { background: var(--terra-pale); }
.confirmed-label:hover svg { opacity: 1; transform: rotate(-90deg); }
.confirmed-label:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .confirmed-label:hover svg { transform: none; }
}

/* "Ended" meds reflect active=false on the record, not a confirm-state, so
   they are not reversible here — keep the label look but strip interactivity. */
.confirmed-label-static { cursor: default; padding: 0; margin: 0; }
.confirmed-label-static:hover { background: none; }

.sched-empty {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--mid-gray);
  text-align: center;
  line-height: 1.5;
}

/* Slim empty state: on a genuinely empty today (no active items, nothing
   completed) the full card collapses to a single reassurance bar that keeps
   the "nothing missed" signal plus a one-tap add, without the empty-box chrome. */
.sched-slim {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 15px;
  margin-bottom: 4px;
}
.slim-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terra-pale);
}
.slim-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
}
.slim-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--mid-gray);
  margin-top: 1px;
}
.slim-add {
  font-size: 13px;
  font-weight: 600;
  color: var(--terra);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 2px;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

/* Between cycles idle — the primary CTA, so it sits above the retrospective
   trend cards rather than below them; kept compact for that reason. */
/* Between-cycles CTA — a slim banner, not a tall empty-state. Between cycles
   is a resting phase, so the comparison below is the hero; this stays a
   confident, compact forward action rather than an "absence" card. */
.between-cycles-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--blush);
  border-radius: 14px;
  margin: 0 0 8px;
}

.bc-cta-txt { flex: 1; min-width: 0; }

.bc-cta-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.2;
}

.bc-cta-sub {
  font-size: 12px;
  color: var(--mid-gray);
  line-height: 1.4;
  margin-top: 3px;
}

/* ============================================================
   CYCLE PHASE BANNER  (replaces page-header-dark on cycle screen)
============================================================ */
/* Phase banners (home + all cycle views) — one light treatment: no dark hero
   card, content sits flush on the cream page aligned under the screen title,
   tag in terracotta, status in dark serif. Content and logic are unchanged. */
.cycle-phase-banner {
  background: none;
  padding: 0;
  margin-bottom: 16px;
}

.phase-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.phase-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 600;
  margin-bottom: 6px;
}

.phase-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--charcoal);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 4px;
}

.phase-date-sub {
  font-size: 11px;
  color: var(--mid-gray);
  margin-bottom: 6px;
}

.phase-counter {
  text-align: center;
  flex-shrink: 0;
  padding-left: 12px;
}

.phase-counter-num {
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1;
}

.phase-counter-label {
  font-size: 10px;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

.phase-chip-dark {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  padding: 5px 13px;
  border-radius: 20px;
  background: var(--terra-pale);
  color: var(--terra);
  font-weight: 500;
  white-space: nowrap;
}

.phase-chip-dark strong { color: var(--terra); font-weight: 700; }

/* Tighten top gap between banner and phase bar on cycle screen */
/* Cycle insight card — two-zone pattern matching prototype */
.ci-card {
  background: var(--white);
  border: 1.5px solid var(--terra-bg);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.ci-hd {
  background: var(--terra-bg);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ci-dot {
  width: 20px;
  height: 20px;
  background: var(--terra);
  border-radius: 50%;
  flex-shrink: 0;
}

.ci-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--terra);
  letter-spacing: 0.04em;
}

.ci-body {
  padding: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--charcoal);
}

/* Retrieval funnel card */
.funnel-card {
  background: var(--white);
  border: 1.5px solid var(--terra-bg);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}

/* Funnel stages as horizontal bars: label · proportional track · count ·
   step retention %. The bar width encodes each stage's count against the
   first logged stage, so the narrowing reads at a glance; the % is the
   plain share kept from the prior stage (no arrow — a bare "80%" can't be
   misread as "down 80%", which matters for anxious readers). */
.funnel-bars { padding: 6px 0; }
.funnel-bar-row {
  display: grid;
  grid-template-columns: 84px 1fr 34px 46px;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
}
.funnel-bar-lbl {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--charcoal);
}
.funnel-bar-track {
  height: 8px;
  min-width: 6px;
  border-radius: 999px;
  background: var(--terra-bg);
}
.funnel-bar-track.empty { background: var(--line-soft); opacity: 0.7; }
.funnel-bar-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--terra);
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.funnel-bar-num.empty { color: var(--mid-gray); }
.funnel-bar-pct {
  font-size: 13px;
  color: var(--mid-gray);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Ploidy tiles (euploid / aneuploid / mosaic) below the funnel. Euploid
   carries the sage "good" tint when present; aneuploid takes the gold
   "watch" tint only when >0 (gold-bg means aneuploid, per the palette
   note); everything else stays neutral so the card reads calm. */
.funnel-ploidy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 16px 2px;
  border-top: 1px solid var(--terra-bg);
}
.funnel-ploidy-tile {
  background: var(--sand);
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
}
.funnel-ploidy-tile--euploid { background: var(--sage-bg); }
.funnel-ploidy-tile--aneuploid { background: var(--gold-bg); }
.funnel-ploidy-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--mid-gray);
  line-height: 1;
}
.funnel-ploidy-tile--euploid .funnel-ploidy-num { color: var(--sage); }
.funnel-ploidy-tile--aneuploid .funnel-ploidy-num { color: var(--gold); }
.funnel-ploidy-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mid-gray);
  margin-top: 6px;
}

.funnel-row {
  border-top: 1px solid var(--terra-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}

.funnel-pgt-label { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.funnel-pgt-btns { display: flex; gap: 6px; }

.funnel-section-label {
  padding: 10px 16px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mid-gray);
  font-weight: 600;
  border-top: 1px solid var(--terra-bg);
}

.funnel-pills {
  padding: 4px 16px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ============================================================
   SCAN CARDS — Follicle growth + Lining
============================================================ */
.scan-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}

.scan-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}

.scan-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
}

.scan-hd-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scan-add-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--terra);
  background: var(--terra-pale);
  border: none;
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}

.scan-card-body { padding: 14px 16px; }

.scan-empty {
  font-size: 13px;
  color: var(--mid-gray);
  line-height: 1.55;
}

/* Follicle compact rows */
.follicle-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.follicle-summary-row:last-of-type { border-bottom: none; }
.follicle-ovary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mid-gray);
  min-width: 38px;
}
.follicle-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  margin: 0 10px;
}
.follicle-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  flex-shrink: 0;
}
.follicle-dot.mature { background: var(--terra); color: #fff; }
.follicle-dot.developing { background: var(--light-gray); border: 1px solid var(--border); color: var(--mid-gray); }
.follicle-mature-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--terra);
  white-space: nowrap;
}
.follicle-total-note {
  font-size: 11px;
  color: var(--mid-gray);
}
.follicle-key-inline {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  font-size: 11px;
  color: var(--mid-gray);
}
.follicle-key-inline span { display: flex; align-items: center; gap: 4px; }
.fki-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Lining snapshot */
.lining-main {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: 3px;
}

.lining-detail {
  font-size: 12px;
  color: var(--mid-gray);
  margin-bottom: 6px;
}

.lining-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.lining-trend {
  font-size: 12px;
  color: var(--mid-gray);
  line-height: 1.6;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* Pattern glyph in the lining at-a-glance line (matches the chart's key) */
.lin-pat-dot {
  width: 11px; height: 11px; overflow: visible;
  vertical-align: -1px; margin-right: 5px; flex-shrink: 0;
}

/* Merged Lining card: a labelled reveal row opens the trend graph in place */
.lining-reveal-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 10px; margin-top: 12px; padding: 12px 12px;
  background: var(--terra-pale, #F5E9E5); border: none; border-radius: 10px;
  color: var(--terra); font-family: var(--font-body);
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.lining-reveal-label { display: flex; align-items: center; gap: 8px; }
.lining-reveal-caret { transition: transform 0.22s ease; flex-shrink: 0; }
.lining-reveal-row.open .lining-reveal-caret { transform: rotate(180deg); }
.lining-expand-body { margin-top: 8px; }

/* ============================================================
   LABS SCREEN
============================================================ */

.labs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.labs-tile {
  background: var(--light-gray);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.labs-tile:active { background: var(--terra-light); }

.labs-tile-category {
  font-size: 10px;
  font-weight: 600;
  color: var(--terra);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.labs-tile-marker {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.labs-tile-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal);
}

.labs-tile-meta {
  font-size: 11px;
  color: var(--mid-gray);
  margin-top: 4px;
}

.labs-tile-empty {
  border: 1.5px dashed var(--border);
  background: var(--white);
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.labs-tile-empty .labs-tile-value {
  font-size: 13px;
  color: var(--mid-gray);
  font-family: var(--font-body);
  font-weight: 400;
}

/* ============================================================
   LAB MARKER CARDS (lmc-* system)
============================================================ */

.lab-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lmc-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s;
}

.lmc-card:active { border-color: var(--terra); }

.lmc-card-empty {
  border: 1.5px dashed var(--border);
  background: var(--white);
  min-height: 82px;
}

.lmc-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 2px;
}

.lmc-date { font-size: 10px; color: var(--mid-gray); margin-bottom: 4px; }

.lmc-value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  margin: 4px 0 2px;
}

.lmc-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--charcoal);
}

.lmc-unit { font-size: 12px; color: var(--mid-gray); }

.lmc-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 2px;
}

.lmc-badge-normal  { background: var(--sage-bg); color: var(--sage); }
.lmc-badge-watch   { background: #FBF3E4; color: var(--gold); }
.lmc-badge-concern { background: var(--error-bg); color: var(--error); }

.lmc-context {
  font-size: 11px;
  color: var(--mid-gray);
  line-height: 1.45;
  margin: 8px 0 6px;
}

/* Trend chart */
.lmc-trend { margin-bottom: 6px; }
.trend-svg { width: 100%; display: block; overflow: visible; }
.trend-x-labels { display: flex; justify-content: space-between; margin-top: 2px; }
.trend-x-label { font-size: 9px; color: var(--mid-gray); }

/* Between-cycles retrospective trend cards (bt-*) */
.bt-history-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mid-gray); margin: 20px 0 12px; }
.bt-seg { display: flex; background: var(--sand); border-radius: 10px; padding: 3px; margin-bottom: 4px; }
.bt-seg-opt { flex: 1; text-align: center; padding: 9px 0; font-size: 12px; font-weight: 700; color: var(--mid-gray); background: none; border: none; border-radius: 8px; cursor: pointer; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; }
.bt-seg-opt.active { background: var(--white); color: var(--terra-dark); box-shadow: 0 1px 3px rgba(44,40,34,.12); }
.bt-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mid-gray); margin: 18px 0 2px; }
.bt-sum { font-size: 11px; color: var(--terra); font-weight: 600; }
.bt-lead { font-size: 12px; color: var(--mid-gray); line-height: 1.55; margin: 2px 0 16px; }
.bt-row { padding: 2px 0 4px; -webkit-tap-highlight-color: transparent; }
.bt-row + .bt-row { margin-top: 15px; }
.bt-row[onclick] { cursor: pointer; }
.bt-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.bt-when { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bt-proto { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 600; color: var(--terra-dark); background: var(--terra-pale); border: 1px solid var(--terra-bg); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.bt-chip { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a6d2a; background: var(--gold-bg); border: 1px solid #E7D5A6; border-radius: 999px; padding: 2px 7px; vertical-align: middle; }
.bt-val { font-size: 12.5px; color: var(--mid-gray); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-val b { color: var(--terra-dark); font-weight: 700; font-size: 14px; }
.bt-val--muted { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--mid-gray); font-weight: 600; }
.bt-track { height: 12px; background: var(--sand); border-radius: 7px; overflow: hidden; }
.bt-track--dashed { background-image: repeating-linear-gradient(90deg, var(--mid-gray) 0 4px, transparent 4px 9px); opacity: .35; }
.bt-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--terra-light), var(--terra)); }
.bt-fill--gold { background: linear-gradient(90deg, #D9C08A, var(--gold)); }
.bt-fill--cancelled { background: repeating-linear-gradient(45deg, var(--terra-bg), var(--terra-bg) 4px, var(--sand) 4px, var(--sand) 8px); }
.bt-hint { font-size: 10.5px; color: var(--terra-light); margin-top: 6px; font-weight: 600; }
.bt-row.bt-open .bt-hint { display: none; }
.bt-detail { max-height: 0; overflow: hidden; transition: max-height .28s ease, opacity .2s; opacity: 0; }
.bt-row.bt-open .bt-detail { max-height: 200px; opacity: 1; margin-top: 9px; }
.bt-detail-inner { padding: 11px 13px; background: var(--blush); border-radius: 10px; }
.bt-funnel { display: flex; align-items: stretch; gap: 2px; }
.bt-stage { flex: 1; text-align: center; padding: 3px 2px; }
.bt-num { display: block; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.bt-lab { display: block; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--mid-gray); margin-top: 2px; }
.bt-stage--euploid .bt-num { color: var(--terra); }
.bt-stage--euploid .bt-lab { color: var(--terra-dark); font-weight: 700; }
.bt-arrow { align-self: center; color: var(--terra-light); font-size: 13px; line-height: 1; }
.bt-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--terra-bg); font-size: 11px; color: var(--mid-gray); font-variant-numeric: tabular-nums; display: flex; gap: 14px; }
.bt-fo-cap { font-size: 10.5px; color: var(--mid-gray); margin: 3px 0 8px; }
.bt-explainer { font-size: 11.5px; color: var(--mid-gray); line-height: 1.5; margin: 0 0 16px; padding: 9px 11px; background: var(--sand); border-radius: 9px; }
.bt-explainer b { color: var(--ink); font-weight: 700; }

/* Cross-cycle "Compare" — one metric at a time, bars across cycles, with a
   tap-reveal definition that replaces the always-on explainer. */
.bt-compare { background: var(--sand); border-radius: 11px; padding: 13px 14px 14px; margin: 8px 0 16px; }
.bt-cmp-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--terra-dark); margin-bottom: 11px; }
.bt-cmp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bt-cmp-pill { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; border: 1px solid var(--line); background: var(--white); color: var(--mid-gray); padding: 6px 10px; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bt-cmp-pill.active { background: var(--terra); border-color: var(--terra); color: #fff; }
.bt-cmp-bars { display: flex; flex-direction: column; gap: 11px; }
.bt-cmp-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 9px; align-items: center; }
.bt-cmp-when { font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 1px; }
.bt-cmp-proto { font-size: 10px; font-weight: 500; color: var(--mid-gray); font-variant-numeric: normal; }
.bt-cmp-val { font-size: 12.5px; font-weight: 700; color: var(--terra-dark); font-variant-numeric: tabular-nums; text-align: right; min-width: 30px; }
.bt-cmp-cap { font-size: 11.5px; color: var(--mid-gray); line-height: 1.5; margin-top: 13px; }
.bt-cmp-reveal { color: var(--terra); font-weight: 600; border-bottom: 1px dotted var(--terra-light); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bt-cmp-mean { margin-top: 6px; display: none; }
.bt-cmp-mean.open { display: block; }
/* Logged outcome shown inline in the beta row (the result the betas point
   to); matches the trend pill's footprint so the row stays balanced. */
.bt-beta-outcome { flex-shrink: 0; }
/* Beta hCG series — every draw in order per transfer; the rise is the signal. */
.bt-beta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bt-beta-row + .bt-beta-row { margin-top: 12px; }
.bt-beta-draws { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
.bt-beta-draw { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.bt-beta-draw b { font-size: 14px; font-weight: 700; color: var(--terra-dark); font-variant-numeric: tabular-nums; }
.bt-beta-draw em { font-size: 9px; font-style: normal; color: var(--mid-gray); margin-top: 1px; }
.bt-beta-arr { color: var(--terra-light); font-size: 12px; }
.bt-beta-trend { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.bt-beta-trend--pos { background: var(--sage-bg); color: #3f5a3c; }
.bt-beta-trend--neg { background: var(--sand); color: var(--mid-gray); }
.bt-beta-empty { font-size: 11.5px; color: var(--mid-gray); font-style: italic; }
.bt-scan-cap { font-size: 10.5px; color: var(--mid-gray); margin: 0 0 9px; }
.bt-scan-cap b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.bt-stage--mii .bt-num { color: var(--terra-dark); }
.bt-stage--mii .bt-lab { color: var(--terra-dark); font-weight: 700; }
.bt-cancel-note { font-size: 11.5px; color: #5f524b; line-height: 1.58; }
.bt-cancel-note b { color: var(--ink); font-weight: 700; }
.bt-insight { margin-top: 18px; }
.bt-insight:empty { margin-top: 0; }
.bt-insight-card { background: var(--wash); border-radius: 10px; padding: 13px 15px; }
.bt-insight-card p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.62; color: #4a3d36; }
.bt-insight-card p:last-child { margin-bottom: 0; }
.bt-insight-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--terra-dark); margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.bt-insight-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); flex-shrink: 0; }
.bt-insight-label--toggle { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; margin-bottom: 0; }
.bt-insight-label-txt { flex: 1; }
.bt-insight-chev { color: var(--terra-light); transition: transform .2s ease; flex-shrink: 0; }
.bt-insight-chev--closed { transform: rotate(-90deg); }
.bt-insight-body { overflow: hidden; transition: max-height .28s ease, opacity .2s; max-height: 2000px; opacity: 1; margin-top: 7px; }
.bt-insight-body.closed { max-height: 0; opacity: 0; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .bt-insight-body, .bt-insight-chev { transition: none; } }

/* Two-list block: what changed (interventions) / how it compared (response) */
.bt-kv { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--terra-bg); }
.bt-kv + .bt-kv { margin-top: 11px; padding-top: 0; border-top: none; }
.bt-kv-hd { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--terra-dark); margin-bottom: 9px; }
.bt-kv-row { display: flex; align-items: baseline; gap: 10px; font-size: 12px; padding: 2px 0; }
.bt-kv-row + .bt-kv-row { margin-top: 2px; }
.bt-kv-k { color: var(--mid-gray); min-width: 104px; font-weight: 600; }
.bt-kv-v { color: var(--ink); font-variant-numeric: tabular-nums; }
.bt-kv-v .bt-kv-arrow { color: var(--terra-light); padding: 0 3px; }
.bt-kv-v .bt-kv-sub { color: var(--mid-gray); font-weight: 500; font-size: 10.5px; margin-left: 6px; font-variant-numeric: normal; }
.bt-kv-row--held .bt-kv-v { color: var(--mid-gray); font-weight: 500; } /* context, not a change */

/* Cross-cycle pipeline-consistency range bands */
.bt-stage { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--terra-bg); }
.bt-stage-hd { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--terra-dark); margin-bottom: 2px; }
.bt-stage-sub { font-size: 10.5px; color: var(--mid-gray); margin-bottom: 13px; line-height: 1.45; }
.bt-stage-row { display: grid; grid-template-columns: 82px 1fr 88px; gap: 11px; align-items: center; margin-bottom: 12px; }
.bt-stage-row:last-child { margin-bottom: 0; }
.bt-stage-name { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.bt-stage-track { position: relative; height: 10px; background: var(--sand); border-radius: 5px; }
.bt-stage-track::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
.bt-stage-band { position: absolute; top: 0; bottom: 0; background: var(--terra-bg); border-radius: 5px; min-width: 6px; }
.bt-stage-row--varies .bt-stage-band { background: linear-gradient(90deg, var(--terra-light), var(--terra)); }
.bt-stage-dot { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--terra-dark); transform: translate(-50%, -50%); border: 1.5px solid var(--wash); }
.bt-stage-meta { text-align: right; }
.bt-stage-range { font-size: 11.5px; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.bt-stage-tag { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }
.bt-stage-tag--holds { color: var(--mid-gray); }
.bt-stage-tag--varies { color: var(--terra-dark); font-weight: 700; }
.bt-stage-axis { display: flex; justify-content: space-between; font-size: 9px; color: var(--mid-gray); margin-top: 2px; padding-left: 93px; padding-right: 99px; }
.bt-stage-foot { font-size: 10.5px; color: var(--mid-gray); margin-top: 11px; line-height: 1.5; }

/* Cross-cycle response curves */
.rc-body { padding: 14px 16px 16px; }
.rc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 0 4px; }
.rc-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mid); }
.rc-legend-swatch { width: 16px; height: 0; border-top: 2.5px solid; border-radius: 2px; }
.rc-legend-swatch.dashed { border-top-style: dashed; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 0 2px; }
.rc-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-family: var(--font-body);
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white); color: var(--mid);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rc-chip .rc-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.rc-chip.active { border-color: transparent; color: var(--charcoal); font-weight: 500; }
.rc-chip.active.c1 { background: var(--gold-bg); }
.rc-chip.active.c1 .rc-chip-dot { background: var(--gold); }
.rc-chip.active.c2 { background: var(--terra-pale); }
.rc-chip.active.c2 .rc-chip-dot { background: var(--terra-light); }
.rc-chip.current { background: var(--terra); color: var(--white); border-color: transparent; font-weight: 500; cursor: default; }
.rc-chip.current .rc-chip-dot { background: var(--white); }
.rc-chips-hint { font-size: 11px; color: var(--light); padding: 2px 0 0; }
.rc-panel { margin-top: 10px; }
.rc-panel-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--light); margin-bottom: 2px; display: flex; justify-content: space-between;
}
.rc-panel-label .rc-unit { font-weight: 400; text-transform: none; letter-spacing: 0; }
.rc-svg { width: 100%; display: block; overflow: visible; }
.rc-readout { margin-top: 12px; background: var(--terra-pale); border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5; }
.rc-readout b { color: var(--terra-dark); }
.rc-readout .rc-vs { color: var(--mid); }
.rc-readout-hint { font-size: 11px; color: var(--light); margin-top: 3px; }
.rc-foot { font-size: 12px; color: var(--light); padding-top: 10px; line-height: 1.4; }
.rc-hd-sum { font-size: 12px; color: var(--mid-gray); white-space: nowrap; }
.rc-hd-sum b { color: var(--terra-dark); font-weight: 600; }
.rc-readout .rc-none { color: var(--light); font-style: italic; }
/* A series drawn as unconnected points must not advertise a line swatch. */
.rc-legend-dots { width: 16px; height: 4px; overflow: visible; flex-shrink: 0; }
.rc-panel-note { font-size: 11px; color: var(--light); line-height: 1.45; margin-top: 4px; padding-left: 34px; }
.rc-patkey { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 0 0; font-size: 11px; color: var(--light); align-items: center; }
.rc-patkey span { display: flex; align-items: center; gap: 5px; }
.rc-patkey svg { width: 11px; height: 11px; overflow: visible; flex-shrink: 0; }

/* Insight toggle button */
.lmc-insight-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 6px;
  background: none;
}

.lmc-toggle-label { font-size: 11px; font-weight: 600; color: var(--terra); }

.lmc-toggle-arrow {
  width: 14px;
  height: 14px;
  stroke: var(--terra);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.lmc-toggle-arrow.open { transform: rotate(180deg); }

/* Insight panel */
.lmc-insight-panel { display: none; padding-top: 10px; }
.lmc-insight-panel.open { display: block; }

.lmc-insight-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.lmc-ai-placeholder {
  font-size: 11px;
  color: var(--mid-gray);
  font-style: italic;
  font-weight: 400;
}

.lmc-insight-text {
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.6;
  font-weight: 400;
}

/* Range bar */
.lmc-range-wrap { margin: 10px 0 8px; }

.lmc-range-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 5px;
}

.lmc-range-track {
  position: relative;
  height: 6px;
  background: var(--light-gray);
  border-radius: 3px;
}

.lmc-range-good {
  position: absolute;
  height: 100%;
  background: var(--terra-light);
  border-radius: 3px;
}

.lmc-range-marker-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--white);
  border: 2px solid var(--terra);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.lmc-range-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 10px;
  color: var(--mid-gray);
}

.lmc-range-normal-label {
  color: var(--terra);
  font-weight: 600;
}

.lmc-history-list {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 6px 0;
  padding: 4px 0;
}

.lmc-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.lmc-history-row:last-child { border-bottom: none; }

.lmc-history-date {
  font-size: 11px;
  color: var(--mid-gray);
  flex: 0 0 auto;
}

.lmc-history-val {
  font-size: 13px;
  color: var(--charcoal);
  font-weight: 500;
  flex: 1;
}

.lmc-insight-caveat {
  font-size: 11px;
  color: var(--mid-gray);
  font-style: italic;
  line-height: 1.4;
  margin: 6px 0;
}

.lmc-suggested-q {
  font-size: 11px;
  color: var(--charcoal);
  line-height: 1.4;
  padding: 8px 10px;
  background: var(--terra-pale);
  border-radius: 8px;
  margin-top: 6px;
}

/* Card header row (name only — no action here) */
.lmc-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

/* Date row: date text + pencil edit icon side-by-side */
.lmc-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.lmc-pencil-btn {
  display: flex;
  align-items: center;
  padding: 2px;
  color: var(--mid-gray);
  flex-shrink: 0;
  line-height: 0;
}

.lmc-pencil-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lmc-pencil-btn:active { color: var(--terra); }

/* Empty card CTA */
.lmc-empty-cta {
  font-size: 11px;
  font-weight: 600;
  color: var(--terra);
  margin-top: 8px;
}

/* Empty card */
.lmc-empty-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--light-gray);
  color: var(--mid-gray);
  text-transform: uppercase;
  margin: 5px 0 4px;
}

.lmc-empty-copy {
  font-size: 11px;
  color: var(--mid-gray);
  line-height: 1.4;
}

/* Specialist sub-group headings */
.lab-subgroup-heading {
  font-size: 11px;
  font-weight: 600;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 16px 0 10px;
}

/* Log result modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 500;
  align-items: flex-end;
}

.modal-overlay.active { display: flex; }

.modal-sheet {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 24px 24px calc(24px + var(--safe-bottom));
  max-height: 85dvh;
  overflow-y: auto;
}

.modal-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.modal-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 20px;
}

/* Sheet header row: title + close button (funnel edit, embryo) */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal);
}

.modal-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wash);
  color: var(--charcoal);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.modal-close:active { background: var(--blush); }

/* Swipe-to-dismiss: the sheet follows the finger (JS sets the transform),
   then springs back or slides out. .dragging kills the transition so the
   sheet tracks 1:1 while the pointer is down. */
.modal-sheet { transition: transform 0.22s ease; overscroll-behavior: contain; }
.modal-sheet.dragging { transition: none; }

/* Lock the page behind any open sheet */
body:has(.modal-overlay.active) { overflow: hidden; }

/* Confirmation sheet (replaces native confirm()) */
#confirm-modal { z-index: 600; }

.confirm-sheet-body {
  font-size: 14px;
  color: var(--mid);
  line-height: 1.5;
  margin: -8px 0 20px;
}

.btn-primary.btn-danger { background: var(--error); }
.btn-primary.btn-danger:active { background: #8B1F2F; }

/* ---- In-app date picker sheet (openDatePicker) ---- */
#datepicker-modal { z-index: 600; }
.dp-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 12px;
}
.dp-nav-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--white); color: var(--charcoal);
  font-size: 22px; line-height: 1; cursor: pointer;
  font-family: var(--font-body);
}
.dp-nav-btn:active { background: var(--light); }
/* The month/year label is a button: tapping it drills out (days → months →
   years) so long histories don't need one-month-at-a-time paging. */
.dp-month {
  font-size: 15px; font-weight: 600; color: var(--charcoal);
  background: none; border: none; font-family: var(--font-body);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 8px;
}
.dp-month:active:not(:disabled) { background: var(--light); }
.dp-month:disabled { cursor: default; }
.dp-month .dp-caret { width: 10px; height: 10px; opacity: 0.5; flex-shrink: 0; }
/* Month- and year-grid cells (3 across) reuse the day-grid container. */
.dp-grid.dp-grid-my { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dp-my-cell {
  border: 1px solid var(--border); background: var(--white);
  border-radius: 10px; font-size: 14px; color: var(--charcoal);
  font-family: var(--font-body); cursor: pointer;
  padding: 15px 0; display: flex; align-items: center; justify-content: center;
}
.dp-my-cell.dp-current { box-shadow: inset 0 0 0 1.5px var(--terra); font-weight: 600; }
.dp-my-cell.dp-selected { background: var(--terra); color: var(--white); font-weight: 600; border-color: var(--terra); }
.dp-my-cell.dp-disabled { color: var(--light); cursor: not-allowed; background: var(--cream); }
button.dp-my-cell:active:not(.dp-disabled):not(.dp-selected) { background: var(--terra-pale); }
.dp-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.dp-dow span {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--mid-gray); text-transform: uppercase; letter-spacing: 0.04em;
}
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dp-cell {
  aspect-ratio: 1; border: none; background: none;
  border-radius: 10px; font-size: 15px; color: var(--charcoal);
  font-family: var(--font-body); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dp-cell.dp-empty { visibility: hidden; cursor: default; }
.dp-cell.dp-today { box-shadow: inset 0 0 0 1.5px var(--terra); font-weight: 600; }
.dp-cell.dp-selected { background: var(--terra); color: var(--white); font-weight: 600; }
.dp-cell.dp-disabled { color: var(--light); cursor: not-allowed; }
button.dp-cell:active:not(.dp-disabled):not(.dp-selected) { background: var(--terra-pale); }

/* Beta-date setter button that opens the in-app picker (replaces the
   native date input that iOS auto-committed). Placeholder state shows
   'mm/dd/yyyy' + a calendar glyph so the affordance is explicit. */
.tww-date-btn {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 13px; font-family: var(--font-body); color: var(--charcoal);
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--white); cursor: pointer;
}
.tww-date-btn.placeholder { color: var(--mid-gray); }
.tww-date-btn svg { flex-shrink: 0; }

/* ---- Add-result action sheet (matches IVF Upload Flow prototype) ---- */
.add-result-eyebrow {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mid-gray);
  font-weight: 700;
  margin-bottom: 14px;
}

.add-result-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.add-result-option {
  display: flex;
  align-items: center;
  gap: 14px;
  border: none;
  width: 100%;
  text-align: left;
  background: var(--cream);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.add-result-option:active { opacity: 0.85; }

.add-result-option.primary { background: var(--terra); }

.add-result-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--terra-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.add-result-option.primary .add-result-icon { background: rgba(255,255,255,0.16); }

.add-result-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--charcoal);
}

.add-result-sub {
  font-size: 13px;
  color: var(--mid-gray);
  margin-top: 2px;
}

.add-result-option.primary .add-result-title { color: var(--white); }
.add-result-option.primary .add-result-sub { color: rgba(255,255,255,0.72); }

/* ============================================================
   RECORD SCREEN
============================================================ */

.record-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  padding: 0 24px;
}

.record-tab {
  flex: 1;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--mid-gray);
  text-align: center;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, border-color 0.15s;
}

.record-tab.active {
  color: var(--terra);
  border-bottom-color: var(--terra);
  font-weight: 600;
}

.record-tab-content { display: none; padding: 20px 24px calc(var(--nav-height) + var(--safe-bottom) + 20px); }
.record-tab-content.active { display: block; }

/* Account tab: identity header above the settings rows */
.account-identity { padding: 6px 2px 4px; }

.account-identity-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--charcoal);
  overflow-wrap: anywhere;
}

.account-identity-email {
  font-size: 14px;
  color: var(--mid-gray);
  margin-top: 3px;
  overflow-wrap: anywhere;
}

/* Account tab: settings-style row list */
.account-rows {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 16px;
}

.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 16px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--charcoal);
  text-decoration: none;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.account-row + .account-row { border-top: 1px solid var(--line-soft); }
.account-row:active { background: var(--light-gray); }
.account-row-chev { color: var(--light); font-size: 16px; }
.account-row-signout { color: var(--error); font-weight: 500; }

/* Profile fields */
.profile-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.profile-field:last-child { border-bottom: none; }

.profile-field-label {
  font-size: 13px;
  color: var(--mid-gray);
}

.profile-field-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  text-align: right;
  max-width: 60%;
}

.cycle-history-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 10px;
}

.cycle-history-type {
  font-size: 11px;
  font-weight: 600;
  color: var(--terra);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cycle-history-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.cycle-history-meta {
  font-size: 12px;
  color: var(--mid-gray);
}

/* Outcome badge */
.outcome-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.outcome-positive { background: var(--sage-bg); color: var(--sage); }
.outcome-negative { background: var(--error-bg); color: var(--error); }
.outcome-cancelled { background: var(--light-gray); color: var(--mid-gray); }
.outcome-never-started { background: var(--light-gray); color: var(--mid-gray); font-style: italic; }

/* ============================================================
   CYCLE HISTORY + CANCEL CYCLE
============================================================ */
.history-cycle-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.history-cycle-meta { font-size: 12px; color: var(--mid-gray); margin-top: 4px; line-height: 1.5; }
.history-card-header { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.history-card-chevron {
  width: 14px;
  height: 14px;
  stroke: var(--mid-gray);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
  flex-shrink: 0;
  align-self: center;
}
.history-card-body { display: none; }
.history-card-body.open { display: block; }
.history-cycle-reason { font-size: 12px; color: var(--mid-gray); margin-top: 5px; font-style: italic; }

/* Editable profile field rows */
.profile-field.editable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.profile-field.editable:active { opacity: 0.6; }
.profile-field-right { display: flex; align-items: center; gap: 4px; }
.profile-field-chevron { color: var(--border); flex-shrink: 0; }
.profile-field-chevron svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* History "Add a cycle" button */
.history-add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 14px; border: 1.5px dashed var(--terra); border-radius: 12px; color: var(--terra); font-size: 14px; font-weight: 500; margin-bottom: 16px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: var(--font-body); }
.history-add-btn:active { background: var(--terra-light); }
.history-add-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* History card edit button */
.history-card-edit { flex-shrink: 0; padding: 3px 5px; color: var(--mid-gray); display: flex; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 6px; }
.history-card-edit:active { background: var(--light-gray); }
.history-card-edit svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   IVF HISTORY — journey timeline (Direction A)
============================================================ */
/* "Your journey" summary — type tiles double as a multi-select filter */
.jt-title { font-family: var(--font-display); font-size: 17px; color: var(--ink); margin-bottom: 2px; }
.jt-sub { font-size: 12px; color: var(--mid-gray); margin-bottom: 12px; }
.jt-stats { display: flex; gap: 8px; margin-bottom: 8px; }
.jt-stat { flex: 1; text-align: center; padding: 10px 4px 9px; border-radius: 12px; background: var(--white); border: 1.5px solid var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s, transform .05s; }
.jt-stat:active { transform: scale(.97); }
.jt-stat .n { font-size: 20px; font-weight: 700; line-height: 1; }
.jt-stat .l { font-size: 10px; color: var(--mid-gray); text-transform: uppercase; letter-spacing: .05em; margin-top: 5px; font-weight: 600; }
.jt-stat.iui .n { color: var(--gold); }
.jt-stat.retr .n { color: var(--terra); }
.jt-stat.fet .n { color: var(--sage); }
.jt-stat.emb .n { color: var(--ink); }
.jt-stat.iui.on { background: var(--gold-bg); border-color: var(--gold); }
.jt-stat.retr.on { background: var(--terra-pale); border-color: var(--terra); }
.jt-stat.fet.on { background: var(--sage-bg); border-color: var(--sage); }
.jt-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 14px; min-height: 26px; }
.jt-filter-note { font-size: 12px; color: var(--mid-gray); }
.jt-clear { color: var(--terra); font-weight: 600; cursor: pointer; border: none; background: none; font-family: var(--font-body); font-size: 12px; margin-left: 4px; -webkit-tap-highlight-color: transparent; }
.jt-sort { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--mid-gray); background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 5px 11px; cursor: pointer; font-family: var(--font-body); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.jt-sort svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Vertical timeline spine with type-colored nodes */
.tl { position: relative; padding-left: 32px; }
.tl:before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 16px; width: 2px; background: var(--line); }
.tl-year { font-size: 11px; font-weight: 700; color: var(--mid-gray); letter-spacing: .08em; text-transform: uppercase; margin: 2px 0 12px; }
.tl-item { position: relative; margin-bottom: 12px; }
.tl-dot { position: absolute; left: -32px; top: 15px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; }
.tl-dot i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.tl-dot.iui i { background: var(--gold); }
.tl-dot.retr i { background: var(--terra); }
.tl-dot.fet i { background: var(--sage); }
.tl-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tl-card-top { display: flex; align-items: flex-start; gap: 10px; }
.tl-tok { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 700; }
.tl-tok.iui { background: var(--gold-bg); color: var(--gold); }
.tl-tok.retr { background: var(--terra-pale); color: var(--terra); }
.tl-tok.fet { background: var(--sage-bg); color: var(--sage); }
.tl-card-title { font-size: 14px; font-weight: 600; color: var(--charcoal); }
.tl-card-date { font-size: 12px; color: var(--mid-gray); margin-top: 2px; }
.tl-card-reason { font-size: 12px; color: var(--mid-gray); margin-top: 4px; font-style: italic; }
.tl-chev { width: 14px; height: 14px; stroke: var(--mid-gray); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; flex-shrink: 0; align-self: center; }
.tl-detail { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.tl-detail.open { display: block; }
.tl-kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.tl-kv .k { color: var(--mid-gray); text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; font-weight: 600; padding-top: 2px; flex-shrink: 0; }
.tl-kv .v { color: var(--charcoal); font-weight: 600; text-align: right; }
.tl-stats { display: flex; gap: 14px; padding: 2px 0 10px; }
.tl-stat { text-align: center; flex: 1; }
.tl-stat .v { font-size: 17px; font-weight: 700; color: var(--charcoal); }
.tl-stat .k { font-size: 10px; color: var(--mid-gray); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.tl-section-label { font-size: 11px; font-weight: 600; color: var(--mid-gray); letter-spacing: 0.06em; text-transform: uppercase; margin: 10px 0 6px; }
.tl-cta { font-size: 12px; color: var(--terra); font-weight: 600; margin-top: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tl-edit-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.tl-edit { font-size: 12px; color: var(--mid-gray); font-weight: 600; background: none; border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font-family: var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tl-edit:active { background: var(--light-gray); }

/* About tab — card layout */
.about-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 14px; }
.about-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid var(--border); }
.about-card-title { font-size: 15px; font-weight: 600; color: var(--charcoal); }
.about-card-edit-btn { font-size: 13px; font-weight: 500; color: var(--charcoal); background: none; border: 1px solid var(--border); border-radius: 20px; padding: 5px 14px; cursor: pointer; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; }
.about-card-edit-btn:active { background: var(--light-gray); }

/* Record → Health → Supplements. One flat list, each row carrying its own
   Active/Stopped badge rather than being grouped under headings. */
.supp-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 12px 18px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.supp-row:active { background: var(--light-gray); }
.supp-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  flex-shrink: 0; margin-top: 2px; white-space: nowrap;
}
.supp-badge-active { background: #E6F3F3; color: var(--terra); }
.supp-badge-stopped { background: var(--light-gray); color: var(--mid-gray); }

/* Record → Health → Documents. The pill states whether a document is feeding
   insight context; the switch in the detail sheet is what changes it. */
.doc-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.doc-pill-on { background: var(--terra-pale); color: var(--terra); }
.doc-pill-off { background: var(--light-gray); color: var(--mid-gray); }

.doc-feeds-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; margin: 4px 0 18px;
  border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border);
}
.doc-switch {
  flex-shrink: 0; width: 44px; height: 26px; border-radius: 14px; border: none; padding: 0;
  position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: #d8d4cc; transition: background 0.15s;
}
.doc-switch.on { background: var(--terra); }
.doc-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: left 0.15s;
}
.doc-switch.on .doc-switch-knob { left: 21px; }

/* ── Health-background capture (menstrual + Phase 2 lifestyle) ──────────────
   A shared numeric +/- stepper (StepperRow) and the uniform field rhythm both
   capture sheets use: one separator between every field. */
.stepper {
  display: flex; align-items: center; flex-shrink: 0;
  width: 150px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 11px; background: var(--white);
}
.stepper button {
  flex: 0 0 40px; height: 40px; border: none; background: var(--sand);
  font-size: 19px; font-weight: 600; color: var(--terra); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stepper button:active { background: var(--wash); }
.stepper .stepper-val { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--charcoal); }
.stepper .stepper-val.unset { color: var(--light); font-weight: 600; }
/* Shows only once a stepper holds a value, so an optional numeric field can be
   returned to blank rather than being stuck on a number after one stray tap. */
.stepper-clear { background: none; border: none; font-family: var(--font-body); font-size: 12px; color: var(--light); cursor: pointer; padding: 4px 2px; -webkit-tap-highlight-color: transparent; }
.stepper-clear:active { color: var(--mid-gray); }

.cap-fields > * { border-top: 1px solid var(--line-soft); padding: 16px 0; }
.cap-fields > :first-child { border-top: none; padding-top: 2px; }
.cap-flabel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--charcoal); margin-bottom: 9px; }
.cap-flabel .opt { font-size: 11.5px; font-weight: 500; color: var(--light); }

.cap-agency { background: var(--sage-bg); border-radius: 12px; margin: 14px 0 18px; overflow: hidden; }
.cap-agency summary { display: flex; align-items: center; gap: 10px; padding: 12px 13px; cursor: pointer; list-style: none; }
.cap-agency summary::-webkit-details-marker { display: none; }
.cap-agency summary svg { width: 17px; height: 17px; flex-shrink: 0; stroke: var(--sage); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cap-agency summary .lbl { font-size: 12px; font-weight: 700; color: #33422f; }
.cap-agency .chev { margin-left: auto; color: var(--sage); font-size: 17px; font-weight: 700; transition: transform 0.15s; }
.cap-agency[open] .chev { transform: rotate(90deg); }
.cap-agency-body { padding: 0 14px 13px 40px; }
.cap-agency-body p { font-size: 11.5px; color: #40513c; line-height: 1.5; }

/* A routed row inside a capture sheet (e.g. lifestyle's Supplements, which live
   on their own card). */
.cap-route { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cap-route-k { width: 32px; height: 32px; border-radius: 9px; background: var(--sand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cap-route-k svg { width: 16px; height: 16px; stroke: var(--terra); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cap-route-lead { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cap-route-t { font-size: 13.5px; font-weight: 600; color: var(--charcoal); }
.cap-route-s { font-size: 11.5px; color: var(--light); }
.cap-route-chev { color: var(--terra); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* Health-background hub sheet + its completeness meter (the meter also rides
   the Home nudge card). */
.hb-meter { margin: 14px 0 6px; }
.hb-meter-bar { height: 6px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.hb-meter-fill { height: 100%; border-radius: 6px; background: var(--terra); transition: width 0.2s; }
.hb-meter-txt { margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--light); }

.hb-row { display: flex; align-items: center; gap: 13px; padding: 15px 2px; border-top: 1px solid var(--line-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hb-row:first-of-type { border-top: none; }
.hb-row.disabled { cursor: default; opacity: 0.6; }
.hb-key { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hb-key svg { width: 17px; height: 17px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb-key.done { background: var(--sage-bg); } .hb-key.done svg { stroke: var(--sage); }
.hb-key.ask { background: var(--terra-pale); } .hb-key.ask svg { stroke: var(--terra); }
.hb-key.route { background: var(--sand); } .hb-key.route svg { stroke: var(--mid); }
.hb-lead { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hb-t { font-size: 14.5px; font-weight: 600; color: var(--charcoal); }
.hb-s { font-size: 11.5px; color: var(--light); line-height: 1.4; }
.hb-stat { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hb-stat.done { color: var(--sage); }
.hb-stat.ask { color: var(--terra); }
.hb-stat.route { color: var(--mid); }
.hb-stat.soon { color: var(--light); }

/* The quiet citation under a synthesis card that leaned on a document. */
.insight-cites { margin-top: 12px; padding-top: 11px; border-top: 0.5px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.insight-cite {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; padding: 0; margin: 0; font-family: var(--font-body);
  font-size: 12px; color: var(--mid-gray); line-height: 1.5; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.insight-cite-icon {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 4px; background: var(--terra-pale);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
}
.insight-cite b { color: var(--charcoal); font-weight: 600; }
.about-card-field { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--border); gap: 12px; }
.about-card-field:last-child { border-bottom: none; }
/* The affordance that tells a patient a row opens something. Every tappable
   row in Health background carries one; without it the row looks inert. */
.about-card-chev {
  width: 12px; height: 12px; flex-shrink: 0;
  stroke: var(--border); fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.about-card-field.tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.about-card-field.tappable:active { background: var(--light-gray); }
.about-card-label { font-size: 14px; color: var(--mid-gray); flex-shrink: 0; }
.about-card-value { font-size: 14px; font-weight: 500; color: var(--charcoal); text-align: right; }
.about-card-value.not-on-file { font-style: italic; color: var(--mid-gray); font-weight: 400; }
/* Health-background row previews: one curated highlight per row. The dot is a
   quiet "worth a look" on a flagged menstrual signal; "+ Add" invites a first
   entry on an empty row without reading as a value that failed to load. */
.about-card-value .hl-flag { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); flex-shrink: 0; }
.about-card-value .hl-add { color: var(--terra); font-weight: 600; }
.about-card-input { border: 1.5px solid var(--terra); border-radius: 8px; padding: 7px 10px; font-size: 14px; font-family: var(--font-body); color: var(--charcoal); background: var(--white); text-align: right; width: 100%; max-width: 200px; outline: none; }
.about-card-save-row { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.about-card-save-row .btn-primary { flex: 2; min-height: 40px; padding: 10px 16px; font-size: 14px; }
.about-card-save-row .btn-secondary { flex: 1; min-height: 40px; padding: 10px 16px; font-size: 14px; }

/* History cycle modal sections */
.hc-section-divider { font-size: 11px; font-weight: 600; color: var(--mid-gray); letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 0 10px; border-top: 1px solid var(--border); margin-top: 4px; }
.hc-grade-chip { display: inline-flex; align-items: center; background: var(--terra-pale); color: var(--terra); border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 500; }
.hc-mon-row { display: grid; grid-template-columns: 1fr 70px 106px 32px; gap: 6px; align-items: center; margin-bottom: 8px; }
.hc-mon-val, .hc-mon-date, .hc-mon-marker { font-size: 13px; padding: 8px; }
/* Marker <select> shares .form-select's chevron (positioned right 14px);
   leave room for it so the label doesn't run under the arrow. */
.hc-mon-marker { padding-right: 26px; background-position: right 8px center; text-overflow: ellipsis; }
.hc-mon-remove { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: none; cursor: pointer; color: var(--mid-gray); flex-shrink: 0; -webkit-tap-highlight-color: transparent; border: none; }
.hc-mon-remove:active { background: var(--light-gray); }
.hc-mon-remove svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- IUI progressive-disclosure cards (history modal) --- */
.hc-detail-intro { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9a9288; margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; }
.hc-detail-intro::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.hc-chipgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.hc-addchip { display: flex; align-items: center; gap: 8px; padding: 13px 14px; border: 1.5px dashed var(--terra); border-radius: 12px; background: none; color: var(--terra); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; font-family: var(--font-body); }
.hc-addchip svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.hc-addchip:active { background: var(--terra-pale); }
.hc-allset { font-size: 12px; color: var(--mid-gray); text-align: center; padding: 6px 0 2px; }
.hc-detail-card { border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 14px 4px; margin-bottom: 10px; background: var(--cream); }
.hc-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hc-detail-head .hc-detail-t { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charcoal); }
.hc-detail-remove { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--mid-gray); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; -webkit-tap-highlight-color: transparent; font-family: var(--font-body); }
.hc-detail-remove svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hc-pick { display: flex; gap: 6px; }
.hc-pick button { flex: 1; padding: 11px 4px; border: 1.5px solid var(--border); background: var(--white); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--mid-gray); cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: var(--font-body); }
.hc-pick button.on { border-color: var(--terra); background: var(--terra-pale); color: var(--terra); }

.cycle-mon-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mid-gray);
  letter-spacing: 0.01em;
  background: none;
}

.cycle-mon-arrow {
  width: 14px;
  height: 14px;
  stroke: var(--mid-gray);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.cycle-mon-panel { display: none; padding-top: 8px; }
.cycle-mon-panel.open { display: block; }

.cycle-mon-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.cycle-mon-row:last-child { border-bottom: none; }

.cycle-mon-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 76px;
  flex-shrink: 0;
}

.cycle-mon-val {
  font-size: 13px;
  color: var(--charcoal);
  font-weight: 500;
  text-align: right;
}

.cycle-mon-unit { font-size: 11px; color: var(--mid-gray); font-weight: 400; }
.cycle-mon-date { font-size: 11px; color: var(--mid-gray); font-weight: 400; margin-left: 4px; }

.cancel-cycle-link {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--mid-gray);
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 10px 0 2px;
  margin-top: 12px;
  cursor: pointer;
  font-family: var(--font-body);
}
.cancel-cycle-link:hover { color: var(--charcoal); }

.cancel-reason-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--light-gray);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--charcoal);
  font-family: var(--font-body);
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.cancel-reason-btn.selected {
  border-color: var(--terra);
  background: var(--terra-pale);
  color: var(--terra);
  font-weight: 500;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
============================================================ */
@media (min-width: 431px) {
  #bottom-nav {
    left: 50%;
  }
}

/* DEV-ONLY: reset banner — never rendered unless ?dev=true */
#dev-reset-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: 32px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  z-index: 99;
  border: none;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* ============================================================
   APPOINTMENT PREP SCREEN
============================================================ */
.prep-snapshot-text {
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.7;
  white-space: pre-line;
}
.prep-questions-header {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 16px;
}
.prep-question-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.prep-question-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.5;
  margin-bottom: 8px;
}
.prep-q-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--mid-gray);
  margin-top: 1px;
}
.prep-data-signal {
  font-size: 12px;
  font-style: italic;
  color: var(--mid-gray);
  line-height: 1.5;
  margin-bottom: 10px;
}
.prep-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.prep-explainer-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mid-gray);
  padding: 3px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.prep-explainer-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.prep-explainer-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 6px;
}
.prep-explainer-body {
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.7;
  margin-bottom: 14px;
}
.prep-explainer-body:last-child { margin-bottom: 0; }
.prep-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--charcoal);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.prep-resume-card {
  background: var(--white);
  border: 1.5px solid var(--terra);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}
.prep-resume-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-dark);
  margin-bottom: 8px;
}
.prep-resume-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--charcoal);
}
.prep-resume-meta1 { font-size: 13px; color: var(--charcoal); margin-top: 2px; }
.prep-resume-meta2 { font-size: 12px; color: var(--mid-gray); margin-top: 6px; }
.prep-resume-actions { display: flex; gap: 8px; margin-top: 14px; }
.prep-resume-actions button {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  padding: 11px;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
}
.prep-resume-open { background: var(--terra); color: #fff; border: none; }
.prep-resume-new {
  background: none;
  color: var(--mid-gray);
  font-weight: 500;
  border: 1px solid var(--border);
}
@media print {
  body { background: white !important; }
  .screen { display: none !important; }
  #screen-prep { display: block !important; position: static !important; min-height: unset !important; }
  #screen-prep .page-header button { display: none !important; }
  #prep-form-state, #prep-loading-state, #prep-error-state,
  .prep-save-row, .prep-reset-row { display: none !important; }
  #prep-results-state { display: block !important; }
  .prep-explainer-panel { display: block !important; }
  .prep-question-card { break-inside: avoid; }
}
.prep-category-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
}
.prep-badge-protocol   { background: var(--terra-pale); color: var(--terra); }
.prep-badge-testing    { background: #FBF3E0; color: #9A6E10; }
.prep-badge-supplement { background: #EDE9F5; color: #6B5B9A; }
.prep-badge-scan       { background: #E8EFF5; color: #3A6080; }
.prep-badge-embryo     { background: #F5EAE3; color: #A05530; }
.prep-badge-research   { background: var(--light-gray); color: var(--mid-gray); }
.prep-data-card {
  background: var(--terra-pale);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.prep-data-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  gap: 16px;
}
.prep-data-row:first-child { padding-top: 0; }
.prep-data-row:last-child  { border-bottom: none; padding-bottom: 0; }
.prep-data-label {
  font-size: 14px;
  color: var(--mid-gray);
  flex-shrink: 0;
}
.prep-data-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  text-align: right;
}
.prep-q-remove {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--mid-gray);
  cursor: pointer;
  padding: 2px 4px;
  font-family: var(--font-body);
}
.prep-q-remove:hover { color: var(--terra); }
.prep-curate-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.prep-add-q-btn {
  width: 100%;
  font-size: 13px;
  color: var(--terra);
  background: none;
  border: 1px dashed var(--terra);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  font-family: var(--font-body);
}
.prep-restore-link {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--mid-gray);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body);
  text-decoration: underline;
}
.prep-add-q-input {
  width: 100%;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--charcoal);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
  min-height: 64px;
  box-sizing: border-box;
}

/* ══ Worth looking into ══════════════════════════════════════════════
   Ported verbatim from the pre-Vue stylesheet. The four-part finding card,
   its groups and cap, the Home entry line, and the capture panel. */
/* Worth looking into — four-part card body (observation · pattern ·
   provenance · question). Rendered inside the shared .insight-card shell. */
.wli-observation {
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.6;
  font-weight: 600;
}
.wli-pattern {
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.6;
  margin-top: 8px;
}
.wli-provenance {
  font-size: 12.5px;
  color: var(--mid-gray);
  line-height: 1.55;
  margin-top: 10px;
  padding-left: 16px;
  position: relative;
}
.wli-provenance::before {
  content: '\25C7'; /* ◇ observed-but-aging, never "New" */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--terra-light);
}
.wli-question {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--terra-pale);
  border-radius: 9px;
}
.wli-question-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--terra-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.wli-question-text {
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.5;
  font-style: italic;
}
.wli-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.wli-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wli-btn-primary {
  border: none;
  background: var(--terra);
  color: #fff;
}
.wli-btn-primary:active { background: var(--terra-mid); transform: scale(0.98); }
.wli-btn-ghost {
  border: 1px solid var(--line);
  background: none;
  color: var(--mid-gray);
}

/* Home entry point — the only WLI surface on Home; taps into the view. */
.wli-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--wash);
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  cursor: pointer;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.wli-entry:active { transform: scale(0.99); }
.wli-entry--muted { background: transparent; border: 1px solid var(--line); }
.wli-entry-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wli-entry-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--terra-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wli-entry-sub { font-size: 14px; color: var(--charcoal); font-weight: 500; }
.wli-entry-chev { color: var(--terra); flex-shrink: 0; }

/* Destination view */
.wli-triage {
  font-size: 15px;
  line-height: 1.55;
  color: var(--charcoal);
  margin-bottom: 22px;
}
.wli-group { margin-bottom: 22px; }
.wli-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mid-gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wli-group-count {
  background: var(--terra-bg);
  color: var(--terra-dark);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
}
.wli-finding {
  background: var(--wash);
  border-radius: 12px;
  padding: 15px 17px;
  margin-bottom: 12px;
}
.wli-finding-tier {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.wli-tier-actionable { background: var(--terra); color: #fff; }
.wli-tier-consider   { background: var(--terra-bg); color: var(--terra-dark); }
.wli-tier-currency   { background: transparent; color: var(--mid-gray); border: 1px solid var(--line); }
.wli-empty {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mid-gray);
}
/* "N new" pill on the Home entry (spec §05, the stricter bar): a calm count
   in terracotta, never red. Only a genuinely new Actionable/Consider finding
   earns it; Currency staleness never does, and it's held mid-cycle. */
.wli-new-pill {
  display: inline-block;
  margin-left: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--terra-dark);
  background: var(--terra-pale);
  border: 1px solid var(--terra-bg);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
}
/* Prioritization cap (spec §05): the raise group shows the top few findings;
   the rest fold behind "more to consider" so the surface never reads like a
   checklist of everything wrong. */
.wli-more { margin-top: 4px; }
.wli-more-btn {
  margin-top: 10px;
  font-size: 13px;
  color: var(--terra);
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
/* "I've had this" capture panel */
.wli-hadthis {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.wli-hadthis-label {
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.5;
  margin-bottom: 10px;
}
.wli-capture-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.wli-capture-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--terra);
  background: none;
  color: var(--terra-dark);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wli-capture-chip:active { background: var(--terra-pale); }
.wli-hadthis-skip {
  background: none;
  border: none;
  color: var(--mid-gray);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
}