/* ══════════════════════════════════════════════════════════════════════════
   css/doctorlist.css — DOCTOR DIRECTORY  (/doctor)

   Sibling of css/bloglist.css and css/services.css; same three standing rules:
     · No max-width container. 100% plus a gutter — 28px desktop, 14px mobile.
       Measure comes from column ratios, never a ch cap.
     · No card around prose. A doctor tile is a destination with a face, so it
       earns a frame; the rail is ruled, not boxed.
     · Outfit only. No serif face on any FertilityWorld page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   00 · TOKENS & PRIMITIVES
   ══════════════════════════════════════════════════════════════ */

.fw-dr-page{
	--pad:28px;
	--sticky:116px;
	--ink:var(--dk-d);
	--paper:var(--wh);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent);
	--s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
	--sec:clamp(34px,4vw,68px);
	--r1:8px; --r2:12px; --r3:16px;
	--ease:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.16,1,.3,1);
	background:var(--paper);
	-webkit-text-size-adjust:100%
}
.fw-dr{display:block;position:relative}
.fw-dr-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}

.fw-ico{
	width:1em;height:1em;flex-shrink:0;
	fill:none;stroke:currentColor;stroke-width:1.5;
	stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;overflow:visible
}
.fw-ico-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Canvas's style.css carries a bare `em{font-family:var(--cnvs-secondary-font)}`
   and that token is "Playfair Display", serif. Every <em> on this page — the
   Verified label, the % on a stat, the counts on the language pills — was
   silently rendering in a serif face. css/service.css and css/doctordetail.css
   already guard against it; this file did not. One font on this page. */
.fw-dr em{font-family:var(--ff);font-style:normal} 
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.fw-dr-eyebrow{display:block;font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--pk)}
.fw-dr-eyebrow--onDark{color:color-mix(in srgb, var(--wh) 60%, transparent)}

.fw-dr-btn{
	display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:100px;
	font-size:13.5px;font-weight:600;color:var(--wh);
	background:linear-gradient(120deg,var(--pk),var(--pk-d));
	box-shadow:0 12px 28px -12px color-mix(in srgb, var(--pk) 62%, transparent);
	transition:transform .3s var(--ease),box-shadow .3s
}
.fw-dr-btn:hover{color:var(--wh);transform:translateY(-2px);box-shadow:0 18px 34px -14px color-mix(in srgb, var(--pk) 70%, transparent)}
.fw-dr-btn--wh{color:var(--pk-d);background:var(--wh);box-shadow:0 12px 30px -12px color-mix(in srgb, var(--bk) 50%, transparent)}
.fw-dr-btn--wh:hover{color:var(--pk-d)}
.fw-dr-btn--onDark{color:var(--wh);background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wh) 28%, transparent)}
.fw-dr-btn--onDark:hover{color:var(--ink);background:var(--wh);box-shadow:none}

/* ══════════════════════════════════════════════════════════════
   01 · MASTHEAD
   ══════════════════════════════════════════════════════════════ */

.fw-dr-mast{
	position:relative;
	padding:clamp(30px, 4.8vh, 52px) 0 clamp(24px, 4.2vh, 44px);
	background:radial-gradient(110% 120% at 50% 0%, color-mix(in srgb, var(--bl-l2) 40%, var(--wh)) 0%, var(--paper) 68%, var(--wh) 100%);
	overflow:hidden;
	border-bottom:1px solid var(--line-soft)
}
/* Ambient blurred brand discs */
.fw-dr-mast__fx{
	position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
	-webkit-mask-image:linear-gradient(180deg,transparent,var(--bk) 7%,var(--bk) 88%,transparent);
	        mask-image:linear-gradient(180deg,transparent,var(--bk) 7%,var(--bk) 88%,transparent)
}
.fw-dr-orb{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(clamp(56px,7vh,92px))}
.fw-dr-orb--p{top:-22%;right:2%;width:clamp(240px,42vh,460px);background:var(--arc-2);animation:fwOrbA 21s ease-in-out infinite}
.fw-dr-orb--b{top:14%;right:26%;width:clamp(170px,30vh,330px);background:color-mix(in srgb, var(--bl) 15%, transparent);animation:fwOrbB 26s ease-in-out infinite}
.fw-dr-orb--m{bottom:-30%;right:10%;width:clamp(160px,28vh,300px);background:color-mix(in srgb, var(--mt) 12%, transparent);animation:fwOrbC 24s ease-in-out infinite}
.fw-dr-orb--l{top:-18%;left:-8%;width:clamp(220px,44vh,460px);background:color-mix(in srgb, var(--pk) 11%, transparent);animation:fwOrbB 29s ease-in-out infinite}
.fw-dr-orb--l2{bottom:-6%;left:14%;width:clamp(180px,30vh,320px);background:color-mix(in srgb, var(--bl) 10%, transparent);animation:fwOrbC 27s ease-in-out infinite}
@keyframes fwOrbA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-38px,30px,0) scale(1.12)}}
@keyframes fwOrbB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-26px,0) scale(.9)}}
@keyframes fwOrbC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-26px,-22px,0) scale(1.13)}}

@media(prefers-reduced-motion:no-preference){
	.fw-dr-mast__copy > *{animation:fwRise .5s cubic-bezier(.22,1,.36,1) both}
	.fw-dr-mast__copy > *:nth-child(1){animation-delay:40ms}
	.fw-dr-mast__copy > *:nth-child(2){animation-delay:80ms}
	.fw-dr-mast__copy > *:nth-child(3){animation-delay:120ms}
	.fw-dr-mast__copy > *:nth-child(4){animation-delay:160ms}
	.fw-dr-mast__copy > *:nth-child(5){animation-delay:200ms}
	.fw-dr-mast__copy > *:nth-child(6){animation-delay:240ms}
}
@keyframes fwRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.fw-dr-mast .fw-mast__grid{
	display:grid;grid-template-columns:minmax(0,1.22fr) minmax(320px,0.78fr);
	gap:clamp(28px,4.8vw,68px);align-items:center
}
.fw-dr-mast__copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.9vh,22px)}
.fw-dr-mast__copy > *{margin:0}

/* Folio line */
.fw-dr-folio{margin:0;letter-spacing:.2em}
.fw-dr-folio .fw-mast__mark{
	display:inline-flex;align-items:center;justify-content:center;
	width:clamp(30px,4vh,36px);height:clamp(30px,4vh,36px);border-radius:50%;
	background:var(--wh);color:var(--pk-d);
	box-shadow:inset 0 0 0 1px var(--pk-ring),0 8px 18px -6px var(--pk-t2)
}
.fw-dr-folio .fw-mast__mark .fw-ico{width:18px;height:18px;stroke-width:1.8}

/* Headline & Reduced Subtitle */
.fw-dr-mast__title{
	margin:0;font-family:var(--ff);
	font-size:clamp(32px,3.8vw,52px);font-weight:700;line-height:1.06;
	letter-spacing:-.038em;color:var(--bl-d);
	text-wrap:balance
}
/* Set as a SENTENCE, not a label. Uppercase with letter-spacing is the
   treatment the eyebrow above it already uses, so a second one directly under
   the headline made two labels and no line of prose. Sentence case, a size up,
   and the pink carries the emphasis on its own. */
/* Scoped to the block, not the element. The vendored Canvas theme colours
   spans inside a heading with its own --cnvs-themecolor (#2C3E50), and it beat
   a one-class rule — the size and the case applied while the colour silently
   did not. Same family of trap as Canvas's `em{font-family:serif}`. */
.fw-dr-mast .fw-dr-mast__title .fw-dr-mast__sub{
	display:block;margin-top:clamp(6px,.9vh,10px);
	font-size:clamp(15px,1.45vw,19px);font-weight:500;
	letter-spacing:-.012em;text-transform:none;color:var(--pk-d)
}

/* NO max-width. The house rule holds line length with the grid column and the
   type size, never with a cap — a 640px cap leaves a hole on a wide screen
   exactly where the design should be using the width. */
.fw-dr-mast .fw-mast__lede{
	margin:0;font-size:clamp(14px,1.1vw,16.5px);font-weight:400;line-height:1.65;
	letter-spacing:-.008em;color:var(--g6);text-wrap:pretty
}

/* ── Rich Stats in Masthead ── */
.fw-dr-mast .fw-mast__stats--rich{
	margin-top:clamp(8px,1.4vh,18px);width:100%
}
/* This page wants a slightly larger disc. Setting the VARIABLE keeps row two's
   indent in step; setting width/height directly is what put the four sentences
   out of line with their own numbers. */
.fw-dr-mast .fw-mast__stats{--stat-disc:clamp(34px,4.2vh,42px)}
.fw-dr-mast .fw-mast__stat-ico{border-radius:12px}
.fw-dr-mast .fw-mast__stat-ico--pk{color:var(--pk-d);background:var(--pk-t);box-shadow:inset 0 0 0 1px var(--pk-ring),0 6px 14px -8px var(--pk-t2)}
.fw-dr-mast .fw-mast__stat-ico--bl{color:var(--bl-d);background:var(--bl-t);box-shadow:inset 0 0 0 1px var(--bl-ring),0 6px 14px -8px var(--bl-t2)}
.fw-dr-mast .fw-mast__stat-ico--mt{color:var(--mt-ink);background:var(--mt-t);box-shadow:inset 0 0 0 1px var(--mt-ring),0 6px 14px -8px var(--mt-t2)}
.fw-dr-mast .fw-mast__stat-ico--go{color:var(--go-ink);background:var(--go-t);box-shadow:inset 0 0 0 1px var(--go-ring),0 6px 14px -8px var(--go-t2)}
.fw-dr-mast .fw-mast__stat-ico .fw-ico{width:20px;height:20px;stroke-width:1.8}

/* The closing line of the column, so it is set off from the actions above it
   and given room beneath — margin:0 left it welded to the buttons and sitting
   hard on the band's bottom edge. Tokens, not rgba literals: colour is
   declared once in :root. */
.fw-dr-mast .fw-mast__note{
	display:inline-flex;align-items:center;gap:10px;
	margin:clamp(14px,2.1vh,22px) 0 clamp(4px,.8vh,10px);
	padding:8px 16px;border-radius:100px;
	font-size:12px;font-weight:500;color:var(--g6);
	background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--mt-ring), 0 4px 12px -6px var(--mt-t)
}

/* ── The Right Column Showcase Stage (Nicely Designed) ── */
.fw-dr-side{
	position:relative;border-left:0;padding-left:0;min-width:0
}
/* THE FACULTY STAGE.
   One frosted pane holding three things: who is on duty, the faces, and what
   patients scored them. Every colour is a :root token — the literals this was
   built with (rgba(15,23,42,.12) and friends) are the ink and line tokens
   spelled out by hand, which is how a sheet drifts off the palette. */
.fw-dr-showcase{
	position:relative;display:flex;flex-direction:column;
	padding:clamp(10px,1.4vh,14px);border-radius:22px;
	background:color-mix(in srgb, var(--wh) 72%, transparent);
	-webkit-backdrop-filter:blur(20px) saturate(140%);
	        backdrop-filter:blur(20px) saturate(140%);
	box-shadow:
		inset 0 0 0 1px var(--wh),
		inset 0 1px 0 var(--wh),
		0 26px 60px -26px var(--ink-a28),
		0 0 0 1px var(--line-soft)
}
.fw-dr-showcase__head{
	display:flex;align-items:center;gap:11px;
	padding:10px 14px;border-radius:14px;
	background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line-soft), 0 4px 14px -10px var(--ink-a12);
	margin-bottom:clamp(9px,1.3vh,13px)
}
.fw-dr-showcase__pulse{
	position:relative;width:8px;height:8px;border-radius:50%;
	background:var(--mt-d);flex-shrink:0
}
.fw-dr-showcase__pulse::after{
	content:'';position:absolute;inset:-4px;border-radius:50%;
	border:1px solid var(--mt-d);opacity:.6;
	animation:fwMastPulse 2.2s cubic-bezier(.16,1,.3,1) infinite
}
.fw-dr-showcase__title{
	display:flex;flex-direction:column;gap:1px;min-width:0
}
.fw-dr-showcase__title b{
	font-family:var(--ff);font-size:13px;font-weight:700;color:var(--dk);letter-spacing:-.01em
}
.fw-dr-showcase__title span{
	font-size:11.5px;font-weight:500;color:var(--g5)
}

.fw-dr-showcase .fw-dr-wall{
	position:relative;display:grid;grid-template-columns:repeat(3,1fr);
	gap:clamp(8px,1vw,14px);
	height:min(370px,39vh);overflow:hidden;
	padding:0;border-radius:18px;border:0;
	background:transparent;box-shadow:none;
	-webkit-mask-image:linear-gradient(180deg,transparent,var(--bk) 10%,var(--bk) 90%,transparent);
	        mask-image:linear-gradient(180deg,transparent,var(--bk) 10%,var(--bk) 90%,transparent)
}
.fw-dr-wall__col{
	display:flex;flex-direction:column;gap:clamp(8px,1vw,14px);
	will-change:transform
}
@media(prefers-reduced-motion:no-preference){
	.fw-dr-wall__col--a{animation:fwDriftUp 52s linear infinite}
	.fw-dr-wall__col--b{animation:fwDriftDown 61s linear infinite}
	.fw-dr-wall__col--c{animation:fwDriftUp 46s linear infinite}
}
.fw-dr-wall__col--b{transform:translateY(-50%)}
.fw-dr-wall__col--c{margin-top:calc(min(370px,39vh) * -.22)}
@keyframes fwDriftUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes fwDriftDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}

.fw-dr-wall__f{
	position:relative;display:block;flex:0 0 auto;
	aspect-ratio:3/4;border-radius:var(--r2);overflow:hidden;
	background:linear-gradient(160deg,var(--g1),var(--g2));
	box-shadow:0 14px 34px -20px color-mix(in srgb, var(--dk) 65%, transparent)
}
.fw-dr-wall__f img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
	object-fit:cover!important
}

.fw-dr-showcase__foot{
	display:flex;align-items:center;gap:12px;
	margin-top:clamp(9px,1.3vh,13px);padding:10px 14px;border-radius:14px;
	background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line-soft), 0 4px 16px -10px var(--ink-a12)
}
/* Where the network practises: overlapping flag discs, busiest country first. */
.fw-dr-showcase__flags{display:flex;align-items:center;flex-shrink:0;padding-left:6px}
.fw-dr-showcase__flags img{
	width:26px;height:26px;margin-left:-6px;border-radius:50%;object-fit:cover;
	box-shadow:0 0 0 2px var(--wh),0 4px 10px -4px var(--ink-a28)
}
.fw-dr-showcase__score-txt{
	display:flex;flex-direction:column;gap:1px;min-width:0
}
.fw-dr-showcase__score-txt b{
	font-family:var(--ff);font-size:12.5px;font-weight:700;color:var(--dk);letter-spacing:-.01em
}
.fw-dr-showcase__score-txt span{
	font-size:11px;font-weight:500;color:var(--g5)
}

/* ══════════════════════════════════════════════════════════════
   02 · RESULTS TOOLBAR (STICKY SUB MENU)
   ══════════════════════════════════════════════════════════════ */

.fw-dr-tools{
	position:sticky;top:var(--sticky);z-index:40;
	background:color-mix(in srgb, var(--wh) 92%, transparent);
	-webkit-backdrop-filter:saturate(180%) blur(20px);
	        backdrop-filter:saturate(180%) blur(20px);
	border-block:1px solid var(--line-soft);
	box-shadow:0 12px 32px -18px var(--ink-a12)
}
.fw-dr-tools__in{
	display:flex;align-items:center;justify-content:space-between;
	gap:clamp(14px,1.8vw,28px);padding-block:11px
}

/* The count and the field it narrows are one unit on the left: they used
   to be spread apart by space-between, which left a wide hole between the
   number and the search. The controls keep the far end. */
.fw-dr-tools__lead{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
.fw-dr-find{margin:0;flex:1 1 auto;max-width:560px;min-width:0}
.fw-dr-find__row{
	display:flex;align-items:center;gap:10px;
	padding:5px 6px 5px 14px;border-radius:8px;background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line), 0 4px 14px -8px var(--ink-a12);
	transition:box-shadow .25s var(--ease)
}
.fw-dr-find__row:focus-within{
	box-shadow:inset 0 0 0 1px var(--pk), 0 8px 24px -10px var(--pk-t2)
}
.fw-dr-find__row > i{font-size:15px;color:var(--pk);flex-shrink:0}
.fw-dr-find__row input{
	flex:1;min-width:0;border:0;outline:0;background:transparent;
	font-family:var(--ff);font-size:13.5px;color:var(--ink);padding-block:6px
}
.fw-dr-find__row input::placeholder{color:var(--g4);font-weight:400}
.fw-dr-find__row input::-webkit-search-cancel-button{display:none}
.fw-dr-find__row button{
	flex-shrink:0;display:inline-flex;align-items:center;gap:7px;
	border:0;cursor:pointer;padding:8px 18px;border-radius:6px;
	font-family:var(--ff);font-size:13px;font-weight:600;color:var(--wh);
	background:linear-gradient(135deg,var(--pk),var(--pk-d));
	box-shadow:0 8px 20px -8px var(--pk-edge);
	transition:transform .25s var(--ease),box-shadow .25s
}
@media(max-width:1080px){
	.fw-dr-find__row button span{display:none}
	.fw-dr-find__row button{padding:8px 12px}
}
@media(max-width:760px){
	.fw-dr-tools__in{flex-wrap:wrap}
	/* The field takes its own row, but the COUNT still leads. `order:-1` on the
	   field pulled it above the count and undid the reading order the desktop
	   row has — the number of results is what the field is then used to narrow. */
	.fw-dr-find{flex-basis:100%;max-width:none}
	.fw-dr-tools__count{order:-1}
}
.fw-dr-find__row button i{font-size:12px;transition:transform .3s var(--ease)}
.fw-dr-find__row button:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px var(--pk-edge)}
.fw-dr-find__row button:hover i{transform:translateX(3px)}

/* Counter Badge */
.fw-dr-tools__count{
	display:inline-flex;align-items:center;gap:10px;
	padding:7px 16px;border-radius:100px;
	background:var(--mt-t);border:1px solid var(--mt-ring);
	flex-shrink:0
}
.fw-dr-tools__dot{
	position:relative;width:8px;height:8px;border-radius:50%;
	background:var(--mt-d);flex-shrink:0
}
.fw-dr-tools__dot::after{
	content:'';position:absolute;inset:-4px;border-radius:50%;
	border:1px solid var(--mt-d);opacity:.6;
	animation:fwMastPulse 2.2s cubic-bezier(.16,1,.3,1) infinite
}
.fw-dr-tools__count-txt{display:flex;align-items:baseline;gap:6px}
.fw-dr-tools__count b{
	font-family:var(--ff);font-size:16px;font-weight:700;
	letter-spacing:-.03em;color:var(--dk);font-variant-numeric:tabular-nums
}
.fw-dr-tools__count span{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--mt-ink);white-space:nowrap}
.fw-dr-tools__ctl{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);min-width:0}

/* Video consult toggle */
.fw-dr-toggle{
	display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
	padding:6px 14px 6px 10px;border-radius:100px;
	font-size:12.5px;font-weight:600;color:var(--g7);
	background:var(--wh);border:1px solid var(--line);
	box-shadow:0 2px 8px -2px var(--ink-a06);
	transition:all .25s var(--ease)
}
.fw-dr-toggle__cam{
	display:inline-flex;align-items:center;justify-content:center;
	width:24px;height:24px;border-radius:50%;
	font-size:11px;color:var(--bl-d);background:var(--bl-t);
	transition:all .25s var(--ease)
}
.fw-dr-toggle__box{
	position:relative;display:block;width:32px;height:18px;flex-shrink:0;
	border-radius:100px;background:var(--g2);transition:background .3s
}
.fw-dr-toggle__box i{
	position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
	background:var(--wh);box-shadow:0 1px 4px var(--ink-a28);
	transition:transform .3s cubic-bezier(.22,1,.36,1)
}
.fw-dr-toggle em{
	font-style:normal;font-size:11px;font-weight:700;color:var(--g6);
	font-variant-numeric:tabular-nums;padding:1px 7px;border-radius:100px;background:var(--g1)
}
.fw-dr-toggle:hover{
	color:var(--bl-d);border-color:color-mix(in srgb, var(--bl) 40%, transparent);
	transform:translateY(-1px);box-shadow:0 6px 16px -4px var(--bl-t2)
}
.fw-dr-toggle.is-on{
	color:var(--wh);background:linear-gradient(135deg,var(--bl-d),var(--bl));
	border-color:transparent;box-shadow:0 8px 20px -6px color-mix(in srgb, var(--bl) 40%, transparent)
}
.fw-dr-toggle.is-on .fw-dr-toggle__cam{color:var(--bl-d);background:var(--wh)}
.fw-dr-toggle.is-on .fw-dr-toggle__box{background:color-mix(in srgb, var(--wh) 35%, transparent)}
.fw-dr-toggle.is-on .fw-dr-toggle__box i{transform:translateX(14px)}
.fw-dr-toggle.is-on em{color:var(--bl-d);background:var(--wh)}

/* Segmented sort control */
.fw-dr-seg{
	display:inline-flex;align-items:center;gap:4px;
	padding:4px 6px;border-radius:100px;
	background:var(--g0);border:1px solid var(--line)
}
.fw-dr-seg__lbl{
	font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g4);
	padding-inline:8px 4px
}
.fw-dr-seg__o{
	position:relative;display:inline-flex;align-items:center;gap:6px;
	padding:6px 14px;border-radius:100px;font-family:var(--ff);
	font-size:12.5px;font-weight:500;color:var(--g6);
	text-decoration:none;transition:all .2s var(--ease)
}
.fw-dr-seg__o:hover{color:var(--dk);background:color-mix(in srgb, var(--wh) 60%, transparent)}
.fw-dr-seg__o.is-on{
	font-weight:700;color:var(--dk);background:var(--wh);
	box-shadow:0 4px 12px -2px var(--ink-a12), 0 1px 2px var(--ink-a06)
}
.fw-dr-seg__dot{
	display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pk);flex-shrink:0
}

/* ══════════════════════════════════════════════════════════════
   03 · LAYOUT
   The results column carries NO max-width. The 7:3 ratio is the measure —
   the same decision every other FW listing makes, and the reason the rail
   beside it is load bearing rather than decorative.
   ══════════════════════════════════════════════════════════════ */

.fw-dr-body{padding:var(--sec) 0}
.fw-dr-layout{
	display:grid;grid-template-columns:minmax(0,7fr) minmax(272px,3fr);
	gap:clamp(24px,3.4vw,64px);align-items:start
}
.fw-dr-main{min-width:0}

.fw-dr-active{
	display:flex;align-items:center;flex-wrap:wrap;gap:8px;
	margin-bottom:clamp(16px,2vw,26px);padding-bottom:clamp(14px,1.8vw,20px);
	border-bottom:1px solid var(--line-soft)
}
.fw-dr-active__lbl{font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--g5)}
.fw-dr-active__pill{
	display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:100px;
	font-size:12px;font-weight:600;color:var(--pk-d);background:var(--pk-l);
	box-shadow:inset 0 0 0 1px var(--pk-ring);transition:color .25s,background .25s
}
.fw-dr-active__pill i{font-size:13px;opacity:.7}
.fw-dr-active__pill:hover{color:var(--wh);background:var(--pk-d)}

/* ══════════════════════════════════════════════════════════════
   04 · THE GRID
   Ruled into a matrix by fading gradients rather than borders: a hairline
   that runs a cell's full height and stops dead reads as a table border;
   faded at both ends it reads as a separation. The row rule is drawn twice
   on purpose — per cell, and on the container — because the last page rarely
   holds a multiple of three and a per-cell rule under a row of two stops a
   third of the way across.
   ══════════════════════════════════════════════════════════════ */

.fw-dr-grid{
	position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
	margin:0;padding:0;list-style:none
}
.fw-dr-grid::before,
.fw-dr-grid::after{
	content:'';position:absolute;left:0;right:0;height:1px;pointer-events:none;
	background:linear-gradient(90deg,transparent,var(--line) 7%,var(--line) 93%,transparent)
}
.fw-dr-grid::before{top:0}
.fw-dr-grid::after{bottom:0}
/* One custom property carries the accent so the pip, the badge tint and the
   button all follow from a single value on the card. Pink for women, blue for
   men, defaulting to pink where the record does not say. */
.fw-dr-grid > li{
	--accent:var(--pk);--accent-d:var(--pk-d);--accent-l:var(--pk-l);
	position:relative;background:var(--paper);min-width:0
}
.fw-dr-grid > li[data-sex="m"]{
	--accent:var(--bl);--accent-d:var(--bl-d);--accent-l:var(--bl-l)
}
.fw-dr-grid > li::after{
	content:'';position:absolute;top:9%;bottom:9%;right:0;width:1px;pointer-events:none;
	background:linear-gradient(180deg,transparent,var(--line) 20%,var(--line) 80%,transparent)
}
.fw-dr-grid > li::before{
	content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
	background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent)
}
.fw-dr-grid > li:nth-child(4n)::after{display:none}

.fw-dr-grid > li > article{
	display:flex;flex-direction:column;height:100%;
	padding:clamp(13px,1.3vw,18px);transition:background .3s
}
.fw-dr-grid > li:hover > article{background:linear-gradient(180deg,color-mix(in srgb, var(--bl) 5%, transparent),color-mix(in srgb, var(--pk) 2.8%, transparent))}

/* ── The profile card ──
   Identity ON the portrait under a scrim, not captioned beneath it. On a
   blog tile the picture illustrates the headline; here the person IS the
   thing being chosen, so the name belongs on the face. 4:5 because a
   headshot cropped to faces needs the vertical room. */
.fw-dr-card__ph{
	position:relative;display:block;aspect-ratio:4/5;
	border-radius:var(--r3);overflow:hidden;
	background:linear-gradient(160deg,var(--g1),var(--g2))
}
/* The `img.` prefix is load bearing: it has to out-specify the theme's
   `img.lazy{max-width:100%}`, and vanilla-lazyload KEEPS .lazy when it adds
   .lazy-loaded — a lower-specificity reveal loses, and the picture loads
   perfectly then sits at opacity:0 with no error anywhere. */
.fw-dr-card__ph img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
	object-fit:cover!important;
	opacity:0;transition:opacity .55s var(--ease-soft),transform .8s var(--ease-soft)
}
img.lazy-loaded,
img.lazy-error{opacity:1}
.fw-dr-grid > li:hover .fw-dr-card__ph img{transform:scale(1.045)}

/* Dark at the foot, clear at the head — enough to carry white text without
   dimming the face it is protecting. */
.fw-dr-card__scrim{
	position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(180deg,transparent 42%,color-mix(in srgb, var(--dk-d) 28%, transparent) 62%,color-mix(in srgb, var(--dk-d) 82%, transparent))
}
/* Portrait and identity share one grid cell, so the name lies on the face
   without being a child of the link that wraps it. */
.fw-dr-card__top{display:grid}
.fw-dr-card__top > *{grid-area:1 / 1}
.fw-dr-card__id{
	align-self:end;z-index:2;
	display:flex;flex-direction:column;gap:2px;
	padding:0 13px 11px
}
.fw-dr-card__id b{
	font-size:clamp(14.5px,.85vw,16.5px);font-weight:600;letter-spacing:-.025em;line-height:1.2;
	color:var(--wh);text-shadow:0 1px 10px color-mix(in srgb, var(--bk) 45%, transparent)
}
.fw-dr-card__id small{
	font-size:11.5px;color:color-mix(in srgb, var(--wh) 78%, transparent);
	text-shadow:0 1px 8px color-mix(in srgb, var(--bk) 45%, transparent)
}

.fw-dr-card__v{
	position:absolute;left:11px;top:11px;z-index:2;
	display:inline-flex;align-items:center;gap:5px;
	padding:5px 10px 5px 7px;border-radius:100px;
	font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--wh);
	background:linear-gradient(140deg,var(--mt),var(--mt-d));
	box-shadow:0 6px 16px -7px color-mix(in srgb, var(--mt-d) 95%, transparent)
}
.fw-dr-card__v .fw-ico{font-size:13px}
.fw-dr-card__v em{font-style:normal}

.fw-dr-card__rate{
	position:absolute;right:11px;top:11px;z-index:2;
	display:inline-flex;align-items:center;gap:5px;
	padding:5px 10px;border-radius:100px;
	font-size:11px;color:var(--ink);
	background:color-mix(in srgb, var(--wh) 94%, transparent);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	box-shadow:0 5px 14px -7px color-mix(in srgb, var(--dk) 60%, transparent)
}
.fw-dr-card__rate i{font-size:10px;color:var(--go-2)}
.fw-dr-card__rate b{font-weight:600;font-variant-numeric:tabular-nums}
.fw-dr-card__rate small{color:var(--g4);font-size:10px}

.fw-dr-card__body{display:flex;flex-direction:column;flex:1;padding-top:12px}
.fw-dr-card__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fw-dr-card__spec{
	display:inline-flex;align-items:center;gap:7px;min-width:0;
	font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
	color:var(--accent-d);transition:color .25s
}
.fw-dr-card__spec .fw-ico{font-size:14px;color:var(--accent)}
.fw-dr-card__spec:hover{color:var(--bl-d)}
.fw-dr-card__vid{
	display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
	font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--mt-d)
}
.fw-dr-card__vid i{font-size:11px}

.fw-dr-card__qual{
	margin:8px 0 0;font-size:11.5px;line-height:1.5;color:var(--g5);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

/* Ruled, on one baseline: these three are compared across a row of cards,
   and a shared rule compares better than nine floating pills. */
.fw-dr-card__stats{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	margin:11px 0 0;padding:10px 0 0;list-style:none;
	border-top:1px solid var(--line-soft)
}
.fw-dr-card__stats li{position:relative;display:flex;flex-direction:column;gap:1px;padding-left:10px}
.fw-dr-card__stats li:first-child{padding-left:0}
.fw-dr-card__stats li + li::before{
	content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line-soft)
}
.fw-dr-card__stats b{font-size:13px;font-weight:600;letter-spacing:-.03em;color:var(--bl-d);font-variant-numeric:tabular-nums}
.fw-dr-card__stats b em{font-style:normal;font-size:.72em;font-weight:500}
.fw-dr-card__stats span{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g4)}

/* Four across leaves roughly 250px of card, and a city beside a button in
   that is two wrapped lines next to a squeezed pill. Stacked, the city reads
   on one line and the button gets the full width it deserves as the card's
   only action. */
.fw-dr-card__foot{
	display:flex;flex-direction:column;align-items:stretch;gap:9px;
	margin-top:auto;padding-top:13px
}
.fw-dr-card__city{
	display:inline-flex;align-items:center;gap:5px;min-width:0;align-self:flex-start;
	font-size:11.5px;font-weight:500;color:var(--g6);transition:color .25s
}
.fw-dr-card__city i{font-size:11px;color:var(--accent)}
.fw-dr-card__city:hover{color:var(--bl-d)}
.fw-dr-card__book{
	display:block;text-align:center;padding:9px 15px;border-radius:8px;
	font-size:11.5px;font-weight:600;white-space:nowrap;
	color:var(--accent-d);background:var(--accent-l);
	box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
	transition:color .25s,background .25s,box-shadow .25s
}
.fw-dr-card__book:hover{
	color:var(--wh);box-shadow:none;
	background:linear-gradient(120deg,var(--accent),var(--accent-d))
}

/* ══════════════════════════════════════════════════════════════
   05 · PAGER  ·  LOAD MORE  ·  SKELETONS
   ══════════════════════════════════════════════════════════════ */

.fw-dr-pager-wrap{
	display:flex;flex-direction:column;align-items:center;gap:var(--s4);
	margin-top:clamp(24px,3vw,44px);padding-top:clamp(20px,2.6vw,34px);
	border-top:1px solid var(--line)
}
.fw-dr-pager__meta{margin:0;font-size:12.5px;color:var(--g5)}
.fw-dr-pager__meta strong{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-dr-pager{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px}
.fw-dr-pager__n{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
/* One class for a link, a current page and a step button — the differences
   are modifiers, so an item can never be styled two ways by accident. */
.fw-dr-pg{
	display:inline-flex;align-items:center;justify-content:center;gap:7px;
	min-width:40px;height:40px;padding-inline:12px;border-radius:100px;
	font-size:13px;font-weight:600;color:var(--g6);font-variant-numeric:tabular-nums;
	box-shadow:inset 0 0 0 1px var(--line);
	transition:color .25s,background .25s,box-shadow .25s,transform .25s var(--ease)
}
.fw-dr-pg:hover{color:var(--bl-d);background:var(--bl-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 28%, transparent);transform:translateY(-1px)}
.fw-dr-pg.is-current{color:var(--wh);background:var(--ink);box-shadow:0 8px 18px -8px color-mix(in srgb, var(--dk-d) 65%, transparent)}
.fw-dr-pg--step span{font-size:12.5px}
.fw-dr-pg--edge{padding-inline:0;color:var(--g4)}
.fw-dr-pg i{font-size:11px}
.fw-dr-gap{display:inline-flex;align-items:flex-end;justify-content:center;min-width:24px;height:40px;padding-bottom:9px;color:var(--g3);letter-spacing:.06em}

.fw-dr-more{display:flex;justify-content:center;margin-top:clamp(18px,2.2vw,28px)}
.fw-dr-more__btn{
	position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
	padding:14px 30px;border:0;cursor:pointer;border-radius:100px;
	font-family:var(--ff);font-size:13.5px;font-weight:600;color:var(--ink);background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line),0 10px 26px -18px color-mix(in srgb, var(--dk) 55%, transparent);
	transition:color .3s,box-shadow .3s,transform .3s var(--ease)
}
.fw-dr-more__btn:hover{color:var(--bl-d);transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent),0 16px 30px -18px color-mix(in srgb, var(--bl) 70%, transparent)}
/* Under the label by z-index rather than by opacity, so the text never dims. */
.fw-dr-more__glow{
	position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s;
	background:linear-gradient(101deg,color-mix(in srgb, var(--pk) 10%, transparent),color-mix(in srgb, var(--bl) 12%, transparent) 52%,color-mix(in srgb, var(--mt) 9%, transparent))
}
.fw-dr-more__btn:hover .fw-dr-more__glow{opacity:1}
.fw-dr-more__label{position:relative;z-index:1}
.fw-dr-more__spin{
	position:relative;z-index:1;width:15px;height:15px;border-radius:50%;
	border:2px solid color-mix(in srgb, var(--bl) 25%, transparent);border-top-color:var(--bl);display:none
}
.fw-dr-more__btn.is-loading{cursor:progress;color:var(--g5);transform:none}
.fw-dr-more__btn.is-loading .fw-dr-more__spin{display:block;animation:fwSpin .7s linear infinite}
@keyframes fwSpin{to{transform:rotate(360deg)}}

/* Cloned while a page is in flight so the grid keeps its height and the
   footer does not jump up to meet the button. */
.fw-dr-skel > article{display:flex;flex-direction:column;height:100%;padding:clamp(13px,1.3vw,18px)}
.fw-dr-skel .fw-dr-card__ph{display:block;aspect-ratio:4/5;border-radius:var(--r2);background:var(--g1)}
.fw-dr-skel__l{display:block;height:10px;margin-top:11px;border-radius:5px;background:var(--g1)}
.fw-dr-skel__l--t{width:82%;height:13px;margin-top:14px}
.fw-dr-skel__l--s{width:56%;height:9px}
.fw-dr-skel__l--foot{width:64%;margin-top:16px}
@media(prefers-reduced-motion:no-preference){
	.fw-dr-skel .fw-dr-card__ph,
	.fw-dr-skel__l{
		background:linear-gradient(100deg,var(--g1) 30%,var(--g0) 50%,var(--g1) 70%);
		background-size:220% 100%;animation:fwShimmer 1.4s linear infinite
	}
	/* `backwards`, not `both`: `both` would leave the final keyframe's
	   transform applied and kill the portrait's hover scale underneath. */
	.fw-dr-grid > li.is-new{animation:fwRise .45s cubic-bezier(.22,1,.36,1) backwards}
}
@keyframes fwShimmer{from{background-position:150% 0}to{background-position:-50% 0}}

/* ══════════════════════════════════════════════════════════════
   06 · RAIL  ·  EMPTY  ·  CLOSING
   ══════════════════════════════════════════════════════════════ */

/* No position:sticky here — the theia plugin owns the pinning now
   (.sticky-sidebar-wrap / .sticky-sidebar in the markup). Leaving a
   CSS sticky on the same element fights it: the plugin sets inline
   transforms on the inner div while the outer one is also stuck. */
.fw-dr-rail{min-width:0}
.fw-dr-rail__in{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,28px)}
.fw-dr-rail__head{
	display:flex;align-items:baseline;justify-content:space-between;gap:10px;
	padding-bottom:11px;border-bottom:1px solid var(--line)
}
.fw-dr-rail__title{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fw-dr-rail__reset{
	display:inline-flex;align-items:center;gap:6px;
	font-size:11.5px;font-weight:600;color:var(--pk-d);transition:color .25s
}
.fw-dr-rail__reset i{font-size:11px;transition:transform .4s var(--ease)}
.fw-dr-rail__reset:hover{color:var(--ink)}
.fw-dr-rail__reset:hover i{transform:rotate(-180deg)}

/* ── Facet rows with a share bar ──
   A directory is narrowed, not browsed. The bar shows each facet's share of
   the LARGEST facet, not of the total: with eight near-equal specialities a
   share-of-total bar is eight identical stubs that say nothing. It sits
   under the row as a hairline, so it reads as weight rather than as a
   chart. */
.fw-dr-facet__lbl{
	display:block;margin-bottom:var(--s2);
	font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--g5)
}
.fw-dr-facet ul{margin:0;padding:0;list-style:none}
.fw-dr-facet a{
	position:relative;display:flex;align-items:center;gap:10px;
	padding:9px 8px 11px;margin-inline:-8px;border-radius:var(--r1);
	transition:background .25s;-webkit-tap-highlight-color:transparent
}
.fw-dr-facet a:hover{background:color-mix(in srgb, var(--bl) 4.5%, transparent)}
.fw-dr-facet .fw-ico{font-size:17px;color:var(--bl);transition:color .25s}
.fw-dr-facet__t{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink);transition:color .25s}
.fw-dr-facet__n{
	flex-shrink:0;font-size:11px;font-weight:600;color:var(--g4);
	font-variant-numeric:tabular-nums;transition:color .25s
}
/* The share is a <progress value max> in the markup — a number, not a
   width in a style attribute. Native chrome reset; track and fill painted. */
.fw-dr-facet__bar{
	position:absolute;left:8px;right:8px;bottom:5px;width:auto;height:2px;border-radius:2px;
	display:block;appearance:none;-webkit-appearance:none;border:0;
	background:var(--line-soft);overflow:hidden
}
.fw-dr-facet__bar::-webkit-progress-bar{background:transparent}
.fw-dr-facet__bar::-webkit-progress-value{
	border-radius:2px;
	background:linear-gradient(90deg,var(--bl),color-mix(in srgb, var(--bl) 35%, transparent));
	transition:width .5s var(--ease),background .3s
}
.fw-dr-facet__bar::-moz-progress-bar{
	border-radius:2px;
	background:linear-gradient(90deg,var(--bl),color-mix(in srgb, var(--bl) 35%, transparent))
}
.fw-dr-facet a:hover .fw-dr-facet__t,
.fw-dr-facet a:hover .fw-ico{color:var(--bl-d)}
.fw-dr-facet a:hover .fw-dr-facet__n{color:var(--pk)}
.fw-dr-facet a.is-on .fw-dr-facet__t{color:var(--pk-d);font-weight:600}
.fw-dr-facet a.is-on .fw-dr-facet__n,
.fw-dr-facet a.is-on .fw-ico{color:var(--pk)}
.fw-dr-facet a.is-on .fw-dr-facet__bar::-webkit-progress-value{background:linear-gradient(90deg,var(--pk),color-mix(in srgb, var(--pk) 35%, transparent))}
.fw-dr-facet a.is-on .fw-dr-facet__bar::-moz-progress-bar{background:linear-gradient(90deg,var(--pk),color-mix(in srgb, var(--pk) 35%, transparent))}

/* Language is a set of small values, so pills read better than fourteen
   bars all at one or two. */
.fw-dr-facet--tags ul{display:flex;flex-wrap:wrap;gap:6px}
.fw-dr-facet--tags a{
	display:inline-flex;align-items:baseline;gap:6px;
	padding:6px 11px;margin:0;border-radius:100px;
	font-size:11.5px;font-weight:500;color:var(--g6);
	box-shadow:inset 0 0 0 1px var(--line);
	transition:color .25s,background .25s,box-shadow .25s
}
.fw-dr-facet--tags a em{font-style:normal;font-size:9.5px;color:var(--g4);font-variant-numeric:tabular-nums}
.fw-dr-facet--tags a:hover{color:var(--bl-d);background:var(--bl-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 22%, transparent)}
.fw-dr-facet--tags a.is-on{color:var(--wh);font-weight:600;background:var(--pk-d);box-shadow:none}
.fw-dr-facet--tags a.is-on em{color:color-mix(in srgb, var(--wh) 70%, transparent)}

/* ── Location: countries with their cities ──
   One native <details> per country, so it opens with JS off and by
   keyboard. The flag is our own file (app_flag_url()); the count beside
   the country is its distinct doctors in the current selection. */
.fw-dr-facet--geo{display:flex;flex-direction:column}
.fw-dr-geo{border-bottom:1px solid var(--line-soft)}
.fw-dr-geo:first-of-type{border-top:1px solid var(--line-soft)}
.fw-dr-geo__c{
	display:flex;align-items:center;gap:10px;
	padding:10px 8px;margin-inline:-8px;border-radius:var(--r1);
	cursor:pointer;list-style:none;transition:background .25s;
	-webkit-tap-highlight-color:transparent
}
.fw-dr-geo__c::-webkit-details-marker{display:none}
.fw-dr-geo__c::marker{content:''}
.fw-dr-geo__c:hover{background:color-mix(in srgb, var(--bl) 4.5%, transparent)}
.fw-dr-geo__flag{
	width:22px;height:16px;flex-shrink:0;border-radius:3px;object-fit:cover;
	box-shadow:0 0 0 1px var(--line)
}
.fw-dr-geo__flag--none{display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--g5);background:var(--g0)}
.fw-dr-geo__name{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.fw-dr-geo__n{
	flex-shrink:0;min-width:24px;padding:2px 7px;border-radius:100px;text-align:center;
	font-size:11px;font-weight:600;color:var(--g6);background:var(--g0);
	font-variant-numeric:tabular-nums
}
.fw-dr-geo__chev{flex-shrink:0;font-size:11px;color:var(--g4);transition:transform .3s var(--ease)}
.fw-dr-geo[open] > .fw-dr-geo__c .fw-dr-geo__chev{transform:rotate(180deg)}
.fw-dr-geo.is-on .fw-dr-geo__name{color:var(--pk-d)}
.fw-dr-geo.is-on .fw-dr-geo__n{color:var(--wh);background:var(--pk)}

.fw-dr-geo__cities{margin:0 0 8px;padding:0 0 0 32px;list-style:none}
.fw-dr-geo__cities a{
	display:flex;align-items:center;gap:10px;
	padding:6px 8px;margin-inline:-8px;border-radius:var(--r1);
	transition:background .25s,color .25s
}
.fw-dr-geo__cities a:hover{background:color-mix(in srgb, var(--bl) 4.5%, transparent)}
.fw-dr-geo__t{flex:1;min-width:0;font-size:13px;color:var(--g7);transition:color .25s}
.fw-dr-geo__cn{flex-shrink:0;font-size:11px;font-weight:600;color:var(--g4);font-variant-numeric:tabular-nums}
.fw-dr-geo__cities a:hover .fw-dr-geo__t{color:var(--bl-d)}
.fw-dr-geo__cities a.is-on .fw-dr-geo__t{color:var(--pk-d);font-weight:600}
.fw-dr-geo__cities a.is-on .fw-dr-geo__cn{color:var(--pk)}

/* The sheet's own controls exist only on phones (see §07). */
.fw-dr-filters-btn,
.fw-dr-rail__x,
.fw-dr-rail__foot,
.fw-dr-scrim{display:none}

/* Ruled off, not boxed — it stays part of the panel rather than becoming a
   card floating at the bottom of it. */
.fw-dr-help{padding-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--line)}
.fw-dr-help b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.015em;color:var(--bl-d)}
.fw-dr-help p{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--g6)}
.fw-dr-help a{
	display:inline-flex;align-items:center;gap:7px;margin-top:10px;
	font-size:12px;font-weight:600;color:var(--pk-d);transition:color .25s
}
.fw-dr-help a i{font-size:11px;transition:transform .3s var(--ease)}
.fw-dr-help a:hover{color:var(--bl-d)}
.fw-dr-help a:hover i{transform:translateX(4px)}

.fw-dr-empty{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,4vw,64px) 0;border-block:1px solid var(--line)}
.fw-dr-empty__ico{
	box-sizing:content-box;width:34px;height:34px;padding:14px;border-radius:16px;
	font-size:34px;color:var(--pk);background:var(--pk-l);
	box-shadow:inset 0 0 0 1px var(--pk-t2)
}
.fw-dr-empty h2{margin:var(--s4) 0 0;font-size:clamp(20px,1.3vw+8px,28px);font-weight:600;letter-spacing:-.03em;color:var(--bl-d)}
.fw-dr-empty p{margin:var(--s3) 0 0;font-size:14.5px;line-height:1.62;color:var(--g6)}
.fw-dr-empty .fw-dr-btn{margin-top:var(--s5)}

.fw-dr-close{position:relative;overflow:hidden;padding:clamp(38px,4.6vw,80px) 0;background:linear-gradient(140deg,var(--dk-d),var(--dk-b) 46%,var(--dk-p))}
.fw-dr-close__aura{
	position:absolute;top:-32%;right:-8%;width:min(56vw,600px);aspect-ratio:1;border-radius:50%;pointer-events:none;
	background:radial-gradient(circle,var(--ua-ac-edge),transparent 66%);
	animation:fwBreath 9s ease-in-out infinite
}
@keyframes fwBreath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
.fw-dr-close__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);gap:clamp(22px,3vw,58px);align-items:end}
.fw-dr-close__title{margin:var(--s3) 0 0;font-size:clamp(25px,1.6vw+12px,44px);font-weight:600;line-height:1.06;letter-spacing:-.04em;color:var(--wh);text-wrap:balance}
.fw-dr-close__sub{margin:0;font-size:clamp(14.5px,1.15vw,17px);font-weight:300;line-height:1.62;color:color-mix(in srgb, var(--wh) 68%, transparent);text-wrap:pretty}
.fw-dr-close__btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(20px,2.4vw,30px)}

/* ══════════════════════════════════════════════════════════════
   07 · RESPONSIVE — mode switches only
   ══════════════════════════════════════════════════════════════ */

/* Below 1200px the toolbar's two halves no longer fit one row: the Sort
   track alone pushed the page 30px wide at 1100 and 220px at 820. Count and
   search take the first row, the controls the second, and the Sort track
   scrolls inside itself rather than widening the page. */
@media(max-width:1199px){
	.fw-dr-tools__in{flex-wrap:wrap;row-gap:10px}
	.fw-dr-tools__lead{flex:1 1 100%}
	.fw-dr-find{max-width:none}
	.fw-dr-tools__ctl{flex:1 1 100%;flex-wrap:wrap}
	.fw-dr-seg{
		flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;
		justify-content:flex-start;-webkit-overflow-scrolling:touch
	}
	.fw-dr-seg::-webkit-scrollbar{display:none}
	.fw-dr-seg__lbl,
	.fw-dr-seg__o{flex-shrink:0}
}

/* Four across down to 1200px, so a page of 28 is seven full rows. */
@media(max-width:1199px){
	.fw-dr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
	.fw-dr-grid > li:nth-child(4n)::after{display:block}
	.fw-dr-grid > li:nth-child(3n)::after{display:none}
}

@media(max-width:1024px){
	.fw-dr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.fw-dr-grid > li:nth-child(3n)::after{display:block}
	.fw-dr-grid > li:nth-child(2n)::after{display:none}
}

@media(max-width:1024px){
	/* The house gutter on mobile — the same 14px the header drops to. */
	.fw-dr-page{--pad:14px}

	/* THE MASTHEAD COLLAPSE. The two-column rule is `.fw-dr-mast .fw-mast__grid`
	   (0,2,0); the old one-column rule named `.fw-dr-mast__grid`, a class the
	   markup never had, so on a phone the copy was squeezed into a strip a
	   word wide beside the portrait stage. Same specificity, later: it wins. */
	.fw-dr-mast .fw-mast__grid{grid-template-columns:minmax(0,1fr);gap:0}
	.fw-dr-mast .fw-dr-side{display:none}
	.fw-dr-mast .fw-mast__stats--rich{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
	.fw-dr-mast .fw-mast__note{border-radius:14px;align-items:flex-start}

	/* ── The refine panel becomes a sheet ── */
	.fw-dr-filters-btn{
		display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
		padding:8px 14px;border:0;border-radius:100px;cursor:pointer;
		font-family:var(--ff);font-size:12.5px;font-weight:600;color:var(--ink);
		background:var(--wh);box-shadow:inset 0 0 0 1px var(--line),0 2px 8px -2px var(--ink-a06)
	}
	.fw-dr-filters-btn i{font-size:14px;color:var(--pk)}
	.fw-dr-filters-btn em{
		min-width:18px;height:18px;padding:0 5px;border-radius:100px;
		display:inline-flex;align-items:center;justify-content:center;
		font-size:10.5px;font-weight:700;color:var(--wh);background:var(--pk)
	}
	/* !important on position and overflow only: the theia sticky-sidebar
	   plugin writes `position:relative; overflow:visible` inline on this
	   element, and inline beats a stylesheet. Without it the sheet sat in the
	   page flow, pushed right, and widened the document to 714px. */
	.fw-dr-rail{
		position:fixed!important;top:0;right:0;bottom:0;z-index:1045;
		width:min(420px,88vw);overflow-y:auto!important;overscroll-behavior:contain;
		background:var(--wh);box-shadow:-24px 0 60px -30px var(--ink-a40);
		transform:translateX(104%);visibility:hidden;
		transition:transform .38s var(--ease),visibility 0s linear .38s
	}
	.fw-filters-open .fw-dr-rail{transform:none;visibility:visible;transition:transform .38s var(--ease)}
	.fw-dr-rail__in{display:flex;flex-direction:column;gap:22px;padding:0 18px 0}
	.fw-dr-rail__head{
		position:sticky;top:0;z-index:2;margin-inline:-18px;padding:16px 18px 12px;
		align-items:center;background:var(--wh)
	}
	.fw-dr-rail__title{font-size:17px}
	.fw-dr-rail__reset{margin-left:auto}
	.fw-dr-rail__x{
		display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
		width:36px;height:36px;margin-left:12px;border:0;border-radius:50%;cursor:pointer;
		font-size:14px;color:var(--g7);background:var(--g0)
	}
	.fw-dr-rail__foot{
		display:block;position:sticky;bottom:0;margin-inline:-18px;padding:12px 18px 18px;
		background:linear-gradient(180deg,transparent,var(--wh) 28%)
	}
	.fw-dr-rail__foot .fw-dr-btn{width:100%;justify-content:center;border:0;cursor:pointer;font-family:var(--ff)}
	.fw-dr-scrim{
		display:block;position:fixed;inset:0;z-index:1044;
		background:var(--veil);opacity:0;visibility:hidden;
		transition:opacity .3s,visibility 0s linear .3s
	}
	.fw-filters-open .fw-dr-scrim{opacity:1;visibility:visible;transition:opacity .3s}
	.fw-filters-open{overflow:hidden}
	/* Above the sticky header (1000) and the tab bar (1040), under the site's
	   slide-out menu (1050). `.fw-dr-inner` is a z-index:1 stacking context,
	   which would trap the fixed sheet beneath the header whatever its own
	   z-index; the results wrapper gives that up on phones. */
	.fw-dr-body > .fw-dr-inner{z-index:auto}

	/* The face wall is the first thing to go: it is the network saying hello,
	   and on a phone that costs a screen before the reader reaches a single
	   name. The vitals row carries the same message in a line. */
	/* THE 65vh CEILING IS A DESKTOP RULE. With the wall gone the band is one
	   column of real content, and a ceiling there does not trim it — it clips
	   it. max-height:none, and the band sizes to what it holds. */
	.fw-dr-mast{max-height:none;min-height:0;display:block}
	/* The rail stops being a column and stops being sticky: in a single
	   column flow it would occupy the screen without ever being beside what
	   you are reading. */
	.fw-dr-layout{grid-template-columns:minmax(0,1fr);gap:0}
	.fw-dr-orb--m{display:none}
	.fw-dr-orb{filter:blur(52px)}
	.fw-dr-close__inner{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
}

@media(max-width:768px){
	/* The toolbar stacks: the count keeps its own line and the two controls
	   share the next, with the segmented track allowed to scroll. */
	.fw-dr-tools__in{flex-direction:column;align-items:stretch;gap:8px;padding-block:9px}
	/* The switch and the sort track together measure ~477px, and the column is
	   347px on a 390px phone — so this row has been pushing the whole document
	   sideways. The comment above always said the segmented track was "allowed
	   to scroll"; the rule for it was never written. Now it is: the switch keeps
	   its size, the track takes the rest and scrolls inside itself, and the two
	   wrap onto separate lines before either is squeezed unreadable. */
	.fw-dr-tools__ctl{justify-content:space-between;flex-wrap:wrap;gap:8px;width:100%}
	.fw-dr-seg{
		flex:1 1 220px;min-width:0;overflow-x:auto;scrollbar-width:none;
		justify-content:flex-start;-webkit-overflow-scrolling:touch
	}
	.fw-dr-seg::-webkit-scrollbar{display:none}
	.fw-dr-seg__lbl{flex-shrink:0}
	.fw-dr-seg__o{flex-shrink:0}
	.fw-dr-tools__count{flex-shrink:0}
	/* THE OVERFLOW FIX. In a stretched column `flex:1 1 auto` plus a 520px
	   max-width let the field measure 477px inside a 390px screen and pushed
	   the whole document sideways. In one column it is simply full width. */
	.fw-dr-tools__lead{flex-direction:column;align-items:stretch;gap:8px}
	.fw-dr-tools__count{align-self:flex-start}
	.fw-dr-find{flex:0 0 auto;width:100%;max-width:none}
	.fw-dr-find__row{padding-left:14px;gap:9px}
	.fw-dr-find__row input{font-size:14px}
	.fw-dr-find__row button span{display:none}
	.fw-dr-find__row button{padding:10px 14px}
	.fw-dr-close__btns .fw-dr-btn{flex:1 1 100%}

	/* One column, card on its side: a 4:5 portrait stacked over the detail
	   makes every clinician a full screen, and eighteen of those is a scroll
	   nobody finishes. */
	.fw-dr-grid{grid-template-columns:minmax(0,1fr)}
	.fw-dr-grid > li::after{display:none}
	.fw-dr-grid > li > article{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;padding:12px 10px}
	.fw-dr-card__ph{aspect-ratio:4/5}
	.fw-dr-card__body{padding-top:0}
	/* At 104px the name on the photograph is unreadable, so the wrapper
	   stops being a grid and its two children join the card's own columns:
	   portrait left, identity top-right, body under it. */
	.fw-dr-card__top{display:contents}
	.fw-dr-card__ph{grid-column:1;grid-row:1 / span 2}
	.fw-dr-card__id{
		grid-column:2;grid-row:1;align-self:start;padding:0 0 6px
	}
	.fw-dr-card__id b{color:var(--ink);text-shadow:none}
	.fw-dr-card__id small{color:var(--g5);text-shadow:none}
	.fw-dr-card__body{grid-column:2;grid-row:2}
	.fw-dr-card__scrim,
	.fw-dr-card__v em{display:none}
	.fw-dr-card__v{left:auto;right:6px;top:6px;padding:5px;border-radius:50%}
	/* It stays absolute. It lives inside the portrait link, whose <img> is
	   absolutely positioned to fill the frame — a static chip in there is
	   simply painted over by the photograph, which is why it only showed on
	   cards whose image had not loaded yet. Compact, and the review count
	   goes, since at this width it cannot be read anyway. */
	.fw-dr-card__rate{left:6px;right:auto;top:6px;padding:3px 7px;font-size:10px;gap:4px}
	.fw-dr-card__rate small{display:none}
	.fw-dr-card__row{flex-wrap:wrap}
	.fw-dr-card__stats{margin-top:10px}
	/* Side-by-side again: the row card is wide, not narrow. */
	.fw-dr-card__foot{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
	.fw-dr-card__book{display:inline-block}
}

@media(max-width:480px){
	.fw-dr-pg--step span{display:none}
	.fw-dr-pg--step{min-width:40px;padding-inline:0}
	.fw-dr-grid > li > article{grid-template-columns:88px minmax(0,1fr);column-gap:12px}
	.fw-dr-card__qual{display:none}
}

/* ══════════════════════════════════════════════════════════════
   TOUCH · MOTION · FOCUS
   ══════════════════════════════════════════════════════════════ */

/* A :hover transform latches after a tap on a touch screen. Strip the
   movement; the colour changes still read as feedback. */
@media(hover:none){
	.fw-dr-btn:hover,
	.fw-dr-pg:hover,
	.fw-dr-more__btn:hover,
	.fw-dr-rail__list a:hover{transform:none}
	.fw-dr-grid > li:hover .fw-dr-card__ph img{transform:none}
}

@media(prefers-reduced-motion:reduce){
	.fw-dr-page *,
	.fw-dr-page *::before,
	.fw-dr-page *::after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important;
		scroll-behavior:auto!important
	}
	.fw-dr-card__ph img{opacity:1}
	.fw-dr-wall__col,
	.fw-dr-orb,
	.fw-dr-close__aura{animation:none}
}

/* custom/js/core.js scrolls in-page links with scrollIntoView, which honours
   scroll-margin-top — the single place the sticky offset is recorded. */
.fw-dr [id]{scroll-margin-top:calc(var(--sticky) + 96px)}

.fw-dr-page a:focus-visible,
.fw-dr-page button:focus-visible,
.fw-dr-page input:focus-visible{outline:2px solid var(--bl);outline-offset:3px;border-radius:8px}

/* The video switch with nobody behind it in the current selection: shown, not offered. */
.fw-dr-toggle.is-empty{opacity:.45;cursor:default;pointer-events:none}

/* Save beside Book (design, 9 Oct 2026; the button itself is .fw-save in css/common.css). */
.fw-dr-card__go{display:flex;align-items:center;gap:8px}
.fw-dr-card__go .fw-dr-card__book{flex:1}