/**
 * Earnox tool interface.
 *
 * Scoped under .earnox-tool and self-contained: the custom properties below
 * are declared locally with sensible values so the tools still look correct if
 * the plugin is ever used with a different theme.
 *
 * Tool panels deliberately sit on a light surface. Financial input and long
 * result tables are far easier to read on paper-like backgrounds than on the
 * dark brand surface used elsewhere.
 */

.earnox-tool {
	--et-paper: #ffffff;
	--et-sunk: #f4f7fb;
	--et-line: #dce4ef;
	--et-line-strong: #c3d0e2;
	/* Form-control edges need 3:1 against white (WCAG 1.4.11): 3.37:1 and 5.91:1. */
	--et-field-line: #7c8da8;
	--et-field-line-hover: #55657f;
	--et-ink: #0b1220;
	--et-ink-soft: #334155;
	--et-ink-muted: #55657f;
	--et-accent: #0e7490;
	--et-accent-strong: #0b5566;
	--et-accent-wash: #ecfeff;
	--et-danger: #b91c1c;
	--et-danger-wash: #fef2f2;
	--et-ok: #047857;
	--et-radius: 12px;
	--et-radius-lg: 18px;
	--et-focus: 0 0 0 2px #ffffff, 0 0 0 4px #0e7490;

	/* Paper stays paper: a cyan-lit top edge and a cyan under-light so the
	   panel sits in the dark theme instead of on top of it. */
	background:
		linear-gradient(var(--et-paper), var(--et-paper)) padding-box,
		linear-gradient(180deg, #9be7f5, var(--et-line) 30%) border-box;
	color: var(--et-ink);
	border: 1px solid transparent;
	border-radius: var(--et-radius-lg);
	padding: clamp(1.1rem, 3vw, 2rem);
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.08), 0 32px 64px -32px rgba(14, 116, 144, 0.45);
	font-size: 1rem;
	line-height: 1.55;
}

.earnox-tool *,
.earnox-tool *::before,
.earnox-tool *::after {
	box-sizing: border-box;
}

/* ---------- Heading ---------- */

.earnox-tool__head {
	margin-bottom: 1.35rem;
}

.earnox-tool__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 650;
	letter-spacing: -0.018em;
	color: var(--et-ink);
}

.earnox-tool__intro {
	margin: 0.4rem 0 0;
	color: var(--et-ink-muted);
	font-size: 0.9375rem;
}

/* ---------- Fields ---------- */

.earnox-fieldset {
	border: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	min-width: 0;
}

.earnox-fieldset__legend {
	font-size: 0.78rem;
	font-weight: 680;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--et-ink-muted);
	padding: 0;
	margin-bottom: 0.7rem;
}

.earnox-fieldrow {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.earnox-field {
	display: flex;
	flex-direction: column;
	gap: 0.32rem;
	min-width: 0;
}

.earnox-field__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--et-ink-soft);
}

.earnox-field__required {
	color: var(--et-danger);
	margin-left: 0.15rem;
}

.earnox-field__input,
.earnox-field__select,
.earnox-field__textarea {
	width: 100%;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--et-ink);
	background: var(--et-paper);
	border: 1px solid var(--et-field-line);
	border-radius: var(--et-radius);
	padding: 0.62rem 0.75rem;
	transition: border-color 140ms ease, box-shadow 140ms ease;
	min-width: 0;
}

.earnox-field__textarea {
	min-height: 120px;
	resize: vertical;
}

.earnox-field__input:hover,
.earnox-field__select:hover,
.earnox-field__textarea:hover {
	border-color: var(--et-field-line-hover);
}

/* A transparent outline paints nothing normally, but forced-colors mode
   turns it into a solid system-colour ring, where box-shadow is dropped. */
.earnox-field__input:focus,
.earnox-field__select:focus,
.earnox-field__textarea:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-color: var(--et-accent);
	box-shadow: var(--et-focus);
}

.earnox-field__input[aria-invalid="true"],
.earnox-field__select[aria-invalid="true"],
.earnox-field__textarea[aria-invalid="true"] {
	border-color: var(--et-danger);
	background: var(--et-danger-wash);
}

.earnox-field__hint {
	font-size: 0.8rem;
	color: var(--et-ink-muted);
}

.earnox-field__error {
	font-size: 0.8rem;
	color: var(--et-danger);
	font-weight: 550;
	min-height: 1.1em;
}

.earnox-field__error:empty {
	display: none;
}

/* Numeric inputs read better right-aligned and tabular. */
.earnox-field__input--num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Input with an adornment, e.g. a percent sign or currency code. */
.earnox-inputgroup {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--et-field-line);
	border-radius: var(--et-radius);
	overflow: hidden;
	background: var(--et-paper);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.earnox-inputgroup:hover {
	border-color: var(--et-field-line-hover);
}

.earnox-inputgroup:focus-within {
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-color: var(--et-accent);
	box-shadow: var(--et-focus);
}

.earnox-inputgroup .earnox-field__input {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.earnox-inputgroup .earnox-field__input:focus {
	box-shadow: none;
}

/* The grouped input has no border of its own, so carry its invalid state to
   the group's edge. Engines without :has() keep the inner tint and message. */
.earnox-inputgroup:has(.earnox-field__input[aria-invalid="true"]) {
	border-color: var(--et-danger);
	background: var(--et-danger-wash);
}

.earnox-inputgroup__addon {
	display: inline-flex;
	align-items: center;
	padding: 0 0.7rem;
	background: var(--et-sunk);
	color: var(--et-ink-muted);
	font-size: 0.85rem;
	font-weight: 600;
	border-left: 1px solid var(--et-line);
	white-space: nowrap;
}

.earnox-inputgroup__addon--lead {
	border-left: 0;
	border-right: 1px solid var(--et-line);
}

/* Segmented control, used for add/remove VAT and invoice/quote switching. */
.earnox-segment {
	display: inline-flex;
	padding: 3px;
	gap: 3px;
	background: var(--et-sunk);
	border: 1px solid var(--et-line);
	border-radius: 999px;
}

.earnox-segment__btn {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--et-ink-muted);
	padding: 0.45rem 1rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}

.earnox-segment__btn:hover {
	color: var(--et-ink);
}

/* The accent ring carries the selected state (5.36:1 on the pill, 4.99:1 on
   the track); a white pill alone was 1.07:1 against the track. */
.earnox-segment__btn[aria-pressed="true"] {
	background: var(--et-paper);
	color: var(--et-accent-strong);
	box-shadow: inset 0 0 0 1px var(--et-accent), 0 1px 2px rgba(11, 18, 32, 0.12);
}

.earnox-segment__btn:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--et-focus);
}

/* Keep the selected ring when the pressed segment also has focus. */
.earnox-segment__btn[aria-pressed="true"]:focus-visible {
	box-shadow: inset 0 0 0 1px var(--et-accent), var(--et-focus);
}

@media (forced-colors: active) {
	.earnox-segment__btn[aria-pressed="true"] {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
	}
}

/* ---------- Buttons ---------- */

.earnox-tool__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin-top: 1.25rem;
}

.earnox-action {
	appearance: none;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 640;
	cursor: pointer;
	border-radius: 999px;
	padding: 0.7rem 1.4rem;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 100ms ease;
	text-decoration: none;
}

.earnox-action:active {
	transform: translateY(1px);
}

.earnox-action:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--et-focus);
}

.earnox-action--primary {
	background: var(--et-accent);
	color: #ffffff;
}

/* Action links: beat global-styles' `:root :where(a:focus)` teal (0,1,0),
   which made the focused label 3.6:1 on the button. */
.earnox-action--primary:focus {
	color: #ffffff;
}

.earnox-action--primary:hover {
	background: var(--et-accent-strong);
	color: #ffffff;
}

.earnox-action--secondary {
	background: var(--et-paper);
	color: var(--et-ink-soft);
	border-color: var(--et-line-strong);
}

.earnox-action--secondary:focus {
	color: var(--et-ink-soft);
}

.earnox-action--secondary:hover {
	border-color: var(--et-accent);
	color: var(--et-accent-strong);
}

.earnox-action--quiet {
	background: transparent;
	color: var(--et-ink-muted);
	padding-left: 0.7rem;
	padding-right: 0.7rem;
}

.earnox-action--quiet:hover {
	color: var(--et-danger);
}

.earnox-action[disabled],
.earnox-action[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* ---------- Results ---------- */

.earnox-result {
	margin-top: 1.5rem;
	background: var(--et-sunk);
	border: 1px solid var(--et-line);
	border-radius: var(--et-radius-lg);
	padding: 1.15rem 1.25rem;
}

.earnox-result__title {
	font-size: 0.78rem;
	font-weight: 680;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--et-ink-muted);
	margin: 0 0 0.85rem;
}

.earnox-result__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px dashed var(--et-line);
}

.earnox-result__row:last-child {
	border-bottom: 0;
}

.earnox-result__label {
	color: var(--et-ink-soft);
	font-size: 0.9375rem;
}

.earnox-result__value {
	font-variant-numeric: tabular-nums;
	font-weight: 640;
	font-size: 1rem;
	color: var(--et-ink);
	text-align: right;
}

.earnox-result__row--total {
	margin-top: 0.35rem;
	padding-top: 0.8rem;
	border-top: 2px solid var(--et-line-strong);
	border-bottom: 0;
}

.earnox-result__row--total .earnox-result__label {
	font-weight: 680;
	color: var(--et-ink);
}

.earnox-result__row--total .earnox-result__value {
	font-size: 1.35rem;
	color: var(--et-accent-strong);
	letter-spacing: -0.02em;
}

.earnox-result__row--muted .earnox-result__label,
.earnox-result__row--muted .earnox-result__value {
	color: var(--et-ink-muted);
	font-weight: 500;
}

/* A highlighted single figure, used for headline outputs. */
.earnox-figure {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.9rem 1rem;
	background: var(--et-accent-wash);
	border: 1px solid #a5e8f2;
	border-radius: var(--et-radius);
}

.earnox-figure__label {
	font-size: 0.78rem;
	font-weight: 640;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--et-accent-strong);
}

.earnox-figure__value {
	font-size: 1.6rem;
	font-weight: 680;
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
	color: var(--et-ink);
}

.earnox-figures {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	margin-top: 1rem;
}

/* ---------- Formula and worked example ---------- */

.earnox-formula {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875rem;
	background: #0b1220;
	color: #d8e6f5;
	border-radius: var(--et-radius);
	padding: 0.85rem 1rem;
	overflow-x: auto;
	margin: 0.75rem 0;
	line-height: 1.7;
}

.earnox-formula em {
	color: #5eead4;
	font-style: normal;
}

/* ---------- Notes and callouts ---------- */

.earnox-note {
	font-size: 0.85rem;
	color: var(--et-ink-muted);
	margin-top: 1rem;
}

/* Plain links on the white tool panel would otherwise get the theme's
   dark-surface cyan (1.8:1 on white). #0e7490 is 5.36:1, #0b5566 8.38:1. */
.earnox-tool a:not(.earnox-action) {
	color: var(--et-accent);
}

.earnox-tool a:not(.earnox-action):hover,
.earnox-tool a:not(.earnox-action):focus {
	color: var(--et-accent-strong);
}

.earnox-callout {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 0.85rem 1rem;
	border-radius: var(--et-radius);
	font-size: 0.9rem;
	margin: 1rem 0;
	border: 1px solid;
}

.earnox-callout--info {
	background: #f0f9ff;
	border-color: #bae6fd;
	color: #0c4a6e;
}

.earnox-callout--warn {
	background: #fffbeb;
	border-color: #fde68a;
	color: #78350f;
}

.earnox-callout--limit {
	background: var(--et-sunk);
	border-color: var(--et-line);
	color: var(--et-ink-soft);
}

.earnox-callout__icon {
	flex: 0 0 auto;
	margin-top: 0.1rem;
}

/* ---------- Tables (invoice line items, checker findings) ---------- */

.earnox-tablewrap {
	overflow-x: auto;
	margin: 1rem 0;
	border: 1px solid var(--et-line);
	border-radius: var(--et-radius);
}

.earnox-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	min-width: 560px;
}

.earnox-table th,
.earnox-table td {
	padding: 0.65rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--et-line);
	vertical-align: middle;
}

.earnox-table thead th {
	background: var(--et-sunk);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--et-ink-muted);
	font-weight: 680;
	white-space: nowrap;
}

.earnox-table tbody tr:last-child td {
	border-bottom: 0;
}

.earnox-table td.is-numeric,
.earnox-table th.is-numeric {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.earnox-table .earnox-field__input {
	padding: 0.45rem 0.55rem;
	font-size: 0.875rem;
}

/* ---------- Status messages ---------- */

.earnox-message {
	padding: 0.8rem 1rem;
	border-radius: var(--et-radius);
	font-size: 0.9rem;
	margin-top: 1rem;
	border: 1px solid;
}

.earnox-message--error {
	background: var(--et-danger-wash);
	border-color: #fecaca;
	color: var(--et-danger);
}

.earnox-message--success {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: var(--et-ok);
}

.earnox-message--pending {
	background: var(--et-sunk);
	border-color: var(--et-line);
	color: var(--et-ink-muted);
}

.earnox-message:empty {
	display: none;
}

/* ---------- Busy indicator ---------- */

.earnox-spinner {
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	display: inline-block;
	animation: earnox-spin 620ms linear infinite;
}

@keyframes earnox-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Scan animation ----------
   A dark "terminal" panel while a check runs, deliberately echoing
   .earnox-formula's existing dark/monospace/cyan treatment rather than
   introducing a new palette. Purely decorative (aria-hidden): the one
   accessible announcement is the existing status region the JS also writes
   to, so a screen reader gets one clear message instead of a stream of
   per-step chatter. */

.earnox-scan {
	position: relative;
	margin-top: 1.1rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	overflow: hidden;
	background: #0b1220;
	border: 1px solid rgba(34, 211, 238, 0.18);
	border-radius: var(--et-radius-lg);
	padding: 1.25rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -24px rgba(34, 211, 238, 0.35);
}

/* A same-specificity author rule for display beats the UA [hidden] default,
   so this has to be restated explicitly or the panel never actually leaves
   the layout once JS sets the hidden attribute back on. */
.earnox-scan[hidden] {
	display: none;
}

.earnox-scan::before {
	content: "";
	position: absolute;
	top: -60%;
	right: -10%;
	left: -10%;
	height: 240px;
	background: radial-gradient(closest-side, rgba(94, 234, 212, 0.16), transparent 72%);
	pointer-events: none;
}

.earnox-scan__radar {
	position: relative;
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	border: 1px solid rgba(94, 234, 212, 0.35);
	background:
		repeating-linear-gradient(0deg, rgba(94, 234, 212, 0.09) 0 1px, transparent 1px 11px),
		repeating-linear-gradient(90deg, rgba(94, 234, 212, 0.09) 0 1px, transparent 1px 11px);
	overflow: hidden;
}

.earnox-scan__sweep {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: conic-gradient(from 0deg, rgba(94, 234, 212, 0.65), rgba(94, 234, 212, 0) 30%, transparent 100%);
	animation: earnox-radar-spin 2.6s linear infinite;
}

.earnox-scan__ring {
	position: absolute;
	top: 16px;
	right: 16px;
	bottom: 16px;
	left: 16px;
	border-radius: 50%;
	border: 1px solid rgba(94, 234, 212, 0.3);
	animation: earnox-radar-ping 2.6s ease-out infinite;
}

.earnox-scan__ring--2 {
	animation-delay: 1.3s;
}

.earnox-scan__target {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: #5eead4;
	box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.22), 0 0 14px 2px rgba(94, 234, 212, 0.75);
}

@keyframes earnox-radar-spin {
	to { transform: rotate(360deg); }
}

@keyframes earnox-radar-ping {
	0%   { transform: scale(0.4); opacity: 0.85; }
	100% { transform: scale(1.2); opacity: 0; }
}

.earnox-scan__body {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.earnox-scan__domain {
	margin: 0 0 0.85rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9rem;
	color: #d8e6f5;
	word-break: break-all;
}

.earnox-scan__prompt {
	color: #5eead4;
	margin-right: 0.35rem;
}

.earnox-scan__cursor {
	display: inline-block;
	width: 0.5em;
	height: 1em;
	margin-left: 2px;
	vertical-align: -2px;
	background: #5eead4;
	animation: earnox-cursor-blink 1s step-end infinite;
}

@keyframes earnox-cursor-blink {
	50% { opacity: 0; }
}

.earnox-scan__state {
	margin: 0 0 0.85rem;
	min-height: 1.4em;
	font-size: 0.875rem;
	color: #d8e6f5;
}

/* The groups of checks included in this scan. While the request runs they
   only pulse together ("in progress"); nothing is ticked off until the real
   response arrives, when each shows its real outcome. */
.earnox-scan__groups {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.45rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8125rem;
}

.earnox-scan__group {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.15rem 0.6rem;
	color: #9fb3cc;
}

.earnox-scan__group-dot {
	flex: 0 0 auto;
	align-self: center;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5eead4;
	opacity: 0.35;
}

.earnox-scan__group-name {
	flex: 1 1 auto;
	min-width: 0;
}

.earnox-scan__group-result {
	color: #5eead4;
}

.earnox-scan__group.is-done {
	color: #d8e6f5;
}

.earnox-scan__group.is-done .earnox-scan__group-dot {
	opacity: 1;
}

.earnox-scan__group.has-attention .earnox-scan__group-dot {
	background: #fbbf24;
}

.earnox-scan__group.has-attention .earnox-scan__group-result {
	color: #fcd34d;
}

.earnox-scan__group.has-unavailable .earnox-scan__group-dot {
	background: #a1a1aa;
}

.earnox-scan__group.has-unavailable .earnox-scan__group-result {
	color: #d4d4d8;
}

/* Indeterminate meter: the request is running, with no claim of how far
   along it is. It fills only once the real response is in. */
.earnox-scan__meter {
	position: relative;
	height: 4px;
	border-radius: 999px;
	background: rgba(216, 230, 245, 0.12);
	overflow: hidden;
}

.earnox-scan__meter-glide {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 34%;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(34, 211, 238, 0), #22d3ee 40%, #5eead4 70%, rgba(94, 234, 212, 0));
	transform: translateX(-100%);
	animation: earnox-glide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.earnox-scan.is-settled .earnox-scan__meter-glide {
	width: 100%;
	transform: none;
	animation: none;
	background: linear-gradient(90deg, #22d3ee, #5eead4);
}

@keyframes earnox-glide {
	from { transform: translateX(-100%); }
	to   { transform: translateX(300%); }
}

.earnox-scan__elapsed {
	margin: 0.6rem 0 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.75rem;
	color: #8aa0bd;
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
	.earnox-scan__group:not(.is-done) .earnox-scan__group-dot {
		animation: earnox-dot-pulse 1.4s ease-in-out infinite;
		animation-delay: calc(var(--i, 0) * 180ms);
	}

	.earnox-scan__group.is-done .earnox-scan__group-result {
		animation: earnox-fade 320ms ease-out backwards;
		animation-delay: calc(var(--i, 0) * 90ms);
	}
}

@keyframes earnox-dot-pulse {
	0%, 100% { opacity: 0.25; }
	50%      { opacity: 1; }
}

@keyframes earnox-fade {
	from { opacity: 0; }
}

@media (max-width: 560px) {
	.earnox-scan {
		flex-direction: column;
		align-items: stretch;
	}

	.earnox-scan__radar {
		margin: 0 auto;
	}
}

/* ---------- Checker state chips ---------- */

/* Reuse the theme's state chips, but declare them here too so the plugin does
   not depend on the theme being active. */
.earnox-tool .earnox-state {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 680;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.28rem 0.65rem;
	border-radius: 999px;
	white-space: nowrap;
}

.earnox-tool .earnox-state::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.earnox-tool .earnox-state--pass        { color: #047857; background: #d1fae5; }
.earnox-tool .earnox-state--attention   { color: #92400e; background: #fef3c7; }
.earnox-tool .earnox-state--problem     { color: #9f1239; background: #ffe4e6; }
.earnox-tool .earnox-state--na          { color: #475569; background: #e2e8f0; }
.earnox-tool .earnox-state--unavailable { color: #3f3f46; background: #e4e4e7; }

/* ---------- Disclosure ---------- */

.earnox-disclosure {
	border-top: 1px solid var(--et-line);
	margin-top: 1rem;
	padding-top: 0.85rem;
}

.earnox-disclosure__summary {
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 620;
	color: var(--et-accent-strong);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.earnox-disclosure__summary::-webkit-details-marker {
	display: none;
}

.earnox-disclosure__summary::before {
	content: "▸";
	transition: transform 140ms ease;
	display: inline-block;
}

.earnox-disclosure[open] .earnox-disclosure__summary::before {
	transform: rotate(90deg);
}

.earnox-disclosure__body {
	margin-top: 0.7rem;
	font-size: 0.875rem;
	color: var(--et-ink-soft);
}

/* ---------- Website checker panel: soft off-white ----------
   The checker sits on #f3f6fa with navy text, quiet borders and the site's
   cyan primary button; the finance tools keep their white paper. Scoped by
   attribute (0,2,0+), so these win over the base rules above and the theme's
   `.earnox-tool .earnox-callout*` paper variants. The dark scan panel and the
   state chips are unchanged. On #f3f6fa: title 17.3:1, labels 13.2:1, muted
   text 6.5:1, links 4.9:1, field edges 3.1:1, focus ring 4.9:1; button text
   on the cyan stops 9.1-15.5:1. */

.earnox-tool[data-earnox-checker],
.earnox-tool[data-earnox-checker-unavailable] {
	--et-panel: #f3f6fa;
	--et-line: #d6dee9;
	--et-ink-soft: #1e2a44;
	--et-ink-muted: #475a78;
	background:
		linear-gradient(var(--et-panel), var(--et-panel)) padding-box,
		linear-gradient(180deg, #b9e8f1, var(--et-line) 30%) border-box;
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.06), 0 28px 60px -34px rgba(14, 116, 144, 0.4);
}

/* Inset surfaces become white cards: the old #f4f7fb fills would vanish
   against the off-white panel. */
.earnox-tool[data-earnox-checker] .earnox-callout,
.earnox-tool[data-earnox-checker-unavailable] .earnox-callout,
.earnox-tool[data-earnox-checker] .earnox-message--pending,
.earnox-tool[data-earnox-checker-unavailable] .earnox-message--pending {
	background: #ffffff;
	border-color: var(--et-line);
	color: var(--et-ink-soft);
}

.earnox-tool[data-earnox-checker] .earnox-callout--info {
	background: #f0f9ff;
	border-color: #bae6fd;
	color: #0c4a6e;
}

.earnox-tool[data-earnox-checker] .earnox-callout--warn {
	background: #fffbeb;
	border-color: #fde68a;
	color: #78350f;
}

.earnox-tool[data-earnox-checker-unavailable] .earnox-action--secondary {
	background: #ffffff;
	border-color: var(--et-line);
	color: var(--et-ink-soft);
}

.earnox-tool[data-earnox-checker-unavailable] .earnox-action--secondary:hover {
	border-color: var(--et-accent);
	color: var(--et-accent-strong);
}

.earnox-tool[data-earnox-checker] {
	position: relative;
}

/* Status text meant only for screen readers (results ready, recent result). */
.earnox-tool[data-earnox-checker] .earnox-message--sr {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Compact mode, once results exist: the form shrinks to one row (domain
   field and "Scan again") so the dashboard summary sits directly under it.
   The tool title stays in the heading outline and the field keeps its label
   for assistive technology; both are only hidden visually. The pre-scan
   disclaimer gives way to the dashboard's one-line caveat. */
.earnox-tool[data-earnox-checker].is-compact {
	padding-top: clamp(0.9rem, 2.4vw, 1.25rem);
}

.earnox-tool[data-earnox-checker].is-compact .earnox-tool__head,
.earnox-tool[data-earnox-checker].is-compact .earnox-field__label {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.earnox-tool[data-earnox-checker].is-compact .earnox-field__hint,
.earnox-tool[data-earnox-checker].is-compact > .earnox-callout--limit {
	display: none;
}

.earnox-tool[data-earnox-checker].is-compact form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.6rem;
}

.earnox-tool[data-earnox-checker].is-compact .earnox-fieldrow {
	display: block;
	flex: 1 1 9rem;
	min-width: 0;
}

.earnox-tool[data-earnox-checker].is-compact .earnox-field__input {
	min-height: 2.95rem;
}

.earnox-tool[data-earnox-checker].is-compact .earnox-tool__actions {
	flex: 0 0 auto;
	margin-top: 0;
}

.earnox-tool[data-earnox-checker].is-compact .earnox-tool__actions .earnox-action {
	min-height: 2.95rem;
}

.earnox-tool[data-earnox-checker].is-compact .earnox-dash {
	margin-top: 1.1rem;
}

/* Primary action ("Check my website", "Help me fix these issues"): the site's
   cyan CTA - same gradient, navy label, inner highlight and cyan under-glow,
   a teal cross-fade on hover and one light sheen on fine pointers. */
.earnox-tool[data-earnox-checker] .earnox-action--primary {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #070c18;
	background: linear-gradient(180deg, #67e8f9, #22d3ee 52%, #12c2de);
	border-color: transparent;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 0 rgba(6, 80, 100, 0.35),
		0 10px 28px -12px rgba(34, 211, 238, 0.8);
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.earnox-tool[data-earnox-checker] .earnox-action--primary::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(180deg, #99f6e4, #5eead4 52%, #2dd4bf);
	opacity: 0;
	transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.earnox-tool[data-earnox-checker] .earnox-action--primary::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 45%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0));
	transform: translateX(-120%) skewX(-12deg);
}

/* Navy in every state: beats the base white and global-styles link colours. */
.earnox-tool[data-earnox-checker] .earnox-action--primary:hover,
.earnox-tool[data-earnox-checker] .earnox-action--primary:focus,
.earnox-tool[data-earnox-checker] .earnox-action--primary:active {
	color: #070c18;
}

/* :hover and :focus-visible stay in separate rules: engines without
   :focus-visible would otherwise drop the hover styles with it. */
.earnox-tool[data-earnox-checker] .earnox-action--primary:hover {
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 0 rgba(6, 80, 100, 0.3),
		0 16px 36px -12px rgba(94, 234, 212, 0.85);
}

.earnox-tool[data-earnox-checker] .earnox-action--primary:focus-visible {
	transform: translateY(-2px);
}

.earnox-tool[data-earnox-checker] .earnox-action--primary:hover::before {
	opacity: 1;
}

.earnox-tool[data-earnox-checker] .earnox-action--primary:focus-visible::before {
	opacity: 1;
}

/* Keyboard focus: white gap plus the teal ring (4.9:1 on the panel). */
.earnox-tool[data-earnox-checker] .earnox-action--primary:focus-visible {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 0 rgba(6, 80, 100, 0.3),
		0 0 0 2px #ffffff,
		0 0 0 4px #0e7490,
		0 16px 36px -12px rgba(94, 234, 212, 0.85);
}

.earnox-tool[data-earnox-checker] .earnox-action--primary:active {
	transform: translateY(-1px) scale(0.985);
	transition-duration: 120ms;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.earnox-tool[data-earnox-checker] .earnox-action--primary:hover::after {
		transform: translateX(330%) skewX(-12deg);
		transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
	}
}

/* Busy ("Checking…"): a flat light cyan with a visible edge and a navy label
   (12.2:1), instead of the base 55% opacity that washed the text out. Kept
   after the hover rules so it wins while the pointer is over it. */
.earnox-tool[data-earnox-checker] .earnox-action--primary[disabled],
.earnox-tool[data-earnox-checker] .earnox-action--primary[aria-disabled="true"] {
	opacity: 1;
	color: #1e2a44;
	background: #cff4fa;
	border-color: #67cfe3;
	box-shadow: none;
	transform: none;
	cursor: progress;
}

.earnox-tool[data-earnox-checker] .earnox-action--primary[disabled]::before,
.earnox-tool[data-earnox-checker] .earnox-action--primary[disabled]::after,
.earnox-tool[data-earnox-checker] .earnox-action--primary[aria-disabled="true"]::before,
.earnox-tool[data-earnox-checker] .earnox-action--primary[aria-disabled="true"]::after {
	opacity: 0;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.earnox-tool[data-earnox-checker] .earnox-action--primary:hover,
	.earnox-tool[data-earnox-checker] .earnox-action--primary:active {
		transform: none;
	}

	.earnox-tool[data-earnox-checker] .earnox-action--primary:focus-visible {
		transform: none;
	}
}

@media (forced-colors: active) {
	.earnox-tool[data-earnox-checker] .earnox-action--primary {
		background: ButtonFace;
		color: ButtonText;
		border-color: ButtonText;
	}

	.earnox-tool[data-earnox-checker] .earnox-action--primary::before,
	.earnox-tool[data-earnox-checker] .earnox-action--primary::after {
		display: none;
	}
}

/* ---------- Screen-reader helper ---------- */

.earnox-sr {
	position: absolute;
	/* Without an explicit offset, an absolutely positioned element with no
	   layout footprint falls back to its "static position" — wherever it
	   would have landed in normal flow. Inside a wide inline row that can be
	   far off to the right, and clip-path hides it visually without stopping
	   that position from still counting toward an ancestor's scrollWidth,
	   causing a horizontal scrollbar on narrow viewports. Pinning it to the
	   top-left corner removes that footprint entirely. */
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Checker results dashboard ----------
   Counts by state (never a score) as four filter cards, one call to action,
   a category filter and a compact grid of finding cards whose evidence and
   fixes open on demand. Layout follows the dashboard's own width (container
   queries), so the homepage card and the full-width tool page each get the
   right number of columns: two from 640px of dashboard width, one below.
   Motion is transform/opacity only and switched off for reduced motion.
   Keep :focus-visible in rules of its own: engines without it would drop a
   whole selector list that mixed it with :hover. */

/* break-word is inherited by everything inside, so long domains, URLs and
   header values wrap instead of running out of their cards. */
.earnox-dash {
	margin-top: 1.25rem;
	container-type: inline-size;
	overflow-wrap: break-word;
}

.earnox-dash__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.4rem 1.25rem;
	margin-bottom: 1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--et-line);
}

.earnox-dash__title {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 680;
	line-height: 1.25;
	letter-spacing: -0.018em;
	color: var(--et-ink);
}

/* checker.js focuses the title once results are in; round its ring. */
.earnox-dash__title:focus {
	border-radius: 6px;
	outline-offset: 4px;
}

.earnox-dash__eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--et-accent-strong);
}

.earnox-dash__host {
	overflow-wrap: break-word; /* Safari < 15.4 */
	overflow-wrap: anywhere;
}

.earnox-dash__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.75rem;
	margin: 0;
	font-size: 0.82rem;
	color: var(--et-ink-muted);
	font-variant-numeric: tabular-nums;
}

.earnox-dash__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.12rem 0.55rem;
	border-radius: 999px;
	background: #e0f2fe;
	color: #0c4a6e;
	font-size: 0.72rem;
	font-weight: 650;
}

/* One-line scope caveat under the head; the full statement is collapsed in
   "About these results". */
.earnox-dash__caveat {
	margin: -0.35rem 0 1rem;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--et-ink-muted);
}

/* Limited-coverage note: short and visible, full server note on demand. */
.earnox-coverage-limited {
	margin: 0 0 1rem;
}

.earnox-coverage-limited__body {
	min-width: 0;
}

/* Two classes, to beat the theme's `.earnox-callout p` margins. */
.earnox-coverage-limited .earnox-coverage-limited__lead {
	margin: 0;
}

.earnox-coverage-limited__more {
	margin-top: 0.4rem;
}

.earnox-coverage-limited__more > summary {
	cursor: pointer;
	font-weight: 640;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.earnox-coverage-limited .earnox-coverage-limited__more > p {
	margin: 0.4rem 0 0;
}

/* Summary cards */
.earnox-dash__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}

@container (min-width: 560px) {
	.earnox-dash__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.earnox-stat {
	--stat-dot: #94a3b8;
	--stat-ink: #475569;
	--stat-wash: #f5f8fb;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	min-width: 0;
	margin: 0;
	padding: 0.8rem 0.95rem 0.85rem;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	text-align: left;
	color: var(--et-ink);
	background: #ffffff;
	border: 1px solid var(--et-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.05);
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.earnox-stat--pass        { --stat-dot: #10b981; --stat-ink: #047857; --stat-wash: #f0fdf7; }
.earnox-stat--attention   { --stat-dot: #f59e0b; --stat-ink: #b45309; --stat-wash: #fffbeb; }
.earnox-stat--unavailable { --stat-dot: #a1a1aa; --stat-ink: #52525b; --stat-wash: #f7f7f8; }
.earnox-stat--na          { --stat-dot: #94a3b8; --stat-ink: #475569; --stat-wash: #f5f8fb; }

.earnox-stat__label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8rem;
	font-weight: 650;
	color: var(--et-ink-soft);
}

.earnox-stat__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--stat-dot);
}

.earnox-stat__count {
	font-size: 1.75rem;
	font-weight: 720;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--et-ink);
}

.earnox-stat__hint {
	font-size: 0.75rem;
	color: var(--et-ink-muted);
}

.earnox-stat.is-empty .earnox-stat__count {
	color: var(--et-ink-muted);
}

/* Selected: the state's own ink as a 2px ring (4.8:1 or better against the
   card), its pale wash, and the count in the same ink. */
.earnox-stat[aria-pressed="true"] {
	background: var(--stat-wash);
	border-color: var(--stat-ink);
	box-shadow: inset 0 0 0 1px var(--stat-ink), 0 10px 24px -18px var(--stat-ink);
}

.earnox-stat[aria-pressed="true"] .earnox-stat__count {
	color: var(--stat-ink);
}

@media (hover: hover) and (pointer: fine) {
	.earnox-stat:hover {
		border-color: #9fb0c7;
		box-shadow: 0 10px 22px -16px rgba(11, 18, 32, 0.35);
		transform: translateY(-1px);
	}

	.earnox-stat[aria-pressed="true"]:hover {
		border-color: var(--stat-ink);
		box-shadow: inset 0 0 0 1px var(--stat-ink), 0 12px 26px -16px var(--stat-ink);
	}
}

/* After the hover rules (same specificity), so the focus ring survives
   while the pointer rests on the focused card. */
.earnox-stat:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--et-focus);
}

.earnox-stat[aria-pressed="true"]:focus-visible {
	box-shadow: inset 0 0 0 1px var(--stat-ink), var(--et-focus);
}

/* The one call to action, under the summary. */
.earnox-dash__help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
}

/* Category filters */
.earnox-dash__toolbar {
	margin: 1.35rem 0 0;
}

.earnox-dash__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.earnox-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.42rem 0.5rem 0.42rem 0.85rem;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 620;
	color: var(--et-ink-soft);
	background: #ffffff;
	border: 1px solid var(--et-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.earnox-filter__count {
	min-width: 1.5em;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: #eef2f7;
	color: var(--et-ink-muted);
	font-size: 0.72rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.earnox-filter.is-empty {
	color: var(--et-ink-muted);
}

.earnox-filter[aria-pressed="true"] {
	color: #ffffff;
	background: #0b1220;
	border-color: #0b1220;
}

.earnox-filter[aria-pressed="true"] .earnox-filter__count {
	background: rgba(165, 243, 252, 0.16);
	color: #a5f3fc;
}

.earnox-filter:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--et-focus);
}

@media (hover: hover) and (pointer: fine) {
	.earnox-filter:not([aria-pressed="true"]):hover {
		color: var(--et-ink);
		border-color: #9fb0c7;
	}
}

.earnox-dash__view {
	margin: 0.85rem 0 0.7rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--et-ink-muted);
}

/* Findings grid */
.earnox-dash__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.7rem;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (min-width: 640px) {
	.earnox-dash__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* No container queries (Chrome < 105, Safari < 16): fall back to the
   viewport. */
@supports not (container-type: inline-size) {
	@media (min-width: 1100px) {
		.earnox-dash__stats {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		.earnox-dash__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

.earnox-fcard {
	--fc-accent: #94a3b8;
	position: relative;
	min-width: 0;
	padding: 0.95rem 1.05rem 0.95rem 1.2rem;
	background: #ffffff;
	border: 1px solid var(--et-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.05);
	transition: border-color 180ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* A slim state-coloured edge; the chip carries the state in words. */
.earnox-fcard::before {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--fc-accent);
}

.earnox-fcard--pass        { --fc-accent: #10b981; }
.earnox-fcard--attention   { --fc-accent: #f59e0b; }
.earnox-fcard--unavailable { --fc-accent: #a1a1aa; }
.earnox-fcard--na          { --fc-accent: #94a3b8; }

.earnox-fcard__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem 0.6rem;
	margin-bottom: 0.55rem;
}

.earnox-fcard__cat {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--et-ink-muted);
}

.earnox-fcard__title {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 660;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--et-ink);
}

.earnox-fcard__text {
	margin: 0.3rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--et-ink-soft);
}

.earnox-fcard__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.65rem 0 0;
	padding: 0.3rem 0.1rem;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-size: 0.84rem;
	font-weight: 640;
	color: var(--et-accent-strong);
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.earnox-fcard__toggle:hover {
	color: var(--et-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.earnox-fcard__chev {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.earnox-fcard__toggle[aria-expanded="true"] .earnox-fcard__chev {
	transform: translateY(1px) rotate(225deg);
}

.earnox-fcard__panel {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.6rem;
	padding-top: 0.8rem;
	border-top: 1px dashed var(--et-line);
}

.earnox-fcard__panel[hidden] {
	display: none;
}

.earnox-fcard__label {
	margin: 0 0 0.2rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--et-ink-muted);
}

.earnox-fcard__body {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--et-ink-soft);
}

.earnox-fcard__evidence {
	padding: 0.45rem 0.6rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--et-ink-soft);
	background: var(--et-sunk);
	border: 1px solid var(--et-line);
	border-radius: 8px;
	overflow-wrap: break-word; /* Safari < 15.4 */
	overflow-wrap: anywhere;
}

.earnox-fcard.is-open {
	border-color: #c3d0e2;
	box-shadow: 0 12px 28px -20px rgba(14, 116, 144, 0.45);
}

@media (hover: hover) and (pointer: fine) {
	.earnox-fcard:hover {
		border-color: #c3d0e2;
		box-shadow: 0 12px 26px -18px rgba(14, 116, 144, 0.45);
		transform: translateY(-1px);
	}
}

/* Empty view */
.earnox-dash__empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1rem;
	padding: 1rem 1.1rem;
	background: #ffffff;
	border: 1px dashed #c3d0e2;
	border-radius: 14px;
}

.earnox-dash__empty[hidden] {
	display: none;
}

.earnox-dash__empty-text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--et-ink-soft);
}

.earnox-dash__reset {
	padding: 0.3rem 0.1rem;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-size: 0.84rem;
	font-weight: 640;
	color: var(--et-accent-strong);
	background: none;
	border: 0;
	border-radius: 6px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Background reading, collapsed under the dashboard. */
.earnox-dash__about {
	margin-top: 1.25rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--et-line);
}

.earnox-dash__about-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	font-size: 0.9rem;
	font-weight: 640;
	color: var(--et-accent-strong);
	border-radius: 6px;
	cursor: pointer;
}

.earnox-dash__about-summary::-webkit-details-marker {
	display: none;
}

.earnox-dash__about-summary::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 200ms ease;
}

.earnox-dash__about[open] > .earnox-dash__about-summary::before {
	transform: rotate(45deg);
}

.earnox-dash__about-body {
	display: grid;
	gap: 0.65rem;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--et-ink-soft);
}

.earnox-dash__about-body p {
	margin: 0;
}

.earnox-dash__defs {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.35rem 1rem;
	margin: 0;
}

.earnox-dash__defs dt {
	font-weight: 650;
	color: var(--et-ink);
}

.earnox-dash__defs dd {
	margin: 0;
}

@container (max-width: 479px) {
	.earnox-dash__defs {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.1rem;
	}

	.earnox-dash__defs dd {
		margin-bottom: 0.45rem;
	}
}

@media (max-width: 560px) {
	.earnox-dash__help .earnox-action {
		flex: 1 1 auto;
	}

	.earnox-stat {
		padding: 0.7rem 0.8rem 0.75rem;
	}

	.earnox-stat__count {
		font-size: 1.5rem;
	}
}

@media (forced-colors: active) {
	.earnox-stat[aria-pressed="true"],
	.earnox-filter[aria-pressed="true"] {
		border: 3px solid Highlight;
	}

	.earnox-fcard::before {
		display: none;
	}
}

/* Entrances: the dashboard rises in, the summary cards follow, and finding
   cards stagger in on every view change (40ms apart, capped). */
@media (prefers-reduced-motion: no-preference) {
	.earnox-dash {
		animation: earnox-dash-in 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
	}

	.earnox-stat {
		animation: earnox-rise 380ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
		animation-delay: calc(60ms + var(--i, 0) * 50ms);
	}

	.earnox-fcard {
		animation: earnox-rise 360ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
		animation-delay: var(--d, 0ms);
	}

	.earnox-fcard__panel:not([hidden]) {
		animation: earnox-panel-in 220ms ease-out;
	}

	.earnox-scan:not([hidden]) {
		animation: earnox-fade 240ms ease-out;
	}
}

@keyframes earnox-dash-in {
	from { opacity: 0; transform: translate3d(0, 12px, 0); }
}

@keyframes earnox-rise {
	from { opacity: 0; transform: translate3d(0, 8px, 0); }
}

@keyframes earnox-panel-in {
	from { opacity: 0; transform: translate3d(0, -4px, 0); }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.earnox-tool *,
	.earnox-tool *::before,
	.earnox-tool *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}

	.earnox-spinner {
		animation: none;
		border-right-color: currentColor;
		opacity: 0.6;
	}

	/* After the dashboard's hover rules, so the lifts really go. */
	.earnox-stat:hover,
	.earnox-fcard:hover {
		transform: none;
	}
}

/* ---------- Small screens ---------- */

@media (max-width: 560px) {
	.earnox-tool {
		padding: 1rem;
		border-radius: 14px;
	}

	.earnox-tool__actions .earnox-action {
		flex: 1 1 auto;
	}

	.earnox-result__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
	}

	.earnox-result__value {
		text-align: left;
	}
}

/* ---------- Print: invoice output ---------- */

@media print {
	.earnox-tool__actions,
	.earnox-tool__intro,
	.earnox-note,
	.earnox-callout {
		display: none !important;
	}

	.earnox-tool {
		border: 0;
		box-shadow: none;
		padding: 0;
	}
}

/* ---------- No flex gap (Chrome < 84, Safari < 14.1) ----------
   `inset` shipped alongside flex gap, so it is the feature test. */

@supports not (inset: 0) {
	.earnox-tool__actions > * { margin: 0 0.6rem 0.6rem 0; }
	.earnox-field > * + * { margin-top: 0.32rem; }
	.earnox-scan__group-dot { margin-right: 0.6rem; }
	.earnox-dash__meta > * + * { margin-left: 0.75rem; }
	.earnox-dash__help > * { margin-right: 0.75rem; }
	.earnox-dash__filters > * { margin: 0 0.45rem 0.45rem 0; }
	.earnox-filter__count { margin-left: 0.45rem; }
	.earnox-stat__dot { margin-right: 0.45rem; }
	.earnox-fcard__top > * + * { margin-left: 0.6rem; }
	.earnox-fcard__toggle .earnox-fcard__chev { margin-left: 0.4rem; }
	.earnox-dash__about-summary::before { margin-right: 0.45rem; }
	@media (min-width: 561px) {
		.earnox-scan__radar { margin-right: 1.25rem; }
	}
	@media (max-width: 560px) {
		.earnox-scan__radar { margin-bottom: 1.25rem; } /* keeps the phone `margin: 0 auto` centring */
	}
}