/* AP1: load LAST, after workspace-system.css, only after the AP0 gate.
   No cascade layer: unlayered legacy rules would otherwise take precedence. */
:root {
  /* Palette is also consumed by ux-design-tokens.test.js. */
  --ux-light-bg: #f3f7fa;
  --ux-light-surface: #ffffff;
  --ux-light-input: #ffffff;
  --ux-light-text: #172330;
  --ux-light-muted: #526174;
  --ux-light-subtle: #e6edf3;
  --ux-light-line: #c5d0db;
  --ux-light-control-line: #7b8997;
  --ux-light-info: #075985;
  --ux-light-info-bg: #e6f2fa;
  --ux-light-success: #166543;
  --ux-light-success-bg: #e7f5ed;
  --ux-light-attention: #854500;
  --ux-light-attention-bg: #fff1d6;
  --ux-light-error: #a4002a;
  --ux-light-error-bg: #fff0f3;
  --ux-light-link: #b60030;
  --ux-light-selected: #fff0f3;
  --ux-dark-bg: #14171c;
  --ux-dark-surface: #20252c;
  --ux-dark-input: #181d23;
  --ux-dark-text: #f3f6fa;
  --ux-dark-muted: #b9c5d1;
  --ux-dark-subtle: #2c343e;
  --ux-dark-line: #536171;
  --ux-dark-control-line: #8292a3;
  --ux-dark-info: #8acfff;
  --ux-dark-info-bg: #173449;
  --ux-dark-success: #83d9ae;
  --ux-dark-success-bg: #193c2c;
  --ux-dark-attention: #ffd080;
  --ux-dark-attention-bg: #45331b;
  --ux-dark-error: #ffacbd;
  --ux-dark-error-bg: #472632;
  --ux-dark-link: #ffacbd;
  --ux-dark-selected: #472632;
  --ux-brand: #eb003c;
  --ux-action: #eb003c;
  --ux-action-hover: #c60033;
  --ux-on-action: #ffffff;
  --ux-danger-fill: #a4002a;
  --ux-danger-hover: #850023;
  --ux-control: 44px;
  --ux-radius: 6px;
  --ux-space-1: 4px;
  --ux-space-2: 8px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-5: 20px;
  --ux-space-6: 24px;
  --ux-space-8: 32px;
  --ux-section-gap: var(--ux-space-8);
  --ux-group-gap: var(--ux-space-4);
  --ux-section-padding: var(--ux-space-5);
  --ux-group-padding: var(--ux-space-4);
  --ux-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root,
html[data-theme="light"],
html[data-theme="system"] {
  color-scheme: light;
  --ux-bg: var(--ux-light-bg);
  --ux-surface: var(--ux-light-surface);
  --ux-input: var(--ux-light-input);
  --ux-text: var(--ux-light-text);
  --ux-muted: var(--ux-light-muted);
  --ux-subtle: var(--ux-light-subtle);
  --ux-line: var(--ux-light-line);
  --ux-control-line: var(--ux-light-control-line);
  --ux-info: var(--ux-light-info);
  --ux-info-bg: var(--ux-light-info-bg);
  --ux-success: var(--ux-light-success);
  --ux-success-bg: var(--ux-light-success-bg);
  --ux-attention: var(--ux-light-attention);
  --ux-attention-bg: var(--ux-light-attention-bg);
  --ux-error: var(--ux-light-error);
  --ux-error-bg: var(--ux-light-error-bg);
  --ux-link: var(--ux-light-link);
  --ux-selected: var(--ux-light-selected);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ux-bg: var(--ux-dark-bg);
  --ux-surface: var(--ux-dark-surface);
  --ux-input: var(--ux-dark-input);
  --ux-text: var(--ux-dark-text);
  --ux-muted: var(--ux-dark-muted);
  --ux-subtle: var(--ux-dark-subtle);
  --ux-line: var(--ux-dark-line);
  --ux-control-line: var(--ux-dark-control-line);
  --ux-info: var(--ux-dark-info);
  --ux-info-bg: var(--ux-dark-info-bg);
  --ux-success: var(--ux-dark-success);
  --ux-success-bg: var(--ux-dark-success-bg);
  --ux-attention: var(--ux-dark-attention);
  --ux-attention-bg: var(--ux-dark-attention-bg);
  --ux-error: var(--ux-dark-error);
  --ux-error-bg: var(--ux-dark-error-bg);
  --ux-link: var(--ux-dark-link);
  --ux-selected: var(--ux-dark-selected);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --ux-bg: var(--ux-dark-bg);
    --ux-surface: var(--ux-dark-surface);
    --ux-input: var(--ux-dark-input);
    --ux-text: var(--ux-dark-text);
    --ux-muted: var(--ux-dark-muted);
    --ux-subtle: var(--ux-dark-subtle);
    --ux-line: var(--ux-dark-line);
    --ux-control-line: var(--ux-dark-control-line);
    --ux-info: var(--ux-dark-info);
    --ux-info-bg: var(--ux-dark-info-bg);
    --ux-success: var(--ux-dark-success);
    --ux-success-bg: var(--ux-dark-success-bg);
    --ux-attention: var(--ux-dark-attention);
    --ux-attention-bg: var(--ux-dark-attention-bg);
    --ux-error: var(--ux-dark-error);
    --ux-error-bg: var(--ux-dark-error-bg);
    --ux-link: var(--ux-dark-link);
    --ux-selected: var(--ux-dark-selected);
  }
}

/* Resolve all three historical namespaces on the theme root, not descendants.
   --red deliberately remains tenant-owned; definitive UI actions use --ux-action. */
:root,
html[data-theme] {
  --app-bg: var(--ux-bg);
  --nav-bg: var(--ux-surface);
  --nav-hover: var(--ux-subtle);
  --surface: var(--ux-surface);
  --surface-raised: var(--ux-surface);
  --surface-subtle: var(--ux-subtle);
  --surface-soft: var(--ux-subtle);
  --grey: var(--ux-bg);
  --ink: var(--ux-text);
  --muted: var(--ux-muted);
  --text-soft: var(--ux-muted);
  --line: var(--ux-line);
  --border: var(--ux-line);
  --line-strong: var(--ux-control-line);
  --navy: var(--ux-text);
  --blue: var(--ux-info);
  --blue-soft: var(--ux-info-bg);
  --red-soft: var(--ux-selected);
  --warn: var(--ux-attention);
  --ok: var(--ux-success);
  --green: var(--ux-success);
  --danger: var(--ux-error);
  --control-height: var(--ux-control);
  --shadow: none;
  --shadow-sm: none;
  --shadow-md: 0 12px 32px rgb(0 0 0 / 18%);
  --alery-shadow: none;
  --alery-radius: var(--ux-radius);
  --alery-control-radius: var(--ux-radius);
  --one-brand-red: var(--ux-brand);
  --one-brand-accent-ink: var(--ux-link);
  --one-brand-blue-ink: var(--ux-info);
  --one-navy: var(--ux-text);
  --one-navy-hover: var(--ux-text);
  --one-action: var(--ux-action);
  --one-action-hover: var(--ux-action-hover);
  --one-on-action: var(--ux-on-action);
  --one-danger: var(--ux-danger-fill);
  --one-accent: var(--ux-action);
  --one-green: var(--ux-success);
  --one-amber: var(--ux-attention);
  --one-ink: var(--ux-text);
  --one-muted: var(--ux-muted);
  --one-line: var(--ux-line);
  --one-line-strong: var(--ux-control-line);
  --one-subtle: var(--ux-subtle);
  --one-surface: var(--ux-surface);
  --one-control: var(--ux-control);
  --one-radius: var(--ux-radius);
  --one-shadow: none;
  font-family: var(--ux-font);
  font-size: 100%;
}

html,
body {
  background: var(--ux-bg);
  color: var(--ux-text);
}

body { font-family: var(--ux-font); line-height: 1.5; }
html body main.workspace-main:not(.auth-shell):not(.configurator-shell) { background: var(--ux-bg); }
html body .workspace-main :is(.workspace-body, .layout) { background: transparent; }
html body * { letter-spacing: 0 !important; }

html body :is(h1, h2, h3, h4, strong, b, legend, th) { font-weight: 600; }
html body :is(label, .hint, .eyebrow, .status-chip, .document-status-badge) { font-weight: 500; }
html body :is(label, legend, .hint, .panel-head, .workspace-heading) { overflow-wrap: anywhere; }
html body :is(.hint, .eyebrow, .panel-head small) { font-size: .875rem; color: var(--ux-muted); }
html body :is(.panel-head h2, .report-module-head h3) { font-size: 1.125rem; line-height: 1.4; }
html body :is(.workspace-heading h1, .page-overview .workspace-heading h1) { font-size: 1.5rem; line-height: 1.3; }
html body :is(.secondary-link, .document-dictate, .calendar-import-action) { color: var(--ux-link); }

/* Heights are lower bounds. Long labels and user text scaling may grow controls. */
html body :is(button, .button-link, a.secondary):not(.semantic-studio-splitter) {
  min-height: var(--ux-control) !important;
  height: auto !important;
  max-height: none !important;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--ux-radius);
  font-family: var(--ux-font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

html body :is(.ui-icon, .icon-button, .modal-close, .global-search-clear) {
  width: var(--ux-control) !important;
  min-width: var(--ux-control) !important;
  height: var(--ux-control) !important;
  flex: 0 0 var(--ux-control);
  padding: 0;
}

html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--ux-control) !important;
  height: auto !important;
  padding: 9px 10px;
  border: 1px solid var(--ux-control-line);
  border-radius: var(--ux-radius);
  background: var(--ux-input);
  color: var(--ux-text);
  font-family: var(--ux-font);
  font-size: 1rem !important;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: none;
}

html body textarea { min-height: 96px !important; resize: vertical; }
html body select[multiple] { min-height: 132px !important; }
html body input[type="color"] { max-width: 64px; padding: 4px; }
html body input[type="file"] { overflow: hidden; }
html body input::placeholder,
html body textarea::placeholder { color: var(--ux-muted); opacity: 1; }
html body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ux-action); flex-shrink: 0; }
html body :is(.check, label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) {
  min-height: var(--ux-control);
  align-items: center;
}

html body :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ux-info) !important;
  outline-offset: 3px;
  scroll-margin-block: calc(var(--one-header) + 12px) 80px;
}

html body .ui-primary { color: var(--ux-on-action) !important; background: var(--ux-action) !important; border-color: var(--ux-action) !important; }
html body .ui-primary:is(:hover, :focus-visible) { background: var(--ux-action-hover) !important; border-color: var(--ux-action-hover) !important; }
html body :is(.ui-secondary, button.secondary, a.secondary, .button-link.secondary) {
  color: var(--ux-text) !important;
  background: var(--ux-surface) !important;
  border: 1px solid var(--ux-control-line) !important;
}
html body :is(.ui-secondary, button.secondary, a.secondary, .button-link.secondary):is(:hover, :focus-visible) { background: var(--ux-subtle) !important; }
html body .ui-tertiary { color: var(--ux-text) !important; }
html body .ui-tertiary:is(:hover, :focus-visible) { background: var(--ux-subtle) !important; }
html body .ui-danger { color: var(--ux-on-action) !important; background: var(--ux-danger-fill) !important; border-color: var(--ux-danger-fill) !important; }
html body .ui-danger:is(:hover, :focus-visible) { background: var(--ux-danger-hover) !important; border-color: var(--ux-danger-hover) !important; }
html body :is(button, input, select, textarea, .ui-primary, .ui-secondary, .ui-danger):disabled,
html body [aria-disabled="true"] {
  color: var(--ux-muted) !important;
  background: var(--ux-subtle) !important;
  border-color: var(--ux-control-line) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Status containers use solid, measured pairs. Children inherit the semantic ink. */
html body :is(.status-chip, .status-badge, .document-status-badge, .effective-access-badge, .service-reminder-channel-note, .service-reminder-notice, .flash, .ux-status) {
  --ux-status-ink: var(--ux-info);
  --ux-status-bg: var(--ux-info-bg);
  color: var(--ux-status-ink);
  background: var(--ux-status-bg);
  border-color: var(--ux-status-ink);
  border-radius: 4px;
  max-width: 100%;
  width: fit-content;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
}

html body :is(.status-chip.ok, .status-chip.success, .status-badge.success, .document-status-badge.complete, .document-status-badge.signed, .effective-access-badge.local, .deployment-import-all-clear, .ux-status[data-status="success"]) {
  --ux-status-ink: var(--ux-success);
  --ux-status-bg: var(--ux-success-bg);
  color: var(--ux-status-ink);
  background: var(--ux-status-bg);
  border-color: var(--ux-status-ink);
}

html body :is(.document-status-badge.sent, .effective-access-badge.inherited) {
  --ux-status-ink: var(--ux-info);
  --ux-status-bg: var(--ux-info-bg);
  color: var(--ux-status-ink);
  background: var(--ux-status-bg);
  border-color: var(--ux-status-ink);
}

html body :is(.status-chip.warning, .status-badge.warning, .document-status-badge:not(.complete):not(.signed):not(.sent), .service-reminder-notice.warning, .ux-status[data-status="attention"], .ux-status[data-status="offline"], .ux-status[data-status="stale"], .ux-status[data-status="unknown"]) {
  --ux-status-ink: var(--ux-attention);
  --ux-status-bg: var(--ux-attention-bg);
  color: var(--ux-status-ink);
  background: var(--ux-status-bg);
  border-color: var(--ux-status-ink);
}

html body :is(.status-chip.error, .status-badge.error, .service-reminder-error, .ux-status[data-status="error"], .ux-status[data-status="conflict"], .ux-status[data-status="forbidden"]) {
  --ux-status-ink: var(--ux-error);
  --ux-status-bg: var(--ux-error-bg);
  color: var(--ux-status-ink);
  background: var(--ux-status-bg);
  border-color: var(--ux-status-ink);
}

html body :is(.service-reminder-notice, .service-reminder-channel-note, .ux-status, .flash) :is(small, strong, b, p, span, .app-icon) { color: inherit; }
html body .deployment-import-counts .success { color: var(--ux-success); }
html body .service-reminder-step.complete > i { background: var(--ux-success-bg); color: var(--ux-success); }

/* Sections are unframed; repeated list items and dialogs retain their boundaries. */
html body :is(.workspace-body, .admin-content) :is(.panel, .report-module, .toolbar, .metric-details, .notice-board) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
html body :is(.panel, .report-module, .item-modal) :is(.panel, .report-module) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
html body :is(.panel-head, .report-module-head) { gap: 12px; flex-wrap: wrap; }
html body :is(.panel-head, .report-module-head) > div { min-width: 0; }
html body :is(.toolbar, .roster-toolbar, .panel-actions, .modal-actions, .deployment-custom-field-footer) { flex-wrap: wrap; gap: 8px; }
html body :is(.toolbar, .roster-toolbar) > label { min-width: 0; flex: 1 1 180px; }
html body :is(.workspace-body, .admin-content, .report-module, .item-modal, form, fieldset) { min-width: 0; }

html body :is(.segmented, .workspace-tabs) { max-width: 100%; flex-wrap: wrap; }
html body .segmented > button { min-width: 0; padding: 8px 12px; }
html body :is(.segmented > button.active, .admin-nav button.active, .admin-subnav button.active) {
  color: var(--ux-text);
  background: var(--ux-selected);
  border-color: var(--ux-link);
}
html body .global-search-form { grid-template-columns: 36px minmax(0, 1fr) var(--ux-control); border: 1px solid var(--ux-control-line); background: var(--ux-input); }
html body #globalSearchForm input[type="search"] { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body #globalSearchForm .global-search-clear { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body .global-search:focus-within .global-search-form { border-color: var(--ux-info); outline: 3px solid var(--ux-info); outline-offset: 3px; box-shadow: none; background: var(--ux-input); }
html body #globalSearchInput:focus-visible { outline: 0 !important; }
html body .focus-task .focus-task-icon { color: var(--ux-info); background: var(--ux-info-bg); }
html body :is(.focus-task.is-service, .focus-task.is-swap) .focus-task-icon { color: var(--ux-attention); background: var(--ux-attention-bg); }
html body .focus-task.is-message .focus-task-icon { color: var(--ux-info); background: var(--ux-info-bg); }
html body :is(.document-template-list, .knowledge-contact-list, .compact-admin-list) > :is(button, article) {
  border-radius: 0;
  border-width: 0 0 1px;
  box-shadow: none;
}

html body :is(.table-scroll, .table-wrap, .rights-table-scroll, .deployment-table-wrap) { min-width: 0; max-width: 100%; overflow-x: auto; }
html body :is(th, td) { line-height: 1.5; }
html body th { color: var(--ux-text); background: var(--ux-subtle); }
html body :is(.item-modal, .admin-detail-modal, .area-modal, .notice-modal, .calendar-link-modal) { max-width: 100%; color: var(--ux-text); background: var(--ux-surface); }

/* Exact widget boxes override general control sizes. Safari can omit the input
   layer when paint/size containment and canvas isolation are combined. */
html body .document-pdf-page {
  isolation: auto;
}
html body .document-pdf-page .document-pdf-overlay {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
html body .document-pdf-page .document-overlay-field {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  contain: none;
  container-type: normal;
  touch-action: manipulation;
}
html body .document-pdf-page .document-overlay-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0;
  padding: 1px 3px !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ux-info) 82%, transparent) !important;
  border-radius: 1px !important;
  background: #fff !important;
  color: #111827 !important;
  font-family: var(--ux-font) !important;
  font-size: var(--document-field-font-size, 11px) !important;
  font-weight: 500;
  line-height: 1 !important;
  text-overflow: ellipsis;
}
html body .document-pdf-page .document-overlay-field :is(input:not([type="checkbox"]):not([type="radio"]), textarea) {
  -webkit-appearance: none;
  appearance: none;
}
html body .document-pdf-page .document-overlay-field textarea {
  line-height: 1.15 !important;
  resize: none;
  white-space: pre-wrap;
}
html body .document-pdf-page .document-overlay-field :is(input[type="checkbox"], input[type="radio"]) {
  width: min(100%, 22px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: min(100%, 22px) !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0;
}
html body .document-pdf-page .document-overlay-field:focus-within {
  z-index: 3;
}
html body .document-pdf-page .document-overlay-field :is(input, select, textarea):focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 2px #006aa6 !important;
}

/* Intrinsic sizing fixes: shrink the tracks and children, never hide user input. */
html body :is(.deployment-template-form, .deployment-custom-field-row, .deployment-custom-field-main, .deployment-custom-field-options, .deployment-category-row, .semantic-studio-config, .semantic-studio-workspace) > * { min-width: 0; max-width: 100%; }
html body .deployment-template-form fieldset { border: 0; padding: 12px 0; border-radius: 0; }
html body .deployment-custom-field-row { border: 0; border-top: 1px solid var(--ux-line); border-radius: 0; background: transparent; padding: 12px 0; }
html body .deployment-custom-field-main { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
html body .deployment-category-row { grid-template-columns: minmax(0, 1fr) var(--ux-control); }
html body .member-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
html body .member-directory-row { min-width: 0; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1fr); }
html body .member-directory-row > * { min-width: 0; overflow-wrap: anywhere; }
html body .deployment-template-list .deployment-template-version { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
html body .deployment-template-version > span { grid-template-columns: minmax(0, 1fr); }
html body .deployment-template-version > span > small { grid-column: 1; }
html body .deployment-template-actions { min-width: 0; flex-shrink: 0; }
html body .deployment-template-actions button { min-width: min(100%, 120px); overflow-wrap: normal; word-break: normal; padding: 8px 12px; }
html body :is(.deployment-custom-field-main, .deployment-custom-field-options) label > span { font-size: .875rem; font-weight: 500; }
html body .semantic-studio-workspace { grid-template-columns: minmax(0, var(--semantic-preview-width, 56%)) 10px minmax(0, 1fr); }
html body .semantic-studio-config :is(input, select, textarea, fieldset) { min-width: 0; max-width: 100%; }

/* These buttons are choices, not one-line segmented tabs. Never inherit fixed heights. */
html body .item-modal.service-reminder-modal .service-reminder-audience .segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  align-items: stretch;
  min-height: 0;
  height: auto;
}
html body .item-modal.service-reminder-modal .service-reminder-audience .segmented > button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  min-height: 80px !important;
  height: auto !important;
  padding: 12px;
  overflow: visible;
  color: var(--ux-text);
  background: var(--ux-surface);
  border-color: var(--ux-control-line);
  text-align: left;
  align-content: start;
}
html body .item-modal.service-reminder-modal .service-reminder-audience .segmented > button.active { background: var(--ux-selected); border-color: var(--ux-link); box-shadow: inset 3px 0 var(--ux-link); }
html body .item-modal.service-reminder-modal .service-reminder-audience .segmented > button > span { display: grid; min-width: 0; gap: 4px; }
html body .item-modal.service-reminder-modal .service-reminder-audience .segmented > button :is(b, small) { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.5; }
html body .item-modal.service-reminder-modal .service-reminder-audience .segmented > button b { font-size: 1rem; color: var(--ux-text); }
html body .item-modal.service-reminder-modal .service-reminder-audience .segmented > button small { font-size: .875rem; color: var(--ux-muted); font-weight: 400; }
html body .item-modal.service-reminder-modal .service-reminder-audience .segmented > button.active > .app-icon { color: var(--ux-link); }

/* AP3 opt-in full-page editors retain the existing modal DOM and save guards. */
html body .modal-backdrop:has(> .ux-editor-page) {
  position: fixed;
  inset: 0;
  padding: 0;
  align-items: stretch;
  background: var(--ux-bg);
  backdrop-filter: none;
}
html body .modal-backdrop > .item-modal.ux-editor-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(12px, env(safe-area-inset-left, 0px));
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: none;
}
html body .ux-editor-page > .panel-head {
  position: sticky;
  z-index: 20;
  top: 0;
  flex: 0 0 auto;
  background: var(--ux-surface);
}
html body .modal-backdrop > .item-modal.ux-editor-page > :is(form, .ux-editor-page__body) {
  flex: 1 0 auto;
  width: min(100%, 1120px);
  min-height: 0;
  margin-inline: auto;
  overflow: visible;
  padding-block: 16px;
}
html body .ux-editor-page :is(.modal-actions, .ux-editor-page__actions) {
  position: sticky;
  z-index: 21;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--ux-line);
  border-radius: 0;
  background: var(--ux-surface);
  box-shadow: none;
}

@media (max-width: 1100px) {
  html body .member-directory-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (max-width: 760px) {
  html body .deployment-template-list .deployment-template-version { grid-template-columns: minmax(0, 1fr); }
  html body .deployment-template-actions { width: 100%; justify-content: flex-start; }
  html body :is(.deployment-template-form, .deployment-category-editor > div, .deployment-custom-field-main, .service-reminder-filters, .calendar-import-toolbar, .service-type-editor, .appointment-reminder-row, .area-role-row) { grid-template-columns: minmax(0, 1fr); }
  html body .deployment-category-row { grid-template-columns: minmax(0, 1fr) var(--ux-control); }
  html body .deployment-custom-field-footer { align-items: stretch; flex-direction: column; }
  html body .semantic-studio-workspace { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  html body .semantic-studio-splitter { display: none; }
  html body :is(.semantic-studio-workspace .semantic-mapper-panel, .semantic-studio-workspace .semantic-studio-config) { height: auto; overflow: visible; }
  html body .semantic-studio-workspace .semantic-mapper-viewer { height: 40dvh; min-height: 200px; overflow: auto; }
  html body .item-modal.service-reminder-modal .service-reminder-audience .segmented { grid-template-columns: minmax(0, 1fr); }
  html body .item-modal.service-reminder-modal .service-reminder-selection { grid-template-rows: auto auto auto auto minmax(220px, 1fr) auto; }
  html body :is(.toolbar, .roster-toolbar, .deployment-period-range) { min-width: 0; max-width: 100%; }
  html body :is(.toolbar, .roster-toolbar) > * { max-width: 100%; }
  html body .global-search { min-width: 0; }
  html body :is(.item-modal, .admin-detail-modal, .area-modal, .notice-modal, .calendar-link-modal) { scroll-padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(button, input, select, textarea, .global-search-form) { transition: none !important; }
}

@media (forced-colors: active) {
  html body :is(button, input, select, textarea, .status-chip, .document-status-badge, .ux-status) { border: 1px solid ButtonText !important; }
  html body :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight !important; }
}