/* src/chef/chef.css
   Only what the kitchen screens need beyond base.css. Logical properties
   throughout, because the Urdu view is the same layout read the other way and
   must not need a second stylesheet.

   Everything here assumes one wet hand and a 390px phone. Targets are large,
   rows wrap instead of scrolling sideways, and nothing animates. */

#banners:not(:empty) {
  margin-block-end: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

#banners .pill {
  max-inline-size: 100%;
  white-space: normal;
  text-align: start;
  line-height: 1.45;
}

.banner-warn {
  border: 2px solid var(--clay);
  font-weight: 650;
  padding-block: 8px;
}

/* A stack of label, control, label, control. The gap does the spacing so no
   element needs a margin that would have to be flipped for Urdu. */
.stack,
.card > label,
.card > input,
.card > select,
.card > textarea,
.card > button {
  margin-block-start: 12px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

textarea {
  min-block-size: 96px;
  padding-block: 10px;
  resize: vertical;
}

/* Two or three big targets side by side that wrap rather than overflow. */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 12px;
}

.choices > * {
  flex: 1 1 10rem;
  min-inline-size: 0;
}

button.primary {
  inline-size: 100%;
  background: var(--coriander);
  border-color: var(--coriander);
  color: var(--paper);
  font-weight: 650;
}

button.choice[aria-pressed="true"] {
  background: var(--haldi-soft);
  border-color: var(--haldi);
  border-width: 2px;
  font-weight: 650;
}

button[aria-pressed="true"][data-testid^="staple-"] {
  background: var(--clay-soft);
  border-color: var(--clay);
  border-width: 2px;
}

button[data-testid="dish-mic"][data-state="recording"] {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--paper);
}

/* File inputs are a target she has to hit with one hand, so they get the same
   height as a button rather than the browser default. */
input[type="file"] {
  padding-block: 12px;
  background: var(--raised);
}

.row { flex-wrap: wrap; }

.dish h2 { margin-block-end: 4px; }

.big {
  font-size: 1.5rem;
  font-weight: 650;
  margin-block: 8px;
}

/* The label text she copies onto the container. Monospaced and boxed so she
   can read it back against what she has written. */
.label-card {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 12px;
  word-break: break-word;
}

blockquote.note {
  margin: 0;
  margin-block-start: 12px;
  padding-inline-start: 14px;
  border-inline-start: 4px solid var(--haldi);
  color: var(--ink);
}

h3.muted {
  margin-block: 16px 4px;
  font-size: 0.95rem;
  font-weight: 650;
  text-transform: none;
}

[role="status"]:not([hidden]) {
  margin-block-start: 12px;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}