/* The ring and the switch: UV's ring status design (scripts/ring-status.js)
   on every checkbox, built by scripts/tdc-controls.js. Loaded on every page by
   layout.html, after controls.css. Every size and time is a token in
   variables.css, set from /sandbox/.

   The ring is the cream control line; the icon is the brand colour (a
   cross is red); its
   middle stays transparent. The checkbox itself sits invisibly over the
   drawing, so the keyboard and its label still work. While a save is out
   the site's one set of dots serves the control (scripts/dots.js,
   dots.css); a ring has none of its own (26 Oct). */

/* ── The ring ────────────────────────────────────────────────────────── */
.tdc-ring {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--control-line);
	line-height: 0;
}
.tdc-ring svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	stroke-width: 5;
}
.tdc-ring .ring {
	stroke: var(--control-line);
	transition: opacity 0.35s ease;
}
.tdc-ring .mark {
	stroke: var(--ring-accent, var(--color-primary));
	stroke-width: 10;
	stroke-dasharray: 100 200;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 0.35s ease;
}
.tdc-ring .mark.on { stroke-dashoffset: 0; }
/* Every cross is red, site-wide (UV, 26 Oct); its ring stays cream. */
.tdc-ring .mark.mark-cross { stroke: var(--color-error); }
/* The three-way switch's middle: a small grey dot. */
.tdc-ring .mark.mark-dot { stroke: var(--text-muted); }

/* The live text a screen reader hears ("Saving", "On", "Ticked"). */
.tdc-check .sr,
.tdc-switch .sr,
.tdc-tri .sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── The checkbox underneath ─────────────────────────────────────────
   Invisible, over the whole control, and still focusable. Three classes'
   weight, so a page's own checkbox rule (league.css .transfer-row, forms.css
   .field) cannot pull it back into view. */
.tdc-check > input.tdc-check-native[type="checkbox"],
.tdc-switch > input.tdc-check-native[type="checkbox"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

/* ── Ring: a tick against a person or a thing ────────────────────────
   Tick or empty. Smaller inside a table, where it sits in a row. */
.tdc-check {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: var(--rs, var(--ring-size));
	height: var(--rs, var(--ring-size));
	border-radius: var(--radius-round);
	vertical-align: middle;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: box-shadow 0.15s ease;
}
table .tdc-check { --rs: var(--ring-size-table); }
.tdc-check:hover { box-shadow: var(--glow-primary); }
.tdc-check:has(> .tdc-check-native:focus-visible) {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

/* ── Switch: a setting ───────────────────────────────────────────────
   An empty ring off, a tick on (UV, 26 Oct; it was a cross off). The knob
   is a ring; it slides to its side, and the track lights with it. --p runs from 0
   (off) to 1 (on), set by the script; the knob travels the switch's width
   less its height. */
.tdc-switch {
	--p: 0;
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: var(--switch-width);
	height: var(--switch-height);
	vertical-align: middle;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.tdc-switch-track {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: var(--control-border) solid color-mix(in srgb, var(--color-primary) calc(var(--p) * 100%), var(--control-line));
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--color-primary) calc(var(--p) * 12%), transparent);
	box-shadow: 0 0 calc(var(--p) * 16px) color-mix(in srgb, var(--color-primary) calc(var(--p) * 30%), transparent);
	transition: box-shadow 0.15s ease;
}
.tdc-switch:hover .tdc-switch-track { box-shadow: var(--glow-primary); }
.tdc-switch:has(> .tdc-check-native:focus-visible) .tdc-switch-track {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}
.tdc-switch-knob {
	position: absolute;
	top: calc(var(--switch-height) * 0.09375);
	left: calc(var(--switch-height) * 0.09375);
	width: calc(var(--switch-height) * 0.8125);
	height: calc(var(--switch-height) * 0.8125);
	transform: translateX(calc(var(--p) * (var(--switch-width) - var(--switch-height))));
	will-change: transform;
}

/* ── Three-way switch: left, nobody, right (24 Oct) ──────────────────
   A switch a little longer than usual, with three faint stops. The knob is
   a ring: empty in the middle, a tick at either end. --p runs 0 (left) to 1
   (right) and --lit 0 in the middle to 1 at an end, both set by the script. */
.tdc-tri {
	--tri-color: var(--color-primary);
	--ring-accent: var(--tri-color);
	--p: 0.5;
	--lit: 0;
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: var(--tri-width);
	height: var(--tri-height);
	vertical-align: middle;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* data-tone="warning": the lag on the team card. */
.tdc-tri[data-tone="warning"] { --tri-color: var(--color-warning); }
.tdc-tri-track {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: var(--control-border) solid color-mix(in srgb, var(--tri-color) calc(var(--lit) * 100%), var(--control-line));
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--tri-color) calc(var(--lit) * 12%), transparent);
	box-shadow: 0 0 calc(var(--lit) * 16px) color-mix(in srgb, var(--tri-color) calc(var(--lit) * 30%), transparent);
	transition: box-shadow 0.15s ease;
}
.tdc-tri:hover .tdc-tri-track { box-shadow: var(--glow-primary); }
.tdc-tri:has(> .tdc-tri-native:focus-visible) .tdc-tri-track {
	outline: 2px solid var(--tri-color);
	outline-offset: 3px;
}
.tdc-tri-stops {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 calc(var(--tri-height) / 2 - 2px);
	pointer-events: none;
}
.tdc-tri-stops i { width: 4px; height: 4px; border-radius: var(--radius-round); background: var(--control-line); opacity: 0.35; }
.tdc-tri[data-at="left"] .tdc-tri-stops i:nth-child(1),
.tdc-tri[data-at="middle"] .tdc-tri-stops i:nth-child(2),
.tdc-tri[data-at="right"] .tdc-tri-stops i:nth-child(3) { opacity: 0; }
.tdc-tri-knob {
	position: absolute;
	top: calc(var(--tri-height) * 0.09375);
	left: calc(var(--tri-height) * 0.09375);
	width: calc(var(--tri-height) * 0.8125);
	height: calc(var(--tri-height) * 0.8125);
	transform: translateX(calc(var(--p) * (var(--tri-width) - var(--tri-height))));
	will-change: transform;
}
.tdc-tri > select.tdc-tri-native {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.is-disabled.tdc-check,
.is-disabled.tdc-switch,
.is-disabled.tdc-tri { opacity: 0.4; pointer-events: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
	.tdc-ring .ring,
	.tdc-ring .mark { transition: none; }
}