/* ══════════════════════════════════════════════════════════
   Guardian — live tracking
   Layout: map fills the viewport; details sit in a side panel
   on wide screens and a bottom sheet on narrow ones.
   ══════════════════════════════════════════════════════════ */

:root {
	--bg: #0b0f17;
	--surface: rgba(19, 25, 37, 0.82);
	--surface-solid: #131925;
	--line: rgba(255, 255, 255, 0.09);
	--line-strong: rgba(255, 255, 255, 0.16);

	--text: #eef2f8;
	--text-dim: #98a2b6;
	--text-faint: #667085;

	--danger: #ff4d5e;
	--danger-glow: rgba(255, 77, 94, 0.35);
	--safe: #22c98a;
	--warn: #ffb020;
	--accent: #4c8dff;

	--radius: 16px;
	--radius-sm: 11px;
	--panel-w: 384px;
	--shadow: 0 18px 50px rgba(0, 0, 0, 0.55);

	--sheet-peek: 216px;
}

* { box-sizing: border-box; }

/* The browser's default [hidden] rule is display:none, but any component rule setting
   display (flex/grid) outranks it. Elements toggled from JS must stay genuinely hidden. */
[hidden] { display: none !important; }

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	overscroll-behavior: none;
}

/* ── map ───────────────────────────────────────────────── */
#map {
	position: fixed;
	inset: 0;
	background: var(--bg);
	z-index: 1;
}
.leaflet-container { background: #0d1220; font-family: inherit; }
.leaflet-control-attribution {
	background: rgba(11, 15, 23, 0.7) !important;
	color: var(--text-faint) !important;
	font-size: 10px !important;
	backdrop-filter: blur(6px);
}
.leaflet-control-attribution a { color: var(--text-dim) !important; }
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow) !important; }
.leaflet-control-zoom a {
	background: var(--surface-solid) !important;
	color: var(--text) !important;
	border-color: var(--line) !important;
}
.leaflet-control-zoom a:hover { background: #1b2333 !important; }

/* pulsing live marker */
.pulse-marker { position: relative; }
.pulse-marker .core {
	position: absolute; inset: 0; margin: auto;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--danger);
	border: 2.5px solid #fff;
	box-shadow: 0 0 0 3px var(--danger-glow), 0 3px 10px rgba(0,0,0,.5);
	z-index: 2;
}
.pulse-marker .ring {
	position: absolute; inset: 0; margin: auto;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--danger);
	animation: pulse 2.4s ease-out infinite;
}
.pulse-marker.is-ended .core { background: var(--text-faint); box-shadow: 0 0 0 3px rgba(255,255,255,.1); }
.pulse-marker.is-ended .ring { display: none; }
@keyframes pulse {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(5.5); opacity: 0; }
	100% { transform: scale(5.5); opacity: 0; }
}

/* ── top bar (narrow screens) ──────────────────────────── */
.topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
	background: linear-gradient(180deg, rgba(11,15,23,.92) 0%, rgba(11,15,23,.55) 60%, transparent 100%);
	pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand { display: flex; align-items: center; gap: 9px; min-width: 0; flex-shrink: 1; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark { font-size: 19px; line-height: 1; }
.brand-name { font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }

/* ── status pill ───────────────────────────────────────── */
.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px 6px 10px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	flex: 0 0 auto;
}
.status-pill .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--warn);
	box-shadow: 0 0 0 3px rgba(255,176,32,.18);
}
.status-pill.live .dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-glow); animation: blink 1.8s ease-in-out infinite; }
.status-pill.ended .dot { background: var(--text-faint); box-shadow: none; }
.status-pill.safe .dot { background: var(--safe); box-shadow: 0 0 0 3px rgba(34,201,138,.2); }
@keyframes blink { 50% { opacity: .35; } }

/* ── panel ─────────────────────────────────────────────── */
.panel {
	position: fixed;
	z-index: 30;
	max-width: 100vw;
	overflow: hidden;
	background: var(--surface);
	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, transform .35s cubic-bezier(.32,.72,0,1), visibility .3s;
}
.panel.ready { opacity: 1; visibility: visible; }

.panel-scroll {
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.panel-scroll::-webkit-scrollbar { width: 6px; }
.panel-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.desktop-only { display: none; }

/* grab handle — sheet only */
.grab {
	display: none;
	width: 100%;
	padding: 11px 0 7px;
	background: none;
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
}
.grab span {
	display: block;
	width: 38px; height: 4px;
	margin: 0 auto;
	border-radius: 99px;
	background: var(--line-strong);
	transition: background .2s;
}
.grab:hover span { background: rgba(255,255,255,.3); }

/* ── person ────────────────────────────────────────────── */
.person { display: flex; align-items: center; gap: 13px; }
.avatar {
	width: 52px; height: 52px;
	border-radius: 50%;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	font-size: 20px;
	font-weight: 650;
	color: #fff;
	background: linear-gradient(135deg, #ff4d5e, #ff8a4c);
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0 2.5px rgba(255,77,94,.25), 0 4px 14px rgba(0,0,0,.4);
}
.avatar.has-photo span { display: none; }
.person-meta { min-width: 0; }
.person-meta h1 {
	margin: 0;
	font-size: 19px;
	font-weight: 680;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.person-meta p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); }

/* ── stats grid ────────────────────────────────────────── */
.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
.stat {
	background: rgba(255,255,255,.035);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 10px 8px;
	text-align: center;
	min-width: 0;
}
.stat-label {
	display: block;
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--text-faint);
	margin-bottom: 3px;
	font-weight: 600;
}
.stat-value {
	display: block;
	font-size: 15px;
	font-weight: 660;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.stat-value.low { color: var(--danger); }

/* ── cards ─────────────────────────────────────────────── */
.card {
	background: rgba(255,255,255,.035);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 13px 14px;
}
.card-title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 650;
	color: var(--text-faint);
	margin-bottom: 9px;
}
.ico {
	width: 13px; height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}
.address { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; }
.coords {
	margin: 6px 0 0;
	font-size: 11.5px;
	color: var(--text-faint);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.route-card { border-color: rgba(76,141,255,.32); background: rgba(76,141,255,.08); }
.route-figs { display: flex; gap: 22px; }
.rf-val {
	display: block;
	font-size: 21px;
	font-weight: 680;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.rf-lab {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--text-faint);
	margin-top: 1px;
}

.kv { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kv dt { font-size: 12.5px; color: var(--text-dim); }
.kv dd { margin: 0; font-size: 12.5px; font-weight: 560; text-align: right; }
.mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px !important;
	color: var(--text-faint);
}

/* ── buttons ───────────────────────────────────────────── */
.actions { display: flex; gap: 8px; }
.btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	font-size: 13.5px;
	font-weight: 620;
	font-family: inherit;
	cursor: pointer;
	transition: transform .12s ease, background .18s ease, opacity .18s;
	-webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary {
	background: linear-gradient(135deg, #4c8dff, #3a6fe0);
	color: #fff;
	box-shadow: 0 5px 18px rgba(76,141,255,.32);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #5c99ff, #4478ea); }
.btn-ghost {
	background: rgba(255,255,255,.06);
	border-color: var(--line-strong);
	color: var(--text);
	flex: 0 0 auto;
	padding-inline: 15px;
}
.btn-ghost:hover { background: rgba(255,255,255,.11); }
.btn .ico { width: 14px; height: 14px; }

.hint {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--text-dim);
	text-align: center;
	padding: 2px 4px;
}
.hint.error { color: var(--warn); }

/* ── full-screen states ────────────────────────────────── */
.screen {
	position: fixed;
	inset: 0;
	overflow: hidden;
	z-index: 60;
	display: grid;
	place-items: center;
	padding: 28px;
	background: radial-gradient(120% 90% at 50% 0%, #131b2b 0%, var(--bg) 62%);
	transition: opacity .4s ease, visibility .4s;
}
.screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.screen-inner { text-align: center; max-width: min(380px, 100%); }
.screen-icon { font-size: 52px; line-height: 1; margin-bottom: 18px; }
.screen h2 {
	margin: 0 0 9px;
	font-size: 23px;
	font-weight: 680;
	letter-spacing: -0.025em;
}
.screen p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
.screen .btn { margin-top: 22px; display: inline-flex; flex: 0 0 auto; padding-inline: 26px; }

.spinner {
	width: 22px; height: 22px;
	margin: 22px auto 0;
	border: 2.5px solid var(--line-strong);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin .8s linear infinite;
}
.spinner.sm { width: 13px; height: 13px; border-width: 2px; margin: 0; }
.spinner.hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── reconnect banner ──────────────────────────────────── */
.banner {
	position: fixed;
	z-index: 50;
	left: 50%;
	transform: translateX(-50%);
	top: calc(env(safe-area-inset-top, 0px) + 62px);
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 15px;
	border-radius: 999px;
	background: rgba(255,176,32,.14);
	border: 1px solid rgba(255,176,32,.32);
	color: var(--warn);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	max-width: min(92vw, 420px);
	box-shadow: var(--shadow);
	animation: dropIn .3s cubic-bezier(.32,.72,0,1);
}
.banner .spinner { border-color: rgba(255,176,32,.3); border-top-color: var(--warn); }
@keyframes dropIn { from { opacity: 0; transform: translate(-50%, -12px); } }

/* ══════════════════════════════════════════════════════════
   MOBILE + SMALL TABLET — bottom sheet
   ══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
	.panel {
		left: 0; right: 0; bottom: 0;
		max-height: 88vh;
		border-radius: 22px 22px 0 0;
		border-left: 0; border-right: 0; border-bottom: 0;
		transform: translateY(calc(100% - var(--sheet-peek)));
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.panel.open { transform: translateY(0); }
	.panel-scroll { max-height: calc(88vh - 34px); padding: 4px 16px 18px; }
	.grab { display: block; }
	.panel-head { display: none; }

	/* the sheet already shows status; keep the pill in the top bar */
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stat-value { font-size: 15px; }
	.person { padding-top: 2px; }
}

@media (max-width: 380px) {
	.person-meta h1 { font-size: 17.5px; }
	:root { --sheet-peek: 232px; }
}

/* ══════════════════════════════════════════════════════════
   LANDSCAPE PHONE — keep the sheet short
   ══════════════════════════════════════════════════════════ */
@media (min-width: 560px) and (max-width: 899px) {
	.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
	:root { --sheet-peek: 150px; }
	.panel { max-height: 92vh; }
	.panel-scroll { max-height: calc(92vh - 34px); }
	.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════
   TABLET LANDSCAPE + DESKTOP — floating side column
   ══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
	.topbar { display: none; }
	.desktop-only { display: flex; }
	.panel {
		top: 18px;
		right: 18px;
		bottom: 18px;
		width: var(--panel-w);
		border-radius: var(--radius);
		transform: translateX(18px);
	}
	.panel.ready { transform: translateX(0); }
	.panel-scroll { padding: 20px; }
	.banner { top: 22px; left: auto; right: calc(var(--panel-w) + 36px); transform: none; }
	@keyframes dropIn { from { opacity: 0; transform: translateY(-12px); } }
}

@media (min-width: 1400px) {
	:root { --panel-w: 410px; }
}

/* ══════════════════════════════════════════════════════════
   Accessibility
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }