/*
 * Tool pages. Loaded only on pages using the "Tool page" template
 * (see hardline_tools_head() in functions.php).
 *
 * Colours come from the tokens in main.css, so dark mode needs no extra rules.
 */

.tool-panel {
	margin: 1.6em 0 2em;
	padding: 22px 22px 24px;
	border: 1px solid var(--line);
	border-radius: 14px;
}

/*
 * Required: the panel's own `display` below would otherwise beat [hidden],
 * leaving a tool visible before tools.js has wired it up. Same reason
 * main.css carries .comment-panel[hidden].
 */
.tool-panel[hidden] {
	display: none;
}

.tool-form {
	margin: 0;
}

.tool-field {
	margin: 0 0 20px;
}

.tool-fieldset {
	border: 0;
	padding: 0;
}

.tool-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-weight: 600;
	font-size: .95em;
}

.tool-input-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

.tool-input {
	flex: 1 1 8em;
	min-width: 0;
	padding: 11px 14px;
	font: inherit;
	font-size: 1.05em;
	color: var(--fg);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
}

.tool-input:focus-visible,
.tool-unit:focus-visible,
.tool-submit:focus-visible,
.tool-choice input:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 2px;
}

.tool-units {
	display: inline-flex;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
}

.tool-unit {
	padding: 0 18px;
	font: inherit;
	font-weight: 600;
	color: var(--muted);
	background: none;
	border: 0;
	cursor: pointer;
}

.tool-unit + .tool-unit {
	border-left: 1px solid var(--line);
}

.tool-unit[aria-pressed="true"] {
	color: var(--bg);
	background: var(--fg);
}

.tool-choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tool-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	cursor: pointer;
}

.tool-choice:has(input:checked) {
	border-color: var(--fg);
}

.tool-choice input {
	accent-color: var(--fg);
	margin: 0;
}

.tool-submit {
	margin-top: 4px;
	padding: 11px 28px;
	font: inherit;
	font-weight: 600;
	color: var(--bg);
	background: var(--fg);
	border: 1px solid var(--fg);
	border-radius: 999px;
	cursor: pointer;
}

.tool-submit:hover {
	opacity: .88;
}

.tool-hint {
	margin: 10px 0 0;
	font-size: .85em;
	color: var(--muted);
}

.tool-result:empty {
	display: none;
}

.tool-result {
	margin: 0 0 2em;
}

.tool-result-card {
	padding: 20px 22px;
	background: var(--bubble);
	border-radius: 14px;
}

.tool-result-label {
	margin: 0 0 6px;
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--muted);
}

.tool-result-figure {
	margin: 0;
	font-size: 2.1em;
	line-height: 1.15;
	font-weight: 600;
}

.tool-result-basis {
	margin: 8px 0 0;
	font-size: .92em;
	color: var(--muted);
}

.tool-result-notes {
	margin: 14px 0 0;
	padding-left: 1.1em;
	font-size: .92em;
	color: var(--muted);
}

.tool-result-notes li + li {
	margin-top: 6px;
}

.tool-result-error {
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-left-width: 3px;
	border-left-color: var(--fg);
	border-radius: 0 10px 10px 0;
	font-size: .95em;
	color: var(--muted);
}

/* No-JS reference table. It lives in the page content, not the template, so the
   editor owns the numbers; tools.js hides it once the panel takes over. */
.tool-fallback {
	margin: 1.6em 0;
}

.tool-fallback[hidden] {
	display: none;
}

.tool-fallback figcaption {
	margin: 0 0 8px;
	font-size: .9em;
	color: var(--muted);
}

/* ── Cost per use: example presets ─────────────────────────────────────────
   Chips rather than a select, so the four examples are visible without an
   interaction. They only fill the form; the numbers stay editable. */

.tool-presets {
	margin: 0 0 20px;
}

.tool-presets-label {
	display: block;
	margin: 0 0 8px;
	font-size: .85em;
	color: var(--muted);
}

.tool-presets-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tool-preset {
	padding: 7px 14px;
	font: inherit;
	font-size: .88em;
	color: var(--fg);
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
}

.tool-preset:hover {
	border-color: var(--fg);
}

.tool-preset:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 2px;
}

/* ── Cost per use: the two options side by side ────────────────────────── */

.tool-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 20px;
}

.tool-option {
	margin: 0;
	padding: 16px 16px 4px;
	border: 1px solid var(--line);
	border-radius: 12px;
}

.tool-option-legend {
	padding: 0 6px;
}

.tool-label-sub {
	font-weight: 400;
	font-size: .85em;
	color: var(--muted);
}

/* ── Cost per use: the comparison ──────────────────────────────────────── */

.tool-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 14px 0 0;
}

/* The cheaper side gets a surface of its own so the eye lands on it first.
   Border and background only — no accent colour, so it reads the same in
   both themes. */
.tool-compare-side {
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: 12px;
}

.tool-compare-side[data-cheaper="true"] {
	background: var(--bg);
	border-color: var(--line);
}

.tool-compare-name {
	margin: 0 0 4px;
	font-size: .85em;
	font-weight: 600;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.tool-result-verdict {
	margin: 16px 0 0;
	font-weight: 600;
}

.tool-compare-table {
	width: 100%;
	margin: 16px 0 0;
	border-collapse: collapse;
	font-size: .92em;
}

.tool-compare-table caption {
	margin: 0 0 6px;
	font-size: .85em;
	color: var(--muted);
	text-align: left;
}

.tool-compare-table th,
.tool-compare-table td {
	padding: 7px 0;
	border-bottom: 1px solid var(--line);
	text-align: right;
}

.tool-compare-table thead th {
	font-size: .85em;
	font-weight: 600;
	color: var(--muted);
}

.tool-compare-table th:first-child,
.tool-compare-table td:first-child {
	font-weight: 400;
	color: var(--muted);
	text-align: left;
}

.tool-compare-table tbody tr:last-child th,
.tool-compare-table tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 640px) {
	.tool-options,
	.tool-compare {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) {
	.tool-panel {
		padding: 18px;
	}

	.tool-result-figure {
		font-size: 1.8em;
	}

	.tool-option {
		padding: 14px 14px 2px;
	}
}

/* ── Reflex test ────────────────────────────────────────────────────────────
   The canvas colours live here rather than in games.js so the dark theme is a
   CSS concern. games.js reads these four values back out with
   getComputedStyle, on resize and when the theme class changes. */

.game {
	--game-field: #eceef2;
	--game-edge: #1a1a1f;
	--game-block: #2f6fed;
	--game-player: #d92d20;
}

.dark .game {
	--game-field: #14161a;
	--game-edge: #5b6472;
	--game-block: #5b9bff;
	--game-player: #ff5a4d;
}

.game-hud {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 12px;
}

.game-stat {
	margin: 0;
}

.game-stat-label {
	display: block;
	font-size: .78em;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
}

.game-stat-value {
	font-size: 1.15em;
	/* Stops the clock twitching as the digits change. */
	font-variant-numeric: tabular-nums;
}

.game-arena {
	position: relative;
}

.game-canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 740 / 360;
	/* Without this, dragging on a touch screen scrolls the page instead of
	   steering. Belt and braces with preventDefault in games.js. */
	touch-action: none;
}

/* The touch control strip.
   Hidden unless the pointer is coarse: a mouse reaches anywhere in the field
   directly, so on a desktop it would be a band of dead space. The height is fixed
   rather than tied to the field's aspect ratio because the drag gain is taken from
   the strip's WIDTH, which is the field's width — so one finger pixel moves the
   block one screen pixel on both axes, and the strip's height only decides how far
   one uninterrupted swipe can reach. */
.game-pad {
	display: none;
	align-items: center;
	justify-content: center;
	height: 132px;
	margin: 10px 0 0;
	background: var(--bubble);
	border: 1px solid var(--line);
	border-radius: 12px;
	cursor: pointer;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.game-pad-hint {
	font-size: .85em;
	color: var(--muted);
	/* The hint must never eat a pointer event aimed at the strip. */
	pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
	.game-pad {
		display: flex;
	}
}

/* Where the run that just ended sits in the modelled field.
   Carried in the player's own red, the colour of the square the reader was
   steering, so the result reads as theirs rather than as another readout. It is
   also the only saturated colour on an otherwise black-and-white page, which is
   what makes the number the first thing the eye lands on after a run.
   The explicit [hidden] rule follows the lesson from .tool-panel: a display
   declaration on the element itself beats the browser's [hidden] default, and
   that turned a hidden panel into a visible one once already. */
.game-rank {
	margin: 14px 0 0;
	padding: 14px 16px 16px;
	background: var(--bubble);
	border: 1px solid var(--line);
	border-left: 4px solid var(--game-player, #d92d20);
	border-radius: 12px;
}

.game-rank[hidden] { display: none; }

.game-rank-line { margin: 0 0 10px; }

.game-rank-value {
	font-size: 2.1em;
	font-weight: 800;
	line-height: 1;
	color: var(--game-player, #d92d20);
	margin-right: 8px;
	letter-spacing: -.02em;
}

.game-rank-text { color: var(--muted); font-size: .95em; }

.game-rank-bar {
	height: 14px;
	background: var(--game-field, #f4f5f7);
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
}

.game-rank-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--game-player, #d92d20);
	border-radius: 999px;
}

.game-rank-scale {
	display: flex;
	justify-content: space-between;
	margin: 5px 0 0;
	font-size: .75em;
	font-weight: 600;
	color: var(--muted);
}

.game-rank-note { margin: 10px 0 0; font-size: .85em; color: var(--muted); }

/* The overlay sits over the whole canvas rather than the drawn capsule, because
   the capsule's outline is only known to the script. The corners it covers are
   transparent anyway. */
.game-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	text-align: center;
	background: var(--bubble);
	border-radius: 10px;
}

/* Required: the rule above sets display, which would otherwise beat the
   [hidden] attribute and leave the start screen up during play. Same reason
   .tool-panel needs its own rule. */
.game-overlay[hidden] {
	display: none;
}

.game-overlay-title {
	margin: 0;
	font-size: 1.05em;
	font-weight: 600;
}

.game-overlay-body {
	margin: 0;
	max-width: 34ch;
	font-size: .9em;
	color: var(--muted);
}

.game-button {
	padding: 10px 22px;
	font: inherit;
	font-weight: 600;
	color: var(--bg);
	background: var(--fg);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.game-button:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 3px;
}

.game-hint {
	margin: 12px 0 0;
	font-size: .85em;
	color: var(--muted);
}

/* Two hints, one per control scheme. Picking with CSS means the right one shows
   before any script runs, and the wrong one is never read out. */
.game-hint-touch {
	display: none;
}

@media (hover: none), (pointer: coarse) {
	.game-hint-mouse {
		display: none;
	}

	.game-hint-touch {
		display: block;
	}
}

.game-status {
	margin: 8px 0 0;
	font-size: .85em;
	color: var(--muted);
}

@media (max-width: 640px) {
	.game-hud {
		gap: 18px;
	}
}