/*
 * The Elegxos tool — mobile first (360-430px), then wider screens.
 *
 * Colours and fonts are the --elegxos-* custom properties below. They inherit from the
 * theme where it defines WordPress presets; to change them, override them in the theme
 * (Appearance → Customize → Additional CSS), e.g.:
 *   .elegxos, .elegxos-map, .elegxos-dialog { --elegxos-accent: #c00; }
 */
.elegxos,
.elegxos-map,
.elegxos-dialog {
	--elegxos-font: var(--wp--preset--font-family--body, inherit);
	--elegxos-text: var(--wp--preset--color--contrast, #1b1b1f);
	--elegxos-bg: var(--wp--preset--color--base, #fff);
	--elegxos-surface: #f3f4f6;
	--elegxos-muted: #4f5359;
	--elegxos-border: #8a8f98;
	--elegxos-accent: var(--wp--preset--color--primary, #0b57d0);
	--elegxos-accent-text: #fff;
	--elegxos-link: var(--elegxos-accent);
	--elegxos-focus: #0b57d0;
	--elegxos-error: #b3261e;
	--elegxos-radius: 10px;
	--elegxos-gap: 1rem;
	/* Result labels: grey (never green: «no signs» is not «safe»), yellow, orange, red. */
	--elegxos-none-bg: #e7e8ea;
	--elegxos-none-fg: #2b2e33;
	--elegxos-none-bar: #6b7078;
	--elegxos-suspicious-bg: #fff3c4;
	--elegxos-suspicious-fg: #4d3a00;
	--elegxos-suspicious-bar: #e0b100;
	--elegxos-likely-bg: #ffe0c7;
	--elegxos-likely-fg: #6b2700;
	--elegxos-likely-bar: #e8710a;
	--elegxos-known-bg: #b3261e;
	--elegxos-known-fg: #fff;
	--elegxos-known-bar: #7f1812;

	font-family: var(--elegxos-font);
	color: var(--elegxos-text);
	line-height: 1.5;
}

/*
 * Dark: techblog25 sets data-theme="dark" on <html> (its switch, or the device's setting).
 * The colours follow the theme's own dark cards. The result labels stay as they are.
 */
[data-theme="dark"] .elegxos,
[data-theme="dark"] .elegxos-map,
[data-theme="dark"] .elegxos-dialog {
	--elegxos-text: #e8e8ed;
	--elegxos-bg: #1d1d1f;
	--elegxos-surface: #2c2c2e;
	--elegxos-muted: #a1a1a6;
	--elegxos-border: #6e6e73;
	--elegxos-link: #7ebde7;
	--elegxos-focus: #7ebde7;
	--elegxos-error: #ff8a80;

	color-scheme: dark;
}

.elegxos *,
.elegxos-map *,
.elegxos-dialog * {
	box-sizing: border-box;
}

.elegxos-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.elegxos :focus-visible,
.elegxos-map :focus-visible,
.elegxos-dialog :focus-visible {
	outline: 3px solid var(--elegxos-focus);
	outline-offset: 2px;
}

.elegxos__box {
	background: var(--elegxos-bg);
	border: 1px solid var(--elegxos-border);
	border-radius: var(--elegxos-radius);
	padding: var(--elegxos-gap);
	margin: 0 0 1.5rem;
}

/* Tabs: 2x2 on phones (whole words, big targets), one row from 480px. */
.elegxos__tabs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	margin: 0 0 var(--elegxos-gap);
	padding: 4px;
	background: var(--elegxos-surface);
	border-radius: var(--elegxos-radius);
}

.elegxos__tab {
	min-height: 44px;
	padding: 0.4rem 0.35rem;
	border: 0;
	border-radius: calc(var(--elegxos-radius) - 4px);
	background: transparent;
	color: var(--elegxos-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

.elegxos__tab[aria-selected="true"] {
	background: var(--elegxos-accent);
	color: var(--elegxos-accent-text);
}

.elegxos__panel:focus-visible {
	outline-offset: 4px;
}

.elegxos__form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.elegxos__kind {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.elegxos__kind-option {
	position: relative;
	flex: 1;
}

.elegxos__kind-option input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.elegxos__kind-option span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 2px solid var(--elegxos-border);
	border-radius: var(--elegxos-radius);
	font-weight: 600;
}

.elegxos__kind-option input:checked + span {
	border-color: var(--elegxos-accent);
	background: var(--elegxos-accent);
	color: var(--elegxos-accent-text);
}

.elegxos__kind-option input:focus-visible + span {
	outline: 3px solid var(--elegxos-focus);
	outline-offset: 2px;
}

.elegxos__label {
	font-weight: 600;
}

.elegxos__input {
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--elegxos-border);
	border-radius: var(--elegxos-radius);
	background: var(--elegxos-bg);
	color: var(--elegxos-text);
	font: inherit;
	font-size: 1rem; /* 16px: no zoom on iOS */
}

textarea.elegxos__input {
	min-height: 9rem;
	resize: vertical;
}

.elegxos__input[aria-invalid="true"],
.elegxos__file-input[aria-invalid="true"] + .elegxos__file {
	border-color: var(--elegxos-error);
	border-width: 2px;
}

.elegxos__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.elegxos__file {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 7rem;
	padding: 1rem;
	border: 2px dashed var(--elegxos-border);
	border-radius: var(--elegxos-radius);
	background: var(--elegxos-surface);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.elegxos__file-input:focus-visible + .elegxos__file {
	outline: 3px solid var(--elegxos-focus);
	outline-offset: 2px;
}

.elegxos__file-name {
	font-weight: 400;
	color: var(--elegxos-muted);
	overflow-wrap: anywhere;
}

.elegxos__help {
	margin: 0;
	font-size: 0.875rem;
	color: var(--elegxos-muted);
}

/* Cloudflare Turnstile (only with a site key): its height is kept from the start. */
.elegxos__turnstile {
	min-height: 65px;
}

@media (max-width: 374px) {
	.elegxos__turnstile {
		min-height: 140px; /* the compact widget */
	}
}

.elegxos__submit,
.elegxos__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.6rem 1.1rem;
	border-radius: var(--elegxos-radius);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.elegxos__submit {
	width: 100%;
	border: 0;
	background: var(--elegxos-accent);
	color: var(--elegxos-accent-text);
	font-size: 1.0625rem;
}

.elegxos__submit:disabled {
	opacity: 0.7;
	cursor: progress;
}

.elegxos__secondary {
	min-height: 44px;
	border: 1px solid var(--elegxos-border);
	background: var(--elegxos-bg);
	color: var(--elegxos-text);
	font-weight: 600;
}

.elegxos__disclaimer {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--elegxos-muted);
}

.elegxos__disclaimer a,
.elegxos__full a,
.elegxos__article a {
	color: var(--elegxos-link);
	text-decoration: underline;
}

.elegxos__full {
	margin: 0.5rem 0 0;
	font-weight: 600;
}

.elegxos-linkbutton {
	padding: 0;
	border: 0;
	background: none;
	color: var(--elegxos-link);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Status: loading and errors. While checking, the room for the result is kept open, so the
   answer fills it instead of moving the page (CLS). */
.elegxos__status {
	margin: 0.75rem 0 0;
	font-weight: 600;
}

.elegxos__status:empty {
	margin: 0;
}

.elegxos__status.is-error {
	color: var(--elegxos-error);
}

.elegxos.is-checking .elegxos__status {
	min-height: min(60vh, 32rem);
}

.elegxos.is-checking .elegxos__status::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	vertical-align: -0.15em;
	border: 3px solid var(--elegxos-border);
	border-top-color: var(--elegxos-accent);
	border-radius: 50%;
	animation: elegxos-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.elegxos.is-checking .elegxos__status::before {
		animation: none;
	}
}

/* Result. */
.elegxos__result {
	min-height: min(60vh, 32rem);
	margin: 1rem 0 0;
	scroll-margin-top: 100px; /* the site's sticky header: the label must not end up under it */
}

.elegxos-verdict {
	padding: 0.85rem 1rem;
	border-left: 8px solid var(--elegxos-none-bar);
	border-radius: var(--elegxos-radius);
	background: var(--elegxos-none-bg);
	color: var(--elegxos-none-fg);
}

.elegxos-verdict[data-tone="suspicious"] {
	border-color: var(--elegxos-suspicious-bar);
	background: var(--elegxos-suspicious-bg);
	color: var(--elegxos-suspicious-fg);
}

.elegxos-verdict[data-tone="likely"] {
	border-color: var(--elegxos-likely-bar);
	background: var(--elegxos-likely-bg);
	color: var(--elegxos-likely-fg);
}

.elegxos-verdict[data-tone="known"] {
	border-color: var(--elegxos-known-bar);
	background: var(--elegxos-known-bg);
	color: var(--elegxos-known-fg);
}

.elegxos-verdict__label {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
}

.elegxos-verdict__score {
	margin: 0.25rem 0 0;
	font-weight: 600;
}

.elegxos__note,
.elegxos__hint {
	margin: 0.75rem 0 0;
	padding: 0.6rem 0.75rem;
	border-radius: var(--elegxos-radius);
	background: var(--elegxos-surface);
}

/*
 * Headings and list items: inside an article the theme styles every h2, h3 and li of the text
 * (techblog25: up to 0,2,1, the font-size of h3 with !important). The doubled class keeps the
 * box's own look there. The other texts of the box are <div>, never <p>, for the same reason.
 */
.elegxos.elegxos .elegxos__subtitle {
	margin: 1.25rem 0 0.25rem;
	font-size: 1.2em !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
}

.elegxos__list {
	margin: 0;
	padding-left: 1.25rem;
}

.elegxos.elegxos .elegxos__list li {
	margin: 0;
	color: inherit;
	font: inherit;
}

.elegxos.elegxos .elegxos__list li + li {
	margin-top: 0.35rem;
}

.elegxos__article {
	margin: 1rem 0 0;
	font-weight: 600;
}

.elegxos__feedback,
.elegxos__share {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--elegxos-surface);
}

.elegxos__feedback-q,
.elegxos__feedback-msg,
.elegxos__share-q,
.elegxos__share-msg {
	margin: 0 0 0.5rem;
}

.elegxos__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.elegxos__share-msg:empty,
.elegxos__feedback-msg:empty {
	display: none;
}

.elegxos__owner {
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--elegxos-muted);
}

.elegxos [hidden],
.elegxos-map [hidden],
.elegxos-dialog [hidden] {
	display: none !important;
}

/* FAQ. */
.elegxos-faq__item {
	border-bottom: 1px solid var(--elegxos-surface);
}

.elegxos-faq__item summary {
	padding: 0.85rem 0;
	font-weight: 700;
	cursor: pointer;
}

.elegxos-faq__item p {
	margin: 0 0 1rem;
}

.elegxos-faq__item a {
	color: var(--elegxos-link);
}

/* Mini box. */
.elegxos--mini .elegxos__result,
.elegxos--mini.is-checking .elegxos__status {
	min-height: 0;
}

.elegxos.elegxos .elegxos__mini-title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
}

/* Correction dialog. */
.elegxos-dialog {
	width: min(36rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: var(--elegxos-gap);
	border: 0;
	border-radius: var(--elegxos-radius);
	background: var(--elegxos-bg);
}

.elegxos-dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.elegxos-dialog__form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.elegxos-dialog h2 {
	margin: 0;
	font-size: 1.25rem;
}

.elegxos-dialog .elegxos__submit {
	width: auto;
}

/* Map. */
.elegxos-map__section {
	margin: 2rem 0 0;
}

.elegxos-map__filling {
	padding: 1rem;
	border-radius: var(--elegxos-radius);
	background: var(--elegxos-surface);
}

.elegxos-map__brands {
	width: 100%;
	border-collapse: collapse;
}

.elegxos-map__brands th,
.elegxos-map__brands td {
	padding: 0.5rem 0.25rem;
	border-bottom: 1px solid var(--elegxos-surface);
	text-align: left;
}

.elegxos-map__brands td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.elegxos-map__chart {
	margin: 1rem 0 0;
}

.elegxos-map__chart figcaption {
	font-size: 0.875rem;
	color: var(--elegxos-muted);
}

.elegxos-chart {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 1;
}

.elegxos-chart__bar {
	fill: var(--elegxos-accent);
}

.elegxos-chart__axis,
.elegxos-chart__grid {
	stroke: var(--elegxos-border);
	stroke-width: 1;
}

.elegxos-chart__grid {
	stroke-dasharray: 4 4;
}

.elegxos-chart__label {
	fill: var(--elegxos-muted);
	font-size: 20px;
}

.elegxos-campaign {
	margin: 1rem 0 0;
	padding: var(--elegxos-gap);
	border: 1px solid var(--elegxos-border);
	border-radius: var(--elegxos-radius);
	scroll-margin-top: 100px;
}

.elegxos-campaign h3 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.elegxos-campaign__text {
	margin: 0;
	padding: 0.75rem;
	border-left: 4px solid var(--elegxos-likely-bar);
	background: var(--elegxos-surface);
	overflow-wrap: anywhere;
}

.elegxos-campaign__text p {
	margin: 0;
}

.elegxos-campaign__meta,
.elegxos-campaign__sites,
.elegxos-campaign__article {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.elegxos-campaign__article a {
	color: var(--elegxos-link);
}

.elegxos-domains {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elegxos-domains__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--elegxos-surface);
}

.elegxos-domains__name {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.elegxos-domains__label {
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--elegxos-likely-bg);
	color: var(--elegxos-likely-fg);
	font-size: 0.8125rem;
	font-weight: 600;
}

.elegxos-domains__meta {
	flex-basis: 100%;
	font-size: 0.875rem;
	color: var(--elegxos-muted);
}

.elegxos-domains__item .elegxos-linkbutton {
	font-size: 0.875rem;
}

@media (min-width: 480px) {
	.elegxos__tabs {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 600px) {
	.elegxos__box {
		padding: 1.5rem;
	}

	.elegxos__tab {
		font-size: 1rem;
	}

	.elegxos__submit {
		width: auto;
		align-self: flex-start;
	}
}