/*
 * The kitchen PIN screen (module kitchen-pin, brief kitchen-switch-6-pin,
 * 22 October 2026). Ryan: "Build new one."
 *
 * THE NEW KITCHEN'S OWN TOKENS, by name and value. The values below are the
 * ones `order/kitchen-app/src/index.css` declares and the app's build
 * carries; guard 1084 reads both this file and the deployed build and fails on
 * a token that differs, so a theme change in the app shows up here as a red
 * line rather than as a sign-in screen in last month's colours.
 *
 * DARK IS THE DEFAULT AND LIGHT IS THE CHOICE, the other way round from the
 * app's stylesheet (`:root` light, `.dark` dark), because this screen has to be
 * dark with no script at all. Ryan, 22 October 2026: "for a fresh tablet I want
 * it to load dark." A tablet that chose Light carries `.light` on the root from
 * the head's one line, before this file paints.
 *
 * ONE SIZE TOKEN, the app's own `--k-base`: 16px, and 18px from tablet width.
 * Every length here is a rem of it (Ryan, 25 September 2026: design at
 * ordinary proportions, then scale text and padding together with one base).
 *
 * The class names a check reads are the classic form's (`oo-kitchen__form`,
 * `__digits`, `__pin`, `__go`, `__flash`); the rest are this screen's
 * (`oo-pin...`).
 */

:root {
	/* TOKENS (dark), from the app's `.dark` block */
	--background: oklch(0.145 0 0);
	--foreground: oklch(0.985 0 0);
	--card: oklch(0.205 0 0);
	--card-foreground: oklch(0.985 0 0);
	--primary: oklch(0.922 0 0);
	--primary-foreground: oklch(0.205 0 0);
	--muted: oklch(0.269 0 0);
	--muted-foreground: oklch(0.708 0 0);
	--destructive: oklch(0.704 0.191 22.216);
	--border: oklch(1 0 0 / 10%);
	--input: oklch(1 0 0 / 15%);
	--ring: oklch(0.556 0 0);
	/* END TOKENS */
	--radius: 0.625rem;
	--k-base: 16px;
	--oo-pin-field: oklch(1 0 0 / 4.5%);
	/* How far a locked box fades: half, in dark. */
	--oo-pin-locked: 0.5;
	color-scheme: dark;
}

:root.light {
	/* TOKENS (light), from the app's `:root` block */
	--background: oklch(1 0 0);
	--foreground: oklch(0.145 0 0);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.145 0 0);
	--primary: oklch(0.205 0 0);
	--primary-foreground: oklch(0.985 0 0);
	--muted: oklch(0.97 0 0);
	--muted-foreground: oklch(0.556 0 0);
	--destructive: oklch(0.577 0.245 27.325);
	--border: oklch(0.922 0 0);
	--input: oklch(0.922 0 0);
	--ring: oklch(0.708 0 0);
	/* END TOKENS */
	/* THE BOXES STAY STOCK AND WHITE on the grey card below: filled
	   explicitly, because transparent would show the card through. */
	--oo-pin-field: var(--background);
	/* Locked boxes keep full strength in light (Ryan, 23 October 2026). */
	--oo-pin-locked: 1;
	color-scheme: light;
}

@media (min-width: 768px) {
	:root { --k-base: 18px; }
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: var(--k-base);
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body.oo-pin-doc {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--background);
	color: var(--foreground);
	font-family: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The column: centred, a little above the middle, never wider than a phone's
   reach, and scrollable when a soft keyboard takes half the screen. */
.oo-pin {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 100vh;
	min-height: 100dvh;
	padding: max(1rem, 12vh) 1rem 2rem;
}

.oo-pin__card {
	width: 100%;
	max-width: 24rem;
	padding: 1.5rem;
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) * 1.4);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.oo-pin__head {
	margin-bottom: 1.25rem;
}

.oo-pin__place {
	margin: 0 0 0.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--muted-foreground);
}

.oo-pin__title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
	letter-spacing: -0.025em;
}

.oo-kitchen__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
}

.oo-kitchen__label {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

/* THE ONE FIELD, as itself: no script, or a legacy PIN. */
.oo-kitchen__pin {
	display: block;
	width: 100%;
	height: 3rem;
	padding: 0 0.875rem;
	font: inherit;
	font-size: 1.25rem;
	letter-spacing: 0.2em;
	color: var(--foreground);
	background: var(--oo-pin-field);
	border: 1px solid var(--input);
	border-radius: calc(var(--radius) * 0.8);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.oo-kitchen__pin:focus-visible,
.oo-kitchen__pin:focus {
	border-color: var(--ring);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

/* THE SIX BOXES, drawn by the script over that one field. The field stays
   where it was, the size of the row, invisible, and takes every tap, key,
   paste and screen-reader read; the cells are a picture of it. */
.oo-kitchen__digits {
	position: relative;
}

.oo-kitchen__digits.is-boxes .oo-kitchen__pin {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	opacity: 0;
	color: transparent;
	caret-color: transparent;
	border: 0;
	box-shadow: none;
	z-index: 1;
	cursor: text;
	/* 16px or more, so a phone does not zoom into the field on focus. */
	font-size: 16px;
}

.oo-kitchen__cells {
	display: grid;
	grid-template-columns: repeat(var(--oo-pin-cells, 6), minmax(0, 1fr));
	gap: 0.5rem;
}

.oo-kitchen__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.5rem;
	background: var(--oo-pin-field);
	border: 1px solid var(--input);
	border-radius: calc(var(--radius) * 0.8);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.oo-kitchen__cell.is-filled::after {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 999px;
	background: var(--foreground);
}

.oo-kitchen__cell.is-next {
	border-color: var(--ring);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.oo-kitchen__digits.is-wrong .oo-kitchen__cell {
	border-color: color-mix(in oklch, var(--destructive) 60%, transparent);
}

.oo-kitchen__digits.is-wrong .oo-kitchen__cell.is-next {
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 25%, transparent);
}

/* Shut while the door makes this address wait. In light the boxes stay at
   full strength, so six boxes are still clearly there; the line under them
   says why and the field takes no focus. */
.oo-kitchen__form.is-locked .oo-kitchen__cell,
.oo-kitchen__pin:disabled {
	opacity: var(--oo-pin-locked);
	cursor: not-allowed;
}

/* OPEN, the app's default Button. Gone with the boxes, where the sixth digit
   is the press (Ryan, 21 October 2026), unless a guard's probe is armed. */
.oo-kitchen__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 2.75rem;
	padding: 0 1rem;
	margin-top: 0.25rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--primary-foreground);
	background: var(--primary);
	border: 0;
	border-radius: calc(var(--radius) * 0.8);
	cursor: pointer;
	outline: none;
}

.oo-kitchen__go:hover {
	background: color-mix(in oklch, var(--primary) 90%, transparent);
}

.oo-kitchen__go:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.oo-kitchen__go:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.oo-kitchen__form.is-boxes .oo-kitchen__go {
	display: none;
}

/* A LINE: the app's Alert, as the notice tiers settled it (16 September 2026):
   a pale tint, a subtle border, the subject's glyph. */
.oo-kitchen__flash {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	padding: 0.75rem 0.875rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) * 0.8);
	background: var(--muted);
	color: var(--foreground);
}

.oo-kitchen__flash.is-alert {
	color: var(--destructive);
	background: color-mix(in oklch, var(--destructive) 10%, transparent);
	border-color: color-mix(in oklch, var(--destructive) 30%, transparent);
}

.oo-pin__card > .oo-kitchen__flash {
	margin-bottom: 1.25rem;
}

.oo-pin__glyph {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
}

@media (min-width: 768px) {
	.oo-pin__card {
		padding: 2rem;
	}

	.oo-kitchen__cell {
		height: 4rem;
	}

	.oo-kitchen__cells {
		gap: 0.625rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oo-kitchen__cell,
	.oo-kitchen__pin {
		transition: none;
	}
}

/* THE GREY CARD, light only (Ryan, 23 October 2026: "I like the kitchen pin
   G1 approach."). The whole card is filled exactly as shadcn's own example,
   bg-muted/50, with no border, on the white page; the boxes inside stay
   stock and white. A status line, muted itself, turns white so it still
   reads as a block on the grey. Dark is unchanged. */
:root.light .oo-pin--g1 .oo-pin__card {
	background-color: color-mix(in oklab, var(--muted) 50%, transparent);
	border-color: transparent;
	box-shadow: none;
}

:root.light .oo-pin--g1 .oo-kitchen__flash.is-status {
	background: var(--background);
}

/* THE NO-PIN CARD (23 October 2026, brief kitchen-switch-8-cutover): a site
   with no PIN and no probe says so here, in the classic page's words
   (`oo_kitchen_setup_card()`), now that the classic document is gone. Plain
   text in the card, the command in the muted fill the screen's boxes use. */
.oo-kitchen--setup {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.oo-kitchen--setup p {
	margin: 0;
}

.oo-kitchen--setup p:first-child {
	font-weight: 500;
}

.oo-kitchen--setup code {
	display: inline-block;
	padding: 0.125rem 0.375rem;
	border-radius: calc(var(--radius) * 0.6);
	background-color: color-mix(in oklab, var(--muted) 50%, transparent);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8125rem;
}