@layer reset, tokens, components, skin, density, scheme;
/* docs/spec/features/theming-skins.md — the cascade, lowest to highest. Theme files
   (libs/theming → tools/build-theme-css.mjs) set only tokens, in their own layers: the
   defaults in `tokens`, every other skin, density and scheme in its own layer, loaded
   when chosen. Component CSS reads tokens only (`pnpm run lint:styles`). */
@layer tokens{
/* Generated by tools/build-theme-css.mjs from libs/theming. Do not edit. */
:root, [data-scheme="light"] {
  color-scheme: light;
  --color-surface: hsl(0 0% 100%);
  --color-surface-raised: hsl(0 0% 100%);
  --color-surface-sunken: hsl(210 40% 96.1%);
  --color-overlay: hsl(0 0% 100%);
  --color-backdrop: hsl(0 0% 0% / 0.5);
  --color-text: hsl(222.2 84% 4.9%);
  --color-text-muted: hsl(215.4 16.3% 44%);
  --color-primary: hsl(221.2 83.2% 53.3%);
  --color-primary-hover: hsl(221.2 83.2% 45%);
  --color-primary-soft: hsl(214 95% 93%);
  --color-text-on-primary: hsl(210 40% 98%);
  --color-secondary: hsl(214 30% 93%);
  --color-secondary-text: hsl(222.2 47.4% 11.2%);
  --color-accent: hsl(214 40% 94%);
  --color-accent-text: hsl(222.2 47.4% 11.2%);
  --color-border: hsl(214.3 31.8% 91.4%);
  --color-input-border: hsl(215 16% 56%);
  --color-focus-ring: hsl(221.2 83.2% 53.3%);
  --color-danger: hsl(0 72% 42%);
  --color-danger-soft: hsl(0 86% 97%);
  --color-danger-border: hsl(0 93% 89%);
  --color-text-on-danger: hsl(0 0% 100%);
  --color-success: hsl(145 83% 23%);
  --color-success-soft: hsl(138 100% 97%);
  --color-success-border: hsl(145 49% 80%);
  --color-sidebar: hsl(222 47% 13%);
  --color-sidebar-text: hsl(0 0% 100% / 0.72);
  --color-sidebar-text-strong: hsl(0 0% 100%);
  --color-sidebar-text-subtle: hsl(0 0% 100% / 0.4);
  --color-sidebar-hover: hsl(0 0% 100% / 0.1);
  --color-sidebar-border: hsl(0 0% 100% / 0.1);
  --color-content-red: hsl(0 72% 42%);
  --color-content-orange: hsl(24 90% 32%);
  --color-content-green: hsl(145 63% 28%);
  --color-content-blue: hsl(204 70% 37%);
  --color-content-purple: hsl(282 44% 42%);
  --color-content-pink: hsl(340 82% 42%);
}
:root, [data-skin="default"] {
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-md: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.75rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-none: 1;
  --line-height-tight: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --border-width: 1px;
  --border-width-strong: 2px;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.10);
  --shadow-xl: 0 4px 8px rgb(0 0 0 / 0.06), 0 24px 48px rgb(0 0 0 / 0.18);
}
:root, [data-density="comfortable"] {
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.375rem;
  --space-4: 0.5rem;
  --space-5: 0.625rem;
  --space-6: 0.75rem;
  --space-7: 1rem;
  --space-8: 1.25rem;
  --space-9: 1.5rem;
  --space-10: 2rem;
  --control-height-sm: 2rem;
  --control-height-md: 2.25rem;
  --control-height-lg: 2.75rem;
  --row-height: 2rem;
}
:root, [data-skin], [data-scheme], [data-density] {
  --accordion-item-border-width: var(--border-width);
  --accordion-item-border-color: var(--color-border);
  --accordion-trigger-padding-block: var(--space-7);
  --accordion-trigger-font-size: var(--font-size-md);
  --accordion-trigger-font-weight: var(--font-weight-medium);
  --accordion-icon-gap: var(--space-4);
  --accordion-content-font-size: var(--font-size-md);
  --accordion-content-padding-bottom: var(--space-7);
  --action-button-padding-block: var(--space-6);
  --action-button-padding-inline: var(--space-9);
  --action-button-border-width: var(--border-width);
  --action-button-border-color: var(--color-border);
  --asset-browser-list-padding: var(--space-3);
  --asset-browser-list-gap: var(--space-1);
  --asset-browser-row-gap: var(--space-4);
  --asset-browser-row-min-height: var(--row-height);
  --asset-browser-row-padding-block: var(--space-3);
  --asset-browser-row-padding-inline: var(--space-4);
  --asset-browser-row-radius: var(--radius-md);
  --asset-browser-row-text: var(--color-text);
  --asset-browser-row-icon-color: var(--color-text-muted);
  --asset-browser-row-font-size: var(--font-size-md);
  --asset-browser-row-hover-background: var(--color-accent);
  --asset-browser-row-selected-background: var(--color-primary-soft);
  --asset-browser-status-font-size: var(--font-size-xs);
  --asset-browser-status-text: var(--color-text-muted);
  --asset-browser-detail-padding: var(--space-9);
  --asset-browser-detail-gap: var(--space-7);
  --asset-browser-detail-title-font-size: var(--font-size-lg);
  --asset-browser-detail-title-font-weight: var(--font-weight-semibold);
  --asset-browser-detail-font-size: var(--font-size-md);
  --asset-browser-detail-label-text: var(--color-text-muted);
  --asset-browser-detail-column-gap: var(--space-7);
  --asset-browser-detail-row-gap: var(--space-3);
  --asset-browser-metadata-font-size: var(--font-size-sm);
  --asset-browser-metadata-text: var(--color-text-muted);
  --asset-browser-empty-padding: var(--space-9);
  --asset-browser-empty-text: var(--color-text-muted);
  --asset-browser-empty-font-size: var(--font-size-md);
  --asset-preview-margin-block: var(--space-7);
  --asset-preview-media-radius: var(--radius-sm);
  --asset-preview-placeholder-gap: var(--space-4);
  --asset-preview-placeholder-padding: var(--space-10);
  --asset-preview-placeholder-text: var(--color-text-muted);
  --asset-preview-placeholder-background: var(--color-surface-sunken);
  --asset-preview-placeholder-border-width: var(--border-width);
  --asset-preview-placeholder-border-color: var(--color-border);
  --asset-preview-placeholder-font-size: var(--font-size-md);
  --auth-form-padding: var(--space-7);
  --auth-form-card-background: var(--color-surface);
  --auth-form-card-radius: var(--radius-lg);
  --auth-form-card-padding: var(--space-10);
  --auth-form-card-shadow: var(--shadow-md);
  --auth-form-title-gap: var(--space-9);
  --auth-form-title-font-size: var(--font-size-2xl);
  --auth-form-footer-gap: var(--space-7);
  --auth-form-footer-text: var(--color-text-muted);
  --auth-form-link-text: var(--color-primary);
  --auth-form-field-gap: var(--space-7);
  --auth-form-label-gap: var(--space-2);
  --auth-form-label-font-weight: var(--font-weight-medium);
  --auth-form-label-font-size: var(--font-size-md);
  --auth-form-input-padding-block: var(--space-4);
  --auth-form-input-padding-inline: var(--space-6);
  --auth-form-input-border-width: var(--border-width);
  --auth-form-input-border-color: var(--color-input-border);
  --auth-form-input-radius: var(--radius-md);
  --auth-form-input-font-size: var(--font-size-base);
  --auth-form-input-focus-border-color: var(--color-primary);
  --auth-form-submit-padding: var(--space-6);
  --auth-form-submit-background: var(--color-primary);
  --auth-form-submit-text: var(--color-text-on-primary);
  --auth-form-submit-font-weight: var(--font-weight-semibold);
  --auth-form-submit-gap: var(--space-7);
  --auth-form-submit-hover-background: var(--color-primary-hover);
  --auth-form-divider-gap: var(--space-6);
  --auth-form-divider-margin-block: var(--space-8);
  --auth-form-divider-text: var(--color-text-muted);
  --auth-form-divider-font-size: var(--font-size-sm);
  --auth-form-divider-line-width: var(--border-width);
  --auth-form-divider-line-color: var(--color-border);
  --auth-form-google-gap: var(--space-5);
  --auth-form-google-padding: var(--space-5);
  --auth-form-google-background: var(--color-surface);
  --auth-form-google-text: var(--color-text);
  --auth-form-google-font-weight: var(--font-weight-medium);
  --auth-form-google-hover-background: var(--color-surface-sunken);
  --auth-form-google-hover-shadow: var(--shadow-sm);
  --auth-form-error-background: var(--color-danger-soft);
  --auth-form-error-text: var(--color-danger);
  --auth-form-error-border-width: var(--border-width);
  --auth-form-error-border-color: var(--color-danger-border);
  --auth-form-error-padding: var(--space-6);
  --auth-form-error-font-size: var(--font-size-md);
  --breadcrumbs-font-size: var(--font-size-md);
  --breadcrumbs-lines-gap: var(--space-1);
  --breadcrumbs-separator-color: var(--color-text-muted);
  --breadcrumbs-line-gap: var(--space-1);
  --breadcrumbs-link-gap: var(--space-2);
  --breadcrumbs-icon-color: var(--color-text-muted);
  --breadcrumbs-edit-margin-left: var(--space-3);
  --breadcrumbs-edit-color: var(--color-text-muted);
  --breadcrumbs-edit-hover-color: var(--color-text);
  --breadcrumbs-more-padding-inline: var(--space-2);
  --breadcrumbs-more-list-offset: var(--space-2);
  --breadcrumbs-more-list-padding-block: var(--space-2);
  --breadcrumbs-more-list-background: var(--color-surface);
  --breadcrumbs-more-list-border-width: var(--border-width);
  --breadcrumbs-more-list-border-color: var(--color-border);
  --breadcrumbs-more-list-radius: var(--radius-md);
  --breadcrumbs-more-list-shadow: var(--shadow-lg);
  --breadcrumbs-more-list-item-padding-block: var(--space-2);
  --breadcrumbs-more-list-item-padding-inline: var(--space-5);
  --button-gap: var(--space-4);
  --button-radius: var(--radius-md);
  --button-font-size: var(--font-size-md);
  --button-font-weight: var(--font-weight-medium);
  --button-min-height: var(--control-height-md);
  --button-padding-block: var(--space-4);
  --button-padding-inline: var(--space-7);
  --button-focus-ring: var(--color-focus-ring);
  --button-default-background: var(--color-primary);
  --button-default-text: var(--color-text-on-primary);
  --button-default-hover-background: var(--color-primary-hover);
  --button-destructive-background: var(--color-danger);
  --button-destructive-text: var(--color-text-on-danger);
  --button-destructive-hover-background: color-mix(in srgb, var(--color-danger) 86%, var(--color-text));
  --button-outline-background: var(--color-surface);
  --button-outline-border-width: var(--border-width);
  --button-outline-border-color: var(--color-input-border);
  --button-outline-text: var(--color-text);
  --button-hover-background: var(--color-accent);
  --button-hover-text: var(--color-accent-text);
  --button-secondary-background: var(--color-secondary);
  --button-secondary-text: var(--color-secondary-text);
  --button-secondary-hover-background: color-mix(in srgb, var(--color-secondary) 92%, var(--color-text));
  --button-ghost-text: var(--color-text);
  --button-link-text: var(--color-primary);
  --button-sm-min-height: var(--control-height-sm);
  --button-sm-padding-inline: var(--space-6);
  --button-lg-min-height: var(--control-height-lg);
  --button-lg-padding-inline: var(--space-10);
  --button-icon-size: var(--control-height-md);
  --button-icon-sm-size: calc(var(--control-height-sm) - var(--space-4));
  --chat-body-padding: var(--space-7);
  --chat-body-gap: var(--space-6);
  --chat-body-empty-text: var(--color-text-muted);
  --chat-body-empty-margin-top: var(--space-10);
  --chat-body-empty-font-size: var(--font-size-md);
  --chat-body-message-background: var(--color-secondary);
  --chat-body-message-radius: var(--radius-lg);
  --chat-body-message-padding-block: var(--space-5);
  --chat-body-message-padding-inline: var(--space-6);
  --chat-body-message-user-background: var(--color-primary);
  --chat-body-message-user-text: var(--color-text-on-primary);
  --chat-body-message-text: var(--color-text);
  --chat-body-message-ack-text: var(--color-text-muted);
  --chat-body-author-font-weight: var(--font-weight-semibold);
  --chat-body-author-font-size: var(--font-size-sm);
  --chat-body-author-gap: var(--space-1);
  --chat-body-text-font-size: var(--font-size-base);
  --chat-body-speak-gap: var(--space-3);
  --chat-body-speak-radius: var(--radius-sm);
  --chat-body-speak-hover-background: color-mix(in srgb, var(--color-text) 8%, transparent);
  --chat-body-speak-user-hover-background: color-mix(in srgb, var(--color-text-on-primary) 20%, transparent);
  --chat-input-gap: var(--space-4);
  --chat-input-padding-block: var(--space-5);
  --chat-input-padding-inline: var(--space-6);
  --chat-input-border-width: var(--border-width);
  --chat-input-border-color: var(--color-input-border);
  --chat-input-radius: var(--radius-md);
  --chat-input-focus-border-color: var(--color-primary);
  --chat-input-field-font-size: var(--font-size-base);
  --chat-input-field-line-height: var(--line-height-tight);
  --chat-input-send-padding-block: var(--space-4);
  --chat-input-send-padding-inline: var(--space-7);
  --chat-input-send-background: var(--color-primary);
  --chat-input-send-text: var(--color-text-on-primary);
  --chat-input-send-radius: var(--radius-md);
  --chat-input-send-font-size: var(--font-size-base);
  --chat-input-send-font-weight: var(--font-weight-semibold);
  --chat-input-send-hover-background: var(--color-primary-hover);
  --dialog-backdrop-background: var(--color-backdrop);
  --dialog-panel-background: var(--color-surface);
  --dialog-panel-text: var(--color-text);
  --dialog-panel-border-width: var(--border-width);
  --dialog-panel-border-color: var(--color-border);
  --dialog-panel-radius: var(--radius-lg);
  --dialog-panel-shadow: var(--shadow-xl);
  --dialog-header-padding-block: var(--space-7);
  --dialog-header-padding-inline: var(--space-8);
  --dialog-header-border-width: var(--border-width);
  --dialog-header-border-color: var(--color-border);
  --dialog-title-font-size: var(--font-size-base);
  --dialog-title-font-weight: var(--font-weight-semibold);
  --dialog-close-font-size: var(--font-size-xl);
  --dialog-close-text: var(--color-text-muted);
  --dialog-close-padding: var(--space-2);
  --dialog-close-hover-text: var(--color-text);
  --dialog-body-padding: var(--space-8);
  --document-list-empty-text: var(--color-text-muted);
  --document-list-empty-font-size: var(--font-size-md);
  --document-list-empty-margin-bottom: var(--space-7);
  --document-list-margin-bottom: var(--space-8);
  --document-list-gap: var(--space-3);
  --document-list-name-font-weight: var(--font-weight-medium);
  --document-list-name-font-size: var(--font-size-base);
  --document-list-row-padding-block: var(--space-5);
  --document-list-row-padding-inline: var(--space-6);
  --document-list-row-border-width: var(--border-width);
  --document-list-row-border-color: var(--color-border);
  --document-list-row-radius: var(--radius-md);
  --document-list-open-padding-block: var(--space-2);
  --document-list-open-padding-inline: var(--space-4);
  --document-list-open-font-size: var(--font-size-xs);
  --document-list-open-line-height: var(--line-height-none);
  --document-list-open-background: var(--color-surface);
  --document-list-open-text: var(--color-primary);
  --document-list-open-border-width: var(--border-width);
  --document-list-open-border-color: var(--color-primary);
  --document-list-open-radius: var(--radius-sm);
  --document-list-open-hover-background: var(--color-primary);
  --document-list-open-hover-text: var(--color-text-on-primary);
  --entity-list-background: var(--color-surface);
  --entity-list-border-width: var(--border-width);
  --entity-list-border-color: var(--color-border);
  --entity-list-radius: var(--radius-md);
  --entity-list-row-gap: var(--space-6);
  --entity-list-row-min-height: var(--control-height-lg);
  --entity-list-row-padding-block: var(--space-3);
  --entity-list-row-padding-inline: var(--space-6);
  --entity-list-row-border-width: var(--border-width);
  --entity-list-row-border-color: var(--color-border);
  --entity-list-row-hover-background: var(--color-accent);
  --entity-list-cell-font-size: var(--font-size-md);
  --entity-list-cell-text: var(--color-text-muted);
  --entity-list-cell-first-text: var(--color-text);
  --entity-list-cell-first-font-weight: var(--font-weight-medium);
  --entity-list-link-text: var(--color-primary);
  --entity-list-empty-text: var(--color-text-muted);
  --entity-list-empty-font-size: var(--font-size-md);
  --entity-tree-children-indent: var(--space-8);
  --entity-tree-row-gap: var(--space-3);
  --entity-tree-row-min-height: var(--row-height);
  --entity-tree-row-padding-inline: var(--space-2);
  --entity-tree-row-radius: var(--radius-md);
  --entity-tree-row-hover-background: var(--color-accent);
  --entity-tree-row-selected-background: var(--color-primary-soft);
  --entity-tree-row-selected-text: var(--color-text);
  --entity-tree-toggle-color: var(--color-text-muted);
  --entity-tree-icon-color: var(--color-text-muted);
  --entity-tree-actions-gap: var(--space-1);
  --entity-tree-actions-margin-left: var(--space-2);
  --entity-tree-more-padding-block: var(--space-1);
  --entity-tree-more-indent: var(--space-9);
  --entity-tree-more-text: var(--color-primary);
  --entity-tree-more-font-size: var(--font-size-md);
  --entity-tree-empty-padding-block: var(--space-2);
  --entity-tree-empty-text: var(--color-text-muted);
  --error-panel-padding-block: var(--space-4);
  --error-panel-padding-left: var(--space-6);
  --error-panel-background: var(--color-danger-soft);
  --error-panel-border-width: var(--border-width);
  --error-panel-border-color: var(--color-danger-border);
  --error-panel-radius: var(--radius-md);
  --error-panel-text: var(--color-danger);
  --error-panel-item-gap: var(--space-4);
  --error-panel-item-padding-block: var(--space-2);
  --error-panel-dismiss-font-size: var(--font-size-base);
  --error-panel-empty-margin-block: var(--space-2);
  --error-panel-empty-text: var(--color-text-muted);
  --file-upload-gap: var(--space-3);
  --file-upload-label-gap: var(--space-3);
  --file-upload-label-font-size: var(--font-size-md);
  --file-upload-label-font-weight: var(--font-weight-medium);
  --file-upload-input-font-size: var(--font-size-md);
  --file-upload-input-font-weight: var(--font-weight-normal);
  --file-upload-input-text: var(--color-text-muted);
  --file-upload-input-button-gap: var(--space-6);
  --file-upload-input-button-min-height: var(--control-height-sm);
  --file-upload-input-button-padding-inline: var(--space-6);
  --file-upload-input-button-font-weight: var(--font-weight-medium);
  --file-upload-input-button-text: var(--color-text);
  --file-upload-input-button-background: var(--color-surface);
  --file-upload-input-button-border-width: var(--border-width);
  --file-upload-input-button-border-color: var(--color-input-border);
  --file-upload-input-button-radius: var(--radius-md);
  --file-upload-input-button-hover-background: var(--color-accent);
  --file-upload-status-font-size: var(--font-size-sm);
  --file-upload-status-text: var(--color-text-muted);
  --file-upload-error-font-size: var(--font-size-sm);
  --file-upload-error-text: var(--color-danger);
  --group-nav-padding-block: var(--space-4);
  --group-nav-padding-inline: var(--space-7);
  --group-nav-font-size: var(--font-size-md);
  --group-nav-radius: var(--radius-md);
  --group-nav-hover-background: var(--color-accent);
  --group-nav-hover-text: var(--color-accent-text);
  --group-nav-disabled-text: var(--color-text-muted);
  --json-view-padding: var(--space-9);
  --json-view-empty-text: var(--color-text-muted);
  --json-view-empty-font-size: var(--font-size-md);
  --json-view-font-size: var(--font-size-sm);
  --json-view-line-height: var(--line-height-normal);
  --json-view-font-family: var(--font-mono);
  --log-tree-empty-font-size: var(--font-size-xs);
  --log-tree-empty-text: var(--color-text-muted);
  --log-tree-empty-padding: var(--space-6);
  --mail-thread-list-panes-gap: var(--space-6);
  --mail-thread-list-row-padding-block: var(--space-5);
  --mail-thread-list-row-padding-inline: var(--space-6);
  --mail-thread-list-row-border-width: var(--border-width);
  --mail-thread-list-row-border-color: var(--color-border);
  --mail-thread-list-row-hover-background: var(--color-accent);
  --mail-thread-list-row-selected-background: var(--color-primary-soft);
  --mail-thread-list-row-selected-text: var(--color-text);
  --mail-thread-list-row-unread-font-weight: var(--font-weight-semibold);
  --mail-thread-list-unread-size: var(--space-3);
  --mail-thread-list-unread-color: var(--color-primary);
  --mail-thread-list-alert-color: var(--color-danger);
  --mail-thread-list-participants-text: var(--color-text-muted);
  --mail-thread-list-participants-font-size: var(--font-size-sm);
  --mail-thread-list-date-text: var(--color-text-muted);
  --mail-thread-list-date-font-size: var(--font-size-sm);
  --mail-thread-list-pane-padding: var(--space-6);
  --mail-thread-list-pane-background: var(--color-surface-raised);
  --mail-thread-list-pane-radius: var(--radius-md);
  --mail-thread-list-pane-border-width: var(--border-width);
  --mail-thread-list-pane-border-color: var(--color-border);
  --mail-thread-list-message-gap: var(--space-3);
  --mail-thread-list-message-padding-block: var(--space-5);
  --mail-thread-list-message-border-width: var(--border-width);
  --mail-thread-list-message-border-color: var(--color-border);
  --mail-thread-list-issues-background: var(--color-danger-soft);
  --mail-thread-list-issues-border-color: var(--color-danger-border);
  --mail-thread-list-issues-padding: var(--space-4);
  --mail-thread-list-issues-radius: var(--radius-sm);
  --mail-thread-list-more-text: var(--color-primary);
  --mail-thread-list-more-font-size: var(--font-size-md);
  --mail-thread-list-empty-text: var(--color-text-muted);
  --multi-input-border-width: var(--border-width);
  --multi-input-border-color: var(--color-border);
  --multi-input-padding: var(--space-6);
  --multi-input-gap: var(--space-4);
  --multi-input-field-gap: var(--space-2);
  --multi-input-label-font-size: var(--font-size-sm);
  --multi-input-label-font-weight: var(--font-weight-medium);
  --multi-input-label-text: var(--color-text);
  --multi-input-value-padding-block: var(--space-2);
  --multi-input-value-padding-inline: var(--space-4);
  --multi-input-value-font-size: var(--font-size-md);
  --multi-input-value-text: var(--color-text);
  --multi-input-control-border-width: var(--border-width);
  --multi-input-control-border-color: var(--color-input-border);
  --multi-input-control-radius: var(--radius-md);
  --multi-input-control-padding-block: var(--space-4);
  --multi-input-control-padding-inline: var(--space-6);
  --multi-input-control-font-size: var(--font-size-md);
  --multi-input-control-background: var(--color-surface);
  --multi-input-control-text: var(--color-text);
  --multi-input-control-focus-ring-color: var(--color-focus-ring);
  --multi-input-submit-margin-top: var(--space-2);
  --new-document-gap: var(--space-4);
  --new-document-input-padding-block: var(--space-4);
  --new-document-input-padding-inline: var(--space-6);
  --new-document-input-border-width: var(--border-width);
  --new-document-input-border-color: var(--color-input-border);
  --new-document-input-radius: var(--radius-md);
  --new-document-input-font-size: var(--font-size-base);
  --new-document-input-focus-border-color: var(--color-primary);
  --pager-gap: var(--space-6);
  --pager-action-min-height: var(--control-height-sm);
  --pager-action-padding-inline: var(--space-6);
  --pager-action-font-size: var(--font-size-md);
  --pager-action-font-weight: var(--font-weight-medium);
  --pager-action-text: var(--color-text);
  --pager-action-background: var(--color-surface);
  --pager-action-border-width: var(--border-width);
  --pager-action-border-color: var(--color-input-border);
  --pager-action-radius: var(--radius-md);
  --pager-action-hover-background: var(--color-accent);
  --pager-status-font-size: var(--font-size-sm);
  --pager-status-text: var(--color-text-muted);
  --progress-bar-padding-block: var(--space-7);
  --progress-bar-padding-inline: var(--space-9);
  --progress-bar-gap: var(--space-6);
  --progress-bar-track-radius: var(--radius-full);
  --progress-bar-track-background: var(--color-secondary);
  --progress-bar-fill-background: var(--color-primary);
  --progress-bar-label-font-size: var(--font-size-sm);
  --progress-bar-label-font-weight: var(--font-weight-medium);
  --progress-bar-label-text: var(--color-text-muted);
  --progress-bar-label-gap: var(--space-4);
  --progress-bar-label-step-font-size: var(--font-size-xs);
  --progress-bar-label-active-text: var(--color-text);
  --progress-bar-dot-background: var(--color-surface);
  --progress-bar-dot-border-width: var(--border-width-strong);
  --progress-bar-dot-border-color: var(--color-input-border);
  --progress-bar-connector-background: var(--color-border);
  --progress-bar-connector-gap: var(--space-2);
  --sidebar-menu-padding-block: var(--space-2);
  --sidebar-menu-padding-inline: var(--space-4);
  --sidebar-menu-background: var(--color-sidebar);
  --sidebar-menu-separator-width: var(--border-width);
  --sidebar-menu-separator-color: var(--color-sidebar-border);
  --sidebar-menu-separator-margin-block: var(--space-3);
  --sidebar-menu-separator-margin-inline: var(--space-4);
  --sidebar-menu-link-gap: var(--space-4);
  --sidebar-menu-link-padding-block: var(--space-3);
  --sidebar-menu-link-padding-inline: var(--space-6);
  --sidebar-menu-link-radius: var(--radius-md);
  --sidebar-menu-link-text: var(--color-sidebar-text);
  --sidebar-menu-link-font-size: var(--font-size-base);
  --sidebar-menu-link-line-height: var(--line-height-tight);
  --sidebar-menu-link-hover-background: var(--color-sidebar-hover);
  --sidebar-menu-link-strong-text: var(--color-sidebar-text-strong);
  --sidebar-menu-link-open-font-weight: var(--font-weight-bold);
  --sidebar-menu-arrow-font-size: var(--font-size-2xs);
  --sidebar-menu-arrow-color: var(--color-sidebar-text-subtle);
  --sidebar-menu-children-indent: var(--space-8);
  --smart-tabs-tab-divider-width: var(--border-width);
  --smart-tabs-tab-divider-color: var(--color-border);
  --smart-tabs-close-padding-inline-end: var(--space-4);
  --smart-tabs-close-font-size: var(--font-size-base);
  --smart-tabs-close-indicator-width: var(--border-width-strong);
  --smart-tabs-close-active-indicator-color: var(--color-primary);
  --split-panel-handle-background: var(--color-border);
  --split-panel-handle-hover-background: var(--color-accent);
  --system-tray-padding-block: var(--space-6);
  --system-tray-padding-left: var(--space-7);
  --system-tray-background: var(--color-surface);
  --system-tray-border-width: var(--border-width);
  --system-tray-border-color: var(--color-border);
  --system-tray-shadow: var(--shadow-md);
  --tabs-list-min-height: var(--control-height-md);
  --tabs-list-radius: var(--radius-md);
  --tabs-list-background: var(--color-surface-sunken);
  --tabs-list-padding: var(--space-2);
  --tabs-list-text: var(--color-text-muted);
  --tabs-list-line-border-width: var(--border-width);
  --tabs-list-line-border-color: var(--color-border);
  --tabs-trigger-font-size: var(--font-size-md);
  --tabs-trigger-font-weight: var(--font-weight-medium);
  --tabs-trigger-focus-ring: var(--color-focus-ring);
  --tabs-trigger-radius: var(--radius-sm);
  --tabs-trigger-padding-block: var(--space-3);
  --tabs-trigger-padding-inline: var(--space-6);
  --tabs-trigger-active-background: var(--color-surface);
  --tabs-trigger-active-text: var(--color-text);
  --tabs-trigger-active-shadow: var(--shadow-sm);
  --tabs-trigger-line-padding-inline: var(--space-7);
  --tabs-trigger-line-indicator-width: var(--border-width-strong);
  --tabs-trigger-line-indicator-color: var(--color-primary);
  --tabs-content-gap: var(--space-4);
  --text-display-padding: var(--space-9);
  --text-display-empty-text: var(--color-text-muted);
  --text-display-font-size: var(--font-size-md);
  --text-display-line-height: var(--line-height-relaxed);
  --theme-picker-gap: var(--space-4);
  --theme-picker-padding-block: var(--space-4);
  --theme-picker-row-gap: var(--space-3);
  --theme-picker-row-border-width: var(--border-width);
  --theme-picker-row-border-color: var(--color-border);
  --theme-picker-row-radius: var(--radius-md);
  --theme-picker-row-padding-block: var(--space-3);
  --theme-picker-row-padding-inline: var(--space-4);
  --theme-picker-legend-font-size: var(--font-size-xs);
  --theme-picker-legend-font-weight: var(--font-weight-medium);
  --theme-picker-legend-text: var(--color-text-muted);
  --theme-picker-legend-padding-inline: var(--space-2);
  --theme-picker-option-gap: var(--space-2);
  --theme-picker-option-font-size: var(--font-size-sm);
  --theme-picker-option-text: var(--color-text);
  --theme-picker-option-disabled-text: var(--color-text-muted);
  --tree-view-padding: var(--space-4);
  --tree-view-row-radius: var(--radius-md);
  --tree-view-row-hover-background: var(--color-accent);
  --tree-view-row-selected-background: var(--color-primary-soft);
  --tree-view-row-selected-text: var(--color-text);
  --tree-view-node-padding: var(--space-4);
  --tree-view-chevron-gap: var(--space-2);
  --tree-view-chevron-color: color-mix(in srgb, var(--color-accent-text) 50%, transparent);
  --tree-view-icon-gap: var(--space-4);
  --tree-view-label-font-size: var(--font-size-md);
  --tree-view-leaf-indent: var(--space-8);
  --tree-view-children-indent: var(--space-7);
  --tree-view-children-padding-left: var(--space-2);
  --tree-view-children-guide-width: var(--border-width);
  --tree-view-children-guide-color: var(--color-border);
  --tree-view-children-padding-bottom: var(--space-2);
  --two-column-left-divider-width: var(--border-width);
  --two-column-left-divider-color: var(--color-border);
  --user-icon-menu-icon-radius: var(--radius-full);
  --user-icon-menu-icon-background: var(--color-primary);
  --user-icon-menu-icon-text: var(--color-text-on-primary);
  --user-icon-menu-icon-font-weight: var(--font-weight-semibold);
  --user-icon-menu-icon-font-size: var(--font-size-md);
  --user-icon-menu-icon-signed-out-background: var(--color-input-border);
  --user-icon-menu-menu-padding-block: var(--space-2);
  --user-icon-menu-menu-background: var(--color-surface);
  --user-icon-menu-menu-border-width: var(--border-width);
  --user-icon-menu-menu-border-color: var(--color-border);
  --user-icon-menu-menu-radius: var(--radius-md);
  --user-icon-menu-menu-shadow: var(--shadow-lg);
  --user-icon-menu-item-padding-block: var(--space-4);
  --user-icon-menu-item-padding-inline: var(--space-6);
  --user-icon-menu-item-hover-background: var(--color-accent);
  --writing-area-padding-block: var(--space-4);
  --writing-area-padding-inline: var(--space-6);
  --writing-area-border-width: var(--border-width);
  --writing-area-border-color: var(--color-input-border);
  --writing-area-radius: var(--radius-lg);
  --writing-area-background: var(--color-surface);
  --writing-area-text: var(--color-text);
  --writing-area-focus-ring: var(--color-focus-ring);
  --writing-area-disabled-background: var(--color-surface-sunken);
  --writing-area-hint-gap: var(--space-2);
  --writing-area-hint-font-size: var(--font-size-sm);
  --writing-area-hint-text: var(--color-text-muted);
  --yt-player-padding: var(--space-7);
}
}
@layer reset{

/* Reset, the page body, and the full-page loading state. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

/* A page-level loading message (RoutePage, PrivateRoute, OAuthCallbackPage) */
.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: var(--color-text-muted);
}


/* Plain links (breadcrumbs, inline references) follow the scheme rather than the
   browser's default blue and visited purple. Components style their own links. */
a { color: var(--color-primary); }
}
@layer components{

/* SidebarMenu — Slack Aubergine skin */

.smenu {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: var(--sidebar-menu-padding-block) var(--sidebar-menu-padding-inline);
  background-color: var(--sidebar-menu-background);
  box-sizing: border-box;
  overflow-y: auto;
}

.smenu-separator {
  border: none;
  border-top: var(--sidebar-menu-separator-width) solid var(--sidebar-menu-separator-color);
  margin: var(--sidebar-menu-separator-margin-block) var(--sidebar-menu-separator-margin-inline);
}

.smenu-item {
  display: flex;
  flex-direction: column;
}

.smenu-link {
  display: flex;
  align-items: center;
  gap: var(--sidebar-menu-link-gap);
  width: 100%;
  padding: var(--sidebar-menu-link-padding-block) var(--sidebar-menu-link-padding-inline);
  background: none;
  border: none;
  border-radius: var(--sidebar-menu-link-radius);
  cursor: pointer;
  text-align: left;
  color: var(--sidebar-menu-link-text);
  font-size: var(--sidebar-menu-link-font-size);
  font-family: inherit;
  line-height: var(--sidebar-menu-link-line-height);
  text-decoration: none;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.smenu-link:hover {
  background-color: var(--sidebar-menu-link-hover-background);
  color: var(--sidebar-menu-link-strong-text);
}

.smenu-item[data-state="open"] > .smenu-link {
  color: var(--sidebar-menu-link-strong-text);
  font-weight: var(--sidebar-menu-link-open-font-weight);
}

.smenu-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sidebar-menu-link-font-size);
  line-height: var(--line-height-none);
}

.smenu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smenu-arrow {
  flex-shrink: 0;
  font-size: var(--sidebar-menu-arrow-font-size);
  color: var(--sidebar-menu-arrow-color);
  transition: transform 0.2s ease;
  display: inline-block;
}

.smenu-item[data-state="open"] > .smenu-link > .smenu-arrow {
  transform: rotate(90deg);
}

.smenu-children {
  display: none;
  flex-direction: column;
  padding-left: var(--sidebar-menu-children-indent);
}

.smenu-children[data-state="open"] {
  display: flex;
}

/* The group admin page's sidebar: several short menus stacked as one list of links
   (each opens its form in the right panel), so no menu claims the full height. */
.group-admin-sidebar {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0;
  background-color: var(--color-sidebar);
  box-sizing: border-box;
  overflow-y: auto;
  flex: 1;
  min-height: 100%;
}
.group-admin-sidebar .smenu {
  height: auto;
  flex: none;
  overflow: visible;
  padding-top: 0;
  padding-bottom: 0;
}
.group-admin-sidebar .smenu:empty {
  display: none;
}
/* The folder links under "Manage Folders". */
.group-admin-sidebar .smenu-item--sub > .smenu-link {
  padding-left: var(--space-9);
}

.group-admin-panel {
  padding: var(--space-7);
  box-sizing: border-box;
  overflow-y: auto;
}

/* A route item (`to`): a link marked ↗ */
.smenu-route-icon {
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.7;
}
}
@layer components{
/* Button component (btn) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  white-space: nowrap;
  border-radius: var(--button-radius);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  border: none;
  cursor: pointer;
  font-family: inherit;
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  outline: none;
}
.btn:focus-visible {
  outline: 2px solid var(--button-focus-ring);
  outline-offset: 2px;
}
.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Variants */
.btn--default {
  background-color: var(--button-default-background);
  color: var(--button-default-text);
}
.btn--default:hover { background-color: var(--button-default-hover-background); }

.btn--destructive {
  background-color: var(--button-destructive-background);
  color: var(--button-destructive-text);
}
.btn--destructive:hover { background-color: var(--button-destructive-hover-background); }

.btn--outline {
  background-color: var(--button-outline-background);
  border: var(--button-outline-border-width) solid var(--button-outline-border-color);
  color: var(--button-outline-text);
}
.btn--outline:hover {
  background-color: var(--button-hover-background);
  color: var(--button-hover-text);
}

.btn--secondary {
  background-color: var(--button-secondary-background);
  color: var(--button-secondary-text);
}
.btn--secondary:hover { background-color: var(--button-secondary-hover-background); }

.btn--ghost {
  background-color: transparent;
  color: var(--button-ghost-text);
}
.btn--ghost:hover {
  background-color: var(--button-hover-background);
  color: var(--button-hover-text);
}

.btn--link {
  background-color: transparent;
  color: var(--button-link-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  height: auto;
  padding: 0;
}
.btn--link:hover { text-decoration: underline; }

/* Sizes */
.btn--sm {
  min-height: var(--button-sm-min-height);
  border-radius: var(--button-radius);
  padding: 0 var(--button-sm-padding-inline);
}
.btn--lg {
  min-height: var(--button-lg-min-height);
  border-radius: var(--button-radius);
  padding: 0 var(--button-lg-padding-inline);
}
.btn--icon {
  min-height: var(--button-icon-size);
  width: var(--button-icon-size);
  padding: 0;
}

/* IconButton (components/ui/icon-button.tsx): a disabled one keeps hover so its
   `title` tooltip shows, so it's dimmed here rather than via :disabled. */
.icon-button[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon-button[data-disabled]:hover { background-color: transparent; }
.btn--ghost.icon-button[data-disabled]:hover { color: var(--button-ghost-text); }
.btn--default.icon-button[data-disabled]:hover { background-color: var(--button-default-background); }
.btn--icon.btn--sm {
  min-height: var(--button-icon-sm-size);
  width: var(--button-icon-sm-size);
}
}
@layer components{
/* Accordion component (accord) */
@keyframes accordion-down {
  from { height: 0; overflow: hidden; }
  to { height: var(--radix-accordion-content-height); overflow: hidden; }
}
@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); overflow: hidden; }
  to { height: 0; overflow: hidden; }
}

.accord {
  width: 100%;
}
.accord-item {
  border-bottom: var(--accordion-item-border-width) solid var(--accordion-item-border-color);
}
.accord-header {
  display: flex;
}
.accord-trigger {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: var(--accordion-trigger-padding-block) 0;
  font-size: var(--accordion-trigger-font-size);
  font-weight: var(--accordion-trigger-font-weight);
  text-align: left;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: opacity 0.15s ease;
}
.accord-trigger:hover { text-decoration: underline; }
.accord-trigger-icon {
  margin-left: var(--accordion-icon-gap);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.accord-trigger[data-state="open"] .accord-trigger-icon {
  transform: rotate(180deg);
}
.accord-content {
  overflow: hidden;
  font-size: var(--accordion-content-font-size);
}
.accord-content[data-state="open"]   { animation: accordion-down 0.2s ease-out; }
.accord-content[data-state="closed"] { animation: accordion-up 0.2s ease-out; }
.accord-content-inner {
  padding-bottom: var(--accordion-content-padding-bottom);
  padding-top: 0;
}
}
@layer components{
/* Tabs component (tabs-list, tabs-trigger, tabs-content) */
.tabs-list {
  display: inline-flex;
  align-items: center;
}
.tabs-list:not(.tabs-list--line) {
  min-height: var(--tabs-list-min-height);
  justify-content: center;
  border-radius: var(--tabs-list-radius);
  background-color: var(--tabs-list-background);
  padding: var(--tabs-list-padding);
  color: var(--tabs-list-text);
}
.tabs-list--line {
  min-height: var(--tabs-list-min-height);
  justify-content: flex-start;
  border-bottom: var(--tabs-list-line-border-width) solid var(--tabs-list-line-border-color);
  gap: 0;
  color: var(--tabs-list-text);
}

.tabs-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: var(--tabs-trigger-font-size);
  font-weight: var(--tabs-trigger-font-weight);
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: all 0.15s ease;
  outline: none;
}
.tabs-trigger:focus-visible {
  outline: 2px solid var(--tabs-trigger-focus-ring);
  outline-offset: 2px;
}
.tabs-trigger:disabled {
  pointer-events: none;
  opacity: 0.5;
}
.tabs-trigger:not(.tabs-trigger--line) {
  border-radius: var(--tabs-trigger-radius);
  padding: var(--tabs-trigger-padding-block) var(--tabs-trigger-padding-inline);
}
.tabs-trigger:not(.tabs-trigger--line)[data-state="active"] {
  background-color: var(--tabs-trigger-active-background);
  color: var(--tabs-trigger-active-text);
  box-shadow: var(--tabs-trigger-active-shadow);
}
.tabs-trigger--line {
  padding: 0 var(--tabs-trigger-line-padding-inline);
  height: 100%;
  border-bottom: var(--tabs-trigger-line-indicator-width) solid transparent;
  border-radius: 0;
}
.tabs-trigger--line[data-state="active"] {
  border-bottom-color: var(--tabs-trigger-line-indicator-color);
  color: var(--tabs-trigger-active-text);
}

.tabs-content {
  margin-top: var(--tabs-content-gap);
  outline: none;
}
.tabs-content:focus-visible {
  outline: 2px solid var(--tabs-trigger-focus-ring);
  outline-offset: 2px;
}
}
@layer components{
/* TreeView component (tree) */
.tree {
  overflow: hidden;
  position: relative;
  padding: var(--tree-view-padding);
}

/* The tree's nested lists are structure only: no bullets. */
.tree ul {
  list-style: none;
}

/* tree-node / tree-leaf: relative positioning + ::before hover highlight only */
.tree-node,
.tree-leaf {
  position: relative;
}
.tree-node::before,
.tree-leaf::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  /* The trigger row: its padding plus the 1rem icon. */
  height: calc(var(--tree-view-node-padding) * 2 + 1rem);
  border-radius: var(--tree-view-row-radius);
  background-color: var(--tree-view-row-hover-background);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.15s ease;
}
.tree-node:hover::before,
.tree-leaf:hover::before { opacity: 1; }
.tree-node[data-selected]::before,
.tree-leaf[data-selected]::before {
  opacity: 1;
  background-color: var(--tree-view-row-selected-background);
}
.tree-node[data-selected],
.tree-leaf[data-selected] { color: var(--tree-view-row-selected-text); }

/* tree-trigger: button inside tree-node; both classes go on the same element */
.tree-trigger {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  padding: var(--tree-view-node-padding);
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s ease;
}
.tree-trigger[data-state="open"] .tree-chevron {
  transform: rotate(90deg);
}

.tree-chevron {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  margin-right: var(--tree-view-chevron-gap);
  color: var(--tree-view-chevron-color);
  transition: transform 0.2s ease;
}
.tree-icon {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  margin-right: var(--tree-view-icon-gap);
}
.tree-label {
  font-size: var(--tree-view-label-font-size);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Leaf item */
.tree-leaf {
  margin-left: var(--tree-view-leaf-indent);
  display: flex;
  text-align: left;
  align-items: center;
  padding: var(--tree-view-node-padding);
  cursor: pointer;
}
.tree-leaf-name {
  flex-grow: 1;
  font-size: var(--tree-view-label-font-size);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nested children container */
.tree-children {
  margin-left: var(--tree-view-children-indent);
  padding-left: var(--tree-view-children-padding-left);
  border-left: var(--tree-view-children-guide-width) solid var(--tree-view-children-guide-color);
  padding-bottom: var(--tree-view-children-padding-bottom);
}

/* Accordion content inside tree (same keyframes as accordion.css) */
.tree-accord-content {
  overflow: hidden;
  font-size: var(--tree-view-label-font-size);
}
.tree-accord-content[data-state="open"]   { animation: accordion-down 0.2s ease-out; }
.tree-accord-content[data-state="closed"] { animation: accordion-up 0.2s ease-out; }
}
@layer components{
/* EntityTree component (entity-tree) */
.entity-tree,
.entity-tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.entity-tree-children {
  padding-left: var(--entity-tree-children-indent);
}
.entity-tree-row {
  display: flex;
  align-items: center;
  gap: var(--entity-tree-row-gap);
  min-height: var(--entity-tree-row-min-height);
  padding: 0 var(--entity-tree-row-padding-inline);
  border-radius: var(--entity-tree-row-radius);
}
.entity-tree-row:hover {
  background-color: var(--entity-tree-row-hover-background);
}
.entity-tree-row[data-state="selected"] {
  background-color: var(--entity-tree-row-selected-background);
  color: var(--entity-tree-row-selected-text);
}
.entity-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--entity-tree-toggle-color);
  cursor: pointer;
}
.entity-tree-toggle svg {
  transition: transform 0.15s ease;
}
.entity-tree-toggle[data-state="open"] svg {
  transform: rotate(90deg);
}
.entity-tree-toggle-spacer {
  display: inline-block;
  width: 1.25rem;
}
.entity-tree-icon {
  flex-shrink: 0;
  color: var(--entity-tree-icon-color);
}
.entity-tree-title {
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entity-tree-actions {
  display: inline-flex;
  gap: var(--entity-tree-actions-gap);
  margin-left: var(--entity-tree-actions-margin-left);
}
.entity-tree-more {
  padding: var(--entity-tree-more-padding-block) 0 var(--entity-tree-more-padding-block) var(--entity-tree-more-indent);
}
.entity-tree-more-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--entity-tree-more-text);
  font-size: var(--entity-tree-more-font-size);
  cursor: pointer;
}
.entity-tree-more-button:hover {
  text-decoration: underline;
}
.entity-tree-loading,
.entity-tree-empty {
  padding: var(--entity-tree-empty-padding-block) 0 var(--entity-tree-empty-padding-block) var(--entity-tree-more-indent);
  color: var(--entity-tree-empty-text);
  font-size: var(--entity-tree-more-font-size);
}
}
@layer components{
/* MailThreadList component (mail-thread-list) */
.mail-thread-list-toolbar {
  display: flex;
  justify-content: flex-end;
}
.mail-thread-list-panes {
  display: flex;
  flex-direction: column;
  gap: var(--mail-thread-list-panes-gap);
}
.mail-thread-list[data-layout="beside"] .mail-thread-list-panes {
  flex-direction: row;
  align-items: flex-start;
}
.mail-thread-list[data-layout="beside"] .mail-thread-list-list {
  flex: 0 0 40%;
}
.mail-thread-list[data-layout="beside"] .mail-thread-list-pane {
  flex: 1 1 auto;
}
.mail-thread-list-list table {
  width: 100%;
  border-collapse: collapse;
}
.mail-thread-list-row {
  cursor: pointer;
  border-bottom: var(--mail-thread-list-row-border-width) solid var(--mail-thread-list-row-border-color);
}
.mail-thread-list-row td {
  padding: var(--mail-thread-list-row-padding-block) var(--mail-thread-list-row-padding-inline);
  vertical-align: top;
}
.mail-thread-list-row:hover {
  background-color: var(--mail-thread-list-row-hover-background);
}
.mail-thread-list-row[data-state~="selected"] {
  background-color: var(--mail-thread-list-row-selected-background);
  color: var(--mail-thread-list-row-selected-text);
}
.mail-thread-list-row[data-state~="unread"] .mail-thread-list-subject-button {
  font-weight: var(--mail-thread-list-row-unread-font-weight);
}
.mail-thread-list-subject-button {
  display: block;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mail-thread-list-unread {
  display: inline-block;
  width: var(--mail-thread-list-unread-size);
  height: var(--mail-thread-list-unread-size);
  border-radius: var(--radius-full);
  background-color: var(--mail-thread-list-unread-color);
}
.mail-thread-list-alert {
  color: var(--mail-thread-list-alert-color);
}
.mail-thread-list-participants {
  display: block;
  color: var(--mail-thread-list-participants-text);
  font-size: var(--mail-thread-list-participants-font-size);
}
.mail-thread-list-date,
.mail-thread-list-address {
  color: var(--mail-thread-list-date-text);
  font-size: var(--mail-thread-list-date-font-size);
}
.mail-thread-list-pane {
  padding: var(--mail-thread-list-pane-padding);
  background-color: var(--mail-thread-list-pane-background);
  border: var(--mail-thread-list-pane-border-width) solid var(--mail-thread-list-pane-border-color);
  border-radius: var(--mail-thread-list-pane-radius);
}
.mail-thread-list-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mail-thread-list-message {
  display: flex;
  flex-direction: column;
  gap: var(--mail-thread-list-message-gap);
  padding-block: var(--mail-thread-list-message-padding-block);
  border-top: var(--mail-thread-list-message-border-width) solid var(--mail-thread-list-message-border-color);
}
.mail-thread-list-message-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mail-thread-list-message-gap);
}
.mail-thread-list-body {
  white-space: pre-wrap;
}
.mail-thread-list-issues {
  list-style: none;
  margin: 0;
  padding: var(--mail-thread-list-issues-padding);
  background-color: var(--mail-thread-list-issues-background);
  border: var(--mail-thread-list-row-border-width) solid var(--mail-thread-list-issues-border-color);
  border-radius: var(--mail-thread-list-issues-radius);
}
.mail-thread-list-more {
  padding: 0;
  border: none;
  background: none;
  color: var(--mail-thread-list-more-text);
  font-size: var(--mail-thread-list-more-font-size);
  cursor: pointer;
}
.mail-thread-list-empty {
  color: var(--mail-thread-list-empty-text);
}
.mail-thread-list-attachments {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mail-thread-list-issues li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mail-thread-list-message-gap);
}
.mail-thread-list-issue-detail {
  flex-basis: 100%;
}
}
@layer components{
/* The folder pages and the folder-management view (system_folder_workflow): a one-line
   breadcrumb row, then two equal panes (the entity tree and the details pane) that fill
   the remaining height and scroll independently. */
.folder-page,
.folder-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.folder-view > .breadcrumbs {
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: var(--border-width) solid var(--color-border);
}
.folder-page > .two-col,
.folder-view > .two-col {
  flex: 1 1 auto;
  min-height: 0;
}
.folder-page-menu,
.folder-page-main {
  min-height: 0;
}
.folder-view-pane {
  padding: var(--space-4) var(--space-6);
  box-sizing: border-box;
}
.folder-view-details .entity-list-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-4);
}
/* Label / value pairs: the label is the muted one. */
.folder-view-details .entity-list-cell {
  color: var(--color-text);
}
.folder-view-details .entity-list-cell:first-child {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}
}
@layer components{
/* TwoColumnLayout (two-col) and TwoColumnPanel (two-col-panel) */
.two-col {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.two-col-left {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: var(--two-column-left-divider-width) solid var(--two-column-left-divider-color);
}
.two-col-right {
  flex: 1;
  overflow-y: auto;
}

.two-col-panel {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.two-col-panel-left {
  width: 33.333%;
  overflow-y: auto;
  border-right: var(--two-column-left-divider-width) solid var(--two-column-left-divider-color);
}
.two-col-panel-right {
  flex: 1;
  overflow-y: auto;
}
}
@layer components{
/* VerticalSplitPanel (v-split) */
.v-split {
  display: grid;
  grid-template-rows: var(--top-size) 6px var(--bottom-size);
  height: 100%;
  overflow: hidden;
}
.v-split-top,
.v-split-bottom {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.v-split-top > h4,
.v-split-bottom > h4 {
  flex-shrink: 0;
}
.v-split-top > .json-view,
.v-split-top > .log-tree-empty,
.v-split-bottom > .json-view,
.v-split-bottom > .log-tree-empty {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.v-split-handle {
  cursor: row-resize;
  background: var(--split-panel-handle-background);
  touch-action: none;
}
.v-split-handle:hover,
.v-split-handle:active {
  background: var(--split-panel-handle-hover-background);
}
}
@layer components{
/* FullPanel */
.full-panel {
  width: 100%;
  height: 100%;
}

/* FullPanel modifier: a single row of inline content (e.g. a list item —
   label + action button on one line), via the optional className prop. */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  width: auto;
  height: auto;
  border-bottom: var(--border-width) solid var(--color-border);
}
.list-row .text-display:where(:not([data-state="empty"])) {
  padding: var(--space-4) 0;
}
.list-row .action-button {
  padding: 0;
  border-top: none;
  flex-shrink: 0;
}

/* TextDisplay */
.text-display[data-state="empty"] {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--text-display-padding);
  color: var(--text-display-empty-text);
  font-size: var(--font-size-md);
  font-style: italic;
}
.text-display:where(:not([data-state="empty"])) {
  padding: var(--text-display-padding);
  font-size: var(--text-display-font-size);
  line-height: var(--text-display-line-height);
  white-space: pre-wrap;
}

/* JsonView */
.json-view[data-state="empty"] {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--json-view-padding);
  color: var(--json-view-empty-text);
  font-size: var(--json-view-empty-font-size);
  font-style: italic;
}
.json-view:where(:not([data-state="empty"])) {
  padding: var(--json-view-padding);
  font-size: var(--json-view-font-size);
  line-height: var(--json-view-line-height);
  white-space: pre-wrap;
  font-family: var(--json-view-font-family);
  overflow: auto;
}

/* ActionButton */
.action-button {
  padding: var(--action-button-padding-block) var(--action-button-padding-inline);
  border-top: var(--action-button-border-width) solid var(--action-button-border-color);
}

/* YouTubePlayer */
.yt-player {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--yt-player-padding);
  box-sizing: border-box;
}
.yt-player-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* GroupNavItem */
.group-nav {
  display: block;
  padding: var(--group-nav-padding-block) var(--group-nav-padding-inline);
  font-size: var(--group-nav-font-size);
  color: inherit;
  text-decoration: none;
  border-radius: var(--group-nav-radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.group-nav:hover {
  background-color: var(--group-nav-hover-background);
  color: var(--group-nav-hover-text);
}
.group-nav[data-disabled] {
  color: var(--group-nav-disabled-text);
  cursor: default;
}
.group-nav[data-disabled]:hover {
  background-color: transparent;
  color: var(--group-nav-disabled-text);
}

/* LogTreePanel */
.log-tree-empty {
  font-size: var(--log-tree-empty-font-size);
  color: var(--log-tree-empty-text);
  padding: var(--log-tree-empty-padding);
}

/* SimpleTabMessage */
.simple-tab-message {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.simple-tab-bar {
  display: flex;
  border-bottom: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface);
}
.simple-tab-button {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  border: none;
  border-bottom: var(--border-width-strong) solid transparent;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.simple-tab-button:hover { color: var(--color-text); }
.simple-tab-button[data-state="active"] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

/* Shared Tabs (shared/Tabs.tsx) */
.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-2) var(--space-2) 0;
  background-color: var(--color-surface);
}
.tab-button {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  border: none;
  border-bottom: var(--border-width-strong) solid transparent;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.tab-button:hover {
  color: var(--color-text);
  background-color: var(--color-surface-sunken);
}
.tab-button[data-state="active"] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}
}
@layer components{
/* SmartTabs (smart-tabs) and SmartTab (smart-tab-content) */
.smart-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.smart-tabs-tab-wrapper {
  display: inline-flex;
  align-items: stretch;
  border-right: var(--smart-tabs-tab-divider-width) solid;
  border-right-color: var(--smart-tabs-tab-divider-color);
}
.smart-tabs-close {
  padding-right: var(--smart-tabs-close-padding-inline-end);
  opacity: 0.4;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: var(--smart-tabs-close-indicator-width) solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--smart-tabs-close-font-size);
  transition: opacity 0.15s ease;
}
.smart-tabs-close:hover { opacity: 1; }
.smart-tabs-close[data-state="active"]  { border-bottom-color: var(--smart-tabs-close-active-indicator-color); }
.smart-tabs-close[data-state="inactive"] { border-bottom-color: transparent; }

.smart-tab-content {
  flex: 1;
  min-height: 0;
  margin-top: 0;
}
}
@layer components{
/* MultiFieldInput (multi-input) */
.multi-input {
  border-top: var(--multi-input-border-width) solid var(--multi-input-border-color);
  padding: var(--multi-input-padding);
  display: flex;
  flex-direction: column;
  gap: var(--multi-input-gap);
}
.multi-input-field {
  display: flex;
  flex-direction: column;
  gap: var(--multi-input-field-gap);
}
.multi-input-label {
  font-size: var(--multi-input-label-font-size);
  font-weight: var(--multi-input-label-font-weight);
  color: var(--multi-input-label-text);
}
.multi-input-value {
  padding: var(--multi-input-value-padding-block) var(--multi-input-value-padding-inline);
  font-size: var(--multi-input-value-font-size);
  color: var(--multi-input-value-text);
}
.multi-input-control {
  border: var(--multi-input-control-border-width) solid var(--multi-input-control-border-color);
  border-radius: var(--multi-input-control-radius);
  padding: var(--multi-input-control-padding-block) var(--multi-input-control-padding-inline);
  font-size: var(--multi-input-control-font-size);
  font-family: inherit;
  background-color: var(--multi-input-control-background);
  color: var(--multi-input-control-text);
  outline: none;
}
.multi-input-control:focus {
  box-shadow: 0 0 0 1px var(--multi-input-control-focus-ring-color);
}
.multi-input-submit {
  margin-top: var(--multi-input-submit-margin-top);
  align-self: flex-end;
}

/* A multi-line text field (e.g. a list of emails) and a multi-select list. */
.multi-input-textarea {
  min-height: 5rem;
  resize: vertical;
  font-family: inherit;
}
.multi-input-multiselect {
  min-height: 7rem;
}
}
@layer components{
/* MultipleChoiceQuiz (quiz) */
.quiz {
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quiz-question {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}
.quiz-option {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
}
.quiz-option--correct {
  background-color: var(--color-success-soft);
  color: var(--color-success);
  border: var(--border-width) solid var(--color-success-border);
}
.quiz-option--wrong {
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
  border: var(--border-width) solid var(--color-danger-border);
}
.quiz-option--unchosen {
  color: var(--color-text-muted);
  opacity: 0.5;
}
.quiz-option-key { font-weight: var(--font-weight-medium); }
.quiz-feedback {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-style: italic;
}
.quiz-btn {
  text-align: left;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-md);
  font-family: inherit;
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.quiz-btn:hover { background-color: var(--color-surface-sunken); }
}
@layer components{
/* DevPage (/dev component library) */
.dev-page {
  display: flex;
  height: 100vh;
  background-color: var(--color-surface);
}
.dev-page-nav {
  width: 14rem;
  flex-shrink: 0;
  border-right: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: color-mix(in srgb, var(--color-surface-sunken) 30%, transparent);
}
.dev-page-nav-header {
  padding: var(--space-6) var(--space-7);
  border-bottom: var(--border-width) solid var(--color-border);
}
.dev-page-nav-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dev-page-nav-group-label {
  padding: var(--space-7) var(--space-7) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dev-page-nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-7);
  font-size: var(--font-size-md);
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color 0.15s ease;
}
.dev-page-nav-btn:hover { background-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.dev-page-nav-btn[data-state="active"] {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: var(--font-weight-medium);
}
.dev-page-main {
  flex: 1;
  overflow: auto;
  padding: var(--space-10);
}
.dev-page-breadcrumb {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.dev-page-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-7);
}
.dev-page-empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}

/* The gallery (docs/spec/features/theming-skins.md — "The component gallery"). */
.dev-page--bare { height: auto; min-height: 100vh; }
.gallery-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface);
}
.gallery-toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.gallery-panes { display: flex; flex-direction: column; gap: var(--space-6); }
.gallery-panes--compare { flex-direction: row; align-items: flex-start; }
.gallery-panes--compare > .gallery-pane { flex: 1 1 0; min-width: 0; }
/* A pane carries its own data-skin / data-scheme / data-density, so it draws its own surface.
   The transform makes it the containing block for its dialogs' fixed overlays, so a
   dialog stays inside its pane. */
.gallery-pane {
  transform: translateZ(0);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
}
.dev-page--bare > .gallery-panes { flex: 1 1 auto; min-width: 0; }
.dev-page--bare .gallery-pane { border: none; border-radius: 0; }
.gallery-state { display: flex; flex-direction: column; gap: var(--space-3); }
.gallery-state-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gallery-state-error { color: var(--color-danger); font-size: var(--font-size-sm); }
.gallery-frame { max-width: 100%; }
/* Each state is its own containing block, so a fixed-position region (the user menu, the
   error panel) stays in its own frame instead of stacking in the pane's corner. */
.gallery-frame--box { position: relative; transform: translateZ(0); width: 30rem; height: 16rem; overflow: hidden; border: var(--border-width) dashed var(--color-border); }
.gallery-frame--narrow { width: 16rem; }
.gallery-frame--medium { width: 30rem; }
.gallery-frame--wide { width: 48rem; }
.gallery-frame--tall { width: 30rem; height: 26rem; }
/* A page-filling component (min-height: 100vh in the app) takes its content height here. */
.gallery-frame--page { width: 30rem; }
.gallery-frame--page .auth-container { min-height: 0; }
.gallery-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.gallery-lines { padding: var(--space-6) var(--space-7); }
.gallery-lines h4 { margin: 0 0 var(--space-4); }
.gallery-lines p { margin: var(--space-2) 0; }
.gallery-log {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.gallery-log-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); }
.gallery-log ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.gallery-log code { margin-left: var(--space-3); font-family: var(--font-mono); color: var(--color-text-muted); word-break: break-all; }
.gallery-log-kind {
  display: inline-block;
  min-width: 5rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* The token inspector: a press picks a part, outlined in every pane. */
.gallery-pane[data-inspecting] { cursor: crosshair; }
.gallery-pane[data-inspecting] * { cursor: crosshair; }
[data-gallery-picked] {
  outline: var(--border-width-strong) dashed var(--color-focus-ring);
  outline-offset: var(--space-1);
}
.token-inspector {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.token-inspector-summary { margin-bottom: var(--space-4); color: var(--color-text-muted); }
.token-inspector-summary code { font-family: var(--font-mono); color: var(--color-text); }
.token-inspector-table { border-collapse: collapse; width: 100%; }
.token-inspector-table th {
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}
.token-inspector-table td { padding: var(--space-1) var(--space-4); vertical-align: top; }
.token-inspector-table code { font-family: var(--font-mono); word-break: break-all; }
.token-inspector-row[data-state="inactive"] { color: var(--color-text-muted); }
.token-inspector-ref { padding-left: var(--space-6); color: var(--color-text-muted); }
.token-inspector-value { display: flex; align-items: center; gap: var(--space-3); }
/* The swatch draws the token itself (set inline as a custom property, never a color value). */
.token-inspector-swatch {
  --token-inspector-swatch: transparent;
  flex-shrink: 0;
  width: var(--space-7);
  height: var(--space-7);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--token-inspector-swatch);
}
}
@layer components{
/* ProgressBar (progress-bar) */
.progress-bar {
  width: 100%;
  box-sizing: border-box;
  padding: var(--progress-bar-padding-block) var(--progress-bar-padding-inline);
}

/* Percent mode */
.progress-bar--percent {
  display: flex;
  align-items: center;
  gap: var(--progress-bar-gap);
}
.progress-bar-track {
  flex: 1;
  height: 0.5rem;
  border-radius: var(--progress-bar-track-radius);
  background-color: var(--progress-bar-track-background);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--progress-bar-track-radius);
  background-color: var(--progress-bar-fill-background);
  transition: width 0.2s ease;
}
.progress-bar-percent-label {
  font-size: var(--progress-bar-label-font-size);
  font-weight: var(--progress-bar-label-font-weight);
  color: var(--progress-bar-label-text);
  min-width: 2.5rem;
  text-align: right;
}

/* Steps mode */
.progress-bar-steps {
  display: flex;
  align-items: flex-start;
}
.progress-bar-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.progress-bar-step-marker {
  display: flex;
  align-items: center;
  width: 100%;
}
.progress-bar-step-dot {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--progress-bar-track-radius);
  background-color: var(--progress-bar-dot-background);
  border: var(--progress-bar-dot-border-width) solid var(--progress-bar-dot-border-color);
}
.progress-bar-step[data-state="completed"] .progress-bar-step-dot,
.progress-bar-step[data-state="active"] .progress-bar-step-dot {
  background-color: var(--progress-bar-fill-background);
  border-color: var(--progress-bar-fill-background);
}
.progress-bar-step-connector {
  flex: 1;
  height: 2px;
  background-color: var(--progress-bar-connector-background);
  margin: 0 var(--progress-bar-connector-gap);
}
.progress-bar-step-connector[data-state="filled"] {
  background-color: var(--progress-bar-fill-background);
}
.progress-bar-step-label {
  margin-top: var(--progress-bar-label-gap);
  font-size: var(--progress-bar-label-step-font-size);
  color: var(--progress-bar-label-text);
  text-align: center;
}
.progress-bar-step[data-state="active"] .progress-bar-step-label {
  color: var(--progress-bar-label-active-text);
  font-weight: var(--progress-bar-label-font-weight);
}
}
@layer components{
/* Dialog */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: var(--dialog-backdrop-background);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.dialog-content {
  background: var(--dialog-panel-background);
  color: var(--dialog-panel-text);
  border: var(--dialog-panel-border-width) solid var(--dialog-panel-border-color);
  border-radius: var(--dialog-panel-radius);
  box-shadow: var(--dialog-panel-shadow);
  min-width: 320px;
  max-width: 90vw;
  max-height: 85vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dialog-header-padding-block) var(--dialog-header-padding-inline);
  border-bottom: var(--dialog-header-border-width) solid var(--dialog-header-border-color);
}
.dialog-title {
  font-size: var(--dialog-title-font-size);
  font-weight: var(--dialog-title-font-weight);
  margin: 0;
}
.dialog-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--dialog-close-font-size);
  line-height: var(--line-height-none);
  color: var(--dialog-close-text);
  padding: var(--dialog-close-padding);
}
.dialog-close:hover {
  color: var(--dialog-close-hover-text);
}
.dialog-body {
  padding: var(--dialog-body-padding);
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.dialog-input {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border: var(--border-width) solid var(--color-input-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-family: inherit;
  box-sizing: border-box;
}
.dialog-input:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
}
@layer components{
/* WritingArea */
.writing-area {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: var(--writing-area-padding-block) var(--writing-area-padding-inline);
  border: var(--writing-area-border-width) solid var(--writing-area-border-color);
  border-radius: var(--writing-area-radius);
  background-color: var(--writing-area-background);
  color: var(--writing-area-text);
  resize: none;
  overflow-y: hidden;
  outline: none;
}
.writing-area:focus {
  box-shadow: 0 0 0 1px var(--writing-area-focus-ring);
}
.writing-area--fixed {
  overflow-y: auto;
}
.writing-area:disabled {
  background-color: var(--writing-area-disabled-background);
  cursor: not-allowed;
}
.writing-area-lock-hint {
  margin: var(--writing-area-hint-gap) 0 0;
  font-size: var(--writing-area-hint-font-size);
  color: var(--writing-area-hint-text);
}
}
@layer components{

.asset-preview {
  margin: var(--asset-preview-margin-block) 0;
}

.asset-preview-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--asset-preview-media-radius);
}

.asset-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--asset-preview-placeholder-gap);
  width: 100%;
  padding: var(--asset-preview-placeholder-padding);
  color: var(--asset-preview-placeholder-text);
  background: var(--asset-preview-placeholder-background);
  border: var(--asset-preview-placeholder-border-width) solid var(--asset-preview-placeholder-border-color);
  border-radius: var(--asset-preview-media-radius);
}

.asset-preview-placeholder p {
  margin: 0;
  font-size: var(--asset-preview-placeholder-font-size);
}

.asset-preview-frame {
  width: 400px;
  max-width: 100%;
}
}
@layer components{
/* ThemePicker (theme-picker): three rows of options, each with a swatch drawn from that
   option's own theme (its data-* attribute sets the tokens on the swatch). */
.theme-picker {
  display: flex;
  flex-direction: column;
  gap: var(--theme-picker-gap);
  padding: var(--theme-picker-padding-block) 0;
}
.theme-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--theme-picker-row-gap);
  border: var(--theme-picker-row-border-width) solid var(--theme-picker-row-border-color);
  border-radius: var(--theme-picker-row-radius);
  padding: var(--theme-picker-row-padding-block) var(--theme-picker-row-padding-inline);
  margin: 0;
}
.theme-picker-legend {
  font-size: var(--theme-picker-legend-font-size);
  font-weight: var(--theme-picker-legend-font-weight);
  color: var(--theme-picker-legend-text);
  padding: 0 var(--theme-picker-legend-padding-inline);
}
.theme-picker-option {
  display: flex;
  align-items: center;
  gap: var(--theme-picker-option-gap);
  font-size: var(--theme-picker-option-font-size);
  color: var(--theme-picker-option-text);
  cursor: pointer;
}
.theme-picker-row:disabled .theme-picker-option {
  cursor: not-allowed;
  color: var(--theme-picker-option-disabled-text);
}
.theme-picker-swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}
.theme-picker-swatch-accent {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}
}
@layer components{
/* AssetBrowser (asset-browser): a file list beside the selected asset's details. */
.asset-browser .two-col-panel-left {
  flex: 0 0 min(16rem, 50%);
}
.asset-list {
  list-style: none;
  margin: 0;
  padding: var(--asset-browser-list-padding);
  display: flex;
  flex-direction: column;
  gap: var(--asset-browser-list-gap);
}
.asset-list-item > button {
  display: flex;
  align-items: center;
  gap: var(--asset-browser-row-gap);
  width: 100%;
  min-height: var(--asset-browser-row-min-height);
  padding: var(--asset-browser-row-padding-block) var(--asset-browser-row-padding-inline);
  border: none;
  border-radius: var(--asset-browser-row-radius);
  background: transparent;
  color: var(--asset-browser-row-text);
  font-family: inherit;
  font-size: var(--asset-browser-row-font-size);
  text-align: left;
  cursor: pointer;
}
.asset-list-item > button > svg {
  flex-shrink: 0;
  color: var(--asset-browser-row-icon-color);
}
.asset-list-item > button > span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-list-item > button:hover {
  background: var(--asset-browser-row-hover-background);
}
.asset-list-item[data-state="selected"] > button {
  background: var(--asset-browser-row-selected-background);
}
.asset-status {
  font-size: var(--asset-browser-status-font-size);
  color: var(--asset-browser-status-text);
}
.asset-detail {
  container-type: inline-size;
  padding: var(--asset-browser-detail-padding);
  display: flex;
  flex-direction: column;
  gap: var(--asset-browser-detail-gap);
}
.asset-detail h3 {
  margin: 0;
  font-size: var(--asset-browser-detail-title-font-size);
  font-weight: var(--asset-browser-detail-title-font-weight);
}
.asset-detail dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--asset-browser-detail-column-gap);
  row-gap: var(--asset-browser-detail-row-gap);
  font-size: var(--asset-browser-detail-font-size);
}
.asset-detail dt {
  color: var(--asset-browser-detail-label-text);
}
.asset-detail dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* A narrow details pane puts each label above its value. */
@container (max-width: 18rem) {
  .asset-detail dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .asset-detail dd + dt {
    margin-top: var(--asset-browser-detail-row-gap);
  }
}
.asset-detail-metadata summary {
  font-size: var(--asset-browser-metadata-font-size);
  color: var(--asset-browser-metadata-text);
  cursor: pointer;
}
.asset-list-empty,
.asset-detail-empty {
  margin: 0;
  padding: var(--asset-browser-empty-padding);
  color: var(--asset-browser-empty-text);
  font-size: var(--asset-browser-empty-font-size);
}
}
@layer components{
/* EntityList (entity-list): one row per item, its cells side by side. */
.entity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--entity-list-background);
  border: var(--entity-list-border-width) solid var(--entity-list-border-color);
  border-radius: var(--entity-list-radius);
  overflow: hidden;
}
.entity-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--entity-list-row-gap);
  min-height: var(--entity-list-row-min-height);
  padding: var(--entity-list-row-padding-block) var(--entity-list-row-padding-inline);
  border-bottom: var(--entity-list-row-border-width) solid var(--entity-list-row-border-color);
}
.entity-list-row:last-child {
  border-bottom: none;
}
.entity-list-row:hover {
  background: var(--entity-list-row-hover-background);
}
.entity-list-cell {
  font-size: var(--entity-list-cell-font-size);
  color: var(--entity-list-cell-text);
  min-width: 0;
  overflow-wrap: anywhere;
}
.entity-list-cell:first-child {
  color: var(--entity-list-cell-first-text);
  font-weight: var(--entity-list-cell-first-font-weight);
}
/* The first button cell, and every cell after it, sit at the row's end. */
.entity-list-cell:has(> button) {
  margin-left: auto;
}
.entity-list-cell:has(> button) ~ .entity-list-cell {
  margin-left: 0;
}
.entity-list-link {
  color: var(--entity-list-link-text);
  text-decoration: none;
}
.entity-list-link:hover {
  text-decoration: underline;
}
.entity-list-empty {
  margin: 0;
  color: var(--entity-list-empty-text);
  font-size: var(--entity-list-empty-font-size);
}
}
@layer components{
/* Pager (pager): Previous / status / Next. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pager-gap);
}
.pager [data-part="action"] {
  min-height: var(--pager-action-min-height);
  padding: 0 var(--pager-action-padding-inline);
  font-family: inherit;
  font-size: var(--pager-action-font-size);
  font-weight: var(--pager-action-font-weight);
  color: var(--pager-action-text);
  background: var(--pager-action-background);
  border: var(--pager-action-border-width) solid var(--pager-action-border-color);
  border-radius: var(--pager-action-radius);
  cursor: pointer;
}
.pager [data-part="action"]:hover:not(:disabled) {
  background: var(--pager-action-hover-background);
}
.pager [data-part="action"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pager-status {
  font-size: var(--pager-status-font-size);
  color: var(--pager-status-text);
  font-variant-numeric: tabular-nums;
}
}
@layer components{
/* FileUpload (file-upload): a labelled file input, its browser button styled like an
   outline button. */
.file-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--file-upload-gap);
}
.file-upload-label {
  display: flex;
  flex-direction: column;
  gap: var(--file-upload-label-gap);
  font-size: var(--file-upload-label-font-size);
  font-weight: var(--file-upload-label-font-weight);
}
.file-upload [data-part="input"] {
  font-family: inherit;
  font-size: var(--file-upload-input-font-size);
  font-weight: var(--file-upload-input-font-weight);
  color: var(--file-upload-input-text);
}
.file-upload [data-part="input"]::file-selector-button {
  margin-right: var(--file-upload-input-button-gap);
  min-height: var(--file-upload-input-button-min-height);
  padding: 0 var(--file-upload-input-button-padding-inline);
  font-family: inherit;
  font-size: var(--file-upload-input-font-size);
  font-weight: var(--file-upload-input-button-font-weight);
  color: var(--file-upload-input-button-text);
  background: var(--file-upload-input-button-background);
  border: var(--file-upload-input-button-border-width) solid var(--file-upload-input-button-border-color);
  border-radius: var(--file-upload-input-button-radius);
  cursor: pointer;
}
.file-upload [data-part="input"]:hover:not(:disabled)::file-selector-button {
  background: var(--file-upload-input-button-hover-background);
}
.file-upload [data-part="input"]:disabled {
  opacity: 0.5;
}
.file-upload [data-part="input"]:disabled::file-selector-button {
  cursor: not-allowed;
}
.file-upload-status,
.file-upload-error {
  margin: 0;
  font-size: var(--file-upload-status-font-size);
}
.file-upload-status {
  color: var(--file-upload-status-text);
}
.file-upload-error {
  font-size: var(--file-upload-error-font-size);
  color: var(--file-upload-error-text);
}
}
/* What global.css itself held before theming. It stays after the component stylesheets,
   so ties between the two resolve as they always did. */
@layer components{
/* Sign-in and registration: forms, buttons and messages. */
/* Auth pages */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--auth-form-padding);
}

.auth-card {
  background: var(--auth-form-card-background);
  border-radius: var(--auth-form-card-radius);
  padding: var(--auth-form-card-padding);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--auth-form-card-shadow);
}

.auth-card h1 {
  margin-bottom: var(--auth-form-title-gap);
  font-size: var(--auth-form-title-font-size);
}

.auth-link {
  margin-top: var(--auth-form-footer-gap);
  text-align: center;
  color: var(--auth-form-footer-text);
}

.auth-link a,
.auth-link .link-button {
  color: var(--auth-form-link-text);
  text-decoration: none;
}

.auth-link .link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* Forms */
.form-group {
  margin-bottom: var(--auth-form-field-gap);
}

.form-group label {
  display: block;
  margin-bottom: var(--auth-form-label-gap);
  font-weight: var(--auth-form-label-font-weight);
  font-size: var(--auth-form-label-font-size);
}

.form-group input {
  width: 100%;
  padding: var(--auth-form-input-padding-block) var(--auth-form-input-padding-inline);
  border: var(--auth-form-input-border-width) solid var(--auth-form-input-border-color);
  border-radius: var(--auth-form-input-radius);
  font-size: var(--auth-form-input-font-size);
  transition: border-color 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: var(--auth-form-input-focus-border-color);
}

/* Buttons */
.btn-primary {
  display: block;
  width: 100%;
  padding: var(--auth-form-submit-padding);
  background: var(--auth-form-submit-background);
  color: var(--auth-form-submit-text);
  border: none;
  border-radius: var(--auth-form-input-radius);
  font-size: var(--auth-form-input-font-size);
  font-weight: var(--auth-form-submit-font-weight);
  cursor: pointer;
  margin-top: var(--auth-form-submit-gap);
  transition: background 0.2s;
}

.btn-primary:hover:not(:disabled) {
  background: var(--auth-form-submit-hover-background);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  padding: var(--space-4) var(--space-7);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-input-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}

.btn-secondary:hover {
  background: var(--color-surface-sunken);
}

/* Divider */
.divider {
  display: flex;
  align-items: center;
  gap: var(--auth-form-divider-gap);
  margin: var(--auth-form-divider-margin-block) 0;
  color: var(--auth-form-divider-text);
  font-size: var(--auth-form-divider-font-size);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-top: var(--auth-form-divider-line-width) solid var(--auth-form-divider-line-color);
}

/* Google button */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--auth-form-google-gap);
  width: 100%;
  padding: var(--auth-form-google-padding);
  background: var(--auth-form-google-background);
  color: var(--auth-form-google-text);
  border: var(--auth-form-input-border-width) solid var(--auth-form-input-border-color);
  border-radius: var(--auth-form-input-radius);
  font-size: var(--auth-form-input-font-size);
  font-weight: var(--auth-form-google-font-weight);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
}

.btn-google:hover {
  background: var(--auth-form-google-hover-background);
  box-shadow: var(--auth-form-google-hover-shadow);
}

/* Messages */
.error-message {
  background: var(--auth-form-error-background);
  color: var(--auth-form-error-text);
  border: var(--auth-form-error-border-width) solid var(--auth-form-error-border-color);
  border-radius: var(--auth-form-input-radius);
  padding: var(--auth-form-error-padding);
  margin-bottom: var(--auth-form-field-gap);
  font-size: var(--auth-form-error-font-size);
}

.success-message {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: var(--border-width) solid var(--color-success-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
  font-size: var(--font-size-md);
}
}
@layer components{
/* Page layout, tables, cards and settings (the remaining React pages). */
/* Pages */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-header {
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-7) var(--space-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-header nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.page-header nav span {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}

.group-breadcrumbs {
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-4) var(--space-10);
  font-size: var(--font-size-md);
}

.group-breadcrumbs .breadcrumb-separator {
  color: var(--color-text-muted);
}

.page main {
  padding: var(--space-10);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.page main h2 {
  margin-bottom: var(--space-7);
}

/* Users table */
.users-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.users-table th,
.users-table td {
  padding: var(--space-6) var(--space-7);
  text-align: left;
  border-bottom: var(--border-width) solid var(--color-border);
}

.users-table th {
  background: var(--color-surface-sunken);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.users-table tr:last-child td {
  border-bottom: none;
}

/* Dashboard */
.dashboard-welcome {
  margin-bottom: var(--space-9);
  color: var(--color-text-muted);
}

.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-7);
}

.role-card {
  display: block;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-9);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.role-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.role-card h2 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
  color: var(--color-primary);
}

.role-card p {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

/* Profile list */
.profile-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-4) var(--space-9);
  font-size: var(--font-size-base);
}

.profile-list dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.profile-list dd {
  color: var(--color-text);
}

/* Role cell */
.role-cell {
  text-align: center;
}

/* Badge */
.badge {
  display: inline-block;
  margin-left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* Settings */
.settings-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  max-width: 540px;
  box-shadow: var(--shadow-md);
}

.settings-card h2 {
  margin-bottom: var(--space-9);
}

.settings-card h3 {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-base);
}

.settings-card hr {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-9) 0 var(--space-7);
}

.hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-7);
}
}
@layer components{
/* Chat: the chat grid and window, messages, and content colors. */
/* Chat grid */
.chat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin-top: var(--space-9);
}

/* Chat window */
.chat-window {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  height: 480px;
}

.chat-header {
  padding: var(--space-5) var(--space-7);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--chat-body-padding);
  display: flex;
  flex-direction: column;
  gap: var(--chat-body-gap);
}

.chat-empty {
  color: var(--chat-body-empty-text);
  text-align: center;
  margin-top: var(--chat-body-empty-margin-top);
  font-size: var(--chat-body-empty-font-size);
}

.chat-message {
  background: var(--chat-body-message-background);
  border-radius: var(--chat-body-message-radius);
  padding: var(--chat-body-message-padding-block) var(--chat-body-message-padding-inline);
  max-width: 80%;
}

.chat-message--user-text {
  align-self: flex-end;
  background: var(--chat-body-message-user-background);
  color: var(--chat-body-message-user-text);
}

.chat-message--user-text .chat-message__author,
.chat-message--user-text .chat-message__text {
  color: var(--chat-body-message-user-text);
}

.chat-message--ai-reply,
.chat-message--system {
  align-self: flex-start;
  background: var(--chat-body-message-background);
  color: var(--chat-body-message-text);
}

.chat-message--ai-ack {
  align-self: flex-start;
  background: var(--chat-body-message-background);
  color: var(--chat-body-message-ack-text);
  font-style: italic;
  opacity: 0.85;
}

.chat-message__author {
  display: block;
  font-weight: var(--chat-body-author-font-weight);
  font-size: var(--chat-body-author-font-size);
  margin-bottom: var(--chat-body-author-gap);
}

.chat-message__text {
  font-size: var(--chat-body-text-font-size);
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-message__speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--chat-body-speak-gap);
  padding: 0;
  border: none;
  border-radius: var(--chat-body-speak-radius);
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  vertical-align: middle;
  transition: opacity 0.15s, background 0.15s;
}

.chat-message__speak-btn:hover {
  opacity: 1;
  background: var(--chat-body-speak-hover-background);
}

.chat-message--user-text .chat-message__speak-btn:hover {
  background: var(--chat-body-speak-user-hover-background);
}

.chat-message-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.chat-from {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

.chat-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.chat-text {
  font-size: var(--font-size-base);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text);
}

.chat-form {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}

.chat-input-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chat-color-swatches {
  display: flex;
  gap: var(--space-2);
}

.chat-color-swatch {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: var(--border-width-strong) solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.1s;
}

.chat-color-swatch:hover {
  transform: scale(1.2);
}

.chat-color-swatch[data-state="active"] {
  border-color: var(--color-text);
  transform: scale(1.2);
}

.chat-target-select {
  padding: var(--space-5) var(--space-4);
  border: var(--border-width) solid var(--color-input-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  align-self: flex-end;
}

.chat-target-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.chat-input {
  display: flex;
  align-items: flex-end;
  gap: var(--chat-input-gap);
  padding: var(--chat-input-padding-block) var(--chat-input-padding-inline);
  border: var(--chat-input-border-width) solid var(--chat-input-border-color);
  border-radius: var(--chat-input-radius);
}

.chat-input:focus-within {
  border-color: var(--chat-input-focus-border-color);
}

.chat-input__field {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-size: var(--chat-input-field-font-size);
  font-family: inherit;
  line-height: var(--chat-input-field-line-height);
  padding: 0;
  max-height: 200px;
}

.chat-send {
  padding: var(--chat-input-send-padding-block) var(--chat-input-send-padding-inline);
  background: var(--chat-input-send-background);
  color: var(--chat-input-send-text);
  border: none;
  border-radius: var(--chat-input-send-radius);
  font-size: var(--chat-input-send-font-size);
  font-weight: var(--chat-input-send-font-weight);
  cursor: pointer;
  align-self: flex-end;
  transition: background 0.2s;
}

.chat-send:hover:not(:disabled) {
  background: var(--chat-input-send-hover-background);
}

.chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* TargetPortal: a message aimed at a target element that never appeared. */
.target-portal-error {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--color-danger);
  color: var(--color-text-on-danger);
}

/* Content colors (libs/theming CONTENT_COLORS): a name a user or workflow picked, drawn
   in the reader's own scheme. A swatch shows its color as its background. */
.content-color-red { color: var(--color-content-red); }
.content-color-orange { color: var(--color-content-orange); }
.content-color-green { color: var(--color-content-green); }
.content-color-blue { color: var(--color-content-blue); }
.content-color-purple { color: var(--color-content-purple); }
.content-color-pink { color: var(--color-content-pink); }
.chat-color-swatch { background: currentColor; }
}
@layer components{
/* DocumentList / DocumentBrowser (doc-list), NewDocument (doc-create-form), and LayoutDocumentView's error (doc-error) */
.doc-empty {
  color: var(--document-list-empty-text);
  font-size: var(--document-list-empty-font-size);
  margin-bottom: var(--document-list-empty-margin-bottom);
}

.doc-error {
  color: var(--color-danger);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-7);
  padding: var(--space-6) var(--space-7);
  background: var(--color-danger-soft);
  border: var(--border-width) solid var(--color-danger-border);
  border-radius: var(--radius-md);
}

.doc-list {
  list-style: none;
  margin-bottom: var(--document-list-margin-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--document-list-gap);
}

.doc-name {
  font-weight: var(--document-list-name-font-weight);
  font-size: var(--document-list-name-font-size);
}

.doc-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--document-list-row-padding-block) var(--document-list-row-padding-inline);
  border: var(--document-list-row-border-width) solid var(--document-list-row-border-color);
  border-radius: var(--document-list-row-radius);
}

.doc-open-btn {
  padding: var(--document-list-open-padding-block) var(--document-list-open-padding-inline);
  font-size: var(--document-list-open-font-size);
  line-height: var(--document-list-open-line-height);
  background: var(--document-list-open-background);
  color: var(--document-list-open-text);
  border: var(--document-list-open-border-width) solid var(--document-list-open-border-color);
  border-radius: var(--document-list-open-radius);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.doc-open-btn:hover {
  background: var(--document-list-open-hover-background);
  color: var(--document-list-open-hover-text);
}

.doc-create-form {
  display: flex;
  gap: var(--new-document-gap);
}

.doc-create-input {
  flex: 1;
  padding: var(--new-document-input-padding-block) var(--new-document-input-padding-inline);
  border: var(--new-document-input-border-width) solid var(--new-document-input-border-color);
  border-radius: var(--new-document-input-radius);
  font-size: var(--new-document-input-font-size);
  font-family: inherit;
}

.doc-create-input:focus {
  outline: none;
  border-color: var(--new-document-input-focus-border-color);
}
}
@layer components{
/* ── SPA shell (docs/spec/features/routing-navigation-system-tray.md) ───────── */
.app-shell { position: relative; min-height: 100vh; }
.main-section { min-height: 100vh; }
.system-tray {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  /* Room on the right for the user icon, which floats over the tray. */
  --system-tray-icon-room: 72px;
  min-height: 48px; padding: var(--system-tray-padding-block) var(--system-tray-icon-room) var(--system-tray-padding-block) var(--system-tray-padding-left);
  background: var(--system-tray-background); border-bottom: var(--system-tray-border-width) solid var(--system-tray-border-color); box-shadow: var(--system-tray-shadow);
  transform: translateY(-100%); transition: transform 150ms ease-out;
}
.system-tray[data-state="open"] { transform: translateY(0); }
.user-icon-menu { position: fixed; top: 8px; right: 12px; z-index: 60; }
.user-icon {
  width: 36px; height: 36px; border-radius: var(--user-icon-menu-icon-radius); border: none; cursor: pointer;
  background: var(--user-icon-menu-icon-background); color: var(--user-icon-menu-icon-text); font-weight: var(--user-icon-menu-icon-font-weight); font-size: var(--user-icon-menu-icon-font-size);
}
.user-icon[data-state="signed-out"] { background: var(--user-icon-menu-icon-signed-out-background); }
.user-menu {
  position: absolute; right: 0; top: 44px; min-width: 160px; margin: 0; padding: var(--user-icon-menu-menu-padding-block) 0; list-style: none;
  background: var(--user-icon-menu-menu-background); border: var(--user-icon-menu-menu-border-width) solid var(--user-icon-menu-menu-border-color); border-radius: var(--user-icon-menu-menu-radius); box-shadow: var(--user-icon-menu-menu-shadow);
}
.user-menu button { width: 100%; padding: var(--user-icon-menu-item-padding-block) var(--user-icon-menu-item-padding-inline); text-align: left; background: none; border: none; cursor: pointer; }
.user-menu button:hover { background: var(--user-icon-menu-item-hover-background); }
.error-panel {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 55;
  /* Room on the right for the close button. */
  --error-panel-close-room: 36px;
  width: min(640px, calc(100% - 32px)); padding: var(--error-panel-padding-block) var(--error-panel-close-room) var(--error-panel-padding-block) var(--error-panel-padding-left);
  background: var(--error-panel-background); border: var(--error-panel-border-width) solid var(--error-panel-border-color); border-radius: var(--error-panel-radius); color: var(--error-panel-text);
}
.error-panel ul { margin: 0; padding: 0; list-style: none; }
.error-panel li { display: flex; justify-content: space-between; gap: var(--error-panel-item-gap); padding: var(--error-panel-item-padding-block) 0; }
.error-panel button { background: none; border: none; cursor: pointer; color: inherit; font-size: var(--error-panel-dismiss-font-size); }
.error-panel-close { position: absolute; top: 4px; right: 8px; }
.error-panel-empty { margin: var(--error-panel-empty-margin-block) 0; color: var(--error-panel-empty-text); }
.breadcrumbs { font-size: var(--breadcrumbs-font-size); }
.breadcrumb-sep { color: var(--breadcrumbs-separator-color); }
/* The banner's breadcrumb design: a group line, an entity line below it. */
.breadcrumbs--lines { display: flex; flex-direction: column; gap: var(--breadcrumbs-lines-gap); }
.breadcrumb-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--breadcrumbs-line-gap); }
.breadcrumb-link { display: inline-flex; align-items: center; gap: var(--breadcrumbs-link-gap); }
.breadcrumb-icon { flex-shrink: 0; color: var(--breadcrumbs-icon-color); }
.breadcrumb-edit { display: inline-flex; margin-left: var(--breadcrumbs-edit-margin-left); color: var(--breadcrumbs-edit-color); }
.breadcrumb-edit:hover { color: var(--breadcrumbs-edit-hover-color); }
.breadcrumb-more { position: relative; }
.breadcrumb-more-toggle { background: none; border: none; cursor: pointer; padding: 0 var(--breadcrumbs-more-padding-inline); font: inherit; color: inherit; }
.breadcrumb-more-list {
  position: absolute; top: 100%; left: 0; z-index: 70; min-width: 160px; margin: var(--breadcrumbs-more-list-offset) 0 0; padding: var(--breadcrumbs-more-list-padding-block) 0; list-style: none;
  background: var(--breadcrumbs-more-list-background); border: var(--breadcrumbs-more-list-border-width) solid var(--breadcrumbs-more-list-border-color); border-radius: var(--breadcrumbs-more-list-radius); box-shadow: var(--breadcrumbs-more-list-shadow);
}
.breadcrumb-more-list li { padding: var(--breadcrumbs-more-list-item-padding-block) var(--breadcrumbs-more-list-item-padding-inline); white-space: nowrap; }
}