/*
 * brigade: design tokens, base styles, app shell and components (docs/ui.md).
 * Plain CSS, kept in parts (src/brigade/web/styles/) and served as this one file, put together
 * by brigade.web.stylesheet. Look 2027 "Kreide" from the approved sketch (look 2027, sketch 1).
 * 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) ------------------------ */

/* The screens' font since look 2027: a variable font, one file for every weight. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin.a147f99cd533.woff2") format("woff2");
}

/* The paper of a document and the customer's pages (as the PDF): Figtree, variable 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 ---------------------------------------------------------------------------------- */

/* Look 2027 "Kreide": warm white, one strong accent (forest green), lines instead of
 * shadows, one font for everything (Geist). The approved sketch (look 2027, sketch 1) holds every
 * value. */
/* The customer's pages (``.cl``) take the light set whatever the device chose: their page, cards,
 * fields and buttons come from one set, so a dark device never gives dark fields on a light page
 * (tests/test_stylesheet.py). */
:root,
.cl {
  color-scheme: light;
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #fbfaf7;
  --ink: #16140f;
  --ink-2: #3d3a33;
  --muted: #5e5950;
  --line: #e7e2d9;
  --line-2: #d8d1c3;
  /* The edge of a field, a button or a chip: 3:1 on its background (WCAG 1.4.11). */
  --field-line: #8f887c;
  --accent: #0b5d3b;
  --accent-ink: #ffffff;
  --accent-soft: #e3f0e8;
  /* The mark of what has the eye: focus ring, today, preferred, a star. The accent since 2027. */
  --gold: #0b5d3b;
  --sel: #eef5f0;
  --btn: #0b5d3b;
  --btn-ink: #ffffff;
  /* Success is an olive leaf green, the accent a blue-leaning forest green: never mistaken. */
  --ok: #58700f;
  --ok-soft: #eef2d8;
  --warn: #965000;
  --warn-soft: #fdf0df;
  --bad: #bf321d;
  --bad-soft: #fce6e2;
  /* Allergens a dish contains: their own strong colour, never muted (docs/ui.md). */
  --allergy: #8a2b67;
  --allergy-soft: #f8e6f0;
  /* Cards are drawn with a line; only what floats (menus, dialogs, the paper) casts a shadow. */
  --shadow: none;
  --shadow-lg: 0 8px 30px rgb(22 20 15 / 12%);
  /* States of an event: dots, edges and tints only, never text (docs/ui.md). */
  --st-1: #8e887c;
  --st-2: #c9971c;
  --st-3: #d0712f;
  --st-4: #3e6cae;
  --st-5: #2a918c;
  --st-6: #3c7a4e;
  --st-7: #b0413a;
  /* The paper of a customer document stays light in both themes. */
  --paper: #ffffff;
  --paper-ink: #1f1e1b;
  --paper-mute: #5f5a51;
  --paper-line: #e4dfd5;
  --brand: #2e4b3f;
  /* The customer's own pages keep the house's look of before (gold, dark buttons): look 2027 is
   * for the house's screens only. */
  --guest-gold: #a97c26;
  --guest-btn: #1c1b18;
  --guest-btn-ink: #ffffff;

  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* The paper of a document as the PDF prints it, and the customer's pages. */
  --font-paper-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-paper: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --head-weight: 650;
  --head-track: -0.025em;

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

  --radius-tag: 5px;
  --radius-note: 8px;
  --radius-control: 10px;
  --radius-panel: 14px;
  --radius-pill: 999px;

  --content-width: 980px;
  --wide-width: 1240px;
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  /* Height of the bar of areas at the foot of a phone; 0 where there is none. */
  --tabbar-h: 0px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12110f;
    --surface: #1b1a17;
    --surface-2: #23211d;
    --ink: #f1eee8;
    --ink-2: #ccc7bd;
    --muted: #a39d92;
    --line: #2d2b27;
    --line-2: #3e3a33;
    --field-line: #6b655c;
    --accent: #6fcf9f;
    --accent-ink: #04241a;
    --accent-soft: #12281d;
    --gold: #6fcf9f;
    --sel: #16241b;
    --btn: #6fcf9f;
    --btn-ink: #04241a;
    --ok: #c2d85f;
    --ok-soft: #262d0e;
    --warn: #f2ae5c;
    --warn-soft: #33260f;
    --bad: #ff8e7c;
    --bad-soft: #3d1c18;
    --allergy: #f3a6d2;
    --allergy-soft: #3a1a2e;
    --shadow: none;
    --shadow-lg: 0 8px 30px rgb(0 0 0 / 45%);
    --st-1: #a39d90;
    --st-2: #ddb140;
    --st-3: #e58c4e;
    --st-4: #6e9ad8;
    --st-5: #4cb9b3;
    --st-6: #6db27f;
    --st-7: #e06c63;
    --paper: #ece8e0;
    --paper-ink: #1f1e1b;
    --paper-mute: #5f5a51;
    --paper-line: #d6d0c4;
    --brand: #2e4b3f;
    --guest-gold: #d3a750;
    --guest-btn: #f1ede4;
    --guest-btn-ink: #141310;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12110f;
  --surface: #1b1a17;
  --surface-2: #23211d;
  --ink: #f1eee8;
  --ink-2: #ccc7bd;
  --muted: #a39d92;
  --line: #2d2b27;
  --line-2: #3e3a33;
  --field-line: #6b655c;
  --accent: #6fcf9f;
  --accent-ink: #04241a;
  --accent-soft: #12281d;
  --gold: #6fcf9f;
  --sel: #16241b;
  --btn: #6fcf9f;
  --btn-ink: #04241a;
  --ok: #c2d85f;
  --ok-soft: #262d0e;
  --warn: #f2ae5c;
  --warn-soft: #33260f;
  --bad: #ff8e7c;
  --bad-soft: #3d1c18;
  --allergy: #f3a6d2;
  --allergy-soft: #3a1a2e;
  --shadow: none;
  --shadow-lg: 0 8px 30px rgb(0 0 0 / 45%);
  --st-1: #a39d90;
  --st-2: #ddb140;
  --st-3: #e58c4e;
  --st-4: #6e9ad8;
  --st-5: #4cb9b3;
  --st-6: #6db27f;
  --st-7: #e06c63;
  --paper: #ece8e0;
  --paper-ink: #1f1e1b;
  --paper-mute: #5f5a51;
  --paper-line: #d6d0c4;
  --brand: #2e4b3f;
  --guest-gold: #d3a750;
  --guest-btn: #f1ede4;
  --guest-btn-ink: #141310;
}

/* On paper every look is the light one, whatever the person or the device chose: a dark page
 * must not print as a black sheet. The same colours as the light block above (tests/test_ui.py). */
@media print {
  :root:not([data-theme="light"]),
  :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #f7f5f1;
    --surface: #ffffff;
    --surface-2: #fbfaf7;
    --ink: #16140f;
    --ink-2: #3d3a33;
    --muted: #5e5950;
    --line: #e7e2d9;
    --line-2: #d8d1c3;
    --field-line: #8f887c;
    --accent: #0b5d3b;
    --accent-ink: #ffffff;
    --accent-soft: #e3f0e8;
    --gold: #0b5d3b;
    --sel: #eef5f0;
    --btn: #0b5d3b;
    --btn-ink: #ffffff;
    --ok: #58700f;
    --ok-soft: #eef2d8;
    --warn: #965000;
    --warn-soft: #fdf0df;
    --bad: #bf321d;
    --bad-soft: #fce6e2;
    --allergy: #8a2b67;
    --allergy-soft: #f8e6f0;
    --shadow: none;
    --shadow-lg: 0 8px 30px rgb(22 20 15 / 12%);
    --st-1: #8e887c;
    --st-2: #c9971c;
    --st-3: #d0712f;
    --st-4: #3e6cae;
    --st-5: #2a918c;
    --st-6: #3c7a4e;
    --st-7: #b0413a;
    --paper: #ffffff;
    --paper-ink: #1f1e1b;
    --paper-mute: #5f5a51;
    --paper-line: #e4dfd5;
    --brand: #2e4b3f;
    --guest-gold: #a97c26;
    --guest-btn: #1c1b18;
    --guest-btn-ink: #ffffff;
  }
}
/* --- 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: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2 {
  font-family: var(--font-display);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-track);
}

h1 {
  font-size: clamp(26px, 3.4vw, 34px);
}

h2 {
  font-size: 21px;
}

/* A label over a group, in sentence case (no capitals, no letter spacing). */
h3 {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 650;
}

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: 3 px in the accent. */
:focus-visible {
  outline: 3px 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: 14px;
}

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

/* The reference on the 500 page: read out on the phone, so large and with clear gaps. */
.error-reference {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 28px;
  letter-spacing: 0.12em;
}

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

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.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: 10px var(--gutter);
}

/* The first letter of the business in a tile of the accent, as in the sketch. */
.topbar__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: calc(var(--radius-control) - 2px);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.topbar__tenant {
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--head-weight);
  letter-spacing: var(--head-track);
  line-height: 1.1;
}

/* On a phone the areas are a bar at the foot of the screen, in reach of the thumb. */
.topbar__nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  overflow-x: auto;
  padding: 6px max(4px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
  scrollbar-width: none;
}

body:has(.topbar__nav) {
  --tabbar-h: calc(61px + env(safe-area-inset-bottom, 0px));
  padding-bottom: var(--tabbar-h);
}

.nav {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav > li {
  flex: 1 0 auto;
}

.nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

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

.nav__link[aria-current="page"] {
  color: var(--accent);
  font-weight: 650;
  box-shadow: inset 0 3px 0 var(--accent);
  border-radius: 0;
}

.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);
}

/* The person's own choice of look: automatic, light or dark (brigade.core.appearance). */
.usermenu__theme {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.usermenu__seg {
  margin: 0;
  min-width: 0;
  flex-wrap: nowrap;
}

.usermenu__legend {
  padding: 0 var(--space-2) var(--space-1);
  color: var(--muted);
  font-size: 14px;
}

.usermenu__seg .seg__item {
  flex: 1 1 auto;
  min-height: 44px;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  background: none;
  cursor: pointer;
}

.usermenu__seg .seg__item[aria-pressed="true"] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

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

  /* From a tablet on, the areas sit in the top bar; the current one is underlined. */
  .topbar__nav {
    position: static;
    flex: 0 1 auto;
    margin-left: auto;
    padding: 0;
    background: none;
    border-top: 0;
  }

  body:has(.topbar__nav) {
    --tabbar-h: 0px;
    padding-bottom: 0;
  }

  .nav {
    gap: 4px;
  }

  .nav__link {
    min-height: 44px;
  }

  .nav__link[aria-current="page"] {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--accent);
  }
}

@media print {
  .topbar__nav {
    display: none;
  }

  body:has(.topbar__nav) {
    padding-bottom: 0;
  }
}

/* --- The phone bar: four places in reach of the thumb -------------------------------------- */

/* Where it is, the row of areas in the top bar gives way; hidden from a tablet on. */
.phonebar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 6px max(4px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

body:has(.phonebar) {
  --tabbar-h: calc(61px + env(safe-area-inset-bottom, 0px));
  padding-bottom: var(--tabbar-h);
}

body:has(.phonebar) .topbar__nav {
  display: none;
}

.phonebar__item {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 4px 2px;
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}

.phonebar__item[aria-current="page"] {
  color: var(--accent);
}

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

.phonebar__count {
  position: absolute;
  top: 0;
  left: calc(50% + 6px);
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 12px;
}

.phonebar__more {
  display: grid;
}

/* "More" opens a panel above the bar. */
.phonebar__panel {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 6px);
  display: grid;
  min-width: 220px;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
}

.phonebar__panel form {
  display: contents;
}

.phonebar__link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

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

.phonebar__link[aria-current="page"] {
  color: var(--accent);
  font-weight: 650;
}

@media (min-width: 760px) {
  .phonebar {
    display: none;
  }

  body:has(.phonebar) {
    --tabbar-h: 0px;
    padding-bottom: 0;
  }

  body:has(.phonebar) .topbar__nav {
    display: block;
  }
}

@media print {
  .phonebar {
    display: none;
  }

  body:has(.phonebar) {
    padding-bottom: 0;
  }
}

.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: 14px;
  font-weight: 600;
}

.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: 14px;
}

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

/* The notes of a redirect stay in sight: a jump to a card further down ("#sec-mail") scrolls the
 * page, and the notes would scroll away with its top before anyone read them. */
.messages {
  position: sticky;
  top: var(--space-3);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.messages .message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-shadow: var(--shadow-lg);
}

.message__text {
  flex: 1;
  align-self: center;
}

.message__close {
  width: 28px;
  height: 28px;
  margin: -4px -8px -4px 0;
  color: inherit;
}

/* A card a redirect jumps to is not hidden under the notes. */
main:has(.messages) [id^="sec-"] {
  scroll-margin-top: 96px;
}

.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(--field-line);
  border-radius: var(--radius-control);
  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 {
  filter: brightness(0.94);
}

.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: 14px;
  font-weight: 600;
}

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

/* 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(--field-line);
  border-radius: var(--radius-control);
  background: var(--surface);
  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 1px var(--gold),
    0 0 0 4px 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: 22px;
  font-weight: var(--head-weight);
}

.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: 14px;
  font-weight: 700;
  text-align: left;
}

.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: 14px;
}

.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: 14px;
}

.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: 14px;
  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: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 14px;
  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: 24px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-tag);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Contains: its own strong colour (plum) with a firm edge, in both themes; never muted. */
.allergen--contains {
  border: 1.5px solid var(--allergy);
  background: var(--allergy-soft);
  color: var(--allergy);
}

.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;
}


/* In a line of a recipe: one short mark, the names of the unchecked allergens behind a click. */
.allergen-unknown > summary {
  cursor: pointer;
  list-style: none;
}

.allergen-unknown > summary::-webkit-details-marker {
  display: none;
}

.allergen-unknown[open] {
  flex-basis: 100%;
}

.allergen-unknown__list {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
}
/* --- 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: 14px;
  font-weight: 600;
}

.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: 14px;
}

.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(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--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: 14px;
}

.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(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--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;
}

/* A number or a word, never a bare symbol: grey while nothing was checked. */
.gaps-button__count {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.gaps-button--open .gaps-button__count {
  background: var(--accent);
  box-shadow: none;
  color: var(--btn-ink);
}

.gaps-button--ok .gaps-button__count {
  background: var(--ok);
  box-shadow: none;
  color: var(--btn-ink);
}

/* --- 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: 14px;
}

.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: 14px;
  font-weight: 700;
}

@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;
  }
}

.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: 14px;
}

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

/* 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: 14px;
}

.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: 14px;
}

.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(--field-line);
  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: 14px;
  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-note);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

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

/* The chosen one: a tint of the accent with its edge, the text stays ink. */
.chip[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 650;
}

.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: 14px;
}

.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: 24px;
  font-weight: var(--head-weight);
}

.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: 21px;
  font-weight: var(--head-weight);
  letter-spacing: var(--head-track);
}

.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: 14px;
  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: 26px;
  font-weight: var(--head-weight);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pline__min {
  color: var(--warn);
  font-family: var(--font-body);
  font-size: 14px;
  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"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

.daychip__amount {
  font-size: 14px;
  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: 14px;
}

.dayc__event {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: var(--accent);
  font-size: 14px;
  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: 14px;
}

.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: 28px;
  font-weight: var(--head-weight);
  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);
  }
}


/* --- Event screens (docs/ui.md, "Event screens") -------------------------------------------- */

.ev-block {
  display: block;
}

.ev-ok {
  color: var(--ok);
}

.ev-bad {
  color: var(--bad);
}

/* State of an event: a dot in its colour on a light tint; the text stays ink. */
.ev-st--draft,
.ev-st--held {
  --sc: var(--st-1);
}

.ev-st--offer_sent {
  --sc: var(--st-2);
}

.ev-st--in_revision {
  --sc: var(--st-3);
}

.ev-st--confirmed {
  --sc: var(--st-4);
}

.ev-st--confirmation_sent {
  --sc: var(--st-5);
}

.ev-st--final {
  --sc: var(--st-6);
}

.ev-st--cancelled {
  --sc: var(--st-7);
}

.ev-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--sc) 14%, var(--surface));
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.ev-st::before,
.ev-dot {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sc);
}

/* The state as a button with its menu (owner review V2). */
.ev-stmenu {
  position: relative;
  display: inline-block;
}

.ev-stmenu > summary {
  cursor: pointer;
  list-style: none;
}

.ev-stmenu > summary::-webkit-details-marker {
  display: none;
}

.ev-stmenu__caret {
  font-size: 14px;
}

.ev-stmenu__pop {
  position: absolute;
  inset-inline-end: 0;
  z-index: 30;
  display: grid;
  min-width: 210px;
  margin-top: 4px;
  padding: var(--space-2);
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
}

.ev-stmenu__item {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.ev-stmenu__item:hover {
  background: color-mix(in srgb, var(--ink) 7%, var(--surface));
}

.ev-stmenu__item--bad {
  color: var(--bad);
}

.ev-stmenu__ask form {
  display: grid;
  gap: var(--space-2);
  padding: 4px 10px 8px;
}

/* Steps and the bar of the open event: on a wide screen they stick at the top while the step
   scrolls (below that the two rows of pills would take too much of the screen). */
.ev-stepsbar {
  position: static;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-inline: -8px;
  padding: var(--space-2) 8px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
}

@media (min-width: 1600px) {
  .ev-stepsbar {
    position: sticky;
    top: 0;
  }
}

/* The route and the tabs beside it are two groups; each wraps, and the second drops to its own row
   where the width is short: no pill is cut off or pushed off the screen, and the page never
   scrolls sideways because of them. */
.ev-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-block: 2px;
}

.ev-steps__route,
.ev-steps__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ev-steps__tabs .ev-step {
  min-height: 40px;
}

.ev-step {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 16px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ev-step:hover {
  border-color: var(--line-2);
}

.ev-step__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 14px;
}

/* A tick on a step with nothing left to do (the text "erledigt" is in the link for screen readers). */
.ev-step--done .ev-step__n {
  background: var(--ok-soft);
  border-color: transparent;
  color: var(--ok);
}

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

.ev-step[aria-current="step"] .ev-step__n {
  border-color: var(--btn-ink);
}

.ev-step--done[aria-current="step"] .ev-step__n {
  background: var(--btn-ink);
  border-color: transparent;
  color: var(--btn);
}

.ev-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 10px 14px 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}

.ev-bar__main {
  flex: 1 1 240px;
  min-width: 0;
}

.ev-bar__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--head-weight);
  letter-spacing: var(--head-track);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.ev-bar__meta {
  color: var(--muted);
  font-size: 14px;
}

.ev-sub b {
  color: var(--accent);
  font-weight: 700;
}

/* Veranstaltungen: calendar beside the list. */
.ev-home {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.ev-calcard {
  container-type: inline-size;
}

.ev-calhd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ev-calhd h2 {
  font-size: 30px;
}

.ev-calnav,
.ev-actions,
.ev-card__links,
.ev-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.ev-ibtn {
  width: 44px;
  height: 44px;
}

.ev-stf {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ev-chip {
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
}

.ev-chip__count {
  font-weight: 500;
  opacity: 0.75;
}

.ev-stchip[aria-current="true"] {
  background: color-mix(in srgb, var(--sc) 20%, var(--surface));
  border-color: var(--sc);
  color: var(--ink);
}

.ev-chip[aria-current="true"]:not(.ev-stchip) {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

.ev-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.ev-wd {
  padding: 8px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.ev-wd__short {
  display: none;
}

.ev-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 104px;
  padding: 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ev-day:hover {
  background: var(--sel);
}

.ev-day--out {
  background: var(--surface-2);
}

.ev-day__add {
  position: absolute;
  inset: 0;
}

.ev-day__add:focus-visible {
  outline-offset: -2px;
}

.ev-day__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}

.ev-day--out .ev-day__n {
  color: var(--muted);
}

.ev-day--today .ev-day__n {
  background: var(--accent);
  color: var(--surface);
}

.ev-ec {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  min-height: 24px;
  padding: 4px 7px;
  overflow: hidden;
  border-radius: 7px;
  background: color-mix(in srgb, var(--sc) 16%, var(--surface));
  box-shadow: inset 2.5px 0 0 var(--sc);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@container (max-width: 760px) {
  .ev-wd__long {
    display: none;
  }

  .ev-wd__short {
    display: inline;
  }
}

/* A phone shows each event as a coloured bar in its day; the list below names them. */
@container (max-width: 520px) {
  .ev-day {
    min-height: 62px;
    padding: 3px;
  }

  .ev-ec {
    height: 8px;
    min-height: 8px;
    padding: 0;
    border-radius: 4px;
    background: var(--sc);
    box-shadow: none;
    font-size: 0;
  }

  .ev-wd {
    padding: 6px 4px;
    font-size: 14px;
    letter-spacing: 0.04em;
  }
}

.ev-wait {
  display: grid;
  gap: var(--space-2);
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--st-2) 35%, transparent);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--st-2) 12%, var(--surface));
}

.ev-wait__title {
  color: var(--ink);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.ev-wait__item {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.ev-wait__why {
  color: var(--warn);
  font-size: 14px;
  font-weight: 600;
}

.ev-search {
  position: relative;
}

.ev-search > .icon {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--muted);
  transform: translateY(-50%);
}

.ev-search .in {
  padding-left: 42px;
}

.ev-same-filter {
  color: var(--accent);
}

.ev-grp {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

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

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

/* A cancelled event in the archive: still there to look at, but plainly not held. */
.ev-card--cancelled {
  border-style: dashed;
  background: transparent;
}

.ev-card--cancelled .ev-card__name {
  color: var(--muted);
  text-decoration: line-through;
}

.ev-views {
  margin-top: 2px;
}

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

.ev-card__name {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ev-card__meta {
  color: var(--muted);
  font-size: 14px;
}

/* Forms of the steps. */
.ev-new {
  max-width: 720px;
}

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

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

.ev-town {
  display: flex;
  gap: var(--space-3);
}

.ev-town .in:last-child {
  flex: 1;
  min-width: 0;
}

.ev-more summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
  font-weight: 600;
  cursor: pointer;
}

.ev-more[open] summary .icon {
  transform: rotate(90deg);
}

.ev-more__fg {
  padding-top: var(--space-3);
}

.ev-fg .field__errors:empty {
  display: none;
}

.ev-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ev-fieldset legend {
  margin-bottom: 7px;
  padding: 0;
}

.ev-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-4);
}

.ev-tile {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1.5px solid var(--line-2);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
}

.ev-tile b {
  font-size: 16px;
}

.ev-tile span {
  color: var(--muted);
  font-size: 14px;
}

.ev-tile:has(input:checked) {
  border-color: var(--ink);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.ev-tile:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.ev-guests {
  font-weight: 700;
}

/* The company's name only when the customer books as a company (no script needed). */
.ev-company {
  display: none;
}

.ev-fg:has(input[name="contact_kind"][value="company"]:checked) .ev-company,
.ev-fg:has(input[name="customer_kind"][value="company"]:checked) .ev-company {
  display: grid;
}

/* A cooking class (ADR 0077): its style instead of the occasion, chosen first. */
.ev-styles {
  display: none;
}

.ev-fg:has(input[name="kind"][data-course]:checked) .ev-styles {
  display: block;
}

.ev-fg:has(input[name="kind"][data-course]:checked) .ev-occasion,
.ev-fg:has(input[name="kind"][data-course]:checked) .ev-free {
  display: none;
}

.ev-dup-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* The own words for an occasion only when the free occasion is chosen (no script needed). */
.ev-free {
  display: none;
}

.ev-free--shown,
.ev-fg:has(option[data-free]:checked) .ev-free {
  display: grid;
}

.ev-preview {
  color: var(--ink);
}

.ev-actions-end {
  display: flex;
  justify-content: flex-end;
}

/* Menü */
.ev-q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 16px 14px 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.ev-q p {
  font-weight: 500;
}

.ev-q p span {
  color: var(--muted);
  font-weight: 400;
}

.ev-menuhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.ev-kinds .seg__item {
  border: 0;
  background: none;
  cursor: pointer;
}

.ev-kinds .seg__item[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

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

.ev-stepper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.ev-stepper button {
  width: 44px;
  height: 46px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 20px;
}

.ev-stepper input {
  width: 4.2em;
  min-height: 46px;
  border: 0;
  background: none;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

/* The step is one column as wide as the screen: without this a wide field in it pushes the page
   past a phone's edge. */
#ev-step {
  grid-template-columns: minmax(0, 1fr);
}

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

.ev-cols > * {
  min-width: 0;
}

.ev-cats {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.ev-cats .chip {
  gap: 7px;
}

.ev-dishes {
  padding: 0;
  list-style: none;
}

.ev-dish {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 48px;
  gap: 14px;
  align-items: center;
  padding: 14px 10px 14px 12px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.ev-dish:last-child {
  border-bottom: 0;
}

.ev-dish--on {
  background: var(--sel);
}

.ev-dish__name {
  font-size: 15.5px;
  font-weight: 700;
}

.ev-dish__desc {
  color: var(--muted);
  font-size: 14px;
}

.ev-dish__price {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.ev-dish__price small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.ev-tag--veg {
  border-color: transparent;
  background: var(--ok-soft);
  color: var(--ok);
}

.ev-tag--int {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.ev-plus {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
}

.ev-plus:hover {
  border-color: var(--ink);
}

.ev-plus[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}

.ev-selp {
  position: sticky;
  top: var(--space-5);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

@media (min-width: 1600px) {
  /* Below the steps and the bar, which stick there. */
  .ev-selp {
    top: 190px;
  }
}

.ev-selp__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 18px 20px 12px;
}

.ev-selp__bd {
  max-height: min(60vh, 680px);
  padding: 0 20px 12px;
  overflow: auto;
}

.ev-course {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.ev-course__name {
  margin-bottom: 6px;
  color: var(--accent);
}

.ev-si {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: start;
  padding: 7px 0;
}

.ev-qty {
  margin-top: 1px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

.ev-si__nm {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.ev-si__math {
  color: var(--muted);
  font-size: 14px;
}

.ev-si--dim .ev-si__nm {
  color: var(--muted);
}

.ev-oder {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 2px 0 2px 44px;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

.ev-oder::before,
.ev-oder::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.ev-rule {
  margin: 6px 0 2px 44px;
  padding: 8px 10px;
  border-radius: var(--radius-note);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}

.ev-sums {
  display: grid;
  gap: 4px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14px;
}

.ev-sums__r {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.ev-sums__r span:first-child {
  color: var(--ink-2);
}

.ev-sums__r span:last-child {
  white-space: nowrap;
}

.ev-sums__tot {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
  font-size: 22px;
  font-weight: 700;
}

.ev-sums__tot span:first-child {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--head-weight);
}

/* Menu builder (ADR 0061): guest counts, parts of a main course, drinks, sum bar, dialogs. */
.ev-heads {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.ev-guestsform__g {
  display: grid;
  gap: 4px;
}

.ev-kidrule {
  max-width: 460px;
  color: var(--ink-2);
  text-align: right;
}

.ev-build {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface-2);
}

.ev-build__title {
  font-weight: 700;
}

.ev-build__row {
  display: grid;
  gap: 6px;
}

.ev-build__sum {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.chip--sm {
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 14px;
  cursor: pointer;
}

.chip--sm small {
  color: var(--muted);
  font-weight: 500;
}

.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 650;
}

.chip[aria-pressed="true"] small {
  color: inherit;
}

.ev-subhead {
  margin-top: var(--space-6);
}

.ev-pick__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* The sentence of a category on every letter, beside "Neues Gericht anlegen" (ADR 0064). */
.ev-note {
  flex: 1 1 260px;
  min-width: 0;
}

/* "Karte": the season sets shown, above the categories. */
.ev-season {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.ev-season small {
  flex-basis: 100%;
  font-size: 14px;
}

.ev-hiddenn {
  padding: 10px 0 0;
}

.ev-tag--off {
  border-style: dashed;
  background: none;
  color: var(--muted);
}

.ev-course__note {
  margin: -2px 0 6px;
  color: var(--muted);
  font-style: italic;
}

/* A menu set aside for another kind of event: a dot on its button. */
.ev-aside {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
  vertical-align: middle;
}

.ev-asidehint {
  margin-top: 6px;
}

/* The pen on a main course put together: a row per part. */
.ev-parts {
  display: grid;
  gap: 10px;
}

.ev-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.ev-part__nm {
  grid-column: 1 / -1;
  font-weight: 600;
}

.ev-si__ac {
  display: flex;
  gap: 2px;
}

/* The pen's link covers the whole row, so a tap anywhere on it opens the dish; the other
   buttons stay above it. */
.ev-si__open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ev-si__ac form {
  position: relative;
  z-index: 1;
}

.ev-gift {
  color: var(--ok);
  font-weight: 700;
}

.ev-sums__dep {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.ev-sbar {
  position: sticky;
  /* Above the bar of areas at the foot of a phone. */
  bottom: var(--tabbar-h);
  z-index: 20;
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-2) 0 max(var(--space-2), env(safe-area-inset-bottom));
}

.ev-sbar__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.ev-sbar__who {
  flex: 1 1 auto;
  color: var(--ink-2);
  font-size: 14px;
}

.ev-sbar__fig {
  display: grid;
  line-height: 1.2;
}

.ev-sbar__fig span {
  color: var(--muted);
  font-size: 14px;
}

.ev-sbar__fig small {
  display: block;
  font-size: 12px;
}

.ev-sbar__fig b {
  font-size: 17px;
}

.ev-sbar__tot b {
  font-size: 21px;
}

.ev-toast {
  position: fixed;
  bottom: calc(96px + var(--tabbar-h));
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: calc(100% - 32px);
  padding: 10px 10px 10px 18px;
  border-radius: var(--radius-control);
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  animation: ev-toast-out 0.2s ease-in 6s forwards;
}

.ev-toast button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid currentcolor;
  border-radius: var(--radius-note);
  background: none;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}

@keyframes ev-toast-out {
  to {
    visibility: hidden;
    opacity: 0;
  }
}

.side.ev-dlg {
  width: min(560px, 100%);
}

.ev-dlg .ev-qtyfield {
  display: none;
}

.ev-dlg .ev-amount:has(input[value="fixed"]:checked) .ev-qtyfield {
  display: inline-flex;
}

.ev-prev {
  display: grid;
  gap: 4px;
  padding: var(--space-4) 14px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-control);
}

.ev-prev__err {
  color: var(--bad);
}

.ev-tocat {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.ev-dlg__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

@media (max-width: 700px) {
  .ev-heads {
    justify-items: start;
  }

  .ev-kidrule {
    text-align: left;
  }

  .ev-sbar__who,
  .ev-sbar__tx {
    display: none;
  }

  .ev-sbar {
    margin: 0;
  }

  .ev-sbar__in {
    flex-wrap: nowrap;
    gap: var(--space-2);
    justify-content: space-between;
    padding: 8px 8px 8px 12px;
  }

  .ev-sbar__fig {
    min-width: 0;
  }

  .ev-sbar__fig span {
    font-size: 14px;
    white-space: nowrap;
  }

  .ev-sbar__fig b {
    font-size: 15px;
    white-space: nowrap;
  }

  .ev-sbar__tot b {
    font-size: 17px;
  }

  .ev-sbar__go {
    flex: none;
    width: 44px;
    padding: 0;
  }
}

/* Angebot: the costing behind a click. */
/* An offer an AI tool drafted: the note with its button "Geprüft" (ADR 0098). */
.ev-aicheck {
  flex-wrap: wrap;
  align-items: center;
}

.ev-aicheck > span {
  flex: 1 1 16rem;
}

.ev-kalk {
  padding: 0;
  gap: 0;
}

.ev-kalk__sum {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 60px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

.ev-kalk__sum::-webkit-details-marker {
  display: none;
}

.ev-kalk__sum > .icon {
  transition: transform 0.2s;
}

.ev-kalk[open] .ev-kalk__sum > .icon {
  transform: rotate(90deg);
}

.ev-kalk__res {
  margin-left: auto;
  text-align: right;
}

.ev-kalk__res b {
  font-size: 18px;
}

.ev-kalk__body {
  display: grid;
  gap: var(--space-3);
  padding: 4px 20px 20px;
  border-top: 1px solid var(--line);
}

.ev-kl {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}

.ev-kl > b {
  white-space: nowrap;
}

.ev-kl--tot {
  border-bottom: 0;
  font-size: 17px;
}

.ev-offers {
  align-self: flex-start;
}

/* The document: an A4 page that changes as the person types. Its paper stays light. */
.ev-a4wrap {
  padding: clamp(12px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
}

.ev-a4wrap__title {
  margin-bottom: 14px;
  text-align: center;
}

.ev-a4 {
  max-width: 794px;
  margin: 0 auto;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  color: var(--paper-ink);
  font-family: var(--font-paper);
  aspect-ratio: 210 / 297;
  container-type: inline-size;
}

.ev-pg {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  min-height: 100%;
  padding: 7.5% 9% 6%;
  font-size: clamp(9.5px, 1.72cqw, 13.6px);
  line-height: 1.5;
}

.ev-lh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2em;
  padding-bottom: 1.3em;
  border-bottom: 0.18em solid var(--brand);
}

.ev-logo {
  display: grid;
  place-items: center;
  width: 5.2em;
  height: 5.2em;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-family: var(--font-paper-display);
  font-size: 1.2em;
}

.ev-logo span {
  font-size: 2.6em;
  line-height: 1;
}

.ev-hn {
  text-align: right;
}

.ev-hn b {
  display: block;
  color: var(--brand);
  font-family: var(--font-paper-display);
  font-size: 2.1em;
  font-weight: 400;
  line-height: 1.05;
}

.ev-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em 2em;
  color: var(--paper-mute);
  font-size: 0.86em;
}

.ev-badge {
  align-self: flex-start;
  padding: 0.25em 1em;
  border: 0.1em solid var(--brand);
  border-radius: 2em;
  color: var(--brand);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ev-ttl {
  font-family: var(--font-paper-display);
  font-size: 3em;
  line-height: 1.05;
  text-wrap: balance;
}

.ev-paper-mute {
  color: var(--paper-mute);
}

.ev-sec {
  margin-bottom: 0.4em;
  color: var(--brand);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.ev-menu {
  display: grid;
  gap: 0.9em;
  text-align: center;
}

.ev-menu__cs {
  color: var(--paper-mute);
  font-size: 0.72em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ev-menu__dn {
  font-family: var(--font-paper-display);
  font-size: 1.45em;
  line-height: 1.2;
}

.ev-menu__dd,
.ev-menu__or {
  color: var(--paper-mute);
  font-style: italic;
}

.ev-menu__note {
  color: var(--paper-mute);
  font-size: 0.9em;
  font-style: italic;
  margin-top: -0.4em;
}

.ev-drinks {
  margin-top: 0.9em;
  text-align: center;
}

.ev-orn {
  color: var(--brand);
  font-size: 0.8em;
  letter-spacing: 0.8em;
  text-align: center;
}

.ev-ph-empty {
  color: var(--paper-mute);
  font-style: italic;
  text-align: center;
}

.ev-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ev-doc-table td {
  padding: 0.45em 0;
  border-bottom: 0.08em solid var(--paper-line);
  vertical-align: top;
}

.ev-doc-table .ev-r {
  padding-left: 1em;
  text-align: right;
  white-space: nowrap;
}

.ev-tot td {
  padding-top: 0.6em;
  border-top: 0.15em solid var(--brand);
  border-bottom: 0;
  font-size: 1.15em;
  font-weight: 700;
}

.ev-subrow td {
  padding: 0.15em 0;
  border-bottom: 0;
  color: var(--paper-mute);
  font-size: 0.9em;
}

.ev-dt td:first-child {
  width: 38%;
  color: var(--paper-mute);
}

.ev-box {
  padding: 0.8em 1em;
  border: 0.08em solid var(--paper-line);
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--brand) 5%, var(--paper));
}

.ev-signs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  margin-top: 2.5em;
}

.ev-signs p {
  padding-top: 0.4em;
  border-top: 0.08em solid var(--paper-ink);
  color: var(--paper-mute);
  font-size: 0.85em;
}

.ev-sign-name {
  font-family: var(--font-paper-display);
  font-size: 1.6em;
}

.ev-ft {
  margin-top: auto;
  padding-top: 0.8em;
  border-top: 0.08em solid var(--paper-line);
  color: var(--paper-mute);
  font-size: 0.78em;
  text-align: center;
}

/* Shopping list of the kitchen. */
.ev-shop__list {
  display: grid;
  gap: 6px;
  padding: 0;
  list-style: none;
}

@media (max-width: 1020px) {
  .ev-home {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .ev-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .ev-selp {
    position: static;
  }

  .ev-selp__bd {
    max-height: none;
  }
}

@media (max-width: 700px) {
  .ev-stepsbar {
    position: static;
    background: none;
    backdrop-filter: none;
  }

  .ev-bar {
    padding: 12px 14px;
  }

  .ev-dish {
    grid-template-columns: minmax(0, 1fr) 48px;
  }

  .ev-dish__price {
    grid-row: 2;
    text-align: left;
  }
}

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

  .ev-signs {
    gap: 1.5em;
  }
}

/* Phones in landscape: nothing sticks, but "Schritt n von 4" stays. */
@media (max-height: 520px) {
  .ev-stepsbar,
  .ev-selp {
    position: static;
  }

  .page-head__sub.ev-sub {
    display: block;
  }
}

/* On paper only the document: no shell, no steps, no inputs. */
@media print {
  .ev-page > :not(.ev-a4wrap),
  .ev-a4wrap__title {
    display: none !important;
  }

  .ev-a4wrap {
    padding: 0;
    border: 0;
    background: none;
  }

  .ev-a4 {
    max-width: none;
    box-shadow: none;
    aspect-ratio: auto;
  }

  .ev-pg {
    font-size: 11pt;
    padding: 0;
  }

  /* Like the PDF: no forced breaks, the rest moves up. A course, a table row, the deposit and
     the room plan are never torn; a heading never stands last on a page. */
  .ev-menu > div,
  .ev-doc-table tr,
  .ev-box,
  .ev-room {
    break-inside: avoid;
  }

  .ev-sec,
  .ev-menu__cs,
  .ev-orn,
  .ev-doc-table tr:first-child {
    break-after: avoid;
  }

  .ev-doc-table tr:last-child,
  .ev-tot {
    break-before: avoid;
  }
}

/* --- Ablauf: the run of an event (ADR 0066) -------------------------------------------------- */

.sch-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-6);
  align-items: start;
}

.sch-cols > * {
  min-width: 0;
}

.sch-cols--one {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

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

.sch-grow {
  flex: 1 1 160px;
  width: auto;
  min-width: 0;
}

.sch-full {
  flex-basis: 100%;
}

.sch-note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.sch-note > div {
  flex: 1 1 280px;
}

.sch-note__more {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

.sch-note__list {
  margin: 6px 0 0 18px;
}

.sch-listhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.sch-howto {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.sch-pts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sch-pt {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.sch-pt__form {
  display: grid;
  grid-template-columns: 26px 9.5em minmax(0, 1fr) auto;
  grid-template-areas:
    "grip time title moves"
    ". . desc desc"
    ". . meta meta";
  gap: 6px var(--space-3);
  align-items: center;
}

.sch-grip {
  grid-area: grip;
  display: grid;
  place-items: center;
  height: 40px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.sch-pt .sch-time {
  grid-area: time;
}

.sch-time {
  width: 9.5em;
  min-width: 9.5em;
  font-variant-numeric: tabular-nums;
}

.sch-title {
  grid-area: title;
  font-weight: 600;
}

.sch-moves {
  grid-area: moves;
  display: flex;
  gap: 2px;
}

.sch-mv {
  width: 40px;
  height: 40px;
}

.sch-desc {
  grid-area: desc;
  height: auto;
  min-height: 40px;
  padding-block: 8px;
  resize: vertical;
  field-sizing: content;
}

.sch-desc--big {
  min-height: 84px;
  resize: vertical;
}

.sch-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-2);
}

.sch-who {
  width: auto;
  min-width: 9em;
}

.sch-pt--int .sch-title {
  color: var(--ink-2);
}

.sch-grp {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  padding: var(--space-4) 0 var(--space-2);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
}

.sch-grp b {
  color: var(--ink);
}

.sch-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sch-switch--wide {
  justify-content: flex-start;
  text-align: left;
}

.sch-switch__track {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--line-2);
}

.sch-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  transition: left 0.15s ease-out;
}

.sch-switch[aria-checked="true"] {
  border-color: var(--ok);
  color: var(--ok);
}

.sch-switch[aria-checked="true"] .sch-switch__track {
  background: var(--ok);
}

.sch-switch[aria-checked="true"] .sch-switch__track::after {
  left: 16px;
}

.sch-tag--int {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sch-tag--kitchen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok);
}

.sch-tag--mark {
  border-color: var(--ink-2);
  color: var(--ink);
}

.sch-tag--chg {
  border-color: var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
}

.sch-add {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.sch-add__title {
  flex: 1 1 200px;
  width: auto;
}

.sch-add__lead {
  flex-basis: 100%;
}

.sch-empty select.in {
  width: auto;
  max-width: 100%;
}

.sch-text {
  min-height: 420px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  resize: vertical;
}

.sch-tools__toggle {
  display: none;
}

.sch-tools__body {
  display: grid;
  gap: var(--space-5);
}

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

.sch-blk .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sch-blk .chip {
  gap: 4px;
}

.sch-side .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sch-side .chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

.sch-side .chip {
  gap: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sch-side--wide {
  width: min(720px, 100%);
}

.sch-fieldset {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.sch-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
}

.sch-warn {
  color: var(--warn);
  font-weight: 600;
}

.sch-danger {
  border-color: var(--bad);
  color: var(--bad);
}

.sch-paper {
  overflow-x: auto;
}

.sch-sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.sch-sheet th {
  padding: 0 var(--space-2) 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sch-sheet td {
  padding: 8px var(--space-2) 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.sch-sheet .s {
  display: block;
  color: var(--muted);
}

.sch-sheet .r {
  text-align: right;
}

.sch-sheet__t {
  width: 4.5em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sch-sheet__h {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sch-sheet__x {
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tag);
  color: var(--muted);
  font-size: 11px;
}

.sch-sheet__int td {
  color: var(--muted);
}

.ev-sch {
  display: grid;
  gap: 6px;
}

.sch-pt.is-dragging {
  opacity: 0.55;
}

.sch-pt.is-drop-before {
  box-shadow: inset 0 3px 0 var(--gold);
}

.sch-pt.is-drop-after {
  box-shadow: inset 0 -3px 0 var(--gold);
}

@media (max-width: 1020px) {
  .sch-cols {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 860px) {
  .sch-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .sch-tools {
    order: -1;
  }

  .sch-tools__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    cursor: pointer;
  }

  .sch-tools__body {
    display: none;
    margin-top: var(--space-4);
  }

  .sch-tools__switch:checked ~ .sch-tools__body {
    display: grid;
  }

  .sch-tools__switch:focus-visible + .sch-tools__toggle {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  .sch-grip,
  .sch-bigonly {
    display: none;
  }

  .sch-pt__form {
    grid-template-columns: 9.5em minmax(0, 1fr);
    grid-template-areas:
      "time moves"
      "title title"
      "desc desc"
      "meta meta";
  }

  .sch-moves {
    justify-self: end;
  }

  .sch-mv {
    width: 44px;
    height: 44px;
  }
}

@media (pointer: coarse) {
  .sch-grip {
    display: none;
  }
}

/* --- 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;
  }
}

/* "Mein Betrieb" (ADR 0063): cards of rule sentences, each with the offer as it reads beside it. */
.mb-stack {
  gap: 18px;
}

.mb-who {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  color: var(--ink-2);
  font-size: 14px;
}

.mb-tag--lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

.mb-tag--miss {
  border: 1px dashed var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 700;
}

.mb-missbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1.5px dashed var(--warn);
  border-radius: var(--radius-panel);
  background: var(--warn-soft);
  color: var(--warn);
}

.mb-missbox__t {
  flex: 1 1 260px;
  min-width: 0;
}

.mb-missbox__t p {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 14px;
}

.mb-chip--miss {
  border-color: var(--warn);
  color: var(--warn);
}

.mb-okbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-panel);
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 600;
}

.mb-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--space-2);
}

.mb-tab {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.mb-tab small {
  color: var(--muted);
  font-size: 14px;
}

.mb-tab .pill {
  justify-self: start;
}

/* A station still to set up: outlined, not coloured (green is for done only). */
.mb-tab__open {
  border-color: var(--line);
  color: var(--ink-2);
}

.mb-guide {
  align-items: center;
}

.mb-next {
  margin: 0;
  text-align: right;
}

.mb-tab[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.mb-panel {
  gap: 18px;
}

.mb-panel[hidden] {
  display: none;
}

.mb-tabintro {
  margin: 0;
  color: var(--ink-2);
}

.mb-sub {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--head-weight);
  letter-spacing: var(--head-track);
}

.mb-block {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.mb-fonts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: var(--space-2);
  padding: 6px 0;
}

.mb-ft {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mb-ft[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}

/* The sample in the house's font; the engine's standard is the paper's font, as the PDF. */
.mb-ft__s {
  font-family: var(--font-paper);
  font-size: 17px;
  line-height: 1.25;
}

.mb-ft small {
  color: var(--muted);
  font-size: 14px;
}

.mb-cols3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
}

.mb-colbox {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.mb-cnt {
  margin-left: 6px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.mb-longhint[hidden] {
  display: none;
}

.mb-cnt.is-near {
  color: var(--bad);
  font-weight: 600;
}

.mb-legacy {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
}

.mb-seg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mb-seg a.chip[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.mb-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: start;
}

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

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

.mt-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.mt-row.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.mt-row__main {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
}

.mt-row__main small {
  overflow-wrap: anywhere;
  color: var(--muted);
}

.mt-row__acts {
  display: flex;
  padding-right: 6px;
}

.mb-mail {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  overflow: hidden;
}

.mb-mail__h {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
}

.mb-mail__b {
  padding: 12px;
  overflow-wrap: anywhere;
}

.mb-mail__sig {
  margin-top: 12px;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .mb-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mb-tab {
    flex: none;
    min-width: 9.5rem;
  }

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

.mb-card {
  scroll-margin-top: 16px;
}

.mb-card h2,
.mb-fold h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--head-weight);
  line-height: 1.1;
}

.mb-ch {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) 14px;
}

.mb-ch__t {
  display: grid;
  gap: 6px;
}

.mb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-2);
  margin: 0;
}

.mb-locked {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 9px 14px;
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
}

.mb-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 22px 28px;
  align-items: start;
}

.mb-pair > * {
  min-width: 0;
}

.mb-rs {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.mb-rs:first-child {
  padding-top: 0;
  border-top: 0;
}

.mb-sent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 15.5px;
}

/* The age bands (ADR 0078): one row per band, wrapping at narrow widths. */
.mb-bands {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The minimum spend per weekday (ADR 0086): seven fields in a row, wrapping on a phone. */
.mb-week {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.mb-week__d {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.mb-season {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.mb-num {
  min-height: 42px;
  font-weight: 700;
  text-align: center;
}

.mb-num--w4 {
  width: 4.6em;
}

.mb-num--w6 {
  width: 6.4em;
}

.mb-num--wt {
  width: 9.5em;
}

.mb-num--miss {
  border: 1.5px dashed var(--warn);
  background: var(--warn-soft);
}

.mb-num:disabled,
.mb-text:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.mb-text {
  min-height: 96px;
  padding: 10px 14px;
  line-height: 1.45;
  resize: vertical;
}

.mb-text--letter {
  min-height: 130px;
}

.mb-text--footer {
  min-height: 210px;
}

.mb-text--terms {
  min-height: 320px;
}

.mb-sw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 4px 0;
}

.mb-sw__t {
  min-width: 0;
}

.mb-sw__t b {
  display: block;
  font-weight: 600;
}

.mb-sw__t small {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.mb-switch {
  position: relative;
  flex: none;
  width: 54px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line-2);
  cursor: pointer;
}

.mb-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
  content: "";
  transition: left 0.15s;
}

.mb-switch[aria-checked="true"] {
  background: var(--ok);
}

.mb-switch[aria-checked="true"]::after {
  left: 25px;
}

.mb-switch:disabled,
.mb-tile:disabled,
.chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mb-tile {
  font: inherit;
  color: inherit;
  text-align: left;
}

.mb-tile[aria-pressed="true"],
.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--ink);
}

button.chip {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mb-tiles--miss .mb-tile {
  border-style: dashed;
  border-color: var(--warn);
  background: var(--warn-soft);
}

.mb-more {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.mb-more summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
  font-weight: 600;
  cursor: pointer;
}

.mb-more[open] summary .icon {
  transform: rotate(90deg);
}

.mb-fg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) 18px;
  padding-top: var(--space-3);
}

.mb-logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) 14px;
}

.mb-logo__box {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  background: var(--paper);
}

.mb-logo__box img {
  max-width: 100%;
  max-height: 100%;
}

.mb-mono,
.mb-lh__mono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--mb-ink, var(--paper-ink));
  color: var(--mb-brand, var(--guest-gold));
  font-family: var(--font-paper-display);
  font-size: 26px;
}

.mb-upload {
  position: relative;
  cursor: pointer;
}

.mb-colour {
  width: 48px;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  cursor: pointer;
}

.mb-colour--wide {
  width: 100%;
  border-radius: var(--radius-control);
}

.mb-swatch {
  padding: 0 10px;
}

.mb-swatch span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

/* The colours offered with one tap (``views.SWATCHES``). */
.mb-swatch--1 span {
  background: #b8914f;
}

.mb-swatch--2 span {
  background: #2e6b4f;
}

.mb-swatch--3 span {
  background: #1f3a5f;
}

.mb-swatch--4 span {
  background: #6b2e3a;
}

.mb-swatch--5 span {
  background: #3b3b3b;
}

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

.mb-pv .eyebrow {
  color: var(--accent);
}

.mb-pvnote {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.mb-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-2);
  color: var(--muted);
  font-size: 14px;
}

/* The paper of the preview: light in both themes, in the tenant's colours (``business:look_css``). */
.mb-paper {
  --mb-brand: #a97c26;
  --mb-ink: #1c1b18;
  --mb-mute: #6f6a62;
  --mb-line: #e3ded5;
  --mb-bg: #ffffff;

  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: 18px 18px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--mb-bg);
  box-shadow: var(--shadow);
  color: var(--mb-ink);
  color-scheme: light;
  font-family: var(--mb-bfont, var(--font-paper));
  font-size: 12px;
  line-height: 1.45;
}

.mb-lh__ad b,
.mb-paper__tt,
.mb-lh__mono {
  font-family: var(--mb-hfont, inherit);
}

.mb-paper p {
  margin: 0;
}

.mb-lh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.mb-lh__logo {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 46px;
  height: 46px;
}

.mb-lh__logo img {
  max-width: 110px;
  max-height: 46px;
  object-fit: contain;
}

.mb-lh__ad {
  display: grid;
  min-width: 0;
  color: var(--mb-mute);
  font-size: 11px;
  text-align: right;
  overflow-wrap: anywhere;
}

.mb-lh__ad b {
  color: var(--mb-ink);
  font-family: var(--font-paper-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
}

.mb-paper__rule {
  height: 1.5px;
  background: linear-gradient(to right, var(--mb-brand), transparent);
}

.mb-paper__k {
  color: var(--mb-brand);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mb-paper__tt {
  font-family: var(--font-paper-display);
  font-size: 18px;
  line-height: 1.1;
}

.mb-paper__gl {
  display: grid;
  gap: 5px;
}

.mb-paper__gl i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--mb-line);
}

.mb-paper__gl i:nth-child(2) {
  width: 86%;
}

.mb-paper__gl i:nth-child(3) {
  width: 64%;
}

.mb-paper__gl i:nth-child(4) {
  width: 78%;
}

.mb-paper__ft {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding-top: 6px;
  border-top: 1px solid var(--mb-line);
  color: var(--mb-mute);
  font-size: 9px;
  overflow-wrap: anywhere;
}

.mb-paper__ft div {
  display: grid;
}

.mb-paper__ft b {
  color: var(--mb-ink);
}

.mb-dep {
  overflow: hidden;
  border: 1px solid var(--mb-line);
  border-radius: 4px;
}

.mb-dep__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 7px 10px;
  background: var(--mb-ink);
  color: var(--mb-bg);
}

.mb-dep__hd b {
  display: block;
  color: var(--mb-brand);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mb-dep__hd span {
  font-size: 11px;
}

.mb-dep__hd .mb-dep__amt {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.mb-dep__rates {
  margin: 0;
  padding: 7px 10px 8px 26px;
  font-size: 11px;
}

.mb-sentences {
  display: grid;
  gap: 4px;
  font-size: 11.5px;
}

.mb-nodep {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--mb-line);
  border-left: 3px solid var(--mb-ink);
  border-radius: 3px;
  font-size: 11.5px;
}

.mb-gap {
  padding: var(--space-2) var(--space-3);
  border: 1.5px dashed #94520f;
  border-radius: 4px;
  background: #fbebdb;
  color: #6e3c0b;
  font-size: 11.5px;
}

.mb-ln {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 4px 0;
  border-bottom: 1px solid var(--mb-line);
  font-size: 11.5px;
}

.mb-ln:last-child {
  border-bottom: 0;
}

.mb-ln span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mb-ln small {
  display: block;
  color: var(--mb-mute);
  font-size: 10.5px;
}

.mb-rare {
  margin-top: var(--space-3);
}

.mb-fold {
  padding: 0;
  overflow: hidden;
  scroll-margin-top: 16px;
}

.mb-fold__head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: var(--space-5) var(--space-6);
  list-style: none;
  cursor: pointer;
}

.mb-fold__head::-webkit-details-marker {
  display: none;
}

.mb-fold__head .icon {
  color: var(--muted);
  transition: transform 0.15s;
}

.mb-fold[open] > .mb-fold__head .icon {
  transform: rotate(90deg);
}

.mb-fold__t {
  flex: 1;
  min-width: 0;
}

.mb-fold h2 {
  font-size: 22px;
}

.mb-fold__s {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-fold__body {
  display: grid;
  gap: var(--space-5);
  padding: 4px var(--space-6) var(--space-6);
}

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

.mb-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) 14px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.mb-list li:first-child {
  border-top: 0;
}

.mb-wrow {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

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

.mb-wrow__type {
  flex: 1 1 14em;
  min-width: 0;
}

.mb-wrow__check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15px;
}

.mb-list small {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.mb-agb {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 1.4em;
  color: var(--ink-2);
}

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

.mb-hist li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.mb-hist li:first-child {
  border-top: 0;
}

.mb-hist__at {
  flex: none;
  width: 8.5em;
  color: var(--muted);
}

.mb-hist__what {
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .mb-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .mb-fold__head {
    padding: 14px var(--space-5);
  }

  .mb-fold__body {
    padding: 4px var(--space-5) 18px;
  }

  .mb-paper {
    padding: 14px 12px 10px;
  }

  .mb-paper__ft {
    font-size: 8px;
  }
}

@media (pointer: coarse) {
  .lnk {
    min-height: 44px;
  }
}

/* --- Table plan (ADR 0065, docs/ui.md "Table plan") ------------------------------------------ */

/* Beside the numbered steps, set apart a little. */
.tp-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Menus as colours: tints, dots and edges only, never text (the event-state tokens). */
.tp-c0 {
  --tp-colour: var(--st-1);
}

.tp-c1 {
  --tp-colour: var(--st-4);
}

.tp-c2 {
  --tp-colour: var(--st-6);
}

.tp-c3 {
  --tp-colour: var(--st-3);
}

.tp-c4 {
  --tp-colour: var(--st-5);
}

.tp-c5 {
  --tp-colour: var(--st-2);
}

.tp-c6 {
  --tp-colour: var(--st-7);
}

.tp-dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tp-colour, var(--st-1));
}

.tp-cnts {
  display: grid;
  gap: var(--space-4);
}

.tp-kpi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.tp-kpi b {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--head-weight);
  letter-spacing: var(--head-track);
  line-height: 1;
}

.tp-kpi span {
  color: var(--muted);
}

.tp-kpi--ok b {
  color: var(--ok);
}

.tp-cnt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  font-size: 14.5px;
}

.tp-cnt > span,
.tp-al {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tp-al {
  min-height: 44px;
  color: var(--ink-2);
  font-weight: 600;
}

.tp-alb {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 14px;
  font-weight: 700;
}

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

.tp-wl {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--warn);
  font-size: 14.5px;
}

.tp-wl span {
  color: var(--ink);
}

.tp-wl--ok {
  color: var(--ok);
}

.tp-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-note);
  background: var(--accent-soft);
  color: var(--ink);
}

.tp-pick .lnk {
  margin-left: auto;
}

/* Below the drawing the lists use the width in columns. */
.tp-cols .tp-rows,
.tp-cols .tp-glist {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  column-gap: var(--space-5);
}

/* The drawing takes the full width; the lists and the table's card follow below it. */
.tp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.tp-cols > * {
  min-width: 0;
}

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

.tp-planhd h2,
.tp-glhd h2 {
  margin: 0;
}

.tp-adds form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tp-quick {
  display: grid;
  gap: var(--space-1);
}

.tp-quick__row {
  display: flex;
  gap: var(--space-2);
}

.tp-quick__row .in {
  flex: 1;
  min-width: 0;
}

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

.tp-planwrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface-2);
}

/* The room drawn: SVG in the room's own units, scaled to the width. */
.tp-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body);
  user-select: none;
  -webkit-user-select: none;
}

.tp-floor {
  fill: var(--surface);
  stroke: var(--line-2);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.tp-fix rect,
.tp-fix circle {
  fill: var(--surface-2);
  stroke: var(--line-2);
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.tp-fix text {
  fill: var(--muted);
  font-weight: 600;
}

.tp-tbody {
  cursor: grab;
  touch-action: none;
}

.tp-tbody rect,
.tp-tbody ellipse {
  fill: var(--surface);
  stroke: var(--ink-2);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.tp-tbody:hover rect,
.tp-tbody:hover ellipse {
  stroke: var(--accent);
}

.tp-tbody:focus,
.tp-seat:focus {
  outline: none;
}

.tp-tbody:focus-visible rect,
.tp-tbody:focus-visible ellipse,
.tp-seat:focus-visible circle {
  stroke: var(--gold);
  stroke-width: 4;
}

.tp-tl {
  fill: var(--ink);
  font-weight: 700;
}

.tp-tc {
  fill: var(--muted);
  font-size: 0.85em;
}

.tp-seat {
  cursor: pointer;
}

.tp-seat circle {
  fill: var(--surface);
  stroke: var(--line-2);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}

.tp-seat text {
  fill: var(--ink);
  font-size: 0.78em;
  font-weight: 700;
  pointer-events: none;
}

.tp-seat:hover circle {
  stroke: var(--accent);
}

[data-pick] .tp-seat:not(.tp-seat--on) circle,
.tp-seat.tp-hot circle {
  fill: var(--ok-soft);
  stroke: var(--ok);
}

.tp-algdot {
  fill: var(--warn);
  stroke: var(--surface);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.tp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  color: var(--muted);
}

.tp-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tp-lg {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px dashed var(--line-2);
  border-radius: 50%;
}

/* The guests beside the plan. */
.tp-glhd {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.tp-addg {
  display: flex;
  gap: var(--space-2);
}

.tp-addg .in {
  flex: 1 1 auto;
  min-width: 0;
}

.tp-gf .seg__item {
  padding: 0 12px;
}

.tp-n {
  color: var(--muted);
  font-size: 14px;
}

.seg__item[aria-current="page"] .tp-n {
  color: inherit;
}

.tp-glist {
  display: grid;
  max-height: 560px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.tp-gr {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.tp-gr--sel {
  background: var(--sel);
}

.tp-gr--gone .tp-gb__name {
  color: var(--muted);
  text-decoration: line-through;
}

.tp-grip {
  display: grid;
  place-items: center;
  height: 44px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.tp-gb {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 0;
  color: var(--ink);
  text-decoration: none;
}

.tp-gb__name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-gb__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}

.tp-wh {
  color: var(--ink-2);
  font-size: 14px;
  white-space: nowrap;
}

.tp-wh--no {
  color: var(--warn);
  font-weight: 600;
}

/* What is dragged: positioned by table-plan.js. */
.tp-ghost {
  position: fixed;
  z-index: 60;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--btn);
  color: var(--btn-ink);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -130%);
  pointer-events: none;
}

.tp-no {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px solid var(--tp-colour, var(--st-1));
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.tp-no--free {
  border: 1.5px dashed var(--line-2);
  color: var(--muted);
}

.tp-no--extra {
  outline: 2px dashed var(--warn);
  outline-offset: 1px;
}

/* Side panels of the plan. */
.tp-side .f {
  display: grid;
  gap: var(--space-2);
}

.tp-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.tp-switch__track {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--line-2);
}

.tp-switch__track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  content: "";
  transition: transform 0.15s;
}

.tp-switch[aria-checked="true"] .tp-switch__track {
  background: var(--ok);
}

.tp-switch[aria-checked="true"] .tp-switch__track::after {
  transform: translateX(18px);
}

.tp-switch:disabled {
  cursor: default;
  opacity: 0.75;
}

.tp-side .chip:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.tp-gacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tp-pickl {
  display: grid;
  gap: var(--space-2);
  max-height: 50vh;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.tp-pickb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

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

.tp-chairs {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.tp-chairs output {
  min-width: 3em;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.button.tp-danger {
  border-color: var(--bad);
  color: var(--bad);
}

.tp-allist {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-allist li {
  display: grid;
  gap: 2px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.tp-start .chips form {
  display: inline;
}

/* The prints: paper stays white in both themes. */
.tp-paper {
  gap: var(--space-4);
}

.tp-ph {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid #e4dfd5;
}

.tp-ph span {
  color: #5f5a51;
  font-size: 13px;
  text-align: right;
}

.tp-paper h2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
  font-size: 19px;
}

.tp-paper h2 span {
  color: #5f5a51;
  font-family: var(--font-body);
  font-size: 13px;
}

.tp-paper .table th,
.tp-paper .table td {
  border-color: #e4dfd5;
  color: #1c1b18;
}

.tp-ptable {
  break-inside: avoid;
}

.tp-pal,
.tp-xtra {
  color: #94520f;
  font-weight: 700;
}

.tp-tot td {
  border-top: 2px solid #1c1b18;
  font-weight: 700;
}

.tp-pft {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid #e4dfd5;
  font-weight: 700;
}

.tp-printplan {
  break-after: page;
}

.tp-paper .tp-floor,
.tp-paper .tp-seat circle {
  fill: #ffffff;
  stroke: #d8d1c3;
}

.tp-paper .tp-fix rect,
.tp-paper .tp-fix circle {
  fill: #f9f7f3;
  stroke: #d8d1c3;
}

.tp-paper .tp-tshape {
  fill: #ffffff;
  stroke: #4a463e;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.tp-paper .tp-seat--on circle {
  stroke: var(--tp-colour);
}

.tp-paper text {
  fill: #1c1b18;
}

/* --- The room drawn, second sketch (ADR 0079): real chairs, centimetres, presentation
   attributes for paper, these for the screen in both themes. ------------------------------- */

.rp {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.rp--zoomed {
  cursor: grab;
  touch-action: none;
}

.rp-floor {
  fill: var(--surface);
  stroke: var(--line-2);
}

.rp-grid {
  stroke: var(--line);
}

/* The picture under the plan (an aerial photo): never in the way of a drag or a tap. */
.rp-backdrop {
  pointer-events: none;
}

.rp-way {
  fill: var(--surface-2);
  stroke: var(--line-2);
}

.rp-gap {
  fill: var(--surface);
}

.rp-door {
  stroke: var(--muted);
}

.rp-wall {
  fill: var(--ink-2);
}

.rp-furn {
  fill: var(--surface-2);
  stroke: var(--line-2);
}

.rp-flab,
.rp-alab,
.rp-ts,
.rp-no {
  fill: var(--muted);
}

.rp-top,
.rp-st {
  fill: var(--surface);
  stroke: var(--ink-2);
}

.rp-tl,
.rp-nm,
.rp-lt {
  fill: var(--ink);
}

.rp-seat {
  fill: var(--surface);
  stroke: var(--ink-2);
}

.rp-back,
.rp-st-dot {
  fill: var(--ink-2);
}

.rp-high {
  stroke: var(--ink-2);
}

.rp-ch--on .rp-seat {
  fill: color-mix(in srgb, var(--tp-colour) 30%, var(--surface));
  stroke: var(--tp-colour);
  stroke-width: 4;
}

.rp-ar {
  fill: color-mix(in srgb, var(--gold) 8%, var(--surface));
  stroke: var(--line-2);
}

.rp-a--fixed .rp-ar,
.rp-t--fixed .rp-top {
  stroke-dasharray: none;
  stroke-width: 4;
}

.rp--tables [data-drag] {
  cursor: grab;
  touch-action: none;
}

.rp--tables [data-drag]:hover .rp-top,
.rp--tables [data-drag]:hover .rp-ar,
.rp--tables [data-drag]:hover .rp-st {
  stroke: var(--accent);
}

/* Put too close or into a way on purpose (ADR 0083): marked amber, never refused. */
.rp-t--crowd .rp-top,
.rp-t--crowd .rp-seat,
.rp-a--crowd .rp-ar,
.rp-a--crowd .rp-st {
  stroke: var(--warn);
  stroke-width: 5;
}

.rp-drag {
  opacity: 0.75;
  cursor: grabbing;
}

.rp a:focus {
  outline: none;
}

.rp a:focus-visible .rp-top,
.rp a:focus-visible .rp-ar,
.rp a:focus-visible .rp-seat {
  stroke: var(--gold);
  stroke-width: 6;
}

.rp--guests .rp-ch {
  cursor: pointer;
}

.rp--guests .rp-ch:hover .rp-seat,
.rp-ch.tp-hot .rp-seat,
[data-pick] .rp--guests .rp-ch:not(.rp-ch--on) .rp-seat {
  stroke: var(--accent);
  stroke-width: 4;
}

.rp-ch--me .rp-seat {
  stroke: var(--gold);
  stroke-width: 6;
}

/* The plan's head: where it stands, the steps, the switch for the offer. */
.tp-phase {
  display: grid;
  gap: var(--space-3);
}

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

.tp-phase__h h2 {
  margin: 0;
  font-size: 20px;
}

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

.tp-phase .tp-link {
  padding: 0;
  border: 0;
  box-shadow: none;
}

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

.tp-flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.tp-flow li {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
}

.tp-flow .is-done {
  color: var(--ink-2);
}

.tp-flow .is-done::before {
  content: "✓ ";
}

.tp-flow .is-on {
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

.tp-mode {
  justify-self: start;
}

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

/* Lists beside the drawing: a row opens it, the button beside it copies it. */
.tp-side-list h2 {
  margin: 0;
  font-size: 20px;
}

.tp-h3 {
  margin: var(--space-3) 0 0;
  font-size: 15px;
}

.tp-rows {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-rowi {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface);
}

.tp-rowi:hover {
  border-color: var(--accent);
}

.tp-rowi__main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: 48px;
  padding: 6px 10px;
  color: inherit;
  text-decoration: none;
}

.tp-rowi__main > span:last-child {
  display: grid;
  min-width: 0;
}

.tp-rowi--plain:hover {
  border-color: var(--line);
}

.tp-shape {
  flex: none;
  width: 26px;
  height: 12px;
  border: 2px solid var(--ink-2);
  border-radius: 3px;
}

.tp-shape--round {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.tp-shape--small {
  width: 12px;
  height: 12px;
}

.tp-shape--area {
  border-style: dashed;
  border-color: var(--line-2);
}

.tp-wide {
  width: 100%;
  justify-content: center;
}

.tp-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tp-btns--col {
  display: grid;
}

.tp-side fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tp-ends__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.tp-size {
  display: grid;
  grid-template-columns: auto 110px;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.tp-toast--bad {
  background: var(--bad, #b0413a);
  animation-delay: 9s;
}

/* Prints of the second sketch: landscape A4 or A3, the paper's own named page. */
@page tp-a4 {
  size: A4 landscape;
  margin: 10mm;
}

@page tp-a3 {
  size: A3 landscape;
  margin: 12mm;
}

.tp-paper--a4 {
  page: tp-a4;
}

.tp-paper--a3 {
  page: tp-a3;
}

.tp-printbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tp-paper .rp-floor,
.tp-paper .rp-top,
.tp-paper .rp-seat,
.tp-paper .rp-gap,
.tp-paper .rp-st {
  fill: #ffffff;
}

.tp-paper .rp-top,
.tp-paper .rp-seat,
.tp-paper .rp-st {
  stroke: #3b3833;
}

.tp-paper .rp-back {
  fill: #3b3833;
}

.tp-paper .rp-grid {
  stroke: #e6e1d7;
}

.tp-paper .rp-way,
.tp-paper .rp-furn,
.tp-paper .rp-ar {
  fill: #f6f1e7;
  stroke: #8e887c;
}

.tp-paper .rp-wall {
  fill: #6b665d;
}

.tp-paper .rp-ch--on .rp-seat {
  fill: color-mix(in srgb, var(--tp-colour) 30%, #ffffff);
  stroke: var(--tp-colour);
}

.tp-paper text {
  fill: #1c1b18;
}

.rp-key {
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-right: 4px;
  border: 2px solid var(--tp-colour, var(--line-2));
  border-radius: 3px;
  background: color-mix(in srgb, var(--tp-colour, var(--surface)) 30%, var(--surface));
  vertical-align: -1px;
}

.rp-key--free {
  border-color: var(--ink-2);
  background: var(--surface);
}

.tp-plgd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 12px;
}

/* "Mein Betrieb", rooms: rules per room and the kept set-ups (ADR 0079). */
.mb-room {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.mb-room h3 {
  margin: 0;
  font-size: 18px;
}

.mb-room__h {
  margin: var(--space-2) 0 0;
  font-size: 14px;
}

.mb-tpl {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.mb-tpl__name {
  flex: 1;
  min-width: 0;
}

.tp-pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: var(--space-3) var(--space-5);
}

.tp-pgrid .table th,
.tp-pgrid .table td {
  padding: 4px 6px;
  font-size: 12px;
  overflow-wrap: break-word;
}

/* A column head never breaks inside a word ("Plat-z", "Hauptga-ng"); only the name, the one
   long text of a row, may break anywhere. */
.tp-pgrid .table th {
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

.tp-pgrid .table td:nth-child(2) {
  overflow-wrap: anywhere;
}

@media (max-width: 819.98px) {
  .tp-desk {
    display: none;
  }

  .tp-kpi b {
    font-size: 32px;
  }
}

@media print {
  .ev-page > .tp-print {
    display: block !important;
  }

  .tp-print > .page-head,
  .tp-print > .seg {
    display: none !important;
  }

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

/* Who a guest is (bride, groom, host, hostess, ADR 0106): the chair outlined, and its key. */
.rp-role {
  fill: none;
  stroke: var(--ok);
}

.tp-paper .rp-role {
  stroke: #1d7346;
}

.rp-key--role {
  border: 2.5px solid var(--ok);
  background: transparent;
}
/* --- Customer link of a table plan (ADR 0068): phone first, in the house's colours ---------- */
/* The colours come from the link's own stylesheet (look.css) as --cl-*; these are the fallbacks. */

.cl {
  /* The customer's pages keep the look of before (look 2027 is for the house's screens only):
   * gold marks, dark buttons, serif headings, 15 px text. */
  --gold: var(--guest-gold);
  --btn: var(--guest-btn);
  --btn-ink: var(--guest-btn-ink);
  --font-display: var(--font-paper-display);
  --font-body: var(--font-paper);
  --head-weight: 400;
  --head-track: normal;
  --radius-tag: 6px;
  --radius-note: 10px;
  --radius-control: 12px;
  --radius-panel: 18px;
  --cl-brand: var(--gold);
  --cl-ink: var(--ink);
  --cl-mute: var(--muted);
  --cl-line: var(--line);
  --cl-bg: var(--bg);
  margin: 0;
  background: var(--cl-bg);
  color: var(--cl-ink);
  font-family: Figtree, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

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

.cl h2 {
  font-size: 26px;
  line-height: 1.1;
}

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

.cl-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

.cl-head {
  display: flex;
  align-items: center;
  min-height: 48px;
}

.cl-logo {
  display: block;
  max-width: 200px;
  max-height: 64px;
  object-fit: contain;
}

.cl-house {
  margin: 0;
  font-weight: 600;
}

.cl-title h1 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.cl-sub,
.cl-count,
.cl-menu,
.cl-free,
.cl-empty,
.cl-foot {
  color: var(--cl-mute);
}

.cl-sub {
  margin: 4px 0 0;
}

.cl-hint,
.cl-pick,
.cl-msg {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--cl-brand);
  border-radius: 8px;
  background: var(--surface);
}

.cl-hint--lock,
.cl-hint--warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}

.cl-msgs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cl-msg--error {
  border-left-color: var(--bad);
  background: var(--bad-soft);
}

.cl-msg--success {
  border-left-color: var(--ok);
  background: var(--ok-soft);
}

.cl-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  background: var(--surface);
}

.cl-card h2 {
  margin: 0;
  font-size: 18px;
}

.cl-count {
  font-size: 14px;
  font-weight: 400;
}

.cl-tables {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cl-list,
.cl-seats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-list > li + li,
.cl-seat + .cl-seat {
  padding-top: 12px;
  border-top: 1px solid var(--cl-line);
}

.cl-seat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cl-seat__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cl-no {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--cl-line);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
}

.cl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cl-in {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--cl-ink);
  font: inherit;
}

.cl-btn {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--cl-brand);
  border-radius: 8px;
  background: var(--cl-brand);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cl-btn--quiet {
  border-color: var(--line-2);
  background: var(--surface);
  color: var(--cl-ink);
  font-weight: 500;
}

.cl-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
}

.cl-acts form {
  margin: 0;
}

.cl-link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cl-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cl-link--bad {
  color: var(--bad);
}

.cl-name,
.cl-menu,
.cl-free {
  margin: 0;
}

.cl-foot {
  font-size: 14px;
}

.cl-foot p {
  margin: 0 0 8px;
}

.cl-gone h1 {
  margin: 0;
  font-size: 22px;
}

.cl-gone p {
  margin: 0;
}

/* The customer link, second sketch (ADR 0081): help, tabs, the room and one table large,
   the cards of a chair, a guest and a table. Usable from 320 px; at 390 px a chair of a table
   opened large is about 41 px wide. */

.cl-head {
  justify-content: space-between;
  gap: 12px;
}

.cl-help {
  color: var(--cl-ink);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cl-deadline {
  margin: 0;
  color: var(--cl-mute);
  font-size: 15px;
}

.cl-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  background: var(--surface);
}

.cl-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 9px;
  color: var(--cl-ink);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.cl-tabs a[aria-current="page"] {
  background: var(--cl-brand);
  color: #ffffff;
}

.cl-intro p,
.cl-intro h2 {
  margin: 0;
}

.cl-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.cl-steps li span {
  display: block;
  color: var(--cl-mute);
}

.cl-btn--wide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

a.cl-btn {
  text-decoration: none;
}

a.cl-btn--quiet {
  display: inline-flex;
  align-items: center;
}

.cl-big {
  margin: 0;
  color: var(--cl-mute);
}

.cl-big b {
  color: var(--cl-ink);
  font-size: 24px;
}

.cl-progress progress {
  width: 100%;
  height: 10px;
  accent-color: var(--cl-brand);
}

.cl-plan {
  gap: 8px;
}

.cl-draw {
  overflow: hidden;
  border: 1px solid var(--cl-line);
  border-radius: 10px;
  background: var(--surface-2);
}

/* From 820 px the drawing is where the customer works; below it, lists (ADR 0081). */
.cl-narrow {
  display: none;
}

@media (max-width: 819.98px) {
  .cl-wide {
    display: none;
  }

  .cl-narrow {
    display: block;
  }
}

@media (min-width: 820px) {
  .cl-page {
    max-width: 1240px;
  }

  .cl-page > :not(.cl-plan),
  .cl-page > .cl-slot > * {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }

  .cl-page > .cl-plan {
    width: 100%;
  }
}

.cl-seatl,
.cl-trows {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.cl-trow {
  padding: 12px 0;
  border-top: 1px solid var(--cl-line);
}

.cl-trow:first-child {
  border-top: 0;
}

.cl-trow > p {
  margin: 0 0 8px;
}

.sv--tables [data-drag] {
  cursor: grab;
  touch-action: none;
}

.sv .rp-hit,
.sv--close .rp-ch {
  cursor: pointer;
}

.sv-sel .rp-top,
.sv-sel .rp-ar,
.sv-sel .rp-st,
.rp-ch--sel .rp-seat {
  stroke: var(--gold);
  stroke-width: 6;
}

.cl-bang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9a4f12;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  vertical-align: 1px;
}

.cl-lbl {
  margin: 0;
  color: var(--cl-mute);
  font-size: 14px;
  font-weight: 600;
}

.cl-row--between {
  align-items: center;
  justify-content: space-between;
}

.cl-row--between h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.cl-chips legend {
  margin-bottom: 6px;
  padding: 0;
}

.cl-chip {
  position: relative;
  display: inline-flex;
}

.cl-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cl-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: var(--surface);
  cursor: pointer;
}

.cl-chip input:checked + span {
  border-color: var(--cl-brand);
  background: color-mix(in srgb, var(--cl-brand) 16%, var(--surface));
  font-weight: 600;
}

.cl-chip input:focus-visible + span {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.cl-alg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cl-basis,
.cl-why {
  margin: 0;
  color: var(--cl-mute);
  font-size: 14px;
}

.cl-allowed {
  margin: 0;
  padding-left: 20px;
}

.cl-card > p {
  margin: 0;
}

.cl-pill {
  align-self: flex-start;
  margin: 0;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
}

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

.cl-pill--warn {
  background: var(--warn-soft);
}

.cl-stepper,
.cl-nudge,
.cl-ends {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cl-stepper form,
.cl-nudge form,
.cl-ends form {
  margin: 0;
}

.cl-stepper output {
  min-width: 2.5em;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.cl-step {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--cl-ink);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.cl-step:disabled {
  cursor: default;
  opacity: 0.4;
}

.cl-ends .cl-menu {
  flex-basis: 100%;
}

.cl-find {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-find li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--cl-line);
}

.cl-find li span {
  color: var(--cl-mute);
}

/* The customer link bar on the house's table plan step. */

.tp-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tp-link h2 {
  margin: 0;
  font-size: 16px;
}

.tp-link p {
  margin: 0;
}

.tp-link__url {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface-2);
  font: inherit;
  font-size: 14px;
}

.tp-link__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tp-link__acts form {
  margin: 0;
}

/* A segmented choice made of radio buttons ("Anrede", drinks): the ticked one looks pressed. */
.seg__item:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

.seg__item:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

label.seg__item {
  cursor: pointer;
}

/* The date of an event: the native field (keyboard, phone pickers), with an icon and the
   weekday written out beside it. */
.ev-date {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 16rem;
}

.ev-date > .icon {
  position: absolute;
  left: 14px;
  color: var(--muted);
  pointer-events: none;
}

.ev-date__in {
  padding-left: 42px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.ev-date__in::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}

.ev-date__day {
  margin-top: 6px;
  color: var(--ink-2);
  font-weight: 600;
}

.ev-date__day:empty {
  display: none;
}

.ev-past {
  margin-top: 8px;
}

.ev-article {
  margin-top: 8px;
}

/* A dish of the builder: the whole row takes it in or out, not only "+". */
.ev-dish--pick {
  position: relative;
  cursor: pointer;
}

.ev-dish--pick .ev-plus::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
}

.ev-dish--pick:not(.ev-dish--on):hover {
  background: var(--surface-2);
}

.ev-free-item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin: var(--space-4) 0 0;
}

/* How the drinks are charged: a place of its own in "Deine Auswahl". */
.ev-drinkq {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.ev-drinkq legend {
  margin-bottom: 6px;
  padding: 0;
}

.ev-drinkq__seg .seg__item {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
}

/* Mail (ADR 0070): the card in My business, the tab of an event, the mail form. */

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

.ml-who .chip {
  justify-content: flex-start;
  min-height: 52px;
  padding: 8px 14px;
  text-align: left;
  white-space: normal;
}

.ml-who .chip small {
  display: block;
  font-weight: 400;
}

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

.ml-acts form {
  margin: 0;
}

.ml-box {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 14.5px;
}

.ml-box p {
  margin: 0;
}

.ml-box--ok {
  background: var(--ok-soft);
}

.ml-box--ok > .icon {
  color: var(--ok);
}

.ml-box--warn {
  background: var(--warn-soft);
}

.ml-box--warn > .icon,
.ml-box--plan > .icon {
  color: var(--warn);
}

.ml-banner {
  margin: var(--space-3) 0;
}

.ml-tag--ok {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok);
}

.ml-tag--plan,
.ml-tag--warn {
  border-color: var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
}

.ml-docs,
.ml-hist,
.ml-replies,
.ml-files {
  display: grid;
  gap: var(--space-3);
}

/* The customer's link: which side gets the odd one, high chairs and wheelchairs (31.10.2026). */
.cl-sides,
.cl-chairs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cl-sides form,
.cl-chairs form {
  margin: 0;
}

/* The customer's link: a table's name, who a guest is, the guest's note (ADR 0106). */
.cl-tname,
.cl-role,
.cl-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.cl-role form,
.cl-tname form {
  margin: 0;
}

.cl-in--area {
  min-height: 88px;
  resize: vertical;
}

.cl-roletag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 13px;
  font-weight: 650;
  vertical-align: 2px;
}
/* --- Settlement of an event ("Abrechnung", ADR 0080) ---------------------------------------- */

.st-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--ink-2);
  font-size: 14px;
}

.st-subnav {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-5);
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

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

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

.st-subnav__item[aria-current="step"] {
  background: var(--btn);
  color: var(--btn-ink);
}

.st-subnav__n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 14px;
}

.st-subnav__item[aria-current="step"] .st-subnav__n {
  border-color: var(--btn-ink);
}

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

.st-head h2,
.st-box h3 {
  margin: 0;
}

.st-next {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.st-tag--ok {
  border-color: transparent;
  background: var(--ok-soft);
  color: var(--ink);
}

.st-tag--warn {
  border-color: var(--warn);
  background: var(--warn-soft);
  color: var(--ink);
}

.st-okbox {
  background: var(--ok-soft);
}

.st-okbox .icon {
  color: var(--ok);
}

.st-okbox p,
.warnbox p {
  margin: 0;
}

.st-need {
  color: var(--bad);
  font-weight: 700;
}

/* Interim figures beside the step. */
.st-sum {
  display: grid;
  gap: var(--space-3);
  position: sticky;
  top: var(--space-4);
}

.st-sum h2 {
  margin: 0;
}

.st-sum__rows {
  display: grid;
  gap: 4px;
  margin: 0;
}

.st-sum__rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.st-sum__rows dt {
  color: var(--ink-2);
}

.st-sum__rows dd {
  margin: 0;
  white-space: nowrap;
}

.st-sum__line {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.st-sum__big {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-note);
  background: var(--surface-2);
}

.st-sum__big b {
  font-size: 22px;
}

.st-sum__big--ok {
  background: var(--ok-soft);
}

.st-sum__pos {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
}

/* 1 Gäste */
.st-gst,
.st-miss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.st-gst__who,
.st-miss__who {
  display: grid;
  flex: 1 1 160px;
}

.st-gst__who span {
  color: var(--muted);
  font-size: 14px;
}

.st-gst__bk {
  color: var(--ink-2);
  font-size: 14px;
}

.st-miss__f {
  display: grid;
  gap: 4px;
  color: var(--ink-2);
  font-size: 14px;
}

.st-stepper output {
  display: inline-grid;
  place-items: center;
  width: 4.2em;
  min-height: 46px;
  font-size: 17px;
  font-weight: 700;
}

.st-eff {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ml-doc {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.ml-doc:last-child {
  border-bottom: 0;
}

.ml-doc__head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.ml-doc__st {
  display: block;
  margin-top: 4px;
}

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

.ml-hist {
  gap: var(--space-2);
}

.ml-hist__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  align-items: center;
  font-size: 14.5px;
}

.ml-hist__when {
  min-width: 6.5em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.ml-replies a {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.ml-replies a[aria-current="true"] {
  border-color: var(--gold);
}

.ml-text {
  min-height: 12em;
}

.ml-sig,
.ml-body {
  margin: 0;
  padding: var(--space-3);
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  color: var(--ink-2);
  white-space: normal;
}

.ml-body {
  border-style: solid;
  color: var(--ink);
}

.ml-when {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border: 0;
  padding: 0;
}

.ml-when legend {
  width: 100%;
}

.ml-when__says {
  display: none;
  width: 100%;
  margin: 0;
  font-weight: 600;
}

.ml-when:has(input[name="when"][value="soon"]:checked) .ml-when__says[data-when="soon"],
.ml-when:has(input[name="when"][value="tomorrow"]:checked) .ml-when__says[data-when="tomorrow"],
.ml-when:has(input[name="when"][value="default"]:checked) .ml-when__says[data-when="default"],
.ml-when:has(input[name="when"][value="other"]:checked) .ml-when__says[data-when="other"] {
  display: block;
}

.ml-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--space-3);
  margin: 0;
  font-size: 14.5px;
}

.ml-meta dt {
  color: var(--ink-2);
}

.ml-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.st-eff li,
.st-ln,
.st-docs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.st-eff li > span:first-child,
.st-ln > span:first-child {
  display: grid;
  flex: 1 1 auto;
}

.st-eff small,
.st-docs small,
.st-ln small,
.st-art__nm small,
.st-cmp small,
.st-opl small,
.st-ticks small,
.st-sheet small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}

.st-eff--add {
  background: var(--warn-soft);
}

.st-eff form {
  margin: 0;
}

/* 2 Verbrauch */
.st-photo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.st-photo__thumb img {
  display: block;
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tag);
  object-fit: cover;
}

.st-photo__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

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

.st-search .in {
  flex: 1 1 220px;
}

.st-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--ink-2);
}

.st-run {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}

.st-arts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-arts__cat {
  display: flex;
  justify-content: space-between;
  padding: var(--space-4) 0 var(--space-2);
  color: var(--ink-2);
  font-size: 14px;
}

.st-art {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.st-art form {
  margin: 0;
}

.st-art--has .st-art__nm b {
  color: var(--accent);
}

.st-art__nm {
  flex: 1 1 200px;
  min-width: 0;
}

/* 3 Extras */
.st-box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
}

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

.st-xr .f__label {
  flex: 0 0 150px;
}

.st-free {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.st-free__name {
  flex: 1 1 240px;
}

.st-vat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
}

.st-vat label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

/* 4 Für die Kasse */
.st-cust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface-2);
}

.st-cust__hd,
.st-cust__note {
  grid-column: 1 / -1;
  margin: 0;
}

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

.st-paper {
  overflow-x: auto;
}

.st-sheet {
  display: grid;
  gap: var(--space-3);
  font-size: 14px;
}

.st-sheet__lh {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid #a97c26;
}

.st-sheet__lh b {
  font-family: var(--font-paper-display);
  font-size: 20px;
  font-weight: 400;
}

.st-sheet__lh span {
  color: #6b6559;
  font-size: 12px;
  text-align: right;
}

.st-sheet__to {
  margin: 0;
  line-height: 1.6;
}

.st-sheet__t {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.st-sheet__t th,
.st-sheet__t td {
  padding: 6px 4px;
  border-bottom: 1px solid #e3ded5;
  text-align: left;
  vertical-align: top;
}

.st-sheet__t th {
  color: #6b6559;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.st-sheet small {
  color: #6b6559;
}

.st-sheet__gh td {
  padding-top: 12px;
  color: #a97c26;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-sheet__gh2 td {
  padding-top: 10px;
  font-style: italic;
  font-weight: 700;
}

.st-sheet__tot td,
.st-sheet__res td {
  border-top: 2px solid #1c1b18;
  font-weight: 700;
}

.st-sheet__res td {
  font-size: 16px;
}

.st-sheet__neg td {
  background: #fbf3e2;
}

.st-sheet__h {
  margin: var(--space-3) 0 0;
}

.st-sheet__h span {
  color: #6b6559;
  font-size: 12px;
  font-weight: 400;
}

.st-sheet__ft {
  margin: 0;
  color: #6b6559;
  font-size: 12px;
}

.st-sheet .st-need {
  color: #a3271d;
}

.st-ticks {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-ticks__h {
  padding: var(--space-3) 0 2px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

.st-ticks__h--top {
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}

.st-ticks__row,
.st-ticks__dep {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  cursor: pointer;
}

.st-ticks__row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.st-ticks__ck {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--line-2);
  border-radius: 50%;
  color: transparent;
}

.st-ticks__row:has(input:checked) {
  background: var(--ok-soft);
}

.st-ticks__row:has(input:checked) .st-ticks__ck {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--surface);
}

.st-ticks__row:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.st-ticks__nm {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.st-ticks__q {
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.st-ticks__dep {
  background: var(--warn-soft);
}

.st-must {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-note);
  background: var(--surface-2);
}

/* 5 Rechnung aus der Kasse */
.st-file,
.st-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
}

.st-file > div,
.st-file > span {
  flex: 1 1 220px;
}

.st-file p {
  margin: 0;
}

.st-drop {
  display: grid;
  border-style: dashed;
}

.st-drop p {
  margin: 0;
}

.st-upload__more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.st-cmp {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-cmp li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--line);
}

.st-cmp__st .icon {
  color: var(--ok);
}

.st-cmp--d {
  background: var(--warn-soft);
}

.st-cmp--d .st-cmp__st .icon {
  color: var(--warn);
}

.st-cmp__v {
  text-align: right;
  white-space: nowrap;
}

.st-cmp__acts {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2 / -1;
  align-items: flex-start;
  gap: var(--space-2);
}

.st-cmp__acts form {
  margin: 0;
}

.st-acc summary {
  list-style: none;
}

.st-acc__body {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface);
}

.st-acc__body p {
  margin: 0;
}

/* 7 Offener Posten */
.st-opg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.st-opg > div {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
}

.st-opg span {
  color: var(--ink-2);
  font-size: 14px;
}

.st-opg b {
  font-size: 18px;
}

.st-opg--w {
  background: var(--warn-soft);
}

.st-opg--bad {
  border-color: var(--bad) !important;
  background: var(--bad-soft);
}

.st-opg--ok {
  background: var(--ok-soft);
}

.st-docs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-docs form {
  margin: 0;
}

.st-opl {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-opl li {
  border-bottom: 1px solid var(--line);
}

.st-opl__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  color: var(--ink);
  text-decoration: none;
}

.st-opl__row:hover .st-opl__nm b,
.st-opl__row:focus-visible .st-opl__nm b {
  text-decoration: underline;
}

.st-opl__nm {
  display: grid;
  flex: 1 1 240px;
}

.st-opl__am {
  display: grid;
  text-align: right;
}

.st-depbox {
  margin-top: var(--space-5);
}

.st-depf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.st-print {
  padding: var(--space-4);
  background: var(--bg);
}

.st-print__bar {
  display: flex;
  justify-content: flex-end;
  max-width: 900px;
  margin: 0 auto var(--space-4);
}

.st-print .paper {
  max-width: 900px;
  margin: 0 auto var(--space-5);
}

@media (max-width: 860px) {
  .st-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-sum {
    position: static;
  }
}

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

  .st-xr .f__label {
    flex-basis: 100%;
  }
}

@media print {
  .st-print__bar {
    display: none;
  }

  .st-print {
    padding: 0;
    background: #ffffff;
  }

  .st-print .paper {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    break-after: page;
  }
}


/* Recipe booklets (ADR 0075): contents beside the chapters, recipes in the order of the print. */
.rb {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.rb-toc {
  position: sticky;
  top: var(--space-5);
  max-height: calc(100vh - 2 * var(--space-5));
  overflow: auto;
}

.rb-toc ol {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-1);
}

.rb-toc ol ol {
  font-size: 14px;
  color: var(--ink-2);
}

.rb-toc a {
  color: inherit;
}

/* On a wide screen the contents stay open at the side; on a phone they fold (script in the page). */
.rb-toc__more > summary {
  list-style: none;
  cursor: pointer;
}

.rb-toc__more > summary::-webkit-details-marker {
  display: none;
}

.rb-toc__more > summary h2 {
  margin: 0 0 var(--space-2);
}

.rb-restore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
  width: 100%;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rb-restore:hover .button {
  background: var(--surface-2, var(--line));
}

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

.rb-head h2,
.rb-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-track);
}

.rb-head h2 {
  font-size: 24px;
}

.rb-head h3 {
  font-size: 19px;
}

.rb-num {
  color: var(--accent);
}

.rb-yield {
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
}

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

.rb-tools form {
  display: flex;
  gap: var(--space-1);
  margin: 0;
}

.rb-text h3 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: 15px;
}

.rb-text p,
.rb-text ul {
  margin: 0 0 var(--space-2);
}

.rb-chapter {
  display: grid;
  gap: var(--space-4);
  scroll-margin-top: var(--space-5);
}

.rb-recipe {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--space-5);
}

.rb-recipe__body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-5);
}

.rb-ingredients {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.rb-ingredients li {
  padding: 3px 0;
  border-bottom: 1px dotted var(--line);
}

.rb-steps p {
  margin: 0 0 var(--space-2);
}

.rb-cover__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--head-weight);
  font-size: 28px;
  color: var(--accent);
}

.rb-cover__sub {
  margin: 0;
  font-style: italic;
}

.rb-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}

.rb-area {
  width: 100%;
  min-height: 200px;
}

.rb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 860px) {
  .rb,
  .rb-recipe__body,
  .rb-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .rb-toc {
    position: static;
    max-height: none;
  }
}

/* The heading of a chapter or recipe opens its edit page; a recipe's whole card is the target. */
.rb-open {
  color: inherit;
  text-decoration: none;
}

.rb-open:hover {
  text-decoration: underline;
}

.rb-recipe {
  position: relative;
}

.rb-open--card::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rb-recipe .rb-tools {
  position: relative;
  z-index: 1;
}


/* The button a press of Enter uses in a form of counts (it saves what was typed): there for the
   browser and for screen readers, not to be seen. Beats ".ev-stepper button". */
button.st-enter {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The short text of "Other reason" shows only while that reason is chosen. A browser without
   :has() keeps the field visible. */
.st-card form:has(input[name="waiver"]):not(:has(input[name="waiver"][value="other"]:checked)) .st-other-reason {
  display: none;
}
/* --- Cooking classes: the tab "Kurs" and duplicating (ADR 0077) ------------------------- */

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

@media (min-width: 1000px) {
  .cc-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.cc-text {
  min-height: 96px;
  resize: vertical;
}

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

.cc-actions form {
  margin: 0;
}

.cc-count {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.cc-num {
  width: 6.5em;
}

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

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

.cc-block h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: 15px;
}

.cc-lines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-lines form {
  margin: 0;
}

/* The whole line is the tap: name and amount left, the mark "im Haus" right. */
.cc-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

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

.cc-line:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.cc-line__name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cc-line__amount {
  grid-column: 1;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.cc-line__state {
  display: inline-flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

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

.cc-line__tag {
  grid-column: 1;
  justify-self: start;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--warn-soft);
  font-size: 14px;
  font-weight: 700;
}

.cc-line--suggested {
  border-style: dashed;
}

.ev-bar__dup {
  margin-left: auto;
}

.dp-search {
  margin-bottom: var(--space-4);
}

.dp-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
}

.dp-row__link {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
}

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

.dp-row > .icon {
  margin-right: 16px;
  color: var(--muted);
}

.dp-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.dp-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.dp-list--not {
  color: var(--muted);
}

/* Standard set-ups of a room (ADR 0094): the bar above the plan, tables fixed in the set-up,
   rare things behind "Mehr", and the set-up drawn in "Mein Betrieb". */
.tp-setups__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.tp-setups__h {
  margin: 0;
  font-size: 16px;
}

.tp-setups__range {
  margin-left: 4px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.tp-setups__fits {
  border-color: var(--accent);
}

.tp-guestsnow {
  align-items: center;
}

.tp-note {
  margin: 0;
  color: var(--ink-2);
}

.tp-more {
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
}

.tp-more > summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 32px;
}

.tp-more[open] > summary {
  margin-bottom: var(--space-2);
}

.rp-t--held .rp-top {
  stroke-width: 5;
}

.rp-t--variable .rp-top {
  stroke-dasharray: 12 8;
}

.rp-t--off {
  opacity: 0.3;
}

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

.mb-setup {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
}

.mb-setup__sum {
  cursor: pointer;
  min-height: 32px;
}

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

.mb-setup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-3);
  align-items: start;
}

.mb-setup__plan svg {
  width: 100%;
  height: auto;
}

.mb-setup__rows {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb-setup__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line);
}

.mb-setup__t {
  display: grid;
  flex: 1 1 120px;
  min-width: 0;
}

.mb-setup__parts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mb-setup__seats {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* Duplicate: the earlier customer stays unless the person names another one. */
.dp-customer__ask {
  margin: 0 0 var(--space-2);
}

.dp-note {
  margin: 0;
}

.dp-other {
  grid-column: 1 / -1;
}

.dp-customer:has(input[name="customer_mode"][value="same"]:checked) ~ .dp-other {
  display: none;
}
/* --- Inbox and correspondence of an event (ADR 0090) ---------------------------------------- */

.ib {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}

.ib-list {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
}

.ib-rows,
.ml-thread {
  display: grid;
  gap: var(--space-2);
}

/* The customer's offer page (ADR 0091) and the house's card for it. ---------------------------- */

a.cl-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.op-offer--chosen {
  border-color: var(--cl-brand);
  border-width: 2px;
}

.op-offer--other {
  opacity: 0.75;
}

.op-offer__head h2 {
  margin: 0;
}

.op-kicker {
  margin: 0;
  color: var(--cl-mute);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.op-badge {
  align-self: flex-start;
  margin: 4px 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--cl-brand);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}

.op-badge--off {
  background: var(--line-2);
  color: var(--cl-ink);
}

.op-sum {
  margin: 4px 0 0;
}

.op-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--cl-line);
}

.op-course h3 {
  margin: 0 0 4px;
  color: var(--cl-brand);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.op-dish {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.op-dish span,
.op-note,
.op-or {
  color: var(--cl-mute);
  font-size: 14px;
}

.op-note,
.op-or {
  margin: 2px 0;
}

.op-more summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

/* The arrow shows that the line opens: it points down once it is open. */
.op-more summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.op-more[open] > summary::before {
  transform: rotate(45deg);
}

.op-doc {
  overflow-x: auto;
  font-size: 14px;
}

.op-doc table {
  width: 100%;
  border-collapse: collapse;
}

.op-doc td,
.op-doc th {
  padding: 4px 6px;
  border-bottom: 1px solid var(--cl-line);
  vertical-align: top;
  text-align: left;
}

.op-doc .r {
  text-align: right;
  white-space: nowrap;
}

.op-doc .s,
.op-doc .rt {
  display: block;
  color: var(--cl-mute);
  font-size: 12px;
}

.op-doc .tot td {
  font-weight: 700;
}

.op-doc .sec {
  margin: 12px 0 4px;
  font-weight: 700;
}

.op-panel {
  border-color: var(--cl-brand);
  border-width: 2px;
}

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

.op-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-summary p,
.op-summary ul {
  margin: 0;
}

.op-summary__menu {
  padding-left: 18px;
}

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

.op-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.op-field legend,
.op-field > span {
  font-weight: 600;
}

.op-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.op-check,
.op-radio {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 44px;
  cursor: pointer;
}

.op-check input,
.op-radio input {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex: none;
}

.op-address {
  margin: 0;
}

.op-terms h3 {
  margin: 8px 0 0;
  font-size: 15px;
}

.op-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.op-pick__list,
.op-reqs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ib-row {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

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

.ib-row[aria-current="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ib-row__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--ink-2);
  font-size: 14px;
}

.ib-row__who {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ib-row__when,
.ml-th__when {
  flex: 0 0 auto;
  color: var(--ink-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ib-row__t {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ib-row__ev {
  color: var(--ink-2);
  font-size: 14px;
}

.ib-detail .ib-back {
  display: none;
}

.ib-rules {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.2em;
}

.ib-more {
  font-size: 14px;
}

.ml-k2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: var(--space-5);
  align-items: start;
}

.ml-th {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

a.ml-th:hover,
.ml-th--out,
.ml-th--engine {
  background: var(--surface-2);
}

.ml-th__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ml-th__sub {
  overflow-wrap: anywhere;
}

.ml-th__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ev-bar__no {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .ib,
  .ml-k2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ib--detail .ib-list,
  .ib:not(.ib--detail) .ib-detail {
    display: none;
  }

  .ib-detail .ib-back {
    display: inline-flex;
  }
}

.op-pick__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.op-pick__row--off {
  background: var(--bg);
}

.op-pick__main {
  display: flex;
  flex: 1 1 260px;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

.op-pick__main span {
  display: flex;
  flex-direction: column;
}

.op-pick__main input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.op-why {
  color: var(--bad, #a33);
}

.op-page,
.op-req {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

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

.op-page p,
.op-req p {
  margin: 0;
}

.op-req--done {
  opacity: 0.6;
}

/* The calendar (ADR 0092): what is due, month and week, the panel. */
.cal-s-inquiry {
  --sc: var(--st-1);
}

.cal-s-option {
  --sc: var(--st-2);
}

.cal-s-offer {
  --sc: var(--st-3);
}

.cal-s-booked {
  --sc: var(--st-6);
}

.cal-s-held {
  --sc: var(--st-5);
}

.cal-s-cancelled {
  --sc: var(--st-7);
}

.cal-due {
  display: grid;
  gap: var(--space-3);
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--st-2) 35%, transparent);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--st-2) 12%, var(--surface));
}

.cal-due__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 18px;
}

.cal-due__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-due__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
}

.cal-due__item:hover {
  background: var(--sel);
}

.cal-due__open {
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

.cal-due__what {
  display: grid;
  flex: 1 1 220px;
  min-width: 0;
}

.cal-due__acts,
.cal-acts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.cal-nav,
.cal-seg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cal-title {
  min-width: 9ch;
  font-size: 24px;
  text-align: center;
}

.cal-card {
  container-type: inline-size;
  display: grid;
  gap: var(--space-3);
}

.cal-chip[aria-current="true"] {
  background: color-mix(in srgb, var(--sc) 20%, var(--surface));
  border-color: var(--sc);
  color: var(--ink);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 108px;
  padding: 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cal-day:hover {
  background-color: var(--sel);
}

.cal-day--out {
  background-color: var(--surface-2);
}

.cal-day--past .cal-day__n {
  color: var(--muted);
}

/* Option: held for now, hatched. Booked: green. Partly: green at the edge, a room is free. */
.cal-day--option {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--st-2) 24%, transparent) 0 6px,
    transparent 6px 12px
  );
}

.cal-day--booked {
  background-color: color-mix(in srgb, var(--st-6) 14%, var(--surface));
}

.cal-day--partly {
  background-color: color-mix(in srgb, var(--st-6) 6%, var(--surface));
  box-shadow: inset 4px 0 0 var(--st-6);
}

.cal-day__open {
  position: absolute;
  inset: 0;
}

.cal-day__open:focus-visible {
  outline-offset: -2px;
}

.cal-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  pointer-events: none;
}

.cal-day__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}

.cal-day--today .cal-day__n {
  background: var(--accent);
  color: var(--surface);
}

.cal-day__state {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}

.cal-ev {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 5px;
  min-height: 24px;
  padding: 4px 7px;
  overflow: hidden;
  border-radius: 7px;
  background: color-mix(in srgb, var(--sc) 16%, var(--surface));
  box-shadow: inset 2.5px 0 0 var(--sc);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.cal-ev.cal-s-option,
.cal-wb.cal-s-option {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--st-2) 30%, transparent) 0 5px,
    transparent 5px 10px
  );
}

.cal-ev.cal-s-cancelled .cal-ev__t {
  text-decoration: line-through;
}

.cal-ev__room {
  flex: none;
  color: var(--muted);
}

.cal-ev__t {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cal-more {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.cal-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-key {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--surface);
}

.cal-key--option {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--st-2) 45%, transparent) 0 4px,
    transparent 4px 8px
  );
}

.cal-key--booked {
  background: color-mix(in srgb, var(--st-6) 30%, var(--surface));
}

.cal-key--partly {
  background: color-mix(in srgb, var(--st-6) 10%, var(--surface));
  box-shadow: inset 4px 0 0 var(--st-6);
}

.cal-scroll {
  overflow-x: auto;
}

.cal-week {
  display: grid;
  grid-template-columns: 110px repeat(7, minmax(120px, 1fr));
  min-width: 900px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.cal-week__h,
.cal-week__room,
.cal-wc {
  min-width: 0;
  padding: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cal-week__h {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.cal-week__h--today {
  color: var(--accent);
}

.cal-week__room {
  font-weight: 600;
}

.cal-wc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 86px;
}

.cal-wc--option {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--st-2) 20%, transparent) 0 6px,
    transparent 6px 12px
  );
}

.cal-wc--booked {
  background-color: color-mix(in srgb, var(--st-6) 12%, var(--surface));
}

.cal-wb {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sc) 16%, var(--surface));
  box-shadow: inset 3px 0 0 var(--sc);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}

.cal-wb span {
  color: var(--ink-2);
  font-size: 14px;
}

.cal-wfree {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

.cal-wc--past .cal-wfree {
  pointer-events: none;
}

@container (max-width: 760px) {
  .cal-grid .ev-wd__long {
    display: none;
  }

  .cal-grid .ev-wd__short {
    display: inline;
  }
}

/* A phone shows each event as a coloured bar in its day; tapping the day names them. */
@container (max-width: 520px) {
  .cal-day {
    min-height: 66px;
    padding: 3px;
  }

  .cal-ev {
    height: 8px;
    min-height: 8px;
    padding: 0;
    border-radius: 4px;
    background: var(--sc);
    box-shadow: none;
    font-size: 0;
  }

  .cal-ev__room,
  .cal-more,
  .cal-day__state {
    display: none;
  }
}

.cal-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--space-4);
  margin: 0;
}

.cal-kv dt {
  color: var(--muted);
}

.cal-kv dd {
  margin: 0;
}

.cal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-wishes {
  margin: 0;
  overflow-wrap: anywhere;
}

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

.cal-lane {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.cal-lane__room {
  margin: 0;
  font-weight: 600;
}

.cal-lane__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
}

.cal-lane__row:hover {
  background: var(--sel);
}

.cal-lane__what {
  display: grid;
  min-width: 0;
}

.cal-lane__free {
  margin: 0;
  color: var(--muted);
}

.cal-ol {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.cal-ol__subject {
  margin: 0;
  font-weight: 600;
}

.cal-ol__body {
  margin: 0;
  font: inherit;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

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

/* The menu card (ADR 0096): settings on the left, the sheet as it prints on the right. The sheet's
   own style comes from /events/menu-card.css (the house's colours and fonts), in millimetres; the
   box scales it to the width (brigade.js). */
.button--gold {
  background: var(--surface);
  border: 1.5px solid var(--gold);
  color: var(--accent);
}

.mc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-4);
  align-items: start;
}

.mc-pv {
  position: sticky;
  top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.mc-pv__head,
.mc-sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.mc-sec__head h2 {
  margin: 0;
}

.mc-stage {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface-2);
  min-width: 0;
}

.mc-box {
  --mm: 1mm;
  --pt: 1pt;

  position: relative;
  width: 100%;
  overflow: auto;
}

.mc-box.is-scaled {
  overflow: hidden;
}

.mc-box.is-scaled > .mc-sheet {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.mc-cap {
  margin: 0;
  text-align: center;
}

.mc-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-group {
  margin-top: var(--space-2);
}

.mc-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.mc-row:hover {
  border-color: var(--line-2);
  background: var(--surface-2);
}

.mc-row--off {
  opacity: 0.6;
}

.mc-row--off .mc-row__name {
  text-decoration: line-through;
}

.mc-row__form {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* The button covers the whole row, so a tap anywhere switches the line; pen and arrows stay above it. */
.mc-row__btn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: 10px 0 10px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mc-row__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-control);
}

.mc-row__btn:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mc-ck {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  color: #fff;
}

.mc-row:not(.mc-row--off) .mc-ck {
  border-color: var(--gold);
  background: var(--gold);
}

.mc-row__txt {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mc-row__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mc-row__txt small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.mc-row__acts {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
  flex: none;
  padding: 7px 8px 7px 0;
}

.mc-row__acts form {
  margin: 0;
}

.mc-ib {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.mc-edit {
  padding: var(--space-3);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.mc-edit form {
  display: grid;
  gap: var(--space-2);
}

.cal-ask summary {
  list-style: none;
}

/* "Mein Betrieb", card "Standard-Kategorien": the house's word for what the guests choose
   (house_words). Two short fields side by side, under the table, set off by a line. */
.mb-words {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.mb-words .mb-fg {
  max-width: 34rem;
}
/* --- My business: kinds, standard categories, cost of goods (ADR 0095) ------------------------ */

.mb-kinds {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb-kind {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2) 14px;
  padding: var(--space-3) 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface);
}

.mb-kind--off {
  background: var(--surface-2);
}

.mb-kind--off .mb-kind__b {
  opacity: 0.6;
}

.mb-kind__b {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

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

.mb-kind__name {
  width: 14em;
  max-width: 100%;
  font-weight: 700;
}

.mb-kind__text {
  width: 100%;
}

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

.mb-kind__pay .chip:not(.is-on) {
  opacity: 0.55;
}

.mb-kind__pay .chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

@media (max-width: 620px) {
  .mb-kind {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .mb-kind > .button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.mb-cats {
  min-width: 820px;
}

.mb-cats td {
  vertical-align: middle;
}

.mb-cats__grp td {
  padding-top: var(--space-4);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.mb-cats__move,
.mb-cats__acts {
  white-space: nowrap;
}

.mb-cats__move .icon-button,
.mb-cats__acts .icon-button {
  display: inline-grid;
}

.mb-cats__name {
  width: 10em;
  font-weight: 600;
}

.mb-cats__title {
  width: 15em;
}

.mb-cats__kinds {
  flex-wrap: nowrap;
  gap: 4px;
}

.mb-goods {
  min-width: 480px;
}

.mb-goods__base td {
  font-weight: 600;
}

.mb-goods td.mb-goods__in1 {
  padding-left: 24px;
}

.mb-goods td.mb-goods__in2 {
  padding-left: 44px;
  color: var(--muted);
}

.mb-calc {
  padding: var(--space-3) 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface-2);
}

.mc-edit__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

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

.mc-add__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
}

.mc-sw {
  margin: 0;
}

.mc-sw-item {
  list-style: none;
}

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

.mc-opt {
  margin: 0;
}

.mc-opt button {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mc-opt button[aria-checked="true"] {
  border-color: var(--gold);
  background: var(--accent-soft);
}

.mc-opt button[aria-disabled="true"] {
  opacity: 0.65;
}

.mc-opt small {
  display: block;
  color: var(--ink-2);
}

.mc-opt__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
}

.mc-opt button[aria-checked="true"] .mc-opt__dot {
  border-color: var(--gold);
}

.mc-opt button[aria-checked="true"] .mc-opt__dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}

.mc-reset {
  display: grid;
  gap: 2px;
}

.mc-reset form {
  margin: 0;
}

@media (max-width: 920px) {
  .mc-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .mc-pv {
    position: static;
    order: -1;
  }

  /* Moving up and down is for the computer; on a phone a tap switches, the pen changes the text. */
  .mc-mv {
    display: none;
  }

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

@media print {
  .mc-pv {
    position: static;
  }
}

/* --- "Haben wir alles?" of an event (ADR 0097) ---------------------------------------------- */

/* The count on its button in the step bar: red overdue, orange soon, grey open, green done. */
.ev-hw {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

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

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

.ev-hw--done {
  background: var(--ok-soft);
  color: var(--ok);
}

/* The red dot of an event with overdue items in the list of events. */
.ev-due {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  vertical-align: middle;
}

.ev-due__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bad);
}

.ev-wait__why--bad {
  color: var(--bad);
}

.hw {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hw-ans {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.hw-ans h2 {
  font-size: 20px;
}

.hw-ans p {
  margin-top: 4px;
  color: var(--ink-2);
}

.hw-ans__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
}

.hw-ans--ok {
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: var(--ok-soft);
}

.hw-ans--ok .hw-ans__ico {
  color: var(--ok);
}

.hw-ans--bad {
  border-color: color-mix(in srgb, var(--bad) 40%, transparent);
  background: var(--bad-soft);
}

.hw-ans--bad .hw-ans__ico {
  color: var(--bad);
}

.hw-ans--warn {
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  background: var(--warn-soft);
}

.hw-ans--warn .hw-ans__ico {
  color: var(--warn);
}

.hw-tl__hd {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}

.hw-tl__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}

.hw-fr {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-2);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}

.hw-fr b {
  font-size: 14px;
}

.hw-fr__st {
  color: var(--muted);
  font-weight: 600;
}

.hw-fr--ok {
  border-left-color: var(--ok);
}

.hw-fr--ok .hw-fr__st {
  color: var(--ok);
}

.hw-fr--soon {
  border-left-color: var(--warn);
}

.hw-fr--soon .hw-fr__st {
  color: var(--warn);
}

.hw-fr--overdue {
  border-left-color: var(--bad);
}

.hw-fr--overdue .hw-fr__st {
  color: var(--bad);
}

.hw-fr--na {
  border-style: dashed;
  border-left-style: solid;
  background: var(--surface-2);
  color: var(--muted);
}

.hw-fr--day {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--btn-ink);
}

.hw-fr--day .hw-fr__st {
  color: var(--btn-ink);
}

.hw-grp {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  scroll-margin-top: 120px;
}

.hw-grp__hd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.hw-grp__hd h3 {
  font-size: 17px;
}

.hw-due {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.hw-due--soon {
  color: var(--warn);
}

.hw-due--overdue {
  color: var(--bad);
}

.hw-move {
  margin-left: auto;
}

.hw-move__form {
  display: grid;
  gap: var(--space-2);
  max-width: 340px;
  margin-top: var(--space-2);
}

/* One open item: a coloured edge, the whole row leads to its first button. */
.hw-it {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-2);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.hw-it:has(.hw-it__link:hover) {
  border-color: var(--line-2);
}

.hw-it--soon {
  border-left-color: var(--warn);
}

.hw-it--overdue {
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad-soft) 55%, var(--surface));
}

.hw-it--na {
  border-style: dashed;
  border-left-style: solid;
  background: var(--surface-2);
  color: var(--muted);
}

.hw-it__main {
  display: grid;
  flex: 1 1 280px;
  gap: 4px;
}

.hw-it__title {
  font-size: 15px;
}

.hw-it__link {
  color: inherit;
  text-decoration: none;
}

.hw-it__link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.hw-it__dt {
  color: var(--ink-2);
  font-size: 14px;
}

.hw-it__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 4px;
}

.hw-who {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 600;
}

.hw-who--customer {
  background: color-mix(in srgb, var(--st-4) 14%, var(--surface));
}

.hw-who--kitchen {
  background: color-mix(in srgb, var(--st-5) 14%, var(--surface));
}

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

/* Buttons and forms of a row lie above the link that covers it. */
.hw-it__acts > *,
.hw-it__names {
  position: relative;
  z-index: 1;
}

.hw-it__names ul,
.hw-done__list {
  margin: 4px 0 0;
  padding-left: 18px;
}

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

.hw-edit {
  flex-basis: 100%;
}

.hw-edit form {
  max-width: 420px;
  margin-top: var(--space-2);
}

.hw-done summary,
.hw-own summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  cursor: pointer;
}

.hw-done__list {
  display: grid;
  gap: var(--space-2);
  padding-left: 0;
  list-style: none;
}

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

.hw-done__list .icon {
  color: var(--ok);
}

.hw-own__form {
  max-width: 420px;
  margin-top: var(--space-4);
}

/* "Mein Betrieb", Räume: a room set up in four steps, its kinds of table, the bar of its guests
   (ADR 0099). */
.rs-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.rs-step {
  display: grid;
  min-height: 58px;
  padding: var(--space-2) 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface);
  color: var(--ink-2);
  line-height: 1.25;
  text-decoration: none;
}

.rs-step small {
  color: var(--muted);
  font-size: 14px;
}

.rs-step[aria-current="step"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

@media (max-width: 560px) {
  .rs-step small:last-child {
    display: none;
  }
}

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

.rs-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface);
}

.rs-row:hover {
  border-color: var(--line-2);
}

.rs-row__link,
.rs-row__text {
  display: grid;
  flex: 1 1 220px;
  gap: 2px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The whole row opens the room or the kind; its buttons lie above. */
.rs-row__link::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
}

.rs-row__acts {
  position: relative;
  z-index: 1;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rs-row__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.rs-row--room {
  align-items: stretch;
}

.rs-thumb {
  flex: none;
  align-self: center;
  width: 132px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tag);
  background: var(--surface-2);
}

.rs-thumb svg,
.rs-set svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 560px) {
  .rs-thumb {
    width: 100%;
  }
}

.rs-kedit {
  display: grid;
  gap: var(--space-3);
  padding: 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.rs-kedit__h {
  font-size: 17px;
}

.rs-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rs-field > legend {
  margin-bottom: var(--space-2);
  padding: 0;
}

.rs-field .in:not(.mb-num) {
  width: 100%;
}

.rs-backdrop__img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  max-height: 270px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.rs-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* The primary button comes first in the form (Enter sends it), but stands on the right. */
.rs-btns__end {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rs-kedit .rs-btns__end {
  flex-direction: row;
}

/* Months and the room for rain only for a room outside. */
.rs-form .rs-outdoor {
  display: none;
}

.rs-form:has(input[name="is_outdoor"][value="1"]:checked) .rs-outdoor {
  display: grid;
}

.rs-more > summary {
  min-height: 36px;
  color: var(--ink-2);
  font-weight: 600;
  cursor: pointer;
}

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

.rs-band__svg {
  display: block;
  width: 100%;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tag);
}

.rs-band__gap {
  fill: var(--warn-soft);
}

.rs-band__set {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 0.4;
}

.rs-band__set--alt {
  fill: var(--gold);
}

.rs-band__set--cur {
  stroke: var(--ink);
  stroke-width: 0.8;
}

.rs-band__ax {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
}

.rs-sets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

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

.rs-next {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding-left: 20px;
}

/* --- Step 3 "Hinstellen": placing the tables of a set-up (ADR 0099) ------------------------- */

.rs-chips > form {
  display: contents;
}

.rs-chips .chip small {
  margin-left: 6px;
  color: var(--muted);
}

.rs-chips .chip[aria-current="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

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

.rs-sethead__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rs-ed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

@media (min-width: 900px) {
  .rs-ed {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  }
}

.rs-ed > * {
  min-width: 0;
}

.rs-status .pill {
  white-space: normal;
  height: auto;
}

.rs-ed__draw .rp {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.rp--setup [data-drag] {
  cursor: grab;
  touch-action: none;
}

.rp--setup [data-drag]:hover .rp-top,
.rp--setup [data-drag]:hover .rp-ar,
.rp--setup [data-drag]:hover .rp-st {
  stroke: var(--accent);
}

.rp-t--sel .rp-top,
.rp-a--sel .rp-ar,
.rp-a--sel .rp-st {
  stroke: var(--accent);
  stroke-width: 6;
}

.rs-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.rs-legend__i {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rs-legend__i::before {
  width: 22px;
  height: 12px;
  border: 3px solid var(--ink-2);
  border-radius: 3px;
  background: var(--surface);
  content: "";
}

.rs-legend__i--variable::before {
  border-style: dashed;
}

.rs-legend__i--off::before {
  opacity: 0.3;
}

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

.rs-panel {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface);
}

.rs-panel h3 {
  margin: 0;
}

.rs-arrows {
  display: flex;
  gap: var(--space-1);
}

.rs-arrows .button {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

.rs-btns--wrap {
  flex-wrap: wrap;
  justify-content: flex-start;
}

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

.rs-pal__b {
  display: grid;
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rs-pal__b:hover:not(:disabled) {
  border-color: var(--accent);
}

.rs-pal__b:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.rs-pal__b small {
  color: var(--muted);
}

.rs-pieces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-piece {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.rs-piece:hover,
.rs-piece[aria-current="true"] {
  border-color: var(--accent);
}

/* --- Mein Betrieb, Räume, step 3: the AI's proposal from a picture, to change (ADR 0128) ---- */

.rs-prows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-prow {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}
/* --- Mein Betrieb: "Speisen & Getränke" (business/catalog_page.py) ---------------------------- */

.ct-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.ct-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-5);
  align-items: start;
}

.ct-main,
.ct-side {
  min-width: 0;
}

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

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

.ct-tabrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ct-tabrow__g {
  flex: none;
  width: 88px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ct-tab small {
  color: var(--muted);
  font-weight: 500;
}

.ct-tab[aria-current="page"] small {
  color: inherit;
}

.ct-add {
  display: flex;
  justify-content: flex-end;
}

.ct-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--line);
}

.ct-strip > div {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}

.ct-strip dt {
  color: var(--muted);
  font-size: 12.5px;
}

.ct-strip dd {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ct-list,
.ct-arch {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--space-4);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.ct-row:hover {
  border-color: var(--line-2);
}

.ct-row__l,
.ct-row__r {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ct-row__r {
  justify-items: end;
  text-align: right;
}

.ct-row__m {
  color: var(--muted);
  font-size: 13.5px;
}

.ct-row__p {
  font-weight: 700;
  white-space: nowrap;
}

.ct-row__go {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.ct-tag--ok {
  border-color: transparent;
  background: var(--ok-soft);
  color: var(--ok);
}

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

.ct-edit {
  padding: var(--space-5);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.ct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

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

.ct-live {
  display: grid;
  gap: 4px;
}

.ct-more summary {
  min-height: 40px;
  font-weight: 600;
  cursor: pointer;
}

.ct-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.ct-acts__l {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ct-head form {
  margin: 0;
}

.ct-arch li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.ct-arch form,
.ct-side form {
  margin: 0;
}

.ct-newset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

/* Merging the import's copies of a drink: the preview lists each drink with its copies. */
.ct-merge__list,
.ct-merge__copies {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-merge__list > li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ct-merge__copies {
  gap: 2px;
  padding-left: 18px;
  list-style: disc;
}

.ct-merge .ct-acts {
  margin: 0;
}

@media (max-width: 900px) {
  .ct-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .ct-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ct-strip > div:last-child {
    grid-column: 1 / -1;
  }

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

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

  .ct-row__r {
    justify-items: start;
    text-align: left;
  }

  .ct-tabrow__g {
    width: 100%;
  }
}

/* The history of "Speisen & Getränke" (catalog_history.html): newest first, the changes of one
   order together; a change taken back is faded. */
.ct-hist {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-hrow {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.ct-hrow--off {
  opacity: 0.6;
}

.ct-hrow__at {
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.ct-hrow__body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ct-hrow__lines {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 15px;
}

.ct-batch {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-panel);
  background: var(--surface-2);
}

.ct-batch--ai {
  border-color: var(--st-4);
}

.ct-batch__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.ct-tag--ai {
  border-color: var(--st-4);
  color: var(--st-4);
}

/* "Heute von der KI geändert": the AI's orders of today, above the list. */
.ct-ai {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--st-4);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.ct-ai__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-ai__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  justify-content: space-between;
}

/* "Wartet auf deinen Klick": the AI's price jumps that wait for a person, above today's orders. */
.ct-wait {
  border-color: var(--gold);
}

.ct-wait__what {
  display: grid;
  gap: var(--space-1);
}

.ct-wait__do {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ct-batch:target {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .ct-hrow {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A new item that may be there already: the hint above "Speichern" with the items found. */
.ct-similar__list {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.2em;
}
/* --- My business: roles at the celebration (café audit C5) --------------------------------- */

.mb-wrow--off .mb-wrow__name {
  opacity: 0.6;
}

.mb-state {
  font-size: 14px;
  color: var(--muted);
}

.mb-state--off {
  font-weight: 600;
}
/* --- Accepting an inquiry: the box with the day, the guests and who looks after it ------------- */

.aq-facts {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.aq-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-4);
}

.aq-facts dt {
  color: var(--muted);
  font-size: 14px;
}

.aq-facts dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.aq-words {
  font-weight: 400;
  white-space: pre-line;
}

.aq-day {
  display: inline-block;
  margin: var(--space-1) 0;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
}

.aq-day--free {
  background: var(--ok-soft);
  color: var(--ok);
}

.aq-day--option,
.aq-day--partly {
  background: var(--warn-soft);
  color: var(--warn);
}

.aq-day--booked {
  background: var(--bad-soft);
  color: var(--bad);
}

.aq-same {
  display: grid;
  gap: 2px;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 400;
}

.aq-decline summary {
  cursor: pointer;
}

.aq-decline[open] summary {
  margin-bottom: var(--space-3);
}

@media (max-width: 600px) {
  .aq-facts > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
/* --- Groups of goods on the screen "Ingredients" ---------------------------------------------- */

/* The list of ingredients and "Change groups of goods" under it are one column of the split. */
.split > .picklist-col {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

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

/* Wide but low: the column stops sticking, like the list alone (14-phones.css). */
@media (max-height: 520px) and (min-width: 861px) {
  .split > .picklist-col {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.groups > summary {
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  cursor: pointer;
}

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

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

.group-row__name {
  flex: 1 1 9em;
  min-width: 0;
}

.group-row__count {
  flex: none;
}

.group-row--archived {
  justify-content: space-between;
}

/* A tick with its words beside it, as big as a finger. */
.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  cursor: pointer;
}
/* --- "Neue Anfrage daraus": a new inquiry from a mail of the inbox ------------------------------- */

.ib-new {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.ib-new .button {
  justify-self: start;
}

.nm-mail {
  margin-bottom: var(--space-5);
}

.nm-mail__subject {
  margin: 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.nm-mail__filled {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-note);
  background: var(--accent-soft);
  color: var(--ink);
}

.nm-mail__filled .icon {
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

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

.nm-match__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
  background: var(--surface);
  cursor: pointer;
}

.nm-match__row:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.nm-match__row input {
  margin-top: 3px;
}

.nm-match__row span {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ev-actions-end:has(.lnk) {
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.ev-actions-end .lnk {
  margin-right: auto;
}
/* --- "So zählt die Küche" on the screen "Ingredients" (count units, spoons) ------------------ */

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

/* One row: "1 Bund wiegt [40] g [Entfernen]"; wraps on a phone, the note on its own line. */
.count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}

.count-row__label {
  font-weight: 650;
}

.count-row__missing {
  flex-basis: 100%;
  margin: 0;
  color: var(--bad);
  font-size: 14px;
  font-weight: 700;
}

.count-row__missing:empty {
  display: none;
}

.count-list,
.count-examples__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: 18px;
}

.count-examples {
  padding: var(--space-3);
  border-radius: var(--radius-note);
  background: var(--sel);
}

.count-examples:empty {
  display: none;
}

/* "3 Bund Petersilie" and, after the name, what it weighs: "= 120 g". */
.lines__same {
  color: var(--muted);
  font-size: 14px;
}
/* Where the cost of goods of each dish comes from, in the costing of step 3 (ADR 0037). */
.ev-goods summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.ev-goods__list {
  display: grid;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.ev-goods__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}

.ev-goods__name {
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .ev-goods__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}
/* --- Menü: "Aufteilung des Hauptgangs" as figures, without names (events/menu/_split.html) ---- */

.ev-split {
  display: grid;
  gap: var(--space-2);
  margin: 8px 0 2px 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
}

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

.ev-split__form,
.ev-split__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-split__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.ev-split__nm {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ev-split__in {
  width: 6em;
  text-align: right;
}

.ev-split__sum {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 0;
  font-size: 14px;
}

.ev-split__sum--ok {
  color: var(--ok);
}

.ev-split__sum--warn {
  padding: 6px 8px;
  border: 1px solid var(--warn);
  border-radius: var(--radius-note);
  background: var(--warn-soft);
}

.ev-split__saved {
  color: var(--ok);
}

@media (max-width: 600px) {
  .ev-split {
    margin-left: 0;
  }
}

/* The kitchen's print of the table plan: the main courses in all (events/table_plan/print.html). */

.tp-pmains {
  break-inside: avoid;
}

.tp-pmains__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  font-size: 16px;
}

/* Seats and figures together: what counts after the seats took their share. */

.ev-split__counted {
  margin: 0;
}
/* --- The staff table in the costing of the offer step (web/events/views/staff_plan.py) ------ */

.ev-staff {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.ev-staff__t th,
.ev-staff__t td {
  padding: 6px 8px;
  vertical-align: middle;
  white-space: nowrap;
}

.ev-staff__t tbody th {
  white-space: normal;
}

/* A role nobody works in at this celebration steps back. */
.ev-staff__off th,
.ev-staff__off td.num {
  color: var(--muted);
}

.ev-staff__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
/* --- The history of an event ("Verlauf") ------------------------------------------------------ */

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

.hv-day + .hv-day {
  margin-top: var(--space-5);
}

.hv-day__t {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 650;
}

.hv-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hv-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.hv-row--mail_out,
.hv-row--edit {
  background: var(--surface-2);
}

.hv-row__main {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.hv-row__sub {
  color: var(--ink-2);
  font-size: 14px;
}

.hv-row__side {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hv-row__when {
  color: var(--ink-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .hv-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hv-row__side {
    grid-column: 2;
    justify-content: space-between;
  }
}
/* --- Screen "Suppliers": the next deliveries and the day each order must be in ----------------- */

.deliveries {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deliveries__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  background: var(--surface);
}

/* Too late to order for this delivery: said in words, the tint only helps. */
.deliveries__row--late {
  color: var(--muted);
  background: transparent;
}
/* Offer step: the versions sent, each with "Load as working draft" (ev-kalk gives the card). */
.ev-sent__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
}

.ev-sent__row + .ev-sent__row {
  border-top: 1px solid var(--line);
}

.ev-sent__what {
  margin: 0;
}

.ev-sent__load {
  flex: 1 1 22rem;
  max-width: 36rem;
}

.ev-sent__load > summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.ev-sent__load > summary::-webkit-details-marker {
  display: none;
}

.ev-sent__load > form {
  margin-top: var(--space-3);
}

.ev-sent__changes {
  margin: var(--space-2) 0 0;
  padding-left: 1.2em;
}
/* --- Calendar → "Kalender abonnieren": the secret link and how to use it ---------------------- */

.cs-card + .cs-card {
  margin-top: var(--space-5);
}

.cs-link {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 14px;
}

.cs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cs-actions form {
  margin: 0;
}

.cs-steps {
  margin: var(--space-3) 0;
  padding-left: var(--space-6);
}

.cs-steps li + li {
  margin-top: var(--space-2);
}
/* --- Reminders to the customer in "Wartet auf dich" (SOLL-IST no. 29) ---------------------- */

/* The row has its own button, so it is not one link as the other rows of the box are. */
.ev-wait__item--act {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.ev-wait__text {
  display: grid;
  gap: 2px;
  color: var(--ink);
  text-decoration: none;
}
/* --- Choosing a business after a login on the start page (ADR 0111) --------------------------- */
/* One full-width button per business; long names wrap instead of running out of the column. */
.tenant-choice {
  display: grid;
  gap: var(--space-4);
}

.tenant-choice .button {
  justify-content: flex-start;
  width: 100%;
  padding-block: 12px;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Small fixes from the click-throughs 2 and 3. */

/* A done thing in a line of text ("bezahlt am ..."). */
.ok-text {
  color: var(--ok);
}

/* Standard categories ("Speisen & Arten"): the column "Bei welcher Art?" wraps its buttons
   instead of running out of the table, and the title field takes less width. */
.mb-cats__kinds {
  flex-wrap: wrap;
}

.mb-cats__kinds .chip {
  white-space: nowrap;
}

.mb-cats__title {
  width: 10em;
}
/* "Küche einrichten", step 2: split dishes into recipes and ingredients (concept K7). */
.split-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.split-group {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

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

.split-run--current {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  background: var(--sel);
}

.split-start,
.split-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.split-head {
  justify-content: space-between;
}

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

.split-part--struck .split-part__name,
.split-line--struck {
  text-decoration: line-through;
  color: var(--muted);
}

.split-lines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.split-line {
  min-height: 44px;
}

.split-ingredient {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.split-sign-row {
  margin: 0;
  padding: 0;
  border: 0;
}

/* The radios of "sign all 14": the chosen state looks like a pressed button. */
.split-sign-row .states__item {
  cursor: pointer;
}

.split-sign-row .states__item input {
  position: absolute;
  opacity: 0;
}

.split-sign-row .states > .states__item:first-child {
  border-left: 0;
}

.split-sign-row .states__item:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.split-sign-row .states__item--contains:has(input:checked) {
  background: var(--ink);
  color: var(--bg);
}

.split-sign-row .states__item--traces:has(input:checked) {
  background: var(--line-2);
  color: var(--ink);
}

.split-sign-row .states__item--free:has(input:checked) {
  background: var(--ok);
  color: var(--btn-ink);
}
/* --- "Küche einrichten": the five steps and step 1, dishes from the menu --------------------- */

.setup-steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.setup-step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.setup-step--later {
  background: var(--surface-2);
}

.setup-step__no {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-weight: 700;
}

.setup-step__body {
  display: grid;
  flex: 1;
  gap: var(--space-2);
  min-width: 0;
}

.setup-step__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.setup-step__title,
.setup-h {
  margin: 0;
  font-size: 17px;
}

.setup-step__body p {
  margin: 0;
}

.setup-waiting {
  color: var(--warn);
}

.setup-table {
  max-width: 460px;
}

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

.setup-made form {
  margin: 0;
}

.setup-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  scroll-margin-top: 96px;
}

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

.setup-row p {
  margin: 0;
}

.setup-row__top,
.setup-row__res,
.setup-row__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.setup-row__acts form {
  margin: 0;
}

.setup-row__edit {
  display: grid;
  gap: var(--space-2);
  max-width: 560px;
}

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

/* The block "Küche" under an open row of "Speisen & Getränke". */
.ct-kitchen {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
/* Run and room of an offer on the customer's page (ADR 0091, ADR 0079): the same parts as the
   offer's screen page, in the page's colours; the drawing shrinks to the phone's width. */
.op-run,
.op-room {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--cl-line);
}

.op-run h3 {
  margin: 0 0 4px;
  color: var(--cl-brand);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.op-run .sch-sheet {
  table-layout: auto;
  overflow-wrap: anywhere;
}

/* The sheet takes its colours from the screen's variables, which the customer's page does not
   define: here they follow the house's colours (`--cl-*`). */
.op-run .sch-sheet th,
.op-run .sch-sheet td,
.op-run .sch-sheet__x {
  border-color: var(--cl-line);
}

.op-run .sch-sheet th,
.op-run .sch-sheet .s,
.op-run .sch-sheet__h,
.op-run .sch-sheet__x,
.op-run .sch-sheet__int td {
  color: var(--cl-mute);
}

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

.op-room .ev-sec {
  margin: 0;
  color: var(--cl-brand);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: left;
}

.op-room .ev-paper-mute {
  color: var(--cl-mute);
  text-align: left;
}

.op-room .ev-room-sub,
.op-room .ev-room-note {
  text-align: left;
}

.op-room .ev-room-plan {
  min-width: 0;
}
/* The room of the offer on the screen (ADR 0079): the drawing without a name, like the PDF. */
.ev-room {
  display: grid;
  gap: 6px;
}

.ev-room-sub,
.ev-room-note {
  margin: 0;
  font-size: 0.85em;
  text-align: center;
}

.ev-room-plan svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
}
/* --- Help (docs/ui.md, "Help") ------------------------------------------------------------- */

.topbar__help {
  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;
  text-decoration: none;
}

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

.help-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.help-form .in {
  flex: 1 1 260px;
}

.help-answer {
  font-size: 18px;
}

.help-card__title {
  margin: 0;
}

.help-card__acts {
  margin: 0;
}

.help-steps {
  margin: 0;
  padding-left: 1.4em;
}

.help-steps li + li {
  margin-top: var(--space-2);
}

.help-text {
  max-width: 70ch;
}

.help-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-list__link {
  display: block;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.help-list__link:hover {
  border-color: var(--accent);
}
/* "Rechnungen" and "Rechnung prüfen" (kitchen concept K9). */
.invoice-upload {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.invoice-upload__drop {
  display: grid;
  flex: 1 1 280px;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 2px dashed var(--line);
  border-radius: var(--radius-panel);
  cursor: pointer;
}

.invoice-upload__drop input {
  max-width: 100%;
}

.invoice-list {
  display: grid;
  gap: 0;
  padding: 0;
}

.invoice-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.invoice-row:last-child {
  border-bottom: 0;
}

.invoice-row__who {
  display: grid;
  min-width: 0;
  overflow-wrap: anywhere;
}

.invoice-row__amount {
  text-align: right;
  white-space: nowrap;
}

.invoice-row__act {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .invoice-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .invoice-row__amount {
    text-align: left;
  }
}

.invoice-line {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.invoice-line--open {
  border-left: 4px solid var(--warn);
}

.invoice-line__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  justify-content: space-between;
}

.invoice-line__text {
  overflow-wrap: anywhere;
}

.invoice-decide {
  display: grid;
  gap: var(--space-1);
}

.invoice-form {
  display: grid;
  gap: var(--space-2);
  max-width: 560px;
  padding: var(--space-2) 0;
}

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

.invoice-pack legend {
  padding: 0;
  margin-bottom: var(--space-1);
}

.invoice-pack input {
  width: 8em;
}

.invoice-sum {
  display: grid;
  gap: var(--space-1);
  max-width: 480px;
  margin: 0;
}

.invoice-sum div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.invoice-sum dd {
  margin: 0;
  white-space: nowrap;
}

.invoice-sum__total {
  padding-top: var(--space-1);
  border-top: 1px solid var(--line);
  font-weight: 600;
}

.invoice-gives,
.invoice-prices {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-4);
}
/* --- "Küche einrichten", step 4: missing recipes and "Rezept stimmt" ----------------------- */

.tag--ok {
  border-color: transparent;
  background: var(--ok-soft);
  color: var(--ok);
}

.confirm {
  scroll-margin-top: 96px;
}

.confirm p {
  margin: 0;
}

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

.confirm__forms form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
/* --- Kitchen: "Heute bestellen" and "Bestellung einer Feier" (concept K19) ------------------- */

.ord-list {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

/* One order: a supplier and a delivery day. The overdue ones are red, today's ones amber. */
.ord {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

.ord--late {
  border-color: var(--bad);
  border-width: 2px;
  background: var(--bad-soft);
}

.ord--today {
  border-color: var(--warn);
  border-width: 2px;
}

.ord__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2) var(--space-4);
}

.ord__title {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.ord__lines {
  display: grid;
  min-width: 0;
}

.ord__line {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.ord__alt {
  grid-column: 1 / -1;
}

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

.ord__line--head {
  padding: 0 0 var(--space-2);
  border-top: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.ord__num {
  text-align: right;
}

.ord__label {
  display: none;
}

.ord__text {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-note);
  font: inherit;
  white-space: pre-wrap;
  user-select: all;
}

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

.ord__actions form {
  margin: 0;
}

.ord-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
}

.ord-days label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ord-events {
  display: grid;
  min-width: 0;
}

.ord-events__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.ord-events__row:first-child {
  border-top: 0;
}

/* Rest days are grey: the day is there, but the kitchen does not work. */
.ord-rest {
  color: var(--muted);
}

@media (max-width: 640px) {
  .ord {
    padding: var(--space-4);
  }

  .ord__line {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .ord__line--head {
    display: none;
  }

  .ord__num {
    text-align: left;
  }

  .ord__label {
    display: inline;
    color: var(--muted);
  }
}

@media print {
  .ord__actions,
  .ord-events,
  .kitchen-nav {
    display: none;
  }

  .ord {
    break-inside: avoid;
    border-color: var(--line-2);
    background: transparent;
  }
}
/* "Was ihr einkauft" (kitchen concept K11). */
.purchase-table {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.purchase-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.8fr) minmax(0, 2.2fr);
  gap: var(--space-1) var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.purchase-row:last-child {
  border-bottom: 0;
}

.purchase-row--head {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 650;
}

.purchase-group {
  padding: var(--space-1) var(--space-4);
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 650;
}

.purchase-articles {
  display: grid;
  gap: var(--space-1);
}

.purchase-article {
  display: grid;
  gap: 1px;
  padding-top: var(--space-1);
  border-top: 1px dashed var(--line);
}

.purchase-article:first-child {
  padding-top: 0;
  border-top: 0;
}

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

.purchase-never {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-5);
}

@media (max-width: 760px) {
  .purchase-row {
    grid-template-columns: 1fr;
  }

  .purchase-row--head {
    display: none;
  }

  .purchase-row > [data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
  }
}
/* The head and foot of the A4 pages of offer and order confirmation as the PDF prints them:
   the house's logo, name, address and footer (the colours and fonts come from
   ``events:document_look_css``). */

.ev-lh__img {
  flex: none;
  max-width: 14em;
  max-height: 5.2em;
  object-fit: contain;
}

.ev-hn span {
  display: block;
  color: var(--paper-mute);
  font-size: 0.8em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ev-ft--cols {
  display: flex;
  gap: 1.6em;
  text-align: left;
}

.ev-ft--cols > div {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ev-ft--cols span {
  display: block;
}

.ev-ft--cols b {
  display: block;
  color: var(--paper-ink);
}
/* Several offers of one event (owner 01.11.2026): the tabs "Angebot 1 · Klassisch", the form
   "Weiteres Angebot anlegen" and the box "Versenden" of the step Offer. */
.ev-otabs {
  display: grid;
  gap: 6px;
}

.ev-otabs__what {
  color: var(--ink-2);
}

.ev-otabs__chosen {
  border-color: var(--accent);
  color: var(--ink);
}

.ev-otabs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}

.ev-oadd > summary {
  list-style: none;
  cursor: pointer;
}

.ev-oadd > summary::-webkit-details-marker {
  display: none;
}

.ev-oadd[open] > summary {
  margin-bottom: 10px;
}

.ev-oadd__form {
  max-width: 560px;
}

.ev-send__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
/* The slot of the note at the foot of the menu (#514): it takes no room in the step's grid, so
   the step looks the same with and without a note, and a change can swap the note alone. */
.ev-toasts {
  display: contents;
}

/* A click that answers with a part only (#514) puts its note first: a note left from before
   is hidden, as if the page had been loaded again. */
.messages ~ .messages,
#tp-step > .ev-toast ~ .ev-toast {
  display: none;
}

/* The slots of the table plan's list (#514): a part that may be there or not (the guests
   without a seat, the cancellations) or that a click swaps alone (a table's head, the note
   "this table is full") stands in a slot without a box of its own, so the list looks the same
   with or without the slot's content and keeps its gaps. */
.tp-slot {
  display: contents;
}

/* The same for the customer's page of the table plan: its slots (the notes, the guests without
   a seat, a table's head, the note "this table is full") take no box of their own. */
.cl-slot {
  display: contents;
}
/* --- Phone layout sweep (390 px): fixes found by walking every main screen ------------------- */

/* A scrolling table keeps its hidden labels inside: the absolutely positioned "visually hidden"
   header text of a far right column otherwise sat outside the panel and made the whole page
   scroll sideways (Mein Betrieb, "Speisen & Arten"). */
.table-wrap {
  position: relative;
}

/* The kitchen steps ("Woche, Tage, Bestellen, Heute") stay inside the grid of the plan page. */
.production > *,
.kitchen-nav {
  min-width: 0;
}

/* The staff table plan: its cards never grow wider than the screen. The long button "Neuer Link
   (der alte geht dann nicht mehr)" does not wrap by default, so it made the card 401 px wide on a
   390 px phone and the page scrolled sideways. */
.tp > * {
  min-width: 0;
}

.tp-link__acts form,
.tp-link__acts .button {
  max-width: 100%;
}

.tp-link__acts .button {
  height: auto;
  padding-block: 8px;
  white-space: normal;
}

/* Touch targets: on a phone every button, chip, tab and link is at least 44 px high (they were
   32 to 42 px). Only below 700 px, so the dense desktop screens stay as they are. */
@media (max-width: 700px) {
  .button--sm,
  .chip,
  .chip--sm,
  .ev-chip,
  .seg__item,
  .ev-steps__tabs .ev-step,
  .in--sm,
  a.lnk,
  button.lnk {
    min-height: 44px;
  }

  .icon-button {
    width: 44px;
    height: 44px;
  }

  /* The little switch keeps its look; its touch area grows around it. */
  .mb-switch::before {
    position: absolute;
    inset: -6px -4px;
    content: "";
  }
}

/* The customer's links ("So geht's", "AGB lesen") were plain text lines of 18 to 22 px. */
.cl-help,
.cl-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The sum bar of the menu and offer ("pro Erwachsenem / Gesamt / Anzahlung") on a phone: the three
   figures share the width, their labels wrap instead of running into the next figure. */
@media (max-width: 520px) {
  .ev-sbar__in {
    align-items: flex-end;
  }

  .ev-sbar__fig {
    flex: 1 1 0;
    align-content: end;
  }

  .ev-sbar__fig span {
    font-size: 12px;
    white-space: normal;
  }

  .ev-sbar__fig span small {
    display: inline;
  }

  .ev-sbar__fig b {
    font-size: 15px;
  }
}

/* Mein Betrieb on a phone: the five areas sit in two columns, all in view. As a sideways strip only
   the first one and a half showed, and the open area (for example "Geld & Regeln") could be
   out of sight. The one-line hint under the name is dropped; the "Hier:" line says it. */
@media (max-width: 760px) {
  .mb-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .mb-tab {
    min-width: 0;
  }

  .mb-tab small {
    display: none;
  }

  .mb-tab .pill {
    white-space: normal;
  }
}

/* "Einrichtung eures Hauses: 2 von 5 ...": the button goes below the text, not beside a
   four-word column. */
@media (max-width: 520px) {
  .mb-guide {
    flex-wrap: wrap;
  }

  .mb-guide > span {
    flex: 1 1 12rem;
  }
}

/* The steps of the kitchen ("Zutaten, Rezepte, Gerichte, Lieferanten" and "Woche, Tage, Bestellen,
   Heute") sit in two columns on a phone. As a sideways strip the fourth one was cut off with no
   hint that it scrolls. */
@media (max-width: 700px) {
  .kitchen-nav .seg {
    display: grid;
    flex: 1 1 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    border-radius: var(--radius-panel);
  }

  .kitchen-nav .seg__item {
    justify-content: center;
  }
}

/* A list with nothing in it shows no empty white box above the "nothing yet" note. */
.picklist:not(:has(a, button, li)) {
  display: none;
}
/* The order the tables as needed of a set-up are filled in (#264), step 3 of a room in "Mein
   Betrieb": the place a table was tapped for is a number on the table in the drawing; the tables
   tapped so far are listed beside it. */

.rp-t--ordered .rp-tlab {
  display: none;
}

.rp-ord circle {
  fill: var(--accent);
}

.rp-ord text {
  fill: var(--accent-ink);
}

.rs-order__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-4);
}

.rs-order__list b {
  display: inline-block;
  min-width: 1.5em;
}
/* "Tischplan einfach", part A: the two steps of the customer's link, the figures of the main
   courses with free seating (link and house) and the switch's card. Tokens only. */

.cl-tabs a span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cl-tabs small {
  font-size: 0.875rem;
  font-weight: 400;
}

.cl-confirm p,
.cl-confirm h2 {
  margin: 0;
}

.cl-crow,
.tp-crow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.cl-crow label,
.tp-crow label {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.cl-in--num,
.in--num {
  flex: 0 0 110px;
  width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tp-free__h {
  margin: 0;
}
/* "Preise": price notices and the price history (kitchen concept K12). */
.price-threshold {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.price-threshold button.chip {
  font: inherit;
  cursor: pointer;
}

.price-warn {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bad);
  border-radius: var(--radius-control);
}

.price-warn__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  justify-content: space-between;
}

.price-warn__head p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.price-warn__cheaper {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

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

/* Falls and what was seen: calm lines, no warning colour (F74 a). */
.price-calm {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-calm li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.price-calm li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

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

.price-pick select {
  flex: 1 1 240px;
  max-width: 100%;
  min-height: 44px;
}
/* --- The recipe book (K15): choose, read online ------------------------------------------- */

.book-chapter {
  gap: var(--space-2);
}

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

.book-row--off .book-row__name {
  color: var(--muted);
  cursor: default;
}

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

.book-bar__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.book-bar p {
  margin: 0;
}

/* The pages to read: large type for a tablet at the stove. */
.book-page {
  font-size: 17px;
  scroll-margin-top: 96px;
}

.book-page h2 {
  margin: 0;
  font-size: 26px;
}

.book-page header p {
  margin: 0;
}

.book-makes {
  color: var(--ink-2);
}

.book-table td,
.book-table th {
  padding: var(--space-3) var(--space-2);
}

.book-sub td {
  font-weight: 650;
}

.book-in td:first-child {
  padding-left: var(--space-6);
}

.book-text {
  margin: 0;
  white-space: pre-line;
}

.book-allergens p {
  margin: 0;
}

.book-warn {
  color: var(--allergy);
}
/* --- Screen "Shopping list": rows of what to make, then what to order per supplier ------------ */

.shop-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(5em, 0.6fr) minmax(5em, 0.7fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: end;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.shop-row:last-of-type {
  border-bottom: 0;
}

.shop-row__fixed {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.shop-row__error {
  grid-column: 1 / -1;
  margin: 0;
}

/* The labels of a row are read by screen readers; the first row names them for the eye. */
.shop-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.shop-row:first-of-type .shop-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.shop__title {
  margin: 0;
}

.shop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}

.shop-head h2 {
  margin: 0;
}

.shop-gaps {
  margin: 0;
  padding-left: 18px;
}

.shop-supplier {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--surface);
}

.shop-supplier > header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-weight: 650;
}

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

.shop-item {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
  gap: 2px var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.shop-item:last-child {
  border-bottom: 0;
}

.shop-item small {
  display: block;
  color: var(--muted);
}

.shop-item__order,
.shop-item__price {
  font-variant-numeric: tabular-nums;
}

.shop-item__price {
  text-align: right;
  white-space: nowrap;
}

.shop-hint {
  margin: 0;
  padding: var(--space-2) var(--space-4);
}

.shop-staples {
  padding: var(--space-2) var(--space-4);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-panel);
}

.shop-for {
  display: none;
  margin: 0;
}

@media (max-width: 640px) {
  .shop-row {
    grid-template-columns: 1fr 1fr;
  }

  .shop-row__what {
    grid-column: 1 / -1;
  }

  .shop-item {
    grid-template-columns: 1fr;
  }

  .shop-item__price {
    text-align: left;
  }
}

@media print {
  .shop-form {
    display: none !important;
  }

  .shop-for {
    display: block;
  }

  .shop-supplier {
    break-inside: avoid;
    border-color: #000000;
  }

  .shop-staples {
    border-color: #000000;
  }
}
/* --- Phone findings, round 2 (390 px): the day cell of the calendar is the target, the title
   change of a course has a word and a 44 px target, labels on a drawn room stay readable. ----- */

.ev-day__go {
  display: none;
}

/* The bars are tiny: on a phone the whole day cell opens the event (one) or the week (several);
   the free part of an empty day still starts a new event. */
@container (max-width: 520px) {
  .ev-day__go {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
  }
}

.ev-title > summary {
  gap: 6px;
}

/* "Anzahlung 30 %" never breaks inside. */
.ev-sbar__dep span {
  white-space: nowrap;
}

@media (pointer: coarse), (max-width: 700px) {
  .ev-title > summary {
    min-height: 44px;
  }
}

/* A label of the drawn room is at least 12 screen pixels: rp-min-text.js sets --rp-min (the
   units of 12 pixels) on each drawing. Without the script the drawn size stays. The labels of the
   tables are not made larger here but drawn for the phone by the server (``rp-tlab--phone``,
   43-phone-table-plan-display.css): a label larger than its table ran over the chairs. */
@media (max-width: 700px) {
  .rp-alab {
    paint-order: stroke;
    stroke: var(--surface);
    stroke-linejoin: round;
    stroke-width: calc(var(--rp-min, 0px) * 0.3);
    font-size: max(28px, var(--rp-min, 0px));
  }
}

/* The total bar: the total on top, the figures per adult and the deposit below, the button at the
   side; nothing runs into anything. The words of a figure stay together ("Anzahlung 30 %"). */
@media (max-width: 700px) {
  .ev-sbar__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 4px var(--space-4);
  }

  .ev-sbar__tot {
    order: -1;
    grid-column: 1 / 3;
  }

  .ev-sbar__go {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    height: 44px;
  }
}

/* The bar of the open event, shortened on a phone: name, then day, state and "Mehr" in one row.
   Number, time, guests, kind, "Duplizieren" and when it was saved wait behind "Mehr". Without
   :has() support the bar stays as on a large screen. */
.ev-bar__toggle,
.ev-bar__date--short {
  display: none;
}

@media (max-width: 700px) {
  .ev-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px 12px;
  }

  .ev-bar__main,
  .ev-bar__meta {
    display: contents;
  }

  .ev-bar__name {
    grid-column: 1 / -1;
    font-size: 19px;
  }

  .ev-bar__date--long {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ev-bar__date--short {
    display: inline;
    grid-column: 1;
    color: var(--muted);
    font-size: 14px;
  }

  .ev-bar__toggle {
    display: block;
  }

  .ev-bar__toggle > summary {
    list-style: none;
    min-height: 44px;
  }

  .ev-bar__toggle > summary::-webkit-details-marker {
    display: none;
  }

  .ev-bar__toggle > summary::after {
    content: "▾";
  }

  .ev-bar__toggle[open] > summary::after {
    content: "▴";
  }

  .ev-bar:has(.ev-bar__toggle:not([open])) .ev-bar__more-info,
  .ev-bar:has(.ev-bar__toggle:not([open])) .ev-bar__dup,
  .ev-bar:has(.ev-bar__toggle:not([open])) .ev-bar__more,
  .ev-bar:has(.ev-bar__toggle:not([open])) .saved {
    display: none;
  }

  .ev-bar__more-info {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 14px;
  }

  .ev-bar__dup {
    grid-column: 1 / -1;
    justify-self: start;
    margin-left: 0;
  }

  .ev-bar .saved {
    grid-column: 1 / -1;
  }

  /* The route of steps: smaller pills; the tabs beside it in one row to swipe, fading out at the edge. */
  .ev-steps {
    gap: 6px;
  }

  .ev-step {
    min-height: 40px;
    gap: 6px;
    padding: 0 12px 0 6px;
    font-size: 14px;
  }

  .ev-step__n {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .ev-steps__tabs {
    flex-wrap: nowrap;
    flex-basis: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .ev-steps__tabs .ev-step {
    min-height: 36px;
  }
}

/* In the opened bar each part has its row: the dot in front of it goes. */
@media (max-width: 700px) {
  .ev-bar__sep--lead {
    display: none;
  }
}
/* "Tischplan einfach", part B: tables as cards with a line per seat (the customer's link and the
   house's list), "Mehr" at a guest, a table left out, the room view behind "Raumplan". Tokens
   only. */

@media (min-width: 820px) {
  .cl-plan .sv {
    max-height: calc(100vh - 120px);
  }
}

/* --- The customer's link ---------------------------------------------------------------- */

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

.cl-tc {
  gap: 8px;
}

.cl-tc__h {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  min-height: 44px;
  color: var(--cl-ink);
  text-decoration: none;
}

.cl-tc__go {
  margin-left: auto;
  color: var(--cl-brand);
  font-weight: 600;
}

.cl-nrows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-nrow {
  padding-top: 8px;
  border-top: 1px solid var(--cl-line);
}

.cl-nrow__f {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cl-nrow__no {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--cl-line);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
}

.cl-nrow__name {
  flex: 1 1 180px;
}

.cl-nrow__menu {
  flex: 1 1 150px;
}

.cl-more,
.cl-drop {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--cl-line);
  border-radius: 10px;
  background: var(--surface-2);
}

.cl-more {
  margin-top: 8px;
}

.cl-drop {
  margin-top: 12px;
}

.cl-drop h3 {
  margin: 0;
  font-size: 16px;
}

.cl-drow {
  display: grid;
  gap: 4px;
}

.cl-effects {
  margin: 0;
  padding-left: 20px;
}

.cl-tname--row {
  margin-bottom: 8px;
}

/* --- The house's list -------------------------------------------------------------------- */

.tp-tcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: var(--space-4);
  align-items: start;
}

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

.tp-tc__h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.tp-tc__b {
  display: flex;
  flex: 1 1 200px;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.tp-tc__go {
  margin-left: auto;
  color: var(--accent);
  font-weight: 600;
}

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

.tp-nrow {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}

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

.tp-nrow__no {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px dashed var(--line-2);
  border-radius: 50%;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.tp-nrow--named .tp-nrow__no {
  border-style: solid;
  color: var(--ink);
}

.tp-nrow__name {
  flex: 1 1 160px;
}

.tp-nrow__menu {
  flex: 1 1 140px;
}

.tp-nrow__more {
  margin-top: var(--space-1);
}

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

.tp-lcard .tp-glist li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

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

.tp-drop h3 {
  margin: 0;
  font-size: 16px;
}

.tp-drow {
  display: grid;
  gap: var(--space-1);
}

/* The room view behind "Raumplan" shows the drawing on every width. */
@media (max-width: 819.98px) {
  .tp-desk.tp-desk--room {
    display: block;
  }
}
/* "Delete event" sits in the one "More" of the bar: a menu on a large screen, and a plain link
   behind the bar's "Mehr" on a phone. */
.ev-bar__delete {
  display: none;
}

@media (max-width: 700px) {
  .ev-bar__menu {
    display: none;
  }

  .ev-bar__delete {
    display: inline-flex;
    grid-column: 1 / -1;
    justify-self: start;
  }

  .ev-bar:has(.ev-bar__toggle:not([open])) .ev-bar__delete {
    display: none;
  }
}
/* "Geändert seit der Bestätigung": dishes the kitchen changed after the event was confirmed
   (ADR 0130), with the two buttons under the text. */
.dv {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.dv .alert p {
  margin: 0;
}

.dv__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
/* The production calendar (K21): cards on days, dragged onto another day. */

.dayc--rest {
  background: var(--surface-2);
  border-style: dashed;
  color: var(--muted);
}

.dayc.is-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--sel);
}

.ditem[draggable="true"] {
  cursor: grab;
}

.ditem.is-dragging,
.part.is-dragging {
  opacity: 0.5;
}

.ditem:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

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

.ditem--bad {
  border-color: var(--bad);
}

.ditem__line,
.ditem__keeps {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}

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

.ditem__note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 0;
  padding: 4px 8px;
  border-radius: var(--radius-note);
  font-size: 14px;
}

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

.ditem__note--bad {
  background: var(--bad-soft);
  color: var(--ink);
}

.ditem__note .icon {
  flex: none;
  margin-top: 2px;
}

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

.part {
  display: flex;
  gap: 6px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-tag);
  background: var(--surface);
  font-size: 14px;
}

.part[draggable="true"] {
  cursor: grab;
}

.part__label {
  overflow-wrap: anywhere;
}

.part__amount {
  font-weight: 600;
  white-space: nowrap;
}

.ditem__form select.in {
  min-height: 44px;
  max-width: 100%;
}

/* "Heute" on the phone (D): which station, and by when a card must be ready. */
.today-posts {
  flex-wrap: wrap;
}

.todo__ready {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: var(--ink-2);
  font-weight: 600;
}
/* --- The drawn room on a phone (390 px): a table's label stays inside its table at a size that
   can be read, the names of the guests wait for the zoom, paper stays light. -------------------- */

/* The label of a table for a phone (room_drawing.fit_label_phone): at least 12 screen pixels and
   inside the table, so it may be only the table's number. It stands beside the label of the
   large screens (``rp-tlab--desk``), which a phone does not show. The attribute display="none"
   keeps it out of the PDF, which does not read this sheet. */
@media (max-width: 700px) {
  .rp-tlab--phone {
    display: inline;
  }

  .rp-tlab--desk {
    display: none;
  }

  /* Zoomed in (table-plan.js) the drawn label is large enough again. */
  .rp--zoomed .rp-tlab--phone {
    display: none;
  }

  .rp--zoomed .rp-tlab--desk {
    display: inline;
  }
}

/* Paper keeps the large label and is never dark: no halo of the screen's colour round a text. */
.tp-paper .rp-tlab--phone {
  display: none;
}

.tp-paper .rp-tlab--desk {
  display: inline;
}

.tp-paper .rp-alab {
  stroke: #ffffff;
}

/* The names beside the chairs are 5 to 7 pixels on a phone: unreadable and over each other. The
   guests' list below the drawing carries them; zoomed in they come back. */
@media (max-width: 700px) {
  .rp--guests .rp-nm {
    display: none;
  }

  .rp--guests.rp--zoomed .rp-nm {
    display: inline;
  }
}

/* --- Targets of at least 44 px and words beside symbols (house list, customer link) ---------- */

/* The "!" of a guest with an allergy says its word, beside the Save button of the seat. */
.tp-alb {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: auto;
  padding: 2px 8px;
  white-space: nowrap;
}

.cl-bang {
  gap: 4px;
  width: auto;
  height: auto;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
  white-space: nowrap;
}

/* The handle of a guest says "Ziehen"; the pencil is a button that says "Bearbeiten". */
.tp-gr {
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
}

.tp-grip {
  align-content: center;
  width: 44px;
  gap: 2px;
  font-size: 12px;
  line-height: 1;
}

.tp-grip__t {
  font-size: 12px;
}

.tp-gr .tp-edit {
  gap: 6px;
  width: auto;
  white-space: nowrap;
}

/* The seat number is the label of the name field: the circle stays small, the label around it is
   44 px (the house's list and the customer's list). */
.tp-nrow__no,
.cl-nrow__no {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
}

.tp-nrow__no > span[aria-hidden],
.cl-nrow__no > span[aria-hidden] {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px dashed var(--line-2);
  border-radius: 50%;
}

.cl-nrow__no > span[aria-hidden] {
  border: 1px solid var(--cl-line);
}

.tp-nrow--named .tp-nrow__no > span[aria-hidden] {
  border-style: solid;
  color: var(--ink);
}

/* The list of guests without a seat is the page's own: no box with a scroll bar of its own. */
.tp-lcard .tp-glist {
  max-height: none;
  overflow: visible;
}

/* "Mehr" at a guest of the customer's link is a target of its own, not squeezed to the card's edge. */
.cl-nrow__more {
  justify-content: center;
  min-width: 44px;
  padding-inline: 8px;
}

@media (max-width: 700px) {
  /* Every opening line of a fold is 44 px high. */
  .tp-more > summary,
  .tp-link__allow > summary {
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 10px;
  }

  .ev-stmenu > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The route of steps and its tabs: 44 px, as everything else a finger taps. */
  .ev-step,
  .ev-steps__tabs .ev-step {
    min-height: 44px;
  }

  /* A guest of the list: name and where below each other, the handle and "Bearbeiten" at the sides,
     so no name is cut to "Ohne Platz 1 Must…". */
  .tp-gr {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "grip name edit"
      "grip where edit";
  }

  .tp-gr > .tp-grip {
    grid-area: grip;
  }

  .tp-gr > .tp-gb {
    grid-area: name;
  }

  .tp-gr > .tp-wh {
    grid-area: where;
    padding-bottom: 6px;
  }

  .tp-gr > .tp-edit {
    grid-area: edit;
  }

  /* A long name goes on a second line instead of ending in dots. */
  .tp-gr .tp-gb__name {
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* A list scrolls with the page, never in a box of its own (the fifth guest was cut in half). */
  .tp-glist {
    max-height: none;
    overflow: visible;
  }

  /* "Neuer Gast: Name eintippen" is read whole: the field takes the row, the button the one below. */
  .tp-addg {
    flex-wrap: wrap;
  }

  .tp-addg .in {
    flex: 1 1 100%;
  }

  .tp-addg .button {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* The two steps of the customer's link: the second says its few words in two lines at most. */
  .cl-tabs a {
    padding-inline: 4px;
  }

  .cl-tabs small {
    font-size: 12px;
    line-height: 1.25;
  }
}