/* =============================================
   RRB Design Primitives — ops/shared master
   rrb-css-v: 2.2.0  (semantic contrast, honest interactive states, 44px touch targets)
   ============================================= */

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--text);
  font: 600 13px/1 var(--font);
  cursor: pointer;
  transition: all var(--t) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { border-color: var(--border-strong); box-shadow: var(--e1); }
.btn:focus { outline: 0; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgb(26 106 163 / 0.4); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--e1); }

.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary-50); border-color: var(--primary-dark); color: var(--primary-dark); }

.btn-accent { background: var(--success-control); color: var(--on-success); border-color: var(--success-control); }
.btn-accent:hover { background: var(--success-control-hover); border-color: var(--success-control-hover); }

.btn-danger { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); }

.btn-purchase { background: var(--purchase); color: var(--on-purchase); border-color: var(--purchase); font-weight: 750; }
.btn-purchase:hover { background: var(--purchase-dark); border-color: var(--purchase-dark); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-muted); color: var(--text); border-color: transparent; box-shadow: none; }

.btn-xs { height: 22px; padding: 0 8px; font-size: 11px; gap: 4px; }
.btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 40px; padding: 0 18px; font-size: 14px; }

.ico-btn {
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.ico-btn:hover { color: var(--text); border-color: var(--border-strong); }

.rrb-nav-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 180px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--e3);
  font: 500 14px/1.2 var(--font);
}
.rrb-nav-context-menu__item {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  padding: 7px 10px;
}
.rrb-nav-context-menu__item:hover { background: var(--surface-muted); }
.rrb-nav-context-menu__item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .btn { height: 40px; font-size: 14px; }
  .btn-sm { height: 32px; }
  .btn-xs { height: 28px; }
  .ico-btn { width: 40px; height: 40px; }
}

/* ========== Chips ========== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font: 500 12px/1 var(--font);
  font-variant-numeric: tabular-nums;
  background: var(--surface-muted);
  color: var(--text-muted);
  white-space: nowrap;
}
.chip-sm { height: 20px; font-size: 11px; padding: 0 7px; }
.chip-primary { background: var(--primary-50); color: var(--primary); }
.chip-accent  { background: var(--accent-50);  color: var(--success-text); }
.chip-warning { background: var(--warning-50); color: var(--warning-text); }
.chip-danger  { background: var(--danger-50);  color: var(--danger-text); }
.chip-purchase { background: var(--purchase-50); color: var(--purchase-text); }
.chip-muted   { background: var(--surface-muted); color: var(--text-muted); }

.chip-removable { padding-right: 4px; }
.chip-removable .chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 500 12px/1 var(--font);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--t) var(--ease), background-color var(--t) var(--ease);
}
.chip-removable .chip-x:hover { opacity: 1; background: rgba(0,0,0,0.08); }

/* Interactive chip variants — button/anchor chips need appearance reset + focus ring */
button.chip,
a.chip {
  appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
button.chip:focus-visible,
a.chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.chip:disabled,
.chip[aria-disabled="true"],
button.chip:disabled,
a.chip[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
button.chip:active,
a.chip:active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

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

.val.val-chips {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.val.val-stack {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: stretch;
  text-align: left;
}

.multiselect-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--r-field, 6px);
  background: var(--surface);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.multiselect-shell > .chip-sm {
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
  word-break: break-word;
}
.multiselect-shell > .ac-wrap {
  flex: 1 1 140px;
  min-width: 0;
}
.multiselect-shell:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.multiselect-input {
  width: 100%;
  border: 0;
  outline: none;
  font: 500 13px/1.2 var(--font);
  color: var(--text);
  background: transparent;
  padding: 4px 0;
  min-width: 0;
}
@media (max-width: 480px) {
  .multiselect-shell > .ac-wrap { flex-basis: 100%; }
}

/* ========== Entity card content (dense person / location / contact layout) ==========
   Packs an entity (company, contact, location) into a compact card body:
   a header (avatar + name + meta chips), an aligned icon-column key-value grid
   for primary contact data, and titled sections of single-line rows.
   Distinct from sibling row primitives on purpose:
     .entity-row  — name + sub on ONE baseline-aligned line (vertical density);
                    not clickable; icon-tile + trailing actions.
     .list-row    — title OVER sub (two lines), clickable, border-left hover accent.
     .info-row    — label-left / value-right (justify-between).
   .entity-list--cols reflows multi-up purely by card width (auto-fill grid,
   no media query / no @container): 1-up in a half-width pane, 2-up+ full-width. */
.entity-header { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.entity-header__avatar { width: 48px; height: 48px; font-size: 16px; flex-shrink: 0; }
.entity-header__body { flex: 1 1 auto; min-width: 0; }
.entity-header__name { font: 700 18px/1.25 var(--font); letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.entity-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }

.entity-info {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px 8px;
  align-items: start;
  padding: 8px 0;
  margin: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.entity-info__icon { color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.entity-info__val { min-width: 0; overflow-wrap: anywhere; font: 500 13px/1.4 var(--font); color: var(--text); }
.entity-info__val a { color: var(--primary); text-decoration: none; }
.entity-info__val a:hover { text-decoration: underline; }

.entity-section { margin-top: 12px; }
.entity-section__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.entity-section__title { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.entity-section__count { font-weight: 500; color: var(--text-subtle); }

.entity-list { display: flex; flex-direction: column; }
.entity-list--scroll { max-height: 200px; overflow-y: auto; }
.entity-list--cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 16px; }
.entity-list--cols .entity-row { border-bottom: 1px solid var(--border); }

.entity-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.entity-row:last-child { border-bottom: 0; }
.entity-row__media { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
.entity-row__icon {
  width: 28px; height: 28px;
  border-radius: var(--r-field);
  background: var(--surface-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.entity-row__body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px; overflow: hidden; }
.entity-row__name { font: 600 13px/1.3 var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 5em; }
.entity-row__sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 3; min-width: 0; }
.entity-row__actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; margin-left: auto; }
.entity-row--primary .entity-row__icon { background: var(--primary-50); color: var(--primary); }

/* Narrow screens: let name + sub stack (name keeps a full line) instead of
   competing for one baseline-aligned line beside the trailing actions, which
   truncated short names like "Marc de Boer" at 1-up mobile widths. */
@media (max-width: 480px) {
  .entity-list .entity-row__body { flex-wrap: wrap; }
}

.entity-empty { margin: 0; color: var(--text-muted); font-size: 13px; }

/* ========== Card ========== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 16px;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card:is(a, button):hover,
.card[data-href]:hover,
.card.is-interactive:hover { border-color: var(--border-strong); box-shadow: var(--e1); }
.card-title { font: 600 15px/1.3 var(--font); letter-spacing: -.01em; margin: 0 0 4px; }
.card-subtitle, .card-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; }
/* Structural card regions (distinct from the .card-title/.card-subtitle text
   elements): a header bar that can hold .card-title + actions, and a body. */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--border);
}
.card-body { padding-top: var(--sp-xs); }

/* ========== Badges ========== */
/* Registered in style-card/components.yaml. Semantic variants only — projects
   migrate color-named badges (badge-blue/green/gray) to these. Subtle tint
   pattern (-50 bg / -700 text / -200 border); .badge-primary is the filled
   brand variant. Responsive padding bump lives in rrb-responsive.css. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface-muted);
  color: var(--text);
  font: 600 var(--fs-xs)/1.4 var(--font);
  white-space: nowrap;
}
.badge-primary   { background: var(--primary-600); color: var(--on-primary);           border-color: var(--primary-600); }
.badge-info      { background: var(--primary-50);  color: var(--primary-700);         border-color: var(--primary-200); }
.badge-success   { background: var(--success-50);  color: var(--success-text);         border-color: var(--success-200); }
.badge-warning   { background: var(--warning-50);  color: var(--warning-text);         border-color: var(--warning-200); }
.badge-danger    { background: var(--danger-50);   color: var(--danger-text);          border-color: var(--danger-200); }
.badge-purchase  { background: var(--purchase-50); color: var(--purchase-text);        border-color: var(--purchase-200); }
.badge-secondary { background: var(--gray-100);    color: var(--color-text-secondary); border-color: var(--gray-200); }
.badge-muted     { background: var(--gray-50);     color: var(--text-muted);          border-color: var(--gray-200); }

/* Utility: muted text color (token-backed). */
.text-muted { color: var(--text-muted); }

/* ========== Disclosure / clickable section header ========== */
.rrb-disclosure {
  --rrb-disclosure-title-color: var(--text);
  --rrb-disclosure-icon-color: var(--text-muted);
  --rrb-disclosure-icon-hover-color: var(--primary);
  --rrb-disclosure-hover-bg: var(--surface-muted);
  --rrb-disclosure-accent: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.rrb-disclosure:hover,
.rrb-disclosure[data-open="true"] {
  border-color: var(--border-strong);
}
.rrb-disclosure + .rrb-disclosure { margin-top: var(--sp-md); }

.rrb-disclosure__header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  min-height: 56px;
  padding: 10px var(--sp-md);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.rrb-disclosure__header::after {
  content: "";
  position: absolute;
  left: var(--sp-md);
  right: var(--sp-md);
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--rrb-disclosure-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.rrb-disclosure__header:hover {
  background: var(--rrb-disclosure-hover-bg);
}
.rrb-disclosure__header:hover::after,
.rrb-disclosure__header:focus-visible::after {
  transform: scaleX(1);
}
.rrb-disclosure__header:focus { outline: 0; }
.rrb-disclosure__header:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 3px rgb(26 106 163 / 0.24);
}

.rrb-disclosure__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--rrb-disclosure-icon-color);
  border-radius: var(--r-btn);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}
.rrb-disclosure__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rrb-disclosure__header:hover .rrb-disclosure__icon {
  color: var(--rrb-disclosure-icon-hover-color);
  transform: translateX(2px);
}
.rrb-disclosure[data-open="true"] .rrb-disclosure__icon {
  transform: rotate(90deg);
}
.rrb-disclosure[data-open="true"] .rrb-disclosure__header:hover .rrb-disclosure__icon {
  transform: rotate(90deg) translateX(2px);
}

.rrb-disclosure__title {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.rrb-disclosure__title strong {
  color: var(--rrb-disclosure-title-color);
  font: 650 15px/1.25 var(--font);
  letter-spacing: 0;
}
.rrb-disclosure__title small {
  overflow: hidden;
  color: var(--text-muted);
  font: 500 12px/1.3 var(--font);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rrb-disclosure__meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.rrb-disclosure__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--ease);
}
.rrb-disclosure[data-open="true"] .rrb-disclosure__body {
  grid-template-rows: 1fr;
}
.rrb-disclosure__clip {
  min-width: 0;
  overflow: hidden;
}
.rrb-disclosure__content {
  padding: var(--sp-md);
}

@media (max-width: 768px) {
  .rrb-disclosure__header {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 60px;
    padding: var(--sp-md);
  }
  .rrb-disclosure__meta {
    grid-column: 2;
    justify-content: flex-start;
  }
  .rrb-disclosure__header::after {
    left: var(--sp-md);
    right: var(--sp-md);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rrb-disclosure,
  .rrb-disclosure *,
  .rrb-disclosure *::before,
  .rrb-disclosure *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ========== Qty pill ========== */
/* Touch sizing: button 32x34 / input 56px so total pill >=34px high and
   on @media(hover:none) inherits the 44px min from responsive.css without
   children clipping. Let content size the pill; no explicit height. */
.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  background: var(--surface);
  overflow: hidden;
}
.qty button {
  min-width: 32px;
  height: 34px;
  border: 0; background: transparent;
  color: var(--text-muted);
  font: 500 16px/1 var(--font);
  cursor: pointer;
  transition: all var(--t) var(--ease);
  padding: 0 8px;
}
.qty button:hover { background: var(--primary-50); color: var(--primary); }
.qty input {
  width: 56px;
  border: 0;
  text-align: center;
  background: transparent;
  color: var(--text);
  font: 500 13px/1 var(--font);
  font-variant-numeric: tabular-nums;
}
.qty input:focus { outline: 0; }
@media (hover: none) {
  .qty button { min-width: 40px; height: 40px; }
  .qty input  { width: 64px; }
}

@media (max-width: 768px) {
  .qty { height: 36px; }
  .qty button { width: 32px; height: 34px; font-size: 18px; }
  .qty input { width: 60px; font-size: 14px; }
}
@media (max-width: 360px) {
  .qty { height: 38px; }
  .qty button { width: 34px; height: 36px; }
  .qty input { width: 56px; }
}

/* ========== Field / info-row ========== */
.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  transition: background-color var(--t) var(--ease), border-left-color var(--t) var(--ease);
}
.info-row:last-child { border-bottom: 0; }
.info-row:hover { background: var(--primary-50); border-left-color: var(--primary); }
.info-row .lbl { font-size: 12px; color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.info-row .val {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  font: 500 13px/1.2 var(--font);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* right-edge alignment rule per spec — plain text, editable-field, qty pill,
   and chips all share the same right line */

/* Editable detail rows — opt-in form-like variant for values that users change
   frequently. Read and edit states keep the same left value edge; the native
   button remains a discoverable 44px control on pointer and touch devices. */
.info-row.info-row-editable {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--sp-md);
  min-height: 44px;
  padding-block: 0;
}
.info-row.info-row-editable .val,
.info-row.info-row-editable .val.val-chips {
  justify-content: flex-start;
  text-align: left;
}
.info-row.info-row-editable.is-readonly .val { grid-column: 2 / 4; }
.info-row.info-row-editable.is-editing {
  align-items: start;
  padding-block: 10px;
}
.info-row.info-row-editable.is-editing .lbl { padding-top: 10px; }
.info-row.info-row-editable.is-editing .val.val-editing {
  grid-column: 2 / 4;
  width: 100%;
  justify-content: stretch;
  text-align: left;
}
.info-row.info-row-editable .info-row-editor {
  width: 100%;
  justify-content: flex-start;
}
.info-row-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-xs);
  width: 100%;
  margin-top: var(--sp-xs);
}
.info-row__edit {
  appearance: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.info-row__edit .edit-hint { opacity: 0.7; }
.info-row__edit:hover {
  background: var(--primary-100);
  border-color: var(--primary-200);
  color: var(--primary);
}
.info-row__edit:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  color: var(--primary);
}
.card-title.info-row-card-title {
  margin: 0;
  padding: var(--sp-md) var(--sp-md) var(--sp-xs);
}
.info-row-section {
  padding: 6px var(--sp-md) 2px;
  color: var(--text-muted);
  font: 700 10px/1.2 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .info-row:has(.qty), .info-row.stack {
    flex-direction: column;
    align-items: flex-start;
  }
  .info-row:has(.qty) .val, .info-row.stack .val {
    width: 100%;
    justify-content: flex-end;
  }
  .info-row.info-row-editable {
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--sp-xs) var(--sp-sm);
    min-height: 44px;
    padding: 0 8px;
  }
  .info-row.info-row-editable .lbl {
    grid-column: 1;
    grid-row: 1;
  }
  .info-row.info-row-editable .val {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
  .info-row.info-row-editable .info-row__edit {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .info-row.info-row-editable.is-readonly .val { grid-column: 1 / 3; }
  .info-row.info-row-editable.is-editing {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    padding-block: 10px;
  }
  .info-row.info-row-editable.is-editing .lbl,
  .info-row.info-row-editable.is-editing .val.val-editing {
    grid-column: 1;
    grid-row: auto;
  }
  .info-row.info-row-editable.is-editing .lbl { padding-top: 0; }
}
@media (max-width: 768px) {
  .info-row.stack { flex-direction: column; align-items: flex-start; }
  .info-row.stack .val { width: 100%; justify-content: flex-start; }
  .info-row.stack .val.val-stack { flex-basis: 100%; }
}

/* ========== Editable field (restyled) ========== */
.editable-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background-color var(--t) var(--ease);
}
.editable-field:hover { background: var(--primary-100); color: var(--primary); }
.editable-field .edit-hint {
  opacity: 0;
  font-size: 11px;
  color: var(--primary);
  transition: opacity var(--t) var(--ease);
}
.editable-field:hover .edit-hint { opacity: 1; }

/* ========== Location tile ========== */
.loc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid transparent;
  border-radius: var(--r-card);
  transition: all var(--t) var(--ease);
}
.loc:hover { border-color: var(--border-strong); border-left-color: var(--primary); background: var(--primary-50); }
.loc-name { font: 500 13px/1 var(--font); color: var(--text); }
.loc-sub  { font-size: 11px; color: var(--text-subtle); margin-top: 2px; }
.loc-qty  { display: flex; align-items: center; gap: 10px; }
.loc-val  { font: 600 17px/1 var(--font); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

@media (max-width: 540px) {
  .loc-grid { grid-template-columns: 1fr !important; }
}

/* ========== List row ========== */
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  transition: all var(--t) var(--ease);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-muted); border-left-color: var(--primary); }
.list-row .ico {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--surface-muted);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.list-row .title { font: 500 13px/1.3 var(--font); color: var(--text); }
.list-row .sub   { font-size: 11px; color: var(--text-subtle); margin-top: 2px; }
.list-row .trail { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ========== Vendor row ========== */
.vendor-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  transition: all var(--t) var(--ease);
}
.vendor-row:last-child { border-bottom: 0; }
.vendor-row:hover { background: var(--surface-muted); border-left-color: var(--primary); }
.vendor-name        { font: 500 13px/1.3 var(--font); color: var(--text); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vendor-name-text   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vendor-name-tags   { display: flex; flex-wrap: wrap; gap: 4px; }
.vendor-sku         { font: 500 12px/1 'SF Mono', Menlo, monospace; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vendor-price       { font: 500 13px/1 var(--font); font-variant-numeric: tabular-nums; text-align: right; }
.vendor-actions     { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }

@media (max-width: 768px) {
  .vendor-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name actions" "sku price";
    gap: 6px 10px;
    padding: 12px;
  }
  .vendor-name    { grid-area: name; }
  .vendor-actions { grid-area: actions; }
  .vendor-sku     { grid-area: sku; }
  .vendor-price   { grid-area: price; }
}

/* ========== Movement row ========== */
.mov-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  transition: all var(--t) var(--ease);
}
.mov-row:last-child { border-bottom: 0; }
.mov-row:hover { background: var(--surface-muted); border-left-color: var(--primary); }

/* ========== Timeline ========== */
.timeline { position: relative; padding-left: 18px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--border);
}
.tl-item { position: relative; padding: 10px 0 10px 8px; }
.tl-item::before {
  content: '';
  position: absolute;
  left: -15px; top: 14px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--primary);
}
.tl-item.warn::before   { border-color: var(--warning); }
.tl-item.danger::before { border-color: var(--danger); }
.tl-item.accent::before { border-color: var(--success-control); }
.tl-row   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-title { font: 500 13px/1.3 var(--font); color: var(--text); }
.tl-sub   { font-size: 11px; color: var(--text-subtle); margin-top: 2px; }

/* ========== Banner ========== */
.banner {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: var(--primary-50);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.banner[hidden] { display: none; }
.banner .bttl { font: 600 13px/1.3 var(--font); color: var(--primary); }
.banner .btxt { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.banner.warn   { background: var(--warning-50); border-color: var(--warning); }
.banner.warn .bttl   { color: var(--warning-text); }
.banner.accent { background: var(--accent-50);  border-color: var(--success-control);  }
.banner.accent .bttl { color: var(--success-text); }
.banner.danger { background: var(--danger-50);  border-color: var(--danger);  }
.banner.danger .bttl { color: var(--danger-text); }

/* ========== Stat card ========== */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 16px;
  transition: all var(--t) var(--ease);
}
.stat:is(a, button):hover,
.stat[data-href]:hover,
.stat.is-interactive:hover { border-color: var(--border-strong); box-shadow: var(--e1); }
.stat-label {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 6px;
}
.stat-value {
  font: 600 24px/1 var(--font);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.stat-delta { font-size: 12px; color: var(--success-text); font-variant-numeric: tabular-nums; }
.stat-delta.down { color: var(--danger-text); }

/* Stat delta — semantische kleur (betekenis, los van richting) */
.stat-delta.good    { color: var(--success-text); }
.stat-delta.bad     { color: var(--danger-text); }
.stat-delta.neutral { color: var(--text-muted); }

/* Sparkline binnen .stat */
.stat-spark { flex-shrink: 0; display: block; }
.stat-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }

/* ========== Period picker ========== */
.period-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.period-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-btn); overflow: hidden; }
.period-seg button {
  padding: 5px 12px;
  font: 500 12px/1 var(--font);
  background: var(--surface);
  color: var(--text-muted);
  border: 0;
  border-left: 1px solid var(--border);
  cursor: pointer;
}
.period-seg button:first-child { border-left: 0; }
.period-seg button.active { background: var(--primary); color: var(--on-primary); }
.period-nav { display: inline-flex; align-items: center; gap: 6px; }
.period-nav button {
  padding: 4px 9px;
  font: 500 12px/1 var(--font);
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  cursor: pointer;
}
.period-nav button:disabled { color: var(--text-subtle); cursor: default; opacity: .5; }
.period-label { font: 600 13px/1 var(--font); color: var(--text); white-space: nowrap; }

/* === Hero stat card (dashboard primary metrics) === */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.hero.primary { border-top: 3px solid var(--primary); }
.hero.warning { border-top: 3px solid var(--warning); }
.hero.accent  { border-top: 3px solid var(--accent); }

.hero-label {
  font: 600 11px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.hero-value {
  font: 600 clamp(22px, 3vw, 28px) var(--font);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.hero-value.warning { color: var(--warning-text); }
.hero-value.accent  { color: var(--success-text); }
.hero-value.danger  { color: var(--danger-text); }

.hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

/* === Mini stat card (dashboard secondary metrics) === */
.mini {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mini-label {
  font: 600 10px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.mini-value {
  font: 600 18px/1.1 var(--font);
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mini-value.warning { color: var(--warning-text); }
.mini-value.accent  { color: var(--success-text); }
.mini-value.danger  { color: var(--danger-text); }

/* ========== Collapsible ========== */
.collapsible { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.collapsible summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font: 600 13px/1.2 var(--font);
  color: var(--text);
  user-select: none;
}
.collapsible summary::-webkit-details-marker { display: none; }
.collapsible summary::before {
  content: '';
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform var(--t) var(--ease);
}
.collapsible[open] summary::before { transform: rotate(45deg); }
.collapsible > :not(summary) { padding: 0 16px 16px; }

/* ========== List-collapse (show-more inline expand) ========== */
.list-collapse .is-folded { display: none; }
.list-collapse.is-open .is-folded { display: flex; }
.list-collapse.is-open .is-folded.tl-item { display: block; }
.list-collapse.is-open .is-folded.list-row { display: grid; }
.list-collapse__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  color: var(--primary);
  font: 500 12px/1 var(--font);
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.list-collapse__more:hover { background: var(--primary-50); border-color: var(--primary-200); }
.list-collapse__more::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t) var(--ease);
  margin-left: 2px;
}
.list-collapse.is-open .list-collapse__more::after { transform: rotate(-135deg); }

/* =============================================
   Werkbon primitives (promoted W10)
   ============================================= */

/* ========== a-chip — tinted pill ========== */
.a-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(26,106,163,0.08);
  color: var(--primary);
  border: 1px solid rgba(26,106,163,0.15);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.a-chip.is-success { background: var(--success-50); color: var(--success-text); border-color: var(--success-200); }
.a-chip.is-warn    { background: var(--warning-50); color: var(--warning-text); border-color: var(--warning-200); }
.a-chip.is-danger  { background: var(--danger-50); color: var(--danger-text); border-color: var(--danger-200); }
.a-chip.is-neutral { background: var(--surface-muted); color: var(--text-muted); border-color: var(--border); }
.a-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ========== microstat — compact inline chip ========== */
.microstat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  background: var(--surface-muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.microstat.is-success { background: var(--success-50); color: var(--success-text); border-color: var(--success-200); }
.microstat.is-warn    { background: var(--warning-50); color: var(--warning-text); border-color: var(--warning-200); }
.microstat.is-danger  { background: var(--danger-50); color: var(--danger-text); border-color: var(--danger-200); }
.microstat.is-brand   { background: rgba(26,106,163,0.08); color: var(--primary); border-color: rgba(26,106,163,0.15); }

/* ========== status-chip — semantic single-health ========== */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-chip.is-success { background: var(--success-50); color: var(--success-text); border-color: var(--success-200); }
.status-chip.is-warn    { background: var(--warning-50); color: var(--warning-text); border-color: var(--warning-200); }
.status-chip.is-danger  { background: var(--danger-50); color: var(--danger-text); border-color: var(--danger-200); }

/* ========== a-table — clean data table ========== */
.a-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.a-table th {
  text-align: left;
  padding: 10px 12px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
  white-space: nowrap;
}
.a-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.a-table td.nowrap { white-space: nowrap; }
.a-table tr:hover td { background: var(--surface-muted); }
.a-table tr:last-child td { border-bottom: 0; }

/* ========== a-field — form row (220px label · control/help) ========== */
.a-field {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.a-field:last-child { border-bottom: 0; }
.a-field .lbl { font-size: 13px; color: var(--text-muted); }
.a-field .lbl .help {
  display: block;
  font-size: 11px;
  color: var(--text-subtle);
  margin-top: 2px;
  font-weight: 400;
}
.a-field .ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a-field input,
.a-field select,
.a-field textarea {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  max-width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.a-field input { width: 280px; }
.a-field input:focus,
.a-field select:focus,
.a-field textarea:focus {
  outline: none;
}
.a-field input:focus-visible,
.a-field select:focus-visible,
.a-field textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,106,163,0.12);
}
@media (max-width: 600px) {
  .a-field { grid-template-columns: 1fr; gap: 4px; }
  .a-field input { width: 100%; }
  /* Multi-control velden: tekstinvoer vult de regel, knoppen wrappen eronder. */
  .a-field .ctl > input,
  .a-field .ctl > select,
  .a-field .ctl > textarea { flex: 1 1 100%; width: 100%; }
  /* Lijstrijen links uitgelijnd laten wrappen i.p.v. uitvullen + horizontaal overlopen. */
  .a-listrow { justify-content: flex-start; align-items: flex-start; }
}

/* ========== a-bar — label · track · value · chip-group ========== */
.a-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 12px;
  flex-wrap: nowrap;
}
.a-bar .lbl {
  flex: 0 0 140px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a-bar-track {
  flex: 1 1 auto;
  min-width: 40px;
  background: var(--surface-muted);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.a-bar-fill {
  background: linear-gradient(90deg, var(--primary), #2e8bc9);
  height: 100%;
  border-radius: 999px;
}
.a-bar .v {
  flex: 0 0 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
.a-bar .meta-chips {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .a-bar .lbl { flex-basis: 100px; }
  .a-bar .v { flex-basis: 56px; }
}

/* ========== tab-strip + tab-item — segmented pill tabs ========== */
.tab-strip {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-muted);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.tab-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.tab-item:hover { color: var(--text); background: rgba(255,255,255,0.6); }
.tab-item.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(13,17,23,0.06);
}
.tab-item .count {
  font-size: 11px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.tab-item.is-active .count { color: var(--primary); }

/* Mobiel: laat de pill-strip horizontaal scrollen i.p.v. clippen wanneer de
   tabs samen breder zijn dan het scherm. Zonder dit valt de laatste tab buiten
   beeld (ouders zijn overflow-x:clip) en is hij onbereikbaar op touch. */
@media (max-width: 768px) {
  .tab-strip {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .tab-strip::-webkit-scrollbar { display: none; }
  .tab-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* ========== event — timeline row ========== */
.event {
  display: grid;
  grid-template-columns: 12px 72px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.event:last-child { border-bottom: 0; }
.event .evt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  justify-self: center;
}
.event.is-success .evt-dot { background: #0d7a2b; }
.event.is-warn    .evt-dot { background: var(--warning); }
.event.is-danger  .evt-dot { background: var(--danger); }
.event .evt-time {
  font-size: 11px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.event .evt-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event .evt-main .actor { font-weight: 500; color: var(--text); }
.event .evt-right { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 600px) {
  .event {
    grid-template-columns: 12px 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 2px;
  }
  .event .evt-time { grid-column: 2 / span 2; font-size: 10px; }
  .event .evt-dot { grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
  .event .evt-main { grid-column: 2; }
  .event .evt-right { grid-column: 3; grid-row: 2; }
}

/* ========== a-stat — left-accent stat card ========== */
.a-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.a-stat:hover { border-color: var(--border-strong); box-shadow: 0 1px 3px rgba(13,17,23,0.06); }
.a-stat.is-success { border-left-color: var(--success-control); }
.a-stat.is-warn    { border-left-color: var(--warning); }
.a-stat.is-danger  { border-left-color: var(--danger); }
.a-stat .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 500;
}
.a-stat .v {
  font: 600 26px/1 inherit;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.a-stat .delta {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.a-stat .delta.is-up   { color: var(--success-text); }
.a-stat .delta.is-down { color: var(--danger-text); }

/* ========== a-row — anchor-as-row (native right-click/middle-click) ========== */
a.a-row,
.a-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s, border-left-color 0.15s;
}
a.a-row:hover,
.a-row:hover {
  background: var(--surface-muted);
  border-left-color: var(--primary);
}
a.a-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.a-row:last-child { border-bottom: 0; }
.a-row .ico {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface-muted);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  flex: 0 0 28px;
}
.a-row .main { flex: 1 1 auto; min-width: 0; }
.a-row .main .title {
  font: 500 13px/1.3 inherit;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a-row .main .sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a-row .right {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ========== a-listrow — single-line item row (chip/label · action) ========== */
.a-listrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.a-listrow:last-of-type { border-bottom: 0; }

/* ========== btn-outline-danger ========== */
.btn-outline-danger {
  background: var(--surface);
  color: var(--danger-text);
  border: 1px solid var(--danger);
}
.btn-outline-danger:hover {
  background: var(--danger-50);
  color: var(--danger-dark);
  border-color: var(--danger-dark);
}

/* ========== Global focus-visible fallback ========== */
:focus { outline: 0; }
:focus-visible { outline: 3px solid rgb(26 106 163 / 0.4); outline-offset: 2px; }

/* ========== Skip-link — keyboard jump-to-content ========== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  z-index: 10000;
  border-radius: var(--r-btn);
}

/* ========== Reduced motion — OS accessibility preference ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== Press feedback (tactile) ========== */
.list-row:active,
.card-clickable:active {
  transform: scale(0.98);
  transition: transform 80ms ease-out;
}

/* ========== Toast — DEPRECATED here ==========
   Canonical toast CSS lives in rrb-ux-patterns.css (.toast-stack + .toast[data-type]).
   The old fixed-position .toast + .toast-success/-warning/-error variants and the
   duplicate @keyframes toast-in were removed 2026-07 (framework-v2 fase 0) because
   the same class + keyframe name was defined twice, cascade-order dependent.
   Use RRB.ui.toast({type, message}) — never hand-roll toast markup. */

/* ========== High-contrast mode — prefers-contrast: more ========== */
@media (prefers-contrast: more) {
  :root {
    --border:          #000;
    --border-strong:   #000;
    --color-border:    #000;
    --color-text-muted:   var(--color-text);
    --color-text-subtle:  var(--color-text);
  }
  .btn-outline,
  .card,
  .list-row {
    border-width: 2px;
  }
}

/* ========== Typography utilities — Phase 2 ========== */
.num,
.stat-value,
.list-row__metric,
table td.num,
table td[data-type="number"] {
  font-variant-numeric: tabular-nums;
}

.mono,
.code-id,
.loc-code {
  font-family: var(--font-mono);
  font-feature-settings: 'zero';
  font-size: 0.92em;
  background: var(--gray-100);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--gray-800);
}

/* ========== List row BEM primitive — structured proximity layout ==========
   Usage:
   <div class="list-row list-row--warning">
     <div class="list-row__icon">[icon]</div>
     <div class="list-row__body">
       <div class="list-row__title">Product name</div>
       <div class="list-row__meta">
         <span>Brand</span>
         <span class="loc-code">MAG-A1</span>
         <span>3d</span>
       </div>
     </div>
     <div class="list-row__metric">
       <div class="list-row__metric-value">2<span class="list-row__metric-denom"> / 8</span></div>
       <div class="list-row__metric-label">Tekort 6</div>
     </div>
     <div class="list-row__action"><a href="...">Bestel</a></div>
   </div>

   Additive to existing .list-row flex rule — BEM children select the grid layout.
*/
.list-row:has(.list-row__body) {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  border-left: 0;
  position: relative;
}
.list-row:has(.list-row__body)::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
}
.list-row--warning::before { background: var(--warning-600); }
.list-row--danger::before  { background: var(--danger-500);  }
.list-row--accent::before  { background: var(--accent-600);  }

.list-row__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.list-row--warning .list-row__icon { background: var(--warning-50); }
.list-row--danger  .list-row__icon { background: var(--danger-50);  }
.list-row--accent  .list-row__icon { background: var(--accent-50);  }

.list-row__body { min-width: 0; }
.list-row__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-row__meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
  display: flex;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}

.list-row__metric {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-right: 4px;
}
.list-row__metric-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.list-row--warning .list-row__metric-value { color: var(--warning-text); }
.list-row--danger  .list-row__metric-value { color: var(--danger-text);  }
.list-row__metric-denom {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.list-row__metric-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.list-row--warning .list-row__metric-label { color: var(--warning-text); }
.list-row--danger  .list-row__metric-label { color: var(--danger-text);  }

.list-row__action .btn,
.list-row__action a {
  font-size: 11px;
  padding: 6px 10px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .list-row:has(.list-row__body) {
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
  }
  .list-row__action { grid-column: 1 / -1; justify-self: stretch; }
  .list-row__action .btn,
  .list-row__action a { display: block; text-align: center; }
}

/* list-row--stack — opt-in: trail (chips/badges/controls) krijgt op mobiel een
   eigen volle regel onder de titel i.p.v. smal mee te wrappen naast de tekst. */
@media (max-width: 480px) {
  .list-row--stack { flex-wrap: wrap; }
  .list-row--stack .trail {
    flex-basis: 100%;
    margin-left: 40px;             /* 28px .ico + 12px gap — lijnt uit onder titel */
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .list-row--stack .trail select { max-width: 160px; }
}

/* ========== Form group — proximity for related inputs ==========
   <fieldset class="form-group" data-title="Leveranciergegevens">
     <input>...</input>
   </fieldset>
*/
.form-group {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-card);
  padding: 16px;
  margin-bottom: 16px;
  position: relative;
}
.form-group[data-title]::before {
  content: attr(data-title);
  position: absolute;
  top: -8px;
  left: 12px;
  padding: 0 8px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.form-group > * + * { margin-top: 12px; }

/* ========== Section spacing primitives — Phase 3 ========== */
.page-header { margin-bottom: var(--sp-section, 32px); }
.section-hero { padding: var(--sp-hero, 48px) 0; }

/* ========== List-row hover affordance — Phase 3 ========== */
.list-row:has(.list-row__body):hover { background: var(--primary-50); }
.list-row:has(.list-row__body):hover::before { background: var(--primary-600); }
.list-row--warning:hover::before { background: var(--warning-600); }
.list-row--danger:hover::before  { background: var(--danger-500);  }

/* ========== Empty state ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  color: var(--color-text-muted);
}
.empty-state__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: var(--gray-400);
}
.empty-state h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px;
}
.empty-state p {
  font-size: 13px;
  margin: 0 0 16px;
  max-width: 32ch;
}

/* ========== Tooltip — CSS-only, keyboard-accessible ==========
   <button aria-label="Dupliceer" data-tooltip="Dupliceer">...</button>
*/
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--gray-900);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
  z-index: 100;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}
[data-tooltip][data-tooltip-pos="bottom"]::after {
  bottom: auto; top: calc(100% + 6px);
}
[data-tooltip][data-tooltip-pos="left"]::after {
  bottom: auto; left: auto; right: calc(100% + 6px); top: 50%;
  transform: translateY(-50%);
}
[data-tooltip][data-tooltip-pos="right"]::after {
  bottom: auto; left: calc(100% + 6px); top: 50%;
  transform: translateY(-50%);
}

/* Scanner dock — sits directly under a camera viewport.
   Used by inventory scanner; reusable for any camera-control UI. */
.scanner-dock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-card) var(--r-card);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.scanner-dock-row {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
}

.scanner-dock-slider {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.scanner-dock-slider input[type="range"] {
  flex: 1;
  min-width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: 0;
}

.scanner-dock-slider input[type="range"]:focus-visible {
  outline: 3px solid rgb(26 106 163 / 0.4);
  outline-offset: 2px;
}

.scanner-dock-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: var(--e1);
}

.scanner-dock-slider input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  cursor: pointer;
  box-shadow: var(--e1);
}

.scanner-dock-slider-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  min-width: 48px;
  text-align: right;
}

/* Preset button group — segmented pill for discrete choices.
   Used by scanner zoom (1x/2x/Max) but reusable. */
.preset-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  padding: 3px;
  background: var(--surface-muted);
  gap: 2px;
}

.preset-group button {
  padding: 8px 12px;
  min-height: 44px;
  min-width: 52px;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: calc(var(--r-btn) - 2px);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.preset-group button[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
}

.preset-group button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dock pill — disabled/info state (iOS fallback) */
.scanner-dock-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px 14px;
  min-height: 44px;
  background: var(--surface-muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  font-size: var(--fs-sm);
  cursor: help;
}

/* Skeleton variant — used while capState === 'detecting' */
.scanner-dock-pill.skeleton {
  background: linear-gradient(90deg, var(--surface-muted) 0%, var(--border) 50%, var(--surface-muted) 100%);
  background-size: 200% 100%;
  animation: scanner-dock-skel 1.2s ease-in-out infinite;
  color: transparent;
  pointer-events: none;
}

@keyframes scanner-dock-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Busy state — applyConstraints pending */
.scanner-dock button[aria-busy="true"],
.preset-group button[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Slider stays interactive while busy — drag must not be interrupted. */
.scanner-dock-slider input[aria-busy="true"] {
  opacity: 0.7;
}

/* Error state surface */
.scanner-dock-error {
  background: var(--danger-50);
  border: 1px solid var(--danger);
  color: var(--danger-dark);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-btn);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
}

@media (max-width: 480px) {
  .scanner-dock-row {
    flex-wrap: wrap;
  }
  .scanner-dock-row > .btn,
  .scanner-dock-row > .preset-group {
    flex: 1 1 100%;
  }
  .preset-group button {
    flex: 1;
    min-width: 0;
  }
}

/* === Low-stock severity group (dashboard accordion bucket) === */
.low-stock-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.low-stock-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font: 600 13px/1.2 var(--font);
  user-select: none;
  transition: background 180ms;
}
.low-stock-group-head .left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.low-stock-group-head .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.low-stock-group-head .count {
  font: 700 11px/1 var(--font);
  padding: 3px 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.6);
}
.low-stock-group-head .caret {
  opacity: 0.6;
  transition: transform 180ms var(--ease);
}
.low-stock-group[aria-expanded="true"] .caret { transform: rotate(90deg); }

.low-stock-group.kritiek .low-stock-group-head { background: var(--danger-50); color: var(--danger-text); }
.low-stock-group.kritiek .dot { background: var(--danger); }
.low-stock-group.laag .low-stock-group-head    { background: var(--warning-50); color: var(--warning-text); }
.low-stock-group.laag .dot { background: var(--warning); }
.low-stock-group.ok .low-stock-group-head      { background: var(--surface-muted); color: var(--text-muted); }
.low-stock-group.ok .dot { background: var(--text-subtle); }

.low-stock-group-body { background: var(--surface); }
.low-stock-group[aria-expanded="false"] .low-stock-group-body { display: none; }

.low-stock-group-body.is-scroll {
  max-height: calc(10 * 40px + 16px);
  overflow-y: auto;
}

.low-stock-group-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.low-stock-group-row:hover { background: var(--surface-muted); }
.low-stock-group-row .name {
  flex: 1 1 auto;
  min-width: 0;
  font: 500 13px/1.3 var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.low-stock-group-row .meta {
  font: 500 11px/1 var(--font);
  color: var(--text-muted);
  flex: 0 0 auto;
}
.low-stock-group-row .qty {
  font: 700 13px/1 var(--font);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  min-width: 56px;
  text-align: right;
}
.low-stock-group-row .qty.kritiek { color: var(--danger-text); }
.low-stock-group-row .qty.laag    { color: var(--warning-text); }

@media (prefers-reduced-motion: reduce) {
  .low-stock-group-head,
  .low-stock-group-head .caret { transition: none; }
}

/* === Headings (added 2026-05-07 per style-card spec §21.2) === */
h1, .h1 { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.2; color: var(--text); margin: 0 0 var(--sp-lg); }
h2, .h2 { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.3; color: var(--text); margin: 0 0 var(--sp-md); }
h3, .h3 { font-size: var(--fs-xl);  font-weight: 600; line-height: 1.4; color: var(--text); margin: 0 0 var(--sp-sm); }
h4, .h4 { font-size: var(--fs-lg);  font-weight: 600; line-height: 1.4; color: var(--text); margin: 0 0 var(--sp-sm); }
h5, .h5 { font-size: var(--fs-md);  font-weight: 600; color: var(--text-muted); }
h6, .h6 { font-size: var(--fs-sm);  font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 768px) {
  h1, .h1 { font-size: var(--fs-2xl); }
  h2, .h2 { font-size: var(--fs-xl); }
}

/* === Form inputs (added 2026-05-07 per style-card spec §21.2) === */
.form-input, .form-select, .form-textarea {
  width: 100%; min-height: 36px; padding: var(--sp-sm) var(--sp-md);
  font: inherit; font-size: var(--fs-md);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-field);
  transition: border-color var(--t), box-shadow var(--t);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(26 106 163 / 0.15);
}
@media (max-width: 768px) {
  .form-input, .form-select, .form-textarea { min-height: 44px; }
}
/* RRB-EXCEPTION: a11y — iOS Safari auto-zooms the viewport when a focused
   input/select/textarea has computed font-size < 16px. RRB body is --fs-md
   (14px) so every form control would zoom on iPhone/iPad. Force >=16px on
   touch pointers only (desktop keeps 14px density). !important is required to
   beat high-specificity selectors (e.g. .login-card input…) and per-page
   inline style="font-size:…". Scope pointer:coarse = touch devices only. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}
.form-label { display: block; font-size: var(--fs-sm); font-weight: 600;
              color: var(--text-muted); margin-bottom: var(--sp-xs); }
.form-label .required,
label .required { color: var(--danger-text); margin-left: 2px; font-weight: 700; }

/* === Dropdown (added 2026-05-07 per style-card spec §21.2) === */
.dropdown { position: relative; }
.dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0;
                 min-width: 180px; background: var(--surface);
                 border: 1px solid var(--border); border-radius: var(--r-card);
                 box-shadow: var(--e2); padding: var(--sp-xs); z-index: 50; }
.dropdown-item { display: block; padding: var(--sp-sm) var(--sp-md);
                 font-size: var(--fs-sm); color: var(--text);
                 border-radius: var(--r-btn); cursor: pointer; }
.dropdown-item:hover { background: var(--surface-muted); }
.dropdown-divider { height: 1px; background: var(--border); margin: var(--sp-xs) 0; }

/* === Search-bar (added 2026-05-07 per style-card spec §16.1) === */
.search-bar { display: flex; align-items: center; gap: var(--sp-sm);
              background: var(--surface); border: 1px solid var(--border);
              border-radius: var(--r-field); padding: 0 var(--sp-md);
              min-height: 36px; }
.search-bar .search-icon  { color: var(--text-muted); }
.search-bar .search-input { flex: 1; border: 0; background: transparent;
                            min-height: unset; padding: var(--sp-sm) 0;
                            font: inherit; font-size: var(--fs-md); }
.search-bar .search-input:focus { outline: 0; }
.search-bar .search-clear { color: var(--text-subtle); cursor: pointer; }
.search-bar .search-filter { display: flex; gap: var(--sp-xs); }

@media (max-width: 768px) {
  .search-bar { width: 100%; min-height: 44px; padding: var(--sp-md); }
}

/* === Severity card — monitoring-grid variant (added 2026-05-07) ===
   Extends .card primitive with data-severity left-strip and grid anatomy.
   Used by server-status / unifi / uisp / dahua / ajax-alarm. */
.s-card {
  position: relative;
  padding: var(--sp-lg);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--sp-sm);
}
.s-card[data-severity="danger"]   { border-left: 3px solid var(--danger); }
.s-card[data-severity="warning"]  { border-left: 3px solid var(--warning); }
.s-card[data-severity="unknown"]  { border-left: 3px solid var(--border-strong); }
.s-card[data-severity="ok"]       { border-left: 3px solid var(--accent); }
.s-card[data-severity="snoozed"]  { border-left: 3px solid var(--gray-300); opacity: 0.85; }

.s-head { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.s-name {
  font: 600 15px/1.3 var(--font);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-head .s-tag { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: var(--text-subtle); }
.s-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}
.s-meta b { font-weight: 600; color: var(--text); }
.s-row  { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.s-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 12px;
  color: var(--text-muted);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border);
}
.s-foot b { font-weight: 600; color: var(--text); }
.s-snooze { font-size: 11px; color: var(--warning-text); }

/* Compact modifier — dense spacing to save vertical room. For nested
   severity sub-cards (issue inside a per-customer card) and tight monitoring
   lists. Spacing-only: keeps the .s-card anatomy, left-strip and border. */
.s-card-compact { padding: var(--sp-sm) var(--sp-md); gap: var(--sp-xs); }
.s-card-compact .s-foot { padding-top: var(--sp-xs); }

@media (max-width: 480px) {
  .s-card { padding: var(--sp-md); }
  .s-card-compact { padding: var(--sp-sm); }
}

/* === Bucket head — severity-bucket section title === */
.bucket-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  margin: var(--sp-xl) 0 var(--sp-md);
}
.bucket-head h3 {
  font: 600 14px/1.2 var(--font);
  margin: 0;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bucket-head .count { font: 600 12px/1 var(--font); color: var(--text-subtle); }
.bucket-head .toolbar { margin-left: auto; }

@media (max-width: 768px) {
  .bucket-head { margin-top: var(--sp-lg); }
}

/* === Filter row — severity filter-chip strip === */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin: var(--sp-md) 0;
}
.filter-row .chip { cursor: pointer; }
.filter-row .chip[aria-pressed="true"] { background: var(--primary); color: var(--surface); }

/* === Status dot — 8px health indicator === */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.dot.ok   { background: var(--success-control); }
.dot.bad  { background: var(--danger); }
.dot.warn { background: var(--warning); }
.dot.unk  { background: var(--border-strong); }
.dot.pulse { animation: rrb-pulse 1.6s ease-in-out infinite; }
.pulse { animation: rrb-pulse 1.6s ease-in-out infinite; }

@keyframes rrb-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .dot.pulse, .pulse { animation: none; }
}

/* === Drawer — side panel (desktop) / fullscreen sheet (mobile) === */
body.drawer-locked { overflow: hidden; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 10001;
  animation: rrb-drawer-fade 160ms ease-out;
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
  z-index: 10002;
  display: flex;
  flex-direction: column;
  animation: rrb-drawer-slide 200ms ease-out;
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.drawer-title {
  margin: 0;
  font: 600 var(--fs-md)/1.3 var(--font);
  color: var(--primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-close {
  appearance: none;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-btn);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
}

/* ========== Dashboard sidebar shell (B2 default, promoted 2026-05-22) ==========
   Applies only to desktop dashboard sidebars. Project mobile styles keep
   ownership of drawer width, transforms, and larger touch targets. */
@media (min-width: 769px) {
  :root body .sidebar:not(.mobile-open) {
    width: var(--sidebar-width, 188px);
    padding: 10px;
    color: var(--color-sidebar-text);
    background:
      linear-gradient(90deg, rgba(0, 193, 48, .08), transparent 32%),
      linear-gradient(180deg, #0a263d 0%, #071d2f 100%);
    transition: width var(--t), transform var(--t), background var(--t);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.24) transparent;
  }

  :root body .sidebar:not(.mobile-open)::-webkit-scrollbar {
    width: 8px;
  }

  :root body .sidebar:not(.mobile-open)::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.22);
  }

  :root body .sidebar.collapsed:not(.mobile-open) {
    width: var(--sidebar-collapsed-width, 56px);
    padding: 12px 0;
    align-items: center;
  }

  :root body .sidebar-logo,
  :root body .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 54px;
    margin: 0 0 10px;
    padding: 7px 4px 9px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  :root body .sidebar-logo::before,
  :root body .sidebar-header::before {
    content: "";
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 12px;
    background: transparent url("/static/rrb-logo-shield.png?v=20260522menulogo") center / 25px 27px no-repeat;
    box-shadow: 0 14px 30px rgba(0,0,0,.20);
  }

  :root body .sidebar.collapsed .sidebar-logo::before,
  :root body .sidebar.collapsed .sidebar-header::before {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    background-size: 26px 28px;
    border-radius: 12px;
  }

  :root body .sidebar-logo {
    color: #fff;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: 0;
  }

  :root body .sidebar-logo > span {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root body .sidebar-header > :is(h1, p) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root body .sidebar-header {
    flex-wrap: wrap;
  }

  :root body .sidebar-header h1 {
    flex: 1 1 calc(100% - 42px);
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
  }

  :root body .sidebar-header p {
    flex: 1 1 100%;
    margin: -6px 0 0 42px;
    color: rgba(255,255,255,.63);
    font-size: 11px;
    font-weight: 650;
  }

  :root body .sidebar-logo .brand-green {
    display: none;
  }

  :root body .sidebar-logo .sidebar-toggle,
  :root body .sidebar-logo .sidebar-close {
    margin-left: auto;
  }

  :root body .sidebar-toggle {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: rgba(255,255,255,.66);
    transition: background var(--t), color var(--t), transform var(--t);
  }

  :root body .sidebar-toggle:hover,
  :root body .sidebar-toggle:focus-visible {
    color: #fff;
    background: rgba(255,255,255,.08);
    outline: 0;
  }

  :root body .sidebar-nav {
    gap: 2px;
    min-width: 0;
  }

  :root body .sidebar .nav-item {
    position: relative;
    min-width: 0;
    min-height: 34px;
    gap: 7px;
    padding: 7px 8px;
    border-left: 2px solid transparent;
    border-radius: 8px;
    color: var(--color-sidebar-text);
    font-size: 13px;
    line-height: 1.25;
    transition: transform 190ms ease, background 190ms ease, color 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
  }

  :root body .sidebar .nav-item:hover {
    color: #fff;
    background: var(--color-sidebar-hover);
    text-decoration: none;
    transform: translateX(3px);
  }

  :root body .sidebar .nav-item:focus-visible {
    outline: 2px solid rgba(255,255,255,.45);
    outline-offset: 2px;
  }

  :root body .sidebar .nav-item.active {
    border-left-color: var(--accent);
    background: var(--color-sidebar-active);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  :root body .sidebar .nav-item.active::after {
    content: "";
    position: absolute;
    right: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(0,193,48,.12);
  }

  :root body .sidebar.collapsed .nav-item.active::after {
    display: none;
  }

  :root body .sidebar .nav-icon {
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
    font-size: 14px;
  }

  :root body .sidebar .nav-label,
  :root body .sidebar .nav-group-label,
  :root body .sidebar .sidebar-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root body .sidebar-user,
  :root body .sidebar-footer {
    min-width: 0;
    margin-top: auto;
    padding: 12px 6px 4px;
    border-top: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.72);
    opacity: 1;
  }

  :root body .sidebar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  }

  :root body .app-header-logo,
  :root body .header-logo {
    color: transparent !important;
    background: transparent url("/static/rrb-logo-shield.png?v=20260522menulogo") center / contain no-repeat !important;
    overflow: hidden;
    text-indent: -999px;
  }
}

/* ========== Mobile dashboard chrome (B2 default, promoted 2026-05-22) ==========
   The responsive layer owns the default off-canvas drawer contract. Projects
   may refine its width and motion while this layer aligns appearance. */
@media (max-width: 768px) {
  :root body {
    --rrb-mobile-topbar-height: 54px;
  }

  :root body .mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    width: 100%;
    min-height: var(--rrb-mobile-topbar-height);
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 10px;
    color: #fff;
    background:
      linear-gradient(90deg, rgba(0, 193, 48, .12), transparent 42%),
      linear-gradient(180deg, #0a263d 0%, #071d2f 100%);
    border-bottom: 1px solid rgba(255,255,255,.10);
    border-radius: 0;
    box-shadow: 0 8px 18px rgba(3, 14, 24, .14);
    backdrop-filter: blur(12px);
  }

  :root body .mobile-topbar-title {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: 0;
  }

  :root body .mobile-topbar-title::before,
  :root body .topbar-brand::before {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: transparent url("/static/rrb-logo-shield.png?v=20260522menulogo") center / 22px 24px no-repeat;
    box-shadow: 0 10px 22px rgba(0,0,0,.20);
  }

  :root body .mobile-topbar-title::before {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  :root body .mobile-topbar-title > span {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root body .mobile-topbar-title > span:first-child > span:first-child,
  :root body .mobile-topbar-title .brand-accent {
    display: none !important;
  }

  :root body .mobile-page-indicator {
    color: rgba(255,255,255,.62);
    opacity: 1;
  }

  :root body .topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: 0;
  }

  :root body .mobile-topbar .hamburger,
  :root body .hamburger-btn {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    color: #fff;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    font-size: 0;
    overflow: hidden;
    text-indent: 0;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
  }

  :root body .mobile-topbar .hamburger::before,
  :root body .hamburger-btn::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 14px;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
  }

  :root body .mobile-topbar .hamburger::after,
  :root body .hamburger-btn::after {
    content: none;
  }

  :root body .mobile-topbar .hamburger:active,
  :root body .hamburger-btn:active {
    transform: scale(.97);
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.20);
  }

  :root body .hamburger-btn {
    background:
      linear-gradient(90deg, rgba(0, 193, 48, .12), transparent 42%),
      linear-gradient(180deg, #0a263d 0%, #071d2f 100%);
  }

  :root body .sidebar {
    top: var(--rrb-mobile-topbar-height);
    bottom: 0;
    height: calc(100dvh - var(--rrb-mobile-topbar-height));
    min-height: 0;
    z-index: 1100;
    color: var(--color-sidebar-text);
    background:
      linear-gradient(90deg, rgba(0, 193, 48, .08), transparent 32%),
      linear-gradient(180deg, #0a263d 0%, #071d2f 100%);
  }

  :root body .sidebar-backdrop,
  :root body .sidebar-overlay {
    position: fixed;
    top: var(--rrb-mobile-topbar-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1090;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  :root body .sidebar-backdrop.active,
  :root body .sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  :root body .sidebar-logo,
  :root body .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 54px;
    margin: 0 0 10px;
    padding: 7px 4px 9px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  :root body .sidebar-logo::before,
  :root body .sidebar-header::before {
    content: "";
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 12px;
    background: transparent url("/static/rrb-logo-shield.png?v=20260522menulogo") center / 25px 27px no-repeat;
    box-shadow: 0 14px 30px rgba(0,0,0,.20);
  }

  :root body .sidebar-logo {
    color: #fff;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: 0;
  }

  :root body .sidebar-header {
    flex-wrap: wrap;
  }

  :root body .sidebar-logo > :is(span, .brand-text),
  :root body .sidebar-header > :is(h1, p) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root body .sidebar-header h1 {
    flex: 1 1 calc(100% - 42px);
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
  }

  :root body .sidebar-header p {
    flex: 1 1 100%;
    margin: -6px 0 0 42px;
    color: rgba(255,255,255,.63);
    font-size: 11px;
    font-weight: 650;
  }

  :root body .sidebar-logo > :is(span, .brand-text) {
    flex: 1 1 auto;
    display: block;
    max-width: 100%;
  }

  :root body .sidebar-logo .brand-green {
    display: none !important;
  }

  :root body .sidebar-logo .sidebar-toggle,
  :root body .sidebar-logo .sidebar-close {
    margin-left: auto;
  }

  :root body .sidebar-close {
    color: rgba(255,255,255,.76);
    border-radius: 12px;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
  }

  :root body .sidebar-close:active {
    transform: scale(.97);
    color: #fff;
    background: rgba(255,255,255,.14);
  }

  :root body .sidebar .nav-item {
    color: var(--color-sidebar-text);
  }

  :root body .sidebar .nav-item.active {
    background: var(--color-sidebar-active);
    color: #fff;
  }
}

.drawer-close:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-lg);
}

.drawer-foot {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}

@keyframes rrb-drawer-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rrb-drawer-slide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes rrb-drawer-slide-out { to { transform: translateX(100%); } }
@keyframes rrb-drawer-fade-out  { to { opacity: 0; } }
.drawer--leaving          { animation: rrb-drawer-slide-out 160ms ease-in forwards; }
.drawer-backdrop--leaving { animation: rrb-drawer-fade-out 140ms ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  .drawer--leaving, .drawer-backdrop--leaving { animation: none; }
}

@media (max-width: 767px) {
  .drawer {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-left: 0;
    border-radius: 0;
  }
  .drawer-backdrop { display: none; }
  .drawer-close { min-width: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-backdrop { animation: none; }
}
/* =============================================================
   §17 LIST-OVERVIEW PRIMITIVES (added 2026-05-08)
   Container components for the list-overview page archetype:
   filter-toolbar, bucket-pills, list-pane, color-legend, pin-badge.
   Mobile uses edge-to-edge containers — see rrb-responsive.css .shell.
   ============================================================= */

/* === Toolbar — sticky filter strip (search + buckets + sort) === */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.toolbar > .search-bar { flex: 1 1 280px; min-width: 0; }
.toolbar select.form-input,
.toolbar .form-input { min-height: 36px; }

/* === Bucket pills — segmented filter buttons with counts === */
.bucket-pills {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-muted);
  border-radius: var(--r-btn);
}
.bucket-pills button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: calc(var(--r-btn) - 2px);
  font: 500 var(--fs-sm)/1 var(--font);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.bucket-pills button:hover { background: var(--surface); color: var(--text); }
.bucket-pills button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}
.bucket-pills .count {
  font-size: 11px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.bucket-pills button.is-active .count { color: var(--primary); }

/* === List-pane — scrollable list container with sticky head === */
.list-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.list-pane .list-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 2;
}
.list-pane .list-pane-head h2 {
  font: 600 12px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 0;
}
.list-pane .list-rows {
  flex: 1;
  min-height: 0;
  /* The list/table body owns both scroll axes. Keep the pane head and pager
     fixed while long or wide datasets move inside their own box. */
  overflow: auto;
  padding: 0;
}

/* Card-stack variant — softer surround for tile-like list items */
.list-pane.cardstack-pane { background: var(--surface-muted); }
.list-pane.cardstack-pane .list-pane-head { background: var(--surface); }
.list-pane.cardstack-pane .list-rows {
  background: transparent;
  padding: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* === Color-legend — explanatory color-key strip === */
.color-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  padding: var(--sp-sm) var(--sp-lg);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  align-items: center;
}
.color-legend .legend-title {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}
.color-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.color-legend .swatch {
  display: inline-block;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.color-legend .swatch.crit { background: var(--danger); }
.color-legend .swatch.high { background: var(--warning); }
.color-legend .swatch.norm { background: var(--primary); }
.color-legend .swatch.low  { background: var(--border-strong); }
.color-legend .dot-key {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.color-legend .dot-key.crit { background: var(--danger); }
.color-legend .dot-key.high { background: var(--warning); }
.color-legend .dot-key.norm { background: var(--primary); }
.color-legend .dot-key.low  { background: var(--border-strong); }
.color-legend .pin-key { color: var(--warning-text); }

/* === Pin-badge — replaces yellow gradient bg for pinned items.
   Drift rule: never use solid-color bg as semantic indicator on cards. === */
.pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--warning-50, rgb(239 108 0 / 0.10));
  color: var(--warning-text);
  border-radius: 4px;
  font: 600 10.5px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pin-badge svg { width: 10px; height: 10px; }

/* Pin corner — icon-only variant for cards with pin in top-right */
.pin-corner {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--warning);
  pointer-events: none;
}

/* =============================================================
   §17 LIST-OVERVIEW MOBILE — edge-to-edge containers
   Negative margin = parent shell padding (4px → 8px → 12px scale).
   Drops border + radius to extend cards to screen edge.
   ============================================================= */
@media (max-width: 768px) {
  .list-pane.cardstack-pane .list-rows { padding: 4px; gap: 4px; }
}
@media (max-width: 480px) {
  .toolbar {
    padding: var(--sp-sm);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin-left: calc(var(--sp-sm) * -1);
    margin-right: calc(var(--sp-sm) * -1);
    gap: 6px;
  }
  .toolbar > .search-bar { flex: 1 1 100%; }
  .toolbar .bucket-pills { width: 100%; justify-content: space-between; }
  .toolbar .bucket-pills button {
    flex: 1 1 0;
    justify-content: center;
    padding: 8px 6px;
  }
  .toolbar select.form-input { flex: 1 1 100%; min-width: 0; }

  .list-pane.cardstack-pane {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin: 0 calc(var(--sp-sm) * -1);
  }
  .list-pane.cardstack-pane .list-rows {
    padding: 4px 0;
    gap: 4px;
  }

  .color-legend {
    padding: 6px 8px;
    gap: 8px;
    font-size: 10.5px;
  }
  .color-legend .legend-title { font-size: 10px; }
}

/* ============================================================
 * NAMING CANON FOUNDATION (2026-05-26) — 5 missing primitives
 * Spec: docs/superpowers/specs/2026-05-26-naming-canon.md
 * ============================================================ */

/* --- .popover — tooltip / balloon ----------------------------- */
.popover {
  position: absolute;
  z-index: 1300;
  max-width: 280px;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--text);
  color: #fff;
  border-radius: var(--r-btn);
  font: 500 12px/1.4 var(--font);
  box-shadow: var(--e1);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.popover.is-open {
  opacity: 1;
  pointer-events: auto;
  animation: rrb-popover-in 120ms var(--ease);
}
@keyframes rrb-popover-in { from { transform: translateY(3px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .popover.is-open { animation: none; } }
.popover::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--text);
  transform: rotate(45deg);
}
.popover[data-placement="top"]::after    { bottom: -4px; left: 50%; margin-left: -4px; }
.popover[data-placement="bottom"]::after { top: -4px; left: 50%; margin-left: -4px; }
.popover[data-placement="left"]::after   { right: -4px; top: 50%; margin-top: -4px; }
.popover[data-placement="right"]::after  { left: -4px; top: 50%; margin-top: -4px; }

/* --- .skel — loading skeleton primitives ---------------------- */
.skel {
  display: inline-block;
  background: linear-gradient(90deg, var(--surface-muted) 0%, var(--border) 50%, var(--surface-muted) 100%);
  background-size: 200% 100%;
  animation: rrb-skel-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--r-btn);
  color: transparent;
  user-select: none;
}
.skel-row {
  display: block;
  height: 14px;
  margin: 6px 0;
  border-radius: var(--r-btn);
  background: linear-gradient(90deg, var(--surface-muted) 0%, var(--border) 50%, var(--surface-muted) 100%);
  background-size: 200% 100%;
  animation: rrb-skel-shimmer 1.2s ease-in-out infinite;
}
.skel-card {
  display: block;
  height: 80px;
  border-radius: var(--r-card);
  background: linear-gradient(90deg, var(--surface-muted) 0%, var(--border) 50%, var(--surface-muted) 100%);
  background-size: 200% 100%;
  animation: rrb-skel-shimmer 1.2s ease-in-out infinite;
}
@keyframes rrb-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel, .skel-row, .skel-card { animation: none; }
}

/* --- .field-error / .form-input--error — form error state ----- */
.form-input--error,
.form-select.form-input--error,
.form-textarea.form-input--error {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger-50);
}
.form-input--error:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(220 53 69 / 0.25);
}
.field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger-text);
  font-weight: 500;
}
.field-error::before {
  content: "⚠ ";
  margin-right: 2px;
}

/* --- Login shell — default dashboard authentication surface ----- */
.login-container,
.login-bg,
.login-screen,
.login-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  background:
    linear-gradient(145deg, rgba(225, 239, 255, 0.95), rgba(249, 251, 246, 0.96) 46%, rgba(255, 244, 238, 0.98)),
    var(--surface-muted, #f5f5f7);
}

.login-card,
.login-card.glass,
.login-panel {
  box-sizing: border-box;
  width: min(100%, 390px);
  display: grid;
  gap: 18px;
  padding: 34px 24px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  box-shadow: 0 18px 60px rgba(29, 29, 31, 0.12);
  backdrop-filter: blur(28px) saturate(1.2);
}

.login-brand,
.login-card > div:first-child,
.login-panel {
  text-align: center;
}

.login-mark {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: var(--r-card);
  background: linear-gradient(145deg, #007aff, #34c759);
  color: #fff;
  font-weight: 800;
}

.login-title,
.login-card h1,
.login-panel h1,
.login-card h2 {
  margin: 0;
  color: var(--text) !important;
  font-size: 28px !important;
  line-height: 1.08;
  letter-spacing: 0;
}

.login-subtitle,
.login-message,
.login-card p {
  color: var(--text-muted) !important;
}

.login-error,
.login-card .error {
  margin: 0 0 4px;
  color: var(--danger-text);
  font-size: 13px;
  text-align: center;
}

.login-card form,
.login-panel form {
  display: grid;
  gap: 14px;
  width: 100%;
}

.login-card .form-group {
  margin: 0;
}

.login-card .form-input,
.login-card .form-control,
.login-card input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(29, 29, 31, 0.12);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  box-shadow: none;
}

.login-card .form-input:focus,
.login-card .form-control:focus,
.login-card input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: 0;
  border-color: rgba(0, 122, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16);
}

.login-card .btn-primary,
.login-card .btn-login,
.login-submit {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  border-color: #1d1d1f;
  border-radius: var(--r-card);
  background: #1d1d1f;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.login-card .btn-primary:hover,
.login-card .btn-login:hover,
.login-submit:hover {
  border-color: #000;
  background: #000;
}

.login-sso-button,
.microsoft-button {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: var(--r-card);
  background: #1d1d1f;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.login-sso-button:hover,
.microsoft-button:hover {
  background: #000;
  color: #fff;
}

.login-sso-mark,
.microsoft-grid {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.login-sso-mark {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  overflow: hidden;
  color: transparent;
}

.login-sso-mark::before,
.login-sso-mark::after,
.microsoft-grid i {
  content: "";
  display: block;
}

.login-sso-mark::before {
  background:
    linear-gradient(#f25022 0 0) 0 0 / 8px 8px no-repeat,
    linear-gradient(#00a4ef 0 0) 0 10px / 8px 8px no-repeat;
}

.login-sso-mark::after {
  background:
    linear-gradient(#7fba00 0 0) 0 0 / 8px 8px no-repeat,
    linear-gradient(#ffb900 0 0) 0 10px / 8px 8px no-repeat;
}

.microsoft-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.microsoft-grid i:nth-child(1) { background: #f25022; }
.microsoft-grid i:nth-child(2) { background: #7fba00; }
.microsoft-grid i:nth-child(3) { background: #00a4ef; }
.microsoft-grid i:nth-child(4) { background: #ffb900; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -2px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: rgba(29, 29, 31, 0.12);
}

@media (max-width: 480px) {
  .login-container,
  .login-bg,
  .login-screen,
  .login-wrap {
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  }

  .login-card,
  .login-panel {
    padding: 28px 20px;
  }
}

/* --- .pager / .pager-btn — pagination ------------------------- */
.pager {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md) 0;
  font-size: 13px;
  color: var(--text-muted);
}
.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--sp-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-btn);
  font: 500 13px/1 var(--font);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pager-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}
.pager-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.pager-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.pager-info {
  margin: 0 var(--sp-sm);
  font-variant-numeric: tabular-nums;
}
.pager-gap {
  min-width: var(--sp-md);
  text-align: center;
  color: var(--text-muted);
}

/* ========== Progress bar (determinate) — form-wizard archetype ========== */
.progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--gray-200);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--primary);
  transition: width var(--t) var(--ease);
}
.progress-bar[data-state="done"] { background: var(--success-control); }

/* ========== Stepper — form-wizard stap-indicator ========== */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  /* No external margin: primitive containers must not impose spacing on their context.
     Consuming pages (e.g. frozen configurator front page) own their own spacing. */
}
.stepper-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/1 var(--font);
  color: var(--text-muted);
}
.stepper-step::before {
  content: attr(data-step);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
}
.stepper-step.is-active { color: var(--text); }
.stepper-step.is-active::before { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.stepper-step.is-done { color: var(--text-muted); }
.stepper-step.is-done::before { content: "✓"; border-color: var(--success-control); background: var(--success-control); color: var(--on-success); }
.stepper-sep { flex: 1; height: 1px; background: var(--border); min-width: 16px; }

/* ========== Kanban — kanban archetype (backing voor ui-completeness checks) ========== */
.kanban-strip {
  display: flex;
  gap: var(--sp-md);
  overflow-x: auto;
  padding-bottom: var(--sp-sm);
  align-items: flex-start;
}
.kanban-col {
  flex: 0 0 280px;
  min-width: 240px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.kanban-col-header {
  padding: 10px 12px;
  font: 600 13px/1.2 var(--font);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kanban-col-body {
  padding: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  overflow-y: auto;
}
@media (max-width: 768px) {
  .kanban-col { flex-basis: 85vw; }
}

/* --- .drag-handle --------------------------------------------- */
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  color: var(--text-subtle);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}
.drag-handle::before {
  content: "⋮⋮";
  font-size: 14px;
  letter-spacing: -1px;
  line-height: 1;
}
.drag-handle:hover { color: var(--text-muted); }
.drag-handle:active { cursor: grabbing; }
.drag-handle.is-dragging { color: var(--primary); }

/* ========== rrb-table-filterbar — combineerbare filters per tabelkolom ==========
   De filterlogica woont in RRB.ui.tableFilter. De component blijft stabiel in
   de DOM; alleen data-filter-row zichtbaarheid verandert tijdens filteren. */
.rrb-table-filterbar {
  display: grid;
  gap: var(--sp-md);
  padding: var(--sp-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.rrb-table-filterbar__head,
.rrb-table-filterbar__foot,
.rrb-table-filterbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.rrb-table-filterbar__head { justify-content: space-between; }
.rrb-table-filterbar__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}
.rrb-table-filterbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  gap: var(--sp-sm);
}
.rrb-table-filterbar__field {
  display: grid;
  gap: var(--sp-xs);
  min-width: 0;
}
.rrb-table-filterbar__field--wide { grid-column: span 2; }
.rrb-table-filterbar__field > label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}
.rrb-table-filterbar__field > .form-input,
.rrb-table-filterbar__field > .form-select { width: 100%; min-width: 0; }
.rrb-table-filterbar__foot {
  justify-content: space-between;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.rrb-table-filterbar__status { min-height: 1.3em; }
.rrb-table-filterbar [data-filter-row][hidden] { display: none; }
.rrb-table-filterbar [data-filter-empty] { margin: 0; }

/* ========== rrb-table — geclassificeerde data- en statische tabellen ==========
   Dataset: <table class="rrb-table" data-sortable data-filterable>.
   Paginafilters: data-filterable="external"; serverfilters: "server".
   Niet-interactieve key/value-layouts gebruiken data-rrb-table-static met reden.
   Gedrag via RRB.ui.sortTable + autoTableFilters; geen pagina-eigen variant. */
.rrb-table { width: 100%; border-collapse: collapse; }
.rrb-table th,
.rrb-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.rrb-table thead th { font-weight: 600; color: var(--text-muted); white-space: nowrap; }
/* rij-hover: scan-hulp; cursor:pointer alleen op klikbare rijen via modifier */
.rrb-table tbody tr { transition: background var(--t) var(--ease); }
.rrb-table tbody tr:hover { background: var(--surface-muted); }
.rrb-table.rrb-table--clickable tbody tr { cursor: pointer; }
/* sorteerbare kolomkop: hover-kleur + pijl + aria-sort indicator */
:is(.rrb-table, table[data-rrb-sort-wired]) th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
:is(.rrb-table, table[data-rrb-sort-wired]) th.sortable:hover { color: var(--primary); background: var(--surface-muted); }
:is(.rrb-table, table[data-rrb-sort-wired]) th.sortable:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
:is(.rrb-table, table[data-rrb-sort-wired]) th.sortable::after {
  content: "↕";
  margin-left: 6px;
  font-size: 11px;
  opacity: .35;
  transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
}
:is(.rrb-table, table[data-rrb-sort-wired]) th.sortable[aria-sort="ascending"]::after { content: "▲"; opacity: 1; color: var(--primary); }
:is(.rrb-table, table[data-rrb-sort-wired]) th.sortable[aria-sort="descending"]::after { content: "▼"; opacity: 1; color: var(--primary); }

/* Automatisch ingevoegde tabeltools: vrije-tekstfilter op desktop en een
   gedeelde sorteerkeuze voor compacte/mobile tabellen waar thead kan wegvallen. */
.rrb-table-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-sm);
}
.rrb-table-tools__search { flex: 1 1 260px; min-width: min(100%, 220px); }
.rrb-table-tools__search .form-input { width: 100%; }
.rrb-table-tools__clear { flex: 0 0 auto; }
.rrb-table-tools__sort { display: none; align-items: end; gap: var(--sp-xs); }
.rrb-table-tools__sort label { display: grid; gap: var(--sp-xs); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.rrb-table-tools__sort .form-select { min-width: 150px; }
.rrb-table-tools__direction { white-space: nowrap; }
.rrb-table-tools__status { margin-left: auto; color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.rrb-table-tools--sort-only { display: none; }
@media (hover: none) {
  /* touch: geen hover-state die blijft plakken na tap */
  .rrb-table tbody tr:hover { background: inherit; }
  :is(.rrb-table, table[data-rrb-sort-wired]) th.sortable:hover { background: inherit; color: var(--text-muted); }
}
@media (prefers-reduced-motion: reduce) {
  .rrb-table tbody tr,
  :is(.rrb-table, table[data-rrb-sort-wired]) th.sortable,
  :is(.rrb-table, table[data-rrb-sort-wired]) th.sortable::after { transition: none; }
}

/* ========== rrb-link — inline link met hover-affordance + focus-ring ========== */
.rrb-link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.rrb-link:hover { border-bottom-color: currentColor; }
.rrb-link:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--primary-100);
}
@media (prefers-reduced-motion: reduce) { .rrb-link { transition: none; } }

/* ========== rrb-switch — toggle. Markup:
   <label class="rrb-switch">
     <input type="checkbox">
     <span class="rrb-switch__track"></span>
     <span class="rrb-switch__knob"></span>
   </label> */
.rrb-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  vertical-align: middle;
}
.rrb-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rrb-switch__track {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background var(--t) var(--ease);
}
.rrb-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform var(--t) var(--ease);
  pointer-events: none;
}
.rrb-switch input:checked ~ .rrb-switch__track { background: var(--success-control); }
.rrb-switch input:checked ~ .rrb-switch__knob { transform: translateX(18px); }
.rrb-switch input:focus-visible ~ .rrb-switch__track { box-shadow: 0 0 0 3px var(--primary-100); }
.rrb-switch input:disabled ~ .rrb-switch__track { opacity: .5; }
.rrb-switch input:disabled { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .rrb-switch__track, .rrb-switch__knob { transition: none; }
}

/* ========== checkbox & radio — merk-accent + subtiele press-feedback ==========
   Geeft elke checkbox/radio fleet-breed een consistente kleur + indrukrespons. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--primary);
  cursor: pointer;
}
input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(.88); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"]:active, input[type="radio"]:active { transform: none; }
}

/* =====================================================================
   RRB UI Defaults — Batch 1 (additive; spec 2026-06-24-rrb-ui-defaults-batch-1)
   All token-only. Namespaced to avoid project-local collisions.
   ===================================================================== */

/* --- Spinner (namespaced — bare .spinner exists in 5 project CSS files) ---
   + busy-button hook: .btn[data-busy="true"] is set by RRB.ui.buttonBusy. */
.rrb-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  display: inline-block;
  animation: rrb-spin .6s linear infinite;
}
@keyframes rrb-spin { to { transform: rotate(360deg); } }
.btn[data-busy="true"] { position: relative; color: transparent !important; }
.btn[data-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--text-muted);
  animation: rrb-spin .6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rrb-spinner, .btn[data-busy="true"]::after { animation: none; }
}

/* --- .sr-only — visually-hidden, screen-reader-only utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Form: aria-invalid hook (mirrors .form-input--error; a11y-correct markup) --- */
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger-50);
}
.form-input[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus,
.form-textarea[aria-invalid="true"]:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(220 53 69 / 0.25);
}

/* --- Form: inline success state --- */
.form-input--success,
.form-select.form-input--success,
.form-textarea.form-input--success {
  border-color: var(--success-control);
  box-shadow: 0 0 0 1px var(--accent-50);
}
.field-success {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--success-text);
  font-weight: 500;
}

/* --- Form: standalone hint/help text for the .form-group stack --- */
.form-hint {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* --- Form: disabled (muted bg + text + not-allowed) vs readonly (muted bg only) --- */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--surface-muted);
  color: var(--text-subtle);
  cursor: not-allowed;
}
.form-input[readonly],
.form-textarea[readonly] { background: var(--surface-muted); }

/* --- Table: opt-in zebra striping (declared BEFORE semantic tint so the
   equal-specificity semantic rule below wins on even status rows) --- */
.rrb-table--striped tbody tr:nth-child(even) > td { background: var(--primary-50); }

/* --- Table: semantic row tinting (success = --accent). `tbody` qualifier
   matches zebra specificity (0,2,3); later source order => status beats zebra. --- */
.rrb-table tbody tr.row-danger  > td { background: var(--danger-50); }
.rrb-table tbody tr.row-warning > td { background: var(--warning-50); }
.rrb-table tbody tr.row-success > td { background: var(--accent-50); }
.rrb-table tbody tr[aria-selected="true"] > td { background: var(--primary-50); }

/* --- Table: canonical host for wide or long tables ----------------------
   The explicit max-height is essential: overflow alone cannot create an
   internal scrollport when the wrapper is allowed to grow with its rows.
   `.table-scroll` remains a compatibility alias while consumers migrate to
   `.rrb-table-host`. The runtime adds the keyboard/accessibility contract. */
.rrb-table-host,
.table-scroll {
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  max-height: min(60vh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Keep legacy semantic wrappers working during migration. This deliberately
   excludes generic cards/sections: a card is not a table host merely because
   it contains a table. The semantic `table-wrap` naming convention covers
   older project wrappers without hard-coding project names here. */
:is(
  .table-container,
  .table-wrap,
  .responsive-table,
  .responsive-table-wrap,
  [class*="table-wrap"]
):has(> table:not([role="presentation"])) {
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  max-height: min(60vh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Keep the table itself from shrinking below its content width and keep the
   header available while the host scrolls vertically. Responsive mobile
   table transforms hide thead where appropriate, so this is a desktop/table
   host affordance rather than a second mobile layout. */
.rrb-table-host > table,
.table-scroll > table,
:is(
  .table-container,
  .table-wrap,
  .responsive-table,
  .responsive-table-wrap,
  [class*="table-wrap"]
):has(> table:not([role="presentation"])) > table {
  min-width: 100%;
}
.rrb-table-host > table > thead > tr > th,
.table-scroll > table > thead > tr > th,
:is(
  .table-container,
  .table-wrap,
  .responsive-table,
  .responsive-table-wrap,
  [class*="table-wrap"]
):has(> table:not([role="presentation"])) > table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}
.rrb-table-host:focus-visible,
.table-scroll:focus-visible,
:is(
  .table-container,
  .table-wrap,
  .responsive-table,
  .responsive-table-wrap,
  [class*="table-wrap"]
):has(> table:not([role="presentation"])):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- Table: centered empty-state row (<tr class="table-empty-row"><td colspan=N>) --- */
.rrb-table .table-empty-row td {
  text-align: center;
  padding: var(--sp-2xl);
  color: var(--text-muted);
}

/* --- Badge: neutral (surface-muted; 4 projects define this locally) --- */
.badge-neutral { background: var(--surface-muted); color: var(--text-muted); border-color: var(--border); }

/* --- rrb-link visited (color-only — :visited drops non-color props) --- */
.rrb-link:visited { color: var(--primary-dark); }

/* --- Radio card / group — real form radios (name-grouping, :checked, submit).
   :has() scoped to a direct radio child; native input ring suppressed inside the
   card (primitives uses `outline` for the radio focus ring) so only the card rings. */
.rrb-radio-group { display: flex; flex-direction: column; gap: var(--sp-sm); }
.rrb-radio-card {
  display: flex;
  gap: var(--sp-sm);
  align-items: flex-start;
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.rrb-radio-card:has(> input[type="radio"]:checked) {
  border-color: var(--primary);
  background: var(--primary-50);
}
.rrb-radio-card:has(> input[type="radio"]:focus-visible) {
  box-shadow: 0 0 0 3px var(--primary-100);
}
.rrb-radio-card > input[type="radio"]:focus-visible { outline: 0; outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { .rrb-radio-card { transition: none; } }

/* =====================================================================
   Fase-2 primitives — breadcrumbs . tag-input . accordion . avatar . date-input
   (framework-fase2-primitives; additive, token-only)
   ===================================================================== */

/* ========== Breadcrumbs ========== */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.crumb { color: var(--text-muted); text-decoration: none; }
a.crumb:hover { color: var(--primary); text-decoration: underline; }
.crumb[aria-current="page"] { color: var(--text); font-weight: 500; }
.crumbs > .crumb + .crumb::before { content: "\203A"; margin-right: 6px; color: var(--text-subtle); }

/* ========== Tag input chips + vrij invoerveld ========== */
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--r-field); background: var(--surface); cursor: text; }
.tag-input:focus-within { outline: 0; box-shadow: 0 0 0 3px rgb(26 106 163 / 0.25); border-color: var(--primary); }
.tag-input input { border: 0; outline: 0; flex: 1; min-width: 80px; font: 500 13px/1.6 var(--font); background: transparent; color: var(--text); }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 4px; background: var(--primary-50); color: var(--primary-dark, var(--primary)); font: 500 12px/1.4 var(--font); }
.tag-chip__x { border: 0; background: transparent; cursor: pointer; color: inherit; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 3px; }
.tag-chip__x:hover { background: var(--primary-100, var(--primary-50)); }
.tag-chip__x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ========== Accordion gegroepeerde disclosures ========== */
.rrb-accordion { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.rrb-accordion__item + .rrb-accordion__item { border-top: 1px solid var(--border); }
.rrb-accordion__item > summary { list-style: none; cursor: pointer; min-height: 44px; box-sizing: border-box; padding: 12px 16px; font: 600 13px/1.3 var(--font); color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rrb-accordion__item > summary::-webkit-details-marker { display: none; }
.rrb-accordion__item > summary::after { content: "\25B8"; color: var(--text-subtle); transition: transform var(--t) var(--ease); }
.rrb-accordion__item[open] > summary::after { transform: rotate(90deg); }
.rrb-accordion__item > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.rrb-accordion__body { padding: 0 16px 14px; font-size: 13px; color: var(--text); }

/* ========== Avatar generiek (maat-classes; appearance blijft projectdomein) ========== */
/* inline-grid engine-blocked → inline-flex gekozen (inline-level + identieke centrering; brief mandate: inline-grid) */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-muted); color: var(--text-muted); font: 600 13px/1 var(--font); overflow: hidden; flex: 0 0 auto; }
.avatar > img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar--lg { width: 48px; height: 48px; font-size: 17px; }

/* ========== Date input native input chroom gelijktrekken ========== */
.form-input[type="date"], .form-input[type="datetime-local"], .form-input[type="time"] {
  font-family: var(--font);
  color: var(--text);
}
/* opacity-dimming weggelaten — werkbon freeze (final review fase 2) */
.form-input[type="date"]::-webkit-calendar-picker-indicator,
.form-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
   RRB Data-Insight — Batch 2a (additive; spec 2026-06-25-rrb-data-insight-batch-2a)
   Promoted from inventory rapportages. Token-only; success = --accent.
   ===================================================================== */

/* --- Chart canvas wrap (fixed height so Chart.js responsive sizing stays stable) --- */
.chart-wrap { position: relative; height: 280px; min-height: 260px; width: 100%; }
.chart-wrap--compact { height: 230px; min-height: 220px; }
.chart-canvas { display: block; width: 100%; height: 100%; }

/* --- Per-chart empty / error states (inside a .chart-wrap or .card) --- */
.chart-empty {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
}
.chart-error {
  border: 1px solid var(--danger-100);
  background: var(--danger-50);
  color: var(--danger-text);
  border-radius: var(--r-card);
  padding: var(--sp-md);
  text-align: center;
}

/* --- Chart skeleton (Batch-1 deferred). Self-contained; reuses rrb-skel-shimmer.
   .skeleton-chart = alias for projects already emitting that class name. --- */
.skel-chart, .skeleton-chart {
  height: 280px;
  border-radius: var(--r-card);
  background: linear-gradient(90deg, var(--surface-muted) 0%, var(--border) 50%, var(--surface-muted) 100%);
  background-size: 200% 100%;
  animation: rrb-skel-shimmer 1.2s ease-in-out infinite;
}
.skel-chart--compact { height: 230px; }
@media (prefers-reduced-motion: reduce) {
  .skel-chart, .skeleton-chart { animation: none; }
}

/* --- Semantic stat tones (mirror .a-stat.is-*) --- */
.stat.is-success > .stat-value { color: var(--success-text); }
.stat.is-warn > .stat-value { color: var(--warning-text); }
.stat.is-danger > .stat-value { color: var(--danger-text); }

/* --- a-bar fill status tones --- */
.a-bar.is-primary .a-bar-fill { background: var(--primary); }
.a-bar.is-success .a-bar-fill { background: var(--success-control); }
.a-bar.is-warn .a-bar-fill { background: var(--warning); }
.a-bar.is-danger .a-bar-fill { background: var(--danger); }

/* --- Adaptive settings navigation.
   Desktop: vertical topic rail. Tablet: horizontal scroll strip. Mobile: select.
   The legacy .settings-topic-bar remains a migration-only mobile-compatible shell. --- */
.settings-layout {
  display: grid;
  grid-template-columns: minmax(180px, 224px) minmax(0, 1fr);
  gap: var(--sp-xl);
  align-items: start;
}
.settings-layout[data-settings-nav] {
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.settings-layout[data-settings-nav] .form-input,
.settings-layout[data-settings-nav] .form-select,
.settings-layout[data-settings-nav] .form-textarea,
.settings-layout[data-settings-nav] .btn {
  font-size: var(--fs-sm);
}
.settings-layout [hidden] { display: none !important; }
.settings-layout__nav {
  min-width: 0;
  position: sticky;
  top: var(--sp-lg);
}
.settings-nav__tabs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.settings-nav__group {
  display: grid;
  gap: var(--sp-xs);
}
.settings-nav__group + .settings-nav__group {
  margin-top: var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border);
}
.settings-nav__group-label {
  padding: 0 var(--sp-md);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: uppercase;
}
.settings-nav__group-items {
  display: grid;
  gap: var(--sp-xs);
}
.settings-nav__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  width: 100%;
  min-height: 44px;
  padding: 9px var(--sp-md);
  border: 0;
  border-radius: var(--r-field);
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.settings-nav__tab:hover { color: var(--text); background: var(--surface-muted); }
.settings-nav__tab.is-active,
.settings-nav__tab[aria-selected="true"] {
  color: var(--primary-800);
  background: var(--primary-50);
}
.settings-nav__tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.settings-nav__badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--text-subtle);
  background: var(--surface-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.settings-nav__tab.is-active .settings-nav__badge,
.settings-nav__tab[aria-selected="true"] .settings-nav__badge {
  color: var(--primary-800);
  background: var(--primary-100);
}
.settings-nav__badge.is-dirty { color: var(--warning-900); background: var(--warning-100); }
.settings-nav__badge.is-danger { color: var(--danger-800); background: var(--danger-100); }
.settings-nav__mobile { display: none; }
.settings-nav__label {
  display: block;
  margin-bottom: var(--sp-xs);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.settings-layout__content { min-width: 0; }
.settings-panel[hidden] { display: none !important; }
.settings-panel:focus { outline: none; }
.settings-section {
  overflow: hidden;
  margin-bottom: var(--sp-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--e1);
}
.settings-section__header {
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--border);
}
.settings-section__title {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 650;
}
.settings-section__description {
  margin: var(--sp-xs) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.settings-section__body { padding: var(--sp-md); }
.settings-field__controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
}
.settings-control--xs { max-width: 96px; }
.settings-control--sm { max-width: 144px; }
.settings-control--md { max-width: 240px; }
.settings-control--lg { max-width: 360px; }
.settings-control--full { width: 100%; max-width: none; }
.settings-layout--single { grid-template-columns: minmax(0, 1fr); }
.settings-layout--single:not(.settings-layout--grouped) .settings-layout__nav { display: none; }
.settings-layout--single.settings-layout--grouped .settings-layout__nav { position:static; }
.settings-layout--single.settings-layout--grouped .settings-nav__tabs,
.settings-layout--single.settings-layout--grouped .settings-nav__mobile { display:none; }

/* Catalog-first settings shell: reusable section discovery, global search,
   and registry editor affordances. */
.settings-catalog__search {
  display: grid;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-md);
}
.settings-catalog__search [data-settings-search-results] {
  max-height: min(46vh, 420px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  background: var(--surface);
}
.settings-catalog__search-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.settings-catalog__search-result {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: var(--sp-sm) var(--sp-md);
  color: var(--text);
  text-decoration: none;
}
.settings-catalog__search-result + .settings-catalog__search-result { border-top: 1px solid var(--border); }
.settings-catalog__search-result:hover { background: var(--surface-muted); }
.settings-catalog__search-result:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.settings-catalog__search-path { color: var(--text-subtle); font-size: var(--fs-xs); }
.settings-catalog__overview { display: grid; gap: var(--sp-md); }
.settings-catalog__sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--sp-md);
}
.settings-catalog__section-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-xs) var(--sp-sm);
  min-height: 96px;
  padding: var(--sp-md);
  color: var(--text);
  text-decoration: none;
}
.settings-catalog__section-card:hover { border-color: var(--primary-300); background: var(--primary-50); }
.settings-catalog__section-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.settings-catalog__section-card .card-title,
.settings-catalog__section-card .card-subtitle { margin: 0; }
.settings-catalog__section-card .card-subtitle { grid-column: 1 / -1; }
.settings-catalog__section-card > .settings-nav__badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.settings-section__body[data-settings-editor] { display: grid; gap: var(--sp-sm); }
.settings-registry-field { display: grid; gap: var(--sp-xs); }
.settings-section__body[data-settings-editor] > .settings-registry-field + .settings-registry-field {
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border);
}
.settings-field__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); }
.settings-field__controls > .form-input,
.settings-field__controls > .form-select { max-width: min(100%, 420px); }
.settings-field__status { min-height: 1.25em; margin: 0; }
.settings-field__status.is-error { color: var(--danger-text); }
.settings-field__status.is-success { color: var(--success-text); }
.settings-field__placeholder-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); }
.settings-product-picker { position: relative; width: min(100%, 420px); }
.settings-product-picker > .form-input { width: 100%; }

/* Lazy domain editors share a compact, resilient layout. Individual settings
   modules own their data/behaviour; these primitives keep their controls,
   lists and status messages consistent across all catalog sections. */
.settings-domain-card,
.settings-logbook,
.settings-flow-catalog { display: grid; min-width: 0; gap: var(--sp-sm); }
.settings-domain-card.card { padding: var(--sp-md); }
.settings-layout[data-settings-nav] :is(.settings-domain-card, .settings-logbook) .card-title {
  font-size: var(--fs-md);
}
.settings-domain-card__actions,
.settings-logbook__controls,
.settings-domain-list__row,
.settings-layout[data-settings-nav] .table-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}
.settings-domain-card__actions { justify-content: flex-end; }
.settings-domain-card__status,
.settings-logbook__meta,
.settings-flow-catalog__meta { min-height: 1.25em; margin: 0; }
.settings-domain-card__status.is-error { color: var(--danger-text); }
.settings-domain-card__status.is-success { color: var(--success-text); }
.settings-related-links {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}
.settings-action-card { align-content: start; }
.settings-action-card > .btn-primary { justify-self: start; }
.settings-domain-form { display: grid; min-width: 0; gap: var(--sp-sm); }
.settings-domain-inline-form { display: flex; min-width: 0; align-items: end; flex-wrap: wrap; gap: var(--sp-sm); }
.settings-domain-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  min-width: 0;
  gap: var(--sp-sm);
}
.settings-domain-form__grid > label,
.settings-domain-form__fieldset { display: grid; min-width: 0; gap: var(--sp-xs); }
.settings-domain-form__fieldset {
  margin: 0;
  padding: var(--sp-sm);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
}
.settings-domain-choice-list {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs) var(--sp-md);
}
.settings-domain-choice {
  display: inline-flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  gap: var(--sp-sm);
  padding: 2px 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.settings-domain-choice input {
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 auto;
  margin: 0;
}
.settings-domain-subsection {
  display: grid;
  min-width: 0;
  gap: var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border);
}
.settings-domain-subsection > :is(h4, h5) { margin: 0; font-size: var(--fs-sm); }
.settings-domain-pre {
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  margin: 0;
  padding: var(--sp-sm);
  border-radius: var(--r-field);
  background: var(--surface-muted);
  font: 400 var(--fs-xs)/1.45 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.settings-domain-list { display: grid; min-width: 0; gap: var(--sp-sm); }
.settings-domain-list__row {
  justify-content: space-between;
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border);
}
.settings-domain-list__row:last-child { border-bottom: 0; }
.settings-domain-list__row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.settings-domain-color {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--r-pill);
}
.settings-logbook__controls { align-items: end; }
.settings-logbook__controls > .form-input,
.settings-logbook__controls > .form-select { max-width: min(100%, 360px); }
.settings-logbook__results { display: grid; min-width: 0; gap: var(--sp-md); }
.settings-logbook__results > .responsive-table { min-width: 0; }
.settings-flow-catalog > .filter-row { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--sp-sm); }
.settings-flow-catalog > .filter-row > .search-input { flex: 1 1 260px; min-width: min(100%, 180px); }
.settings-flow-catalog__results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--sp-sm);
}
.settings-flow-card.card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.settings-flow-card__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: var(--sp-sm);
  min-height: 44px;
  padding: var(--sp-sm) var(--sp-md);
  list-style: none;
  cursor: pointer;
}
.settings-flow-card__summary::-webkit-details-marker { display: none; }
.settings-flow-card__summary::after {
  content: "\25B8";
  align-self: center;
  color: var(--text-subtle);
  font-size: var(--fs-md);
  transition: transform var(--t) var(--ease);
}
.settings-flow-card[open] > .settings-flow-card__summary {
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}
.settings-flow-card[open] > .settings-flow-card__summary::after { transform: rotate(90deg); }
.settings-flow-card__summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.settings-flow-card__heading { display: grid; min-width: 0; gap: 2px; }
.settings-flow-card__heading .card-title { margin: 0; }
.settings-flow-card__heading .card-title { font-size: var(--fs-md); line-height: 1.3; }
.settings-flow-card__meta {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
}
.settings-flow-card__description {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.settings-flow-card__stats {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 2px var(--sp-md);
  margin: 0;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}
.settings-flow-card__body {
  display: grid;
  min-width: 0;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  font-size: var(--fs-sm);
}
.settings-flow-card:not([open]) > .settings-flow-card__body { display: none; }
.settings-flow-card__body .info-row {
  display: grid;
  grid-template-columns: minmax(88px, 120px) minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  border-left: 0;
  background: transparent;
  transition: none;
}
.settings-flow-card__body .info-row:hover { border-left-color: transparent; background: transparent; }
.settings-flow-card__body .info-row__label {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.settings-flow-card__body .info-row__value { min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.settings-flow-card__body .rrb-accordion { border-radius: var(--r-field); }
.settings-flow-card__body .rrb-accordion__body { padding-inline: var(--sp-md); }
.settings-flow-card__body .entity-row {
  min-height: 32px;
  align-items: flex-start;
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.settings-catalog__anchor { display: block; scroll-margin-top: var(--sp-lg); }
.settings-layout[data-settings-nav] :is(.settings-domain-card, .settings-logbook, .settings-flow-catalog) :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- Semantic actionbar --------------------------------------------------
   Persistent contextual actions that are not form-save controls. Consumers
   own placement (inline, sticky or fixed); the primitive owns hierarchy,
   responsive wrapping and accessible 44px actions. */
.rrb-actionbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-md);
  align-items: center;
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--e2);
}
.rrb-actionbar__summary,
.rrb-actionbar__actions,
.rrb-actionbar__item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sp-sm);
}
.rrb-actionbar__summary > div { min-width: 0; }
.rrb-actionbar__summary strong,
.rrb-actionbar__summary span { display: block; }
.rrb-actionbar__summary strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rrb-actionbar__summary span,
.rrb-actionbar__item small { color: var(--text-muted); font-size: var(--fs-xs); }
.rrb-actionbar__icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--success-text);
  background: var(--success-50);
}
.rrb-actionbar__icon svg { width: 18px; height: 18px; }
.rrb-actionbar__queue {
  min-height: 44px;
  margin-inline-start: auto;
  padding: 0 var(--sp-sm);
  border: 0;
  color: var(--primary-800);
  background: transparent;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.rrb-actionbar__actions { justify-content: flex-end; flex-wrap: wrap; }
.rrb-actionbar__items {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--sp-xs);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border);
}
.rrb-actionbar__item { min-height: 44px; }
.rrb-actionbar__item > span { display: grid; min-width: 0; margin-inline-end: auto; }
.rrb-actionbar__item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .rrb-actionbar { grid-template-columns: minmax(0, 1fr); }
  .rrb-actionbar__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rrb-actionbar__actions .btn { min-width: 0; padding-inline: var(--sp-xs); }
}
@media (max-width: 480px) {
  .rrb-actionbar__summary { align-items: flex-start; }
  .rrb-actionbar__queue { margin-inline-start: 0; }
  .rrb-actionbar__actions { grid-template-columns: 1fr 1fr; }
  .rrb-actionbar__actions .btn:first-child { grid-column: 1 / -1; }
}

.settings-topic-bar {
  display: flex;
  gap: var(--sp-md);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--sp-md) var(--sp-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  margin-bottom: var(--sp-lg);
}
.settings-topic-bar__label { font-weight: 600; font-size: var(--fs-sm); }
.settings-topic-bar .form-input,
.settings-topic-bar .form-select { max-width: 280px; }