/* Tokens copied from kaffa-if0/orders-site/src/lib/tokens.css (the canon) —
   only what this page uses. Control sizing is bumped up from the canon's
   36px/12px for kiosk-sized tap targets on a shared tablet. */
:root {
	color-scheme: light;

	--color-paper: #F7F7F7;
	--color-ink: #262425;
	--color-gray: #5F5F5C;
	--color-surface: #EBEBEB;
	--surface-0: #FFFFFF;
	--color-row-line: rgb(38 36 37 / 0.20);
	--color-red: #C72636;
	--color-control-fill: var(--color-surface);
	--color-control-line: #C7C7C7;

	--font-h01: 'Helvetica Neue', Helvetica, Arial, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-h02: 'PT Serif', Georgia, Charter, ui-serif, serif;

	--fs-14: 14px;
	--fs-20: 20px;
	--fs-28: 28px;

	--pad: 16px;
	--space-half: 8px;
	--space-1: var(--pad);
	--space-2: calc(var(--pad) * 2);
	--space-4: calc(var(--pad) * 4);

	--control-height: 56px;
	--radius-control: 16px;
	--border-control: 1px;
}

@font-face {
	font-family: 'PT Serif';
	src: url('/fonts/pt-serif-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	min-height: 100%;
}

body {
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-h01);
	font-size: var(--fs-20);
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	padding: var(--space-4) var(--space-2) calc(var(--space-4) + var(--control-height));
}

.logo {
	height: 32px;
	margin-bottom: var(--space-4);
}

.screen {
	width: 100%;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.screen[hidden] {
	display: none;
}

h1 {
	font-family: var(--font-h02);
	font-size: var(--fs-28);
	font-weight: 400;
	margin: 0;
}

/* The heading is where focus lands when a screen shows (app.js); it is a
   landing spot, not a control, so it draws no ring. */
h1:focus {
	outline: none;
}

.lede {
	margin: 0;
	color: var(--color-ink);
	opacity: 0.65;
}

form {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-half);
}

label {
	font-size: var(--fs-14);
}

.optional {
	opacity: 0.5;
}

input {
	height: var(--control-height);
	padding: 0 var(--pad);
	font-size: var(--fs-20);
	font-family: inherit;
	color: var(--color-ink);
	background: var(--surface-0);
	border: var(--border-control) solid var(--color-control-line);
	border-radius: var(--radius-control);
}

input:focus {
	outline: 2px solid var(--color-ink);
	outline-offset: 1px;
}

/* A field with an error under it: the page's one red, on the line and in the words. */
input[aria-invalid='true'] {
	border-color: var(--color-red);
}

button {
	height: var(--control-height);
	padding: 0 var(--space-2);
	font-size: var(--fs-20);
	font-family: inherit;
	font-weight: 400;
	color: var(--surface-0);
	background: var(--color-ink);
	border: none;
	border-radius: var(--radius-control);
	cursor: pointer;
}

button:disabled {
	opacity: 0.45;
	cursor: default;
}

/* A pressed primary (Sending…, Checking…, Creating…) reads, it does not dim: the customer is waiting on it. */
button[aria-busy='true'] {
	opacity: 1;
	cursor: progress;
}

.link-button {
	background: none;
	color: var(--color-ink);
	text-decoration: underline;
	height: auto;
	padding: 8px;
}

.error {
	margin: 0;
	color: var(--color-red);
	font-size: var(--fs-14);
	min-height: 1em;
}

.error:empty {
	display: none;
}

/* The general error above a form is a landing spot for focus, not a control. */
.error:focus {
	outline: none;
}

.client-number {
	font-family: var(--font-h02);
	font-size: calc(var(--fs-28) * 2);
	margin: 0;
}

/* The Telegram link: a QR to scan with one's own phone and the address as
   text, which a long press selects whole; the text breaks anywhere rather
   than pushing the column sideways. */
.tg {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.tg-lead {
	margin: 0;
}

.qr {
	width: 224px;
	height: 224px;
	padding: var(--space-half);
	background: var(--surface-0);
	border: var(--border-control) solid var(--color-row-line);
	border-radius: var(--radius-control);
}

.qr:empty {
	display: none;
}

.qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tg-link {
	margin: 0;
	font-size: var(--fs-14);
	color: var(--color-gray);
	overflow-wrap: anywhere;
	user-select: all;
	-webkit-user-select: all;
}

/* The idle line, 14 caps: the last 15 s before the kiosk starts over, at
   the foot of the window; any touch or key takes it away. */
.idle {
	position: fixed;
	left: 50%;
	bottom: var(--space-1);
	transform: translateX(-50%);
	margin: 0;
	padding: var(--space-half) var(--space-1);
	background: var(--color-surface);
	border-radius: var(--radius-control);
	font-size: var(--fs-14);
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.idle[hidden] {
	display: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 480px) {
	body {
		padding: var(--space-2) var(--space-2) calc(var(--space-2) + var(--control-height));
	}
}