/*
 * Invoice PWA styles.
 *
 * Mobile-first, because the mobile app IS this page — a PWA removes the native
 * shell and the WebView hand-off with it. Safe-area insets are respected so the
 * installed, standalone version does not sit under the notch or the home bar.
 */

:root {
	color-scheme: light dark;

	--ink: #161a2d;
	--ink-soft: #4b5168;
	--ink-faint: #858ba3;
	--paper: #f4f5fa;
	--surface: #ffffff;
	--line: #e2e4ee;
	--accent: #3d5fe0;
	--accent-soft: #eaeeff;
	--ok: #12734a;
	--ok-soft: #e2f4ea;
	--warn: #8a5a00;
	--warn-soft: #fdf1dc;
	--error: #a51f2e;
	--error-soft: #fdeaec;

	--radius: 12px;
	--gap: 16px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ink: #eceefa;
		--ink-soft: #a6acc4;
		--ink-faint: #767d96;
		--paper: #0f1220;
		--surface: #191d2e;
		--line: #2a2f45;
		--accent: #7d97ff;
		--accent-soft: #232a49;
		--ok: #6bd6a2;
		--ok-soft: #16301f;
		--warn: #e8b25e;
		--warn-soft: #33280f;
		--error: #ff8f9c;
		--error-soft: #3a1a20;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	padding-bottom: env(safe-area-inset-bottom);
}

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* ---- chrome ---- */

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding: calc(12px + env(safe-area-inset-top)) 20px 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 5;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.brand img { border-radius: 6px; }

.who select {
	font: inherit;
	font-size: 14px;
	color: var(--ink-soft);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 6px 10px;
}

main {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 20px 48px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

h1 { font-size: 20px; margin: 0 0 12px; letter-spacing: -0.02em; }
h2 { font-size: 15px; margin: 0 0 12px; letter-spacing: -0.01em; }

.hint {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-faint);
}

/* ---- lists ---- */

.invoices, .cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.empty {
	color: var(--ink-faint);
	font-size: 14px;
	padding: 16px 0;
}

.invoice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
}

.invoice.is-paid { opacity: 0.62; }

.invoice-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invoice-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-ref { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.invoice-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.invoice-amount { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; }

.pill {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
}
.pill-paid { background: var(--ok-soft); color: var(--ok); }

.card {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px 16px;
}

.card-brand { font-weight: 600; font-size: 14px; }
.card-digits { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.card :last-child { margin-left: auto; }

/* ---- buttons ---- */

.btn {
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	padding: 10px 18px;
	border: 0;
	border-radius: 9px;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	min-height: 44px;
}

.btn:disabled { opacity: 0.55; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-pay { padding: 8px 16px; min-height: 38px; font-size: 14px; }

.btn-secondary {
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--line);
	width: 100%;
}

.btn-quiet {
	background: none;
	color: var(--ink-faint);
	font-size: 13px;
	padding: 6px 8px;
	min-height: 32px;
}
.btn-quiet:hover { color: var(--error); }

.btn-card {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink);
	text-align: left;
}
.btn-card .card-go { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 14px; }

/* ---- payment sheet ---- */

.sheet {
	width: min(440px, 100vw);
	border: 0;
	border-radius: 16px 16px 0 0;
	padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
	background: var(--surface);
	color: var(--ink);
	margin: auto auto 0;
}

@media (min-width: 560px) {
	.sheet { border-radius: 16px; margin: auto; }
}

.sheet::backdrop { background: rgba(10, 12, 22, 0.55); }

.sheet-close-form { float: right; margin: -8px -4px 0 0; }
.sheet-close {
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--ink-faint);
	cursor: pointer;
	padding: 4px 8px;
}

#sheet-title { font-size: 18px; margin: 0 0 4px; }
.sheet-amount { margin: 0 0 20px; color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.sheet-amount strong { color: var(--ink); }

.step { display: flex; flex-direction: column; gap: 14px; }
/* `display` on a class beats the `hidden` attribute, so the sheet would show
   every step at once without this. */
.step[hidden], [hidden] { display: none; }
.choose { margin-bottom: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }

.label {
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 600;
}

input[type="text"], input:not([type]) {
	width: 100%;
	font: inherit;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--ink);
	min-height: 44px;
	font-variant-numeric: tabular-nums;
}
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The card row is deliberately light in both themes.
   Microform lets us style the hosted input only through an allow-list that has
   no background-color, and the gateway's frame paints on an opaque white canvas,
   so a dark card field is not something this page can ask for. Rather than leave
   one white box among dark ones, every field in the card step matches the frame. */
#step-card {
	--field-bg: #ffffff;
	--field-ink: #161a2d;
	--field-line: #c9cddd;
	--field-faint: #8b91a7;
	--field-height: 44px;
}
#step-card .field input {
	color-scheme: light;
	background: var(--field-bg);
	color: var(--field-ink);
	border-color: var(--field-line);
	height: var(--field-height);
}
#step-card .field input::placeholder { color: var(--field-faint); }

/* The gateway's iframe. Sized like the inputs next to it: Microform's frame is
   width:100% / height:100% of this container, and the hosted input fills the
   frame, so the container is what decides how tall the field looks. Horizontal
   padding has to live here too — the hosted document zeroes its own. */
.hosted {
	height: var(--field-height, 44px);
	padding: 0 12px;
	border: 1px solid var(--field-line, var(--line));
	border-radius: 8px;
	background: var(--field-bg, var(--paper));
	overflow: hidden;
}
.hosted iframe { display: block; width: 100%; height: 100%; border: 0; }
.hosted-loading {
	color: var(--field-faint, var(--ink-faint));
	font-size: 14px;
	line-height: calc(var(--field-height, 44px) - 2px);
}

.consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink-soft);
}
.consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); }

.challenge-note { margin: 0; font-size: 14px; color: var(--ink-soft); }
#stepup-frame {
	width: 100%;
	height: 320px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
}

#ddc-frame { width: 0; height: 0; border: 0; position: absolute; }

.status { margin-top: 14px; font-size: 14px; min-height: 20px; }
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); background: var(--warn-soft); padding: 10px 12px; border-radius: 8px; }
.status.error { color: var(--error); background: var(--error-soft); padding: 10px 12px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}