/* No-Li River control layer
 * Tier 1 tokens and Tier 2 controls.  Components intentionally stay semantic:
 * page-specific palettes belong nowhere but the token contract below.
 */

:root {
  color-scheme: dark;

  /* brand */
  --nc-red: #E02826;
  --nc-red-press: #AF272F;
  --nc-cream: #FFF1D2;
  --nc-ink: #171512;

  /* surfaces and text */
  --nc-bg: #141312;
  --nc-panel: #232120;
  --nc-panel-2: #191817;
  --nc-raised: #2b2927;
  --nc-border: #504b44;
  --nc-text: #f3efe6;
  --nc-dim: #b3ab9c;

  /* status */
  --nc-ok: #86efac;
  --nc-warn: #fcd34d;
  --nc-danger: #fca5a5;
  --nc-info: #9fc4e8;
  --nc-ok-bg: color-mix(in srgb, var(--nc-ok) 14%, transparent);
  --nc-warn-bg: color-mix(in srgb, var(--nc-warn) 14%, transparent);
  --nc-danger-bg: color-mix(in srgb, var(--nc-danger) 14%, transparent);
  --nc-info-bg: color-mix(in srgb, var(--nc-info) 14%, transparent);

  /* Production lifecycle encoding: three loud actions, three quiet occupancy
   * states, and a neutral empty cell. Keep these shared across schedules. */
  --nc-schedule-brew-bg: #22C55E;
  --nc-schedule-brew-text: #071A0D;
  --nc-schedule-package-bg: #FACC15;
  --nc-schedule-package-text: #171512;
  --nc-schedule-package-detail-text: var(--nc-text);
  --nc-schedule-filter-bg: #C81E1E;
  --nc-schedule-filter-text: #FFF1D2;
  --nc-schedule-ferment-bg: #252A27;
  --nc-schedule-ferment-text: #C4CEC5;
  --nc-schedule-brite-bg: #29261D;
  --nc-schedule-brite-text: #D6C9A4;
  --nc-schedule-open-bg: #20282C;
  --nc-schedule-open-text: #B9CBD3;
  --nc-schedule-empty-bg: #191817;
  --nc-schedule-empty-text: #B3AB9C;
  --nc-schedule-weekend-bg: #11100F;
  --nc-schedule-weekend-text: #847D72;

  /* type */
  --nc-font-display: 'Anton', sans-serif;
  --nc-font-ui: 'DM Sans', system-ui, sans-serif;
  --nc-font-mono: ui-monospace, 'IBM Plex Mono', Menlo, monospace;
  --t-display: clamp(32px, 5vw, 56px);
  --t-title: 22px;
  --t-section: 17px;
  --t-body: 14px;
  --t-native-input: 16px; /* Prevent iOS zoom on focused form fields. */
  --t-dense: 12px;
  --t-micro: 12px;

  /* space, radius, elevation, motion, touch */
  --s-0: 2px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --r-std: 8px;
  --r-card: 12px;
  --r-pill: 999px;
  --nc-hairline: color-mix(in srgb, var(--nc-border) 72%, transparent);
  --nc-shadow-raised: 0 10px 24px color-mix(in srgb, var(--nc-ink) 22%, transparent);
  --m-fast: 120ms;
  --m-std: 180ms;
  --m-settle: 240ms;
  --nc-touch: 44px;
  --nc-touch-primary: 48px;
  /* Desktop height of the River primary and the actions beside it; phones
   * keep --nc-touch. */
  --nc-primary-h: 40px;

  /* River primary button: INK (Cole picked it 2026-09-24 over glass and
   * slate). Red is for destructive actions only (.nc-btn-danger). Every
   * property of the shared rule set below reads one of these tokens; dark
   * values here, light in the light-theme block. In dark the key inverts to cream
   * on ink (near-black would vanish on the #141312 ground), ink on #F2EFE8
   * 16.4:1. */
  --nc-primary: #F2EFE8;
  --nc-primary-hover: #FFFFFF;
  --nc-primary-press: #DAD5CB;
  --nc-primary-ink: #121110;
  --nc-primary-edge: #F2EFE8;
  --nc-primary-sheen: transparent;
  --nc-primary-highlight: rgba(255, 255, 255, .5);
  --nc-primary-shade: rgba(0, 0, 0, .22);
  --nc-primary-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --nc-primary-hover-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px -4px rgba(0, 0, 0, .6);
  --nc-primary-blur: none;
  --nc-primary-ring: #F2EFE8;
}

html.nc-light {
  color-scheme: light;
  --nc-ink: #171512;
  --nc-bg: #f4f1e8;
  --nc-panel: #ffffff;
  --nc-panel-2: #f7f4ea;
  --nc-raised: #ffffff;
  --nc-border: #d7d1c0;
  --nc-text: #1a1714;
  --nc-dim: #6d675a;
  /* Darker light-theme status inks keep 12px badge text above 4.5:1 on
   * the component's own 10% tinted backgrounds. */
  --nc-ok: #166534;
  --nc-warn: #92400e;
  --nc-danger: #b91c1c;
  --nc-info: #1e40af;
  --nc-ok-bg: color-mix(in srgb, var(--nc-ok) 10%, transparent);
  --nc-warn-bg: color-mix(in srgb, var(--nc-warn) 10%, transparent);
  --nc-danger-bg: color-mix(in srgb, var(--nc-danger) 10%, transparent);
  --nc-info-bg: color-mix(in srgb, var(--nc-info) 10%, transparent);
  --nc-schedule-brew-bg: #137A39;
  --nc-schedule-brew-text: #FFF1D2;
  --nc-schedule-package-bg: #EAB308;
  --nc-schedule-package-text: #171512;
  --nc-schedule-package-detail-text: var(--nc-text);
  --nc-schedule-filter-bg: #B91C1C;
  --nc-schedule-filter-text: #FFF1D2;
  --nc-schedule-ferment-bg: #E9EDE8;
  --nc-schedule-ferment-text: #475448;
  --nc-schedule-brite-bg: #F2EDE1;
  --nc-schedule-brite-text: #665426;
  --nc-schedule-open-bg: #E8EEF1;
  --nc-schedule-open-text: #405966;
  --nc-schedule-empty-bg: #FFFFFF;
  --nc-schedule-empty-text: #5D594F;
  --nc-schedule-weekend-bg: #E5E3DD;
  --nc-schedule-weekend-text: #68645B;
  --nc-hairline: color-mix(in srgb, var(--nc-border) 78%, transparent);
  --nc-shadow-raised: 0 10px 24px color-mix(in srgb, var(--nc-ink) 14%, transparent);
  /* Primary, light: warm near-black (--ng-ink1), white 17.4:1. */
  --nc-primary: #1B1A17;
  --nc-primary-hover: #2E2C28;
  --nc-primary-press: #0C0B0A;
  --nc-primary-ink: #FFFFFF;
  --nc-primary-edge: #1B1A17;
  /* Matte (Cole 2026-09-24: less glossy): no top sheen, a faint top edge. */
  --nc-primary-sheen: transparent;
  --nc-primary-highlight: rgba(255, 255, 255, .05);
  --nc-primary-shade: rgba(0, 0, 0, .5);
  --nc-primary-shadow: 0 1px 2px rgba(27, 26, 23, .2);
  --nc-primary-hover-shadow: 0 1px 2px rgba(27, 26, 23, .2), 0 4px 12px -4px rgba(27, 26, 23, .35);
  --nc-primary-ring: #1B1A17;
}

/* Shared control geometry and the single accessible focus treatment. */
:where(.nc-btn, .nc-input, .nc-select, .nc-stepper, .nc-form input, .nc-form select, .nc-form textarea,
  .nc-form button, .nc-tabs [role='tab'], .nc-overflow > summary,
  .nc-overflow > button):focus-visible {
  outline: 3px solid var(--nc-info);
  outline-offset: 2px;
}

/* Buttons: .nc-btn alone is subordinate/secondary for compatibility. */
.nc-btn,
button.nc-btn,
a.nc-btn {
  align-items: center;
  appearance: none;
  background: var(--nc-panel-2);
  border: 1px solid var(--nc-border);
  border-radius: var(--r-std);
  box-sizing: border-box;
  color: var(--nc-text);
  cursor: pointer;
  display: inline-flex;
  font: 500 var(--t-body)/1 var(--nc-font-ui);
  gap: var(--s-2);
  justify-content: center;
  min-height: var(--nc-touch);
  padding: var(--s-2) var(--s-3);
  text-decoration: none;
  transition: background var(--m-fast) ease-out, border-color var(--m-fast) ease-out,
    color var(--m-fast) ease-out, transform var(--m-fast) ease-out;
  white-space: nowrap;
}

/* Record links may carry an identifier, site and date without clipping phones. */
.nc-btn.nc-btn-wrap {
  max-width: 100%; min-width: 0; white-space: normal;
  overflow-wrap: anywhere; line-height: 1.4; text-align: left;
}

.nc-btn:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--nc-raised);
  border-color: var(--nc-info);
}

.nc-btn:active:not(:disabled):not([aria-disabled='true']) {
  filter: brightness(.95);
}

.nc-btn:disabled,
.nc-btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: .55;
}

.nc-btn-primary,
.nc-btn.primary {
  background: var(--nc-info);
  border-color: var(--nc-info);
  color: var(--nc-ink);
  font-weight: 700;
}

.nc-btn-primary:hover:not(:disabled):not([aria-disabled='true']),
.nc-btn.primary:hover:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--nc-info) 82%, var(--nc-ink));
  border-color: color-mix(in srgb, var(--nc-info) 82%, var(--nc-ink));
}

html.nc-light .nc-btn-primary,
html.nc-light .nc-btn.primary { color: var(--nc-panel); }

.nc-btn-secondary,
.nc-btn.secondary { background: var(--nc-panel-2); }

.nc-btn-ghost,
.nc-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--nc-dim);
}

.nc-btn-ghost:hover:not(:disabled):not([aria-disabled='true']),
.nc-btn.ghost:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--nc-panel-2);
  border-color: var(--nc-border);
  color: var(--nc-text);
}

.nc-btn-danger,
.nc-btn.danger {
  background: var(--nc-danger-bg);
  border-color: var(--nc-danger);
  color: var(--nc-danger);
}

.nc-btn-approve,
.nc-btn.approve {
  background: var(--nc-ok-bg);
  border-color: var(--nc-ok);
  color: var(--nc-ok);
  font-weight: 700;
}

/* River currently loads legacy page manifests before this layer. Keep the
 * component contract authoritative even when those manifests use a scoped
 * catch-all button selector. */
html[data-palette='river'] body .nc-btn,
html[data-palette='river'] body button.nc-btn,
html[data-palette='river'] body a.nc-btn {
  background: var(--nc-panel-2);
  border-color: var(--nc-border);
  color: var(--nc-text);
}
/* THE River primary button — one rule set for every primary action: the console
 * kit (.nc-btn-primary / .nc-btn.primary), the glass kit (.ng-primary) and
 * the glass inventory page (.gi-primary). Pages set size and layout only;
 * colour, depth, radius and every state live here (tokens at the top).
 * Press darkens and sinks the key in place — it never moves or resizes
 * (PRESSED-BUTTON-SHRINK, Cole 2026-09-24). */
html[data-palette='river'] body :is(.nc-btn.nc-btn-primary, .nc-btn.primary, .ng-primary, .gi-primary) {
  background-color: var(--nc-primary);
  background-image: linear-gradient(180deg, var(--nc-primary-sheen), transparent 60%);
  border: 1px solid var(--nc-primary-edge);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 var(--nc-primary-highlight), var(--nc-primary-shadow);
  color: var(--nc-primary-ink);
  -webkit-backdrop-filter: var(--nc-primary-blur);
  backdrop-filter: var(--nc-primary-blur);
  filter: none;
  font-weight: 600;
  letter-spacing: .01em;
  transform: none;
  transition: background-color var(--m-fast) ease-out, box-shadow var(--m-fast) ease-out;
}
/* Hover only where a mouse can hover: on an iPad a tapped key must not stay lit. */
@media (hover: hover) {
html[data-palette='river'] body :is(.nc-btn.nc-btn-primary, .nc-btn.primary, .ng-primary, .gi-primary):hover:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--nc-primary-hover);
  border-color: var(--nc-primary-edge);
  box-shadow: inset 0 1px 0 var(--nc-primary-highlight), var(--nc-primary-hover-shadow);
  color: var(--nc-primary-ink);
  filter: none;
}
}
html[data-palette='river'] body :is(.nc-btn.nc-btn-primary, .nc-btn.primary, .ng-primary, .gi-primary):active:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--nc-primary-press);
  background-image: none;
  box-shadow: inset 0 1px 3px var(--nc-primary-shade);
  filter: none;
  transform: none;
}
html[data-palette='river'] body :is(.nc-btn.nc-btn-primary, .nc-btn.primary, .ng-primary, .gi-primary):focus-visible {
  outline: 2px solid var(--nc-primary-ring);
  outline-offset: 2px;
}
/* Disabled: clearly a button, clearly off (owner 2026-09-24 — the panel-2 fill all but
 * vanished on a light page). A flat neutral key with a real edge: no ink, no sheen, no
 * depth, so it never reads as the live primary; the label stays readable (>= 3:1 on
 * its fill, pinned in tests/test_noli_ui_button_contrast.py). Same recipe in dark. */
html[data-palette='river'] body :is(.nc-btn.nc-btn-primary, .nc-btn.primary, .ng-primary, .gi-primary):is(:disabled, [aria-disabled='true']) {
  background-color: color-mix(in srgb, var(--nc-text) 8%, var(--nc-panel));
  background-image: none;
  border-color: color-mix(in srgb, var(--nc-text) 22%, var(--nc-panel));
  box-shadow: none;
  color: var(--nc-text); /* 10/28 rescore: full-ink label (>= 4.5:1 both themes); the pale fill + no depth still read as off */
  opacity: 1;
}
/* Busy: the label hides behind the kit's spinner (.ng-primary[aria-busy]). */
html[data-palette='river'] body :is(.nc-btn.nc-btn-primary, .nc-btn.primary, .ng-primary, .gi-primary)[aria-busy='true'] {
  color: transparent;
}
@media (max-width: 767px) {
  html[data-palette='river'] body :is(.nc-btn.nc-btn-primary, .nc-btn.primary, .ng-primary, .gi-primary) {
    min-height: var(--nc-touch-primary);
  }
}
html[data-palette='river'] body .nc-btn.nc-btn-secondary,
html[data-palette='river'] body .nc-btn.secondary {
  background: var(--nc-panel-2);
  border-color: var(--nc-border);
  color: var(--nc-text);
}
html[data-palette='river'] body .nc-btn.nc-btn-ghost,
html[data-palette='river'] body .nc-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--nc-dim);
}
html[data-palette='river'] body .nc-btn.nc-btn-danger,
html[data-palette='river'] body .nc-btn.danger {
  background: var(--nc-danger-bg);
  border-color: var(--nc-danger);
  color: var(--nc-danger);
}
html[data-palette='river'] body .nc-btn.nc-btn-approve,
html[data-palette='river'] body .nc-btn.approve {
  background: var(--nc-ok-bg);
  border-color: var(--nc-ok);
  color: var(--nc-ok);
}

/* Keep mixed-font symbols optically centred without changing control height. */
.nc-btn-icon {
  align-items: center;
  display: inline-flex;
  line-height: 1;
  transform: translateY(-.5px);
}

/* Form kit: one label convention and one control height. */
.nc-form {
  color: var(--nc-text);
  font: var(--t-body)/1.4 var(--nc-font-ui);
}

.nc-form-row,
.nc-field,
.nc-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.nc-form-row { min-width: 0; }
.nc-form-row > label,
.nc-field > label,
.nc-form-group > label,
.nc-form label { color: var(--nc-dim); font-size: var(--t-dense); font-weight: 700; }

.nc-form :where(input, select, textarea),
.nc-input,
.nc-select,
.nc-stepper {
  background: var(--nc-panel-2);
  border: 1px solid var(--nc-border);
  border-radius: var(--r-std);
  box-sizing: border-box;
  color: var(--nc-text);
  font: 500 var(--t-body)/1 var(--nc-font-ui);
  min-height: var(--nc-touch);
  padding: var(--s-2) var(--s-3);
  width: 100%;
}

.nc-form :where(input, select, textarea):hover,
.nc-input:hover,
.nc-select:hover { border-color: var(--nc-info); }

/* Opt-in native choice row: keep the control beside wrapping label text. */
.nc-form label.nc-choice {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.nc-form label.nc-choice > :is(input[type='checkbox'], input[type='radio']) {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  padding: 0;
}

.nc-form textarea { min-height: calc(var(--nc-touch) * 2); line-height: 1.4; }
.nc-form input[type='number'] { font-variant-numeric: tabular-nums; text-align: right; }
.nc-form input[type='number']::-webkit-inner-spin-button,
.nc-form input[type='number']::-webkit-outer-spin-button { margin: 0; }
.nc-stepper { align-items: center; display: inline-flex; gap: var(--s-2); padding: 0; }
.nc-stepper input { border: 0; min-height: calc(var(--nc-touch) - 2px); min-width: 0; }
.nc-stepper button { align-self: stretch; min-width: var(--nc-touch); }
.nc-form-help { color: var(--nc-dim); font-size: var(--t-dense); }
.nc-form-help--strong { color: var(--nc-text); }
.nc-form-error { color: var(--nc-danger); font-size: var(--t-dense); font-weight: 700; }

/* Shared dialog surface for River editors and legacy dashboard overlays. */
.nc-dialog {
  box-sizing: border-box;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--s-6, 24px);
  border: 1px solid var(--nc-hairline, var(--border, var(--noli-border)));
  border-radius: var(--r-card, 12px);
  background: var(--nc-panel, var(--surface, var(--noli-surface)));
  color: var(--nc-text, var(--text, var(--noli-ink)));
  box-shadow: var(--nc-shadow-raised, 0 20px 60px rgba(0, 0, 0, .2));
}
.nc-dialog--classic {
  border-color: var(--border, var(--noli-border));
  background: var(--surface, var(--noli-surface));
  color: var(--text, var(--noli-ink));
  box-shadow: var(--nc-dialog-classic-shadow, 0 20px 60px rgba(0, 0, 0, .2));
}
.nc-form-inline {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.nc-form-inline > .nc-form-row { flex: 1 1 132px; }
.nc-form-actions {
  align-items: center;
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: var(--s-2);
}
html[data-palette='river'] body .nc-form-inline > .nc-form-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
html[data-palette='river'] body .nc-form-actions {
  border: 0;
  margin-left: 0;
  padding: 0;
}
html[data-palette='river'] body .nc-form :where(input, select, textarea),
html[data-palette='river'] body .nc-input,
html[data-palette='river'] body .nc-select {
  background: var(--nc-panel-2);
  border: 1px solid var(--nc-border);
  border-radius: var(--r-std);
  color: var(--nc-text);
  font: 500 var(--t-body)/1 var(--nc-font-ui);
  min-height: var(--nc-touch);
  padding: var(--s-2) var(--s-3);
  width: 100%;
}
html[data-palette='river'] body .nc-stepper input {
  border: 0;
  min-height: calc(var(--nc-touch) - 2px);
  min-width: 0;
}

@media (max-width: 820px) {
  .nc-form :where(input, select, textarea),
  .nc-input,
  .nc-select,
  .nc-stepper,
  .nc-stepper input { font-size: 16px; }
  html[data-palette='river'] body .nc-form :where(input, select, textarea),
  html[data-palette='river'] body .nc-input,
  html[data-palette='river'] body .nc-select,
  html[data-palette='river'] body .nc-stepper,
  html[data-palette='river'] body .nc-stepper input { font-size: 16px; }
}

/* Tabs: active state is exclusively the accessible aria-selected contract. */
.nc-tabs { color: var(--nc-text); }
.nc-tabs-list {
  align-items: end;
  border-bottom: 1px solid var(--nc-hairline);
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
}
.nc-tabs [role='tab'] {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: var(--r-std) var(--r-std) 0 0;
  color: var(--nc-dim);
  cursor: pointer;
  display: inline-flex;
  font: 700 var(--t-body)/1 var(--nc-font-ui);
  min-height: var(--nc-touch);
  padding: var(--s-2) var(--s-3);
  white-space: nowrap;
}
.nc-tabs [role='tab'][aria-selected='true'] {
  border-bottom-color: var(--nc-info);
  color: var(--nc-info);
}
.nc-tabs [role='tabpanel'] { padding-top: var(--s-4); }

/* Flow cards keep content and actions in normal document flow. */
.nc-content-card { display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: visible; }
.nc-content-body { display: grid; gap: var(--s-3); min-height: 0; overflow: visible; }
.nc-content-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s-2); position: static; }
.nc-status-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
}
.nc-nowrap { white-space: nowrap; }
.nc-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* One compact hierarchy for controls that serve the same working surface. */
.nc-control-strip {
  background: var(--nc-panel);
  border: 1px solid var(--nc-border);
  border-radius: var(--r-card);
  display: grid;
  gap: var(--s-1);
  padding: var(--s-2);
}
.nc-control-strip-row {
  align-items: center;
  display: flex;
  gap: var(--s-2);
  min-width: 0;
}
.nc-control-strip-lead { justify-content: space-between; }
.nc-stat-row {
  align-items: stretch;
  display: flex;
  gap: var(--s-1);
  margin-left: auto;
}
.nc-stat {
  align-items: baseline;
  border-left: 1px solid var(--nc-hairline);
  display: flex;
  gap: var(--s-1);
  min-width: 72px;
  padding: 0 var(--s-2);
  white-space: nowrap;
}
.nc-stat:first-child { border-left: 0; }
.nc-stat .nc-summary-name,
.nc-stat .nc-summary-value { margin: 0; }
.nc-stat .nc-summary-value { font-size: var(--t-section); line-height: 1; }
.nc-disclosure {
  border-top: 1px solid var(--nc-hairline);
  color: var(--nc-text);
}
.nc-disclosure > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--s-2);
  min-height: 40px;
  padding: var(--s-1) var(--s-2);
}
.nc-disclosure > summary { list-style: none; }
.nc-disclosure > summary::-webkit-details-marker { display: none; }
.nc-disclosure > summary::before {
  content: ''; width: 8px; height: 8px; flex: 0 0 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.nc-disclosure[open] > summary::before { transform: rotate(45deg); }
.nc-disclosure > summary .nc-muted { font-size: var(--t-dense); }

/* Earned empty states: loading, empty and error are distinct states. */
.nc-empty {
  align-items: center;
  background: var(--nc-panel-2);
  border: 1px dashed var(--nc-border);
  border-radius: var(--r-card);
  box-sizing: border-box;
  color: var(--nc-dim);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  justify-content: center;
  min-height: 120px;
  padding: var(--s-6);
  text-align: center;
}
.nc-empty[hidden] { display: none; }
/* Table empty states share their containing worksheet's surface. */
.nc-table td.nc-empty { background: transparent; }
.nc-empty-title { color: var(--nc-text); font-size: var(--t-section); font-weight: 700; }
.nc-empty-message { max-width: 52ch; }
.nc-empty-error .nc-empty-title,
.nc-empty[data-state='error'] .nc-empty-title { color: var(--nc-danger); }
.nc-empty-loading { border-style: solid; }
.nc-empty-loading::before,
.nc-empty[data-state='loading']::before {
  animation: nc-loading var(--m-settle) ease-in-out infinite alternate;
  background: var(--nc-raised);
  border-radius: var(--r-pill);
  content: '';
  height: var(--s-2);
  width: min(240px, 70%);
}
@keyframes nc-loading { from { opacity: .45; } to { opacity: 1; } }

/* Chips and badges communicate status only; they are never navigation. */
.nc-chip,
.nc-badge {
  align-items: center;
  background: var(--nc-info-bg);
  border: 1px solid var(--nc-info);
  border-radius: var(--r-pill);
  color: var(--nc-info);
  display: inline-flex;
  font: 700 var(--t-dense)/1 var(--nc-font-ui);
  gap: var(--s-1);
  min-height: calc(var(--nc-touch) / 2);
  padding: var(--s-1) var(--s-2);
  white-space: nowrap;
}
.nc-chip-ok, .nc-chip.good, .nc-chip-good,
.nc-badge-ok, .nc-badge.good, .nc-badge-done { background: var(--nc-ok-bg); border-color: var(--nc-ok); color: var(--nc-ok); }
.nc-chip-warn, .nc-chip.warning,
.nc-badge-warn, .nc-badge.warn, .nc-badge-open { background: var(--nc-warn-bg); border-color: var(--nc-warn); color: var(--nc-warn); }
.nc-chip-danger, .nc-chip.bad, .nc-chip-bad,
.nc-badge-danger, .nc-badge.bad, .nc-badge-bad { background: var(--nc-danger-bg); border-color: var(--nc-danger); color: var(--nc-danger); }
.nc-chip-info, .nc-chip.info, .nc-badge-info, .nc-badge.info { background: var(--nc-info-bg); border-color: var(--nc-info); color: var(--nc-info); }

/* Row-level secondary actions. Supports details/summary and button-based menus. */
.nc-overflow { display: inline-block; position: relative; }
.nc-overflow > summary,
.nc-overflow > button {
  align-items: center;
  appearance: none;
  background: var(--nc-panel-2);
  border: 1px solid var(--nc-border);
  border-radius: var(--r-std);
  color: var(--nc-text);
  cursor: pointer;
  display: inline-flex;
  font: 700 var(--t-body)/1 var(--nc-font-ui);
  justify-content: center;
  list-style: none;
  min-height: var(--nc-touch);
  min-width: var(--nc-touch);
  padding: var(--s-2);
}
.nc-overflow > summary::-webkit-details-marker { display: none; }
.nc-overflow-menu,
.nc-overflow > ul {
  background: var(--nc-panel);
  border: 1px solid var(--nc-border);
  border-radius: var(--r-std);
  box-shadow: var(--nc-shadow-raised);
  display: none;
  list-style: none;
  margin: var(--s-1) 0 0;
  min-width: 180px;
  padding: var(--s-1);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
}
.nc-overflow[open] > .nc-overflow-menu,
.nc-overflow[open] > ul,
.nc-overflow[data-open='true'] .nc-overflow-menu { display: grid; }
.nc-overflow-menu a,
.nc-overflow-menu button,
.nc-overflow > ul a,
.nc-overflow > ul button {
  background: transparent;
  border: 0;
  border-radius: var(--r-std);
  color: var(--nc-text);
  display: block;
  font: 500 var(--t-body)/1.2 var(--nc-font-ui);
  min-height: var(--nc-touch);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  text-decoration: none;
  width: 100%;
}
.nc-overflow-menu a:hover,
.nc-overflow-menu button:hover,
.nc-overflow > ul a:hover,
.nc-overflow > ul button:hover { background: var(--nc-panel-2); }
.nc-overflow-menu .danger,
.nc-overflow > ul .danger { color: var(--nc-danger); }

/* Dense owner worksheet: compact rows, aligned numerals, and unwrappable actions. */
.nc-table-dense { font-size: var(--t-dense); line-height: 1; }
.nc-table-dense :is(th, td) { padding: var(--s-1) var(--s-2); }
.nc-table-dense .nc-num { font-variant-numeric: tabular-nums; text-align: right; }
.nc-table-dense :is(input[type='number'], .nc-num) { font-variant-numeric: tabular-nums; }
.nc-table-dense input[type='number'] { appearance: textfield; text-align: right; }
.nc-table-dense input[type='number']::-webkit-inner-spin-button,
.nc-table-dense input[type='number']::-webkit-outer-spin-button { appearance: none; margin: 0; }
.nc-table-dense .nc-row-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: nowrap;
  min-width: max-content;
  white-space: nowrap;
}
.nc-table-dense .nc-row-actions :is(.nc-btn, .nc-overflow > summary) {
  min-height: 32px;
  padding: var(--s-1) var(--s-2);
}

/* The shipments page keeps the shared Distribution nav compact (its content is the kit's). */
.river-distribution-shipments .river-wrap { padding-top: var(--s-3); }

.river-distribution-shipments .river-dist-nav-stack { gap: var(--s-0); margin-bottom: var(--s-2); }
.river-distribution-shipments .river-dist-nav { padding: var(--s-0) var(--s-1); }
.river-distribution-shipments .river-dist-nav-global .river-dist-nav-link { min-height: 24px; padding-block: var(--s-0); }
.river-distribution-shipments .river-dist-nav-domain .river-dist-nav-link { min-height: 30px; padding-block: var(--s-1); }

/* Distributor inventory uses the same compact worksheet composition. */
.river-distribution-inventory .river-wrap { padding-top: var(--s-3); }
.river-distribution-inventory .river-top { padding-bottom: var(--s-2); }
.river-distribution-inventory .river-title { font-size: 28px; }
.river-distribution-inventory .river-sub { margin-top: var(--s-0); }
.river-distribution-inventory .river-dist-nav-stack { gap: var(--s-0); margin-bottom: var(--s-2); }
.river-distribution-inventory .river-dist-nav { padding: var(--s-0) var(--s-1); }
.river-distribution-inventory .river-dist-nav-global .river-dist-nav-link { min-height: 24px; padding-block: var(--s-0); }
.river-distribution-inventory .river-dist-nav-domain .river-dist-nav-link { min-height: 30px; padding-block: var(--s-1); }
.river-distribution-inventory .river-dist-main { gap: var(--s-1); }
.river-distribution-inventory .nc-control-strip { padding: var(--s-1); }
.river-distribution-inventory .nc-control-strip .river-dist-primary-actions { flex-wrap: nowrap; justify-content: flex-start; }
.river-distribution-inventory .nc-control-strip :is(button, select, input[type='search']) { min-height: 32px; }
.river-distribution-inventory .nc-control-strip .nc-toggle { min-height: 32px; white-space: nowrap; }
.river-distribution-inventory .nc-control-strip .di-tabs {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
}
.river-distribution-inventory .di-picker-label {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--s-1);
  white-space: nowrap;
}
.river-distribution-inventory .di-picker-label > span { color: var(--nc-dim); font-size: var(--t-dense); font-weight: 700; }
.river-distribution-inventory .di-picker-label select { min-width: 176px; }
.river-distribution-inventory .nc-control-strip-tools {
  display: grid;
  grid-template-areas:
    'picker controls'
    'stats stats';
  grid-template-columns: minmax(248px, max-content) minmax(0, 1fr);
  justify-content: stretch;
}
.river-distribution-inventory .nc-control-strip-tools > .di-tabs { grid-area: picker; min-width: 248px; }
.river-distribution-inventory .nc-control-strip-tools > .river-dist-primary-actions { grid-area: controls; min-width: 430px; }
.river-distribution-inventory .nc-stat-row {
  /* Coordinator follow-up (2026-09-23): this row used to hold every stat
     flat (flex-wrap:nowrap, overflow:hidden, shrink-with-ellipsis) -- with
     10 cases/kegs stats that truncated every label at 1440/1024 with real
     data. renderSummary() now renders a .di-stat-head line (scope label +
     CE depleted MTD + sync chip + pill) followed by a .di-stat-groups grid
     (two full-label CASES/KEGS cards) -- this row's job is just to stack
     those two blocks, not to flex/shrink individual stats anymore. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: var(--t-dense);
  grid-area: stats;
  margin-left: 0;
  min-width: 0;
  overflow: visible;
}
.river-distribution-inventory .nc-stat-row .di-stat-scope { align-self: center; }
.river-distribution-inventory .nc-stat-row .di-stat {
  border-left: 1px solid var(--nc-hairline);
  flex: 0 1 auto;
  min-width: 0;
  padding-left: var(--s-2);
  white-space: nowrap;
}
.river-distribution-inventory .di-selected-signals {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: var(--s-1);
  min-width: 0;
  overflow: hidden;
}
.river-distribution-inventory .di-selected-signals > * {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.river-distribution-inventory .di-actions {
  align-items: center;
  border: 0;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0 0 var(--s-0);
  min-width: 0;
  padding: 0;
}
.river-distribution-inventory .di-actions > .nc-form-row {
  align-items: center;
  flex: 0 1 auto;
  flex-direction: row;
  gap: var(--s-1);
  white-space: nowrap;
}
.river-distribution-inventory .di-actions > .nc-form-row :is(input, .nc-stepper) { min-height: 32px; }
.river-distribution-inventory .di-actions > .nc-form-row input[type='text'] { width: 92px; }
.river-distribution-inventory .di-actions > .di-po-field input[type='text'] {
  min-width: 16ch;
  width: 16ch;
}
.river-distribution-inventory .di-actions > .nc-form-row input[type='date'] { width: 118px; }
.river-distribution-inventory .di-actions > .nc-form-row .nc-stepper { width: 48px; }
/* Click-to-edit ON ORDER resting face (Cole 2026-08-18): shows the number,
   click opens the SP/AH editor. Reads as data, hovers as editable. */
.river-distribution-inventory .di-order-face {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-std);
  color: var(--nc-text);
  cursor: pointer;
  font: inherit;
  font-variant-numeric: tabular-nums;
  min-height: 32px;
  padding: var(--s-0) var(--s-2);
  white-space: nowrap;
}
.river-distribution-inventory .di-order-face:hover {
  background: var(--nc-btn-bg);
  border-color: var(--nc-border);
}
.river-distribution-inventory .di-order-face .di-order-face-site {
  color: var(--nc-dim);
  font-size: var(--t-dense);
}

/* Merch steppers moved into the More overflow (Cole 2026-08-18 — rare use). */
.river-distribution-inventory .nc-overflow-menu .di-merch-group {
  border: 0;
  display: flex;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-0) var(--s-2);
}
.river-distribution-inventory .nc-overflow-menu .di-merch-group .nc-stepper {
  min-height: 32px;
  width: 48px;
}
.river-distribution-inventory .di-order-add {
  color: var(--nc-dim);
  font-size: var(--t-dense);
  min-height: 28px;
  padding: var(--s-0) var(--s-2);
  white-space: nowrap;
}
.river-distribution-inventory .di-order-pair-collapsed { display: contents; }
.river-distribution-inventory .di-order-pair-collapsed[hidden] { display: none; }
.river-distribution-inventory .di-actions > .nc-btn,
.river-distribution-inventory .di-actions > .nc-overflow > summary {
  flex: 0 0 auto;
  min-height: 32px;
  padding-block: var(--s-1);
}
.river-distribution-inventory .di-actions .nc-overflow { flex: 0 0 auto; margin-left: auto; }
.river-distribution-inventory .di-actions .nc-overflow-menu :is(button, a) { min-height: var(--nc-touch); }
.river-distribution-inventory .di-actions .nc-overflow-menu > .nc-shell-menu-head {
  border-top: 1px solid var(--nc-border);
  color: var(--nc-dim);
  font-size: var(--t-dense);
  font-weight: 800;
  letter-spacing: .07em;
  padding: var(--s-2) var(--s-3) var(--s-1);
  text-transform: uppercase;
}
.river-distribution-inventory .di-actions .nc-overflow-menu > .nc-shell-menu-head:first-child { border-top: 0; }
.river-distribution-inventory .di-truck-dates { display: none; }
.river-distribution-inventory .di-truck-dates.different {
  display: block;
  flex: 1 1 100%;
  margin-top: var(--s-1);
}
.river-distribution-inventory .di-sheets { gap: var(--s-1); }
.river-distribution-inventory .di-sheet-head { padding: var(--s-0) var(--s-2); }
.river-distribution-inventory .di-sheet .di-table.nc-table-dense th {
  line-height: 1;
  padding-block: var(--s-1);
  top: calc(var(--di-sticky-top, 0px) + 21px);
}
.river-distribution-inventory .di-table.nc-table-dense td {
  height: auto;
  line-height: 1;
  padding-block: var(--s-0);
}
.river-distribution-inventory .di-table.nc-table-dense .di-brand {
  background: transparent;
  border: 0;
  color: inherit;
  font-weight: 700;
  min-height: 24px;
  padding-inline: 0;
  padding-block: 0;
}
.river-distribution-inventory .di-table.nc-table-dense .di-sku-suffix {
  border: 0;
  color: var(--nc-dim);
  font-size: var(--t-dense);
  font-weight: 500;
  margin-left: var(--s-1);
  padding: 0;
  text-transform: none;
}
.river-distribution-inventory .di-table.nc-table-dense input[type='number'] {
  line-height: 1;
  min-height: 24px;
  padding-block: 3px;
}
.river-distribution-inventory .di-table.nc-table-dense .river-site-breakouts {
  background: transparent;
  border: 0;
  padding: 0;
}
.river-distribution-inventory .di-table.nc-table-dense .river-site-breakouts label {
  gap: 1px;
  line-height: 1;
}
.river-distribution-inventory #workbenchBody > .di-actions { margin-top: var(--s-2); }

@media (max-width: 1100px) {
  .nc-control-strip-lead { align-items: flex-start; flex-wrap: wrap; }
  .nc-stat-row { margin-left: 0; }
  
  .river-distribution-inventory .nc-control-strip .river-dist-primary-actions { flex-wrap: wrap; min-width: 0; }
  .river-distribution-inventory .nc-control-strip-tools {
    display: grid;
    grid-template-areas: 'picker' 'controls' 'stats';
    grid-template-columns: minmax(0, 1fr);
  }
  .river-distribution-inventory .nc-control-strip-tools > :is(.di-tabs, .river-dist-primary-actions),
  .river-distribution-inventory .nc-stat-row { margin-left: 0; min-width: 0; width: 100%; }
  .river-distribution-inventory .di-actions { flex-wrap: wrap; }
  .river-distribution-inventory .di-actions .nc-overflow { margin-left: 0; }
}

/* KIT-10 (2026-09-25): on a phone the stat row is a two-column grid — label over number, no
   dividers — instead of one no-wrap line. Five stats (Finance P&L) used to run past 390 px
   and overlap; each stat now wraps its own value. Pages that lay the row out themselves
   (Distribution Inventory's stacked groups) keep their higher-specificity rules. */
@media (max-width: 640px) {
  .nc-stat-row {
    display: grid;
    gap: var(--s-3) var(--s-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
    width: 100%;
  }
  .nc-stat-row > .nc-stat {
    align-items: flex-start;
    border-left: 0;
    flex-direction: column;
    gap: var(--s-0);
    min-width: 0;
    padding: 0;
    white-space: normal;
  }
  .nc-stat-row > .nc-stat .nc-summary-value { overflow-wrap: anywhere; }
}

/* Fixed positioning escapes the table's horizontal scroll container without
 * contributing height to the row. JS supplies viewport-clamped coordinates. */
.nc-overflow-inline[open] > .nc-overflow-menu {
  left: var(--nc-overflow-left, 8px);
  margin: 0;
  position: fixed;
  right: auto;
  top: var(--nc-overflow-top, 8px);
  z-index: 1000;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Board kit variants: package stage, phone view switch, and tank filter.
   Keep these shared with both board hosts; page CSS supplies layout only. */
    #schedule-grid td.pkgcol .pkg-chip {
      margin: 0;
      padding: var(--s-1) var(--s-2);
      border-left: 3px solid var(--pkg);
      border-radius: 0 var(--r-std) var(--r-std) 0;
      background: color-mix(in srgb, var(--pkg) 20%, var(--panel));
      color: var(--ink);
    }

    .sb-lk-seg {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid var(--ink);
      border-radius: var(--r-std);
      overflow: hidden;
    }
    .sb-lk-seg button {
      min-height: var(--nc-touch);
      border: 0;
      border-right: 1px solid var(--ink);
      background: var(--panel);
      color: var(--ink);
      font: 600 var(--t-body)/1 var(--nc-font-ui);
      cursor: pointer;
    }
    .sb-lk-seg button:last-child { border-right: 0; }
    .sb-lk-seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); font-weight: 700; }
    .sb-lk-chip {
      display: inline-flex;
      align-items: center;
      gap: var(--s-1);
      flex: none;
      min-height: var(--nc-touch);
      padding: 0 var(--s-3);
      border: 1px solid var(--line);
      border-radius: var(--r-pill);
      background: var(--panel);
      font-weight: 700;
      white-space: nowrap;
    }
    .sb-lk-chip[class*=" s-"]::before { width: 8px; height: 8px; }
    .sb-lk-chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
    /* Preserve selected state on touch browsers that retain :hover. */
    .sb-lookup .sb-lk-seg button:hover:not(:disabled) { background: var(--panel); border-color: var(--ink); }
    .sb-lookup .sb-lk-seg button[aria-pressed="true"]:hover:not(:disabled),
    .sb-lookup .sb-lk-chip[aria-selected="true"]:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); }
    .sb-lookup .sb-lk-chip:not([aria-selected="true"]):hover:not(:disabled) { background: var(--panel); border-color: var(--ink); }

/* Production forecast subtab: kit variant, separate from the page's
   .pd-sub event handler. Match the existing River subtab face. */
html[data-palette='river'] body button.pd-fsub {
  font: 500 var(--t-body)/1.2 var(--nc-font-ui); cursor: pointer;
  background: transparent; color: var(--nc-dim);
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 0 var(--s-3); min-height: calc(var(--nc-touch) - var(--s-2));
}
html[data-palette='river'] body button.pd-fsub:hover { color: var(--nc-text); background: var(--nc-panel-2); }
html[data-palette='river'] body button.pd-fsub.active {
  color: var(--nc-text); font-weight: 700;
  background: var(--nc-panel); border-color: var(--nc-border);
}

/* Native choices inside a dialog keep a full touch row. */
.nc-form label.nc-choice { min-height: var(--nc-touch); }
.nc-form-group:is(fieldset) { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Lookup segments retain paired colours under legacy host button rules. */
html[data-palette='river'] body .sb-lookup .sb-lk-seg button {
  background: var(--nc-panel);
  color: var(--nc-text);
  white-space: nowrap;
}
html[data-palette='river'] body .sb-lookup .sb-lk-seg button[aria-pressed="true"] {
  background: var(--nc-text);
  color: var(--nc-panel);
}
html[data-palette='river'] body .sb-lookup .sb-lk-seg button:focus-visible {
  outline: 2px solid var(--nc-text);
  outline-offset: -4px;
}
html[data-palette='river'] body .sb-lookup .sb-lk-seg button[aria-pressed="true"]:focus-visible {
  outline-color: var(--nc-panel);
}
html[data-palette='river'] body .nc-btn.nc-btn-danger {
  min-height: var(--nc-touch-primary);
}
/* A hidden control stays hidden even when its component declares display. */
html[data-palette='river'] [hidden] { display: none !important; }
.nc-authority { padding: var(--s-3); margin-block: var(--s-1); border-radius: var(--r-card); background: var(--nc-panel); color: var(--nc-text); }
.nc-authority-heading p { margin: var(--s-1) 0; font-size: var(--t-dense); }
.nc-authority-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.nc-authority-evidence { font-size: var(--t-dense); }
.nc-authority-evidence summary { cursor: pointer; padding-block: var(--s-2); min-height: 44px; display: flex; align-items: center; gap: var(--s-1); }
.nc-authority-evidence ol { margin: var(--s-2) 0; padding-left: var(--s-4); }
.nc-authority-evidence li { padding-block: var(--s-1); }
/* Full-name record affordance for dense schedule event headings. */
.nc-production-board .nc-board-card-head .nc-board-record-link { display: block; width: 100%; min-height: 44px; padding: var(--s-1); font-size: var(--t-dense); line-height: 1.4; white-space: normal; overflow-wrap: anywhere; text-align: left; background: var(--nc-panel); color: var(--nc-text); pointer-events: auto; }

.nc-production-board .nc-board-other-site > span { white-space: normal; overflow-wrap: anywhere; max-width: none; }
@media (min-width: 701px) {
  .nc-authority { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s-3); }
  .nc-authority-evidence { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .nc-authority { grid-template-columns: 1fr auto auto; align-items: center; }
  .nc-authority-evidence { grid-column: auto; }
  .nc-authority-evidence[open] { grid-column: 1 / -1; }
  .nc-production-board .nc-board-view { display: inline-flex; width: 49%; vertical-align: middle; }
  .nc-production-board .nc-board-operations { display: inline-flex; width: 49%; justify-content: flex-end; vertical-align: middle; }
}
@media (min-width: 701px) {
  html[data-palette='river'] body .nc-btn-compact { min-height: 28px; padding-block: var(--s-1); font-size: var(--t-dense); }
}

/* Dense desktop toolbar inputs share the kit's control face and rhythm. */
@media (min-width: 701px) {
  html[data-palette='river'] body .nc-input-compact { min-height: 28px; height: 28px; padding-block: 0; font-size: var(--t-dense); }
}

/* Secondary toolbar commands share one disclosed kit surface. */
.nc-toolbar-disclosure{position:relative;display:inline-block;vertical-align:middle;text-align:right}
.nc-toolbar-disclosure>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-1)}
.nc-toolbar-disclosure>summary::-webkit-details-marker{display:none}
.nc-toolbar-disclosure[open]>summary .ng-icon{transform:rotate(180deg)}
.nc-toolbar-disclosure>div{position:absolute;right:0;top:100%;z-index:11;display:flex;flex-wrap:wrap;width:300px;max-width:calc(100vw - 24px);padding:var(--s-2);gap:var(--s-1);background:var(--nc-panel);border:1px solid var(--nc-border);border-radius:var(--r-card);box-shadow:var(--nc-shadow-raised)}
@media(min-width:1100px){.nc-toolbar-disclosure{width:49%}}
.nc-production-board .nc-toolbar-disclosure .nc-board-operations{width:300px;justify-content:flex-start}
/* Shared disclosure and table-disclosure interaction contract. */
.nc-disclosure > summary:focus-visible,
tr[role='button']:focus-visible { outline: 2px solid var(--nc-text); outline-offset: -2px; }
@media (max-width: 768px) {
  .nc-disclosure > summary { min-height: 44px; }
  tr[role='button'] { min-height: 44px; }
  .nc-lookup-lines tr[role='button'] { border: 0; border-bottom: 1px solid var(--nc-hairline); border-radius: 0; background: transparent; }
  .nc-lookup-lines tr[role='button']:last-of-type { border-bottom: 0; }
}

/* Legacy River captions use the same readable minimum as the control kit. */
.river-kicker, .river-label { font-size: var(--t-dense); }

/* Readable decision dates and touch targets across the River stock review. */
.bs-glass-row > time { white-space: nowrap; font-weight: 650; }
body.bs-glass-preview details > summary { min-height: 44px; display: flex; align-items: center; }
.bs-glass-preview .ng-text-action { min-height: 44px; display: inline-flex; align-items: center; }
:root .rs-shell.rs-shell .rs-rail .river-dist-nav-more > summary { min-height: 44px; }

/* Keep action-sheet decisions reachable when form guidance grows. */
dialog.bs-action-dialog[open] { display: flex; flex-direction: column; }
dialog.bs-action-dialog > .bs-action-body { min-height: 0; overflow-y: auto; }
dialog.bs-action-dialog > :is(header, .bs-action-footer) { flex-shrink: 0; }

/* Stock decision rows preserve worksheet density and full touch areas. */
@media (min-width:701px) {
  body.bs-glass-preview .bs-glass-row { padding-block:1px; }
  body.bs-glass-preview .bs-glass-period { margin-top:var(--s-1); }
  body.bs-glass-preview .bs-glass-decision { padding-block:var(--s-1); }
}
.bs-order-remove.nc-btn { min-width:var(--nc-touch); min-height:var(--nc-touch); padding:0; color:var(--nc-dim); }

.bs-order-line > :is(select, button) { align-self:start; height:var(--nc-touch); }
body.bs-glass-preview .bs-orders-book > .bs-orders-receiving { margin:0; padding:0 var(--s-4); }
body.bs-glass-preview .bs-orders-action-result:empty { display:none; }
body.bs-glass-preview .bs-orders-book .bs-ledger-head > .bs-orders-fold { margin:0; }

/* A phone dialog is a modal layer, including over River's fixed tab bar. */
.river-brewery-stock .bs-event-overlay { z-index:120; }
@media (max-width:700px) {
  .river-brewery-stock .bs-event-popup {
    bottom:0;
    max-height:min(78dvh, 620px);
  }
}

/* Keep the phone's useful identity strip visible while beer SKU columns begin
   immediately after it; supplier/description are repeated in the drill. */
@media (max-width:700px) {
  .river-brewery-stock {
    padding-bottom:var(--s-8);
  }
  .river-brewery-stock .bs-grid-wrap {
    padding-bottom:var(--s-8);
  }
  .river-brewery-stock .bs-format-scroll-cue {
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:var(--s-1);
    color:var(--nc-info);
    font-size:var(--t-dense);
    font-weight:650;
    white-space:nowrap;
  }
  /* Supplier and description are repeated in the event drill, so on a phone their two columns collapse to a hairline
     and give the width to the beer columns. Their text sits in .bs-col-copy, which is removed at this width, so no
     transparent ink, clipped text or invisible link is left behind. */
  .river-brewery-stock .bs-event-grid :is(.bs-col-supplier, .bs-col-description) {
    display:table-cell;
    overflow:hidden;
    width:1px;
    min-width:1px;
    max-width:1px;
    padding-inline:0;
  }
  .river-brewery-stock .bs-event-grid :is(.bs-col-supplier, .bs-col-description) .bs-col-copy {
    display:none;
  }
  .river-brewery-stock .bs-event-grid .bs-col-brand,
  .river-brewery-stock .bs-event-grid .bs-col-total {
    position:static;
    background:var(--nc-panel);
  }
  .river-brewery-stock .bs-event-grid .bs-col-day {
    width:32px;
    min-width:32px;
  }
  .river-brewery-stock .bs-event-grid .bs-col-date {
    width:68px;
    min-width:68px;
  }
  .river-brewery-stock .bs-event-grid .bs-col-brand {
    width:110px;
    min-width:110px;
    font-weight:650;
    overflow:visible;
    overflow-wrap:anywhere;
    white-space:normal;
  }
  .river-brewery-stock .bs-event-grid .bs-col-total {
    width:44px;
    min-width:44px;
    max-width:44px;
    white-space:normal;
    line-height:1;
  }
  .river-brewery-stock .bs-event-grid thead :is(.bs-col-day, .bs-col-date, .bs-col-supplier, .bs-col-brand, .bs-col-description, .bs-col-total) {
    padding-inline:2px;
    font-size:var(--t-dense);
  }
  .river-brewery-stock .bs-event-grid thead :is(.bs-col-day, .bs-col-date, .bs-col-brand, .bs-col-total) {
    background:var(--nc-thead);
  }
  .river-brewery-stock .bs-event-grid tbody .bs-col-total {
    background:var(--bs-total-column-fill)!important;
  }
}

/* Deliveries lead; purchasing background follows the current records. */
body.bs-glass-preview .bs-orders-support { padding:var(--s-2) var(--s-4); }
@media(max-width:700px) {
  .bs-glass-preview .bs-orders-table tr[data-order-id] > td[data-label="Expected"] { order:1; }
  .bs-glass-preview .bs-orders-table tr[data-order-id] > td[data-label="Items"] { order:2; }
  .bs-glass-preview .bs-orders-table tr[data-order-id] > td[data-label="Ordered"] { order:3; }
  .bs-glass-preview .bs-orders-table tr[data-order-id] > td[data-label="Category"] { order:4; }
  .bs-glass-preview .bs-orders-table tr[data-order-id] > td[data-label="Note"] { order:5; }
}

/* Interactive chips keep a usable hit area; passive status badges stay compact. */
button.nc-chip{min-height:32px}