/* Taska Operational Ledger — global UI contract. Loaded after page styles. */
:root {
  color-scheme: light;
  --ui-canvas: #f5f7fa;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #eef2f6;
  --ui-surface-hover: #e8f1fc;
  --ui-ink: #172033;
  --ui-ink-muted: #566176;
  --ui-border: #d7dee8;
  --ui-border-strong: #aeb9c8;
  --ui-primary: #0b63ce;
  --ui-primary-hover: #084fad;
  --ui-primary-soft: #e8f1fc;
  --ui-success: #176b4d;
  --ui-warning: #8a5200;
  --ui-danger: #b42318;
  --ui-focus: #155eef;
  --ui-overlay: rgba(23, 32, 51, 0.52);
  --ui-font: "IBM Plex Sans", "Segoe UI", sans-serif;
  --ui-font-data: "IBM Plex Mono", Consolas, monospace;
  --ui-radius-control: 8px;
  --ui-radius-panel: 12px;
  --ui-radius-dialog: 14px;
  --ui-shadow-overlay: 0 18px 48px rgba(23, 32, 51, 0.16);
  --ui-duration-fast: 120ms;
  --ui-duration-state: 180ms;
  --ui-duration-overlay: 240ms;
  --ui-ease: cubic-bezier(0.2, 0, 0, 1);
  --ui-sidebar-width: 240px;
  --ui-content-gutter: clamp(16px, 2vw, 32px);
  --ui-focus-ring: 0 0 0 3px rgba(21, 94, 239, 0.28);

  /* Compatibility aliases used by existing page styles and Shoelace. */
  --bg: var(--ui-canvas);
  --surface: var(--ui-surface);
  --surface-alt: var(--ui-surface-subtle);
  --text: var(--ui-ink);
  --muted: var(--ui-ink-muted);
  --primary: var(--ui-primary);
  --primary-strong: var(--ui-primary-hover);
  --primary-soft: var(--ui-primary-soft);
  --accent: var(--ui-ink);
  --danger: var(--ui-danger);
  --border: var(--ui-border);
  --font-sans: var(--ui-font);
  --font-display: var(--ui-font);
  --radius-ui: var(--ui-radius-control);
  --radius-sm: var(--ui-radius-control);
  --radius-md: var(--ui-radius-panel);
  --radius-lg: var(--ui-radius-dialog);
  --shadow: var(--ui-shadow-overlay);
  --shadow-soft: 0 1px 2px rgba(23, 32, 51, 0.05);
  --sl-font-sans: var(--ui-font);
  --sl-color-primary-50: #f2f7fe;
  --sl-color-primary-100: #e8f1fc;
  --sl-color-primary-200: #c9ddf6;
  --sl-color-primary-300: #9fc3ee;
  --sl-color-primary-400: #66a0e3;
  --sl-color-primary-500: #2f7bd4;
  --sl-color-primary-600: #0b63ce;
  --sl-color-primary-700: #084fad;
  --sl-color-primary-800: #0b4288;
  --sl-color-primary-900: #12396d;
  --sl-input-border-color: var(--ui-border-strong);
  --sl-input-border-color-hover: #8796aa;
  --sl-input-focus-ring-color: rgba(21, 94, 239, 0.28);
  --sl-input-border-radius-medium: var(--ui-radius-control);
  --sl-panel-border-color: var(--ui-border);
  --sl-focus-ring-color: rgba(21, 94, 239, 0.3);
}

html {
  min-width: 0;
  min-height: 100%;
  scroll-padding-block: 72px 24px;
  background: var(--ui-canvas);
}

body {
  min-width: 0;
  min-height: 100dvh;
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1.5;
  background: var(--ui-canvas);
  overflow-wrap: break-word;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(h1, h2, h3, h4, h5, h6) {
  margin-block: 0;
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

:where(p, li, td, th, label, small, strong, span, a) {
  min-inline-size: 0;
}

:where(code, kbd, samp, time, [data-task-key], [class*="__key"], [class*="-code"], [class*="__count"]) {
  font-variant-numeric: tabular-nums;
}

:where(code, kbd, samp, [data-task-key], [class*="__key"]) {
  font-family: var(--ui-font-data);
}

img,
svg,
canvas,
video {
  max-inline-size: 100%;
}

button,
[role="button"],
a[href],
sl-button,
sl-menu-item,
[tabindex]:not([tabindex="-1"]) {
  touch-action: manipulation;
}

button,
[role="button"],
a[href],
sl-button,
sl-menu-item,
label[for] {
  cursor: pointer;
}

:where(button, a[href], input, select, textarea, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
  box-shadow: var(--ui-focus-ring);
}

:where(sl-button, sl-input, sl-select, sl-textarea, sl-checkbox, sl-radio-button):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
  border-radius: var(--ui-radius-control);
}

:where(button, input, select, textarea):disabled,
:where([aria-disabled="true"], sl-button[disabled], sl-input[disabled], sl-select[disabled]) {
  cursor: not-allowed;
  opacity: 0.52;
}

input,
select,
textarea {
  min-height: 40px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-control);
  color: var(--ui-ink);
  background: var(--ui-surface);
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}

:where(input, select, textarea):focus {
  border-color: var(--ui-focus);
  outline: 2px solid transparent;
  box-shadow: var(--ui-focus-ring);
}

::placeholder {
  color: #718096;
  opacity: 1;
}

::selection {
  color: var(--ui-ink);
  background: #bfdbfe;
}

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: var(--ui-radius-control);
  color: #ffffff;
  background: var(--ui-primary-hover);
  box-shadow: var(--ui-shadow-overlay);
  transform: translateY(-160%);
  transition: transform var(--ui-duration-fast) var(--ui-ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Buttons and Shoelace controls */
.workspace-button::part(base),
.workspace-icon-button::part(base),
sl-button::part(base) {
  min-height: 40px;
  border-radius: var(--ui-radius-control) !important;
  font-family: var(--ui-font);
  font-weight: 500;
  transition:
    color var(--ui-duration-fast) var(--ui-ease),
    border-color var(--ui-duration-fast) var(--ui-ease),
    background-color var(--ui-duration-fast) var(--ui-ease),
    box-shadow var(--ui-duration-fast) var(--ui-ease);
}

sl-button[variant="primary"]::part(base) {
  border-color: var(--ui-primary);
  color: #ffffff;
  background: var(--ui-primary);
  box-shadow: none;
}

sl-button[variant="primary"]:hover::part(base) {
  border-color: var(--ui-primary-hover);
  background: var(--ui-primary-hover);
}

sl-button[variant="default"]::part(base),
sl-button[variant="text"]::part(base) {
  border-color: var(--ui-border);
  color: var(--ui-ink);
  background: var(--ui-surface);
}

sl-button[variant="default"]:hover::part(base),
sl-button[variant="text"]:hover::part(base) {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-subtle);
}

.workspace-icon-button::part(base) {
  min-width: 40px;
  padding-inline: 8px;
}

.material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

/* Workspace shell and signature work rail */
.workspace-shell {
  grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr);
  min-width: 0;
  min-height: 100dvh;
  background: var(--ui-canvas);
}

.workspace-sidebar {
  z-index: 40;
  width: var(--ui-sidebar-width);
  min-width: 0;
  min-height: 100dvh;
  padding: 16px 12px 12px;
  border-inline-end: 1px solid var(--ui-border);
  color: var(--ui-ink);
  background: var(--ui-surface);
}

.workspace-sidebar__top {
  min-height: 48px;
  margin-block-end: 12px;
  padding-inline: 8px 4px;
}

.workspace-brand {
  border-radius: var(--ui-radius-control);
}

.workspace-brand__mark {
  width: 32px;
  height: 32px;
  border-radius: var(--ui-radius-control);
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

.workspace-brand__copy strong {
  color: var(--ui-ink);
  font-size: 14px;
  font-weight: 600;
}

.workspace-brand__subtitle,
.workspace-profile-link__meta small {
  color: var(--ui-ink-muted);
}

.workspace-nav__item {
  position: relative;
}

.workspace-nav__link {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  color: #3f4b61;
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 500;
  text-align: start;
  background: transparent;
  transition: color var(--ui-duration-fast) var(--ui-ease), background-color var(--ui-duration-fast) var(--ui-ease);
}

.workspace-nav__link:hover {
  color: var(--ui-ink);
  background: var(--ui-surface-subtle);
}

.workspace-nav__link.is-current,
.workspace-nav__item.is-current > .workspace-nav__link,
.workspace-profile-link.is-current {
  color: var(--ui-primary-hover);
  background: var(--ui-primary-soft);
  font-weight: 600;
}

.workspace-nav__link.is-current::before,
.workspace-nav__item.is-current > .workspace-nav__link::before,
.workspace-profile-link.is-current::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--ui-primary);
}

.workspace-nav__item.is-active-branch:not(.is-current) > .workspace-nav__link {
  color: var(--ui-ink);
  background: #f8fafc;
}

.workspace-nav__icon,
.workspace-nav__chevron {
  color: currentColor;
}

.workspace-nav__chevron {
  margin-inline-start: auto;
}

.workspace-profile-link {
  position: relative;
  min-height: 52px;
  padding: 7px 10px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
}

.workspace-language-trigger::part(base) {
  min-height: 44px;
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

.workspace-main {
  min-width: 0;
  min-height: 100dvh;
  color: var(--ui-ink);
  background: var(--ui-canvas);
}

.workspace-header {
  min-width: 0;
  min-height: 68px;
  padding: 14px var(--ui-content-gutter);
  border-block-end: 1px solid var(--ui-border);
  background: rgba(255, 255, 255, 0.96);
}

.workspace-page-title {
  color: var(--ui-ink);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.25;
}

.workspace-page-subtitle {
  margin-block-start: 2px;
  color: var(--ui-ink-muted);
  font-size: 13px;
}

.workspace-content {
  min-width: 0;
  padding: var(--ui-content-gutter);
  background: var(--ui-canvas);
}

.workspace-content--documents {
  padding: 0;
}

.workspace-content-frame,
.workspace-content-frame--documents {
  min-width: 0;
}

.workspace-content-frame--surface,
.page-panel,
.dashboard-card,
.profile-page__surface {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  box-shadow: none;
}

/* Tables, data surfaces, and empty states */
:where(.dashboard-table-wrap, .directories-table-wrap, .tasks-table-wrap, .permission-matrix-table-wrap, .databases-results-wrap) {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

:where(table) {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ui-ink);
  font-variant-numeric: tabular-nums;
}

:where(th) {
  color: var(--ui-ink-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.015em;
  background: var(--ui-surface-subtle);
}

:where(th, td) {
  min-height: 40px;
  border-color: var(--ui-border);
}

:where(tbody tr) {
  transition: background-color var(--ui-duration-fast) var(--ui-ease);
}

:where(tbody tr:hover) {
  background: #f8fafc;
}

:where([class*="empty"], [data-empty-state]) {
  color: var(--ui-ink-muted);
}

/* Dialogs and forms */
.workspace-dialog,
.app-ui-dialog {
  --width: min(920px, calc(100vw - 32px));
}

.workspace-dialog::part(panel),
.app-ui-dialog::part(panel) {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-dialog) !important;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-overlay);
}

.workspace-dialog::part(overlay),
.app-ui-dialog::part(overlay) {
  background: var(--ui-overlay);
  backdrop-filter: blur(2px);
}

.workspace-dialog .workspace-dialog__surface,
.workspace-dialog .workspace-dialog__header,
.workspace-dialog .workspace-dialog__body,
.workspace-dialog .workspace-dialog__actions {
  color: var(--ui-ink);
  background: var(--ui-surface);
}

.workspace-dialog .workspace-dialog__header,
.workspace-dialog .workspace-dialog__actions {
  border-color: var(--ui-border);
}

.workspace-dialog .workspace-tabs {
  gap: 4px;
  border-block-end: 1px solid var(--ui-border);
  background: var(--ui-surface-subtle);
}

.workspace-dialog .workspace-tab::part(base) {
  min-height: 40px;
  border-radius: var(--ui-radius-control) !important;
}

.workspace-dialog .workspace-tab.is-active::part(base) {
  color: var(--ui-primary-hover);
  background: var(--ui-surface);
  box-shadow: inset 0 -2px var(--ui-primary);
}

.workspace-dialog__scroll {
  scroll-padding-block: 16px;
}

:where(.workspace-field, .task-sprints-form__field, .databases-field, .projects-field) > :where(span, label):first-child {
  color: var(--ui-ink-muted);
  font-size: 13px;
  font-weight: 500;
}

.avatar-dropzone__surface {
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-panel) !important;
  background: var(--ui-surface-subtle);
}

.avatar-dropzone:focus-within .avatar-dropzone__surface {
  border-color: var(--ui-focus);
  box-shadow: var(--ui-focus-ring);
}

/* Page-level coherence without replacing feature layouts. */
.auth-shell--brand,
.home-shell,
.shared-document-shell {
  background: var(--ui-canvas);
}

.auth-card,
.home-card,
.shared-document-page {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  box-shadow: none;
}

.auth-card h1,
.home-card h1 {
  font-family: var(--ui-font);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 600;
}

.auth-card__eyebrow,
.workspace-eyebrow {
  color: var(--ui-primary-hover);
  font-family: var(--ui-font-data);
  letter-spacing: 0.08em;
}

.auth-form button,
.home-card button {
  min-height: 44px;
  border: 1px solid var(--ui-primary);
  border-radius: var(--ui-radius-control);
  color: #ffffff;
  background: var(--ui-primary);
  transition: background-color var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
}

.auth-form button:hover,
.home-card button:hover {
  border-color: var(--ui-primary-hover);
  background: var(--ui-primary-hover);
}

.auth-error,
[role="alert"] {
  color: #8f1d14;
}

.dashboard-grid {
  gap: 16px;
}

.dashboard-card {
  padding: 18px;
}

.tasks-footer-bar {
  border-block-start: 1px solid var(--ui-border);
  background: rgba(255, 255, 255, 0.97);
}

.tasks-list-toolbar,
.task-board-toolbar {
  border-block-end-color: var(--ui-border);
  background: var(--ui-surface);
}

.task-board__card,
.tasks-board-card,
.tasks-sprint-card,
.directory-records__row,
.projects-group__title {
  border-color: var(--ui-border);
  box-shadow: none;
}

:where(.task-board__card, .tasks-board-card, .directory-records__row, .projects-group__title):hover {
  border-color: var(--ui-border-strong);
  background: #f8fafc;
}

.documents-shell,
.projects-shell,
.databases-shell,
.tasks-shell,
.task-board-page,
.task-sprints-page,
.profile-page {
  min-width: 0;
  color: var(--ui-ink);
  background: var(--ui-canvas);
}

:where(.documents-tree-panel, .projects-tree-panel, .databases-tree-panel) {
  border-inline-end-color: var(--ui-border);
  background: var(--ui-surface);
}

:where(.documents-editor-panel, .projects-main-panel, .databases-main-panel) {
  min-width: 0;
  background: var(--ui-surface);
}

/* Long translated content and user-generated tokens must shrink safely. */
:where(
  .workspace-header__title-wrap,
  .workspace-header__actions,
  .workspace-profile-link__meta,
  .tasks-dialog__main,
  .tasks-dialog__content,
  .documents-editor-panel,
  .projects-main-panel,
  .databases-main-panel,
  .task-sprints-page__main,
  .task-board-scroll
) {
  min-width: 0;
}

:where(.documents-content, .shared-document-content, .tasks-editor, .tasks-comment-content, td, .workspace-page-title) {
  overflow-wrap: anywhere;
}

.directories-table th:first-child,
.directories-table td:first-child {
  width: 112px;
  white-space: nowrap;
}

.directories-table th:nth-child(2),
.directories-table td:nth-child(2) {
  min-width: 220px;
}

.directories-table__name {
  white-space: nowrap;
}

.workspace-header--workbench {
  display: none;
}

.workspace-header__workbench-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--ui-ink);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  :root {
    --ui-content-gutter: 20px;
  }

  .workspace-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, calc(100vw - 48px));
    max-width: 100%;
    transform: translateX(-104%);
    transition: transform var(--ui-duration-overlay) var(--ui-ease);
    box-shadow: var(--ui-shadow-overlay);
  }

  body.sidebar-open .workspace-sidebar {
    transform: translateX(0);
  }

  .workspace-backdrop {
    z-index: 30;
    background: var(--ui-overlay);
  }

  body.sidebar-open .workspace-backdrop {
    display: block;
  }

  .workspace-main {
    grid-column: 1;
  }

  .workspace-header__mobile {
    display: flex;
  }

  .workspace-header--workbench {
    display: flex;
    min-height: 56px;
    padding: 8px var(--ui-content-gutter);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
  }

  .workspace-header--workbench .workspace-header__mobile {
    width: 100%;
    gap: 12px;
  }

  :where(.documents-shell, .projects-shell, .databases-shell) {
    max-width: 100vw;
  }

  .documents-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(220px, 38vh) minmax(520px, 62vh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .documents-shell > .documents-tree-resizer {
    display: none;
  }

  .documents-tree-panel {
    min-height: 220px;
    border-block-end: 1px solid var(--ui-border);
  }

  .documents-editor-panel {
    min-height: 520px;
  }
}

/* Dialog system — one visual contract without changing feature layouts. */
:where(
  .workspace-dialog,
  .tasks-dialog,
  .app-ui-dialog,
  .documents-export-dialog,
  .documents-tree-export-dialog,
  .documents-export-format-dialog,
  .documents-tree-export-format-dialog,
  .profile-password-dialog
)::part(overlay) {
  background: var(--ui-overlay);
  backdrop-filter: blur(2px);
}

:where(
  .workspace-dialog,
  .tasks-dialog,
  .app-ui-dialog,
  .documents-export-dialog,
  .documents-tree-export-dialog,
  .documents-export-format-dialog,
  .documents-tree-export-format-dialog,
  .profile-password-dialog
)::part(panel) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-dialog) !important;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-overlay);
  overflow: hidden;
}

:where(.workspace-dialog, .tasks-dialog)::part(body),
:where(.documents-export-dialog, .documents-tree-export-dialog)::part(body) {
  padding: 0;
}

:where(.workspace-dialog, .tasks-dialog)::part(footer) {
  padding: 0;
}

/* Shoelace-managed dialog chrome: confirmations, alerts, prompts and password. */
:where(.app-ui-dialog, .profile-password-dialog)::part(header) {
  min-height: 64px;
  padding: 10px 20px;
  border-block-end: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

:where(.app-ui-dialog, .profile-password-dialog)::part(title) {
  padding: 0;
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

:where(.app-ui-dialog, .profile-password-dialog)::part(close-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin-inline-end: -8px;
  border-radius: var(--ui-radius-control);
  color: var(--ui-ink-muted);
}

:where(.app-ui-dialog, .profile-password-dialog)::part(close-button):hover {
  color: var(--ui-ink);
  background: var(--ui-surface-subtle);
}

:where(.app-ui-dialog, .profile-password-dialog)::part(body) {
  padding: 20px;
  color: var(--ui-ink);
  background: var(--ui-surface);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

:where(.app-ui-dialog, .profile-password-dialog)::part(footer) {
  padding: 14px 20px 16px;
  border-block-start: 1px solid var(--ui-border);
  background: var(--ui-surface-subtle);
}

.app-ui-dialog {
  --width: min(520px, calc(100vw - 32px));
}

.app-ui-dialog__message,
.app-ui-dialog__lead,
.app-ui-dialog__list-item {
  color: var(--ui-ink);
  font-size: 14px;
  line-height: 1.55;
}

.app-ui-dialog__message:empty {
  display: none;
}

.app-ui-dialog__structured {
  gap: 12px;
}

.app-ui-dialog__note,
.app-ui-dialog__subnote,
.app-ui-dialog__muted {
  color: var(--ui-ink-muted);
}

.app-ui-dialog__actions,
.workspace-dialog__footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

.app-ui-dialog__actions sl-button::part(base),
.workspace-dialog__footer-actions sl-button::part(base) {
  min-height: 40px;
  padding-inline: 14px;
}

.app-ui-dialog__input {
  width: 100%;
  margin-block-start: 16px;
}

/* Custom workspace dialogs keep their existing dimensions and DOM order. */
.workspace-dialog .workspace-dialog__surface {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: var(--ui-ink);
  background: var(--ui-surface);
}

.workspace-dialog .workspace-dialog__header {
  min-height: 64px;
  padding: 10px 20px;
  border-block-end: 1px solid var(--ui-border);
  color: var(--ui-ink);
  background: var(--ui-surface);
}

.workspace-dialog .workspace-dialog__header h2,
.workspace-dialog .workspace-dialog__header h3,
.workspace-dialog .workspace-dialog__title,
.tasks-wizard__header h2 {
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.workspace-dialog .workspace-dialog__body {
  min-height: 0;
  color: var(--ui-ink);
  background: var(--ui-surface);
  overflow: hidden;
}

.workspace-dialog .workspace-dialog__scroll {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 20px;
}

.workspace-dialog .workspace-dialog__actions,
.workspace-dialog .workspace-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 64px;
  padding: 12px 20px;
  border-block-start: 1px solid var(--ui-border);
  color: var(--ui-ink);
  background: var(--ui-surface-subtle);
}

.workspace-dialog .workspace-dialog__actions sl-button::part(base),
.workspace-dialog .workspace-dialog__footer sl-button::part(base) {
  min-height: 40px;
  padding-inline: 14px;
}

.workspace-dialog .workspace-dialog__header .workspace-icon-button::part(base),
.tasks-dialog__header .workspace-icon-button::part(base),
.tasks-wizard__header .workspace-icon-button::part(base) {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control) !important;
  color: var(--ui-ink-muted);
  background: transparent;
}

.workspace-dialog .workspace-dialog__header .workspace-icon-button:hover::part(base),
.tasks-dialog__header .workspace-icon-button:hover::part(base),
.tasks-wizard__header .workspace-icon-button:hover::part(base) {
  color: var(--ui-ink);
  background: var(--ui-surface-subtle);
}

.workspace-dialog .workspace-tabs {
  padding: 4px 20px;
  border-block-end: 1px solid var(--ui-border);
  border-radius: 0;
  background: var(--ui-surface-subtle);
}

.workspace-dialog .workspace-tab::part(base) {
  min-height: 40px;
  border-radius: var(--ui-radius-control) !important;
  color: var(--ui-ink-muted);
  font-size: 13px;
  font-weight: 500;
}

.workspace-dialog .workspace-tab:hover::part(base) {
  color: var(--ui-ink);
  background: rgba(255, 255, 255, 0.58);
}

.workspace-dialog .workspace-tab.is-active::part(base) {
  color: var(--ui-primary-hover);
  background: var(--ui-surface);
  box-shadow: inset 0 -2px var(--ui-primary);
}

.workspace-dialog :where(.workspace-field, .databases-field) > :where(span, label):first-child,
.workspace-dialog sl-input::part(form-control-label),
.workspace-dialog sl-select::part(form-control-label),
.workspace-dialog sl-textarea::part(form-control-label) {
  color: var(--ui-ink-muted);
  font-size: 13px;
  font-weight: 500;
}

.workspace-dialog :where(input, textarea, select),
.workspace-dialog sl-input::part(base),
.workspace-dialog sl-select::part(combobox),
.workspace-dialog sl-textarea::part(base) {
  border-color: var(--ui-border-strong);
  color: var(--ui-ink);
  background: var(--ui-surface);
}

.workspace-dialog :where(input, textarea, select):focus,
.workspace-dialog :where(input, textarea, select):focus-visible {
  border-color: var(--ui-focus);
  outline: 2px solid transparent;
  box-shadow: var(--ui-focus-ring);
}

#user-delete-button::part(base),
#role-delete-button::part(base),
.tasks-delete-button::part(base) {
  color: var(--ui-danger);
}

#user-delete-button:hover::part(base),
#role-delete-button:hover::part(base),
.tasks-delete-button:hover::part(base) {
  background: rgba(180, 35, 24, 0.08);
}

/* The task editor uses a wider existing layout, with the same chrome rhythm. */
.tasks-dialog__surface {
  color: var(--ui-ink);
  background: var(--ui-surface);
}

.tasks-dialog__header,
.tasks-wizard__header {
  min-height: 64px;
  padding: 10px 20px;
  border-block-end: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.tasks-dialog__body,
.tasks-dialog__scroll {
  min-height: 0;
  background: var(--ui-surface);
}

.tasks-dialog__scroll {
  padding: 20px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 20px;
}

.tasks-dialog__header-actions {
  gap: 8px;
}

.tasks-dialog__section-link {
  min-height: 40px;
  border-radius: var(--ui-radius-control);
  color: var(--ui-ink-muted);
}

.tasks-dialog__section-link:hover,
.tasks-dialog__section-link:focus-visible {
  color: var(--ui-primary-hover);
  background: var(--ui-primary-soft);
}

/* Document dialogs use the same materials while retaining specialized sizes. */
.documents-export-dialog__body,
.documents-tree-export-dialog__body {
  color: var(--ui-ink);
  background: var(--ui-surface);
}

.documents-export-dialog__title,
.documents-tree-export-dialog__title,
.documents-export-format-card__title,
.documents-history-viewer-dialog__title,
.documents-history-viewer-dialog__footer-title {
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.documents-export-dialog__text,
.documents-tree-export-dialog__text,
.documents-tree-export-dialog__current,
.documents-export-format-dialog__message,
.documents-export-format-card__hint,
.documents-history-viewer-dialog__meta {
  color: var(--ui-ink-muted);
}

.documents-tree-export-dialog__spinner,
.documents-export-format-card__icon {
  border-radius: var(--ui-radius-control);
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

.documents-export-format-card {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-panel);
  color: var(--ui-ink);
  background: var(--ui-surface);
  box-shadow: none;
  transform: none;
}

.documents-export-format-card:hover,
.documents-export-format-card:focus-visible {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
  box-shadow: var(--ui-focus-ring);
  transform: none;
}

.documents-export-format-card.is-selected {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
  box-shadow: inset 3px 0 var(--ui-primary);
}

.documents-history-viewer-dialog {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-dialog);
  color: var(--ui-ink);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-overlay);
}

.documents-history-viewer-dialog::backdrop {
  background: var(--ui-overlay);
  backdrop-filter: blur(2px);
}

.documents-history-viewer-dialog__header {
  min-height: 64px;
  padding: 14px 20px;
  border-block-end-color: var(--ui-border);
  background: var(--ui-surface);
}

.documents-history-viewer-dialog__body,
.documents-history-viewer-dialog__scroll {
  background: var(--ui-surface);
}

.documents-history-viewer-dialog__scroll,
.documents-history-viewer-dialog__history {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.documents-history-viewer-dialog__history {
  align-content: start;
}

.documents-history-viewer-dialog__footer {
  border-block-start-color: var(--ui-border);
  background: var(--ui-surface-subtle);
}

.documents-history-viewer-dialog .documents-history__row {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--ui-radius-control);
  color: var(--ui-ink-muted);
}

.documents-history-viewer-dialog .documents-history__row:hover,
.documents-history-viewer-dialog .documents-history__row.is-active {
  color: var(--ui-ink);
  background: var(--ui-primary-soft);
}

.documents-history-viewer-dialog__close {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-color: transparent;
  border-radius: var(--ui-radius-control);
  color: var(--ui-ink-muted);
  background: transparent;
}

.documents-history-viewer-dialog__close:hover {
  color: var(--ui-ink);
  background: var(--ui-surface-subtle);
}

.profile-password-dialog::part(body),
.profile-password-dialog::part(footer) {
  padding: 0;
}

.profile-password-dialog::part(footer) {
  border-block-start: 1px solid var(--ui-border);
  background: var(--ui-surface-subtle);
}

.profile-password-dialog .profile-password-form {
  padding: 20px;
}

.profile-password-dialog .workspace-dialog__footer-actions {
  padding: 14px 20px 16px;
}

@media (max-width: 640px) {
  :where(.app-ui-dialog, .profile-password-dialog)::part(header) {
    padding: 10px 16px;
  }

  :where(.app-ui-dialog, .profile-password-dialog)::part(body) {
    padding: 16px;
  }

  :where(.app-ui-dialog, .profile-password-dialog)::part(footer) {
    padding: 12px 16px 16px;
  }

  .workspace-dialog .workspace-dialog__header,
  .tasks-dialog__header,
  .tasks-wizard__header {
    padding: 10px 12px;
  }

  .workspace-dialog .workspace-dialog__scroll,
  .tasks-dialog__scroll {
    padding: 16px 12px;
    scroll-padding-block: 16px;
  }

  .workspace-dialog .workspace-dialog__actions,
  .workspace-dialog .workspace-dialog__footer {
    padding: 12px;
  }

  .workspace-dialog .workspace-tabs {
    padding-inline: 12px;
  }

  .app-ui-dialog__actions,
  .workspace-dialog__footer-actions,
  .workspace-dialog .workspace-dialog__actions,
  .workspace-dialog .workspace-dialog__footer {
    flex-wrap: wrap;
  }

  .documents-export-format-card {
    gap: 12px;
    padding: 14px;
  }

  .documents-export-format-card__icon {
    width: 40px;
    height: 40px;
  }

  .documents-export-format-card__title {
    font-size: 18px;
  }

  .documents-history-viewer-dialog__header {
    padding: 10px 12px;
  }

  .documents-history-viewer-dialog__footer {
    padding-inline: 12px;
  }

  .documents-history-viewer-dialog .documents-history__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
  }

  .documents-history-viewer-dialog .documents-history__row time {
    grid-column: 1 / -1;
    color: var(--ui-ink-muted);
    font-size: 12px;
  }

  .documents-history-viewer-dialog .documents-history__row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .documents-history-viewer-dialog .documents-history__row span:last-child {
    justify-self: end;
  }

  .profile-password-dialog .profile-password-form {
    padding: 16px;
  }

  .profile-password-dialog .workspace-dialog__footer-actions {
    padding: 12px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .workspace-dialog,
    .tasks-dialog,
    .app-ui-dialog,
    .documents-export-dialog,
    .documents-tree-export-dialog,
    .documents-export-format-dialog,
    .documents-tree-export-format-dialog,
    .profile-password-dialog
  )::part(panel),
  .documents-export-format-card,
  .documents-history-viewer-dialog {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 640px) {
  :root {
    --ui-content-gutter: 16px;
  }

  body {
    font-size: 14px;
  }

  .workspace-header {
    min-height: 60px;
    padding-block: 10px;
  }

  .workspace-page-title {
    font-size: 18px;
  }

  .workspace-header__actions {
    max-width: 50%;
  }

  .workspace-header--plain {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .workspace-header--plain .workspace-header__mobile {
    grid-column: 1;
    grid-row: 1;
  }

  .workspace-header--plain .workspace-header__title-wrap {
    grid-column: 2;
    grid-row: 1;
  }

  .workspace-header--plain .workspace-header__actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }

  .workspace-header--plain .workspace-header__actions sl-button {
    flex: 1 1 auto;
  }

  .workspace-header__actions sl-button::part(base) {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .workspace-button::part(base),
  .workspace-icon-button::part(base),
  sl-button::part(base),
  sl-input::part(base),
  sl-select::part(combobox) {
    min-height: 44px;
  }

  :where(
    .documents-tree__drag,
    .documents-tree__toggle,
    .documents-share-copy,
    .databases-tree__toggle,
    .databases-tree__action,
    .tasks-tree-toggle,
    .tasks-col-drag,
    .tasks-key-button,
    .task-sprints-list__delete
  ) {
    min-width: 32px;
    min-height: 32px;
  }

  :where(
    .documents-tree__node-link,
    .projects-tree__node-link,
    .databases-tree__label,
    .documents-tool
  ) {
    min-height: 40px;
  }

  .directory-records__table-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .directory-records__table--users {
    min-width: 760px;
  }

  .directory-records__table--roles {
    min-width: 640px;
  }

  .workspace-icon-button::part(base) {
    min-width: 44px;
  }

  .workspace-content-frame--surface,
  .page-panel,
  .dashboard-card,
  .profile-page__surface {
    border-radius: 10px;
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-card {
    padding: 14px;
  }

  :where(.workspace-dialog, .app-ui-dialog) {
    --width: calc(100vw - 12px);
  }

  .workspace-dialog::part(panel),
  .app-ui-dialog::part(panel) {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 10px !important;
  }

  .workspace-dialog .workspace-dialog__header,
  .workspace-dialog .workspace-dialog__actions {
    padding: 12px;
  }

  .workspace-dialog .workspace-dialog__scroll {
    padding: 12px;
  }

  .workspace-dialog .workspace-tabs {
    max-width: 100%;
    overflow-x: auto;
    padding: 4px 12px;
  }

  .workspace-dialog .workspace-tab {
    min-width: max-content;
  }

  .workspace-dialog__actions,
  .workspace-dialog__footer-actions,
  .profile-form__actions,
  .task-sprints-page__sidebar-actions {
    flex-wrap: wrap;
  }

  .profile-form__row,
  .workspace-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .tasks-list-toolbar,
  .task-board-toolbar {
    align-items: stretch;
  }

  .tasks-list-toolbar sl-select,
  .task-board-toolbar sl-select {
    width: 100%;
    min-width: 0;
  }

  :where(.dashboard-table, .directories-table, .tasks-table) {
    min-width: 640px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .workspace-nav__link.is-current::before,
  .workspace-nav__item.is-current > .workspace-nav__link::before,
  .workspace-profile-link.is-current::before {
    background: Highlight;
  }
}

/* Sidebar stability: expanding the rail must never reflow navigation rows. */
@media (min-width: 981px) {
  .workspace-sidebar__top {
    position: relative;
    box-sizing: border-box;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    overflow: hidden;
  }

  .workspace-brand {
    min-width: 0;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    overflow: hidden;
  }

  .workspace-brand__mark {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }

  .workspace-brand__copy,
  .workspace-brand__copy > *,
  .workspace-nav__label,
  .workspace-profile-link__meta,
  .workspace-profile-link__meta > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .workspace-nav__link,
  .workspace-nav__item.is-section > .workspace-nav__link,
  .workspace-nav__list--nested .workspace-nav__link {
    box-sizing: border-box;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-block: 0 !important;
    overflow: hidden;
    align-items: center;
  }

  .workspace-nav__label {
    display: block;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    line-height: 20px;
  }

  .workspace-nav__icon,
  .workspace-nav__chevron {
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    line-height: 20px;
  }

  .workspace-profile-link {
    box-sizing: border-box;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    overflow: hidden;
  }

  .workspace-language-panel,
  .workspace-language-dropdown,
  .workspace-language-trigger,
  .workspace-language-trigger::part(base) {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
  }

  body.sidebar-collapsed:not(.sidebar-hover-expanded) .workspace-sidebar__top {
    display: flex;
    justify-content: center;
    padding-inline: 14px;
  }

  body.sidebar-collapsed:not(.sidebar-hover-expanded) .workspace-brand {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    justify-content: center;
  }

  body.sidebar-collapsed:not(.sidebar-hover-expanded) .workspace-brand__copy {
    display: block;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    visibility: hidden;
  }

  body.sidebar-collapsed:not(.sidebar-hover-expanded) .workspace-sidebar__toggle {
    position: absolute;
    width: 0;
    min-width: 0;
    height: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.sidebar-collapsed.sidebar-hover-expanded .workspace-brand__copy,
  body:not(.sidebar-collapsed) .workspace-brand__copy {
    flex: 1 1 auto;
    width: auto;
    max-width: 156px;
    opacity: 1;
    visibility: visible;
  }
}

/* Task workbenches share one toolbar rhythm and inset. */
.tasks-list-toolbar,
.task-board-toolbar {
  box-sizing: border-box;
  min-height: 64px;
  padding: 10px 16px;
  gap: 12px 16px;
  border-block-end: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.tasks-list-toolbar {
  justify-content: flex-start;
}

.tasks-list-toolbar__filter,
.task-board-sprint-filter {
  flex: 0 1 304px;
  width: 304px;
  min-width: 220px;
  max-width: 360px;
}

.tasks-list-toolbar__switch {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
}

.tasks-list-toolbar__switch-label {
  line-height: 20px;
}

.tasks-list-toolbar__switch--archive {
  margin-inline-start: auto;
}

@media (max-width: 980px) {
  .tasks-list-toolbar,
  .task-board-toolbar {
    min-height: 0;
    padding: 12px;
  }

  .tasks-list-toolbar {
    flex-direction: column;
  }

  .tasks-list-toolbar__filter,
  .task-board-sprint-filter {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .tasks-list-toolbar__switch {
    width: 100%;
    justify-content: space-between;
  }

  .tasks-list-toolbar__switch--archive {
    margin-inline-start: 0;
  }
}