/* ============================================================
   IVF Pulse — Clinician cockpit chrome
   Local layout for the doctor-side click-through app. Builds on the
   Leap Health design-system tokens (design-system/styles.css loads
   first). The doctor UI is clinical green; the patient phone preview
   uses patient-brand.css (.ivf scope).
   ============================================================ */
.app { display: flex; height: 100vh; overflow: hidden; background: var(--surface-page); color: var(--text-primary); }

/* ---------------- Sidebar ---------------- */
.sb { width: var(--sidebar-w); flex: none; background: var(--surface-card); border-right: var(--hairline);
  display: flex; flex-direction: column; padding: 16px 12px; overflow-y: auto; }
.sb__brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.brandmark { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: .9; color: #fff;
  background: linear-gradient(150deg, var(--green-600), var(--green-800)); box-shadow: var(--shadow-xs); }
.brandmark b { font: 800 9px/1 var(--font-sans); letter-spacing: .02em; }
.brandmark span { font: 800 9px/1 var(--font-sans); color: var(--green-100); letter-spacing: .02em; }
.brandtext { display: flex; flex-direction: column; }
.brandtext b { font: var(--fw-bold) 15px/1 var(--font-sans); color: var(--text-primary); letter-spacing: -.01em; }
.brandtext small { font: var(--fw-medium) 9.5px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-disabled); }

.sb__group { font: var(--fw-semibold) 11px/1.5 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-disabled); padding: 14px 10px 6px; }
.sb__item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-md);
  font: var(--fw-medium) 13.5px/1.4 var(--font-sans); color: var(--text-secondary); cursor: pointer;
  transition: var(--transition-base); border: 0; background: transparent; width: 100%; text-align: left; }
.sb__item i { font-size: 18px; flex: none; }
.sb__item:hover { background: var(--surface-sunken); color: var(--text-primary); }
.sb__item--active { background: var(--primary-tint-12); color: var(--primary); font-weight: var(--fw-semibold); }
.sb__item--active i { color: var(--primary); }
.sb__item--soon { color: var(--text-disabled); cursor: default; }
.sb__item--soon:hover { background: transparent; color: var(--text-disabled); }
.sb__item .sb__count { margin-left: auto; }
.sb__item .soontag { margin-left: auto; font: 600 9px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-disabled); background: var(--grey-100); padding: 3px 6px; border-radius: 100px; }
.sb__spacer { flex: 1; min-height: 12px; }

/* ---------------- Topbar ---------------- */
.tb { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 16px;
  padding: 0 24px; background: var(--surface-card); border-bottom: var(--hairline); }
.tb__title { font: var(--fw-semibold) 17px/1.3 var(--font-sans); color: var(--text-primary); }
.tb__spacer { flex: 1; }
.tb__icons { display: flex; align-items: center; gap: 6px; }
/* current-patient context chip */
.pctx { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 100px;
  box-shadow: var(--ring); background: var(--surface-card); }
.pctx__meta { line-height: 1.2; }
.pctx__meta b { font: var(--fw-semibold) 13px/1.2 var(--font-sans); color: var(--text-primary); display: block; }
.pctx__meta small { font: 400 11px/1.2 var(--font-sans); color: var(--text-tertiary); }

/* ---------------- Content scroll area ---------------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.scroll { flex: 1; overflow-y: auto; padding: 24px 28px 60px; }
.page { max-width: 1080px; margin: 0 auto; }
.page--wide { max-width: 1240px; }

.pagehead { margin-bottom: 22px; }
.pagehead h1 { font: var(--fw-semibold) 24px/1.25 var(--font-sans); color: var(--text-primary); margin: 0 0 4px; }
.pagehead p { font: 400 14px/1.5 var(--font-sans); color: var(--text-tertiary); margin: 0; max-width: 640px; }

.sec { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 14px; }
.sec h2 { font: var(--fw-semibold) 16px/1.3 var(--font-sans); color: var(--text-primary); }
.eyebrow { font: var(--fw-semibold) 11px/1.5 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }

/* ---------------- Approvals queue ---------------- */
.qcard { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.qrow-feat { display: flex; align-items: center; gap: 10px; }
.qrow-feat .fi { width: 34px; height: 34px; border-radius: var(--radius-md); flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 18px; background: var(--primary-tint-08); color: var(--primary); }
.qrow-feat b { font: var(--fw-medium) 14px/1.3 var(--font-sans); color: var(--text-primary); display: block; }
.qrow-feat small { font: 400 12px/1.3 var(--font-sans); color: var(--text-tertiary); }
.rec-snip { font: var(--fw-medium) 13px/1.4 var(--font-sans); color: var(--text-primary); }
.rec-snip small { display: block; font-weight: 400; color: var(--text-tertiary); }

/* confidence chip */
.conf { display: inline-flex; align-items: center; gap: 7px; font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--text-secondary); }
.conf__ring { --p: 90; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--grey-200) 0); position: relative; }
.conf__ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface-card); }

/* feature picker grid (when no feature selected) */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fcard { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--ring); padding: 18px;
  cursor: pointer; transition: var(--transition-base); display: flex; flex-direction: column; gap: 10px; }
.fcard:hover { box-shadow: var(--ring-primary); transform: translateY(-1px); }
.fcard__ic { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--primary-tint-08); color: var(--primary); }
.fcard h3 { font: var(--fw-semibold) 15px/1.3 var(--font-sans); color: var(--text-primary); margin: 0; }
.fcard p { font: 400 12.5px/1.5 var(--font-sans); color: var(--text-tertiary); margin: 0; flex: 1; }
.fcard__foot { display: flex; align-items: center; justify-content: space-between; }
.fcard--soon { cursor: default; opacity: .72; }
.fcard--soon:hover { box-shadow: var(--ring); transform: none; }

/* ============================================================
   CASE FLOW (Upload -> Analyse -> Review -> Released)
   ============================================================ */
.flowhead { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
.flowhead__ic { width: 46px; height: 46px; border-radius: var(--radius-md); flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 24px; background: var(--primary-tint-08); color: var(--primary); }
.flowhead__t b { font: var(--fw-semibold) 20px/1.25 var(--font-sans); color: var(--text-primary); }
.flowhead__t p { font: 400 13px/1.5 var(--font-sans); color: var(--text-tertiary); margin: 3px 0 0; max-width: 620px; }
.backlink { display: inline-flex; align-items: center; gap: 5px; font: var(--fw-medium) 13px/1 var(--font-sans);
  color: var(--text-tertiary); background: transparent; border: 0; cursor: pointer; padding: 6px 0; margin-bottom: 12px; }
.backlink:hover { color: var(--primary); }

/* two-column flow layout: work area + side rail */
.flowgrid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .flowgrid { grid-template-columns: 1fr; } }

/* ---- Upload step ---- */
.dropzone { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-page-2);
  padding: 30px; text-align: center; transition: var(--transition-base); }
.dropzone--ready { border-style: solid; border-color: transparent; box-shadow: var(--ring-primary); background: var(--primary-tint-08); }
.dropzone__ic { width: 54px; height: 54px; border-radius: 50%; background: var(--primary-tint-12); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 12px; }
.dropzone h4 { font: var(--fw-semibold) 15px/1.3 var(--font-sans); color: var(--text-primary); margin: 0 0 4px; }
.dropzone p { font: 400 12.5px/1.5 var(--font-sans); color: var(--text-tertiary); margin: 0 0 14px; }
.filechip { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--surface-card); box-shadow: var(--ring);
  border-radius: var(--radius-md); padding: 12px 14px; max-width: 420px; margin: 0 auto; }
.filechip__ic { width: 40px; height: 40px; border-radius: var(--radius-sm); flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 20px; background: var(--success-tint); color: var(--success-dark); }
.filechip__m { flex: 1; min-width: 0; }
.filechip__m b { font: var(--fw-medium) 13.5px/1.3 var(--font-sans); color: var(--text-primary); display: block; }
.filechip__m small { font: 400 11.5px/1.3 var(--font-sans); color: var(--text-tertiary); }

/* preview table of uploaded data */
.datatable-wrap { margin-top: 18px; border-radius: var(--radius-md); box-shadow: var(--ring); overflow: hidden; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- Analyse step ---- */
.analyse { text-align: center; padding: 36px 24px; }
.ivy-orb { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 20px; position: relative;
  background: radial-gradient(circle at 38% 32%, #fff, var(--green-400) 42%, var(--green-700) 100%);
  box-shadow: 0 0 0 0 var(--primary-tint-16); animation: orbpulse 1.6s var(--ease-standard) infinite; }
.ivy-orb i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; }
@keyframes orbpulse { 0% { box-shadow: 0 0 0 0 rgba(46,125,50,.30); } 70% { box-shadow: 0 0 0 18px rgba(46,125,50,0); } 100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); } }
.analyse h3 { font: var(--fw-semibold) 18px/1.3 var(--font-sans); color: var(--text-primary); margin: 0 0 6px; }
.analyse > p { font: 400 13px/1.5 var(--font-sans); color: var(--text-tertiary); margin: 0 auto 22px; max-width: 360px; }
.analyse__steps { max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.astep { display: flex; align-items: center; gap: 11px; font: var(--fw-medium) 13px/1.3 var(--font-sans); color: var(--text-disabled);
  transition: color var(--dur-base) var(--ease-standard); }
.astep i { font-size: 18px; flex: none; }
.astep--done { color: var(--text-primary); }
.astep--done i { color: var(--success-dark); }
.astep--run { color: var(--text-primary); }
.astep--run i { color: var(--primary); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Review step ---- */
.rec-hero { background: var(--ai-banner); box-shadow: var(--ring); border-radius: var(--radius-lg); padding: 20px 22px;
  display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.rec-hero__main { flex: 1; min-width: 0; }
.rec-hero__by { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semibold) 11px/1 var(--font-sans);
  letter-spacing: .05em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.rec-hero h3 { font: var(--fw-semibold) 24px/1.2 var(--font-sans); color: var(--text-primary); margin: 0 0 4px; letter-spacing: -.01em; }
.rec-hero p { font: 400 13.5px/1.5 var(--font-sans); color: var(--text-secondary); margin: 0; }
.confbig { text-align: center; flex: none; }
.confbig__ring { --p: 94; width: 86px; height: 86px; border-radius: 50%; margin: 0 auto 6px;
  background: conic-gradient(var(--primary) calc(var(--p)*1%), var(--primary-tint-16) 0); position: relative;
  display: flex; align-items: center; justify-content: center; }
.confbig__ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--green-50); }
.confbig__ring b { position: relative; z-index: 1; font: var(--fw-semibold) 22px/1 var(--font-sans); color: var(--primary); }
.confbig small { font: var(--fw-medium) 11px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }

.reason { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.reason li { display: flex; gap: 10px; font: 400 13.5px/1.5 var(--font-sans); color: var(--text-secondary); }
.reason li i { color: var(--primary); font-size: 17px; flex: none; margin-top: 1px; }
.reason li b { color: var(--text-primary); font-weight: var(--fw-medium); }

/* ---- Feature celebration banner (top of Ivy tab) ---- */
.featbanner { display: flex; align-items: center; gap: 14px; background: var(--ai-panel); color: #fff;
  border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 16px; }
.featbanner__ic { width: 42px; height: 42px; border-radius: var(--radius-md); flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 22px; background: rgba(255, 255, 255, .12); color: #fff; }
.featbanner__m { flex: 1; min-width: 0; }
.featbanner__m b { display: flex; align-items: center; gap: 7px; font: var(--fw-semibold) 16px/1.3 var(--font-sans); color: #fff; }
.featbanner__m b i { color: var(--green-400); }
.featbanner__m p { margin: 3px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: rgba(255, 255, 255, .78); }
.featbanner__live { display: inline-flex; align-items: center; gap: 6px; flex: none;
  font: var(--fw-semibold) 11px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase;
  color: var(--green-400); background: rgba(86, 202, 0, .16); padding: 7px 11px; border-radius: var(--radius-pill); }
.featbanner__live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); }

/* ---- Trajectory: projected IVF success score ---- */
.trajscore { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: var(--hairline); }
.trajscore__m b { display: block; font: var(--fw-semibold) 15px/1.3 var(--font-sans); color: var(--text-primary); }
.trajscore__m p { margin: 4px 0 0; font: 400 12.5px/1.45 var(--font-sans); color: var(--text-tertiary); }

/* ---- Impact panel (cost saved + outcome uplift) ---- */
.impact { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .impact { grid-template-columns: 1fr; } }
.impact__fig { background: var(--surface-page-2); box-shadow: var(--ring); border-radius: var(--radius-md); padding: 14px 16px; }
.impact__fig small { display: block; font: var(--fw-semibold) 11px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.impact__fig b { display: block; margin: 7px 0 5px; font: var(--fw-semibold) 21px/1.15 var(--font-sans); letter-spacing: -.01em; }
.impact__fig span { font: 400 12px/1.45 var(--font-sans); color: var(--text-tertiary); }
.impact__fig--save b { color: var(--success-dark); }
.impact__fig--out b { color: var(--primary); }
.impact__sys { margin-top: 12px; display: flex; gap: 7px; align-items: flex-start; }
.impact__sys i { color: var(--text-disabled); margin-top: 1px; }

/* ---- Alternate protocols (difference + cost) ---- */
.protab { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.protab thead th { text-align: left; font: var(--fw-semibold) 11px/1.4 var(--font-sans); letter-spacing: .03em; text-transform: uppercase; color: var(--text-tertiary); padding: 8px 12px; border-bottom: var(--hairline); white-space: nowrap; }
.protab tbody td { padding: 11px 12px; border-bottom: var(--hairline); font: 400 13px/1.45 var(--font-sans); color: var(--text-secondary); vertical-align: top; }
.protab tbody tr:last-child td { border-bottom: 0; }
.protab thead th:nth-child(1), .protab tbody td:nth-child(1) { width: 24%; }
.protab thead th:nth-child(2), .protab tbody td:nth-child(2) { width: 40%; }
.protab thead th:nth-child(3), .protab tbody td:nth-child(3) { width: 18%; text-align: right; }
.protab thead th:nth-child(4), .protab tbody td:nth-child(4) { width: 18%; }
.protab__rec td { background: var(--primary-tint-08); }
.protab__succ b { font: var(--fw-semibold) 14px/1.2 var(--font-sans); color: var(--text-primary); }
.protab__rec .protab__succ b { color: var(--success-dark); }
.protab__delta { display: block; margin-top: 3px; font: var(--fw-medium) 11px/1.2 var(--font-sans); color: var(--error-dark); }
.protab__delta--same { color: var(--text-tertiary); }

/* core recommendation section — elevated/focused treatment */
.prosec { padding: 0; overflow: hidden; box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--primary-tint-16); }
.prosec__head { padding: 16px 20px 14px; border-bottom: var(--hairline); background: var(--surface-page-2); }
.prosec__title { display: flex; align-items: center; gap: 8px; font: var(--fw-semibold) 18px/1.25 var(--font-sans); color: var(--text-primary); margin: 0 0 4px; letter-spacing: -.01em; }
.prosec__title i { color: var(--primary); }
.prosec__sub { font: 400 13px/1.5 var(--font-sans); color: var(--text-secondary); margin: 0; }
.prosec .protab th:first-child, .prosec .protab td:first-child { padding-left: 20px; }
.prosec .protab th:last-child, .prosec .protab td:last-child { padding-right: 20px; }
.protab__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font: var(--fw-medium) 13px/1.35 var(--font-sans); color: var(--text-primary); }
.protab__name i { font-size: 16px; color: var(--primary); flex: none; }
.protab__nm { min-width: 0; }
.protab__tag { font: var(--fw-semibold) 9.5px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--primary); background: var(--primary-tint-12); padding: 3px 6px; border-radius: var(--radius-pill); white-space: nowrap; }
.protab__cost { text-align: right; font: var(--fw-semibold) 13px/1.4 var(--font-sans); color: var(--text-primary); white-space: nowrap; }

/* ---- Cycle trajectory journey + prep ---- */
.journey { display: flex; gap: 0; margin: 6px 0 16px; }
.journey__s { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; text-align: center; }
.journey__s::before { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px; background: var(--grey-300); z-index: 0; }
.journey__s:first-child::before { display: none; }
.journey__dot { width: 18px; height: 18px; border-radius: 50%; z-index: 1; background: var(--surface-card); box-shadow: inset 0 0 0 2px var(--grey-300); }
.journey__lbl { font: var(--fw-medium) 10.5px/1.2 var(--font-sans); color: var(--text-disabled); max-width: 74px; }
.journey__s--done .journey__dot { background: var(--success-dark); box-shadow: none; }
.journey__s--done::before { background: var(--success-dark); }
.journey__s--current .journey__dot { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint-16); }
.journey__s--current::before { background: var(--primary); }
.journey__s--done .journey__lbl { color: var(--text-secondary); }
.journey__s--current .journey__lbl { color: var(--primary); font-weight: var(--fw-semibold); }

.prep { background: var(--surface-page-2); box-shadow: var(--ring); border-radius: var(--radius-md); padding: 14px 16px; }
.prep--warn { background: var(--warning-tint); box-shadow: inset 0 0 0 1px rgba(230, 162, 0, .3); }
.prep__head { display: flex; align-items: center; gap: 8px; font: var(--fw-semibold) 13px/1.3 var(--font-sans); color: var(--text-primary); margin-bottom: 11px; }
.prep__head i { color: var(--primary); font-size: 17px; }
.prep--warn .prep__head i { color: var(--warning-dark); }
.prep ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.prep li { display: flex; gap: 10px; font: 400 13px/1.5 var(--font-sans); color: var(--text-secondary); }
.prep li i { color: var(--primary); font-size: 16px; flex: none; margin-top: 1px; }
.prep--warn li i { color: var(--warning-dark); }

/* evidence mini stats */
.evstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 18px; }
.ev { background: var(--surface-page-2); border-radius: var(--radius-md); box-shadow: var(--ring); padding: 12px 14px; }
.ev b { display: block; font: var(--fw-medium) 22px/1 var(--font-sans); color: var(--text-primary); letter-spacing: -.01em; }
.ev small { display: block; margin-top: 5px; font: 400 11px/1.3 var(--font-sans); color: var(--text-tertiary); }
.ev .trend { font: var(--fw-medium) 11px/1 var(--font-sans); color: var(--success-dark); }

/* labelled bar chart */
.evchart { padding-top: 6px; }
.chart { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding-top: 8px; }
.chart .bar { flex: 1; border-radius: 5px 5px 2px 2px; min-height: 4px; background: var(--chart-green);
  transition: height var(--dur-slow) var(--ease-out); }
.chart__x { display: flex; gap: 10px; margin-top: 8px; }
.chart__x span { flex: 1; text-align: center; font: 400 10px/1.3 var(--font-sans); color: var(--text-disabled); }

/* multi-series trend chart */
.trendchart { padding-top: 2px; }
.trendchart__legend { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.trendchart__legend span { display: inline-flex; align-items: center; gap: 7px; font: 400 12px/1 var(--font-sans); color: var(--text-tertiary); }
.trendchart__legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.trendchart__legend b { color: var(--text-primary); font-weight: var(--fw-medium); }
.trendchart__plot { position: relative; }
.trendchart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.trendchart__grid { stroke: var(--border); stroke-width: 1; }
.trendchart__ytick { position: absolute; left: 0; transform: translateY(-50%); box-sizing: border-box;
  text-align: right; padding-right: 8px; font: var(--fw-medium) 11px/1 var(--font-sans); color: var(--text-tertiary); white-space: nowrap; }
.trendchart__plabel { position: absolute; font: var(--fw-semibold) 10.5px/1 var(--font-sans); white-space: nowrap; pointer-events: none; }
.trendchart__x { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 2px; }
.trendchart__x span { font: var(--fw-medium) 11px/1.3 var(--font-sans); color: var(--text-tertiary); }

/* score ring (Transfer Readiness etc.) */
.scorering-wrap { text-align: center; flex: none; }
.scorering { --p: 75; --ring: var(--primary); width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 6px;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--primary-tint-16) 0); position: relative;
  display: flex; align-items: center; justify-content: center; }
.scorering::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--green-50); }
.scorering b { position: relative; z-index: 1; font: var(--fw-semibold) 30px/1 var(--font-sans); color: var(--ring); }
.scorering small { position: relative; z-index: 1; font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--text-tertiary); }
.scorering-lbl { font: var(--fw-medium) 11px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }

/* risk gauge (OHSS Shield) */
.gauge__head { margin-bottom: 12px; }
.gauge__level { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semibold) 13px/1 var(--font-sans); padding: 6px 12px; border-radius: var(--radius-pill); }
.gauge__level--low { background: var(--success-tint); color: var(--success-dark); }
.gauge__level--moderate { background: var(--warning-tint); color: var(--warning-dark); }
.gauge__level--high { background: var(--error-tint); color: var(--error-dark); }
.gauge__track { height: 10px; border-radius: var(--radius-pill); position: relative;
  background: linear-gradient(90deg, var(--success) 0%, var(--warning) 55%, var(--error) 100%); }
.gauge__marker { position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px var(--ink), 0 1px 3px rgba(0, 0, 0, .3); }
.gauge__labels { display: flex; justify-content: space-between; margin-top: 7px; }
.gauge__labels span { font: 400 11px/1.3 var(--font-sans); color: var(--text-tertiary); }

/* two-option comparison bars (Lab Smart AI) */
.compare { display: flex; flex-direction: column; gap: 12px; }
.compare__row { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 12px; }
.compare__lbl { font: var(--fw-medium) 13px/1.3 var(--font-sans); color: var(--text-secondary); }
.compare__bar { height: 12px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.compare__bar i { display: block; height: 100%; border-radius: var(--radius-pill); }
.compare__val { font: var(--fw-semibold) 14px/1 var(--font-sans); color: var(--text-primary); text-align: right; }
.compare__row--win .compare__lbl { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* generic action segmented control (fresh/freeze, method, etc.) */
.seg { display: inline-flex; gap: 6px; }
.seg button { border: 0; cursor: pointer; background: var(--surface-card); box-shadow: var(--ring);
  border-radius: var(--radius-md); padding: 9px 16px; font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--text-secondary); transition: var(--transition-base); }
.seg button:hover { box-shadow: var(--ring-primary); color: var(--primary); }
.seg button.on { background: var(--primary); color: #fff; box-shadow: none; }
.actionrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: var(--hairline); }
.actionrow > label { font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--text-secondary); }

/* draft message to patient (editable) */
.draft { background: var(--surface-card); box-shadow: var(--ring); border-radius: var(--radius-md); padding: 14px; }
.draft__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.draft__top b { font: var(--fw-semibold) 13px/1.3 var(--font-sans); color: var(--text-primary); }
.draft textarea { width: 100%; border: 0; box-shadow: var(--ring); border-radius: var(--radius-sm); resize: vertical;
  padding: 11px 13px; font: 400 13px/1.55 var(--font-sans); color: var(--text-primary); background: var(--surface-page-2); min-height: 80px; }
.draft textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--primary); }

/* override note */
.override { margin-top: 14px; background: var(--warning-tint); box-shadow: inset 0 0 0 1px rgba(230,162,0,.3);
  border-radius: var(--radius-md); padding: 14px; }
.override b { font: var(--fw-semibold) 13px/1.3 var(--font-sans); color: var(--text-primary); }
.override textarea { width: 100%; margin-top: 8px; border: 0; box-shadow: var(--ring); border-radius: var(--radius-sm);
  padding: 10px 12px; font: 400 13px/1.5 var(--font-sans); background: var(--surface-card); min-height: 60px; resize: vertical; }
.override textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--warning-dark); }

/* dose editor (inline numeric) */
.doseedit { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.doseedit label { font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--text-secondary); }
.stepper-num { display: inline-flex; align-items: center; gap: 0; box-shadow: var(--ring); border-radius: var(--radius-sm); overflow: hidden; }
.stepper-num button { width: 34px; height: 38px; border: 0; background: var(--surface-card); color: var(--primary); font-size: 18px; cursor: pointer; }
.stepper-num button:hover { background: var(--primary-tint-08); }
.stepper-num input { width: 64px; height: 38px; border: 0; text-align: center; font: var(--fw-semibold) 15px/1 var(--font-sans);
  color: var(--text-primary); background: var(--surface-card); }
.stepper-num span { padding: 0 12px; font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--text-tertiary); }

/* side rail */
.rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; }
.rail__patient { display: flex; align-items: center; gap: 12px; }
.rail__patient b { font: var(--fw-semibold) 15px/1.3 var(--font-sans); color: var(--text-primary); display: block; }
.rail__patient small { font: 400 12px/1.3 var(--font-sans); color: var(--text-tertiary); }
.kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: var(--hairline); }
.kv:last-child { border-bottom: 0; }
.kv span { font: 400 12.5px/1.4 var(--font-sans); color: var(--text-tertiary); }
.kv b { font: var(--fw-medium) 12.5px/1.4 var(--font-sans); color: var(--text-primary); }
/* footer action bar */
.footbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 4px; margin-top: 20px; border-top: var(--hairline); }
.footbar__r { display: flex; gap: 10px; }
.footnote { font: 400 12px/1.4 var(--font-sans); color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.footnote i { color: var(--text-disabled); }

/* ---- Released step ---- */
.released { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: center; padding: 12px 0; }
@media (max-width: 1100px) { .released { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.released__ok { width: 64px; height: 64px; border-radius: 50%; background: var(--success-tint); color: var(--success-dark);
  display: flex; align-items: center; justify-content: center; font-size: 34px; margin-bottom: 18px; }
.released h2 { font: var(--fw-semibold) 26px/1.25 var(--font-sans); color: var(--text-primary); margin: 0 0 8px; letter-spacing: -.01em; }
.released > div > p { font: 400 14px/1.6 var(--font-sans); color: var(--text-secondary); margin: 0 0 22px; max-width: 460px; }
.releaselog { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.releaselog .l { display: flex; gap: 11px; align-items: flex-start; font: 400 13px/1.5 var(--font-sans); color: var(--text-secondary); }
.releaselog .l i { color: var(--success-dark); font-size: 18px; flex: none; }
.releaselog .l b { color: var(--text-primary); font-weight: var(--fw-medium); }
.phone-cap { text-align: center; margin-top: 12px; font: 400 11.5px/1.4 var(--font-sans); color: var(--text-tertiary); }

/* modal */
.overlay { position: fixed; inset: 0; background: rgba(46,38,61,0.32); display: flex; align-items: center;
  justify-content: center; z-index: 50; animation: fade var(--dur-base) var(--ease-out); }
.modal { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
  padding: 30px; width: 400px; animation: pop var(--dur-base) var(--ease-out); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* generic placeholder */
.placeholder { text-align: center; padding: 70px 20px; color: var(--text-tertiary); }
.placeholder i { font-size: 40px; color: var(--text-disabled); }
.placeholder h3 { font: var(--fw-semibold) 17px/1.3 var(--font-sans); color: var(--text-secondary); margin: 14px 0 4px; }
.placeholder p { font: 400 13px/1.5 var(--font-sans); margin: 0; }

/* ============================================================
   Ivy — Model Performance (clinic / population report)
   ============================================================ */
.perflead { font: 400 13.5px/1.6 var(--font-sans); color: var(--text-secondary); margin: 0 0 16px; max-width: 760px; }
.lh-stat { display: flex; flex-direction: column; }
.lh-stat__sub { margin-top: auto; padding-top: 8px; font: 400 11px/1.4 var(--font-sans); color: var(--text-tertiary); }
.kpis { margin-bottom: 16px; align-items: stretch; }
/* keep right-aligned table action buttons on a straight edge */
.actcell { display: inline-flex; justify-content: flex-end; min-width: 108px; }
.val-flag { color: var(--error-dark); font-weight: var(--fw-semibold); }
.perfnote { margin-top: 12px; display: flex; gap: 7px; align-items: flex-start; }
.perfnote i { color: var(--text-disabled); margin-top: 1px; }
.perfdisc { margin-top: 18px; display: flex; gap: 7px; align-items: flex-start; color: var(--text-tertiary); }
.perfdisc i { color: var(--text-disabled); margin-top: 1px; }

/* segment table — built on .prosec / .protab (6 cols, two-line headers) */
.segsec { margin-top: 16px; }
.segtab thead th, .segtab tbody td, .segtab tfoot td { width: auto; }
.segtab tbody td, .segtab tfoot td { padding-top: 15px; padding-bottom: 15px; }
.segtab thead th { padding-bottom: 11px; }
.segtab thead th:nth-child(1), .segtab tbody td:nth-child(1), .segtab tfoot td:nth-child(1) { width: 34%; text-align: left; }
.segtab thead th:nth-child(2), .segtab tbody td:nth-child(2), .segtab tfoot td:nth-child(2),
.segtab thead th:nth-child(3), .segtab tbody td:nth-child(3), .segtab tfoot td:nth-child(3),
.segtab thead th:nth-child(4), .segtab tbody td:nth-child(4), .segtab tfoot td:nth-child(4),
.segtab thead th:nth-child(5), .segtab tbody td:nth-child(5), .segtab tfoot td:nth-child(5) { width: 16.5%; text-align: center; }
.segtab thead th.segtab__r { text-align: center; white-space: normal; line-height: 1.3; }
.segtab thead th.segtab__r span { display: block; font: var(--fw-medium) 10px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-disabled); }
.segtab__sub { margin-top: 3px; font: 400 11.5px/1.4 var(--font-sans); color: var(--text-tertiary); }
.segtab__num { text-align: center; font: var(--fw-medium) 13px/1.3 var(--font-sans); color: var(--text-secondary); white-space: nowrap; vertical-align: middle; }
.segtab .protab__cost { text-align: center; vertical-align: middle; }
.segtab__base { color: var(--text-tertiary); }
.segtab th.segtab__win { color: var(--primary); }
.segtab td.segtab__win, .segtab th.segtab__win { background: var(--primary-tint-08); }
.segtab__rec b { display: block; font: var(--fw-semibold) 16px/1.15 var(--font-sans); color: var(--success-dark); }
.segtab__delta { display: block; margin-top: 3px; font: var(--fw-semibold) 10.5px/1.2 var(--font-sans); color: var(--success-dark); }
.segtab__lb { color: var(--text-primary); }
.segtab tfoot .segtab__tot td { border-top: 1.5px solid var(--primary-tint-16); border-bottom: 0; padding-top: 14px; }
.segtab tfoot .segtab__tot td:first-child .protab__nm { font-weight: var(--fw-semibold); color: var(--text-primary); }

/* by-feature savings bars */
.bylane { display: flex; flex-direction: column; gap: 14px; }
.bylane__row { display: grid; grid-template-columns: 220px 1fr 56px; align-items: center; gap: 14px; }
.bylane__lbl b { display: block; font: var(--fw-medium) 13px/1.3 var(--font-sans); color: var(--text-primary); }
.bylane__lbl small { display: block; margin-top: 2px; font: 400 11px/1.35 var(--font-sans); color: var(--text-tertiary); }
.bylane__bar { height: 9px; border-radius: var(--radius-pill); background: var(--surface-page-2); box-shadow: var(--ring); overflow: hidden; }
.bylane__bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--chart-green); }
.bylane__val { text-align: right; font: var(--fw-semibold) 13px/1.3 var(--font-sans); color: var(--success-dark); }
@media (max-width: 640px) { .bylane__row { grid-template-columns: 1fr 48px; } .bylane__bar { grid-column: 1 / -1; order: 3; } }

/* ============================================================
   OS settings screen — section cards
   ============================================================ */
.setgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 820px) { .setgrid { grid-template-columns: 1fr; } }
.setcard { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; cursor: pointer;
  background: var(--surface-card); border: 0; box-shadow: var(--ring); border-radius: var(--radius-md);
  padding: 16px 18px; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.setcard:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.setcard__ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center;
  justify-content: center; font-size: 20px; color: var(--primary); background: var(--primary-tint-08); }
.setcard__b { flex: 1; min-width: 0; }
.setcard__b b { display: block; font: var(--fw-semibold) 14px/1.3 var(--font-sans); color: var(--text-primary); }
.setcard__b p { margin: 3px 0 6px; font: 400 12.5px/1.45 var(--font-sans); color: var(--text-tertiary); }
.setcard__meta { font: var(--fw-medium) 11.5px/1 var(--font-sans); color: var(--primary); }
.setcard__chev { color: var(--text-disabled); font-size: 20px; flex: none; }

/* ============================================================
   IVF Journey Projection (couple, first visit)
   ============================================================ */
/* verdict hero */
.vhero { align-items: center; }
.vhero__tag { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semibold) 11px/1 var(--font-sans);
  letter-spacing: .03em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-pill); margin-bottom: 10px; }
.vhero__tag--go { color: var(--success-dark); background: var(--success-tint); }
.vhero__tag--hold { color: var(--warning-dark); background: var(--warning-tint); }
.vhero__score { flex: none; }

/* couple snapshot — two report columns */
.couple { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .couple { grid-template-columns: 1fr; } }
.couple__col { background: var(--surface-page-2); box-shadow: var(--ring); border-radius: var(--radius-md); padding: 14px 16px; }
.couple__h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: var(--hairline); }
.couple__ic { width: 34px; height: 34px; border-radius: var(--radius-md); flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 18px; color: var(--primary); background: var(--primary-tint-08); }
.couple__h b { display: block; font: var(--fw-semibold) 14px/1.3 var(--font-sans); color: var(--text-primary); }
.couple__h small { font: 400 11.5px/1.3 var(--font-sans); color: var(--text-tertiary); }
.couple__rows { display: flex; flex-direction: column; }
.vrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: var(--hairline); }
.vrow:last-child { border-bottom: 0; }
.vchip { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.vchip--ok { background: var(--success-dark); }
.vchip--watch { background: var(--chart-amber); }
.vchip--flag { background: var(--error-dark); }
.vrow__m { flex: 1; min-width: 0; }
.vrow__k { display: block; font: var(--fw-medium) 12.5px/1.3 var(--font-sans); color: var(--text-primary); }
.vrow__note { display: block; font: 400 11px/1.3 var(--font-sans); color: var(--text-tertiary); }
.vrow__v { font: var(--fw-semibold) 13px/1.2 var(--font-sans); color: var(--text-primary); white-space: nowrap; text-align: right; }

/* optimisation plan — Her / Him action columns + projection footer */
.optplan { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .optplan { grid-template-columns: 1fr; } }
.optplan__col { background: var(--surface-page-2); box-shadow: var(--ring); border-radius: var(--radius-md); padding: 14px 16px; }
.optplan__col--solo { display: flex; flex-direction: column; }
.optplan__clear { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 16px 8px; }
.optplan__clear i { font-size: 26px; color: var(--success-dark); }
.optplan__clear b { font: var(--fw-medium) 12.5px/1.4 var(--font-sans); color: var(--text-secondary); }
.optplan__clear span { font: 400 11.5px/1.4 var(--font-sans); color: var(--text-tertiary); }
.optplan__h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: var(--hairline); }
.optplan__ic { width: 32px; height: 32px; border-radius: var(--radius-md); flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 17px; color: var(--primary); background: var(--primary-tint-08); }
.optplan__h b { display: block; font: var(--fw-semibold) 13.5px/1.3 var(--font-sans); color: var(--text-primary); }
.optplan__h small { font: 400 11px/1.3 var(--font-sans); color: var(--text-tertiary); }
.optplan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.optplan__list li { display: flex; gap: 9px; align-items: flex-start; }
.optplan__list li i { color: var(--primary); font-size: 16px; flex: none; margin-top: 1px; }
.optplan__list li b { display: block; font: var(--fw-medium) 12.5px/1.4 var(--font-sans); color: var(--text-primary); }
.optplan__list li span { display: block; font: 400 11.5px/1.4 var(--font-sans); color: var(--text-tertiary); }
.optplan__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px;
  background: var(--primary-tint-08); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--primary-tint-16); }
.optplan__foot small { display: block; font: var(--fw-semibold) 10px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.optplan__foot > div b { font: var(--fw-semibold) 22px/1.1 var(--font-sans); }
.optplan__now { color: var(--text-tertiary); }
.optplan__proj { color: var(--success-dark); }
.optplan__foot > i { color: var(--text-disabled); font-size: 20px; }
.optplan__cap { flex: 1; min-width: 160px; font: 400 11.5px/1.45 var(--font-sans); color: var(--text-tertiary); }