:root{
	--blue: #1976d2;
	--blue-700: #1565c0;
	--red: #d32f2f;
	--green: #2e7d32;
	--yellow: #fbc02d;
	 /* pastel ratio colors (brighter/pastel).
		 Use pastel variants by default, but avoid them on yellow backgrounds. */
	 --ratio-red-pastel: #ff9b9b; /* for values > 1 (red-ish pastel) */
	 --ratio-green-pastel: #7ef1b2; /* for values < 1 (green pastel) */
	--bg: #0b1020;
	--glass: rgba(255,255,255,0.06);
	--accent: #00e5ff;
	--shadow: 0 8px 30px rgba(2,6,23,0.6);
	--radius: 16px;
}

*{box-sizing:border-box}
html,body,#app{height:100%;}
body{
	margin:0;
	background:linear-gradient(180deg,#04051a 0%, #0b1020 100%);
	font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	color: #fff;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.app{
	display:flex;
	height:100vh;
	width:100vw;
	align-items:stretch;
}

/* make the root support vertical scroll snapping to reveal the saves page */
body { scroll-snap-type: y mandatory; overflow-y: auto }
.page { scroll-snap-align: start; min-height:100vh }

.saves-page{display:flex;align-items:center;justify-content:center;padding:48px}
.saves-inner{width:720px;max-width:94%;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.03));padding:22px;border-radius:12px;box-shadow:var(--shadow)}
.saves-inner h2{margin:0 0 12px 0}
.save-row{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px dashed rgba(255,255,255,0.04)}
.save-row.special{background:rgba(255,255,255,0.01);border-radius:8px;margin-bottom:10px}
.save-date{flex:0 0 160px;color:rgba(255,255,255,0.85);font-weight:600}
.save-value{flex:1;color:rgba(255,255,255,0.7);font-variant-numeric:tabular-nums}
.save-actions{display:flex;gap:8px}
.save-actions .delete-save{background:transparent;color:rgba(255,120,120,0.95)}
.save-actions .delete-save:hover{color:#ff6b6b}
.saves-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

.display-area{
	width:75%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:48px;
}

.time-field{
	width:100%;
	height:80vh;
	border-radius:var(--radius);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	font-weight:700;
	box-shadow:var(--shadow);
	transition:background-color .25s ease,color .25s ease,box-shadow .15s ease;
	background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.04));
	backdrop-filter: blur(6px) saturate(120%);
}

.controls{
	width:25%;
	padding:36px 20px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.controls-inner{
	width:100%;
	max-width:220px;
	/* lighter background for better contrast on low-contrast screens */
	background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.03));
	border-radius:14px;
	padding:18px;
	box-shadow: 0 6px 20px rgba(2,6,23,0.5);
}

.color-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:56px;
	height:56px;
	flex: 0 0 56px; /* fixed square, do not grow or shrink */
	min-width:56px;
	min-height:56px;
	aspect-ratio:1 / 1;
	box-sizing:border-box;
	padding:0;
	border-radius:50%;
	border:0;
	margin:6px;
	background:transparent;
	cursor:pointer;
	transition:transform .16s cubic-bezier(.2,.9,.2,1), box-shadow .12s ease, outline-color .12s ease;
	transform-origin:center center;
}
.color-btn:active{transform:scale(.98)}
.color-btn:focus{outline:2px solid rgba(255,255,255,0.06); outline-offset:4px}

.button-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
.button-row .color-btn{margin:0}

.button-row .color-btn{flex-shrink:0}

.dot{
	width:34px;
	height:34px;
	flex: 0 0 34px; /* fixed square for inner colored dot */
	min-width:34px;
	min-height:34px;
	aspect-ratio:1 / 1;
	border-radius:50%;
	display:block;
	box-shadow:0 6px 18px rgba(2,6,23,0.28);
	border:0; /* remove concentric ring */
}

/* prevent form/browser defaults from affecting sizing */
.color-btn, .color-btn .dot { -webkit-appearance: none; appearance: none; line-height:0 }

.color-btn.active{
	/* grow slightly instead of moving vertically */
	transform:scale(1.12);
	box-shadow:0 12px 30px rgba(2,6,23,0.35);
	border:0;
}

/* darken the dot itself when active so it mixes with background */
.color-btn.active .dot{
	filter:brightness(.7) saturate(.95);
	box-shadow: inset 0 6px 18px rgba(0,0,0,0.35), 0 10px 24px rgba(0,0,0,0.35);
	transform:scale(1.08);
}

/* subtle pulse when a button becomes active */
@keyframes pulse-pop {
    0% { transform: scale(0.98); opacity: 0.95 }
    50% { transform: scale(1.12); opacity: 1 }
    100% { transform: scale(1.08); opacity: 1 }
}
.color-btn.active{animation: pulse-pop 260ms cubic-bezier(.2,.9,.2,1) both}

.spacer{height:8px}

.small-legend{margin-top:12px;font-size:12px;color:rgba(255,255,255,0.8)}
.legend-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.legend-label{margin-left:8px;flex:1}
.legend-value{font-variant-numeric:tabular-nums;font-weight:600}
.legend-color{width:14px;height:14px;border-radius:4px;border:2px solid rgba(0,0,0,0.15);display:inline-block}
.legend-row .blue{background:var(--blue)}
.legend-row .red{background:var(--red)}
.legend-row .green{background:var(--green)}
.legend-row .yellow{background:var(--yellow)}

/* Saved-list timer swatches (match legend look) */
.save-timer .legend-color{width:12px;height:12px;border-radius:3px;display:inline-block;border:2px solid rgba(0,0,0,0.12);flex:0 0 12px;margin-right:8px}
.save-timer .legend-color.blue{background:var(--blue)}
.save-timer .legend-color.red{background:var(--red)}
.save-timer .legend-color.green{background:var(--green)}
.save-timer .legend-color.yellow{background:var(--yellow)}

.legend-label{cursor:pointer}

/* timer label shown above the large time field */
.timer-label{
	font-size:3.2vmin;
	text-transform:uppercase;
	letter-spacing:2px;
	margin-bottom:6px;
	color:inherit; /* inherit white/black depending on background */
	font-weight:700;
}

/* edit-timer button in the corner of the time card */
.edit-time-btn{
	position:absolute;
	right:18px;
	top:18px;
	width:36px;
	height:36px;
	border-radius:8px;
	border:0;
	background:transparent; /* hidden unless hovered */
	color:inherit;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	font-size:14px;
	transition:background .12s ease, transform .12s ease;
}
.edit-time-btn:hover, .edit-time-btn:focus{background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.time-field{position:relative}

/* editable time input to match the big display */
.time-field .time-input{
	font-size:13vmin;
	letter-spacing:6px;
	background:transparent;
	border:0;
	color:inherit;
	outline:2px solid rgba(255,255,255,0.06);
	padding:0 6px;
	text-align:center;
	font-weight:700;
}

.time-value{
	font-size:13vmin; /* slightly larger */
	letter-spacing:6px;
	color:inherit; /* match label and background legibility */
}

.ratio-legend{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:18px;
	width:auto;
	max-width:560px; /* increased so ratios fit comfortably */
	min-width:360px;
	display:flex;
	flex-direction:column;
	gap:6px;
	align-items:stretch;
	justify-content:center;
	padding:14px;
	border-radius:14px;
	background:rgba(2,6,23,0.56); /* single dark card for the whole legend */
	border:1px solid rgba(255,255,255,0.02);
	box-shadow:0 18px 40px rgba(0,0,0,0.5);
}
.ratio-row{
	display:flex;
	align-items:center;
	gap:12px;
	padding:8px 6px;
	border-radius:6px;
	background:transparent; /* rows are unboxed now */
	width:100%;
	justify-content:space-between; /* ensure label left, value right */
}
.ratio-row .ratio-color{width:12px;height:12px;border-radius:3px;display:inline-block;flex:0 0 12px;margin-right:6px}
.ratio-row .ratio-color.blue{background:var(--blue)}
.ratio-row .ratio-color.red{background:var(--red)}
.ratio-row .ratio-color.green{background:var(--green)}
.ratio-row .ratio-color.yellow{background:var(--yellow)}
.ratio-row .ratio-label{flex:1 1 auto;color:inherit;font-weight:600;margin-left:6px}
.ratio-row .ratio-value{flex:0 0 auto;color:rgba(255,255,255,0.95);text-align:right;font-variant-numeric:tabular-nums;font-weight:700;min-width:64px;transition:color .18s ease}
.ratio-row .ratio-time{flex:1;color:inherit;text-align:right;font-variant-numeric:tabular-nums}
.ratio-row .ratio-time{display:none}
.ratio-row.hidden{display:none}

/* hide the whole legend when paused */
.ratio-legend.hidden{display:none !important}

/* Ratio color states: up (greater than 1) -> green, down (less than 1) -> red */
.ratio-value.ratio-up{color:var(--ratio-red-pastel);font-weight:700} /* values > 1 are red (pastel) */
.ratio-value.ratio-down{color:var(--ratio-green-pastel);font-weight:700} /* values < 1 are green (pastel) */

/* On yellow backgrounds avoid pastel colors — use solid brand colors for contrast */
.bg-yellow .ratio-value.ratio-up{color:var(--red)}
.bg-yellow .ratio-value.ratio-down{color:var(--green)}
.ratio-value.ratio-equal{color:inherit}

/* Background-specific overrides to keep contrast:
	- on red background, 'down' ratios (normally red) should be yellow
	- on green background, 'up' ratios (normally green) should be cyan/accent
*/
/* background-specific overrides removed in favor of boxed backdrop for contrast */

.reset-btn{
	background:transparent;
	border:none;
	color:rgba(255,255,255,0.8);
	font-size:14px;
	cursor:pointer;
	padding:6px;
}
.reset-btn:hover{color:var(--accent)}

.controls-footer{margin-top:12px;display:flex;gap:8px;justify-content:space-between}
.action-btn{flex:1;padding:8px 10px;border-radius:8px;border:none;background:rgba(255,255,255,0.04);color:inherit;cursor:pointer}
.action-btn:hover{background:rgba(255,255,255,0.06)}

/* inline edit: when editing a label directly inside legend, show input-like style */
.legend-label.editing{outline:2px solid rgba(0,229,255,0.12);background:rgba(255,255,255,0.02);padding:4px;border-radius:6px}

/* inline input style */
.inline-edit{padding:4px 6px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}

/* animate label changes inside the card */
.timer-label{transition:transform .18s ease, opacity .18s ease}
.timer-label.change-anim{transform:translateY(-6px);opacity:0}

/* when paused, make the time card gray and subdued */
.time-field.paused{background:linear-gradient(180deg,#3a3f44,#2b2f33);color:rgba(255,255,255,0.6)}

/* make sure paused state always wins over colored backgrounds */
.app .time-field.paused{background:linear-gradient(180deg,#3a3f44,#2b2f33) !important; color:rgba(255,255,255,0.75) !important}

/* Background states */
.bg-blue .time-field{background:linear-gradient(180deg,var(--blue),var(--blue-700));color:#fff}
.bg-red .time-field{background:linear-gradient(180deg,var(--red),#b71c1c);color:#fff}
.bg-green .time-field{background:linear-gradient(180deg,var(--green),#1b5e20);color:#fff}
.bg-yellow .time-field{background:linear-gradient(180deg,var(--yellow),#f9a825);color:#000}

/* On yellow background, lighten the ratio-legend card and use dark text for contrast */
.bg-yellow .ratio-legend{
	background: rgba(255,255,255,0.16) !important;
	border: 1px solid rgba(0,0,0,0.06) !important;
	box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
	color: rgba(0,0,0,0.9) !important;
}
.bg-yellow .ratio-row .ratio-label{color: rgba(0,0,0,0.9) !important}

/* smaller screens */
@media (max-width:900px){
	.display-area{width:100%;padding:28px}
	.controls{position:fixed;right:12px;top:50%;transform:translateY(-50%);width:auto;padding:8px}
	.controls-inner{max-width:84px;padding:8px;border-radius:10px}
	.time-field{height:60vh;font-size:16vmin}
}