/* Shared spacing for the authenticated workspaces. Keep dense data tables,
   navigation order and each feature's visibility/state under their owners. */
html body.experience-ui {
  --experience-space-caption: 4px;
  --experience-space-action: 12px;
  --experience-page-gutter: 24px;
  --experience-dialog-gutter: 24px;
}

/* Aligned headings, fields and action rows across the existing sections. */
html body.experience-ui :is(.tab-hero, .section-card-hdr, .dash-header, .dash-card-hdr) {
  gap: var(--experience-space-group);
}
html body.experience-ui :is(.tab-hero, .section-card-hdr, .vmodal-hdr, .pt-modal-head) > div { min-width: 0; }
html body.experience-ui :is(.tab-hero-title, .section-card-hdr h3, .vmodal-hdr h3, .pt-modal-head h3) { margin: 0; }
html body.experience-ui :is(.vmodal-hdr p, .dash-subtitle) { margin-top: var(--experience-space-caption); }
html body.experience-ui .form-row { column-gap: var(--experience-space-group); row-gap: var(--experience-space-group); }
html body.experience-ui .form-row .stack > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; box-sizing: border-box; }
html body.experience-ui .form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
html body.experience-ui .form-section:last-child { margin-bottom: 0; }
html body.experience-ui :is(.btn, .dash-btn) { justify-content: center; align-items: center; text-align: center; }
html body.experience-ui .btn svg { flex-shrink: 0; }
html body.experience-ui .ui-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--experience-space-action);
}
html body.experience-ui .ui-action-row > button { min-width: 44px; min-height: 44px; }
html body.experience-ui .vmodal-hdr > .ui-action-row { flex-shrink: 0; }
html body.experience-ui :is(.ui-action-row, .workflow-actions, .notification-hub-actions, .vehicle-section-links) > .btn {
  max-width: 100%;
  overflow-wrap: anywhere;
}
html body.experience-ui :is(.tab-toolbar, .workflow-actions, .notification-hub-actions, .gh-actions) {
  gap: var(--experience-space-action);
}

/* One text edge for a dialog's heading, tabs, body and footer. The tab's
   own 16px inset is included so its label starts at the body's 24px edge. */
html body.experience-ui :is(.vmodal-hdr, .experience-dialog-header, .pt-modal-head) {
  padding: var(--experience-space-panel) var(--experience-dialog-gutter);
  align-items: flex-start;
}
html body.experience-ui :is(.vmodal-body, .pt-modal-body, .experience-dialog-content) {
  padding: var(--experience-space-section) var(--experience-dialog-gutter);
  min-width: 0;
}
html body.experience-ui .vmodal-tabs { padding-inline: calc(var(--experience-dialog-gutter) - 16px); }
html body.experience-ui .vmodal-tabs button { padding-inline: 16px; gap: var(--experience-space-field); }
html body.experience-ui :is(.vmodal-hdr, .pt-modal-head) > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
}
html body.experience-ui :is(.pt-modal-foot, .experience-dialog-actions) {
  padding: var(--experience-space-group) var(--experience-dialog-gutter);
  gap: var(--experience-space-action);
  flex-wrap: wrap;
  align-items: center;
}
html body.experience-ui .experience-application-dialog #adModalBody {
  padding: var(--experience-space-section) var(--experience-dialog-gutter);
}

/* Workflows have separate groups even when the first heading in each
   section deliberately has no top margin. No selector changes display. */
html body.experience-ui .workflow > section { margin-block: var(--experience-space-section); }
html body.experience-ui .workflow > section:first-child { margin-top: 0; }
html body.experience-ui .workflow :is(h3, h4) { margin-bottom: var(--experience-space-action); }
html body.experience-ui .workflow .workflow-grid { gap: var(--experience-space-group); }
html body.experience-ui .workflow :is(form > .workflow-field, form > fieldset) {
  margin-block: 0 var(--experience-space-section);
  min-width: 0;
}
html body.experience-ui .workflow fieldset {
  padding: var(--experience-space-group);
  border: 1px solid var(--border);
  border-radius: var(--r2);
}
html body.experience-ui .workflow legend { padding-inline: var(--experience-space-field); font-weight: 600; }
html body.experience-ui .workflow fieldset > :is(.workflow-grid, .workflow-choices) { margin-top: var(--experience-space-group); }
html body.experience-ui .workflow :is(.workflow-check, .workflow-field) { gap: var(--experience-space-field); }
html body.experience-ui .workflow .workflow-actions { margin-top: var(--experience-space-group); }
html body.experience-ui .workflow .workflow-actions:empty { margin: 0; }
html body.experience-ui #documentOrderDialog { padding: var(--experience-dialog-gutter); }

/* Dynamically mounted finance and transport forms share the same frame;
   floating route labels and the map's sizing stay with their own modules. */
html body.experience-ui .af-dialog { padding: var(--experience-dialog-gutter); }
html body.experience-ui .af :is(.af-grid, .af-summary) { gap: var(--experience-space-group); }
html body.experience-ui .af :is(.af-grid label, .af-field) { gap: var(--experience-space-field); }
html body.experience-ui .af-actions { gap: var(--experience-space-action); }
html body.experience-ui .af h3 { margin-top: var(--experience-space-section); }
html body.experience-ui .af h4 { margin-top: var(--experience-space-group); }
html body.experience-ui #routeFormModal .rf-form-panel { padding: var(--experience-space-section) var(--experience-dialog-gutter); }
html body.experience-ui #routeFormModal :is(.rf-grid-2, .rf-grid-3) { gap: var(--experience-space-group); }
html body.experience-ui #routeFormModal .rf-row-info { gap: var(--experience-space-action); }
html body.experience-ui #routeFormModal .rf-sec-title {
  margin-block: var(--experience-space-section) var(--experience-space-action);
  flex-wrap: wrap;
  gap: var(--experience-space-action);
}
html body.experience-ui #routeFormModal .rf-sec-title > .rf-st-l { min-width: 0; }
html body.experience-ui #routeFormModal .rf-actions { flex-wrap: wrap; gap: var(--experience-space-action); }
html body.experience-ui #routeFormModal :is(.rf-btn, .rf-instr, .rf-link) { min-height: 44px; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* The guided order uses the same margins as cards and other dialogs. */
html body.experience-ui .si-start { padding: var(--experience-space-panel); gap: var(--experience-space-section); }
html body.experience-ui .si-start > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--experience-space-action);
}
html body.experience-ui .si-header { padding: var(--experience-space-panel) var(--experience-dialog-gutter); align-items: flex-start; }
html body.experience-ui .si-header h2 { margin: 0; font-size: 1.375rem; line-height: 1.3; }
html body.experience-ui .si-header button { flex-shrink: 0; min-width: 44px; min-height: 44px; }
html body.experience-ui .si-steps { padding: var(--experience-space-group) var(--experience-dialog-gutter); margin: 0; gap: var(--experience-space-action); }
html body.experience-ui .si-content { padding: var(--experience-space-field) var(--experience-dialog-gutter) var(--experience-space-section); }
html body.experience-ui .si-grid { gap: var(--experience-space-group); }
html body.experience-ui :is(.si-footer, .si-staff) { padding: var(--experience-space-group) var(--experience-dialog-gutter); }
html body.experience-ui .si-footer { gap: var(--experience-space-group); }
html body.experience-ui .si-footer-nav { margin-top: 0; gap: var(--experience-space-action); }
html body.experience-ui .si-utility { padding: var(--experience-space-action) var(--experience-dialog-gutter) var(--experience-space-section); gap: var(--experience-space-action); }
html body.experience-ui :is(.si-file, .si-file-review, .si-list-head) { gap: var(--experience-space-action); }
html body.experience-ui .si-list-head { margin-block: var(--experience-space-group); }
html body.experience-ui .si-document { padding-block: var(--experience-space-section); }
html body.experience-ui .si-document[open] > summary { margin-bottom: var(--experience-space-group); }
html body.experience-ui .si-dialog :is(#si-resolution, #si-close-question) { padding-inline: var(--experience-dialog-gutter); }

/* Dashboard rhythm follows the same field/panel scale. A two-line label
   reserves room for the existing RNIS caption without clipping long text. */
html body.experience-ui :is(.dash-flow, .dash-grid, .dash-col-main, .dash-col-side) { gap: var(--experience-space-group); }
html body.experience-ui .dash-header { margin-bottom: var(--experience-space-section); }
html body.experience-ui .dash-actions { flex-wrap: wrap; gap: var(--experience-space-field); }
html body.experience-ui .dash-btn { min-height: 44px; padding: 10px 12px; white-space: normal; }
html body.experience-ui .dash-hero-label { min-height: 2.8em; line-height: 1.4; margin-bottom: var(--experience-space-caption); }
html body.experience-ui .dash-hero-nav-arrow { vertical-align: baseline; }
html body.experience-ui .dash-hero-val { margin-bottom: var(--experience-space-field); }
html body.experience-ui .dash-hero-subs { flex-wrap: wrap; gap: var(--experience-space-caption) var(--experience-space-action); }
html body.experience-ui .dash-card-hdr { flex-wrap: wrap; align-items: flex-start; }
html body.experience-ui .dash-card-ok { gap: var(--experience-space-field); }
html body.experience-ui .dash-card-ok > .btn { margin-top: var(--experience-space-field); }
html body.experience-ui .dash-expiring-strip { margin-top: var(--experience-space-group); padding-top: var(--experience-space-group); }
html body.experience-ui .notification-hub-row { gap: var(--experience-space-section); }
html body.experience-ui .notification-hub-report .notification-hub-note { margin-top: var(--experience-space-group); }
html body.experience-ui :is(.gh-tasks, .gh-coach) { padding: var(--experience-space-panel); margin-block: var(--experience-space-group); }
html body.experience-ui .gh-task-grid { gap: var(--experience-space-action); }
html body.experience-ui .gh-search { margin-block: var(--experience-space-section) var(--experience-space-group); }
html body.experience-ui .gh-search label { margin-bottom: var(--experience-space-field); }

@media (max-width: 640px) {
  html body.experience-ui { --experience-page-gutter: 16px; --experience-dialog-gutter: 16px; --experience-space-panel: 16px; }
  html body.experience-ui :is(.vmodal-hdr, .vmodal-body, .pt-modal-head, .pt-modal-body, .experience-dialog-header, .experience-dialog-content) { padding: var(--experience-space-group) var(--experience-dialog-gutter); }
  html body.experience-ui .vmodal-tabs { padding-inline: 0; }
  html body.experience-ui .ui-action-row > .btn { flex: 1 1 140px; min-width: 0; }
  html body.experience-ui .notification-hub-row { align-items: stretch; flex-direction: column; gap: var(--experience-space-group); padding-block: var(--experience-space-group); }
  html body.experience-ui .notification-hub-row:first-child { padding-top: 0; }
  html body.experience-ui .notification-hub-row > .btn { width: 100%; max-width: none; }
  html body.experience-ui .notification-hub-actions { flex-direction: column; align-items: stretch; }
  html body.experience-ui .notification-hub-actions .btn { width: 100%; }
  html body.experience-ui .si-grid { grid-template-columns: minmax(0, 1fr); }
  html body.experience-ui .si-wide { grid-column: auto; }
  html body.experience-ui .si-start > div:last-child { width: 100%; }
  html body.experience-ui .si-start > div:last-child .btn { flex: 1 1 140px; }
  html body.experience-ui .si-footer { position: static; }
  html body.experience-ui .si-footer-nav { width: 100%; }
  html body.experience-ui :is(.si-footer > button, .si-footer-nav > button) { flex: 1 1 120px; }
  html body.experience-ui .workflow .workflow-actions > .btn { flex: 1 1 140px; min-width: 0; }
  html body.experience-ui .af :is(.af-grid, .af-summary) { grid-template-columns: minmax(0, 1fr); }
  html body.experience-ui #routeFormModal .rf-form-panel { padding-block: var(--experience-space-group); }
  html body.experience-ui .gh-task-grid { grid-template-columns: minmax(0, 1fr); }
  html body.experience-ui .gh-search > div { flex-direction: column; align-items: stretch; }
  html body.experience-ui .gh-search input { width: 100%; }
  html body.experience-ui .dash-hero-label { min-height: 0; }
  html body.experience-ui :is(.dash-card, .dash-hero-card) { padding: var(--experience-space-panel); }
  html body.experience-ui .dash-actions { width: 100%; }
  html body.experience-ui .dash-actions .dash-btn { flex: 1; }
  html body.experience-ui .dash-rz-btn { min-width: 44px; min-height: 44px; }
}

/* Application work handoff uses the established spacing scale. */
html body.experience-ui .application-work-panel {
  margin-block: var(--space-6, 24px);
  padding-block: var(--space-4, 16px);
  border-block: 1px solid var(--border);
}
html body.experience-ui .application-work-panel > h4 { margin: 0 0 8px; }
html body.experience-ui .application-work-panel > p { margin: 8px 0 12px; line-height: 1.5; }
html body.experience-ui .application-work-panel > .ui-action-row { margin-top: 12px; }

html body.experience-ui #dpTemplateField { margin-bottom: 16px; }
html body.experience-ui #araForm > .ui-action-row { margin-top: 16px; }