/* Generated by scripts/build-css.mjs from res/css/src. Do not edit by hand. */

/* 00-tokens.css */
/* UNIQ tokens: the only place where raw values live. Source of truth: DESIGN.md (front matter). */

/* Scales: theme-independent primitives. */
:root {
  --ei-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ei-type-caption: 12px;   --ei-leading-caption: 16px;
  --ei-type-label: 13px;     --ei-leading-label: 18px;
  --ei-type-body: 14px;      --ei-leading-body: 20px;
  --ei-type-title-sm: 16px;  --ei-leading-title-sm: 24px;
  --ei-type-title: 20px;     --ei-leading-title: 28px;
  --ei-type-page: 24px;      --ei-leading-page: 32px;
  --ei-type-metric: 28px;    --ei-leading-metric: 34px;
  --ei-type-input-touch: 16px; /* prevents iOS zoom on focus */
  --ei-weight-regular: 400;
  --ei-weight-medium: 500;
  --ei-weight-strong: 600;
  --ei-tracking-page: -0.02em;

  --ei-space-1: 4px;
  --ei-space-2: 8px;
  --ei-space-3: 12px;
  --ei-space-4: 16px;
  --ei-space-5: 20px;
  --ei-space-6: 24px;
  --ei-space-7: 32px;
  --ei-space-8: 40px;
  --ei-space-9: 48px;

  --ei-radius-sm: 6px;
  --ei-radius-md: 8px;
  --ei-radius-lg: 12px;
  --ei-radius-pill: 999px;

  --ei-control-sm: 32px;
  --ei-control-md: 36px;
  --ei-control-lg: 40px;
  --ei-control-touch: 44px;
  --ei-target-min: 24px; /* smallest pointer target, WCAG 2.5.8 */
  --ei-icon-sm: 16px;
  --ei-icon-md: 18px;
  --ei-icon-lg: 24px;
  --ei-media-bg: #000; /* letterbox behind video in both themes */
  --ei-checkbox: 20px;
  --ei-checkbox-radius: 5px;
  --ei-check-mark-w: 11px;
  --ei-check-mark-h: 7px;
  --ei-dot: 6px;
  --ei-track: 6px;
  --ei-hairline: 1px;
  --ei-rule: 2px;
  --ei-focus-width: 3px;
  --ei-focus-offset: 2px;
  --ei-underline-offset: 3px;
  --ei-pill-pad-y: 2px;
  --ei-cell-pad-y: 10px;
  --ei-cell-pad-x: 12px;
  --ei-control-pad-y: 7px;
  --ei-control-pad-x: 12px;
  --ei-button-pad-x: 14px;

  /* Layout dimensions. Only page and component CSS reads these. */
  --ei-content-max: 1440px;
  --ei-settings-max: 1240px;
  --ei-form-max: 560px;
  --ei-frame-phone: 390px; /* phone preview frame of the component library */
  --ei-wide-form-max: 800px;
  --ei-portal-max: 1120px;
  --ei-reading-max: 72ch;
  --ei-topbar: 48px;
  --ei-bottom-nav-h: 56px;  /* student cabinet tab bar on a phone */
  --ei-safe-bottom: env(safe-area-inset-bottom, 0px);  /* home indicator inset on phones */
  --ei-col-context: 340px;
  --ei-col-context-min: 300px;
  --ei-col-list: 320px;
  --ei-col-list-min: 280px;
  --ei-col-aside: 340px;
  --ei-col-aside-min: 260px;
  --ei-col-rail: 200px;
  --ei-col-rail-narrow: 170px;
  --ei-col-card-min: 280px;
  --ei-col-filter-min: 120px;
  --ei-col-search-min: 240px;
  --ei-col-pipeline: 232px;
  --ei-col-pipeline-mobile: 252px;
  --ei-table-min: 960px;
  --ei-cell-primary-min: 250px;
  --ei-cell-wide-min: 200px;
  --ei-cell-min: 130px;
  --ei-menu-min: 240px;
  --ei-menu-max: 360px;
  --ei-tour-width: 440px;
  --ei-tour-wide: 620px;
  --ei-tour-max-h: 720px;
  --ei-qr: 256px;
  --ei-textarea-min: 112px;
  --ei-textarea-compact: 88px;
  --ei-feed-max-h: 760px;
  --ei-feed-min-h: 320px;
  --ei-pipeline-max-h: 640px;
  --ei-sticky-offset: 60px;
  --ei-field-gap: 6px;
  --ei-avatar-sm: 24px;
  --ei-avatar-md: 32px;
  --ei-avatar-lg: 48px;
  --ei-marker: 24px;
  --ei-chart-h: 200px;
  --ei-chart-gutter: 48px;
  --ei-bar-max: 24px;
  --ei-bar-radius: 4px;
  --ei-dot-mark: 8px;
  --ei-donut: 160px;
  --ei-rank-bar: 96px;
  --ei-sparkline-h: 32px;
  --ei-calstrip-day: 56px;
  --ei-drawer-w: 480px;
  --ei-dialog-wide: 800px;
  --ei-toast-w: 360px;
  --ei-tooltip-max: 280px;
  --ei-tip-offset: 8px;
  --ei-calstrip-time: 72px;

  --ei-duration-none: 0s;
  --ei-duration-fast: 120ms;
  --ei-duration-base: 180ms;
  --ei-ease: cubic-bezier(.2, 0, 0, 1);

  --ei-z-raised: 2;
  --ei-z-sticky: 900;
  --ei-z-dropdown: 1000;
  --ei-z-drawer: 1040;
  --ei-z-modal: 1050;
  --ei-z-toast: 1080;
  --ei-z-tour: 1100;

  --ei-backdrop: rgba(0, 0, 0, .5);
  --ei-qr-bg: #FFFFFF;
  --ei-scrim-tour: rgba(0, 0, 0, .35);
}

/* Phone type scale (DESIGN.md front matter, typography.mobile): a shorter page title and metric. */
@media (max-width: 767px) {
  :root {
    --ei-type-page: 22px;      --ei-leading-page: 28px;
    --ei-type-metric: 24px;    --ei-leading-metric: 30px;
  }
}

/* Light theme, palette «Индиго». Dark values live in 01-theme-dark.decl (expanded by scripts/build-css.mjs).
   Any element may carry data-ei-theme, so a container can show the other theme. */
:root,
[data-ei-theme="light"] {
  color-scheme: light;

  --ei-bg: #F5F6FB;
  --ei-surface: #FFFFFF;
  --ei-surface-sunken: #F0F2F8;
  --ei-surface-elevated: #FFFFFF;
  --ei-surface-hover: #EEF0F7;

  --ei-text: #121524;
  --ei-text-muted: #595D6A;
  --ei-text-subtle: #9598A3;

  --ei-border: #DDDFE6;
  --ei-border-strong: #C4C7D0;
  --ei-divider: #E9EBF1;

  --ei-accent: #474AC0;
  --ei-accent-hover: #3D36AB;
  --ei-on-accent: #FFFFFF;
  --ei-accent-text: #4547BD;
  --ei-accent-soft: #E9EDFF;
  --ei-focus-ring: rgba(71, 74, 192, .35);

  --ei-success: #04744F;  --ei-success-bg: rgba(5, 150, 105, .10);
  --ei-warning: #92400E;  --ei-warning-bg: rgba(217, 119, 6, .12);
  --ei-danger: #B91C1C;   --ei-danger-bg: rgba(220, 38, 38, .10);
  --ei-info: #0369A1;     --ei-info-bg: rgba(2, 132, 199, .10);
  --ei-neutral: #475569;  --ei-neutral-bg: rgba(100, 116, 139, .12);

  --ei-nav-bg: #EEF0F7;
  --ei-nav-text: #121524;
  --ei-nav-text-muted: #595D6A;
  --ei-nav-item-hover: rgba(18, 21, 36, .05);
  --ei-nav-item-active: #FFFFFF;
  --ei-nav-border: #DDDFE6;

  --ei-chart-1: #474AC0;
  --ei-chart-2: #14B8A6;
  --ei-chart-3: #F59E0B;
  --ei-chart-4: #EC4899;
  --ei-chart-5: #0EA5E9;
  --ei-chart-6: #64748B;
  --ei-chart-track: #E9EDFF;

  --ei-shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --ei-shadow-2: 0 4px 12px -2px rgba(0, 0, 0, .08);
  --ei-shadow-3: 0 16px 32px -8px rgba(0, 0, 0, .16);
  --ei-shadow-inset-active: 0 1px 2px rgba(18, 21, 36, .06);
}

/* 01-theme-dark.decl */
[data-ei-theme="dark"] {
  /* Dark theme declarations, written once. scripts/build-css.mjs emits them for
     [data-ei-theme="dark"] on any element and for the system preference before the theme service runs. */
  color-scheme: dark;

  --ei-bg: #0C0E14;
  --ei-surface: #14171F;
  --ei-surface-sunken: #101219;
  --ei-surface-elevated: #20222C;
  --ei-surface-hover: #1C1F28;

  --ei-text: #ECEEF4;
  --ei-text-muted: #A0A4B0;
  --ei-text-subtle: #6D717C;

  --ei-border: #282B34;
  --ei-border-strong: #3C3F4A;
  --ei-divider: #1F2129;

  --ei-accent: #5A62D2;
  --ei-accent-hover: #6B76E1;
  --ei-on-accent: #FFFFFF;
  --ei-accent-text: #A4B1FE;
  --ei-accent-soft: #22274E;
  --ei-focus-ring: rgba(164, 177, 254, .45);

  --ei-success: #34D399;  --ei-success-bg: rgba(52, 211, 153, .12);
  --ei-warning: #FBBF24;  --ei-warning-bg: rgba(251, 191, 36, .12);
  --ei-danger: #F87171;   --ei-danger-bg: rgba(248, 113, 113, .12);
  --ei-info: #7DD3FC;     --ei-info-bg: rgba(125, 211, 252, .12);
  --ei-neutral: #CBD5E1;  --ei-neutral-bg: rgba(148, 163, 184, .14);

  --ei-nav-bg: #0C0E14;
  --ei-nav-text: #ECEEF4;
  --ei-nav-text-muted: #A0A4B0;
  --ei-nav-item-hover: rgba(255, 255, 255, .04);
  --ei-nav-item-active: #1C1F28;
  --ei-nav-border: #282B34;

  /* Chart steps for the dark surface: same hues, lightness 0.48 to 0.67, validated for CVD. */
  --ei-chart-1: #7C86F0;
  --ei-chart-2: #0D9488;
  --ei-chart-3: #D97706;
  --ei-chart-4: #EC4899;
  --ei-chart-5: #0C99D6;
  --ei-chart-6: #64748B;
  --ei-chart-track: #20222C;

  --ei-shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --ei-shadow-2: 0 4px 12px -2px rgba(0, 0, 0, .50);
  --ei-shadow-3: 0 16px 32px -8px rgba(0, 0, 0, .65);
  --ei-shadow-inset-active: 0 1px 2px rgba(0, 0, 0, .30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-ei-theme]) {
  /* Dark theme declarations, written once. scripts/build-css.mjs emits them for
       [data-ei-theme="dark"] on any element and for the system preference before the theme service runs. */
    color-scheme: dark;

    --ei-bg: #0C0E14;
    --ei-surface: #14171F;
    --ei-surface-sunken: #101219;
    --ei-surface-elevated: #20222C;
    --ei-surface-hover: #1C1F28;

    --ei-text: #ECEEF4;
    --ei-text-muted: #A0A4B0;
    --ei-text-subtle: #6D717C;

    --ei-border: #282B34;
    --ei-border-strong: #3C3F4A;
    --ei-divider: #1F2129;

    --ei-accent: #5A62D2;
    --ei-accent-hover: #6B76E1;
    --ei-on-accent: #FFFFFF;
    --ei-accent-text: #A4B1FE;
    --ei-accent-soft: #22274E;
    --ei-focus-ring: rgba(164, 177, 254, .45);

    --ei-success: #34D399;  --ei-success-bg: rgba(52, 211, 153, .12);
    --ei-warning: #FBBF24;  --ei-warning-bg: rgba(251, 191, 36, .12);
    --ei-danger: #F87171;   --ei-danger-bg: rgba(248, 113, 113, .12);
    --ei-info: #7DD3FC;     --ei-info-bg: rgba(125, 211, 252, .12);
    --ei-neutral: #CBD5E1;  --ei-neutral-bg: rgba(148, 163, 184, .14);

    --ei-nav-bg: #0C0E14;
    --ei-nav-text: #ECEEF4;
    --ei-nav-text-muted: #A0A4B0;
    --ei-nav-item-hover: rgba(255, 255, 255, .04);
    --ei-nav-item-active: #1C1F28;
    --ei-nav-border: #282B34;

    /* Chart steps for the dark surface: same hues, lightness 0.48 to 0.67, validated for CVD. */
    --ei-chart-1: #7C86F0;
    --ei-chart-2: #0D9488;
    --ei-chart-3: #D97706;
    --ei-chart-4: #EC4899;
    --ei-chart-5: #0C99D6;
    --ei-chart-6: #64748B;
    --ei-chart-track: #20222C;

    --ei-shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
    --ei-shadow-2: 0 4px 12px -2px rgba(0, 0, 0, .50);
    --ei-shadow-3: 0 16px 32px -8px rgba(0, 0, 0, .65);
    --ei-shadow-inset-active: 0 1px 2px rgba(0, 0, 0, .30);
  }
}

/* 10-espo-bridge.css */
/* Bridge: Espo and Bootstrap variables read UNIQ tokens. Only variable assignments live here;
   selectors that restyle native widgets belong to 30-espo-native.css. */
:root {
  --font-family: var(--ei-font);
  --border-radius: var(--ei-radius-sm);
  --border-radius-small: var(--ei-radius-sm);
  --panel-border-radius: var(--ei-radius-lg);
  --dropdown-border-radius: var(--ei-radius-md);
  --input-height-base: var(--ei-control-md);
  --table-cell-padding: var(--ei-space-3);

  /* Surfaces */
  --body-bg: var(--ei-bg);
  --panel-bg: var(--ei-surface);
  --panel-default-bg: var(--ei-surface);
  --table-bg: var(--ei-surface);
  --table-bg-accent: var(--ei-surface-sunken);
  --well-bg: var(--ei-surface-sunken);
  --input-bg: var(--ei-surface);
  --input-bg-disabled: var(--ei-surface-sunken);
  --dropdown-bg: var(--ei-surface-elevated);
  --popover-bg: var(--ei-surface-elevated);
  --modal-content-bg: var(--ei-surface-elevated);
  --modal-header-bg: var(--ei-surface-elevated);
  --modal-footer-bg: var(--ei-surface-elevated);
  --modal-backdrop-bg: var(--ei-backdrop);
  --collapsed-modal-bg: var(--ei-surface-elevated);
  --default-heading-bg-color: var(--ei-surface-sunken);
  --code-bg: var(--ei-surface-sunken);
  --login-panel-heading-bg: var(--ei-surface);
  --site-footer-bg: transparent;
  --tooltip-bg: var(--ei-text);
  --tooltip-color: var(--ei-bg);

  /* Text and links */
  --text-color: var(--ei-text);
  --text-solid-color: var(--ei-text);
  --text-gray-color: var(--ei-text-muted);
  --text-muted-color: var(--ei-text-muted);
  --text-white-color: var(--ei-on-accent);
  --input-color: var(--ei-text);
  --input-color-disabled: var(--ei-text-muted);
  --code-color: var(--ei-text);
  --site-footer-color: var(--ei-text-muted);
  --collapsed-modal-text-color: var(--ei-text);
  --panel-default-text: var(--ei-text);
  --link-color: var(--ei-accent-text);
  --link-hover-color: var(--ei-accent-text);
  --text-link-color: var(--ei-accent-text);
  --text-link-hover-color: var(--ei-accent-text);
  --link-record-color: var(--ei-text);
  --link-record-hover-color: var(--ei-accent-text);

  /* Neutral ramp used by Espo for borders and secondary text */
  --gray: var(--ei-text-muted);
  --gray-soft: var(--ei-text-muted);
  --gray-light: var(--ei-text-subtle);
  --gray-dark: var(--ei-text);
  --gray-dark-25: var(--ei-text);
  --gray-dark-25l: var(--ei-text-muted);
  --gray-lighter: var(--ei-divider);
  --main-gray: var(--ei-border);
  --main-gray-lighten-40: var(--ei-text-muted);

  /* Lines */
  --default-border-color: var(--ei-border);
  --panel-default-border: var(--ei-border);
  --dropdown-border: var(--ei-border);
  --dropdown-divider-bg: var(--ei-divider);
  --modal-border-color: var(--ei-border);
  --modal-header-border-color: var(--ei-divider);
  --well-border: transparent;
  --code-border-color: var(--ei-border);
  --blockquote-border-color: var(--ei-border-strong);
  --calendar-border: var(--ei-divider);
  --fc-border-color: var(--ei-divider);
  --scroll-bg: transparent;
  --scroll-thumb-bg: var(--ei-border-strong);

  /* Inputs */
  --input-border: var(--ei-border-strong);
  --input-border-focus: var(--ei-accent);
  --input-border-focus-rgba: var(--ei-focus-ring);
  --input-box-shadow: none;

  /* Elevation */
  --default-box-shadow: none;
  --top-bar-box-shadow: none;
  --navbar-box-shadow: none;
  --dropdown-box-shadow: var(--ei-shadow-2);
  --modal-box-shadow: var(--ei-shadow-3);
  --btn-active-box-shadow: none;

  /* Navigation follows the theme */
  --navbar-bg: var(--ei-nav-bg);
  --navbar-inverse-bg: var(--ei-nav-bg);
  --navbar-inverse-bg-7: var(--ei-nav-item-hover);
  --navbar-inverse-border: var(--ei-nav-border);
  --navbar-inverse-color: var(--ei-nav-text-muted);
  --navbar-link-color: var(--ei-nav-text-muted);
  --navbar-inverse-link-color: var(--ei-nav-text-muted);
  --navbar-link-icon-color: var(--ei-nav-text-muted);
  --navbar-inverse-link-icon-color: var(--ei-nav-text-muted);
  --navbar-inverse-link-icon-hover-color: var(--ei-nav-text);
  --navbar-link-hover-color: var(--ei-nav-text);
  --navbar-inverse-link-hover-color: var(--ei-nav-text);
  --navbar-link-hover-bg: var(--ei-nav-item-hover);
  --navbar-inverse-link-hover-bg: var(--ei-nav-item-hover);
  --navbar-link-active-bg: var(--ei-nav-item-active);
  --navbar-inverse-link-active-bg: var(--ei-nav-item-active);
  --navbar-inverse-toggle-hover-bg: var(--ei-nav-item-hover);
  --navbar-inverse-link-disabled-bg: transparent;
  --navbar-inverse-link-disabled-color: var(--ei-text-subtle);

  /* Menus and selects */
  --dropdown-link-color: var(--ei-text);
  --dropdown-link-hover-color: var(--ei-text);
  --dropdown-link-hover-bg: var(--ei-surface-hover);
  --dropdown-link-active-bg: var(--ei-accent-soft);
  --select-item-bg: var(--ei-surface-sunken);
  --select-item-text-color: var(--ei-text);
  --select-item-border: transparent;
  --select-item-active-bg: var(--ei-accent);
  --select-item-active-text-color: var(--ei-on-accent);

  /* Buttons */
  --btn-default-bg: var(--ei-surface);
  --btn-default-color: var(--ei-text);
  --btn-default-border: var(--ei-border-strong);
  --btn-default-hover-bg: var(--ei-surface-hover);
  --btn-default-hover-border: var(--ei-border-strong);
  --btn-default-active-bg: var(--ei-surface-hover);
  --btn-default-active-border: var(--ei-border-strong);
  --btn-text-color: var(--ei-text-muted);
  --btn-primary-bg: var(--ei-accent);
  --btn-primary-color: var(--ei-on-accent);
  --btn-primary-border: var(--ei-accent);
  --btn-primary-hover-bg: var(--ei-accent-hover);
  --btn-primary-hover-border: var(--ei-accent-hover);
  --btn-primary-active-bg: var(--ei-accent-hover);
  --btn-primary-active-border: var(--ei-accent-hover);
  --btn-danger-bg: var(--ei-danger-bg);
  --btn-danger-color: var(--ei-danger);
  --btn-danger-border: transparent;
  --btn-danger-hover-bg: var(--ei-danger-bg);
  --btn-danger-hover-border: var(--ei-danger);
  --btn-danger-active-bg: var(--ei-danger-bg);
  --btn-danger-active-border: var(--ei-danger);
  --btn-success-bg: var(--ei-success-bg);
  --btn-success-color: var(--ei-success);
  --btn-success-border: transparent;
  --btn-success-hover-bg: var(--ei-success-bg);
  --btn-success-hover-border: var(--ei-success);
  --btn-success-active-bg: var(--ei-success-bg);
  --btn-success-active-border: var(--ei-success);
  --btn-warning-bg: var(--ei-warning-bg);
  --btn-warning-color: var(--ei-warning);
  --btn-warning-border: transparent;
  --btn-warning-hover-bg: var(--ei-warning-bg);
  --btn-warning-hover-border: var(--ei-warning);
  --btn-warning-active-bg: var(--ei-warning-bg);
  --btn-warning-active-border: var(--ei-warning);
  --btn-info-bg: var(--ei-info-bg);
  --btn-info-color: var(--ei-info);
  --btn-info-border: transparent;
  --btn-info-hover-bg: var(--ei-info-bg);
  --btn-info-hover-border: var(--ei-info);
  --btn-info-active-bg: var(--ei-info-bg);
  --btn-info-active-border: var(--ei-info);

  /* Brand ramp used by labels, badges and progress bars */
  --brand-primary: var(--ei-accent);
  --brand-primary-text: var(--ei-on-accent);
  --brand-success: var(--ei-success);
  --brand-warning: var(--ei-warning);
  --brand-danger: var(--ei-danger);
  --brand-info: var(--ei-info);
  --label-color: var(--ei-on-accent);
  --label-default-bg: var(--ei-neutral-bg);

  /* Semantic states: soft pills and tinted rows, never neutral cards */
  --state-default-text: var(--ei-neutral);
  --state-default-bg: var(--ei-neutral-bg);
  --state-primary-text: var(--ei-accent-text);
  --state-primary-bg: var(--ei-accent-soft);
  --state-primary-border: var(--ei-accent);
  --state-success-text: var(--ei-success);
  --state-success-text-10: var(--ei-success);
  --state-success-text-10l: var(--ei-success);
  --state-success-bg: var(--ei-success-bg);
  --state-success-bg-5: var(--ei-success-bg);
  --state-success-border: var(--ei-success);
  --state-warning-text: var(--ei-warning);
  --state-warning-text-10: var(--ei-warning);
  --state-warning-text-10l: var(--ei-warning);
  --state-warning-bg: var(--ei-warning-bg);
  --state-warning-bg-5: var(--ei-warning-bg);
  --state-warning-bg-10: var(--ei-warning-bg);
  --state-warning-border: var(--ei-warning);
  --state-danger-text: var(--ei-danger);
  --state-danger-text-10: var(--ei-danger);
  --state-danger-text-10l: var(--ei-danger);
  --state-danger-bg: var(--ei-danger-bg);
  --state-danger-bg-5: var(--ei-danger-bg);
  --state-danger-bg-10: var(--ei-danger-bg);
  --state-danger-border: var(--ei-danger);
  --state-info-text: var(--ei-info);
  --state-info-text-10: var(--ei-info);
  --state-info-bg: var(--ei-info-bg);
  --state-info-bg-5: var(--ei-info-bg);
  --state-info-bg-10: var(--ei-info-bg);
  --state-info-border: var(--ei-info);
  --warning-bg: var(--ei-warning-bg);

  --panel-primary-bg: var(--ei-accent-soft);
  --panel-primary-border: transparent;
  --panel-primary-text: var(--ei-accent-text);
  --panel-success-bg: var(--ei-success-bg);
  --panel-success-border: transparent;
  --panel-success-text: var(--ei-success);
  --panel-warning-bg: var(--ei-warning-bg);
  --panel-warning-border: transparent;
  --panel-warning-text: var(--ei-warning);
  --panel-danger-bg: var(--ei-danger-bg);
  --panel-danger-border: transparent;
  --panel-danger-text: var(--ei-danger);
  --panel-info-bg: var(--ei-info-bg);
  --panel-info-border: transparent;
  --panel-info-text: var(--ei-info);

  /* Calendar */
  --fc-page-bg-color: var(--ei-surface);
  --fc-neutral-bg-color: var(--ei-surface-sunken);
  --fc-today-bg-color: var(--ei-accent-soft);
  --calendar-today-bg: var(--ei-accent-soft);
  --fc-now-indicator-color: var(--ei-danger);
  --calendar-busy-bg: var(--ei-neutral-bg);
}

/* 20-base.css */
/* Base: document type, selection, scrollbars, keyboard focus, motion and forced colours. */
body {
  font-family: var(--ei-font);
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
  font-feature-settings: "cv11", "ss01";
  background: var(--ei-bg);
  color: var(--ei-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--ei-accent);
  color: var(--ei-on-accent);
}

input,
textarea {
  caret-color: var(--ei-accent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--ei-border-strong) transparent;
}

a {
  color: var(--ei-accent-text);
  text-underline-offset: var(--ei-underline-offset);
}

.text-muted { color: var(--ei-text-muted); }
.text-success { color: var(--ei-success); }
.text-warning { color: var(--ei-warning); }
.text-danger { color: var(--ei-danger); }
.text-info { color: var(--ei-info); }

legend { color: var(--ei-text); }

/* One focus treatment for every interactive element, visible in both themes. */
:is(a, button, summary, [role="tab"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ei-focus-width) var(--ei-focus-ring);
}

:is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--ei-accent);
  box-shadow: 0 0 0 var(--ei-focus-width) var(--ei-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: var(--ei-duration-none) !important;
    animation-duration: var(--ei-duration-none) !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  :is(a, button, summary, [role="tab"], [tabindex], input, select, textarea):focus-visible {
    outline: var(--ei-rule) solid Highlight;
    outline-offset: var(--ei-focus-offset);
  }
}

/* 30-espo-native.css */
/* Native Espo widgets dressed in UNIQ components. Selectors use #main or .modal only where
   Espo itself is more specific; nothing here needs !important. */

/* Panels and floating layers */
.panel,
.panel-body {
  background: var(--ei-surface);
  color: var(--ei-text);
}

#main .panel-default {
  border-color: var(--ei-border);
  border-radius: var(--ei-radius-lg);
  box-shadow: none;
  overflow: clip;
}

.panel-default > .panel-footer {
  background: var(--ei-surface);
  border-color: var(--ei-divider);
}

.well {
  background: var(--ei-surface-sunken);
  color: var(--ei-text);
  border: 0;
  box-shadow: none;
}

.modal-content {
  background: var(--ei-surface-elevated);
  color: var(--ei-text);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  box-shadow: var(--ei-shadow-3);
}

.dropdown-menu,
.popover {
  background: var(--ei-surface-elevated);
  color: var(--ei-text);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-md);
  box-shadow: var(--ei-shadow-2);
}

.dropdown-menu > li > a {
  min-height: var(--ei-control-sm);
  display: flex;
  align-items: center;
  gap: var(--ei-space-2);
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: var(--ei-text-muted);
  background: transparent;
}

.dropdown-header,
.selectize-dropdown .optgroup-header {
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-medium);
}

/* Page header */
#main .page-header {
  border: 0;
  padding-bottom: var(--ei-space-3);
  margin-bottom: var(--ei-space-4);
}

#main .page-header h3 {
  font-size: var(--ei-type-page);
  line-height: var(--ei-leading-page);
  letter-spacing: var(--ei-tracking-page);
  font-weight: var(--ei-weight-strong);
}

#main .page-header h3 > a {
  font-size: var(--ei-type-body);
  font-weight: var(--ei-weight-medium);
  letter-spacing: 0;
  color: var(--ei-text-muted);
}

/* Breadcrumbs: the scope colour square is decoration, the parent is quiet, the record is the title. */
#main .page-header .color-icon { display: none; }
#main .header-breadcrumbs .breadcrumb-item:not(:last-child) :is(a, span) { color: var(--ei-text-muted); }
#main .header-breadcrumbs .breadcrumb-item:not(:last-child) a:hover { color: var(--ei-text); }
#main .header-breadcrumbs .breadcrumb-item:last-child :is(a, span) { color: var(--ei-text); }
#main .header-breadcrumbs .breadcrumb-separator { color: var(--ei-text-subtle); }

/* Tables: caption headers, divider rows, no vertical lines */
.table {
  background: var(--ei-surface);
  color: var(--ei-text);
  border: 0;
}

.table > thead > tr > th {
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ei-text-muted);
  padding: var(--ei-cell-pad-y) var(--ei-cell-pad-x);
  border: 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}

.table > tbody > tr > td {
  padding: var(--ei-cell-pad-y) var(--ei-cell-pad-x);
  border: 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
  font-variant-numeric: tabular-nums;
}

.table > tbody > tr:not(.success, .warning, .danger, .info, .active):hover {
  background: var(--ei-surface-hover);
  transition: background-color var(--ei-duration-fast) var(--ei-ease);
}

#main .table a {
  text-underline-offset: var(--ei-underline-offset);
}

/* The record list of a list page is one card; lists inside record panels stay flat. */
:is(#main, #main > *) > .list-container > .list {
  margin-inline: 0;
  background: var(--ei-surface);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  overflow-x: auto;
}

:is(#main, #main > *) > .list-container > .list > .table { margin-bottom: 0; background: transparent; }
:is(#main, #main > *) > .list-container > .list > .table > :is(thead, tbody) > tr > :is(th, td):first-child { padding-left: var(--ei-space-4); }
:is(#main, #main > *) > .list-container > .list > .table > :is(thead, tbody) > tr > :is(th, td):last-child { padding-right: var(--ei-space-4); }
:is(#main, #main > *) > .list-container > .list > .table > tbody > tr:last-child > td { border-bottom: 0; }

#main .list > .show-more > .btn {
  min-height: var(--ei-control-lg);
  border: 0;
  border-top: var(--ei-hairline) solid var(--ei-divider);
  border-radius: 0;
  background: transparent;
  color: var(--ei-accent-text);
}

#main .list > .show-more > .btn:hover { background: var(--ei-surface-hover); }

/* Espo's sticky copy of the record buttons: a quiet bar on the page background. */
.detail-button-container.stick-sub {
  background: var(--ei-bg);
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}

#main .table a:hover {
  text-decoration: underline;
}

/* A value link in a list cell is a pointer target of its own: at least the WCAG 2.5.8 minimum. */
#main .list > .table > tbody > tr > td.cell a:not(.dropdown-toggle) {
  display: inline-flex;
  align-items: center;
  min-height: var(--ei-target-min);
  max-width: 100%;
}

/* Buttons */
.btn {
  border-radius: var(--ei-radius-sm);
  box-shadow: none;
}

#main .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ei-control-md);
  font-size: var(--ei-type-label);
  font-weight: var(--ei-weight-medium);
  transition: background-color var(--ei-duration-fast) var(--ei-ease), border-color var(--ei-duration-fast) var(--ei-ease);
}

.btn-default {
  background: var(--ei-surface);
  color: var(--ei-text);
  border: var(--ei-hairline) solid var(--ei-border-strong);
}

.btn-default:hover,
.btn-default:focus {
  background: var(--ei-surface-hover);
  color: var(--ei-text);
  border-color: var(--ei-border-strong);
}

.btn-primary {
  background: var(--ei-accent);
  color: var(--ei-on-accent);
  border: var(--ei-hairline) solid var(--ei-accent);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--ei-accent-hover);
  color: var(--ei-on-accent);
  border-color: var(--ei-accent-hover);
}

#main .btn.btn-block { display: flex; width: 100%; }

#main .btn:disabled,
#main .btn.disabled {
  background: var(--ei-surface-sunken);
  color: var(--ei-text-muted);
  border-color: var(--ei-border);
  opacity: 1;
  cursor: not-allowed;
}

/* Fields */
.form-control {
  background: var(--ei-surface);
  color: var(--ei-text);
  border: var(--ei-hairline) solid var(--ei-border-strong);
  border-radius: var(--ei-radius-sm);
  box-shadow: none;
}

#main .form-control {
  min-height: var(--ei-control-md);
  font-size: var(--ei-type-body);
}

.form-control::placeholder,
.selectize-input input::placeholder {
  color: var(--ei-text-subtle);
  opacity: 1;
}

.form-control:focus,
.selectize-input.focus {
  border-color: var(--ei-accent);
  box-shadow: 0 0 0 var(--ei-focus-width) var(--ei-focus-ring);
}

#main .control-label {
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
  font-weight: var(--ei-weight-medium);
  color: var(--ei-text-muted);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
#main .form-control[disabled],
#main .form-control[readonly],
#main fieldset[disabled] .form-control,
.selectize-control .selectize-input.disabled {
  background: var(--ei-surface-sunken);
  color: var(--ei-text-muted);
  opacity: 1;
}

.form-control:disabled,
.selectize-input.disabled {
  cursor: not-allowed;
}

.has-error .form-control,
.has-error .selectize-input,
.has-error .form-control:focus,
.has-error .selectize-input.focus,
#main .has-error .form-control { border-color: var(--ei-danger); }
.has-warning .form-control,
.has-warning .selectize-input,
#main .has-warning .form-control { border-color: var(--ei-warning); }
.has-success .form-control,
.has-success .selectize-input,
#main .has-success .form-control { border-color: var(--ei-success); }
#main .has-error .control-label { color: var(--ei-danger); }
#main .has-warning .control-label { color: var(--ei-warning); }
#main .has-success .control-label { color: var(--ei-success); }

:is(#main, .modal) label:has(input:is([type="checkbox"], [type="radio"]):disabled),
:is(#main, .modal) :is(.checkbox, .radio).disabled label {
  color: var(--ei-text-muted);
  cursor: not-allowed;
}

input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--ei-accent);
}

input[type="file"]::file-selector-button {
  background: var(--ei-surface);
  color: var(--ei-text);
  border: var(--ei-hairline) solid var(--ei-border-strong);
  border-radius: var(--ei-radius-sm);
  padding: var(--ei-space-1) var(--ei-control-pad-x);
  margin-inline-end: var(--ei-space-3);
  font: inherit;
  cursor: pointer;
}

input[type="file"]:disabled::file-selector-button {
  background: var(--ei-surface-sunken);
  color: var(--ei-text-muted);
  cursor: not-allowed;
}

/* Selectize and datepicker */
.selectize-dropdown .optgroup::before { background: var(--ei-divider); }
.selectize-dropdown-header { border-color: var(--ei-divider); }
.selectize-control.plugin-remove_button [data-value] .remove:hover { background: var(--ei-surface-hover); }

.datepicker table tr td.range:not(.today, .highlighted, .selected, .active) {
  background: var(--ei-surface-hover);
  color: var(--ei-text);
}

.datepicker table tr td:is(.selected, .active):not(.disabled),
.datepicker table tr td:is(.selected, .active):not(.disabled):hover {
  background: var(--ei-accent);
  color: var(--ei-on-accent);
  text-shadow: none;
}

.datepicker table tr td.range.today:not(.active, .selected) {
  background: var(--ei-accent-soft);
  color: var(--ei-accent-text);
}

/* Status labels as soft pills */
.label.label-state {
  display: inline-flex;
  align-items: center;
  gap: var(--ei-space-1);
  padding: var(--ei-pill-pad-y) var(--ei-space-2);
  border: 0;
  border-radius: var(--ei-radius-pill);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
  white-space: nowrap;
  background: var(--ei-neutral-bg);
  color: var(--ei-neutral);
}

.label.label-state.label-success { background: var(--ei-success-bg); color: var(--ei-success); }
.label.label-state.label-warning { background: var(--ei-warning-bg); color: var(--ei-warning); }
.label.label-state.label-danger { background: var(--ei-danger-bg); color: var(--ei-danger); }
.label.label-state.label-primary { background: var(--ei-accent-soft); color: var(--ei-accent-text); }
.label.label-state.label-info { background: var(--ei-info-bg); color: var(--ei-info); }

.label.label-default:not(.label-state),
.badge:not([class*="badge-"], [class*="text-"]) {
  background: var(--ei-neutral-bg);
  color: var(--ei-neutral);
}

.list-group-item:not(.list-group-item-success, .list-group-item-warning, .list-group-item-danger, .list-group-item-info) {
  color: var(--ei-text);
}

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  background: var(--ei-surface-sunken);
  color: var(--ei-text-muted);
}

/* Tabs: 2px accent underline, no filled background */
#main .nav-tabs {
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
  margin-bottom: var(--ei-space-5);
}

#main .nav-tabs > li > a {
  font-size: var(--ei-type-label);
  font-weight: var(--ei-weight-medium);
  padding: var(--ei-space-3) var(--ei-space-4);
  color: var(--ei-text-muted);
  border: 0;
  border-radius: 0;
  background: transparent;
}

#main .nav-tabs > li > a:hover {
  color: var(--ei-text);
  background: transparent;
}

#main .nav-tabs > li.active > a {
  color: var(--ei-accent-text);
  box-shadow: inset 0 calc(var(--ei-rule) * -1) var(--ei-accent);
  background: transparent;
}

/* Checkbox: native semantics and keyboard activation, custom box only. */
:is(#main, .modal) input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 var(--ei-checkbox);
  box-sizing: border-box;
  width: var(--ei-checkbox);
  height: var(--ei-checkbox);
  min-width: var(--ei-checkbox);
  min-height: var(--ei-checkbox);
  max-width: var(--ei-checkbox);
  padding: 0;
  margin: 0 var(--ei-space-2) 0 0;
  vertical-align: middle;
  border: var(--ei-hairline) solid var(--ei-border-strong);
  border-radius: var(--ei-checkbox-radius);
  background: var(--ei-surface);
  color: var(--ei-on-accent);
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--ei-duration-fast) var(--ei-ease), border-color var(--ei-duration-fast) var(--ei-ease);
}

:is(#main, .modal) input[type="checkbox"]::before {
  content: "";
  width: var(--ei-check-mark-w);
  height: var(--ei-check-mark-h);
  border-left: var(--ei-rule) solid currentColor;
  border-bottom: var(--ei-rule) solid currentColor;
  transform: translateY(calc(var(--ei-hairline) * -1)) rotate(-45deg) scale(0);
}

:is(#main, .modal) input[type="checkbox"]:is(:checked, :indeterminate) {
  background: var(--ei-accent);
  border-color: var(--ei-accent);
}

:is(#main, .modal) input[type="checkbox"]:checked::before {
  transform: translateY(calc(var(--ei-hairline) * -1)) rotate(-45deg) scale(1);
}

:is(#main, .modal) input[type="checkbox"]:indeterminate::before {
  width: var(--ei-check-mark-w);
  height: 0;
  border-left: 0;
  transform: none;
}

:is(#main, .modal) input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--ei-accent);
}

:is(#main, .modal) input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ei-focus-width) var(--ei-focus-ring);
}

:is(#main, .modal) input[type="checkbox"]:disabled {
  background: var(--ei-surface-sunken);
  border-color: var(--ei-border);
  cursor: not-allowed;
}

@media (forced-colors: active) {
  :is(#main, .modal) input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; }
  :is(#main, .modal) input[type="checkbox"]::before { content: none; }
}

/* Settings: a readable single column instead of full-width panels. */
#main:has([data-scope="Settings"]) {
  max-width: var(--ei-settings-max);
  margin-inline: auto;
  padding: var(--ei-space-6) var(--ei-space-7) var(--ei-space-9);
}

#main [data-scope="Settings"] .record-buttons { padding: 0 0 var(--ei-space-5); }

#main [data-scope="Settings"] .panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-bottom: var(--ei-space-6);
}

#main [data-scope="Settings"] .panel-heading {
  background: transparent;
  border: 0;
  padding: var(--ei-space-3) 0;
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

#main [data-scope="Settings"] .panel-body {
  padding: var(--ei-space-5) 0;
  border-top: var(--ei-hairline) solid var(--ei-divider);
}

#main [data-scope="Settings"] .cell { padding-bottom: var(--ei-space-5); }

#main [data-scope="Settings"] .control-label {
  display: block;
  margin-bottom: var(--ei-space-2);
  color: var(--ei-text);
}

#main [data-scope="Settings"] .field .form-control { max-width: var(--ei-form-max); }

/* Administration center: task-first layout over native routes. */
:is(#main.ei-admin-center, #main .ei-admin-center) {
  max-width: var(--ei-settings-max);
  margin-inline: auto;
  padding: var(--ei-space-6) var(--ei-space-7) var(--ei-space-9);
}

:is(#main.ei-admin-center, #main .ei-admin-center) .page-header {
  margin: 0 0 var(--ei-space-7);
  padding: 0;
  border: 0;
}

:is(#main.ei-admin-center, #main .ei-admin-center) .page-header h3 {
  font-size: var(--ei-type-page);
  line-height: var(--ei-leading-page);
  margin: 0 0 var(--ei-space-2);
}

.ei-page-description {
  margin: 0;
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
  color: var(--ei-text-muted);
}

.ei-admin-shortcuts { margin-bottom: var(--ei-space-7); }

.ei-admin-shortcuts h2 {
  margin: 0 0 var(--ei-space-3);
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
  font-weight: var(--ei-weight-medium);
  color: var(--ei-text-muted);
}

.ei-admin-shortcuts > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ei-space-3);
}

.ei-admin-shortcuts a {
  display: flex;
  align-items: center;
  gap: var(--ei-space-3);
  padding: var(--ei-space-3) var(--ei-space-4);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface);
  color: var(--ei-text);
  font-size: var(--ei-type-body);
  text-decoration: none;
}

.ei-admin-shortcuts a:hover { background: var(--ei-surface-hover); }
.ei-admin-shortcuts a i { width: var(--ei-icon-sm); text-align: center; color: var(--ei-text-muted); }
.ei-admin-shortcuts a span { margin-left: var(--ei-space-4); color: var(--ei-text-muted); }

:is(#main.ei-admin-center, #main .ei-admin-center) .admin-content > .row { margin: 0; }

:is(#main.ei-admin-center, #main .ei-admin-center) .admin-content > .row > .col-md-7 {
  display: grid;
  grid-template-columns: var(--ei-col-rail) minmax(0, 1fr);
  column-gap: var(--ei-space-7);
  align-items: start;
  width: 100%;
  padding: 0;
}

:is(#main.ei-admin-center, #main .ei-admin-center) .admin-content > .row > .col-md-5 { display: none; }

.ei-admin-categories {
  grid-column: 1;
  grid-row: 1 / span 3;
  position: sticky;
  top: var(--ei-sticky-offset);
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-1);
}

.ei-admin-categories button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ei-space-2);
  min-height: var(--ei-control-lg);
  padding: var(--ei-space-2) var(--ei-space-3);
  border: 0;
  border-radius: var(--ei-radius-sm);
  background: transparent;
  color: var(--ei-text-muted);
  text-align: left;
  font-size: var(--ei-type-label);
  font-weight: var(--ei-weight-medium);
}

.ei-admin-categories button span {
  font-size: var(--ei-type-caption);
  font-variant-numeric: tabular-nums;
}

.ei-admin-categories button:hover {
  background: var(--ei-surface-hover);
  color: var(--ei-text);
}

.ei-admin-categories button[aria-pressed="true"] {
  background: var(--ei-surface-hover);
  color: var(--ei-accent-text);
  font-weight: var(--ei-weight-strong);
}

:is(#main.ei-admin-center, #main .ei-admin-center) .admin-search-container { grid-column: 2; margin: 0 0 var(--ei-space-5); }

:is(#main.ei-admin-center, #main .ei-admin-center) .admin-search-container input {
  height: var(--ei-control-lg);
  max-width: none;
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface);
}

:is(#main.ei-admin-center, #main .ei-admin-center) .admin-tables-container { grid-column: 2; min-width: 0; }
:is(#main.ei-admin-center, #main .ei-admin-center) .admin-content-section { margin-bottom: var(--ei-space-7); }

:is(#main.ei-admin-center, #main .ei-admin-center) .admin-content-section h4 {
  margin: 0 0 var(--ei-space-3);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

:is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  background: transparent;
  border: 0;
  box-shadow: none;
}

:is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel tr > td {
  padding: var(--ei-space-4) var(--ei-cell-pad-x);
  border: 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
  vertical-align: middle;
  line-height: var(--ei-leading-body);
  overflow-wrap: break-word;
}

:is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel tr > td:first-child { width: 43%; }

:is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel tr > td:nth-child(2) {
  color: var(--ei-text-muted);
  font-size: var(--ei-type-label);
}

:is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel a {
  display: inline-flex;
  align-items: center;
  gap: var(--ei-space-3);
  font-size: var(--ei-type-body);
  font-weight: var(--ei-weight-medium);
  color: var(--ei-text);
}

:is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel a i {
  width: var(--ei-icon-md);
  margin: 0;
  text-align: center;
  color: var(--ei-text-muted);
}

:is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel tr:hover { background: var(--ei-surface-hover); }
:is(#main.ei-admin-center, #main .ei-admin-center) .ei-admin-maintenance a { color: var(--ei-warning); }

:is(#main.ei-admin-center, #main .ei-admin-center) .no-data {
  grid-column: 2;
  padding: var(--ei-space-6);
  color: var(--ei-text-muted);
}

@media (max-width: 991px) {
  :is(#main.ei-admin-center, #main .ei-admin-center) { padding: var(--ei-space-6); }
  :is(#main.ei-admin-center, #main .ei-admin-center) .admin-content > .row > .col-md-7 {
    grid-template-columns: var(--ei-col-rail-narrow) minmax(0, 1fr);
    gap: var(--ei-space-5);
  }
}

@media (max-width: 767px) {
  #main .btn,
  #main .form-control { min-height: var(--ei-control-touch); }
  #main .btn { min-width: var(--ei-control-touch); }
  #main .selectize-input { min-height: var(--ei-control-touch); font-size: var(--ei-type-input-touch); }
  #main .selectize-input > input { font-size: var(--ei-type-input-touch); }

  #main .page-header-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ei-space-3); }
  #main .page-header-column-1 { flex: 1 1 auto; min-width: 0; width: auto; }
  #main .page-header-column-2 { flex: 0 0 auto; width: auto; }
  #main .page-header-column-2:empty,
  #main .page-header-column-2:not(:has(.btn)) { display: none; }
  #main .header-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; }
  #main .header-breadcrumbs .breadcrumb-separator { display: none; }
  #main .header-breadcrumbs .breadcrumb-item:not(:last-child) { flex: 0 0 100%; }
  #main .header-breadcrumbs .breadcrumb-item:not(:last-child) a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ei-control-touch);
    font-size: var(--ei-type-label);
    line-height: var(--ei-leading-label);
    letter-spacing: 0;
  }
  #main .header-breadcrumbs .breadcrumb-item:not(:last-child):has(+ .breadcrumb-separator + .breadcrumb-item:last-child) a::before {
    content: "";
    width: var(--ei-space-2);
    height: var(--ei-space-2);
    margin-inline-end: var(--ei-space-2);
    border-left: var(--ei-rule) solid currentColor;
    border-bottom: var(--ei-rule) solid currentColor;
    transform: rotate(45deg);
  }

  /* Record lists: each row is a card, the first column is the title and opens the record. */
  :is(#main, .modal-body) .list > .table,
  :is(#main, .modal-body) .list > .table > tbody { display: block; }
  :is(#main, .modal-body) .list > :is(.table, .show-more) { width: auto; min-width: 0; }
  #main .list > .show-more > .btn { min-height: var(--ei-control-touch); }
  #main .field a:is(.text-record, .text-default),
  #main .link-container .list-group-item a[data-action="clearLink"] {
    display: inline-flex;
    align-items: center;
    min-height: var(--ei-control-touch);
    vertical-align: middle;
  }
  #main .link-container .list-group-item a[data-action="clearLink"] {
    justify-content: center;
    min-width: var(--ei-control-touch);
    margin-block: calc(var(--ei-space-2) * -1);
    margin-inline-end: calc(var(--ei-space-3) * -1);
  }
  :is(#main, .modal-body) .list > .table > thead { display: none; }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--ei-space-3);
    row-gap: var(--ei-space-1);
    padding: var(--ei-space-3) var(--ei-space-4);
    border-bottom: var(--ei-hairline) solid var(--ei-divider);
  }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row:last-child { border-bottom: 0; }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell {
    display: block;
    flex: 0 0 100%;
    order: 3;
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--ei-text);
    font-size: var(--ei-type-label);
    line-height: var(--ei-leading-label);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell[data-label]:not(:first-child, [data-name="buttons"], [data-name="r-checkbox"])::before {
    content: attr(data-label) ": ";
    color: var(--ei-text-muted);
  }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell[data-empty] { display: none; }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell:first-child,
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell[data-name="r-checkbox"] + td.cell {
    flex: 1 1 0;
    order: 1;
    font-size: var(--ei-type-body);
    line-height: var(--ei-leading-body);
    font-weight: var(--ei-weight-medium);
  }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell[data-name="r-checkbox"] { flex: 0 0 auto; order: 0; }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell[data-name="r-checkbox"]:first-child { flex: 0 0 auto; }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell[data-name="buttons"] { flex: 0 0 auto; order: 2; position: relative; z-index: var(--ei-z-raised); }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell:is(:first-child, [data-name="r-checkbox"] + td) a.link::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell a:not(.link) {
    position: relative;
    z-index: var(--ei-z-raised);
    display: inline-flex;
    align-items: center;
    min-height: var(--ei-control-touch);
  }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row > td.cell[data-name="r-checkbox"] { position: relative; z-index: var(--ei-z-raised); }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row:has(a.link:focus-visible) { box-shadow: inset 0 0 0 var(--ei-focus-width) var(--ei-focus-ring); }
  :is(#main, .modal-body) .list > .table > tbody > tr.list-row a.link:focus-visible { outline: none; box-shadow: none; }
  #main .list-row-buttons .dropdown-toggle,
  #main .settings-container .dropdown-toggle,
  #main .pagination-btn { min-width: var(--ei-control-touch); min-height: var(--ei-control-touch); }
  #main .form-control { font-size: var(--ei-type-input-touch); }
  #main .page-header h3 { font-size: var(--ei-type-title); line-height: var(--ei-leading-title); }
  #main .nav-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; }
  #main .nav-tabs > li { flex-shrink: 0; }

  #main:has([data-scope="Settings"]) { padding: var(--ei-space-5) var(--ei-space-4) var(--ei-space-7); }
  #main [data-scope="Settings"] .cell { width: 100%; float: none; }
  #main [data-scope="Settings"] .record-buttons {
    position: sticky;
    top: var(--ei-topbar);
    z-index: var(--ei-z-raised);
    padding: var(--ei-space-3) 0;
    background: var(--ei-bg);
  }
}

@media (max-width: 767px) {
  :is(#main.ei-admin-center, #main .ei-admin-center) { padding: var(--ei-space-5) var(--ei-space-4); }
  :is(#main.ei-admin-center, #main .ei-admin-center) .page-header h3 { font-size: var(--ei-type-title); line-height: var(--ei-leading-title); }
  .ei-admin-shortcuts > div { display: grid; grid-template-columns: 1fr 1fr; }
  .ei-admin-shortcuts a { padding: var(--ei-space-3); gap: var(--ei-space-2); font-size: var(--ei-type-label); }
  .ei-admin-shortcuts a span { display: none; }
  :is(#main.ei-admin-center, #main .ei-admin-center) .admin-content > .row > .col-md-7 { display: flex; flex-direction: column; gap: 0; }
  .ei-admin-categories {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    overflow: auto;
    padding-bottom: var(--ei-space-2);
    margin-bottom: var(--ei-space-3);
  }
  .ei-admin-categories button { flex-shrink: 0; min-height: var(--ei-control-touch); white-space: nowrap; }
  .ei-admin-categories button span { display: none; }
  :is(#main.ei-admin-center, #main .ei-admin-center) :is(.admin-search-container, .admin-tables-container) { width: 100%; }
  :is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel tr {
    display: block;
    padding: var(--ei-space-3) 0;
    border-bottom: var(--ei-hairline) solid var(--ei-divider);
  }
  :is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel tr > td {
    display: block;
    width: auto;
    padding: var(--ei-space-1) var(--ei-space-2);
    border: 0;
  }
  :is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel tr > td:first-child { width: auto; }
  :is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel tr > td:nth-child(2) { padding-left: var(--ei-space-8); }
  :is(#main.ei-admin-center, #main .ei-admin-center) .table-admin-panel a { min-height: var(--ei-control-sm); }
  :is(#main.ei-admin-center, #main .ei-admin-center) .admin-content-section { margin-bottom: var(--ei-space-6); }
}

/* 40-navigation.css */
/* Navigation: grouped tabs over native overflow, dropdowns, side menu and mobile collapse.
   Colours come from --ei-nav-* tokens, which follow the active theme. */
#navbar.ei-nav {
  background: var(--ei-nav-bg);
  color: var(--ei-nav-text);
}

#navbar.ei-nav .navbar {
  background: var(--ei-nav-bg);
  color: var(--ei-nav-text);
  border-color: var(--ei-nav-border);
  box-shadow: none;
}

#navbar.ei-nav ul.tabs a {
  color: var(--ei-nav-text-muted);
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
  font-weight: var(--ei-weight-regular);
  border-color: transparent;
}

#navbar.ei-nav ul.tabs .short-label {
  color: inherit;
  font-size: var(--ei-type-label);
}

#navbar.ei-nav ul.tabs .short-label > .fas {
  width: var(--ei-icon-md);
  color: inherit;
  font-size: var(--ei-type-body);
  text-align: center;
}

#navbar.ei-nav ul.tabs .group-caret {
  color: inherit;
  font-size: var(--ei-type-caption);
}

#navbar.ei-nav ul.tabs li > a:hover,
#navbar.ei-nav ul.tabs li.open > a {
  color: var(--ei-nav-text);
  background: var(--ei-nav-item-hover);
  border-color: transparent;
}

#navbar.ei-nav ul.tabs li.active > a,
#navbar.ei-nav ul.tabs a[aria-current="page"] {
  color: var(--ei-accent-text);
  background: var(--ei-nav-item-active);
  font-weight: var(--ei-weight-strong);
  border-color: transparent;
  border-radius: var(--ei-radius-sm);
  box-shadow: var(--ei-shadow-inset-active);
}

/* Group menus float above the page, so they use the elevated surface. */
#navbar.ei-nav ul.tabs .tab-group > .dropdown-menu {
  min-width: var(--ei-menu-min);
  max-width: min(var(--ei-menu-max), calc(100vw - var(--ei-space-6)));
  padding: var(--ei-space-1);
  background: var(--ei-surface-elevated);
  border-color: var(--ei-border);
  border-radius: var(--ei-radius-md);
  box-shadow: var(--ei-shadow-2);
}

#navbar.ei-nav ul.tabs .dropdown-menu > li > a {
  display: flex;
  align-items: center;
  gap: var(--ei-space-3);
  min-height: var(--ei-control-md);
  padding: var(--ei-space-2) var(--ei-space-3);
  border-radius: var(--ei-radius-sm);
  color: var(--ei-text);
}

#navbar.ei-nav ul.tabs .dropdown-menu > li > a:hover {
  background: var(--ei-surface-hover);
  color: var(--ei-text);
}

#navbar.ei-nav ul.tabs .dropdown-menu > li.active > a {
  background: var(--ei-accent-soft);
  color: var(--ei-accent-text);
  box-shadow: none;
}

#navbar.ei-nav ul.tabs .dropdown-menu .short-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--ei-icon-md);
  width: var(--ei-icon-md);
  margin: 0;
  padding: 0;
  color: var(--ei-text-muted);
}

#navbar.ei-nav ul.tabs .dropdown-menu .full-label {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
}

#navbar.ei-nav ul.tabs .dropdown-menu .divider {
  margin: var(--ei-space-1) var(--ei-space-2);
  background: var(--ei-divider);
}

#navbar.ei-nav .ei-admin-context:not([hidden]) {
  display: block;
  margin: 0 0 var(--ei-space-1);
  padding: 0 0 var(--ei-space-1);
  border-bottom: var(--ei-hairline) solid var(--ei-nav-border);
}

#navbar.ei-nav .ei-admin-context[hidden] { display: none; }

#navbar.ei-nav .ei-admin-context > a {
  min-height: var(--ei-control-md);
  border-radius: var(--ei-radius-sm);
  white-space: nowrap;
}

#navbar.ei-nav .ei-admin-context .ei-admin-back { color: var(--ei-accent-text); }
#navbar.ei-nav .ei-admin-context > a:hover { background: var(--ei-nav-item-hover); }

/* Profile menu: theme options are radio items; the chosen one carries an accent dot. */
#navbar.ei-nav [data-ei-theme-option] { display: flex; align-items: center; }

#navbar.ei-nav [data-ei-theme-option][aria-checked="true"] {
  color: var(--ei-accent-text);
  font-weight: var(--ei-weight-medium);
}

#navbar.ei-nav [data-ei-theme-option][aria-checked="true"]::after {
  content: "";
  flex: none;
  width: var(--ei-dot);
  height: var(--ei-dot);
  margin-left: auto;
  padding-left: 0;
  border-radius: var(--ei-radius-pill);
  background: var(--ei-accent);
}

/* Pilot banner: one thin neutral strip above the page while EI_PILOT_MODE is set. */
.ei-pilot-banner {
  margin: 0 0 var(--ei-space-1);
  padding: var(--ei-space-1) var(--ei-space-4);
  border-radius: var(--ei-radius-sm);
  background: var(--ei-warning-bg);
  color: var(--ei-warning);
  font-family: var(--ei-font);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
  text-align: center;
}

#navbar.ei-nav :is(a, button, select):focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--ei-rule) var(--ei-accent);
}

@media (min-width: 768px) {
  #navbar.ei-nav.ei-navigation-side ul.tabs > li > a {
    display: flex;
    align-items: center;
    gap: var(--ei-space-3);
    min-height: var(--ei-control-lg);
    margin: var(--ei-pill-pad-y) var(--ei-space-2);
    padding: var(--ei-space-2) var(--ei-space-3);
    border-radius: var(--ei-radius-sm);
  }

  body:not(.minimized) #navbar.ei-nav.ei-navigation-side ul.tabs > .tab-group { margin-top: var(--ei-space-1); }
  #navbar.ei-nav.ei-navigation-side ul.tabs > .tab-group > a { font-weight: var(--ei-weight-medium); }

  body.minimized #navbar.ei-nav.ei-navigation-side ul.tabs > li > a {
    justify-content: center;
    gap: 0;
    min-height: var(--ei-control-touch);
    margin-inline: var(--ei-space-1);
    padding-inline: var(--ei-space-2);
  }

  #navbar.ei-nav.ei-navigation-side ul.tabs > li > a > .full-label {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 767px) {
  /* Header controls of the collapsed navbar: 44 touch targets, search field text that iOS does not zoom. */
  #navbar.ei-nav .navbar-toggle,
  #navbar.ei-nav .navbar-right > li > a,
  #navbar.ei-nav .navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ei-control-touch);
    min-height: var(--ei-control-touch);
  }
  #navbar.ei-nav .navbar-brand { justify-content: flex-start; }
  #navbar.ei-nav .global-search-input { min-height: var(--ei-control-touch); font-size: var(--ei-type-input-touch); }

  #navbar.ei-nav ul.tabs > li > a,
  #navbar.ei-nav ul.tabs .dropdown-menu > li > a,
  #navbar.ei-nav .ei-admin-context > a { min-height: var(--ei-control-touch); }

  #navbar.ei-nav ul.tabs .tab-group > .dropdown-menu { max-width: 100%; }

  .ei-pilot-banner { text-align: left; }
}

/* Student cabinet on a phone: bottom tab bar (ROADMAP M.6). Hidden on wider screens, where the
   side navigation already shows the same destinations. */
.ei-bottom-nav { display: none; }

@media (max-width: 767px) {
  .ei-bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--ei-z-sticky);
    display: block;
    padding-bottom: var(--ei-safe-bottom);
    border-top: var(--ei-hairline) solid var(--ei-border);
    background: var(--ei-surface-elevated);
  }

  .ei-bottom-nav__list {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #navbar.ei-nav .ei-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ei-pill-pad-y);
    min-height: var(--ei-bottom-nav-h);
    padding: var(--ei-space-1);
    color: var(--ei-text-muted);
    font-size: var(--ei-type-caption);
    line-height: var(--ei-leading-caption);
    text-align: center;
    text-decoration: none;
  }

  #navbar.ei-nav .ei-bottom-nav__item[aria-current="page"] { color: var(--ei-accent-text); font-weight: var(--ei-weight-medium); }
  .ei-bottom-nav__icon { font-size: var(--ei-icon-md); }

  body.ei-has-bottom-nav { padding-bottom: calc(var(--ei-bottom-nav-h) + var(--ei-safe-bottom)); }
}

/* Unread counter on the bell: Espo paints it light red under white text (2.7:1). Accent and its
   text token pass AA in both themes. */
#navbar.ei-nav .notifications-badge-container .badge,
#navbar.ei-nav .notifications-button .badge {
  background: var(--ei-accent);
  color: var(--ei-on-accent);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-medium);
}

/* 50-components/button.css */
/* Button: secondary by default; primary (one per screen), ghost and danger by modifier.
   Heights 32/36/40, touch 44 on mobile, radius sm. Bare buttons inside the workspace get the
   secondary look through :where(), so any component class overrides them without a fight. */
:where(.ei-workspace) button,
.ei-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ei-space-2);
  min-height: var(--ei-control-md);
  padding: var(--ei-control-pad-y) var(--ei-button-pad-x);
  border: var(--ei-hairline) solid var(--ei-border-strong);
  border-radius: var(--ei-radius-sm);
  background: var(--ei-surface);
  color: var(--ei-text);
  font: inherit;
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
  font-weight: var(--ei-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--ei-duration-fast) var(--ei-ease), border-color var(--ei-duration-fast) var(--ei-ease);
}

:where(.ei-workspace) button:where(:hover),
.ei-button:hover {
  background: var(--ei-surface-hover);
  color: var(--ei-text);
  text-decoration: none;
}

.ei-button .ei-icon { font-size: var(--ei-type-label); }

/* Primary: one per screen region, the action the screen exists for. */
.ei-button--primary {
  background: var(--ei-accent);
  border-color: var(--ei-accent);
  color: var(--ei-on-accent);
}

.ei-button--primary:hover {
  background: var(--ei-accent-hover);
  border-color: var(--ei-accent-hover);
  color: var(--ei-on-accent);
}

.ei-button--ghost {
  background: transparent;
  border-color: transparent;
}

.ei-button--ghost:hover { background: var(--ei-surface-hover); }

.ei-button--danger { color: var(--ei-danger); }
.ei-button--danger:hover { background: var(--ei-danger-bg); color: var(--ei-danger); }

.ei-button--sm {
  min-height: var(--ei-control-sm);
  padding: var(--ei-space-1) var(--ei-space-3);
  font-size: var(--ei-type-caption);
}

.ei-button--lg { min-height: var(--ei-control-lg); padding-inline: var(--ei-space-4); }

.ei-button--icon {
  width: var(--ei-control-md);
  padding: 0;
}

.ei-button--icon.ei-button--sm { width: var(--ei-control-sm); }

/* Compact buttons inside table rows. */
:where(.ei-workspace td) :is(button, .ei-button) {
  min-height: var(--ei-control-sm);
  margin: 0 var(--ei-space-2) var(--ei-space-1) 0;
  padding: var(--ei-space-1) var(--ei-space-3);
  font-size: var(--ei-type-caption);
}

.ei-button:disabled,
.ei-button[aria-disabled="true"],
:where(.ei-workspace) button:disabled {
  background: var(--ei-surface-sunken);
  border-color: var(--ei-border);
  color: var(--ei-text-muted);
  cursor: not-allowed;
}

.ei-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ei-space-2);
}

/* Text action inside a sentence or a summary line. */
.ei-link-button {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ei-accent-text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: var(--ei-underline-offset);
  cursor: pointer;
}

@media (max-width: 767px) {
  :where(.ei-workspace) button,
  .ei-button,
  :where(.ei-workspace td) :is(button, .ei-button) { min-height: var(--ei-control-touch); }
  .ei-button--icon,
  .ei-button--icon.ei-button--sm { width: var(--ei-control-touch); }
}

/* 50-components/card.css */
/* Card on the page background: surface, border, radius lg, no shadow. Never nested:
   inside a card, group with a sunken block or a divider. */
.ei-card,
.ei-section,
.ei-next,
.ei-workspace .ei-surface {
  min-width: 0;
  max-width: 100%;
  padding: var(--ei-space-6);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface);
  color: var(--ei-text);
  box-shadow: none;
}

:is(.ei-card, .ei-section, .ei-surface) > :is(h2, h3):first-child { margin-top: 0; }
.ei-workspace .ei-surface .ei-toolbar:last-child { margin-bottom: 0; }

/* A card inside a card loses its frame and becomes a sunken group. */
:is(.ei-card, .ei-section, .ei-surface) :is(.ei-card, .ei-section, .ei-surface) {
  padding: var(--ei-space-4);
  border: 0;
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-sunken);
}

.ei-workspace :is(.ei-content, .ei-form-layout) > .ei-surface + .ei-surface { margin-block-start: var(--ei-space-5); }

/* A fieldset used as a card keeps its legend inside the frame instead of on the border. */
fieldset:is(.ei-card, .ei-surface) { min-inline-size: 0; }

fieldset:is(.ei-card, .ei-surface) > legend {
  float: left;
  width: 100%;
  margin: 0 0 var(--ei-space-4);
  padding: 0;
  border: 0;
  color: var(--ei-text);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

fieldset:is(.ei-card, .ei-surface) > legend + * { clear: both; }

/* Context pill: a compact link to a related record. */
.ei-workspace a:is(.ei-link-pill, .ei-context-pill) {
  display: inline-flex;
  align-items: center;
  gap: var(--ei-space-1);
  max-width: 100%;
  min-height: var(--ei-control-sm);
  padding: var(--ei-space-1) var(--ei-space-3);
  border: 0;
  border-radius: var(--ei-radius-pill);
  background: var(--ei-surface-sunken);
  color: var(--ei-text);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.ei-workspace a:is(.ei-link-pill, .ei-context-pill):hover {
  background: var(--ei-surface-hover);
  color: var(--ei-accent-text);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .ei-workspace a:is(.ei-link-pill, .ei-context-pill) { min-height: var(--ei-control-touch); }
}

@media (max-width: 767px) {
  .ei-card,
  .ei-section,
  .ei-next,
  .ei-workspace .ei-surface { padding: var(--ei-space-4); }
}

/* 50-components/chart.css */
/* Charts (DESIGN.md section 3 and 7). Geometry arrives as inline --ei-value / --ei-share /
   --ei-x / --ei-y custom properties; everything visual comes from tokens.
   Series identity: .ei-s1..6 set --ei-series in the fixed categorical order. */
.ei-s1 { --ei-series: var(--ei-chart-1); }
.ei-s2 { --ei-series: var(--ei-chart-2); }
.ei-s3 { --ei-series: var(--ei-chart-3); }
.ei-s4 { --ei-series: var(--ei-chart-4); }
.ei-s5 { --ei-series: var(--ei-chart-5); }
.ei-s6 { --ei-series: var(--ei-chart-6); }

/* Card that frames one chart: title-sm plus period or filter on the right. */
.ei-chart-card {
  min-width: 0;
  padding: var(--ei-space-6);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface);
  color: var(--ei-text);
}

.ei-chart-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ei-space-3);
  margin-bottom: var(--ei-space-5);
}

.ei-chart-card__title {
  margin: 0;
  color: var(--ei-text);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

.ei-chart-card__subtitle {
  margin: var(--ei-space-1) 0 0;
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
}

.ei-chart {
  container-type: inline-size;
  min-width: 0;
  margin: 0;
  color: var(--ei-text);
}

/* Plot area with a left gutter for the value ticks. */
.ei-chart__plot {
  position: relative;
  height: var(--ei-chart-h);
  margin: var(--ei-space-2) 0 0 var(--ei-chart-gutter);
}

.ei-chart__grid { position: absolute; inset: 0; pointer-events: none; }

.ei-chart__gridline {
  position: absolute;
  right: 0;
  bottom: var(--ei-y);
  left: 0;
  border-top: var(--ei-hairline) solid var(--ei-divider);
}

.ei-chart__gridline:first-child { border-top-color: var(--ei-border); }

.ei-chart__tick {
  position: absolute;
  top: 0;
  right: calc(100% + var(--ei-space-2));
  transform: translateY(-50%);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ei-chart__x {
  display: flex;
  margin: var(--ei-space-2) 0 0 var(--ei-chart-gutter);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
}

.ei-chart__x > span {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bars: thin, 4px rounded data end, square at the baseline, 2px surface gap between fills. */
.ei-chart__groups {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
}

.ei-chart__group {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  gap: var(--ei-rule);
  min-width: 0;
  padding: 0 var(--ei-space-1);
  border-radius: var(--ei-radius-sm) var(--ei-radius-sm) 0 0;
  cursor: default;
  transition: background-color var(--ei-duration-fast) var(--ei-ease);
}

.ei-chart__group:hover,
.ei-chart__group:focus-visible { background: var(--ei-surface-hover); }

.ei-chart__bar {
  position: relative;
  flex: 0 1 var(--ei-bar-max);
  height: var(--ei-value);
  border-radius: var(--ei-bar-radius) var(--ei-bar-radius) 0 0;
  background: var(--ei-series, var(--ei-chart-1));
}

.ei-chart__value {
  position: absolute;
  bottom: calc(100% + var(--ei-space-1));
  left: 50%;
  transform: translateX(-50%);
  color: var(--ei-text);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ei-chart__stack {
  display: flex;
  flex: 0 1 var(--ei-bar-max);
  flex-direction: column-reverse;
  height: var(--ei-value);
  overflow: hidden;
  border-radius: var(--ei-bar-radius) var(--ei-bar-radius) 0 0;
}

.ei-chart__segment {
  box-sizing: border-box;
  flex: none;
  height: var(--ei-share);
  background: var(--ei-series, var(--ei-chart-1));
}

.ei-chart__segment + .ei-chart__segment { border-bottom: var(--ei-rule) solid var(--ei-surface); }

/* Lines: 2px stroke, end marker 8px with a 2px surface ring, a value label at the end. */
.ei-chart__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ei-chart__line {
  fill: none;
  stroke: var(--ei-series, var(--ei-chart-1));
  stroke-width: var(--ei-rule);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ei-chart__area { fill: var(--ei-series, var(--ei-chart-1)); fill-opacity: .12; stroke: none; }

.ei-chart__target {
  stroke: var(--ei-text-muted);
  stroke-width: var(--ei-hairline);
  stroke-dasharray: var(--ei-space-1) var(--ei-space-1);
}

.ei-chart__dot {
  position: absolute;
  top: var(--ei-y);
  left: var(--ei-x);
  width: var(--ei-dot-mark);
  height: var(--ei-dot-mark);
  border-radius: var(--ei-radius-pill);
  background: var(--ei-series, var(--ei-chart-1));
  box-shadow: 0 0 0 var(--ei-rule) var(--ei-surface);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ei-chart__end {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--ei-space-1));
  padding: 0 var(--ei-pill-pad-y);
  border-radius: var(--ei-radius-sm);
  background: var(--ei-surface);
  color: var(--ei-text);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hover and focus targets: one full-height slice per category, a hairline crosshair inside. */
.ei-chart__slices { position: absolute; inset: 0; display: flex; }
.ei-chart__slice { flex: 1 1 0; min-width: 0; cursor: default; }

.ei-chart__slice:hover,
.ei-chart__slice:focus-visible {
  background: linear-gradient(var(--ei-border-strong), var(--ei-border-strong)) center / var(--ei-hairline) 100% no-repeat;
}

/* Legend: present for two or more series, text in text tokens, colour only on the key. */
.ei-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ei-space-2) var(--ei-space-4);
  margin: var(--ei-space-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
}

.ei-legend__item { display: inline-flex; align-items: center; gap: var(--ei-space-2); min-width: 0; }

.ei-legend__key {
  flex: none;
  width: var(--ei-space-3);
  height: var(--ei-space-3);
  border-radius: var(--ei-pill-pad-y);
  background: var(--ei-series, var(--ei-chart-1));
}

.ei-legend__key--line { width: var(--ei-space-4); height: var(--ei-rule); border-radius: var(--ei-radius-pill); }

.ei-legend__key--target {
  background: repeating-linear-gradient(to right, var(--ei-text-muted) 0 var(--ei-space-1), transparent var(--ei-space-1) var(--ei-space-2));
}

.ei-legend--stacked { flex-direction: column; flex-wrap: nowrap; gap: var(--ei-space-2); margin: 0; }

.ei-legend--stacked .ei-legend__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--ei-space-2) var(--ei-space-3);
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
}

.ei-legend__name { color: var(--ei-text); overflow-wrap: anywhere; }
.ei-legend__value { color: var(--ei-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Table view of every chart, the non-visual fallback. */
.ei-chart__table { margin-top: var(--ei-space-4); }

.ei-chart__table > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--ei-control-sm);
  color: var(--ei-accent-text);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-medium);
  cursor: pointer;
}

.ei-chart__table .ei-table { margin-top: var(--ei-space-2); background: transparent; }

/* Donut: at most six shares, total in the centre, stacked legend with value and share. */
.ei-chart--donut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ei-space-6);
}

.ei-chart--donut .ei-legend--stacked { flex: 1 1 calc(var(--ei-donut) * 1.2); }

.ei-donut {
  position: relative;
  flex: none;
  width: var(--ei-donut);
  height: var(--ei-donut);
}

/* Arcs start at 12 o'clock and run clockwise: the dash offset in components.js handles it. */
.ei-donut__svg { display: block; width: 100%; height: 100%; }
.ei-donut__track,
.ei-donut__arc { fill: none; stroke-width: 5; }
.ei-donut__track { stroke: var(--ei-surface); }
.ei-donut__arc { stroke: var(--ei-series, var(--ei-chart-1)); transition: stroke-width var(--ei-duration-fast) var(--ei-ease); }
.ei-donut__arc:hover { stroke-width: 6; }

.ei-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ei-donut__total { color: var(--ei-text); font-size: var(--ei-type-title); line-height: var(--ei-leading-title); font-weight: var(--ei-weight-strong); font-variant-numeric: tabular-nums; }
.ei-donut__caption { color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: var(--ei-leading-caption); }

/* Rank list: place, avatar, name, value, mini bar. The current user sits on accent-soft. */
.ei-rank {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--ei-pill-pad-y);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ei-rank__row {
  display: grid;
  grid-template-columns: var(--ei-space-6) auto minmax(0, 1fr) auto var(--ei-rank-bar);
  align-items: center;
  gap: var(--ei-space-3);
  padding: var(--ei-space-2) var(--ei-space-3);
  border-radius: var(--ei-radius-md);
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
}

.ei-rank__row--me { background: var(--ei-accent-soft); }
.ei-rank__place { color: var(--ei-text-muted); font-size: var(--ei-type-label); font-variant-numeric: tabular-nums; text-align: right; }
.ei-rank__name { overflow: hidden; color: var(--ei-text); text-overflow: ellipsis; white-space: nowrap; }
.ei-rank__row--me .ei-rank__name { font-weight: var(--ei-weight-strong); }
.ei-rank__value { color: var(--ei-text); font-weight: var(--ei-weight-medium); font-variant-numeric: tabular-nums; text-align: right; }

.ei-rank__bar {
  height: var(--ei-track);
  overflow: hidden;
  border-radius: var(--ei-radius-pill);
  background: var(--ei-chart-track);
}

.ei-rank__fill {
  display: block;
  width: var(--ei-value);
  height: 100%;
  border-radius: var(--ei-radius-pill);
  background: var(--ei-chart-1);
}

/* Tooltip: one floating element, positioned by bind() through --ei-tip-x / --ei-tip-y. */
.ei-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--ei-z-toast);
  max-width: var(--ei-tooltip-max);
  padding: var(--ei-space-2) var(--ei-space-3);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-elevated);
  color: var(--ei-text);
  box-shadow: var(--ei-shadow-2);
  font-family: var(--ei-font);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-variant-numeric: tabular-nums;
  transform: translate(var(--ei-tip-x, 0), var(--ei-tip-y, 0));
  pointer-events: none;
}

.ei-tooltip[hidden] { display: none; }

@container (max-width: 520px) {
  .ei-chart__x:has(> :nth-child(9)) > :nth-child(even) { visibility: hidden; }
  .ei-chart__group { padding: 0 var(--ei-pill-pad-y); }
}

@container (max-width: 360px) {
  .ei-rank__row { grid-template-columns: var(--ei-space-5) auto minmax(0, 1fr) auto; }
  .ei-rank__bar { display: none; }
}

@media (max-width: 767px) {
  .ei-chart-card { padding: var(--ei-space-4); }
}

@media (forced-colors: active) {
  .ei-chart__bar,
  .ei-chart__segment,
  .ei-legend__key,
  .ei-rank__fill,
  .ei-chart__dot { forced-color-adjust: none; }
}

/* 50-components/dialog.css */
/* Overlays: native <dialog> as modal (form 560, wide 800) or right drawer 480; toast stack.
   All of them float on surface-elevated with elevation 3 (toast 2) over the backdrop token. */
.ei-dialog {
  width: min(var(--ei-form-max), calc(100vw - var(--ei-space-5) * 2));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ei-text);
  font-family: var(--ei-font);
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
}

.ei-dialog--wide { width: min(var(--ei-dialog-wide), calc(100vw - var(--ei-space-5) * 2)); }
.ei-dialog::backdrop { background: var(--ei-backdrop); }

.ei-dialog__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--ei-space-7) * 2);
  overflow: hidden;
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface-elevated);
  box-shadow: var(--ei-shadow-3);
}

.ei-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ei-space-3);
  padding: var(--ei-space-5) var(--ei-space-5) var(--ei-space-3) var(--ei-space-6);
}

.ei-dialog__title {
  margin: var(--ei-space-1) 0 0;
  color: var(--ei-text);
  font-size: var(--ei-type-title);
  line-height: var(--ei-leading-title);
  font-weight: var(--ei-weight-strong);
}

.ei-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 var(--ei-space-6) var(--ei-space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ei-dialog__body > :first-child { margin-top: 0; }
.ei-dialog__body > :last-child { margin-bottom: 0; }

.ei-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ei-space-2);
  padding: var(--ei-space-4) var(--ei-space-6);
  border-top: var(--ei-hairline) solid var(--ei-divider);
}

/* Drawer: full height on the right, for a quick look at a record from a table. */
.ei-dialog--drawer {
  width: min(var(--ei-drawer-w), 100vw);
  height: 100dvh;
  margin: 0 0 0 auto;
}

.ei-dialog--drawer .ei-dialog__panel {
  height: 100%;
  max-height: none;
  border-width: 0 0 0 var(--ei-hairline);
  border-radius: var(--ei-radius-lg) 0 0 var(--ei-radius-lg);
}

@media (prefers-reduced-motion: no-preference) {
  .ei-dialog[open] .ei-dialog__panel { animation: ei-rise var(--ei-duration-base) var(--ei-ease); }
  .ei-dialog--drawer[open] .ei-dialog__panel { animation-name: ei-slide-in; }
  .ei-dialog[open]::backdrop { animation: ei-fade var(--ei-duration-base) var(--ei-ease); }
}

@keyframes ei-rise { from { opacity: 0; transform: translateY(var(--ei-space-2)); } }
@keyframes ei-slide-in { from { opacity: 0; transform: translateX(var(--ei-space-7)); } }
@keyframes ei-fade { from { opacity: 0; } }

/* Mobile: a modal becomes a bottom sheet, footer actions share the width. */
@media (max-width: 767px) {
  .ei-dialog:not(.ei-dialog--drawer) { width: 100vw; margin: auto 0 0; }
  .ei-dialog--drawer { width: 100vw; max-width: 100vw; }
  .ei-dialog--drawer .ei-dialog__panel { border-width: 0; border-radius: 0; }
  .ei-dialog:not(.ei-dialog--drawer) .ei-dialog__panel {
    max-height: calc(100dvh - var(--ei-space-7));
    border-width: var(--ei-hairline) 0 0;
    border-radius: var(--ei-radius-lg) var(--ei-radius-lg) 0 0;
  }
  .ei-dialog__head { padding: var(--ei-space-4) var(--ei-space-3) var(--ei-space-2) var(--ei-space-4); }
  .ei-dialog__body { padding: 0 var(--ei-space-4) var(--ei-space-4); }
  .ei-dialog__foot { padding: var(--ei-space-3) var(--ei-space-4); }
  .ei-dialog__foot > * { flex: 1 1 auto; }
}

/* Toast: bottom right, 4 s, optional undo, pauses while hovered or focused. */
.ei-toasts {
  position: fixed;
  right: var(--ei-space-5);
  bottom: var(--ei-space-5);
  z-index: var(--ei-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-2);
  width: min(var(--ei-toast-w), calc(100vw - var(--ei-space-5) * 2));
  pointer-events: none;
}

.ei-toasts:empty { display: none; }

.ei-toast {
  display: flex;
  align-items: center;
  gap: var(--ei-space-3);
  padding: var(--ei-space-3) var(--ei-space-2) var(--ei-space-3) var(--ei-space-4);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-elevated);
  color: var(--ei-text);
  box-shadow: var(--ei-shadow-2);
  font-family: var(--ei-font);
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
  pointer-events: auto;
}

.ei-toast__icon { flex: none; font-size: var(--ei-icon-sm); }
.ei-toast--success .ei-toast__icon { color: var(--ei-success); }
.ei-toast--warning .ei-toast__icon { color: var(--ei-warning); }
.ei-toast--danger .ei-toast__icon { color: var(--ei-danger); }
.ei-toast__text { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }

.ei-toast__action,
.ei-toast__close {
  flex: none;
  min-height: var(--ei-control-sm);
  border: 0;
  border-radius: var(--ei-radius-sm);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.ei-toast__action { padding: 0 var(--ei-space-2); color: var(--ei-accent-text); font-weight: var(--ei-weight-medium); }
.ei-toast__close { display: grid; place-items: center; width: var(--ei-control-sm); padding: 0; color: var(--ei-text-muted); }
.ei-toast__action:hover,
.ei-toast__close:hover { background: var(--ei-surface-hover); }

@media (prefers-reduced-motion: no-preference) {
  .ei-toast { animation: ei-rise var(--ei-duration-base) var(--ei-ease); }
}

@media (max-width: 767px) {
  .ei-toasts { right: var(--ei-space-3); bottom: var(--ei-space-3); left: var(--ei-space-3); width: auto; }
  .ei-toast__action,
  .ei-toast__close { min-height: var(--ei-control-touch); }
  .ei-toast__close { width: var(--ei-control-touch); }
}

/* 50-components/drop.css */
/* File drop: dashed border-strong zone, icon, one line of text, limits in caption. The native
   input stays in the tab order (visually hidden); its focus ring is drawn on the zone. */
.ei-drop {
  display: flex;
  flex-direction: column;
  gap: var(--ei-field-gap);
  margin: var(--ei-space-3) 0;
}

.ei-drop__input {
  position: absolute;
  width: var(--ei-hairline);
  height: var(--ei-hairline);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ei-drop__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ei-space-1);
  min-height: calc(var(--ei-control-touch) * 2.5);
  margin: 0;
  padding: var(--ei-space-5) var(--ei-space-4);
  border: var(--ei-hairline) dashed var(--ei-border-strong);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface);
  color: var(--ei-text);
  font-weight: var(--ei-weight-regular);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--ei-duration-fast) var(--ei-ease), border-color var(--ei-duration-fast) var(--ei-ease);
}

.ei-drop__zone:hover,
.ei-drop--active .ei-drop__zone {
  border-color: var(--ei-accent);
  background: var(--ei-accent-soft);
}

.ei-drop__input:focus-visible + .ei-drop__zone {
  border-color: var(--ei-accent);
  box-shadow: 0 0 0 var(--ei-focus-width) var(--ei-focus-ring);
}

.ei-drop__icon { color: var(--ei-text-subtle); font-size: var(--ei-type-title); }
.ei-drop__link { color: var(--ei-accent-text); text-decoration: underline; text-underline-offset: var(--ei-underline-offset); }
.ei-drop__hint { color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: var(--ei-leading-caption); }
.ei-drop__file:not(:empty) { color: var(--ei-text); font-size: var(--ei-type-label); font-weight: var(--ei-weight-medium); }

.ei-drop--disabled .ei-drop__zone {
  background: var(--ei-surface-sunken);
  color: var(--ei-text-muted);
  cursor: not-allowed;
}

/* 50-components/field.css */
/* Field: label on top (13/500 muted, gap 6), control 36, hint or error in caption under it.
   .ei-input is the library control; bare controls inside the workspace look the same through :where(). */
.ei-field {
  display: flex;
  flex-direction: column;
  gap: var(--ei-field-gap);
  margin: var(--ei-space-3) 0;
  min-width: 0;
  color: var(--ei-text-muted);
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
  font-weight: var(--ei-weight-medium);
}

.ei-field__label {
  display: block;
  margin: 0;
  color: var(--ei-text-muted);
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
  font-weight: var(--ei-weight-medium);
}

.ei-field__optional { font-weight: var(--ei-weight-regular); color: var(--ei-text-muted); }

.ei-input,
:where(.ei-workspace) :where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"])) {
  box-sizing: border-box;
  max-width: 100%;
  min-height: var(--ei-control-md);
  padding: var(--ei-control-pad-y) var(--ei-control-pad-x);
  border: var(--ei-hairline) solid var(--ei-border-strong);
  border-radius: var(--ei-radius-sm);
  background: var(--ei-surface);
  color: var(--ei-text);
  font: inherit;
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
  font-weight: var(--ei-weight-regular);
  caret-color: var(--ei-accent);
  transition: border-color var(--ei-duration-fast) var(--ei-ease), box-shadow var(--ei-duration-fast) var(--ei-ease);
}

/* Controls stretch inside a field; elsewhere (toolbars, inline filters) they keep their own width. */
.ei-input,
:where(.ei-field) :where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"])) { width: 100%; }

.ei-input--multiline,
:where(.ei-workspace) textarea {
  min-height: var(--ei-textarea-min);
  resize: vertical;
}

/* Pre-library full-width textarea, migrated to .ei-input in stage 0.5. */
.ei-form-textarea { display: block; width: 100%; }

.ei-input::placeholder,
:where(.ei-workspace) ::placeholder {
  color: var(--ei-text-subtle);
  opacity: 1;
}

.ei-input:hover:not(:disabled, [readonly]) { border-color: var(--ei-text-subtle); }

.ei-input:focus-visible {
  outline: none;
  border-color: var(--ei-accent);
  box-shadow: 0 0 0 var(--ei-focus-width) var(--ei-focus-ring);
}

.ei-input:is(:disabled, [readonly]),
:where(.ei-workspace) :where(input:not([type="checkbox"], [type="radio"]), select, textarea):is(:disabled, [readonly]),
:where(.ei-workspace fieldset:disabled) :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  background: var(--ei-surface-sunken);
  color: var(--ei-text-muted);
  opacity: 1;
}

.ei-input:disabled,
:where(.ei-workspace) :where(input, select, textarea):disabled { cursor: not-allowed; }

.ei-input[aria-invalid="true"],
:where(.ei-workspace) [aria-invalid="true"] { border-color: var(--ei-danger); }

.ei-field__hint,
.ei-field__error,
.ei-field-error {
  margin: 0;
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-regular);
}

.ei-field__hint { color: var(--ei-text-muted); }
.ei-field__error,
.ei-field-error { color: var(--ei-danger); }

.ei-field--compact { margin: 0; }

/* Checkbox row: the whole label is the target, hint under the label text. */
.ei-check,
:where(.ei-workspace) label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: var(--ei-space-3);
  min-height: var(--ei-control-md);
  padding-block: var(--ei-space-2);
  color: var(--ei-text);
  font-weight: var(--ei-weight-regular);
  cursor: pointer;
}

:is(#main, .modal) .ei-check > input[type="checkbox"],
#main .ei-workspace label > input[type="checkbox"] { margin: 0; }

.ei-check__text { display: flex; flex-direction: column; gap: var(--ei-pill-pad-y); }
.ei-check__hint { color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: var(--ei-leading-caption); }

:where(.ei-workspace) fieldset { min-inline-size: 0; }

@media (max-width: 767px) {
  /* :is() keeps the weight of an element selector, so Espo's "input { font: inherit }" does not win. */
  .ei-input,
  :where(.ei-workspace) :is(input, select, textarea) { font-size: var(--ei-type-input-touch); }
  .ei-input:not(.ei-input--multiline),
  :where(.ei-workspace) :is(input:not([type="checkbox"], [type="radio"]), select) { min-height: var(--ei-control-touch); }
  /* Disclosure rows: a full touch height without dropping the native marker. */
  :where(.ei-workspace) summary { padding-block: max(var(--ei-space-1), calc((var(--ei-control-touch) - 1lh) / 2)); }
  .ei-check,
  :where(.ei-workspace) label:has(input[type="checkbox"]) { min-height: var(--ei-control-touch); }
}

/* Single short value (an ID, a code): narrower than the form column. */
.ei-field--narrow { max-width: var(--ei-col-card-min); }

/* 50-components/figure.css */
/* Figures: stat tile, plan/fact progress, avatar, sparkline.
   Stat tile: label muted, metric value with proportional figures, delta coloured by direction and
   by whether up is good. No icon circles. */
.ei-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--ei-col-card-min) * .7), 1fr));
  gap: var(--ei-space-4);
}

.ei-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-1);
  min-width: 0;
  padding: var(--ei-space-5);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface);
  color: var(--ei-text);
}

.ei-stat p { margin: 0; }
a.ei-stat--link { text-decoration: none; }
a.ei-stat--link:hover { background: var(--ei-surface-hover); text-decoration: none; }

/* Inside a card the tiles lose their own frame. */
:is(.ei-card, .ei-surface) .ei-stat { padding: 0; border: 0; background: transparent; }

.ei-stat__label { color: var(--ei-text-muted); font-size: var(--ei-type-label); line-height: var(--ei-leading-label); font-weight: var(--ei-weight-medium); }
.ei-stat__value { color: var(--ei-text); font-size: var(--ei-type-metric); line-height: var(--ei-leading-metric); font-weight: var(--ei-weight-strong); letter-spacing: var(--ei-tracking-page); }

.ei-stat__delta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ei-space-1);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
  font-variant-numeric: tabular-nums;
}

.ei-stat__delta > :not(.ei-stat__period) { flex-shrink: 0; white-space: nowrap; }
.ei-stat__delta > .ei-stat__period { flex-basis: 100%; }

.ei-stat__delta--success { color: var(--ei-success); }
.ei-stat__delta--danger { color: var(--ei-danger); }
.ei-stat__delta--neutral { color: var(--ei-text-muted); }
.ei-stat__period { color: var(--ei-text-muted); font-weight: var(--ei-weight-regular); }
.ei-stat__caption { color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: var(--ei-leading-caption); }

.ei-sparkline {
  display: block;
  width: 100%;
  height: var(--ei-sparkline-h);
  margin-top: var(--ei-space-2);
  overflow: visible;
}

.ei-sparkline polyline {
  fill: none;
  stroke: var(--ei-chart-1);
  stroke-width: var(--ei-rule);
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Plan / fact: sunken track 6px, accent fill; at 100% and over the fill turns success. */
.ei-progress-meter { display: flex; flex-direction: column; gap: var(--ei-space-2); }

.ei-progress-meter__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ei-space-1) var(--ei-space-3);
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
}

.ei-progress-meter__label { color: var(--ei-text); font-weight: var(--ei-weight-medium); }
.ei-progress-meter__value { color: var(--ei-text-muted); font-variant-numeric: tabular-nums; }

.ei-progress-meter__bar {
  appearance: none;
  display: block;
  width: 100%;
  height: var(--ei-track);
  border: 0;
  border-radius: var(--ei-radius-pill);
  overflow: hidden;
  background: var(--ei-chart-track);
  color: var(--ei-accent);
}

.ei-progress-meter__bar::-webkit-progress-bar { background: var(--ei-chart-track); border-radius: var(--ei-radius-pill); }
.ei-progress-meter__bar::-webkit-progress-value { background: var(--ei-accent); border-radius: var(--ei-radius-pill); }
.ei-progress-meter__bar::-moz-progress-bar { background: var(--ei-accent); border-radius: var(--ei-radius-pill); }
.ei-progress-meter--done .ei-progress-meter__bar::-webkit-progress-value { background: var(--ei-success); }
.ei-progress-meter--done .ei-progress-meter__bar::-moz-progress-bar { background: var(--ei-success); }
.ei-progress-meter--done .ei-progress-meter__value { color: var(--ei-success); }

/* Avatar: circle 24/32/48, initials on the neutral tint, a photo gets a hairline. */
.ei-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--ei-avatar-md);
  height: var(--ei-avatar-md);
  border-radius: var(--ei-radius-pill);
  background: var(--ei-neutral-bg);
  color: var(--ei-neutral);
  font-size: var(--ei-type-caption);
  line-height: 1;
  font-weight: var(--ei-weight-strong);
  object-fit: cover;
}

.ei-avatar--24 { width: var(--ei-avatar-sm); height: var(--ei-avatar-sm); font-size: var(--ei-type-caption); }
.ei-avatar--48 { width: var(--ei-avatar-lg); height: var(--ei-avatar-lg); font-size: var(--ei-type-body); }
.ei-avatar--photo { border: var(--ei-hairline) solid var(--ei-border); }

/* Phone: two tiles in a row, so four key figures fit one screen. */
@media (max-width: 767px) {
  .ei-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ei-space-3); }
  .ei-stat { padding: var(--ei-space-4); }
}

/* 50-components/filter.css */
/* Filter bar: search (wider) plus up to four selects, then "more filters"; under it a caption
   summary and active filters as removable chips. Period picker is a segmented control. */
.ei-filter-bar { margin: 0 0 var(--ei-space-5); }

.ei-filter-bar__controls {
  display: grid;
  grid-template-columns: minmax(var(--ei-col-search-min), 2fr) repeat(auto-fit, minmax(var(--ei-col-filter-min), 1fr));
  align-items: end;
  gap: var(--ei-space-3);
}

.ei-filter-bar__more { display: flex; align-items: flex-end; }

/* The selects sit in the same grid as the search; the toggle exists for phones only. */
.ei-filter-bar__fields { display: contents; }
.ei-filter-bar__toggle { display: none; }

.ei-filter-bar__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ei-space-2);
  margin-top: var(--ei-space-3);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
}

.ei-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ei-space-1);
  min-height: var(--ei-avatar-sm);
  padding: 0 var(--ei-space-1) 0 var(--ei-space-2);
  border-radius: var(--ei-radius-pill);
  background: var(--ei-accent-soft);
  color: var(--ei-accent-text);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-medium);
}

.ei-chip__remove {
  display: inline-grid;
  place-items: center;
  width: var(--ei-icon-md);
  height: var(--ei-icon-md);
  padding: 0;
  border: 0;
  border-radius: var(--ei-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ei-chip__remove:hover { background: var(--ei-surface-hover); }

.ei-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ei-pill-pad-y);
  padding: var(--ei-pill-pad-y);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-sunken);
}

.ei-segmented__item {
  min-height: var(--ei-control-sm);
  padding: 0 var(--ei-space-3);
  border: 0;
  border-radius: var(--ei-radius-sm);
  background: transparent;
  color: var(--ei-text-muted);
  font: inherit;
  font-size: var(--ei-type-label);
  font-weight: var(--ei-weight-medium);
  cursor: pointer;
  transition: background-color var(--ei-duration-fast) var(--ei-ease), color var(--ei-duration-fast) var(--ei-ease);
}

.ei-segmented__item:hover { color: var(--ei-text); }

.ei-segmented__item[aria-pressed="true"] {
  background: var(--ei-surface);
  color: var(--ei-text);
  box-shadow: var(--ei-shadow-1);
}

@media (max-width: 767px) {
  /* Search and the "Фильтры" button share a row; the selects open under them. */
  .ei-filter-bar__controls { grid-template-columns: minmax(0, 1fr) auto; }
  .ei-filter-bar:not(.ei-filter-bar--search) .ei-filter-bar__controls { grid-template-columns: minmax(0, 1fr); }
  .ei-filter-bar__toggle { display: inline-flex; min-height: var(--ei-control-touch); }
  .ei-filter-bar__toggle[aria-expanded="true"] { background: var(--ei-surface-hover); }
  .ei-filter-bar__fields {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ei-space-3);
    padding: var(--ei-space-3);
    border-radius: var(--ei-radius-md);
    background: var(--ei-surface-sunken);
  }
  .ei-filter-bar[data-open] .ei-filter-bar__fields { display: grid; }
  .ei-filter-bar__summary { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ei-filter-bar__summary > * { flex: 0 0 auto; }
  .ei-segmented { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ei-segmented__item { flex: 1 0 auto; min-height: var(--ei-control-touch); white-space: nowrap; }
  .ei-chip__remove { width: var(--ei-control-sm); height: var(--ei-control-sm); }
}

@media (max-width: 420px) {
  .ei-filter-bar__fields { grid-template-columns: minmax(0, 1fr); }
}

/* 50-components/layout.css */
/* Layout primitives and secondary text roles. Screens combine them with components instead of
   inline styles: a vertical stack, an inline row, a growing cell, a divided block, meta and hint text. */
.ei-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-3);
  min-width: 0;
}

.ei-stack--tight { gap: var(--ei-space-2); }
.ei-stack--loose { gap: var(--ei-space-5); }

.ei-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ei-space-2);
  min-width: 0;
}

.ei-row--between { justify-content: space-between; }
.ei-row--top { align-items: flex-start; }
.ei-row--loose { gap: var(--ei-space-3); }
.ei-grow { flex: 1 1 0; min-width: 0; }

/* A block that follows the main content of a card: form under a thread, linking form under context. */
.ei-divided {
  margin-top: var(--ei-space-5);
  padding-top: var(--ei-space-4);
  border-top: var(--ei-hairline) solid var(--ei-divider);
}

/* One muted line under a title or value: author, time, channel, counts. */
.ei-meta {
  display: block;
  margin: var(--ei-space-1) 0 0;
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
}

/* Short muted explanation above content it applies to. */
.ei-hint {
  margin: 0 0 var(--ei-space-3);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
}

/* Heading of a group inside a card: label size, no uppercase (DESIGN.md §4). */
.ei-subhead {
  margin: 0 0 var(--ei-space-2);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-label);
  font-weight: var(--ei-weight-medium);
  line-height: var(--ei-leading-label);
}

/* Definition list of short facts: muted term, value beside it; one column on narrow screens. */
.ei-dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--ei-space-1) var(--ei-space-3);
  margin: var(--ei-space-2) 0;
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
}

.ei-dl dt { color: var(--ei-text-muted); font-weight: var(--ei-weight-regular); }
.ei-dl dd { margin: 0; color: var(--ei-text); overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .ei-dl { grid-template-columns: minmax(0, 1fr); }
  .ei-dl dd { margin-bottom: var(--ei-space-1); }
}

/* 50-components/menu.css */
/* Disclosure menu built on details/summary: elevated surface, item 36 (44 on touch). */
.ei-workspace .ei-case-actions { position: relative; }

.ei-workspace .ei-case-actions > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--ei-control-md);
  padding: var(--ei-control-pad-y) var(--ei-control-pad-x);
  border: var(--ei-hairline) solid var(--ei-border-strong);
  border-radius: var(--ei-radius-sm);
  background: var(--ei-surface);
  color: var(--ei-text);
  font-size: var(--ei-type-label);
  font-weight: var(--ei-weight-medium);
  cursor: pointer;
}

.ei-workspace .ei-case-actions > summary:hover { background: var(--ei-surface-hover); }
.ei-workspace .ei-case-actions[open] > summary { border-color: var(--ei-accent); }

.ei-workspace .ei-case-action-list {
  position: absolute;
  top: calc(100% + var(--ei-space-1));
  right: 0;
  z-index: var(--ei-z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--ei-pill-pad-y);
  width: max-content;
  min-width: var(--ei-menu-min);
  max-width: min(var(--ei-menu-max), calc(100vw - var(--ei-space-9)));
  padding: var(--ei-space-1);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-elevated);
  box-shadow: var(--ei-shadow-2);
}

.ei-workspace .ei-case-action-list :is(a, button) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--ei-control-md);
  padding: var(--ei-space-2) var(--ei-space-3);
  border: 0;
  border-radius: var(--ei-radius-sm);
  background: transparent;
  color: var(--ei-text);
  font-size: var(--ei-type-body);
  font-weight: var(--ei-weight-regular);
  text-align: left;
  text-decoration: none;
  white-space: normal;
  box-shadow: none;
}

.ei-workspace .ei-case-action-list :is(a, button):hover { background: var(--ei-surface-hover); }

.ei-workspace .ei-case-action-list [data-command="closeCase"] {
  margin-top: var(--ei-space-1);
  border-top: var(--ei-hairline) solid var(--ei-divider);
  border-radius: 0;
}

@media (max-width: 767px) {
  .ei-workspace .ei-case-actions { flex-basis: 100%; }
  .ei-workspace .ei-case-actions > summary { min-height: var(--ei-control-touch); }
  .ei-workspace .ei-case-action-list {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: var(--ei-space-2);
    box-shadow: none;
  }
  .ei-workspace .ei-case-action-list :is(a, button) { min-height: var(--ei-control-touch); }
}

/* Library menu (components.js): the same elevated list, opened by a button with aria-expanded. */
.ei-menu {
  position: absolute;
  z-index: var(--ei-z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--ei-pill-pad-y);
  width: max-content;
  min-width: var(--ei-menu-min);
  max-width: min(var(--ei-menu-max), calc(100vw - var(--ei-space-9)));
  padding: var(--ei-space-1);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-elevated);
  box-shadow: var(--ei-shadow-2);
}

.ei-menu[hidden] { display: none; }

.ei-menu__item {
  display: flex;
  align-items: center;
  gap: var(--ei-space-2);
  width: 100%;
  min-height: var(--ei-control-sm);
  padding: var(--ei-space-1) var(--ei-space-3);
  border: 0;
  border-radius: var(--ei-radius-sm);
  background: transparent;
  color: var(--ei-text);
  font: inherit;
  font-size: var(--ei-type-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ei-menu__item:hover,
.ei-menu__item:focus-visible { background: var(--ei-surface-hover); }

@media (max-width: 767px) {
  .ei-menu__item { min-height: var(--ei-control-touch); }
}

/* 50-components/notice.css */
/* Inline notice, error and empty state. Notices are tinted strips without a border. */
.ei-notice,
.ei-error {
  margin: var(--ei-space-3) 0;
  padding: var(--ei-space-3) var(--ei-space-4);
  border: 0;
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-sunken);
  color: var(--ei-text);
}

.ei-error,
.ei-intake-error {
  background: var(--ei-danger-bg);
  color: var(--ei-danger);
}

.ei-intake-error { margin: var(--ei-space-4) 0; }

/* Library notice: icon 16, body text, optional action on the right; semantic tones tint the strip,
   the text stays in text tokens and the icon carries the tone. Legacy notices without an icon
   keep the plain block layout so inline links inside them still flow. */
.ei-notice:has(> .ei-notice__icon) {
  display: flex;
  align-items: flex-start;
  gap: var(--ei-space-3);
}

.ei-notice__icon {
  flex: none;
  margin-top: var(--ei-pill-pad-y);
  color: var(--ei-text-muted);
  font-size: var(--ei-icon-sm);
}

.ei-notice__body { flex: 1 1 0; min-width: 0; }
.ei-notice__body p { margin: 0; }
.ei-notice__title { font-weight: var(--ei-weight-strong); }
.ei-notice__title + .ei-notice__text { margin-top: var(--ei-pill-pad-y); }
.ei-notice__action { flex: none; align-self: center; margin: calc(var(--ei-space-1) * -1) calc(var(--ei-space-2) * -1) calc(var(--ei-space-1) * -1) 0; }

.ei-notice--info { background: var(--ei-info-bg); }
.ei-notice--info .ei-notice__icon { color: var(--ei-info); }
.ei-notice--success { background: var(--ei-success-bg); }
.ei-notice--success .ei-notice__icon { color: var(--ei-success); }
.ei-notice--warning { background: var(--ei-warning-bg); }
.ei-notice--warning .ei-notice__icon { color: var(--ei-warning); }
.ei-notice--danger { background: var(--ei-danger-bg); }
.ei-notice--danger .ei-notice__icon { color: var(--ei-danger); }

@media (max-width: 767px) {
  .ei-notice:has(> .ei-notice__action) { flex-wrap: wrap; }
  .ei-notice__action { flex-basis: 100%; margin: 0; padding-left: calc(var(--ei-icon-sm) + var(--ei-space-3)); }
}

/* Empty state: icon 24 subtle, one title-sm line, one muted line, one button, centred in its block. */
.ei-empty {
  padding: var(--ei-space-7) var(--ei-space-4);
  color: var(--ei-text-muted);
  text-align: center;
}

.ei-empty:has(> .ei-empty__title) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ei-space-2);
}

.ei-empty__icon { margin-bottom: var(--ei-space-1); color: var(--ei-text-subtle); font-size: var(--ei-icon-lg); }

.ei-empty__title {
  margin: 0;
  color: var(--ei-text);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

.ei-empty__text { max-width: var(--ei-reading-max); margin: 0; color: var(--ei-text-muted); }
.ei-empty > .ei-button { margin-top: var(--ei-space-2); }

/* Skeleton: lines of body height on the sunken tint, a slow pulse unless motion is reduced. */
.ei-skeleton { display: flex; flex-direction: column; gap: var(--ei-space-3); padding: var(--ei-space-1) 0; }

.ei-skeleton__line {
  display: block;
  height: var(--ei-space-3);
  border-radius: var(--ei-radius-sm);
  background: var(--ei-surface-sunken);
}

.ei-skeleton__line:last-child:not(:nth-child(2)) { width: 60%; }

@media (prefers-reduced-motion: no-preference) {
  .ei-skeleton__line { animation: ei-pulse calc(var(--ei-duration-base) * 8) var(--ei-ease) infinite alternate; }
}

@keyframes ei-pulse { to { opacity: .45; } }

/* AI document check: one tinted verdict, findings as sunken rows inside it. */
.ei-ai-verdict {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-3);
  margin-bottom: var(--ei-space-4);
  padding: var(--ei-space-4) var(--ei-space-5);
  border: 0;
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-sunken);
  color: var(--ei-text);
}

.ei-ai-verdict--pass { background: var(--ei-success-bg); color: var(--ei-success); }
.ei-ai-verdict--warning { background: var(--ei-warning-bg); color: var(--ei-warning); }
.ei-ai-verdict--failed { background: var(--ei-danger-bg); color: var(--ei-danger); }

.ei-ai-verdict-title {
  display: flex;
  align-items: center;
  gap: var(--ei-space-2);
  font-size: var(--ei-type-body);
  font-weight: var(--ei-weight-strong);
}

.ei-ai-finding {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-1);
  padding: var(--ei-cell-pad-y) var(--ei-cell-pad-x);
  border: 0;
  border-radius: var(--ei-radius-sm);
  background: var(--ei-surface);
  color: var(--ei-text);
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
}

.ei-ai-finding blockquote {
  margin: var(--ei-space-1) 0 0;
  padding-left: var(--ei-space-3);
  border-left: var(--ei-rule) solid var(--ei-border-strong);
  color: var(--ei-text-muted);
}

/* 50-components/page.css */
/* Page header: optional breadcrumb, page title with one muted line, actions on the right.
   Card head: title-sm with an optional caption and actions; a flush card lets a table reach its edges. */
.ei-page-header { margin: 0 0 var(--ei-space-6); }

.ei-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ei-space-1) var(--ei-space-2);
  margin-bottom: var(--ei-space-2);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
}

.ei-breadcrumb a { color: var(--ei-text-muted); text-decoration: none; }
.ei-breadcrumb a:hover { color: var(--ei-text); text-decoration: underline; }
.ei-breadcrumb > span:last-child { color: var(--ei-text); }
.ei-breadcrumb__sep { color: var(--ei-text-subtle); }

@media (max-width: 767px) {
  .ei-breadcrumb { row-gap: 0; }
  .ei-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--ei-control-touch); }
}

.ei-page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ei-space-3) var(--ei-space-5);
}

.ei-page-header__text { min-width: 0; }

.ei-page-header__text h1 {
  margin: 0;
  color: var(--ei-text);
  font-size: var(--ei-type-page);
  line-height: var(--ei-leading-page);
  letter-spacing: var(--ei-tracking-page);
  font-weight: var(--ei-weight-strong);
}

.ei-page-header__subtitle {
  margin: var(--ei-space-1) 0 0;
  max-width: var(--ei-reading-max);
  color: var(--ei-text-muted);
}

.ei-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ei-space-2); }

.ei-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ei-space-3);
  margin-bottom: var(--ei-space-5);
}

.ei-card__title {
  margin: 0;
  color: var(--ei-text);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

.ei-card__subtitle {
  margin: var(--ei-space-1) 0 0;
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
}

.ei-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ei-space-2); }

.ei-card.ei-card--flush { padding: 0; overflow: hidden; }
.ei-card--flush > .ei-card__head { margin: 0; padding: var(--ei-space-5) var(--ei-space-6) var(--ei-space-4); }
.ei-card--flush .ei-table :is(th, td):first-child { padding-left: var(--ei-space-6); }
.ei-card--flush .ei-table :is(th, td):last-child { padding-right: var(--ei-space-6); }

/* Actions bar (components.js actions): secondary actions, then the primary one. On a phone the
   secondary ones fold into the "Ещё действия" menu next to the primary action. */
.ei-actions-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ei-space-2); }
.ei-actions-bar__rest { display: contents; }
.ei-actions-bar__more { display: none; position: relative; }
.ei-actions-bar__more .ei-menu { top: calc(100% + var(--ei-space-1)); right: 0; }

@media (max-width: 767px) {
  .ei-page-header__actions { width: 100%; }
  .ei-page-header__actions > * { flex: 1 1 auto; }
  .ei-actions-bar { flex-wrap: nowrap; width: 100%; }
  .ei-actions-bar__rest { display: none; }
  .ei-actions-bar__more { display: block; flex: 0 0 auto; order: 2; }
  .ei-actions-bar > .ei-button { flex: 1 1 auto; }
  .ei-card--flush > .ei-card__head { padding: var(--ei-space-4) var(--ei-space-4) var(--ei-space-3); }
  .ei-card--flush .ei-table :is(th, td):first-child { padding-left: var(--ei-space-4); }
  .ei-card--flush .ei-table :is(th, td):last-child { padding-right: var(--ei-space-4); }
}

/* 50-components/process.css */
/* Process components: stage stepper, activity feed, document rows, calendar strip.
   Each list is a size container, so it switches to its compact layout by the room it has,
   not by the viewport: the same stepper works in a wide page and in a side column. */

/* Stepper: done is a success marker with a check, current an accent ring, future subtle. */
.ei-stepper {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ei-stepper__step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--ei-space-2);
  min-width: 0;
  padding-right: var(--ei-space-3);
}

.ei-stepper__step::after {
  content: "";
  position: absolute;
  top: calc(var(--ei-marker) / 2 - var(--ei-hairline));
  right: var(--ei-space-2);
  left: calc(var(--ei-marker) + var(--ei-space-2));
  height: var(--ei-rule);
  border-radius: var(--ei-radius-pill);
  background: var(--ei-divider);
}

.ei-stepper__step:last-child::after { display: none; }
.ei-stepper__step--done::after { background: var(--ei-success); }

.ei-stepper__marker {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--ei-marker);
  height: var(--ei-marker);
  border-radius: var(--ei-radius-pill);
  background: var(--ei-surface-sunken);
  color: var(--ei-text-subtle);
  font-size: var(--ei-type-caption);
}

.ei-stepper__step--done .ei-stepper__marker { background: var(--ei-success-bg); color: var(--ei-success); }

.ei-stepper__step--current .ei-stepper__marker {
  background: var(--ei-surface);
  box-shadow: inset 0 0 0 var(--ei-rule) var(--ei-accent);
}

.ei-stepper__step--current .ei-stepper__marker::before {
  content: "";
  width: var(--ei-space-2);
  height: var(--ei-space-2);
  border-radius: var(--ei-radius-pill);
  background: var(--ei-accent);
}

.ei-stepper__text { display: flex; flex-direction: column; gap: var(--ei-pill-pad-y); min-width: 0; }
.ei-stepper__label { color: var(--ei-text); font-size: var(--ei-type-label); line-height: var(--ei-leading-label); font-weight: var(--ei-weight-medium); overflow-wrap: anywhere; }
.ei-stepper__step--current .ei-stepper__label { font-weight: var(--ei-weight-strong); }
.ei-stepper__step--future .ei-stepper__label { color: var(--ei-text-muted); font-weight: var(--ei-weight-regular); }
.ei-stepper__date { color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: var(--ei-leading-caption); font-variant-numeric: tabular-nums; }
.ei-stepper__summary { display: none; }

@container (max-width: 560px) {
  .ei-stepper__step {
    flex: 1 0 100%;
    flex-direction: row;
    gap: var(--ei-space-3);
    padding: 0 0 var(--ei-space-4);
  }
  .ei-stepper__step::after {
    top: calc(var(--ei-marker) + var(--ei-space-1));
    right: auto;
    bottom: var(--ei-space-1);
    left: calc(var(--ei-marker) / 2 - var(--ei-hairline));
    width: var(--ei-rule);
    height: auto;
  }
  .ei-stepper__step:last-child { padding-bottom: 0; }
  .ei-stepper__text { padding-top: var(--ei-pill-pad-y); }
  /* Compact: last done, current, next. Earlier and later steps are counted by the summary. */
  .ei-stepper__summary {
    display: block;
    flex: 1 0 100%;
    margin: 0 0 var(--ei-space-3);
    color: var(--ei-text-muted);
    font-size: var(--ei-type-caption);
    line-height: var(--ei-leading-caption);
  }
  .ei-stepper__step--done:has(~ .ei-stepper__step--done),
  .ei-stepper__step--future ~ .ei-stepper__step--future { display: none; }
  .ei-stepper__step--future { padding-bottom: 0; }
  .ei-stepper__step--future::after { display: none; }
}

/* Feed: grouped by day; type icon 16 in a neutral circle 24, title body/500, one muted meta line. */
.ei-feed { display: flex; flex-direction: column; gap: var(--ei-space-5); }

.ei-feed__date {
  margin: 0 0 var(--ei-space-2);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
}

.ei-feed__date::first-letter { text-transform: uppercase; }
.ei-feed__list { margin: 0; padding: 0; list-style: none; }

.ei-feed__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--ei-marker) minmax(0, 1fr);
  gap: var(--ei-space-3);
  padding: var(--ei-space-2) 0;
}

.ei-feed__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--ei-space-2) + var(--ei-marker) + var(--ei-space-1));
  bottom: calc(var(--ei-space-1) - var(--ei-space-2));
  left: calc(var(--ei-marker) / 2 - var(--ei-hairline) / 2);
  width: var(--ei-hairline);
  background: var(--ei-divider);
}

.ei-feed__icon {
  display: grid;
  place-items: center;
  width: var(--ei-marker);
  height: var(--ei-marker);
  border-radius: var(--ei-radius-pill);
  background: var(--ei-neutral-bg);
  color: var(--ei-neutral);
  font-size: var(--ei-type-caption);
}

.ei-feed__icon--accent { background: var(--ei-accent-soft); color: var(--ei-accent-text); }
.ei-feed__icon--info { background: var(--ei-info-bg); color: var(--ei-info); }
.ei-feed__icon--success { background: var(--ei-success-bg); color: var(--ei-success); }
.ei-feed__icon--warning { background: var(--ei-warning-bg); color: var(--ei-warning); }
.ei-feed__icon--danger { background: var(--ei-danger-bg); color: var(--ei-danger); }

.ei-feed__content { min-width: 0; padding-top: var(--ei-pill-pad-y); }
.ei-feed__content p { margin: 0; }
.ei-feed__title { color: var(--ei-text); font-size: var(--ei-type-body); line-height: var(--ei-leading-body); font-weight: var(--ei-weight-medium); }
.ei-feed__meta { color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: var(--ei-leading-caption); }

.ei-feed__body {
  margin-top: var(--ei-space-2);
  padding: var(--ei-space-3) var(--ei-space-4);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-sunken);
  color: var(--ei-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* System events are quieter: smaller title, muted, no body block. */
.ei-feed__item--system { padding: var(--ei-space-1) 0; }
.ei-feed__item--system .ei-feed__title { color: var(--ei-text-muted); font-size: var(--ei-type-label); line-height: var(--ei-leading-label); font-weight: var(--ei-weight-regular); }

/* Document rows: name and requirement, status pill, validity, one main action, history disclosure. */
.ei-doc-list { container-type: inline-size; margin: 0; padding: 0; list-style: none; }

.ei-doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "main status action" "history history history";
  align-items: center;
  gap: 0 var(--ei-space-4);
  padding: var(--ei-cell-pad-y) 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}

.ei-doc-row:last-child { border-bottom: 0; }
.ei-doc-row__main { grid-area: main; display: flex; align-items: flex-start; gap: var(--ei-space-3); min-width: 0; }
.ei-doc-row__icon { flex: none; margin-top: var(--ei-pill-pad-y); color: var(--ei-text-subtle); font-size: var(--ei-icon-sm); }
.ei-doc-row__text { min-width: 0; }
.ei-doc-row__text p { margin: 0; }
.ei-doc-row__name { color: var(--ei-text); font-weight: var(--ei-weight-medium); overflow-wrap: anywhere; }

.ei-doc-row__req {
  margin-left: var(--ei-space-2);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-regular);
  white-space: nowrap;
}

.ei-doc-row__meta { color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: var(--ei-leading-caption); }
.ei-doc-row__status { grid-area: status; }
.ei-doc-row__action { grid-area: action; justify-self: end; }
.ei-doc-row__history { grid-area: history; margin: var(--ei-space-2) 0 0 calc(var(--ei-icon-sm) + var(--ei-space-3)); }

.ei-doc-row__history > summary {
  display: inline-flex;
  min-height: var(--ei-control-sm);
  align-items: center;
  color: var(--ei-accent-text);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-medium);
  cursor: pointer;
}

.ei-doc-row__history ol { display: flex; flex-direction: column; gap: var(--ei-space-1); margin: var(--ei-space-1) 0 0; padding: 0; list-style: none; }
.ei-doc-row__history li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ei-space-1) var(--ei-space-3); font-size: var(--ei-type-label); line-height: var(--ei-leading-label); }

@container (max-width: 520px) {
  .ei-doc-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main main" "status action" "history history";
    gap: var(--ei-space-2) var(--ei-space-3);
  }
  .ei-doc-row__status { padding-left: calc(var(--ei-icon-sm) + var(--ei-space-3)); }
}

/* Calendar strip: 7 to 14 days, dots by event type in chart colours, the selected day's list below. */
.ei-calstrip { container-type: inline-size; min-width: 0; }

.ei-calstrip__days {
  position: relative; /* keeps the visually hidden day labels inside the scroller */
  display: grid;
  grid-auto-columns: minmax(var(--ei-calstrip-day), 1fr);
  grid-auto-flow: column;
  gap: var(--ei-space-1);
  overflow-x: auto;
  padding-bottom: var(--ei-space-1);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.ei-calstrip__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ei-pill-pad-y);
  min-height: calc(var(--ei-control-touch) + var(--ei-space-5));
  padding: var(--ei-space-2) var(--ei-space-1);
  border: 0;
  border-radius: var(--ei-radius-md);
  background: transparent;
  color: var(--ei-text);
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color var(--ei-duration-fast) var(--ei-ease);
}

.ei-calstrip__day:hover { background: var(--ei-surface-hover); }
.ei-calstrip__day[aria-selected="true"] { background: var(--ei-accent-soft); }
.ei-calstrip__weekday { color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: var(--ei-leading-caption); }
.ei-calstrip__date { font-size: var(--ei-type-title-sm); line-height: var(--ei-leading-title-sm); font-weight: var(--ei-weight-strong); font-variant-numeric: tabular-nums; }
.ei-calstrip__day[aria-selected="true"] .ei-calstrip__date { color: var(--ei-accent-text); }
.ei-calstrip__day--today .ei-calstrip__weekday { color: var(--ei-accent-text); font-weight: var(--ei-weight-strong); }
.ei-calstrip__dots { display: flex; align-items: center; gap: var(--ei-pill-pad-y); min-height: var(--ei-dot); }
.ei-calstrip__more { color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: 1; }

.ei-calstrip__panel { margin-top: var(--ei-space-4); }
.ei-calstrip__panel[hidden] { display: none; }

.ei-calstrip__heading {
  margin: 0;
  color: var(--ei-text);
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
  font-weight: var(--ei-weight-strong);
}

.ei-calstrip__heading::first-letter { text-transform: uppercase; }
.ei-calstrip__events { margin: var(--ei-space-2) 0 0; padding: 0; list-style: none; }

.ei-calstrip__event {
  display: grid;
  grid-template-columns: var(--ei-dot) var(--ei-calstrip-time) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ei-space-3);
  padding: var(--ei-space-2) 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}

.ei-calstrip__event:last-child { border-bottom: 0; }
.ei-calstrip__time { color: var(--ei-text-muted); font-size: var(--ei-type-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ei-calstrip__title { min-width: 0; color: var(--ei-text); overflow-wrap: anywhere; }
.ei-calstrip__title a { display: inline-flex; align-items: center; min-height: var(--ei-target-min); color: inherit; }
.ei-calstrip__title a:hover { color: var(--ei-accent-text); }
.ei-calstrip__type { color: var(--ei-text-muted); font-size: var(--ei-type-caption); white-space: nowrap; }
.ei-calstrip__none { margin: var(--ei-space-2) 0 0; color: var(--ei-text-muted); font-size: var(--ei-type-label); }
.ei-calstrip__legend { margin-top: var(--ei-space-4); }

@container (max-width: 480px) {
  .ei-calstrip__event {
    grid-template-columns: var(--ei-dot) minmax(0, 1fr) auto;
    gap: var(--ei-pill-pad-y) var(--ei-space-3);
  }
  .ei-calstrip__event > .ei-dot { grid-row: 1; }
  .ei-calstrip__time { grid-row: 1; grid-column: 2; }
  .ei-calstrip__type { grid-row: 1; grid-column: 3; }
  .ei-calstrip__title { grid-row: 2; grid-column: 2 / -1; }
  .ei-calstrip__title a { min-height: var(--ei-control-touch); }
}

/* 50-components/status.css */
/* Status pill: caption 12/500, padding 2x8, pill radius, soft semantic background, never wraps.
   Deadline pill: same look, may wrap because it carries a date. A future date is plain text. */
.ei-status,
.ei-deadline {
  display: inline-flex;
  align-items: center;
  gap: var(--ei-space-1);
  max-width: 100%;
  padding: var(--ei-pill-pad-y) var(--ei-space-2);
  border: 0;
  border-radius: var(--ei-radius-pill);
  background: var(--ei-neutral-bg);
  color: var(--ei-neutral);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: middle;
}

.ei-status__dot {
  flex: none;
  width: var(--ei-dot);
  height: var(--ei-dot);
  border-radius: var(--ei-radius-pill);
  background: currentColor;
}

.ei-status--accent { background: var(--ei-accent-soft); color: var(--ei-accent-text); }
.ei-status--info { background: var(--ei-info-bg); color: var(--ei-info); }
.ei-status--success { background: var(--ei-success-bg); color: var(--ei-success); }
.ei-status--warning { background: var(--ei-warning-bg); color: var(--ei-warning); }
.ei-status--danger { background: var(--ei-danger-bg); color: var(--ei-danger); }

.ei-deadline {
  white-space: normal;
  border-radius: var(--ei-radius-md);
}

.ei-deadline--overdue { background: var(--ei-danger-bg); color: var(--ei-danger); }
.ei-deadline--today,
.ei-deadline--soon { background: var(--ei-warning-bg); color: var(--ei-warning); }
.ei-deadline--unknown { background: var(--ei-neutral-bg); color: var(--ei-neutral); }
.ei-deadline--future { padding: 0; background: none; color: var(--ei-text); font-size: inherit; font-weight: inherit; }

/* Muted secondary text. */
.ei-muted { color: var(--ei-text-muted); }

/* Category dot used by the calendar strip and legends. */
.ei-dot {
  display: inline-block;
  flex: none;
  width: var(--ei-dot);
  height: var(--ei-dot);
  border-radius: var(--ei-radius-pill);
  background: var(--ei-series, var(--ei-chart-6));
}

/* 50-components/table.css */
/* Data table: caption headers without uppercase, padding 10x12, divider rows, hover surface.
   The first column carries the main entity (title 14/600 plus muted meta); numbers align right.
   Wide tables scroll inside .ei-table-wrap, never the page. */
.ei-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.ei-table-wrap:focus-visible {
  outline: none;
  border-radius: var(--ei-radius-sm);
  box-shadow: 0 0 0 var(--ei-focus-width) var(--ei-focus-ring);
}

.ei-table,
:where(.ei-workspace) table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  background: var(--ei-surface);
  color: var(--ei-text);
  text-align: left;
}

/* Words never break letter by letter inside a library table: the table keeps its min-content
   width and .ei-table-wrap scrolls instead (the workspace default is overflow-wrap: anywhere). */
.ei-table { overflow-wrap: break-word; }

.ei-table th,
:where(.ei-workspace) th {
  padding: var(--ei-cell-pad-y) var(--ei-cell-pad-x);
  border: 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: bottom;
  white-space: nowrap;
}

.ei-table tbody th { color: var(--ei-text); font-size: var(--ei-type-body); font-weight: var(--ei-weight-regular); vertical-align: top; }

.ei-table td,
:where(.ei-workspace) td {
  padding: var(--ei-cell-pad-y) var(--ei-cell-pad-x);
  border: 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

.ei-table tbody tr:last-child > *,
:where(.ei-workspace) tbody tr:last-child > td { border-bottom: 0; }

.ei-table tbody tr:hover > *,
:where(.ei-workspace) tbody tr:where(:hover) > td {
  background: var(--ei-surface-hover);
  transition: background-color var(--ei-duration-fast) var(--ei-ease);
}

.ei-table .ei-table__num { text-align: right; white-space: nowrap; }
.ei-table .ei-table__select { width: var(--ei-control-touch); min-width: 0; padding-right: 0; }

.ei-table--sticky thead th {
  position: sticky;
  top: 0;
  z-index: var(--ei-z-raised);
  background: var(--ei-surface);
  box-shadow: var(--ei-shadow-1);
}

.ei-cell-primary { display: flex; flex-direction: column; gap: var(--ei-pill-pad-y); min-width: var(--ei-cell-primary-min); }
.ei-cell-primary__title { color: var(--ei-text); font-weight: var(--ei-weight-strong); }
.ei-cell-primary__title a { color: inherit; }
.ei-cell-primary__title a:hover { color: var(--ei-accent-text); }
.ei-cell-primary__meta { color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: var(--ei-leading-caption); }

:where(.ei-workspace) td:first-child { min-width: var(--ei-cell-min); }

.ei-nowrap-cell {
  min-width: var(--ei-cell-min);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ei-table :is(th, td),
  :where(.ei-workspace) :is(th, td) { padding: var(--ei-space-3) var(--ei-space-2); }
}

/* Card mode (ROADMAP M.2). The wrap measures its own width, so a table in a side column turns into
   cards on a desktop too. A row is a card: title and end on top, meta under them, fields as a label
   over the value in two columns, actions at the bottom. Rows are still separated by the divider:
   cards here have no frame of their own. */
.ei-table-wrap:has(> .ei-table--cards) { container: ei-table / inline-size; }

@container ei-table (max-width: 560px) {
  .ei-table--cards,
  .ei-table--cards tbody { display: block; }
  .ei-table--cards thead { display: none; }

  .ei-table--cards tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ei-space-2) var(--ei-space-4);
    padding: var(--ei-space-3) var(--ei-cell-pad-x);
    border-bottom: var(--ei-hairline) solid var(--ei-divider);
  }
  .ei-table--cards tbody tr:last-child { border-bottom: 0; }
  .ei-card--flush .ei-table--cards tbody tr { padding-inline: var(--ei-space-4); }

  /* :nth-child(n) lifts the rule over the flush-card edge padding of the first and last cell. */
  .ei-table-wrap .ei-table.ei-table--cards tbody tr > td:nth-child(n) {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    white-space: normal;
  }
  /* The reset above outweighs the role rules below, so the roles that change display repeat its weight. */
  .ei-table-wrap .ei-table.ei-table--cards tbody tr > td:nth-child(n):is(.ei-td--field, .ei-td--actions) { display: flex; }
  .ei-table-wrap .ei-table.ei-table--cards tbody tr > td:nth-child(n).ei-td--hide { display: none; }
  .ei-table--cards tbody tr:hover { background: var(--ei-surface-hover); }
  .ei-table--cards tbody tr:hover > * { background: transparent; }

  .ei-table--cards .ei-td--title { grid-column: 1 / -1; }
  .ei-table--cards tr:has(> .ei-td--end) > .ei-td--title { grid-column: 1; }
  .ei-table--cards .ei-td--end { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  .ei-table--cards .ei-td--meta { grid-column: 1 / -1; color: var(--ei-text-muted); font-size: var(--ei-type-caption); line-height: var(--ei-leading-caption); }
  .ei-table--cards .ei-td--actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--ei-space-2); }
  .ei-table--cards .ei-td--hide { display: none; }

  .ei-table--cards .ei-td--field { display: flex; flex-direction: column; gap: var(--ei-pill-pad-y); }
  .ei-table--cards .ei-td--field::before {
    content: attr(data-label);
    color: var(--ei-text-muted);
    font-size: var(--ei-type-caption);
    line-height: var(--ei-leading-caption);
  }

  .ei-table--cards .ei-cell-primary { min-width: 0; }

  /* The first link of the title covers the card; other controls stay above it. */
  .ei-table--cards .ei-td--title :is(a[href], .ei-link-button):first-of-type::after { content: ''; position: absolute; inset: 0; }
  .ei-table--cards tbody tr > :not(.ei-td--title) :is(a, button, input, select, label, summary),
  .ei-table--cards .ei-td--title :is(button, input, select) { position: relative; z-index: var(--ei-z-raised); }
  /* A link standing alone as a field value is a target of its own: touch height, not text height. */
  .ei-table--cards tbody tr > :is(.ei-td--field, .ei-td--end, .ei-td--meta) > a[href] { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--ei-control-touch); }
  .ei-table--cards .ei-td--title :is(a[href], .ei-link-button):first-of-type:focus-visible { outline: none; box-shadow: none; }
  .ei-table--cards tbody tr:has(.ei-td--title :is(a[href], .ei-link-button):first-of-type:focus-visible) { box-shadow: inset 0 0 0 var(--ei-focus-width) var(--ei-focus-ring); }

  /* Row selection: the checkbox sits in the top right corner of the card. */
  .ei-table--cards.ei-table--selectable tbody tr { padding-right: calc(var(--ei-cell-pad-x) + var(--ei-control-touch)); }
  .ei-table--cards .ei-table__select {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: var(--ei-control-touch);
    height: var(--ei-control-touch);
    z-index: var(--ei-z-raised);
  }
}

/* 50-components/tabs.css */
/* Tabs: label 13/500, the active tab has a 2px accent underline and accent text, no fill.
   At most five visible plus "Ещё"; on mobile every tab sits in one horizontal scroller instead.
   .ei-case-tabs and bare [role="tab"] inside .ei-tabs are the pre-library markup (stage 0.5). */
.ei-tabs,
.ei-workspace .ei-case-tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--ei-space-1);
  margin: var(--ei-space-5) 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}

.ei-tabs { flex-wrap: wrap; }
.ei-tabs-block > .ei-tabs { margin-top: 0; }

/* Library tabs: the tablist and the "Ещё" menu share one bar with the divider under both. */
.ei-tabs-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--ei-space-1);
  margin: 0 0 var(--ei-space-5);
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}
.ei-tabs-bar > .ei-tabs { flex: 0 1 auto; min-width: 0; margin: 0; border-bottom: 0; }

.ei-workspace .ei-case-tabs {
  flex-wrap: nowrap;
  margin: var(--ei-space-1) 0 var(--ei-space-5);
  overflow-x: auto;
}

.ei-tabs__tab,
.ei-tabs__more-button,
.ei-workspace :is(.ei-tabs, .ei-case-tabs) [role="tab"] {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ei-space-2);
  min-height: var(--ei-control-lg);
  margin-bottom: calc(var(--ei-hairline) * -1);
  padding: var(--ei-space-2) var(--ei-space-3);
  border: 0;
  border-bottom: var(--ei-rule) solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ei-text-muted);
  font: inherit;
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
  font-weight: var(--ei-weight-medium);
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: color var(--ei-duration-fast) var(--ei-ease), border-color var(--ei-duration-fast) var(--ei-ease);
}

.ei-tabs__tab:hover,
.ei-tabs__more-button:hover,
.ei-workspace :is(.ei-tabs, .ei-case-tabs) [role="tab"]:hover {
  background: transparent;
  color: var(--ei-text);
}

.ei-tabs__tab[aria-selected="true"],
.ei-workspace :is(.ei-tabs, .ei-case-tabs) [aria-selected="true"] {
  border-bottom-color: var(--ei-accent);
  color: var(--ei-accent-text);
}

/* A tab moved into "Ещё" shows in the row only while it is the selected one. The selector matches
   the legacy [role="tab"] rule above in specificity and comes later, so it wins. */
.ei-tabs > .ei-tabs__tab--overflow:not([aria-selected="true"]) { display: none; }

.ei-tabs__count {
  padding: 0 var(--ei-space-2);
  border-radius: var(--ei-radius-pill);
  background: var(--ei-neutral-bg);
  color: var(--ei-neutral);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-variant-numeric: tabular-nums;
}

.ei-tabs__tab[aria-selected="true"] .ei-tabs__count { background: var(--ei-accent-soft); color: var(--ei-accent-text); }

.ei-tabs__more { position: relative; }
.ei-tabs__more-button .ei-icon { font-size: var(--ei-type-caption); }
.ei-tabs__more-button[aria-expanded="true"] { color: var(--ei-text); }
.ei-tabs__more .ei-menu { top: calc(100% + var(--ei-space-1)); right: 0; }

.ei-tabs__panel:focus-visible { border-radius: var(--ei-radius-sm); }

.ei-tabs__panel[hidden],
.ei-workspace .ei-case-tabpanel[hidden] { display: none; }

@media (max-width: 767px) {
  .ei-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ei-tabs > .ei-tabs__tab--overflow:not([aria-selected="true"]) { display: inline-flex; }
  .ei-tabs__more { display: none; }
  .ei-tabs__tab,
  .ei-workspace :is(.ei-tabs, .ei-case-tabs) [role="tab"] { min-height: var(--ei-control-touch); }
  /* The strip fades at the right edge, so a cut tab reads as "more to scroll". The end padding
     lets the last tab clear the fade once the strip is scrolled to the end. */
  .ei-tabs,
  .ei-workspace .ei-case-tabs {
    padding-inline-end: var(--ei-space-6);
    mask-image: linear-gradient(to right, var(--ei-text) calc(100% - var(--ei-space-6)), transparent);
  }
}

/* 50-components/tour.css */
/* Guided tour: floating panel (elevation 3), spotlight and launcher.
   On narrow screens the panel docks to the bottom; onboarding.js stops positioning it inline there. */
.ei-onboarding-entry {
  display: flex;
  align-items: center;
  padding: var(--ei-space-1) var(--ei-space-2);
}

.ei-onboarding-launcher,
.ei-onboarding-button {
  appearance: none;
  min-height: var(--ei-control-lg);
  padding: var(--ei-space-2) var(--ei-control-pad-x);
  border: var(--ei-hairline) solid var(--ei-border-strong);
  border-radius: var(--ei-radius-sm);
  background: var(--ei-surface);
  color: var(--ei-text);
  font: inherit;
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
  font-weight: var(--ei-weight-medium);
  text-align: center;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--ei-duration-fast) var(--ei-ease), border-color var(--ei-duration-fast) var(--ei-ease);
}

.ei-onboarding-launcher {
  min-height: var(--ei-control-sm);
  padding: var(--ei-space-1) var(--ei-space-3);
  border-color: transparent;
  background: transparent;
  color: var(--ei-nav-text-muted);
}

.ei-onboarding-launcher:hover {
  background: var(--ei-nav-item-hover);
  color: var(--ei-nav-text);
}

.ei-onboarding-button:hover:not(:disabled) { background: var(--ei-surface-hover); }

.ei-onboarding-primary {
  border-color: var(--ei-accent);
  background: var(--ei-accent);
  color: var(--ei-on-accent);
}

.ei-onboarding-primary:hover:not(:disabled) {
  border-color: var(--ei-accent-hover);
  background: var(--ei-accent-hover);
  color: var(--ei-on-accent);
}

.ei-onboarding-button:disabled {
  border-color: var(--ei-border);
  background: var(--ei-surface-sunken);
  color: var(--ei-text-muted);
  cursor: not-allowed;
}

.ei-onboarding-panel {
  position: fixed;
  z-index: var(--ei-z-tour);
  right: var(--ei-space-6);
  bottom: var(--ei-space-6);
  box-sizing: border-box;
  width: min(var(--ei-tour-width), calc(100vw - var(--ei-space-7)));
  max-height: min(var(--ei-tour-max-h), calc(100dvh - var(--ei-space-9)));
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--ei-space-6);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface-elevated);
  color: var(--ei-text);
  box-shadow: var(--ei-shadow-3);
  font: inherit;
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
  overflow-wrap: anywhere;
}

.ei-onboarding-chooser { width: min(var(--ei-tour-wide), calc(100vw - var(--ei-space-7))); }

.ei-onboarding-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ei-space-4);
  margin-bottom: var(--ei-space-3);
}

.ei-onboarding-header h2 {
  margin: 0;
  color: var(--ei-text);
  font: inherit;
  font-size: var(--ei-type-title);
  line-height: var(--ei-leading-title);
  font-weight: var(--ei-weight-strong);
}

.ei-onboarding-header h2:focus { outline: none; }

.ei-onboarding-close {
  flex: 0 0 auto;
  min-height: var(--ei-control-md);
  padding: var(--ei-space-2) var(--ei-space-3);
  font-size: var(--ei-type-caption);
}

.ei-onboarding-panel p { margin: 0 0 var(--ei-space-3); }
.ei-onboarding-panel .ei-onboarding-description { max-width: var(--ei-reading-max); }

.ei-onboarding-warning,
.ei-onboarding-notice {
  padding: var(--ei-space-3);
  border-radius: var(--ei-radius-md);
  background: var(--ei-warning-bg);
  color: var(--ei-text);
}

.ei-onboarding-notice { background: var(--ei-success-bg); }

.ei-onboarding-chapters {
  margin: var(--ei-space-5) 0;
  padding: 0;
  list-style: none;
}

.ei-onboarding-chapters > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ei-space-5);
  padding: var(--ei-space-4) 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}

.ei-onboarding-chapters > li:first-child { border-top: var(--ei-hairline) solid var(--ei-divider); }

.ei-onboarding-chapters h3 {
  margin: 0 0 var(--ei-space-1);
  color: var(--ei-text);
  font: inherit;
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

.ei-onboarding-chapters p { margin: 0 0 var(--ei-space-1); }

.ei-onboarding-chapter-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ei-space-2);
  max-width: var(--ei-cell-min);
}

.ei-onboarding-meta,
.ei-onboarding-progress {
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
}

.ei-onboarding-panel .ei-onboarding-progress {
  margin-bottom: var(--ei-space-3);
  font-variant-numeric: tabular-nums;
}

.ei-onboarding-panel progress {
  appearance: none;
  display: block;
  width: 100%;
  height: var(--ei-track);
  margin: var(--ei-space-4) 0;
  border: 0;
  border-radius: var(--ei-radius-pill);
  overflow: hidden;
  background: var(--ei-surface-sunken);
  color: var(--ei-accent);
  accent-color: var(--ei-accent);
}

.ei-onboarding-panel progress::-webkit-progress-bar { background: var(--ei-surface-sunken); }
.ei-onboarding-panel progress::-webkit-progress-value { background: var(--ei-accent); }
.ei-onboarding-panel progress::-moz-progress-bar { background: var(--ei-accent); }

.ei-onboarding-panel .ei-onboarding-status {
  margin-bottom: var(--ei-space-3);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-label);
}

.ei-onboarding-recovery,
.ei-onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ei-space-2);
  margin: var(--ei-space-3) 0;
}

.ei-onboarding-recovery:empty { display: none; }

.ei-onboarding-panel .ei-onboarding-help {
  display: inline-block;
  padding: var(--ei-space-2) 0;
  color: var(--ei-accent-text);
  font-weight: var(--ei-weight-medium);
  text-decoration: underline;
  text-underline-offset: var(--ei-underline-offset);
}

.ei-onboarding-actions .ei-onboarding-help { margin-right: auto; }

.ei-onboarding-spotlight {
  position: fixed;
  z-index: calc(var(--ei-z-tour) - 1);
  box-sizing: border-box;
  pointer-events: none;
  border: var(--ei-rule) solid var(--ei-accent);
  border-radius: var(--ei-radius-md);
  box-shadow: 0 0 0 100vmax var(--ei-scrim-tour);
}

.ei-onboarding-clearance {
  display: block;
  flex: 0 0 auto;
  width: var(--ei-hairline);
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 767px) {
  .ei-onboarding-panel,
  .ei-onboarding-chooser {
    top: auto;
    left: var(--ei-space-2);
    right: var(--ei-space-2);
    bottom: calc(var(--ei-tour-viewport-bottom, 0px) + max(var(--ei-space-2), env(safe-area-inset-bottom)));
    width: auto;
    max-height: min(var(--ei-tour-panel-height, 52dvh), calc(100dvh - var(--ei-space-9) * 2));
    padding: var(--ei-space-4);
  }

  .ei-onboarding-chapters > li { grid-template-columns: 1fr; gap: var(--ei-space-3); }
  .ei-onboarding-chapter-actions { flex-direction: row; flex-wrap: wrap; max-width: none; }
  .ei-onboarding-button,
  .ei-onboarding-launcher { min-height: var(--ei-control-touch); }
  .ei-onboarding-actions .ei-onboarding-button { flex: 1 1 auto; }
  .ei-onboarding-entry { padding: var(--ei-space-1); }
}

@media (forced-colors: active) {
  .ei-onboarding-panel { border: var(--ei-rule) solid CanvasText; }
  .ei-onboarding-spotlight { border-color: Highlight; box-shadow: none; }
}

/* 60-pages/00-workspace.css */
/* Workspace shell and shared page layout: heading, toolbar, grids, Today, registry, pipeline. */
.ei-workspace {
  min-height: 70vh;
  padding: var(--ei-space-6);
  background: var(--ei-bg);
  color: var(--ei-text);
  font-family: var(--ei-font);
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
  overflow-wrap: anywhere;
}

/* Bare-element defaults carry zero specificity so component classes always win. */
:where(.ei-workspace) * {
  box-sizing: border-box;
  min-width: 0;
}

:where(.ei-workspace) h1 {
  margin: 0 0 var(--ei-space-6);
  font-size: var(--ei-type-page);
  line-height: var(--ei-leading-page);
  letter-spacing: var(--ei-tracking-page);
  font-weight: var(--ei-weight-strong);
}

:where(.ei-workspace) h2 {
  margin: var(--ei-space-7) 0 var(--ei-space-3);
  font-size: var(--ei-type-title);
  line-height: var(--ei-leading-title);
  font-weight: var(--ei-weight-strong);
}

:where(.ei-workspace) h3 {
  margin: var(--ei-space-5) 0 var(--ei-space-2);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

:where(.ei-workspace) a {
  color: var(--ei-accent-text);
  text-underline-offset: var(--ei-underline-offset);
}

:where(.ei-workspace) a:where(:hover) { text-decoration: underline; }

:where(.ei-workspace) pre {
  padding: var(--ei-space-3);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-sunken);
  color: var(--ei-text);
  font-size: var(--ei-type-label);
  white-space: pre-wrap;
}

.ei-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ei-space-3);
  margin-bottom: var(--ei-space-5);
}

.ei-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ei-space-6);
}

.ei-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-4);
}

.ei-workspace .ei-form-layout {
  width: 100%;
  max-width: var(--ei-wide-form-max);
  min-width: 0;
  margin-inline: auto;
}

.ei-workspace .ei-context-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ei-space-2) var(--ei-space-3);
  min-width: 0;
  margin: 0 0 var(--ei-space-5);
}

.ei-history,
.ei-checklist-item,
.ei-version {
  padding: var(--ei-space-4) 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}

.ei-progress {
  width: 100%;
  accent-color: var(--ei-accent);
}

.ei-detail-line {
  display: flex;
  justify-content: space-between;
  gap: var(--ei-space-5);
  padding: var(--ei-space-2) 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}

.ei-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ei-space-3) var(--ei-space-6);
  padding: var(--ei-space-3) var(--ei-space-5);
}

.ei-timeline li { padding: var(--ei-space-1) 0; }

.ei-answer {
  max-width: var(--ei-reading-max);
  white-space: pre-wrap;
}

.ei-preview {
  max-width: 100%;
  height: auto;
  background: var(--ei-surface);
}

.ei-footer a { display: inline-flex; align-items: center; min-height: var(--ei-control-sm); color: var(--ei-text-muted); }
.ei-footer a:hover { color: var(--ei-text); }

@media (max-width: 767px) {
  .ei-footer a { min-height: var(--ei-control-touch); }
}

.ei-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ei-space-3);
  margin-top: var(--ei-space-7);
  padding-top: var(--ei-space-7);
  border-top: var(--ei-hairline) solid var(--ei-divider);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-label);
}

/* Page heading: title, one muted line, primary action on the right. */
.ei-workspace .ei-workspace-heading { margin-bottom: var(--ei-space-5); }

.ei-workspace :is(.ei-workspace-heading, .ei-case-heading) h1 { margin: 0 0 var(--ei-space-2); }
.ei-workspace .ei-workspace-heading p { margin: 0; color: var(--ei-text-muted); }

.ei-workspace .ei-heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ei-space-3) var(--ei-space-5);
}

.ei-workspace .ei-heading-actions :is(h1, .ei-toolbar) { margin: 0; }

.ei-workspace .ei-heading-actions .ei-button:not(.ei-button--primary) {
  background: transparent;
  border-color: transparent;
}

.ei-workspace .ei-heading-actions .ei-button:not(.ei-button--primary):hover { background: var(--ei-surface-hover); }

/* Today: a reading-width column, so a counter stays next to its row. */
.ei-workspace .ei-page-today { max-width: var(--ei-wide-form-max); }
.ei-workspace .ei-today-queue { margin: 0 0 var(--ei-space-6); }

.ei-workspace .ei-today-queue h2 {
  display: flex;
  align-items: baseline;
  gap: var(--ei-space-3);
  margin: 0 0 var(--ei-space-3);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
}

.ei-workspace .ei-queue-count {
  color: var(--ei-text-muted);
  font-size: var(--ei-type-body);
  font-weight: var(--ei-weight-medium);
  font-variant-numeric: tabular-nums;
}

.ei-workspace .ei-today-clear { border-top: var(--ei-hairline) solid var(--ei-divider); }

.ei-workspace .ei-today-clear-row {
  display: grid;
  grid-template-columns: minmax(var(--ei-cell-min), 1fr) minmax(0, 2fr);
  align-items: baseline;
  gap: var(--ei-space-2) var(--ei-space-5);
  padding: var(--ei-space-3) 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}

.ei-workspace .ei-today-clear-row strong { font-weight: var(--ei-weight-medium); }

/* A pager under a list card. */
.ei-workspace .ei-card + .ei-toolbar { margin-top: var(--ei-space-3); }

/* Catalog: the directory switcher is a short field above the list card. */
.ei-workspace .ei-catalog-type { max-width: var(--ei-col-card-min); margin-bottom: var(--ei-space-4); }
.ei-workspace .ei-catalog-type > .ei-field { margin: 0; }

/* Registry */
.ei-workspace .ei-registry-results { margin-bottom: var(--ei-space-4); }

.ei-workspace .ei-registry-results table {
  min-width: var(--ei-table-min);
  table-layout: auto;
}

.ei-workspace .ei-registry-results :is(th, td) {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.ei-workspace .ei-registry-results :is(th, td):first-child {
  width: 27%;
  min-width: var(--ei-cell-primary-min);
}

.ei-workspace .ei-registry-results :is(th, td):nth-child(2) { min-width: var(--ei-cell-min); }
.ei-workspace .ei-registry-results td:nth-child(4) { min-width: var(--ei-cell-wide-min); }
.ei-workspace .ei-registry-results .ei-nowrap-cell { white-space: normal; }

.ei-workspace .ei-registry-client {
  display: inline;
  color: var(--ei-text);
  font-size: var(--ei-type-body);
  font-weight: var(--ei-weight-strong);
  white-space: normal;
  overflow-wrap: anywhere;
}

.ei-workspace .ei-registry-client:hover { color: var(--ei-accent-text); }
.ei-workspace .ei-registry-results .ei-status { margin: var(--ei-space-1) var(--ei-space-1) 0 0; }

/* Pipeline: every stage stays a real column; the board scrolls, not the page. */
/* Case pipeline: a disclosure; its heading row is the summary. */
.ei-workspace .ei-registry-pipeline { margin: 0 0 var(--ei-space-5); }
.ei-workspace .ei-registry-pipeline__summary {
  display: flex;
  align-items: center;
  gap: var(--ei-space-2);
  min-height: var(--ei-control-touch);
  cursor: pointer;
  list-style: none;
}
.ei-workspace .ei-registry-pipeline__summary::-webkit-details-marker { display: none; }
.ei-workspace .ei-registry-pipeline__summary::before {
  content: '';
  width: var(--ei-space-2);
  height: var(--ei-space-2);
  border-right: var(--ei-rule) solid var(--ei-text-muted);
  border-bottom: var(--ei-rule) solid var(--ei-text-muted);
  transform: rotate(-45deg);
  transition: transform var(--ei-duration-fast) var(--ei-ease);
}
.ei-workspace .ei-registry-pipeline[open] > .ei-registry-pipeline__summary::before { transform: rotate(45deg); }
.ei-workspace .ei-registry-pipeline__summary h2 { margin: 0; }

.ei-workspace .ei-pipeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(var(--ei-col-pipeline), 1fr));
  align-items: start;
  gap: var(--ei-space-3);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: min(var(--ei-pipeline-max-h), 70vh);
  padding: 0 0 var(--ei-space-4);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-snap-type: x proximity;
  scrollbar-gutter: stable;
}

.ei-workspace .ei-pipeline-column {
  min-width: 0;
  padding: var(--ei-space-3);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface-sunken);
  scroll-snap-align: start;
}

.ei-workspace .ei-pipeline-heading {
  position: sticky;
  top: 0;
  z-index: var(--ei-z-raised);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ei-space-2);
  margin: calc(var(--ei-space-3) * -1) calc(var(--ei-space-3) * -1) var(--ei-space-3);
  padding: var(--ei-space-3);
  border-radius: var(--ei-radius-lg) var(--ei-radius-lg) 0 0;
  background: var(--ei-surface-sunken);
}

.ei-workspace .ei-pipeline-heading h2 {
  margin: 0;
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
  font-weight: var(--ei-weight-strong);
}

.ei-workspace .ei-pipeline-count {
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  font-variant-numeric: tabular-nums;
}

.ei-workspace .ei-pipeline-card {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0 0 var(--ei-space-2);
  padding: var(--ei-space-4);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface);
  color: var(--ei-text);
}

.ei-workspace .ei-pipeline-card:last-child { margin-bottom: 0; }

.ei-workspace .ei-pipeline-card h3 {
  margin: 0 0 var(--ei-space-2);
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
  font-weight: var(--ei-weight-strong);
}

/* The whole card opens the case: the title link is stretched over it. */
.ei-workspace .ei-pipeline-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.ei-workspace .ei-pipeline-card:hover { background: var(--ei-surface-hover); }
.ei-workspace .ei-pipeline-card:has(h3 a:focus-visible) { box-shadow: 0 0 0 var(--ei-focus-width) var(--ei-focus-ring); }
.ei-workspace .ei-pipeline-card h3 a:focus-visible { outline: none; box-shadow: none; }

.ei-workspace .ei-pipeline-card p {
  margin: var(--ei-space-2) 0;
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
}

.ei-workspace .ei-pipeline-card .ei-deadline { margin-top: var(--ei-space-2); }
.ei-workspace .ei-pipeline-exceptions { margin-top: var(--ei-space-6); }

.ei-workspace .ei-pipeline-exceptions > summary {
  min-height: var(--ei-control-touch);
  padding: var(--ei-cell-pad-y) 0;
  font-weight: var(--ei-weight-strong);
  cursor: pointer;
}

@media (max-width: 767px) {
  .ei-workspace .ei-today-clear-row { grid-template-columns: minmax(0, 1fr); gap: var(--ei-pill-pad-y); }
  .ei-workspace .ei-pipeline { grid-template-columns: repeat(6, minmax(var(--ei-col-pipeline-mobile), 78vw)); }
}

@media (max-width: 767px) {
  .ei-workspace { padding: var(--ei-space-4) var(--ei-space-3); }
  .ei-grid { grid-template-columns: minmax(0, 1fr); }
  .ei-toolbar > * { max-width: 100%; }
  .ei-detail-line { flex-direction: column; gap: var(--ei-space-1); }
}

/* 60-pages/about.css */
/* "О системе": two cards side by side, a definition list of facts, readable license text. */
.ei-about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ei-col-card-min), 1fr));
  align-items: start;
  gap: var(--ei-space-5);
  max-width: var(--ei-content-max);
}

.ei-about__facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--ei-space-3) var(--ei-space-5);
  margin: 0;
}

.ei-about__facts dt { color: var(--ei-text-muted); font-weight: var(--ei-weight-regular); }
.ei-about__facts dd { margin: 0; color: var(--ei-text); }
.ei-about__text { max-width: var(--ei-reading-max); margin: 0 0 var(--ei-space-3); color: var(--ei-text); }
.ei-about .ei-actions { margin-top: var(--ei-space-4); }

@media (max-width: 420px) {
  .ei-about__facts { grid-template-columns: minmax(0, 1fr); gap: var(--ei-pill-pad-y); }
  .ei-about__facts dd { margin-bottom: var(--ei-space-2); }
}

/* 60-pages/assistant.css */
/* Assistant: quoted sources under an answer, each with a link to the source page. */
.ei-quote {
  margin: var(--ei-space-2) 0;
  padding-left: var(--ei-space-3);
  border-left: var(--ei-rule) solid var(--ei-accent-text);
  color: var(--ei-text);
}

.ei-quote footer { margin-top: var(--ei-space-1); }
.ei-workspace .ei-quote a.ei-context-pill { font-size: var(--ei-type-caption); }

/* 60-pages/case.css */
/* Case page: heading and command bar, then a split of durable context (left) and work (right). */
.ei-workspace .ei-case-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ei-space-4) var(--ei-space-6);
  margin-bottom: var(--ei-space-4);
}

.ei-workspace .ei-case-title { flex: 1 1 var(--ei-col-context); }

.ei-workspace .ei-case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ei-space-1) var(--ei-space-4);
  color: var(--ei-text-muted);
}

.ei-workspace .ei-case-commandbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ei-space-2);
}

.ei-workspace .ei-case-next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ei-space-1) var(--ei-space-5);
  padding: var(--ei-space-3) 0;
  border-block: var(--ei-hairline) solid var(--ei-divider);
}

.ei-workspace .ei-case-readiness {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ei-space-2) var(--ei-space-6);
  padding: var(--ei-space-3) 0;
}

.ei-workspace .ei-case-readiness p { margin: var(--ei-space-1) 0 0; }
.ei-workspace .ei-case-stage { flex: 0 1 var(--ei-col-context); }

.ei-workspace .ei-case-stage > summary {
  padding: var(--ei-space-1) 0;
  color: var(--ei-text);
  cursor: pointer;
}

@media (max-width: 767px) {
  .ei-workspace .ei-case-stage > summary { padding-block: calc((var(--ei-control-touch) - 1lh) / 2); }
}

.ei-workspace .ei-page-case .ei-action-panel:not(:empty) {
  margin: 0 0 var(--ei-space-4);
  padding: var(--ei-space-5);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface);
}

.ei-workspace .ei-case-split {
  display: grid;
  grid-template-columns: minmax(var(--ei-col-context-min), var(--ei-col-context)) minmax(0, 1fr);
  align-items: start;
  gap: var(--ei-space-6);
  max-width: 100%;
}

.ei-workspace :is(.ei-case-sidebar, .ei-case-main) {
  min-width: 0;
  max-width: 100%;
  padding: var(--ei-space-5);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface);
  box-shadow: none;
}

.ei-workspace .ei-case-sidebar {
  display: grid;
  align-content: start;
  gap: var(--ei-space-5);
}

.ei-workspace .ei-case-main { overflow: visible; }

.ei-workspace .ei-case-sidebar h2 {
  margin: 0 0 var(--ei-space-4);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
}

.ei-workspace .ei-case-sidebar dl { margin: 0; }

.ei-workspace .ei-case-sidebar dt {
  margin-top: var(--ei-space-4);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
}

.ei-workspace .ei-case-sidebar dt:first-child { margin-top: 0; }
.ei-workspace .ei-case-sidebar dd { margin: var(--ei-space-1) 0 0; overflow-wrap: anywhere; }
.ei-workspace .ei-case-sidebar .ei-case-next { align-items: flex-start; gap: var(--ei-space-2); }
.ei-workspace .ei-case-sidebar .ei-case-stage { flex-basis: 100%; }

.ei-workspace .ei-case-tabpanel > h2:first-child { margin-top: 0; }

.ei-workspace .ei-case-tabpanel h2 {
  margin: var(--ei-space-6) 0 var(--ei-space-3);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
}

/* Feed: grouped by day, the composer stays at the bottom of the panel. */
.ei-workspace .ei-case-tabpanel:not([hidden]):has(> .ei-case-feed) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ei-space-4);
  height: min(var(--ei-feed-max-h), calc(100dvh - var(--ei-space-9) * 3));
  min-height: var(--ei-feed-min-h);
  overflow: auto;
}

.ei-workspace .ei-case-tabpanel:has(> .ei-case-feed) > .ei-notice { flex: none; margin-block: 0; }

.ei-workspace .ei-case-feed {
  display: flex;
  flex: 1 1 var(--ei-cell-min);
  flex-direction: column;
  gap: var(--ei-space-3);
  min-width: 0;
  min-height: var(--ei-space-9);
  margin: 0;
  padding: 0 var(--ei-space-2) var(--ei-space-6) 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  list-style: none;
}

.ei-workspace .ei-feed-date {
  display: flex;
  align-items: center;
  gap: var(--ei-space-3);
  margin: var(--ei-space-2) 0 var(--ei-space-1);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-medium);
  text-align: center;
}

.ei-workspace .ei-feed-date::before,
.ei-workspace .ei-feed-date::after {
  content: "";
  flex: 1;
  border-top: var(--ei-hairline) solid var(--ei-divider);
}

.ei-workspace .ei-feed-event {
  padding: var(--ei-space-4) 0;
  border: 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
  border-radius: 0;
  background: transparent;
  overflow-wrap: anywhere;
}

.ei-workspace .ei-feed-event > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ei-space-1) var(--ei-space-3);
  margin-bottom: var(--ei-space-2);
}

.ei-workspace .ei-feed-event h3 {
  margin: 0 0 var(--ei-space-2);
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
  font-weight: var(--ei-weight-medium);
}

.ei-workspace .ei-feed-event time {
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  font-variant-numeric: tabular-nums;
}

.ei-workspace .ei-feed-event p { margin: var(--ei-space-2) 0 0; white-space: pre-wrap; }

.ei-workspace :is(.ei-feed-event--message, .ei-feed-event--note) {
  padding: var(--ei-space-4);
  border: 0;
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-sunken);
}

.ei-workspace .ei-feed-event--note { background: var(--ei-warning-bg); }

.ei-workspace .ei-feed-event--audit {
  padding-block: var(--ei-space-3);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-label);
}

.ei-workspace :is(.ei-feed-event--task, .ei-feed-event--document) > header { margin-bottom: var(--ei-space-3); }

.ei-workspace .ei-case-composer {
  position: sticky;
  bottom: 0;
  z-index: var(--ei-z-raised);
  flex: none;
  max-height: 48vh;
  margin-top: 0;
  padding: var(--ei-space-5);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface-elevated);
  box-shadow: var(--ei-shadow-1);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ei-workspace .ei-case-composer > h2 {
  margin: 0 0 var(--ei-space-3);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
}

.ei-workspace .ei-case-composer .ei-field:first-child { margin-top: 0; }
.ei-workspace .ei-case-composer .ei-toolbar { margin-bottom: 0; }
.ei-workspace .ei-case-composer textarea { min-height: var(--ei-textarea-compact); max-height: 32vh; }

@media (max-width: 1199px) {
  .ei-workspace .ei-case-split { grid-template-columns: minmax(0, 1fr); gap: var(--ei-space-5); }
  .ei-workspace .ei-case-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ei-workspace :is(.ei-case-title, .ei-case-stage) { flex-basis: 100%; }
  .ei-workspace .ei-case-sidebar { grid-template-columns: minmax(0, 1fr); }
  .ei-workspace .ei-case-feed { gap: var(--ei-cell-pad-y); }
  .ei-workspace .ei-feed-event { padding: var(--ei-space-4); }
  .ei-workspace .ei-feed-event > header a { display: inline-flex; align-items: center; min-height: var(--ei-control-touch); }
  .ei-workspace .ei-case-composer { max-height: 48dvh; padding: var(--ei-space-4); }
}

@media (max-width: 420px) {
  .ei-workspace .ei-case-commandbar { width: 100%; }
}

/* 60-pages/dashboard.css */
/* Shared cabinet screens: wrap controls at their natural width, without a page scroller. */
.ei-dashboard__toolbar { align-items: flex-start; }
.ei-dashboard__toolbar > .ei-segmented { flex-wrap: wrap; }
.ei-dashboard__range { margin-bottom: var(--ei-space-4); }
.ei-dashboard__range > .ei-field { flex: 1 1 var(--ei-cell-min); max-width: var(--ei-form-max); }
.ei-dashboard__period { margin-bottom: var(--ei-space-4); }
.ei-import { max-width: var(--ei-wide-form-max); }
.ei-import__result { margin-top: var(--ei-space-5); }
.ei-import__result .ei-stats { margin-bottom: var(--ei-space-4); }
.ei-page-today > :is(.ei-stats, .ei-card) { margin-bottom: var(--ei-space-6); }

/* 60-pages/intake.css */
/* Intake form: sections on the left, sticky summary on the right. The page follows the width of its
   own column, not the window: with the side menu open a tablet leaves too little room for two columns. */
.ei-intake-root { container: ei-intake / inline-size; }

.ei-intake-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--ei-col-aside-min), var(--ei-col-aside));
  align-items: start;
  gap: var(--ei-space-7);
}

.ei-intake-layout fieldset:not(.ei-card, .ei-surface) {
  margin: 0 0 var(--ei-space-6);
  padding: var(--ei-space-5) 0;
  border: 0;
  border-top: var(--ei-hairline) solid var(--ei-divider);
}

.ei-intake-layout fieldset:not(.ei-card, .ei-surface) > legend {
  padding: 0 var(--ei-space-3) 0 0;
  font-size: var(--ei-type-title);
  line-height: var(--ei-leading-title);
  font-weight: var(--ei-weight-strong);
}

.ei-intake-layout aside {
  position: sticky;
  top: var(--ei-space-6);
  padding: var(--ei-space-5);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface);
}

.ei-intake-layout aside h2 { margin-top: 0; }

.ei-intake-profile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--ei-space-5);
}

.ei-intake-layout label:has(input[type="checkbox"]) { margin: var(--ei-space-4) 0; }

@container ei-intake (max-width: 900px) {
  .ei-intake-layout { display: block; }
  .ei-intake-layout aside { position: static; }
}

@container ei-intake (max-width: 560px) {
  .ei-intake-profile { display: block; }
}

/* Card sections of the intake form: legend as the card title. */
.ei-intake-layout .ei-card > legend.ei-legend {
  margin: 0 0 var(--ei-space-3);
  padding: 0;
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

/* Readiness checklist in the side panel: what is still missing, one link per field. */
.ei-intake-readiness {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ei-space-1) var(--ei-space-3);
  margin: var(--ei-space-4) 0;
  padding: 0;
  list-style: none;
}

.ei-intake-readiness__count { flex-basis: 100%; color: var(--ei-text-muted); font-size: var(--ei-type-label); }
.ei-intake-readiness a { display: inline-flex; align-items: center; min-height: var(--ei-control-sm); overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .ei-intake-readiness a { min-height: var(--ei-control-touch); min-width: var(--ei-control-touch); justify-content: center; }
}

.ei-intake-submit { width: 100%; margin-top: var(--ei-space-4); }

/* 60-pages/integrations.css */
/* Integrations: channel accounts as divided sections, forms and the pairing step. */
.ei-account-list {
  border-block: var(--ei-hairline) solid var(--ei-divider);
  background: var(--ei-surface);
}

.ei-account-section {
  padding: var(--ei-space-6) var(--ei-space-5);
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}

.ei-account-section:last-child { border-bottom: 0; }

.ei-account-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ei-space-4);
}

.ei-account-heading h3 { margin: 0 0 var(--ei-space-2); }
.ei-account-heading p { margin: 0 0 var(--ei-space-3); }
.ei-account-heading .ei-status { flex-shrink: 0; max-width: 45%; }
.ei-account-section .ei-toolbar { margin-top: var(--ei-space-5); margin-bottom: 0; }

.ei-account-form {
  margin: var(--ei-space-4) 0 var(--ei-space-6);
  padding: var(--ei-space-5);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface);
}

.ei-account-form h2 { margin-top: 0; }

.ei-workspace .ei-account-form fieldset {
  min-inline-size: 0;
  margin: var(--ei-space-6) 0;
  padding: var(--ei-space-4) 0 0;
  border: 0;
  border-top: var(--ei-hairline) solid var(--ei-divider);
}

.ei-account-form fieldset[hidden] { display: none; }

.ei-account-form legend {
  margin-bottom: var(--ei-space-2);
  color: var(--ei-text);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

.ei-auth-step {
  max-width: 65ch;
  margin-top: var(--ei-space-6);
  padding-top: var(--ei-space-2);
  border-top: var(--ei-hairline) solid var(--ei-divider);
}

.ei-auth-step .ei-field { max-width: var(--ei-form-max); }

/* A QR code must stay dark on light to scan, in either theme. */
.ei-account-qr {
  display: block;
  width: var(--ei-qr);
  max-width: 100%;
  height: auto;
  margin: var(--ei-space-4) 0;
  padding: var(--ei-space-2);
  border-radius: var(--ei-radius-md);
  background: var(--ei-qr-bg);
}

:is(.ei-account-section, .ei-account-form) button { white-space: normal; text-align: center; }
:is(.ei-account-section, .ei-account-form) p { max-width: 75ch; }
.ei-account-section p:is(.ei-error, .ei-notice) { max-width: none; }

@media (max-width: 767px) {
  .ei-account-heading { flex-direction: column; gap: var(--ei-space-1); }
  .ei-account-heading .ei-status { max-width: 100%; margin-bottom: var(--ei-space-2); }
  .ei-account-section,
  .ei-account-form { padding: var(--ei-space-4); }
  :is(.ei-account-section, .ei-account-form) .ei-toolbar { align-items: stretch; }
  :is(.ei-account-section, .ei-account-form) .ei-toolbar button { width: 100%; }
}

/* 60-pages/kit.css */
/* Component library page (#EiWorkspace/kit). Layout only: every component brings its own look.
   Each pane carries data-ei-theme, so both themes can sit side by side on one page. */
.ei-kit__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ei-space-1);
  margin: 0 0 var(--ei-space-6);
}

.ei-kit__jump {
  min-height: var(--ei-control-sm);
  padding: 0 var(--ei-space-3);
  border: 0;
  border-radius: var(--ei-radius-pill);
  background: var(--ei-surface-sunken);
  color: var(--ei-text);
  font: inherit;
  font-size: var(--ei-type-label);
  cursor: pointer;
}

.ei-kit__jump:hover { background: var(--ei-surface-hover); color: var(--ei-accent-text); }

.ei-kit__panes { display: grid; gap: var(--ei-space-6); align-items: start; }
.ei-kit__panes--both { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ei-kit__pane {
  min-width: 0;
  padding: var(--ei-space-6);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-bg);
  color: var(--ei-text);
}

.ei-kit__panes:not(.ei-kit__panes--both) .ei-kit__pane { padding: 0; }

.ei-kit__pane-name {
  margin: 0 0 var(--ei-space-4);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-medium);
}

.ei-kit__section {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-4);
  margin-bottom: var(--ei-space-8);
  scroll-margin-top: calc(var(--ei-topbar) + var(--ei-space-4));
}

.ei-kit__section > .ei-kit__title { margin: 0; }

.ei-kit__group + .ei-kit__group { margin-top: var(--ei-space-5); }
.ei-kit__group > .ei-filter-bar { margin: 0; }

.ei-kit__label {
  margin: 0 0 var(--ei-space-2);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  line-height: var(--ei-leading-caption);
  font-weight: var(--ei-weight-medium);
}

.ei-kit__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ei-space-3); }
.ei-kit__stack { display: flex; flex-direction: column; gap: var(--ei-space-4); }
.ei-kit__stack > .ei-notice { margin: 0; }

.ei-kit__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ei-col-card-min), 1fr));
  align-items: start;
  gap: var(--ei-space-5);
}

.ei-kit__form > :is(.ei-drop, .ei-field) { margin: 0; }

.ei-kit__grid,
.ei-kit__charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ei-col-card-min), 1fr));
  align-items: start;
  gap: var(--ei-space-5);
}

.ei-kit__charts { grid-template-columns: repeat(auto-fit, minmax(calc(var(--ei-col-card-min) * 1.4), 1fr)); }
.ei-kit__panel-text { margin: 0; color: var(--ei-text-muted); }

/* Phone frame: container-driven components (table, stepper) shown at phone width on any screen. */
.ei-kit__phone {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-4);
  max-inline-size: var(--ei-frame-phone);
}

@media (max-width: 1199px) {
  .ei-kit__panes--both { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ei-kit__pane { padding: var(--ei-space-4) var(--ei-space-3); }
  .ei-kit__nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ei-kit__jump { flex: 0 0 auto; min-height: var(--ei-control-touch); }
  .ei-kit__charts { grid-template-columns: minmax(0, 1fr); }
}

/* 60-pages/learning.css */
/* Learning (case tab for staff, "Обучение" card in the portal): programs, lessons, homework.
   Flat sections separated by dividers, so the block reads the same inside a card and on its own. */
.ei-learning-head { margin-bottom: var(--ei-space-4); }
.ei-workspace .ei-learning-head h2 { margin: 0 0 var(--ei-space-1); }

.ei-learning-program { padding: var(--ei-space-4) 0; }
.ei-learning-program + .ei-learning-program { border-top: var(--ei-hairline) solid var(--ei-divider); }

.ei-workspace .ei-learning-program__title {
  margin: 0 0 var(--ei-space-1);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
  font-weight: var(--ei-weight-strong);
}

.ei-learning-program__version {
  margin-left: var(--ei-space-1);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-regular);
}

/* Lessons of a program: numbered rows on the sunken tone, the title opens the lesson. */
.ei-lesson-list {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ei-lesson-row {
  display: flex;
  align-items: center;
  gap: var(--ei-space-3);
  padding: var(--ei-space-2) var(--ei-space-3);
  border-radius: var(--ei-radius-sm);
  background: var(--ei-surface-sunken);
}

.ei-lesson-row__index {
  min-width: var(--ei-space-5);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-strong);
  font-variant-numeric: tabular-nums;
}

.ei-lesson-row__open {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  border: 0;
  background: none;
  color: var(--ei-accent-text);
  font: inherit;
  font-weight: var(--ei-weight-medium);
  text-align: left;
  cursor: pointer;
}

.ei-lesson-row__open:hover { background: none; color: var(--ei-accent-text); text-decoration: underline; }

/* Lesson page. */
.ei-learning-section {
  margin-top: var(--ei-space-5);
  padding-top: var(--ei-space-5);
  border-top: var(--ei-hairline) solid var(--ei-divider);
}

.ei-lesson-text {
  max-width: var(--ei-reading-max);
  margin: var(--ei-space-4) 0;
  color: var(--ei-text);
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
}

.ei-video {
  margin: var(--ei-space-5) 0;
  overflow: hidden;
  border-radius: var(--ei-radius-lg);
  background: var(--ei-media-bg);
}

.ei-video video { display: block; width: 100%; max-height: 60vh; }
.ei-zoom-card__icon { color: var(--ei-accent-text); font-size: var(--ei-icon-lg); }

/* Homework: the task as a sunken group, attempts as divided rows, reviews with an accent rule. */
.ei-learning-task {
  margin-top: var(--ei-space-4);
  padding: var(--ei-space-4);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-sunken);
}

.ei-workspace .ei-learning-task__title {
  margin: 0 0 var(--ei-space-1);
  font-size: var(--ei-type-body);
  line-height: var(--ei-leading-body);
  font-weight: var(--ei-weight-strong);
}

.ei-learning-attempt {
  margin-top: var(--ei-space-4);
  padding-top: var(--ei-space-3);
  border-top: var(--ei-hairline) solid var(--ei-divider);
}

.ei-learning-review {
  margin-top: var(--ei-space-3);
  padding: var(--ei-space-3) var(--ei-space-4);
  border-left: var(--ei-rule) solid var(--ei-accent-text);
  border-radius: var(--ei-radius-sm);
  background: var(--ei-surface);
}

.ei-learning-review__score {
  color: var(--ei-accent-text);
  font-weight: var(--ei-weight-strong);
  font-variant-numeric: tabular-nums;
}

.ei-input--short { max-width: calc(var(--ei-space-9) * 3); }

/* 60-pages/messages.css */
/* Messages and support: conversation list, thread, context. Bubbles are tinted, not framed. */
.ei-chat {
  display: grid;
  grid-template-columns: minmax(var(--ei-col-list-min), var(--ei-col-list)) minmax(0, 1fr) minmax(var(--ei-col-aside-min), var(--ei-col-list));
  align-items: start;
  gap: var(--ei-space-5);
}

.ei-thread {
  max-height: 55vh;
  padding: var(--ei-space-2);
  overflow-y: auto;
}

.ei-message {
  margin-bottom: var(--ei-space-3);
  padding: var(--ei-space-3) var(--ei-space-4);
  border: 0;
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface-sunken);
  color: var(--ei-text);
  white-space: pre-wrap;
}

.ei-message[data-direction="outbound"] {
  margin-left: var(--ei-space-7);
  background: var(--ei-accent-soft);
}

.ei-message[data-direction="inbound"] { margin-right: var(--ei-space-7); }

/* Conversation list: one row per chat, the open one tinted. Rows are separated by space, not frames. */
.ei-chat-list {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-1);
}

.ei-chat-item {
  display: block;
  padding: var(--ei-space-3) var(--ei-space-4);
  border-radius: var(--ei-radius-md);
  color: var(--ei-text);
  text-decoration: none;
  transition: background-color var(--ei-duration-fast) var(--ei-ease);
}

.ei-chat-item:hover,
.ei-chat-item:focus-visible { background: var(--ei-surface-hover); color: var(--ei-text); text-decoration: none; }
.ei-chat-item.ei-active { background: var(--ei-accent-soft); }
.ei-chat-item__name { color: var(--ei-text); font-weight: var(--ei-weight-strong); }

/* Unread counter: the tab counter look, accent because unread needs attention. */
.ei-chat-item__unread {
  min-width: var(--ei-space-5);
  padding: 0 var(--ei-space-2);
  border-radius: var(--ei-radius-pill);
  background: var(--ei-accent-soft);
  color: var(--ei-accent-text);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-strong);
  line-height: var(--ei-leading-caption);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ei-chat-item.ei-active .ei-chat-item__unread { background: var(--ei-surface); }

.ei-message__meta { margin: 0 0 var(--ei-space-1); color: var(--ei-text-muted); font-size: var(--ei-type-caption); }
.ei-message p { margin: var(--ei-space-1) 0; }

/* Back to the list exists only in the single-pane mobile layout. */
.ei-workspace .ei-mobile-back { display: none; }

/* Support requests reuse the chat grid with two columns. */
#main .ei-workspace .ei-content:has([data-create-support]) .ei-chat {
  grid-template-columns: minmax(var(--ei-col-rail), 1fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--ei-space-5);
}

#main .ei-workspace .ei-content:has([data-create-support]) > .ei-chat + .ei-surface,
#main .ei-workspace .ei-content:has([data-create-support]) [data-reply-support] {
  margin-block-start: var(--ei-space-5);
  margin-inline: 0;
}

#main .ei-workspace .ei-content:has([data-create-support]) summary {
  min-height: var(--ei-control-touch);
  font-weight: var(--ei-weight-strong);
  cursor: pointer;
}

@media (max-width: 1199px) {
  .ei-chat { grid-template-columns: var(--ei-col-rail) minmax(0, 1fr); }
  .ei-chat aside { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  #main .ei-workspace .ei-content:has([data-create-support]) .ei-chat { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ei-chat { grid-template-columns: minmax(0, 1fr); }
  .ei-chat.has-thread .ei-conversation-list { display: none; }
  .ei-chat:not(.has-thread) .ei-conversation-detail { display: none; }
  .ei-workspace .ei-mobile-back { display: inline-flex; }
  .ei-conversation-detail .ei-button--primary { max-width: 100%; white-space: normal; text-align: center; }
}

/* 60-pages/portal.css */
/* Student portal and learning: centred column, dashboard cards, the live lesson call-out. */
.ei-portal {
  max-width: var(--ei-portal-max);
  margin: auto;
}

.ei-portal-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ei-col-card-min), 1fr));
  gap: var(--ei-space-4);
  margin-bottom: var(--ei-space-6);
}

.ei-portal-card {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-2);
  padding: var(--ei-space-5);
  border: var(--ei-hairline) solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  background: var(--ei-surface);
}

.ei-workspace .ei-portal-card h3 {
  margin: 0;
  color: var(--ei-text);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
}

.ei-portal-card p {
  margin: 0;
  color: var(--ei-text-muted);
  font-size: var(--ei-type-label);
  line-height: var(--ei-leading-label);
}

/* Live lesson: an accent-tinted strip with one primary action, no gradient. */
.ei-zoom-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ei-space-4);
  margin-bottom: var(--ei-space-5);
  padding: var(--ei-space-5) var(--ei-space-6);
  border: 0;
  border-radius: var(--ei-radius-lg);
  background: var(--ei-accent-soft);
}

.ei-workspace .ei-zoom-card h3 {
  margin: 0 0 var(--ei-space-1);
  color: var(--ei-text);
  font-size: var(--ei-type-title-sm);
  line-height: var(--ei-leading-title-sm);
}

.ei-zoom-card p {
  margin: 0;
  color: var(--ei-text-muted);
  font-size: var(--ei-type-label);
}

.ei-workspace a.ei-zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ei-space-2);
  min-height: var(--ei-control-lg);
  padding: var(--ei-space-2) var(--ei-space-5);
  border-radius: var(--ei-radius-sm);
  background: var(--ei-accent);
  color: var(--ei-on-accent);
  font-size: var(--ei-type-body);
  font-weight: var(--ei-weight-medium);
  text-decoration: none;
  transition: background-color var(--ei-duration-fast) var(--ei-ease);
}

.ei-workspace a.ei-zoom-btn:hover {
  background: var(--ei-accent-hover);
  color: var(--ei-on-accent);
  text-decoration: none;
}

@media (max-width: 767px) {
  .ei-workspace a.ei-zoom-btn { min-height: var(--ei-control-touch); }
}

/* Dashboard card content: the key value in body text, the action pinned to the bottom. */
.ei-portal-card p.ei-portal-card__value {
  color: var(--ei-text);
  font-size: var(--ei-type-body);
  font-weight: var(--ei-weight-strong);
  line-height: var(--ei-leading-body);
}

.ei-portal-card__action { margin-top: auto; }
.ei-portal-next + .ei-portal-next { margin-top: var(--ei-space-2); }
.ei-portal-card .ei-portal-next strong { color: var(--ei-text); font-weight: var(--ei-weight-medium); }

/* One application inside the applications card: a sunken group, not a nested card. */
.ei-portal-app {
  margin-top: var(--ei-space-3);
  padding: var(--ei-space-5);
  border-radius: var(--ei-radius-md);
  background: var(--ei-surface-sunken);
}

.ei-workspace .ei-portal-app h3 { margin: 0 0 var(--ei-space-1); }

/* Requirement row: title with its obligation, status on the right, details folded. */
.ei-workspace .ei-checklist-item__title {
  margin: 0;
  color: var(--ei-text);
  font-size: var(--ei-type-body);
  font-weight: var(--ei-weight-strong);
  line-height: var(--ei-leading-body);
}

.ei-checklist-item__req {
  margin-left: var(--ei-space-1);
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  font-weight: var(--ei-weight-regular);
}

.ei-checklist-item summary,
.ei-history summary {
  color: var(--ei-text-muted);
  font-size: var(--ei-type-caption);
  cursor: pointer;
}

@media (max-width: 767px) {
  .ei-checklist-item summary,
  .ei-history summary { padding-block: calc((var(--ei-control-touch) - var(--ei-leading-caption)) / 2); }
}

/* Notices inside the sunken application group sit on the surface tone to stay visible. */
.ei-portal-app :is(.ei-notice, .ei-drop__zone) { background: var(--ei-surface); }

/* 60-pages/review.css */
/* Document review: list of requirement rules under "Критерии и параметры". */
.ei-rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--ei-space-1);
  margin: var(--ei-space-2) 0;
  padding-left: var(--ei-space-5);
}

/* 60-pages/settings.css */
/* Reference screens: processes (master list of stage sets and the chosen set) and organisation. */
.ei-page-settings .ei-master {
  display: grid;
  grid-template-columns: minmax(var(--ei-col-context-min), var(--ei-col-context)) minmax(0, 1fr);
  gap: var(--ei-space-5);
  align-items: start;
}

.ei-page-settings .ei-master-list { margin: 0; padding: var(--ei-space-2); list-style: none; }
.ei-page-settings .ei-master-list__item {
  display: flex;
  align-items: center;
  gap: var(--ei-space-3);
  width: 100%;
  padding: var(--ei-space-2) var(--ei-space-3);
  border: 0;
  border-radius: var(--ei-radius-md);
  background: none;
  color: var(--ei-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.ei-page-settings .ei-master-list__item:hover { background: var(--ei-surface-hover); color: var(--ei-text); text-decoration: none; }
.ei-page-settings .ei-master-list__item[aria-current="true"] { background: var(--ei-accent-soft); color: var(--ei-accent-text); font-weight: var(--ei-weight-medium); }

@media (max-width: 1199px) {
  .ei-page-settings .ei-master { grid-template-columns: minmax(0, 1fr); }
}

/* 60-pages/student.css */
/* Student card (approved mockup docs/design/stage-1, screens 2 to 4) and the students list.
   Header: avatar, name with one meta line, actions on the right; team row; stepper; tabs. */
.ei-page-student .ei-student-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ei-space-4);
  margin: var(--ei-space-3) 0 var(--ei-space-4);
}

.ei-page-student .ei-student-head h1 { margin: 0; }

/* Responsible people per department, one row under the header. */
.ei-page-student .ei-team {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ei-space-3) var(--ei-space-7);
  margin: 0 0 var(--ei-space-5);
  padding: 0;
  list-style: none;
}

.ei-page-student .ei-team__item { display: flex; flex-direction: column; gap: var(--ei-space-1); }

.ei-page-student .ei-student-journey { margin-bottom: var(--ei-space-5); }

/* Context column (a third) and work column. One column below the wide layout. */
.ei-page-student .ei-student-split {
  display: grid;
  grid-template-columns: minmax(var(--ei-col-context-min), var(--ei-col-context)) minmax(0, 1fr);
  gap: var(--ei-space-5);
  align-items: start;
  margin-top: var(--ei-space-5);
}

.ei-page-student .ei-student-panel { margin-top: var(--ei-space-5); }

/* Fact groups of one card share the term column, so values line up across groups. */
.ei-page-student .ei-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--ei-space-3); }
.ei-page-student .ei-facts > :is(.ei-dl, .ei-divided) { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.ei-page-student .ei-facts .ei-divided > * { grid-column: 1 / -1; }
.ei-page-student .ei-facts .ei-dl { grid-template-columns: subgrid; }

/* Two fact columns of a contract. */
.ei-page-student .ei-contract-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ei-space-5); }

.ei-page-student .ei-tasks { margin: 0; padding: 0; list-style: none; }
.ei-page-student .ei-tasks__item {
  display: flex;
  align-items: center;
  gap: var(--ei-space-3);
  padding: var(--ei-space-3) 0;
  border-bottom: var(--ei-hairline) solid var(--ei-divider);
}
.ei-page-student .ei-tasks__item:first-child { padding-top: 0; }
.ei-page-student .ei-tasks__item:last-child { border-bottom: 0; padding-bottom: 0; }

/* Row actions of a table cell: small buttons side by side, wrapping on narrow screens. */
.ei-page-student .ei-cell-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ei-space-2); }

.ei-page-student .ei-students-scope { margin-bottom: var(--ei-space-3); }

@media (max-width: 1199px) {
  .ei-page-student .ei-student-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ei-page-student .ei-student-head { grid-template-columns: auto minmax(0, 1fr); }
  .ei-page-student .ei-student-head > .ei-row { grid-column: 1 / -1; }
  .ei-page-student .ei-contract-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* 90-utilities.css */
/* Utilities: the only place where !important is allowed outside reduced motion. */
.ei-onboarding-panel [hidden],
.ei-onboarding-spotlight[hidden],
.ei-workspace [hidden] {
  display: none !important;
}

.ei-visually-hidden {
  position: absolute !important;
  width: var(--ei-hairline) !important;
  height: var(--ei-hairline) !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Spacing on the token scale for the rare block that needs an offset its component does not give.
   Prefer .ei-stack gaps; these replace former inline margins and win like them. */
.ei-m-0 { margin: 0 !important; }
.ei-mt-1 { margin-top: var(--ei-space-1) !important; }
.ei-mt-2 { margin-top: var(--ei-space-2) !important; }
.ei-mt-3 { margin-top: var(--ei-space-3) !important; }
.ei-mt-4 { margin-top: var(--ei-space-4) !important; }
.ei-mt-5 { margin-top: var(--ei-space-5) !important; }
.ei-mt-6 { margin-top: var(--ei-space-6) !important; }
.ei-mt-7 { margin-top: var(--ei-space-7) !important; }
.ei-mb-0 { margin-bottom: 0 !important; }
.ei-mb-1 { margin-bottom: var(--ei-space-1) !important; }
.ei-mb-2 { margin-bottom: var(--ei-space-2) !important; }
.ei-mb-3 { margin-bottom: var(--ei-space-3) !important; }
.ei-mb-4 { margin-bottom: var(--ei-space-4) !important; }
.ei-mb-5 { margin-bottom: var(--ei-space-5) !important; }
.ei-text-center { text-align: center !important; }