/*
  Контент Плюс — CRM. Визуальная система по DESIGN.md: «clinical blueprint on
  frosted paper». Монохром, Geist, крупные радиусы, hairline-границы.
  Глубина объявляется один раз — границей, не тенью: 1px-обводка под мягкой
  тенью даёт «призрачную карточку».
  Красный (Ember) — только деструктивные состояния: ошибка, просрочка.
  Шрифт самохостится: CSP разрешает font-src только 'self'.
*/

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist[wght].woff2") format("woff2-variations"),
       url("fonts/Geist[wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Поверхности */
  --canvas: #f5f5f5;
  --paper: #ffffff;
  --surface-alt: #fafafa;

  /* Чернила */
  --ink: #0a0a0a;
  --ink-soft: #171717;
  /* DESIGN.md задаёт #737373, но на канвасе #f5f5f5 это 4.35:1 — ниже порога
     4.5:1 для основного текста. Затемнено ровно настолько, чтобы пройти. */
  --mid: #6b6b6b;
  --hairline: #e5e5e5;
  --hairline-strong: #d4d4d4;

  /* Единственный хроматический акцент — деструктивные состояния */
  --ember: #e7000b;
  --ember-soft: #fef2f2;

  --font: "Geist", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Шкала типографики */
  --text-caption: 12px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 30px;

  /* Шаг сетки 4px, плотность compact */
  --s4: 4px;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s20: 20px;
  --s24: 24px;
  --s48: 48px;

  --r-card: 24px;
  --r-nested: 10px;
  --r-control: 18px;
  --r-small: 6px;

  --page-max: 1280px;
  --header-h: 60px;
  --sidebar-w: 236px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Атрибут hidden должен побеждать классы с собственным display */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-feature-settings: "ss01" on, "cv11" on;
  font-size: var(--text-body);
  line-height: 1.43;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Поверхности, которые рисует браузер, тоже принадлежат системе */
::selection {
  background: var(--ink);
  color: var(--paper);
}

:root {
  caret-color: var(--ink);
  accent-color: var(--ink);
  scrollbar-color: var(--hairline-strong) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mid);
  background-clip: content-box;
  border: 3px solid transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-small);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  font-feature-settings: inherit;
}

/* ─────────────────────────── Типографика ─────────────────────────── */

.page-title {
  font-size: var(--text-heading);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}

.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin-bottom: var(--s24);
}

.page-sub {
  font-size: var(--text-body);
  color: var(--mid);
}

/* Заголовок секции: разделитель с подписью, без декоративной надстройки */
.sec {
  display: flex;
  align-items: center;
  gap: var(--s12);
  margin: var(--s48) 0 var(--s16);
  font-size: var(--text-caption);
  line-height: 1.33;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
}

.sec h2 {
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}

/* Линия-разделитель приходит из разметки отдельным элементом */
.rule {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.note {
  color: var(--mid);
  white-space: nowrap;
}

/* Мелкая подпись. Класс исторически назывался label-mono; моноширинный
   отсюда убран — он был костюмом «технического», а не смыслом. */
.label-mono,
.eyebrow {
  font-size: var(--text-caption);
  line-height: 1.33;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
}

.num,
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01" on, "cv11" on, "tnum" on;
}

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

/* ───────────────────────────── Кнопки ───────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s8);
  height: 36px;
  padding: 0 var(--s16);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--surface-alt);
  font-size: var(--text-body);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}

.btn:hover {
  background: var(--ink-soft);
}

.btn:active {
  background: #000;
}

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

.btn--brand {
  background: var(--ink);
  color: var(--surface-alt);
}

.btn--brand:hover {
  background: var(--ink-soft);
}

.btn--secondary {
  background: var(--canvas);
  color: var(--ink);
}

.btn--secondary:hover {
  background: #ededed;
}

.btn--outline {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--hairline);
}

.btn--outline:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-alt);
}

.btn--ghost {
  background: transparent;
  color: var(--mid);
}

.btn--ghost:hover {
  background: var(--canvas);
  color: var(--ink);
}

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

/* ───────────────────────────── Поля ───────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s8);
}

.field > label {
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  height: 40px;
  padding: 0 var(--s16);
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  font-size: var(--text-body);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.field textarea {
  height: auto;
  min-height: 96px;
  padding: var(--s12) var(--s16);
  border-radius: var(--r-nested);
  resize: vertical;
  line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--mid);
}

.field input:hover,
.field textarea:hover {
  border-color: var(--hairline-strong);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--ink);
}

.field input[aria-invalid="true"] {
  border-color: var(--ember);
}

/* ───────────────────────────── Карточки ───────────────────────────── */

.card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s20);
}

.card > h2,
.card > h3 {
  font-size: var(--text-subheading);
  line-height: 1.56;
  font-weight: 600;
  margin-bottom: var(--s16);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
}

/* ───────────────────────────── Сообщения ───────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s12);
  padding: var(--s12) var(--s16);
  border: 1px solid var(--hairline);
  border-radius: var(--r-nested);
  background: var(--surface-alt);
  font-size: var(--text-body);
  line-height: 1.5;
}

.alert--error {
  background: var(--ember-soft);
  border-color: #fecaca;
  color: #7f1d1d;
}

.alert--success,
.alert--info {
  background: var(--surface-alt);
  color: var(--ink-soft);
}

/* ───────────────────────────── Вход ───────────────────────────── */

.auth-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s24);
  background: var(--canvas);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s48) var(--s24) var(--s24);
  animation: rise 0.5s var(--ease) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card {
    animation: none;
  }
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--s12);
  margin-bottom: var(--s24);
}

.auth-brand svg {
  width: 28px;
  height: 28px;
  display: block;
}

.auth-title {
  font-size: var(--text-heading-sm);
  line-height: 1.33;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.auth-sub {
  font-size: var(--text-body);
  color: var(--mid);
  margin-top: var(--s4);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s16);
  margin-top: var(--s24);
}

.auth-foot {
  margin-top: var(--s20);
  padding-top: var(--s16);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-caption);
  color: var(--mid);
  line-height: 1.5;
}

/* ───────────────────────────── Оболочка ───────────────────────────── */

.shell {
  display: flex;
  align-items: flex-start;
  min-height: 100dvh;
}

.shell__header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s16);
  padding: 0 var(--s24);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.shell__header-spacer {
  flex: 1;
}

.shell__sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--s8);
  height: var(--header-h);
  padding: 0 var(--s4);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.shell__sidebar-brand svg {
  width: 24px;
  height: 24px;
  display: block;
  flex: none;
}

.shell__menu-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.shell__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-small);
  background: var(--paper);
  cursor: pointer;
}

.shell__content {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  padding: var(--s24);
}

.shell__sidebar {
  position: sticky;
  top: 0;
  flex: none;
  width: var(--sidebar-w);
  height: 100dvh;
  padding: 0 var(--s12) var(--s16);
  background: var(--surface-alt);
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
}

.shell__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.shell__overlay {
  display: none;
}



/* Переключатель направлений */
.switcher {
  display: inline-flex;
  gap: var(--s4);
  padding: var(--s4);
  background: var(--canvas);
  border-radius: var(--r-control);
}

.switcher__btn {
  height: 28px;
  padding: 0 var(--s12);
  border: none;
  border-radius: 99px;
  background: transparent;
  color: var(--mid);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.switcher__btn:hover {
  color: var(--ink);
}

.switcher__btn.is-active,
.switcher__btn[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
}

/* Навигация */
.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  list-style: none;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--s12);
  padding: var(--s8) var(--s12);
  border-radius: var(--r-nested);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--text-body);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.nav__link:hover {
  background: #f0f0f0;
}

.nav__link.is-active,
.nav__link[aria-current="page"] {
  background: var(--ink);
  color: var(--surface-alt);
}

.nav__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--mid);
}

.nav__link.is-active .nav__icon,
.nav__link[aria-current="page"] .nav__icon {
  color: currentColor;
}

.nav__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Профиль */
/* Знак вопроса в шапке — вход в справку. Иконка без подписи: место в
   шапке дорогое, а знак вопроса читается без слов. */
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--mid);
  text-decoration: none;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.help-btn:hover {
  color: var(--ink);
  border-color: var(--hairline);
  background: var(--surface-alt);
}

.help-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.profile {
  position: relative;
}

.profile__btn {
  display: flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--s4);
  padding-right: var(--s12);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.18s var(--ease);
}

.profile__btn:hover {
  border-color: var(--hairline);
}

.profile__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 99px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
}

.profile__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.profile__email {
  font-size: 13px;
}

.profile__role {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}

.profile__menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--s8));
  right: 0;
  min-width: 240px;
  padding: var(--s8);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-nested);
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.08);
  z-index: 40;
}

.profile__menu.is-open {
  display: block;
}

.profile__menu-head {
  padding: var(--s8) var(--s12) var(--s12);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s8);
}

.profile__menu-email {
  font-size: var(--text-body);
}

.profile__menu-role {
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 2px;
}

.profile__menu-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--s8) var(--s12);
  border: none;
  border-radius: var(--r-small);
  background: transparent;
  font-size: var(--text-body);
  text-align: left;
  cursor: pointer;
  /* Класс носят и кнопка «Выйти», и ссылка «Мой календарь»: у ссылки
     свои цвет и подчёркивание по умолчанию, гасим их явно. */
  color: var(--ink);
  text-decoration: none;
}

.profile__menu-btn:hover {
  background: var(--canvas);
}

/* ───────────────────────────── Дашборд ───────────────────────────── */

/* Показатели идут одной панелью с внутренними разделителями, а не четырьмя
   одинаковыми плитками: разделитель дешевле рамки и не дробит экран. */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}

.kpi {
  padding: var(--s20);
  border-left: 1px solid var(--hairline);
}

.kpi:first-child {
  border-left: none;
}

.kpi .v,
.kpi__value,
.kpi .num {
  display: block;
  font-size: var(--text-heading);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kpi .v.is-muted,
.kpi__value--empty,
.kpi .num--empty {
  color: var(--hairline-strong);
}

.kpi .l,
.kpi__label {
  display: block;
  margin-top: var(--s12);
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
}

.kpi .d,
.kpi__hint {
  display: block;
  margin-top: var(--s4);
  font-size: var(--text-caption);
  color: var(--mid);
}

/* Бренд-знак и слово в шапке */
.mark {
  width: 24px;
  height: 24px;
  display: block;
  flex: none;
}

.word {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--s8);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}

/* Подсказка и ошибка поля */
.hint {
  font-size: var(--text-caption);
  color: var(--mid);
}

.field-error {
  font-size: var(--text-caption);
  color: var(--ember);
}

/* Воронка */
.funnel {
  display: flex;
  flex-direction: column;
}

.funnel__row {
  display: grid;
  grid-template-columns: 168px 1fr 56px;
  align-items: center;
  gap: var(--s16);
  padding: var(--s8) 0;
}

.funnel__name {
  font-size: var(--text-body);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funnel__track {
  height: 6px;
  background: var(--canvas);
  border-radius: 99px;
  overflow: hidden;
}

.funnel__bar {
  height: 100%;
  min-width: 2px;
  background: var(--ink);
  border-radius: 99px;
  transition: width 0.6s var(--ease);
}

.funnel__count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Списки */
.list {
  display: flex;
  flex-direction: column;
}

.list__row {
  display: flex;
  align-items: center;
  gap: var(--s16);
  padding: var(--s12) 0;
  border-bottom: 1px solid var(--hairline);
}

.list__row:last-child {
  border-bottom: none;
}

.list__main {
  flex: 1;
  min-width: 0;
}

.list__title {
  font-size: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list__sub {
  font-size: var(--text-caption);
  color: var(--mid);
  margin-top: 2px;
}

.list__meta {
  flex: none;
  font-size: var(--text-caption);
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}

/* Метки состояния */
.pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s8);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  background: var(--surface-alt);
  font-size: var(--text-caption);
  color: var(--mid);
  white-space: nowrap;
}

.pill--ok {
  color: var(--ink);
  border-color: var(--hairline-strong);
}

.pill--soon {
  color: var(--ink);
  background: var(--canvas);
  border-color: var(--hairline-strong);
  font-weight: 500;
}

.pill--overdue {
  color: var(--ember);
  background: var(--ember-soft);
  border-color: #fecaca;
  font-weight: 500;
}

.pill--neutral {
  color: var(--mid);
}

/* Пустые состояния */
.empty {
  padding: var(--s24);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-nested);
  text-align: center;
  color: var(--mid);
  font-size: var(--text-body);
  line-height: 1.5;
}

.empty strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: var(--s4);
}

/* Заглушка раздела */
.stub {
  display: grid;
  place-items: center;
  gap: var(--s16);
  padding: 96px var(--s24);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  text-align: center;
}

.stub__icon {
  width: 32px;
  height: 32px;
  color: var(--hairline-strong);
}

.stub__icon svg {
  width: 100%;
  height: 100%;
}

/* Загрузка */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--hairline);
  border-top-color: var(--ink);
  border-radius: 99px;
  animation: spin 0.7s linear infinite;
}

.spinner--dark {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--paper);
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

.loading-row {
  height: 14px;
  border-radius: var(--r-small);
  background: linear-gradient(90deg, var(--canvas), #ededed, var(--canvas));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .loading-row,
  .funnel__bar {
    animation: none;
    transition: none;
  }
}

/* ───────────────────────────── Адаптив ───────────────────────────── */

@media (max-width: 1080px) {
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .kpi:nth-child(3) {
    border-left: none;
  }

  .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--hairline);
  }
}

@media (max-width: 860px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .funnel__row {
    grid-template-columns: 120px 1fr 44px;
    gap: var(--s12);
  }
}

@media (max-width: 720px) {
  .shell__header {
    padding: 0 var(--s16);
  }

  .shell__sidebar-brand {
    width: auto;
  }

  .shell__menu-btn {
    display: inline-flex;
  }

  .shell__content {
    padding: var(--s16);
  }

  .shell {
    display: block;
  }

  .shell__sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    z-index: 35;
    width: 264px;
    transform: translateX(-100%);
    transition: transform 0.24s var(--ease);
  }

  .shell__sidebar.is-open {
    transform: none;
  }

  .shell__overlay.is-open {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 34;
    background: rgba(10, 10, 10, 0.32);
  }

  .kpis {
    grid-template-columns: 1fr;
  }

  .kpi {
    border-left: none;
    border-top: 1px solid var(--hairline);
  }

  .kpi:first-child {
    border-top: none;
  }

  .profile__meta {
    display: none;
  }

  .page-title {
    font-size: var(--text-heading-sm);
  }

  .sec {
    margin-top: var(--s24);
  }

  .sec .note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell__sidebar {
    transition: none;
  }
}

/* ─────────────────────── Встречи из календаря ─────────────────────── */

.agenda-card {
  margin-bottom: var(--s16);
  display: flex;
  flex-direction: column;
  gap: var(--s12);
}

.agenda-card__head h2 {
  font-size: var(--text-subheading);
  letter-spacing: -0.01em;
  margin: 0;
}

.agenda-list {
  display: flex;
  flex-direction: column;
}

.agenda-row {
  display: flex;
  align-items: baseline;
  gap: var(--s12);
  padding: var(--s8) 0;
  border-bottom: 1px solid var(--hairline);
}

.agenda-row:last-child {
  border-bottom: none;
}

/* Время фиксированной ширины и моноширинными цифрами: список читается
   сверху вниз по колонке времени, а не по разъезжающимся началам строк. */
.agenda-row__time {
  flex: none;
  width: 72px;
  font-variant-numeric: tabular-nums;
  color: var(--mid);
  font-size: var(--text-caption);
}

.agenda-row__title {
  flex: 1;
  min-width: 0;
}

.agenda-empty {
  color: var(--mid);
  font-size: var(--text-body);
}