:root {
	--bg: #101418;
	--yta: #1b2128;
	--kant: #2c343d;
	--text: #eef2f5;
	--dampad: #9aa6b2;
	--primar: #2f80ed;
	--ok: #27ae60;
	--varning: #f2c94c;
	--fara: #eb5757;
	color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 17px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

.topp {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
	background: var(--bg);
	border-bottom: 1px solid var(--kant);
}

.natstatus { font-size: 14px; padding: 4px 10px; border-radius: 999px; background: var(--yta); }
.natstatus.ok { color: var(--ok); }
.natstatus.av { color: var(--fara); }

main { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }

h1 { font-size: 22px; margin: 4px 0 12px; }

.vy { display: none; }
.vy.aktiv { display: block; }

.info { color: var(--dampad); font-size: 15px; }

.statuslista {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 12px;
	margin: 0 0 16px;
	padding: 12px;
	background: var(--yta);
	border-radius: 12px;
	font-size: 15px;
}
.statuslista dt { color: var(--dampad); }
.statuslista dd { margin: 0; text-align: right; font-weight: 600; word-break: break-word; }
.bra { color: var(--ok); }
.daligt { color: var(--fara); }

/* Tryckytor för handskar: minst 56 px höga. */
.knapp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	margin: 0 0 10px;
	padding: 12px 16px;
	border: 0;
	border-radius: 14px;
	background: var(--primar);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.knapp.stor { min-height: 88px; font-size: 22px; }
.knapp.sekundar { background: var(--yta); color: var(--text); border: 1px solid var(--kant); }
.knapp.fara { background: transparent; color: var(--fara); border: 1px solid var(--fara); }
.knapp:disabled { opacity: .4; }

.kamera {
	position: relative;
	aspect-ratio: 4 / 3;
	margin-bottom: 10px;
	overflow: hidden;
	border-radius: 14px;
	background: #000;
}
.kamera video { width: 100%; height: 100%; object-fit: cover; }
.kamera-tom {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--dampad);
}

.rad { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }

.tumnaglar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tumnaglar img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

.resultat { padding: 12px; background: var(--yta); border-radius: 12px; word-break: break-all; }

.logg {
	padding: 12px;
	background: var(--yta);
	border-radius: 12px;
	font-size: 12px;
	white-space: pre-wrap;
	word-break: break-word;
}

.flikar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--yta);
	border-top: 1px solid var(--kant);
}
.flikar button {
	min-height: 60px;
	border: 0;
	background: none;
	color: var(--dampad);
	font: inherit;
	font-size: 15px;
}
.flikar button.aktiv { color: var(--text); font-weight: 700; }
.bricka:not(:empty) {
	display: inline-block;
	min-width: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--varning);
	color: #000;
	font-size: 12px;
	font-weight: 700;
}