/* Providers page only (v3/providers/). Shared components live in ../v3.css.
   The classification engine block is byte-locked: nothing here targets its
   selectors. It gets its container width from .engine-host, its one token
   (--head-blue) from :root below, and its finite arrow from v3.css §18. */

/* the engine's own CSS reads this token (live site value) */
:root { --head-blue: #4a8abf; }

/* Clinician nav: "For patients" + the "Add your clinic" pill is wider than the
   shared nav spacing allows below 430px (it ran into the right gutter at
   360–416). Same tightened spacing as the handoff page (provider-handoff.css),
   applied up to 429px so 402 and 414px phones fit too. */
@media (max-width: 429px) {
  .nav-inner { gap: 8px; }
  .nav .brand { gap: 8px; }
  .nav-link { padding: 0 6px; }
  .nav-links .btn { margin-left: 0; padding: 0 14px; }
}
@media (max-width: 369px) {
  .nav-link { padding: 0 2px; }
  .nav-links .btn { padding: 0 10px; }
}

/* ── 1 Hero ─────────────────────────────────────────────── */
.pro-hero { padding-top: 32px; }
@media (min-width: 600px) { .pro-hero { padding-top: 48px; } }
/* centered like home and Plus, so the wide screen has no empty right half
   above the explorer */
.pro-hero-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pro-hero-head > .kicker::before { content: none; }
.pro-hero .t-display { max-width: 12em; }
.pro-hero .t-lead { margin-top: var(--h2-lead); max-width: 34em; text-wrap: balance; }
.pro-hero .actions { margin-top: var(--lead-cta); justify-content: center; }
/* phone: the two buttons can't share a row, so they stack at one width */
@media (max-width: 479px) {
  .pro-hero .actions { flex-direction: column; align-items: stretch; width: min(100%, 300px); }
}

/* ── 1b Report explorer ─────────────────────────────────── */
/* One part of the report on stage at a time. The page script adds .is-tabbed
   and un-hides the tab row; without it the four parts stack in order.
   Phone and tablet: the selected panel replaces the last one and fades in.
   ≥1024: every panel shares one grid cell, so the stage keeps the height of
   the tallest part and switching never moves the page; panels crossfade. */
.rx { margin-top: 48px; }
@media (min-width: 1024px) { .rx { margin-top: 72px; } }

.rx-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rx-tabs[hidden] { display: none; }
@media (min-width: 768px) {
  .rx-tabs { display: flex; width: fit-content; margin-inline: auto; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair); }
}
.rx-tab {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink);
  font: 500 15px/1.15 var(--sans); white-space: nowrap; cursor: pointer;
  transition: background-color 180ms var(--ease-std), border-color 180ms var(--ease-std), color 180ms var(--ease-std);
}
@media (min-width: 768px) { .rx-tab { padding: 0 20px; border-color: transparent; background: transparent; } }
.rx-tab::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--k); }
.rx-tab:hover { color: var(--ink-hi); }
.rx-tab[aria-selected="true"] { color: var(--ink-hi); background: var(--k-fill); border-color: var(--k-edge); }
.rx-tab:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }
.rx-tab.k-sky { --k-fill: rgba(168, 196, 212, .12); --k-edge: rgba(168, 196, 212, .45); }
.rx-tab.k-ember { --k-fill: rgba(236, 170, 104, .13); --k-edge: rgba(236, 170, 104, .45); }
.rx-tab.k-mig { --k-fill: rgba(155, 122, 204, .16); --k-edge: rgba(155, 122, 204, .55); }
.rx-tab.k-weather { --k-fill: rgba(243, 154, 99, .12); --k-edge: rgba(243, 154, 99, .45); }
/* phone: "Treatment" keeps the 2×2 tab grid on one line per tab */
@media (max-width: 767px) { .rx-long { display: none; } }

.rx-stage { margin-top: 28px; }
@media (min-width: 1024px) { .rx-stage { margin-top: 40px; } }
.rx-panel + .rx-panel { margin-top: 72px; }
.is-tabbed .rx-panel + .rx-panel { margin-top: 0; }
.is-tabbed .rx-panel.is-off { display: none; }
.rx-panel.is-entering { animation: rx-in 200ms var(--ease-std) both; }
@keyframes rx-in { from { opacity: 0; } }
@media (min-width: 1024px) {
  .is-tabbed .rx-stage { display: grid; }
  .is-tabbed .rx-panel { grid-area: 1 / 1; }
  .is-tabbed .rx-panel.is-off { display: grid; visibility: hidden; opacity: 0; }
  .is-ready .rx-panel { transition: opacity 200ms var(--ease-std), visibility 0s; }
  .is-ready .rx-panel.is-off { transition: opacity 200ms var(--ease-std), visibility 0s linear 200ms; }
  .rx-panel.is-entering { animation: none; }
}

/* panel: title and line, the object, then its key (legend, flags, next) */
.rx-panel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "visual" "more"; gap: 24px; align-content: start; }
.rx-panel:focus-visible { outline: 2px solid var(--ember-edge); outline-offset: 8px; border-radius: 12px; }
.rx-head { grid-area: head; }
.rx-head p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 34em; text-wrap: pretty; }
.rx-visual { grid-area: visual; margin: 0; min-width: 0; }
.rx-more { grid-area: more; min-width: 0; }
.rx-more:not(:has(> :not([hidden]))) { display: none; }
.rx-next { margin-top: 4px; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
.rx-more > * + .rx-next { margin-top: 24px; }
@media (min-width: 1024px) {
  .rx-panel {
    grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto 1fr;
    grid-template-areas: "visual head" "visual more" "visual ."; column-gap: 56px; row-gap: 0; align-items: start;
  }
  .rx-head { padding-top: 4px; }
  .rx-more { margin-top: 28px; }
  .rx-more .marker-legend { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 1180px) { .rx-panel { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 64px; } }

/* calendar: the report paper */
.rx .report { isolation: isolate; }
.rx .glow { --glow: rgba(236, 170, 104, .09); width: 110%; aspect-ratio: 1.6; }
.rx .report-paper { z-index: 1; }
.rx .marker { z-index: 2; }
@media (max-width: 599px) { .rx .report-paper { border-radius: 6px; } }
.rx-more .marker-legend { margin-top: 0; }

/* chart note excerpt: the app's mono note, short and colored like the live
   page's excerpt (headings ember, reductions green, the closing line muted) */
.note {
  padding: 20px; background: var(--surface); border: 1px solid var(--hair); border-radius: 20px;
  font: 400 14px/1.6 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums;
}
.note p { overflow-wrap: anywhere; }
.note .nh { color: var(--ember); font-weight: 600; letter-spacing: .02em; }
.note .nh:not(:first-child) { margin-top: 1.6em; }
.note .nh--alert { color: #e8a0a0; }
.note .nb { color: var(--ink-hi); font-weight: 600; }
.note .nd { margin-top: 1.6em; color: var(--ink-mut); }
.note .np + .np { margin-top: .5em; }
.note i { font-style: normal; color: var(--ink-mut); }
.note .nv { color: var(--ink-hi); }
.note .ng { color: var(--green); }
.note .nm { color: var(--ink-mut); }
.nrows { margin: 0; }
.nrows > div { display: grid; grid-template-columns: 15ch minmax(0, 1fr); column-gap: 1ch; }
.nrows dt::after { content: ":"; }
.nrows dd { margin: 0; display: flex; flex-wrap: wrap; column-gap: 1ch; }
.nrows .nv { min-width: 14ch; }
@media (min-width: 600px) { .note { padding: 24px 28px; font-size: 15px; } }
@media (min-width: 1180px) { .note { padding: 28px 32px; } }

/* treatment and impact charts: the app's two-point treatment chart, drawn in
   SVG; dots and labels are HTML placed in viewBox units (--x of 600, --y of
   --vh) so they stay round and at the site's type sizes at every width */
.tchart, .ichart-card { background: #101010; border: 1px solid var(--hair); border-radius: 20px; padding: 20px 20px 24px; }
@media (min-width: 600px) { .tchart, .ichart-card { padding: 24px 28px 28px; } }
.tchart-title { font-size: 14px; line-height: 1.3; color: var(--ink-mut); }
.tchart-plot { --vh: 200; position: relative; aspect-ratio: 600 / 200; margin-top: 40px; }
.tchart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc-base { stroke: #2a2a2a; stroke-width: 1.5; }
.tc-line { fill: none; stroke: var(--mig); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 600px) { .tc-line { stroke-width: 4; } }
.tc-area { fill: var(--mig); fill-opacity: .08; }
.tc-dot, .tc-val, .tc-delta { position: absolute; left: calc(var(--x) / 600 * 100%); top: calc(var(--y) / var(--vh) * 100%); }
.tc-dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--mig); }
.tc-dot--open { background: #101010; border: 2px solid var(--mig); }
.tc-dot--end { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.tc-val { translate: -50% calc(-100% - 12px); font: 600 22px/1 var(--serif); color: var(--ink-mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-val--mig { color: var(--mig); }
.tc-delta { translate: -50% calc(-100% - 12px); font: 600 15px/1 var(--sans); color: var(--green); font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .tc-val { font-size: 26px; } .tc-delta { font-size: 16px; } }
.tchart-marks { position: relative; height: 66px; margin-top: 10px; }
.tc-mark { position: absolute; top: 0; left: calc(var(--x) / 600 * 100%); translate: -50% 0; display: grid; justify-items: center; gap: 6px; }
.tc-mark::before { content: ""; width: 1px; height: 8px; }
.tc-mark--tick::before { background: #2a2a2a; }
.tc-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: 14px; border: 1px solid #2a2a2a; background: #1a1a1a; font-size: 14px; line-height: 1.1; color: var(--ink-mut); white-space: nowrap; }
.tc-pill--botox { border-color: #7a5a6a; background: #191619; color: var(--ink-hi); }
.tc-pill--emg { border-color: #4f6478; background: #15181b; color: var(--ink-hi); }
.tc-pill--recent { border-color: rgba(232, 230, 227, .18); color: var(--ink-hi); }
.tc-date { font-size: 14px; line-height: 1.2; color: var(--ink-mut); white-space: nowrap; }

/* safety flags */
.flags { margin: 0; display: grid; gap: 12px; }
.flag { background: var(--raised); border: 1px solid var(--hair); border-radius: 16px; padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
.flag dt { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink-hi); }
.flag dt::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--fc); }
.flag--moh { --fc: var(--weather); }
.flag--weak { --fc: #e8a0a0; }
.flag dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-mut); text-wrap: pretty; }
@media (min-width: 600px) and (max-width: 1023px) { .flags { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 2 Classification: the locked engine block sits in this container ── */
.engine-host { max-width: calc(1100px + 2 * var(--gutter)); margin-top: var(--stack-gap); }
.classify-head .tlink { margin-top: var(--lead-cta); }

/* ── 3 Impact days ──────────────────────────────────────── */
.impact-split { align-items: center; }
.levels { display: grid; gap: 8px; margin-top: 16px; }
.levels li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--hair); background: var(--surface); }
.levels b { min-width: 4.5em; font-size: 15px; font-weight: 600; color: var(--ink-hi); }
.levels span { font-size: 15px; line-height: 1.4; color: var(--ink-mut); }
.levels .is-impact { border-color: rgba(196, 138, 74, .42); background: rgba(196, 138, 74, .08); }
.levels .is-impact b { color: var(--impact); }
.levels .is-impact span { color: var(--ink); }

.ichart { margin: 0; }
.ichart-plot { --vh: 260; aspect-ratio: 600 / 260; }
.ic-gap { fill: var(--impact); fill-opacity: .14; }
.ic-line--impact { stroke: var(--impact); }
.ic-dot--impact { background: var(--impact); }
.tc-val--side { translate: 16px -50%; }
.tc-val--impact { color: var(--impact); }
.ichart-legend { margin: 8px 0 0; padding-top: 18px; border-top: 1px solid var(--hair); display: grid; gap: 12px; }
.il { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.il dt { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink-hi); }
.il dt::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--c); }
.il--mig { --c: var(--mig); }
.il--impact { --c: var(--impact); }
.il dd { margin: 0; display: flex; align-items: center; gap: 12px; }
.il-v { min-width: 4.6em; text-align: right; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.il-p { padding: 3px 9px; border-radius: 8px; border: 1px solid rgba(127, 176, 140, .5); background: rgba(127, 176, 140, .1); font-size: 14px; font-weight: 600; line-height: 16px; color: var(--green); white-space: nowrap; }

/* ── 4 Clinic setup ─────────────────────────────────────── */
.setup-split { align-items: start; }
.setup-split .steps { margin-top: var(--lead-cta); }
.setup-split .steps + .t-small { margin-top: 16px; }
.lobby-fig { margin-top: 32px; }
.lobby-fig .lobby-card { box-shadow: 0 14px 32px rgba(0, 0, 0, .4); }
.lobby-fig .lobby-hint { text-wrap: balance; }

/* data-path diagram */
.path-fig { margin: 0; }
.path { border: 1px solid var(--hair); border-radius: var(--radius-card); padding: 24px 20px; }
.path-row { display: grid; grid-template-columns: minmax(0, 1fr); }
.path-node { display: flex; align-items: center; gap: 14px; min-width: 0; }
.path-icon { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--raised); border: 1px solid var(--hair-2); color: var(--ink-hi); }
.path-icon svg { width: 22px; height: 22px; }
.path-label { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink-hi); }
/* phone: a column, arrows point down */
.path-arrow { position: relative; width: 44px; height: 28px; }
.path-arrow::before { content: ""; position: absolute; left: 21.5px; top: 4px; bottom: 4px; width: 1px; background: var(--hair-3); }
.path-arrow::after { content: ""; position: absolute; left: 19px; bottom: 5px; width: 6px; height: 6px; border-right: 1px solid var(--hair-3); border-bottom: 1px solid var(--hair-3); transform: rotate(45deg); }
.path-off { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--hair-2); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.path-node--off .path-icon { background: transparent; border-style: dashed; border-color: var(--hair-3); color: var(--ink-dim); }
.path-node--off .path-label { color: var(--ink-mut); text-decoration: line-through; text-decoration-color: var(--ink-mut); text-decoration-thickness: 1px; }
.path-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair-2); font-size: 14px; line-height: 1; color: var(--ink-mut); white-space: nowrap; }
.path-fig .caption { text-align: left; }
@media (min-width: 600px) {
  .path { padding: 32px 28px 28px; }
  .path-row { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: start; }
  .path-node { flex-direction: column; gap: 12px; text-align: center; }
  .path-icon { width: 52px; height: 52px; border-radius: 16px; }
  .path-icon svg { width: 24px; height: 24px; }
  .path-arrow { width: auto; height: 52px; }
  .path-arrow::before { left: 0; right: 4px; top: 25.5px; bottom: auto; width: auto; height: 1px; }
  .path-arrow::after { left: auto; right: 4px; top: 22.5px; bottom: auto; border-bottom: 0; border-top: 1px solid var(--hair-3); }
  .path-off { justify-content: center; margin-top: 28px; padding-top: 24px; }
  .path-off .path-node { flex-direction: row; text-align: left; }
  .path-off .path-icon { width: 44px; height: 44px; border-radius: 14px; }
  .path-off .path-icon svg { width: 22px; height: 22px; }
}
@media (min-width: 1024px) { .path-fig .caption { text-align: center; } }

.connect-cards { margin-top: 32px; }
.connect-card { display: flex; flex-direction: column; gap: 20px; }
.connect-card > * + * { margin-top: 0; }
.connect-text p { margin-top: 8px; color: var(--ink); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.connect-card .btn { align-self: flex-start; margin-top: auto; }
@media (min-width: 1024px) {
  .connect-cards { grid-template-columns: minmax(0, 1fr); }
  .connect-card { flex-direction: row; align-items: center; gap: 24px; }
  .connect-text { flex: 1; min-width: 0; }
  .connect-card .btn { align-self: center; margin-top: 0; flex: none; }
}

/* ── 6 Privacy strip after the FAQ band ─────────────────── */
.strip-sec { padding-bottom: 0; }

/* ── 7 Closing ──────────────────────────────────────────── */
.close .t-lead { max-width: 32em; text-wrap: balance; }
.close-contact { margin-top: 24px; }
.close-contact .tlink { font-size: 15px; min-height: 44px; align-items: center; }
@media (min-width: 1024px) {
  /* QR above its one-line caption, centered as one group (as on home) */
  .close .qr-tile { flex-direction: column; gap: 12px; margin-top: 48px; text-align: center; }
  .close .qr-tile + .close-contact { margin-top: 28px; }
}

/* ── Hit areas (phone): 44px targets without changing the look ── */
.classify-head .tlink, .strip .tlink, .close-contact .tlink { position: relative; }
.classify-head .tlink::before, .strip .tlink::before { content: ""; position: absolute; inset: -9px -6px; }

/* the FAQ title is a grid item; keep it at its own height */
.faq-title { align-self: start; }

/* ── Phone pass (Sam, Oct 16: too much text and space) ──── */
/* Tighter section rhythm on phones only, as on the home page; tablet and
   desktop keep theirs. */
@media (max-width: 599px) {
  :root { --sec-y: 44px; --stack-gap: 24px; --strip-y: 40px; }
  /* report tabs: each part is its title and its picture; the numbered
     parts keep their names and drop their descriptions */
  .rx-head p { display: none; }
  .rx-more .marker-legend li > span:not(.marker) { display: none; }
  .setup-split .steps { margin-top: var(--h2-lead); }
}