/*!
 * @Rank – Diff / Text Compare: the tool's own rules.
 *
 * The palette, header, cards, buttons, notices and toast all come from
 * assets/css/atrank-core.css. Only what is specific to this tool is here, and
 * every rule is anchored on .atrank-diff.
 *
 * Three rules here are function rather than decoration:
 *   · every diff row preserves its whitespace exactly (`white-space: pre-wrap`)
 *     — a tool whose whole point is finding a trailing space must not let the
 *     browser collapse one;
 *   · the marks for invisible characters are drawn in the accent at reduced
 *     opacity so they read as annotation rather than as content;
 *   · the explanation of why two lines look alike sits directly UNDER the pair
 *     it describes, spanning both columns, rather than in a list at the bottom.
 */

.atrank-diff .atrank-diff-inputs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 9px;
}
@media (min-width: 760px) {
	.atrank-diff .atrank-diff-inputs {
		grid-template-columns: 1fr 1fr;
	}
}

.atrank-diff .atrank-diff-inputwrap {
	display: block;
	min-width: 0;
}
.atrank-diff .atrank-diff-inputlabel {
	display: block;
	margin-bottom: 3px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--dim);
}
.atrank-diff .atrank-diff-input {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: min(150px, max(96px, 15vh));
	max-height: 34vh;
	resize: vertical;
	padding: 8px 10px;
	border: 1px solid var(--line2);
	border-radius: var(--r);
	background: var(--inset);
	color: var(--txt);
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.55;
	tab-size: 4;
}
.atrank-diff .atrank-diff-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--ring);
}

.atrank-diff .atrank-diff-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid var(--line);
}
.atrank-diff .atrank-diff-spacer {
	flex: 1 1 auto;
}
.atrank-diff .atrank-diff-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted);
	cursor: pointer;
}
.atrank-diff .atrank-diff-check input {
	width: 15px;
	height: 15px;
	accent-color: var(--accent);
}

/* ── The result ───────────────────────────────────────────────────────── */
.atrank-diff .atrank-diff-resultcard {
	margin-top: 10px;
}
.atrank-diff .atrank-cardhead {
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
}
.atrank-diff .atrank-cardhead h2 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--accent);
}

.atrank-diff .atrank-diff-rows {
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: auto;
	max-height: 62vh;
}
.atrank-diff .atrank-diff-rows:empty {
	display: none;
}

.atrank-diff .atrank-diff-row {
	display: grid;
	grid-template-columns: 4ch minmax(0, 1fr) 4ch minmax(0, 1fr);
	gap: 0;
	border-bottom: 1px solid var(--line);
}
.atrank-diff .atrank-diff-row:last-child {
	border-bottom: none;
}

.atrank-diff .atrank-diff-no {
	padding: 2px 6px;
	text-align: right;
	font-family: var(--mono);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--dim);
	background: var(--panel2);
	border-right: 1px solid var(--line);
	user-select: none;
}

/* pre-wrap, not pre-line: a tool for finding a trailing space must not let the
   browser collapse one. */
.atrank-diff .atrank-diff-cell {
	padding: 2px 8px;
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	tab-size: 4;
	min-width: 0;
}
.atrank-diff .atrank-diff-cell.is-left {
	border-right: 1px solid var(--line);
}
.atrank-diff .atrank-diff-cell.is-blank {
	background: repeating-linear-gradient(135deg,
		transparent 0 6px, var(--panel2) 6px 12px);
}

.atrank-diff .atrank-diff-row.is-removed .atrank-diff-cell.is-left,
.atrank-diff .atrank-diff-row.is-changed .atrank-diff-cell.is-left {
	background: var(--err-soft);
}
.atrank-diff .atrank-diff-row.is-added .atrank-diff-cell.is-right,
.atrank-diff .atrank-diff-row.is-changed .atrank-diff-cell.is-right {
	background: var(--ok-soft);
}

.atrank-diff .atrank-diff-word {
	border-radius: 3px;
	padding: 0 1px;
}
.atrank-diff .atrank-diff-word.is-del {
	background: var(--err);
	color: var(--on-accent);
}
.atrank-diff .atrank-diff-word.is-ins {
	background: var(--ok);
	color: var(--on-accent);
}

/* Annotation, not content: reduced opacity so a marked-up line still reads. */
.atrank-diff .atrank-diff-mark {
	color: var(--accent);
	opacity: 0.42;
	cursor: help;
}
.atrank-diff .atrank-diff-mark.is-invisible {
	color: var(--warn);
	opacity: 1;
	font-weight: 700;
}
.atrank-diff .atrank-diff-mark.is-bidi,
.atrank-diff .atrank-diff-mark.is-homoglyph {
	color: var(--err);
	opacity: 1;
	font-weight: 700;
	text-decoration: underline wavy;
}

/* Under the pair it explains, spanning both columns — not in a list at the
   bottom that nobody connects to the line it is about. */
.atrank-diff .atrank-diff-why {
	grid-column: 1 / -1;
	padding: 5px 10px 5px 34px;
	font-size: 11.5px;
	line-height: 1.45;
	border-bottom: 1px solid var(--line);
	background: var(--panel2);
	color: var(--muted);
}
.atrank-diff .atrank-diff-why.is-warn {
	background: var(--warn-soft);
	color: var(--warn);
}
.atrank-diff .atrank-diff-why.is-err {
	background: var(--err-soft);
	color: var(--err);
}
.atrank-diff .atrank-diff-why strong {
	font-weight: 700;
}

@media (max-width: 700px) {
	.atrank-diff .atrank-diff-row {
		grid-template-columns: 3.5ch minmax(0, 1fr);
	}
	/* Stacked, so the second pair falls under the first rather than beside it. */
	.atrank-diff .atrank-diff-cell.is-left {
		border-right: none;
	}
}