/* The split calculator (SPEC 8, "Tools"), on the clubs' sites and the landing site. Kept apart
   from app.css so the landing site can use it too; it relies on the --gp-* tokens, which the
   landing site maps to its own (landing.css). */

/* --- Split calculator (SPEC 8, "Tools") -------------------------------------------------------
	A zone colour ramp from easy to flat out, cool to warm. Each zone sets --zone; the cards use
	it for their edge and badge, and --zone-ink is the text that sits on it. The ramp is darker in
	light mode and lighter in dark mode, so it keeps its contrast either way. */
.calc-page {
	--zone-ink: #ffffff;
	max-width: 62rem;
	margin-inline: auto;
}

.calc-zone[data-zone="ut3"] { --zone: #5a6f7b; }
.calc-zone[data-zone="ut2"] { --zone: #2d6fa8; }
.calc-zone[data-zone="ut1"] { --zone: #137a4c; }
.calc-zone[data-zone="at"] { --zone: #9a6718; }
.calc-zone[data-zone="tr"] { --zone: #bd5520; }
.calc-zone[data-zone="ac"] { --zone: #ab332b; }

:root[data-theme="dark"] .calc-page {
	--zone-ink: #0b1f2b;
}

:root[data-theme="dark"] .calc-zone[data-zone="ut3"] { --zone: #9db3c0; }
:root[data-theme="dark"] .calc-zone[data-zone="ut2"] { --zone: #74b2e8; }
:root[data-theme="dark"] .calc-zone[data-zone="ut1"] { --zone: #6bd69b; }
:root[data-theme="dark"] .calc-zone[data-zone="at"] { --zone: #e2ad52; }
:root[data-theme="dark"] .calc-zone[data-zone="tr"] { --zone: #f0905a; }
:root[data-theme="dark"] .calc-zone[data-zone="ac"] { --zone: #f0807a; }

.calc-layout {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 64rem) {
	.calc-layout {
		grid-template-columns: 20rem minmax(0, 1fr);
		align-items: start;
		gap: 2.5rem;
	}

	.calc-inputs {
		position: sticky;
		top: 5rem;
	}
}

/* Two choices side by side: Split or Heart rate, a personal best or a target. */
.calc-switch {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1.25rem;
	padding: 0.25rem;
	border-radius: var(--gp-radius);
	background: var(--gp-surface-2);
}

.calc-switch button {
	flex: 1;
	margin: 0;
	padding: 0.55rem 0.5rem;
	border: none;
	border-radius: calc(var(--gp-radius) - 3px);
	background: transparent;
	color: var(--gp-muted);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
}

.calc-switch button[aria-selected="true"] {
	background: var(--gp-select);
	color: var(--gp-on-select);
}

/* The inner pair sits closer to the fields it changes, so it reads as part of them. */
.calc-switch-plain {
	background: none;
	padding: 0;
	gap: 0.5rem;
}

.calc-switch-plain button {
	border: 1.5px solid var(--gp-line);
	background: var(--gp-surface);
}

.calc-field {
	margin-bottom: 1rem;
}

.calc-field > label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.calc-unit {
	color: var(--gp-muted);
	font-weight: 400;
}

.calc-field select,
.calc-field input {
	margin-bottom: 0;
}

.calc-time {
	margin-bottom: 1rem;
	padding: 0;
	border: none;
}

.calc-time legend {
	margin-bottom: 0.25rem;
	padding: 0;
	font-weight: 600;
}

.calc-time-parts {
	display: flex;
	align-items: end;
	gap: 0.4rem;
}

.calc-part {
	flex: 1;
	margin: 0;
}

.calc-part label {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--gp-muted);
	font-size: 0.8rem;
}

.calc-part input {
	margin-bottom: 0;
	padding-inline: 0.4rem;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.calc-sep {
	padding-bottom: 0.55rem;
	font-size: 1.3rem;
	font-weight: 700;
}

/* The one number everything else follows from, so it's the loudest thing in the column. */
.calc-readout {
	margin: 0;
	padding: 1rem;
	border-radius: var(--gp-radius);
	background: var(--gp-ink);
	color: #ffffff;
	text-align: center;
}

:root[data-theme="dark"] .calc-readout {
	background: var(--gp-surface-2);
	box-shadow: inset 0 0 0 1px var(--gp-line);
}

.calc-readout-label,
.calc-readout-note {
	display: block;
	color: #b8cedb;
	font-size: 0.85rem;
}

:root[data-theme="dark"] .calc-readout-label,
:root[data-theme="dark"] .calc-readout-note {
	color: var(--gp-muted);
}

.calc-readout output {
	display: block;
	margin: 0.15rem 0;
	font-family: var(--gp-display);
	font-size: 2.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

.calc-zones h2 {
	margin-bottom: 1rem;
}

.calc-zone-list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.calc-zone-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.calc-zone {
	display: grid;
	width: 100%;
	margin: 0;
	padding: 0.75rem 0.9rem;
	grid-template-areas:
		"head range"
		"desc range";
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.15rem 1rem;
	align-items: center;
	border: 1px solid var(--gp-line);
	border-left: 5px solid var(--zone);
	border-radius: var(--gp-radius);
	background: var(--gp-surface);
	color: var(--gp-text);
	text-align: left;
	cursor: pointer;
}

.calc-zone:hover {
	border-color: var(--zone);
	border-left-color: var(--zone);
	background: var(--gp-surface);
}

/* The one you're working to, so you can find it again without reading every line. Tinted with
	the zone's own colour rather than the club's green, so the card stays all of a piece. */
.calc-zone[aria-pressed="true"] {
	background: color-mix(in srgb, var(--zone) 12%, var(--gp-surface));
	box-shadow: inset 0 0 0 1px var(--zone);
}

.calc-zone-head {
	grid-area: head;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
}

.calc-zone-name {
	font-family: var(--gp-display);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1;
}

.calc-zone-full {
	color: var(--gp-text);
	font-size: 0.95rem;
}

.calc-zone-pct {
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	background: var(--zone);
	color: var(--zone-ink);
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
}

.calc-zone-desc {
	grid-area: desc;
	color: var(--gp-muted);
	font-size: 0.85rem;
}

.calc-zone-range {
	grid-area: range;
	font-family: var(--gp-display);
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.1;
	text-align: right;
	white-space: nowrap;
}

/* A phone is too narrow for the times beside the name, so they go underneath, big and clear. */
@media (max-width: 30rem) {
	.calc-zone {
		grid-template-areas:
			"head"
			"desc"
			"range";
		grid-template-columns: minmax(0, 1fr);
		gap: 0.1rem;
	}

	.calc-zone-range {
		margin-top: 0.3rem;
		text-align: left;
		white-space: normal;
	}
}

.calc-foot {
	font-size: 0.85rem;
}

.calc-source {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
}