/**
 * DoS front-end styles — grid, profile, counts teaser. Scoped under .dos so it
 * coexists with any theme / Elementor kit. Palette + type mirror the approved
 * prototype (prototypes/donor-database-flow.html). Theme-aware (light/dark).
 */
.dos {
	/* Design tokens. Colour/font tokens INHERIT the Elementor kit (kit_id 6 system
	   globals) and fall back to the brand value off-kit. The Settings ▸ Appearance
	   dashboard overrides these via a wp_head <style> only when a token is set to
	   Brand/Custom (Inherit emits nothing → the kit var, or the brand fallback). */
	--dos-bg: var(--e-global-color-bg, #FBF7F4); --dos-surface: #FFFFFF; --dos-surface-2: #F5ECE7; --dos-surface-3: #EFE3DC;
	--dos-ink: var(--e-global-color-text, #2A211E); --dos-ink-soft: #4E423D; --dos-muted: #8B7C76; --dos-faint: #B8A9A2;
	--dos-line: var(--e-global-color-line, #E8DBD3); --dos-line-strong: #DBCBC1;
	--dos-rose: #C98A85;
	--dos-claret: var(--e-global-color-primary, #8E2F3B);
	--dos-claret-hover: color-mix(in srgb, var(--dos-claret) 86%, #000); --dos-on-claret: #FFF6F3;
	--dos-ok: #4C7A5E; --dos-ok-bg: #E4EEE7; --dos-warn: #9C6A16; --dos-warn-bg: #F5EAD6;
	--dos-hold: #8E2F3B; --dos-hold-bg: #F3DEDF; --dos-matched: #8B7C76; --dos-matched-bg: #EDE6E2;
	--dos-shadow: 0 1px 2px rgba(42,33,30,.04), 0 8px 30px rgba(42,33,30,.06);
	--dos-shadow-lg: 0 20px 60px rgba(42,33,30,.14);
	--dos-r: 14px; --dos-r-sm: 9px; --dos-r-lg: 22px; --dos-btn-r: 44px;
	--dos-cols: 4; --dos-cols-t: 2; --dos-cols-m: 1;
	--dos-serif: var(--e-global-typography-primary-font-family, "Cormorant Garamond", Georgia, serif);
	--dos-sans: var(--e-global-typography-text-font-family, "Hanken Grotesk", system-ui, sans-serif);
	--dos-mono: "IBM Plex Mono", ui-monospace, monospace;
	color: var(--dos-ink); font-family: var(--dos-sans);
}
/* Dark palette. Applied under the OS dark preference when dark_mode is "auto"
   (the default) and forced on when "dark"; fully suppressed when "light". The
   data-dark attribute is emitted on every .dos wrapper (see appearance.php). */
.dos[data-dark="dark"] {
	--dos-bg: #17110F; --dos-surface: #201815; --dos-surface-2: #281E1A; --dos-surface-3: #31241F;
	--dos-ink: #F4EAE4; --dos-ink-soft: #DDCBC3; --dos-muted: #AD9A92; --dos-faint: #7C6C64;
	--dos-line: #37281F; --dos-line-strong: #463327;
	--dos-rose: #D89E99; --dos-claret: #D65E6A; --dos-claret-hover: #E4707C; --dos-on-claret: #1A1210;
	--dos-ok: #7FB194; --dos-ok-bg: #1E2A22; --dos-warn: #D6A24A; --dos-warn-bg: #2C2415;
	--dos-hold: #E07B85; --dos-hold-bg: #2E1B1D; --dos-matched: #AD9A92; --dos-matched-bg: #271D19;
	--dos-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 34px rgba(0,0,0,.34);
	--dos-shadow-lg: 0 24px 70px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark) {
	.dos:not([data-dark="light"]):not([data-dark="dark"]) {
		--dos-bg: #17110F; --dos-surface: #201815; --dos-surface-2: #281E1A; --dos-surface-3: #31241F;
		--dos-ink: #F4EAE4; --dos-ink-soft: #DDCBC3; --dos-muted: #AD9A92; --dos-faint: #7C6C64;
		--dos-line: #37281F; --dos-line-strong: #463327;
		--dos-rose: #D89E99; --dos-claret: #D65E6A; --dos-claret-hover: #E4707C; --dos-on-claret: #1A1210;
		--dos-ok: #7FB194; --dos-ok-bg: #1E2A22; --dos-warn: #D6A24A; --dos-warn-bg: #2C2415;
		--dos-hold: #E07B85; --dos-hold-bg: #2E1B1D; --dos-matched: #AD9A92; --dos-matched-bg: #271D19;
		--dos-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 34px rgba(0,0,0,.34);
		--dos-shadow-lg: 0 24px 70px rgba(0,0,0,.55);
	}
}

.dos * { box-sizing: border-box; }

/* Kill the phantom horizontal scrollbar the full-bleed below can cause. `100vw`
   counts the vertical-scrollbar gutter, so on a real browser with a classic
   (non-overlay) scrollbar the bled wrappers are ~15px wider than the content
   area → horizontal page scroll. (Headless Chromium uses overlay scrollbars, 0px,
   which is why this never reproduced via the broker.) `overflow-x: clip` on the
   root absorbs that residual bleed. `clip` — NOT `hidden`/`auto` — is deliberate:
   it does not establish a scroll container, so it is safe for the sticky filters
   below and any theme sticky/fixed header. This stylesheet only loads on the gated
   donor pages, so the rule is scoped to exactly the surfaces that full-bleed. */
html { overflow-x: clip; }

/* Break out of a theme's constrained content width (block themes like Twenty
   Twenty-Five cap page content at ~620px, which squeezes the grid to one column).
   Full-bleed the surface, then re-center its content at a comfortable max width. */
.dos-teaser, .dos-grid-wrap, .dos-profile-wrap {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-inline: clamp(16px, 4vw, 48px);
}
/* [2026-10-07 · Claude · Elementor note #5] Space between the donor profile and the footer.
   The reserve bar sat flush on the global footer (0px gap, measured on ED-1052). Stephen asked
   for the space on the profile, not the footer, so it lives on the profile wrapper. */
.dos-profile-wrap { padding-bottom: clamp(56px, 8vw, 112px); }
.dos-teaser > *, .dos-grid-wrap > *, .dos-profile-wrap > * {
	max-width: 1240px;
	margin-inline: auto;
}
.dos img { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; }
.dos .dos-gate-msg { padding: 40px; text-align: center; color: var(--dos-muted); }

/* Buttons + pills */
.dos-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: var(--dos-btn-r); font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: .2s; }
.dos-btn-primary { background: var(--dos-claret); color: var(--dos-on-claret); }
.dos-btn-primary:hover { background: var(--dos-claret-hover); }
.dos-btn-primary[disabled] { opacity: .55; cursor: not-allowed; }
.dos-btn-ghost { border-color: var(--dos-line-strong); color: var(--dos-ink); background: var(--dos-surface); }
.dos-btn-ghost:hover { border-color: var(--dos-rose); }
.dos-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 30px; font-size: 12px; font-weight: 600; }
.dos-pill .dos-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dos-pill.available { color: var(--dos-ok); background: var(--dos-ok-bg); }
.dos-pill.cycling { color: var(--dos-warn); background: var(--dos-warn-bg); }
.dos-pill.hold { color: var(--dos-hold); background: var(--dos-hold-bg); }
.dos-pill.matched { color: var(--dos-matched); background: var(--dos-matched-bg); }

/* Layout: filters + main */
.dos-teaser-body { display: grid; grid-template-columns: 250px 1fr; gap: 34px; align-items: start; }
.dos-filters { position: sticky; top: 20px; border: 1px solid var(--dos-line); border-radius: var(--dos-r); background: var(--dos-surface); padding: 20px; box-shadow: var(--dos-shadow); }
.dos-filters h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dos-muted); margin: 0 0 14px; font-weight: 600; }
.dos-fgroup { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--dos-line); }
.dos-fgroup:last-child { border: none; margin: 0; padding: 0; }
.dos-lbl { font-size: 12.5px; font-weight: 700; color: var(--dos-ink-soft); margin-bottom: 10px; display: block; }
.dos-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dos-chip { padding: 6px 12px; border-radius: 30px; font-size: 12.5px; font-weight: 600; color: var(--dos-muted); background: var(--dos-surface-2); border: 1px solid transparent; cursor: pointer; transition: .15s; }
.dos-chip:hover { color: var(--dos-ink); }
.dos-chip.on { background: var(--dos-claret); color: var(--dos-on-claret); }
/* The gated grid renders its chips as <a> (server-side filtering), the teaser as
   <button>. Keep both looking identical. */
a.dos-chip { text-decoration: none; display: inline-block; line-height: 1.35; }
.dos-clear { font-size: 12.5px; color: var(--dos-claret); font-weight: 600; background: none; border: none; cursor: pointer; text-decoration: none; }
.dos-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 14px; flex-wrap: wrap; }
.dos-result-count { font-size: 13.5px; color: var(--dos-muted); }
.dos-result-count b { color: var(--dos-ink); font-family: var(--dos-mono); }

/* Counts teaser */
.dos-count-hero { background: linear-gradient(150deg, var(--dos-surface-2), var(--dos-surface)); border: 1px solid var(--dos-line); border-radius: var(--dos-r-lg); padding: 40px; text-align: center; box-shadow: var(--dos-shadow); }
.dos-count-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dos-muted); font-weight: 600; margin-bottom: 10px; }
.dos-count-big { font-family: var(--dos-serif); font-size: clamp(72px, 12vw, 120px); line-height: .9; color: var(--dos-claret); font-variant-numeric: tabular-nums; }
.dos-count-cap { font-size: 16px; color: var(--dos-ink-soft); margin-top: 6px; }
.dos-count-sub { font-size: 13.5px; color: var(--dos-muted); margin: 14px auto 0; max-width: 44ch; }
.dos-count-cta { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dos-locked-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 26px; }
.dos-locked-card { aspect-ratio: 3/4; border-radius: var(--dos-r); border: 1px solid var(--dos-line); position: relative; overflow: hidden; background: linear-gradient(160deg, var(--dos-surface-2), var(--dos-surface-3)); }
.dos-locked-card .dos-lk { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: var(--dos-faint); }
.dos-teaser-main .dos-clear { margin-top: 16px; display: inline-block; }

/* Grid + cards. Column counts are dashboard tokens (--dos-cols[-t/-m]); minmax(0,…)
   lets columns shrink below the intrinsic card width on narrow viewports. */
.dos-grid { display: grid; grid-template-columns: repeat(var(--dos-cols, 4), minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1024px) { .dos-grid { grid-template-columns: repeat(var(--dos-cols-t, 2), minmax(0, 1fr)); } }
@media (max-width: 640px)  { .dos-grid { grid-template-columns: repeat(var(--dos-cols-m, 1), minmax(0, 1fr)); } }
.dos-card { position: relative; border-radius: var(--dos-r); overflow: hidden; background: var(--dos-surface); border: 1px solid var(--dos-line); cursor: pointer; transition: .22s; box-shadow: var(--dos-shadow); text-decoration: none; color: inherit; display: block; }
.dos-card:hover { transform: translateY(-4px); box-shadow: var(--dos-shadow-lg); border-color: var(--dos-rose); }
.dos-card.dos-hidden { display: none; }
.dos-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--dos-muted); font-size: 14px; }

/* Numbered pagination under the grid */
.dos-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 32px; }
.dos-page { min-width: 38px; padding: 8px 12px; border-radius: var(--dos-r); border: 1px solid var(--dos-line); background: var(--dos-surface); color: var(--dos-ink-soft); font-size: 13.5px; font-weight: 600; text-align: center; text-decoration: none; transition: .15s; }
.dos-page:hover { border-color: var(--dos-rose); color: var(--dos-ink); }
.dos-page-current { background: var(--dos-claret); border-color: var(--dos-claret); color: var(--dos-on-claret); }
.dos-page-gap { color: var(--dos-faint); padding: 0 2px; }
.dos-page-of { color: var(--dos-faint); }
.dos-card-photo { position: relative; aspect-ratio: 3/4; background: linear-gradient(150deg, var(--dos-surface-2), var(--dos-surface-3)); display: grid; place-items: center; overflow: hidden; }
.dos-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.dos-initial { font-family: var(--dos-serif); font-size: 56px; opacity: .34; font-style: italic; color: var(--dos-rose); }
.dos-code-chip { position: absolute; top: 11px; left: 11px; font-family: var(--dos-mono); font-size: 11px; background: rgba(20,14,12,.42); color: #fff; padding: 3px 8px; border-radius: 20px; backdrop-filter: blur(4px); }
.dos-code-chip.dark { position: static; background: var(--dos-surface-2); color: var(--dos-ink-soft); }
.dos-card-badge { position: absolute; top: 11px; right: 11px; z-index: 2; }
.dos-card-info { padding: 13px 15px 15px; }
.dos-card-info .dos-nm { font-family: var(--dos-serif); font-size: 21px; line-height: 1; }
.dos-card-meta { font-size: 12.5px; color: var(--dos-muted); margin-top: 6px; }
.dos-preview { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,16,14,.94) 24%, rgba(24,16,14,.5) 60%, transparent); color: #fff; opacity: 0; transition: .25s; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; pointer-events: none; }
.dos-card:hover .dos-preview { opacity: 1; }
.dos-pv-nm { font-family: var(--dos-serif); font-size: 23px; font-style: italic; }
.dos-pv-rows { margin: 10px 0 4px; display: grid; gap: 5px; font-size: 12.5px; }
.dos-pv-rows div { border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 4px; color: rgba(255,255,255,.82); }
.dos-pv-cta { margin-top: 11px; font-size: 12px; font-weight: 700; }

/* Profile */
.dos-profile { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.dos-gallery { position: sticky; top: 20px; }
.dos-gal-main { position: relative; aspect-ratio: 4/5; border-radius: var(--dos-r); overflow: hidden; border: 1px solid var(--dos-line); display: grid; place-items: center; background: linear-gradient(150deg, var(--dos-surface-2), var(--dos-surface-3)); }
.dos-gal-main img { width: 100%; height: 100%; object-fit: cover; }
.dos-gal-secure { position: absolute; bottom: 14px; left: 14px; background: rgba(20,14,12,.5); backdrop-filter: blur(8px); color: #fff; font-size: 11.5px; padding: 7px 13px; border-radius: 30px; }
.dos-gal-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.dos-thumb { aspect-ratio: 1; border-radius: 9px; overflow: hidden; border: 1px solid var(--dos-line); padding: 0; cursor: pointer; background: none; }
.dos-thumb.active { border-color: var(--dos-rose); box-shadow: 0 0 0 2px var(--dos-rose); }
.dos-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dos-p-code { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dos-p-name { font-family: var(--dos-serif); font-size: clamp(38px, 5vw, 56px); font-weight: 500; line-height: 1; margin: 0; }
.dos-section { border-top: 1px solid var(--dos-line); padding: 24px 0; }
.dos-section h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dos-claret); margin: 0 0 18px; font-weight: 700; }
.dos-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dos-line); border-radius: var(--dos-r-sm); overflow: hidden; border: 1px solid var(--dos-line); }
.dos-spec { background: var(--dos-surface); padding: 13px 16px; }
.dos-spec .dos-k { font-size: 11.5px; color: var(--dos-muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.dos-spec .dos-v { font-size: 16px; margin-top: 3px; font-weight: 500; }
.dos-prose { color: var(--dos-ink-soft); font-size: 15.5px; line-height: 1.7; max-width: 60ch; margin: 0 0 12px; }
.dos-genetic { background: var(--dos-surface-2); border: 1px solid var(--dos-line); border-radius: var(--dos-r); padding: 20px; }
.dos-genetic-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--dos-line); font-size: 14.5px; }
.dos-genetic-row:last-of-type { border: none; }
/* [2026-10-06 · Claude · 868m0ed6t] Genetics heading + DOWNLOAD FULL PROFILE. Explicit hover
   colour because hello-elementor's reset.css recolours any <a> that lacks one. */
.dos-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.dos-section-head h3 { margin: 0; }
.dos-pdf-btn, .dos-pdf-btn:hover, .dos-pdf-btn:focus { color: var(--dos-on-claret); }
.dos-pdf-btn { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
/* [2026-10-07 · Claude · 868m0ed6t] Fresh / frozen availability under the name, and the
   sub-headings the restructured sections use (Mbali, 5 Oct). */
.dos-egg-avail { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.dos-egg-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 30px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--dos-claret); background: var(--dos-surface-2); border: 1px solid var(--dos-line-strong); }
.dos-subhead { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dos-muted); margin: 22px 0 12px; font-weight: 700; }
.dos-famhx-note { margin-top: 12px; }
.dos-explainer { margin: 14px 0 0; font-size: 13.5px; color: var(--dos-muted); }
.dos-explainer a { color: var(--dos-claret); font-weight: 600; }
.dos-reserve-bar { margin: 26px 0 0; background: var(--dos-surface); border: 1px solid var(--dos-line-strong); border-radius: var(--dos-r-lg); padding: 16px 20px; display: flex; align-items: center; gap: 18px; box-shadow: var(--dos-shadow-lg); }
.dos-rb-info { flex: 1; display: flex; flex-direction: column; }
.dos-rb-fee { font-family: var(--dos-serif); font-size: 26px; }
.dos-rb-note { font-size: 12.5px; color: var(--dos-muted); }

/* Forms: request-access + login */
.dos-card-panel { max-width: 600px; margin: 0 auto; background: var(--dos-surface); border: 1px solid var(--dos-line); border-radius: var(--dos-r-lg); box-shadow: var(--dos-shadow-lg); overflow: hidden; }
.dos-cp-head { padding: 24px 30px; background: linear-gradient(150deg, var(--dos-surface-2), var(--dos-surface)); border-bottom: 1px solid var(--dos-line); }
.dos-cp-head h3 { font-family: var(--dos-serif); font-size: 28px; margin: 0; }
.dos-cp-head p { color: var(--dos-muted); font-size: 14px; margin: 6px 0 0; }
.dos-cp-body { padding: 26px 30px; }
/* [2026-10-09 · Claude · 0.4.11] Centred confirmation panels, and the show-password eye. */
.dos-cp-center { text-align: center; }
/* [2026-10-09 · Claude · 0.4.13] .dos-prose has max-width + margin 0, so centred text sat in a left-hung block. */
.dos-cp-center .dos-prose { margin-inline: auto; }
.dos-pw-wrap { position: relative; display: block; }
.dos-pw-wrap input { padding-right: 48px !important; width: 100%; box-sizing: border-box; }
.dos .dos-pw-eye, .dos-pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dos-muted, #8b7c76); cursor: pointer; }
.dos .dos-pw-eye:hover, .dos .dos-pw-eye:focus-visible, .dos-pw-eye:hover, .dos-pw-eye:focus-visible { background: var(--dos-surface-2, #f5ece7); color: var(--dos-ink, #2a211e); outline: none; }
.dos-pw-eye svg { width: 20px; height: 20px; }
.dos-field { margin: 15px 0; }
.dos-field label { font-size: 12.5px; font-weight: 700; color: var(--dos-ink-soft); display: block; margin-bottom: 7px; }
.dos-input { width: 100%; padding: 12px 15px; border-radius: var(--dos-r-sm); border: 1px solid var(--dos-line-strong); background: var(--dos-bg); color: var(--dos-ink); font-family: inherit; font-size: 15px; }
.dos-input:focus { outline: none; border-color: var(--dos-rose); box-shadow: 0 0 0 3px rgba(201,138,133,.24); }
textarea.dos-input { resize: vertical; min-height: 80px; }
.dos-login #dos-loginform label, .dos-login .login-username, .dos-login .login-password { display: block; font-size: 12.5px; font-weight: 700; color: var(--dos-ink-soft); margin: 15px 0 7px; }
.dos-login #dos-loginform input[type="text"], .dos-login #dos-loginform input[type="password"] { width: 100%; padding: 12px 15px; border-radius: var(--dos-r-sm); border: 1px solid var(--dos-line-strong); background: var(--dos-bg); color: var(--dos-ink); font-size: 15px; }
.dos-login #dos-loginform .button, .dos-login #dos-loginform input[type="submit"] { margin-top: 18px; width: 100%; padding: 12px 22px; border-radius: var(--dos-btn-r); border: none; background: var(--dos-claret); color: var(--dos-on-claret); font-weight: 600; font-size: 14px; cursor: pointer; }
.dos-login .login-remember { font-weight: 400 !important; margin-top: 12px !important; }
.dos-login-error { background: var(--dos-hold-bg); color: var(--dos-hold); border-radius: var(--dos-r-sm); padding: 12px 15px; font-size: 14px; margin-bottom: 8px; }
.dos-login-lost { margin-top: 16px; font-size: 13.5px; }
.dos-login-lost a { color: var(--dos-claret); font-weight: 600; }

@media (max-width: 900px) {
	.dos-teaser-body, .dos-profile { grid-template-columns: 1fr; }
	.dos-filters, .dos-gallery { position: static; }
	.dos-specs { grid-template-columns: 1fr; }
	.dos-locked-row { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------- *
 *  v0.3.5 — theme-bleed hardening + count-hero spacing                        *
 *                                                                             *
 *  These rules are scoped under `.dos` (specificity 0,2,0) so they win over a *
 *  host theme / Elementor kit's global `a` and `button` styling regardless of *
 *  stylesheet load order. Without this, the theme leaks in three ways:        *
 *   - link-buttons (.dos-btn is an <a>) inherit the theme's underline, and    *
 *     :hover recolours the TEXT instead of the button background;             *
 *   - filter chips (.dos-chip is a <button> in the teaser, an <a> in the      *
 *     server-filtered grid) inherit the theme's dark                          *
 *     button:hover background → dark text on a dark chip, near-invisible;     *
 *   - the big serif count sat on line-height:.9, so Cormorant's old-style "9" *
 *     descender collided with the caption below it.                           *
 * -------------------------------------------------------------------------- */

/* Link-buttons never underline (any state). !important only on decoration —
   a button must not be underlined no matter what the theme asserts. */
.dos .dos-btn,
.dos a.dos-btn:hover,
.dos a.dos-btn:focus,
.dos a.dos-btn:active { text-decoration: none !important; }

/* Primary/ghost buttons: pin the colours so :hover moves the BACKGROUND, not
   the text colour (the theme's a:hover colour rule was winning before). */
.dos .dos-btn-primary,
.dos .dos-btn-primary:hover,
.dos .dos-btn-primary:focus { color: var(--dos-on-claret); background: var(--dos-claret); }
.dos .dos-btn-primary:hover,
.dos .dos-btn-primary:focus { background: var(--dos-claret-hover); }
.dos .dos-btn-ghost,
.dos .dos-btn-ghost:hover,
.dos .dos-btn-ghost:focus { color: var(--dos-ink); background: var(--dos-surface); }
.dos .dos-btn-ghost:hover,
.dos .dos-btn-ghost:focus { border-color: var(--dos-rose); }

/* Filter chips: give hover an explicit light background + readable ink so the
   theme's dark button:hover can't take over. Active ("on") chip stays claret. */
.dos .dos-chip { background: var(--dos-surface-2); color: var(--dos-muted); }
.dos .dos-chip:hover { background: var(--dos-surface-3); color: var(--dos-ink); border-color: var(--dos-line-strong); }
.dos .dos-chip.on,
.dos .dos-chip.on:hover,
.dos .dos-chip.on:focus { background: var(--dos-claret); color: var(--dos-on-claret); border-color: transparent; }

/* [2026-08-28 · Claude] "Clear all filters" vanished on hover.
   WHY: hello-elementor/assets/css/reset.css ships bare-element rules —
     button:hover { background-color:#c36; color:#fff }
     a:hover      { color:#336 }
   .dos-clear is a <button> in the teaser and an <a> in the server-filtered
   grid, and the v0.3.5 rule below only reset the BACKGROUND. So the teaser
   button kept the theme's white text with our transparent background =
   white-on-white, invisible; the grid link went navy #336, off-brand.
   Colour has to be pinned in every state, on both tags. Measured, not
   guessed: reset.css was the only foreign :hover rule matching either. */
.dos .dos-clear,
.dos a.dos-clear,
.dos button.dos-clear { color: var(--dos-claret); background: none; }
.dos .dos-clear:hover,
.dos .dos-clear:focus,
.dos .dos-clear:active { color: var(--dos-claret-hover); background: none; text-decoration: underline; }

/* [2026-08-28 · Claude] Same reset.css bleed, two more places it lands.
   .dos-card is an <a> carrying `color:inherit` (0,1,0), which LOSES to
   a:hover (0,1,1) — so hovering a donor card recoloured the name and meta
   line navy. .dos-thumb is a <button>, so button:hover painted a hot-pink
   #c36 box behind the gallery thumbnail. Both pin their own colours now. */
.dos .dos-card,
.dos .dos-card:hover,
.dos .dos-card:focus { color: var(--dos-ink); }
.dos .dos-thumb,
.dos .dos-thumb:hover,
.dos .dos-thumb:focus { background: none; }

/* Count hero: clear the descender/caption collision. */
.dos .dos-count-big { line-height: 1; padding-bottom: .04em; }
.dos .dos-count-cap { margin-top: 14px; }

/* [2026-09-15 · Claude · stripe-hold Phase B] Reserve outcome notice.
   WHY here and not inline: the reserve bar sits inside the gated profile, which the
   hello-elementor reset.css already fights over (see the hover-bleed gotcha). Explicit colours
   on both tones, so nothing is inherited from the theme. */
.dos-reserve-notice {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.45;
	border: 1px solid;
}
.dos-reserve-notice-ok {
	background: #F2F8F3;
	border-color: #CBE3D0;
	color: #23502F;
}
.dos-reserve-notice-warn {
	background: #FDF4F2;
	border-color: #F0D5CD;
	color: #8E2F3B;
}

/* [2026-09-16 · Claude · stripe-hold] On-page Stripe checkout.
   The mount is Stripe's own iframe, so nothing inside it is ours to style — these rules only
   frame it. min-height stops the card layout jumping as the iframe resizes itself. */
.dos-checkout-wrap {
	border: 1px solid var(--dos-line, #E8DBD3);
	border-radius: var(--dos-radius, 14px);
	padding: 18px;
	margin-top: 8px;
	background: var(--dos-surface, #FBF7F4);
}
.dos-checkout-head h3 {
	margin: 0 0 6px;
	font-size: 18px;
}
.dos-checkout-head .description {
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--dos-ink, #2A211E);
	opacity: .8;
}
.dos-checkout-timer {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--dos-accent, #8E2F3B);
}
.dos-checkout-mount {
	min-height: 320px;
}
.dos-checkout-loading {
	margin: 0;
	padding: 24px 0;
	text-align: center;
	font-size: 14px;
	opacity: .7;
}
.dos-checkout-secure {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	opacity: .7;
}