/*
 * HR Blizz Support and Escalations page
 * Scoped styles — only loaded on page-hrblizz-support-escalations.php
 *
 * The page markup carries the reference export's inline styles verbatim, so
 * this file holds: the design tokens, the global keyframes, the hover /
 * focus states the export expressed through `style-hover`, the layout shell,
 * and the dark-mode overrides for the surrounding theme.
 */

/* ------------------------------------------------------------------
   Global keyframes (unscoped by necessity)
   ------------------------------------------------------------------ */
@keyframes hbs-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0,122,164,.35); }
	100% { box-shadow: 0 0 0 10px rgba(0,122,164,0); }
}
@keyframes hbs-tab-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes hbs-value-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}

/* ------------------------------------------------------------------
   Design tokens — the full Mercans design system, as in the reference
   ------------------------------------------------------------------ */
#hrblizz-support {
	/* Brand palette */
	--mc-dark-blue: #007AA4;
	--mc-shadow-blue: #002F3F;
	--mc-lightest-gray: #EEF3F5;
	--mc-light-gray: #A7B1B6;
	--mc-dark-gray: #616C72;
	--mc-orange-600: #FF5C00;
	--mc-orange-400: #FF9900;
	--mc-teal-bright: #28B7B7;
	--mc-teal-mid: #1497BA;
	--mc-white: #FFFFFF;
	--mc-black: #000000;

	/* Gradients */
	--mc-orange-gradient: linear-gradient(79.07deg, #FF5C00 2.07%, #F90 97.77%);
	--mc-blue-gradient: linear-gradient(180deg, #28B7B7 4.01%, #1497BA 48.94%, #007AA4 97.81%);
	--mc-gradient-rule: linear-gradient(to right, #FF9900, #007AA4, #28B7B7);

	/* Semantic roles */
	--mc-fg: #002F3F;
	--mc-fg-muted: #5A6F78;
	--mc-fg-invert: var(--mc-white);
	--mc-bg: #FFFFFF;
	--mc-bg-tint: var(--mc-lightest-gray);
	--mc-bg-deep: var(--mc-shadow-blue);
	--mc-border: #EAEEF0;
	--mc-accent: var(--mc-dark-blue);
	--mc-accent-warm: var(--mc-orange-600);

	/* Type families */
	--ff-display: 'Raleway', sans-serif;
	--ff-body: 'Open Sans', sans-serif;
	--ff-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

	/* Spacing scale */
	--mc-space-1: 4px;   --mc-space-2: 8px;   --mc-space-3: 12px;
	--mc-space-4: 16px;  --mc-space-5: 20px;  --mc-space-6: 24px;
	--mc-space-8: 32px;  --mc-space-10: 40px; --mc-space-12: 48px;
	--mc-space-15: 60px; --mc-space-20: 80px; --mc-space-24: 96px;
	--mc-space-32: 128px;--mc-space-40: 160px;--mc-space-48: 192px;

	/* Radii */
	--mc-radius-sm: 6px;
	--mc-radius-md: 8px;
	--mc-radius-lg: 16px;
	--mc-radius-pill: 999px;

	/* Shadows */
	--mc-shadow-card: 0px 4px 12px rgba(0, 0, 0, 0.15);
	--mc-shadow-dropdown: 0px 8px 16px rgba(0, 0, 0, 0.2);
	--mc-shadow-modal: 0 0 65px rgba(0, 0, 0, 0.5);
	--sh-1: 0 1px 2px rgba(0,47,63,0.04), 0 1px 1px rgba(0,47,63,0.03);
	--sh-2: 0 2px 4px rgba(0,47,63,0.05), 0 4px 8px rgba(0,47,63,0.04);
	--sh-3: 0 4px 8px rgba(0,47,63,0.06), 0 8px 20px rgba(0,47,63,0.06);
	--sh-4: 0 8px 16px rgba(0,47,63,0.07), 0 16px 36px rgba(0,47,63,0.08);
	--sh-5: 0 12px 24px rgba(0,47,63,0.08), 0 30px 60px rgba(0,47,63,0.10);

	/* Buttons */
	--mc-btn-radius: 8px;
	--mc-btn-height: 40px;
	--mc-btn-height-lg: 48px;
	--mc-btn-min-width: 115px;
	--mc-btn-min-width-lg: 264px;
	--mc-btn-size: 16px;
	--mc-btn-weight: 600;

	display: block;
	font-family: var(--ff-body);
	color: var(--mc-fg);
	background: #F6F8F9;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

#hrblizz-support *,
#hrblizz-support *::before,
#hrblizz-support *::after { box-sizing: border-box; }

#hrblizz-support a { color: #007AA4; text-decoration: none; }
#hrblizz-support a:hover { color: #005774; }
#hrblizz-support button { font-family: inherit; }
#hrblizz-support ::selection { background: #B0D6E3; }

/* The theme wraps every page in #client-hub with a plain white background.
   Tint that wrapper on this template so the white cards have contrast edge
   to edge. Only background-color is touched, so the theme's dark-mode
   background image on #client-hub is left intact. */
body.page-template-page-hrblizz-support-escalations-php #client-hub {
	background-color: #F6F8F9;
}

/* ------------------------------------------------------------------
   Layout shell — the reference's max-width:1120px content column
   ------------------------------------------------------------------ */
#hrblizz-support .hbs-shell {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 56px);
}
#hrblizz-support .hbs-shell--flush { padding-left: clamp(16px, 4vw, 56px); padding-right: clamp(16px, 4vw, 56px); }

/* ------------------------------------------------------------------
   Shared heading / lede typography (every section repeats these)
   ------------------------------------------------------------------ */
#hrblizz-support .hbs-h2 {
	margin: 10px 0 0;
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #007AA4;
	text-wrap: balance;
}
#hrblizz-support .hbs-lede {
	margin: 16px 0 0;
	max-width: 780px;
	font-size: 17px;
	line-height: 1.65;
	color: #3A5560;
	text-wrap: pretty;
}

/* ------------------------------------------------------------------
   Announcement bar
   ------------------------------------------------------------------ */
#hrblizz-support .hbs-ann-cta {
	transition: background .18s ease, color .18s ease;
}
#hrblizz-support .hbs-ann-cta:hover { background: #007AA4 !important; color: #fff !important; }
#hrblizz-support .hbs-ann-cta svg { transition: transform .2s ease; }
#hrblizz-support .hbs-ann-cta:hover svg { transform: translateX(2px); }

/* ------------------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------------------ */
#hrblizz-support .hbs-crumb a { position: relative; transition: color 200ms ease; }
#hrblizz-support .hbs-crumb a::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -3px;
	height: 1.5px;
	background: #007AA4;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
#hrblizz-support .hbs-crumb a:hover::after { transform: scaleX(1); }
#hrblizz-support .hbs-crumb svg { flex: none; }

/* ------------------------------------------------------------------
   Sticky chips nav + scroll-progress rule
   ------------------------------------------------------------------ */
#hrblizz-support .hbs-chipbar {
	position: sticky;
	top: 0;
	z-index: 30;
	margin-top: 24px;
	background: rgba(246,248,249,.88);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid #EAEEF0;
}
#hrblizz-support .hbs-chipnav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 60px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
#hrblizz-support .hbs-chipnav::-webkit-scrollbar { display: none; }
#hrblizz-support .hbs-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: background .2s, color .2s;
}
#hrblizz-support .hbs-chip:not([aria-current="true"]):hover { background: #EEF3F5 !important; color: #007AA4 !important; }
#hrblizz-support .hbs-chip:focus-visible { outline: 2px solid #007AA4; outline-offset: 2px; }
#hrblizz-support .hbs-progwrap {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	overflow: hidden;
}
#hrblizz-support .hbs-prog {
	height: 100%;
	background: var(--mc-gradient-rule);
	transform-origin: left;
	transform: scaleX(0);
}

/* ------------------------------------------------------------------
   Card hover lift (reference .mc-tile)
   ------------------------------------------------------------------ */
#hrblizz-support .mc-tile {
	transition: transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms cubic-bezier(.2,.7,.2,1);
	will-change: transform;
}
#hrblizz-support .mc-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-4); }

/* ------------------------------------------------------------------
   Priority finder — hover affordances on the wizard answers
   ------------------------------------------------------------------ */
#hrblizz-support .hbs-opt:hover:not([aria-checked="true"]) { border-color: #B0D6E3 !important; background: #F6F8F9 !important; }
#hrblizz-support .hbs-opt:focus-visible { outline: 2px solid #007AA4; outline-offset: 2px; }
#hrblizz-support .hbs-q[data-locked="true"] .hbs-opt { cursor: default; pointer-events: none; }

/* ------------------------------------------------------------------
   Journey tabs — underline hover (reference .mc-tab)
   ------------------------------------------------------------------ */
#hrblizz-support .hbs-jtab { position: relative; }
#hrblizz-support .hbs-jtab::after {
	content: "";
	position: absolute; left: 16px; right: 16px; bottom: -1px;
	height: 3px;
	background: var(--mc-orange-400);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
#hrblizz-support .hbs-jtab[aria-selected="true"]::after { transform: scaleX(1); }
#hrblizz-support .hbs-jtab:hover { color: #007AA4 !important; }
#hrblizz-support .hbs-jtab:focus-visible { outline: 2px solid #007AA4; outline-offset: -2px; }
#hrblizz-support [role="tabpanel"]:not([hidden]) { animation: hbs-tab-fade .35s ease; }

/* ------------------------------------------------------------------
   Priority result — "See what happens next"

   Always rendered (never hidden) so the result panel doesn't jump;
   it switches between an "active" look (brand orange gradient) and
   a muted "disabled" look depending on whether a priority has been
   computed yet, instead of appearing/disappearing.
   ------------------------------------------------------------------ */
#hrblizz-support #hbs-rs-next {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 24px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--mc-orange-gradient);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(255,92,0,.28);
	transition: opacity .25s, box-shadow .25s, transform .2s;
}
#hrblizz-support #hbs-rs-next:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(255,92,0,.34); }
#hrblizz-support #hbs-rs-next:focus-visible { outline: 2px solid #007AA4; outline-offset: 2px; }
#hrblizz-support #hbs-rs-next[aria-disabled="true"] {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
	transform: none;
}

/* ------------------------------------------------------------------
   Payroll cutoff — slider
   ------------------------------------------------------------------ */
#hrblizz-support #hrs:focus-visible { outline: none; }
#hrblizz-support #hbs-hrs-out.is-pulsing { animation: hbs-value-pop .35s ease; display: block; }

/* ------------------------------------------------------------------
   FAQ accordion
   ------------------------------------------------------------------ */
#hrblizz-support .hbs-faq-btn { transition: background-color .2s ease; }
#hrblizz-support .hbs-faq-btn:hover { background: #F6F8F9 !important; }
#hrblizz-support .hbs-faq-btn:focus-visible { outline: 2px solid #007AA4; outline-offset: -2px; }

/* ------------------------------------------------------------------
   Footer — button, footer links, social icon (reference .mc-* rules)
   ------------------------------------------------------------------ */
#hrblizz-support .mc-btn {
	--shadow-base: 0 1px 2px rgba(0,47,63,.08), 0 2px 6px rgba(0,47,63,.06);
	--shadow-hover: 0 6px 14px -4px rgba(0,47,63,.22), 0 12px 28px -10px rgba(0,47,63,.18);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	cursor: pointer;
	font-family: var(--ff-body);
	font-weight: 700;
	letter-spacing: -0.16px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	isolation: isolate;
	box-shadow: var(--shadow-base);
	transition:
		transform 220ms cubic-bezier(.2,.7,.2,1),
		box-shadow 220ms cubic-bezier(.2,.7,.2,1),
		background-color 220ms ease,
		filter 220ms ease;
	will-change: transform;
}
#hrblizz-support .mc-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; border-radius: var(--mc-radius-md); }
#hrblizz-support .mc-btn--md { height: 46px; padding: 0 20px; font-size: 16px; border-radius: var(--mc-radius-md); }
#hrblizz-support .mc-btn--lg { height: 54px; padding: 0 24px; font-size: 18px; border-radius: 12px; }
#hrblizz-support .mc-btn--pill { border-radius: var(--mc-radius-pill); }
#hrblizz-support .mc-btn--primary { background: var(--mc-orange-600); color: #fff; }
#hrblizz-support .mc-btn--primary:hover { background: #D94F00; }
#hrblizz-support .mc-btn--tealPrimary { background: var(--mc-dark-blue); color: #fff; }
#hrblizz-support .mc-btn--tealPrimary:hover { background: #005F80; }
#hrblizz-support .mc-btn--secondary { background: #fff; color: var(--mc-dark-blue); border: 1.5px solid var(--mc-dark-blue); }
#hrblizz-support .mc-btn--onDark { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); box-shadow: none; }

/* Sheen sweep */
#hrblizz-support .mc-btn::before {
	content: "";
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 40%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
	transform: translateX(-160%) skewX(-18deg);
	transition: transform 700ms cubic-bezier(.2,.7,.2,1);
	pointer-events: none;
	z-index: 1;
}
#hrblizz-support .mc-btn > * { position: relative; z-index: 2; }
#hrblizz-support .mc-btn:hover { transform: translateY(-1.5px); box-shadow: var(--shadow-hover); color: #fff; }
#hrblizz-support .mc-btn:hover::before { transform: translateX(420%) skewX(-18deg); }
#hrblizz-support .mc-btn:active { transform: translateY(0); box-shadow: var(--shadow-base); transition-duration: 80ms; }
#hrblizz-support .mc-btn--onDark:hover { box-shadow: none; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); }
#hrblizz-support .mc-btn:focus-visible { outline: 0; box-shadow: var(--shadow-hover), 0 0 0 3px #fff, 0 0 0 5px rgba(0,122,164,.55); }

/* Footer link hover */
#hrblizz-support .mc-foot-link { transition: color 200ms ease, transform 200ms ease; display: inline-block; }
#hrblizz-support .mc-foot-link:hover { color: #fff !important; transform: translateX(2px); }

/* Social icon hover */
#hrblizz-support .mc-soc { transition: background-color 200ms ease, transform 200ms ease; }
#hrblizz-support .mc-soc:hover { background: rgba(255,255,255,.10); transform: translateY(-2px); color: #fff; }

/* Nav link underline hover (design-system utility, kept reachable) */
#hrblizz-support .mc-nav-link { position: relative; transition: color 200ms ease; }
#hrblizz-support .mc-nav-link::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -6px;
	height: 2px;
	background: var(--mc-dark-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
#hrblizz-support .mc-nav-link:hover { color: var(--mc-dark-blue); }
#hrblizz-support .mc-nav-link:hover::after,
#hrblizz-support .mc-nav-link.is-active::after { transform: scaleX(1); }

/* Gradient rule utility */
#hrblizz-support .mc-rule { height: 4px; background: var(--mc-gradient-rule); border: 0; border-radius: 2px; }

/* ------------------------------------------------------------------
   Narrow-viewport tightening
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
	#hrblizz-support > .hbs-shell:first-child { padding-top: 20px; }
	#hrblizz-support .hbs-footer > div { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------------
   Dark mode (the theme toggles a .dark class on an ancestor)

   The page markup carries the reference export's colours as literal
   inline styles (no dark: utility classes), so overriding them from
   here means matching those literal values with attribute selectors
   and winning the cascade with !important — there is no other way to
   beat an inline style from a stylesheet. Every value below is one of
   the small fixed palette the page actually renders (confirmed against
   both the PHP markup and the PRI/TP colour tables in the JS), so this
   stays exhaustive without having to special-case each component.
   ------------------------------------------------------------------ */
.dark #hrblizz-support { background: transparent; color: #fff; }
.dark #hrblizz-support .hbs-chipbar { background: rgba(43,43,43,.9); border-color: #3C3C3C; }
.dark #hrblizz-support .hbs-h2 { color: #4FC3E8; }
.dark #hrblizz-support .hbs-lede { color: #CBD5D9; }
.dark #hrblizz-support .hbs-chip:not([aria-current="true"]) { color: #CBD5D9 !important; }
.dark #hrblizz-support .hbs-chip:not([aria-current="true"]):hover { background: #3C3C3C !important; color: #fff !important; }

/* card / panel backgrounds */
.dark #hrblizz-support [style*="background:#fff"] { background: #2B2B2B !important; }
.dark #hrblizz-support [style*="background: #fff"] { background: #2B2B2B !important; }
.dark #hrblizz-support [style*="background:#F6F8F9"] { background: #242424 !important; }
.dark #hrblizz-support [style*="background:#EEF3F5"] { background: #3A3A3A !important; }
.dark #hrblizz-support [style*="background:#DCE3E6"] { background: #3C3C3C !important; }

/* priority-tint backgrounds (ladder rows, chips, tabs) */
.dark #hrblizz-support [style*="background:#FDECEA"] { background: #3A1E1C !important; }
.dark #hrblizz-support [style*="background:#FFEFE6"] { background: #3A2615 !important; }
.dark #hrblizz-support [style*="background:#FFF5EF"] { background: #3A2615 !important; }
.dark #hrblizz-support [style*="background:#FFF5E6"] { background: #3A2E15 !important; }
.dark #hrblizz-support [style*="background:#E6F2F6"] { background: #15313B !important; }
.dark #hrblizz-support [style*="background:#F0F8FB"] { background: #15313B !important; }
.dark #hrblizz-support [style*="background:#EFF0F1"] { background: #2B2B2B !important; }
.dark #hrblizz-support [style*="background:#F2F8FA"] { background: #1C2B2E !important; }
.dark #hrblizz-support [style*="background: rgb(242, 248, 250)"] { background: #1C2B2E !important; }

/* primary / muted text */
.dark #hrblizz-support [style*="color:#002F3F"] { color: #EAF2F4 !important; }
.dark #hrblizz-support [style*="color:#5A6F78"] { color: #93A3A8 !important; }
.dark #hrblizz-support [style*="color:#3A5560"] { color: #A9BAC0 !important; }
.dark #hrblizz-support [style*="color:#3A2A20"] { color: #E9C9AE !important; }

/* priority ink colours (text that sits on a priority tint) */
.dark #hrblizz-support [style*="color:#A51A12"] { color: #FF9A8F !important; }
.dark #hrblizz-support [style*="color:#B54100"] { color: #FFB07A !important; }
.dark #hrblizz-support [style*="color:#8C5400"] { color: #FFC978 !important; }
.dark #hrblizz-support [style*="color:#005774"] { color: #6FD0F0 !important; }
.dark #hrblizz-support [style*="color:#454D51"] { color: #C7CDD0 !important; }

/* borders */
.dark #hrblizz-support [style*="#EAEEF0"] { border-color: #3C3C3C !important; }
.dark #hrblizz-support [style*="background:#EAEEF0"] { background: #3C3C3C !important; }
.dark #hrblizz-support [style*="#EEF2F4"] { border-color: #3C3C3C !important; }
.dark #hrblizz-support [style*="#E3E9EC"] { border-color: #3C3C3C !important; }
.dark #hrblizz-support [style*="#DCE3E6"] { border-color: #3C3C3C !important; }
.dark #hrblizz-support [style*="border-bottom:1px solid #fff"] { border-bottom-color: #2B2B2B !important; }
.dark #hrblizz-support [style*="#F2B8B3"] { border-color: #5C2E2B !important; }
.dark #hrblizz-support [style*="#F5C2BE"] { border-color: #5C2E2B !important; }
.dark #hrblizz-support [style*="#FFDCC8"] { border-color: #5C4327 !important; }
.dark #hrblizz-support [style*="#FFCCB0"] { border-color: #5C4327 !important; }
.dark #hrblizz-support [style*="#FFDFB0"] { border-color: #5C4327 !important; }
.dark #hrblizz-support [style*="#CFE6EE"] { border-color: #1F4552 !important; }
.dark #hrblizz-support [style*="#B0D6E3"] { border-color: #1F4552 !important; }

/* "Your timeline" journey rail — the vertical connector line between
   steps. It's a child <span> of [data-tl-rail], which JS repositions
   on resize (gridColumn/gridRow) without ever touching this span's own
   style, so the hex stays literal and this needs no rgb() twin. It was
   simply never covered: left as a pale line straight through dark mode. */
.dark #hrblizz-support [style*="background:#E1EAEE"] { background: #3C3C3C !important; }

/* "Your timeline" accordion rows + the payroll-cutoff slider — the brand
   blue/orange text (#007AA4, #C24A00) and body text (#2B3438) used inside
   the accordion items had no dark mapping at all (not just a taint issue),
   and the "at risk" rows' peach background/border (#FFF1E8 / #F7C9AE) and
   the slider's gray fill/thumb border (#A6A6A6 / #DCDCDC) were missed too.
   JS sets .style.order on every .hbs-acc-item and .style.left/.boxShadow
   on the slider thumb/fill, which taints their *own* background/border
   hex into rgb() — see the rgb() twins below — but the <b>/<span> text
   colors are never touched by JS and stay literal hex. */
.dark #hrblizz-support [style*="color:#007AA4"] { color: #4FC3E8 !important; }
.dark #hrblizz-support [style*="color:#C24A00"] { color: #FFB07A !important; }
.dark #hrblizz-support [style*="color:#2B3438"] { color: #D7DEE1 !important; }
.dark #hrblizz-support [style*="background:#FFF1E8"] { background: #3A2615 !important; }
.dark #hrblizz-support [style*="#F7C9AE"] { border-color: #5C4327 !important; }
.dark #hrblizz-support [style*="background:#E8E8E8"] { background: #3C3C3C !important; }
.dark #hrblizz-support [style*="background:#A6A6A6"] { background: #6B6B6B !important; }
.dark #hrblizz-support [style*="#DCDCDC"] { border-color: #3C3C3C !important; }

/* FAQ hover — the light-mode rule above (#F6F8F9) isn't theme-aware, so it
   was painting a light patch over the dark card on hover. */
.dark #hrblizz-support .hbs-faq-btn:hover { background: #333 !important; }

/* ------------------------------------------------------------------
   Same palette again, in rgb() form.

   render() sets most of this page's colour (result panel, ladder rows,
   wizard buttons, journey tabs) via el.style.x =
   '#hex' in JS. The browser re-serialises that back onto the style
   attribute as "rgb(r, g, b)", not the original hex text — confirmed by
   reading #hbs-result's live style attribute — so every hex selector
   above is invisible to anything JS touches unless it has this rgb()
   twin too.
   ------------------------------------------------------------------ */
.dark #hrblizz-support [style*="background: rgb(255, 255, 255)"] { background: #2B2B2B !important; }
.dark #hrblizz-support [style*="background: rgb(246, 248, 249)"] { background: #242424 !important; }
.dark #hrblizz-support [style*="background: rgb(238, 243, 245)"] { background: #3A3A3A !important; }
.dark #hrblizz-support [style*="background: rgb(220, 227, 230)"] { background: #3C3C3C !important; }
.dark #hrblizz-support [style*="background: rgb(253, 236, 234)"] { background: #3A1E1C !important; }
.dark #hrblizz-support [style*="background: rgb(255, 239, 230)"] { background: #3A2615 !important; }
.dark #hrblizz-support [style*="background: rgb(255, 245, 239)"] { background: #3A2615 !important; }
.dark #hrblizz-support [style*="background: rgb(255, 245, 230)"] { background: #3A2E15 !important; }
.dark #hrblizz-support [style*="background: rgb(230, 242, 246)"] { background: #15313B !important; }
.dark #hrblizz-support [style*="background: rgb(240, 248, 251)"] { background: #15313B !important; }
.dark #hrblizz-support [style*="background: rgb(239, 240, 241)"] { background: #2B2B2B !important; }
.dark #hrblizz-support [style*="background: rgb(234, 238, 240)"] { background: #3C3C3C !important; }

.dark #hrblizz-support [style*="color: rgb(0, 47, 63)"] { color: #EAF2F4 !important; }
.dark #hrblizz-support [style*="color: rgb(90, 111, 120)"] { color: #93A3A8 !important; }
.dark #hrblizz-support [style*="color: rgb(58, 85, 96)"] { color: #A9BAC0 !important; }
.dark #hrblizz-support [style*="color: rgb(58, 42, 32)"] { color: #E9C9AE !important; }
.dark #hrblizz-support [style*="color: rgb(165, 26, 18)"] { color: #FF9A8F !important; }
.dark #hrblizz-support [style*="color: rgb(181, 65, 0)"] { color: #FFB07A !important; }
.dark #hrblizz-support [style*="color: rgb(140, 84, 0)"] { color: #FFC978 !important; }
.dark #hrblizz-support [style*="color: rgb(0, 87, 116)"] { color: #6FD0F0 !important; }
.dark #hrblizz-support [style*="color: rgb(69, 77, 81)"] { color: #C7CDD0 !important; }

.dark #hrblizz-support [style*="rgb(220, 227, 230)"] { border-color: #3C3C3C !important; }
.dark #hrblizz-support [style*="rgb(234, 238, 240)"] { border-color: #3C3C3C !important; }
.dark #hrblizz-support [style*="rgb(255, 204, 176)"] { border-color: #5C4327 !important; }
.dark #hrblizz-support [style*="rgb(176, 214, 227)"] { border-color: #1F4552 !important; }
.dark #hrblizz-support [style*="rgb(245, 194, 190)"] { border-color: #5C2E2B !important; }
.dark #hrblizz-support [style*="background: rgb(255, 241, 232)"] { background: #3A2615 !important; }
.dark #hrblizz-support [style*="rgb(247, 201, 174)"] { border-color: #5C4327 !important; }
.dark #hrblizz-support [style*="background: rgb(166, 166, 166)"] { background: #6B6B6B !important; }
.dark #hrblizz-support [style*="rgb(220, 220, 220)"] { border-color: #3C3C3C !important; }

/* ------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	#hrblizz-support * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	#hrblizz-support .mc-tile:hover { transform: none; }
	#hrblizz-support .mc-btn:hover { transform: none; }
	#hrblizz-support .mc-btn::before { display: none; }
}