/* Municipal operations: clear Arabic hierarchy and a quiet, continuous workspace. */
.skip-link { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 1100; transform: translateY(-150%); }
.skip-link:focus-visible { transform: none; }
html[data-ui="enhanced"] .skip-link:focus-visible { padding: var(--space-3) var(--space-5); background: var(--semantic-surface-card); color: var(--semantic-text-link); border: var(--border-width) solid var(--semantic-border-focus); border-radius: var(--radius-control); }
html[data-ui="reference"] :is(.workspace-heading,.overview-layout,.task-list-heading,.screen-finder,.password-toggle) { display: none; }
html[data-ui="enhanced"] {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--font-line-body);
  color: var(--semantic-text-primary);
  background: var(--semantic-surface-page);
  --picker-text: var(--semantic-text-primary);
  --picker-muted: var(--semantic-text-secondary);
  --picker-surface: var(--semantic-surface-card);
  --picker-border: var(--semantic-border-strong);
  --picker-hover: var(--semantic-surface-hover);
  --picker-selected: var(--semantic-surface-selected);
  --picker-focus: var(--semantic-border-focus);
  --picker-radius: var(--radius-control);
  --picker-target: var(--size-target);
  --picker-gap: var(--space-3);
  --picker-border-width: var(--border-width);
  --picker-panel-limit: var(--size-picker-panel);
  --picker-shadow: var(--shadow-overlay);
}
html[data-ui="enhanced"] body { background: var(--semantic-surface-page); }
html[data-ui="enhanced"] :is(button,input,textarea) { font: inherit; }
html[data-ui="enhanced"] :is(button,a,input,textarea,[tabindex]):focus-visible {
  outline: var(--border-focus) solid var(--semantic-border-focus);
  outline-offset: var(--space-1);
}
html[data-ui="enhanced"] :is(input,textarea):focus {
  border-color: var(--semantic-border-focus) !important;
  box-shadow: var(--shadow-focus);
}
html[data-ui="enhanced"] :is(button,a,input,textarea) {
  transition: background-color var(--motion-feedback), border-color var(--motion-feedback), color var(--motion-feedback);
}
html[data-ui="enhanced"] :is(button,[role="button"]):is(:disabled,[aria-disabled="true"]) {
  opacity: var(--state-disabled-opacity);
  cursor: not-allowed;
}
html[data-ui="enhanced"] :is(input,textarea):disabled {
  background: var(--semantic-surface-disabled);
  color: var(--semantic-text-secondary);
  cursor: not-allowed;
}
html[data-ui="enhanced"] [aria-busy="true"] { cursor: progress; }
html[data-ui="enhanced"] :is(input,textarea,[role="combobox"])[aria-invalid="true"] {
  border-color: var(--semantic-status-error) !important;
  background: var(--semantic-status-error-surface);
}
html[data-ui="enhanced"] :is(.muted,.save-hint,.breadcrumb-count,.mail-local-note) { color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] :is(.form-error,.picker-error) { color: var(--semantic-status-error); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .icon { inline-size: var(--size-icon); block-size: var(--size-icon); }
html[data-ui="enhanced"] :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--semantic-action-primary); }

/* Mobile is the base; the header grows into two quiet desktop rows. */
html[data-ui="enhanced"] .app-shell { min-block-size: 100dvh; display: flex; flex-direction: column; }
html[data-ui="enhanced"] .site-header {
  block-size: auto;
  min-block-size: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--semantic-surface-card);
  border-bottom: var(--border-width) solid var(--semantic-border-default);
  box-shadow: none;
}
html[data-ui="enhanced"] .brand { position: static; margin: 0; inline-size: auto; min-inline-size: 0; flex: 1; justify-content: flex-start; grid-row: 1; grid-column: 1; }
html[data-ui="enhanced"] .brand img { inline-size: var(--size-logo); max-inline-size: 100%; block-size: auto; max-block-size: var(--space-16); object-fit: contain; }
html[data-ui="enhanced"] .mobile-menu { display: inline-flex; position: static; margin: 0; inset: auto; justify-self: end; grid-row: 1; grid-column: 2; }
html[data-ui="enhanced"] .header-tools { position: static; inline-size: auto; gap: var(--space-2); margin: 0; padding: 0; grid-row: 2; grid-column: 2; }
html[data-ui="enhanced"] .profile-button { min-block-size: var(--size-target); padding: var(--space-1); gap: var(--space-2); color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .profile-button img { inline-size: var(--size-avatar); block-size: var(--size-avatar); border-radius: var(--radius-pill); }
html[data-ui="enhanced"] .profile-button span { display: none; }
html[data-ui="enhanced"] .profile-button strong { color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .header-notification { inline-size: var(--size-target); block-size: var(--size-target); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .header-notification:hover { background: var(--semantic-surface-hover); }
html[data-ui="enhanced"] .counter { color: var(--semantic-text-on-action); background: var(--semantic-action-primary); font-size: var(--font-size-caption); }
html[data-ui="enhanced"] .global-search { position: relative; order: 4; inline-size: 100%; block-size: var(--size-target); max-inline-size: none; margin: 0; grid-row: 2; grid-column: 1; border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-control); background: var(--semantic-surface-card); }
html[data-ui="enhanced"] .global-search input { min-block-size: var(--size-target); inline-size: 100%; color: var(--semantic-text-primary); padding-inline: var(--space-3); border: 0; border-radius: inherit; background: transparent; }
html[data-ui="enhanced"] .global-search button { position: static; min-inline-size: var(--size-target); min-block-size: var(--size-target); align-items: center; justify-content: center; color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .main-nav { position: relative; block-size: auto; min-block-size: 0; display: none; flex-direction: column; align-items: stretch; padding: var(--space-2) var(--space-4); background: var(--semantic-surface-card); color: var(--semantic-text-primary); box-shadow: none; border-bottom: var(--border-width) solid var(--semantic-border-default); }
html[data-ui="enhanced"] .main-nav:is(.open,.mobile-open) { display: flex; }
html[data-ui="enhanced"] :is(.home-link,.nav-toggle) { min-block-size: var(--size-target); block-size: auto; inline-size: 100%; padding: var(--space-2) var(--space-3); gap: var(--space-2); color: var(--semantic-text-secondary); font-size: var(--font-size-small); border: 0; border-radius: var(--radius-control); background: transparent; justify-content: flex-start; }
html[data-ui="enhanced"] :is(.home-link:hover,.home-link.active,.nav-toggle:hover,.nav-group.active>.nav-toggle,.nav-group.open>.nav-toggle) { color: var(--semantic-text-link); background: var(--semantic-surface-selected); }
html[data-ui="enhanced"] .nav-toggle>.icon { color: currentColor; opacity: 1; }
html[data-ui="enhanced"] .nav-group { position: relative; }
html[data-ui="enhanced"] .nav-dropdown { position: static; inline-size: 100%; min-inline-size: 0; padding: var(--space-2); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-card); background: var(--semantic-surface-card); box-shadow: none; }
html[data-ui="enhanced"] .nav-dropdown a { min-block-size: var(--size-target); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); color: var(--semantic-text-primary); font-size: var(--font-size-small); white-space: normal; border-radius: var(--radius-control); }
html[data-ui="enhanced"] :is(.nav-dropdown a:hover,.nav-dropdown a.selected) { background: var(--semantic-surface-hover); color: var(--semantic-text-link); }
html[data-ui="enhanced"] .profile-menu { inline-size: min(var(--size-login-form),calc(100vw - var(--space-8))); inset-inline-end: 0; inset-inline-start: auto; border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); background: var(--semantic-surface-card); color: var(--semantic-text-primary); padding: var(--space-2); }
html[data-ui="enhanced"] .profile-menu button { min-block-size: var(--size-target); padding: var(--space-2) var(--space-3); gap: var(--space-3); border-radius: var(--radius-control); color: inherit; }
html[data-ui="enhanced"] .profile-menu button:hover { background: var(--semantic-surface-hover); }
html[data-ui="enhanced"] .profile-name { color: var(--semantic-text-secondary); padding: var(--space-3); }
html[data-ui="enhanced"] .screen-finder { order: 5; inline-size: 100%; min-block-size: var(--size-target); grid-row: 3; grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-control); color: var(--semantic-text-secondary); background: var(--semantic-surface-card); text-align: start; }
html[data-ui="enhanced"] .screen-finder:hover { background: var(--semantic-surface-hover); color: var(--semantic-text-link); }
html[data-ui="enhanced"] .screen-finder kbd { margin-inline-start: auto; font: inherit; font-size: var(--font-size-caption); color: var(--semantic-text-secondary); background: var(--semantic-surface-raised); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-control); padding-inline: var(--space-2); }
html[data-ui="enhanced"] .preview-notice { padding: var(--space-2) var(--space-4); background: var(--semantic-surface-raised); color: var(--semantic-text-secondary); font-size: var(--font-size-caption); border: 0; }

html[data-ui="enhanced"] .workspace { inline-size: 100%; min-inline-size: 0; max-inline-size: var(--size-workspace); margin-inline: auto; padding: var(--space-6) var(--space-4) var(--space-10); min-block-size: 0; flex: 1; }
html[data-ui="enhanced"] .workspace-heading { display: grid; gap: var(--space-2); margin-block-end: var(--space-8); }
html[data-ui="enhanced"] .workspace>.page-breadcrumb { display: none; }
html[data-ui="enhanced"] :is(.page-breadcrumb,.workspace-heading nav) { margin: 0; min-block-size: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; color: var(--semantic-text-secondary); font-size: var(--font-size-small); }
html[data-ui="enhanced"] :is(.page-breadcrumb a,.workspace-heading nav a) { min-block-size: var(--size-target); display: inline-flex; align-items: center; color: var(--semantic-text-link); }
html[data-ui="enhanced"] .workspace-heading h1 { font-size: var(--font-size-display); line-height: var(--font-line-heading); font-weight: var(--font-weight-bold); max-inline-size: 24ch; margin: 0; color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .workspace-heading :is(p,.workspace-lead) { font-size: var(--font-size-body); color: var(--semantic-text-secondary); max-inline-size: 70ch; margin: 0; }
html[data-ui="enhanced"] .workspace-heading time { color: var(--semantic-text-secondary); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .workspace-heading-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
html[data-ui="enhanced"] .footer { position: static; margin-block-start: auto; min-block-size: 0; padding: var(--space-5) var(--space-4); flex-direction: column; align-items: flex-start; gap: var(--space-2); background: var(--semantic-surface-card); color: var(--semantic-text-secondary); border-top: var(--border-width) solid var(--semantic-border-default); box-shadow: none; backdrop-filter: none; font-size: var(--font-size-small); }
html[data-ui="enhanced"] .footer a { color: var(--semantic-text-link); text-decoration: underline; }

/* The leading overview is a working summary, followed by the task register. */
html[data-ui="enhanced"] .overview-layout { display: grid; gap: var(--space-6); padding: var(--space-6); margin-block-end: var(--space-8); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-card); background: var(--semantic-surface-card); }
html[data-ui="enhanced"] .overview-main h2 { margin: 0 0 var(--space-2); color: var(--semantic-text-primary); font-size: var(--font-size-title); }
html[data-ui="enhanced"] .overview-main p { max-inline-size: 60ch; margin: 0; color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .overview-main>span { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--semantic-text-secondary); font-size: var(--font-size-small); margin-block-end: var(--space-3); }
html[data-ui="enhanced"] .overview-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-5); }
html[data-ui="enhanced"] .overview-metrics { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; margin: 0; list-style: none; }
html[data-ui="enhanced"] .overview-metrics li { min-inline-size: 0; }
html[data-ui="enhanced"] .overview-metrics>div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: var(--border-width) solid var(--semantic-border-default); min-block-size: var(--size-target); }
html[data-ui="enhanced"] .overview-metrics dt { color: var(--semantic-text-secondary); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .overview-metrics dd { margin: 0; }
html[data-ui="enhanced"] .overview-metrics a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: var(--size-target); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--semantic-border-default); }
html[data-ui="enhanced"] .overview-metrics dd a { min-inline-size: var(--size-target); border: 0; justify-content: center; padding: var(--space-2); color: var(--semantic-text-primary); font-size: var(--font-size-title); font-weight: var(--font-weight-bold); line-height: var(--font-line-heading); border-radius: var(--radius-control); }
html[data-ui="enhanced"] .overview-metrics dd a:hover { background: var(--semantic-surface-hover); color: var(--semantic-text-link); }
html[data-ui="enhanced"] .overview-metrics a:hover { color: var(--semantic-text-link); }
html[data-ui="enhanced"] .overview-metrics :is(strong,b) { font-size: var(--font-size-metric); font-weight: var(--font-weight-bold); line-height: var(--font-line-heading); }
html[data-ui="enhanced"] .overview-metrics :is(span,small) { color: var(--semantic-text-secondary); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .dashboard-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-6); min-block-size: 0; }
html[data-ui="enhanced"] .task-sidebar { min-inline-size: 0; min-block-size: 0; block-size: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-card); background: var(--semantic-surface-card); box-shadow: none; }
html[data-ui="enhanced"] .task-tab { inline-size: auto; flex: 1 1 auto; min-block-size: var(--size-target); border: var(--border-width) solid transparent; border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); gap: var(--space-2); background: transparent; color: var(--semantic-text-secondary); font-size: var(--font-size-small); text-align: start; }
html[data-ui="enhanced"] .task-tab .icon { color: currentColor; inline-size: var(--size-icon); block-size: var(--size-icon); }
html[data-ui="enhanced"] .task-tab:is(.active,[aria-selected="true"]) { border: var(--border-width) solid var(--semantic-border-default); color: var(--semantic-text-link); background: var(--semantic-surface-selected); font-weight: var(--font-weight-bold); }
html[data-ui="enhanced"] .task-tab:hover { background: var(--semantic-surface-hover); }
html[data-ui="enhanced"] .task-tab b { color: inherit; margin-inline-start: auto; }
html[data-ui="enhanced"] .new-task { inline-size: 100%; min-block-size: var(--size-target); border-radius: var(--radius-control); background: var(--semantic-action-primary); color: var(--semantic-text-on-action); padding: var(--space-3); margin: var(--space-2) 0 0; }
html[data-ui="enhanced"] .dashboard-content { min-inline-size: 0; }
html[data-ui="enhanced"] .dashboard-watermark { display: none; }
html[data-ui="enhanced"] .dashboard-task-list { display: grid; gap: var(--space-3); margin: 0; }
html[data-ui="enhanced"] .task-list-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
html[data-ui="enhanced"] .task-list-heading h2 { margin: 0; color: var(--semantic-text-primary); font-size: var(--font-size-section); }
html[data-ui="enhanced"] .task-list-heading>span { color: var(--semantic-text-secondary); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .dashboard-task { min-inline-size: 0; min-block-size: var(--size-target); display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-control); background: var(--semantic-surface-card); color: var(--semantic-text-primary); text-align: start; box-shadow: none; }
html[data-ui="enhanced"] .dashboard-task:hover { background: var(--semantic-surface-hover); }
html[data-ui="enhanced"] .dashboard-task>span:nth-child(2) { min-inline-size: 0; flex: 1; }
html[data-ui="enhanced"] .dashboard-task small { color: var(--semantic-text-secondary); white-space: normal; }
html[data-ui="enhanced"] .dashboard-empty { padding: var(--space-12) var(--space-6); margin: 0; text-align: center; background: var(--semantic-surface-card); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-card); color: var(--semantic-text-secondary); font-size: var(--font-size-body); }
html[data-ui="enhanced"] .dashboard-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
html[data-ui="enhanced"] .dashboard-empty strong { color: var(--semantic-text-primary); font-size: var(--font-size-section); }

/* Shared controls, forms and records. */
html[data-ui="enhanced"] :is(.section-card,.repeatable-card) { min-inline-size: 0; padding: var(--space-5); margin-block-end: var(--space-6); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-card); background: var(--semantic-surface-card); box-shadow: none; }
html[data-ui="enhanced"] .section-heading { display: flex; flex-wrap: wrap; gap: var(--space-3); min-block-size: var(--size-target); padding: 0 0 var(--space-4); margin: 0 0 var(--space-5); border-bottom: var(--border-width) solid var(--semantic-border-default); color: var(--semantic-text-primary); font-size: var(--font-size-section); font-weight: var(--font-weight-bold); }
html[data-ui="enhanced"] .section-heading>.icon { color: var(--semantic-text-link); inline-size: var(--size-icon-large); block-size: var(--size-icon-large); }
html[data-ui="enhanced"] .section-heading .editing-badge { background: var(--semantic-status-warning-surface); color: var(--semantic-status-warning); font-size: var(--font-size-caption); padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); }
html[data-ui="enhanced"] :is(.request-layout,.form-layout,.fields-grid,.routing-fields,.citizen-sections,.editor-sections) { min-inline-size: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
html[data-ui="enhanced"] :is(.citizen-sections,.editor-sections)>.section-card { margin-block-end: 0; }
html[data-ui="enhanced"] :is(.citizen-sections,.request-layout) .fields-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
html[data-ui="enhanced"] :is(.field,.routing-fields .field,.field-group) { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); min-inline-size: 0; min-block-size: 0; block-size: auto; border: 0; border-radius: 0; background: transparent; overflow: visible; }
html[data-ui="enhanced"] :is(.field-label,.field.multiline .field-label) { inline-size: auto; min-inline-size: 0; max-inline-size: none; flex: none; padding: 0; border: 0; background: transparent; color: var(--semantic-text-primary); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); text-align: start; white-space: normal; line-height: var(--font-line-control); }
html[data-ui="enhanced"] :is(.form-field>label,.field-group>label,.modal-body #mail-compose-form>label) { color: var(--semantic-text-primary); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); }
html[data-ui="enhanced"] :is(.field input,.field textarea,.form-field>input,.form-field>textarea,.filter-panel input,.table-search input,.modal-body #mail-compose-form input,.modal-body #mail-compose-form textarea) { inline-size: 100%; min-inline-size: 0; min-block-size: var(--size-target); block-size: auto; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-control); background: var(--semantic-surface-card); color: var(--semantic-text-primary); font-size: var(--font-size-body); line-height: var(--font-line-control); }
html[data-ui="enhanced"] :is(.field input::placeholder,.field textarea::placeholder,.table-search input::placeholder,.global-search input::placeholder) { color: var(--semantic-text-secondary); opacity: 1; }
html[data-ui="enhanced"] :is(.field.multiline,.field.multiline textarea) { min-block-size: 0; }
html[data-ui="enhanced"] :is(.field textarea,.field.multiline textarea,.modal-body #mail-compose-form textarea) { min-block-size: var(--size-textarea); }
html[data-ui="enhanced"] .field:focus-within { border-color: transparent; box-shadow: none; }
html[data-ui="enhanced"] .field>.picker { border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-control); }
html[data-ui="enhanced"] .phone-list { display: grid; gap: var(--space-3); min-inline-size: 0; }
html[data-ui="enhanced"] .phone-entry { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
html[data-ui="enhanced"] .phone-entry input { flex: 1; min-inline-size: 0; }
html[data-ui="enhanced"] .phone-entry .icon-button { flex-shrink: 0; }
html[data-ui="enhanced"] .phone-field>.btn { align-self: flex-start; }
html[data-ui="enhanced"] .picker-trigger { min-block-size: var(--size-target); color: var(--semantic-text-primary); padding: var(--space-2) var(--space-3); font-size: var(--font-size-body); }
html[data-ui="enhanced"] .picker-option { min-block-size: var(--size-target); padding: var(--space-2) var(--space-3); white-space: normal; color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .picker-option[aria-selected="true"] { color: var(--semantic-text-link); background: var(--semantic-surface-selected); font-weight: var(--font-weight-bold); }
html[data-ui="enhanced"] .picker-panel { margin-block-start: var(--space-1); border-color: var(--semantic-border-strong); }
html[data-ui="enhanced"] :is(.field-choices,.choice-options,.priority-field,.notify-check) { flex-wrap: wrap; gap: var(--space-3); color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .choice-label { color: var(--semantic-text-primary); }
html[data-ui="enhanced"] :is(.choice-options label,.notify-check) { min-block-size: var(--size-target); display: inline-flex; align-items: center; }
html[data-ui="enhanced"] .routing-panel { padding: 0; }
html[data-ui="enhanced"] :is(.time-badge,.request-timeline) { background: var(--semantic-surface-raised); border: var(--border-width) solid var(--semantic-border-default); color: var(--semantic-text-secondary); padding: var(--space-4); border-radius: var(--radius-control); }
html[data-ui="enhanced"] .request-timeline strong { color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .form-bottom { padding: 0; margin-block-start: var(--space-6); display: grid; gap: var(--space-6); }
html[data-ui="enhanced"] .attachment-area { min-inline-size: 0; padding: 0; }
html[data-ui="enhanced"] .attachment-heading { color: var(--semantic-text-primary); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .attachment-heading span { color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .upload-zone { min-block-size: var(--size-textarea); padding: var(--space-6); border: var(--border-width) dashed var(--semantic-border-strong); border-radius: var(--radius-control); background: var(--semantic-surface-page); color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .upload-zone:hover { background: var(--semantic-surface-hover); }
html[data-ui="enhanced"] :is(.attachment-list span,.attachment-downloads a) { max-inline-size: 100%; overflow-wrap: anywhere; color: var(--semantic-text-link); }
html[data-ui="enhanced"] :is(.form-actions,.modal>footer,.mail-compose-actions) { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-start; }
html[data-ui="enhanced"] :is(.btn,.login-submit,.mail-compose-button) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--size-target); block-size: auto; padding: var(--space-2) var(--space-5); border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-control); color: var(--semantic-text-primary); background: var(--semantic-action-secondary); box-shadow: none; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); line-height: var(--font-line-control); white-space: normal; }
html[data-ui="enhanced"] :is(.btn:hover,.btn.info:hover,.btn.reset:hover,.btn.outline:hover) { background: var(--semantic-surface-hover); color: var(--semantic-text-primary); }
html[data-ui="enhanced"] :is(.btn.primary,.login-submit,.mail-compose-button) { background: var(--semantic-action-primary); border-color: var(--semantic-action-primary); color: var(--semantic-text-on-action); }
html[data-ui="enhanced"] :is(.btn.primary:hover,.login-submit:hover,.mail-compose-button:hover,.new-task:hover) { background: var(--semantic-action-primary-hover); border-color: var(--semantic-action-primary-hover); color: var(--semantic-text-on-action); }
html[data-ui="enhanced"] :is(.btn.primary:active,.login-submit:active,.mail-compose-button:active,.new-task:active) { background: var(--semantic-action-primary-active); }
html[data-ui="enhanced"] .btn.danger-btn { color: var(--semantic-text-on-action); background: var(--semantic-action-destructive); border-color: var(--semantic-action-destructive); }
html[data-ui="enhanced"] .btn.danger-btn:hover { background: var(--semantic-action-destructive-hover); border-color: var(--semantic-action-destructive-hover); }
html[data-ui="enhanced"] .btn.small { min-block-size: var(--size-target); font-size: var(--font-size-small); }
html[data-ui="enhanced"] :is(.icon-button,.mail-icon-action,.pagination button,.stars button) { min-inline-size: var(--size-target); min-block-size: var(--size-target); inline-size: auto; block-size: auto; border-radius: var(--radius-control); color: var(--semantic-text-secondary); background: transparent; }
html[data-ui="enhanced"] :is(.icon-button,.mail-icon-action,.pagination button,.stars button):hover { color: var(--semantic-text-link); background: var(--semantic-surface-hover); }
html[data-ui="enhanced"] :is(.icon-button.red,.mail-icon-action.danger,.repeatable-remove) { color: var(--semantic-action-destructive); }
html[data-ui="enhanced"] :is(.icon-button.red,.mail-icon-action.danger):hover { color: var(--semantic-action-destructive); background: var(--semantic-status-error-surface); }
html[data-ui="enhanced"] :is(.text-button,.record-link) { color: var(--semantic-text-link); }
html[data-ui="enhanced"] :is(.text-button:hover,.record-link:hover) { text-decoration: underline; }
html[data-ui="enhanced"] :is(.filter-toggle,.list-tools,.table-controls,.table-footer) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .list-tools { margin-inline-start: auto; }
html[data-ui="enhanced"] .filter-panel { padding: var(--space-4); background: var(--semantic-surface-page); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-control); gap: var(--space-4); }
html[data-ui="enhanced"] .filter-panel label { color: var(--semantic-text-primary); min-inline-size: 0; flex: 1 1 100%; }
html[data-ui="enhanced"] .table-controls { margin-block-end: var(--space-4); }
html[data-ui="enhanced"] .table-search { inline-size: 100%; min-inline-size: 0; margin-inline-start: 0; }
html[data-ui="enhanced"] .table-size { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
html[data-ui="enhanced"] .table-scroll { inline-size: 100%; max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-control); }
html[data-ui="enhanced"] .data-table { min-inline-size: var(--size-table); inline-size: 100%; border-collapse: collapse; color: var(--semantic-text-primary); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .data-table thead { background: var(--semantic-surface-raised); color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .data-table th { border: 0; border-bottom: var(--border-width) solid var(--semantic-border-strong); padding: var(--space-2) var(--space-3); block-size: auto; font-weight: var(--font-weight-bold); }
html[data-ui="enhanced"] .data-table th button { min-block-size: var(--size-target); padding: var(--space-2) 0; font-size: inherit; gap: var(--space-3); }
html[data-ui="enhanced"] .sort-indicator { color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .data-table td { max-inline-size: var(--size-table-cell); padding: var(--space-3); border: 0; border-bottom: var(--border-width) solid var(--semantic-border-default); white-space: normal; overflow-wrap: anywhere; vertical-align: middle; }
html[data-ui="enhanced"] :is(.data-table td,.data-table td span:not(.status-badge)) { color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .data-table tbody tr:nth-child(even) { background: var(--semantic-surface-card); }
html[data-ui="enhanced"] .data-table tbody tr:hover { background: var(--semantic-surface-hover); }
html[data-ui="enhanced"] .row-actions { display: flex; gap: var(--space-1); }
html[data-ui="enhanced"] .row-actions .icon-button { min-inline-size: var(--size-target); min-block-size: var(--size-target); }
html[data-ui="enhanced"] .table-footer { margin-block-start: var(--space-4); justify-content: space-between; font-size: var(--font-size-small); }
html[data-ui="enhanced"] .pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); }
html[data-ui="enhanced"] .pagination button { border: var(--border-width) solid var(--semantic-border-default); }
html[data-ui="enhanced"] .pagination button.active { color: var(--semantic-text-link); background: var(--semantic-surface-selected); border-color: var(--semantic-border-focus); font-weight: var(--font-weight-bold); }
html[data-ui="enhanced"] :is(.status-badge,.status-badge.complete,.status-badge.danger) { display: inline-flex; gap: var(--space-1); align-items: center; padding: var(--space-1) var(--space-3); border: 0; border-radius: var(--radius-pill); color: var(--semantic-text-link); background: var(--semantic-surface-selected); font-size: var(--font-size-caption); white-space: normal; }
html[data-ui="enhanced"] .status-badge.complete { color: var(--semantic-status-success); background: var(--semantic-status-success-surface); }
html[data-ui="enhanced"] .status-badge.danger { color: var(--semantic-status-error); background: var(--semantic-status-error-surface); }
html[data-ui="enhanced"] :is(.empty-state,.empty-table) { padding: var(--space-12) var(--space-4); color: var(--semantic-text-secondary); }

/* Dialogs and auxiliary screens share the same register typography. */
html[data-ui="enhanced"] .modal-overlay { padding: var(--space-3); background: var(--semantic-surface-overlay); backdrop-filter: none; }
html[data-ui="enhanced"] .modal { inline-size: var(--size-modal); max-inline-size: 100%; max-block-size: calc(100dvh - var(--space-6)); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-dialog); background: var(--semantic-surface-card); box-shadow: var(--shadow-overlay); }
html[data-ui="enhanced"] :is(.modal>header,.modal>footer) { padding: var(--space-4) var(--space-5); border-color: var(--semantic-border-default); }
html[data-ui="enhanced"] .modal h2 { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .modal-body { padding: var(--space-5); color: var(--semantic-text-primary); font-size: var(--font-size-body); line-height: var(--font-line-body); }
html[data-ui="enhanced"] :is(.modal-body p,.modal-body dd) { overflow-wrap: anywhere; }
html[data-ui="enhanced"] .toast { inset-inline: var(--space-4); inset-block-end: var(--space-4); inline-size: auto; max-inline-size: var(--size-login-form); margin-inline: auto; transform: none; border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-card); padding: var(--space-4); background: var(--semantic-surface-card); color: var(--semantic-text-primary); box-shadow: var(--shadow-overlay); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .toast.error { background: var(--semantic-status-error-surface); color: var(--semantic-status-error); border-color: var(--semantic-status-error); }
html[data-ui="enhanced"] :is(.notification-row,.profile-detail,.document-row) { color: var(--semantic-text-primary); border-color: var(--semantic-border-default); }
html[data-ui="enhanced"] .credentials-box { background: var(--semantic-surface-raised); color: var(--semantic-text-primary); border-radius: var(--radius-control); }
html[data-ui="enhanced"] .repeatable-row { display: flex; flex-wrap: wrap; gap: var(--space-3); min-inline-size: 0; }
html[data-ui="enhanced"] .repeatable-row>* { min-inline-size: 0; }
html[data-ui="enhanced"] .screen-directory { display: grid; gap: var(--space-3); }
html[data-ui="enhanced"] .screen-directory :is(a,button) { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--size-target); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-control); background: var(--semantic-surface-card); color: var(--semantic-text-primary); text-align: start; gap: var(--space-3); }
html[data-ui="enhanced"] .screen-directory :is(a,button):hover { background: var(--semantic-surface-hover); color: var(--semantic-text-link); }
html[data-ui="enhanced"] .screen-directory small { color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .screen-directory label { font-weight: var(--font-weight-medium); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .screen-directory input { inline-size: 100%; min-block-size: var(--size-target); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-control); background: var(--semantic-surface-card); color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .screen-directory :is(#screen-results,a>span) { display: grid; gap: var(--space-2); min-inline-size: 0; }
html[data-ui="enhanced"] .screen-directory a>span { flex: 1; }
html[data-ui="enhanced"] .citizen-workspace { min-inline-size: 0; }
html[data-ui="enhanced"] .citizen-workspace-intro { margin-block-end: var(--space-5); color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .citizen-report-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-5); }
html[data-ui="enhanced"] .citizen-report-tabs button { min-block-size: var(--size-target); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-control); background: var(--semantic-surface-card); color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .citizen-report-tabs button[aria-selected="true"] { background: var(--semantic-surface-selected); color: var(--semantic-text-link); border-color: var(--semantic-border-focus); font-weight: var(--font-weight-bold); }
html[data-ui="enhanced"] .citizen-report-status { display: block; color: var(--semantic-text-secondary); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .citizen-details { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-3); }
html[data-ui="enhanced"] .citizen-details button { min-block-size: var(--size-target); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-control); background: var(--semantic-surface-page); color: var(--semantic-text-primary); text-align: start; }
html[data-ui="enhanced"] .citizen-details button:hover { color: var(--semantic-text-link); background: var(--semantic-surface-hover); }
html[data-ui="enhanced"] .citizen-details button b { margin-inline-start: auto; color: var(--semantic-text-link); }

/* Mail is one continuous workspace; list and reading pane separate on wide screens. */
html[data-ui="enhanced"] .mailbox { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; min-inline-size: 0; border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-card); overflow: hidden; background: var(--semantic-surface-card); box-shadow: none; }
html[data-ui="enhanced"] .mail-sidebar { min-inline-size: 0; padding: var(--space-4); background: var(--semantic-surface-page); border: 0; border-bottom: var(--border-width) solid var(--semantic-border-default); }
html[data-ui="enhanced"] .mail-sidebar nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
html[data-ui="enhanced"] .mail-folder { min-block-size: var(--size-target); inline-size: auto; padding: var(--space-2) var(--space-3); gap: var(--space-2); color: var(--semantic-text-secondary); border: 0; border-radius: var(--radius-control); }
html[data-ui="enhanced"] .mail-folder.active { color: var(--semantic-text-link); background: var(--semantic-surface-selected); }
html[data-ui="enhanced"] .mail-folder.active .icon { color: inherit; }
html[data-ui="enhanced"] .mail-sidebar-note { color: var(--semantic-text-secondary); font-size: var(--font-size-caption); }
html[data-ui="enhanced"] .mail-main { min-inline-size: 0; }
html[data-ui="enhanced"] .mail-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); border-color: var(--semantic-border-default); }
html[data-ui="enhanced"] .mail-toolbar h1 { color: var(--semantic-text-primary); font-size: var(--font-size-title); margin: 0; }
html[data-ui="enhanced"] .mail-search { inline-size: 100%; border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-control); }
html[data-ui="enhanced"] .mail-search input { min-block-size: var(--size-target); inline-size: 100%; color: var(--semantic-text-primary); padding-inline: var(--space-3); }
html[data-ui="enhanced"] .mail-search button { min-inline-size: var(--size-target); min-block-size: var(--size-target); color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .mail-columns { display: grid; grid-template-columns: minmax(0,1fr); min-inline-size: 0; }
html[data-ui="enhanced"] .mail-list { min-inline-size: 0; max-block-size: var(--size-message); overflow: auto; border: 0; border-bottom: var(--border-width) solid var(--semantic-border-default); }
html[data-ui="enhanced"] .mail-list-row { min-inline-size: 0; padding: var(--space-4); border-color: var(--semantic-border-default); background: var(--semantic-surface-card); gap: var(--space-2); }
html[data-ui="enhanced"] .mail-list-row.selected { background: var(--semantic-surface-selected); border-color: var(--semantic-border-default); }
html[data-ui="enhanced"] .mail-select { min-inline-size: 0; padding: 0; color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .mail-row-main :is(strong,b,small) { white-space: normal; overflow-wrap: anywhere; color: var(--semantic-text-primary); }
html[data-ui="enhanced"] :is(.mail-row-date,.mail-row-main small,.mail-message-meta span,.mail-message-meta time) { color: var(--semantic-text-secondary); font-size: var(--font-size-caption); }
html[data-ui="enhanced"] .mail-star { min-inline-size: var(--size-target); min-block-size: var(--size-target); color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .mail-star.active { color: var(--semantic-status-warning); }
html[data-ui="enhanced"] .mail-reading-pane { min-inline-size: 0; min-block-size: var(--size-textarea); border: 0; }
html[data-ui="enhanced"] .mail-reading-toolbar { padding: var(--space-3); border-color: var(--semantic-border-default); flex-wrap: wrap; }
html[data-ui="enhanced"] .mail-message { padding: var(--space-5); }
html[data-ui="enhanced"] .mail-message h2 { color: var(--semantic-text-primary); font-size: var(--font-size-title); line-height: var(--font-line-heading); overflow-wrap: anywhere; }
html[data-ui="enhanced"] .mail-message-meta { flex-wrap: wrap; gap: var(--space-3); }
html[data-ui="enhanced"] .mail-message-meta strong { color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .mail-message-body { color: var(--semantic-text-primary); font-size: var(--font-size-body); line-height: var(--font-line-body); overflow-wrap: anywhere; }
html[data-ui="enhanced"] .mail-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2); border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-control); background: var(--semantic-surface-page); }
html[data-ui="enhanced"] .mail-editor-toolbar button { min-inline-size: var(--size-target); min-block-size: var(--size-target); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-control); background: var(--semantic-surface-card); color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .mail-editor-toolbar button:hover { background: var(--semantic-surface-hover); }
html[data-ui="enhanced"] .mail-editor-toolbar button[aria-pressed="true"] { color: var(--semantic-text-link); background: var(--semantic-surface-selected); border-color: var(--semantic-border-focus); }
html[data-ui="enhanced"] .mail-rich-editor { min-inline-size: 0; min-block-size: var(--size-textarea); max-inline-size: 100%; padding: var(--space-4); border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-control); background: var(--semantic-surface-card); color: var(--semantic-text-primary); line-height: var(--font-line-body); overflow-wrap: anywhere; }
html[data-ui="enhanced"] .mail-rich-editor:focus { border-color: var(--semantic-border-focus); box-shadow: var(--shadow-focus); }
html[data-ui="enhanced"] .mail-message-attachments { display: flex; flex-wrap: wrap; gap: var(--space-3); }
html[data-ui="enhanced"] .mail-message-attachments button { min-block-size: var(--size-target); max-inline-size: 100%; color: var(--semantic-text-link); background: var(--semantic-surface-raised); border-radius: var(--radius-control); overflow-wrap: anywhere; }
html[data-ui="enhanced"] :is(.mail-list-empty,.mail-reading-empty) { min-block-size: var(--size-textarea); padding: var(--space-8); color: var(--semantic-text-secondary); }

/* A clearly labeled login with the supplied archive image as the sole visual anchor. */
html[data-ui="enhanced"] .login-page { display: grid; grid-template-columns: minmax(0,1fr); min-block-size: 100dvh; background: var(--semantic-surface-card); }
html[data-ui="enhanced"] .login-side { direction: rtl; padding: var(--space-8) var(--space-5); min-inline-size: 0; justify-content: center; }
html[data-ui="enhanced"] .login-logo { inline-size: var(--size-login-logo); max-inline-size: 100%; block-size: auto; }
html[data-ui="enhanced"] .login-side h1 { margin: var(--space-8) 0 var(--space-6); font-family: var(--font-family); font-size: var(--font-size-display); font-weight: var(--font-weight-bold); line-height: var(--font-line-heading); white-space: normal; max-inline-size: 19ch; text-align: start; color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .login-form { inline-size: 100%; max-inline-size: var(--size-login-form); }
html[data-ui="enhanced"] .login-form>label.sr-only { position: static; display: block; inline-size: auto; block-size: auto; margin: 0 0 var(--space-2); padding: 0; overflow: visible; clip: auto; white-space: normal; font-weight: var(--font-weight-medium); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .login-form>input { display: block; inline-size: 100%; block-size: var(--size-target); min-block-size: var(--size-target); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--semantic-border-strong); border-radius: var(--radius-control); margin-block-end: var(--space-5); background: var(--semantic-surface-card); color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .login-form>input::placeholder { color: var(--semantic-text-secondary); }
html[data-ui="enhanced"] .login-options { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin: var(--space-2) 0 var(--space-5); color: var(--semantic-text-secondary); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .login-options label { min-block-size: var(--size-target); display: inline-flex; align-items: center; }
html[data-ui="enhanced"] .login-options .text-button { min-block-size: var(--size-target); font-size: var(--font-size-small); line-height: var(--font-line-body); text-align: start; }
html[data-ui="enhanced"] .login-submit { inline-size: 100%; margin: 0; }
html[data-ui="enhanced"] .password-toggle { min-block-size: var(--size-target); margin-block: calc(-1 * var(--space-3)) var(--space-3); padding: var(--space-2) 0; border: 0; background: transparent; color: var(--semantic-text-link); font-size: var(--font-size-small); text-align: start; }
html[data-ui="enhanced"] .demo-credentials { inline-size: 100%; max-inline-size: var(--size-login-form); margin-block-start: var(--space-6); padding: var(--space-4); border: var(--border-width) solid var(--semantic-border-default); border-radius: var(--radius-control); background: var(--semantic-surface-page); color: var(--semantic-text-secondary); font-size: var(--font-size-small); }
html[data-ui="enhanced"] .demo-credentials span:last-child { color: var(--semantic-text-primary); }
html[data-ui="enhanced"] .login-visual { display: none; }

@media (min-width: 42rem) {
  html[data-ui="enhanced"] .workspace { padding: var(--space-8) var(--space-6) var(--space-12); }
  html[data-ui="enhanced"] .site-header { padding: var(--space-4) var(--space-6); }
  html[data-ui="enhanced"] :is(.fields-grid,.citizen-sections .fields-grid,.request-layout .fields-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-ui="enhanced"] .filter-panel label { flex-basis: calc(50% - var(--space-4)); }
  html[data-ui="enhanced"] .table-search { inline-size: auto; margin-inline-start: auto; }
  html[data-ui="enhanced"] .overview-metrics { grid-template-columns: minmax(0,1fr); }
  html[data-ui="enhanced"] .section-card { padding: var(--space-6); }
  html[data-ui="enhanced"] .citizen-details { grid-template-columns: repeat(3,minmax(0,1fr)); }
  html[data-ui="enhanced"] .footer { flex-direction: row; justify-content: space-between; align-items: center; padding-inline: var(--space-6); }
}
@media (min-width: 64rem) {
  html[data-ui="enhanced"] .site-header { display: flex; flex-wrap: wrap; gap: var(--space-8); }
  html[data-ui="enhanced"] .brand { flex: none; inline-size: var(--size-logo); }
  html[data-ui="enhanced"] .header-tools { order: 3; }
  html[data-ui="enhanced"] .profile-button span { display: inline; font-size: var(--font-size-small); }
  html[data-ui="enhanced"] .global-search { order: 2; inline-size: auto; flex: 1; max-inline-size: var(--size-message); margin-inline-start: auto; }
  html[data-ui="enhanced"] .screen-finder { order: 2; inline-size: auto; flex: 1; max-inline-size: var(--size-message); margin-inline-start: auto; }
  html[data-ui="enhanced"] .mobile-menu { display: none; }
  html[data-ui="enhanced"] .main-nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--space-2) var(--space-6); gap: var(--space-1); }
  html[data-ui="enhanced"] .home-link { inline-size: var(--size-target); justify-content: center; }
  html[data-ui="enhanced"] .nav-toggle { inline-size: auto; }
  html[data-ui="enhanced"] .nav-dropdown { position: absolute; inline-size: var(--size-login-form); min-inline-size: var(--size-rail); max-inline-size: calc(100vw - var(--space-12)); inset-inline-start: 0; inset-block-start: calc(100% + var(--space-2)); box-shadow: var(--shadow-overlay); }
  html[data-ui="enhanced"] .workspace { padding-inline: var(--space-10); }
  html[data-ui="enhanced"] .overview-layout { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: center; gap: var(--space-10); padding: var(--space-8); }
  html[data-ui="enhanced"] .dashboard-layout { grid-template-columns: var(--size-rail) minmax(0,1fr); }
  html[data-ui="enhanced"] .task-sidebar { display: block; block-size: fit-content; }
  html[data-ui="enhanced"] .task-tab { inline-size: 100%; margin-block-end: var(--space-1); }
  html[data-ui="enhanced"] .request-layout { grid-template-columns: minmax(0,1fr) var(--size-rail); align-items: start; }
  html[data-ui="enhanced"] .routing-fields { grid-template-columns: minmax(0,1fr); }
  html[data-ui="enhanced"] .mailbox { grid-template-columns: var(--size-rail) minmax(0,1fr); }
  html[data-ui="enhanced"] .mail-sidebar { border: 0; border-inline-end: var(--border-width) solid var(--semantic-border-default); }
  html[data-ui="enhanced"] .mail-sidebar nav { display: grid; }
  html[data-ui="enhanced"] .mail-folder { inline-size: 100%; }
  html[data-ui="enhanced"] .mail-search { inline-size: var(--size-login-form); margin-inline-start: auto; }
  html[data-ui="enhanced"] .login-page { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  html[data-ui="enhanced"] .login-side { padding: var(--space-12) var(--space-10); }
  html[data-ui="enhanced"] .login-visual { display: flex; min-inline-size: 0; margin: var(--space-5); border-radius: var(--radius-dialog); overflow: hidden; }
  html[data-ui="enhanced"] .login-visual h2 { font-size: var(--font-size-display); line-height: var(--font-line-heading); }
  html[data-ui="enhanced"] .login-visual p { font-size: var(--font-size-title); }
}
@media (min-width: 80rem) {
  html[data-ui="enhanced"] .mail-columns { grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); }
  html[data-ui="enhanced"] .mail-list { max-block-size: none; border: 0; border-inline-end: var(--border-width) solid var(--semantic-border-default); }
  html[data-ui="enhanced"] .form-bottom { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="enhanced"] *, html[data-ui="enhanced"] *::before, html[data-ui="enhanced"] *::after { animation: none !important; transition-duration: var(--motion-instant) !important; scroll-behavior: auto !important; }
}
@media print {
  html[data-ui="enhanced"] .workspace { padding: 0; }
  html[data-ui="enhanced"] :is(.overview-layout,.workspace-heading,.screen-directory,.screen-finder,.task-list-heading) { display: none; }
}