/* ===========================================================================
 * MY PROFILE — the eahm- layer                                   Hub v3.44.0
 * ---------------------------------------------------------------------------
 * Every style for the home panel of My profile: the identity card's
 * additions, the Next-step panel, the six-section grid, the walk timeline
 * and the quick-access chips. Loaded by functions.php straight after
 * eahp-profile.css and reads ONLY that sheet's --eahp-* tokens plus the
 * site's --color-accent pair, so light and dark flip by themselves. There is
 * no hex here; the one literal colour is the black cover scrim, which is the
 * same in both modes by design.
 *
 * Every rule is prefixed with .eahm (0,2,0) on purpose: the shell styles
 * `.prof-content-section h2/h3/p` at (0,1,1), and an unprefixed .eahm-sh__t
 * would lose to it.
 *
 * Rhythm, three steps and nothing else: 24px between titled sections, 16px
 * between peer blocks, 12px binding a heading to its own content.
 * ========================================================================= */

/* ------------------------------------------------------------- wrapper -- */
.eahm {
	max-width: none; margin: 0; padding: 0;
	font-family: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--eahp-body);
}
.eahm *, .eahm *::before, .eahm *::after { box-sizing: border-box; }
.eahm img, .eahm svg { max-width: 100%; }

/* Icons: one sprite in the orchestrator, geometry only. Stroke, width and
   caps live here so every <use> inherits them. Size by font-size. */
.eahm .eahm-ic {
	fill: none; stroke: currentColor; stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round;
	width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: middle;
}

/* ---------------------------------------------------------------- hero -- */
.eahm .eahp-avatar--lg { width: 76px; height: 76px; font-size: 24px; }
.eahm .eahp-hero-cover { overflow: hidden; }

/* Bottom scrim so the cover button and the name row read over any photo.
   Opacity 0 on the plain stage (no photo): a dark wash on a cream surface is
   the one place this would look wrong. */
.eahm .eahm-cover__scrim {
	position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
	pointer-events: none; opacity: 0;
	background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0));
	transition: opacity var(--eahp-d-hover) var(--eahp-ease);
}
.eahm .eahp-hero-cover.has-cover .eahm-cover__scrim { opacity: 1; }

/* Camera badge on the avatar. A sibling of the button (see hero.php). */
.eahm .eahm-avcam {
	position: absolute; right: 0; bottom: 0; width: 26px; height: 26px;
	border-radius: 50%; display: grid; place-items: center; font-size: 14px;
	background: var(--eahp-acc); color: var(--eahp-onacc);
	box-shadow: 0 0 0 3px var(--eahp-card);
}

/* One line of facts under the badges. */
.eahm .eahm-facts {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
	margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--eahp-muted);
}
.eahm .eahm-facts__i { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.eahm .eahm-facts__i b { font-weight: 600; color: var(--eahp-body); }
.eahm .eahm-facts__i .eahm-ic { font-size: 14px; color: var(--eahp-acc); }
.eahm .eahm-facts__sep { color: var(--eahp-muted); }
.eahm .eahp-badge .eahm-ic { font-size: 12px; }

/* The avatar alone overlaps the cover by 32px. It is top-aligned so the
   overlap is fixed, while the text block stays bottom-aligned beside its
   lower half; wrapped onto its own line (phones) the text starts straight
   after the avatar's 44 visible pixels, with no dead space. */
.eahm .eahp-card .eahp-ring { margin-top: calc(var(--eahp-s5) * -1); align-self: flex-start; }
.eahm .eahm-hero__row { min-width: 0; }
/* The one primary action in the hero sits at the end of the identity row. */
.eahm .eahm-hero__edit { margin-left: auto; }

/* ---------------------------------------------------------------- grid -- */
/* Two BALANCED columns, not a two-column grid. A grid row is as tall as its
   tallest card, so a short card (Your rhythm) stretched into a mostly empty
   box beside Today. Multicol lets each card keep its own height and fills the
   two columns to roughly equal length; reading order stays the DOM order,
   down the first column then the second. The 16px between cards is carried
   by each card's bottom margin, and the column box gives it back at the end
   so the next block still sits exactly 24px below the last card. */
.eahm .eahm-grid { columns: 2; column-gap: 16px; margin-top: 24px; margin-bottom: -16px; }
.eahm .eahm-grid > .eahm-sec { break-inside: avoid; page-break-inside: avoid; margin-bottom: 16px; display: block; }
.eahm .eahm-sec {
	background: var(--eahp-card); border: 1px solid var(--eahp-line);
	border-radius: 16px; padding: 18px 20px; min-width: 0;
}
.eahm .eahm-sec--wide { grid-column: 1 / -1; }
/* Sections outside the grid (walk, quick) are titled blocks: 24px. */
.eahm > .eahm-sec { margin-top: 24px; }

/* ------------------------------------------------------ section header -- */
.eahm .eahm-sh { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.eahm .eahm-sh > div { flex: 1 1 auto; min-width: 0; }
.eahm .eahm-sh__t {
	margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25;
	letter-spacing: -.01em; color: var(--eahp-ink);
}
.eahm .eahm-sh__s { margin: 1px 0 0; font-size: 12px; line-height: 1.4; color: var(--eahp-muted); }
.eahm .eahm-sh__tail {
	margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 3px;
	min-height: 32px; padding: 0 2px; border-radius: 8px;
	font-size: 12px; font-weight: 600; color: var(--eahp-acc); text-decoration: none;
	white-space: nowrap;
}
.eahm .eahm-sh__tail .eahm-ic { font-size: 14px; }
.eahm .eahm-sh__tail:hover { color: var(--eahp-acc-hover); }
.eahm .eahm-chip {
	flex: none; width: 36px; height: 36px; border-radius: 10px; font-size: 18px;
	display: grid; place-items: center;
	background: color-mix(in srgb, var(--eahp-acc) 11%, transparent); color: var(--eahp-acc);
}
.eahm .eahm-chip--lg { width: 42px; height: 42px; border-radius: 12px; font-size: 20px; }

/* ----------------------------------------------------------------- row -- */
.eahm .eahm-row {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 12px 0; border-bottom: 1px solid var(--eahp-line2);
}
.eahm .eahm-row:first-child, .eahm .eahm-sh + .eahm-row { padding-top: 0; }
.eahm .eahm-row:last-child { border-bottom: 0; padding-bottom: 0; }
.eahm .eahm-row__ic {
	flex: none; width: 32px; height: 32px; border-radius: 9px; font-size: 17px;
	display: grid; place-items: center;
	background: var(--eahp-stage); color: var(--eahp-acc);
}
.eahm .eahm-row__ic--warn { color: var(--eahp-warn); }
.eahm .eahm-row__ic--dang { color: var(--eahp-dang); }
.eahm .eahm-row__tx { flex: 1 1 auto; min-width: 0; }
.eahm .eahm-row__tx b {
	display: block; font-size: 13px; font-weight: 600; line-height: 1.35;
	color: var(--eahp-ink); overflow-wrap: anywhere;
}
.eahm .eahm-row__tx span {
	display: block; margin-top: 2px; font-size: 12px; line-height: 1.4;
	color: var(--eahp-muted); overflow-wrap: anywhere;
}
.eahm .eahm-go {
	flex: none; align-self: center; display: inline-flex; align-items: center; gap: 2px;
	min-height: 32px; padding: 0 4px; border-radius: 8px;
	font-size: 12.5px; font-weight: 600; color: var(--eahp-acc); text-decoration: none;
	white-space: nowrap; background: none; border: 0; cursor: pointer; font-family: inherit;
}
.eahm .eahm-go .eahm-ic { font-size: 14px; }
.eahm .eahm-go:hover { color: var(--eahp-acc-hover); }

/* ------------------------------------------------------------ progress -- */
.eahm .eahm-prog { height: 5px; border-radius: 99px; background: var(--eahp-line2); overflow: hidden; }
.eahm .eahm-prog i {
	display: block; height: 100%; width: 0; border-radius: inherit;
	background: var(--eahp-acc);
	transition: width var(--eahp-d-fill) var(--eahp-ease);
}
.eahm .eahm-prog--amber i { background: var(--eahp-warn); }

/* -------------------------------------------------------- rhythm tiles -- */
.eahm .eahm-rh { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.eahm .eahm-rt {
	position: relative; min-width: 0; text-align: center;
	background: var(--eahp-stage); border-radius: 12px; padding: 12px 10px 11px;
}
.eahm .eahm-rt__ic {
	display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
	margin-bottom: 6px; font-size: 14px; color: var(--eahp-acc);
	background: color-mix(in srgb, var(--eahp-acc) 11%, transparent);
}
.eahm .eahm-rt b {
	display: block; font-size: 20px; font-weight: 600; line-height: 1.1;
	letter-spacing: -.02em; color: var(--eahp-ink); font-variant-numeric: tabular-nums;
}
.eahm .eahm-rt b small { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--eahp-muted); }
.eahm .eahm-rt > span:not(.eahp-sr) { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--eahp-muted); }

/* ----------------------------------------------------------- next step -- */
.eahm .eahm-next {
	margin-top: 0; overflow: hidden;
	background: var(--eahp-card); border: 1px solid var(--eahp-line); border-radius: 16px;
}
.eahm .eahm-next__top { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.eahm .eahm-next__tx { flex: 1 1 auto; min-width: 0; }
.eahm .eahm-next__h {
	margin: 2px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.3;
	letter-spacing: -.01em; color: var(--eahp-ink); overflow-wrap: anywhere;
}
.eahm .eahm-next__s { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--eahp-muted); }
.eahm .eahm-next__cta { flex: none; }
.eahm .eahm-next__d { border-top: 1px solid var(--eahp-line2); }
.eahm .eahm-next__foot {
	display: flex; align-items: center; gap: 16px; padding: 11px 20px;
	background: var(--eahp-stage); cursor: pointer; list-style: none; font-size: 12.5px;
}
.eahm .eahm-next__foot::-webkit-details-marker { display: none; }
.eahm .eahm-next__foot::marker { content: ""; }
.eahm .eahm-next__foot:focus-visible { outline: 2px solid var(--eahp-acc); outline-offset: -2px; }
.eahm .eahm-next__pts { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.eahm .eahm-next__pts b { font-size: 13px; font-weight: 600; color: var(--eahp-ink); }
.eahm .eahm-next__pts span { font-size: 11.5px; color: var(--eahp-muted); }
.eahm .eahm-next__trust { flex: none; }
/* The badge sits on the stage surface here, not the card. Its tint is mixed
   from the CARD colour so the tone-on-tint contrast is the one measured for
   eahp-profile.css (>=4.5) on every surface; on the stage it read 4.4. */
.eahm .eahm-next__trust { background: color-mix(in srgb, currentColor 12%, var(--eahp-card)); }
.eahm .eahm-disc {
	margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 2px;
	min-height: 32px; padding: 0 4px; border-radius: 8px;
	font-size: 12.5px; font-weight: 600; color: var(--eahp-acc);
}
.eahm .eahm-disc .eahm-ic { font-size: 14px; transition: transform var(--eahp-d-toggle) var(--eahp-ease); }
.eahm .eahm-next__d[open] .eahm-disc .eahm-ic { transform: rotate(90deg); }
.eahm .eahm-next__body {
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
	padding: 16px 20px; border-top: 1px solid var(--eahp-line2);
}
.eahm .eahm-sub { min-width: 0; background: var(--eahp-stage); border-radius: 12px; padding: 12px 14px; }
.eahm .eahm-sub .eahm-eye { margin-bottom: 8px; }
.eahm .eahm-sub__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 6px 0; }
.eahm .eahm-sub__row .eahm-prog { grid-column: 1 / -1; }
.eahm .eahm-sub__l { font-size: 12.5px; font-weight: 500; color: var(--eahp-body); }
.eahm .eahm-sub__v { font-size: 12px; color: var(--eahp-muted); }
.eahm .eahm-sub__list { list-style: none; margin: 0; padding: 0; }
.eahm .eahm-sub__list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; color: var(--eahp-body); }
.eahm .eahm-sub__list li .eahm-ic { font-size: 15px; color: var(--eahp-warn); }
.eahm .eahm-sub .eahm-go { margin-top: 6px; padding-left: 0; }

/* Mini completion ring: a conic wedge with the card colour punched back in. */
.eahm .eahm-ring {
	--eahm-p: 0%;
	flex: none; width: 36px; height: 36px; border-radius: 50%;
	display: grid; place-items: center;
	background: conic-gradient(var(--eahp-acc) var(--eahm-p), var(--eahp-line2) 0);
}
.eahm .eahm-ring i {
	width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
	background: var(--eahp-card); font-style: normal; font-size: 9.5px; font-weight: 700;
	letter-spacing: -.02em; color: var(--eahp-ink); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- eyebrow -- */
.eahm .eahm-eye {
	display: block; font-size: 10.5px; font-weight: 700; line-height: 1.3;
	letter-spacing: .16em; text-transform: uppercase; color: var(--eahp-muted);
}

/* ------------------------------------------------------------- buttons -- */
.eahm .eahm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 40px; padding: 10px 15px; border-radius: 10px;
	font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
	color: var(--eahp-ink); background: var(--eahp-card); border: 1px solid var(--eahp-line);
	cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background var(--eahp-d-hover) var(--eahp-ease),
	            border-color var(--eahp-d-hover) var(--eahp-ease),
	            box-shadow var(--eahp-d-hover) var(--eahp-ease),
	            transform var(--eahp-d-hover) var(--eahp-ease);
}
.eahm .eahm-btn .eahm-ic { font-size: 15px; }
.eahm .eahm-btn:hover { background: var(--eahp-stage); border-color: var(--eahp-acc-line); }
.eahm .eahm-btn:active { transform: translateY(1px); }
.eahm .eahm-btn:focus-visible, .eahm .eahm-go:focus-visible,
.eahm .eahm-sh__tail:focus-visible, .eahm .eahm-chipbtn:focus-visible,
.eahm .eahm-empty a:focus-visible { outline: 2px solid var(--eahp-acc); outline-offset: 2px; }
.eahm .eahm-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* The site's primary: near-black on light, off-white on dark. Gold stays an
   accent (badges, chips, links, rings) and never fills a primary button. */
.eahm .eahm-btn--primary {
	background: var(--color-accent); color: var(--color-text-on-accent); border-color: transparent;
}
.eahm .eahm-btn--primary:hover {
	background: var(--color-accent-hover, var(--color-accent)); border-color: transparent;
	box-shadow: var(--eahp-sh); transform: translateY(-1px);
}

.eahm .eahm-btn--danger-outline {
	color: var(--eahp-dang); background: var(--eahp-card);
	border-color: color-mix(in srgb, var(--eahp-dang) 35%, transparent);
}
.eahm .eahm-btn--danger-outline:hover {
	background: color-mix(in srgb, var(--eahp-dang) 8%, transparent); border-color: var(--eahp-dang);
}

/* --------------------------------------------------------------- chips -- */
.eahm .eahm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eahm .eahm-chipbtn {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 38px; padding: 9px 14px 9px 11px; border-radius: 999px;
	font-size: 12.5px; font-weight: 600; color: var(--eahp-body);
	background: var(--eahp-card); border: 1px solid var(--eahp-line); text-decoration: none;
	transition: background var(--eahp-d-hover) var(--eahp-ease),
	            border-color var(--eahp-d-hover) var(--eahp-ease),
	            color var(--eahp-d-hover) var(--eahp-ease);
}
.eahm .eahm-chipbtn .eahm-ic { font-size: 16px; color: var(--eahp-acc); }
.eahm .eahm-chipbtn:hover { background: var(--eahp-stage); border-color: var(--eahp-acc-line); color: var(--eahp-ink); }

/* ------------------------------------------------------------- devices -- */
.eahm .eahm-dev {
	display: flex; align-items: center; gap: 10px; margin-top: 10px;
	padding: 10px 12px; border-radius: 12px; background: var(--eahp-stage);
	border: 1px solid transparent;
}
.eahm .eahm-sh + .eahm-dev { margin-top: 0; }
.eahm .eahm-dev--current { border-color: color-mix(in srgb, var(--eahp-ok) 35%, transparent); }
.eahm .eahm-dev__ic {
	flex: none; width: 32px; height: 32px; border-radius: 9px; font-size: 16px;
	display: grid; place-items: center; background: var(--eahp-card); color: var(--eahp-acc);
}
.eahm .eahm-dev__tx { flex: 1 1 auto; min-width: 0; }
.eahm .eahm-dev__tx b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--eahp-ink); }
.eahm .eahm-dev__tx span { display: block; margin-top: 1px; font-size: 11.5px; color: var(--eahp-muted); overflow-wrap: anywhere; }
.eahm .eahm-dev__tag {
	margin-left: auto; flex: none; padding: 4px 9px; border-radius: 999px;
	font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--eahp-ok); background: color-mix(in srgb, var(--eahp-ok) 12%, transparent);
}
.eahm .eahm-dev__act { margin-top: 16px; }

/* ------------------------------------------------------------ timeline -- */
.eahm .eahm-tl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.eahm .eahm-tl__lab {
	display: block; margin: 2px 0 8px; font-size: 10.5px; font-weight: 700; line-height: 1.3;
	letter-spacing: .16em; text-transform: uppercase; color: var(--eahp-muted);
}
.eahm .eahm-tl { position: relative; padding-left: 20px; }
.eahm .eahm-tl::before {
	content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
	border-radius: 2px; background: var(--eahp-line2);
}
.eahm .eahm-tl__it { position: relative; padding: 6px 0 10px; }
.eahm .eahm-tl__it:last-child { padding-bottom: 4px; }
.eahm .eahm-tl__it::before {
	content: ""; position: absolute; left: -20px; top: 10px; width: 12px; height: 12px;
	border-radius: 50%; background: var(--eahp-card); border: 2px solid var(--eahp-acc);
}
.eahm .eahm-tl__it b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--eahp-ink); overflow-wrap: anywhere; }
.eahm .eahm-tl__it span { display: block; margin-top: 2px; font-size: 12px; color: var(--eahp-muted); }
.eahm .eahm-tl__it.is-ahead::before { border-style: dashed; border-color: var(--eahp-muted); }
.eahm .eahm-tl__it.is-ahead b { font-weight: 500; color: var(--eahp-muted); }

/* ------------------------------------------------------- empty · foot -- */
.eahm .eahm-empty {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
	margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--eahp-muted);
}
.eahm .eahm-empty a { font-weight: 600; color: var(--eahp-acc); text-decoration: none; }
.eahm .eahm-empty a:hover { text-decoration: underline; }
.eahm .eahm-empty .eahm-ic { font-size: 14px; color: var(--eahp-ok); }
.eahm .eahm-foot {
	display: flex; align-items: center; gap: 6px; margin: 16px 2px 0;
	font-size: 12px; line-height: 1.5; color: var(--eahp-body);
}
/* Body ink, not muted: this line sits on the SHELL's content surface, which
   in dark mode is a mid grey where muted measured 3.43:1. */
.eahm .eahm-foot .eahm-ic { flex: none; font-size: 13px; }

/* -------------------------------------------------------------- reveal -- */
/* Fails OPEN: the orchestrator's script has three nets, and this sheet adds
   a fourth for a browser with scripting off. */
.eahm .eahm-reveal {
	opacity: 0; transform: translateY(10px);
	transition: opacity 420ms var(--eahp-ease), transform 420ms var(--eahp-ease);
}
.eahm .eahm-reveal.is-in { opacity: 1; transform: none; }
@media (scripting: none) { .eahm .eahm-reveal { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 899px) {
	.eahm .eahm-grid { columns: 1; }
	.eahm .eahm-tl2 { grid-template-columns: 1fr; }
	.eahm .eahm-tl2 > div + div { margin-top: 16px; }
}
@media (max-width: 720px) {
	.eahm .eahm-sec { padding: 16px 14px; }
	.eahm .eahm-hero__edit { margin-left: 0; width: 100%; }
	.eahm .eahm-next__top { flex-wrap: wrap; padding: 14px 16px; }
	.eahm .eahm-next__cta { width: 100%; }
	.eahm .eahm-next__foot { flex-wrap: wrap; gap: 10px 14px; padding: 11px 16px; }
	.eahm .eahm-next__body { grid-template-columns: 1fr; padding: 14px 16px; }
	.eahm .eahm-rh { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
}

/* Touch floor: every control clears 44px where a finger is the pointer. */
@media (pointer: coarse), (max-width: 1024px) {
	.eahm .eahm-btn, .eahm .eahm-go, .eahm .eahm-disc, .eahm .eahm-chipbtn,
	.eahm .eahm-sh__tail, .eahm .eahm-next__foot, .eahm summary { min-height: 44px; }
	.eahm .eahm-go, .eahm .eahm-sh__tail, .eahm .eahm-disc { padding-left: 8px; padding-right: 8px; }
}

/* Reduced motion: no transition anywhere in the layer, final states forced. */
@media (prefers-reduced-motion: reduce) {
	.eahm .eahm-reveal { opacity: 1; transform: none; transition: none; }
	.eahm *, .eahm *::before, .eahm *::after { transition: none !important; animation: none !important; }
	.eahm .eahm-btn--primary:hover, .eahm .eahm-btn:active { transform: none; }
}

/* color-mix() fallback: the washes drop to the stage surface, the tints to
   a solid line, so nothing is ever transparent-on-transparent. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.eahm .eahm-chip, .eahm .eahm-rt__ic, .eahm .eahm-dev__tag { background: var(--eahp-stage); }
	.eahm .eahm-next__trust { background: var(--eahp-card); }
	.eahm .eahm-dev--current { border-color: var(--eahp-ok); }
	.eahm .eahm-btn--danger-outline { border-color: var(--eahp-dang); }
	.eahm .eahm-btn--danger-outline:hover { background: var(--eahp-stage); }
}