/* ==========================================================================
 * DigiSomm platform panel — the owner's working application
 *
 * Rewritten 27 September 2026 (Victor: "een harde redesign … een mooie,
 * aangename en vooral efficiënte werkzame applicatie"). One stylesheet, in
 * this order: tokens (day, night, and auto following the device), base, the
 * shell (rail, top bar, phone tab bar), primitives (type, buttons, fields,
 * surfaces, tables, badges), then each page's own parts, the sign-in pages,
 * the QR sticker (identical to the restaurant panel's, asserted by a test),
 * phones and print.
 *
 * Rules of thumb that keep it efficient to use:
 * - one accent (the brand's bordeaux) for what acts and what is current;
 *   green only for "accepted", amber for "look at this", red for "risk";
 * - dense but never cramped: 14px text, 36px controls, 44px on touch;
 * - every surface is a white card on a quiet ground, one border, no shadows
 *   except for what floats (menus, the tab bar, toasts);
 * - the system font of the device: fast, sharp, and nothing to download.
 * ====================================================================== */

:root {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #f5f3f0;
  --surface: #ffffff;
  --surface-2: #faf8f6;
  --surface-3: #f1ede9;
  --line: #e7e2dd;
  --line-strong: #d5cdc6;
  --text: #1c1917;
  --text-2: #57504b;
  --text-3: #8b847e;

  --accent: #8b1d34;
  --accent-hover: #751629;
  --accent-text: #8b1d34;
  --accent-soft: #f7e9ec;
  --accent-line: #e6c3cb;
  --on-accent: #ffffff;

  --ok: #1d7a4b;
  --ok-soft: #e4f3ea;
  --warn: #8f5b00;
  --warn-soft: #fbf0d9;
  --danger: #b3263a;
  --danger-soft: #fbe8ea;

  --rail-bg: #ffffff;
  --rail-line: #ebe6e1;

  --radius-s: 6px;
  --radius: 10px;
  --radius-l: 14px;
  --shadow-float: 0 1px 2px rgba(28, 25, 23, 0.06), 0 12px 32px -12px rgba(28, 25, 23, 0.28);
  --focus: 0 0 0 3px rgba(139, 29, 52, 0.22);
  --rail-width: 248px;
  --content-width: 1200px;

  /* Names the shared pieces (choice-field.js, the wine card) already read. */
  --ds-surface: var(--surface);
  --ds-surface-2: var(--surface-3);
  --ds-line: var(--line);
  --ds-line-strong: var(--line-strong);
  --ds-text: var(--text);
  --ds-text-muted: var(--text-2);
  --ds-accent: var(--accent-text);
  --ds-accent-soft: var(--accent-soft);
  --ds-radius: var(--radius);
}

/* Night, chosen or followed from the device. */
:root[data-ds-mode="night"] {
  color-scheme: dark;
  --bg: #121011;
  --surface: #1b1819;
  --surface-2: #201c1d;
  --surface-3: #2a2527;
  --line: #2e292a;
  --line-strong: #3f3739;
  --text: #f2edea;
  --text-2: #bdb4af;
  --text-3: #8e8581;
  --accent: #b3344f;
  --accent-hover: #c64260;
  --accent-text: #f09aac;
  --accent-soft: #3a1d25;
  --accent-line: #5a2a36;
  --ok: #6fce9b;
  --ok-soft: #173124;
  --warn: #e7b862;
  --warn-soft: #362a12;
  --danger: #f28c98;
  --danger-soft: #3c1b20;
  --rail-bg: #171415;
  --rail-line: #272223;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  --focus: 0 0 0 3px rgba(240, 154, 172, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-ds-mode]) {
    color-scheme: dark;
    --bg: #121011;
    --surface: #1b1819;
    --surface-2: #201c1d;
    --surface-3: #2a2527;
    --line: #2e292a;
    --line-strong: #3f3739;
    --text: #f2edea;
    --text-2: #bdb4af;
    --text-3: #8e8581;
    --accent: #b3344f;
    --accent-hover: #c64260;
    --accent-text: #f09aac;
    --accent-soft: #3a1d25;
    --accent-line: #5a2a36;
    --ok: #6fce9b;
    --ok-soft: #173124;
    --warn: #e7b862;
    --warn-soft: #362a12;
    --danger: #f28c98;
    --danger-soft: #3c1b20;
    --rail-bg: #171415;
    --rail-line: #272223;
    --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.7);
    --focus: 0 0 0 3px rgba(240, 154, 172, 0.3);
  }
}

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

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

/* The hidden attribute always wins; several components set a display of
   their own (the catalogue's bulk bar once said "0 geselecteerd" forever). */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font: 400 14px/1.5 var(--font);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.25;
  text-wrap: balance;
}

h1 { font-size: 26px; letter-spacing: -0.02em; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }

p { margin: 0; }
p + p { margin-top: 8px; }

a { color: var(--accent-text); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  padding: 1px 5px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow-wrap: anywhere;
}

img, svg { max-width: 100%; }

hr {
  height: 1px;
  margin: 20px 0;
  background: var(--line);
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

::selection { background: var(--accent-soft); }

.sr-only,
.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: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 14px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-s);
  transform: translateY(-160%);
}

.skip-link:focus { transform: none; }

/* --- Icons: one drawing each, coloured by the text around them ------------- */

.ui-icon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.ui-icon--dashboard { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.ui-icon--submissions { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5 6 5h12l2.5 8.5'/%3E%3Cpath d='M3.5 13.5V19a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5v-5.5h-5a3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E"); }
.ui-icon--wine-scans { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8z'/%3E%3Cpath d='M14 3.5V8h4.5'/%3E%3Cpath d='M8.5 12.5h7M8.5 16h5'/%3E%3C/svg%3E"); }
.ui-icon--tenants { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 5.5 4h13L20 9.5'/%3E%3Cpath d='M4 9.5c0 1.4 1.1 2.5 2.7 2.5S9.3 10.9 9.3 9.5c0 1.4 1.2 2.5 2.7 2.5s2.7-1.1 2.7-2.5c0 1.4 1.1 2.5 2.6 2.5S20 10.9 20 9.5'/%3E%3Cpath d='M5.5 12v8h13v-8'/%3E%3Cpath d='M10 20v-4.5h4V20'/%3E%3C/svg%3E"); }
.ui-icon--catalog { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.8h4v4.4c0 1 2.5 2 2.5 5V20a1.2 1.2 0 0 1-1.2 1.2H8.7A1.2 1.2 0 0 1 7.5 20v-7.8c0-3 2.5-4 2.5-5z'/%3E%3Cpath d='M7.5 13.5h9'/%3E%3C/svg%3E"); }
.ui-icon--assortments { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.8' cy='6' r='1.1'/%3E%3Ccircle cx='4.8' cy='12' r='1.1'/%3E%3Ccircle cx='4.8' cy='18' r='1.1'/%3E%3C/svg%3E"); }
.ui-icon--styles { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 1 0 0 17c1.2 0 1.8-.8 1.8-1.7 0-1.4-1.3-1.7-1.3-3 0-1 .8-1.8 1.8-1.8h2.2c2.3 0 4-1.7 4-4 0-3.6-3.8-6.5-8.5-6.5z'/%3E%3Ccircle cx='7.5' cy='11' r='1'/%3E%3Ccircle cx='10' cy='7.2' r='1'/%3E%3Ccircle cx='14.6' cy='7.4' r='1'/%3E%3C/svg%3E"); }
.ui-icon--statistics { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5h16'/%3E%3Cpath d='M7 20.5v-6M12 20.5V8M17 20.5v-10'/%3E%3C/svg%3E"); }
.ui-icon--sales { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5h17l-6.5 7.6v5.9l-4 1.9v-7.8z'/%3E%3C/svg%3E"); }
.ui-icon--notifications { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10a6 6 0 0 1 12 0c0 5 2 6.5 2 6.5H4s2-1.5 2-6.5'/%3E%3Cpath d='M10 19.5a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.ui-icon--search { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E"); }
.ui-icon--more { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3Ccircle cx='18.5' cy='12' r='1.3'/%3E%3C/svg%3E"); }
.ui-icon--check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ui-icon--close { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
.ui-icon--chevron { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.ui-icon--external { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5h5.5V10'/%3E%3Cpath d='M19.5 4.5 11 13'/%3E%3Cpath d='M17 14v4.5A1.5 1.5 0 0 1 15.5 20h-10A1.5 1.5 0 0 1 4 18.5v-10A1.5 1.5 0 0 1 5.5 7H10'/%3E%3C/svg%3E"); }

/* ==========================================================================
 * Shell: the rail on the left, the bar on top, the content in between
 * ====================================================================== */

.cellar-rail {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: var(--rail-width);
  padding: 18px 12px 14px;
  overflow-y: auto;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-line);
}

.platform-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 6px 18px;
  padding: 4px 4px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-s);
}

.platform-brand strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.platform-brand small {
  display: block;
  color: var(--text-3);
  font-size: 12px;
}

/* The product mark: the broken drop with both engraved contours, as a mask so
   it takes the accent here and on the sign-in card without a second file. */
.brand-mark {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: var(--accent-text);
  -webkit-mask: url("digisomm-mark.svg") center / contain no-repeat;
  mask: url("digisomm-mark.svg") center / contain no-repeat;
}

.platform-nav {
  display: grid;
  gap: 1px;
}

.nav-group {
  margin: 14px 10px 4px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-group:first-child { margin-top: 0; }

.platform-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  color: var(--text-2);
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
}

.platform-nav a .ui-icon { color: var(--text-3); }

.platform-nav a:hover {
  color: var(--text);
  background: var(--surface-3);
}

.platform-nav a[aria-current="page"] {
  color: var(--accent-text);
  font-weight: 600;
  background: var(--accent-soft);
}

.platform-nav a[aria-current="page"] .ui-icon { color: var(--accent-text); }

.nav-badge {
  min-width: 20px;
  margin-left: auto;
  padding: 1px 6px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.rail-foot {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.rail-mode {
  display: grid;
  gap: 6px;
  padding: 0 6px;
}

.rail-mode__label {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mode-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  background: var(--surface-3);
  border-radius: 8px;
}

.mode-switch button {
  min-height: 28px;
  padding: 0 6px;
  color: var(--text-2);
  font: 500 12px/1 var(--font);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.mode-switch button[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.rail-user {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  padding: 10px 6px 0;
  border-top: 1px solid var(--rail-line);
}

.user-monogram {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}

.rail-user-copy { min-width: 0; }

.rail-user-copy strong,
.rail-user-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-user-copy strong { font-size: 13px; }
.rail-user-copy small { color: var(--text-3); font-size: 12px; }

.rail-user form { grid-column: 2; }

.platform-main {
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--rail-width);
}

.page-body {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 24px 32px 64px;
}

/* --- Top bar: a search that is always there, and the environment ---------- */

.utility-bar {
  position: sticky;
  z-index: 15;
  top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 8px 32px;
  /* Opaque on a laptop (12 October 2026): a blurred sticky bar over a long
     table is repainted on every scrolled frame; the glass stays on a phone,
     where the bar is the app's chrome (below, with the tab bar). */
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  border-bottom: 1px solid var(--line);
}

.utility-title {
  display: none;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-toggle {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.rail-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 4px auto;
  background: currentColor;
}

.quick-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 380px);
  color: var(--text-3);
}

.quick-search .ui-icon {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.quick-search input[type="search"] {
  width: 100%;
  min-height: 36px;
  padding: 6px 34px 6px 34px;
  color: var(--text);
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.quick-search input[type="search"]:focus {
  border-color: var(--accent-line);
  outline: 0;
  box-shadow: var(--focus);
}

.quick-search kbd {
  position: absolute;
  right: 8px;
  padding: 0 6px;
  color: var(--text-3);
  font-size: 11px;
  line-height: 18px;
  background: var(--surface-3);
  border-radius: 4px;
  pointer-events: none;
}

.quick-search input:focus + kbd { display: none; }

.utility-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.environment-badge {
  padding: 2px 8px;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.install-app-button {
  min-height: 30px;
  padding: 0 12px;
  color: var(--text);
  font: 600 12px/1 var(--font);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
}

/* --- Phone: a tab bar at the thumb, the rail as a drawer ------------------- */

.tab-bar,
.rail-backdrop { display: none; }

/* --- Toasts: what an in-place action reports --------------------------------- */

.toast-region {
  position: fixed;
  z-index: 60;
  right: 20px;
  bottom: 20px;
  display: grid;
  justify-items: end;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 14px;
  color: #fff;
  background: #22201f;
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  font-size: 13px;
  font-weight: 500;
  animation: toast-in 180ms ease-out;
}

.toast--error { background: #9c2033; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* ==========================================================================
 * Primitives
 * ====================================================================== */

/* --- Page headers ----------------------------------------------------------- */

.page-heading,
.page-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 4px 0 20px;
}

.page-heading > div,
.page-intro > div { min-width: 0; max-width: 72ch; }

.page-heading p,
.page-intro p {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 14px;
}

/* The assortments page puts its intro inside the heading. */
.page-heading .page-intro { margin: 0; }

.page-heading--actions,
.page-heading--split { align-items: flex-end; }

.quick-actions,
.button-row,
.record-actions,
.form-actions,
.review-actions,
.merge-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.section-count,
.toolbar-status,
.meta,
.table-note,
.utility-label {
  color: var(--text-3);
  font-size: 12px;
}

.utility-label {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.count {
  display: inline-block;
  min-width: 22px;
  margin-left: 6px;
  padding: 0 7px;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: 2px;
}

.hint,
.empty-note,
.proposal-hint {
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 13px;
}

.empty-state {
  margin: 0;
  padding: 18px;
  color: var(--text-2);
  text-align: center;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.empty-note { color: var(--text-3); }

/* --- Notices ------------------------------------------------------------------ */

.notice {
  margin: 0 0 16px;
  padding: 10px 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-s);
}

.notice-success { border-left-color: var(--ok); }
.notice--once { border-left-color: var(--warn); background: var(--warn-soft); }

.notice-error,
.error-summary {
  margin: 0 0 16px;
  padding: 12px 14px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius-s);
}

.error-summary ul { margin: 6px 0 0; padding-left: 18px; }
.error-summary h2 { color: inherit; font-size: 14px; }

.field-error {
  display: block;
  margin-top: 4px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
}

.warning-note,
.warning-line,
.duplicate-warning {
  margin: 0 0 14px;
  padding: 10px 14px;
  color: var(--text);
  background: var(--warn-soft);
  border-radius: var(--radius-s);
  font-size: 13px;
}

.warning-line code { margin-right: 4px; }
.duplicate-warning ul { margin: 6px 0; padding-left: 18px; }
.duplicate-warning p { color: var(--text-2); }

/* --- Links and buttons -------------------------------------------------------- */

.text-link {
  color: var(--accent-text);
  font-weight: 500;
  text-decoration: none;
}

.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.primary-button,
.secondary-button,
.risk-button,
.decision-button,
.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  font: 600 13.5px/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
  -webkit-tap-highlight-color: transparent;
}

.primary-button {
  color: var(--on-accent);
  background: var(--accent);
}

.primary-button:hover { background: var(--accent-hover); }

.secondary-button {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line-strong);
}

.secondary-button:hover { background: var(--surface-3); }

.risk-button {
  color: var(--danger);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.risk-button:hover { background: var(--danger-soft); }

.text-button {
  display: inline;
  padding: 0;
  color: var(--accent-text);
  font: 600 13px/1.4 var(--font);
  background: none;
  border: 0;
  cursor: pointer;
}

.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-button--risk { color: var(--danger); }

:is(.primary-button, .secondary-button, .risk-button, .decision-button):focus-visible {
  outline: 0;
  box-shadow: var(--focus);
}

:is(.primary-button, .secondary-button, .risk-button, .decision-button):disabled {
  cursor: default;
  opacity: 0.55;
}

.summary-action {
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Fields ------------------------------------------------------------------ */

input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]),
select,
textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  color: var(--text);
  font: 14px/1.4 var(--font);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

textarea { min-height: 84px; resize: vertical; }

select {
  padding-right: 30px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

input:not([type="checkbox"], [type="radio"], [type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent-line);
  outline: 0;
  box-shadow: var(--focus);
}

input::placeholder,
textarea::placeholder { color: var(--text-3); }

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

input[type="file"] { font: 13px var(--font); color: var(--text-2); }

.field,
:is(.stack-form, .compact-form, .filter-bar, .record-form) > label:not(.import-confirmation, .file-drop, .auth-checkbox) {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}

.field > span:first-child small,
.field small,
.stack-form small {
  color: var(--text-3);
  font-weight: 400;
}

.field > small { font-size: 12px; font-weight: 400; }

.field--full,
.field--wide { grid-column: 1 / -1; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-bottom: 16px;
}

.form-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.entity-form,
.stack-form {
  display: grid;
  gap: 14px;
}

.entity-form > .form-grid { margin-bottom: 0; }

/* A form's button is as wide as its words, at the start, where the eye ends. */
:is(.entity-form, .stack-form, .compact-form, .record-form, .inline-form) > :is(button, .primary-button, .secondary-button, .text-button) {
  justify-self: start;
}
.entity-form--compact { gap: 12px; }

.compact-form {
  display: grid;
  gap: 10px;
  padding: 12px 0 4px;
}

.inline-form,
.record-form {
  display: grid;
  gap: 10px;
}

.form-actions {
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.form-actions p {
  max-width: 60ch;
  color: var(--text-2);
  font-size: 12.5px;
}

.conditional-fields { display: grid; gap: 14px; }

.choice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-cards legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}

.choice-cards label {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice-cards input {
  position: absolute;
  top: 14px;
  left: 14px;
}

.choice-cards label > span {
  display: grid;
  gap: 2px;
  height: 100%;
  padding: 12px 14px 12px 40px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.choice-cards strong { font-size: 14px; }
.choice-cards small { color: var(--text-2); font-size: 12.5px; }

.choice-cards input:checked + span {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.theme-choice-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.import-confirmation {
  display: flex;
  font-weight: 400;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 13px;
}

.import-confirmation input { margin-top: 2px; }

.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.file-drop:hover { border-color: var(--accent-line); background: var(--accent-soft); }

.file-drop input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-drop > span:not(.file-drop__mark) { display: grid; gap: 2px; }
.file-drop small { color: var(--text-3); font-size: 12px; }

.file-drop__mark {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--accent-text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
}

.selected-file {
  margin: -6px 0 0;
  color: var(--text-3);
  font-size: 12px;
}

/* --- Filters: one row above a list ------------------------------------------ */

.filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.filter-bar > .secondary-button,
.filter-bar > .primary-button { align-self: end; }
.filter-bar--compact { grid-template-columns: minmax(200px, 1fr) auto; }

.search-field { position: relative; }

/* --- Surfaces ---------------------------------------------------------------- */

.panel,
.data-panel,
.record-card,
.attention-ledger,
.audit-ledger,
.upload-vault,
.approved-styles,
.deployed-theme-panel,
.collection-import-card,
.contract-ledger,
.assortment-context,
.catalog-edit-panel,
.proposal,
.push-panel {
  margin: 0 0 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.panel > h2,
.data-panel > h2,
.record-list > h2,
.proposal-section > h2 {
  margin-bottom: 12px;
}

.record-list,
.proposal-section { margin: 0 0 28px; }

.record-list > h2,
.proposal-section > h2 {
  display: flex;
  align-items: center;
  font-size: 15px;
}

.record-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 10px;
}

.record-card header strong { font-size: 15px; }

.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.two-column > .panel { margin-bottom: 0; }
.two-column + .panel,
.two-column + section { margin-top: 16px; }

/* Label and value, side by side. */
.detail-list {
  display: grid;
  gap: 0;
  margin: 0 0 12px;
}

.detail-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--text-2); font-size: 13px; }
.detail-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.submission-note {
  margin: 10px 0 0;
  padding: 8px 12px;
  color: var(--text-2);
  background: var(--surface-2);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 13px;
}

/* --- Disclosures: a row that opens into its form ----------------------------- */

.creation-drawer,
.inline-editor,
.category-ledger__item,
.assigned-wine-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.creation-drawer { margin: 0 0 16px; }

.creation-drawer > summary,
.inline-editor > summary,
.category-ledger__item > summary,
.assigned-wine-row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  list-style: none;
  cursor: pointer;
  border-radius: inherit;
}

:is(.creation-drawer, .inline-editor, .category-ledger__item, .assigned-wine-row) > summary::-webkit-details-marker { display: none; }

:is(.creation-drawer, .inline-editor, .category-ledger__item, .assigned-wine-row) > summary:hover { background: var(--surface-2); }

:is(.creation-drawer, .inline-editor, .category-ledger__item, .assigned-wine-row) > summary > span:first-child {
  display: grid;
  min-width: 0;
}

:is(.creation-drawer, .inline-editor, .category-ledger__item) > summary small {
  color: var(--text-3);
  font-size: 12px;
}

:is(.creation-drawer, .inline-editor, .category-ledger__item, .assigned-wine-row)[open] > summary {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
}

:is(.creation-drawer, .inline-editor, .category-ledger__item, .assigned-wine-row)[open] .summary-action { color: var(--text-3); }

.creation-drawer > :not(summary) { margin: 16px; }

.inline-editor { border-radius: var(--radius); }
.inline-editor > summary { min-height: 40px; padding: 6px 10px; }
.inline-editor > :not(summary) { margin: 0 10px 10px; }

/* --- Tables ------------------------------------------------------------------ */

.table-wrap,
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.data-table,
.panel table,
.data-panel table,
.catalog-edit-panel table,
.merge-form table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

:is(.data-table, .panel table, .data-panel table, .catalog-edit-panel table, .merge-form table) th {
  padding: 8px 10px;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

:is(.data-table, .panel table, .data-panel table, .catalog-edit-panel table, .merge-form table) td {
  padding: 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

:is(.data-table, .panel table, .data-panel table) tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--surface-2); }

:is(.data-table, .panel table, .data-panel table) td small {
  display: block;
  color: var(--text-3);
  font-size: 12px;
}

.table-note { display: block; }

/* --- Badges and marks --------------------------------------------------------- */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.status-badge--approved,
.status-badge--live,
.status-badge--active,
.status-badge--customer { color: var(--ok); background: var(--ok-soft); }

.status-badge--flagged,
.status-badge--received,
.status-badge--pending,
.status-badge--trial { color: var(--warn); background: var(--warn-soft); }

.status-badge--demo { color: var(--accent-text); background: var(--accent-soft); }

.status-badge--closed,
.status-badge--archived,
.status-badge--rejected,
.status-badge--inactive { color: var(--text-3); background: var(--surface-3); }

/* An invoice past its due date and not paid (Billit's reading). */
.status-badge--overdue { color: var(--danger); background: var(--danger-soft); }

/* The wine's colour as a small disc. */
.wine-type-mark {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: #9a8f85;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.wine-type-mark--red { background: #8b2f3c; }
.wine-type-mark--white { background: #e2cd84; }
.wine-type-mark--rose { background: #e8a4ae; }
.wine-type-mark--sparkling { background: #efe2ae; }
.wine-type-mark--orange { background: #d98b3a; }
.wine-type-mark--sweet,
.wine-type-mark--dessert { background: #c9892b; }
.wine-type-mark--fortified { background: #6b3f2a; }

.tenant-seal,
.collection-type-mark {
  display: inline-block;
  width: 4px;
  align-self: stretch;
  min-height: 34px;
  flex: 0 0 auto;
  background: var(--ok);
  border-radius: 4px;
}

.tenant-seal--demo,
.collection-type-mark--demo { background: var(--accent-text); }
.collection-type-mark--tenant { background: var(--ok); }

/* ==========================================================================
 * Pages
 * ====================================================================== */

/* --- Overzicht: the work first ------------------------------------------------ */

.attention-ledger { padding: 6px 8px; }

.attention-ledger .section-heading { margin: 10px 12px 6px; }

.attention-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--radius);
}

.attention-row:hover { background: var(--surface-2); }
.attention-row > span:nth-child(2) { display: grid; }
.attention-row strong { color: var(--text); font-size: 14px; }
.attention-row small { color: var(--text-3); font-size: 12.5px; }
.attention-row > span:last-child { color: var(--text-3); }

.attention-count {
  display: grid;
  height: 36px;
  place-items: center;
  color: var(--text-3);
  background: var(--surface-3);
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.attention-row--waiting .attention-count {
  color: var(--on-accent);
  background: var(--accent);
}

.attention-row--waiting > span:last-child { color: var(--accent-text); }

.work-ledger .empty-state { margin: 4px 12px 12px; }

.dashboard-actions { margin: 0 0 16px; }

.metric-flight {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.metric {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.metric:hover { border-color: var(--line-strong); }

.metric strong {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.metric span { color: var(--text-2); font-size: 13px; }

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

.audit-list li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.audit-list li:last-child { border-bottom: 0; }
.audit-list li > span:nth-child(2) { display: grid; min-width: 0; }
.audit-list strong { font-size: 13.5px; font-weight: 600; }
.audit-list small { color: var(--text-3); font-size: 12px; }
.audit-list time { color: var(--text-3); font-size: 12px; white-space: nowrap; }

.audit-dot {
  width: 7px;
  height: 7px;
  background: var(--line-strong);
  border-radius: 50%;
}

/* --- Inzendingen: every change on one line, one click each ------------------ */

.proposal { padding: 0; overflow: hidden; }

.proposal.is-busy { opacity: 0.6; pointer-events: none; }

.proposal.is-leaving {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.proposal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 20px 14px;
}

.proposal-title { min-width: 0; }

.proposal-title h3 { font-size: 16px; }

.proposal-title h3 a {
  color: var(--text);
  text-decoration: none;
}

.proposal-title h3 a:hover { color: var(--accent-text); }

.proposal-title p {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: 13px;
}

.proposal-byline { color: var(--text-3) !important; }
.proposal-byline strong { color: var(--text-2); font-weight: 600; }

.proposal-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.proposal > .proposal-hint,
.proposal > .submission-note,
.proposal > .change-flag,
.proposal > .duplicate-warning,
.proposal > .proposal-bulk { margin: 0 20px 16px; }

.change-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.change {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto;
  grid-template-areas:
    "field values actions"
    ".     context actions";
  align-items: center;
  gap: 4px 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}

.change:last-child { border-bottom: 0; }

.change-field {
  grid-area: field;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.change-values {
  grid-area: values;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
  font-size: 14px;
}

.change-values del {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-3) 70%, transparent);
}

.change-values ins {
  padding: 1px 6px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  background: var(--ok-soft);
  border-radius: 4px;
}

.change-arrow { color: var(--text-3); }

/* A description is a paragraph, not a word: the old above the new. */
.change--long .change-values {
  display: grid;
  gap: 6px;
}

.change--long .change-arrow { display: none; }

.change--long .change-values del,
.change--long .change-values ins {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  line-height: 1.5;
}

.change--long .change-values del { background: var(--surface-2); }
.change--long .change-values ins { font-weight: 500; }

.change-context {
  grid-area: context;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.change-context:empty { display: none; }

.change-flag {
  display: inline-block;
  color: var(--text-2);
  font-size: 12px;
}

.change-flag--warn {
  padding: 1px 7px;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 4px;
  font-weight: 600;
}

.change-history,
.judgement-history {
  color: var(--text-3);
  font-size: 12px;
}

.change-actions { grid-area: actions; }

.change-actions form {
  display: flex;
  gap: 6px;
}

.decision-button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--text-2);
  background: var(--surface);
  border-color: var(--line-strong);
}

.decision-button:hover { color: var(--text); background: var(--surface-3); }

.decision-button--accept {
  color: #fff;
  background: var(--ok);
  border-color: var(--ok);
}

:root[data-ds-mode="night"] .decision-button--accept { color: #0d1f15; }
@media (prefers-color-scheme: dark) { :root:not([data-ds-mode]) .decision-button--accept { color: #0d1f15; } }

.decision-button--accept:hover {
  color: #fff;
  background: color-mix(in srgb, var(--ok) 88%, #000);
}

.decision-done {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
}

.decision-done--accepted { color: var(--ok); }

.change--accepted,
.change--ignored { background: var(--surface-2); }

.change--accepted .change-values,
.change--ignored .change-values { opacity: 0.6; }

/* --- Catalogue --------------------------------------------------------------- */

.workbench-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.toolbar-status { margin-left: auto; }

.colour-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.colour-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.colour-tab:hover { border-color: var(--line-strong); }

.colour-tab--active {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.colour-tab .count { margin-left: 0; background: transparent; }

.bulk-bar {
  position: sticky;
  z-index: 5;
  top: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 10px 8px 14px;
  color: #fff;
  background: #22201f;
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}

.bulk-bar .secondary-button { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.bulk-bar .risk-button { color: #ffb4bd; background: transparent; border-color: rgba(255, 180, 189, 0.4); }

.catalog-table-wrap,
form[data-bulk-form] > .table-scroll {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.cb-col { width: 36px; }

.row-title {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.row-title:hover { color: var(--accent-text); }

.row--flagged td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.row--inactive td { color: var(--text-3); }

.row-actions {
  white-space: nowrap;
}

.row-actions a + a { margin-left: 12px; }

.conflict-mark {
  display: inline-block;
  margin-top: 4px;
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

/* The owner's own star on a catalogue row (12 October 2026): a bookmark,
   nothing else reads it. Quiet until starred. */
.fav-form { display: inline; }
.fav-toggle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -4px 4px -4px -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.fav-toggle:hover, .fav-toggle:focus-visible { background: var(--surface-2); color: var(--text); }
.fav-toggle[aria-pressed="true"] { color: var(--accent); }

.export-fields {
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.export-fields legend {
  padding: 0 4px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}

.export-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.export-field-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

/* The catalogue's wine form: the same fields as every panel (WineFields). */
.wine-fact-group {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.wine-fact-group > legend {
  margin: 0 0 10px;
  padding: 0;
  font-size: 14px;
  font-weight: 650;
}

.score-flight {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.score-flight legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 650;
}

.score-flight label { display: grid; gap: 5px; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.score-flight label span small { color: var(--text-3); font-weight: 400; }

/* The proposal for the four scores, under the scales: one line, one button,
   the reasons folded. Spans the fieldset's four columns. */
.structure-suggestion { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 4px; }
.structure-suggestion .hint { margin: 0; }
.structure-suggestion [data-structure-actions] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.structure-reasons { font-size: 12.5px; color: var(--text-2); }
.structure-reasons summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.structure-reasons ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.structure-reasons li { line-height: 1.45; }

.wine-engine-tags {
  margin: 0 0 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.wine-engine-tags > summary {
  padding: 10px 14px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.wine-engine-tags > :not(summary) { margin: 0 14px 14px; }

.profile-tags { display: grid; gap: 8px; min-width: 0; padding: 0; border: 0; }
.profile-tags legend { margin: 0 0 4px; padding: 0; color: var(--text-2); font-size: 13px; font-weight: 600; }
.profile-tags legend small { display: block; font-weight: 400; }
.profile-tag { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); cursor: pointer; }
.profile-tag input { flex: none; margin: 2px 0 0; }
.profile-tag strong { display: block; font-size: 13.5px; }
.profile-tag small { display: block; color: var(--text-2); font-size: 12.5px; }
.profile-tag:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.profile-tags .hint { margin: 0; }

/* --- Tenants ------------------------------------------------------------------ */

.tenant-identity {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.tenant-identity > span:last-child { display: grid; gap: 1px; min-width: 0; }
.tenant-identity strong { font-size: 14px; }
.tenant-identity small { color: var(--text-3); font-size: 12px; }

.logo-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.logo-preview img {
  max-width: 120px;
  max-height: 56px;
  padding: 6px;
  object-fit: contain;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}

.logo-preview small { color: var(--text-3); font-size: 12px; }

.branding-form,
.logo-form { min-width: 240px; }

.compact-form--status { min-width: 180px; }

.sommelier-url {
  margin: 0 0 6px;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.colour-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.colour-count-pill {
  padding: 2px 10px;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: 999px;
  font-size: 12px;
}

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

.submission-list li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

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

.once-password {
  display: inline-block;
  margin: 6px 0;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-s);
  user-select: all;
}

.swatch-inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
}

/* A button that reads as a link (tenant access: Loskoppelen, invitations). */
button.text-link {
  padding: 0;
  font: 600 13px/1.4 var(--font);
  background: none;
  border: 0;
  cursor: pointer;
}

/* Inside a table cell the access controls sit in a row, not a stack. */
td > .compact-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 0;
}

td > .compact-form + .compact-form { margin-top: 6px; }

/* A heading that follows a form inside the same card starts a new part. */
.panel > h3 { margin: 22px 0 6px; }
.panel > h3 + p { margin-bottom: 12px; color: var(--text-2); font-size: 13px; }
.panel > h2 + p:not([class]) { margin-bottom: 12px; color: var(--text-2); font-size: 13px; }
.panel > .creation-drawer,
.panel > details { margin: 0 0 8px; }

.swatch-chip.swatch-inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  box-shadow: none;
}

/* --- Assortments ------------------------------------------------------------ */

.assortment-selector { margin: 0 0 16px; }

.assortment-selector__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.assortment-scope-card {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 10px 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.assortment-scope-card > :not(.collection-type-mark) { grid-column: 2; }
.assortment-scope-card .collection-type-mark { grid-row: 1 / span 4; }
.assortment-scope-card p { color: var(--text-2); font-size: 13px; }
.assortment-scope-card .secondary-button { justify-self: start; }

.assortment-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.assortment-context h2 { font-size: 20px; }
.assortment-context p { margin-top: 2px; color: var(--text-2); font-size: 13px; }

.assortment-context__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.publish-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 16px;
  padding: 14px 18px;
  background: var(--warn-soft);
  border-radius: var(--radius-l);
}

.publish-bar-copy strong { display: block; font-size: 14px; }

.publish-bar-copy span {
  display: block;
  max-width: 72ch;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 12.5px;
}

.assortment-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: start;
}

.assortment-management-grid > * { margin-bottom: 0; }
.assortment-management-grid + .data-panel { margin-top: 16px; }

.category-ledger {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

.category-ledger__item { border-radius: var(--radius); }
.category-ledger__item > summary { min-height: 42px; padding: 8px 12px; }
.category-ledger__item > form { margin: 12px; }

.assigned-wine-list {
  display: grid;
  gap: 6px;
}

.assigned-wine-row { border-radius: var(--radius); }

.assigned-wine-row > summary {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto auto;
  gap: 12px;
  min-height: 48px;
  padding: 8px 14px;
}

.assigned-wine-row__identity { display: grid; min-width: 0; }
.assigned-wine-row__identity strong { font-size: 14px; }
.assigned-wine-row__identity small { overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.assigned-wine-row__category { color: var(--text-2); font-size: 12.5px; }
.assigned-wine-row > form { margin: 14px; }

.collection-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.collection-workspace > * { margin-bottom: 0; }
.collection-import-card h2,
.contract-ledger h2 { margin-bottom: 6px; }
.collection-import-card > p,
.contract-ledger > p { margin-bottom: 12px; color: var(--text-2); font-size: 13px; }

.contract-ledger dl { display: grid; gap: 8px; margin: 12px 0; }
.contract-ledger dt { font-size: 13px; font-weight: 600; }
.contract-ledger dd { margin: 0; color: var(--text-2); font-size: 13px; }

.assortment-empty-state { text-align: center; }
.assortment-empty-state p { color: var(--text-2); }

/* --- Themes -------------------------------------------------------------------- */

.style-custody-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.style-custody-grid > * { margin-bottom: 0; }
.style-custody-grid + * { margin-top: 16px; }

.upload-vault h2,
.approved-styles h2 { margin-bottom: 6px; }
.upload-vault > p,
.approved-styles > p { margin-bottom: 12px; color: var(--text-2); font-size: 13px; }

.theme-publication-steps {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.stylesheet-preview {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.result-line { margin-bottom: 10px; font-size: 13px; }

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.swatch {
  display: grid;
  width: 72px;
  justify-items: center;
  gap: 4px;
}

.swatch-chip {
  display: block;
  width: 100%;
  height: 32px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.swatch-name {
  width: 100%;
  overflow: hidden;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deployed-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.deployed-theme-grid > article {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.deployed-theme-grid > article > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.style-index {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 13px;
}

.palette-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.palette-codes code { font-size: 11px; }

.registry-detail { color: var(--text-3); font-size: 12.5px; }

.review-form { display: grid; gap: 8px; min-width: 220px; }
.review-form--table textarea { min-height: 56px; }
.hash-fragment { font-size: 11.5px; }

/* --- Statistics ---------------------------------------------------------------- */

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}

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

.stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-label { color: var(--text-2); font-size: 13px; }

.stat-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}

.stat-bar-label {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A <progress>, because a style attribute is refused by this panel's CSP. */
.stat-bar-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  appearance: none;
  background: var(--surface-3);
  border: 0;
  border-radius: 999px;
}

.stat-bar-track::-webkit-progress-bar { background: var(--surface-3); border-radius: 999px; }
.stat-bar-track::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.stat-bar-track::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

.stat-bar-value {
  color: var(--text-2);
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Duplicates and merging ---------------------------------------------------- */

.duplicate-cluster + .duplicate-cluster { margin-top: 16px; }

.merge-choice td:first-child,
.merge-choice td:nth-child(2),
.merge-choice th:first-child,
.merge-choice th:nth-child(2) {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.merge-actions { margin-top: 12px; }
.merge-actions small { color: var(--text-3); font-size: 12px; }

/* The plan is the loudest thing on the page: it is the last thing between a
   click and rows that stop existing. */
.merge-plan { border-left: 3px solid var(--danger); }
.merge-plan h3 { margin: 18px 0 8px; font-size: 14px; }
.merge-effects { margin: 0 0 16px; padding-left: 20px; line-height: 1.7; }

.merge-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px;
  background: var(--danger-soft);
  border-radius: var(--radius);
}

.merge-confirm label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; }
.merge-confirm input[type="text"] { min-width: 220px; }

.fill-score {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fill-score--high { color: var(--ok); background: var(--ok-soft); }
.fill-score--mid { color: var(--text-2); background: var(--surface-3); }
.fill-score--low { color: var(--danger); background: var(--danger-soft); }

.compare-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.compare-table td,
.compare-table th { vertical-align: top; }
.compare-differs > * { background: var(--accent-soft) !important; }
.compare-keep { box-shadow: inset 2px 0 0 var(--ok), inset -2px 0 0 var(--ok); }
.compare-result { font-weight: 600; background: var(--surface-2); }
.compare-result small { display: block; color: var(--text-3); font-size: 11px; font-weight: 400; }

.pick-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -6px;
  padding: 6px;
  border-radius: var(--radius-s);
  cursor: pointer;
}

.pick-cell:hover { background: var(--surface-3); }
.pick-empty { color: var(--text-3); }

.rehearsal {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  font-size: 13px;
}

.rehearsal--ok { color: var(--ok); background: var(--ok-soft); }
.rehearsal--fail { color: var(--danger); background: var(--danger-soft); }

.conflict-appellation { font-weight: 600; }

/* --- Sent-in wine lists ----------------------------------------------------------- */

.scan-card header { align-items: center; }
.scan-note { margin: 6px 0 10px; color: var(--text-2); font-size: 13px; }

.scan-tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.scan-tally > div {
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-s);
}

.scan-tally dt { color: var(--text-2); font-size: 12px; }
.scan-tally dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; }

.scan-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.scan-page {
  display: grid;
  gap: 6px;
  padding: 10px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
}

.scan-page img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-s);
}

.scan-page--gone { color: var(--text-3); border-style: dashed; }
.scan-summary { margin-bottom: 14px; }
.scan-finish,
.scan-reject { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* --- Meldingen -------------------------------------------------------------------- */

.push-panel h2 { margin: 0 0 8px; }
.push-state { margin: 0 0 12px; font-weight: 600; }
.push-hint { margin: 0 0 12px; color: var(--text-2); }
.push-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.push-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.push-heading h2 { margin: 0; }
.push-devices { margin: 0; padding: 0; list-style: none; }
.push-devices li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.push-devices li > span { display: grid; gap: 2px; min-width: 0; }
.push-devices small { color: var(--text-3); font-size: 12px; }

/* --- Error page --------------------------------------------------------------------- */

.error-page {
  max-width: 560px;
  margin: 40px auto;
  padding: 28px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.error-code {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.error-page p { margin: 8px 0 16px; color: var(--text-2); }
.request-reference { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }

/* The QR page: the card (one SVG, drawn by server/assets/qr-card.js and the
   same file that is downloaded) beside its choices and the downloads. Both
   panels carry these rules; tests/qr-code.test.js holds them to it. */
.qr-generator {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr);
  gap: 18px 24px;
  align-items: start;
  max-width: 1100px;
  margin: 0 0;
  padding-bottom: 40px;
}

.qr-preview-stage {
  position: sticky;
  top: 16px;
  display: grid;
  min-height: 520px;
  place-items: center;
  padding: clamp(20px, 4vw, 52px);
  background-color: var(--surface-3);
  background-image: radial-gradient(color-mix(in srgb, var(--text-3) 30%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.qr-poster {
  display: grid;
  width: min(100%, 480px);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  /* The die-cut radius belongs to the artwork (88 of 1080). */
  border-radius: 8.15%;
  /* A sticker lying flat on the card: an edge, no halo around it. */
  box-shadow: 0 0 0 1px rgba(23, 32, 35, 0.1), 0 1px 3px rgba(23, 32, 35, 0.12);
  print-color-adjust: exact;
}

/* The round sticker is cut as a circle (qr-card.js sets data-shape). */
.qr-poster[data-shape="round"] {
  border-radius: 50%;
}

.qr-poster > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.qr-poster-pending {
  color: var(--text-2);
  font-size: 0.8rem;
}

.qr-side {
  display: grid;
  gap: 16px;
}

.qr-style-form,
.qr-action-panel {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.qr-style-form h2,
.qr-action-panel h2,
.qr-action-panel p {
  margin: 0;
}

.qr-style-form h2,
.qr-action-panel h2 {
  font-size: 1rem;
}

.qr-action-panel > div:first-child p {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 0.8rem;
}

.qr-choice {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.qr-choice legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
}

.qr-choice:disabled {
  opacity: 0.45;
}

.qr-choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qr-option {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.qr-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qr-option span {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
}

.qr-option input:checked + span {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent-text);
  font-weight: 600;
}

.qr-option input:focus-visible + span {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.qr-option input:disabled + span {
  cursor: not-allowed;
  opacity: 0.45;
}

.qr-text-field {
  display: grid;
  gap: 5px;
}

.qr-text-field span {
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
}

.qr-text-field input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.qr-colour-field {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
}

.qr-colour-field input {
  width: 40px;
  height: 32px;
  padding: 2px;
  cursor: pointer;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.qr-font-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.qr-font-fields legend {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  padding: 0;
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
}

.qr-font-fields:disabled { opacity: 0.45; }

/* A choice the chosen look or shape does not use: dimmed, still sent. */
.qr-unused { opacity: 0.45; }

.qr-text-field select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.qr-adjusted:empty { display: none; }

.qr-note {
  margin: 0;
  color: var(--text-2);
  font-size: 0.78rem;
}

.qr-notice,
.qr-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.qr-notice { color: var(--ok); background: var(--ok-soft); }
.qr-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }

.qr-style-form > .primary-button {
  justify-self: start;
}

.qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qr-actions button:disabled {
  cursor: wait;
  opacity: 0.5;
}

.qr-status {
  color: var(--text-2);
  font-size: 0.76rem;
}

.qr-target {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 0.76rem;
  text-align: center;
}

.qr-target a {
  color: inherit;
  overflow-wrap: anywhere;
}

.qr-noscript {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--danger);
}

@media (max-width: 900px) {
  .qr-generator {
    grid-template-columns: minmax(0, 1fr);
  }

  .qr-preview-stage {
    position: static;
    min-height: 0;
    padding: 18px;
  }
}

@media print {
  .qr-generator {
    display: block;
    width: 105mm;
    max-width: none;
    margin: 0 auto;
    padding: 0;
  }

  .qr-preview-stage {
    position: static;
    min-height: 0;
    padding: 0;
    background: #fff;
    border: 0;
  }

  .qr-poster {
    width: 105mm;
    height: 105mm;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}


/* A value chosen from a list (server/assets/choice-field.js): grapes one by
   one as chips, a country or appellation as one field; the options open
   under it. The same rules in every panel that loads the script. */
.choice { position: relative; min-width: 0; }
.choice-multiple { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 8px; background: var(--ds-surface); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); cursor: text; }
.choice-multiple:focus-within { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); }
.choice-chips { display: contents; margin: 0; padding: 0; list-style: none; }
.choice-chips li { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 4px 0 12px; background: var(--ds-accent-soft); color: var(--ds-text); border-radius: 999px; font-size: 15px; font-weight: 500; }
.choice-remove { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 999px; color: var(--ds-text-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.choice-remove:hover { background: var(--ds-surface); color: var(--ds-text); }
.choice-multiple .choice-input { flex: 1 1 120px; min-width: 120px; min-height: 32px; margin: 0; padding: 4px; background: transparent; border: 0; box-shadow: none; outline: 0; font-size: 16px; }
.choice-options { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; list-style: none; background: var(--ds-surface); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); box-shadow: 0 12px 32px rgba(20, 16, 14, 0.16); }
.choice-options[hidden] { display: none; }
.choice-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: calc(var(--ds-radius) - 2px); color: var(--ds-text); font-size: 15px; font-weight: 400; cursor: pointer; }
.choice-option small { color: var(--ds-text-muted); font-size: 12px; }
.choice-option[aria-selected="true"] { background: var(--ds-accent-soft); }
@media (hover: hover) { .choice-option:hover { background: var(--ds-surface-2); } }
.choice-option-new { border-top: 1px solid var(--ds-line); margin-top: 4px; color: var(--ds-accent); font-weight: 600; }
.choice-empty { padding: 10px 12px; color: var(--ds-text-muted); font-size: 14px; }
/* A field the script filled in (the region, from the appellation) lights up for a
   moment, with a line saying where it came from. */
.choice-filled { animation: choice-filled 1.6s ease-out; }
@keyframes choice-filled { from { background-color: var(--ds-accent-soft); border-color: var(--ds-accent); } }
.choice-fill-note { margin: 6px 0 0; color: var(--ds-text-muted); font-size: 13px; font-weight: 400; }
.choice-fill-note[hidden] { display: none; }
.choice-fill-pick { min-height: 32px; margin: 4px 4px 0 0; padding: 4px 12px; background: var(--ds-surface); border: 1px solid var(--ds-line-strong); border-radius: 999px; color: var(--ds-text); font-size: 13px; font-weight: 600; cursor: pointer; }
.choice-fill-pick:hover { border-color: var(--ds-accent); }
@media (prefers-reduced-motion: reduce) { .choice-filled { animation: none; } }

/* ==========================================================================
 * Unified authentication and in-rail appearance controls
 *
 * The sign-in pages: one card on the quiet ground, always by day. The markup
 * contract (.auth-*) is shared with the restaurant panel.
 * ====================================================================== */

body.entry-shell::after,
body.login-shell::after {
  content: none;
}

.login-main {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
  background: var(--bg);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: clamp(24px, 5vw, 36px);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 24px 48px -24px rgba(28, 25, 23, 0.2);
}

.auth-card--wide { width: min(100%, 640px); }

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}

.auth-brand .brand-mark { width: 34px; height: 34px; }
.auth-brand > span:last-child { display: grid; gap: 1px; }
.auth-brand strong { font-size: 16px; font-weight: 700; line-height: 1.1; }
.auth-brand small { color: var(--text-3); font-size: 12px; }

.auth-card h1 { font-size: 24px; }

.auth-intro {
  margin: 6px 0 0;
  color: var(--text-2);
  line-height: 1.55;
}

.auth-step {
  margin: 0 0 6px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin-top: 22px;
}

.auth-field {
  display: block;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.auth-form > input:not([type="hidden"]) {
  position: relative;
  min-height: 44px;
  margin: 0 0 8px;
  font-size: 16px;
  pointer-events: auto;
}

.auth-submit {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  color: var(--on-accent);
  font-size: 15px;
  background: var(--accent);
}

.auth-submit:hover { background: var(--accent-hover); }

.auth-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 2px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.auth-checkbox input { width: 18px; height: 18px; }

.auth-error,
.auth-card .notice-error {
  margin: 18px 0 0;
  padding: 10px 12px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius-s);
  font-size: 13.5px;
}

.auth-note {
  margin: 18px 0 0;
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.5;
}

.auth-form .auth-note { margin: -2px 0 10px 27px; }

.auth-secret,
.mfa-secret {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.auth-secret code,
.mfa-secret code {
  font-size: 15px;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.auth-secret details summary { color: var(--accent-text); font-size: 13px; font-weight: 600; cursor: pointer; }

.owner-recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.owner-recovery-codes li,
.owner-recovery-codes code {
  display: block;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}

/* ==========================================================================
 * Narrower screens
 * ====================================================================== */

@media (max-width: 1100px) {
  .page-body { padding: 20px 24px 56px; }
  .utility-bar { padding: 8px 24px; }
  .assortment-management-grid,
  .collection-workspace,
  .style-custody-grid { grid-template-columns: 1fr; }
  .form-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below 860px the rail is a drawer, and a tab bar sits at the thumb. */
@media (max-width: 860px) {
  .cellar-rail {
    z-index: 40;
    width: min(300px, 86vw);
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-float);
    transform: translateX(-105%);
    transition: transform 200ms ease;
  }

  .rail-is-open .cellar-rail { transform: none; }

  .rail-backdrop:not([hidden]) {
    position: fixed;
    z-index: 35;
    inset: 0;
    display: block;
    background: rgba(18, 16, 17, 0.42);
  }

  .platform-main { margin-left: 0; }

  .utility-bar {
    min-height: 52px;
    padding: 6px 16px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
  }

  .utility-title { display: block; flex: 1 1 auto; }
  .quick-search { display: none; }
  .utility-actions { margin-left: 0; }

  .page-body { padding: 16px 16px calc(100px + env(safe-area-inset-bottom, 0px)); }

  .page-heading,
  .page-intro { margin-top: 0; }

  h1 { font-size: 22px; }

  .tab-bar {
    position: fixed;
    z-index: 30;
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 5px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-float);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    backdrop-filter: saturate(1.6) blur(18px);
  }

  .tab-bar > a,
  .tab-bar > button {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    padding: 5px 2px;
    color: var(--text-3);
    font: 500 10.5px/1.1 var(--font);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 19px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .tab-bar .ui-icon { width: 22px; height: 22px; }

  .tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tab-bar [aria-current="page"] {
    color: var(--accent-text);
    font-weight: 650;
    background: var(--accent-soft);
  }

  .tab-bar > :active .ui-icon { transform: scale(0.88); }

  .tab-badge {
    position: absolute;
    top: 3px;
    left: calc(50% + 5px);
    min-width: 17px;
    padding: 0 5px;
    color: var(--on-accent);
    background: var(--accent);
    border: 2px solid var(--surface);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
  }

  .toast-region {
    right: 16px;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    justify-items: center;
  }

  /* Surfaces: a little tighter, still cards. */
  .panel, .data-panel, .record-card, .attention-ledger, .audit-ledger,
  .upload-vault, .approved-styles, .deployed-theme-panel, .collection-import-card,
  .contract-ledger, .assortment-context, .catalog-edit-panel, .push-panel {
    padding: 14px;
    border-radius: 12px;
  }

  .proposal { border-radius: 12px; }

  .form-grid,
  .form-grid--two,
  .form-grid--three,
  .two-column,
  .assortment-selector__grid,
  .score-flight { grid-template-columns: minmax(0, 1fr); }

  .filter-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filter-bar > .search-field { grid-column: 1 / -1; }
  .filter-bar > button { grid-column: 1 / -1; }
  .filter-bar--compact { grid-template-columns: minmax(0, 1fr); }

  .metric-flight { gap: 8px; }
  .metric { padding: 12px; }
  .metric strong { font-size: 22px; }
  .metric span { font-size: 12px; }

  .detail-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  /* A proposal's change: the values, then its two buttons under them. */
  .change {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "field" "values" "context" "actions";
    gap: 6px;
    padding: 12px 14px;
  }

  .change-actions form { display: grid; grid-template-columns: 1fr 1fr; }
  .change-actions .decision-button { min-height: 42px; }
  .proposal-head { padding: 14px; }
  .proposal-bulk { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .proposal-bulk > * { min-height: 42px; }
  .proposal > .proposal-hint,
  .proposal > .submission-note,
  .proposal > .change-flag,
  .proposal > .duplicate-warning,
  .proposal > .proposal-bulk { margin: 0 14px 14px; width: auto; }

  /* Tables become cards: each row a block, the cells in their own order. */
  .table-scroll { overflow-x: visible; }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td { display: block; width: auto; }
  .data-table thead { display: none; }
  /* table.data-table: stronger than the desktop cell rules above. */
  table.data-table tr { padding: 12px 4px; border-bottom: 1px solid var(--line); }
  table.data-table tbody tr:last-child { border-bottom: 0; }
  table.data-table td { padding: 2px 0; border: 0; overflow-wrap: anywhere; }
  table.data-table td:empty { display: none; }
  table.data-table tbody tr:hover td { background: transparent; }

  table.catalog-table tr {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "check wine   wine"
      "check type   state"
      "check grapes grapes"
      "check origin origin"
      "check linked actions";
    align-items: start;
    gap: 2px 10px;
    padding: 12px;
  }

  .catalog-table td:nth-child(1) { grid-area: check; padding-top: 3px; }
  table.catalog-table tr.row--flagged { box-shadow: inset 3px 0 0 var(--warn); }
  table.catalog-table .row--flagged td:first-child { box-shadow: none; }
  .catalog-table td:nth-child(2) { grid-area: wine; }
  .catalog-table td:nth-child(3) { grid-area: grapes; color: var(--text-2); font-size: 13px; }
  .catalog-table td:nth-child(4) { grid-area: type; font-size: 13px; }
  .catalog-table td:nth-child(5) { grid-area: origin; color: var(--text-2); font-size: 13px; }
  .catalog-table td:nth-child(6) { grid-area: state; justify-self: end; }
  .catalog-table td:nth-child(7) { grid-area: linked; color: var(--text-3); font-size: 12.5px; }
  .catalog-table td:nth-child(7)::before { content: "Gevoerd door "; }
  .catalog-table td:nth-child(8) { grid-area: actions; justify-self: end; }
  .catalog-table td small { display: inline; margin-left: 4px; }
  .catalog-table td:nth-child(2) small { display: block; margin-left: 0; }

  .workbench-toolbar > .secondary-button { padding: 0 11px; }
  .toolbar-status { width: 100%; margin-left: 0; }
  .bulk-bar { top: 58px; }

  .assigned-wine-row > summary { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .assigned-wine-row__category { display: none; }
  .assigned-wine-row > summary .summary-action { display: none; }

  .stat-bar-row { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 40px; gap: 10px; }

}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .cellar-rail { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .proposal.is-leaving { transition: none; }
}

/* ==========================================================================
 * Print: only the QR sticker prints
 * ====================================================================== */

@media print {
  .cellar-rail,
  .utility-bar,
  .tab-bar,
  .no-print {
    display: none !important;
  }

  body { background: #fff; }
  .platform-main { margin: 0; }
  .page-body { padding: 0; }
  /* The card itself: with the other QR rules above. */
}

/* --- View tabs (partials/tabs.php) ------------------------------------------- */

.view-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.view-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.view-tabs a:hover { color: var(--text); }
.view-tabs a[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent); }

/* ==========================================================================
 * Statistics (templates/statistics.php, src/Chart.php)
 * ====================================================================== */

.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-3);
  border-radius: 9px;
}

.segmented a {
  padding: 6px 12px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 7px;
}

.segmented a[aria-current="page"] {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* What stands out: sentences before numbers. */
.insights {
  margin: 0 0 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.insights h2 { margin-bottom: 10px; font-size: 15px; }
.insights ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.insight {
  position: relative;
  padding-left: 18px;
  color: var(--text);
  font-size: 14px;
}

.insight::before {
  position: absolute;
  top: 7px;
  left: 2px;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--text-3);
  border-radius: 50%;
}

.insight--good::before { background: var(--ok); }
.insight--warn::before { background: var(--warn); }
.insight--info::before { background: var(--accent-text); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.kpi {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.kpi--warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface)); }
.kpi--accent { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); }

.kpi-label { color: var(--text-2); font-size: 13px; font-weight: 600; }

.kpi-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-value small { color: var(--text-3); font-size: 16px; font-weight: 600; }
.kpi-foot { color: var(--text-3); font-size: 12.5px; }

.delta {
  display: inline-block;
  margin-right: 4px;
  padding: 0 6px;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.delta--up { color: var(--ok); background: var(--ok-soft); }
.delta--down { color: var(--danger); background: var(--danger-soft); }

.chart-card {
  margin: 0 0 16px;
  padding: 16px 20px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 10px;
}

.chart-head h2 { font-size: 15px; }
.chart-note { color: var(--text-3); font-size: 12.5px; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
  color: var(--text-2);
  font-size: 12.5px;
  list-style: none;
}

.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.legend-swatch--accent { background: var(--accent); }
.legend-swatch--muted { background: color-mix(in srgb, var(--accent) 22%, var(--surface-3)); }

.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis { fill: var(--text-3); font: 500 11px var(--font); }
.chart-hit { fill: transparent; }
.chart-bar { fill: color-mix(in srgb, var(--accent) 78%, var(--surface)); }
.chart-bar--strong { fill: var(--accent); }
.chart-bar--behind { fill: color-mix(in srgb, var(--accent) 16%, var(--surface-3)); }
.chart g:hover .chart-bar:not(.chart-bar--behind) { fill: var(--accent-hover); }
.chart g:hover .chart-hit { fill: color-mix(in srgb, var(--text) 4%, transparent); }

.chart-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.chart-pair > * { margin-bottom: 16px; }
.chart-pair--wide-left { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }

/* The four taste axes, each on its own 0–5 scale. */
.taste-list { display: grid; gap: 14px; margin: 0; }
.taste-list > div { display: grid; gap: 4px; }
.taste-list dt { display: flex; justify-content: space-between; color: var(--text-2); font-size: 13px; font-weight: 600; }
.taste-list dt strong { color: var(--text); font-variant-numeric: tabular-nums; }
.taste-list dd { margin: 0; }
.taste-ends { display: flex; justify-content: space-between; color: var(--text-3); font-size: 11.5px; }

.chart-scale { display: block; width: 100%; height: auto; overflow: visible; }
.chart-scale-track { fill: var(--surface-3); }
.chart-scale-fill { fill: color-mix(in srgb, var(--accent) 30%, var(--surface-3)); }
.chart-scale-tick { stroke: var(--surface); stroke-width: 2; }
.chart-scale-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }

.chart-spark { display: block; width: 120px; height: 28px; }
.chart-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.chart-spark-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Bars in lists: a native meter, styled once. */
meter {
  width: 100%;
  height: 8px;
  appearance: none;
  background: var(--surface-3);
  border: 0;
  border-radius: 999px;
}

meter::-webkit-meter-bar { height: 8px; background: var(--surface-3); border: 0; border-radius: 999px; }
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value { background: var(--accent); border-radius: 999px; }
meter::-moz-meter-bar { background: var(--accent); border-radius: 999px; }

.leader-list,
.share-list,
.plain-list,
.wine-rank {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leader-list li,
.share-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.leader-list li:last-child,
.share-list li:last-child { border-bottom: 0; }

.leader-list a { overflow: hidden; color: var(--text); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.leader-list a:hover { color: var(--accent-text); }
.leader-list li > span:last-child,
.share-list li > span:last-child { min-width: 48px; color: var(--text-2); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.share-list li > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
.share-list small { color: var(--text-3); }
.plain-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }
.plain-list small { margin-left: 6px; color: var(--text-3); }

.wine-rank li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) minmax(60px, 140px) 44px 52px;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.wine-rank li:last-child { border-bottom: 0; }
.wine-rank__name { display: grid; min-width: 0; }
.wine-rank__name a { overflow: hidden; color: var(--text); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.wine-rank__name a:hover { color: var(--accent-text); }
.wine-rank__name small { color: var(--text-3); font-size: 12px; }
.wine-rank__count { color: var(--text-2); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* The weak list has no bar: name, count, match. */
.wine-rank li:not(:has(meter)) { grid-template-columns: 10px minmax(0, 1fr) 52px 52px; }

.match-pill {
  justify-self: end;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.match-pill--high { color: var(--ok); background: var(--ok-soft); }
.match-pill--mid { color: var(--text-2); background: var(--surface-3); }
.match-pill--low { color: var(--danger); background: var(--danger-soft); }

.stats-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stats-table td meter { width: 110px; vertical-align: middle; }
.stats-table td small { display: block; }

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .kpi-grid { gap: 8px; }
  .kpi { padding: 12px; }
  .kpi-value { font-size: 22px; }
  .chart-pair,
  .chart-pair--wide-left { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .chart-card { padding: 14px 12px 8px; }
  .insights { padding: 14px; }
  .segmented { width: 100%; }
  .segmented a { flex: 1; text-align: center; }
  .wine-rank li { grid-template-columns: 10px minmax(0, 1fr) 40px 48px; }
  .wine-rank li meter { display: none; }
  /* A restaurant: its name across, then the figures in two labelled columns. */
  table.stats-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 4px; }
  table.stats-table td:first-child { grid-column: 1 / -1; }
  table.stats-table td:nth-child(2) { display: none; }
  table.stats-table td[data-label]::before {
    display: block;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
    content: attr(data-label);
  }
  .stats-table .num { text-align: left; }
  .stats-table td meter { width: 100%; }

  /* The day chart keeps its readable size and scrolls sideways. */
  .chart-card--wide { overflow-x: auto; }
  .chart-card--wide .chart { min-width: 680px; }
}

/* --- One restaurant's workplace (partials/tenant-header.php) ----------------- */

.tenant-head { margin: 0 0 8px; }

.tenant-back {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.tenant-back:hover { color: var(--accent-text); }

.tenant-head__main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
}

.tenant-head__main p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.status-badge--suspended { color: var(--warn); background: var(--warn-soft); }

.usage-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.usage-cell .chart-spark { width: 88px; height: 24px; }

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

@media (max-width: 860px) {
  table.tenant-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 4px; }
  table.tenant-table td:first-child { grid-column: 1 / -1; }
  table.tenant-table td[data-label]::before {
    display: block;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
    content: attr(data-label);
  }
  .tenant-table .num { text-align: left; }
}

/* --- Verkoop (templates/sales.php, sales-lead.php, partials/sales-pilot.php) -- */
.kpi-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0; }
.kpi-grid--compact .kpi-value { font-size: 20px; }

.stage-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.stage-badge--gecontacteerd { color: var(--accent-text); background: var(--accent-soft); }
.stage-badge--demo,
.stage-badge--pilot { color: var(--warn); background: var(--warn-soft); }
.stage-badge--klant,
.stage-badge--partner { color: var(--ok); background: var(--ok-soft); }
.stage-badge--verloren,
.stage-badge--niet_contacteren { color: var(--text-3); background: var(--surface-3); }

.goal-list,
.funnel,
.next-steps,
.history-list { display: grid; margin: 0; padding: 0; list-style: none; }

.goal-list li,
.funnel li {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.goal-list li:last-child,
.funnel li:last-child { border-bottom: 0; }
.goal-list li > span:first-child,
.funnel li > span:first-child { font-weight: 600; }
.goal-list small { margin-left: 6px; color: var(--text-3); font-weight: 400; }
.goal-list li > span:last-child,
.funnel li > span:nth-of-type(2) { min-width: 56px; color: var(--text-2); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.goal-list meter,
.funnel meter { width: 100%; height: 8px; }
.funnel-step { grid-column: 1 / -1; color: var(--text-3); font-size: 12px; }

.next-steps li,
.history-list li {
  display: grid;
  grid-template-columns: 84px minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.next-steps li:last-child,
.history-list li:last-child { border-bottom: 0; }
.next-steps time,
.history-list time { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.next-steps a { color: var(--text); font-weight: 600; text-decoration: none; }
.next-steps a:hover { color: var(--accent-text); }
.next-steps span,
.history-list span { color: var(--text-2); font-size: 13px; }
.history-list strong { font-size: 12.5px; }
.history-list li.is-move strong,
.history-list li.is-move span { color: var(--text-3); }
.next-steps li.is-late time,
td.is-late,
.hint.is-late { color: var(--danger); font-weight: 600; }

.row-sub { display: block; color: var(--text-3); font-size: 12px; font-weight: 400; }
td > .row-sub:only-child { display: inline; }
.subheading { margin: 18px 0 6px; font-size: 13px; }
.breadcrumb { margin: 0 0 4px; color: var(--text-3); font-size: 12.5px; }
.breadcrumb a { color: inherit; }
.page-heading .stage-badge { margin-right: 6px; }
.pilot-card .section-heading h2 a { color: inherit; text-decoration: none; }
.pilot-card .inline-editor { margin-top: 10px; }
.danger-zone { margin: 0 16px 16px; padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
  .kpi-grid--six,
  .kpi-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  table.sales-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 4px; }
  table.sales-table td:first-child { grid-column: 1 / -1; }
  table.sales-table td[data-label]::before {
    display: block;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
    content: attr(data-label);
  }
  .sales-table .num { text-align: left; }
  .next-steps li,
  .history-list li { grid-template-columns: 70px minmax(0, 1fr); }
  .next-steps li > span,
  .history-list li > span { grid-column: 2; }
}

/* --- Smaakkaart (partials/statistics-tastemap.php): "Wat Leuven drinkt" ----- */
.tastemap-filter { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.tastemap-export { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 8px; }
.tastemap-export .hint { margin: 0; }
.tastemap-heading { margin: 26px 0 10px; font-size: 18px; }
.tastemap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tastemap-question { margin: 0; }
.tastemap-question h3 { margin: 0; font-size: 15px; }
.tastemap-question .hint { margin: 2px 0 8px; }
.share-cell { display: grid; grid-template-columns: minmax(48px, 1fr) 38px 30px; align-items: center; gap: 6px; }
.share-cell small { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.delta--chance { color: var(--text-3); background: var(--surface-3); }
.share-cell meter { width: 100%; height: 8px; }
.share-cell strong { font-variant-numeric: tabular-nums; text-align: right; }
.tastemap-table td { font-variant-numeric: tabular-nums; }
.tastemap-table tr.is-internal td { color: var(--text-3); }
.tastemap-table th small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.tastemap-table td, .tastemap-table th { white-space: nowrap; }
.tastemap-table td:first-child { white-space: normal; min-width: 90px; }
.headline-list li small { display: block; color: var(--text-3); font-size: 12px; }
.tastemap-method { margin-top: 18px; }
.tastemap-method-body { display: grid; gap: 4px; max-width: 72ch; color: var(--text-2); font-size: 13.5px; }

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

@media (max-width: 1100px) {
  .tastemap-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .tastemap-filter { grid-template-columns: minmax(0, 1fr); }
  table.tastemap-table tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 12px; padding: 12px 4px; }
  table.tastemap-table td:first-child,
  table.tastemap-table td:nth-child(2) { grid-column: 1 / -1; }
  table.tastemap-table td[data-label]::before {
    display: block;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
    content: attr(data-label);
  }
  .tastemap-table .num { text-align: left; }
}

/* Prevent focus-triggered iOS zoom without disabling the reader's own zoom.
   Keep the floor above compact table, authentication and card field rules. */
@media (max-width: 900px), (pointer: coarse) {
  input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"]),
  select, textarea, [contenteditable="true"] {
    font-size: max(16px, 1em) !important;
  }
}

/* The per-restaurant approvals above the new wines: one button per
   restaurant with two or more approvable wines. */
.proposal-bulk--restaurants { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; }
.proposal-bulk--restaurants form { display: contents; }

/* A draft put back by the form memory (server/assets/form-memory.js): said
   once, at the top of the form, with one button to start over. */
.form-memory-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid rgba(122, 27, 46, 0.28); border-radius: 10px; background: rgba(122, 27, 46, 0.06); font-size: 13px; line-height: 1.45; }
.form-memory-forget { appearance: none; border: 1px solid rgba(122, 27, 46, 0.5); border-radius: 999px; padding: 5px 12px; background: transparent; color: #7A1B2E; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.form-memory-forget:hover { background: rgba(122, 27, 46, 0.1); }
.form-memory-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 8px 12px; border: 1px dashed rgba(122, 27, 46, 0.4); border-radius: 10px; font-size: 13px; line-height: 1.45; }
.form-memory-hint a { color: #7A1B2E; font-weight: 600; }

/* --- One family with the restaurant app (Victor, 9 October 2026) ------------
   "Je mag mijn platform analoog houden aan het tenantplatform": the same
   visual guidelines and criteria. The restaurant app's porcelain neutrals (no
   beige or brown), its wine red, its two self-hosted faces (DigiSomm Display for
   titles, Commissioner for text, served from our own host through the shared
   font route), its glass capsule at the thumb and its movement. Written as
   one block over the earlier tokens, so every rule above keeps working. */
@font-face { font-family: "DigiSomm Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/shared/site-fonts/digisomm-display-latin.woff2") format("woff2"); }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/shared/site-fonts/commissioner-latin.woff2") format("woff2"); }
:root {
  --font: "Commissioner", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-display: "DigiSomm Display", Georgia, serif;
  --bg: #f6f5f8;
  --surface: #ffffff;
  --surface-2: #faf9fb;
  --surface-3: #efedf2;
  --line: #e3dfe7;
  --line-strong: #cfc9d4;
  --text: #221b26;
  --text-2: #5e5664;
  --text-3: #857c8c;
  --accent: #7a1b2e;
  --accent-hover: #611526;
  --accent-text: #7a1b2e;
  --accent-soft: #f4e8ec;
  --accent-line: #e2c3cb;
  --rail-bg: #ffffff;
  --rail-line: #e9e5ec;
  --glass-fill: rgba(255, 255, 255, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.8);
  --glass-lens: rgba(255, 255, 255, 0.66);
  --glass-lens-edge: rgba(255, 255, 255, 0.95);
  --glass-shade: rgba(34, 27, 38, 0.1);
  --raise-2: rgba(34, 27, 38, 0.07);
  --raise-3: rgba(34, 27, 38, 0.13);
}
:root[data-ds-mode="night"] {
  color-scheme: dark;
  --bg: #141116;
  --surface: #1d1920;
  --surface-2: #211c24;
  --surface-3: #27222b;
  --line: #342e39;
  --line-strong: #4a4250;
  --text: #f1edf4;
  --text-2: #b3aab9;
  --text-3: #8e8595;
  --accent: #b3344f;
  --accent-hover: #c64260;
  --accent-text: #eb5d66;
  --accent-soft: #3a151d;
  --accent-line: #5a2a36;
  --rail-bg: #19151b;
  --rail-line: #2a242e;
  --glass-fill: rgba(40, 34, 44, 0.74);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-lens: rgba(255, 255, 255, 0.12);
  --glass-lens-edge: rgba(255, 255, 255, 0.24);
  --glass-shade: rgba(0, 0, 0, 0.4);
  --raise-2: rgba(0, 0, 0, 0.3);
  --raise-3: rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ds-mode]) {
    color-scheme: dark;
    --bg: #141116;
    --surface: #1d1920;
    --surface-2: #211c24;
    --surface-3: #27222b;
    --line: #342e39;
    --line-strong: #4a4250;
    --text: #f1edf4;
    --text-2: #b3aab9;
    --text-3: #8e8595;
    --accent: #b3344f;
    --accent-hover: #c64260;
    --accent-text: #eb5d66;
    --accent-soft: #3a151d;
    --accent-line: #5a2a36;
    --rail-bg: #19151b;
    --rail-line: #2a242e;
    --glass-fill: rgba(40, 34, 44, 0.74);
    --glass-edge: rgba(255, 255, 255, 0.14);
    --glass-lens: rgba(255, 255, 255, 0.12);
    --glass-lens-edge: rgba(255, 255, 255, 0.24);
    --glass-shade: rgba(0, 0, 0, 0.4);
    --raise-2: rgba(0, 0, 0, 0.3);
    --raise-3: rgba(0, 0, 0, 0.45);
  }
}
body { font-family: var(--font); }
/* Titles in the display face, as the restaurant app's page titles. */
.page-heading h1, .page-intro h1, .auth-card h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }

/* Movement, as in the restaurant app: a page arrives rather than appears.
   On a phone only (12 October 2026, Victor: the panel "begint enorm te
   blokkeren"): a cross-document view transition snapshots the whole old page
   before the new one may paint, and on a laptop the panel's pages are long
   (the catalogue, the inbox, the restaurants), so every click paid for a
   screenshot of a thousand rows. The phone's pages are short and the
   transition is what makes the installed app feel like one. */
@media (max-width: 860px) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: 140ms ease-out both ds-vt-out; }
::view-transition-new(root) { animation: 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both ds-vt-in; }
@keyframes ds-vt-out { to { opacity: 0; } }
@keyframes ds-vt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes ds-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
details[open] > :not(summary) { animation: ds-settle 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
:is(.primary-button, .secondary-button, .danger-button, .button, button.btn) { transition: transform 120ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease; }
:is(.primary-button, .secondary-button, .danger-button, .button, button.btn):active { transform: scale(0.98); }
.card, .panel { box-shadow: 0 1px 2px var(--raise-2), 0 10px 24px -20px var(--raise-3); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  details[open] > :not(summary) { animation: none; }
  :is(.primary-button, .secondary-button, .danger-button, .button, button.btn):active { transform: none; }
}

@media (max-width: 860px) {
  /* The top bar: the denser veil, so what scrolls under it never reads through. */
  .utility-bar { background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); view-transition-name: ds-topbar; }
  /* The tab bar: the restaurant app's glass capsule, the current tab under a
     lens with a touch of bordeaux. */
  .tab-bar {
    right: auto;
    left: 50%;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: min(calc(100% - 24px), 440px);
    min-height: 60px;
    padding: 4px;
    background: var(--glass-fill);
    border: 1px solid var(--glass-edge);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 var(--glass-lens-edge), inset 0 -1px 0 var(--glass-shade), 0 1px 2px var(--raise-2), 0 18px 40px -16px var(--raise-3);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
    transform: translateX(-50%);
    view-transition-name: ds-tabbar;
  }
  .tab-bar > a, .tab-bar > button { min-height: 52px; gap: 2px; padding: 5px 2px 4px; border-radius: 999px; font-size: 10.5px; }
  .tab-bar .ui-icon { width: 21px; height: 21px; }
  .tab-bar [aria-current="page"] {
    color: var(--accent-text);
    background: color-mix(in srgb, var(--accent) 11%, var(--glass-lens));
    box-shadow: inset 0 1px 0 var(--glass-lens-edge), inset 0 0 0 1px var(--glass-edge), inset 0 -2px 4px var(--glass-shade), 0 8px 18px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

/* "Meer" menus, as in the restaurant app. */
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; cursor: pointer; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; width: min(300px, calc(100vw - 32px)); padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -16px var(--raise-3); }
.action-menu-list a { display: grid; gap: 2px; padding: 10px 12px; color: var(--text); border-radius: 10px; font-weight: 600; text-decoration: none; }
.action-menu-list a small { color: var(--text-2); font-size: 12.5px; font-weight: 400; }
@media (hover: hover) { .action-menu-list a:hover { background: var(--surface-3); } }

/* The restaurant switch above a wine list (Assortimenten folded into the
   restaurant's workplace, 9 October 2026). */
.restaurant-switch {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-right: auto;
}
.restaurant-switch .field { margin: 0; min-width: min(320px, 100%); }
.restaurant-switch .field > span { font-size: 12px; color: var(--text-3); }
@media (max-width: 860px) {
  .restaurant-switch { flex: 1 1 100%; }
  .restaurant-switch .field { flex: 1; min-width: 0; }
}

/* Facturatie: whether an invoice can be made, and what the restaurant filled in
   (9 October 2026). */
.invoice-ready { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); }
.invoice-ready--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.invoice-ready--gap { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.invoice-identity { margin-bottom: 8px; }

/* "Klaar voor gasten" on a restaurant's overview (9 October 2026). */
.onboarding-steps { margin-bottom: 16px; }
.onboarding-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.onboarding-list li { display: flex; align-items: flex-start; gap: 10px; }
.onboarding-list small { display: block; color: var(--text-3); }
.onboarding-mark {
  flex: none; width: 20px; height: 20px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 12px; line-height: 1;
  border: 1.5px solid var(--line);
}
.onboarding-list .is-done .onboarding-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.onboarding-list .is-done strong { color: var(--text-3); font-weight: 500; }

/* A wine list into a restaurant's concept without a scan (9 October 2026). */
.concept-import { margin-top: 16px; }
.concept-import > summary small { display: block; margin-top: 2px; color: var(--text-3); font-weight: 400; }

/* --- Assortimenten (9 October 2026) ---------------------------------------------
   Every restaurant's list at a glance, and per restaurant the card and its
   concept side by side, so what happens to a wine is said, not guessed. */
.assortment-overview { margin-bottom: 16px; }
.assortment-summary { margin: 12px 0 16px; }
.assortment-group-title {
  margin: 18px 0 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}
.assortment-group-title:first-of-type { margin-top: 4px; }
.assortment-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.assortment-diff { margin: 12px 14px 0; }
.assortment-layer-title {
  margin: 0 0 10px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}
.assigned-wine-row > form + form { padding-top: 14px; border-top: 1px solid var(--line); }
.layer-choice {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 0;
  border: 0;
}
.layer-choice legend { margin-bottom: 6px; font-weight: 600; font-size: 13.5px; }

@media (max-width: 860px) {
  .assortment-badges { justify-content: flex-start; }
}

/* A fixed width (Victor, 9 October 2026: "de volledige applicatie moet een
   fixed width hebben. Er mag niet ingezoomd worden, er mag niets buiten
   scherm"). The viewport refuses zoom, a double tap does not zoom, and nothing
   may push the page sideways: what is wider (a long table) scrolls inside its
   own box. clip, not hidden, so sticky bars keep working. */
html { touch-action: manipulation; }
html, body { max-width: 100%; overflow-x: clip; }
img, video, canvas { max-width: 100%; }

/* The Facturatie tab (10 October 2026): invoices first, the agreement as a
   line that opens to change it, the restaurant's details in two columns, each
   part separated by a hairline instead of one long column of forms. */
.billing-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.billing-block > h3 { margin-top: 0; }
.billing-block .button-row { margin: 4px 0 16px; }
.billing-agreement > summary > span:first-child { display: grid; gap: 2px; min-width: 0; }
.billing-agreement__terms { color: var(--text-2); font-size: 13px; }
.billing-agreement > form { padding: 4px 16px 16px; }
.billing-agreement[open] > summary { border-bottom: 1px solid var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (min-width: 900px) {
  .invoice-identity { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .invoice-identity > div:nth-last-child(2) { border-bottom: 0; }
}
.invoice-table .num { white-space: nowrap; }
.invoice-table td small { display: block; margin-top: 4px; color: var(--text-2); }
@media (max-width: 860px) {
  table.invoice-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  table.invoice-table td:nth-child(4), table.invoice-table td:nth-child(5) { grid-column: 1 / -1; }
  table.invoice-table td[data-label]::before {
    display: block;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
    content: attr(data-label);
  }
  .invoice-table .num { text-align: left; }
}

/* A label that names no grape (11 October 2026): what the appellation usually
   is, under the appellation, a tap per grape into the grapes field. */
.grape-hint { grid-column: 1 / -1; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); color: var(--text); }
.grape-hint[hidden] { display: none; }
.grape-hint p { margin: 0 0 8px; }
.grape-hint-grapes { display: flex; flex-wrap: wrap; gap: 6px; }
.grape-hint-grapes:empty { display: none; }
.grape-hint-grape { min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.grape-hint-grape[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.grape-hint-grape[aria-pressed="true"]::before { content: "✓ "; }

/* The live layer (12 October 2026): a page that arrives settles in, and a thin
   line at the top says the panel is fetching. */
.region-enter { animation: ds-settle 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.live-progress { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 40%, var(--accent) 60%, transparent); transform: translateX(-100%); opacity: 0; pointer-events: none; }
.live-progress.is-on { opacity: 1; animation: live-progress 900ms cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes live-progress { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
[aria-busy="true"] { opacity: 0.6; }
.is-leaving { transition: opacity 240ms ease, transform 240ms ease; opacity: 0; transform: translateY(-6px); }
/* The owner's favourites as a tab beside the colours, not a tick in the filter bar. */
.colour-tab--fav { margin-left: auto; }
.colour-tab--fav .fav-star { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .region-enter, .live-progress.is-on { animation: none; }
  .is-leaving { transition: none; }
}