/*
 * brigade: design tokens, base styles, app shell and components (docs/ui.md).
 * Plain CSS, no build step. Look and tokens from the approved click sketch (part 3).
 * No inline styles anywhere: everything a page needs is a class here (Content Security Policy).
 */

/* --- Fonts, self-hosted (SIL Open Font License, see fonts/OFL-*.txt) ------------------------ */

/* A variable font: one file for weights 400 to 700. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/figtree-latin.100ae98594da.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400-latin.c008db4e8a97.woff2") format("woff2");
}

/* --- Tokens ---------------------------------------------------------------------------------- */

:root {
  color-scheme: light;
  --bg: #f4f2ed;
  --surface: #ffffff;
  --surface-2: #f9f7f3;
  --ink: #1c1b18;
  --ink-2: #4a463e;
  --muted: #6b6559;
  --line: #e8e3d9;
  --line-2: #d8d1c3;
  --accent: #86611a;
  --accent-soft: #f5ecd8;
  --gold: #a97c26;
  --sel: #fbf6ea;
  --btn: #1c1b18;
  --btn-ink: #ffffff;
  --ok: #34704a;
  --ok-soft: #e5f0e7;
  --warn: #94520f;
  --warn-soft: #fbebdb;
  --bad: #b0413a;
  --bad-soft: #f8e3e1;
  --shadow: 0 1px 2px rgb(28 27 24 / 4%), 0 6px 24px rgb(28 27 24 / 6%);
  --shadow-lg: 0 2px 6px rgb(28 27 24 / 6%), 0 24px 60px rgb(28 27 24 / 16%);

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --space-1: 6px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;

  --radius-tag: 6px;
  --radius-note: 10px;
  --radius-control: 12px;
  --radius-panel: 18px;
  --radius-pill: 999px;

  --content-width: 980px;
  --wide-width: 1240px;
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141310;
    --surface: #1d1b18;
    --surface-2: #23211d;
    --ink: #f1ede4;
    --ink-2: #cdc6b7;
    --muted: #a39c8d;
    --line: #2e2b26;
    --line-2: #3e3a33;
    --accent: #e2bc6c;
    --accent-soft: #342a19;
    --gold: #d3a750;
    --sel: #27221a;
    --btn: #f1ede4;
    --btn-ink: #141310;
    --ok: #7dc08e;
    --ok-soft: #1f2e23;
    --warn: #e59a55;
    --warn-soft: #352616;
    --bad: #e57e75;
    --bad-soft: #3a1f1c;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 24px rgb(0 0 0 / 25%);
    --shadow-lg: 0 2px 6px rgb(0 0 0 / 40%), 0 24px 60px rgb(0 0 0 / 50%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141310;
  --surface: #1d1b18;
  --surface-2: #23211d;
  --ink: #f1ede4;
  --ink-2: #cdc6b7;
  --muted: #a39c8d;
  --line: #2e2b26;
  --line-2: #3e3a33;
  --accent: #e2bc6c;
  --accent-soft: #342a19;
  --gold: #d3a750;
  --sel: #27221a;
  --btn: #f1ede4;
  --btn-ink: #141310;
  --ok: #7dc08e;
  --ok-soft: #1f2e23;
  --warn: #e59a55;
  --warn-soft: #352616;
  --bad: #e57e75;
  --bad-soft: #3a1f1c;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 24px rgb(0 0 0 / 25%);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / 40%), 0 24px 60px rgb(0 0 0 / 50%);
}

/* --- Base ------------------------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--font-display);
}

h1 {
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 26px;
}

h3 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

p,
ul,
ol {
  margin: 0;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

code {
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* Visible focus for keyboard users on everything that can take it. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 60;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
}

.skip-link:focus {
  top: var(--space-2);
}

.icon {
  display: block;
  flex: none;
}

.num {
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 13px;
}

.warn-text {
  color: var(--warn);
}

/* --- App shell ------------------------------------------------------------------------------- */

.topbar {
  background: var(--bg);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 18px var(--gutter) 6px;
}

/* The first letter of the business in a dark tile, as in the sketch. */
.topbar__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
}

.topbar__tenant {
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
}

.topbar__nav {
  /* On a phone the navigation takes its own row and scrolls sideways when it does not fit. */
  order: 3;
  flex: 1 0 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  background: var(--surface-2);
}

.nav__link[aria-current="page"] {
  background: var(--btn);
  color: var(--btn-ink);
}

.usermenu {
  position: relative;
}

.usermenu__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.usermenu__toggle::-webkit-details-marker {
  display: none;
}

.usermenu__toggle::after {
  content: " ▾";
  color: var(--muted);
}

.usermenu__panel {
  position: absolute;
  right: 0;
  z-index: 40;
  min-width: 200px;
  margin-top: var(--space-1);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 760px) {
  .topbar__tenant {
    margin-right: 0;
  }

  .topbar__nav {
    order: 0;
    flex: 0 1 auto;
    margin-left: auto;
  }
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) 48px;
}

.page--wide {
  max-width: var(--wide-width);
}

.page--narrow {
  max-width: 520px;
}

.page form:not([class]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sheet,
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}

.card.stack {
  display: grid;
  gap: var(--space-6);
}

.card.stack-s {
  display: grid;
}

.stack {
  display: grid;
  gap: var(--space-6);
}

.stack-s {
  display: grid;
  gap: var(--space-4);
}

.legend {
  color: var(--muted);
  font-size: 12px;
}

/* --- Flash messages and alerts --------------------------------------------------------------- */

.messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.message,
.alert {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.message--success,
.alert--ok {
  border-color: transparent;
  background: var(--ok-soft);
}

.message--warning,
.alert--warn {
  border-color: var(--warn);
  background: var(--warn-soft);
}

.message--error,
.alert--bad {
  border-color: var(--bad);
  background: var(--bad-soft);
}

/* --- Buttons and links ----------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    box-shadow 0.18s,
    border-color 0.18s;
}

.button:hover {
  border-color: var(--ink-2);
}

.button:active {
  transform: translateY(1px);
}

.button--primary {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
}

.button--primary:hover {
  box-shadow: 0 6px 18px rgb(28 27 24 / 18%);
}

.button--soft {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.button--quiet {
  border-color: transparent;
  background: transparent;
}

.button--sm {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  font-size: 14px;
  white-space: normal;
  text-align: left;
}

.button--square {
  width: 44px;
  height: 44px;
  padding: 0;
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.lnk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  cursor: pointer;
}

.lnk:hover {
  text-decoration-color: currentcolor;
}

.icon-button {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--radius-note);
  background: none;
  color: var(--muted);
}

.icon-button:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* --- Form fields ----------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.field__label,
.f__label {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.field__help {
  color: var(--muted);
  font-size: 13px;
}

/* 16 px in inputs: phones do not zoom into the field. */
.field input:not([type="checkbox"], [type="radio"]),
.field select,
.field textarea,
.in {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.in:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea.in,
.field textarea {
  min-height: 88px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

select.in {
  padding-right: 36px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 14px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.in--sm {
  width: auto;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-note);
}

select.in--sm {
  padding-right: 30px;
}

.in--w4 {
  width: 4.5em;
}

.in--w5 {
  width: 5.5em;
}

.in--w7 {
  width: 7.5em;
}

.in--w12 {
  width: 12em;
  max-width: 100%;
}

.in--title {
  min-height: 56px;
  font-family: var(--font-display);
  font-size: 26px;
}

.in--warn {
  border-color: transparent;
  background: var(--warn-soft);
}

.f {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.with-unit {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.field input[type="checkbox"],
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--ok);
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--bad);
}

.field__errors {
  color: var(--bad);
  font-size: 14px;
  font-weight: 700;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.inline-form .in {
  flex: 1 1 12em;
  width: auto;
}

.inline-form .in--w7 {
  flex: 0 1 8em;
}

/* --- Tables and list rows -------------------------------------------------------------------- */

/* Wide tables scroll sideways inside their panel. */
.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}

.table th,
.table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table .num {
  text-align: right;
  white-space: nowrap;
}

.table .sub {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}

.table .sub.warn-text {
  color: var(--warn);
}

.rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.row__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.row__meta {
  color: var(--muted);
  font-size: 13px;
}

.row--overdue {
  border-color: var(--bad);
  background: var(--bad-soft);
}

.row--soon {
  border-color: var(--warn);
  background: var(--warn-soft);
}

.row--done {
  opacity: 0.6;
}

.row--done .row__title {
  text-decoration: line-through;
}

/* --- Empty state ----------------------------------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-panel);
  color: var(--muted);
}

.empty__title {
  color: var(--ink);
  font-weight: 700;
}

.empty-line {
  color: var(--muted);
  font-size: 14px;
}

/* --- Status pills, tags, marks --------------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 1px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.pill--overdue {
  background: var(--bad);
  color: var(--surface);
}

.pill--soon {
  background: var(--warn);
  color: var(--surface);
}

.pill--ok {
  background: var(--ok-soft);
  color: var(--ok);
}

/* Done, and silent sources: grey, never green (principle 6). */
.pill--done,
.pill--grey {
  border-color: var(--line);
  color: var(--muted);
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.mark--warn {
  color: var(--warn);
}

/* --- Allergens ------------------------------------------------------------------------------- */

/* Four states with four shapes: A (contains), (A) (traces), struck-through A (free) and A?
 * (never checked). "Never checked" is loud and never looks like "free". */
.allergens {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.allergen {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-tag);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.allergen--contains {
  border-color: var(--ink);
  color: var(--ink);
}

.allergen--traces {
  border-style: dotted;
  color: var(--muted);
  font-weight: 600;
}

.allergen--free {
  border-color: transparent;
  color: var(--muted);
  font-weight: 400;
}

.allergen--not-checked {
  border: 1.5px dashed var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
}

.allergen--none {
  padding: 0 8px;
  border-color: transparent;
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 600;
}

/* --- Page head and kitchen navigation -------------------------------------------------------- */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}

.page-head__sub {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.saved {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.kitchen-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.seg__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.seg__item:hover {
  background: var(--surface-2);
}

.seg__item[aria-current="page"] {
  background: var(--btn);
  color: var(--btn-ink);
}

/* Step number in the kitchen navigation: Zutaten, Rezepte, Gerichte, in the order data is built. */
.seg__num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 12.5px;
}

.seg__item[aria-current="page"] .seg__num {
  border-color: var(--btn-ink);
}

.seg + .gaps-button {
  margin-left: auto;
}

/* "Neu": asks first what to create. */
.new-menu {
  position: relative;
  margin-left: auto;
}

.new-menu > summary {
  list-style: none;
}

.new-menu > summary::-webkit-details-marker {
  display: none;
}

.new-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: var(--space-4);
  width: min(340px, calc(100vw - 32px));
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
}

.new-menu__kinds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.new-menu__kinds legend {
  margin-bottom: var(--space-2);
}

.chip--choice {
  gap: var(--space-2);
  cursor: pointer;
}

.chip--choice:has(input:checked) {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
}

.chip--choice input {
  accent-color: var(--gold);
}

.gaps-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 6px 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.gaps-button__count {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--btn-ink);
  font-size: 12.5px;
}

.gaps-button--ok .gaps-button__count {
  background: var(--ok);
}

/* --- Kitchen screens: list on the left, the open item on the right ---------------------------- */

.split {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.split > * {
  min-width: 0;
}

.picklist {
  display: grid;
  gap: 4px;
  padding: var(--space-3);
}

.picklist__item {
  display: grid;
  gap: 1px;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  color: var(--ink);
  text-decoration: none;
}

.picklist__item:hover {
  background: var(--surface-2);
}

.picklist__item span {
  color: var(--muted);
  font-size: 12.5px;
}

.picklist__item .mark--warn {
  color: var(--warn);
}

.picklist__item[aria-current="page"] {
  background: var(--sel);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.picklist__group {
  padding: var(--space-2) var(--space-4) 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.picklist__new {
  padding: var(--space-1) var(--space-4);
}

.picklist__new summary {
  min-height: 44px;
  list-style: none;
}

.picklist__new summary::-webkit-details-marker {
  display: none;
}

.picklist__form {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

@media (min-width: 861px) {
  .split > .picklist {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    max-height: calc(100vh - 32px);
    overflow: auto;
  }
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  /* The list becomes one row of cards that scrolls sideways. */
  .picklist {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .picklist__item {
    flex: none;
    max-width: 72vw;
  }

  .picklist__group {
    display: none;
  }

  .picklist__new {
    flex: none;
    align-self: center;
  }
}

.detail__title {
  font-size: 30px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 18px;
}

.used-in {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}

.field-note:empty {
  display: none;
}

/* Lines of a recipe or a dish: amount, name with its marks, remove. */
.lines {
  display: grid;
  padding: 0;
  list-style: none;
}

.lines__row {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.lines__amount {
  font-weight: 700;
  text-align: right;
}

.lines__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.lines__cost {
  color: var(--muted);
  font-size: 13px;
}

.lines__gap {
  grid-column: 2 / -1;
  color: var(--warn);
  font-size: 12.5px;
}

/* Typing a new line, with suggestions below the field. */
.entry {
  position: relative;
  display: grid;
  gap: var(--space-1);
}

.suggest:empty {
  display: none;
}

.suggest__list {
  position: absolute;
  top: 54px;
  right: 0;
  left: 0;
  z-index: 5;
  display: grid;
  gap: 2px;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

.suggest__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 46px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-note);
  background: none;
  text-align: left;
}

.suggest__item:hover,
.suggest__item:focus-visible,
.suggest__item--first {
  background: var(--sel);
}

.suggest__item small,
.entry__read,
.entry__hint {
  color: var(--muted);
  font-size: 13px;
}

.entry__hint--error {
  color: var(--bad);
  font-weight: 600;
}

/* While suggestions show, the read line takes the place of the hint below the field. */
.suggest:not(:empty) + .entry__hint {
  display: none;
}

.yield {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: 15.5px;
}

.steps-list {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.3em;
}

.warnbox,
.hint {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) 14px;
  border-radius: 14px;
  font-size: 14.5px;
}

.warnbox {
  background: var(--warn-soft);
  color: var(--ink);
}

.warnbox .icon {
  margin-top: 2px;
  color: var(--warn);
}

.hint {
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.hint:has(> .icon) {
  flex-direction: row;
}

.hint > .icon {
  margin-top: 2px;
  color: var(--gold);
}

.costbox summary,
.more summary {
  min-height: 44px;
  list-style: none;
}

.costbox summary::-webkit-details-marker,
.more summary::-webkit-details-marker {
  display: none;
}

.costbox .hint {
  margin-top: var(--space-2);
}

/* Supplier articles, the preferred one marked with a star. */
.article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.article--preferred {
  border-color: var(--gold);
  background: var(--sel);
}

.article__text {
  flex: 1 1 12em;
  min-width: 0;
}

.article__text span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.star {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--line-2);
}

.star--on {
  color: var(--gold);
}

.star--on svg {
  fill: currentcolor;
}

.new-article {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  padding-top: var(--space-3);
}

.f--full {
  grid-column: 1 / -1;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

@media (max-width: 620px) {
  .fields,
  .new-article {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Allergens and additives of an ingredient: one row each, the states as one row of buttons. */
.states-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 22px;
}

@media (min-width: 1500px) {
  .states-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.states-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.states-row__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 14.5px;
}

.states {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-note);
}

.states form {
  display: contents;
}

.states__item {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
}

.states > :first-child,
.states > form:first-child .states__item {
  border-left: 0;
}

.states__item--contains[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.states__item--traces[aria-pressed="true"] {
  background: var(--line-2);
  color: var(--ink);
}

.states__item--free[aria-pressed="true"] {
  background: var(--ok);
  color: var(--btn-ink);
}

.states__item--not_checked {
  color: var(--muted);
}

.states__item--not_checked[aria-pressed="true"] {
  background: var(--warn-soft);
  color: var(--warn);
  box-shadow: inset 0 0 0 1.5px var(--warn);
}

/* Choices and variants of a dish. */
.choice {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.choice__head,
.variant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.choice__head form,
.variant form {
  margin-left: auto;
}

.variant {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

/* Kitchen sheet. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.chip:hover {
  border-color: var(--ink-2);
}

.chip[aria-current="page"] {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
}

.sheet-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-6);
}

/* "Haben wir alles?" as a panel on the right. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(0 0 0 / 38%);
}

.side {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(440px, 100%);
  padding: max(22px, env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px))
    22px 22px;
  overflow: auto;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: slide 0.22s ease-out;
}

@keyframes slide {
  from {
    transform: translateX(30px);
    opacity: 0.5;
  }
}

.side__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.side__head h2 {
  font-size: 30px;
}

.open-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.open-item__title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-weight: 600;
  list-style: none;
}

details > .open-item__title {
  cursor: pointer;
}

.open-item__title::-webkit-details-marker {
  display: none;
}

.open-item__title > .icon:first-child {
  margin-top: 2px;
  color: var(--warn);
}

.open-item__title > .icon:last-child {
  margin-left: auto;
  transition: transform 0.2s;
}

details[open] > .open-item__title > .icon:last-child {
  transform: rotate(90deg);
}

.open-item__detail {
  margin-left: 28px;
  color: var(--muted);
  font-size: 13.5px;
}

.open-sub {
  display: grid;
  border-top: 1px solid var(--line);
}

.open-sub__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.open-fix {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.open-item > .open-fix {
  margin-left: 28px;
}

@media (max-width: 700px) {
  .open-item > .open-fix,
  .open-item__detail {
    margin-left: 0;
  }
}

/* --- Phones, portrait and landscape --------------------------------------------------------- */

@media (max-width: 700px) {
  .topbar__inner {
    padding-block: 10px 4px;
  }

  .topbar__mark {
    width: 36px;
    height: 36px;
    font-size: 21px;
  }

  .card,
  .sheet {
    padding: 18px;
  }

  .kitchen-nav .seg {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .seg__item {
    padding: 0 11px;
    font-size: 14px;
  }

  .seg__item .icon {
    display: none;
  }

  .new-menu {
    margin-left: 0;
  }

  .new-menu__panel {
    right: auto;
    left: 0;
  }

  .lines__row {
    grid-template-columns: 5em minmax(0, 1fr) auto;
    gap: 4px 10px;
  }
}

/* Phones in landscape: little height, so nothing sticks. */
@media (max-height: 520px) {
  .topbar__inner {
    padding-block: 8px 4px;
  }

  .page {
    padding-top: 14px;
  }

  h1 {
    font-size: 32px;
  }

  .page-head__sub,
  .saved {
    display: none;
  }

}

/* Wide but low (a tablet in landscape): the list beside the content stops sticking. Not below
 * 861 px, where the list is one row that must keep scrolling sideways. */
@media (max-height: 520px) and (min-width: 861px) {
  .split > .picklist {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Touch screens get 44 px targets. */
@media (pointer: coarse) {
  .lnk,
  .icon-button {
    min-width: 44px;
    min-height: 44px;
  }

  .allergen {
    min-width: 26px;
    height: 26px;
  }

  .button--sm {
    min-height: 44px;
  }
}

/* --- Production plan (ADR 0051): week, days, orders, "Heute" ------------------------------ */

.kitchen-nav__production {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.production {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

/* Grid items never grow wider than the screen because of a wide table inside. */
.production .split > *,
.plan-split > * {
  min-width: 0;
}

/* The steps wrap on a narrow phone instead of running off the screen. */
.production .seg {
  max-width: 100%;
}

/* Names of events, recipes and tasks: read as names, not as small labels like other h3. */
.src__name,
.pline__name,
.todo__name {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.production__back {
  margin-left: auto;
}

.page--today {
  max-width: calc(720px + 2 * var(--gutter));
}

/* The week: arrows, its number and dates, the state of the release. */
.weekbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.weekbar__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}

.weekbar__number {
  font-family: var(--font-display);
  font-size: 26px;
}

.weekbar__back .icon,
.today-head .weekbar__back .icon {
  transform: rotate(180deg);
}

.weekbar__state {
  margin-left: auto;
}

/* Left the events (what goes in), right the result. */
.plan-split {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.plan-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
}

.src {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
}

.src--out .src__name,
.src--out .src__meta,
.src--out .src__totals {
  color: var(--muted);
}

.src__day {
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.src__name {
  margin: 0;
  font-size: 18px;
}

.src__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.src__guests {
  font-weight: 600;
}

.src__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  color: var(--ink-2);
  font-size: 14px;
  list-style: none;
}

.src__diet {
  font-weight: 600;
}

/* A switch that says what it is: "Im Plan" or "Nicht im Plan". */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.toggle[aria-pressed="true"] {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok);
}

/* One recipe of the week. */
.pline {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
}

.pline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.pline__total {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pline__min {
  color: var(--warn);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
}

.pline__name {
  margin: 0;
  font-size: 18px;
}

.pline__days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pline__shares {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pline__shares li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}

/* Days as buttons: one tap puts the recipe on that day. */
.daychips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--space-2);
}

.daychips--small {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}

.daychips__form {
  display: contents;
}

.daychip {
  display: grid;
  place-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 4px 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.daychip:hover {
  background: var(--surface-2);
}

.daychip[aria-pressed="true"] {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--btn-ink);
}

.daychip__amount {
  font-size: 12px;
  font-weight: 500;
}

.release__ok {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  color: var(--ok);
  font-weight: 600;
}

.addendum {
  border-color: var(--warn);
}

.addendum__group {
  margin: 0;
  font-size: 15px;
}

.addendum__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 1.2em;
}

/* The days, Monday to Sunday: seven columns on a wide screen, fewer on smaller ones. */
.daygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 1240px) {
  .daygrid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .daygrid:has(> .dayc:nth-child(8)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dayc {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

.dayc--today {
  border-color: var(--gold);
  box-shadow: var(--shadow);
}

.dayc--empty {
  background: var(--surface-2);
}

.dayc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.dayc__title {
  display: grid;
  margin: 0;
  font-size: 20px;
}

.dayc__date {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
}

.dayc__event {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.dayc__slot {
  display: grid;
  gap: var(--space-2);
}

.ditem {
  display: grid;
  gap: 4px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.ditem__name,
.ditem__amount {
  margin: 0;
  overflow-wrap: anywhere;
}

.ditem__name {
  font-weight: 700;
}

.ditem__edit[open] {
  display: grid;
  gap: var(--space-3);
}

.ditem__form,
.todo__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

/* The order list as a sheet of paper. */
.paper {
  display: grid;
  gap: var(--space-2);
  padding: clamp(18px, 4vw, 44px);
  background: #ffffff;
  color: #1c1b18;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
}

.paper p {
  margin: 0;
}

.paper .muted {
  color: #6b6559;
}

.paper__title {
  margin: 8px 0 0;
  font-size: 26px;
}

.paper__supplier {
  font-size: 18px;
}

.paper__table {
  margin-top: var(--space-4);
}

/* "Heute": big targets for a phone in the kitchen. */
.today-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.today-head__title {
  text-align: center;
}

.today-head__title h1,
.today-head__title p {
  margin: 0;
}

.progress-line {
  display: grid;
  gap: var(--space-2);
}

.progress-line__text {
  margin: 0;
}

.progress {
  width: 100%;
  height: 12px;
  appearance: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}

.progress::-webkit-progress-bar {
  background: var(--line);
}

.progress::-webkit-progress-value {
  background: var(--ok);
}

.progress::-moz-progress-bar {
  background: var(--ok);
}

.station {
  display: grid;
  gap: var(--space-3);
}

.station__title {
  margin: var(--space-4) 0 0;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.todo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}

.todo--done {
  background: var(--ok-soft);
  border-color: transparent;
  box-shadow: none;
}

.todo--done .todo__name {
  text-decoration: line-through;
  text-decoration-color: var(--ok);
}

.todo__main,
.todo__actions {
  display: grid;
  gap: var(--space-2);
}

.todo__actions {
  justify-items: end;
}

.todo__name {
  margin: 0;
  font-size: 19px;
}

.todo__amount {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.1;
}

.todo__done {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: var(--ok);
  font-weight: 700;
}

.todo__tick {
  min-width: 132px;
  min-height: 60px;
  font-size: 17px;
}

.scaled {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scaled__row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}

.scaled__amount {
  font-weight: 700;
  text-align: right;
}

@media (max-width: 860px) {
  .plan-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .weekbar__state {
    margin-left: 0;
  }

  .production__back {
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .paper__no {
    display: none;
  }

  .todo {
    grid-template-columns: minmax(0, 1fr);
  }

  .todo__actions {
    justify-items: stretch;
  }

  .todo__tick {
    width: 100%;
  }

  .scaled__row {
    grid-template-columns: 6em minmax(0, 1fr);
  }
}

/* --- Print: the kitchen sheet on paper, without the screen around it ------------------------ */

@media print {
  .topbar,
  .kitchen-nav,
  .weekbar,
  .production .picklist,
  .page-head__actions,
  .chips,
  .sheet-form,
  .skip-link,
  .side-panel {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .card {
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}

/* --- htmx ------------------------------------------------------------------------------------ */

/* htmx's own indicator styles are off (Content Security Policy); these replace them. */
/* Hidden also for screen readers and the keyboard until a request runs. */
.htmx-indicator {
  opacity: 0;
  visibility: hidden;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease-in;
}

/* --- Motion ---------------------------------------------------------------------------------- */

/* After a recalculation, changed regions flash briefly (add the class "flash"). */
@keyframes flash {
  from {
    background-color: var(--accent-soft);
  }
}

.flash {
  animation: flash 0.9s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}