/*
 * Train look: the floating timer (train-look/timer.php + train-timer.js). Self-contained: every rule is scoped to
 * .trw-timer and it carries its own tokens, because it also runs on the health-check pages (not Train pages).
 * Fixed bottom-left (the site's own floating controls are bottom-right). Motion only without reduced motion.
 */
.trw-timer {
	--trw-deep: #0c2236;
	--trw-ink: #1b6fae;
	--trw-blue: #2b8fd6;
	--trw-sky: #8fd0ff;
	--trw-copy-d: #c9dbea;
	--trw-muted-d: #9fbad0;
	--trw-display: var(--sl-display, "Sneaky Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
	--trw-text: var(--sl-text, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 60;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	max-width: calc(100vw - 40px);
	font-family: var(--trw-text);
	-webkit-font-smoothing: antialiased;
}
.trw-timer[hidden] { display: none !important; }
.trw-timer *, .trw-timer *::before, .trw-timer *::after { box-sizing: border-box; }
.trw-timer .trw-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trw-timer .trw-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.trw-timer .trw-timer-in { position: relative; display: grid; gap: 8px; width: 380px; max-width: calc(100vw - 110px); padding: 14px 16px 12px; border-radius: 22px; color: #fff; overflow: hidden;
	background: radial-gradient(60% 90% at 90% 0%, rgba(43, 143, 214, .35), rgba(43, 143, 214, 0) 70%), linear-gradient(160deg, #0b1f32, #123b5f);
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08); }
.trw-timer .trw-timer-in::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--trw-rest-p, 0) * 100%); background: linear-gradient(90deg, #6ec4e8, #3fb39d); }
.trw-timer.is-folded .trw-timer-in { display: none; }
.trw-timer .trw-timer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.trw-timer .trw-timer-row--rest { padding-top: 10px; border-top: 1px solid rgba(143, 208, 255, .2); }
.trw-timer .trw-timer-l { min-width: 62px; margin-right: 6px; font: 800 12px/1.2 var(--trw-text); letter-spacing: .12em; text-transform: uppercase; color: var(--trw-sky); }
.trw-timer .trw-timer-clock { margin-right: auto; font: 800 2rem/1 var(--trw-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.trw-timer .trw-timer-clock--rest { font-size: 1.6rem; color: var(--trw-copy-d); }
.trw-timer.is-resting .trw-timer-clock--rest { color: #fff; }
.trw-timer .trw-timer-presets { display: flex; flex-wrap: wrap; gap: 6px; order: 5; width: 100%; }
.trw-timer .trw-tbtn, .trw-timer .trw-tbtn:is(:hover, :focus, :active, :visited) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; margin: 0; padding: 0 14px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font: 800 14px/1 var(--trw-text); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: none; }
.trw-timer .trw-tbtn:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }
.trw-timer .trw-tbtn:focus-visible { outline: 3px solid var(--trw-sky); outline-offset: 2px; }
.trw-timer .trw-tbtn--main, .trw-timer .trw-tbtn--main:is(:hover, :focus, :active) { border-color: transparent; background: var(--trw-ink); }
.trw-timer .trw-tbtn--main:hover { background: var(--trw-blue); }
.trw-timer.is-running .trw-tbtn--main .trw-ic { display: none; }
.trw-timer .trw-tbtn--preset.is-suggested { border-color: var(--trw-sky); background: rgba(143, 208, 255, .2); }
.trw-timer .trw-timer-note { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--trw-muted-d); }
.trw-timer .trw-timer-note span { color: #fff; font-weight: 700; }
.trw-timer .trw-timer-fold, .trw-timer .trw-timer-fold:is(:hover, :focus, :active) { display: inline-flex; align-items: center; gap: 8px; min-width: 56px; min-height: 56px; margin: 0; padding: 0 18px 0 16px; border: 0; border-radius: 999px; background: var(--trw-deep); color: #fff; font: 800 15px/1 var(--trw-display); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1); }
.trw-timer .trw-timer-fold .trw-ic { width: 22px; height: 22px; color: var(--trw-sky); }
.trw-timer .trw-timer-fold:focus-visible { outline: 3px solid var(--trw-blue); outline-offset: 3px; }
.trw-timer:not(.is-folded) .trw-mini { display: none; }
/* Open: the fold button sits on the panel's corner as a small "hide" control. */
.trw-timer:not(.is-folded) .trw-timer-fold { position: absolute; top: -16px; right: -16px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
.trw-timer:not(.is-folded) .trw-timer-fold .trw-ic { width: 20px; height: 20px; }
.trw-timer.is-done .trw-timer-in { box-shadow: 0 0 0 3px #3fb39d, 0 30px 60px -24px rgba(0, 0, 0, .75); }
.trw-timer.is-done .trw-timer-clock--rest { color: #8ff0c9; }
@media (prefers-reduced-motion: no-preference) {
	.trw-timer.is-done .trw-timer-in { animation: trw-done .6s cubic-bezier(.2, .7, .2, 1) 3; }
	.trw-timer .trw-timer-in::after { transition: width .25s linear; }
}
@keyframes trw-done { 50% { transform: scale(1.03); } }
@media (max-width: 640px) {
	.trw-timer { left: 12px; bottom: 12px; flex-direction: column-reverse; align-items: flex-start; max-width: calc(100vw - 24px); }
	.trw-timer:not(.is-folded) { right: 12px; }
	.trw-timer .trw-timer-in { width: 100%; max-width: none; }
	.trw-timer .trw-timer-clock { font-size: 1.7rem; }
	.trw-timer:not(.is-folded) .trw-timer-fold { top: -18px; right: 8px; }
	/* Health checks: the folded pill clears the form's Calculate area when that reaches the bottom of the screen.
	 * Cardio: it clears the planner's own sticky result bar. Open anywhere: it sits above the "Ask a Helper" button. */
	.trw-timer--assess, .trw-timer--cardio { bottom: 84px; }
	.trw-timer:not(.is-folded) { bottom: 124px; }
}
@media print { .trw-timer { display: none !important; } }