/* ============================================================================
   RMS Design System (D1) §5 — component library styles.
   Every rule references --rms-* tokens only (no hardcoded hex / font-family);
   Loaded after rms-design-system.css.
   ========================================================================== */

/* ---- §5.11 Status Chit — the signature (hue + glyph + fill-shape + label) ---- */
.rms-chit {
  display: inline-flex;
  align-items: center;
  gap: var(--rms-space-4);
  padding: var(--rms-space-2) var(--rms-space-8);
  border-radius: var(--rms-radius-chit);
  border: var(--rms-border-hair) solid transparent;
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-small-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.rms-chit__glyph { font-size: 1.05em; line-height: 1; }
.rms-chit__label { text-transform: uppercase; }

/* Blocked — solid + heavy border (highest alarm) */
.rms-chit--blocked { background: var(--rms-status-blocked); color: var(--rms-status-blocked-on); border-width: var(--rms-border-chit); border-color: var(--rms-status-blocked-on); }
/* Overdue — solid, bold */
.rms-chit--overdue { background: var(--rms-status-overdue); color: var(--rms-status-overdue-on); font-weight: 700; }
/* Unassigned — the one LIGHT chip: ink text, DASHED border */
.rms-chit--unassigned { background: var(--rms-status-unassigned); color: var(--rms-status-unassigned-on); border-style: dashed; border-color: var(--rms-status-unassigned-on); }
/* PendingVerification — dashed border, plum */
.rms-chit--pendingverification { background: var(--rms-status-pendingverification); color: var(--rms-status-pendingverification-on); border-style: dashed; border-color: var(--rms-status-pendingverification-on); }
/* InProgress — solid */
.rms-chit--inprogress { background: var(--rms-status-inprogress); color: var(--rms-status-inprogress-on); }
/* Pending — OUTLINE / soft-fill */
.rms-chit--pending { background: var(--rms-surface); color: var(--rms-status-pending); border-color: var(--rms-status-pending); }
/* Completed — solid, terminal */
.rms-chit--completed { background: var(--rms-status-completed); color: var(--rms-status-completed-on); }
/* Skipped — HATCHED fill */
.rms-chit--skipped {
  color: var(--rms-status-skipped-on);
  border-color: var(--rms-status-skipped);
  background-color: var(--rms-status-skipped);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0.18) 2px, transparent 2px, transparent 5px);
}
/* Canceled — GHOST chip: transparent, outline, strikethrough label */
.rms-chit--canceled { background: transparent; color: var(--rms-status-canceled); border-color: var(--rms-status-canceled); }
.rms-chit--canceled .rms-chit__label { text-decoration: line-through; }

/* ---- §5 Role badge — P/L/S avatar pill (full-round, letter backstop) ---- */
.rms-role {
  display: inline-flex;
  align-items: center;
  gap: var(--rms-space-8);
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-small-size);
  font-weight: 600;
}
.rms-role__pill {
  display: inline-grid;
  place-items: center;
  width: var(--rms-space-24);
  height: var(--rms-space-24);
  border-radius: var(--rms-radius-avatar);
  font-weight: 700;
  line-height: 1;
}
.rms-role--owner .rms-role__pill, .rms-role--manager .rms-role__pill { background: var(--rms-role-manager); color: var(--rms-role-manager-on); }
.rms-role--owner .rms-role__label, .rms-role--manager .rms-role__label { color: var(--rms-role-manager-on-tint); }
.rms-role--shiftlead .rms-role__pill { background: var(--rms-role-shiftlead); color: var(--rms-role-shiftlead-on); }
.rms-role--shiftlead .rms-role__label { color: var(--rms-role-shiftlead-on-tint); }
.rms-role--staff .rms-role__pill { background: var(--rms-role-staff); color: var(--rms-role-staff-on); }
.rms-role--staff .rms-role__label { color: var(--rms-role-staff-on-tint); }

/* ---- §5 (audit gap) Stat tile — dashboard headline number ---- */
.rms-stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--rms-space-4);
  padding: var(--rms-space-16);
  background: var(--rms-surface);
  border: var(--rms-border-hair) solid var(--rms-border);
  border-radius: var(--rms-radius-web);
  box-shadow: var(--rms-elev-web-panel);
  min-width: var(--rms-space-64);
}
.rms-stat-tile__label { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); font-weight: 500; color: var(--rms-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.rms-stat-tile__value { font-family: var(--rms-font-mono); font-size: var(--rms-web-numeric-lg-size); font-weight: var(--rms-web-numeric-lg-weight); color: var(--rms-text); font-variant-numeric: tabular-nums; }
.rms-stat-tile__caption { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-text-tertiary); }
.rms-stat-tile--alert { border-color: var(--rms-status-overdue); }
.rms-stat-tile--alert .rms-stat-tile__value { color: var(--rms-status-overdue); }

/* ---- §5.1 Button (filled primary / tonal secondary / ghost) ---- */
.rms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rms-space-8);
  min-height: var(--rms-space-32);
  padding: var(--rms-space-8) var(--rms-space-16);
  border-radius: var(--rms-radius-web);
  border: var(--rms-border-hair) solid transparent;
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-body-size);
  font-weight: 600;
  cursor: pointer;
}
.rms-btn:focus-visible { outline: var(--rms-border-chit) solid var(--rms-focus); outline-offset: var(--rms-border-chit); }
.rms-btn--primary { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.rms-btn--secondary { background: var(--rms-surface-sunken); color: var(--rms-text); border-color: var(--rms-border); }
.rms-btn--ghost { background: transparent; color: var(--rms-link); }
.rms-btn--manager { background: var(--rms-role-manager); color: var(--rms-role-manager-on); }
.rms-btn--shiftlead { background: var(--rms-role-shiftlead); color: var(--rms-role-shiftlead-on); }
.rms-btn--danger { background: var(--rms-status-blocked); color: var(--rms-status-blocked-on); }
.rms-btn:disabled, .rms-btn[disabled] { background: var(--mud-palette-action-disabled-background); color: var(--mud-palette-action-disabled); border-color: transparent; cursor: not-allowed; box-shadow: none; }

/* ---- §5.2 Field (label above; numeric variant = Plex Mono, right-aligned) ---- */
.rms-field { display: flex; flex-direction: column; gap: var(--rms-space-4); }
.rms-field__label { font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); font-weight: 600; color: var(--rms-text); }
.rms-field__input {
  padding: var(--rms-space-8) var(--rms-space-12);
  background: var(--rms-surface-sunken);
  border: var(--rms-border-hair) solid var(--rms-border);
  border-radius: var(--rms-radius-web);
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-body-size);
  color: var(--rms-text);
}
.rms-field__input:focus-visible { outline: var(--rms-border-chit) solid var(--rms-focus); outline-offset: 0; border-color: var(--rms-focus); }
.rms-field--numeric .rms-field__input { font-family: var(--rms-font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.rms-field--error .rms-field__input { border-color: var(--rms-status-blocked); }
.rms-field__error { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-status-blocked); }

/* ---- §5.12 Escalation banner (edge-bar + L-badge + plain copy) ---- */
.rms-esc-banner {
  display: flex;
  align-items: center;
  gap: var(--rms-space-12);
  padding: var(--rms-space-12) var(--rms-space-16);
  padding-left: var(--rms-space-16);
  border-radius: var(--rms-radius-web);
  background: var(--rms-surface);
  border: var(--rms-border-hair) solid var(--rms-border);
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-body-size);
  color: var(--rms-text);
}
.rms-esc-banner--l1 { border-left: var(--rms-edgebar-l1) solid var(--rms-esc-1); }
.rms-esc-banner--l2 { border-left: var(--rms-edgebar-l2) solid var(--rms-esc-2); }
.rms-esc-banner--blocked { border-left: var(--rms-edgebar-l2) solid var(--rms-status-blocked); }
.rms-esc-badge {
  display: inline-grid;
  place-items: center;
  min-width: var(--rms-space-24);
  height: var(--rms-space-24);
  padding: 0 var(--rms-space-4);
  border-radius: var(--rms-radius-chit);
  font-family: var(--rms-font-mono);
  font-size: var(--rms-web-small-size);
  font-weight: 600;
  color: var(--rms-surface);
}
.rms-esc-banner--l1 .rms-esc-badge { background: var(--rms-esc-1); color: var(--rms-text); }
.rms-esc-banner--l2 .rms-esc-badge { background: var(--rms-esc-2); }

/* ---- §5.5/§5.5 Cash variance figure (sign + word, Plex Mono) ---- */
.rms-variance { font-family: var(--rms-font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.rms-variance--over { color: var(--rms-variance-over); }
.rms-variance--short { color: var(--rms-variance-short); }
.rms-variance--balanced { color: var(--rms-variance-balanced); }
.rms-variance__word { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); font-weight: 600; letter-spacing: 0.04em; }

/* ---- §5.13 Task card (leading chit + optional edge-bar + name + station/time) ---- */
.rms-task-card {
  display: flex;
  align-items: flex-start;
  gap: var(--rms-space-12);
  padding: var(--rms-space-12);
  background: var(--rms-surface);
  border: var(--rms-border-hair) solid var(--rms-border);
  border-radius: var(--rms-radius-web);
  box-shadow: var(--rms-elev-web-panel);
}
.rms-task-card--l1 { border-left: var(--rms-edgebar-l1) solid var(--rms-esc-1); }
.rms-task-card--l2 { border-left: var(--rms-edgebar-l2) solid var(--rms-esc-2); }
/* FEAT-006 amendment 2026-10-26 (S-2): a flex child may shrink below its longest word, which wraps, so a long task name
   never widens the page at 390 px (layout only). */
.rms-task-card__body { display: flex; flex-direction: column; gap: var(--rms-space-2); min-width: 0; overflow-wrap: anywhere; }
.rms-task-card__name { font-family: var(--rms-font-body); font-size: var(--rms-web-h3-size); font-weight: 600; color: var(--rms-text); }
.rms-task-card__meta { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-text-secondary); }
.rms-task-card__time { font-family: var(--rms-font-mono); font-variant-numeric: tabular-nums; }

/* ---- §5.14 Needs-attention exception row (triage) ---- */
.rms-needs-row {
  display: flex;
  align-items: center;
  gap: var(--rms-space-12);
  padding: var(--rms-space-12) var(--rms-space-16);
  background: var(--rms-surface);
  border-bottom: var(--rms-border-hair) solid var(--rms-border);
}
.rms-needs-row__label { font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); font-weight: 600; color: var(--rms-text); flex: 1; }
.rms-needs-row__meta { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-text-secondary); }

/* ---- Cash page (SCR-018/019/020/021) scaffold: 3-step count → verify → deposit ---- */
.rms-cash { display: flex; flex-direction: column; gap: var(--rms-space-16); }
.rms-cash__head { margin-bottom: var(--rms-space-4); }
.rms-cash__rail { flex-direction: row; flex-wrap: wrap; gap: var(--rms-space-24); padding: var(--rms-space-12) var(--rms-space-16); background: var(--rms-surface); border: var(--rms-border-hair) solid var(--rms-border); border-radius: var(--rms-radius-web); box-shadow: var(--rms-elev-web-panel); }
.rms-cash__summary .rms-step__num { font-family: var(--rms-font-mono); }
.rms-cash__variance-line { display: flex; align-items: baseline; gap: var(--rms-space-8); }
/* the step the bound event currently sits on — a ringed marker, distinct from the filled "done" state */
.rms-cash__rail .rms-progress__item--current .rms-progress__marker { border-color: var(--rms-role-manager); color: var(--rms-role-manager); font-weight: 700; box-shadow: 0 0 0 var(--rms-border-hair) var(--rms-role-manager); }
.rms-cash__rail .rms-progress__item--current .rms-progress__label { color: var(--rms-text); font-weight: 600; }
.rms-cash__rail .rms-progress__item--todo .rms-progress__label { color: var(--rms-text-tertiary); }
/* editable cell input inside the §5.10 grid — Plex Mono, right-aligned, on the sunken field surface */
.rms-denom__input { width: 100%; max-width: var(--rms-space-64); font-family: var(--rms-font-mono); text-align: right; font-variant-numeric: tabular-nums; font-size: var(--rms-web-table-size); color: var(--rms-text); background: var(--rms-surface-sunken); border: var(--rms-border-hair) solid var(--rms-border); border-radius: var(--rms-radius-chit); padding: var(--rms-space-4) var(--rms-space-8); }
.rms-denom__input:focus-visible { outline: var(--rms-border-chit) solid var(--rms-focus); outline-offset: 0; border-color: var(--rms-focus); }
/* visually-hidden test hook — carries the exact raw enum value while the chit/label is the visible surface */
.rms-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; }

/* ---- §5.10 Denomination grid (register-tape idiom, Plex Mono columns) ---- */
.rms-denom {
  width: 100%;
  border-collapse: collapse;
  background: var(--rms-surface);
  border: var(--rms-border-hair) solid var(--rms-border);
  border-radius: var(--rms-radius-web);
  overflow: hidden;
}
.rms-denom th, .rms-denom td {
  padding: var(--rms-space-8) var(--rms-space-12);
  border-bottom: var(--rms-border-hair) solid var(--rms-border);
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-table-size);
  text-align: left;
  color: var(--rms-text);
}
.rms-denom th { color: var(--rms-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.rms-denom tbody tr:nth-child(even) { background: var(--rms-surface-sunken); }
.rms-denom .rms-denom__num { font-family: var(--rms-font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.rms-denom tfoot td { font-weight: 700; border-bottom: none; }
.rms-denom tfoot .rms-denom__num { font-family: var(--rms-font-mono); font-size: var(--rms-web-numeric-lg-size); font-weight: var(--rms-web-numeric-lg-weight); }

/* ---- §5.3 Field (composite) — titled sub-panel grouping fields as one control ---- */
.rms-fieldgroup {
  margin: 0;
  padding: var(--rms-space-16);
  background: var(--rms-surface);
  border: var(--rms-border-hair) solid var(--rms-border);
  border-radius: var(--rms-radius-web);
}
.rms-fieldgroup__legend { padding: 0 var(--rms-space-8); font-family: var(--rms-font-body); font-size: var(--rms-web-h3-size); font-weight: var(--rms-web-h3-weight); color: var(--rms-text); }
.rms-fieldgroup__summary {
  margin-bottom: var(--rms-space-12);
  padding: var(--rms-space-8) var(--rms-space-12);
  border-radius: var(--rms-radius-web);
  border: var(--rms-border-hair) solid var(--rms-variance-short);
  background: var(--rms-surface-sunken);
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-small-size);
  color: var(--rms-variance-short);
}
.rms-fieldgroup__body { display: flex; flex-direction: column; gap: var(--rms-space-16); }
.rms-fieldgroup__body--cols { display: grid; grid-template-columns: repeat(var(--rms-fieldgroup-cols, 1), minmax(0, 1fr)); gap: var(--rms-space-16); }

/* ---- §5.4 list-item-action — full-width tappable row (leading / body / trailing) ---- */
.rms-listitem {
  display: flex;
  align-items: center;
  gap: var(--rms-space-12);
  width: 100%;
  padding: var(--rms-space-12) var(--rms-space-16);
  background: var(--rms-surface);
  border: var(--rms-border-hair) solid var(--rms-border);
  border-radius: var(--rms-radius-web);
  cursor: pointer;
  text-align: left;
}
.rms-listitem:hover { background: var(--rms-surface-sunken); }
.rms-listitem:focus-visible { outline: var(--rms-border-chit) solid var(--rms-focus); outline-offset: var(--rms-border-chit); }
.rms-listitem--l1 { border-left: var(--rms-edgebar-l1) solid var(--rms-esc-1); }
.rms-listitem--l2 { border-left: var(--rms-edgebar-l2) solid var(--rms-esc-2); }
.rms-listitem--disabled { opacity: 0.55; cursor: not-allowed; }
.rms-listitem__leading { display: inline-flex; align-items: center; }
.rms-listitem__body { flex: 1; min-width: 0; font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); color: var(--rms-text); }
.rms-listitem__trailing { display: inline-flex; align-items: center; color: var(--rms-text-tertiary); }
.rms-listitem__chevron { font-size: var(--rms-web-h2-size); line-height: 1; }

/* ---- §5.5 tab — bottom-nav item; selected indicator uses the viewer's role hue ---- */
.rms-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rms-space-2);
  min-width: var(--rms-space-48);
  min-height: var(--rms-space-48);
  padding: var(--rms-space-4) var(--rms-space-8);
  background: transparent;
  border: none;
  border-top: var(--rms-border-chit) solid transparent;
  font-family: var(--rms-font-body);
  color: var(--rms-text-tertiary);
  cursor: pointer;
}
.rms-tab:focus-visible { outline: var(--rms-border-chit) solid var(--rms-focus); outline-offset: var(--rms-border-chit); }
.rms-tab__icon { font-size: var(--rms-web-h2-size); line-height: 1; }
.rms-tab__label { font-size: var(--rms-web-small-size); font-weight: 600; }
.rms-tab--selected { color: var(--rms-text); }
.rms-tab--selected.rms-tab--owner, .rms-tab--selected.rms-tab--manager { border-top-color: var(--rms-role-manager); }
.rms-tab--selected.rms-tab--shiftlead { border-top-color: var(--rms-role-shiftlead); }
.rms-tab--selected.rms-tab--staff { border-top-color: var(--rms-role-staff); }

/* ---- §5.6 link (sidebar nav-link) — role-tinted active leading bar ---- */
.rms-navlink {
  display: flex;
  align-items: center;
  gap: var(--rms-space-12);
  padding: var(--rms-space-8) var(--rms-space-16);
  border-left: 3px solid transparent;
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-body-size);
  color: var(--rms-text-secondary);
  text-decoration: none;
}
.rms-navlink:hover { background: var(--rms-surface-sunken); color: var(--rms-text); }
.rms-navlink:focus-visible { outline: var(--rms-border-chit) solid var(--rms-focus); outline-offset: calc(-1 * var(--rms-border-chit)); }
.rms-navlink__icon { font-size: var(--rms-web-h3-size); line-height: 1; width: var(--rms-space-24); text-align: center; }
.rms-navlink--active { font-weight: 600; color: var(--rms-text); background: var(--rms-surface-sunken); }
.rms-navlink--active.rms-navlink--owner, .rms-navlink--active.rms-navlink--manager { border-left-color: var(--rms-role-manager); }
.rms-navlink--active.rms-navlink--shiftlead { border-left-color: var(--rms-role-shiftlead); }
.rms-navlink--active.rms-navlink--staff { border-left-color: var(--rms-role-staff); }

/* ---- SCR-036 operational shell sidebar — RMS destinations, not template admin nav ---- */
.rms-nav { display: flex; flex-direction: column; padding: var(--rms-space-8) 0; }
.rms-nav__section {
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-small-size);
  font-weight: var(--rms-web-small-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rms-text-tertiary);
  padding: var(--rms-space-16) var(--rms-space-16) var(--rms-space-4);
}

/* ---- §5.7 toggle — segmented control + switch (on-state neutral or role-tinted) ---- */
.rms-toggle {
  display: inline-flex;
  padding: var(--rms-space-2);
  background: var(--rms-surface-sunken);
  border: var(--rms-border-hair) solid var(--rms-border);
  border-radius: var(--rms-radius-web);
}
.rms-toggle__seg {
  padding: var(--rms-space-4) var(--rms-space-12);
  min-height: var(--rms-space-24);
  background: transparent;
  border: none;
  border-radius: var(--rms-radius-chit);
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-small-size);
  font-weight: 600;
  color: var(--rms-text-secondary);
  cursor: pointer;
}
.rms-toggle__seg:focus-visible { outline: var(--rms-border-chit) solid var(--rms-focus); outline-offset: 0; }
.rms-toggle__seg--on { background: var(--rms-text); color: var(--rms-surface); }
.rms-toggle--owner .rms-toggle__seg--on, .rms-toggle--manager .rms-toggle__seg--on { background: var(--rms-role-manager); color: var(--rms-role-manager-on); }
.rms-toggle--shiftlead .rms-toggle__seg--on { background: var(--rms-role-shiftlead); color: var(--rms-role-shiftlead-on); }
.rms-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--rms-space-8);
  background: transparent;
  border: none;
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-body-size);
  color: var(--rms-text);
  cursor: pointer;
}
.rms-switch:focus-visible { outline: var(--rms-border-chit) solid var(--rms-focus); outline-offset: var(--rms-border-chit); border-radius: var(--rms-radius-chit); }
.rms-switch__track {
  position: relative;
  display: inline-block;
  width: var(--rms-space-48);
  height: var(--rms-space-24);
  background: var(--rms-surface-sunken);
  border: var(--rms-border-hair) solid var(--rms-border);
  border-radius: var(--rms-radius-avatar);
  transition: background 120ms ease;
}
.rms-switch__thumb {
  position: absolute;
  top: var(--rms-space-2);
  left: var(--rms-space-2);
  width: var(--rms-space-16);
  height: var(--rms-space-16);
  background: var(--rms-surface);
  border-radius: var(--rms-radius-avatar);
  box-shadow: var(--rms-elev-web-panel);
  transition: transform 120ms ease;
}
.rms-switch--on .rms-switch__track { background: var(--rms-text); }
.rms-switch--on.rms-switch--owner .rms-switch__track, .rms-switch--on.rms-switch--manager .rms-switch__track { background: var(--rms-role-manager); }
.rms-switch--on.rms-switch--shiftlead .rms-switch__track { background: var(--rms-role-shiftlead); }
.rms-switch--on .rms-switch__thumb { transform: translateX(var(--rms-space-24)); }
.rms-switch[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---- §5.8 gesture (affordance) — pull-to-refresh stamp / offline banner ---- */
.rms-gesture {
  display: inline-flex;
  align-items: center;
  gap: var(--rms-space-8);
  padding: var(--rms-space-4) var(--rms-space-12);
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-small-size);
  color: var(--rms-text-secondary);
}
.rms-gesture__stamp { font-family: var(--rms-font-mono); font-variant-numeric: tabular-nums; color: var(--rms-text); }
.rms-gesture--offline {
  color: var(--rms-status-overdue);
  background: var(--rms-surface-sunken);
  border-radius: var(--rms-radius-web);
}
.rms-gesture__spinner {
  width: var(--rms-space-12);
  height: var(--rms-space-12);
  border: var(--rms-border-chit) solid var(--rms-border);
  border-top-color: var(--rms-link);
  border-radius: var(--rms-radius-avatar);
  animation: rms-spin 700ms linear infinite;
}
@keyframes rms-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rms-gesture__spinner { animation: none; } }

/* ---- §5.9 photo-capture — camera button, thumbnail grid, web mobile-app notice ---- */
.rms-photo { display: flex; flex-direction: column; gap: var(--rms-space-8); }
.rms-photo__title { font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); font-weight: 600; color: var(--rms-text); }
.rms-photo__grid { display: flex; flex-wrap: wrap; gap: var(--rms-space-8); }
.rms-photo__thumb {
  position: relative;
  width: var(--rms-space-64);
  height: var(--rms-space-64);
  border-radius: var(--rms-radius-web);
  border: var(--rms-border-hair) solid var(--rms-border);
  overflow: hidden;
}
.rms-photo__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rms-photo__remove {
  position: absolute;
  top: var(--rms-space-2);
  right: var(--rms-space-2);
  width: var(--rms-space-16);
  height: var(--rms-space-16);
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--rms-text);
  color: var(--rms-surface);
  border: none;
  border-radius: var(--rms-radius-avatar);
  font-size: var(--rms-web-small-size);
  line-height: 1;
  cursor: pointer;
}
.rms-photo__actions { display: flex; gap: var(--rms-space-8); }
.rms-photo__capture {
  display: inline-flex;
  align-items: center;
  gap: var(--rms-space-8);
  min-height: var(--rms-space-32);
  padding: var(--rms-space-8) var(--rms-space-16);
  background: var(--rms-surface-sunken);
  border: var(--rms-border-hair) solid var(--rms-border);
  border-radius: var(--rms-radius-web);
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-body-size);
  font-weight: 600;
  color: var(--rms-text);
  cursor: pointer;
}
.rms-photo__icon { font-size: var(--rms-web-h3-size); line-height: 1; }
.rms-photo__library {
  background: transparent;
  border: none;
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-body-size);
  color: var(--rms-link);
  cursor: pointer;
}
.rms-photo__notice {
  padding: var(--rms-space-12) var(--rms-space-16);
  background: var(--rms-surface-sunken);
  border: var(--rms-border-hair) solid var(--rms-border);
  border-radius: var(--rms-radius-web);
  font-family: var(--rms-font-body);
  font-size: var(--rms-web-small-size);
  color: var(--rms-text-secondary);
}
.rms-photo__status { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-text-secondary); }
.rms-photo__error { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-variance-short); }
.rms-photo__required-marker { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); font-weight: 600; color: var(--rms-variance-short); }
.rms-photo--required .rms-photo__title::after { content: " *"; color: var(--rms-variance-short); }

/* ---- preview-harness helpers (token swatches) ---- */
.rms-swatch { display: inline-flex; flex-direction: column; gap: var(--rms-space-4); align-items: flex-start; }
.rms-swatch__chip { width: var(--rms-space-48); height: var(--rms-space-48); border-radius: var(--rms-radius-web); border: var(--rms-border-hair) solid var(--rms-border); }
.rms-swatch__name { font-family: var(--rms-font-mono); font-size: var(--rms-web-small-size); color: var(--rms-text-secondary); }

/* ---- SCR-022 first-run setup wizard (token-bound; renders the D1 field/button/toggle set) ---- */
.rms-wizard { max-width: 1120px; margin: 0; padding: var(--rms-space-24) var(--rms-space-16) var(--rms-space-64); }
.rms-wizard__head { margin-bottom: var(--rms-space-24); }
/* FEAT-005 UX-11 (SO-025): the shell's content column (MainLayout) — one left-aligned column up to 1440 px that starts at
   the drawer's edge; a page's own container sits at its left edge instead of centring a narrower box inside it. */
.mud-container.rms-content-column { max-width: 1440px; margin-left: 0; margin-right: auto; }
.rms-content-column .mud-container { margin-left: 0; }
/* FEAT-005 UX-11 (SO-025/SO-026): RmsPageTitle — the one page title (title, optional description, optional actions). */
.rms-page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rms-space-12); }
.rms-page-title__text { min-width: 0; }
.rms-page-title__text .rms-wizard__title { overflow-wrap: anywhere; }
.rms-page-title__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rms-space-12); }
.rms-wizard__title { font-family: var(--rms-font-display); font-size: var(--rms-web-display-size); font-weight: var(--rms-web-display-weight); color: var(--rms-text); margin: 0; }
.rms-wizard__lead { font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); color: var(--rms-text-secondary); margin: var(--rms-space-8) 0 0; }
.rms-wizard__progress { font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); color: var(--rms-text-secondary); margin: var(--rms-space-8) 0 0; }
.rms-wizard__progress-count { font-family: var(--rms-font-mono); font-variant-numeric: tabular-nums; color: var(--rms-text); font-weight: 600; }
.rms-wizard__grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--rms-space-24); align-items: start; }
@media (max-width: 900px) { .rms-wizard__grid { grid-template-columns: 1fr; } }

.rms-wizard__rail { position: sticky; top: var(--rms-space-16); background: var(--rms-surface); border: var(--rms-border-hair) solid var(--rms-border); border-radius: var(--rms-radius-web); box-shadow: var(--rms-elev-web-panel); padding: var(--rms-space-16); }
.rms-wizard__rail-title { font-family: var(--rms-font-body); font-size: var(--rms-web-h3-size); font-weight: var(--rms-web-h3-weight); color: var(--rms-text); margin: 0 0 var(--rms-space-12); }
.rms-progress { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rms-space-8); }
.rms-progress__item { display: flex; gap: var(--rms-space-8); align-items: flex-start; }
.rms-progress__marker { flex: 0 0 auto; width: var(--rms-space-24); height: var(--rms-space-24); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rms-radius-avatar); font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); border: var(--rms-border-hair) solid var(--rms-border); color: var(--rms-text-tertiary); background: var(--rms-surface-sunken); }
.rms-progress__item--done .rms-progress__marker { background: var(--rms-role-manager-tint); color: var(--rms-role-manager); border-color: var(--rms-role-manager); }
.rms-progress__body { display: flex; flex-direction: column; gap: var(--rms-space-2); }
.rms-progress__label { font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); color: var(--rms-text); }
.rms-progress__item--done .rms-progress__label { color: var(--rms-text-secondary); }
.rms-progress__detail { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-text-secondary); }
.rms-progress__done-at { font-family: var(--rms-font-mono); font-size: var(--rms-web-small-size); color: var(--rms-text-tertiary); font-variant-numeric: tabular-nums; }

.rms-alert { margin-top: var(--rms-space-16); padding: var(--rms-space-12); border-radius: var(--rms-radius-web); border-left: var(--rms-border-chit) solid var(--rms-edgebar-l1); background: var(--rms-surface-sunken); }
.rms-alert__title { display: block; font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); font-weight: 600; color: var(--rms-text); margin-bottom: var(--rms-space-4); }
.rms-alert__line { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-text-secondary); margin: 0; }

.rms-wizard__steps { display: flex; flex-direction: column; gap: var(--rms-space-16); min-width: 0; }
/* FEAT-007 (2026-09-28): the steps are a MudExpansionPanels accordion. Arrangement only — the panels,
   chips and buttons keep the template MudBlazor look. */
.rms-wizard__panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--rms-space-8); }
.rms-wizard .mud-expand-panel-header .rms-step__head { margin-bottom: 0; flex-wrap: wrap; min-width: 0; }
.rms-step { background: var(--rms-surface); border: var(--rms-border-hair) solid var(--rms-border); border-radius: var(--rms-radius-web); box-shadow: var(--rms-elev-web-panel); padding: var(--rms-space-24); }
.rms-step__head { display: flex; align-items: center; gap: var(--rms-space-12); margin-bottom: var(--rms-space-16); }
.rms-step__num { flex: 0 0 auto; width: var(--rms-space-32); height: var(--rms-space-32); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rms-radius-avatar); background: var(--rms-role-manager-tint); color: var(--rms-role-manager); font-family: var(--rms-font-display); font-weight: var(--rms-web-h2-weight); }
.rms-step__title { font-family: var(--rms-font-body); font-size: var(--rms-web-h3-size); font-weight: var(--rms-web-h3-weight); color: var(--rms-text); margin: 0; }
.rms-step__body { display: flex; flex-direction: column; gap: var(--rms-space-16); }
.rms-step__note { font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); color: var(--rms-text-secondary); margin: 0; }
.rms-step__result { font-family: var(--rms-font-mono); font-size: var(--rms-web-small-size); color: var(--rms-text); margin: var(--rms-space-12) 0 0; }
.rms-step__actions { display: flex; flex-wrap: wrap; gap: var(--rms-space-12); margin-top: var(--rms-space-16); }
/* FEAT-006: on a phone a long form's primary action would sit below the fold (SCR-015 CTL-106 measured
   off-viewport). `position: sticky` only pins the footer WHILE its containing block is in view — with a
   populated definition list above it, the whole form starts below the fold and sticky cannot recover it
   (the deployed 584-definition owner tenant reproduced this; BUG-feat006-s4). At phone widths the action
   bar is therefore pinned to the VIEWPORT bottom with `position: fixed`, so the primary action is reachable
   regardless of list length or scroll position; the form reserves matching bottom space so no field hides
   behind the bar. Desktop layout is unchanged. All token-bound. */
@media (max-width: 599.98px) {
  .rms-step__actions--sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    padding: var(--rms-space-12) var(--rms-space-16);
    padding-bottom: max(var(--rms-space-12), env(safe-area-inset-bottom));
    background: var(--rms-surface);
    border-top: var(--rms-border-hair) solid var(--rms-border);
    box-shadow: var(--rms-elev-web-panel);
    z-index: 20;
  }
  /* Reserve space so the last form fields clear the fixed action bar. */
  [data-region="definition-form"] { padding-bottom: var(--rms-space-64); }
}

.rms-day-row, .rms-shift-row, .rms-invite-row { display: grid; grid-template-columns: 120px 1fr 1fr 1fr; gap: var(--rms-space-12); align-items: end; }
.rms-invite-row { grid-template-columns: 2fr 2fr 1fr; }
.rms-day-row__name, .rms-shift-row__name { font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); font-weight: 600; color: var(--rms-text); padding-bottom: var(--rms-space-8); }
@media (max-width: 640px) { .rms-day-row, .rms-shift-row, .rms-invite-row { grid-template-columns: 1fr; } }


.rms-tag { display: inline-flex; align-items: center; padding: var(--rms-space-2) var(--rms-space-8); border-radius: var(--rms-radius-chit); background: var(--rms-surface-sunken); border: var(--rms-border-hair) solid var(--rms-border); font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-text-secondary); }
.rms-invite-pending { margin-top: var(--rms-space-16); display: flex; flex-direction: column; gap: var(--rms-space-8); }
.rms-invite-pending__row { display: flex; align-items: center; gap: var(--rms-space-12); }
.rms-invite-pending__email { font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); color: var(--rms-text); }

.rms-matrix { width: 100%; border-collapse: collapse; font-family: var(--rms-font-body); font-size: var(--rms-web-table-size); }
.rms-matrix th { text-align: left; font-weight: 600; color: var(--rms-text-secondary); padding: var(--rms-space-8); border-bottom: var(--rms-border-hair) solid var(--rms-border); }
.rms-matrix td { padding: var(--rms-space-8); color: var(--rms-text); border-bottom: var(--rms-border-hair) solid var(--rms-border); font-family: var(--rms-font-body); }
/* UX-08 residue (FEAT-042, 2026-10-26, SO-022): only a numeric cell (an amount, count, quantity or duration) keeps the monospace tabular figures. */
.rms-matrix td.rms-num { font-family: var(--rms-font-mono); font-variant-numeric: tabular-nums; }
/* UX-23 residue (FEAT-048, 2026-10-26): a metrics block is one row of stat tiles that wraps on narrow screens. */
.rms-stat-row { display: flex; flex-wrap: wrap; gap: var(--rms-space-16); }

/* ---- §5 table scroll region (admin list panes) — caps the footprint of a long definition
   list to a bounded, scrollable viewport instead of a tall text wall; every row stays in the DOM ---- */
.rms-tablescroll { max-height: 32rem; overflow-y: auto; border: var(--rms-border-hair) solid var(--rms-border); border-radius: var(--rms-radius-web); }
.rms-tablescroll thead th { position: sticky; top: 0; background: var(--rms-surface); }
.rms-pager__label { display: inline-block; margin-top: var(--rms-space-8); font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-text-secondary); }

/* ---- FEAT-006: a genuinely wide data table (rms-denom / rms-matrix) scrolls WITHIN its own
   container at phone widths, so the page itself never forces horizontal scrolling. The wrapper keeps
   the inner table at width:100% on desktop (fills the pane) and lets it exceed the pane on a narrow
   phone (the wrapper scrolls, not the document). ---- */
.rms-tablewrap { max-width: 100%; overflow-x: auto; }

/* ---- FEAT-041 amendment (UX-15, B5-1 Team half): at phone width each Team row becomes a card, every cell on
   its own line under its column label, so the page never scrolls sideways (arrangement only; the template look
   is untouched). ---- */
.rms-team-table__actions { margin-top: 0; align-items: center; flex-wrap: nowrap; }
@media (max-width: 599.98px) {
  .rms-team-table thead { display: none; }
  .rms-team-table, .rms-team-table tbody, .rms-team-table tr, .rms-team-table td { display: block; width: 100%; }
  .rms-team-table tr { padding: var(--rms-space-8) 0; border-bottom: var(--rms-border-hair) solid var(--rms-border); }
  .rms-team-table td { border-bottom: 0; padding: var(--rms-space-2) var(--rms-space-8); overflow-wrap: anywhere; }
  .rms-team-table td[data-label]::before { content: attr(data-label); display: block; font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); color: var(--rms-text-secondary); }
  .rms-team-table td:first-child { font-weight: 600; }
  /* A cell without a label holds nothing for this viewer (no alert, no action): the card leaves it out. */
  .rms-team-table td:not([data-label]) { display: none; }
}

/* ---- UX-16 part 1 (FEAT-036 amendment): SCR-023 one row per shift type, Lead and Staff groups of pills (arrangement only). ---- */
.rms-coverage-shift { padding: var(--rms-space-12) 0; border-bottom: var(--rms-border-hair) solid var(--rms-border); }
.rms-coverage-shift__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rms-space-8); margin-top: var(--rms-space-8); }
.rms-tag__action { background: none; border: 0; padding: 0 var(--rms-space-2); cursor: pointer; color: inherit; font: inherit; text-decoration: underline; }

/* FEAT-007 UX-05: the My shift section headings (the existing Team heading's look). */
.rms-home-section { font-family: var(--rms-font-display); font-size: var(--rms-web-small-size); text-transform: uppercase; letter-spacing: 0.06em; color: var(--rms-text-secondary); margin: 0 0 var(--rms-space-8) 0; }