/* ==========================================================================
   theme.css -- the DOCTOR-SITE THEME "Navy & Teal" (theme v2; owner, 21 Oct 2026: "change the doctor image shape ... remove entirely from the doctor website the red color buttons, themes, bg ... make a perfect
   theme and implement it, dont wait for my approval"; spec: kb landing-v2-2026-10-19/theme-v2-21oct/THEME-V2-SPEC.md, the look: owner-reference-hero.png). The shared layer: colour, radius, shadow, type, layout and the
   motion of every doctor page. theme-a.css (the tokens and the shapes below the hero) loads after it, both after doctor-content.css. data-theme="a" and the two file names are the same as in "Health Teal" on purpose.
   ONE PALETTE: navy (what you press, where you are) + teal (what is alive) + the WhatsApp green. The doctor's / speciality colour drives NOTHING on a doctor page: section 0 pins the whole --accent* set to the
   theme, on <body> (the doctor's colour is an inline style on <html>, which no stylesheet rule on <html> can beat; everything components.css and doctor-content.css paint is inside <body>). NO red or pink hue anywhere;
   the one exception is the form-validation error TEXT of components.css (#B91C1C on white, 6.5:1), which stays a dark red and is never a fill, a border or a background.
   SCOPE: every rule starts at html[data-theme="a"] (the attribute is on the doctor's <html> only): a clinic or a pharmacy page has none and matches NOTHING here. Both looks share the hero (one markup, the Hooks of the spec).
   RULES (api/site_assets/v2/tests/theme-css.test.mjs holds them): url() only as an inline data:image/svg+xml (CSP img-src allows data:), no @import, no script; every @keyframes moves transform / opacity only;
   animation-timeline only for the progress hairline, the journey line and the hero's depth layer; every motion rule is under html.js:not(.rm) or prefers-reduced-motion: no-preference, so with JavaScript off, or
   with reduced motion, everything is simply shown.
   Order: 0 tokens -> the live variables · 2 header · 3 hero · 5 booking card + its section · 6 section frame · 7 about · 8 journey · 9 treatments · 10 awards · 11 timings + map · 12 gallery ·
          13 camps · 14 notes · 15 FAQ · 16 app card · 17 footer · 18 phone bar · 19-24 shared bits, targets, focus, long names · 25 motion
   ========================================================================== */

/* ---------- 0. tokens -> the live variables ---------- */
html[data-theme="a"] {
  /* the old highlight variables stay DECLARED (as the theme's own navy, never as the doctor's colour) so a reader of --hl* finds a constant; nothing in the theme reads them */
  --hl: var(--t-navy); --hl-ink: var(--t-navy-ink); --hl-soft: var(--t-tint);
  /* the shared components (header, card, FAQ, app card, footer, bar) read these: the page's NEUTRALS follow the theme too */
  --ink: var(--t-ink); --body: var(--t-body); --muted: var(--t-muted); --line: var(--t-line); --soft: var(--t-band); --surface: var(--t-card);
  --f-head: var(--t-head); --f-serif: var(--t-serif);
  --r1: var(--t-r1); --r2: var(--t-r2); --r3: var(--t-r3); --sh1: var(--t-sh1); --sh2: var(--t-sh2); --sh3: var(--t-sh3);
  background: var(--t-bg);
}
html[data-theme="a"] body { background: var(--t-bg); color: var(--t-body); }
/* the speciality colour is RETIRED here: the whole --accent set components.css reads (booking form, chips, today row, notices, footer, bar ...) is the theme's, so a gynaecologist's pink or a cardiologist's red cannot
   reach the page. On <body> because the doctor's colour is an inline style on <html> (see the header); nothing outside <body> is painted from it. */
html[data-theme="a"] body { --accent: var(--t-navy); --accent-ink: var(--t-navy-ink); --accent-soft: var(--t-tint); --accent-2: var(--t-sh); --accent-2-ink: var(--t-sh-ink); --accent-2-soft: var(--t-mint); --accent-tint: var(--t-tint); --on-accent: #FFFFFF; }
html[data-theme="a"] .dr {
  --dr-ink: var(--t-ink); --dr-body: var(--t-body); --dr-muted: var(--t-muted); --dr-line: var(--t-line); --dr-soft: var(--t-band);
  --dr-acc: var(--t-navy); --dr-ink2: var(--t-navy-ink); --dr-tint: var(--t-tint);
  --dr-r1: var(--t-r1); --dr-r2: var(--t-r2); --dr-r3: var(--t-r3); --dr-sh1: var(--t-sh1); --dr-sh2: var(--t-sh2); --dr-sh3: var(--t-sh3);
  --dr-head: var(--t-head); --dr-serif: var(--t-serif);
  color: var(--t-body);
}
html[data-theme="a"] .dr :focus-visible, html[data-theme="a"] :focus-visible { outline: 3px solid var(--t-focus); outline-offset: 2px; }
/* a text field draws its focus on its own box (.inp:focus-within: the accent border + halo): no second ring on the <input> inside it (the live rule is `.inp input { outline: 0 }`) */
html[data-theme="a"] .inp input:focus-visible { outline: 0; }

/* ---------- 2. the top bar ---------- */
html[data-theme="a"] .v-hd { background: var(--t-card); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--t-line); }
html[data-theme="a"] .v-hd.is-condensed { background: var(--t-card); box-shadow: 0 10px 28px -18px rgb(8 30 40 / .45); }
html[data-theme="a"] .v-logo { background: var(--t-navy); border-radius: var(--t-ic-r); }
html[data-theme="a"] .v-bt b { color: var(--t-ink); font-family: var(--t-head); }
html[data-theme="a"] .v-bt .deg { color: var(--t-muted); }
html[data-theme="a"] .v-nav a { color: var(--t-body); border-radius: 10px; }
html[data-theme="a"] .v-nav a:hover { background: var(--t-tint); color: var(--t-navy-ink); }
html[data-theme="a"] .v-nav a.is-active { color: var(--t-navy-ink); background: var(--t-tint); }
/* the links never shrink or wrap; the brand gives way, as on the live page (7 links when a doctor has camps + notes + awards): a normal name stays whole at every size checked, a 27-character name ends in the live ellipsis in the bar only (the hero always shows it whole); Call becomes an icon */
html[data-theme="a"] .v-brand { flex: 0 1 auto; min-width: 0; max-width: 340px; }          /* no grow (the links stay beside the name), shrink only when the bar is full: then the live ellipsis takes the name's end */
html[data-theme="a"] .v-bt b { overflow: hidden; text-overflow: ellipsis; }
html[data-theme="a"] .v-nav { flex: none; }
@media (max-width: 1099px) { html[data-theme="a"] .v-brand { flex: 1 1 auto; max-width: none; } }   /* no links in the bar below 1100: the brand fills the row, so Book and the menu stay at the right edge as on the live page */
/* look B draws its own frame for every section (doctor-b.css: `.dr .wrap` = min(1240px, 100% - 32px), no padding), but the shared header and footer stand OUTSIDE `.dr` and kept the other frame (1240px with 20-32px of padding): the chip, the name and the panel stuck out 4-32 px past the logo and the Book button. They take look B's frame (the admin round's F-1). */
html[data-theme="a"][data-variant="b"] .v-hd .wrap, html[data-theme="a"][data-variant="b"] .v-ft .wrap { width: min(1240px, calc(100% - 32px)); max-width: none; padding: 0; }
html[data-theme="a"] .v-nav a { white-space: nowrap; }                                       /* the links never wrap into two lines ("Health / notes"): the NAME gives way first */
@media (min-width: 1100px) { html[data-theme="a"] .v-hd-book .lg { display: none; } }   /* the button says "Book" from 1100 px up, with no upper bound (the bar never gets wider than the 1280 px frame, so a wider window gives the words no room back: the same rule as doctor-content.css 19c, and nothing in this file shows the label again) */
@media (min-width: 1100px) and (max-width: 1279px) { html[data-theme="a"] .v-nav a { padding-left: 7px; padding-right: 7px; } }   /* 7 links + 3 buttons do not fit in 1100-1279 px beside a whole name: the links take less side room */
@media (min-width: 1100px) {
  html[data-theme="a"] .v-nav { gap: 0; margin: 0 auto 0 12px; }
  html[data-theme="a"] .v-nav a { padding-left: 9px; padding-right: 9px; font-size: 14.5px; }
  html[data-theme="a"] .v-hd-cta { gap: 8px; }
  html[data-theme="a"] .v-hd-call span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[data-theme="a"] .v-hd-call { min-width: 44px; padding: 0 12px; }
}
html[data-theme="a"] .btn { border-radius: var(--t-btn-r); font-family: var(--t-head); }
html[data-theme="a"] .btn-primary { background: var(--t-navy); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--t-navy) 70%, #000); }
html[data-theme="a"] .btn-primary:hover { background: var(--t-navy-ink); }
html[data-theme="a"] .btn-ghost { background: var(--t-card); color: var(--t-navy-ink); border-color: var(--t-line); }
html[data-theme="a"] .btn-ghost:hover { border-color: var(--t-navy); background: var(--t-tint); }
html[data-theme="a"] .v-menu-btn { border-radius: var(--t-btn-r); border-color: var(--t-line); }
html[data-theme="a"] .v-mnav { background: var(--t-card); }
html[data-theme="a"] .v-mnav a:last-child, html[data-theme="a"] .v-mnav a:has(+ .v-login-mn) { color: var(--t-navy-ink); }
/* the scroll progress: a hair under the bar, drawn by the scroll position itself (CSS scroll timeline, compositor only: transform) */
html[data-theme="a"] .v-hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--t-prog); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- 3. the hero: ONE markup for both looks (the Hooks of THEME-V2-SPEC.md). The chip with the green dot, the name in two tones (navy, then the speciality in teal), the paragraph, Book (navy) + WhatsApp (green), the
   2 x 2 bullets | the photo in a large rounded rectangle on a light-blue panel with soft rings, and three cards over its edges (years, open now, registration) + the tagline line. Phone: chip, name, paragraph, buttons,
   the panel (its cards STACKED under the photo, nothing over the face), then the bullets. Nothing here is a number: no counters, no rating, no patient count. ---------- */
html[data-theme="a"] .dr-hero { position: relative; padding: 14px 0 32px; background: var(--t-hero-bg); overflow: clip; isolation: isolate; }
html[data-theme="a"] .dr-hero > * { position: relative; z-index: 1; }
/* the soft rings behind the whole hero (the hero's depth layer: section 25 moves it a few pixels while the first screen scrolls) */
html[data-theme="a"] .dr-hero::before { content: ""; position: absolute; z-index: 0; right: -240px; top: -280px; width: 720px; height: 720px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle at center, transparent 0 62px, var(--t-ring) 63px 64px); }
html[data-theme="a"] .dr-hx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
/* READING ORDER (security's F1 on the first cut): the markup is already the phone's order -- the text column, the panel, the bullets -- so nothing in this section moves a box away from its place in the page: no `order`, no `display: contents`,
   no row placement of owner text, no reverse or dense flow. A phone is one column of three; from 900 px the grid is two columns and EACH is one contiguous run of the page: the text on the left, the panel and then the bullets on the right (section end). */
html[data-theme="a"] .dr-hx-text { display: grid; gap: 12px; min-width: 0; }
html[data-theme="a"] .dr-hx-text > *, html[data-theme="a"] .dr-hx-vis { min-width: 0; margin: 0; }

/* the chip */
html[data-theme="a"] .dr-pill { display: inline-flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; padding: 8px 16px 8px 12px; border-radius: 99px; background: var(--t-card); border: 1px solid var(--t-line); box-shadow: 0 8px 18px -12px rgb(10 44 82 / .4);
  font: 600 13.5px/1.25 var(--t-head); color: var(--t-ink); }
html[data-theme="a"] .dr-pill i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 4px #DCFCE7; }
/* the name: navy, then the speciality on its own line in teal */
html[data-theme="a"] .dr-hero h1.dr-name { margin: 0; font-family: var(--t-hfont); font-weight: var(--t-hw); font-size: clamp(32px, 9vw, 40px); line-height: 1.04; letter-spacing: var(--t-hls); color: var(--t-ink); text-wrap: balance; }
html[data-theme="a"] .dr-hero h1.dr-name .dr-ac { display: block; margin-top: 6px; font-family: var(--t-head); font-weight: 800; font-size: .76em; line-height: 1.1; letter-spacing: -.024em; color: var(--t-sh-h); }
html[data-theme="a"] .dr-deg { margin: 0; font: 700 15px/1.4 var(--t-head); color: var(--t-navy-ink); }
html[data-theme="a"] .dr-role { margin: 0; font: 500 14px/1.4 var(--t-head); color: var(--t-muted); }
html[data-theme="a"] .dr-hero .dr-lead { margin: 0; max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: var(--t-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
/* Book (navy) + WhatsApp (green) */
html[data-theme="a"] .dr-hero .dr-cta { display: flex; flex-wrap: wrap; gap: 12px; }
html[data-theme="a"] .dr-hero .dr-cta .dr-btn { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 14px; border: 0; border-radius: var(--t-btn-r); font: 700 15px/1 var(--t-head); white-space: nowrap; }
html[data-theme="a"] .dr-hero .dr-cta .dr-btn-primary { background: var(--t-navy); color: #fff; box-shadow: 0 16px 28px -16px rgb(12 76 140 / .85); }
html[data-theme="a"] .dr-hero .dr-cta .dr-btn-primary:hover { background: var(--t-navy-ink); }
html[data-theme="a"] .dr-hero .dr-cta .dr-btn-wa { background: var(--t-wa); color: #fff; box-shadow: 0 16px 28px -16px rgb(21 128 61 / .8); }
html[data-theme="a"] .dr-hero .dr-cta .dr-btn-wa:hover { background: var(--t-wa-ink); }
html[data-theme="a"] .dr-hero .dr-cta .dr-btn-ghost { background: var(--t-card); border: 1.5px solid var(--t-line); color: var(--t-navy-ink); box-shadow: none; }
html[data-theme="a"] .dr-hero .dr-cta .dr-btn-ghost:hover { border-color: var(--t-navy); background: var(--t-tint); }
/* the bullets: 2 x 2, an icon tile and a line each */
html[data-theme="a"] .dr-hx-bul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; min-width: 0; margin: 6px 0 0; }
html[data-theme="a"] .dr-hx-bul li { display: flex; align-items: center; gap: 11px; min-width: 0; }
html[data-theme="a"] .dr-hx-bic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--t-tint); color: var(--t-sh-h); }
html[data-theme="a"] .dr-hx-bic .ic { width: 20px; height: 20px; }
html[data-theme="a"] .dr-hx-bt { font: 600 14px/1.3 var(--t-head); color: var(--t-ink); overflow-wrap: anywhere; }

/* the strip under the grid (kept from the old hero): the fee tiles and the four facts */
html[data-theme="a"] .dr-hero-more { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
html[data-theme="a"] .dr-hero-more:empty { display: none; }
html[data-theme="a"] .dr-fees { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; max-width: none; margin: 0; gap: 12px; background: none; border: 0; box-shadow: none; }
html[data-theme="a"] .dr-fees li { padding: 14px 16px; background: var(--t-card); border: 1px solid var(--t-line); border-radius: var(--t-r2); box-shadow: var(--t-sh1); }
html[data-theme="a"] .dr-fees li + li { border-left: 1px solid var(--t-line); }
html[data-theme="a"] .dr-fees b { color: var(--t-navy); font-family: var(--t-head); }
html[data-theme="a"] .dr-fees span { color: var(--t-ink); }
html[data-theme="a"] .dr-fees small { color: var(--t-muted); }
html[data-theme="a"] .dr-facts4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; max-width: none; margin: 0; padding: 16px 18px; background: var(--t-card); border: 1px solid var(--t-line); border-radius: var(--t-r2); box-shadow: var(--t-sh1); }
html[data-theme="a"] .dr-facts4 li { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
html[data-theme="a"] .dr-facts4 .dr-ic { width: 38px; height: 38px; flex: none; }
html[data-theme="a"] .dr-facts4 b { color: var(--t-ink); font-family: var(--t-head); }
html[data-theme="a"] .dr-facts4 li > span:last-child { color: var(--t-body); min-width: 0; }
@media (max-width: 639px) {      /* three cells in one row are 99-109 px wide on a phone and "Consultation" (80 px) leaves its 75 px box: below 640 the fees are rows (the figure, then its words), which never run out of room, whatever the figure or the label */
  html[data-theme="a"] .dr-fees { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html[data-theme="a"] .dr-fees li { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
  html[data-theme="a"] .dr-fees b { flex: none; min-width: 76px; white-space: nowrap; }
  html[data-theme="a"] .dr-fees span { flex: 1 1 auto; min-width: 0; margin-top: 0; overflow-wrap: anywhere; }
}
@media (max-width: 479px) {      /* the four facts in one column: "Qualified" is the longest line of the page and nine lines in a half-width column read worse than three in a whole one */
  html[data-theme="a"] .dr-facts4 { grid-template-columns: minmax(0, 1fr); }
}

/* the photo panel (a phone: a grid, the photo first, the cards under it) */
html[data-theme="a"] .dr-hx-vis { display: grid; justify-items: stretch; }
html[data-theme="a"] .dr-hx-panel { position: relative; isolation: isolate; width: 100%; padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-radius: 28px; background: var(--t-panel-bg); }
html[data-theme="a"] .dr-hx-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 0%, transparent 0 44px, var(--t-ring) 45px 46px); -webkit-mask-image: linear-gradient(200deg, #000 8%, transparent 62%); mask-image: linear-gradient(200deg, #000 8%, transparent 62%); }
html[data-theme="a"] .dr-hx-panel .dr-hs { grid-column: 1 / -1; position: relative; display: block; width: 100%; height: auto; aspect-ratio: 7 / 5; margin: 0; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: var(--t-tint); box-shadow: 0 26px 44px -28px rgb(10 44 82 / .6); }
html[data-theme="a"] .dr-hx-panel .dr-hs .ph { width: 100%; height: 100%; border-radius: inherit; }
html[data-theme="a"] .dr-hx-panel .dr-hs .ph > img { object-position: 50% 16%; }
html[data-theme="a"] .dr-hx-panel .dr-hs .ph-person { background: linear-gradient(150deg, var(--t-tint), var(--t-mint)); }
html[data-theme="a"] .dr-hx-panel .dr-hs .ph > .ph-ic { color: var(--t-sh); opacity: .5; }
html[data-theme="a"] .dr-hx-tag { grid-column: 1 / -1; margin: 4px 6px 2px; font: italic 700 16px/1.25 var(--t-head); color: #086259; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
html[data-theme="a"] .dr-hx-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--t-card); border: 1px solid var(--t-line); box-shadow: 0 14px 28px -18px rgb(10 44 82 / .5), 0 1px 3px rgb(10 44 82 / .06); color: var(--t-ink); text-decoration: none; }
html[data-theme="a"] .dr-hx-card b { display: block; font: 800 14px/1.2 var(--t-head); color: var(--t-ink); overflow-wrap: anywhere; }
html[data-theme="a"] .dr-hx-card small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.25; color: var(--t-muted); overflow-wrap: anywhere; }
html[data-theme="a"] .dr-hx-cic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--t-navy); color: #fff; }
html[data-theme="a"] .dr-hx-cic .ic { width: 20px; height: 20px; }
html[data-theme="a"] .dr-hx-reg { grid-column: 1 / -1; }
html[data-theme="a"] .dr-hx-reg:hover { border-color: var(--t-navy); }
html[data-theme="a"] .dr-hx-reg .dr-hx-cic { background: var(--t-sh-h); }
html[data-theme="a"] .dr-hx-ext { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--t-sh-ink); }
html[data-theme="a"] .dr-hx-reg > div { min-width: 0; }
/* open now: a live dot (green open, navy "opens later", grey closed); motion.js rewrites the label in place */
html[data-theme="a"] .dr-hx-open .dr-dot { width: 10px; height: 10px; flex: none; margin: 0 4px 0 6px; border-radius: 50%; background: #94A3B8; box-shadow: 0 0 0 4px #E2E8F0; }
html[data-theme="a"] .dr-hx-open.is-open .dr-dot { background: #16A34A; box-shadow: 0 0 0 4px #DCFCE7; }
html[data-theme="a"] .dr-hx-open.is-opens .dr-dot { background: var(--t-navy); box-shadow: 0 0 0 4px var(--t-tint); }
html[data-theme="a"] .dr-hx-open.is-open b, html[data-theme="a"] .dr-hx-open.is-opens b { color: var(--t-ink); }
@media (min-width: 640px) {
  html[data-theme="a"] .dr-hero { padding: 30px 0 48px; }
  html[data-theme="a"] .dr-hero h1.dr-name { font-size: clamp(38px, 6.2vw, 52px); }
  html[data-theme="a"] .dr-hero .dr-lead { font-size: 17.5px; }
  html[data-theme="a"] .dr-hero .dr-cta .dr-btn { flex: 0 0 auto; padding: 0 24px; font-size: 15.5px; }
  html[data-theme="a"] .dr-hx-bul { max-width: 560px; gap: 16px 24px; }
  html[data-theme="a"] .dr-hx-bt { font-size: 14.5px; }
  /* the floating layout: the photo stands on the right of the panel, the cards hang over its edges, the tagline sits top-right above it */
  html[data-theme="a"] .dr-hx-vis { justify-items: center; }
  html[data-theme="a"] .dr-hx-panel { display: block; width: min(100%, 520px); padding: 92px 26px 28px clamp(96px, 25%, 130px); border-radius: var(--t-panel-r); }
  html[data-theme="a"] .dr-hx-panel .dr-hs { aspect-ratio: 5 / 6; border-radius: var(--t-photo-r); }
  html[data-theme="a"] .dr-hx-tag { position: absolute; z-index: 2; top: 20px; right: 28px; max-width: 64%; margin: 0; text-align: right; font-size: clamp(16px, 1.5vw, 18px); -webkit-line-clamp: 3; }
  html[data-theme="a"] .dr-hx-card { position: absolute; z-index: 3; max-width: 232px; gap: 11px; padding: 11px 16px 11px 11px; border-radius: 18px; }
  html[data-theme="a"] .dr-hx-cic { width: 40px; height: 40px; border-radius: 12px; }
  html[data-theme="a"] .dr-hx-card b { font-size: 14.5px; }
  html[data-theme="a"] .dr-hx-card small { font-size: 12.5px; }
  html[data-theme="a"] .dr-hx-years { left: 14px; top: 118px; }
  html[data-theme="a"] .dr-hx-reg { left: 8px; bottom: 30px; max-width: 290px; }
  html[data-theme="a"] .dr-hx-reg b { white-space: nowrap; }
  html[data-theme="a"] .dr-hx-open { right: 8px; bottom: 112px; max-width: none; }
  html[data-theme="a"] .dr-hx-open b { white-space: nowrap; }      /* "Open now · until 11:55 PM" is one line (the label is one string motion.js rewrites); a phone keeps the half-width cell and wraps */
}
@media (min-width: 900px) {
  html[data-theme="a"] .dr-hero { padding: 34px 0 52px; }
  html[data-theme="a"] .dr-hx { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); column-gap: 44px; row-gap: 0; align-items: center; }
  /* TWO COLUMNS, EACH ONE CONTIGUOUS RUN OF THE PAGE (security's FIX-1 on the first F1 fix: with the bullets in column 1 under the text and the panel spanning beside them, the headline stood directly over the first treatment whenever no button row stood between). Column 1 is the text column alone;
     column 2 is the panel and then the bullets, one under the other. The only row word of the section is the text column's SPAN of two rows (it stands centred against its neighbour, panel + bullets); nothing is placed by row number, and the panel takes no row at all. */
  html[data-theme="a"] .dr-hx-text { display: block; grid-column: 1; grid-row: span 2; }
  html[data-theme="a"] .dr-hx-vis { grid-column: 2; justify-items: end; }
  html[data-theme="a"] .dr-hx-bul { grid-column: 2; justify-self: end; width: min(100%, 520px); max-width: none; }          /* under the panel: the panel's own width, on its right edge */
  html[data-theme="a"] .dr-hero h1.dr-name { font-size: clamp(42px, 4.3vw, 60px); }
  html[data-theme="a"] .dr-pill { margin: 0 0 20px; }
  html[data-theme="a"] .dr-hx-text > .dr-deg { margin-top: 14px; }
  html[data-theme="a"] .dr-hx-text > .dr-role { margin-top: 4px; }
  html[data-theme="a"] .dr-hero .dr-lead { margin-top: 16px; font-size: 18px; -webkit-line-clamp: 3; }
  html[data-theme="a"] .dr-hero .dr-cta { margin-top: 26px; gap: 14px; }
  html[data-theme="a"] .dr-hero .dr-cta .dr-btn { min-height: 54px; padding: 0 26px; }
  html[data-theme="a"] .dr-hx-bul { margin-top: 28px; }
}
@media (min-width: 900px) {
  html[data-theme="a"] .dr-hero-more { margin-top: 36px; }
  html[data-theme="a"] .dr-fees { width: fit-content; grid-auto-columns: minmax(0, 200px); }
  html[data-theme="a"] .dr-facts4 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 18px 8px; }
  html[data-theme="a"] .dr-facts4 li { padding: 0 16px; }
  html[data-theme="a"] .dr-facts4 li + li { border-left: 1px solid var(--t-line); }
}
@media (min-width: 1100px) { html[data-theme="a"] .dr-hx { column-gap: 56px; } }

/* ---------- 5. the booking card (SIZE IS A PIN: 497 px at most; only colour, radius, shadow here) ---------- */
html[data-theme="a"] .v-bk-card .btn-primary { box-shadow: 0 5px 10px -7px color-mix(in srgb, var(--t-navy) 80%, #000); }
html[data-theme="a"] .v-bk-card { border-radius: var(--t-card-r); border: 1px solid var(--t-card-line); box-shadow: var(--t-card-sh); background: var(--t-card); }
html[data-theme="a"] .v-bk-card::before { background: var(--t-card-bar); }
html[data-theme="a"] .v-bk-ic { background: var(--t-tint); color: var(--t-sh-ink); border-radius: var(--t-ic-r); }
html[data-theme="a"] .v-bk-card .v-bk-head h2 { color: var(--t-ink); font-family: var(--t-head); font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }   /* the card sits inside a .dr-sec: the section-heading size must not reach its own title */
html[data-theme="a"] .v-bk-head p { color: var(--t-muted); }
html[data-theme="a"] .v-steps i { background: var(--t-tint); color: var(--t-body); }
html[data-theme="a"] .v-steps li.is-on i { background: var(--t-navy); color: #fff; }
html[data-theme="a"] .v-steps li.is-on { color: var(--t-navy-ink); }
html.js[data-theme="a"] .v-bk-form[data-stepped] .v-steps::after { background: var(--t-navy); }
html[data-theme="a"] .inp, html[data-theme="a"] .v-bk-form input { border-radius: var(--t-field-r); }
/* the "no times" note under the slots is a hint, not a form error: no red (the dark red TEXT stays on .err and .v-bk-err) */
html[data-theme="a"] .v-bk-form .v-slot-note.bad { color: var(--t-navy-ink); font-weight: 600; }
/* an unavailable time: struck through AND readable (the live grey is 2.4:1) */
html[data-theme="a"] .v-slot:disabled { color: var(--t-muted); }
/* an invalid field: a dark ink frame (the live red border is a colour no doctor page may draw); the message under it stays the dark red TEXT of components.css */
html[data-theme="a"] .inp.bad { border-color: var(--t-ink); box-shadow: 0 0 0 1px var(--t-ink); }
html[data-theme="a"] .btn-wa { background: var(--t-wa); }
html[data-theme="a"] .v-bk-card { scroll-margin-top: 16px; }

/* ---------- 5b. the booking card's own section, right after the hero (the same 3-step card, the same hooks; it owns its heading, "Book an appointment", and its id): a light band with the card alone, narrow and centred ---------- */
html[data-theme="a"] .dr-booksec { background: var(--t-band); padding: var(--t-pad-m) 0; }
html[data-theme="a"] .dr-booksec-in { width: 100%; max-width: 640px; margin: 0 auto; min-width: 0; }
html[data-theme="a"] .dr-booksec .v-bk-card { box-shadow: var(--t-card-sh); }
@media (min-width: 900px) { html[data-theme="a"] .dr-booksec { padding: 72px 0; } }

/* ---------- 6. section frame (every section) ---------- */
html[data-theme="a"] .dr-sec { padding: var(--t-pad-m) 0; }
@media (min-width: 900px) { html[data-theme="a"] .dr-sec { padding: var(--t-pad) 0; } }
html[data-theme="a"] .dr-eyebrow, html[data-theme="a"] .eyebrow { font-family: var(--t-head); color: var(--t-eyebrow); }
html[data-theme="a"] .dr-head h2, html[data-theme="a"] .dr-sec h2, html[data-theme="a"] .sec-t { font-family: var(--t-h2font); font-weight: var(--t-h2w); color: var(--t-ink); letter-spacing: var(--t-h2ls); }
html[data-theme="a"] .dr-sub { color: var(--t-muted); text-wrap: pretty; }          /* no orphan word, no break inside "follow-up" */
html[data-theme="a"] .dr-link, html[data-theme="a"] .dr-lnk2 { color: var(--t-sh-ink); }

/* ---------- 7. about + registration + credentials ---------- */
html[data-theme="a"] .dr-about { background: var(--t-bg); }
html[data-theme="a"] .dr-ic { background: var(--t-tint); color: var(--t-sh-h); border-radius: var(--t-ic-r); border: 0; }
html[data-theme="a"] .dr-panel { background: var(--t-card); border: 1px solid var(--t-panel-line); border-radius: var(--t-r3); box-shadow: var(--t-panel-sh); }
html[data-theme="a"] .dr-panel-reg { background: var(--t-reg-panel); border-color: var(--t-reg-panel-line); }
html[data-theme="a"] .dr-panel-reg h3 .dr-ic { background: var(--t-card); }
html[data-theme="a"] .dr-regno { font-family: var(--t-head); color: var(--t-ink); letter-spacing: .01em; }
html[data-theme="a"] .dr-dl div { border-top-color: var(--t-line); }
html[data-theme="a"] .dr-lnk2 { padding: 0 16px; border: 1.5px solid var(--t-sh); border-radius: var(--t-btn-r); background: var(--t-card); margin-top: 6px; }
html[data-theme="a"] .dr-lnk2:hover { background: var(--t-tint); text-decoration: none; }
html[data-theme="a"] .dr-list li > .ic { color: var(--t-sh); }
html[data-theme="a"] .dr-tl::before { background: var(--t-line); }
html[data-theme="a"] .dr-tl li::before { border-color: var(--t-sh); }
html[data-theme="a"] .dr-tl li:last-child::before { background: var(--t-sh); }
html[data-theme="a"] .dr-tl time { color: var(--t-sh-ink); }
html[data-theme="a"] .dr-tl b { color: var(--t-ink); font-family: var(--t-head); }
html[data-theme="a"] .dr-tl2 .dr-h3 { color: var(--t-ink); font-family: var(--t-head); }
html[data-theme="a"] .dr-tl2 .dr-h3 .ic { color: var(--t-sh); }
html[data-theme="a"] .dr-p { color: var(--t-body); font-size: 17px; line-height: 1.7; }
html[data-theme="a"] .dr-about-body h2 { margin-bottom: 14px; }

/* ---------- 8. care journey ---------- */
html[data-theme="a"] .dr-journey-sec { background: var(--t-band); }
html[data-theme="a"] .dr-jic { background: var(--t-card); border: 2px solid var(--t-sh); color: var(--t-sh); border-radius: var(--t-jic-r); box-shadow: var(--t-sh1); }
html[data-theme="a"] .dr-jnum { background: var(--t-sh-h); color: var(--t-on-sh); }
html[data-theme="a"] .dr-jline { background: var(--t-line); }
html[data-theme="a"] .dr-jline i { background: var(--t-sh); }
html[data-theme="a"] .dr-jstep div b { color: var(--t-ink); font-family: var(--t-head); }
html[data-theme="a"] .dr-jstep div span { color: var(--t-body); }
html[data-theme="a"] .dr-bring { background: var(--t-card); border: 1px solid var(--t-line); border-radius: var(--t-r2); box-shadow: none; }
html[data-theme="a"] .dr-bring .dr-ic { background: var(--t-tint); }
html[data-theme="a"] .dr-bring li::before { color: var(--t-sh); }

/* ---------- 9. conditions & treatments (four a row from 1100 px is a PIN; the fold is the live one) ---------- */
html[data-theme="a"] .dr-treat { background: var(--t-bg); }
html[data-theme="a"] .dr-chip { border-radius: var(--t-chip-r); border-color: var(--t-line); background: var(--t-card); color: var(--t-body); }
html[data-theme="a"] .dr-chip:hover { border-color: var(--t-navy); }
html[data-theme="a"] .dr-chip i { background: var(--t-tint); color: var(--t-navy-ink); }
html[data-theme="a"] .dr-chip[aria-pressed=true] { background: var(--t-navy); border-color: var(--t-navy); color: var(--t-on-navy); }
html[data-theme="a"] .dr-chip[aria-pressed=true] i { background: #fff; color: var(--t-navy-ink); }
html[data-theme="a"] .dr-grid { gap: 16px; }
html[data-theme="a"] .dr-card { border-radius: var(--t-r2); background: var(--t-card); border: 1px solid var(--t-line); box-shadow: none; }
html[data-theme="a"] .dr-card:hover { border-color: var(--t-navy); box-shadow: var(--t-sh2); }
html[data-theme="a"] .dr-pic { aspect-ratio: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 18px 0; background: none; overflow: visible; }
html[data-theme="a"] .dr-pic::before, html[data-theme="a"] .dr-pic::after { content: none; }
html[data-theme="a"] .dr-pic .tx, html[data-theme="a"] .dr-pic .ic { position: static; width: 64px; height: 64px; aspect-ratio: auto; margin: 0; padding: 9px; background: var(--t-tint); border-radius: var(--t-pic-r); color: var(--t-sh); flex: none; }
html[data-theme="a"] .dr-kind { position: static; padding: 0; background: none; box-shadow: none; color: var(--t-muted); font: 700 12px/1.2 var(--t-head); letter-spacing: .08em; margin-top: 2px; }
html[data-theme="a"] .dr-cb { padding: 14px 18px 12px; gap: 6px; }
html[data-theme="a"] .dr-cb h3 { font-family: var(--t-head); color: var(--t-ink); font-size: 16.5px; }
html[data-theme="a"] .dr-cb p { color: var(--t-body); font-size: 14px; }
html[data-theme="a"] .dr-card { position: relative; }
html[data-theme="a"] .dr-book { margin-top: auto; justify-content: flex-start; min-height: 30px; padding: 0; border-radius: 0; background: none; color: var(--t-sh-ink); font-size: 14.5px; }
html[data-theme="a"] .dr-book::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
html[data-theme="a"] .dr-book:focus-visible { outline: 0; }
html[data-theme="a"] .dr-card:has(.dr-book:focus-visible) { outline: 3px solid var(--t-focus); outline-offset: 2px; }
html[data-theme="a"] .dr-book:hover { background: none; color: var(--t-navy-ink); text-decoration: underline; text-underline-offset: 4px; }
html[data-theme="a"] .dr-more { border-radius: var(--t-btn-r); border-color: var(--t-line); background: var(--t-card); color: var(--t-navy-ink); }

@media (max-width: 599px) {
  html[data-theme="a"] .dr-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html[data-theme="a"] .dr-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: start; padding: 16px; }
  html[data-theme="a"] .dr-pic { display: contents; }
  html[data-theme="a"] .dr-pic .tx, html[data-theme="a"] .dr-pic .ic { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; padding: 11px; }
  html[data-theme="a"] .dr-kind { grid-column: 2; grid-row: 1; margin: 0 0 3px; font-size: 12px; text-align: left; }
  html[data-theme="a"] .dr-cb { grid-column: 2; grid-row: 2; padding: 0; }
  html[data-theme="a"] .dr-cb h3 { font-size: 16.5px; }
  html[data-theme="a"] .dr-cb p { font-size: 14px; margin-bottom: 4px; }
}

/* ---------- 9b. look B under the theme (found by looking at look B's pictures, kb LOOK-B.md; each was RED on the pages before the fix: nothing below changes look A) ---------- */
/* the treatments: the live look B lays them out as a two-column bento at 767 px and below (the first card `span 2`, the eighth, or a last sixth, a wide row card). The theme's phone layout (below 600 px) is ONE
   column of compact cards: with one explicit column a `span 2` makes a second, implicit column and every card after it is auto-placed into the two tracks (measured: 0 px + 346 px, three cards of seven squeezed
   to 34 px wide, the others 751 px tall). So below 600 px the spans are reset to the one column and the first card loses its "feature" picture sizing. `:nth-child(n of :not([hidden]))` carries the weight of the
   live `:nth-child(1 of :not([hidden]))` rules. */
@media (max-width: 599px) {
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(n of :not([hidden])) { grid-column: 1 / -1; }
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(n of :not([hidden])) .dr-pic .tx { height: 64px; max-height: none; }
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(n of :not([hidden])) h3 { font-size: 16.5px; }
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(n of :not([hidden])) p { font-size: 14px; display: -webkit-box; }
  /* the live look B centres the eighth card's text with its own padding (16px 20px): in the one-column card it would sit 20 px right of the kind label above it */
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(n of :not([hidden])) .dr-cb { padding: 0; gap: 6px; justify-content: flex-start; }
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(n of :not([hidden])) .dr-book { margin-top: auto; }
}
/* 600-767 px keeps the live two-column bento (found by a 700 px picture, not by the gate): the live rules give the first card's picture area a 2:1 box and a 210 px tall tile (the theme's compact icon tile became a
   64 x 210 px pillar in a 450 px card) and the wide row card a 40 % picture column with the kind label floating in its middle. Here both become ordinary compact cards that span the row. */
@media (min-width: 600px) and (max-width: 767px) {
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(1 of :not([hidden])) .dr-pic,
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(8 of :not([hidden])) .dr-pic,
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(6 of :not([hidden])):nth-last-child(1 of :not([hidden])) .dr-pic { aspect-ratio: auto; width: auto; min-height: 0; }
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(1 of :not([hidden])) .dr-pic .tx { height: 64px; max-height: none; }
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(8 of :not([hidden])),
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(6 of :not([hidden])):nth-last-child(1 of :not([hidden])) { flex-direction: column; }
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(1 of :not([hidden])) .dr-cb,
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(8 of :not([hidden])) .dr-cb,
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(6 of :not([hidden])):nth-last-child(1 of :not([hidden])) .dr-cb { padding: 14px 18px 12px; gap: 6px; justify-content: flex-start; }
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(1 of :not([hidden])) h3,
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(8 of :not([hidden])) h3 { font-size: 16.5px; }
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(1 of :not([hidden])) p,
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(8 of :not([hidden])) p { font-size: 14px; }
  html[data-theme="a"][data-variant="b"] .dr-bento > .dr-card:nth-child(8 of :not([hidden])) .dr-book { margin-top: auto; }
}

/* ---------- 10. awards, recognitions, publications ---------- */
html[data-theme="a"] .dr-recog { background: var(--t-band); }
html[data-theme="a"] .dr-award { border-radius: var(--t-r2); background: var(--t-card); border-color: var(--t-line); box-shadow: none; }
html[data-theme="a"][data-variant="a"] .dr-award { padding: 18px; gap: 18px; }
html[data-theme="a"][data-variant="a"] .dr-award-img { width: 92px; border-radius: 12px; border-color: var(--t-line); box-shadow: var(--t-sh1); }
html[data-theme="a"] .dr-award h3 { color: var(--t-ink); font-family: var(--t-head); font-size: 17px; }
html[data-theme="a"] .dr-by { color: var(--t-body); }
html[data-theme="a"] .dr-detail { color: var(--t-muted); }
html[data-theme="a"] .dr-yr { background: var(--t-tint); color: var(--t-sh-ink); }
html[data-theme="a"] .dr-lnk { color: var(--t-sh-ink); font-weight: 700; }
html[data-theme="a"] .dr-pubs h3 { color: var(--t-ink); font-family: var(--t-head); }
html[data-theme="a"] .dr-pub { border-radius: var(--t-r2); background: var(--t-card); border-color: var(--t-line); box-shadow: none; }
html[data-theme="a"] .dr-pub time { color: var(--t-sh-ink); }
html[data-theme="a"] .dr-pub .t { color: var(--t-ink); }
@media (min-width: 760px) { html[data-theme="a"][data-variant="a"] .dr-awards .dr-award:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- 11. timings + map (the structure is doctor-content.css's: the table, the ring, the card; here the skin. The live rules read --dr-acc / --dr-tint, which the theme points at its navy and its light blue; TODAY
   takes the teal and the light teal tint back, the ONE picked row keeps the navy ring, on those elements alone, so the live join / ring / pill rules need no copy) ---------- */
html[data-theme="a"] .dr-visit { background: var(--t-bg); --pa: var(--t-pa); --pb: var(--t-pb); --pc: var(--t-pc); }
html[data-theme="a"] .dr-box { background: var(--t-card); border: 1px solid var(--t-line); border-radius: var(--t-r3); box-shadow: var(--t-sh1); }
html[data-theme="a"] .dr-box-h h3 { color: var(--t-ink); font-family: var(--t-head); }
html[data-theme="a"] .dr-day.is-today { --dr-acc: var(--t-sh); --dr-ink2: var(--t-sh-ink); --dr-tint: var(--t-mint); }
@media (min-width: 700px) { html[data-theme="a"] .dr-day.is-today > tr > * { background-color: var(--t-mint); } }
html[data-theme="a"] .dr-per.is-sel, html[data-theme="a"] .dr-pchip.is-sel, html[data-theme="a"] .dr-pchip[aria-pressed="true"] { --dr-acc: var(--t-navy); }
html[data-theme="a"] .dr-pinbig { color: var(--t-sh); }
html[data-theme="a"] .dr-map .m-pin { fill: var(--t-sh); }
html[data-theme="a"] .dr-btn { border-radius: var(--t-btn-r); }
html[data-theme="a"] .dr-btn-primary { background: var(--t-navy); color: var(--t-on-navy); }
html[data-theme="a"] .dr-btn-primary:hover { background: var(--t-navy-ink); }
html[data-theme="a"] .dr-btn-wa { background: var(--t-wa); color: #fff; }
html[data-theme="a"] .dr-btn-wa:hover { background: var(--t-wa-ink); }
html[data-theme="a"] .dr-btn-ghost { color: var(--t-navy-ink); border-color: var(--t-line); background: var(--t-card); }
html[data-theme="a"] .dr-chips2 li { border-radius: var(--t-chip-r); }
/* the card echoes the picked period ([data-map-when], p8 v2: text only, empty and hidden without the script) */
html[data-theme="a"] .dr-mapc [data-map-when] { margin: 0; padding: 9px 14px; border-radius: var(--t-r1); background: var(--t-tint); color: var(--t-sh-ink); font: 700 13.5px/1.35 var(--t-head); }
html[data-theme="a"] .dr-mapc [data-map-when]:empty { display: none; }

/* ---------- 12. gallery (approved layout: equal tiles, six on the page, "See all N photos", two-line captions) ---------- */
html[data-theme="a"] .dr-gallery { background: var(--t-band); }
html[data-theme="a"] .dr-gal2 figure { border-radius: var(--t-r2); border-color: var(--t-line); box-shadow: none; background: var(--t-card); }
html[data-theme="a"] .dr-gal2 figcaption { color: var(--t-ink); }
html[data-theme="a"] .dr-gal2 .im { background: var(--t-tint); }

/* ---------- 13. health camps & awareness ---------- */
html[data-theme="a"] .dr-camps { background: var(--t-bg); border-top: 0; }
html[data-theme="a"] .dr-camp { border-radius: var(--t-r2); border-color: var(--t-line); box-shadow: none; background: var(--t-card); }
html[data-theme="a"] .dr-camp:hover { border-color: var(--t-sh); box-shadow: var(--t-sh2); }
html[data-theme="a"] .dr-camp-date { border-radius: var(--t-r1); box-shadow: var(--t-sh2); }
html[data-theme="a"] .dr-camp-date b { font-family: var(--t-head); }
html[data-theme="a"] .dr-camp-date span, html[data-theme="a"] .dr-camp-tag { color: var(--t-sh-ink); }
html[data-theme="a"] .dr-camp h3 { font-family: var(--t-head); color: var(--t-ink); }
html[data-theme="a"] .dr-camp .ex { color: var(--t-body); }
html[data-theme="a"] .dr-camp-where, html[data-theme="a"] .dr-camp-with { color: var(--t-muted); }

/* ---------- 14. health notes (a note with no cover picture gets a DESIGNED cover, never a grey disc) ---------- */
html[data-theme="a"] .dr-blog { background: var(--t-band); }
html[data-theme="a"] .dr-post { border-radius: var(--t-r2); border: 1px solid var(--t-line); background: var(--t-card); box-shadow: none; overflow: hidden; }
html[data-theme="a"] .dr-post:hover { border-color: var(--t-sh); box-shadow: var(--t-sh2); }
html[data-theme="a"] .dr-post-cover { aspect-ratio: auto; height: 112px; display: flex; align-items: flex-end; justify-content: flex-start; padding: 14px 18px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--t-sh) 22%, transparent), transparent 62%), linear-gradient(135deg, var(--t-tint), color-mix(in srgb, var(--t-sh) 8%, var(--t-card))); }
html[data-theme="a"] .dr-post-cover::before { content: ""; position: absolute; right: 14px; top: 12px; width: 70px; height: 70px; background-image: radial-gradient(var(--t-sh) 1.6px, transparent 1.7px); background-size: 12px 12px; opacity: .22; }
html[data-theme="a"] .dr-post-cover .ic { position: relative; width: 44px; height: 44px; padding: 10px; border-radius: var(--t-ic-r); background: var(--t-card); color: var(--t-sh); box-shadow: var(--t-sh1); }
html[data-theme="a"] .dr-post-cover::after { content: none; }
html[data-theme="a"] .dr-post-b h3, html[data-theme="a"] .dr-post h3 { font-family: var(--t-head); color: var(--t-ink); }
html[data-theme="a"] .dr-post-b h3 a { color: var(--t-ink); }
html[data-theme="a"] .dr-post .ex { color: var(--t-body); }
html[data-theme="a"] .dr-post-meta { color: var(--t-muted); }

/* ---------- 15. FAQ: heading on the left, the answers on the right (a wide page uses its width) ---------- */
html[data-theme="a"] .dr-faq { background: var(--t-bg); }
html[data-theme="a"] .v-faq details { border-radius: var(--t-r2); background: var(--t-card); border-color: var(--t-line); }
html[data-theme="a"] .v-faq details[open] { border-color: var(--t-sh); box-shadow: var(--t-sh2); }
html[data-theme="a"] .v-faq summary { font-family: var(--t-head); color: var(--t-ink); }
html[data-theme="a"] .v-faq summary .ic { color: var(--t-sh); }
@media (min-width: 900px) {
  html[data-theme="a"] .dr-faq > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 72px; align-items: start; }
  html[data-theme="a"] .dr-faq .sec-head { text-align: left; margin: 0; max-width: none; position: sticky; top: 110px; }
  html[data-theme="a"] .dr-faq .sec-head .sec-t::after { margin-left: 0; }
}

html[data-theme="a"] .dr-faq-ask { display: grid; gap: 14px; margin-top: 28px; padding: 18px; border-radius: var(--t-r2); background: var(--t-card); border: 1px solid var(--t-line); }
html[data-theme="a"] .dr-faq-ask .dr-ic { width: 44px; height: 44px; }
html[data-theme="a"] .dr-faq-ask b { display: block; font: 800 17px/1.25 var(--t-head); color: var(--t-ink); }
html[data-theme="a"] .dr-faq-ask p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--t-body); }
html[data-theme="a"] .dr-faq-ask .dr-btn { justify-self: start; }
html[data-theme="a"] .dr-faq .sec-head .sec-t::after { content: none; }
@media (min-width: 900px) {
  html[data-theme="a"] .dr-faq > .wrap > .sec-head { grid-column: 1; grid-row: 1; position: static; }
  html[data-theme="a"] .dr-faq > .wrap > .dr-faq-ask { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; position: sticky; top: 110px; }
  html[data-theme="a"] .dr-faq > .wrap > .v-faq { grid-column: 2; grid-row: 1 / span 2; }
  html[data-theme="a"] .dr-faq > .wrap { align-items: start; row-gap: 18px; }
}
@media (max-width: 899px) { html[data-theme="a"] .dr-faq > .wrap { display: grid; gap: 20px; } html[data-theme="a"] .dr-faq .sec-head { text-align: left; margin: 0; } html[data-theme="a"] .dr-faq-ask { margin-top: 0; } }   /* a phone reads in the page's order: the heading, the "still have a question?" card, the answers (no `order`) */

/* ---------- 16. the app card (mid-page): the badge row is the footer band's (one Play badge on the page, not two) ---------- */
html[data-theme="a"] .dr-app { background: var(--t-band); }
html[data-theme="a"] .v-app { border-radius: var(--t-r3); border-color: var(--t-line); background: var(--t-app-bg); }
html[data-theme="a"] .v-scr-top { background: var(--t-navy); }
html[data-theme="a"] .v-phone { border-radius: 26px; }
html[data-theme="a"] .chip-ic { background: var(--t-tint); color: var(--t-sh); border-radius: var(--t-ic-r); }

/* ---------- 17. the footer (p9): the band is the theme's DEEP colour, the accent only marks "today" (the structure is components.css's) ---------- */
html[data-theme="a"] .v-ft { background: radial-gradient(780px 340px at 94% -8%, rgb(255 255 255 / .09), transparent 62%), radial-gradient(640px 300px at -6% 112%, rgb(0 0 0 / .22), transparent 60%), var(--t-deep); }
html[data-theme="a"] .dr-ft .dr-ft-btn-solid, html[data-theme="a"] .dr-ft .dr-ft-btn-solid:hover { background: #fff; color: var(--t-deep); }
html[data-theme="a"] .dr-ft-week li.is-today { color: var(--t-deep); }
html[data-theme="a"] .dr-ft-appico { color: var(--t-sh); }
html[data-theme="a"] .dr-ft-mono { background: rgb(255 255 255 / .12); }

/* ---------- 18. the phone action bar: a floating pill, the doctor's accent on Book only ---------- */
@media (max-width: 899px) {
  html[data-theme="a"] .v-bar { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 8px; gap: 8px; border-radius: 22px; background: var(--t-card); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--t-line); box-shadow: 0 18px 40px -14px rgb(8 30 40 / .5); }
  html[data-theme="a"] .v-bar .btn { min-height: 48px; border-radius: 16px; }
  html[data-theme="a"] .v-bar .btn-ghost { background: var(--t-tint); border-color: transparent; color: var(--t-sh-ink); }
}

/* ---------- 19. shared bits ---------- */
html[data-theme="a"] .dr-more-link .dr-link { font-family: var(--t-head); }
html[data-theme="a"] .dr-more-link { margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { html[data-theme="a"] .v-hd::after { display: none; } }

/* touch: the place chips of the timetable are 44 px high like every other target */
@media (pointer: coarse) { html[data-theme="a"] .dr-pchip { min-height: 44px; } }

/* ---------- 20. 44 px targets and 12 px text in the pieces this layer draws (the audit of 21 Oct: pixels, not guesses) ---------- */
html[data-theme="a"] .v-brand { min-height: 44px; }
html[data-theme="a"] .v-ft-bar a { display: inline-flex; align-items: center; min-height: 44px; }
html[data-theme="a"] .dr-ft .dr-ft-social a { min-height: 44px; }
html[data-theme="a"] .dr-qrbox figcaption { font-size: 12px; }
html[data-theme="a"] .dr-pdot { font-size: 12px; }

/* ---------- 21. keyboard focus on a DARK ground: a teal ring vanishes on the deep footer, so there it is white ---------- */
html[data-theme="a"] .v-ft :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- 23. the little phone mock of the app card: its pills follow the theme (they were the doctor’s pink inside a teal or blue phone) ---------- */
html[data-theme="a"] .v-rx i { background: var(--t-tint); color: var(--t-sh-ink); }

/* ---------- 24. long names: a surname such as "Bhattacharyya" must never leave its column (found by the long-name state at 390 px): the text may shrink, a word longer than its column breaks inside itself as a last resort ---------- */
html[data-theme="a"] .dr-hero h1.dr-name, html[data-theme="a"] .dr-hero h1.dr-name .dr-ac, html[data-theme="a"] .dr-deg, html[data-theme="a"] .dr-role, html[data-theme="a"] .dr-pill span { overflow-wrap: anywhere; }

/* ---------- 25. motion: "scroll animations smoothest" (OPTIONS.md section 5). Transform and opacity only, nothing else moves. TWO paths, never both on one element:
   (1) the live IntersectionObserver reveal of motion.js (.is-in + a CSS transition: every card, row and head), retuned through the theme's --m-* tokens (no new script, no second observer);
   (2) three scroll-driven animations, only where the scroll position itself is the point: the progress hairline under the header, the care-journey line, the depth of the hero's ring layer. Where
   animation-timeline does not exist (Firefox for now) the page is simply still and the reveal still works. No scroll-jacking, no smooth-scroll library, no counters (NMC), no will-change.
   Everything that starts hidden or moves is under html.js:not(.rm) or prefers-reduced-motion: no-preference: JavaScript off, or reduced motion = everything shown, nothing moves. ---------- */
html[data-theme="a"] { --dur-3: var(--m-dur); --ease: var(--m-ease); --rise: var(--m-dist); --stagger: var(--m-stag); }
html.js:not(.rm)[data-theme="a"] :is([data-reveal], [data-reveal-stagger] > *):not(.is-in, .is-settled) { transform: translate3d(0, var(--rise), 0) scale(var(--m-scale)); }
html.js:not(.rm)[data-theme="a"] [data-reveal="fade"]:not(.is-in, .is-settled) { transform: none; }

@keyframes t-rise { from { opacity: 0; transform: translate3d(0, var(--m-dist), 0) scale(var(--m-scale)); } to { opacity: 1; transform: none; } }
@keyframes t-line-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes t-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes t-par { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--m-par), 0); } }

@media (prefers-reduced-motion: no-preference) {
  /* the hero arrives once, timed (the photo and the name are NOT animated: they are the first paint) */
  html.js:not(.rm)[data-theme="a"] .dr-hero [data-reveal]:not(h1):not(.dr-hx-vis):not(.dr-hx-vis *) { animation: t-rise var(--m-dur) var(--m-ease) both; animation-delay: calc(60ms + var(--i, 0) * var(--m-stag)); transition: none; opacity: 1; transform: none; }
  html.js:not(.rm)[data-theme="a"] .dr-hero :is(h1.dr-name, .dr-hx-vis, .dr-hx-vis [data-reveal]) { opacity: 1; transform: none; transition: none; }

  @supports (animation-timeline: view()) {
    /* the care-journey line draws as the section passes */
    html.js:not(.rm)[data-theme="a"] .dr-journey { view-timeline: --jv block; }
    html.js:not(.rm)[data-theme="a"] .dr-jline i { display: block; transform-origin: 0 50%; animation: t-line-x linear both; animation-timeline: --jv; animation-range: entry 28% cover 46%; }
    @media (max-width: 799px) { html.js:not(.rm)[data-theme="a"] .dr-jline i { transform-origin: 50% 0; animation-name: t-line-y; } }
    /* depth: the hero's ring layer moves a few pixels over the first screen of scrolling */
    html.js:not(.rm)[data-theme="a"] .dr-hero::before { animation: t-par linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  }
  /* the progress hairline under the header: the scroll position of the page (one animation) */
  @supports (animation-timeline: scroll()) {
    html.js:not(.rm)[data-theme="a"] .v-hd::after { animation: t-line-x linear both; animation-timeline: scroll(root block); }
  }
}