/* doctor-content.css -- the doctor page of 20 Oct 2026 (owner-approved design A Classic / B Modern: site-content-20oct/doctor/DESIGN.md).
   Loaded AFTER doctor-a.css | doctor-b.css (the kind templates link both). Everything here is either a block that did not exist on the page before
   (credentials, awards and publications, clinic photos, health notes, the visit extras) or the NAME-FIRST hero that replaces the P2 portrait row.
   Variant A (Classic) is the base; variant B (Modern) overrides through html[data-variant="b"], exactly like components.css. Reads only the live tokens (--dr-* are set on .dr by doctor-a/b.css).
   Order: 1 hero - 3 about + credentials - 4 recognitions + publications - 5 visit extras - 6 clinic photos - 7 health notes - 9 FAQ - 13 phones - 15 the real markup (photo box, values, fee cells).
   Not here (the shared owner's): the flat Arogo app card, the footer's legal block, the blog pages (components.css). No url(), no @import, no font, no script. */

/* ---------- 1. hero: a compact plain headshot beside the name; the photo column is gone ---------- */
.dr-id { display: flex; align-items: center; gap: 16px; }
.dr-hs { flex: none; width: 112px; height: 112px; border-radius: 28px; overflow: hidden; background: linear-gradient(150deg, var(--dr-tint), #fff); box-shadow: 0 0 0 4px #fff, var(--dr-sh2); }
.dr-hs img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.dr-id-t { min-width: 0; }
.dr-hero h1.dr-name { margin: 0; font: 800 30px/1.06 var(--dr-head); letter-spacing: -.028em; color: var(--dr-ink); }
.dr-hero h1.dr-name .dr-ac { display: block; margin-top: 6px; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; font-weight: 700; color: var(--dr-acc); }
.dr-deg { margin-top: 10px; font: 600 15.5px/1.35 var(--dr-sans); color: var(--dr-ink); }
.dr-role { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--dr-muted); }
.dr-regline { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin-top: 20px; padding: 10px 16px 10px 10px; border: 1px solid var(--dr-line); border-radius: 16px; background: #fff; box-shadow: var(--dr-sh1); }
.dr-regline .dr-ic { width: 40px; height: 40px; }
.dr-regline b { display: block; font: 800 15px/1.2 var(--dr-head); color: var(--dr-ink); }
.dr-regline em { display: block; margin-top: 2px; font-style: normal; font-size: 13.5px; line-height: 1.35; color: var(--dr-muted); }
.dr-hero .dr-lead { margin: 18px 0 0; max-width: 48ch; font-size: 17px; }
.dr-fees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; max-width: 580px; background: #fff; border: 1px solid var(--dr-line); border-radius: 18px; box-shadow: var(--dr-sh1); }
.dr-fees li { padding: 14px 12px 12px; }
.dr-fees li + li { border-left: 1px solid var(--dr-line); }
.dr-fees b { display: block; font: 800 24px/1 var(--dr-head); letter-spacing: -.02em; color: var(--dr-ink); }
.dr-fees span { display: block; margin-top: 7px; font: 600 13px/1.25 var(--dr-sans); color: var(--dr-ink); }
.dr-fees small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--dr-sans); color: var(--dr-muted); }
.dr-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.dr-hero-cta .dr-btn { flex: 1 1 auto; }
.dr-sees-l { margin-top: 26px; font: 700 12px/1.2 var(--dr-head); letter-spacing: .1em; text-transform: uppercase; color: var(--dr-muted); }
.dr-sees { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dr-sees a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 99px; background: #fff; border: 1px solid var(--dr-line); font: 600 13.5px/1 var(--dr-sans); color: var(--dr-ink); text-decoration: none; transition: border-color .2s, background .2s; }
.dr-sees a:hover { border-color: var(--dr-acc); }
.dr-sees a .ic { width: 16px; height: 16px; }
.dr-sees a.all { background: var(--dr-tint); border-color: transparent; color: var(--dr-ink2); font-weight: 700; }
.dr-facts4 { margin-top: 22px; max-width: 580px; gap: 14px 16px; }
.dr-facts4 li { align-items: center; }
.dr-facts4 li > span:last-child { font: 500 13.5px/1.35 var(--dr-sans); color: var(--dr-body); }
.dr-facts4 b { display: block; margin-bottom: 1px; font: 700 13.5px/1.25 var(--dr-head); color: var(--dr-ink); }
@media (min-width: 640px) {
  .dr-id { gap: 24px; }
  .dr-hs { width: 144px; height: 144px; border-radius: 34px; }
  .dr-hero h1.dr-name { font-size: 40px; }
  .dr-hero h1.dr-name .dr-ac { font-size: 22px; margin-top: 8px; }
  .dr-deg { font-size: 17px; }
  .dr-role { font-size: 15px; }
  .dr-hero .dr-lead { font-size: 18px; }
  .dr-hero-cta .dr-btn { flex: 0 0 auto; }
}
/* A: text | booking card (the old text | photo | card grid becomes two columns) */
@media (min-width: 700px) { html[data-variant="a"] .dr-hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1100px) {
  html[data-variant="a"] .dr-hero-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: start; }
  html[data-variant="a"] .dr-hero-text { padding-top: 20px; }
  .dr-hero h1.dr-name { font-size: clamp(40px, 3.6vw, 52px); }
  .dr-hero h1.dr-name .dr-ac { font-size: clamp(22px, 1.9vw, 28px); }
}
/* B: circle headshot, glass chips, text | card from 1180 */
html[data-variant="b"] .dr-hs { border-radius: 50%; }
html[data-variant="b"] .dr-pill { margin-bottom: 20px; }
html[data-variant="b"] .dr-hero .dr-lead { margin-bottom: 0; }
html[data-variant="b"] .dr-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
html[data-variant="b"] .dr-cta .dr-btn:first-child { flex: 1 1 100%; }
html[data-variant="b"] .dr-cta .dr-btn { min-width: 0; }
.dr-glassrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
html[data-variant="b"] .dr-glassrow .dr-glass { position: static; left: auto; right: auto; top: auto; bottom: auto; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--dr-line); box-shadow: var(--dr-sh1); }
html[data-variant="b"] .dr-glassrow .dr-glass b { font-size: 14.5px; }
html[data-variant="b"] .dr-glassrow .dr-glass.is-open { padding-left: 14px; }
html[data-variant="b"] .dr-fees { background: none; border: 0; box-shadow: none; gap: 12px; margin-top: 22px; }
html[data-variant="b"] .dr-fees li { background: #fff; border: 1px solid var(--dr-line); border-radius: 16px; box-shadow: var(--dr-sh1); }
html[data-variant="b"] .dr-fees li + li { border-left: 1px solid var(--dr-line); }
@media (min-width: 640px) { html[data-variant="b"] .dr-cta .dr-btn:first-child { flex: 0 0 auto; } }
@media (min-width: 768px) { html[data-variant="b"] .dr-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } html[data-variant="b"] .dr-hero { padding: 44px 0 56px; } }
@media (min-width: 1180px) {
  html[data-variant="b"] .dr-hero-grid { grid-template-columns: minmax(0, 1fr) 392px; gap: 64px; align-items: start; }
  html[data-variant="b"] .dr-hero { padding-top: 40px; }
}

/* B, phone: the bento ends in a wide row card (the eighth showing) whose text is pinned to the top and bottom edges; centre it */
@media (max-width: 767px) {
  html[data-variant="b"] .dr-bento > .dr-card:nth-child(8 of :not([hidden])) .dr-cb { justify-content: center; gap: 8px; padding: 16px 20px; }
  html[data-variant="b"] .dr-bento > .dr-card:nth-child(8 of :not([hidden])) .dr-book { margin-top: 6px; }
  html[data-variant="b"] .dr-bento > .dr-card:nth-child(8 of :not([hidden])) h3 { font-size: 18px; }
  html[data-variant="b"] .dr-bento > .dr-card:nth-child(8 of :not([hidden])) p { font-size: 14.5px; }
}

/* treatments cards (owner review rb_lkpcgzko): a long unbroken word wraps inside the card instead of being cut; in ONE list --i runs to 32, so the reveal ripple counts the card's place in a
   row (0-3), not in the whole list -- a card of the ninth row must not wait two seconds after it scrolls in */
.dr-cb h3, .dr-cb p { overflow-wrap: anywhere; }
html.js:not(.rm) .dr-grid > .dr-card[data-reveal]:not(.is-settled) { transition-delay: calc(min(var(--i, 0), 3) * var(--stagger)); }

/* ---------- 3. about + credentials ---------- */
.dr-about2 { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.dr-about2 .dr-about-body { padding-top: 0; max-width: none; }
.dr-tl2 { display: grid; gap: 4px 40px; margin-top: 12px; }
.dr-tl2 .dr-h3 { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; }
.dr-tl2 .dr-h3 .ic { width: 22px; height: 22px; color: var(--dr-acc); }
.dr-side { display: grid; gap: 16px; align-content: start; }
.dr-panel { background: #fff; border: 1px solid var(--dr-line); border-radius: var(--dr-r3); box-shadow: var(--dr-sh1); padding: 20px; }
.dr-panel h3 { display: flex; align-items: center; gap: 12px; font: 800 17px/1.2 var(--dr-head); color: var(--dr-ink); margin: 0; }
.dr-panel h3 .dr-ic { width: 38px; height: 38px; }
.dr-panel h3 .dr-ic .ic { width: 20px; height: 20px; }
.dr-panel-reg { background: linear-gradient(160deg, var(--dr-tint), #fff 70%); border-color: color-mix(in srgb, var(--dr-acc) 18%, #fff); }
.dr-panel-reg h3 .dr-ic { background: #fff; }
.dr-regno { margin: 16px 0 6px; font: 800 30px/1.1 var(--dr-head); letter-spacing: -.02em; color: var(--dr-ink); }
.dr-dl { display: grid; margin: 8px 0 8px; }
.dr-dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--dr-acc) 14%, #fff); font-size: 14.5px; }
.dr-dl dt { color: var(--dr-muted); }
.dr-dl dd { margin: 0; color: var(--dr-ink); font-weight: 600; text-align: right; }
.dr-lnk2 { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 700 14px/1.2 var(--dr-head); color: var(--dr-ink2); text-decoration: none; }
.dr-lnk2:hover { text-decoration: underline; }
.dr-lnk2 .ic { width: 16px; height: 16px; }
.dr-list { display: grid; gap: 14px; margin-top: 16px; }
.dr-list li { display: flex; gap: 10px; align-items: flex-start; }
.dr-list li > .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--dr-acc); }
.dr-list b { display: block; font: 700 15px/1.3 var(--dr-head); color: var(--dr-ink); }
.dr-list span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--dr-muted); }
.dr-sep { height: 1px; background: var(--dr-line); margin: 18px 0 0; }
@media (min-width: 640px) { .dr-tl2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .dr-about2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
  .dr-side { position: sticky; top: 92px; }
}
/* the timeline of Classic exists only in doctor-a.css: Modern gets the same structure, drawn its own way (pill years, inside a card) */
html[data-variant="b"] .dr-tl { position: relative; margin-top: 18px; padding-left: 22px; }
html[data-variant="b"] .dr-tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--dr-line); }
html[data-variant="b"] .dr-tl li { position: relative; padding-bottom: 18px; }
html[data-variant="b"] .dr-tl li:last-child { padding-bottom: 0; }
html[data-variant="b"] .dr-tl li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--dr-acc); box-shadow: 0 0 0 4px var(--dr-tint); }
html[data-variant="b"] .dr-tl time { display: inline-block; font: 700 12px/1 var(--dr-head); letter-spacing: .04em; color: var(--dr-ink2); background: var(--dr-tint); padding: 5px 9px; border-radius: 99px; margin-bottom: 6px; }
html[data-variant="b"] .dr-tl b { display: block; font: 700 15.5px/1.3 var(--dr-head); color: var(--dr-ink); }
html[data-variant="b"] .dr-tl span { display: block; margin-top: 2px; font-size: 14px; color: var(--dr-muted); }
html[data-variant="b"] .dr-about { background: linear-gradient(180deg, var(--dr-soft), #fff); }
html[data-variant="b"] .dr-about-top { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
html[data-variant="b"] .dr-cred-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
html[data-variant="b"] .dr-panel { border-radius: var(--dr-r3); }
html[data-variant="b"] .dr-panel-reg { box-shadow: var(--dr-sh2); }
@media (min-width: 900px) {
  html[data-variant="b"] .dr-about-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; }
  html[data-variant="b"] .dr-cred-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
}

/* ---------- 4. recognitions + publications (the owner's "awards with text and images") ---------- */
.dr-recog { background: var(--dr-soft); }
.dr-awards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.dr-award { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--dr-line); border-radius: var(--dr-r2); padding: 16px; box-shadow: var(--dr-sh1); }
.dr-award-img { position: relative; flex: none; display: block; width: 72px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; border: 1px solid var(--dr-line); background: var(--dr-tint); }
.dr-award-img svg.sc { position: absolute; inset: 0; width: 100%; height: 100%; }
.dr-award-img.is-icon { display: grid; place-items: center; color: var(--dr-acc); }
.dr-award-img.is-icon .ic { width: 30px; height: 30px; }
a.dr-award-img { transition: box-shadow .2s, border-color .2s; }
a.dr-award-img:hover { border-color: var(--dr-acc); box-shadow: var(--dr-sh2); }
.dr-zoom { position: absolute; right: 5px; top: 5px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--dr-ink2); display: grid; place-items: center; box-shadow: var(--dr-sh1); }
.dr-zoom .ic { width: 14px; height: 14px; }
.dr-award-b { min-width: 0; }
.dr-award h3 { margin: 0; font: 700 16px/1.3 var(--dr-head); color: var(--dr-ink); }
.dr-by { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--dr-body); }
.dr-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; }
.dr-yr { font: 800 12px/1 var(--dr-head); letter-spacing: .06em; color: var(--dr-ink2); background: var(--dr-tint); padding: 6px 10px; border-radius: 99px; }
.dr-lnk { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--dr-sans); color: var(--dr-muted); }
.dr-lnk .ic { width: 16px; height: 16px; }
.dr-pubs { margin-top: 44px; }
.dr-pubs h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 800 20px/1.2 var(--dr-head); color: var(--dr-ink); }
.dr-publist { display: grid; gap: 10px; }
.dr-pub { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px; background: #fff; border: 1px solid var(--dr-line); border-radius: var(--dr-r2); box-shadow: var(--dr-sh1); }
.dr-pub time { font: 800 14px/1.5 var(--dr-head); color: var(--dr-ink2); }
.dr-pub .t { display: inline; font: 700 15.5px/1.4 var(--dr-head); color: var(--dr-ink); text-decoration: none; }
.dr-pub .t:hover { text-decoration: underline; }
.dr-pub .t .ic, .dr-pm .ic { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -1px; }
.dr-pub .j { margin-top: 2px; font-size: 13.5px; color: var(--dr-muted); }
.dr-pm { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font: 700 13px/1 var(--dr-head); color: var(--dr-ink2); text-decoration: none; }
.dr-pm:hover { text-decoration: underline; }
@media (min-width: 760px) {
  .dr-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .dr-pub { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; padding: 16px 20px; }
  .dr-pm { grid-column: auto; justify-self: end; }
}
html[data-variant="b"] .dr-recog { background: #fff; }
html[data-variant="b"] .dr-award { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
html[data-variant="b"] .dr-award-img { width: 100%; aspect-ratio: auto; height: 132px; border: 0; border-radius: 0; display: grid; place-items: center; background: radial-gradient(110% 100% at 50% 0%, #fff, var(--dr-tint) 78%); }
html[data-variant="b"] a.dr-award-img { box-shadow: none; }
html[data-variant="b"] .dr-award-img svg.sc { position: static; width: auto; height: 108px; aspect-ratio: 3 / 4; border-radius: 6px; box-shadow: 0 8px 20px -6px rgb(15 23 42 / .25); }
html[data-variant="b"] .dr-award-img .dr-zoom { right: calc(50% - 66px); top: 14px; }
html[data-variant="b"] .dr-award-img.is-icon .ic { width: 44px; height: 44px; stroke-width: 1.4; }
html[data-variant="b"] .dr-award-b { padding: 16px 18px 18px; }
html[data-variant="b"] .dr-pub { border-radius: var(--dr-r2); }
@media (min-width: 640px) { html[data-variant="b"] .dr-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { html[data-variant="b"] .dr-awards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ---------- 5. visit: video consultation + payment lines inside the two boxes ---------- */
.dr-line2 { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--dr-tint); font-size: 14.5px; line-height: 1.5; color: var(--dr-body); }
.dr-line2 b { color: var(--dr-ink); }
.dr-line2 .dr-ic { width: 38px; height: 38px; background: #fff; }
.dr-pay { margin: 0 0 16px; }
.dr-pay-l { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; font: 700 13px/1.2 var(--dr-head); letter-spacing: .04em; text-transform: uppercase; color: var(--dr-muted) !important; }
.dr-pay-l .ic { width: 18px; height: 18px; color: var(--dr-acc); }
.dr-chips2 { display: flex; flex-wrap: wrap; gap: 8px; }
/* the looks (D3, backend-api, 22 Oct; MAX R3 + the V2 joins): the payment chips stand ONE under the other in every look (a wrapping row of chips beside "Call clinic" joins two owner texts the page keeps apart), set once here, not in the sheets. Scoped to `html[data-look]`: Navy & Teal and Modern draw as before */
html[data-look] .dr-chips2 { flex-direction: column; align-items: flex-start; }
/* ... and the footer of the timings card (payments | Call clinic): with the chips in a column the two blocks would fit side by side on a phone where Navy & Teal wraps them (LANE1-APPLY B2) */
html[data-look] .dr-tbl .dr-foot { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
.dr-chips2 li { padding: 8px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--dr-line); font: 600 13.5px/1 var(--dr-sans); color: var(--dr-ink); }
.dr-addr .dr-pay-n { margin: 10px 0 0; font-size: 13.5px; color: var(--dr-muted); }
.dr-journey-sec .dr-bring { margin-top: 40px; }
.dr-bring-sec { padding: 8px 0 64px; }
.dr-bring-sec .dr-bring { margin: 0; }

/* ==== the timetable as a table, with the place and a map card beside it (owner review rb_3rnpu4wu p7 + p8): doctor/_visit.html, _schedule.html, _map_card.html, _map_place.html, _picked.html ====
   The templates speak the page script's words (motion.js, the map card): [data-map] is the card and carries data-state idle | loading | ready | none, [data-map-frame] holds the one frame, a place is
   [data-map-place] (.is-current shown; the script gives the others the hidden attribute), a picker (a row, its button, a chip) is [data-map-pick] and gets .is-sel (+ aria-pressed on a button). ==== */
/* ---------- 0. the place dots (A = the doctor's accent, B / C fixed; the LETTER inside the dot is the real identifier) ---------- */
.dr-visit { --pa: var(--accent); --pb: #0F766E; --pc: #B45309; --pd: #6D28D9; }
.dr-pdot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--dc, var(--accent)); color: #fff; font: 800 11.5px/1 var(--f-head, "Plus Jakarta Sans", sans-serif); flex: none; font-style: normal; box-shadow: 0 0 0 2px #fff; }
.dr-pdot.a { --dc: var(--pa); } .dr-pdot.b { --dc: var(--pb); } .dr-pdot.c { --dc: var(--pc); } .dr-pdot.d { --dc: var(--pd); }

/* ---------- 1. the timetable card (p8) ---------- */
.dr-tbl { padding: 20px; }
.dr-tbl .dr-box-h { margin-bottom: 4px; }
.dr-strip { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; padding: 10px 12px 10px 12px; border-radius: 16px; background-color: color-mix(in srgb, var(--dr-tint) 62%, #fff); border: 1px solid color-mix(in srgb, var(--dr-acc) 14%, #fff); }
.dr-strip .dr-strip-pin { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; color: var(--dr-acc); display: grid; place-items: center; flex: none; box-shadow: var(--dr-sh1); }
.dr-strip .dr-strip-pin .ic { width: 20px; height: 20px; }
.dr-strip .dr-strip-st { min-width: 0; }
.dr-strip b { display: block; font: 800 15.5px/1.3 var(--dr-head); color: var(--dr-ink); }
.dr-strip .dr-strip-st span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--dr-body); }
.dr-strip a { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; font: 700 13.5px var(--dr-head); color: var(--dr-ink2); text-decoration: none; }
.dr-strip a:hover { text-decoration: underline; }
.dr-strip a .ic { width: 16px; height: 16px; }

.dr-box .dr-tt { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 4px; }   /* .dr-box table (live) says 0 4px */
.dr-tt th, .dr-tt td { padding: 10px 12px; text-align: left; font-size: 15px; vertical-align: middle; background-clip: padding-box; }
.dr-tt .dr-d { width: 18%; font: 800 15px/1.25 var(--dr-head); color: var(--dr-ink); vertical-align: top; padding-top: 19px; }
.dr-tt .dr-time { width: 29%; font: 600 15px/1.35 var(--dr-sans); color: var(--dr-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dr-tt .dr-pl { width: 53%; padding-right: 10px; }
.dr-tt-multi:not(:has(.dr-pl)) .dr-d { width: 30%; }                  /* a week whose places could not be read: Day | Time only, the time takes the room of the place column */
.dr-tt-multi:not(:has(.dr-pl)) .dr-time { width: 70%; }
.dr-day + .dr-day > tr.dr-first > * { border-top: 10px solid transparent; }
.dr-per > td { height: 58px; }
/* one place: no place column, the periods of a day stack in the time cell (as the live table does) */
.dr-tt:not(.dr-tt-multi) .dr-d { width: 30%; vertical-align: middle; padding-top: 11px; }
.dr-tt:not(.dr-tt-multi) .dr-time { width: 70%; }
.dr-tt:not(.dr-tt-multi) .dr-time span { display: block; }
.dr-tt:not(.dr-tt-multi) .dr-per > td { height: auto; }

/* the table is the page's [data-timings] box (T7): motion.js's clock also marks today's tbody (.today, data-today-row, aria-current) and doctor-a / doctor-b dress that as THEIR today row (tint, rounded ends, a TODAY tag
   on every th / td of it). This table has ONE today band, .is-today below: the clock's mark is a hook, not a look. (Ties go to this file: it loads last.) */
.dr-day[data-today-row] { background: none; }
.dr-tt [data-today-row] > tr > th, .dr-tt [data-today-row] > tr > td { border-radius: 0; box-shadow: none; }
.dr-tt [data-today-row] > tr > th::after { content: none; }
/* today (the server marks it; motion.js moves .is-today to the visitor's day by data-today on EVERY row-group) */
.dr-day.is-today > tr > * { background-color: var(--dr-tint); }
.dr-day.is-today > tr > .dr-d { border-radius: 14px 0 0 14px; box-shadow: inset 4px 0 0 var(--dr-acc); }
.dr-day.is-today > tr.dr-first > td:last-child { border-top-right-radius: 14px; }
.dr-day.is-today > tr.dr-last > td:last-child { border-bottom-right-radius: 14px; }
.dr-tt:not(.dr-tt-multi) .dr-day.is-today > tr > td:last-child { border-radius: 0 14px 14px 0; }
.dr-tt:not(.dr-tt-multi) .dr-day.is-today .dr-time { font-weight: 700; }
/* a closed day */
.dr-day.is-closed .dr-off { color: var(--dr-muted); font-weight: 500; }
.dr-day.is-closed .dr-d { color: var(--dr-body); }

/* the live .dr-box td span rules (display:block; at 1100px inline + a " · " between sibling spans) must not touch the cell's own spans */
.dr-tt td span + span::before { content: none !important; }
.dr-tt td .dr-pt { display: block; white-space: normal; }
.dr-tt td .dr-go { display: grid; white-space: normal; }
.dr-dh { display: none; }
.dr-tt td .nw { display: inline; white-space: nowrap; }
.dr-tt td .dr-sa { display: inline; }
.dr-tt:not(.dr-tt-multi) .dr-time span.nw { display: block; }

/* a place cell = the button that picks that place on the map */
.dr-pbtn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; cursor: pointer; border-radius: 12px; }
.dr-pbtn:focus-visible { outline: 3px solid var(--dr-acc); outline-offset: 2px; }
.dr-pt { min-width: 0; flex: 1; }
.dr-pt b { display: block; font: 700 14.5px/1.3 var(--dr-head); color: var(--dr-ink); }
.dr-pt small { display: block; margin-top: 1px; font: 400 13px/1.35 var(--dr-sans); color: var(--dr-muted); overflow-wrap: anywhere; }
.dr-go { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--dr-muted); background-color: transparent; transition: background .2s, color .2s; }
.dr-go .ic { width: 16px; height: 16px; }
html.js .dr-tt-multi .dr-per { cursor: pointer; }
.dr-tt-multi .dr-per:hover > td { background-color: color-mix(in srgb, var(--dr-acc) 5%, #fff); }
.dr-tt-multi .dr-day.is-today .dr-per:hover > td { background-color: color-mix(in srgb, var(--dr-acc) 9%, var(--dr-tint)); }
.dr-per:hover .dr-go { background-color: var(--dr-tint); color: var(--dr-ink2); }
/* the picked period: a white card with the accent ring, the pin tag filled. The script marks EVERY row of the shown place (.is-sel), so two rows of one day join into one block (no line between them) */
.dr-per.is-sel > td { --t: 2px; --b: -2px; --rt: 14px; --rb: 14px; background-color: #fff !important; box-shadow: inset 0 var(--t) 0 var(--dr-acc), inset 0 var(--b) 0 var(--dr-acc); }
.dr-per.is-sel > td:nth-of-type(1) { border-radius: var(--rt) 0 0 var(--rb); box-shadow: inset 2px 0 0 var(--dr-acc), inset 0 var(--t) 0 var(--dr-acc), inset 0 var(--b) 0 var(--dr-acc); }
.dr-per.is-sel > td:last-of-type { border-radius: 0 var(--rt) var(--rb) 0; box-shadow: inset -2px 0 0 var(--dr-acc), inset 0 var(--t) 0 var(--dr-acc), inset 0 var(--b) 0 var(--dr-acc); }
.dr-per.is-sel:has(+ .dr-per.is-sel) > td { --b: 0px; --rb: 0px; border-bottom-color: transparent; }
.dr-per.is-sel + .dr-per.is-sel > td { --t: 0px; --rt: 0px; }
.dr-per.is-sel .dr-go { background-color: var(--dr-acc); color: #fff; }
.dr-hint { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: 13px; line-height: 1.45; color: var(--dr-muted); }
.dr-hint .ic { width: 16px; height: 16px; color: var(--dr-acc); flex: none; }
.dr-tbl .dr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dr-line); }
.dr-tbl .dr-foot .dr-pay { margin: 0; }
.dr-call { min-height: 44px; }

/* ---------- 2. the map card (p7 + p8) ---------- */
.dr-mapc { padding: 16px; display: grid; gap: 14px; align-content: start; scroll-margin-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }    /* a pick on a phone brings the card into view (motion.js, block nearest): clear of the sticky action bar (the top is html { scroll-padding-top }) */
@media (min-width: 800px) {
  .dr-mapc { position: sticky; top: 92px; align-self: start; }       /* one place or several: the same card (p8 v2: every period of ONE place is a row too, the table is as long) */
  .dr-mapf { aspect-ratio: 1.12 / 1; }
}
.dr-pchips { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-pchip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 9px; border-radius: 99px; border: 1.5px solid var(--dr-line); background: #fff; font: 700 13.5px/1 var(--dr-head); color: var(--dr-ink); cursor: pointer; }
.dr-pchip:focus-visible { outline: 3px solid var(--dr-acc); outline-offset: 2px; }
.dr-pchip .dr-pdot { box-shadow: none; }
.dr-pchip.is-sel, .dr-pchip[aria-pressed="true"] { border-color: var(--dr-acc); background: color-mix(in srgb, var(--dr-acc) 7%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dr-acc) 13%, transparent); }
.dr-mapf { position: relative; aspect-ratio: 4 / 3; border-radius: var(--dr-r2); overflow: hidden; background: var(--dr-tint); border: 1px solid var(--dr-line); }
.dr-mapf > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* the card's states (the script sets data-state on the card): idle = the poster, loading = the poster with a spinner while the frame comes, ready = the map, none = the shown place has no map to show */
.dr-mapc[data-state="loading"] .dr-load, .dr-mapc[data-state="ready"] .dr-load, .dr-mapc[data-state="loading"] .dr-pn, .dr-mapc[data-state="ready"] .dr-pn { display: none; }
/* the poster is ABOVE the frame (z-index) while it loads -- the frame is transparent until Google paints it, and a blocked one never does -- then, once it has loaded, it keeps its spinner 1.2 s (Google paints its tiles a moment after the load) and fades off, showing the map */
.dr-mapc[data-state="ready"] .dr-poster { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s 1.2s, visibility 0s 1.6s; }
.dr-mapc[data-state="none"] .dr-mapf { display: none; }
.dr-poster { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 22px; text-align: center; transition: opacity .3s;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--dr-acc) 13%, transparent) 0 52px, transparent 53px),
    repeating-radial-gradient(circle at 50% 38%, transparent 0 56px, color-mix(in srgb, var(--dr-acc) 9%, transparent) 57px 58px, transparent 59px 96px),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--dr-tint) 70%, #fff)); }
.dr-pinbig { margin-bottom: 6px; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--dr-acc); display: grid; place-items: center; box-shadow: var(--dr-sh2); }
.dr-pinbig .ic { width: 28px; height: 28px; }
.dr-poster .dr-ptt, .dr-pc-off .dr-ptt { font: 800 17px/1.25 var(--dr-head); color: var(--dr-ink); margin: 0; }
.dr-poster .dr-pn, .dr-pc-off .dr-pn { font-size: 12.5px; line-height: 1.45; color: var(--dr-body); margin: 0; max-width: 30ch; }
.dr-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--dr-acc) 22%, #fff); border-top-color: var(--dr-acc); animation: dr-spin 1s linear infinite; display: none; }
.dr-mapc[data-state="loading"] .dr-spin, .dr-mapc[data-state="ready"] .dr-spin { display: block; }
@keyframes dr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dr-spin { animation-duration: 3s; } }
/* "Map by Google ..." (security's line 12: visible beside the map on computers too): only while there is a map to name */
.dr-gn { display: none; margin: -6px 2px 0; font-size: 12px; line-height: 1.4; color: var(--dr-muted); }
.dr-mapc[data-state="loading"] .dr-gn, .dr-mapc[data-state="ready"] .dr-gn { display: block; }
.dr-pc { display: grid; gap: 6px; }
.dr-pc[hidden] { display: none; }
/* the echo of the picked period (p8 v2: the script writes "<day> · <time>" as TEXT from the ringed row; printed empty and hidden, so without scripts there is nothing). The dot is the ring's colour. An author display beats [hidden]: said here */
.dr-mapc [data-map-when] { display: flex; align-items: center; gap: 9px; margin: 0; padding: 10px 14px; border-radius: 12px; background-color: color-mix(in srgb, var(--dr-tint) 72%, #fff); border: 1px solid color-mix(in srgb, var(--dr-acc) 16%, #fff); font: 700 14px/1.35 var(--dr-head); color: var(--dr-ink2); overflow-wrap: anywhere; }
.dr-mapc [data-map-when]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: var(--dr-acc); flex: none; }
.dr-mapc [data-map-when][hidden], .dr-mapc [data-map-when]:empty { display: none; }
/* the place chips and the echo of the picked period are the card's first two children in the markup (_map_card.html): they stand at the TOP, where a pick is seen without scrolling, in the page's own order (no `order`: D3 SIMPLIFY, the place labels are typed text) */
/* a private place (D-3, the approved card): a framed box that says why there is no map, then the name, "No map and no route ...", the WhatsApp button */
/* `width: 100%; min-width: 0` (D3 V2 round, found by scripts/looks_probe.mjs): a grid item with an aspect-ratio takes its minimum width FROM its content height (the transferred size) -- a look with larger type made the box, and the card's one grid column, 334 px wide in a 262 px card at 390 px, and the section clipped it */
.dr-pc-off { display: grid; align-content: center; justify-items: center; gap: 12px; width: 100%; min-width: 0; padding: 22px; text-align: center; aspect-ratio: 4 / 3; border-radius: var(--dr-r2); border: 1px solid var(--dr-line); background: linear-gradient(180deg, #fff, var(--soft, #F8FAFC)); }
.dr-pc-off .dr-pinbig { color: var(--dr-muted); }
@media (min-width: 800px) { .dr-pc-off { aspect-ratio: 1.12 / 1; } }
.dr-pc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dr-pkind { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 99px; background: var(--dr-tint); color: var(--dr-ink2); font: 800 12px/1 var(--dr-head); letter-spacing: .03em; }
.dr-pkind .ic { width: 15px; height: 15px; }
.dr-pdays { font: 600 13px/1.3 var(--dr-sans); color: var(--dr-muted); }
.dr-pdays b { color: var(--dr-ink); font-weight: 700; }
.dr-pc-n { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font: 800 18px/1.25 var(--dr-head); color: var(--dr-ink); }
.dr-pc-a { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--dr-body); }
.dr-pc-w { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft, #FEF3C7); color: #7A3E06; font-size: 13px; line-height: 1.45; }
.dr-pc-w .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.dr-pc-b { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.dr-pc-b .dr-btn { flex: 1 1 auto; white-space: nowrap; }
.dr-pc-b .dr-btn-ghost .ic { width: 16px; height: 16px; }
/* the looks (D3, backend-api, 22 Oct; MAX 11:25 + R3, LANE1-APPLY B1): the map card's two buttons stand ONE under the other in every look, set once here and not in ten sheets (a look that gives the card the whole width would draw them side by side where Navy & Teal wraps them). Scoped to `html[data-look]`: Navy & Teal and Modern draw as before */
html[data-look] .dr-pc-b { flex-wrap: nowrap; flex-direction: column; align-items: flex-start; }
html[data-look] .dr-pc-b .dr-btn { flex: none; }
@media (max-width: 640px) { html[data-look] .dr-pc-b { align-items: stretch; } }

.dr-visit-grid[data-solo] { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
/* without scripts nothing can be picked and no map is made: whatever carries data-js-only (the chips, the hint, the frame with its poster, the "Map by Google" line) is taken away and there is no pointer; every place's card shows (the script alone puts the others away), one under the other, with its own links */
html:not(.js) [data-js-only], html:not(.js) [data-map-when] { display: none; }
html:not(.js) .dr-pbtn { pointer-events: none; cursor: default; }
html:not(.js) .dr-pc + .dr-pc { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--dr-line); }

/* ---------- 3. the phone ---------- */
@media (max-width: 699px) {
  .dr-tbl { padding: 16px; }
  .dr-tt, .dr-tt tbody, .dr-tt tr, .dr-tt th, .dr-tt td { display: block; width: auto; }
  .dr-tt .dr-d, .dr-tt .dr-time, .dr-tt .dr-pl { width: auto; }
  .dr-day + .dr-day > tr.dr-first > * { border-top: 0; }
  .dr-day + .dr-day { margin-top: 6px; }
  .dr-day { border-radius: 14px; }
  .dr-day.is-today { background-color: var(--dr-tint); box-shadow: inset 4px 0 0 var(--dr-acc); }
  .dr-day.is-today > tr > * { background-color: transparent; box-shadow: none; border-radius: 0; }
  /* one place: the day on the left, its periods stacked on the right (the live phone layout) */
  .dr-tt:not(.dr-tt-multi) .dr-day { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); align-items: center; }
  .dr-tt:not(.dr-tt-multi) .dr-day > tr { display: contents; }
  .dr-tt:not(.dr-tt-multi) .dr-d { padding: 12px 0 12px 14px; width: auto; vertical-align: baseline; }
  .dr-tt:not(.dr-tt-multi) .dr-time { width: auto; padding: 12px 12px 12px 0; }
  /* every period is a row: line 1 = the day (its own cell, the first row of the day only: it hangs in the gutter) and the time, line 2 = the place (name, the short address under it) */
  .dr-tt-multi .dr-dh { display: none; }                            /* the header line is the desktop's phone twin no more: the day is the first row's own cell */
  .dr-tt-multi .dr-day > tr > .dr-d { display: block; grid-column: 1; grid-row: 1; padding: 12px 0 0 10px; }
  .dr-tt-multi .dr-day.is-today > tr > .dr-d { border-radius: 0; box-shadow: none; }
  .dr-tt-multi .dr-per { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 0; margin: 0 6px; border-radius: 12px; }
  .dr-tt-multi .dr-per > td { height: auto; padding: 8px 4px 8px 8px; border-radius: 0; box-shadow: none; background-color: transparent; }
  .dr-tt-multi .dr-per > .dr-time { grid-column: 2; grid-row: 1; padding: 12px 8px 2px 0; white-space: normal; font-size: 14.5px; line-height: 1.35; }
  .dr-tt-multi .dr-per > .dr-pl { grid-column: 1 / -1; grid-row: 2; padding: 0 4px 4px 8px; }
  .dr-tt-multi .dr-per > .dr-d, .dr-tt-multi .dr-per > .dr-time, .dr-tt-multi .dr-per.dr-last > .dr-pl { border-bottom: 0; }   /* look B's cell hairline: only the row's own bottom line (the place cell) stays, and the day's box draws the last */
  .dr-tt-multi .dr-per:last-child { margin-bottom: 4px; }
  .dr-tt-multi .dr-per:hover > td { background-color: transparent; }
  .dr-tt-multi .dr-per:hover { background-color: color-mix(in srgb, var(--dr-acc) 6%, transparent); }
  .dr-tt-multi .dr-per.is-sel { background-color: #fff; box-shadow: inset 0 0 0 2px var(--dr-acc); }
  .dr-tt-multi .dr-per.is-sel:has(+ .dr-per.is-sel) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: inset 2px 0 0 var(--dr-acc), inset -2px 0 0 var(--dr-acc), inset 0 2px 0 var(--dr-acc); }
  .dr-tt-multi .dr-per.is-sel + .dr-per.is-sel { border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: inset 2px 0 0 var(--dr-acc), inset -2px 0 0 var(--dr-acc), inset 0 -2px 0 var(--dr-acc); }
  .dr-tt-multi .dr-per.is-sel + .dr-per.is-sel:has(+ .dr-per.is-sel) { border-radius: 0; box-shadow: inset 2px 0 0 var(--dr-acc), inset -2px 0 0 var(--dr-acc); }
  .dr-tt-multi .dr-per.is-sel > td, .dr-tt-multi .dr-per.is-sel > td:nth-of-type(1), .dr-tt-multi .dr-per.is-sel > td:last-of-type { background-color: transparent !important; box-shadow: none; border-radius: 0; }
  .dr-tt-multi .dr-go { display: none !important; }
  /* the looks' phone timetable (backend-api, 22 Oct, mobile-components#3: lavender L-5, sky SK-7) -- scoped to `html[data-look]`, so Navy & Teal and Modern draw as before. (1) the desktop's 30 % / 70 % of a week without a place column left the time
     cell 70 % of its grid area on the phone: "10:00 AM - 1:00 PM" broke onto two lines; (2) the day label of a closed day stood ~6 px below its word; (3) the open-now pill touched the heading */
  html[data-look] .dr-tt-multi:not(:has(.dr-pl)) .dr-d, html[data-look] .dr-tt-multi:not(:has(.dr-pl)) .dr-time { width: auto; }
  html[data-look] .dr-tt-multi .dr-day.is-closed > tr > .dr-d { padding-bottom: 12px; }
  html[data-look] .dr-tbl .dr-box-h { margin-bottom: 12px; }
  .dr-pt b { font-size: 14px; }
  .dr-pchips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 14px; margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none; }    /* a snapped chip keeps the row's own padding as air, like the picked one motion.js brings in */
  .dr-pchips::-webkit-scrollbar { display: none; }
  .dr-pchip { flex: none; scroll-snap-align: start; }
  .dr-pbtn { gap: 8px; }
  .dr-day.is-closed { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); align-items: center; }
  .dr-day.is-closed > tr { display: contents; }
  .dr-tt-multi .dr-day.is-closed { grid-template-columns: 7.2rem minmax(0, 1fr); }
  .dr-tt-multi .dr-day.is-closed > tr > .dr-d { display: block; }
  .dr-day.is-closed .dr-d { padding: 12px 0 12px 14px; }
  .dr-day.is-closed td { padding: 12px 12px 12px 0; }
  .dr-tt-multi .dr-day.is-closed .dr-d { padding-left: 16px; }          /* in line with the day cells of the period rows (6 px margin + 10 px) and their time column */
  .dr-tt-multi .dr-day.is-closed td { padding-left: 6px; }
  .dr-mapc { padding: 14px; }
  .dr-strip a span { display: none; }
  .dr-strip a { width: 44px; height: 44px; padding: 0; justify-content: center; border: 1.5px solid color-mix(in srgb, var(--dr-acc) 28%, #fff); border-radius: 50%; background: #fff; }
  .dr-strip { padding-right: 4px; }
}

/* ---------- 4. look B (hairline rows, a TODAY tag, the red Google-style pin) ---------- */
html[data-variant="b"] .dr-box .dr-tt { border-collapse: separate; border-spacing: 0; }
html[data-variant="b"] .dr-day + .dr-day > tr.dr-first > * { border-top: 1px solid var(--dr-line); }
html[data-variant="b"] .dr-tt .dr-d { font-weight: 700; padding-top: 20px; }
html[data-variant="b"] .dr-day.is-today > tr > * { background-color: var(--dr-tint); }
html[data-variant="b"] .dr-day.is-today > tr > .dr-d { box-shadow: none; border-radius: 12px 0 0 12px; }
html[data-variant="b"] .dr-day.is-today > tr > .dr-d::after { content: "TODAY"; display: block; width: max-content; margin-top: 6px; font: 800 10px/1 var(--dr-sans); letter-spacing: .08em; background: var(--dr-acc); color: #fff; padding: 4px 6px; border-radius: 6px; }
html[data-variant="b"] .dr-tt:not(.dr-tt-multi) .dr-day.is-today > tr > .dr-d::after { display: inline-block; margin: 0 0 0 8px; vertical-align: 2px; }
html[data-variant="b"] .dr-strip { border-radius: 14px; background: var(--dr-tint); border-color: transparent; }
html[data-variant="b"] .dr-mapf { border-radius: 18px; }
html[data-variant="b"] .dr-pinbig { color: #DC2626; }
html[data-variant="b"] .dr-pchip { border-radius: 12px; }
html[data-variant="b"] .dr-pkind { border-radius: 8px; }
html[data-variant="b"] .dr-pc-b .dr-btn { border-radius: 14px; }
@media (max-width: 699px) {
  html[data-variant="b"] .dr-tt-multi .dr-day, html[data-variant="b"] .dr-tt:not(.dr-tt-multi) .dr-day { border-bottom: 1px solid var(--dr-line); border-radius: 0; }
  html[data-variant="b"] .dr-tt-multi .dr-day.is-today, html[data-variant="b"] .dr-tt:not(.dr-tt-multi) .dr-day.is-today { border-radius: 12px; box-shadow: none; border-bottom-color: transparent; }
  html[data-variant="b"] .dr-day.is-today > tr > .dr-d::after, html[data-variant="b"] .dr-tt:not(.dr-tt-multi) .dr-day.is-today > tr > .dr-d::after { display: block; margin: 5px 0 0; }
  html[data-variant="b"] .dr-day + .dr-day > tr.dr-first > * { border-top: 0; }                    /* the day's own hairline is the box's border-bottom */
  html[data-variant="b"] .dr-tt-multi .dr-day > tr > .dr-d { padding-top: 12px; }                  /* the day and the time share line 1 */
}

/* ---------- 6. clinic photo gallery: premises only, every picture captioned ---------- */
.dr-gallery { background: #fff; }
.dr-gal { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dr-gal li:last-child { grid-column: 1 / -1; }
.dr-gal figure { margin: 0; height: 100%; border: 1px solid var(--dr-line); border-radius: var(--dr-r2); overflow: hidden; background: #fff; box-shadow: var(--dr-sh1); display: flex; flex-direction: column; }
.dr-gal .im { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dr-tint); }
.dr-gal .im svg.sc { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .6s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.dr-gal .im:hover svg.sc { transform: scale(1.04); }
.dr-gal .dr-zoom { right: 10px; bottom: 10px; top: auto; width: 32px; height: 32px; opacity: 0; transition: opacity .2s; }
.dr-gal .im:hover .dr-zoom, .dr-gal .im:focus-visible .dr-zoom { opacity: 1; }
.dr-gal .dr-zoom .ic { width: 16px; height: 16px; }
.dr-gal figcaption { padding: 12px 16px 14px; font: 600 14px/1.3 var(--dr-sans); color: var(--dr-ink); }
.dr-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: 13px; color: var(--dr-muted); text-align: center; }
.dr-note .ic { color: var(--dr-muted); }
@media (min-width: 900px) {
  .dr-gal { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .dr-gal li:nth-child(-n + 2) { grid-column: span 3; }
  .dr-gal li:nth-child(n + 3) { grid-column: span 2; }
  .dr-gal li:nth-child(n + 3) .im { aspect-ratio: 4 / 3; }
  .dr-gal li:nth-child(-n + 2) .im { aspect-ratio: 16 / 10; }
}
/* Modern: a bento mosaic (one large tile) */
html[data-variant="b"] .dr-gal { gap: 12px; }
@media (min-width: 900px) {
  html[data-variant="b"] .dr-gal { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; }
  html[data-variant="b"] .dr-gal li:nth-child(n) { grid-column: auto; }
  html[data-variant="b"] .dr-gal li:first-child { grid-column: span 2; grid-row: span 2; }
  html[data-variant="b"] .dr-gal li:first-child figure { height: 100%; }
  html[data-variant="b"] .dr-gal li:first-child .im { aspect-ratio: auto; flex: 1; min-height: 320px; }
  html[data-variant="b"] .dr-gal li:nth-child(n + 2) .im { aspect-ratio: 4 / 3; }
  html[data-variant="b"] .dr-gal li:last-child { grid-column: auto; }
}

/* ---------- 7. health notes (blog strip) ---------- */
.dr-blog { background: var(--dr-soft); }
.dr-posts { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.dr-post { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--dr-line); border-radius: var(--dr-r2); overflow: hidden; box-shadow: var(--dr-sh1); transition: translate .25s, box-shadow .25s, border-color .25s; }
.dr-post:hover { translate: 0 -3px; box-shadow: var(--dr-sh2); border-color: var(--dr-acc); }
.dr-post-cover { position: relative; flex: none; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: linear-gradient(155deg, var(--dr-tint), #fff); }
.dr-post-cover::before { content: ""; position: absolute; left: 50%; top: 54%; height: 78%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: color-mix(in srgb, var(--dr-acc) 11%, #fff); }
.dr-post-cover .tx { position: relative; z-index: 1; height: 56%; width: auto; aspect-ratio: 1; color: var(--dr-acc); }
.dr-post-b { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.dr-post-tag { margin: 0; font: 700 11.5px/1.2 var(--dr-head); letter-spacing: .08em; text-transform: uppercase; color: var(--dr-ink2); }
.dr-post h3 { margin: 0; font: 700 18px/1.3 var(--dr-head); letter-spacing: -.005em; color: var(--dr-ink); }
.dr-post h3 a { color: inherit; text-decoration: none; }
.dr-post h3 a::after { content: ""; position: absolute; inset: 0; }
.dr-post .ex { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--dr-body); }
.dr-post-meta { margin: auto 0 0; padding-top: 6px; font-size: 13px; line-height: 1.5; color: var(--dr-muted); }
.dr-more-link { margin-top: 24px; text-align: center; }
/* Modern has no .dr-link of its own (it is in doctor-a.css only) */
html[data-variant="b"] .dr-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 15.5px/1 var(--dr-head); color: var(--dr-acc); text-decoration: none; }
html[data-variant="b"] .dr-link .ic { width: 18px; height: 18px; transition: transform .25s var(--dr-ease); }
html[data-variant="b"] .dr-link:hover { text-decoration: underline; }
html[data-variant="b"] .dr-link:hover .ic { transform: translateX(3px); }
@media (min-width: 760px) { .dr-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
html[data-variant="b"] .dr-more-link { text-align: left; }
html[data-variant="b"] .dr-blog { background: linear-gradient(180deg, #fff, var(--dr-soft)); }
@media (min-width: 900px) {
  html[data-variant="b"] .dr-posts { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
  html[data-variant="b"] .dr-post:first-child { grid-row: span 2; }
  html[data-variant="b"] .dr-post:first-child .dr-post-cover { aspect-ratio: auto; flex: 1; min-height: 240px; }
  html[data-variant="b"] .dr-post:first-child h3 { font-size: 24px; }
  html[data-variant="b"] .dr-post:first-child .ex { font-size: 16px; }
  html[data-variant="b"] .dr-post:nth-child(n + 2) { flex-direction: row; }
  html[data-variant="b"] .dr-post:nth-child(n + 2) .dr-post-cover { width: 38%; aspect-ratio: auto; align-self: stretch; }
  html[data-variant="b"] .dr-post:nth-child(n + 2) .dr-post-cover .tx { height: auto; width: min(58%, 104px); }
  html[data-variant="b"] .dr-post:first-child .dr-post-cover .tx { height: auto; width: min(34%, 190px); }
  html[data-variant="b"] .dr-post:nth-child(n + 2) .ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- 9. FAQ (six questions, readable width) + footer disclaimer ---------- */
.dr-faq .v-faq { max-width: 820px; margin-inline: auto; }
html[data-variant="b"] .dr-faq .v-faq { margin-inline: 0; }
.dr-faq .v-faq details p { line-height: 1.65; }
/* ---------- 13. mobile: the three notes (and Modern's awards) are a swipe row, so the page does not grow by a screen per card ---------- */
@media (max-width: 759px) {
  .dr-posts { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -20px; padding: 6px 20px 18px; scroll-padding-inline: 20px; }
  .dr-posts::-webkit-scrollbar { display: none; }
  .dr-posts > .dr-post { flex: 0 0 84%; scroll-snap-align: start; }
  html[data-variant="b"] .dr-posts { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}
@media (max-width: 639px) {
  html[data-variant="b"] .dr-awards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -16px; padding: 6px 16px 18px; scroll-padding-inline: 16px; }
  html[data-variant="b"] .dr-awards::-webkit-scrollbar { display: none; }
  html[data-variant="b"] .dr-awards > .dr-award { flex: 0 0 80%; scroll-snap-align: start; }
}


/* ---------- 15. the real markup: the shared photo box, value lists, flexible fee cells, no-booking hero, pictures instead of drawings ---------- */
.dr-hs { position: relative; }
.dr-hs .ph { width: 100%; height: 100%; aspect-ratio: auto; }
.dr-hs .ph > img { object-position: 50% 14%; }
.dr-hs .ph > .ph-ic { width: 38%; max-width: none; }
.dr-vals > span { display: inline; }
.dr-vals > span + span::before { content: ", "; }
.dr-vals-dot > span + span::before { content: "  \00B7  "; white-space: pre; }
.dr-hero .dr-lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dr-fees { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
@media (min-width: 640px) { .dr-fees { grid-auto-columns: minmax(0, 193px); width: fit-content; } }
html[data-variant="b"] .dr-fees { grid-auto-columns: minmax(0, 1fr); }
@media (min-width: 640px) { html[data-variant="b"] .dr-fees { grid-auto-columns: minmax(0, 185px); } }
html[data-variant] .dr-hero-grid.dr-nobook { grid-template-columns: minmax(0, 1fr); }
.dr-nobook .dr-hero-text { max-width: 760px; }
.dr-award-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; background: #fff; }
html[data-variant="b"] .dr-award-img img { position: static; width: auto; height: 108px; aspect-ratio: 3 / 4; border-radius: 6px; box-shadow: 0 8px 20px -6px rgb(15 23 42 / .25); }
.dr-detail { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--dr-muted); }
a.dr-lnk-a { color: var(--dr-ink2); font-weight: 700; text-decoration: none; min-height: 32px; }
a.dr-lnk-a:hover { text-decoration: underline; }
.dr-pub span.t { display: inline; font: 700 15.5px/1.4 var(--dr-head); color: var(--dr-ink); }
.dr-gal .im .ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transition: transform .6s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.dr-gal .im:hover .ph { transform: scale(1.04); }
.dr-gal .im .ph .ph-ic { width: 18%; }
.dr-post-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dr-post-cover:has(img)::before { display: none; }
.dr-post-cover > .ic { position: relative; z-index: 1; width: 56px; height: 56px; color: var(--dr-acc); }
@media (prefers-reduced-motion: reduce) { .dr-gal .im:hover .ph { transform: none; } }

/* ---------- 17. owner review rb_3rnpu4wu: the "Sees patients for" row runs the full content width under the hero grid; About and the care journey follow the hero ---------- */
.dr-hero { padding-bottom: 40px; }
.dr .dr-hero-sees { margin-top: 28px; }
.dr-hero-sees .dr-sees-l { margin-top: 0; }
.dr-hero-sees .dr-sees { margin-top: 12px; }
.dr-hero-sees .dr-sees li { flex: 1 1 auto; max-width: 300px; }
.dr-hero-sees .dr-sees a { width: 100%; justify-content: center; }
/* B: the hero WhatsApp is the twin of the booking card's "Book on WhatsApp" (doctor/_hero_b.html marks it dr-wa-card when the card has the bot link); hide it where the card is on the first screen (B shows the card from 1180 px) */
@media (min-width: 1180px) { html[data-variant="b"] .dr-cta .dr-wa-card { display: none; } }

/* ---------- 18. owner review rb_3rnpu4wu p1: the hero photo ~30 % larger with a soft accent ring (V1, the default); V2 = a tall soft shape with an offset outline (the class dr-hs-v2 on .dr-hs, doctor/_identity.html) ---------- */
/* V1. Size: --hs is the photo's side: 128 px on a phone of 390 px and up (112 px, as before, at 360 and below, so the name keeps its room), 188 px from 640 px (+30 % on 144). The box is the ring: a 3 px accent gradient border, a 4 px white gap, then the photo box (.ph, the box's only child)
   with its own radius. Nothing is laid over the photo; width and height are fixed here, so the page does not move when the picture arrives. The name is 28 px on a phone (it was 30) so a long one keeps its two lines beside the bigger photo. */
.dr-hs { --hs: clamp(112px, calc(112px + (100vw - 360px) * .53), 128px); --hs-r: 32px; width: var(--hs); height: var(--hs); padding: 4px; border: 3px solid transparent; border-radius: var(--hs-r);
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(145deg, color-mix(in srgb, var(--dr-acc) 88%, #fff), color-mix(in srgb, var(--dr-acc) 34%, #fff)) border-box;
  box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--dr-acc) 45%, transparent), 0 2px 8px rgb(15 23 42 / .07); }
.dr-hs .ph { border-radius: calc(var(--hs-r) - 7px); }
html[data-variant="b"] .dr-hs .ph { border-radius: 50%; }
@media (max-width: 639px) { .dr-hero h1.dr-name { font-size: 28px; } }
@media (min-width: 640px) {
  .dr-id { gap: 32px; }
  .dr-hs { --hs: 188px; --hs-r: 44px; }
}
/* the no-photo tile keeps its weight at the new size: a deeper tint and an icon that scales with the tile (the page's .ic size had pinned it to 24 px) */
.dr-hs .ph-person { background: linear-gradient(150deg, var(--dr-tint), color-mix(in srgb, var(--dr-acc) 14%, #fff)); }
.dr-hs .ph > .ph-ic { width: 34%; height: auto; aspect-ratio: 1; color: var(--dr-acc); opacity: .45; stroke-width: 1.4; }
/* V2 (one class: dr-hs-v2 on .dr-hs in doctor/_identity.html): a tall soft shape, the photo box clipped by its own radius, a thin accent outline offset behind it. A: tall rounded rectangle; B: an arch. */
.dr-hs.dr-hs-v2 { --hs: 112px; --hs-r: 40px; width: var(--hs); height: calc(var(--hs) * 1.25); margin: 0 10px 10px 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; isolation: isolate; }
.dr-hs-v2 .ph { border-radius: var(--hs-r); box-shadow: 0 0 0 4px #fff, 0 14px 28px -12px rgb(15 23 42 / .28); }
.dr-hs-v2 .ph > img { object-position: 50% 18%; }
.dr-hs-v2::before { content: ""; position: absolute; inset: 0; translate: 10px 10px; border: 2px solid color-mix(in srgb, var(--dr-acc) 55%, #fff); border-radius: var(--hs-r); z-index: -1; }
html[data-variant="b"] .dr-hs-v2 .ph, html[data-variant="b"] .dr-hs-v2::before { border-radius: 999px 999px 36px 36px; }
@media (min-width: 640px) {
  .dr-hs.dr-hs-v2 { --hs: 152px; --hs-r: 48px; margin: 0 12px 12px 0; }
  .dr-hs-v2::before { translate: 12px 12px; }
}

/* ---------- 19. the owner's gallery fix (campaigns-20oct/CHOICE.md item 7; BUILD-CONTRACT 7.4 + 7.5): "Inside the clinic" = equal tiles, six on the page at most, "See all N photos", captions in two lines, a CSS-only viewer ---------- */
/* The grid (doctor/_gallery.html: ul.dr-gal2, the FIRST SIX photos). Flex with a centred last row: no hole at any count from 1 to 12. Two across on a phone, three from 900 px, one photo = one wide tile. The old .dr-gal rules above are no longer used by any template. Gallery v2 (a title AND a description per photo, the split viewer) is 19b below and the bar's short "Book" is 19c; the .cl / .dr-slide-cap rules here stay (a camp's slides and the markup of before use them). */
.dr-gal2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.dr-gal2 li { flex: 0 1 calc((100% - 12px) / 2); min-width: 0; }
.dr-gal2 li:only-child { flex-basis: min(100%, 560px); }
.dr-gal2 figure { margin: 0; height: 100%; border: 1px solid var(--dr-line); border-radius: var(--dr-r2); overflow: hidden; background: #fff; box-shadow: var(--dr-sh1); display: flex; flex-direction: column; }
.dr-gal2 .im { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dr-tint); }
.dr-gal2 .im .ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transition: transform .6s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.dr-gal2 .im:hover .ph { transform: scale(1.04); }
.dr-gal2 .im .ph .ph-ic { width: 18%; }
.dr-gal2 .dr-zoom { right: 10px; bottom: 10px; top: auto; width: 32px; height: 32px; opacity: 0; transition: opacity .2s; }
.dr-gal2 .im:hover .dr-zoom, .dr-gal2 .im:focus-visible .dr-zoom { opacity: 1; }
.dr-gal2 .dr-zoom .ic { width: 16px; height: 16px; }
.dr-gal2 figcaption { padding: 12px 14px 14px; font: 600 14px/1.35 var(--dr-sans); color: var(--dr-ink); }
.dr-gal2 figcaption .cl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .dr-gal2 { gap: 16px; }
  .dr-gal2 li { flex-basis: calc((100% - 32px) / 3); }
}
html[data-variant="b"] .dr-gal2 figure { border-radius: var(--dr-r3); }
@media (prefers-reduced-motion: reduce) { .dr-gal2 .im:hover .ph { transform: none; } }
/* "See all N photos" (only above six): one ghost button under the grid, centred in A, at the left edge in B */
.dr-gal-more-row { display: flex; justify-content: center; margin: 24px 0 0; }
html[data-variant="b"] .dr-gal-more-row { justify-content: flex-start; }
/* The viewer: one slide per photo, `hidden` in the markup and shown by :target (no script). The rule below is !important on purpose: tokens.css's `[hidden] { display: none !important }` (0,1,0) and doctor-a / b.css's `.dr [hidden]` (0,2,0) are important too, and the more specific selector (0,3,0) wins, in any source order. A card over a dimmed page: the bar (title, "n of N", close), the picture, the whole caption and two round buttons. */
.dr-slide { display: none; position: fixed; inset: 0; z-index: var(--z-overlay, 80); place-items: center; padding: 16px; background: rgb(15 23 42 / .62); }
.dr-slide[hidden]:target { display: grid !important; }
.dr-slide-in { display: flex; flex-direction: column; width: min(100%, 880px); max-height: 100%; overflow: hidden; background: #fff; border-radius: var(--dr-r3); box-shadow: 0 30px 80px rgb(15 23 42 / .35); }
.dr-slide-bar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--dr-line); }
.dr-slide-bar b { flex: 1; min-width: 0; font: 700 15px/1.3 var(--dr-head); color: var(--dr-ink); }
.dr-slide-bar span { font: 500 13px/1.3 var(--dr-sans); color: var(--dr-muted); white-space: nowrap; }
.dr-slide-x, .dr-slide-foot nav a { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--dr-ink); text-decoration: none; }
.dr-slide-x:hover, .dr-slide-foot nav a:hover { color: var(--dr-acc); }
.dr-slide-foot nav a { border: 1px solid var(--dr-line); background: #fff; }
.dr-slide-foot nav a:hover { border-color: var(--dr-acc); }
.dr-slide-x .ic, .dr-slide-foot nav .ic { width: 20px; height: 20px; }
.dr-slide a:focus-visible { outline: 2px solid var(--dr-acc); outline-offset: 2px; }
.dr-slide-img { display: block; width: 100%; min-height: 0; max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); object-fit: contain; background: var(--dr-tint); }
.dr-slide-foot { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 20px; }
.dr-slide-cap { flex: 1; min-width: 0; margin: 0; font: 600 16px/1.4 var(--dr-sans); color: var(--dr-ink); overflow-wrap: anywhere; }
.dr-slide-foot nav { display: flex; gap: 8px; flex: none; margin-left: auto; }
@media (min-width: 640px) { .dr-slide { padding: 32px; } }
@media (prefers-reduced-motion: no-preference) { .dr-slide:target { animation: dr-slide-fade .18s ease-out; } }
@keyframes dr-slide-fade { from { opacity: 0; } }

/* ---------- 19b. Gallery v2 (owner 21 Oct 17:23: "where is the galary? on the doctors website,,doctor can post with image and titles and description(optional)"; design gallery-v2-21oct, the pick = A tiles + C viewer; GALLERY-V2-CONTRACT B19-B21) ---------- */
/* Markup (doctor/_gallery.html, backend-migrations'): the tile's figcaption = span.gt (the title) [+ span.gd (the description, only when there is one)]; the slide = .dr-slide-in > .dr-slide-bar + .dr-slide-stage > img.dr-slide-img
   + .dr-slide-foot > .dr-slide-txt (h3.dr-slide-t [+ p.dr-slide-d]) + nav. Title and description are two elements on two lines with a hairline between (PCPNDT: never one string). A photo with no description has no hairline, a lone
   description (no title) has none either, a photo with neither is the picture alone (no figcaption). Read from the theme's --t-* tokens (--t-deep, --t-band, --t-focus have no --dr-* twin): no colour of its own, no motion of its own,
   no url(), no font. The viewer rules start at .dr-gallery: a camp's slides (section 20) reuse .dr-slide* with no stage and keep the rules of section 19; the split layout needs the stage (:has), so the markup of before is never put in a
   grid it does not fit. design file gallery-v2-pick.css, with one change: every viewer rule is scoped to .dr-gallery. */
html[data-theme="a"] .dr-gallery .dr-sub { margin: 10px 0 0; color: var(--t-muted); font: 400 16px/1.55 var(--dr-sans); }
html[data-theme="a"] .dr-gal2 .dr-more { display: none; }
html[data-theme="a"] .dr-gal2 .ph { background: var(--t-tint); }
html[data-theme="a"] .dr-gal2 .im { cursor: zoom-in; }
html[data-theme="a"] .dr-gal2 .im:focus-visible { outline: 0; }
html[data-theme="a"] .dr-gal2 .im:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 3px solid var(--t-focus); box-shadow: inset 0 0 0 3px #fff; pointer-events: none; }
/* the tile: the title (two lines), then the description under a hairline (two lines). The ring above is two tones (the focus colour, then white inside it): one of the two is always 3:1 against the photo behind it */
html[data-theme="a"] .dr-gal2 figcaption { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
html[data-theme="a"] .dr-gal2 .gt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font: 700 15.5px/1.32 var(--t-head); letter-spacing: -.005em; color: var(--t-ink); }
html[data-theme="a"] .dr-gal2 .gd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--t-line); font: 400 14px/1.5 var(--dr-sans); color: var(--t-muted); }
html[data-theme="a"] .dr-gal2 .gd:first-child { margin-top: 0; padding-top: 0; border-top: 0; color: var(--t-body); }
@media (max-width: 599px) {
  html[data-theme="a"] .dr-gal2 figcaption { padding: 11px 12px 13px; }
  html[data-theme="a"] .dr-gal2 .gt { font-size: 14px; }
  html[data-theme="a"] .dr-gal2 .gd { margin-top: 8px; padding-top: 8px; font-size: 13px; }
}
/* the viewer: the photo is whole (contain) and gives way first; the text panel scrolls only past 44 % of the screen (52 % on a phone) and the arrows stay pinned outside it */
html[data-theme="a"] .dr-gallery .dr-slide-in { max-height: 100%; border-radius: var(--t-r3); }
html[data-theme="a"] .dr-gallery .dr-slide-stage { display: flex; flex: 1 1 auto; min-height: 140px; overflow: hidden; background: var(--t-band); }
html[data-theme="a"] .dr-gallery .dr-slide-img { display: block; width: 100%; height: 100%; max-height: min(70dvh, 720px); margin: auto; object-fit: contain; background: transparent; }
html[data-theme="a"] .dr-gallery .dr-slide-foot { align-items: flex-start; gap: 16px; padding: 16px 16px 16px 22px; min-height: 0; flex: 0 0 auto; max-height: 44dvh; overflow: hidden; }
html[data-theme="a"] .dr-gallery .dr-slide-txt { flex: 1; min-width: 0; max-height: calc(44dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
html[data-theme="a"] .dr-gallery .dr-slide-t { margin: 0; font: 700 18px/1.35 var(--t-head); letter-spacing: -.01em; color: var(--t-ink); overflow-wrap: anywhere; }
html[data-theme="a"] .dr-gallery .dr-slide-d { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--t-line); font: 400 15.5px/1.6 var(--dr-sans); color: var(--t-body); overflow-wrap: anywhere; }
html[data-theme="a"] .dr-gallery .dr-slide-d:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
html[data-theme="a"] .dr-gallery .dr-slide-foot nav { align-self: flex-end; }
html[data-theme="a"] .dr-gallery .dr-slide-bar b { font-family: var(--t-head); }
@media (max-width: 639px) {                 /* a phone: the viewer is the whole screen; the text sits under the photo, the arrows on one row below it */
  html[data-theme="a"] .dr-gallery .dr-slide:has(.dr-slide-stage) { padding: 0; }
  html[data-theme="a"] .dr-gallery .dr-slide-in:has(> .dr-slide-stage) { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  html[data-theme="a"] .dr-gallery .dr-slide-img { max-height: none; }
  html[data-theme="a"] .dr-gallery .dr-slide-foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 18px 18px; max-height: 52dvh; }
  html[data-theme="a"] .dr-gallery .dr-slide-txt { max-height: calc(52dvh - 92px); }
  html[data-theme="a"] .dr-gallery .dr-slide-foot nav { align-self: stretch; justify-content: space-between; margin-left: 0; }
  html[data-theme="a"] .dr-gallery .dr-slide-foot nav .dr-slide-next { margin-left: auto; }
}
@media (min-width: 900px) {                 /* split: a dark stage on the left, the text panel on the right (the stacked viewer below 900) */
  html[data-theme="a"] .dr-gallery .dr-slide-in:has(> .dr-slide-stage) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "stage bar" "stage foot"; width: min(100%, 1120px); height: min(100%, 700px); }
  html[data-theme="a"] .dr-gallery .dr-slide-in:has(> .dr-slide-stage) > .dr-slide-bar { grid-area: bar; padding-left: 22px; border-left: 1px solid var(--t-line); }
  html[data-theme="a"] .dr-gallery .dr-slide-in:has(> .dr-slide-stage) > .dr-slide-stage { grid-area: stage; background: var(--t-deep); }
  html[data-theme="a"] .dr-gallery .dr-slide-in:has(> .dr-slide-stage) .dr-slide-img { max-height: 100%; height: 100%; }
  html[data-theme="a"] .dr-gallery .dr-slide-in:has(> .dr-slide-stage) > .dr-slide-foot { grid-area: foot; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 16px; max-height: none; min-height: 0; padding: 18px 22px 20px; overflow: hidden; border-left: 1px solid var(--t-line); }
  html[data-theme="a"] .dr-gallery .dr-slide-in:has(> .dr-slide-stage) .dr-slide-txt { flex: 1 1 auto; min-height: 0; max-height: none; }
  html[data-theme="a"] .dr-gallery .dr-slide-in:has(> .dr-slide-stage) .dr-slide-foot nav { align-self: stretch; justify-content: flex-end; margin-top: auto; }
}

/* ---------- 19c. the bar: "Book" says Book from 1100 px up (design gallery-v2-21oct OPTIONS 1.2, measured in real Chrome) ---------- */
/* Eight links (About, Treatments, Awards, Timings, Gallery, Camps, Health notes, Contact) + "Doctor login" + Call + Book do not fit beside the whole name with "Book appointment" at any width from 1100 up: the bar never gets wider than the 1280 px
   frame, so a wider window does not help. The short label (theme.css has it for 1100-1279; this is the same rule with no upper bound, here because that file is Theme v2's) keeps the name whole; nothing is hidden, no markup changes. */
@media (min-width: 1100px) { html[data-theme="a"] .v-hd-book .lg { display: none; } }

/* ---------- 20. health camps & awareness (campaigns-20oct/CHOICE.md; BUILD-CONTRACT 7.2-7.3): the strip on the home page (doctor/_camps.html), the list page and a camp's page (camps_index.html, camp_page.html) ---------- */
/* Ported from campaigns/site/campaigns.css sections 1-2 with every picture selector translated to what the live markup draws: the cover and the tiles hold shared/_photo.html's `span.ph > img` (or the designed tile),
   not the prototype's inline svg.sc. One markup serves both looks; Modern overrides through html[data-variant="b"]. The viewer's rules (.dr-slide*) are section 19's (the gallery fix): a camp's slides use the same classes. */
.dr-camps { background: #fff; border-top: 1px solid var(--dr-line); }
.dr-camp-list { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
/* the LIST variant of the camps (D3: sections/camps/list.html, `ol.dr-clist` of `li > article.dr-camp`; the date and the missing cover were "the look's CSS", and no sheet drew the list: cards touching, bullets, an indent): ONE column of the platform's own camp cards, one to a line, like `ol.dr-tlist`; the cover is a banner once the card is wide (a 16:10 cover on a 1200 px card is 750 px tall). Scoped to `html[data-look]`: Navy & Teal and Modern draw as before */
html[data-look] .dr-camps .dr-clist { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
html[data-look] .dr-camps .dr-clist > li { min-width: 0; }
@media (min-width: 641px) { html[data-look] :where(.dr-clist) .dr-camp-cover { aspect-ratio: 16 / 5; } }
@media (min-width: 1000px) { html[data-look] :where(.dr-clist) .dr-camp-cover { aspect-ratio: 21 / 5; } }
.dr-camp { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--dr-line); border-radius: var(--dr-r2); overflow: hidden; box-shadow: var(--dr-sh1); transition: translate .25s, box-shadow .25s, border-color .25s; }
.dr-camp:hover { translate: 0 -3px; box-shadow: var(--dr-sh2); border-color: var(--dr-acc); }
.dr-camp:has(h3 a:focus-visible) { outline: 2px solid var(--dr-acc); outline-offset: 2px; }
.dr-camp-cover { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dr-tint); }
.dr-camp-cover .ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transition: transform .6s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.dr-camp-cover .ph > img { object-position: 50% 0; }
/* a camp whose pictures no longer resolve keeps its cover box with the designed tile, a little richer than the page's default so the date and the title do not sit on white */
.dr-camp-cover .ph:not(:has(> img)) { background: linear-gradient(150deg, var(--dr-tint), color-mix(in srgb, var(--dr-acc) 16%, #fff)); }
.dr-camp-cover .ph > .ph-ic { width: 22%; opacity: .5; }
.dr-camp:hover .dr-camp-cover .ph { transform: scale(1.04); }
.dr-camp-date { position: absolute; left: 12px; top: 12px; z-index: 2; min-width: 54px; padding: 7px 9px; border-radius: 12px; background: #fff; box-shadow: var(--dr-sh2); text-align: center; }
.dr-camp-date b { display: block; font: 800 21px/1 var(--dr-head); letter-spacing: -.02em; color: var(--dr-ink); }
.dr-camp-date span { display: block; margin-top: 3px; font: 700 12px/1 var(--dr-head); letter-spacing: .07em; text-transform: uppercase; color: var(--dr-ink2); }
.dr-camp-n { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 99px; background: rgb(15 23 42 / .78); color: #fff; font: 600 12.5px/1 var(--dr-sans); }
.dr-camp-n .ic { width: 14px; height: 14px; }
.dr-camp-b { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; min-width: 0; }
.dr-camp-tag { margin: 0; font: 700 12px/1.2 var(--dr-head); letter-spacing: .08em; text-transform: uppercase; color: var(--dr-ink2); }
.dr-camp h3 { margin: 0; font: 700 18px/1.3 var(--dr-head); letter-spacing: -.005em; color: var(--dr-ink); overflow-wrap: anywhere; }
.dr-camp h3 a { color: inherit; text-decoration: none; }
.dr-camp h3 a::after { content: ""; position: absolute; inset: 0; }
.dr-camp-where { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--dr-muted); overflow-wrap: anywhere; }
.dr-camp-where .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.dr-camp .ex { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--dr-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dr-camp-with { margin: auto 0 0; padding-top: 6px; font-size: 13px; line-height: 1.45; color: var(--dr-muted); overflow-wrap: anywhere; }
@media (min-width: 760px) { .dr-camp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* Classic centres its heading, so a strip of one or two camps is centred too (three across, the last row centred): a lone card in the left third under a centred title looks lost */
@media (min-width: 760px) {
  html[data-variant="a"] .dr-camps .dr-camp-list { display: flex; flex-wrap: wrap; justify-content: center; }
  html[data-variant="a"] .dr-camps .dr-camp-list > .dr-camp { flex: 0 1 calc((100% - 40px) / 3); }
}
@media (prefers-reduced-motion: reduce) { .dr-camp:hover { translate: none; } .dr-camp:hover .dr-camp-cover .ph { transform: none; } }
/* Modern: a soft band, and the newest camp is a wide card (photo left, words right) with the other two side by side under it. One camp is the wide card alone; TWO camps are two equal cards side by side (a wide card
   over one orphan would leave half a row empty), so the wide rules skip a list of exactly two. */
html[data-variant="b"] .dr-camps { background: linear-gradient(180deg, var(--dr-soft), #fff); border-top: 0; }
@media (min-width: 900px) {
  html[data-variant="b"] .dr-camps .dr-camp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  html[data-variant="b"] .dr-camps .dr-camp:first-child:not(:nth-last-child(2)) { grid-column: 1 / -1; flex-direction: row; }
  html[data-variant="b"] .dr-camps .dr-camp:first-child:not(:nth-last-child(2)) .dr-camp-cover { flex: 0 0 46%; aspect-ratio: auto; min-height: 300px; }
  html[data-variant="b"] .dr-camps .dr-camp:first-child:not(:nth-last-child(2)) .dr-camp-b { padding: 28px 32px; justify-content: center; }
  html[data-variant="b"] .dr-camps .dr-camp:first-child:not(:nth-last-child(2)) h3 { font-size: 24px; }
  html[data-variant="b"] .dr-camps .dr-camp:first-child:not(:nth-last-child(2)) .ex { font-size: 16px; -webkit-line-clamp: 4; }
}
/* phones: the strip is a swipe row, as the health notes are (section 13), so the page does not grow by a screen per card; one camp is one full-width card */
@media (max-width: 759px) {
  .dr-camps .dr-camp-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -20px; padding: 6px 20px 18px; scroll-padding-inline: 20px; }
  .dr-camps .dr-camp-list::-webkit-scrollbar { display: none; }
  .dr-camps .dr-camp-list > .dr-camp { flex: 0 0 84%; scroll-snap-align: start; }
  .dr-camps .dr-camp-list > .dr-camp:only-child { flex-basis: 100%; }
  html[data-variant="b"] .dr-camps .dr-camp-list { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}

/* the list page and one camp's page borrow the health-note page's head (.bp-head / .bp-hd / .bp-crumbs / h1 / .bp-stand, components.css) and add the tag pill, the facts row, the text, the photo tiles and the fixed line */
.bp-tag { display: inline-block; margin: 6px 0 0; padding: 6px 12px; border-radius: 99px; background: var(--dr-tint); color: var(--dr-ink2); font: 700 11.5px/1.2 var(--dr-head); letter-spacing: .08em; text-transform: uppercase; }
.cp-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; color: var(--dr-ink); }
.cp-facts li { display: flex; align-items: center; gap: 8px; min-height: 28px; min-width: 0; overflow-wrap: anywhere; }
.cp-facts .ic { width: 18px; height: 18px; color: var(--dr-acc); flex: none; }
.cp-facts b { font-weight: 700; }
.cp-facts em { font-style: normal; color: var(--dr-muted); }
/* `.dr .wrap` (doctor-a / doctor-b.css, 0,2,0) sets `padding` whole, so the vertical room needs the same weight; below 900 px as the blog's .bp-grid, from 900 px it clears the footer's app band that sits across the footer's top edge in Modern */
.dr .cp-main { padding-top: 28px; padding-bottom: 64px; }
@media (min-width: 900px) { .dr .cp-main { padding-bottom: 96px; } }
.cp-text { max-width: 68ch; font-size: 17.5px; line-height: 1.75; color: var(--dr-body); overflow-wrap: anywhere; }
.cp-text p { margin: 0 0 1.1em; }
.cp-h2 { margin: 40px 0 18px; font: 700 20px/1.2 var(--dr-head); letter-spacing: -.01em; color: var(--dr-ink); }
.cp-gal { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.cp-gal figure { margin: 0; height: 100%; border: 1px solid var(--dr-line); border-radius: var(--dr-r2); overflow: hidden; background: #fff; box-shadow: var(--dr-sh1); display: flex; flex-direction: column; }
.cp-gal .im { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dr-tint); }
.cp-gal .im .ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transition: transform .6s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.cp-gal .im:hover .ph { transform: scale(1.04); }
.cp-gal .im .ph > .ph-ic { width: 18%; }
.cp-gal .dr-zoom { right: 10px; bottom: 10px; top: auto; width: 32px; height: 32px; opacity: 0; transition: opacity .2s; }
.cp-gal .im:hover .dr-zoom, .cp-gal .im:focus-visible .dr-zoom { opacity: 1; }
.cp-gal .dr-zoom .ic { width: 16px; height: 16px; }
.cp-gal figcaption { padding: 12px 14px 14px; font: 600 14px/1.35 var(--dr-sans); color: var(--dr-ink); }
.cp-gal figcaption .cl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
@media (min-width: 760px) { .cp-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .cp-gal .im:hover .ph { transform: none; } }
html[data-variant="b"] .cp-gal figure { border-radius: var(--dr-r3); }
.cp-note { display: flex; align-items: flex-start; gap: 10px; max-width: 68ch; margin: 36px 0 0; padding: 14px 16px; border: 1px solid var(--dr-line); border-radius: var(--dr-r2); background: var(--dr-soft); font-size: 14px; line-height: 1.55; color: var(--dr-body); }
.cp-note .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--dr-muted); }
.cp-year { margin: 40px 0 16px; font: 800 13px/1.2 var(--dr-head); letter-spacing: .1em; text-transform: uppercase; color: var(--dr-ink2); }
.cp-year:first-child { margin-top: 0; }
.cp-more { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--dr-line); }
.cp-more .cp-h2 { margin-top: 0; }

/* the header: "Camps" makes the doctor's nav SEVEN links (About, Treatments, Awards, Camps, Health notes, Timings, Contact) beside Doctor login, Call and Book. The brand is the flex item that shrinks (.v-brand { flex: 1; min-width: 0 }),
   so at 1100-1440 px it was squeezed to "Dr Mee..." / "D...". With seven links the nav gives back what the seventh took: no gap, 6 px a side, 14.5 px. Six links or fewer (every page today) are untouched. */
@media (min-width: 1100px) {
  html[data-kind="doctor"] .v-nav:has(> a:nth-child(7)) { gap: 0; }
  html[data-kind="doctor"] .v-nav:has(> a:nth-child(7)) a { padding-inline: 6px; font-size: 14.5px; }
}

/* ===== SPACING LANE (D3, backend-api, 23 Oct; MAX 00:35 (c) the one-column footer, 00:45 (d) the base timetable, 01:35 (a) the About: the one-column rule of 03:55 / SIMPLIFY 2 STAYS one column, and each block
   / group is drawn at full width with a hairline between blocks, the tables and boxes at full width -- sizing, never placement: borders, padding, a gap, an alignment and a corner only, no order / position /
   transform / overflow, nothing hidden). Why a ruling and not a column: the 23:35 rule reads an EMPTY area >= 200 px tall AND >= 30 % of the section's width beside content; a one-column list of short owner
   text leaves its right half empty for the height of the whole list, and a full-width line under each block (or a box with a border all round) is content, so no empty area is taller than ONE block.
   Scope: `html[data-look]` and not a FROZEN look (final SHIP; one name in this scope and one in test_site_looks_spacing_lane.FROZEN: serif) -- Navy & Teal and Modern wear no `data-look`, so v2a / v2b draw
   as before; the exclusion is a `:where` (zero specificity), so each rule weighs what it weighed without it. Every look-facing rule is a `:where` too: a look's own sheet wins it (serif keeps its double rule,
   slate its 1.5 px rows, paper its dashed days, amber its filled day cells, sky its centred chips). */
/* the looks' footer: Address, Timings and Contact are each a full-width box with a 1px hairline (the footer's own text colour at 20 %, the look's own --r1 corner), one under the other like the emergency
   line and the app band below them; the grid's row gap is 14 px (a look's own `gap` still wins by order). From 641 px: a box costs 34 px of width, and at 360-390 px that wraps amber's seven day chips
   (and paper's at 360) onto a second row, so the phone keeps its footer as it was and only draws the hairline BETWEEN the groups (a line costs height, never width) */
html[data-look]:where(:not([data-look="serif"])) .dr-ft .dr-ft-grid { row-gap: 14px; }
@media (min-width: 641px) {
  html[data-look]:where(:not([data-look="serif"])) :where(.dr-ft .dr-ft-col) { padding: 20px clamp(16px, 3vw, 26px); border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: var(--r1); }
}
@media (max-width: 640px) {
  html[data-look]:where(:not([data-look="serif"])) :where(.dr-ft .dr-ft-col + .dr-ft-col) { padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
}
/* ... and the footer's timetable (the week of chips) is full width: the seven days spread over the group, each chip keeps its own size and shape */
html[data-look]:where(:not([data-look="serif"])) :where(.dr-ft-week) { justify-content: space-between; }
/* the looks' timings table: ruled at full width -- a hairline under the box heading, one above the table, one under every day (the day cell closes the rows it spans) and one between the payment chips and
   "Call clinic". From 641 px: the phone's stacked rows are not touched */
@media (min-width: 641px) {
  html[data-look]:where(:not([data-look="serif"])) :where(.dr-tbl .dr-box-h) { padding-bottom: 10px; border-bottom: 1px solid var(--dr-line); }
  html[data-look]:where(:not([data-look="serif"])) :where(.dr-tt) { border-top: 1px solid var(--dr-line); }
  html[data-look]:where(:not([data-look="serif"])) :where(.dr-tt .dr-d, .dr-tt .dr-last > td) { border-bottom: 1px solid var(--dr-line); }
  html[data-look]:where(:not([data-look="serif"])) :where(.dr-tbl .dr-foot > .dr-pay) { align-self: stretch; padding-bottom: 14px; border-bottom: 1px solid var(--dr-line); }
}
/* the looks' About: one column of owner text, each block ruled at full width -- a hairline under every bio paragraph but the one the timelines follow (amber, emerald, indigo and mint draw their own line
   on top of the timelines: a second line a paragraph's padding away reads as a doubled rule), under the heading of each timeline and under every row of it (the education and the experience are short rows:
   the right of a row is under 200 px tall). From 641 px */
@media (min-width: 641px) {
  html[data-look]:where(:not([data-look="serif"])) :where(.dr-about-body > .dr-p:not(:has(+ .dr-tl2))) { padding-bottom: 14px; border-bottom: 1px solid var(--dr-line); }
  html[data-look]:where(:not([data-look="serif"])) :where(.dr-tl2 .dr-h3) { padding-bottom: 10px; border-bottom: 1px solid var(--dr-line); }
  html[data-look]:where(:not([data-look="serif"])) :where(.dr-tl2 .dr-tl > li) { padding-bottom: 12px; border-bottom: 1px solid var(--dr-line); }
}