html, body { height: 100%; margin: 0; }
body {
	display: flex; flex-direction: column;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	text-align: center; color: #fff;
	background: #8a6d00;
	transition: background 0.4s ease;
	min-height: 100%;
}

* { box-sizing: border-box; }

.header { flex: 0 0 auto; font-size: 2.3vw; opacity: 0.85; padding: 1rem 0 0; }

.zone-picker { flex: 0 0 auto; display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.6rem; }
.zone-btn {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.35em 0.9em;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s, background 0.15s;
}
.zone-btn:hover { opacity: 0.9; }
.zone-btn.active { opacity: 1; background: rgba(255, 255, 255, 0.35); }

.pwa-install { flex: 0 0 auto; margin-top: 0.6rem; }
.pwa-btn {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.35em 0.9em;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.85;
}
.pwa-btn:hover { opacity: 1; }
.pwa-hint { font-size: 0.75rem; opacity: 0.75; margin: 0.4rem auto 0; max-width: 26rem; padding: 0 1rem; }

/* .content tar allt utrymme som blir over under header/zone-picker och radar
   upp .row FRAN TOPPEN (inte center), samma monster som ursprungssidan
   (prisskarm) - annars overlappar en hog kommande-timmar-lista rubrikraden
   pa korta skarmar. Ingen min-height:0 (medvetet, samma anledning som
   originalet): utan den vagrar .content krympa under sitt eget innehalls
   behov, sa BODY vaxer forbi 100vh och sidan far scrolla istallet for att
   .row overlappar day-bars-panelen under. */
.content { flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; padding-top: 0.7rem; }
.row { display: flex; flex-direction: row; align-items: stretch; width: 100%; }

.main { flex: 1 1 60%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.price { font-size: 10.5vw; font-weight: 700; line-height: 1; }
.unit { font-size: 2.4vw; opacity: 0.85; margin-top: 0.3em; }
.category { font-size: 3.6vw; font-weight: 600; margin-top: 0.4em; }
.footer { font-size: 2.3vw; opacity: 0.75; margin-top: 1.3em; }
.next-change { font-size: 2.3vw; opacity: 0.9; margin-top: 0.4em; font-weight: 600; }

.upcoming { flex: 0 0 auto; max-width: 44rem; background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 1rem 1.4rem; margin: 0 1rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.upcoming-title { font-size: 1rem; opacity: 0.8; margin-bottom: 0.6em; text-transform: uppercase; letter-spacing: 0.05em; }
.upcoming-list { columns: 2; column-gap: 1.4rem; }
.upcoming-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; font-size: 1.4rem; padding: 0.26em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); break-inside: avoid; }
.upcoming-row:last-child { border-bottom: none; }
.upcoming-row .hour { display: flex; align-items: center; gap: 0.5em; opacity: 0.9; }
.dot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; flex: none; }

#fullscreenBtn { position: absolute; top: 0.6rem; right: 0.8rem; background: rgba(255, 255, 255, 0.15); color: #fff; border: none; border-radius: 6px; padding: 0.4em 0.8em; font-size: 0.85rem; opacity: 0.6; display: none; }

.day-bars-panel { flex: 0 0 auto; background: #5c5c5c; border-radius: 12px; padding: 0.8rem 0 1rem; margin: 0.8rem auto 0.8rem; width: 92%; max-width: 62rem; box-sizing: border-box; }
.day-bars-title { font-size: 1rem; opacity: 0.85; margin-bottom: 0.4rem; }
.day-bars-container { position: relative; width: 96%; max-width: 60rem; margin: 0.6rem auto 0; }
.day-bars { display: flex; align-items: flex-end; gap: 2px; height: 5rem; }
.day-bar { flex: 1; border-radius: 3px 3px 0 0; opacity: 0.9; min-height: 2px; }
.day-bar.now { opacity: 1; outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: -2px; }
.day-bars-now-label { position: absolute; top: -1.4rem; transform: translateX(-50%); font-size: 0.85rem; font-weight: 700; opacity: 0.95; white-space: nowrap; }
.day-bars-ticks { display: flex; justify-content: space-between; width: 96%; max-width: 60rem; margin: 0.2rem auto 0; font-size: 0.75rem; opacity: 0.65; }

.status-message { flex: 0 0 auto; margin: 1rem auto; padding: 0.8rem 1.2rem; background: rgba(0, 0, 0, 0.25); border-radius: 10px; max-width: 30rem; }

.attribution { flex: 0 0 auto; font-size: 0.75rem; opacity: 0.6; margin: 0 0 0.8rem; }
.attribution a { color: #fff; }

@media (max-width: 560px) {
	.row { flex-direction: column; align-items: center; }
	.upcoming { width: 90%; max-width: none; margin-top: 1.5rem; }
	.header { padding-bottom: 0.4rem; }

	.upcoming-list { columns: 1; }
	.upcoming-row { font-size: 1.1rem; padding: 0.55em 0; }

	.price { font-size: 22vw; }
	.unit { font-size: 5vw; }
	.category { font-size: 7.6vw; }

	.header, .footer, .next-change { font-size: 4.3vw; }
	.header-sep { display: none; }
	.header-area { display: block; }

	.footer { margin-bottom: 0.5rem; }
	.next-change { margin-bottom: 0; }
	.footer-before-list { margin-bottom: 1.2rem; }
}