/* ── call-my-phone ────────────────────────────────────────────────────────────
   Mobile-first and one-handed. Everything about this page assumes the worst
   case it was built for: someone else's phone, one thumb, poor light, mild
   panic. That means large tap targets, a single obvious action per screen, and
   no layout that needs two hands or a wide viewport. */

:root {
	--bg: #14110f;
	--surface: #1f1a17;
	--border: #342c27;
	--text: #f2ece7;
	--muted: #a2948a;
	--accent: #ff9436;
	--accent-ink: #2a1600;
	--good: #5fd08a;
	--bad: #ff6b6b;
	--radius: 14px;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Light mode follows the system, but an explicit data-theme always wins so a
   future toggle does not fight the media query. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--bg: #faf7f4;
		--surface: #ffffff;
		--border: #e4dcd4;
		--text: #1c1714;
		--muted: #6d625a;
		--accent: #d4620a;
		--accent-ink: #ffffff;
		--good: #1d8149;
		--bad: #c0342f;
	}
}
:root[data-theme="light"] {
	--bg: #faf7f4;
	--surface: #ffffff;
	--border: #e4dcd4;
	--text: #1c1714;
	--muted: #6d625a;
	--accent: #d4620a;
	--accent-ink: #ffffff;
	--good: #1d8149;
	--bad: #c0342f;
}

* { box-sizing: border-box; }

/* The UA stylesheet's [hidden] { display: none } is a single attribute
   selector, so any class that sets display beats it. .ring-btn sets
   display: block, which left the Unlock button fully visible after the JS set
   hidden = true — the page looked like it still wanted a PIN. Restore the
   intent with a rule that outranks the class. */
[hidden] { display: none !important; }

body {
	margin: 0;
	padding: 0 16px 48px;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

main {
	max-width: 32rem;
	margin: 0 auto;
	padding-top: 40px;
}

h1 {
	font-size: 1.9rem;
	line-height: 1.15;
	margin: 0 0 4px;
	letter-spacing: -0.02em;
}

h2 {
	font-size: 1.15rem;
	margin: 32px 0 10px;
	letter-spacing: -0.01em;
}

p { margin: 0 0 14px; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

a { color: var(--accent); }

/* ── Ring form ────────────────────────────────────────────────────────────── */

.pin {
	width: 100%;
	padding: 18px 16px;
	font-size: 1.6rem;
	font-family: inherit;
	letter-spacing: 0.4em;
	text-align: center;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 14px;
}
.pin:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}
/* The PIN is digits, so the numeric keypad is the right keyboard — and the
   spinner arrows a number input adds are useless at this size. */
.pin::-webkit-outer-spin-button,
.pin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pin { -moz-appearance: textfield; appearance: textfield; }

.ring-btn {
	display: block;
	width: 100%;
	padding: 20px 18px;
	margin-bottom: 12px;
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 600;
	text-align: left;
	color: var(--accent-ink);
	background: var(--accent);
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	/* Comfortably past the 44px minimum tap target, because this gets pressed
	   in a hurry and a mis-tap costs a whole call timeout. */
	min-height: 68px;
}
.ring-btn:active { transform: scale(0.99); }
.ring-btn:disabled { opacity: 0.5; cursor: default; }

/* A locked phone is shown, not offered: same shape so the page does not jump
   when it unlocks, but visibly inert. */
.ring-btn.locked {
	background: var(--surface);
	border: 1px dashed var(--border);
	color: var(--muted);
	cursor: default;
}
.ring-btn.locked .num { font-style: italic; }

#pin.unlocked {
	letter-spacing: normal;
	font-size: 1rem;
	color: var(--good);
}
.ring-btn .num {
	display: block;
	font-size: 0.9rem;
	font-weight: 400;
	opacity: 0.8;
}

/* ── Status ───────────────────────────────────────────────────────────────── */

.status {
	margin-top: 20px;
	padding: 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
}
.status.done { border-left-color: var(--good); }
.status.problem { border-left-color: var(--bad); }
.status p:last-child { margin-bottom: 0; }
.status .num { color: var(--muted); font-size: 0.9rem; }

/* A pulsing dot rather than a spinner: it reads as "a phone is ringing right
   now" instead of "the page is loading". */
.pulse {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--accent);
	animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
	.pulse { animation: none; }
}

/* ── Setup instructions ───────────────────────────────────────────────────── */

.card {
	padding: 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 16px;
}

.callout {
	padding: 16px 18px;
	background: color-mix(in srgb, var(--accent) 12%, var(--surface));
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
	border-radius: var(--radius);
	margin-bottom: 20px;
}

ol.steps { padding-left: 1.3em; margin: 0; }
ol.steps li { margin-bottom: 12px; }

kbd {
	padding: 2px 7px;
	font-family: inherit;
	font-size: 0.88em;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 6px;
	white-space: nowrap;
}

.btn-secondary {
	display: inline-block;
	padding: 14px 20px;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--accent-ink);
	background: var(--accent);
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
}

.number-big {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* ── Admin ────────────────────────────────────────────────────────────────── */

.admin input, .admin button, .admin select {
	font-family: inherit;
	font-size: 1rem;
	padding: 11px 13px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
}
.admin button {
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	border: none;
	cursor: pointer;
}
.admin button.danger { background: transparent; color: var(--bad); border: 1px solid var(--border); }
.admin .row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.admin .row input { flex: 1 1 8rem; min-width: 0; }
.admin table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin th, .admin td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
.admin th { color: var(--muted); font-weight: 500; }

.admin td.trigger code {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	font-size: 0.78rem;
	color: var(--accent);
}
.admin td.trigger { padding-left: 14px; border-left: 2px solid var(--border); }

@media (min-width: 40rem) {
	body { font-size: 18px; }
	main { padding-top: 64px; }
	h1 { font-size: 2.3rem; }
}