/**
 * Discovery architecture.
 *
 * Inherits the theme's v3 tokens where they exist, with fallbacks so the
 * layer stands alone if the v2 CSS is later deleted. Deliberately NOT one
 * bordered rounded rectangle repeated six times: a place, a symptom, a
 * condition, a treatment link, an urgent warning and a call to action are six
 * different kinds of thing and are drawn six different ways.
 *
 * Logical properties throughout, so Arabic mirrors without a single override.
 */

.sx-main{
	--sx-ink: var(--ink, #18335A);
	--sx-muted: var(--muted, #5a6b7d);
	--sx-line: var(--line, rgba(24,51,90,.14));
	--sx-sand: var(--sand, #f5f5ef);
	--sx-accent: #0A7376;              /* darkened from --teal: 2.84:1 fails contrast */
	--sx-urgent: #8C2F22;
	--sx-serif: var(--font-display, Georgia, "Times New Roman", serif);
	--sx-sans: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
	--sx-wrap: var(--max, 1280px);
	--sx-gutter: var(--wrap-gutter, clamp(20px, 4vw, 48px));
	display:block;
}

.sx-wrap{
	width:100%;
	max-width:var(--sx-wrap);
	margin-inline:auto;
	padding-inline:var(--sx-gutter);
	box-sizing:border-box;
}

/* ---------- masthead ---------- */
.sx-masthead{
	padding-block: clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem);
	border-block-end:1px solid var(--sx-line);
}
.sx-eyebrow{
	margin:0 0 .7rem;
	font-family:var(--sx-sans);
	font-size:.72rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--sx-accent);
}
.sx-h1{
	font-family:var(--sx-serif);
	font-weight:400;
	font-size:clamp(2.05rem,3.4vw,3.1rem);
	line-height:1.1;
	letter-spacing:-.012em;
	margin:0 0 1rem;
	color:var(--sx-ink);
	text-wrap:balance;
}
.sx-standfirst{
	margin:0;
	max-width:var(--measure, 38rem);
	font-size:1.12rem;
	line-height:1.6;
	color:var(--sx-muted);
}

/* ---------- sections ---------- */
.sx-section{ padding-block: clamp(2.75rem,5.5vw,4.5rem); }
.sx-section + .sx-section{ border-block-start:1px solid var(--sx-line); }
.sx-section--tight{ padding-block: clamp(1.75rem,3vw,2.5rem); }
.sx-h2{
	font-family:var(--sx-serif);
	font-weight:400;
	font-size:clamp(1.6rem,2.5vw,2.25rem);
	line-height:1.18;
	margin:0 0 .6rem;
	color:var(--sx-ink);
	text-wrap:balance;
}
.sx-intro{
	margin:0 0 1.9rem;
	max-width:var(--measure, 38rem);
	color:var(--sx-muted);
	line-height:1.65;
}
.sx-more{ margin:1.6rem 0 0; }
.sx-more a{ color:var(--sx-accent); font-weight:600; }

/* ---------- breadcrumb ---------- */
.sx-breadcrumb{
	padding-block:.9rem;
	border-block-end:1px solid var(--sx-line);
	font-size:.83rem;
	color:var(--sx-muted);
}
.sx-breadcrumb a{ color:var(--sx-muted); }
.sx-breadcrumb a:hover{ color:var(--sx-ink); }
.sx-breadcrumb span{ margin-inline:.5rem; }
.sx-breadcrumb span[aria-current]{ color:var(--sx-ink); margin-inline-start:0; }

/* ---------- WHERE: a compact index of places, not cards ---------- */
.sx-regions{
	display:flex;
	flex-wrap:wrap;
	gap:0;
	border:1px solid var(--sx-line);
	border-radius:4px;
	overflow:hidden;
}
.sx-region{
	flex:1 1 8.5rem;
	min-width:0;
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:.5rem;
	padding:1.05rem 1.1rem;
	border-inline-end:1px solid var(--sx-line);
	text-decoration:none;
	color:var(--sx-ink);
	background:#fff;
	transition:background .15s ease;
}
.sx-region:last-child{ border-inline-end:0; }
.sx-region:hover,.sx-region:focus-visible{ background:var(--sx-sand); }
.sx-region.is-current{ background:var(--sx-ink); color:#fff; }
.sx-region__name{ font-weight:600; font-size:1rem; }
.sx-region__count{
	font-size:.72rem;
	color:var(--sx-muted);
	font-variant-numeric:tabular-nums;
}
.sx-region.is-current .sx-region__count{ color:rgba(255,255,255,.7); }

@media (max-width: 880px){
	.sx-regions{ flex-direction:column; }
	.sx-region{ border-inline-end:0; border-block-end:1px solid var(--sx-line); }
	.sx-region:last-child{ border-block-end:0; }
}

/* ---------- WHAT AM I FEELING: a described list, not a card grid ---------- */
.sx-symptoms{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
	gap:0 2.5rem;
}
.sx-symptom a{
	display:block;
	padding-block:1.05rem;
	border-block-end:1px solid var(--sx-line);
	text-decoration:none;
	color:var(--sx-ink);
}
.sx-symptom a:hover .sx-symptom__name{ color:var(--sx-accent); }
.sx-symptom__name{
	display:block;
	font-weight:600;
	font-size:1.02rem;
	margin-block-end:.15rem;
}
.sx-symptom__blurb{
	display:block;
	font-size:.87rem;
	line-height:1.5;
	color:var(--sx-muted);
}
.sx-symptom.is-current .sx-symptom__name{ color:var(--sx-accent); }

/* ---------- CONDITION CARDS ---------- */
.sx-cards{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));
	gap:1px;
	background:var(--sx-line);
	border:1px solid var(--sx-line);
	border-radius:4px;
	overflow:hidden;
}
.sx-card{ background:#fff; }
.sx-card__link{
	display:flex;
	flex-direction:column;
	gap:.5rem;
	height:100%;
	padding:1.5rem 1.4rem;
	text-decoration:none;
	color:var(--sx-ink);
	transition:background .15s ease;
}
.sx-card__link:hover,.sx-card__link:focus-visible{ background:var(--sx-sand); }
.sx-card__title{
	margin:0;
	font-family:var(--sx-sans);
	font-size:1.05rem;
	font-weight:600;
	line-height:1.3;
}
.sx-card__text{
	margin:0;
	font-size:.89rem;
	line-height:1.55;
	color:var(--sx-muted);
	flex:1 1 auto;
}
.sx-card__more{
	font-size:.76rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--sx-accent);
}
/* Complex work reads differently from everyday conditions. */
.sx-cards--complex .sx-card__link{ border-inline-start:2px solid var(--sx-ink); }
.sx-cards--complex .sx-card__more{ color:var(--sx-ink); }

/* ---------- TREATMENT LINKS: a list, not cards ---------- */
.sx-linklist{
	list-style:none;
	margin:0;
	padding:0;
	columns:2;
	column-gap:3rem;
}
.sx-linklist li{ break-inside:avoid; margin-block-end:.1rem; }
.sx-linklist a{
	display:block;
	padding-block:.72rem;
	border-block-end:1px solid var(--sx-line);
	color:var(--sx-ink);
	text-decoration:none;
	font-size:.97rem;
}
.sx-linklist a:hover{ color:var(--sx-accent); }
.sx-linklist__label{
	margin:0 0 .5rem;
	font-size:.78rem;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--sx-muted);
}
@media (max-width: 700px){ .sx-linklist{ columns:1; } }

/* ---------- URGENT: the one place colour is allowed to raise its voice ---------- */
.sx-urgent{
	margin-block:0 2rem;
	padding:1.35rem 1.5rem;
	border:1px solid rgba(140,47,34,.28);
	border-inline-start:3px solid var(--sx-urgent);
	background:#FCF6F4;
	border-radius:4px;
}
.sx-urgent__head{
	margin:0 0 .4rem;
	font-weight:700;
	font-size:.8rem;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--sx-urgent);
}
.sx-urgent p{ margin:0; color:#4a3330; line-height:1.62; max-width:var(--measure,38rem); }

/* ---------- ROUTES: the four ways in ---------- */
.sx-routes{
	list-style:none;margin:0;padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
	gap:1px;
	background:var(--sx-line);
	border:1px solid var(--sx-line);
	border-radius:4px;
	overflow:hidden;
}
.sx-route a{
	display:flex;flex-direction:column;gap:.35rem;height:100%;
	padding:1.75rem 1.5rem;background:#fff;text-decoration:none;color:var(--sx-ink);
	transition:background .15s ease;
}
.sx-route a:hover,.sx-route a:focus-visible{ background:var(--sx-sand); }
.sx-route__q{
	font-family:var(--sx-serif);font-size:1.22rem;line-height:1.25;font-weight:400;
}
.sx-route__a{
	font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sx-accent);
}
.sx-route__blurb{ font-size:.87rem;line-height:1.5;color:var(--sx-muted);margin-block-start:.35rem; }

/* ---------- A–Z LIBRARY ---------- */
.sx-library__controls{
	display:flex;flex-direction:column;gap:1.1rem;margin-block-end:1.75rem;
}
.sx-search{ display:block; }
.sx-search__label{
	display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
	color:var(--sx-muted);margin-block-end:.45rem;
}
.sx-search input{
	width:100%;box-sizing:border-box;
	padding:.85rem 1rem;
	font-size:1rem;font-family:inherit;color:var(--sx-ink);
	border:1px solid var(--sx-line);border-radius:4px;background:#fff;
}
.sx-search input:focus-visible{ outline:2px solid var(--sx-accent);outline-offset:2px; }

.sx-alpha{ display:flex;flex-wrap:wrap;gap:.3rem; }
.sx-alpha__btn{
	min-width:2.1rem;min-height:2.1rem;
	padding:.35rem .5rem;
	font:inherit;font-size:.85rem;font-weight:600;
	color:var(--sx-ink);background:#fff;
	border:1px solid var(--sx-line);border-radius:3px;
	cursor:pointer;
}
.sx-alpha__btn:hover:not(:disabled){ border-color:var(--sx-accent);color:var(--sx-accent); }
.sx-alpha__btn.is-current{ background:var(--sx-ink);border-color:var(--sx-ink);color:#fff; }
.sx-alpha__btn.is-empty,.sx-alpha__btn:disabled{ opacity:.3;cursor:default; }

.sx-library__status{ margin:0 0 1rem;font-size:.85rem;color:var(--sx-muted);min-height:1.2em; }

.sx-letter{
	display:grid;
	grid-template-columns:3.5rem 1fr;
	gap:1.5rem;
	padding-block:1.25rem;
	border-block-start:1px solid var(--sx-line);
}
.sx-letter__head{
	margin:0;
	font-family:var(--sx-serif);
	font-size:1.7rem;font-weight:400;line-height:1;
	color:var(--sx-accent);
}
.sx-letter__list{
	list-style:none;margin:0;padding:0;
	columns:2;column-gap:2.5rem;
}
.sx-entry{ break-inside:avoid; }
.sx-entry a{
	display:block;padding-block:.4rem;color:var(--sx-ink);text-decoration:none;font-size:.98rem;
}
.sx-entry a:hover{ color:var(--sx-accent);text-decoration:underline; }
.sx-library__empty{ padding-block:2rem;color:var(--sx-muted); }
.sx-library__empty a{ color:var(--sx-accent); }

@media (max-width: 700px){
	.sx-letter{ grid-template-columns:2.4rem 1fr; gap:1rem; }
	.sx-letter__list{ columns:1; }
	.sx-letter__head{ font-size:1.35rem; }
}

/* ---------- CTA ---------- */
.sx-cta{ background:var(--sx-ink); color:#fff; padding-block:clamp(2.5rem,4.5vw,3.5rem); }
.sx-cta__inner{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
}
.sx-cta__text{ margin:0;max-width:36rem;font-size:1.08rem;line-height:1.55;color:rgba(255,255,255,.92); }
.sx-cta__btn{
	display:inline-block;flex:0 0 auto;
	padding:.9rem 1.75rem;
	background:#fff;color:var(--sx-ink);
	font-weight:600;font-size:.95rem;text-decoration:none;
	border-radius:4px;
}
.sx-cta__btn:hover{ background:var(--sx-sand); }

/* ---------- shared ---------- */
.sx-main a:focus-visible,.sx-main button:focus-visible,.sx-main input:focus-visible{
	outline:2px solid var(--sx-accent);outline-offset:3px;
}
.sx-cta a:focus-visible{ outline-color:#fff; }
.sx-main *{ min-width:0; }
@media (prefers-reduced-motion:reduce){ .sx-main *{ transition:none!important; } }

/* Neutral notice — used for the "not yet in this language" state. Distinct from
   .sx-urgent, which is reserved for clinical red flags and must not be diluted. */
.sx-notice{
	margin-block:0 1.6rem;
	padding:1.35rem 1.5rem;
	border:1px solid var(--sx-line);
	border-inline-start:3px solid var(--sx-accent);
	background:var(--sx-sand);
	border-radius:4px;
}
.sx-notice__head{
	margin:0 0 .4rem;
	font-weight:600;
	font-size:.8rem;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--sx-accent);
}
.sx-notice p{ margin:0; color:var(--sx-muted); line-height:1.62; max-width:var(--measure,38rem); }
.sx-cta__btn--solid{ background:var(--sx-ink); color:#fff; }
.sx-cta__btn--solid:hover{ background:var(--sx-accent); color:#fff; }

/* Hidden filter groups must override component display rules. */
.sx-library [hidden]{display:none!important}
.sx-clinical-copy{max-width:760px;line-height:1.8}

/* Education: compact editorial introduction and clearly separated routes. */
.sx-main ul.sx-routes,.sx-main ul.sx-cards{padding:0;margin:0;list-style:none}
.sx-main .sx-route,.sx-main .sx-card{margin:0;padding:0;list-style:none}
.sx-main .sx-route a,.sx-main .sx-card__link{box-sizing:border-box}
.sx-education .sx-masthead{padding-block:clamp(2rem,4vw,3.5rem);background:#f3f7f7}
.sx-education .sx-masthead .sx-wrap{display:grid;grid-template-columns:1.1fr 1fr;column-gap:4rem;align-items:center}
.sx-education .sx-eyebrow{grid-column:1 / -1;letter-spacing:.06em;font-size:.8rem}
.sx-education .sx-h1{font-size:clamp(2rem,3.1vw,3rem);line-height:1.3;margin:0}
.sx-education .sx-standfirst{font-size:1.05rem;line-height:1.85;max-width:none}
.sx-education .sx-section{padding-block:clamp(2rem,3.5vw,3rem)}
.sx-education .sx-routes{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;background:transparent;border:0;overflow:visible}
.sx-education .sx-route a{border:1px solid var(--sx-line);border-block-start:3px solid var(--sx-accent);border-radius:8px;padding:1.4rem;gap:.65rem;box-shadow:0 4px 16px rgba(24,51,90,.04)}
.sx-education .sx-route a:hover{border-color:var(--sx-accent);background:#f3f7f7}
.sx-education .sx-route__q{font-weight:600;font-size:1.14rem;line-height:1.5}
.sx-education .sx-route__a{letter-spacing:0;font-size:.88rem}
.sx-education .sx-route__blurb{line-height:1.75}
html[dir=rtl] .sx-main .sx-h1,html[dir=rtl] .sx-main .sx-h2{line-height:1.5}
html[dir=rtl] .sx-main .sx-eyebrow,html[dir=rtl] .sx-main .sx-route__a{letter-spacing:0}
@media(max-width:900px){.sx-education .sx-masthead .sx-wrap{grid-template-columns:1fr;gap:1rem}.sx-education .sx-routes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.sx-education .sx-routes{grid-template-columns:1fr}.sx-education .sx-route a{padding:1.15rem}.sx-main .sx-cards{grid-template-columns:1fr}}