/*
 * Созвон — components (redesign: docs/redesign/DESIGN_SYSTEM.md §8, mapping §11.4). Every component
 * reads semantic tokens, so it works in the light theme and under [data-theme="dark"]. Most
 * components expose custom properties (--btn-h, --input-h…) for fine-tuning in page CSS.
 * Load order: tokens.css → base.css → components.css → page CSS. Docs: docs/UI_KIT.md.
 *
 * Breakpoints (same numbers everywhere; CSS cannot use variables in media queries):
 *   --bp-wide ≥ 1440 · --bp-desktop ≤ 1050 · --bp-tablet ≤ 850 · --bp-stack ≤ 760 (main stacking
 *   point) · --bp-phone ≤ 650 · --bp-xs ≤ 360. Modals turn into bottom sheets under 640 px and the
 *   call screen keeps 640 / 900.
 */

/* =========================================================================
   Icons, logo, wordmark
   ========================================================================= */

.icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  overflow: visible;
}

/* Placeholder for hydrateIcons() before the script runs. */
[data-icon]:empty {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

/* Brand: wind mark (accent) + «созвон» + accent «.» — 27.2 / 650 / −0.045em, gap 7. */
.logo {
  --logo-fs: 27.2px;
  --logo-mark: 31px;
  --logo-gap: 7px;
  display: inline-flex;
  align-items: center;
  gap: var(--logo-gap);
  color: var(--text);
  font-size: var(--logo-fs);
  font-weight: var(--fw-brand);
  letter-spacing: var(--tracking-logo);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

a.logo:hover {
  color: var(--text);
}

.logo > .logo-mark {
  width: var(--logo-mark);
  height: var(--logo-mark);
}

.logo-mark {
  display: block;
  flex: none;
  color: var(--accent);
}

/* The old square mark (static pages not yet redrawn) takes the new accent. */
.logo-mark__bg {
  fill: var(--accent);
}

.logo__text,
.wordmark {
  display: inline-block;
  font-weight: var(--fw-brand);
  letter-spacing: var(--tracking-logo);
  line-height: 1;
}

.wordmark {
  font-size: var(--logo-fs, 27.2px);
}

.logo__dot,
.wordmark__dot {
  color: var(--accent);
}

/* Footer brand: 24 px, mark 28. Call header: 25.6 px. */
.logo--sm {
  --logo-fs: 24px;
  --logo-mark: 28px;
}

.logo--call {
  --logo-fs: 25.6px;
  --logo-mark: 28px;
}

@media (max-width: 760px) {
  .logo {
    --logo-fs: 24px;
    --logo-mark: 28px;
    --logo-gap: 4px;
  }
}

@media (max-width: 360px) {
  .logo {
    --logo-fs: 20.8px;
    --logo-mark: 24px;
  }
}

/* =========================================================================
   Buttons: .btn + variant + size (+ shape / state) — DESIGN_SYSTEM §8.4
   ========================================================================= */

.btn {
  --btn-h: 44px;
  --btn-px: 18px;
  --btn-radius: var(--r-12);
  --btn-fs: var(--fs-13);
  --btn-fw: var(--fw-ui);
  --btn-gap: 8px;
  --btn-icon: 20px;
  --btn-bg: var(--secondary-bg);
  --btn-bg-hover: var(--hover-bg);
  --btn-fg: var(--text);
  --btn-fg-hover: var(--btn-fg);
  --btn-border: var(--border);
  --btn-border-hover: var(--btn-border);
  --btn-bw: 1px;
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  height: var(--btn-h);
  min-width: 0;
  max-width: 100%;
  padding: 0 var(--btn-px);
  border: var(--btn-bw) solid var(--btn-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    opacity var(--dur-fast) ease,
    scale var(--dur-fast) ease-out;
}

.btn:hover {
  border-color: var(--btn-border-hover);
  background-color: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
}

.btn .icon {
  width: var(--btn-icon);
  height: var(--btn-icon);
}

/* Pressed: everything that is pressed shrinks a little (DESIGN_SYSTEM §8). */
:is(.btn, .control__btn, .device-toggle, .header-chip, .profile-chip, .theme-toggle, .field-button,
  .segmented__item, .month-day, .month-arrow, .month-today, .time-wheel__item, .notice__action,
  .header-switcher__link):not(:disabled):not([aria-disabled="true"]):active {
  scale: 0.96;
}

/* -- Variants -- */
.btn--primary {
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-fg: var(--accent-contrast);
  --btn-bw: 0px;
}

.btn--secondary {
  --btn-bg: var(--secondary-bg);
  --btn-bg-hover: var(--hover-bg);
  --btn-fg: var(--text);
  --btn-border: var(--border);
  --btn-bw: 1px;
}

/* Outline icon buttons (month arrows, share): hover tints accent. */
.btn--secondary.btn--icon {
  --btn-radius: var(--r-10);
  --btn-fg: var(--text-muted);
  --btn-bg-hover: var(--surface-accent);
  --btn-fg-hover: var(--accent-text);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--hover-bg);
  --btn-fg: var(--text);
  --btn-bw: 0px;
  --btn-px: 14px;
}

/* Ghost icon buttons are circles (dialog ×, theme toggle, more). */
.btn--ghost.btn--icon {
  --btn-radius: 50%;
}

.btn--ghost-accent {
  --btn-bg: transparent;
  --btn-bg-hover: var(--hover-bg);
  --btn-fg: var(--accent-text);
  --btn-fg-hover: var(--accent-text-hover);
  --btn-bw: 0px;
  --btn-px: 12px;
}

.btn--dark {
  --btn-bg: var(--text);
  --btn-bg-hover: var(--btn-dark-hover);
  --btn-fg: var(--surface);
  --btn-fg-hover: var(--surface);
  --btn-bw: 0px;
}

.btn--danger {
  --btn-bg: var(--danger);
  --btn-bg-hover: var(--danger-hover);
  --btn-fg: #FFFFFF;
  --btn-fg-hover: #FFFFFF;
  --btn-bw: 0px;
}

/* Dark glass outline for headers over video (call), in any theme. */
.btn--on-dark {
  --btn-bg: #d0e2ff0d;
  --btn-bg-hover: #d0e2ff1c;
  --btn-fg: #D3DEF0;
  --btn-fg-hover: #EDF2FF;
  --btn-border: #d0e2ff24;
  --btn-bw: 1px;
}

/* Soft CTA («Осмотреть комнату», «Связаться с нами»). */
.btn--soft {
  --btn-bg: var(--surface-accent);
  --btn-bg-hover: var(--hover-bg);
  --btn-fg: var(--accent-text);
  --btn-fg-hover: var(--accent-text);
  --btn-border: transparent;
  --btn-bw: 1px;
  --btn-radius: var(--r-13);
  --btn-icon: 19px;
  --btn-gap: 10px;
}

/* Muted foreground (ghost icon buttons: panel close, attach). */
.btn--muted {
  --btn-fg: var(--text-muted);
  --btn-fg-hover: var(--text);
}

/* Icon / text in the accent ink (share button in rows). */
.btn--ink {
  --btn-fg: var(--accent-text);
  --btn-fg-hover: var(--accent-text);
}

/* Glass pill («Запланировать» / «Назад», «Проверить связь»): 42 high, symbol circle 29. */
.btn--glass {
  --btn-h: 42px;
  --btn-radius: var(--r-pill);
  --btn-fs: var(--fs-12);
  --btn-gap: 9px;
  --btn-icon: 17px;
  --btn-bg: var(--glass-pill-bg);
  --btn-bg-hover: var(--glass-pill-bg-hover);
  --btn-fg: var(--glass-text-muted);
  --btn-fg-hover: var(--glass-text-muted);
  --btn-border: var(--glass-pill-border);
  --btn-bw: 1px;
  padding: 5px 16px 5px 6px;
  box-shadow: var(--glass-pill-shadow);
}

.btn__symbol {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--glass-symbol-bg);
  color: var(--glass-symbol-ink);
  box-shadow: inset 0 0 0 1px var(--glass-symbol-ring);
}

.btn--glass .btn__label {
  flex: 1 1 auto;
  text-align: center;
}

/* On the plain page (not over the illustration) the pill is a surface card. */
.btn--glass.btn--surface {
  --btn-bg: var(--surface-raised);
  --btn-bg-hover: var(--hover-bg);
  --btn-fg: var(--text);
  --btn-fg-hover: var(--text);
  --btn-border: var(--border);
  box-shadow: none;
}

.btn--glass.btn--surface .btn__symbol {
  background: var(--surface-accent);
  color: var(--accent-text);
  box-shadow: none;
}

/* Quiet chip («Сегодня», time presets). */
.btn--chip {
  --btn-h: 34px;
  --btn-px: 12px;
  --btn-radius: var(--r-10);
  --btn-fs: var(--fs-12);
  --btn-fw: var(--fw-medium);
  --btn-bg: var(--surface-soft);
  --btn-bg-hover: var(--surface-accent);
  --btn-fg: var(--text-muted);
  --btn-fg-hover: var(--accent-text);
  --btn-border: transparent;
  --btn-bw: 1px;
  font-variant-numeric: tabular-nums;
}

.btn--chip.btn--bordered {
  --btn-border: var(--border);
}

.btn--chip:disabled,
.btn--chip[aria-disabled="true"] {
  opacity: 0.35;
}

/* Trash in rows: 28 × 28, danger icon, soft danger hover. */
.btn--danger-ghost {
  --btn-h: 28px;
  --btn-px: 0px;
  --btn-radius: var(--r-8);
  --btn-icon: 16px;
  --btn-bg: transparent;
  --btn-bg-hover: var(--danger-soft);
  --btn-fg: var(--danger-text);
  --btn-fg-hover: var(--danger-text);
  --btn-border: transparent;
  --btn-bw: 1px;
  width: var(--btn-h);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .btn--danger-ghost {
    --btn-border-hover: color-mix(in srgb, var(--danger-text) 16%, transparent);
  }
}

/* Danger text button («Удалить аккаунт», «Отменить встречу»). */
.btn--danger-text {
  --btn-bg: transparent;
  --btn-bg-hover: var(--danger-soft);
  --btn-fg: var(--danger-text);
  --btn-fg-hover: var(--danger-text);
  --btn-bw: 0px;
  --btn-px: 12px;
}

/* -- Sizes: 36 / 40 / 44 / 48 / 52 / 56 high, 12 / 13 / 13 / 13 / 14 / 14 px -- */
.btn--xs {
  --btn-h: 36px;
  --btn-px: 12px;
  --btn-radius: var(--r-10);
  --btn-fs: var(--fs-12);
  --btn-gap: 8px;
  --btn-icon: 16px;
}

.btn--sm {
  --btn-h: 40px;
  --btn-px: 14px;
  --btn-radius: var(--r-10);
  --btn-fs: var(--fs-13);
  --btn-gap: 8px;
  --btn-icon: 18px;
}

.btn--md {
  --btn-h: 48px;
  --btn-px: 20px;
  --btn-radius: var(--r-12);
  --btn-fs: var(--fs-13);
  --btn-gap: 10px;
  --btn-icon: 20px;
}

.btn--lg {
  --btn-h: 52px;
  --btn-px: 18px;
  --btn-radius: var(--r-12);
  --btn-fs: var(--fs-14);
  --btn-gap: 10px;
  --btn-icon: 20px;
}

.btn--xl {
  --btn-h: 56px;
  --btn-px: 22px;
  --btn-radius: var(--r-13);
  --btn-fs: var(--fs-14);
  --btn-gap: 10px;
  --btn-icon: 20px;
}

@media (max-width: 1439.98px) {
  .btn--xl {
    --btn-h: 53px;
  }
}

@media (max-width: 650px) {
  .btn--xl {
    --btn-h: 55px;
  }
}

/* A button that reads as a link: accent ink, trailing arrow, underline on hover. */
.btn--link {
  --btn-h: auto;
  --btn-px: 0px;
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: var(--accent-text);
  --btn-fg-hover: var(--accent-text-hover);
  --btn-bw: 0px;
  --btn-radius: var(--r-6);
  --btn-gap: 11px;
  --btn-fs: var(--fs-13);
  padding-block: 8px;
}

.btn--link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Leave / end call: danger fill, 48 high, radius 15. */
.btn--end-call {
  --btn-h: 48px;
  --btn-px: 20px;
  --btn-radius: var(--r-15);
  --btn-fs: var(--fs-13);
  --btn-gap: 9px;
  --btn-icon: 20px;
  --btn-bg: var(--danger);
  --btn-bg-hover: var(--danger-hover);
  --btn-fg: #FFFFFF;
  --btn-fg-hover: #FFFFFF;
  --btn-bw: 0px;
}

@media (max-width: 650px) {
  .btn--end-call {
    --btn-h: 45px;
    --btn-px: 14px;
  }
}

/* -- Shapes -- */
.btn--icon {
  width: var(--btn-h);
  padding: 0;
}

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

.btn--round {
  --btn-radius: var(--r-pill);
}

/* Toggle with a text label (lobby): on = soft accent, off = neutral (the icon is crossed). */
.btn--toggle {
  --btn-fs: var(--fs-13);
  --btn-border: var(--border);
  --btn-border-hover: var(--accent);
  --btn-bg: var(--surface-raised);
  --btn-bg-hover: var(--surface-raised);
  padding: 0 16px 0 14px;
}

.btn--toggle[aria-pressed="true"] {
  --btn-bg: var(--surface-accent);
  --btn-bg-hover: var(--surface-accent);
  --btn-fg: var(--accent-text);
  --btn-fg-hover: var(--accent-text);
  --btn-border: var(--surface-accent);
}

.btn--toggle[aria-pressed="false"] {
  --btn-fg: var(--text-muted);
  --btn-fg-hover: var(--text);
}

/* -- States -- */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  border-color: var(--btn-border);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
}

a.btn[aria-disabled="true"] {
  pointer-events: none;
}

/* Busy: label hidden (width kept), 18 px spinner; clicks are swallowed by setBusy(). */
.btn[aria-busy="true"] {
  color: transparent;
  cursor: progress;
  pointer-events: none;
}

.btn[aria-busy="true"] > * {
  visibility: hidden;
}

.btn[aria-busy="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: sz-spin 0.7s linear infinite;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .btn[aria-busy="true"]::after {
    border-color: color-mix(in srgb, var(--btn-fg) 25%, transparent);
    border-top-color: var(--btn-fg);
  }
}

/* Notification dot on an icon button (cabinet bell). */
.btn__dot {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* Counter on a button corner. */
.btn__badge {
  position: absolute;
  top: -6px;
  right: -6px;
}

/* =========================================================================
   Links
   ========================================================================= */

.link {
  color: var(--accent-text);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.link:hover {
  color: var(--accent-text-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Secondary links (footer, back link): muted → accent ink on hover. */
.link--muted {
  color: var(--text-muted);
  font-weight: inherit;
  transition: color 160ms ease;
}

.link--muted:hover {
  color: var(--accent-text);
  text-decoration: none;
}

/* Navigation-style link in the text colour. */
.link--plain {
  color: var(--text);
  font-weight: inherit;
}

.link--plain:hover {
  color: var(--accent-text);
  text-decoration: none;
}

.link--underline {
  text-decoration-line: underline;
}

/* Back link «← К встречам»: 13 px muted, arrow 17, min-height 36. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color 160ms ease;
}

.back-link:hover {
  color: var(--accent-text);
}

.back-link .icon {
  width: 17px;
  height: 17px;
}

/* =========================================================================
   Forms — DESIGN_SYSTEM §8.6–8.8
   ========================================================================= */

.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.field__label {
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: var(--fw-ui);
  line-height: 1.5;
}

/* Small fields (lobby share field, device selects): 12 px. */
.field__label--sm {
  font-size: var(--fs-12);
}

.field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.field__hint {
  color: var(--text-muted);
  font-size: var(--fs-11);
  line-height: 1.5;
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--danger-text);
  font-size: var(--fs-12);
  line-height: 1.5;
}

.field__error .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.field__control {
  position: relative;
  display: flex;
  min-width: 0;
}

.field__control > .input {
  flex: 1 1 auto;
}

/* Icon button inside a field (show/hide password, copy link): 37 × 37 at 5 px from the right. */
.field__adornment {
  position: absolute;
  top: 50%;
  right: 5px;
  translate: 0 -50%;
}

.field__adornment.btn {
  --btn-h: 37px;
}

.field__control:has(.field__adornment) > .input {
  padding-right: 48px;
}

.input,
.select,
.textarea {
  --input-h: 44px;
  --input-px: 14px;
  --input-radius: var(--r-11);
  --input-fs: var(--fs-16);
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--input-h);
  padding: 0 var(--input-px);
  border: 1px solid var(--border-strong);
  border-radius: var(--input-radius);
  background-color: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--input-fs);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  transition:
    border-color var(--dur) ease,
    box-shadow var(--dur) ease,
    background-color var(--dur) ease;
}

.input,
.textarea {
  appearance: none;
}

.input::placeholder,
.textarea::placeholder {
  font-size: var(--fs-14);
}

/* Focus (mouse too): focus border + 3 px glow, no outline. */
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--focus-ring);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-glow);
}

/* Invalid keeps its red border while focused, with a red glow. */
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--danger-text);
}

.input[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
  border-color: var(--danger-text);
  box-shadow: 0 0 0 3px var(--danger-glow);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hero card / dialog fields: 52 high, padding 0 15, radius 12. */
.input--lg,
.select--lg {
  --input-h: 52px;
  --input-px: 15px;
  --input-radius: var(--r-12);
}

@media (min-width: 1440px) {
  .input--xl {
    --input-h: 56px;
  }
}

.input--xl {
  --input-h: 52px;
  --input-px: 15px;
  --input-radius: var(--r-12);
}

/* Compact fields (chat composer, filters): 40 high, radius 10, 14 px. */
.input--sm,
.select--sm {
  --input-h: 40px;
  --input-px: 12px;
  --input-radius: var(--r-10);
  --input-fs: var(--fs-14);
}

.input::-webkit-search-cancel-button,
.search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Selects: 14 px text, chevron 16 at the right. */
.select {
  --input-fs: var(--fs-14);
  padding-right: 36px;
  appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.select option {
  background-color: var(--surface-raised);
  color: var(--text);
}

.textarea {
  --input-fs: var(--fs-15);
  --input-radius: var(--r-12);
  height: auto;
  min-height: 96px;
  padding: 12px 15px;
  resize: vertical;
}

/* Input + button in a row (join by code). */
.input-group {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.input-group > .input {
  flex: 1 1 140px;
}

.input-group--lg > .input {
  --input-h: 52px;
  --input-px: 15px;
  --input-radius: var(--r-12);
  flex-basis: 160px;
}

.input-group--lg > .btn {
  --btn-h: 52px;
  --btn-px: 20px;
  --btn-radius: var(--r-12);
  --btn-fs: var(--fs-14);
}

/* Search field: 44 high box; .search--pill = the cabinet pill (40 high, radius 999, surface). */
.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  min-width: 0;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-11);
  background-color: var(--input-bg);
  color: var(--text-muted);
  cursor: text;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}

.search > .icon {
  width: 18px;
  height: 18px;
}

.search:focus-within {
  border-color: var(--focus-ring);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
}

.search__input:focus-visible {
  outline: none;
}

.search--pill {
  height: 40px;
  padding: 0 16px 0 14px;
  border-color: var(--border);
  border-radius: var(--r-pill);
  background-color: var(--surface-raised);
}

/* -- Checkbox, radio, switch: native inputs, restyled -- */
.checkbox,
.radio,
.switch {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: var(--fs-14);
  line-height: 20px;
  cursor: pointer;
  user-select: none;
}

.checkbox > input,
.radio > input {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid var(--border-strong);
  background-color: var(--input-bg);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.checkbox > input {
  border-radius: 5px;
}

.checkbox > input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5.5px;
  width: 5px;
  height: 10px;
  border: solid var(--accent-contrast);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast) ease;
}

.checkbox > input:checked,
.checkbox > input:indeterminate,
.radio > input:checked {
  border-color: var(--accent);
  background-color: var(--accent);
}

.checkbox > input:checked::after {
  transform: rotate(45deg) scale(1);
}

.checkbox > input:indeterminate::after {
  top: 7.5px;
  left: 4px;
  width: 8px;
  height: 0;
  border-width: 0 0 2px;
  transform: none;
}

.radio > input {
  border-radius: 50%;
}

.radio > input::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background-color: var(--accent-contrast);
  transform: scale(0);
  transition: transform var(--dur-fast) ease;
}

.radio > input:checked::after {
  transform: scale(1);
}

:is(.checkbox, .radio) > input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Switch (SCREENS §4.2): 44 × 26 track, 20 px knob travelling 18 px. */
.switch > input {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin: -3px 0 0;
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--border-strong);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}

.switch > input::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(16, 23, 34, 0.25);
  transition: transform var(--dur) var(--ease-out);
}

.switch > input:checked {
  background-color: var(--accent);
}

.switch > input:checked::before {
  transform: translateX(18px);
}

.switch > input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Settings row: text on the left, switch on the right (put the input first in the DOM). */
.switch--end {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
}

:is(.checkbox, .radio, .switch):has(> input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

:is(.checkbox, .radio, .switch) > input:disabled {
  cursor: not-allowed;
}

.checkbox__text,
.radio__text,
.switch__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-weight: var(--fw-medium);
}

.checkbox__hint,
.radio__hint,
.switch__hint {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  line-height: 18px;
}

/* Colour swatch radios («Цвет аватара»): radio 17 + swatch 19 + 12 px label. */
.swatch-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
}

.swatch-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: var(--text-muted);
  font-size: var(--fs-12);
  cursor: pointer;
}

.swatch-radio > input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.swatch-radio__swatch {
  width: 19px;
  height: 19px;
  border: 1px solid var(--swatch-border, var(--border-strong));
  border-radius: 50%;
  background: var(--swatch, var(--surface-soft));
}

.swatch-radio--sky { --swatch: #C8DCFF; --swatch-border: #9EB9E4; }
.swatch-radio--mint { --swatch: #CEE9DF; --swatch-border: #8EB9AA; }
.swatch-radio--lilac { --swatch: #E3D8FA; --swatch-border: #B6A0DE; }

/* Segmented control (DESIGN_SYSTEM §8.5.2): subtle track, the selected segment is a surface. */
.segmented {
  display: inline-grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  border-radius: var(--r-14);
  background-color: var(--surface-soft);
}

.segmented--block {
  display: grid;
}

.segmented__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-10);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: var(--fw-ui);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

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

.segmented__item .icon {
  width: 18px;
  height: 18px;
}

.segmented__item[aria-pressed="true"],
.segmented__item[aria-checked="true"],
.segmented__item[aria-selected="true"],
.segmented__item:has(> input:checked) {
  background-color: var(--selected-bg);
  color: var(--text);
  box-shadow: var(--shadow-segment);
}

.segmented__item > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented__item:focus-visible,
.segmented__item:has(> input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 850px) {
  .segmented__item {
    font-size: var(--fs-12);
  }
}

/* -- Date / time field buttons (DESIGN_SYSTEM §8.8; js/lib/datepicker.js, timepicker.js) -- */
.field-button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-11);
  background-color: var(--input-bg);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
  transition:
    border-color var(--dur) ease,
    box-shadow var(--dur) ease,
    background-color var(--dur) ease,
    scale var(--dur-fast) ease-out;
}

.field-button > .icon {
  width: 17px;
  height: 17px;
  color: var(--text-muted);
}

.field-button__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-button__value.is-placeholder {
  color: var(--text-muted);
}

.time-field-button .field-button__value {
  font-variant-numeric: tabular-nums;
}

.field-button:focus-visible,
.field-button[aria-expanded="true"] {
  border-color: var(--focus-ring);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.field-button[aria-expanded="true"] {
  box-shadow: none;
}

.field-button[aria-invalid="true"] {
  border-color: var(--danger-text);
}

.field-button[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--danger-glow);
}

.field-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* «Дата» / «Время» row. */
.field-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 12px;
}

@media (max-width: 760px) {
  .field-pair {
    gap: 10px;
  }

  .field-button {
    gap: 7px;
    padding-inline: 10px;
    font-size: var(--fs-13);
  }

  .field-button > .icon {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 360px) {
  .field-pair {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .field-button {
    padding-inline: 9px;
    font-size: var(--fs-12);
  }
}

/* -- Disclosure «Добавить название» (DESIGN_SYSTEM §8.7; js/lib/disclosure.js animates it) -- */
.disclosure > summary,
.disclosure__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 28px;
  padding: 2px 0;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-12);
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-fast) ease;
}

.disclosure > summary::-webkit-details-marker,
.disclosure__summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary:hover,
.disclosure__summary:hover {
  color: var(--accent-text);
}

.disclosure__icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.disclosure__icon::before,
.disclosure__icon::after {
  content: '';
  position: absolute;
  top: 6.25px;
  left: 1.5px;
  width: 11px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 280ms var(--ease-out), opacity 180ms ease-out;
}

.disclosure__icon::after {
  transform: rotate(90deg);
}

.disclosure[data-expanded="true"] .disclosure__icon::after {
  opacity: 0;
  transform: rotate(0deg);
}

.disclosure__body {
  overflow: hidden;
  margin-inline: -7px;
  padding-inline: 7px;
}

.disclosure__inner {
  padding-block: 14px 7px;
}

/* =========================================================================
   Text blocks
   ========================================================================= */

/* Kicker: 10 / 600 / +0.1em uppercase, muted («ВАШ РИТМ ОБЩЕНИЯ»). Write normal case in markup. */
.eyebrow,
.kicker {
  display: inline-block;
  color: var(--text-muted);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

/* The amount never breaks («990 ₽»); the period stays beside it while it fits. */
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  line-height: 1.2;
}

.price__value {
  font-size: var(--fs-36);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-price);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price__period {
  flex: 1 1 0;
  color: var(--text-muted);
  font-size: var(--fs-13);
}

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-6);
  background-color: var(--surface-soft);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

/* Feature list with check marks (pricing). */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: var(--fs-14);
  line-height: 1.5;
  list-style: none;
}

.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.check-list__item > .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--accent-text);
}

.check-list__item--off {
  color: var(--text-muted);
}

.check-list__item--off > .icon {
  color: inherit;
}

.check-list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--text-muted);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}

.check-list--inline .check-list__item {
  align-items: center;
  gap: 6px;
}

.check-list--inline .check-list__item > .icon {
  width: 16px;
  height: 16px;
  margin-top: 0;
}

/* Emblem: 42 / radius 14 / soft accent / accent icon 22 (--lg 45 / 15, --sm 36 / 12). */
.icon-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-14);
  background-color: var(--surface-accent);
  color: var(--accent-text);
}

.icon-tile .icon {
  width: 22px;
  height: 22px;
}

.icon-tile--lg {
  width: 45px;
  height: 45px;
  border-radius: var(--r-15);
}

.icon-tile--lg .icon {
  width: 20px;
  height: 20px;
}

.icon-tile--sm {
  width: 36px;
  height: 36px;
  border-radius: var(--r-12);
}

.icon-tile--sm .icon {
  width: 19px;
  height: 19px;
}

.icon-tile--on-accent {
  background-color: var(--c-on-accent-soft);
  color: #FFFFFF;
}

.icon-tile--muted {
  background-color: var(--surface-soft);
  color: var(--text-muted);
}

.icon-tile--danger {
  background-color: var(--danger-soft-solid);
  color: var(--danger-text);
}

.icon-tile--success {
  background-color: var(--success-soft);
  color: var(--success);
}

/* Number marker (number tabs): 25 px accent circle, white 10 / 500 digits. */
.num-circle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--fs-10);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Note box: soft accent, 13 px text, accent icon; danger / warning / success use their soft fills. */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-14);
  background-color: var(--surface-accent);
  color: var(--text);
  font-size: var(--fs-13);
  line-height: 1.5;
}

.callout > .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--accent-text);
}

.callout__title {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}

.callout--danger {
  background-color: var(--danger-soft-solid);
}

.callout--danger > .icon,
.callout--danger .callout__title {
  color: var(--danger-text);
}

.callout--warning {
  background-color: var(--warning-soft);
}

.callout--warning > .icon,
.callout--warning .callout__title {
  color: var(--warning);
}

.callout--success {
  background-color: var(--success-soft);
}

.callout--success > .icon,
.callout--success .callout__title {
  color: var(--success);
}

.callout--neutral {
  background-color: var(--surface-soft);
  color: var(--text-muted);
}

.callout--neutral > .icon {
  color: var(--text-muted);
}

/* Status line after a success («Запланировано на 14:30»): the check draws itself. */
.status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 21px;
  color: var(--success);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  animation: sz-status-in 400ms var(--ease-out) both;
}

.status-line > .icon {
  width: 19px;
  height: 19px;
}

.status-line .status-line__check {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  animation: sz-draw 550ms ease-out 120ms forwards;
}

/* Inline save confirmation («Изменения сохранены»). */
.save-status {
  color: var(--success);
  font-size: var(--fs-12);
}

/* =========================================================================
   Panels, cards, lists, dividers — DESIGN_SYSTEM §8.10
   ========================================================================= */

/* Content panel: surface, radius 24, no border in light (1 px border in dark), no shadow. */
.card {
  min-width: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--r-24);
  background-color: var(--surface-raised);
  color: var(--text);
}

.card--pad {
  padding: 25px;
}

/* Accent panel (day agenda, invitation band). */
.card--soft {
  border-color: transparent;
  background-color: var(--surface-accent);
}

.card--interactive {
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--dur) ease, border-color var(--dur) ease;
}

.card--interactive:hover {
  color: inherit;
  box-shadow: var(--shadow-card-hover);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 25px;
  border-bottom: 1px solid var(--border);
}

.card__title {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: var(--fw-ui);
  line-height: 1.5;
}

.card__link {
  color: var(--accent-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.card__link:hover {
  color: var(--accent-text-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card__body {
  padding: 25px;
}

.card__footer {
  padding: 16px 25px 22px;
  border-top: 1px solid var(--border);
}

/* Glass panel over the illustration (DESIGN_SYSTEM §3.3). Inside it, muted text, field borders,
   field fills and accent text take the glass-local values (contrast ≥ 4.5:1 on the glass). */
.glass-panel {
  --text-muted: var(--glass-text-muted);
  --border-strong: var(--glass-input-border);
  --input-bg: var(--glass-input-bg);
  --accent-text: var(--glass-accent-text);
  position: relative;
  min-width: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-20);
  background: var(--glass-bg-solid);
  color: var(--text);
  box-shadow: var(--glass-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

/* ≤ 760 the panel no longer sits over the image. */
.glass-panel--narrow {
  border-color: var(--glass-border-narrow);
  border-radius: var(--r-25);
  background: var(--glass-bg-narrow);
}

@media (max-width: 760px) {
  .glass-panel--stack {
    border-color: var(--glass-border-narrow);
    border-radius: var(--r-25);
    background: var(--glass-bg-narrow);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-panel,
  .glass-panel--narrow {
    background: var(--glass-opaque);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Pricing / plan card: surface panel radius 24; featured = soft accent fill. */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding: 28px 28px 24px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-24);
  background-color: var(--surface-raised);
}

.plan-card--featured {
  border-color: transparent;
  background-color: var(--surface-accent);
}

.plan-card__badge {
  position: absolute;
  top: 24px;
  right: 24px;
}

.plan-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 96px;
}

.plan-card__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.plan-card__subtitle {
  color: var(--text-muted);
  font-size: var(--fs-13);
  line-height: 1.5;
}

.plan-card__cta {
  margin-top: auto;
}

/* Rows inside a card (search results, lists): 1 px dividers, 14–15 / 500 titles. */
.list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 18px var(--row-px, 24px);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.list-row:last-child {
  border-bottom: 0;
}

.list-row--compact {
  flex-wrap: nowrap;
  gap: 14px;
  padding: 12px var(--row-px, 24px);
  border-bottom: 0;
}

a.list-row,
button.list-row,
.list-row--link {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease;
}

a.list-row:hover,
button.list-row:hover,
.list-row--link:hover {
  background-color: var(--hover-bg);
  color: var(--text);
}

a.list-row:focus-visible,
button.list-row:focus-visible,
.list-row--link:focus-visible {
  outline-width: 2px;
  outline-offset: -2px;
}

.list-row__main {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.list-row--compact .list-row__main {
  flex-basis: auto;
}

.list-row__title {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.list-row--compact .list-row__title {
  font-size: var(--fs-14);
}

.list-row__meta {
  color: var(--text-muted);
  font-size: var(--fs-13);
  line-height: 1.5;
}

.list-row__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

/* Meeting time column: «15:00» (13 / 550 accent, tabular) over the day (12 muted). */
.time-block {
  display: flex;
  flex: none;
  flex-direction: column;
  width: var(--time-w, 64px);
  line-height: 1.5;
}

.time-block__time {
  color: var(--accent-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-ui);
  font-variant-numeric: tabular-nums;
}

.time-block__day {
  color: var(--text-muted);
  font-size: var(--fs-12);
}

/* Recording thumbnail: 56 × 40, radius 8, navy, with a filled play icon or a poster <img>. */
.media-thumb {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--r-8);
  background-color: #15263F;
  color: #EDF2FF;
}

.media-thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-thumb > .icon {
  position: relative;
  width: 16px;
  height: 16px;
}

.divider {
  flex: none;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--border);
}

.divider--vertical {
  align-self: stretch;
  width: 1px;
  height: auto;
}

/* =========================================================================
   Meetings of a day (agenda) — DESIGN_SYSTEM §8.11
   ========================================================================= */

/* Scroll area of the day: role="region" + tabindex="0" in markup; sizes via custom properties.
   A control focused by Tab is scrolled 8 px clear of the edges, so its focus ring shows whole.
   8 px of padding on every side holds the whole 8 px focus band (3 px ring 5 px out) inside the
   clip, also left of «Открыть», which starts at the item's left edge. The prototype pads the left
   by 5: the −3 px left margin keeps the items exactly where it puts them. */
.agenda-scroll {
  min-height: var(--agenda-min, 260px);
  max-height: var(--agenda-max, 420px);
  margin-block: 15px;
  margin-left: -3px;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 8px;
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

.agenda-scroll:focus-visible {
  outline-width: 2px;
  outline-offset: 2px;
}

.agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px 12px;
  padding-block: 18px;
  border-bottom: 1px solid var(--border);
}

.agenda-item:first-child {
  padding-top: 0;
}

.agenda-item__time {
  padding-top: 2px;
  color: var(--accent-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-ui);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.agenda-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 22px;
}

/* Only the title line sits beside the trash, so only it keeps 30 px clear (SCREENS §4.13): the
   meta line uses the full width, and so do items without a trash (calls). */
.agenda-item:has(> .agenda-item__delete) .agenda-item__info > :first-child {
  padding-right: 30px;
}

/* The copy-fallback link field (blocked clipboard) stays out of the trash column too, in line with
   the title (meetings-modal-copied-1440.png). */
.agenda-item:has(> .agenda-item__delete) .agenda-item__info > .agenda-item__link {
  max-width: calc(100% - 30px);
}

.agenda-item__title {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-align: start;
  overflow-wrap: anywhere;
}

button.agenda-item__title,
a.agenda-item__title {
  cursor: pointer;
  text-decoration: none;
}

button.agenda-item__title:hover,
a.agenda-item__title:hover {
  color: var(--accent-text);
}

.agenda-item__meta {
  color: var(--text-muted);
  font-size: var(--fs-12);
  line-height: 1.5;
}

/* The «Мои встречи» dialog with two columns: the meta keeps to one line (the full text stays in the
   DOM and in its title), so the short list shows a third meeting (meetings-modal-1440-light.png).
   ≤ 850 it wraps. */
@media (min-width: 851px) {
  .board--modal .agenda-item__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.agenda-item__actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 8px;
}

/* «Открыть»: accent, 36 high, radius 10, 11 / 500, min-width 104, video icon 16. */
.agenda-item__open {
  --btn-h: 36px;
  --btn-px: 13px;
  --btn-radius: var(--r-10);
  --btn-fs: var(--fs-11);
  --btn-fw: var(--fw-medium);
  --btn-icon: 16px;
  min-width: 104px;
}

.agenda-item__delete {
  position: absolute;
  top: 16px;
  right: 0;
}

.agenda-item:first-child .agenda-item__delete {
  top: 0;
}

/* Past occurrence: a quiet card (♿ no opacity, no blur). */
.agenda-item--past {
  margin-block: 7px;
  padding: 13px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-13);
  background-color: var(--surface-soft);
}

.agenda-item--past:first-child {
  padding-top: 13px;
}

.agenda-item--past .agenda-item__time,
.agenda-item--past .agenda-item__title {
  color: var(--text-muted);
}

.agenda-item--past .agenda-item__open {
  --btn-bg: var(--surface-raised);
  --btn-bg-hover: var(--hover-bg);
  --btn-fg: var(--text-muted);
  --btn-fg-hover: var(--text);
  --btn-border: var(--border);
  --btn-bw: 1px;
}

.agenda-item--past .agenda-item__share {
  --btn-fg: var(--text-muted);
}

.agenda-item--past .agenda-item__delete,
.agenda-item--past:first-child .agenda-item__delete {
  top: 10px;
  right: 8px;
}

/* New item flash and removal (agenda motion, DESIGN_SYSTEM §8.11). */
.agenda-item.is-new {
  animation: sz-agenda-new 1500ms var(--ease-out);
}

.agenda-item.is-leaving {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}

.agenda-list.is-entering {
  animation: sz-agenda-in 300ms var(--ease-glide);
}

/* «Уже прошли» divider with a line after it. */
.agenda-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 23px 0 12px;
  color: var(--text-muted);
  font-size: var(--fs-10);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

.agenda-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-strong);
  opacity: 0.35;
}

/* =========================================================================
   Badges, pills, chips, dots — DESIGN_SYSTEM §8.19
   ========================================================================= */

.badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-8);
  background-color: var(--neutral-bg);
  color: var(--neutral-text);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

.badge .icon {
  width: 13px;
  height: 13px;
}

.badge--neutral {
  background-color: var(--neutral-bg);
  color: var(--neutral-text);
}

/* Status chip in the accent («Идёт сейчас»): accent fill, white 10 / 600, radius 6. */
.badge--accent {
  min-height: 0;
  padding: 2px 6px;
  border-radius: var(--r-6);
  background-color: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--fs-10);
}

/* Count chip («5 встреч»): transparent, 1 px border, accent ink, 10 px tabular. */
.badge--ink {
  min-height: 0;
  padding: 4px 8px;
  border-color: var(--border);
  background-color: transparent;
  color: var(--accent-text);
  font-size: var(--fs-10);
  font-weight: var(--fw-regular);
}

.badge--success {
  background-color: var(--success-soft);
  color: var(--success);
}

.badge--danger {
  background-color: var(--danger-soft-solid);
  color: var(--danger-text);
}

.badge--warning {
  background-color: var(--warning-soft);
  color: var(--warning);
}

/* «ДЕМО»-style outline label: uppercase 10 / 600 +0.08em. */
.badge--outline {
  border-color: var(--border-strong);
  background-color: transparent;
  color: var(--text-muted);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.badge--sm {
  min-height: 0;
  padding: 2px 6px;
  font-size: var(--fs-10);
}

/* Counter: 18 high, accent fill, white 10 / 600 tabular. */
.badge--count {
  justify-content: center;
  min-width: 18px;
  min-height: 0;
  height: 18px;
  padding: 0 5px;
  border: 0;
  border-radius: 9px;
  background-color: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
}

/* Rounded labels: default (muted), overlay (over video), hand (raised hand), accent (plan). */
.pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background-color: var(--surface-soft);
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.pill .icon {
  width: 13px;
  height: 13px;
}

.pill--overlay {
  background-color: var(--c-overlay);
  color: #FFFFFF;
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
}

.pill--hand {
  background-color: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
}

.pill--hand .icon {
  width: 12px;
  height: 12px;
}

.pill--accent {
  padding: 4px 10px;
  background-color: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.pill--danger {
  background-color: var(--danger-soft-solid);
  color: var(--danger-text);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* Rectangular status chip (call header timer / recording): 36 high (--sm 32). */
.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-10);
  background-color: var(--surface-soft);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
}

.chip--sm {
  gap: 6px;
  height: 32px;
  padding: 0 10px;
}

.dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.dot--sm {
  width: 6px;
  height: 6px;
}

.dot--xs {
  width: 4px;
  height: 4px;
}

.dot--rec {
  background-color: var(--c-rec);
}

.dot--live {
  background-color: var(--success);
}

.dot--danger {
  background-color: var(--danger);
}

.dot--accent {
  background-color: var(--accent);
}

.dot--ink {
  background-color: var(--accent-text);
}

/* 2 px ring in the surface colour (bell dot: 8 px total). */
.dot--ring {
  box-sizing: content-box;
  border: 2px solid var(--dot-ring, var(--surface-raised));
}

.dot--pulse {
  animation: sz-pulse 1.6s ease-in-out infinite;
}

/* =========================================================================
   Video overlays: name labels, tile badges, speaking bars — §4.10
   ========================================================================= */

.video-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--r-8);
  background-color: var(--c-overlay);
  color: #FFFFFF;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.video-label > .icon {
  width: 14px;
  height: 14px;
}

.video-label__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small tiles (< 240 px): 4 × 8, 11 px. */
.video-label--sm {
  gap: 6px;
  padding: 4px 8px;
  font-size: var(--fs-11);
}

.video-label--lg {
  padding: 6px 12px;
}

.video-label--xs {
  gap: 4px;
  padding: 3px 7px;
  border-radius: var(--r-6);
  font-size: var(--fs-11);
}

.video-label--muted {
  color: #D3DEF0;
}

/* Icon-only badges on tiles: 28 × 28, radius 8, icon 16. */
.icon-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-8);
  background-color: var(--c-overlay);
  color: #FFFFFF;
  line-height: 1;
}

.icon-badge .icon {
  width: 16px;
  height: 16px;
}

.icon-badge--danger {
  background-color: var(--c-danger);
  color: #FFFFFF;
}

.icon-badge--neutral {
  background-color: var(--c-overlay);
  color: #FFFFFF;
}

.icon-badge--accent {
  background-color: var(--accent);
  color: var(--accent-contrast);
}

.icon-badge--sm {
  width: 24px;
  height: 24px;
}

.icon-badge--sm .icon {
  width: 14px;
  height: 14px;
}

/* Speaking bars: icon('speaking', { className: 'speaking-bars' }) — they take the label's colour. */
.speaking-bars {
  color: var(--speaking-bars, currentColor);
}

.speaking-bars--live path {
  transform-box: fill-box;
  transform-origin: center;
  animation: sz-bars 0.9s ease-in-out infinite;
}

.speaking-bars--live path:nth-child(2) {
  animation-delay: -0.3s;
}

.speaking-bars--live path:nth-child(3) {
  animation-delay: -0.6s;
}

/* =========================================================================
   Avatars — soft tints (DESIGN_SYSTEM §8.18, SCREENS §4.9). avatarEl() sets --avatar-bg and
   --avatar-ink from the person's colour; the three profile tones use their exact pairs.
   ========================================================================= */

.avatar {
  --avatar-size: 32px;
  --avatar-fs: 12px;
  --avatar-fw: var(--fw-semibold);
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--avatar-bg, var(--tone-sky-bg));
  color: var(--avatar-ink, var(--tone-sky));
  font-size: var(--avatar-fs);
  font-weight: var(--avatar-fw);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  user-select: none;
}

/* Legacy code that paints a saturated colour inline keeps white initials. */
.avatar[style*="background-color"] {
  color: #FFFFFF;
}

/* Sizes (font ≈ 40 %). */
.avatar--24 { --avatar-size: 24px; --avatar-fs: 10px; }
.avatar--xs,
.avatar--28 { --avatar-size: 28px; --avatar-fs: 11px; }
.avatar--30 { --avatar-size: 30px; --avatar-fs: 11px; }
.avatar--31 { --avatar-size: 31px; --avatar-fs: 12px; }
.avatar--sm,
.avatar--32 { --avatar-size: 32px; --avatar-fs: 12px; }
.avatar--md,
.avatar--36 { --avatar-size: 36px; --avatar-fs: 13px; }
.avatar--40 { --avatar-size: 40px; --avatar-fs: 15px; }
.avatar--48 { --avatar-size: 48px; --avatar-fs: 18px; }
.avatar--lg,
.avatar--64 { --avatar-size: 64px; --avatar-fs: 24px; --avatar-fw: var(--fw-medium); }
.avatar--66 { --avatar-size: 66px; --avatar-fs: 26px; --avatar-fw: var(--fw-medium); }
.avatar--72 { --avatar-size: 72px; --avatar-fs: 29px; --avatar-fw: var(--fw-medium); }
.avatar--76 { --avatar-size: 76px; --avatar-fs: 30px; --avatar-fw: var(--fw-medium); }
.avatar--86 { --avatar-size: 86px; --avatar-fs: 34px; --avatar-fw: var(--fw-medium); }
.avatar--96 { --avatar-size: 96px; --avatar-fs: 38px; --avatar-fw: var(--fw-medium); }
.avatar--100 { --avatar-size: 100px; --avatar-fs: 38.4px; --avatar-fw: var(--fw-medium); }
.avatar--xl,
.avatar--112 { --avatar-size: 112px; --avatar-fs: 42px; --avatar-fw: var(--fw-medium); }
.avatar--120 { --avatar-size: 120px; --avatar-fs: 44px; --avatar-fw: var(--fw-medium); }

/* Static tints for HTML without JS (same order as js/shared/avatar.js AVATAR_COLORS). */
.avatar--blue { --avatar-bg: #E4E8FA; --avatar-ink: #3551BD; }
.avatar--orange { --avatar-bg: #F6E4DD; --avatar-ink: #A13D17; }
.avatar--violet { --avatar-bg: #EBE1FA; --avatar-ink: #5D29BB; }
.avatar--green { --avatar-bg: #DEEDE4; --avatar-ink: #166F3E; }
.avatar--magenta { --avatar-bg: #F1DFE6; --avatar-ink: #831B4B; }
.avatar--teal { --avatar-bg: #DDECEB; --avatar-ink: #126765; }
.avatar--amber { --avatar-bg: #F5E7DD; --avatar-ink: #964B15; }
.avatar--cyan { --avatar-bg: #DDECEF; --avatar-ink: #116581; }
.avatar--rose { --avatar-bg: #F6DEE4; --avatar-ink: #9E173D; }
.avatar--lime { --avatar-bg: #E6EDDD; --avatar-ink: #436C19; }
/* Profile tones «Небо», «Мята», «Сирень». */
.avatar--sky { --avatar-bg: var(--tone-sky-bg); --avatar-ink: var(--tone-sky); }
.avatar--mint { --avatar-bg: var(--tone-mint-bg); --avatar-ink: var(--tone-mint); }
.avatar--lilac { --avatar-bg: var(--tone-lilac-bg); --avatar-ink: var(--tone-lilac); }

/* Soft rings around big avatars on illustration surfaces. */
.avatar--halo {
  overflow: visible;
  box-shadow: 0 0 0 10px #ffffff40, 0 0 0 11px #ffffff50;
}

/* No name yet: a user glyph on the soft accent. */
.avatar--blank {
  --avatar-bg: var(--surface-accent);
  --avatar-ink: var(--accent-text);
}

/* "+N" in a stack. */
.avatar--more {
  --avatar-bg: var(--surface-soft);
  --avatar-ink: var(--text-muted);
}

/* Phone participant chips: 40 × 40, radius 12, over video. */
.avatar--chip {
  --avatar-size: 40px;
  --avatar-fs: 12px;
  border-radius: var(--r-12);
  background-color: var(--c-overlay);
  color: #FFFFFF;
}

.avatar-stack {
  display: inline-flex;
  flex: none;
  align-items: center;
}

.avatar-stack > .avatar {
  box-shadow: 0 0 0 2px var(--avatar-ring);
}

.avatar-stack > .avatar + .avatar {
  margin-left: -8px;
}

/* =========================================================================
   Progress, spinner, skeleton, empty state
   ========================================================================= */

.progress {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--surface-soft);
  color: var(--accent);
  appearance: none;
}

.progress__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: currentColor;
  transition: width var(--dur-slow) ease;
}

.progress--danger {
  color: var(--danger);
}

progress.progress::-webkit-progress-bar {
  background-color: var(--surface-soft);
}

progress.progress::-webkit-progress-value {
  border-radius: var(--r-pill);
  background-color: currentColor;
}

progress.progress::-moz-progress-bar {
  border-radius: var(--r-pill);
  background-color: currentColor;
}

.progress--indeterminate .progress__bar {
  width: 40%;
  animation: sz-indeterminate 1.2s var(--ease-in-out) infinite;
}

/* Ring in currentColor with a 25 % track. */
.spinner {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  animation: sz-spin 0.7s linear infinite;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .spinner {
    border-color: color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
  }
}

.spinner--sm {
  width: 16px;
  height: 16px;
}

.spinner--lg {
  width: 28px;
  height: 28px;
  border-width: 2.5px;
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .btn[aria-busy="true"]::after {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}

.skeleton {
  display: block;
  width: 100%;
  height: 16px;
  border-radius: var(--r-8);
  background-color: var(--skeleton-bg);
  animation: sz-skeleton 1.2s ease-in-out infinite;
}

.skeleton--text {
  height: 12px;
  border-radius: var(--r-6);
}

.skeleton--title {
  height: 18px;
  border-radius: var(--r-6);
}

.skeleton--circle {
  border-radius: 50%;
}

.skeleton--card {
  border-radius: var(--r-24);
}

/* Empty state (§8.11): a bare 43 px stroke icon in the accent ink, 16.8 / 500 title, 13 px text. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
  text-align: center;
}

.empty-state--start {
  align-items: flex-start;
  text-align: start;
}

.empty-state--compact {
  padding: 24px 16px;
}

.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 23px;
  color: var(--accent-text);
}

.empty-state__icon .icon {
  width: 43px;
  height: 43px;
}

.empty-state--compact .empty-state__icon {
  margin-bottom: 14px;
}

.empty-state--compact .empty-state__icon .icon {
  width: 32px;
  height: 32px;
}

.empty-state--danger .empty-state__icon {
  color: var(--danger-text);
}

.empty-state__title {
  max-width: 19ch;
  color: var(--text);
  font-size: 16.8px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

.empty-state--wide .empty-state__title {
  max-width: 32ch;
}

.empty-state__text {
  max-width: 40ch;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: var(--fs-13);
  line-height: 1.65;
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.empty-state--start .empty-state__actions {
  justify-content: flex-start;
}

/* =========================================================================
   Navigation: list items, underlined tabs, number tabs
   ========================================================================= */

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-12);
  color: var(--text-muted);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.nav-item .icon {
  width: 20px;
  height: 20px;
}

.nav-item:hover {
  background-color: var(--hover-bg);
  color: var(--text);
}

.nav-item[aria-current="page"],
.nav-item.is-active {
  background-color: var(--surface-accent);
  color: var(--accent-text);
}

.nav-item__end {
  margin-left: auto;
}

/* Underlined tabs with a sliding indicator (DESIGN_SYSTEM §8.5.1). bindTabs() adds the
   .tabs__indicator and .tabs--sliding; without a script the selected tab is underlined itself. */
.tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--border);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs--flush {
  padding: 0;
}

/* Centred two-tab switch of the hero card: 270 wide, equal columns. */
.tabs--center {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  width: min(100%, 270px);
  margin-inline: auto;
}

/* Equal-width tabs across the container (call side panel, view switch). */
.tabs--block {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  width: 100%;
}

.tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 10px 8px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.tabs:not(.tabs--center, .tabs--block) .tab {
  padding-inline: 12px;
}

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

.tab[aria-selected="true"],
.tab[aria-current="page"],
.tab[aria-pressed="true"] {
  border-bottom-color: var(--tab-indicator);
  color: var(--accent-text);
}

.tabs--sliding .tab {
  border-bottom-color: transparent;
}

.tab:focus-visible {
  border-radius: var(--r-8);
  outline-width: 2px;
  outline-offset: -2px;
}

.tabs__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--tab-w, 0px);
  height: 2px;
  border-radius: 2px;
  background: var(--tab-indicator);
  transform: translateX(var(--tab-x, 0px));
  pointer-events: none;
}

.tabs--sliding.is-ready .tabs__indicator {
  transition: transform var(--dur-switch) var(--ease-out), width var(--dur-switch) var(--ease-out);
}

.tabs__end {
  margin-left: auto;
}

/* A tab panel that slides in from the side of the newly selected tab (dom.js animatePanel()). */
@media (max-width: 360px) {
  .tab {
    font-size: var(--fs-12);
  }

  .tabs--center .tab,
  .tabs--block .tab {
    padding-inline: 4px;
  }
}

/* Number tabs («01 По делу…», DESIGN_SYSTEM §8.5.3): one accent marker travels between slots. */
.num-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 330px;
}

.num-tabs__tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 64px;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 18.4px;
  font-weight: var(--fw-book);
  line-height: 1.5;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.num-tabs__tab:last-of-type {
  border-bottom: 0;
}

.num-tabs__tab:hover {
  color: var(--accent-text);
}

.num-tabs__tab[aria-selected="true"] {
  color: var(--text);
}

.num-tabs__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--text-muted);
  font-size: var(--fs-10);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease);
}

.num-tabs__tab[aria-selected="true"] .num-tabs__num {
  color: var(--accent-contrast);
}

.num-tabs__marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translate(var(--marker-x, 0px), var(--marker-y, 0px));
  pointer-events: none;
}

.num-tabs.is-ready .num-tabs__marker {
  opacity: 1;
}

.num-tabs.is-animated .num-tabs__marker {
  transition: transform 480ms var(--ease-glide);
}

/* Without a script: the selected number gets the circle itself. */
.num-tabs:not(.is-ready) .num-tabs__tab[aria-selected="true"] .num-tabs__num {
  border-radius: 50%;
  background: var(--accent);
}

.num-tabs[aria-orientation="horizontal"] {
  flex-direction: row;
  gap: clamp(9px, 2.5vw, 18px);
  max-width: none;
  box-shadow: inset 0 -1px 0 var(--border);
}

.num-tabs[aria-orientation="horizontal"] .num-tabs__tab {
  gap: 5px;
  min-height: 45px;
  padding: 10px 0 14px;
  border-bottom: 0;
  font-size: var(--fs-13);
}

.num-tabs[aria-orientation="horizontal"] .num-tabs__num,
.num-tabs[aria-orientation="horizontal"] .num-tabs__marker {
  width: 20px;
  height: 20px;
}

@media (max-width: 360px) {
  .num-tabs[aria-orientation="horizontal"] {
    gap: 9px;
  }

  .num-tabs[aria-orientation="horizontal"] .num-tabs__tab {
    font-size: var(--fs-12);
  }
}

/* =========================================================================
   Header pieces (DESIGN_SYSTEM §8.1, SCREENS §3.2–3.3; js/lib/header.js)
   ========================================================================= */

/* 68 px bar (62 ≤ 760) in the page width: brand left, «Мои встречи» centre, actions right. */
.header-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--container-max);
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.header-bar__start {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
}

.header-bar__center {
  display: flex;
  align-items: center;
  justify-self: center;
  min-width: 0;
}

.header-bar__end {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 14px;
  min-width: 0;
}

/* Brand and actions keep the first row's two ends, also when the centre (the cabinet switcher)
   moves to a second row below 760 px — auto-placement would put the actions in the middle column. */
.header-bar > .header-bar__start {
  grid-column: 1;
  grid-row: 1;
}

.header-bar > .header-bar__end {
  grid-column: 3;
  grid-row: 1;
}

@media (max-width: 1050px) {
  .header-bar {
    gap: 12px;
  }

  .header-bar__end {
    gap: 9px;
  }
}

@media (max-width: 760px) {
  .header-bar__end {
    gap: 7px;
  }
}

@media (max-width: 360px) {
  .header-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
  }

  .header-bar__end {
    gap: 4px;
  }
}

/* Touch screens (DESIGN_SYSTEM §12.3): the brand link (drawn 24–31 px high; in the footer too)
   gets a centred target at least 44×44: 44 high and as wide as the link, 44 wide when only the
   31 px mark shows (the cabinet header at 761–960). At ≤ 360 the actions keep 9 px apart: the theme
   toggle is drawn 28 wide, so its centred 44 px target takes 8 px on each side and meets its
   neighbours' targets (a glass pill's reaches 1 px out, the profile chip's starts at the chip)
   without covering them. */
@media (pointer: coarse) {
  :is(.header-bar__start, .page-footer) a.logo {
    position: relative;
  }

  :is(.header-bar__start, .page-footer) a.logo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

@media (pointer: coarse) and (max-width: 360px) {
  .header-bar__end {
    gap: 9px;
  }
}

/* «Мои встречи» chip: 38 high, surface, 1 px border, radius 12, tile 26 with the calendar. */
.header-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  background: var(--surface-raised);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), scale var(--dur-fast) ease-out;
}

.header-chip:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.header-chip[aria-current="page"] {
  border-color: var(--surface-accent);
  background: var(--surface-accent);
  color: var(--accent-text);
}

.header-chip__tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-8);
  background: var(--surface-accent);
  color: var(--accent-text);
}

.header-chip__tile .icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 760px) {
  .header-chip {
    gap: 6px;
    min-height: 35px;
    padding: 4px 7px 4px 4px;
    font-size: var(--fs-11);
  }

  .header-chip__tile {
    width: 22px;
    height: 22px;
    border-radius: var(--r-7);
  }

  .header-chip__tile .icon {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 360px) {
  .header-chip {
    gap: 4px;
    min-height: 33px;
    padding-inline: 4px;
  }

  .header-chip__tile {
    width: 20px;
    height: 20px;
  }
}

/* Theme toggle: 34 round, muted; moon in the light theme, sun in the dark one. */
.theme-toggle {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), scale var(--dur-fast) ease-out;
}

.theme-toggle:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.theme-toggle .icon {
  width: 18px;
  height: 18px;
}

.theme-toggle .icon--sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon--moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon--sun {
  display: inline-block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon--moon {
    display: none;
  }

  :root:not([data-theme]) .theme-toggle .icon--sun {
    display: inline-block;
  }
}

@media (max-width: 360px) {
  .theme-toggle {
    width: 28px;
  }
}

/* Profile chip: avatar 31 + «Профиль» (the word is visually hidden ≤ 760). The word ends at the
   content edge (padding-right 0, SCREENS §3.2). */
.profile-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 41px;
  padding: 5px 0 5px 5px;
  border-radius: var(--r-12);
  isolation: isolate;
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), scale var(--dur-fast) ease-out;
}

.profile-chip:hover {
  background: var(--hover-bg);
  color: var(--text);
}

/* The hover fill reaches 10 px past the word, so it looks even on both sides (DESIGN_SYSTEM §8.1).
   The word draws that strip itself (positioned on the chip), so the strip goes away whenever the
   word is visually hidden. */
.profile-chip__label::after {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  z-index: -1;
  width: 22px;
  border-radius: 0 var(--r-12) var(--r-12) 0;
  transition: background-color var(--dur-fast) var(--ease);
}

.profile-chip:hover .profile-chip__label::after {
  background: var(--hover-bg);
}

.profile-chip[aria-current="page"] {
  color: var(--accent-text);
}

.profile-chip > .avatar {
  --avatar-size: 31px;
  --avatar-fs: 12px;
}

.profile-chip__glyph {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--accent-text);
}

.profile-chip__glyph .icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 760px) {
  .profile-chip {
    gap: 0;
    padding: 4px;
  }

  .profile-chip__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .profile-chip > .avatar,
  .profile-chip__glyph {
    --avatar-size: 28px;
    width: 28px;
    height: 28px;
  }
}

/* Slim header link («На главную»). */
.header-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.header-link:hover {
  color: var(--accent-text);
}

/* Cabinet section switcher: the «Мои встречи» chip grown into a group of four links. */
.header-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-14);
  background: var(--surface-raised);
}

.header-switcher__link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 12px 5px 6px;
  border-radius: var(--r-11);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), scale var(--dur-fast) ease-out;
}

.header-switcher__link:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.header-switcher__link[aria-current="page"] {
  background: var(--surface-accent);
  color: var(--accent-text);
}

.header-switcher__tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-8);
  background: var(--surface-soft);
  color: var(--text-muted);
}

.header-switcher__link[aria-current="page"] .header-switcher__tile {
  background: var(--surface-raised);
  color: var(--accent-text);
}

.header-switcher__tile .icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 960px) and (min-width: 761px) {
  .header-bar--cabinet .logo__text {
    display: none;
  }
}

/* ≤ 760: the switcher moves to a second row under the header and scrolls sideways. */
@media (max-width: 760px) {
  .header-bar > .header-switcher,
  .header-bar__center:has(> .header-switcher) {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    min-width: 0;
  }

  .header-bar .header-switcher {
    margin-bottom: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .header-bar__center > .header-switcher {
    width: 100%;
  }

  .header-bar .header-switcher::-webkit-scrollbar {
    display: none;
  }

  /* The scrolling row clips whatever lies outside it: the focus ring goes inside the link. */
  .header-bar .header-switcher__link:focus-visible {
    outline-offset: -3px;
  }

  .header-switcher__tile {
    width: 22px;
    height: 22px;
    border-radius: var(--r-7);
  }
}

/* Touch screens (DESIGN_SYSTEM §12.3): 44 px section links. In the header row a target around
   each 36 px link reaches the group's edge without moving anything; the phone row scrolls and
   would clip such a target, so there the links grow to 44 px (the row gets 8 px taller). */
@media (pointer: coarse) and (min-width: 761px) {
  .header-switcher__link {
    position: relative;
  }

  .header-switcher__link::before {
    content: '';
    position: absolute;
    inset: -4px 0;
  }
}

@media (pointer: coarse) and (max-width: 760px) {
  .header-switcher__link {
    min-height: 44px;
  }
}

/* =========================================================================
   Footer (DESIGN_SYSTEM §8.2, SCREENS §3.5)
   ========================================================================= */

.page-footer {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 30px var(--gutter) 22px;
  font-size: var(--fs-13);
}

.page-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.page-footer__tagline {
  margin-top: 9px;
  color: var(--text-muted);
  font-size: var(--fs-13);
  line-height: 1.5;
}

.page-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}

.page-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color 160ms ease;
}

.page-footer__link:hover {
  color: var(--accent-text);
}

.page-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 26px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-12);
  line-height: 1.6;
}

.page-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.page-footer__legal a {
  color: var(--text-muted);
}

.page-footer__legal a:hover {
  color: var(--accent-text);
}

@media (max-width: 760px) {
  .page-footer {
    padding: 27px var(--gutter) 24px;
  }

  .page-footer__row {
    display: block;
  }

  .page-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    margin-top: 23px;
  }

  .page-footer__link {
    min-height: 34px;
  }

  .page-footer__base {
    display: block;
    margin-top: 22px;
  }

  .page-footer__base > * {
    max-width: 32ch;
  }

  .page-footer__legal {
    margin-top: 8px;
  }
}

/* Touch screens (DESIGN_SYSTEM §12.3): the links keep their look and get a centred target of at
   least 44 × 44 (a short word like «Войти» reaches a few px into the 28 px gap of its row); lines
   of links are 44 px apart, so neighbouring targets meet without covering each other (the nav
   links 36 high + 8, the legal links one line + the rest). */
@media (pointer: coarse) {
  .page-footer__link,
  .page-footer__legal a {
    position: relative;
  }

  .page-footer__link::before,
  .page-footer__legal a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  .page-footer__link {
    min-height: 36px;
  }

  .page-footer__nav {
    row-gap: 8px;
  }

  .page-footer__legal {
    row-gap: 25px;
    row-gap: calc(44px - 1lh);
  }
}

/* =========================================================================
   Call controls and device toggles (DESIGN_SYSTEM §8.20, SCREENS §8.5)
   ========================================================================= */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.control {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 64px;
}

/* 48 × 48, radius 16, surface + border; on = soft accent, off = soft danger + crossed icon,
   screen share = accent fill, leave = danger fill. */
.control__btn {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  background-color: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    scale var(--dur-fast) ease-out;
}

.control__btn .icon {
  width: 20px;
  height: 20px;
}

.control__btn:hover {
  border-color: var(--accent);
}

.control__btn[aria-pressed="true"],
.control__btn--active,
.control__btn[aria-expanded="true"] {
  border-color: var(--surface-accent);
  background-color: var(--surface-accent);
  color: var(--accent-text);
}

.control__btn.control__btn--off,
.control__btn--off[aria-pressed] {
  border-color: transparent;
  background-color: var(--danger-soft-solid);
  color: var(--danger-text);
}

.control__btn.control__btn--off:hover {
  border-color: var(--danger-text);
}

.control__btn.control__btn--danger {
  border-color: var(--danger);
  background-color: var(--danger);
  color: #FFFFFF;
}

.control__btn.control__btn--danger:hover {
  border-color: var(--danger-hover);
  background-color: var(--danger-hover);
}

.control__btn.control__btn--accent {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--accent-contrast);
}

.control__btn.control__btn--accent:hover {
  border-color: var(--accent-hover);
  background-color: var(--accent-hover);
}

.control__btn:disabled,
.control__btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.control__btn:disabled:hover {
  border-color: var(--border);
}

.control__label {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control__badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* Phone bottom bar: 52 × 52, radius 16. */
.control--round {
  gap: 6px;
  width: auto;
}

.control--round .control__btn {
  width: 52px;
  height: 52px;
  border-radius: var(--r-16);
}

.control--round .control__badge {
  top: -4px;
  right: -4px;
}

/* Device toggle (lobby, «Проверка связи»): 48 × 48, radius 16. Use the plain mic / camera icon:
   aria-pressed="false" draws the slash across it. */
.device-toggle {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    scale var(--dur-fast) ease-out;
}

.device-toggle .icon {
  width: 20px;
  height: 20px;
}

.device-toggle:hover {
  border-color: var(--accent);
}

.device-toggle[aria-pressed="true"] {
  border-color: var(--border);
  background: var(--surface-accent);
  color: var(--accent-text);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  /* A tinted rim keeps an "on" button visible on the soft accent preview. */
  .device-toggle[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--surface-accent));
  }
}

.device-toggle[aria-pressed="false"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 0 1.5px var(--surface-raised);
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

.device-toggle:disabled {
  opacity: 0.5;
  cursor: progress;
}

.device-toggles {
  display: flex;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 650px) {
  .device-toggle {
    width: 45px;
    height: 45px;
    border-radius: var(--r-14);
  }
}

/* =========================================================================
   Overlays: menu, popover, pickers, month calendar, modal, toast, notice, tooltip
   ========================================================================= */

/* Open menus and popovers sit above toasts (--z-popup > --z-toast). */
.menu {
  position: fixed;
  z-index: var(--z-popup);
  min-width: 220px;
  max-width: min(340px, calc(100vw - 16px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-14);
  background-color: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
  font-size: var(--fs-14);
  animation: sz-picker-in var(--dur-popover) var(--ease-out);
}

.menu[data-placement="top"],
.popover[data-placement="top"] {
  animation-name: sz-picker-in-top;
}

.menu:focus {
  outline: none;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-10);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu__item > .icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.menu__item:hover,
.menu__item:focus {
  background-color: var(--hover-bg);
  outline: none;
}

.menu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.menu__item--danger,
.menu__item--danger > .icon {
  color: var(--danger-text);
}

.menu__item--danger:not([aria-disabled="true"]):is(:hover, :focus) {
  background-color: var(--danger-soft);
}

.menu__item[aria-disabled="true"] {
  color: var(--text-muted);
  cursor: not-allowed;
}

.menu__item[aria-disabled="true"] > .icon {
  opacity: 0.6;
}

.menu__label {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menu__hint {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
}

.menu__check {
  display: inline-flex;
  flex: none;
  margin-left: auto;
  color: var(--accent-text);
}

.menu__item[aria-checked="false"] .menu__check {
  visibility: hidden;
}

.menu__shortcut {
  flex: none;
  margin-left: auto;
}

.menu__divider {
  height: 1px;
  margin: 4px -6px;
  background-color: var(--border);
}

.menu__heading {
  padding: 8px 12px 4px;
  color: var(--text-muted);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* Popover: radius 18, padding 16, 1 px border, popover shadow. */
.popover {
  position: fixed;
  z-index: var(--z-popup);
  max-width: min(380px, calc(100vw - 16px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-18);
  background-color: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
  animation: sz-picker-in var(--dur-popover) var(--ease-out);
}

.popover:focus {
  outline: none;
}

.popover--flush {
  padding: 0;
}

.popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}

.popover__title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-ui);
  line-height: 1.4;
}

/* 32 round close on the subtle fill (pickers, notifications). */
.popover__close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.popover__close:hover {
  background: var(--control-bg-active);
  color: var(--text);
}

.popover__close .icon {
  width: 16px;
  height: 16px;
}

/* -- Date and time pickers (DESIGN_SYSTEM §8.14–8.15) -- */
.picker {
  width: min(320px, calc(100vw - 24px));
  max-width: none;
}

.picker--time {
  width: min(300px, calc(100vw - 24px));
  padding: 14px;
  animation-duration: var(--dur);
}

.picker--time .popover__header {
  margin-bottom: 10px;
}

.picker--time .popover__title {
  font-size: var(--fs-15);
}

.time-wheels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.time-wheels__caption {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: var(--fs-11);
  text-align: center;
}

.time-colon {
  padding-top: 20px;
  color: var(--text-muted);
  font-size: 22.4px;
  line-height: 1;
  text-align: center;
}

.time-wheel {
  position: relative;
  height: 110px;
  padding: 35px 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-14);
  background: var(--surface-soft);
  scrollbar-width: none;
  touch-action: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.time-wheel::-webkit-scrollbar {
  display: none;
}

.picker--tall .time-wheel {
  height: 166px;
  padding-block: 62px;
}

.time-wheel__item {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-10);
  background: transparent;
  color: var(--text-muted);
  font-size: 17.6px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  cursor: pointer;
}

.time-wheel__item:hover {
  color: var(--text);
}

.time-wheel__item[aria-checked="true"] {
  background: var(--surface-accent);
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
}

.time-wheel__item:focus-visible {
  outline-width: 2px;
  outline-offset: -2px;
}

/* Touch screens: the items are radios, 44 high (DESIGN_SYSTEM §12.3), and the wheel shows three
   of them whole, the checked one in the middle (the tall wheel five), so every item in sight is
   a whole 44 px target. timepicker.js centres by the items' measured size. */
@media (pointer: coarse) {
  .time-wheel {
    height: 132px;
    padding-block: 44px;
  }

  .picker--tall .time-wheel {
    height: 220px;
    padding-block: 88px;
  }

  .time-wheel__item {
    height: 44px;
  }
}

.time-presets {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-block: 10px;
}

.time-presets .btn {
  --btn-h: 28px;
  --btn-fs: var(--fs-11);
  --btn-fw: var(--fw-regular);
}

.time-picker__done {
  position: sticky;
  bottom: 0;
  --btn-h: 40px;
  --btn-radius: var(--r-12);
  --btn-fs: var(--fs-13);
}

/* Touch screens: «Выбрать время» is drawn 44 high, a whole 44 px target (SPEC §4.3); it sits
   after the base rule so it wins. timepicker.js measures the button, so nothing else changes. */
@media (pointer: coarse) {
  .time-picker__done {
    --btn-h: 44px;
  }
}

/* -- Month calendar (DESIGN_SYSTEM §8.13; js/lib/calendar.js) -- */
.month-calendar {
  min-width: 0;
}

.month-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 22px;
}

.month-title {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-22);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-dialog);
  line-height: 1.3;
}

.month-nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
}

.month-today {
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-10);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  cursor: pointer;
  transition: background-color var(--dur) ease, color var(--dur) ease, scale var(--dur-fast) ease-out;
}

.month-arrow {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-10);
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--dur) ease, color var(--dur) ease, scale var(--dur-fast) ease-out;
}

.month-arrow .icon {
  width: 17px;
  height: 17px;
}

.month-arrow--prev .icon {
  transform: rotate(180deg);
}

.month-arrow:not(:disabled):hover,
.month-today:not(:disabled):hover {
  background: var(--surface-accent);
  color: var(--accent-text);
}

.month-arrow:disabled,
.month-today:disabled {
  opacity: 0.35;
  cursor: default;
}

.month-arrow:focus-visible,
.month-today:focus-visible {
  outline-offset: 2px;
}

.month-stage {
  position: relative;
  display: grid;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

.month-stage > .month-grid {
  grid-area: 1 / 1;
  min-width: 0;
}

.month-ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.month-grid {
  display: grid;
  gap: 5px;
}

.month-weekdays,
.month-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.month-weekdays {
  margin-bottom: 5px;
}

.month-weekdays > span {
  padding: 8px 0;
  color: var(--text-muted);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-align: center;
}

.month-cell {
  min-width: 0;
}

.month-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 66px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-13);
  background: transparent;
  color: var(--text);
  text-align: start;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, scale var(--dur-fast) ease-out;
}

.month-day-number {
  display: grid;
  flex: none;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: var(--r-9);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.month-day-events {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding-left: 3px;
  color: var(--text-muted);
  font-size: var(--fs-10);
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-day:not(:disabled):hover {
  background: var(--hover-bg);
}

.month-day:focus-visible {
  outline-width: 2px;
  outline-offset: -2px;
}

.month-day.outside-month .month-day-number {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

.month-day.is-past-day .month-day-number {
  color: var(--past-day);
  font-weight: var(--fw-regular);
}

.month-day.is-past-day .month-day-events {
  opacity: 0.7;
}

.month-day.is-today .month-day-number {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent-text);
}

.month-day.is-selected,
.month-day.is-selected:not(:disabled):hover {
  border-color: var(--surface-accent);
  background: var(--surface-accent);
}

.month-day.is-selected .month-day-number {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: none;
  font-weight: var(--fw-medium);
}

.month-day.is-selected.is-past-day,
.month-day.is-selected.is-past-day:not(:disabled):hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

.month-day.is-selected.is-past-day .month-day-number {
  background: var(--border);
  color: var(--text);
}

.month-day:disabled {
  opacity: 0.35;
  cursor: default;
}

.month-day.is-pulse {
  animation: sz-day-pulse 1500ms ease-out;
}

.month-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 19px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-10);
  line-height: 1.5;
}

.month-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.month-legend__today {
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent);
  border-radius: 50%;
}

.month-legend__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* Modal board: 58 high cells, padding 5; toolbar 14 below. */
.month-calendar--modal .month-toolbar {
  margin-bottom: 14px;
}

.month-calendar--modal .month-day {
  min-height: 58px;
  padding: 5px;
}

.month-calendar--modal .month-legend {
  margin-top: 12px;
  padding-top: 12px;
}

/* Compact (date picker). */
.month-calendar.is-compact .month-toolbar {
  gap: 8px;
  margin-bottom: 10px;
}

.month-calendar.is-compact .month-title {
  font-size: var(--fs-15);
  letter-spacing: -0.015em;
}

.month-calendar.is-compact .month-nav {
  gap: 3px;
}

.month-calendar.is-compact .month-today {
  min-height: 30px;
  padding: 6px 7px;
  font-size: var(--fs-10);
}

.month-calendar.is-compact .month-arrow {
  width: 28px;
  height: 30px;
  border: 0;
  border-radius: var(--r-8);
  background: transparent;
}

.month-calendar.is-compact .month-grid,
.month-calendar.is-compact .month-weekdays,
.month-calendar.is-compact .month-week {
  gap: 3px;
}

.month-calendar.is-compact .month-weekdays > span {
  padding-block: 5px;
  font-size: var(--fs-10);
}

.month-calendar.is-compact .month-day {
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 2px 3px;
  border-radius: var(--r-10);
}

.month-calendar.is-compact .month-day-number {
  width: 28px;
  height: 28px;
  font-size: var(--fs-13);
}

@media (max-width: 1100px) {
  .month-calendar:not(.is-compact) .month-title {
    font-size: 19.2px;
  }

  .month-calendar:not(.is-compact) .month-nav {
    gap: 4px;
  }

  .month-calendar:not(.is-compact) .month-day {
    padding: 6px;
  }
}

@media (max-width: 760px) {
  .month-calendar:not(.is-compact) .month-toolbar {
    margin-bottom: 15px;
  }

  .month-calendar:not(.is-compact) .month-title {
    font-size: 17.6px;
  }

  .month-calendar:not(.is-compact) .month-today {
    min-height: 31px;
    padding-inline: 8px;
    font-size: var(--fs-10);
  }

  .month-calendar:not(.is-compact) .month-arrow {
    width: 30px;
    height: 31px;
  }

  .month-calendar:not(.is-compact) .month-grid,
  .month-calendar:not(.is-compact) .month-weekdays,
  .month-calendar:not(.is-compact) .month-week {
    gap: 3px;
  }

  .month-calendar:not(.is-compact) .month-weekdays > span {
    font-size: var(--fs-10);
  }

  .month-calendar:not(.is-compact) .month-day {
    min-height: 54px;
    padding: 4px;
    border-radius: var(--r-10);
  }

  .month-calendar:not(.is-compact) .month-day-number {
    width: 24px;
    height: 24px;
    border-radius: var(--r-8);
    font-size: var(--fs-13);
  }

  /* The count becomes a 4 px accent dot under the number. */
  .month-calendar:not(.is-compact) .month-day-events {
    position: relative;
    width: 100%;
    min-height: 5px;
    padding-left: 9px;
    overflow: visible;
    font-size: 0;
  }

  .month-calendar:not(.is-compact) .month-day-events::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
  }

  .month-calendar--modal:not(.is-compact) .month-toolbar {
    gap: 6px;
  }

  .month-calendar--modal:not(.is-compact) .month-title {
    font-size: var(--fs-16);
  }

  .month-calendar--modal:not(.is-compact) .month-nav {
    gap: 3px;
  }

  .month-calendar--modal:not(.is-compact) .month-arrow {
    width: 26px;
  }

  .month-calendar--modal:not(.is-compact) .month-today {
    padding-inline: 6px;
  }

  .month-calendar--modal:not(.is-compact) .month-day {
    min-height: 50px;
    padding: 3px;
  }
}

@media (max-width: 400px) {
  .month-calendar--modal:not(.is-compact) .month-title {
    font-size: var(--fs-13);
    white-space: nowrap;
  }

  .month-calendar--modal:not(.is-compact) .month-arrow {
    width: 24px;
  }
}

@media (max-width: 360px) {
  .month-calendar:not(.is-compact) .month-toolbar {
    gap: 6px;
  }

  .month-calendar:not(.is-compact) .month-arrow {
    width: 27px;
  }
}

/* Touch screens (DESIGN_SYSTEM §12.3): «Сегодня» and the arrows keep 44 px minus an arrow's width
   apart, so each arrow's centred 44 px target meets its neighbour's in the middle of the gap
   instead of reaching over it. Arrows: 34 wide, 30 on phones, 26 / 24 in the phone dialog, 27 at
   ≤ 360; 28 in the date picker. */
@media (pointer: coarse) {
  .month-calendar:not(.is-compact) .month-nav {
    gap: 10px;
  }

  .month-calendar.is-compact .month-nav {
    gap: 16px;
  }

  /* The date picker: 13 px (not 12) under its heading, so the × target (6 px under the ×) and
     the toolbar's (7 px over it) meet without overlapping. */
  .picker--date .popover__header {
    margin-bottom: 13px;
  }

  /* Its days are 44 px apart, so each day's target (reaching the middle of the gaps around it)
     is 44 × 44: across, the grid takes 10 px of the popover's side padding (306 wide in the
     320 px popover); down, the rows stand 10 apart (34 px days). The inset counts from the
     padding box, inside the day's 1 px border. The stage lets the outer days' targets through its
     clip. */
  .month-calendar.is-compact .month-stage {
    margin-inline: -10px;
    overflow-clip-margin: 5px;
  }

  .month-calendar.is-compact .month-grid {
    row-gap: 10px;
  }

  .month-calendar.is-compact .month-day::before {
    content: '';
    position: absolute;
    inset: -6px -2.5px;
  }
}

/* Touch phones: a day of the full calendar is 41–46 px wide (the grid is at least 305 wide, the
   phone rules in app.css), and its target reaches the middle of the 3 px gaps on both sides, so
   neighbouring days meet at 44 px or more without covering each other (the inset counts from
   the padding box, inside the day's 1 px border). */
@media (pointer: coarse) and (max-width: 760px) {
  .month-calendar:not(.is-compact) .month-stage {
    overflow-clip-margin: 1.5px;
  }

  .month-calendar:not(.is-compact) .month-day::before {
    content: '';
    position: absolute;
    inset: 0 -2.5px;
  }
}

@media (pointer: coarse) and (max-width: 760px) {
  .month-calendar:not(.is-compact) .month-nav {
    gap: 14px;
  }

  .month-calendar--modal:not(.is-compact) .month-nav {
    gap: 18px;
  }
}

@media (pointer: coarse) and (max-width: 400px) {
  .month-calendar--modal:not(.is-compact) .month-nav {
    gap: 20px;
  }
}

@media (pointer: coarse) and (max-width: 360px) {
  .month-calendar:not(.is-compact) .month-nav {
    gap: 17px;
  }
}

/* -- Modal: native <dialog class="modal"> opened with showModal() --
   The <dialog> is a bare shell (size and position) around .modal__panel, the visible card. Toasts
   and menus opened while a modal is open live inside the <dialog>, so the open animation moves
   the panel only: a transform on the <dialog> would drag those fixed layers along. */
.modal {
  --modal-w: 460px;
  --modal-pad: 36px;
  width: min(var(--modal-w), calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--text);
}

.modal[open] {
  display: flex;
  flex-direction: column;
}

.modal__panel {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-28);
  background-color: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-modal);
}

.modal[open] > .modal__panel {
  animation: sz-modal-in var(--dur-enter) var(--ease);
}

.modal::backdrop {
  background-color: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: sz-fade-in var(--dur) ease;
}

.modal:focus {
  outline: none;
}

.modal--sm {
  --modal-w: 460px;
}

.modal--md {
  --modal-w: 560px;
}

.modal--lg {
  --modal-w: 940px;
  --modal-pad: 30px;
}

/* Workspace modal («Мои встречи»): page-coloured, 1140 wide, slides down 28 px in 440 ms. */
.modal--xl {
  --modal-w: 1140px;
  --modal-pad: 30px;
  width: min(var(--modal-w), calc(100vw - 48px));
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
}

.modal--xl > .modal__panel {
  background-color: var(--surface);
}

.modal--xl[open] > .modal__panel {
  animation: sz-modal-xl-in 440ms var(--ease-modal);
}

.modal--xl::backdrop {
  animation: sz-backdrop-in 300ms ease-out;
}

/* Header: [emblem] / [kicker] / title (+ inline buttons a page adds) / [lead]; × is absolute. */
.modal__header {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 8px;
  padding: var(--modal-pad) calc(var(--modal-pad) + 40px) 0 var(--modal-pad);
}

.modal__emblem {
  margin-bottom: 22px;
}

.modal__kicker {
  flex-basis: 100%;
  margin-bottom: 18px;
}

/* The emblem keeps its 45 px and still takes a line of its own. */
.modal__emblem {
  margin-right: 100%;
}

.modal__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-30);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-dialog);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.modal--md .modal__title,
.modal--form .modal__title {
  font-size: var(--fs-28);
  letter-spacing: -0.03em;
}

.modal--lg .modal__title {
  font-size: var(--fs-40);
  letter-spacing: var(--tracking-title);
  line-height: 1.15;
}

.modal--xl .modal__title {
  font-size: var(--fs-32);
  letter-spacing: var(--tracking-title);
}

.modal__lead {
  flex-basis: 100%;
  margin-top: 13px;
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.5;
}

/* × : 42 round on the subtle fill, 13 px from the top-right corner. */
.modal__close {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), scale var(--dur-fast) ease-out;
}

.modal__close:hover {
  background: var(--control-bg-active);
  color: var(--text);
}

.modal__close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal__close .icon {
  width: 20px;
  height: 20px;
}

.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px var(--modal-pad) var(--modal-pad);
}

.modal__body:first-child {
  padding-top: var(--modal-pad);
}

/* The × sits over the body when there is no header: keep text clear of it. */
.modal__close + .modal__body {
  padding-top: var(--modal-pad);
}

.modal__body:not(:last-child) {
  padding-bottom: 24px;
}

/* A control that takes the focus in a scrolling body stops clear of its edges with room for its
   8 px ring (9: the browser scrolls by whole pixels). A margin on the controls, not the body's
   scroll padding: a control that the edge cuts still counts as partly shown, so the browser brings
   it in by the least scroll instead of centring it (the call's «Настройки устройств» opens with
   the camera preview in view). Short windows scroll the panel instead (below); «Проверка связи»
   and the cabinet's dialogs have rules of their own. */
@media (min-height: 520.02px) {
  .modal:not(.prep-modal, .app-dialog) > .modal__panel > .modal__body :is(a[href], button, input, select, textarea, summary, [tabindex]) {
    scroll-margin-block: 9px;
  }
}

.modal__text {
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.55;
}

.modal__footer {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 var(--modal-pad) var(--modal-pad);
}

.modal__footer > .btn {
  --btn-h: 46px;
  --btn-radius: var(--r-12);
}

@media (max-width: 850px) {
  .modal--lg,
  .modal--xl {
    --modal-pad: 25px;
  }

  .modal--xl {
    width: calc(100vw - 32px);
  }

  .modal--lg .modal__title {
    font-size: 33.6px;
  }
}

@media (max-width: 760px) {
  .modal--xl {
    --modal-pad: 18px;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
  }

  .modal--xl > .modal__panel {
    border-radius: 22px;
  }

  .modal--xl .modal__title {
    font-size: 27.2px;
  }
}

@media (max-width: 650px) {
  .modal {
    --modal-pad: 24px;
  }

  .modal--lg {
    --modal-pad: 20px;
  }

  .modal__title {
    font-size: 27.2px;
  }

  .modal--lg .modal__title {
    font-size: var(--fs-32);
  }

  .modal__close {
    top: 9px;
    right: 9px;
    box-shadow: var(--shadow-close-sm);
  }
}

/* Phones: dialogs (not the workspace modal) are bottom sheets. */
@media (max-width: 639.98px) {
  .modal:not(.modal--xl) {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
  }

  .modal:not(.modal--xl) > .modal__panel {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-bottom: 0;
    border-radius: var(--r-24) var(--r-24) 0 0;
  }

  .modal:not(.modal--xl)[open] > .modal__panel {
    animation-name: sz-sheet-in;
    animation-duration: var(--dur-enter);
    animation-timing-function: var(--ease-out);
  }

  .modal {
    --modal-pad: 20px;
  }

  .modal__footer {
    flex-direction: column-reverse;
  }

  .modal__footer > .btn {
    width: 100%;
  }
}

/* Short windows (a phone on its side, a low browser window): a fixed header and footer would leave
   the body a strip of 130–200 px, so the panel scrolls as one block, like the cabinet's dialogs
   (app.css .app-dialog): the header and × go up with the content. «Проверка связи» (.prep-modal)
   has its own short layout (room.css). */
@media (max-height: 520px) {
  .modal:not(.prep-modal) > .modal__panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
  }

  .modal:not(.prep-modal) > .modal__panel > .modal__body {
    flex: none;
    overflow: visible;
  }

  /* The footer stays in reach at the bottom of the panel, as at other heights, so a dialog that
     focuses its action on open (e.g. «Готово») still opens at the top; a control that takes the
     focus scrolls clear of it and of the panel's top edge, its 8 px ring included (modal.js sets
     --modal-foot-h). While the panel has more to scroll (modal.js .is-overflowing), a hairline and
     14 px part the footer from what runs under it. The cabinet's dialogs keep their footer at the
     end of the form, as at every height. The footer takes that padding at once: with reduced
     motion every style change is a 0.01 ms transition (base.css), and modal.js reads the footer's
     height right after it sets the class.
     The padding: 8 px for the ring and 1 because the browser scrolls by whole pixels, plus 1 above
     the footer for its hairline, which is drawn over what runs under it. */
  .modal:not(.prep-modal, .app-dialog) > .modal__panel {
    scroll-padding-block: 9px calc(var(--modal-foot-h, 0px) + 10px);
  }

  .modal:not(.prep-modal, .app-dialog) > .modal__panel > .modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background-color: inherit;
    transition: none;
  }

  .modal:not(.prep-modal, .app-dialog) > .modal__panel.is-overflowing > .modal__footer {
    padding-top: 14px;
    box-shadow: 0 -1px 0 var(--border);
  }
}

/* -- Toasts: inverse pill (DESIGN_SYSTEM §8.16) --
   One fixed, click-through layer (toast.js) holds the top and the bottom stack; page CSS moves
   them with --toast-offset-top / --toast-offset-bottom (e.g. above the call controls). */
.toast-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding:
    calc(var(--toast-offset-top) + env(safe-area-inset-top, 0px))
    16px
    calc(var(--toast-offset-bottom) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.toast-region {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.toast-region__stack {
  display: contents;
}

.toast-region--bottom {
  margin-top: auto;
}

.toast-region--top:has(.toast) {
  margin-bottom: 8px;
}

dialog > .toast-layer {
  --toast-offset-bottom: var(--toast-offset);
  --toast-offset-top: var(--toast-offset);
}

/* While a modal <dialog> or another [aria-modal="true"] surface is open, the bottom stack moves to
   the top, so it never covers the modal's buttons. */
dialog > .toast-layer > .toast-region--bottom,
:root:has([aria-modal="true"]:not([hidden])) body > .toast-layer > .toast-region--bottom {
  margin-top: 0;
}

dialog > .toast-layer > .toast-region--bottom .toast.is-entering,
:root:has([aria-modal="true"]:not([hidden])) body > .toast-layer > .toast-region--bottom .toast.is-entering {
  animation-name: sz-toast-in-top;
}

/* Icon (tinted for the inverse surface) · body (message, then the action) · ×. */
.toast {
  --toast-icon: var(--toast-info);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: max-content;
  max-width: min(480px, 100%);
  min-height: 46px;
  padding: 9px 9px 9px 16px;
  border-radius: var(--r-14);
  background-color: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: var(--shadow-toast);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  pointer-events: auto;
}

:root,
[data-theme="light"] {
  --toast-info: #AFC8FF;
  --toast-success: #89CBB5;
  --toast-error: #FFA3AB;
  --toast-warning: #F2C46D;
}

[data-theme="dark"] {
  --toast-info: #315BD8;
  --toast-success: #266C5D;
  --toast-error: #B43945;
  --toast-warning: #8A5A00;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --toast-info: #315BD8;
    --toast-success: #266C5D;
    --toast-error: #B43945;
    --toast-warning: #8A5A00;
  }
}

.toast--success {
  --toast-icon: var(--toast-success);
}

.toast--error {
  --toast-icon: var(--toast-error);
}

.toast--warning {
  --toast-icon: var(--toast-warning);
}

.toast__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 28px;
  color: var(--toast-icon);
}

.toast__icon .icon {
  width: 18px;
  height: 18px;
}

.toast__body {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
  row-gap: 0;
  min-width: 0;
}

.toast__message {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 4px 4px 0;
  overflow-wrap: anywhere;
}

/* The action: the toast's own colour, underlined, 600. */
.toast__action {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-left: auto;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--fw-semibold);
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: normal;
  cursor: pointer;
}

.toast__action:hover {
  text-decoration-thickness: 2px;
}

.toast__action:focus-visible,
.toast__close:focus-visible {
  outline-color: var(--toast-icon);
  outline-offset: 2px;
}

.toast__close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-7);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
}

.toast__close:hover {
  background: var(--toast-hover);
  opacity: 1;
}

.toast__close .icon {
  width: 18px;
  height: 18px;
}

.toast.is-entering {
  animation: sz-toast-in var(--dur-fast) ease-out;
}

.toast-region--top .toast.is-entering {
  animation-name: sz-toast-in-top;
}

.toast.is-leaving {
  animation: sz-toast-out var(--dur-fast) ease-out forwards;
}

/* -- Notice card (undo «Встреча отменена · Вернуть»; js/lib/notice.js) -- */
.notice {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 36px);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-13);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-notice);
  font-size: var(--fs-12);
  line-height: 1.4;
  animation: sz-picker-in var(--dur-popover) ease-out;
  transition: border-color var(--dur-fast) ease;
}

.notice--inline {
  position: relative;
  right: auto;
  bottom: auto;
  width: fit-content;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .notice {
    border-color: color-mix(in srgb, var(--accent) 8%, var(--border));
  }

  .notice:hover {
    border-color: color-mix(in srgb, var(--accent) 12%, var(--border));
  }
}

.notice.is-leaving {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease-in, transform 120ms ease-in;
}

.notice__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-text);
}

.notice--danger .notice__dot {
  background: var(--danger-text);
}

.notice__text {
  min-width: 0;
}

.notice__action {
  flex: none;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-8);
  background: var(--surface-accent);
  color: var(--accent-text);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, scale var(--dur-fast) ease-out;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .notice__action:hover {
    border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-accent));
  }
}

.notice__close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-7);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.notice__close:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.notice__close .icon {
  width: 16px;
  height: 16px;
}

/* -- Success burst: ring + check over a panel (DESIGN_SYSTEM §8.17; js/lib/celebrate.js) -- */
.success-burst {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border-radius: inherit;
  background: var(--surface-raised);
  text-align: center;
  cursor: pointer;
  animation:
    sz-fade-in 180ms ease-out both,
    sz-fade-out 250ms ease-in 1600ms forwards;
}

.success-burst__symbol {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
  color: var(--accent-text);
  animation: sz-burst-scale 400ms var(--ease-out) 650ms both;
}

.success-burst__symbol svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

.success-burst__track {
  stroke-width: 2;
  opacity: 0.15;
}

.success-burst__ring {
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 226.2;
  stroke-dashoffset: 226.2;
  transform: rotate(-90deg);
  transform-origin: 48px 48px;
  animation: sz-ring-draw 650ms var(--ease-glide) 150ms forwards;
}

.success-burst__check {
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  opacity: 0;
  animation: sz-check-draw 450ms var(--ease-out) 650ms forwards;
}

.success-burst__title {
  font-size: 18.4px;
  font-weight: var(--fw-ui);
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.success-burst__meta {
  color: var(--text-muted);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}

/* -- Tooltips: data-tooltip="Текст" on any element (title="" is fine too) -- */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: var(--z-overlay);
  padding: 6px 10px;
  border-radius: var(--r-8);
  background-color: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}

[data-tooltip-pos="bottom"]::before {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translate(-50%, -4px);
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 300ms;
}

.tooltip {
  display: inline-block;
  max-width: 280px;
  padding: 6px 10px;
  border-radius: var(--r-8);
  background-color: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

/* =========================================================================
   Decorative layer: sky background, rings, asterisk (DESIGN_SYSTEM §6) — all aria-hidden,
   click-through. Markup: §6.1 or js/lib/decor.js skyBackground().
   ========================================================================= */

body:has(> .sky-background) {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
}

.sky-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 100% 5%, var(--sky-glow-a), transparent 45%),
    radial-gradient(ellipse at 3% 100%, var(--sky-glow-b), transparent 42%);
  pointer-events: none;
}

.sky-background .sky-halo {
  position: absolute;
  top: 4%;
  right: -390px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 30%, #a7c5ff25 55%, transparent 72%);
}

.sky-background .sky-ring {
  position: absolute;
  width: 480px;
  height: 480px;
  border: 1px solid #93b5ef42;
  border-radius: 50%;
}

.sky-background .ring-a {
  top: 4%;
  right: -340px;
}

.sky-background .ring-b {
  bottom: -170px;
  left: -350px;
  width: 650px;
  height: 650px;
  border-color: #8db3f337;
}

.sky-background > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #8cb1ed;
  stroke-width: 0.7;
  opacity: 0.2;
}

.sky-background .sky-star {
  position: absolute;
  right: 31px;
  bottom: 37px;
  color: #769ce3;
  font-size: 31px;
  font-weight: var(--fw-regular);
  line-height: 1;
  opacity: 0.35;
}

.sky-background .sky-star .icon {
  width: 31px;
  height: 31px;
}

@media (max-width: 760px) {
  .sky-background > svg {
    opacity: 0.14;
  }

  .sky-background .sky-star {
    right: 9px;
    bottom: 8px;
    font-size: 24px;
  }

  .sky-background .sky-star .icon {
    width: 24px;
    height: 24px;
  }
}

/* A thin decorative circle inside a card: size and place it with inline style or page CSS. */
.deco-ring {
  position: absolute;
  width: var(--ring-size, 260px);
  height: var(--ring-size, 260px);
  border: 1px solid var(--ring-color, #a4bce44a);
  border-radius: 50%;
  pointer-events: none;
}

/* The ✳ ornament drawn as an SVG (js/lib/icons.js 'asterisk'). */
.deco-asterisk {
  color: var(--asterisk-color, #94b1e04d);
  pointer-events: none;
}

/* =========================================================================
   Platform adjustments
   ========================================================================= */

/* iOS Safari zooms into fields under 16 px on focus; -webkit-touch-callout only exists there. */
@supports (-webkit-touch-callout: none) {
  .input,
  .select,
  .textarea {
    font-size: max(16px, var(--input-fs));
  }

  .search__input {
    font-size: 16px;
  }
}

/* Touch screens: the kit's own small controls get a 44 px target without changing the layout
   (DESIGN_SYSTEM §12.3); .btn--touch grows a button to 44 px. */
@media (pointer: coarse) {
  .segmented__item {
    min-height: 44px;
  }

  /* Underlined tabs are 44.5 high, but 43 with the 12 px text at ≤ 360. */
  .tab {
    min-height: 44px;
  }

  .menu__item {
    min-height: 44px;
  }

  .btn--touch {
    --btn-h: 44px;
  }

  .header-link {
    min-height: 44px;
  }

  :is(.theme-toggle, .month-arrow, .month-today, .btn--danger-ghost, .notice__close, .notice__action,
    .header-chip, .popover__close, .toast__close, .btn--chip, .btn--glass, .profile-chip)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  /* The chip ends the header row with the theme button just before it. On touch screens they are
     14 px apart (≤ 1050: 9, ≤ 760: 7, ≤ 360: 9) in the site header and 14 (≤ 1050: 10) in the
     cabinet's (app.css), so the chip's target grows only to the right, into the header's side
     padding, and leaves the theme button its own target (DESIGN_SYSTEM §12.3). */
  .profile-chip::before {
    left: 0;
    transform: translateY(-50%);
  }

  :is(.month-arrow, .month-today, .btn--chip, .notice__action, .notice__close, .header-chip,
    .popover__close, .toast__close) {
    position: relative;
  }

  /* The disclosure toggle («Добавить название», 28 high): its target grows into the gaps above
     and below it (18 px in the hero card), as wide as the toggle. */
  :is(.disclosure > summary, .disclosure__summary) {
    position: relative;
  }

  :is(.disclosure > summary, .disclosure__summary)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: max(100%, 44px);
    transform: translateY(-50%);
  }

  :is(.checkbox, .radio, .switch, .swatch-radio) {
    min-height: 44px;
    align-items: center;
  }

  /* The cabinet's search pill (40 high): its field covers the whole pill, the icon and the side
     padding too, and 2 px above and below it, a 44 px target; the text stays where it was. */
  .search--pill > .search__input {
    height: 44px;
    margin: -3px -17px -3px -41px;
    padding: 0 19px 0 43px;
  }

  :is(.checkbox, .radio, .switch):has(.checkbox__hint, .radio__hint, .switch__hint) {
    align-items: flex-start;
  }

  .field__adornment.btn {
    --btn-h: 44px;
    right: 0;
  }

  .modal__close {
    width: 44px;
    height: 44px;
  }
}

/* Windows High Contrast: backgrounds are dropped, so filled components need real borders. */
@media (forced-colors: active) {
  .btn,
  .control__btn,
  .device-toggle,
  .chip,
  .pill,
  .badge,
  .icon-badge,
  .icon-tile,
  .avatar,
  .toast,
  .menu,
  .popover,
  .modal__panel,
  .callout,
  .segmented__item,
  .video-label,
  .header-chip,
  .notice,
  .field-button,
  .glass-panel,
  .logo-mark {
    border: 1px solid ButtonText;
  }

  .btn[aria-pressed="true"],
  .control__btn[aria-pressed="true"],
  .device-toggle[aria-pressed="true"],
  .segmented__item[aria-pressed="true"],
  .segmented__item[aria-checked="true"],
  .segmented__item[aria-selected="true"],
  .segmented__item:has(> input:checked),
  .nav-item[aria-current="page"],
  .header-chip[aria-current="page"],
  .header-switcher__link[aria-current="page"],
  .tab[aria-selected="true"],
  .num-tabs__tab[aria-selected="true"],
  .month-day.is-selected,
  .time-wheel__item[aria-checked="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .input:focus,
  .select:focus,
  .textarea:focus,
  .field-button:focus-visible,
  .search:focus-within {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }

  .switch > input,
  .checkbox > input,
  .radio > input {
    border: 1px solid CanvasText;
  }

  .switch > input:checked,
  .checkbox > input:checked,
  .radio > input:checked {
    background-color: Highlight;
  }

  .progress__bar,
  .dot,
  .tabs__indicator,
  .num-tabs__marker {
    background-color: CanvasText;
  }

  .sky-background {
    display: none;
  }
}

/* =========================================================================
   Animations
   ========================================================================= */

@keyframes sz-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sz-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes sz-fade-out {
  to {
    opacity: 0;
  }
}

/* Popovers, menus, notices (picker-enter). */
@keyframes sz-picker-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes sz-picker-in-top {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Kept for page CSS written against the old kit. */
@keyframes sz-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Dialog entrance (enter): opacity, 12 px rise, 4 px blur. */
@keyframes sz-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }
}

@keyframes sz-modal-xl-in {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }
}

@keyframes sz-backdrop-in {
  from {
    background-color: rgba(18, 33, 55, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}

/* Page entrance (hero on load): 500 ms with --ease. */
@keyframes sz-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }
}

@keyframes sz-sheet-in {
  from {
    transform: translateY(100%);
  }
}

@keyframes sz-toast-in {
  from {
    opacity: 0;
  }
}

@keyframes sz-toast-in-top {
  from {
    opacity: 0;
  }
}

@keyframes sz-toast-out {
  to {
    opacity: 0;
  }
}

@keyframes sz-pulse {
  50% {
    opacity: 0.35;
  }
}

@keyframes sz-skeleton {
  50% {
    opacity: 0.55;
  }
}

@keyframes sz-bars {
  50% {
    transform: scaleY(0.45);
  }
}

@keyframes sz-indeterminate {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(250%);
  }
}

@keyframes sz-status-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes sz-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sz-ring-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sz-check-draw {
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes sz-burst-scale {
  from {
    transform: scale(0.92);
  }
}

@keyframes sz-day-pulse {
  from {
    box-shadow: inset 0 0 0 2px rgba(49, 91, 216, 0.6);
  }

  to {
    box-shadow: inset 0 0 0 2px rgba(49, 91, 216, 0);
  }
}

@keyframes sz-agenda-new {
  0% {
    opacity: 0.3;
    transform: translateY(10px);
    background-color: rgba(80, 135, 230, 0.24);
  }

  35% {
    opacity: 1;
    transform: translateY(0);
    background-color: rgba(80, 135, 230, 0.15);
  }

  100% {
    background-color: transparent;
  }
}

@keyframes sz-agenda-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}