/* v76: shared operational UI. Scoped to the two authenticated shells.
   Existing theme, accent, wallpaper, navigation and business behavior remain owned
   by their existing controllers. No remote assets or animation library. */
html body.experience-ui {
  --f1: "Geologica", "Segoe UI", system-ui, sans-serif;
  --f2: "Commissioner", "Segoe UI", system-ui, sans-serif;
  --bg: #f2f5f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #eaf0f5;
  --border: #d6e0e8;
  --border-2: #b5c4d1;
  --text: #213345;
  --text-2: #526477;
  --green: #176b49;
  --green-soft: #eaf5ef;
  --red: #ac3038;
  --red-soft: #fff0f0;
  --yellow: #80550a;
  --yellow-soft: #fff4d9;
  --teal: #176a64;
  --teal-soft: #e9f5f2;
  --shadow: 0 8px 24px rgb(28 48 68 / 8%);
  --shadow-sm: 0 2px 8px rgb(28 48 68 / 6%);
  --r1: 12px;
  --r2: 8px;
  --r3: 6px;
  --experience-control-border: #7b8fa1;
  --experience-action-bg: #176ca4;
  --experience-action-text: #ffffff;
  --experience-action-hover: #135d8e;
  --experience-action-active: #104f79;
  --experience-action-border: #176ca4;
  --experience-selection-bg: #e8f2fa;
  --experience-selection-text: #155b87;
  --experience-focus: #176ca4;
  --experience-overlay: rgb(18 34 49 / 56%);
  --experience-duration: 160ms;
  --experience-ease: cubic-bezier(.2, .8, .2, 1);
  --experience-space-field: 8px;
  --experience-space-group: 16px;
  --experience-space-panel: 20px;
  --experience-space-section: 24px;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: none;
  background-attachment: scroll;
  font: 400 .9375rem/1.55 var(--f2);
  color: var(--text);
  accent-color: var(--experience-focus);
  caret-color: var(--experience-focus);
  transition: color var(--experience-duration), background-color var(--experience-duration);
}
html[data-theme="paper"] body.experience-ui {
  --bg: #e9edf8;
  --surface: #ffffff;
  --surface-2: #f0f2fb;
  --surface-3: #e1e6f5;
  --border: #cbd3e9;
  --border-2: #a4b1d0;
  --text: #253254;
  --text-2: #506080;
  --shadow: 0 8px 24px rgb(38 56 105 / 12%);
  --shadow-sm: 0 2px 8px rgb(38 56 105 / 8%);
  --experience-action-bg: #3657bb;
  --experience-action-hover: #2e4da8;
  --experience-action-active: #27418e;
  --experience-action-border: #3657bb;
  --experience-selection-bg: #ecf0ff;
  --experience-selection-text: #334c9b;
  --experience-focus: #3657bb;
}
html[data-theme="dark"] body.experience-ui {
  --bg: #101923;
  --surface: #17232f;
  --surface-2: #1c2b39;
  --surface-3: #243545;
  --border: #354858;
  --border-2: #526a7e;
  --text: #e7edf3;
  --text-2: #a9b8c7;
  --green: #8cdbb0;
  --green-soft: #1c3c31;
  --red: #ffafb4;
  --red-soft: #482931;
  --yellow: #efd18a;
  --yellow-soft: #403723;
  --teal: #95d8cf;
  --teal-soft: #1b3b3c;
  --shadow: 0 10px 28px rgb(0 8 16 / 24%);
  --shadow-sm: 0 2px 8px rgb(0 8 16 / 18%);
  --experience-control-border: #70869b;
  --experience-action-bg: #246b9d;
  --experience-action-hover: #2d78ad;
  --experience-action-active: #1b527c;
  --experience-action-border: #66a6d4;
  --experience-selection-bg: #223c50;
  --experience-selection-text: #b9dcf6;
  --experience-focus: #90c6ed;
  --experience-overlay: rgb(0 8 16 / 70%);
}
html body.experience-ui::before,
html body.experience-ui::after {
  display: none;
  animation: none;
}
html body.experience-ui ::selection {
  color: var(--experience-selection-text);
  background: var(--experience-selection-bg);
}
html body.experience-ui [hidden] { display: none !important; }
html body.experience-ui :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--experience-focus);
  outline-offset: 3px;
}
html body.experience-ui a { text-underline-offset: 3px; }
html body.experience-ui a:hover { opacity: 1; }
html body.experience-ui :is(.main-area, .container, [id^="tab-"], .stack, .workflow-field, .si-field) {
  min-width: 0;
}
html body.experience-ui .layout { min-height: 100dvh; }
html body.experience-ui .main-area {
  transition: none;
  padding: 24px;
}
html body.experience-ui.experience-client .main-area { padding: 0; }
html body.experience-ui.experience-client .container { padding: 24px; max-width: none; }
html body.experience-ui .topbar {
  gap: 16px;
  margin-bottom: 24px;
  padding: 0 0 20px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  transition: background-color var(--experience-duration);
}
html body.experience-ui.experience-client .topbar {
  padding: 16px 24px;
  margin: 0;
  background: var(--surface);
}
html body.experience-ui :is(.topbar-links, .topbar-right) {
  display: flex;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
}
html body.experience-ui :is(h1, h2, h3, .tab-hero-title) {
  color: var(--text);
  line-height: 1.3;
  font-family: var(--f1);
  letter-spacing: -.02em;
  text-wrap: balance;
}
html body.experience-ui h1 { font-size: 1.375rem; font-weight: 700; }
html body.experience-ui h2 { font-size: 1.125rem; font-weight: 700; }
html body.experience-ui h3 { font-size: 1rem; font-weight: 600; }
html body.experience-ui .tab-hero {
  gap: 16px;
  align-items: center;
  padding-bottom: 0;
  margin-bottom: 24px;
  border: 0;
  animation: none;
}
html body.experience-ui .tab-hero-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
html body.experience-ui .tab-hero-desc {
  font: 400 .875rem/1.5 var(--f2);
  color: var(--text-2);
  letter-spacing: 0;
  margin-top: 4px;
  max-width: 75ch;
}
html body.experience-ui .tab-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 0;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 20px;
}
html body.experience-ui :is(.muted, .tiny, .help) { color: var(--text-2); }
html body.experience-ui .tiny { font-size: .8125rem; line-height: 1.5; }
html body.experience-ui :is(.card, .section-card, .filters-card, .table-card, .table-wrap, .ws-wrap, .rnis-help-card) {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
  transform: none;
  animation: none;
}
html body.experience-ui :is(.card, .section-card, .filters-card, .ws-wrap, .rnis-help-card) {
  padding: 20px;
  margin-bottom: 24px;
}
html body.experience-ui :is(.card, .section-card):hover { transform: none; box-shadow: none; }
html body.experience-ui .section-card-hdr {
  margin-bottom: 16px;
  padding-bottom: 0;
  border: 0;
}
html body.experience-ui .section-card-hdr .muted { font: 400 .8125rem/1.5 var(--f2); }
html body.experience-ui :is(.card, .section-card) :is(.form-section, .section-card, .card) {
  background: transparent;
  box-shadow: none;
}
html body.experience-ui .form-section {
  padding: 16px 0 4px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: 16px 0;
  background: transparent;
}
html body.experience-ui .form-section-title {
  color: var(--text);
  font: 600 .9375rem/1.4 var(--f2);
  letter-spacing: 0;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
}
html body.experience-ui .form-row { gap: 16px; margin-bottom: 16px; }
html body.experience-ui .stack { gap: 8px; }
/* Keep the existing grid alignment: a field may have a hint or secondary
   action below its control, so its whole bounding box is not a baseline. */
html body.experience-ui .stack > .context-help-label { line-height: 1.4; }
html body.experience-ui :is(.stack label, .meta-item span) {
  font: 600 .8125rem/1.4 var(--f2);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
html body.experience-ui .stack .help {
  opacity: 1;
  font: 400 .8125rem/1.45 var(--f2);
  margin-top: 0;
}
html body.experience-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select, textarea) {
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--experience-control-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: 400 .9375rem/1.4 var(--f2);
  box-shadow: none;
  transition: border-color var(--experience-duration), background-color var(--experience-duration);
}
html body.experience-ui :is(input, textarea)::placeholder {
  color: var(--text-2);
  opacity: 1;
}
html body.experience-ui :is(input, select, textarea):focus {
  border-color: var(--experience-focus);
  box-shadow: none;
}
html body.experience-ui :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--red);
  background: var(--red-soft);
}
html body.experience-ui :is(input, select, textarea):disabled {
  color: var(--text-2);
  background: var(--surface-3);
  cursor: not-allowed;
  opacity: .8;
}
html body.experience-ui :is(input[type="checkbox"], input[type="radio"]) {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  accent-color: var(--experience-focus);
  vertical-align: middle;
  flex: 0 0 18px;
  padding: 0;
  margin: 0;
}
html body.experience-ui input[type="range"] {
  padding: 0;
  margin: 0;
  min-height: 28px;
  accent-color: var(--experience-focus);
}
html body.experience-ui :is(.filter-cb, .workflow-check) { min-height: 36px; gap: 8px; }
html body.experience-ui :is(.btn, .switcher button, .pt-tab) {
  border-radius: 8px;
  font: 600 .875rem/1.35 var(--f2);
  letter-spacing: 0;
  min-height: 44px;
  gap: 8px;
  padding: 10px 16px;
  white-space: normal;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-2);
  box-shadow: none;
  transform: none;
  filter: none;
  transition: background-color var(--experience-duration), color var(--experience-duration), border-color var(--experience-duration), opacity var(--experience-duration);
}
html body.experience-ui .btn.sm { min-height: 36px; padding: 7px 12px; font-size: .8125rem; }
html body.experience-ui :is(.btn, .switcher button, .pt-tab):hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--experience-control-border);
  box-shadow: none;
  transform: none;
  filter: none;
}
html body.experience-ui :is(.btn, .switcher button, .pt-tab):active {
  background: var(--surface-3);
  transform: none;
}
html body.experience-ui .btn.primary,
html body.experience-ui .switcher button.on,
html body.experience-ui .pt-tab.act {
  background: var(--experience-action-bg);
  color: var(--experience-action-text);
  border-color: var(--experience-action-border);
  box-shadow: none;
}
html body.experience-ui :is(.btn.primary, .switcher button.on, .pt-tab.act):not(:disabled):hover {
  background: var(--experience-action-hover);
  color: var(--experience-action-text);
  border-color: var(--experience-action-border);
  filter: none;
}
html body.experience-ui :is(.btn.primary, .switcher button.on, .pt-tab.act):not(:disabled):active {
  background: var(--experience-action-active);
  color: var(--experience-action-text);
}
html body.experience-ui .pt-tab.act .lb { color: var(--experience-action-text); }
/* Dashboard and route controls are mounted after the shell styles. Their
   semantic states share the same palette rather than the decorative accent. */
html body.experience-ui :is(.dash-btn, .dash-pill),
html body.experience-ui #routeFormModal .rf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  font: 600 .875rem/1.35 var(--f2);
  text-align: center;
  white-space: normal;
  background: var(--surface-2);
  color: var(--text);
  transition: background-color var(--experience-duration), color var(--experience-duration), border-color var(--experience-duration);
}
html body.experience-ui :is(.dash-btn, .dash-pill):hover,
html body.experience-ui #routeFormModal .rf-btn.ghost:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--experience-control-border);
}
html body.experience-ui :is(.dash-btn-primary, .dash-pill.active),
html body.experience-ui #routeFormModal .rf-btn.primary {
  color: var(--experience-action-text);
  background: var(--experience-action-bg);
  border-color: var(--experience-action-border);
}
html body.experience-ui :is(.dash-btn-primary, .dash-pill.active):not(:disabled):hover,
html body.experience-ui #routeFormModal .rf-btn.primary:not(:disabled):hover,
html body.experience-ui .workflow .workflow-tabs [aria-selected=true]:not(:disabled):hover {
  color: var(--experience-action-text);
  background: var(--experience-action-hover);
  border-color: var(--experience-action-border);
  opacity: 1;
  filter: none;
}
html body.experience-ui :is(.dash-btn-primary, .dash-pill.active):not(:disabled):active,
html body.experience-ui #routeFormModal .rf-btn.primary:not(:disabled):active,
html body.experience-ui .workflow .workflow-tabs [aria-selected=true]:not(:disabled):active {
  color: var(--experience-action-text);
  background: var(--experience-action-active);
}
html body.experience-ui :is(.dash-btn, .dash-pill):disabled,
html body.experience-ui #routeFormModal :is(.rf-btn, .rf-btn.primary, .rf-btn.ghost):disabled,
html body.experience-ui .workflow .workflow-tabs button:disabled {
  color: var(--text-2);
  background: var(--surface-3);
  border-color: var(--border);
  opacity: 1;
  cursor: not-allowed;
  filter: none;
}
html body.experience-ui .btn.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
html body.experience-ui .btn.danger { background: var(--red-soft); color: var(--red); border-color: var(--border); }
html body.experience-ui .btn.danger:not(:disabled):hover,
html body.experience-ui .btn.danger:not(:disabled):active {
  color: var(--red);
  background: var(--red-soft);
  border-color: var(--red);
}
html body.experience-ui :is(.btn, .switcher button, .pt-tab):disabled {
  background: var(--surface-3);
  color: var(--text-2);
  border-color: var(--border);
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}
html body.experience-ui :is(.btn, button)[aria-busy="true"] { cursor: progress; }
html body.experience-ui .switcher {
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
html body.experience-ui .switcher button { padding: 6px 12px; min-height: 36px; background: transparent; border: 0; }
html body.experience-ui .dash-setting-row { flex-wrap: wrap; gap: 8px; }
html body.experience-ui .dash-setting-row .dash-pill { flex: 1 1 auto; padding-inline: 12px; }
html body.experience-ui .dash-settings-body { gap: 24px; padding: 24px; }
html body.experience-ui .dash-settings-hdr { padding: 20px 24px; }
html body.experience-ui .dash-settings-footer { gap: 12px; }
html body.experience-ui .tab-toolbar {
  padding: 16px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
  margin-bottom: 16px;
}
html body.experience-ui .tab-toolbar :is(input, select) { flex: 1 1 160px; max-width: 100%; }
html body.experience-ui .tab-toolbar label { min-width: 0; }
html body.experience-ui #vehicleSearch { min-width: min(240px, 100%); }
html body.experience-ui .tab-toolbar .filter-cb { flex: 0 1 auto; }
html body.experience-ui .tab-toolbar .filter-cb input { flex: 0 0 18px; }
html body.experience-ui :is(.vcnt, .user-badge) {
  color: var(--text-2);
  font-size: .8125rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  overflow-wrap: anywhere;
}
html body.experience-ui :is(.table-wrap, .table-card) {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}
html body.experience-ui table { font-variant-numeric: tabular-nums; border-top: 0; }
/* These column filters live in the transport table's existing local scroll. */
html body.experience-ui #tab-perevozki .pt-filter input[data-filter] { min-width: 120px; }
html body.experience-ui :is(th, .pt-th) {
  padding: 12px 16px;
  font: 600 .8125rem/1.4 var(--f2);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  background: var(--surface-2);
}
html body.experience-ui td { padding: 12px 16px; font-size: .875rem; line-height: 1.45; vertical-align: middle; }
html body.experience-ui :is(th, td) { border-bottom-color: var(--border); }
html body.experience-ui :is(.table-wrap, .table-card) thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
html body.experience-ui :is(.table-wrap, .table-card) tbody tr:nth-child(even) { background: transparent; }
html body.experience-ui tbody tr { transition: background-color 120ms; }
html body.experience-ui tbody tr:hover { background: var(--surface-2); }
html body.experience-ui tr:focus-within { background: var(--surface-2); }
/* Keep the vehicle action reachable while long saved statuses wrap or scroll. */
html body.experience-ui #fleetTableWrap table { min-width: 1200px; }
html body.experience-ui #fleetTableWrap :is(th,td):nth-child(4),
html body.experience-ui #fleetTableWrap :is(th,td):nth-child(8) { min-width: 140px; }
html body.experience-ui #fleetTableWrap .pill {
  max-width: 24ch;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
html body.experience-ui #fleetTableWrap th:last-child,
html body.experience-ui #fleetTableWrap td:last-child {
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--surface);
  border-left: 1px solid var(--border);
}
html body.experience-ui #fleetTableWrap th:last-child { z-index: 4; background: var(--surface-2); }
html body.experience-ui .fleet-vehicle-link {
  display: inline-block;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
html body.experience-ui #fleetArchiveHint { margin: 0 0 16px; }
html body.experience-ui :is(.pill, .badge) {
  border-radius: 6px;
  padding: 4px 8px;
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
}
html body.experience-ui :is(.pill.pending, .pill.unknown, .pill.no-data, .pill.no_data, .pill.not_registered, .pill.not-registered) {
  color: var(--text-2);
  background: var(--surface-3);
}
html body.experience-ui :is(.pill.ok, .pill.approved, .pill.active, .pill.found) { color: var(--green); background: var(--green-soft); }
html body.experience-ui :is(.pill.warn, .pill.expiring) { color: var(--yellow); background: var(--yellow-soft); }
html body.experience-ui :is(.pill.error, .pill.blocked, .pill.expired, .pill.revoked, .pill.cancelled) { color: var(--red); background: var(--red-soft); }
html body.experience-ui .vehicle-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
html body.experience-ui .vcard {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 12px;
  font: inherit;
  transform: none;
  box-shadow: none;
  transition: border-color var(--experience-duration), background-color var(--experience-duration);
}
html body.experience-ui .vcard:hover { background: var(--surface-2); border-color: var(--experience-control-border); transform: none; box-shadow: none; }
html body.experience-ui .vcard-plate { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
html body.experience-ui .vcard-brand { font-size: .875rem; margin-bottom: 16px; }
html body.experience-ui :is(.empty, .empty-state) { padding: 40px 24px; font-size: .9375rem; color: var(--text-2); line-height: 1.6; }
/* Stable navigation: width changes are immediate, feedback comes from color. */
html body.experience-ui #sidebar {
  background: var(--surface);
  box-shadow: none;
  border-right: 1px solid var(--border);
  transition: none;
  min-height: 100dvh;
}
html body.experience-ui .sb-header { padding: 16px 12px; min-height: 76px; gap: 12px; }
html body.experience-ui .sb-nav { padding: 12px 0; scrollbar-color: var(--border-2) transparent; }
html body.experience-ui .snav {
  min-height: 44px;
  padding: 10px 12px;
  gap: 12px;
  margin: 2px 8px;
  border-radius: 8px;
  color: var(--text-2);
  background: transparent;
  font: 500 .875rem/1.4 var(--f2);
  transform: none;
  box-shadow: none;
  transition: background-color var(--experience-duration), color var(--experience-duration);
}
html body.experience-ui .snav:hover { background: var(--surface-2); color: var(--text); transform: none; box-shadow: none; }
html body.experience-ui .snav.act,
html body.experience-ui .snav.act:hover {
  background: var(--experience-selection-bg);
  color: var(--experience-selection-text);
  font-weight: 700;
  transform: none;
  box-shadow: none;
}
html body.experience-ui .snav.act .snav-ico { color: var(--experience-focus); }
html body.experience-ui :is(.snav-lbl, .sb-brand, .sb-user-info) { transition: opacity 120ms; }
html body.experience-ui :is(#sbToggle, #mob-menu-btn) {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 8px;
  background: var(--surface-2);
  border-color: var(--border);
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
html body.experience-ui .sb-user { padding: 16px 12px; }
html body.experience-ui .application-workflow details > label {
  display: block;
  margin-block: 10px;
}
html body.experience-ui .sb-user-info b { font-size: .8125rem; }
html body.experience-ui .sb-user-info span { font-size: .75rem; }
html body.experience-ui .sb-nav-group {
  color: var(--text-2);
  padding: 16px 20px 6px;
  font: 600 .75rem/1.4 var(--f2);
}
/* Disclosures keep less frequent work adjacent to the main task. */
html body.experience-ui .experience-disclosure {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  margin-bottom: 16px;
  min-width: 0;
}
html body.experience-ui .experience-disclosure > summary {
  padding: 16px 20px;
  min-height: 56px;
  cursor: pointer;
  font: 600 .9375rem/1.4 var(--f2);
  color: var(--text);
}
html body.experience-ui .experience-disclosure > summary:hover { background: var(--surface-2); border-radius: 12px; }
html body.experience-ui .experience-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
html body.experience-ui .experience-disclosure-body { padding: 20px; }
html body.experience-ui .experience-disclosure :is(.card, .section-card, .si-notice) { border: 0; box-shadow: none; background: transparent; margin-bottom: 0; }
html body.experience-ui .experience-disclosure .tab-toolbar { border: 0; box-shadow: none; padding: 0; }
html body.experience-ui :is(#adminFleetSavedFilters, #fleetSavedFilters) .si-notice {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: var(--surface-2);
}
html body.experience-ui :is(#adminFleetSavedFilters, #fleetSavedFilters) .tab-toolbar { align-items: flex-end; gap: 12px; }
html body.experience-ui :is(#adminFleetSavedFilters, #fleetSavedFilters) .tab-toolbar label {
  display: grid;
  gap: 8px;
  flex: 1 1 220px;
  font-size: .8125rem;
  font-weight: 600;
}
html body.experience-ui :is(#adminFleetSavedFilters, #fleetSavedFilters) .tab-toolbar :is(input, select) { width: 100%; }
html body.experience-ui :is(#adminFleetSavedFilters, #fleetSavedFilters) .si-notice :is(p, small) {
  display: block;
  max-width: 85ch;
  color: var(--text-2);
  line-height: 1.5;
  font-size: .8125rem;
  margin-top: 8px;
}
/* Overlays: reachable header and a single bounded scrolling content region. */
html body.experience-ui .modal-overlay { padding: 24px; background: var(--experience-overlay) !important; }
html body.experience-ui :is(.vmodal, .pt-modal, .experience-dialog) {
  background: var(--surface);
  color: var(--text);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgb(0 8 16 / 28%);
  animation: experience-dialog-in 180ms var(--experience-ease);
}
html body.experience-ui :is(.vmodal-hdr, .experience-dialog-header) {
  gap: 16px;
  padding: 20px 24px;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
html body.experience-ui .vmodal-hdr h3 { font-size: 1.125rem; line-height: 1.35; }
html body.experience-ui :is(.vmodal-hdr .close-btn, .experience-dialog-header button) {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  flex-shrink: 0;
  cursor: pointer;
}
html body.experience-ui .vmodal-tabs { padding: 0 20px; border-color: var(--border); scrollbar-width: thin; }
html body.experience-ui .vmodal-tabs button { min-height: 44px; font-size: .875rem; padding: 12px 16px; }
html body.experience-ui .vmodal-body { padding: 24px; }
/* Vehicle tabs share one stable frame; only their content scrolls. */
html body.experience-ui #vehicleModal .vmodal {
  display: flex;
  flex-direction: column;
  height: min(780px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}
html body.experience-ui #vehicleModal :is(.vmodal-hdr, .vmodal-tabs) { flex-shrink: 0; }
html body.experience-ui #vehicleModal .vmodal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
html body.experience-ui .vehicle-section-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
html body.experience-ui .vehicle-section-links p { flex-basis: 100%; color: var(--text-2); }
html body.experience-ui #vehicleModal .device-add-form {
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  align-items: end;
}
html body.experience-ui .vehicle-device-table td:last-child { white-space: normal !important; }
html body.experience-ui .vehicle-device-table :is(th, td):last-child {
  position: sticky;
  right: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 2;
}
html body.experience-ui .experience-application-dialog {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 24px auto;
  width: min(760px, calc(100% - 32px)) !important;
  max-height: calc(100dvh - 48px) !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 64px rgb(0 8 16 / 28%);
  animation: experience-dialog-in 180ms var(--experience-ease);
}
html body.experience-ui .experience-application-dialog .experience-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: 0 0 auto;
  margin: 0 !important;
}
html body.experience-ui .experience-application-dialog #adModalBody {
  padding: 20px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
html body.experience-ui :is(.meta-item, .detail-panel) { background: var(--surface-2); box-shadow: none; border-radius: 8px; }
html body.experience-ui :is(.si-notice, .gh-coach, .pt-hint) { border-left-width: 1px; border-right-width: 1px; }
html body.experience-ui :is(.alert, .check-result, .si-status, .experience-status) {
  font-size: .875rem;
  line-height: 1.55;
  border-radius: 8px;
  padding: 12px 16px;
  animation: none;
  overflow-wrap: anywhere;
}
html body.experience-ui :is(.alert.error, .experience-status[data-kind="error"]) { color: var(--red); background: var(--red-soft); border: 1px solid var(--red); }
html body.experience-ui :is(.alert.success, .experience-status[data-kind="success"]) { color: var(--green); background: var(--green-soft); border: 1px solid var(--green); }
html body.experience-ui .experience-status[data-kind="warning"] { color: var(--yellow); background: var(--yellow-soft); border: 1px solid var(--yellow); }
html body.experience-ui .experience-status[data-kind="info"] { color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); }
html body.experience-ui .experience-status:empty { display: none; }
html body.experience-ui .experience-toast-stack {
  position: fixed;
  inset: auto 24px 24px auto;
  z-index: 1300;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  pointer-events: none;
}
html body.experience-ui .experience-toast {
  pointer-events: auto;
  padding: 16px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-2);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: experience-dialog-in 180ms var(--experience-ease);
  overflow-wrap: anywhere;
}
html body.experience-ui .experience-toast.experience-status[data-kind="error"] { color: var(--red); background: var(--red-soft); border-color: var(--red); }
html body.experience-ui .experience-toast.experience-status[data-kind="warning"] { color: var(--yellow); background: var(--yellow-soft); border-color: var(--yellow); }
html body.experience-ui .experience-toast.experience-status[data-kind="success"] { color: var(--green); background: var(--green-soft); border-color: var(--green); }
html body.experience-ui .experience-toast.experience-status[data-kind="info"] { color: var(--text); background: var(--surface-2); border-color: var(--border-2); }
html body.experience-ui :is(.experience-application-dialog, .vmodal, .modal-content, .pt-modal) > [data-experience-notices] { padding: 16px 24px 0; flex: 0 0 auto; }
html body.experience-ui .experience-toast strong { display: block; font-size: .9375rem; margin-bottom: 4px; }
html body.experience-ui .experience-toast > div { min-width: 0; flex: 1; }
html body.experience-ui .experience-toast :is(p, strong) { margin: 0; line-height: 1.5; }
html body.experience-ui .experience-toast button { flex-shrink: 0; min-width: 36px; min-height: 36px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; }
html body.experience-ui .experience-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; margin: auto; max-height: calc(100dvh - 32px); overflow: auto; }
html body.experience-ui dialog.af-dialog { margin: auto; }
html body.experience-ui .experience-dialog::backdrop { background: var(--experience-overlay); }
html body.experience-ui .experience-dialog-content { padding: 20px 24px; white-space: pre-wrap; line-height: 1.6; overflow-wrap: anywhere; }
html body.experience-ui .experience-dialog-actions { display: flex; gap: 12px; padding: 16px 24px 24px; justify-content: flex-end; flex-wrap: wrap; }
html body.experience-ui :is(.dash-card, .dash-hero-card, .svc-card, .scn-card, .chat-sidebar, .chat-main) {
  animation: none;
  transform: none;
  box-shadow: none;
  transition: border-color var(--experience-duration), background-color var(--experience-duration);
}
html body.experience-ui :is(.dash-card, .dash-hero-card) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
}
html body.experience-ui :is(.dash-card, .dash-hero-card):hover { background: var(--surface-2); box-shadow: none; transform: none; }
html body.experience-ui .dash-hero-card::before { display: none; }
html body.experience-ui :is(.dash-hero-val, .dash-card-title) { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
html body.experience-ui .dash-hero-label { font-size: .8125rem; text-transform: none; letter-spacing: 0; }
html body.experience-ui .dash-hero-subs small { font-size: .75rem; }
html body.experience-ui :is([id^="tab-"], .main-area > *) { animation: none; }
html[data-theme="paper"] body.experience-ui .main-area > *,
html[data-theme="paper"] body.experience-ui [id^="tab-"] { animation: none; }
@keyframes experience-dialog-in {
  from { opacity: .65; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 641px) {
  html body.experience-ui #sidebar.collapsed .sb-header { padding-inline: 8px; }
  html body.experience-ui #sidebar.collapsed .snav { padding-inline: 10px; gap: 0; }
}
@media (max-width: 900px) {
  html body.experience-ui .form-row.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.experience-ui .topbar { align-items: flex-start; }
}
@media (max-width: 640px) {
  html body.experience-ui .main-area { padding: 16px; }
  html body.experience-ui.experience-client .main-area { padding: 0; }
  html body.experience-ui.experience-client :is(.container, .topbar) { padding: 16px; }
  html body.experience-ui .topbar { gap: 12px; margin-bottom: 20px; padding-bottom: 16px; }
  html body.experience-ui.experience-client .topbar { margin-bottom: 0; }
  html body.experience-ui :is(.topbar-links, .topbar-right) { gap: 8px; }
  html body.experience-ui.experience-admin .topbar { flex-wrap: wrap; align-items: stretch; }
  html body.experience-ui.experience-admin .topbar > div:first-child { width: 100%; min-width: 0; }
  html body.experience-ui.experience-admin .topbar > div:first-child > div { min-width: 0; flex: 1; }
  html body.experience-ui.experience-admin .topbar > div:first-child p.muted { display: none; }
  html body.experience-ui.experience-admin .topbar-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  html body.experience-ui.experience-admin .topbar-links .switcher { grid-column: 1 / 4; display: flex; min-width: 0; }
  html body.experience-ui.experience-admin .topbar-links .switcher button { flex: 1; min-width: 0; padding-inline: 5px; }
  html body.experience-ui.experience-admin .topbar-links .btn { min-width: 0; padding: 8px 6px; font-size: .75rem; }
  html body.experience-ui.experience-admin .topbar-links #logout { grid-column: 4; grid-row: 1; }
  html body.experience-ui.experience-admin .topbar-links .btn svg { flex-shrink: 0; }
  html body.experience-ui.experience-client .topbar { padding: 12px 16px; }
  html body.experience-ui .topbar .switcher { max-width: 100%; }
  html body.experience-ui .topbar .switcher button { font-size: .75rem; padding-inline: 8px; }
  html body.experience-ui :is(.topbar-links, .topbar-right) .btn { padding-inline: 10px; }
  html body.experience-ui h1 { font-size: 1.125rem; }
  html body.experience-ui .tab-hero { margin-bottom: 16px; gap: 12px; }
  html body.experience-ui .tab-hero-title { font-size: 1.25rem; }
  html body.experience-ui .tab-hero-desc { font-size: .875rem; }
  html body.experience-ui :is(.card, .section-card, .filters-card, .ws-wrap, .rnis-help-card) { padding: 16px; margin-bottom: 20px; }
  html body.experience-ui :is(.form-row, .form-row.cols-2, .form-row.cols-3, .form-row.cols-4) { grid-template-columns: minmax(0, 1fr); }
  html body.experience-ui :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 1rem; }
  html body.experience-ui :is(.btn.sm, .switcher button, .filter-cb) { min-height: 44px; }
  html body.experience-ui .tab-toolbar { padding: 12px; gap: 12px; }
  html body.experience-ui .tab-toolbar :is(input:not([type="checkbox"]), select) { width: 100% !important; flex: 1 1 100%; max-width: 100%; }
  html body.experience-ui .tab-toolbar :is(.btn, .switcher) { flex: 1 1 auto; }
  html body.experience-ui .tab-toolbar .switcher { display: flex; }
  html body.experience-ui .tab-toolbar .switcher button { flex: 1; }
  html body.experience-ui .tab-toolbar .sep { display: none; }
  html body.experience-ui.experience-admin #tab-vehicles > .tab-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
  }
  html body.experience-ui.experience-admin #tab-vehicles > .tab-toolbar #vehicleSearch { grid-column: 1 / -1; }
  html body.experience-ui.experience-admin #tab-vehicles > .tab-toolbar > .btn { grid-column: 1 / -1; }
  html body.experience-ui .tab-toolbar .filter-cb { flex: 1 1 125px; font-size: .875rem; }
  html body.experience-ui :is(#adminFleetSavedFilters, #fleetSavedFilters) .tab-toolbar label { flex-basis: 100%; }
  html body.experience-ui .experience-disclosure > summary { padding: 12px 16px; min-height: 48px; }
  html body.experience-ui .experience-disclosure-body { padding: 16px; }
  html body.experience-ui :is(.table-wrap, .table-card) { border-radius: 8px; }
  html body.experience-ui :is(th, td) { padding: 12px; }
  html body.experience-ui .modal-overlay { padding: 12px; align-items: flex-start; }
  html body.experience-ui .vmodal { border-radius: 12px; margin: 0; max-height: calc(100dvh - 24px); overflow-y: auto; }
  html body.experience-ui #vehicleModal .vmodal { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
  html body.experience-ui .fleet-vehicle-link { min-height: 44px; }
  html body.experience-ui :is(.vmodal-hdr, .vmodal-body, .experience-dialog-header, .experience-dialog-content) { padding: 16px; }
  html body.experience-ui .vmodal-tabs { padding: 0 12px; }
  html body.experience-ui .experience-application-dialog { width: calc(100% - 24px) !important; max-height: calc(100dvh - 24px) !important; margin: 12px auto; }
  html body.experience-ui .experience-application-dialog #adModalBody { padding: 16px; }
  html body.experience-ui .experience-dialog-actions { padding: 12px 16px 16px; }
  html body.experience-ui .experience-dialog-actions .btn { flex: 1 1 120px; }
  html body.experience-ui :is(.experience-application-dialog, .vmodal, .modal-content, .pt-modal) > [data-experience-notices] { padding: 12px 16px 0; }
  html body.experience-ui .experience-toast-stack { inset: auto 16px max(16px, env(safe-area-inset-bottom)) 16px; width: auto; }
  html body.experience-ui .experience-toast button { min-width: 44px; min-height: 44px; }
  html body.experience-ui #sidebar { transform: translateX(-100%); transition: transform 180ms var(--experience-ease); }
  html body.experience-ui #sidebar.sb-open { transform: translateX(0); }
}
@media (pointer: coarse) {
  html body.experience-ui :is(.btn.sm, .switcher button, .filter-cb, .experience-toast button) { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.experience-ui,
  html body.experience-ui *,
  html body.experience-ui *::before,
  html body.experience-ui *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Section finder uses the existing navigation and current menu permissions. */
html body.experience-ui .section-finder { padding: 12px; border-bottom: 1px solid var(--border); }
html body.experience-ui .section-finder label { display: grid; gap: 6px; color: var(--text-2); font-size: .75rem; font-weight: 600; }
html body.experience-ui .section-finder input { width: 100%; min-width: 0; min-height: 40px; font-size: .875rem; padding-inline: 10px; }
html body.experience-ui .section-find-row { display: flex; align-items: center; gap: 6px; }
html body.experience-ui .section-find-row label { flex: 1; min-width: 0; }
html body.experience-ui #sectionFindClear { flex: 0 0 32px; min-width: 32px; padding: 4px; }
html body.experience-ui #sectionFindOpen { display: none; }
html body.experience-ui #sectionFindStatus { margin: 8px 0 0; font-size: .75rem; color: var(--text-2); overflow-wrap: anywhere; }
html body.experience-ui .section-nav-filtered { display: none !important; }
html body.experience-ui #sidebar.collapsed .section-find-row,
html body.experience-ui #sidebar.collapsed #sectionFindStatus { display: none; }
html body.experience-ui #sidebar.collapsed #sectionFindOpen { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; }
@media (max-width: 640px) {
 html body.experience-ui #sidebar:not(.sb-open) { visibility: hidden; }
 html body.experience-ui #sidebar.sb-open { visibility: visible; }
 html body.experience-ui #sidebar.collapsed .section-find-row { display: flex; }
 html body.experience-ui #sidebar.collapsed #sectionFindOpen { display: none; }
 html body.experience-ui .section-finder input { min-height: 44px; font-size: 1rem; }
 html body.experience-ui #sectionFindClear { min-width: 44px; min-height: 44px; }
}

/* Read feedback and deliberate recovery for text chat. */
body.experience-ui .chat-composer-status { padding:8px 0; font-size:12px; color:var(--text); }
body.experience-ui .chat-composer-status p { margin:0 0 8px; line-height:1.5; }
body.experience-ui .chat-composer-status .tab-toolbar { display:flex; gap:8px; flex-wrap:wrap; }
body.experience-ui .chat-composer-status button { white-space:normal; text-align:left; }
body.experience-ui #cabChatComposerStatus { padding:0 12px 8px; }
body.experience-ui #cabChatSend { width:auto; min-width:80px; font-size:12px; padding:8px; }
body.experience-ui #cabChatMessages { background:var(--surface); color:var(--text); }
body.experience-ui #cabChatMessages [data-chat-message] { background:var(--surface-2); color:var(--text); }
body.experience-ui #cabChatMessages [data-chat-message="own"] { background:#1d4ed8; color:#fff; }
body.experience-ui #cabChatMessages [data-chat-sender] { color:inherit; opacity:1; }

body.experience-ui #cabChatPanel { background:var(--surface); border-color:var(--border); color:var(--text); }
body.experience-ui #cabChatInput { min-width:0; background:var(--surface-2); color:var(--text); border-color:var(--border); }
body.experience-ui #cabChatInput::placeholder { color:var(--text-muted); }
body.experience-ui #cabChatInput:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
body.experience-ui #cabChatFooter { border-color:var(--border); }
body.experience-ui #cabChatSend:disabled { opacity:.65; cursor:default; }

/* A modal keeps floating support out of its controls and keyboard order. */
body.experience-ui #cabChatWidget[data-experience-suspended="true"] { display:none !important; }

/* Permit schedules are visible beside saved data and remain readable on phones. */
body.experience-ui .permit-entry{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;margin:0 0 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
body.experience-ui .permit-entry p{margin:5px 0 0;color:var(--text-2);max-width:68ch}
body.experience-ui .permit-entry .btn{flex-shrink:0}
body.experience-ui [data-pass-watch-host]{margin-bottom:16px}
@media(max-width:640px){body.experience-ui .permit-entry{align-items:stretch;flex-direction:column}body.experience-ui .permit-entry .btn{width:100%}}

/* Full Word setup uses the same field rhythm as document preparation. */
html body.experience-ui #templateWordEditor .si-header { position:sticky; top:0; z-index:2; background:var(--surface); }
html body.experience-ui #templateWordEditor .si-content,
html body.experience-ui #templateWordEditor [data-word-work] { display:grid; gap:16px; min-width:0; }
html body.experience-ui #templateWordEditor [hidden] { display:none; }
html body.experience-ui #templateWordEditor :is(h3,p) { margin:0; }
html body.experience-ui #templateWordEditor .stack { display:grid; gap:8px; min-width:0; }
html body.experience-ui #templateWordEditor .workflow-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
html body.experience-ui #templateWordEditor [data-word-bindings] { display:grid; gap:12px; }
html body.experience-ui #templateWordEditor [data-word-bindings] p { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
html body.experience-ui #templateWordEditor [data-word-status] { padding:12px 16px; border:1px solid var(--border); border-radius:8px; }
@media(max-width:600px) {
 html body.experience-ui #templateWordEditor { width:100vw!important; }
 html body.experience-ui #templateWordEditor .workflow-actions .btn { flex:1 1 100%; }
}

/* Consistent rhythm for the inspected duplicate and catalogue panels. */
html body.experience-ui #vehicleDuplicates .si-header { position:sticky; top:0; z-index:2; background:var(--surface); }
html body.experience-ui #vehicleDuplicates .si-content { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-width:0; }
html body.experience-ui #vehicleDuplicates .si-content > * { min-width:0; max-width:100%; }
html body.experience-ui #vehicleDuplicates :is(p,h3) { margin:0; }
html body.experience-ui #vehicleDuplicates [data-du-preview]:not(:empty) { display:grid; gap:12px; }
html body.experience-ui #vehicleDuplicates [hidden] { display:none; }
html body.experience-ui #vehicleDuplicates [data-du-selection] { padding:12px 0; }
html body.experience-ui #doTnvedResults .workflow-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
html body.experience-ui #doTnvedResults .workflow-actions a { flex:1 1 260px; }

html body.experience-ui #vehicleDuplicates [data-du-group] table { min-width:640px; overflow-wrap:normal; }

/* Vehicle card: keep all sections and controls reachable on laptop and phone. */
html body.experience-ui #vehicleModal .vmodal {
  width: min(1120px, 100%);
  max-width: 100%;
  min-width: min(720px, 100%);
  min-height: min(420px, calc(100dvh - 48px));
}
html body.experience-ui #vehicleModal .vmodal-hdr { gap: 16px; }
html body.experience-ui #vehicleModal .vmodal-hdr > div:first-child { min-width: 0; overflow-wrap: anywhere; }
html body.experience-ui .vehicle-window-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
html body.experience-ui .vehicle-window-expand {
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:8px 12px;
  color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:8px; cursor:pointer;
}
html body.experience-ui .vehicle-window-expand svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; }
html body.experience-ui #vehicleModal .vmodal-tabs { flex-wrap:wrap; max-height:132px; overflow:auto; }
html body.experience-ui #vehicleModal .vmodal-tabs button { padding:10px 12px; }
html body.experience-ui #vehicleModal .vmodal-body { min-width:0; overflow-x:hidden; }
html body.experience-ui #vehicleModal .vmodal-body :is(.mtab,.vmtab,.section-card) { min-width:0; max-width:100%; }
html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) { min-width:720px; }
html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) :is(th,td):last-child:not([colspan]) {
  position:sticky; right:0; background:var(--surface); border-left:1px solid var(--border); z-index:2;
}
html body.experience-ui .vehicle-section-picker { display:none; }
html body.experience-ui #vehicleModal.vehicle-window-expanded { padding:12px; }
html body.experience-ui #vehicleModal.vehicle-window-expanded .vmodal {
  width:100% !important; height:calc(100dvh - 24px) !important; max-height:calc(100dvh - 24px); resize:none;
}
@media (min-width:901px) and (pointer:fine) {
  html body.experience-ui #vehicleModal:not(.vehicle-window-expanded) .vmodal { resize:both; }
}
@media (max-width:900px) {
  html body.experience-ui #vehicleModal .vmodal-tabs { display:none; }
  html body.experience-ui .vehicle-section-picker {
    display:flex; gap:12px; align-items:center; flex-shrink:0; padding:12px 16px; border-block:1px solid var(--border);
  }
  html body.experience-ui .vehicle-section-picker span { font-size:13px; color:var(--text-2); }
  html body.experience-ui .vehicle-section-picker select { flex:1; min-width:0; min-height:44px; }
}
@media (max-width:600px) {
  html body.experience-ui .vehicle-window-expand span { display:none; }
  html body.experience-ui .vehicle-window-actions { gap:4px; }
  html body.experience-ui #vehicleModal .vmodal-hdr { gap:8px; }
  html body.experience-ui #vehicleModal .vmodal { min-height:min(420px, calc(100dvh - 24px)); }
  html body.experience-ui #vehicleModal.vehicle-window-expanded { padding:4px; }
  html body.experience-ui #vehicleModal.vehicle-window-expanded .vmodal { height:calc(100dvh - 8px) !important; max-height:calc(100dvh - 8px); }
  html body.experience-ui .vehicle-section-picker { flex-wrap:wrap; gap:4px; }
  html body.experience-ui .vehicle-section-picker span { flex-basis:100%; }
}

html body.experience-ui #vehicleModal :is(#mtab-routes,#vmtab-routes) .form-row.narrow {
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  align-items:end;
}
html body.experience-ui #vehicleModal :is(#mtab-routes,#vmtab-routes) .form-row.narrow > .stack { grid-column:auto !important; min-width:0; }
html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) td:last-child:not([colspan]) { white-space:normal !important; min-width:132px; width:180px; }
html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) td:last-child:not([colspan]) .btn { margin:2px !important; }

/* Readable work surfaces for the daily document and calendar flow. */
html body.experience-ui #documentOrderDialog {width:min(1180px,calc(100vw - 24px));}
html body.experience-ui #scpForm label {display:flex;flex-direction:column;gap:6px;min-width:0;}
html body.experience-ui #scpForm table {min-width:650px;}
html body.experience-ui #scpForm th:first-child {width:48%;}
html body.experience-ui #scpForm td {vertical-align:top;}
html body.experience-ui #scpForm input[type="number"] {max-width:180px;}
html body.experience-ui #templateWordEditor [data-word-status]:not(:empty) {padding:12px;background:var(--surface-2);border-left:3px solid var(--primary,var(--red));border-radius:4px;}
html body.experience-ui #templateWordEditor [data-word-mapping] > label,
html body.experience-ui #templateWordEditor [data-word-settings] > label {margin-block:12px;}
html body.experience-ui #templateWordEditor [data-word-selection] {overflow-wrap:anywhere;}
html body.experience-ui #templateWordEditor [hidden] {display:none!important;}

/* Calendar content remains aligned even inside a former centred empty-state host. */
html body.experience-ui #scnCalendarArea { text-align:left; }
html body.experience-ui #scnCalendarArea h3, html body.experience-ui #scnCalendarArea h4 { margin:16px 0 12px; }
html body.experience-ui #scnCalendarArea p { margin:12px 0; }
html body.experience-ui #scnCalendarArea .form-section { padding:16px; }
html body.experience-ui #scpForm ol { padding-left:24px; }
html body.experience-ui #scpForm label:has(input[type="checkbox"]) { flex-direction:row; align-items:center; }

/* On phones, each saved route is a readable card with the original headings. */
@media(max-width:600px){
 html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) {display:block;min-width:0;width:100%;}
 html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) thead {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
 html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) tbody {display:block;}
 html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) tbody tr {display:block;border:1px solid var(--border);border-radius:8px;margin:12px 0;padding:12px;}
 html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) tbody td {display:block;position:static;width:auto;min-width:0;border:0;padding:8px 0;white-space:normal!important;overflow-wrap:anywhere;}
 html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) tbody td[data-column]::before {content:attr(data-column);display:block;color:var(--text-2);font-size:12px;font-weight:600;margin-bottom:4px;}
 html body.experience-ui #vehicleModal :is(#admRoutesTable,#vmRoutesTable) tbody td:last-child:not([colspan]) {position:static;width:auto;min-width:0;border:0;}
}

/* v101: a readable path through existing work forms in all three themes. */
html body.experience-ui .work-context-guide { display:grid; gap:16px; }
html body.experience-ui .work-context-guide > :is(h4,p,details,.ui-action-row) { margin:0; }
html body.experience-ui .work-context-status { color:var(--text); max-width:72ch; }
html body.experience-ui .work-context-details { border-block:1px solid var(--border); padding:8px 0; }
html body.experience-ui .work-context-details > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--text-2); }
html body.experience-ui .work-context-facts { display:grid; grid-template-columns:140px minmax(0,1fr); gap:12px 16px; margin:16px 0; }
html body.experience-ui .work-context-facts dt { color:var(--text-2); }
html body.experience-ui .work-context-facts dd { margin:0; overflow-wrap:anywhere; }
html body.experience-ui .si-answer-guide { color:var(--text-2); padding-bottom:16px; margin:0 0 20px; border-bottom:1px solid var(--border); font-size:14px; }
html body.experience-ui .si-vehicle-search { align-self:start; min-width:0; }
html body.experience-ui .si-vehicle-search > summary { cursor:pointer; min-height:44px; padding:10px 0; color:var(--text-2); }
html body.experience-ui .si-vehicle-search[open] > summary { margin-bottom:8px; }
html body.experience-ui .si-steps [aria-current] { color:var(--experience-focus); }
html body.experience-ui .si-steps [aria-current] span { background:var(--experience-action-bg); color:var(--experience-action-text); }
html body.experience-ui :is(.si-document > summary::before,.si-file a) { color:var(--experience-focus); }
html body.experience-ui #documentOrderDialog .order-guide { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 24px; padding:16px 0; border-block:1px solid var(--border); }
html body.experience-ui #doGuideStatus { flex:1 1 100%; margin:8px 0 0; color:var(--text-2); font-size:14px; }
html body.experience-ui #doPartiesSection details { border-top:1px solid var(--border); }
html body.experience-ui #doPartiesSection summary { overflow-wrap:anywhere; font-weight:600; color:var(--text); }
html body.experience-ui #doPartiesSection details > p { color:var(--text-2); }
html body.experience-ui #documentOrderDialog .order-save-actions { padding-top:20px; border-top:1px solid var(--border); align-items:end; }
html body.experience-ui #documentOrderDialog .order-save-actions select { flex:1 1 260px; width:auto; }
html body.experience-ui :is(#doVehicleSection,#doPartiesSection,#doContractSection,#doCargoSection,#doSaveSection) { scroll-margin-block:24px; }
html body.experience-ui .workflow .workflow-tabs [aria-selected=true]:not(:disabled) { background:var(--experience-action-bg); color:var(--experience-action-text); border-color:var(--experience-action-border); }
html[data-theme=dark] body.experience-ui :is(input,select,textarea) { color-scheme:dark; }
html[data-theme=paper] body.experience-ui :is(input,select,textarea),html[data-theme=light] body.experience-ui :is(input,select,textarea) { color-scheme:light; }
@media(max-width:600px){
 html body.experience-ui .work-context-facts { grid-template-columns:1fr; gap:4px; }
 html body.experience-ui .work-context-facts dd { margin-bottom:12px; }
 html body.experience-ui .work-context-guide .ui-action-row > button { flex:1 1 100%; }
 html body.experience-ui #documentOrderDialog .order-guide > .btn { flex:1 1 100px; }
 html body.experience-ui #documentOrderDialog .order-save-actions > :is(select,.btn) { flex:1 1 100%; width:100%; }
 html body.experience-ui .si-vehicle-search { width:100%; }
}

html body.experience-ui #si-recovery .workspace-compact { margin:0 24px 8px; color:var(--text-2); font-size:13px; }
html body.experience-ui #si-recovery .workspace-compact summary { cursor:pointer; min-height:44px; padding-block:12px; }
html body.experience-ui #si-recovery .workspace-compact small { display:block; margin:8px 0 16px; }
html body.experience-ui #documentOrderDialog > .workflow-actions:first-child { justify-content:space-between; }
html body.experience-ui #documentOrderDialog > .workflow-actions:first-child h3 { margin-right:auto; }
html body.experience-ui .order-context-source { margin:12px 0; }
html body.experience-ui .order-context-source summary { cursor:pointer; min-height:44px; padding-block:12px; color:var(--text-2); }
html body.experience-ui .order-context-source .btn { margin:4px 8px 4px 0; }
@media(max-width:600px){html body.experience-ui #si-recovery .workspace-compact { margin-inline:16px; }}

/* Route recovery: preserve task controls, inherit the active cabinet palette. */
html body.experience-ui #routeFormModal .rf-form-panel,
html body.experience-ui #routeFormModal .rf-point,
html body.experience-ui #routeFormModal .rf-ms-dd,
html body.experience-ui #routeFormModal .rf-field input,
html body.experience-ui #routeFormModal .rf-field select,
html body.experience-ui #routeFormModal .rf-field textarea { background-color:var(--surface); color:var(--text); border-color:var(--border-2); }
html body.experience-ui #routeFormModal :is(.rf-ms-input, .rf-field input, .rf-field select, .rf-field textarea, .rf-btn, .rf-iconbtn, .rf-link):focus-visible {
  outline: 3px solid var(--experience-focus);
  outline-offset: 3px;
}
html body.experience-ui #routeFormModal .rf-btn[aria-busy="true"] { cursor: progress; }
html body.experience-ui #routeFormModal .rf-instr {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border-2);
  border-radius: 8px;
  padding: 10px 16px;
}
html body.experience-ui #routeFormModal .rf-instr:hover {
  color: var(--experience-selection-text);
  background: var(--experience-selection-bg);
  border-color: var(--experience-control-border);
}
html body.experience-ui #routeFormModal .rf-info {
  color: var(--experience-focus);
  border-color: var(--experience-focus);
}
html body.experience-ui #routeFormModal .rf-clear { color: var(--text-2); }
html body.experience-ui #routeFormModal .rf-clear:hover { color: var(--text); }
html body.experience-ui #routeFormModal .rf-ms-ctl { border-color: var(--experience-control-border); border-radius: 8px; }
html body.experience-ui #routeFormModal .rf-ms-ctl:focus-within { border-color: var(--experience-focus); }
html body.experience-ui #routeFormModal :is(.rf-ms-opt:hover, .rf-ms-opt.hl, .rf-chip) {
  background: var(--experience-selection-bg);
  color: var(--experience-selection-text);
}
html body.experience-ui #routeFormModal .rf-ms-opt.sel {
  background: var(--experience-action-bg);
  color: var(--experience-action-text);
}
html body.experience-ui #routeFormModal :is(.rf-ms-opt.arch, .rf-chip.arch) {
  color: var(--red);
  background: var(--red-soft);
}
html body.experience-ui #routeFormModal .rf-iconbtn.add { color: var(--experience-action-text); }
html body.experience-ui #routeFormModal .rf-iconbtn.add::before { background: var(--experience-action-bg); border: 1px solid var(--experience-action-border); }
html body.experience-ui #routeFormModal .rf-road-review { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
html body.experience-ui #routeFormModal .rf-road-review label { color: var(--text); }
html body.experience-ui #routeFormModal :is(.rf-check input, .rf-road-review input[type="checkbox"]) {
  width: 18px;
  height: 18px;
  accent-color: var(--experience-focus);
}
html body.experience-ui #routeFormModal .rf-sec-title,
html body.experience-ui #routeFormModal .rf-check,
html body.experience-ui #routeFormModal .rf-point summary { color:var(--text); }
html body.experience-ui #routeFormModal .rf-muted,
html body.experience-ui #routeFormModal .rf-ms-ph { color:var(--text-2); }
html body.experience-ui #routeFormModal .rf-field label,
html body.experience-ui #routeFormModal .rf-ms-lbl { color:var(--text-2); }
html body.experience-ui #routeFormModal .rf-link,
html body.experience-ui #routeFormModal .rf-btn.ghost { background:var(--surface); color:var(--text); border:1px solid var(--border-2); }
html body.experience-ui #routeFormModal .rf-link:hover { background:var(--primary-soft); }
html body.experience-ui #routeFormModal .rf-point-reuse { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
html body.experience-ui #routeFormModal .rf-point-reuse [role=status] { flex-basis:100%; color:var(--text-2); line-height:1.5; }
html body.experience-ui #routeFormModal .rf-point-reuse [role=status]:empty { display:none; }
html body.experience-ui #routeFormModal .rf-point-reuse [role=status] button { display:block; margin-top:8px; }
html body.experience-ui #routeFormModal .rf-point-vehicles { margin:4px 0 12px; }
html body.experience-ui #routeFormModal .rf-point-vehicles summary,
html body.experience-ui #routeFormModal .rf-coordinate-editor summary { min-height:32px; padding-block:6px; line-height:1.5; }
html body.experience-ui #routeFormModal .rf-coordinate-editor { margin-top:10px; }
html body.experience-ui #transportPeriodModal #tpRecheck { margin:0 0 12px; }
@media(max-width:700px){
 html body.experience-ui #routeFormModal .rf-point { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; padding:12px; }
 html body.experience-ui #routeFormModal .rf-point .rf-pt-body { grid-column:1/-1; grid-row:2; width:100%; }
 html body.experience-ui #routeFormModal .rf-point .rf-pt-row { flex-direction:column; }
 html body.experience-ui #routeFormModal .rf-point .rf-iconbtn { width:36px; height:36px; }
 html body.experience-ui #routeFormModal .rf-point-reuse button { min-height:44px; }
}

/* Contract setup follows the existing form spacing and theme variables. */
body.experience-ui #doSelectionSection { border-block-start:1px solid var(--border); padding-block:20px; }
body.experience-ui #doSelectionSection h4 { margin:0 0 12px; }
body.experience-ui #doSelectionSection details { margin-block:12px; }
body.experience-ui #doSelectionStatus p { margin-block:12px; }
body.experience-ui #templateWordEditor [data-word-suggestions] label { display:flex; flex-direction:row; align-items:flex-start; gap:8px; margin-block:10px; overflow-wrap:anywhere; }
body.experience-ui #templateWordEditor [data-word-suggestions] input[type=checkbox] { flex:none; margin-block-start:3px; }
body.experience-ui #templateWordEditor [data-word-suggestions] { margin-block:16px; }
body.experience-ui #templateWordEditor [data-word-suggestions] details { padding:12px; border:1px solid var(--border); border-radius:8px; }

body.experience-ui #templateWordEditor .word-condition { display:flex; flex-direction:column; gap:8px; }
body.experience-ui #templateWordEditor .word-condition > label { margin:0; }