/* Combined Zone + Temp Buttons */
.zones-combined {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 16px;
	margin-top: 0;
	align-items: start;
	justify-items: center;
}

.zone-combined {
	background: #fff;
	border: 1px solid #e1e1e6;
	box-shadow: 0 2px 4px rgba(0,0,0,0.04);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 84px;
	text-decoration: none;
	color: #222;
	font-weight: 600;
	font-size: 0.95rem;
	position: relative;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
	cursor: pointer;
}

.zone-combined:hover, .zone-combined:focus {
	background: #e0e0e0;
	color: #111;
	transform: translateY(-2px);
	outline: none;
}

/* Zone button temperature states (based on displayed value) */
.zone-combined.zone-temp-cold {
	background: #cfe8ff;
	border-color: #7fb8ff;
}

.zone-combined.zone-temp-ok {
	background: #c9f2d8;
	border-color: #7fd1a0;
}

.zone-combined.zone-temp-warm {
	background: #ffe0b3;
	border-color: #ffb24d;
}

.zone-combined.zone-temp-hot {
	background: #ffcccc;
	border-color: #ff8080;
}

.zone-combined.zone-temp-cold:hover,
.zone-combined.zone-temp-cold:focus {
	background: #bcdcff;
}

.zone-combined.zone-temp-ok:hover,
.zone-combined.zone-temp-ok:focus {
	background: #b7eccc;
}

.zone-combined.zone-temp-warm:hover,
.zone-combined.zone-temp-warm:focus {
	background: #ffd699;
}

.zone-combined.zone-temp-hot:hover,
.zone-combined.zone-temp-hot:focus {
	background: #ffb3b3;
}

.zone-combined__label {
	position: absolute;
	top: 10px;
	left: 12px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #222;
	z-index: 2;
	text-align: left;
}
/* Shared site styles extracted from dashboard */
html, body { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; background: #e0e2e6; }

/* Centralized sizing variable so left column panels can match the notes box height */
:root { --notes-height: calc(3 * 138px + 2 * 10px); }

/* Top-left large header */
header {
	position: absolute;
	top: 16px;
	left: 16px;
	text-align: left;
	z-index: 10;
}

/* Zone pages: align logo + title like Home header */
.zone-page header {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

header h1 { font-size: calc(3.2rem + 6pt); margin: 0; line-height: 1; color: #111; font-weight: 700; background: none !important; box-shadow: none !important; border: none !important; }

/* Run name display in header */
.run-name-header {
	color: #1e3a8a;
	font-weight: 800;
	font-size: calc(2.5rem + 6pt);
}

/* Start Run Button positioned over temperature rectangle */
.temp-overlay-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #d40000;
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 1.2rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
	z-index: 10;
}

.temp-overlay-btn:hover {
	background-color: #b00000;
}

.temp-overlay-btn:focus {
	outline: 2px solid #d40000;
	outline-offset: 2px;
}

/* Ensure temperature rectangle has relative positioning for absolute button */
.long--top-left:first-child {
	position: relative;
}

/* Matching utility used by zone pages */
.page-title { font-size: calc(3.2rem + 6pt); margin: 0 0 12px; line-height: 1; color: #111; font-weight: 700; }

/* Large HOME link positioned top-right on zone pages */
.home-link {
	position: absolute;
	top: 16px;
	right: 16px;
	font-size: calc(3.2rem + 6pt);
	line-height: 1;
	font-weight: 700;
	color: #d40000; /* red */
	text-decoration: none;
	transition: color 140ms ease, text-decoration 140ms ease;
}

/* hover and keyboard focus styles: slightly lighter red and underline */
.home-link:hover,
.home-link:focus-visible {
	color: #ff6b6b; /* lighter red on hover/focus */
	text-decoration: underline;
}

@media (max-width: 480px) {
	.home-link { font-size: calc(1.8rem + 6pt); }
}

/* When the Home link is placed inside the .notes container, pin it above the box
   and align its right edge with the notes box outer edge (notes padding = 12px). */
.notes > .home-link {
	position: absolute;
	/* place above the notes box and render like the zone buttons */
	top: -76px;
	right: 12px; /* align inside the notes box padding */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 64px;
	color: #d40000; /* red text */
	font-weight: 800;
	font-size: 1.3rem; /* slightly bigger red text */
	text-decoration: none;
	cursor: pointer;
	z-index: 12;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 8px;
}

@media (max-width: 768px) {
	/* slightly smaller offset on mid-size screens */
	.notes > .home-link { top: -66px; width: 110px; height: 50px; font-size: 1.05rem; right: 10px; }
}

@media (max-width: 480px) {
	/* mobile adjustments */
	.notes > .home-link { top: -60px; right: 8px; width: 88px; height: 44px; font-size: 1.0rem; }
}

/* hover/focus state for the Home button when it's rendered above the notes box */
.notes > .home-link {
	transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.notes > .home-link:hover,
.notes > .home-link:focus-visible {
	background: #ff6b6b; /* light red */
	color: #ffffff; /* white text for contrast */
	border-color: #ff6b6b;
	transform: translateY(-2px);
}

/* Responsive scaling for small screens */
@media (max-width: 480px) { header h1, .page-title { font-size: calc(1.8rem + 6pt); } }

/* Main padding so content doesn't overlap the absolute header */
main { padding: 8px 16px 16px; transform: translateX(-8px); }

/* Zone pages: push content below the large Zone header */
.zone-page main { padding-top: 120px; }

/* Zone pages: match Home header font size */
.zone-page header h1 { font-size: 3.2rem; }

/* Layout: left column (longs) + right column (zones) */
.layout { display: flex; align-items: flex-start; gap: 16px; margin-top: 0; padding-left: 0; }

/* Home layout: zones on top-left, notes in bottom-left, charts on right */
.layout--home {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-template-rows: auto 1fr;
	gap: 16px;
	align-items: start;
}

.layout--home .zones-combined {
	grid-column: 1;
	grid-row: 1;
}

.layout--home .notes-wrap {
	grid-column: 1;
	grid-row: 2;
	align-self: stretch;
	height: 100%;
}

.layout--home .left {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.layout--home .notes {
	height: 100%;
	min-height: calc(var(--notes-height) - 170px);
}

.layout--home .long {
	min-height: 130px;
}

.left { display: flex; flex-direction: column; gap: 10px; width: 1020px; order: 1; /* match notes height so bottoms align */ height: var(--notes-height); position: relative; }

/* Make long panels flexible so they can share the left column height with the mid-row
	(preserves visual proportions while allowing zone pages with 2 x .long + .mid-row
	to align with the .notes container). We keep a sensible minimum height as a
	fallback for very small viewports. */
.long { background: #ffffff; border: 1px solid #e1e1e6; box-shadow: 0 2px 4px rgba(0,0,0,0.04); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #222; width: 100%; box-sizing: border-box; min-height: 138px; border-radius: 8px; font-size: 1rem; flex: 1 1 auto; height: auto; position: relative; }

.long--top-left { display: flex; align-items: flex-start; justify-content: flex-start; padding: 12px; text-align: left; }

/* Start run button overlay positioned over temperature rectangle, aligned with Home header */
.temp-overlay-btn {
	position: absolute;
	left: 50%;
	top: -80px;
	transform: translateX(-50%);
	width: 72%;
	max-width: 520px;
	height: calc(3.2rem + 6pt);
	background: #ffffff;
	border: 1px solid #e1e1e6;
	box-shadow: 0 4px 8px rgba(0,0,0,0.06);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: #d40000;
	font-size: 1.6rem;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
	z-index: 10;
}

.temp-overlay-btn:hover,
.temp-overlay-btn:focus {
	background: #ff6b6b;
	color: #ffffff;
	transform: translateX(-50%) translateY(-2px);
}

.temp-overlay-btn:focus {
	outline: 3px solid rgba(21, 126, 251, 0.18);
	outline-offset: 3px;
}

/* medium rectangles used on zone pages beneath the long panels
   same visual treatment as cards but shorter height and consistent spacing */
.mid { background: #ffffff; border: 1px solid #e1e1e6; box-shadow: 0 2px 4px rgba(0,0,0,0.04); border-radius: 8px; box-sizing: border-box; min-height: 84px; display: flex; align-items: center; justify-content: center; padding: 12px; font-weight: 600; color: #222; font-size: 0.95rem; flex: 1 1 auto; width: auto; height: 100%; text-align: center; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; cursor: pointer; }

/* container to lay out mid cards horizontally and allow the mid-row to occupy
	one of the vertical slots in the left column (so the total left column
	height equals the notes box height). */
.mid-row { display: flex; gap: 10px; margin-top: 10px; flex: 1 1 auto; }

/* Hover and keyboard focus appearance to match the .zone buttons */
.mid:hover { background: #e0e0e0; color: #111; transform: translateY(-2px); }
.mid:focus { outline: 3px solid rgba(21, 126, 251, 0.18); outline-offset: 3px; }
.mid:focus-visible { outline: 3px solid rgba(21, 126, 251, 0.18); outline-offset: 3px; }

@media (max-width: 768px) {
	.mid { height: 66px; font-size: 0.9rem; }
}

@media (max-width: 480px) {
	.mid { height: 56px; font-size: 0.85rem; }
	.mid-row { flex-direction: column; }
}

.notes { order: 2; width: 296px; background: #ffffff; border: 1px solid #e1e1e6; box-shadow: 0 2px 4px rgba(0,0,0,0.04); border-radius: 8px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 12px; box-sizing: border-box; color: #222; height: var(--notes-height); position: relative; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.notes__input { width: 100%; height: 100%; border: none; resize: none; background: transparent; color: #222; font-size: 0.95rem; line-height: 1.2; outline: none; box-sizing: border-box; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ccc #f5f5f5; }

/* small grey metadata text shown above the notes box (e.g. Date, time) */
.notes__meta { color: #6b6b6b; font-size: 0.8rem; text-align: right; }

/* Date and Time Display Container */
.date-time-container {
	display: flex;
	align-items: center;
	gap: 15px;
	justify-content: space-between;
}

/* End Run Button */
.end-run-btn {
	background-color: #d40000;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
	flex-shrink: 0;
}

.end-run-btn:hover {
	background-color: #b00000;
}

.end-run-btn:focus {
	outline: 2px solid #d40000;
	outline-offset: 2px;
}

/* Modal overlay and popup styles */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-popup {
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	max-width: 500px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px 0 24px;
	border-bottom: 1px solid #e1e1e6;
	margin-bottom: 20px;
}

.modal-title {
	margin: 0;
	font-size: 1.5rem;
	color: #333;
	font-weight: 600;
}

.modal-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	color: #666;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
	background-color: #f5f5f5;
	color: #333;
}

.modal-close:focus {
	outline: 2px solid #d40000;
	outline-offset: 2px;
}

.modal-content {
	padding: 0 24px 24px 24px;
}

.modal-content p {
	margin: 0 0 16px 0;
	color: #555;
	line-height: 1.5;
}

/* Modal form elements */
.modal-input-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.modal-input-section label {
	font-weight: 600;
	color: #333;
	font-size: 0.95rem;
}

.modal-input-section input {
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
	transition: border-color 0.2s ease;
}

.modal-input-section input:focus {
	outline: none;
	border-color: #d40000;
	box-shadow: 0 0 0 2px rgba(212, 0, 0, 0.1);
}

.modal-enter-btn {
	background-color: #d40000;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
	align-self: flex-start;
}

.modal-enter-btn:hover {
	background-color: #b00000;
}

.modal-enter-btn:focus {
	outline: 2px solid #d40000;
	outline-offset: 2px;
}

/* Style for when button becomes run name display */
.temp-overlay-btn.run-name-display {
	background: none;
	border: none;
	color: #1e3a8a;
	font-size: 2rem;
	font-weight: 800;
	padding: 0;
}

/* Style for End Run button state */
.temp-overlay-btn.end-run-btn-active {
	background-color: #3b82f6 !important; /* Blue color */
	color: white;
	width: 140px !important; /* Slightly wider than before */
	padding: 12px 8px !important; /* Minimal horizontal padding */
	left: 92% !important; /* Move button just a tiny bit further to the right */
}

.temp-overlay-btn.end-run-btn-active:hover {
	background-color: #2563eb !important; /* Darker blue on hover */
}

/* Modal form elements */
.modal-input-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.modal-input-section label {
	font-weight: 600;
	color: #333;
	font-size: 0.95rem;
}

.modal-input-section input {
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
	transition: border-color 0.2s ease;
}

.modal-input-section input:focus {
	outline: none;
	border-color: #d40000;
	box-shadow: 0 0 0 2px rgba(212, 0, 0, 0.1);
}

.modal-enter-btn {
	background-color: #d40000;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
	align-self: flex-start;
}

.modal-enter-btn:hover {
	background-color: #b00000;
}

.modal-enter-btn:focus {
	outline: 2px solid #d40000;
	outline-offset: 2px;
}

/* Style for when button becomes run name display */
.temp-overlay-btn.run-name-display {
	background: none;
	border: none;
	color: #1e3a8a;
	font-size: 2rem;
	font-weight: 800;
	padding: 0;
}

/* wrapper for notes box */
.notes-wrap { order: 2; width: 296px; position: relative; display: flex; flex-direction: column; align-items: stretch; }

/* Live date/time displayed above the charts on the home layout */
.left > .notes__meta {
	position: absolute;
	top: -86px;
	right: 0;
	margin: 0;
	text-align: right;
	font-size: 1.3rem;
	font-weight: 600;
	color: #6b6b6b;
	white-space: pre-line;
}

@media (max-width: 768px) {
	.left > .notes__meta { top: -74px; font-size: 1.15rem; }
}

@media (max-width: 480px) {
	.left > .notes__meta { top: -66px; font-size: 1.05rem; }
}

.stage { display: inline-block; }

.temp-row { display: flex; gap: 16px; margin-top: 20px; align-items: stretch; }

.temp { background: #ffffff; border: 1px solid #e1e1e6; box-shadow: 0 2px 4px rgba(0,0,0,0.04); border-radius: 8px; flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; position: relative; font-weight: 600; color: #222; height: 84px; font-size: 0.95rem; position: relative; }

.temp__label { font-size: 0.85rem; font-weight: 600; color: #222; z-index: 2; position: absolute; top: 10px; left: 12px; text-align: left; }

.temp__value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.8rem; font-weight: 700; color: #111; line-height: 1; z-index: 1; pointer-events: none; }

.temp__num { display: inline-block; font-size: 2.2rem; line-height: 1; }

.temp__unit { display: inline-block; font-size: 0.95rem; margin-left: 6px; vertical-align: super; }

.zones { display: flex; flex-direction: column; gap: 10px; width: 140px; margin-left: 0; order: 0; }

.zone { background: #ffffff; border: 1px solid #e1e1e6; box-shadow: 0 2px 4px rgba(0,0,0,0.04); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #222; width: 140px; height: 64px; border-radius: 8px; font-size: 0.9rem; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; cursor: pointer; text-decoration: none; color: inherit; }

.zone:hover { background: #e0e0e0; color: #111; transform: translateY(-2px); }

.zone:focus { outline: 3px solid rgba(21, 126, 251, 0.18); outline-offset: 3px; }

@media (max-width: 768px) {
	.left { width: 680px; height: calc(3 * 110px + 2 * 10px); }
	.long { min-height: 110px; font-size: 0.95rem; }
	:root { --notes-height: calc(3 * 110px + 2 * 10px); }

	.notes { height: var(--notes-height); }
	.temp { height: 66px; font-size: 0.9rem; }
	.temp__value { font-size: 1.4rem; }
	.temp__num { font-size: 1.8rem; }
	.zones { width: 110px; margin-left: 0; margin-top: 20px; }
	.zone { width: 110px; height: 50px; font-size: 0.85rem; }
	.temp-overlay-btn { width: 78%; height: calc(1.8rem + 6pt); font-size: 1.05rem; }
}

@media (max-width: 480px) {
	.left { width: 418px; height: calc(3 * 98px + 2 * 10px); }
	.long { min-height: 98px; font-size: 0.9rem; }
	:root { --notes-height: calc(3 * 98px + 2 * 10px); }
	
	.notes { height: var(--notes-height); }
	.temp { height: 56px; font-size: 0.85rem; }
	.temp__value { font-size: 1.1rem; }
	.temp__num { font-size: 1.4rem; }
	.zones { width: 88px; margin-left: 0; margin-top: 16px; }
	.zone { width: 88px; height: 44px; font-size: 0.8rem; }
	.temp-overlay-btn { width: 84%; height: calc(1.8rem + 6pt); font-size: 0.95rem; }
}

/* Card and small utilities used by the zone pages */
.card{max-width:900px;margin:40px auto;background:#fff;border:1px solid #e1e1e6;padding:24px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.04)}

a.button{display:inline-block;margin-top:16px;padding:8px 12px;border-radius:6px;background:#f3f7ff;border:1px solid #e1e9ff;color:#156efb;text-decoration:none}

/* Modal overlay and popup styles */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
}

.modal-popup {
	background: #ffffff;
	border: 1px solid #e1e1e6;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	width: 90%;
	max-width: 500px;
	max-height: 80vh;
	overflow-y: auto;
	padding: 24px;
	position: relative;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.modal-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: #111;
	margin: 0;
}

.modal-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	color: #666;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: background-color 150ms ease, color 150ms ease;
	position: absolute;
	top: 8px;
	right: 8px;
}

.modal-close:hover,
.modal-close:active {
	background: #f0f0f0;
	color: #d40000;
}

.modal-content {
	color: #333;
	line-height: 1.6;
}

.modal-input-section {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.modal-input-section label {
	font-weight: 600;
	color: #333;
	font-size: 0.95rem;
}

.modal-input-section input {
	padding: 10px 12px;
	border: 1px solid #e1e1e6;
	border-radius: 6px;
	font-size: 1rem;
	color: #333;
	outline: none;
	transition: border-color 150ms ease;
}

.modal-input-section input:focus {
	border-color: #156efb;
	box-shadow: 0 0 0 3px rgba(21, 126, 251, 0.1);
}

.modal-enter-btn {
	padding: 10px 20px;
	background: #d40000;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 150ms ease;
	align-self: flex-start;
}

.modal-enter-btn:hover {
	background: #ff6b6b;
}

.modal-enter-btn:focus {
	outline: 3px solid rgba(21, 126, 251, 0.18);
	outline-offset: 2px;
}

/* Style for when button shows run name instead of Start Run */
.temp-overlay-btn.run-name-display {
	background: transparent;
	border: none;
	box-shadow: none;
	color: #1e3a8a;
	font-weight: 800;
	font-size: 2.5rem;
}

/* Modal button section for confirmation dialogs */
.modal-button-section {
	display: flex;
	gap: 12px;
	margin-top: 20px;
	justify-content: flex-end;
}

.modal-cancel-btn {
	background-color: #6b7280;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.modal-cancel-btn:hover {
	background-color: #4b5563;
}

.modal-cancel-btn:focus {
	outline: 2px solid #6b7280;
	outline-offset: 2px;
}

.modal-confirm-btn {
	background-color: #d40000;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.modal-confirm-btn:hover {
	background-color: #b00000;
}

.modal-confirm-btn:focus {
	outline: 2px solid #d40000;
	outline-offset: 2px;
}

/* Upload section styles */
.upload-section {
	margin-top: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #f8f9fa;
}

.upload-label {
	display: block;
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 5px;
	color: #333;
}

.upload-input {
	width: 100%;
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-size: 12px;
	background-color: white;
}

.upload-status {
	margin-top: 5px;
	font-size: 11px;
	font-weight: bold;
}

.help-text {
	display: block;
	font-size: 10px;
	color: #666;
	margin-top: 3px;
	font-style: italic;
}

/* Temperature deviation color coding */
.temp__num.temp-good {
	color: #333 !important;
	background-color: transparent;
	padding: 2px 4px;
	border-radius: 3px;
}

.temp__num.temp-warning {
	color: #ffc107 !important;
	background-color: rgba(255, 193, 7, 0.1);
	padding: 2px 4px;
	border-radius: 3px;
}

.temp__num.temp-danger {
	color: #dc3545 !important;
	background-color: rgba(220, 53, 69, 0.1);
	padding: 2px 4px;
	border-radius: 3px;
}

.temp__num.temp-too-hot {
	color: #333 !important;
	background-color: rgba(255, 182, 182, 0.7) !important;
	padding: 2px 4px;
	border-radius: 3px;
}

.temp__num.temp-too-cold {
	color: #333 !important;
	background-color: rgba(173, 216, 230, 0.7) !important;
	padding: 2px 4px;
	border-radius: 3px;
}

.recovery-banner {
  background: #fff3cd;
  color: #664d03;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ffeeba;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

.recovery-banner button {
  border: none;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  background: #856404;
  color: #fff;
  cursor: pointer;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sake-logo-egg {
  height: 40px;
  width: auto;
  cursor: pointer;      /* makes it feel clickable */
  user-select: none;
}

.pong-modal-popup {
  max-width: 560px;
}

#pong-canvas {
  border: 1px solid #ccc;
  display: block;
  margin: 0 auto;
  background: #000;
}

.pong-help-text {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  text-align: center;
}

/* Restore normal layout */
header {
	/* Remove background and border for transparent header */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1.5rem;
	background: none !important;
	border-bottom: none !important;
}

/* Keep logo small & aligned */
.sake-logo-egg {
	height: 64px;
	width: auto;
	cursor: pointer;
	margin-right: 0.5rem;
	margin-top: 0.1rem;
}

/* Main header layout */
.header-inner {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	position: absolute;
	top: 0.1rem;
	left: 0.1rem;
	padding: 0;
	margin: 0;
	background: none !important;
	box-shadow: none !important;
	border: none !important;
}

.header-title {
	margin: 0;
	font-size: 3.2rem;
	font-weight: bold;
	line-height: 1;
	padding: 0;
	vertical-align: middle;
}

/* Zone pages: keep Zone X on one line */
.zone-page .header-title { white-space: nowrap; }

/* Right side (datetime + start button) */
.header-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Recovery banner formatting */
.recovery-banner {
  background: #fff3cd;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ffeeba;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.long canvas {
  width: 100%;
  max-width: 100%;
  height: 220px;
  display: block;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}

/* Full-page chart modal tweaks */
.chart-modal-popup {
  max-width: 1000px;
  width: 95%;
  max-height: 90vh;
}

.chart-modal-content {
  height: 70vh;
  display: flex;
  flex-direction: column;
}

#chart-modal-canvas {
  flex: 1;
  width: 100%;
  height: 100%;
  display: block;
}

.chart-modal-help {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* stack layout container */
.temp__value-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

/* each line (dry, wet) */
.temp__row {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: 1em;  /* same as parent — NO shrinking */
	justify-content: center;
	width: 100%;
}

/* small gray text like (Dry), (Wet Bulb) */
.temp__note {
  color: #888;
  font-size: 0.75em; 
}

/* Wet bulb number — SAME size as dry bulb */
.temp__num--wb {
  font-weight: 600;  /* optional: remove if you don't want bold */
  font-size: 1em;    /* exactly same size */
}

/* Layout for the left column of charts */
.left {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Each chart "block" card */
.long {
	position: relative;
	box-sizing: border-box;
	padding: 0.75rem 0.75rem 0.5rem;
	border-radius: 8px;
	overflow: hidden;          /* <- keeps the chart inside the box */
	height: 220px;             /* <- controls how tall each chart block is */
}

/* If you have a more specific .long--top-left rule, you can override height there */
.long--top-left {
	height: 220px;             /* or 200–260px depending on how tall you want */
}

/* Header row inside the chart block */
.chart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

/* Make canvases fill their box, not bleed out */
.metric-chart {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* (Optional but nice) – full-page chart modal sizing */
.chart-modal-content {
	height: 60vh;
}

#chart-modal-canvas {
	width: 100% !important;
	height: 100% !important;
}

.chart-modal-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 70vh; /* taller timeline area */
}

#chart-modal-canvas {
	width: 100% !important;
	height: 100% !important;
}

.chart-modal-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	font-size: 0.9rem;
}

.chart-modal-control {
	display: flex;
	flex-direction: column;
	min-width: 180px;
}

.chart-modal-control input[type="range"] {
	width: 100%;
}

.run-box {
	padding: 10px 16px;
	margin: 3px auto 10px auto;
	width: 260px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	transform: translateX(-8px);
}

.start-run-btn {
	background: #b22222;
	color: white;
	border: none;
	border-radius: 10px;
	width: 100%;
	min-height: 64px;
	margin-top: 2px;
	font-size: 1.6rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.start-run-btn:hover {
  background: #8b1a1a;
}

.start-run-btn.end-run-btn-active {
  background: #333;
}

.start-run-btn.end-run-btn-active:hover {
  background: #111;
}