/**
 * TextInvisible Tools - front-end styles.
 *
 * Deliberately restrained. The plugin has to sit inside whatever theme the site
 * runs, so it inherits the theme's font and only paints the surfaces it owns.
 * Every colour comes from a custom property, which means a theme can restyle
 * the whole tool by redefining a handful of values.
 */

.txinv {
	--txinv-fg: #16181d;
	--txinv-muted: #5f6573;
	--txinv-bg: #ffffff;
	--txinv-sunken: #f4f5f8;
	--txinv-line: #dcdee5;
	--txinv-accent: #1f5f8b;
	--txinv-alert: #9e3b2c;
	--txinv-alert-bg: #f9ebe7;
	--txinv-ok: #2b6248;
	--txinv-ok-bg: #e8f1ec;
	--txinv-warn: #7a5410;
	--txinv-warn-bg: #f7efdd;
	--txinv-radius: 6px;

	color: var(--txinv-fg);
	font-size: 1rem;
	line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
	.txinv {
		--txinv-fg: #e8eaef;
		--txinv-muted: #9ba2b0;
		--txinv-bg: #171a1f;
		--txinv-sunken: #1e222a;
		--txinv-line: #2f333c;
		--txinv-accent: #74b4da;
		--txinv-alert: #e5907e;
		--txinv-alert-bg: #33201c;
		--txinv-ok: #84c6a6;
		--txinv-ok-bg: #1a2b23;
		--txinv-warn: #d8b36a;
		--txinv-warn-bg: #2b2417;
	}
}

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

.txinv-title {
	margin: 0 0 1rem;
}

/* ---- panes ---- */

.txinv-panes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}

.txinv-pane {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.txinv-label {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--txinv-muted);
	margin: 0;
}

.txinv-textarea {
	width: 100%;
	padding: 0.75rem 0.85rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--txinv-fg);
	background: var(--txinv-bg);
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
	resize: vertical;
}

.txinv-textarea:focus-visible {
	outline: 2px solid var(--txinv-accent);
	outline-offset: 1px;
}

.txinv-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.9rem;
	color: var(--txinv-muted);
	font-variant-numeric: tabular-nums;
}

/* ---- button ---- */

.txinv-btn {
	appearance: none;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.5rem 0.9rem;
	color: var(--txinv-bg);
	background: var(--txinv-accent);
	border: 1px solid var(--txinv-accent);
	border-radius: var(--txinv-radius);
	cursor: pointer;
	white-space: nowrap;
}

.txinv-btn:hover {
	filter: brightness(1.08);
}

.txinv-btn:focus-visible {
	outline: 2px solid var(--txinv-accent);
	outline-offset: 2px;
}

.txinv-btn.is-done {
	background: var(--txinv-ok);
	border-color: var(--txinv-ok);
}

/* ---- report ---- */

.txinv-report:empty {
	display: none;
}

.txinv-report {
	margin-top: 1.1rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--txinv-line);
	border-left-width: 3px;
	border-radius: 0 var(--txinv-radius) var(--txinv-radius) 0;
	background: var(--txinv-sunken);
}

.txinv-report--clean {
	border-left-color: var(--txinv-ok);
	background: var(--txinv-ok-bg);
}

.txinv-report--found {
	border-left-color: var(--txinv-alert);
	background: var(--txinv-alert-bg);
}

.txinv-headline {
	margin: 0;
	font-weight: 600;
}

.txinv-breakdown {
	list-style: none;
	margin: 0.7rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.97rem;
}

.txinv-breakdown li {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	margin: 0;
}

.txinv-tally {
	min-width: 2.6em;
	text-align: right;
	color: var(--txinv-muted);
	font-variant-numeric: tabular-nums;
}

.txinv-cp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82em;
	padding: 0.1em 0.4em;
	border-radius: 3px;
	background: var(--txinv-bg);
	border: 1px solid var(--txinv-line);
}

.txinv-cname {
	color: var(--txinv-fg);
}

.txinv-note {
	margin: 0.8rem 0 0;
	padding-left: 0.8rem;
	border-left: 2px solid var(--txinv-line);
	font-size: 0.97rem;
}

.txinv-note--alert {
	border-left-color: var(--txinv-alert);
	color: var(--txinv-alert);
	font-weight: 500;
}

.txinv-note--info {
	color: var(--txinv-muted);
}

/* ---- diff preview ---- */

.txinv-diff-wrap {
	margin-top: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.txinv-diff {
	padding: 0.8rem 0.9rem;
	max-height: 22rem;
	overflow: auto;
	background: var(--txinv-sunken);
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.94rem;
	line-height: 1.9;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.txinv-pill {
	display: inline-block;
	padding: 0.05em 0.4em;
	margin: 0 0.1em;
	font-size: 0.78em;
	line-height: 1.5;
	color: var(--txinv-bg);
	background: var(--txinv-alert);
	border-radius: 3px;
	cursor: help;
	white-space: nowrap;
}

.txinv-truncated {
	margin: 0.7rem 0 0;
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--txinv-muted);
}

/* ---- options ---- */

.txinv-options {
	margin-top: 1.1rem;
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
	background: var(--txinv-bg);
}

.txinv-options > summary {
	padding: 0.7rem 1rem;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.txinv-options > summary:focus-visible {
	outline: 2px solid var(--txinv-accent);
	outline-offset: -2px;
}

.txinv-subhead {
	margin: 0;
	padding: 0.9rem 1rem 0.2rem;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--txinv-muted);
}

.txinv-optgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.2rem 1.2rem;
	padding: 0.4rem 1rem 1rem;
}

.txinv-opt {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: start;
	padding: 0.45rem 0;
	cursor: pointer;
}

.txinv-opt input {
	margin: 0.25rem 0 0;
}

.txinv-opt b {
	display: block;
	font-size: 0.97rem;
	font-weight: 600;
}

.txinv-opt em {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.9rem;
	font-style: normal;
	line-height: 1.45;
	color: var(--txinv-muted);
}

.txinv-opt--warn b::after {
	content: "changes visible text";
	display: inline-block;
	margin-left: 0.45rem;
	padding: 0.1em 0.45em;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 1px;
	color: var(--txinv-alert);
	background: var(--txinv-alert-bg);
	border-radius: 99px;
}

/* ---- detector: verdict ---- */

.txinv-verdict:empty {
	display: none;
}

.txinv-verdict {
	margin-top: 1.1rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--txinv-line);
	border-left-width: 3px;
	border-radius: 0 var(--txinv-radius) var(--txinv-radius) 0;
	background: var(--txinv-sunken);
}

.txinv-verdict-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.txinv-badge {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.28em 0.65em;
	border-radius: 99px;
	white-space: nowrap;
	color: var(--txinv-bg);
	background: var(--txinv-muted);
}

.txinv-verdict-count {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.txinv-verdict--none {
	border-left-color: var(--txinv-ok);
	background: var(--txinv-ok-bg);
}

.txinv-verdict--none .txinv-badge {
	background: var(--txinv-ok);
}

.txinv-verdict--low {
	border-left-color: var(--txinv-muted);
}

.txinv-verdict--medium {
	border-left-color: var(--txinv-warn);
	background: var(--txinv-warn-bg);
}

.txinv-verdict--medium .txinv-badge {
	background: var(--txinv-warn);
}

.txinv-verdict--high {
	border-left-color: var(--txinv-alert);
	background: var(--txinv-alert-bg);
}

.txinv-verdict--high .txinv-badge {
	background: var(--txinv-alert);
}

.txinv-reason {
	margin: 0.65rem 0 0;
	font-size: 0.97rem;
	line-height: 1.5;
}

/* ---- detector: decoded message ---- */

.txinv-decoded {
	margin-top: 1.1rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--txinv-alert);
	border-radius: var(--txinv-radius);
	background: var(--txinv-bg);
}

.txinv-decoded-text {
	margin: 0.5rem 0 0;
	padding: 0.75rem 0.85rem;
	max-height: 16rem;
	overflow: auto;
	background: var(--txinv-sunken);
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.txinv-untrusted {
	margin: 0.7rem 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--txinv-alert);
}

/* ---- detector: inventory ---- */

.txinv-inventory:empty {
	display: none;
}

.txinv-inventory {
	margin-top: 1.1rem;
}

.txinv-scroll {
	overflow-x: auto;
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
	background: var(--txinv-bg);
}

.txinv-table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.txinv-table th {
	text-align: left;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--txinv-muted);
	padding: 0.65rem 0.8rem;
	border-bottom: 1px solid var(--txinv-line);
	white-space: nowrap;
}

.txinv-table td {
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid var(--txinv-line);
	vertical-align: top;
}

.txinv-table tr:last-child td {
	border-bottom: none;
}

.txinv-group {
	color: var(--txinv-muted);
}

.txinv-num {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.txinv-where {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82em;
	color: var(--txinv-muted);
}

.txinv-footnote {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	color: var(--txinv-muted);
}

/* ---- footnote ---- */

.txinv-privacy {
	margin: 0.9rem 0 0;
	font-size: 0.92rem;
	color: var(--txinv-muted);
}

/* ---- generator ----
 *
 * The generator has a problem the other two tools do not: its output is
 * invisible, so an empty-looking box is both the correct result and what a
 * broken tool looks like. Everything here exists to make "nothing" legible --
 * the brackets that frame the width, the sunken strip that gives it a surface,
 * and the survival panel that says in words what the box cannot show.
 */

.txinv-generator {
	display: grid;
	gap: 1.1rem;
}

.txinv-gen-platforms .txinv-label {
	display: block;
	margin-bottom: 0.45rem;
}

.txinv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.txinv-chip {
	appearance: none;
	font: inherit;
	font-size: 0.92rem;
	line-height: 1;
	padding: 0.45rem 0.75rem;
	color: var(--txinv-fg);
	background: var(--txinv-bg);
	border: 1px solid var(--txinv-line);
	border-radius: 999px;
	cursor: pointer;
}

.txinv-chip:hover {
	border-color: var(--txinv-accent);
}

.txinv-chip:focus-visible {
	outline: 2px solid var(--txinv-accent);
	outline-offset: 2px;
}

.txinv-chip.is-active {
	color: var(--txinv-bg);
	background: var(--txinv-accent);
	border-color: var(--txinv-accent);
	font-weight: 600;
}

.txinv-gen-output .txinv-label {
	display: block;
	margin-bottom: 0.45rem;
}

/*
 * Brackets, not decoration: they are the only way to see how wide the copied
 * text is. A zero-width character leaves them touching; a space-wide one
 * pushes them apart, and repeating it pushes them further.
 */
.txinv-gen-preview {
	display: flex;
	align-items: center;
	min-height: 3.4rem;
	padding: 0.9rem 1rem;
	background: var(--txinv-sunken);
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.15rem;
	overflow-x: auto;
}

/*
 * The brackets must not come along when somebody selects the preview by hand
 * instead of pressing Copy. Safari still needs the prefix for this, and Safari
 * on iOS is a large share of the traffic a page about blank usernames gets.
 */
.txinv-gen-bracket {
	color: var(--txinv-accent);
	font-weight: 700;
	-webkit-user-select: none;
	user-select: none;
}

.txinv-gen-value {
	white-space: pre;
}

.txinv-gen-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.7rem;
}

.txinv-btn--primary {
	font-size: 1rem;
	padding: 0.7rem 1.6rem;
}

.txinv-btn.is-failed {
	background: var(--txinv-alert);
	border-color: var(--txinv-alert);
}

.txinv-gen-count {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.txinv-gen-count-label {
	margin-right: 0.2rem;
	font-size: 0.9rem;
	color: var(--txinv-muted);
}

.txinv-step {
	appearance: none;
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	width: 2rem;
	height: 2rem;
	color: var(--txinv-fg);
	background: var(--txinv-bg);
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
	cursor: pointer;
}

.txinv-step:hover {
	border-color: var(--txinv-accent);
}

.txinv-step:focus-visible {
	outline: 2px solid var(--txinv-accent);
	outline-offset: 2px;
}

.txinv-gen-num {
	font: inherit;
	width: 3.6rem;
	padding: 0.35rem 0.4rem;
	text-align: center;
	color: var(--txinv-fg);
	background: var(--txinv-bg);
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
}

.txinv-gen-said {
	margin: 0.6rem 0 0;
	font-size: 0.95rem;
	color: var(--txinv-muted);
}

/* ---- steps ---- */

.txinv-gen-steplist {
	margin: 0;
	padding-left: 1.2rem;
}

.txinv-gen-steplist li {
	margin: 0.25rem 0;
}

.txinv-gen-note {
	margin: 0.7rem 0 0;
	padding: 0.7rem 0.9rem;
	font-size: 0.96rem;
	color: var(--txinv-fg);
	background: var(--txinv-sunken);
	border-left: 3px solid var(--txinv-accent);
	border-radius: 0 var(--txinv-radius) var(--txinv-radius) 0;
}

/* ---- survival panel ---- */

.txinv-gen-survival {
	padding: 0.9rem 1rem;
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
	background: var(--txinv-sunken);
}

.txinv-gen-survival:empty {
	display: none;
}

.txinv-gen-survival.is-good {
	border-color: var(--txinv-ok);
	background: var(--txinv-ok-bg);
}

/*
 * "Safe to use, but it changes shape" is a good outcome, so it takes the
 * positive border. Only the background is held back, so the two positive
 * states are still tellable apart at a glance.
 */
.txinv-gen-survival.is-works {
	border-color: var(--txinv-ok);
	background: var(--txinv-sunken);
}

.txinv-gen-survival.is-mixed {
	border-color: var(--txinv-warn);
	background: var(--txinv-warn-bg);
}

.txinv-gen-survival.is-bad {
	border-color: var(--txinv-alert);
	background: var(--txinv-alert-bg);
}

.txinv-gen-survival-title {
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--txinv-muted);
}

.txinv-gen-survival-head {
	margin: 0 0 0.2rem;
	font-weight: 600;
	font-size: 1.02rem;
}

.txinv-gen-survival-sub {
	margin: 0 0 0.75rem;
	font-size: 0.94rem;
	color: var(--txinv-muted);
}

.txinv-gen-checks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

/*
 * The mark is a word rather than a symbol, because there are three outcomes
 * and no set of three symbols reads unambiguously. A fixed column keeps the
 * labels aligned down the list.
 */
.txinv-gen-check {
	display: grid;
	grid-template-columns: 4.7rem 1fr;
	gap: 0.55rem;
	align-items: start;
}

.txinv-gen-check-mark {
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	padding: 0.05rem 0.35rem;
	border-radius: var(--txinv-radius);
	white-space: nowrap;
}

.txinv-gen-check.is-kept .txinv-gen-check-mark {
	color: var(--txinv-ok);
	background: var(--txinv-ok-bg);
}

.txinv-gen-check.is-changed .txinv-gen-check-mark {
	color: var(--txinv-warn);
	background: var(--txinv-warn-bg);
}

.txinv-gen-check.is-gone .txinv-gen-check-mark {
	color: var(--txinv-alert);
	background: var(--txinv-alert-bg);
}

.txinv-gen-check-body b {
	display: block;
	font-size: 0.97rem;
}

.txinv-gen-check-body em {
	display: block;
	margin-top: 0.1rem;
	font-style: normal;
	font-size: 0.94rem;
	color: var(--txinv-muted);
}

/*
 * The plain-language explainer. The technical term is never deleted, only
 * moved one tap away, so a reader who wants to look it up still can.
 */
.txinv-what {
	margin-top: 0.35rem;
	font-size: 0.88rem;
}

.txinv-what > summary {
	cursor: pointer;
	color: var(--txinv-accent);
	width: -moz-fit-content;
	width: fit-content;
	list-style: none;
}

.txinv-what > summary::-webkit-details-marker {
	display: none;
}

.txinv-what > summary::before {
	content: "+";
	display: inline-block;
	width: 0.9em;
	font-weight: 700;
}

.txinv-what[open] > summary::before {
	content: "-";
}

.txinv-what > summary:focus-visible {
	outline: 2px solid var(--txinv-accent);
	outline-offset: 2px;
	border-radius: var(--txinv-radius);
}

.txinv-what > p {
	margin: 0.3rem 0 0;
	color: var(--txinv-muted);
	font-size: 0.9rem;
}

@media (max-width: 480px) {
	.txinv-gen-check {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.txinv-gen-check-mark {
		text-align: left;
		width: -moz-fit-content;
		width: fit-content;
	}
}

.txinv-gen-survival-foot {
	margin: 0.8rem 0 0;
	font-size: 0.94rem;
	color: var(--txinv-muted);
}

/* ---- character chooser ---- */

.txinv-opt--char b {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.txinv-cp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88rem;
	font-weight: 400;
	color: var(--txinv-muted);
}

.txinv-width-pill {
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
}

.txinv-width-pill--zero {
	color: var(--txinv-accent);
	background: var(--txinv-sunken);
}

.txinv-width-pill--blank {
	color: var(--txinv-warn);
	background: var(--txinv-warn-bg);
}

@media (max-width: 480px) {
	.txinv-gen-actions {
		align-items: stretch;
	}

	.txinv-btn--primary {
		flex: 1 1 100%;
	}
}

/* ---- try an example ----
 *
 * The samples are the only honest way to show hidden characters on a page. An
 * example written into the page cannot contain them — WordPress strips
 * invisible codepoints out of post content — so a hand-written "paste this in"
 * example gets copied, comes back clean, and teaches the visitor the opposite
 * of what it meant to.
 */

.txinv-examples {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
	margin-top: 0.6rem;
}

.txinv-examples-label {
	font-size: 0.92rem;
	color: var(--txinv-muted);
}

.txinv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* ---- the map ----
 *
 * The reader's own text, with a marker where each hidden character sits.
 * "Line 2, column 34" is accurate and almost useless on its own: it asks
 * somebody to count along a line looking for something invisible. A marker in
 * the running text is the same fact, pointed at.
 *
 * Monospace, because a proportional font lets a marker drift away from the
 * gap it belongs to.
 */

.txinv-map-wrap {
	margin-top: 1.25rem;
}

.txinv-map {
	max-height: 22rem;
	overflow: auto;
	padding: 0.9rem 1rem;
	background: var(--txinv-sunken);
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.98rem;
	line-height: 2;
	white-space: pre-wrap;
	word-break: break-word;
}

/*
 * The marker itself. Sized and spaced so a run of them reads as a run rather
 * than as one long block, and coloured by how deliberate the character is.
 */
.txinv-mark {
	display: inline-block;
	padding: 0.05em 0.4em;
	margin: 0 0.08em;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	vertical-align: 1px;
	cursor: help;
}

.txinv-mark--alert {
	color: #fff;
	background: var(--txinv-alert);
}

.txinv-mark--warn {
	color: var(--txinv-warn);
	background: var(--txinv-warn-bg);
	box-shadow: inset 0 0 0 1px var(--txinv-warn);
}

.txinv-mark--note {
	color: var(--txinv-muted);
	background: var(--txinv-bg);
	box-shadow: inset 0 0 0 1px var(--txinv-line);
}

.txinv-mark:focus-visible {
	outline: 2px solid var(--txinv-accent);
	outline-offset: 2px;
}

.txinv-map-help {
	margin: 0.6rem 0 0;
	font-size: 0.95rem;
	color: var(--txinv-muted);
}

/* ---- the legend ---- */

.txinv-legend {
	margin-top: 0.85rem;
	display: grid;
	gap: 0.5rem;
}

.txinv-legend:empty {
	display: none;
}

.txinv-legend-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: start;
}

.txinv-legend-row .txinv-mark {
	margin-top: 0.15rem;
}

.txinv-legend-body b {
	display: block;
	font-size: 0.97rem;
}

.txinv-legend-body em {
	display: block;
	margin-top: 0.1rem;
	font-style: normal;
	font-size: 0.93rem;
	line-height: 1.55;
	color: var(--txinv-muted);
}

/* ---- reference tables ----
 *
 * A page, not a tool: no script, nothing to interact with. It exists so the
 * reference page answers "what are these characters" while the generator
 * answers "give me one" — two pages offering the same thing compete with each
 * other for the same search and one of them loses.
 */

.txinv-reference .txinv-table {
	width: 100%;
}

.txinv-ref-help {
	font-size: 0.98rem;
	color: var(--txinv-muted);
	line-height: 1.55;
	min-width: 18rem;
}

.txinv-ref-groups {
	margin: 0.75rem 0 0;
}

.txinv-ref-groups dt {
	margin-top: 1rem;
	font-weight: 650;
}

.txinv-ref-groups dd {
	margin: 0.2rem 0 0;
	font-size: 1rem;
	color: var(--txinv-muted);
	line-height: 1.6;
}

/* ---- shared note variants ----
 *
 * --alert and --info were enough while only the detector printed notes. The
 * cleaner needs to say "this is fine but read the next sentence" and the
 * survival checker needs to say "this part is safe", which are different
 * things from an alert and should not borrow its red.
 */

.txinv-note--warn {
	border-left-color: var(--txinv-warn);
	color: var(--txinv-warn);
}

.txinv-note--ok {
	border-left-color: var(--txinv-ok);
	color: var(--txinv-ok);
}

.txinv-verdict--clean {
	border-left-color: var(--txinv-ok);
	background: var(--txinv-ok-bg);
}

.txinv-verdict--found {
	border-left-color: var(--txinv-warn);
	background: var(--txinv-warn-bg);
}

/*
 * An aside is not a note: it is the sentence that stops a tool being mistaken
 * for the tool next to it. On the cleaner it is the line explaining that tidy
 * whitespace and no hidden characters are two different claims.
 */
.txinv-aside {
	margin: 1rem 0 0;
	font-size: 0.97rem;
	line-height: 1.6;
	color: var(--txinv-muted);
}

/* ---- whitespace cleaner ----
 *
 * The counter beside each checkbox is the whole design. This tool changes text
 * in ways that are invisible on the page by definition, so a result with no
 * number attached reads exactly like a result where nothing happened.
 */

.txinv-hits {
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.1em 0.5em;
	margin-left: 0.45em;
	border-radius: 99px;
	white-space: nowrap;
	vertical-align: 1px;
	font-variant-numeric: tabular-nums;
}

.txinv-hits:empty {
	display: none;
}

.txinv-hits--did {
	color: var(--txinv-bg);
	background: var(--txinv-accent);
}

.txinv-hits--none {
	color: var(--txinv-muted);
	background: var(--txinv-sunken);
	border: 1px solid var(--txinv-line);
}

/* ---- survival checker ---- */

.txinv-surv-wrap {
	margin-top: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.txinv-surv-table {
	width: 100%;
}

.txinv-surv-table td {
	vertical-align: top;
}

.txinv-surv-table b {
	display: block;
	font-weight: 650;
}

.txinv-op-help {
	display: block;
	margin-top: 0.15rem;
	font-style: normal;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--txinv-muted);
	max-width: 34rem;
}

.txinv-surv-count {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--txinv-muted);
}

.txinv-surv-verdict {
	font-size: 0.98rem;
	line-height: 1.55;
	min-width: 14rem;
}

/*
 * Colour carries the verdict on a row, so it is backed by a word in the cell
 * as well: "gone" and "survives" are readable with the colour switched off,
 * which is the state a lot of people read tables in.
 */
.txinv-surv-table tr.is-fatal .txinv-surv-verdict {
	color: var(--txinv-alert);
}

.txinv-surv-table tr.is-safe .txinv-surv-verdict {
	color: var(--txinv-ok);
}

.txinv-surv-table tr.is-partial .txinv-surv-verdict {
	color: var(--txinv-warn);
}

.txinv-surv-chars {
	margin-top: 0.9rem;
}

.txinv-surv-grid {
	width: 100%;
	font-size: 0.97rem;
}

.txinv-surv-op {
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.35;
	min-width: 6.5rem;
}

.txinv-surv-grid td:first-child {
	white-space: nowrap;
}

.txinv-surv-grid .txinv-cname {
	display: block;
}

.txinv-surv-grid .txinv-cp {
	display: inline-block;
	margin-top: 0.2rem;
}

.txinv-surv-cell {
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.txinv-surv-cell.is-safe {
	color: var(--txinv-ok);
	background: var(--txinv-ok-bg);
}

.txinv-surv-cell.is-fatal {
	color: var(--txinv-alert);
	background: var(--txinv-alert-bg);
}

.txinv-surv-cell.is-partial {
	color: var(--txinv-warn);
	background: var(--txinv-warn-bg);
}

/* ---- controls above the boxes ----
 *
 * The options panel and the privacy line sit above the input on the tools you
 * paste into, so the settings are available before the text is and the "nothing
 * leaves your browser" line is read before somebody pastes a real document
 * rather than after. Both were written for the bottom of the tool, so the
 * margin has to flip; nothing else about them changes.
 *
 * The generator keeps both at the bottom on purpose — see the note in
 * render_generator().
 */

.txinv-options--top {
	margin-top: 0;
	margin-bottom: 0.85rem;
}

.txinv-privacy--top {
	margin: 0 0 0.85rem;
}

/*
 * No inner scroll region on an open panel, deliberately. It was tried: an
 * open panel above the boxes can push the tool off a phone screen, and capping
 * its height fixes that by trapping the scroll inside a box whose top edge is
 * the summary you just clicked. The panel is closed by default, so anyone
 * looking at it opened it on purpose and wants to read it. Ordinary page
 * scrolling is the right answer.
 */

/* ---- glossary ----
 *
 * The page every "What is this?" points at. No JavaScript: it is a list of
 * definitions and there is nothing to press.
 */

.txinv-glossary-list {
	margin: 0;
	display: grid;
	gap: 1rem;
}

.txinv-glossary-item {
	padding: 0.9rem 1rem;
	border: 1px solid var(--txinv-line);
	border-radius: var(--txinv-radius);
	background: var(--txinv-sunken);
}

/* Room for the header when a What-is-this link jumps straight to a term. */
.txinv-glossary-item {
	scroll-margin-top: 5rem;
}

.txinv-glossary-item dt {
	margin: 0 0 0.35rem;
	font-weight: 700;
	font-size: 1.02rem;
}

.txinv-glossary-item dd {
	margin: 0;
}

.txinv-glossary-item dd p {
	margin: 0;
}

/*
 * The technical name, wherever it appears. Quieter than the plain answer
 * above it, because nobody needs it to understand the sentence.
 */
.txinv-what-also {
	font-size: 0.9rem;
	color: var(--txinv-muted);
}

.txinv-what > .txinv-what-also,
.txinv-glossary-item dd .txinv-what-also {
	margin: 0.4rem 0 0;
}

/* The single way out to the glossary, under an options panel. */
.txinv-what-more-line {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
}

.txinv-what-more-line a,
.txinv-what-more,
.txinv-term-link {
	color: var(--txinv-accent);
}

/*
 * A term inside a results table. Underlined on hover only: every row in the
 * group column would otherwise be a wall of blue rules.
 */
.txinv-term-link {
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

.txinv-term-link:hover,
.txinv-term-link:focus-visible {
	border-bottom-style: solid;
}