/* The kitchen page.
 *
 * Loaded on that page and nowhere else (`inc/capacity-kitchen.php`), which is
 * why this is a file rather than another 200 lines of `order.css`: nothing on
 * the rest of the site uses a rule in here, and `order.css` is already 300 KB
 * on every ordering page.
 *
 * THE DESIGN BRIEF IS THE DEVICE. A phone, held by somebody expediting, with
 * flour on it, during a rush. So: one screen with no scrolling at 390, targets
 * well past the 44px minimum, no hover-only affordance anywhere, and the two
 * decisions this page exists for above everything else on it.
 *
 * EVERY VALUE IS A TOKEN WITH A DEFAULT, the rule the rest of the plugin
 * follows. A client site restyles this page by redeclaring `--oo-*` in its
 * child theme; the defaults are here so a site with no overrides is coherent.
 * The spacing steps are `order.css`'s own scale -- `--oo-s1` 4 to `--oo-s8` 48
 * -- and this file picks steps rather than numbers, with the two exceptions
 * that are not rhythm: the control height, which is a target size, and the
 * hairlines.
 */

.oo-kitchen {
	--oo-kitchen-gap: var(--oo-s4, 16px);
	--oo-kitchen-btn-h: 56px;
	--oo-kitchen-radius: var(--oo-btn-radius, 9px);

	max-width: 34rem;
	margin-inline: auto;
	padding-block: var(--oo-s5, 20px);
	color: var(--oo-ink, #16181c);
	font-size: 1rem;
	line-height: 1.4;
}

/* No `.oo-kitchen__title`: the page's own <h1> is the heading (see
   `oo_kitchen_signin_form()`), and this file used to style a second one. */

.oo-kitchen__heading {
	margin: 0 0 var(--oo-s1, 4px);
	font-size: 1.125rem;
	line-height: 1.25;
}

.oo-kitchen__hint,
.oo-kitchen__note {
	margin: 0 0 var(--oo-s3, 12px);
	color: var(--oo-muted, #565c66);
	font-size: .875rem;
}

.oo-kitchen__note {
	margin-block: var(--oo-s3, 12px) 0;
}

/* THE STATE, AS THREE FACTS RATHER THAN A PARAGRAPH. A <dl>, because each of
   them is a label and its value and that is what a definition list is; reading
   it aloud gives "Right now, open now until 9:00 pm" rather than a run-on. */
.oo-kitchen__now {
	display: grid;
	gap: var(--oo-s3, 12px);
	margin: 0 0 var(--oo-kitchen-gap);
	padding: var(--oo-s4, 16px);
	border: 1px solid var(--oo-line, #dfe3e8);
	border-radius: var(--oo-radius, 14px);
	background: var(--oo-ground, #fff);
}

.oo-kitchen__fact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oo-s2, 8px);
	align-items: baseline;
	justify-content: space-between;
}

.oo-kitchen__fact dt {
	margin: 0;
	color: var(--oo-muted, #565c66);
	font-size: .875rem;
}

.oo-kitchen__fact dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* The paused banner on this page carries the same sentence the customer is
   shown, deliberately: the person pressing the button should be reading the
   words the customer is reading, not a paraphrase of them. */
.oo-kitchen__banner {
	margin: 0 0 var(--oo-kitchen-gap);
	padding: var(--oo-s3, 12px) var(--oo-s4, 16px);
	border-left: 3px solid var(--oo-warn, #b45309);
	border-radius: var(--oo-kitchen-radius);
	background: var(--oo-ground, #fff);
	font-weight: 600;
}

.oo-kitchen__flash {
	margin: 0 0 var(--oo-kitchen-gap);
	padding: var(--oo-s3, 12px) var(--oo-s4, 16px);
	border-radius: var(--oo-kitchen-radius);
	background: var(--oo-ground, #fff);
	border: 1px solid var(--oo-line, #dfe3e8);
}

.oo-kitchen__flash.is-alert {
	border-color: var(--oo-error, #d92d20);
	color: var(--oo-error, #d92d20);
	font-weight: 600;
}

.oo-kitchen__section {
	margin-block: 0 var(--oo-s6, 24px);
}

/* A ROW THAT WRAPS RATHER THAN A GRID WITH A COLUMN COUNT. Five busy options
   and four pause options do not divide into the same grid, and a fixed count
   puts one orphan on its own line on the narrowest phone. `flex: 1 1 auto`
   with a floor lets the row decide. */
.oo-kitchen__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oo-s2, 8px);
	margin: 0;
}

.oo-kitchen__btn {
	flex: 1 1 5.5rem;
	min-height: var(--oo-kitchen-btn-h);
	padding: var(--oo-s2, 8px) var(--oo-s3, 12px);
	border: 1px solid var(--oo-line, #dfe3e8);
	border-radius: var(--oo-kitchen-radius);
	background: var(--oo-ground, #fff);
	color: var(--oo-ink, #16181c);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	/* A press on a phone must not also select the label under the thumb. */
	-webkit-user-select: none;
	user-select: none;
}

.oo-kitchen__btn--wide {
	flex-basis: 100%;
}

/* THE CURRENT SETTING IS A FILLED CHIP, NOT A BORDER COLOUR. Colour alone is
   not a state (the menu's status line carries the same rule and the same
   reason): the fill, the weight and `aria-pressed` all say it, so it survives
   a greyscale screenshot and a screen reader alike. */
.oo-kitchen__btn.is-on {
	background: var(--oo-ink, #16181c);
	border-color: var(--oo-ink, #16181c);
	color: var(--oo-ground, #fff);
}

.oo-kitchen__btn.is-resume {
	background: var(--oo-open, #1a7f4b);
	border-color: var(--oo-open, #1a7f4b);
	color: #fff;
}

/* Focus is drawn rather than left to the theme: GeneratePress removes the
   outline on `button:focus` and replaces it with a colour change, which is
   invisible on a chip that is already filled. */
.oo-kitchen__btn:focus-visible,
.oo-kitchen__go:focus-visible,
.oo-kitchen__pin:focus-visible,
.oo-kitchen__link:focus-visible {
	outline: 3px solid var(--oo-brand, var(--oo-ink, #16181c));
	outline-offset: 2px;
}

.oo-kitchen__form {
	display: grid;
	gap: var(--oo-s3, 12px);
}

.oo-kitchen__label {
	font-weight: 600;
}

/* The PIN field is deliberately large and widely tracked: it is typed with a
   thumb, once, and read back by nobody. */
.oo-kitchen__pin {
	width: 100%;
	min-height: var(--oo-kitchen-btn-h);
	padding: var(--oo-s2, 8px) var(--oo-s3, 12px);
	border: 1px solid var(--oo-line, #dfe3e8);
	border-radius: var(--oo-kitchen-radius);
	background: var(--oo-ground, #fff);
	color: var(--oo-ink, #16181c);
	font: inherit;
	font-size: 1.5rem;
	letter-spacing: .35em;
}

.oo-kitchen__go {
	min-height: var(--oo-kitchen-btn-h);
	border: 0;
	border-radius: var(--oo-kitchen-radius);
	background: var(--oo-ink, #16181c);
	color: var(--oo-ground, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.oo-kitchen__out {
	margin-block: var(--oo-s7, 32px) 0;
}

/* A submit button that reads as a link, because signing out is a form post --
   it must not be a GET anybody can put in an <img> tag. */
.oo-kitchen__link {
	padding: var(--oo-s2, 8px) 0;
	border: 0;
	background: none;
	color: var(--oo-muted, #565c66);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.oo-kitchen--setup code {
	display: inline-block;
	padding: var(--oo-s1, 4px) var(--oo-s2, 8px);
	border-radius: var(--oo-s1, 4px);
	background: var(--oo-line, #dfe3e8);
}

/* Nothing here animates, and the one thing that could -- the chip's fill --
   does not, so there is no reduced-motion block to write. A control that
   transitions its own state is a control whose state is briefly a lie, which
   `TRAPS.md` records as an afternoon lost to reading one. */