/* ==========================================================================
   Material Design 3, нейтральная монохромная схема, for khitrova.org
   ========================================================================== */

:root {
  /* ---------- Цвета M3: Deep Blue / Prussian & Denim ---------- */
  --primary: #1B263B;
  --on-primary: #FFFFFF;
  --primary-container: #DBE4EE;
  --on-primary-container: #0D1B2A;

  --secondary: #415A77;
  --secondary-container: #E0E1DD;
  --on-secondary-container: #0D1B2A;

  --tertiary: #778DA9;
  --tertiary-container: #E8ECEF;
  --on-tertiary-container: #1B263B;

  --error: #BA1A1A;
  --on-error: #FFFFFF;
  --error-container: #FFDAD6;
  --on-error-container: #410002;

  --surface: #FFFFFF;
  --surface-low: #F4F6F8;
  --surface-mid: #ECEFF2;
  --surface-high: #E5E9EC;
  --surface-highest: #E0E1DD;

  --on-surface: #0D1B2A;
  --on-surface-variant: #415A77;
  --outline: #778DA9;
  --outline-variant: #D0D7DE;

  --inverse-surface: #0D1B2A;
  --inverse-on-surface: #E0E1DD;
  --inverse-primary: #778DA9;

  /* Меню: Nunito Sans (близкий свободный аналог Avenir с кириллицей), заглавные, лёгкая разрядка */
  --font-menu: "PT Sans Narrow", "PT Sans", "Arial Narrow", sans-serif;   /* тот же, что у заголовков */

  /* ---------- Типографика: шрифты по умолчанию у TimelineJS (PT Sans, PT Sans Narrow) ---------- */
  --t-display-small: 700 36px/44px "PT Sans Narrow", "PT Sans", Arial Narrow, sans-serif;
  --t-headline-small: 700 24px/32px "PT Sans Narrow", "PT Sans", Arial Narrow, sans-serif;
  --t-title-large: 700 22px/28px "PT Sans Narrow", "PT Sans", Arial Narrow, sans-serif;
  --t-title-medium: 500 16px/24px "PT Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --t-body-large: 400 16px/24px "PT Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --t-body-medium: 400 14px/20px "PT Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --t-label-large: 500 14px/20px "PT Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --t-label-medium: 500 12px/16px "PT Sans", -apple-system, "Segoe UI", Arial, sans-serif;

  /* ---------- Радиусы скругления ---------- */
  --r-xs: 4px;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 28px;
  --r-full: 999px;

  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 28px;

  /* ---------- Сетка и контейнер ---------- */
  --container: 1040px;
  --gutter: 24px;
  /* Левый отступ меню и страниц. По умолчанию как в контейнере 1040px; на главной пересчитывается
     по левому краю фото таймлайна и запоминается (app.js, setNavLeft), дальше его берут все страницы. */
  --nav-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  --pad-x: min(var(--nav-left), 16vw);   /* защита, если отступ запомнен в более широком окне */
  --pad-r: 32px;   /* правый край шапки: почти у края экрана */

  /* ---------- Шкала размеров шрифтов M3 (соответствует --t-*) ---------- */
  --fs-display-small: 36px;
  --fs-headline-small: 24px;
  --fs-title-large: 22px;
  --fs-title-medium: 16px;
  --fs-body-large: 16px;
  --fs-body-medium: 14px;
  --fs-label-large: 14px;
  --fs-label-medium: 12px;
}

@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --pad-x: 16px;
    --pad-r: 16px;
  }
}

/* ---------- Сброс и базовые стили ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--surface);
  color: var(--on-surface);
  font-family: "PT Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Иконки Material Symbols Rounded ---------- */
.sym {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---------- Единый контейнер страницы ---------- */
.page {
  max-width: none;
  margin: 0;
  padding: 32px var(--pad-x) 48px;
  width: 100%;
}

@media (max-width: 600px) {
  .page {
    padding-bottom: 96px;
  }
}

h1 {
  font: var(--t-display-small);
  font-size: 36px;
  line-height: 44px;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--on-surface);
}

.lead {
  font: var(--t-body-large);
  font-size: 16px;
  line-height: 24px;
  color: var(--on-surface-variant);
  max-width: 64ch;
  margin: 0 0 24px;
}

/* ---------- Top App Bar: одна полоса 64px ---------- */
.appbar {
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
  position: sticky;
  top: 0;
  z-index: 20;
}

.appbar .row {
  max-width: none;
  margin: 0;
  padding: 0 var(--pad-r) 0 var(--pad-x);
  height: 64px;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.appbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.btn.appbar-add-btn {
  height: 36px;
  padding: 0 16px;
}

.iconbtn.appbar-add-icon {
  display: none;
}

/* ---------- Иконочные кнопки и аватар ---------- */
.iconbtn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-surface-variant);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.iconbtn:hover {
  background: var(--surface-high);
  color: var(--on-surface);
}

.iconbtn .badge-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--error);
  color: var(--on-error);
  font: var(--t-label-medium);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

/* ---------- Блок пользователя (справа в шапке) ---------- */
.who-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.who-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px 0 2px;
  border-radius: 999px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--on-surface);
}

.who-main:hover {
  background: var(--surface-high);
}

.who-name {
  font: var(--t-label-large);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--on-surface);
}

.who-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  color: var(--on-surface-variant);
  cursor: pointer;
}

.who-arrow:hover {
  background: var(--surface-high);
}

/* ---------- Primary Tabs (в самой шапке) ---------- */
.appbar-tabs {
  display: flex;
  align-items: stretch;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

.tab {
  position: relative;
  padding: 0 2px;
  font: var(--t-label-large);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface-variant);
  letter-spacing: .1px;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

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

.tab.on, .tab.active {
  color: var(--on-surface);
}

.tab.on::after, .tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--primary);
}

/* ---------- Navigation Bar (телефон < 600px) ---------- */
.navbar {
  display: none;
}

@media (max-width: 600px) {
  .appbar-tabs {
    display: none;
  }
  .btn.appbar-add-btn {
    display: none;
  }
  .iconbtn.appbar-add-icon {
    display: grid;
  }
  .who-name, .who-arrow {
    display: none;
  }
  .navbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--surface-mid);
    border-top: 1px solid var(--outline-variant);
    z-index: 25;
    justify-content: space-around;
    align-items: center;
    padding: 0 8px;
  }
  .navbar .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--on-surface-variant);
    font: var(--t-label-medium);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
    padding: 8px 0;
    min-height: 48px;
  }
  .navbar .nav-item .icon-pill {
    width: 64px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
  }
  .navbar .nav-item.active .icon-pill, .navbar .nav-item.on .icon-pill {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
  }
  .navbar .nav-item.active, .navbar .nav-item.on {
    color: var(--on-surface);
    font-weight: 700;
  }
}

/* ---------- Кнопки M3 ---------- */
.btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
}

.btn {
  height: 40px;
  padding: 0 24px;
  border-radius: var(--r-full);
  border: 0;
  font: var(--t-label-large);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background .15s, box-shadow .15s, border-color .15s;
  box-sizing: border-box;
}

.btn .sym {
  font-size: 18px;
}

.btn.filled, button.primary {
  background: var(--primary);
  color: var(--on-primary);
  border: 0;
}

.btn.filled:hover, button.primary:hover {
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
}

.btn.tonal {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border: 0;
}

.btn.tonal:hover {
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
}

.btn.outl {
  background: transparent;
  border: 1px solid var(--outline);
  color: var(--primary);
}

.btn.outl:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.btn.text {
  background: transparent;
  color: var(--primary);
  padding: 0 12px;
}

.btn.text:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* ---------- Чипы (Chips) ---------- */
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  height: 32px;
  padding: 0 16px;
  border-radius: var(--r-s);
  border: 1px solid var(--outline);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--t-label-large);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface-variant);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}

.chip:hover {
  background: var(--surface-low);
}

.chip.on, .chip.active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: transparent;
}

.chip.on .sym, .chip.active .sym {
  font-size: 18px;
}

.chip-count {
  font: var(--t-label-medium);
  font-size: 12px;
  color: var(--on-surface-variant);
}

.chip.on .chip-count, .chip.active .chip-count {
  color: var(--on-primary);
}

.chip[data-count="0"] {
  opacity: .6;
}

/* ---------- Search Bar ---------- */
.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.search {
  flex: 1;
  min-width: 260px;
  max-width: 420px;
  height: 56px;
  border-radius: 28px;
  background: var(--surface-high);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  color: var(--on-surface-variant);
}

.search span.t, .search input {
  font: var(--t-body-large);
  font-size: 16px;
  border: none;
  background: transparent;
  outline: none;
  color: var(--on-surface);
  width: 100%;
}

.search input::placeholder {
  color: var(--on-surface-variant);
}

/* ---------- Карточки M3 (Cards) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card {
  position: relative;
  height: 172px;
  border-radius: var(--r-m);
  background: var(--surface-low);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  text-decoration: none;
  color: inherit;
}

.card:hover {
  background: var(--surface-mid);
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.card .top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.card .ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: grid;
  place-items: center;
  font-weight: 500;
  flex: none;
  overflow: hidden;
}

.card .ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card .name {
  font: var(--t-title-medium);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: .15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card .sub {
  font: var(--t-label-medium);
  font-size: 12px;
  line-height: 16px;
  color: var(--on-surface-variant);
  letter-spacing: .4px;
}

.person-notable-star {
  font-size: 16px;
  color: var(--on-surface-variant);
  vertical-align: middle;
  margin-left: 4px;
}

.card .txt {
  font: var(--t-body-medium);
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-variant);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card .meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 8px 8px 16px;
  background: var(--surface-high);
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-label-medium);
  font-size: 12px;
  line-height: 16px;
  color: var(--on-surface-variant);
  transform: translateY(100%);
  transition: transform .18s ease;
}

.card:hover .meta, .card:focus-within .meta {
  transform: none;
}

.card .meta .sym {
  font-size: 18px;
  margin-left: auto;
  color: var(--on-surface-variant);
}

.card .meta .st {
  color: var(--primary);
  font-weight: 500;
}

.card.pending .st {
  color: var(--tertiary);
}

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

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

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .card {
    height: auto;
    min-height: 120px;
  }
  h1 {
    font-size: 32px;
    line-height: 40px;
  }

  /* Тач-экраны: hover недоступен — ⓘ показываем постоянно в углу карточки, без полосы метаданных */
  .card .meta {
    transform: none;
    background: transparent;
    pointer-events: none;
  }
  .card .meta > span {
    display: none;
  }
  .card .meta .meta-icon-btn {
    margin-left: auto;
    pointer-events: auto;
    background: var(--surface-high);
  }
}

/* ---------- Поля ввода (Fields) ---------- */
.field {
  position: relative;
  margin-bottom: 20px;
}

.field .in, .field input, .field select, .field textarea {
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  border: 1px solid var(--outline);
  border-radius: var(--r-xs);
  padding: 0 16px;
  display: flex;
  align-items: center;
  font: var(--t-body-large);
  font-size: 16px;
  color: var(--on-surface);
  background: transparent;
  outline: none;
  transition: border-color .15s, border-width .15s;
}

.field textarea {
  height: auto;
  min-height: 96px;
  padding: 16px;
  resize: vertical;
}

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  border-width: 2px;
  padding: 0 15px;
}

.field textarea:focus {
  padding: 15px;
}

.field .lbl {
  position: absolute;
  left: 12px;
  top: -8px;
  background: var(--surface-high);
  padding: 0 4px;
  font: var(--t-label-medium);
  font-size: 12px;
  color: var(--on-surface-variant);
  line-height: 1;
  pointer-events: none;
  transition: color .15s;
}

.field:focus-within .lbl {
  color: var(--primary);
}

.field .sup {
  font: var(--t-label-medium);
  font-size: 12px;
  color: var(--on-surface-variant);
  padding: 4px 16px 0;
}

.field.err .in, .field.err input, .field.err select, .field.err textarea {
  border-color: var(--error);
}

.field.err .lbl, .field.err .sup {
  color: var(--error);
}

/* ---------- Диалоги и модальные окна (Dialogs / Modals) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(29, 27, 32, .45);
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.overlay.open {
  display: flex;
}

.dialog, .modal {
  background: var(--surface-high);
  border-radius: var(--r-xl);
  padding: 24px;
  max-width: 560px;
  width: 100%;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  color: var(--on-surface);
  box-sizing: border-box;
}

.dialog-appbar, .modal-header, .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}

.dialog h2, .modal h2, .dialog-title {
  font: var(--t-headline-small);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  margin: 0;
  color: var(--on-surface);
}

.dialog-bar-action {
  display: none;
}

.dialog-close-btn, .modal-close-btn, .modal .close {
  border: none;
  background: none;
  color: var(--on-surface-variant);
  font-size: 24px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .15s, color .15s;
}

.dialog-close-btn:hover, .modal-close-btn:hover, .modal .close:hover {
  background: var(--surface-highest);
  color: var(--on-surface);
}

.modal label {
  display: block;
  font: var(--t-label-medium);
  font-size: 12px;
  color: var(--on-surface-variant);
  margin: 12px 0 6px;
}

.modal input, .modal select, .modal textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--outline);
  color: var(--on-surface);
  padding: 12px 14px;
  border-radius: var(--r-xs);
  font: var(--t-body-large);
  font-size: 15px;
  outline: none;
  transition: border-color .15s;
}

.modal input:focus, .modal select:focus, .modal textarea:focus {
  border-color: var(--primary);
  border-width: 2px;
  padding: 11px 13px;
}

.modal textarea {
  resize: vertical;
  min-height: 70px;
}

.modal .row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 24px;
  gap: 12px;
}

.modal .row-actions.split {
  justify-content: space-between;
}

.modal .linkgroup {
  display: flex;
  gap: 12px;
}

.modal button.linklike {
  background: none;
  border: none;
  color: var(--primary);
  font: var(--t-label-large);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.modal .hint {
  font: var(--t-body-medium);
  font-size: 13px;
  color: var(--on-surface-variant);
  margin-top: 8px;
  line-height: 1.4;
}

.modal .err {
  color: var(--error);
  font: var(--t-label-medium);
  font-size: 12px;
  margin-top: 8px;
  display: none;
}

/* Единое окно «+ Добавить» */
.modal-unified-add, .modal-person-edit {
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.modal-unified-add .modal-header, .modal-person-edit .modal-head {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  margin-bottom: 0;
  border-bottom: 1px solid var(--outline-variant);
}

.modal-unified-add .modal-body, .modal-person-edit .modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-unified-add .tab-pane {
  display: none;
}

.modal-unified-add .tab-pane.active {
  display: block;
}

/* ---------- Форма «Добавить» v2: капсула, чипы, постоянная высота ---------- */
.modal-unified-add {
  max-width: 640px;
  height: min(720px, 88vh);
  background: var(--surface);
}
.modal-unified-add .field .lbl { background: var(--surface); }
.modal-unified-add .modal-header {
  justify-content: flex-start;
  border-bottom: 0;
  padding: 12px 16px 4px 12px;
}
.modal-unified-add .dialog-title { font-size: 20px; line-height: 28px; }

/* переключатель-капсула вместо табов; выбранный сегмент залит цветом */
.add-seg {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 8px 24px 4px;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--surface-high);
}
.add-seg .add-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--on-surface-variant);
  font: var(--t-label-large);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.add-seg .add-tab-btn .sym { font-size: 18px; }
.add-seg .add-tab-btn:hover { color: var(--on-surface); }
.add-seg .add-tab-btn.active {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.modal-unified-add .modal-body { padding: 20px 24px 0; scrollbar-gutter: stable; display: flex; flex-direction: column; }
/* активная вкладка растягивается на всю высоту окна, чтобы кнопки стояли внизу и при коротком содержимом */
.modal-unified-add .tab-pane.active { display: flex; flex-direction: column; flex: 1 0 auto; }
.modal-unified-add .tab-pane form { display: flex; flex-direction: column; flex: 1 0 auto; }
.modal-unified-add .add-auth-note { flex: none; }
.modal-unified-add .tab-pane.active { animation: addPaneIn .18s ease-out; }
@keyframes addPaneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-unified-add .tab-pane.active { animation: none; } }
.modal-unified-add .add-auth-note { margin: 0 0 20px; }

/* поля: без подписей «Необязательно», плотнее */
.modal-unified-add .field { margin-bottom: 16px; }
.modal-unified-add .field .sup { display: none; }
.add-row-year { display: grid; grid-template-columns: 112px 1fr; gap: 12px; }

/* группа с подписью над чипами */
.add-group { margin: 4px 0 18px; }
.add-group-lbl {
  font: var(--t-label-medium);
  font-size: 12.5px;
  color: var(--on-surface-variant);
  margin: 0 0 8px 2px;
}
.add-group.field { margin-bottom: 18px; }
select.choice-src { display: none !important; }

/* чипы выбора: из select (кнопки) и из чекбоксов (label с input внутри) */
.choice-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.modal .choice-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--on-surface);
  font: var(--t-label-large);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.modal .choice-chip:hover { border-color: var(--outline); }
.modal .choice-chip .sym { display: none; font-size: 18px; margin-left: -4px; }
.modal .choice-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.modal .choice-chip.on, .modal .choice-chip:has(input:checked) {
  background: var(--primary-container);
  border-color: var(--primary-container);
  color: var(--on-primary-container);
}
.modal .choice-chip.on .sym, .modal .choice-chip:has(input:checked) .sym { display: inline; }
.modal .choice-chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* учёба: чипы заведений, под выбранными — строка с годами */
.modal-unified-add #uPStudyWrap .study-box-wrap { background: none; border: 0; padding: 0; margin: 0; }
.study-years {
  display: grid;
  grid-template-columns: 1fr 76px auto 92px;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-m);
  background: var(--surface-mid);
}
.study-years-name { font-size: 13.5px; color: var(--on-surface); line-height: 1.3; }
.modal .study-years input { height: 40px; padding: 8px 10px; font-size: 15px; text-align: center; }
.modal .study-years input:focus { padding: 7px 9px; }
.study-dash { color: var(--on-surface-variant); }
.study-years-plain { grid-template-columns: 92px auto 92px; justify-content: start; background: none; padding: 0; margin: 0; }
.modal-unified-add .other-years { margin: 14px 0 0; }
.modal-unified-add .other-years .lbl { position: static; display: block; margin: 0 0 6px 2px; padding: 0; background: none; transform: none; }
.modal-unified-add .other-years { display: flex; flex-direction: column-reverse; }

/* «+ Подробности» — раскрывает необязательные поля */
.add-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px -8px;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--primary);
  font: var(--t-label-large);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.add-more:hover { background: var(--surface-high); }
.add-more .sym { font-size: 20px; }
.add-more-box { display: none; }
.add-more-box.open { display: block; animation: addPaneIn .18s ease-out; }
.add-more-box > .choice-chip { margin-bottom: 16px; }

/* Малое окно-вопрос (снять с сайта, удалить): тот же вид, что у окна входа */
.modal.ask { max-width: 440px; padding: 0; background: var(--surface); overflow: hidden; }
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 0 24px; }
.ask .dialog-title { font-size: 20px; line-height: 28px; }
.ask-body { padding: 4px 24px 20px; }
.ask-text { margin: 0 0 14px; font: var(--t-body-medium); font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }
.ask-in { height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; line-height: 1.4; }
.ask-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--outline-variant); }

/* кнопки внизу всегда видны: прилипают к низу прокручиваемой области */
.modal-unified-add .row-actions {
  position: sticky;
  bottom: 0;
  margin: auto 0 0;
  padding: 12px 0 16px;
  background: var(--surface);
  border-top: 1px solid var(--outline-variant);
}
.modal-unified-add .hint { margin: 4px 0 24px; }

@media (max-width: 600px) {
  .modal-unified-add { height: 100vh; height: 100dvh; }
  .modal-unified-add .modal-header { padding: 0 16px; border-bottom: 0; background: var(--surface); }
  .add-seg { margin: 8px 16px 4px; }
  .add-seg .add-tab-btn { font-size: 13.5px; gap: 4px; }
  .modal-unified-add .modal-body { padding: 16px 16px 36px; }
  .study-years { grid-template-columns: 1fr 64px auto 76px; padding-left: 12px; }
  .study-years-name { font-size: 13px; }
}

/* ---------- Три поля имени (W2): в ряд на десктопе, столбиком на телефоне ---------- */
.name-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .name-fields-row {
    grid-template-columns: 1fr;
  }
}

.modal-unified-add .study-box-wrap, .study-box-wrap {
  background: var(--surface-mid);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-s);
  padding: 12px 16px;
  margin: 8px 0 16px;
}

.modal-unified-add .study-check-row, .study-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: var(--t-body-medium);
  font-size: 14px;
  margin: 6px 0;
}

.modal-unified-add .study-check-row input[type="checkbox"], .study-check-row input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.modal-person-edit .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}

.modal-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* На мобильных (< 600px) диалоги полноэкранные (full-screen dialog) */
@media (max-width: 600px) {
  .overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .overlay .dialog, .overlay .modal, .overlay .modal-unified-add, .overlay .modal-person-edit {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
  }
  .dialog-appbar, .modal-header, .modal-head {
    height: 56px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--outline-variant);
    flex: none;
    gap: 8px;
    background: var(--surface-high);
  }
  .dialog-appbar .dialog-close-btn, .modal-header .modal-close-btn, .modal-head .close, .modal .close {
    order: 1;
    margin: 0;
    position: static;
  }
  .dialog-appbar .dialog-title, .modal-header h2, .modal-head h2 {
    order: 2;
    flex: 1;
    margin: 0;
    font: var(--t-title-large);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dialog-appbar .dialog-bar-action {
    order: 3;
    display: inline-flex;
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
    flex: none;
  }
  .overlay .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px 36px;
    -webkit-overflow-scrolling: touch;
  }
  .overlay .modal-footer, .overlay .modal .row-actions {
    display: none;
  }
  .overlay .modal-grid-2col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

/* ---------- Snackbar (вместо тостов) ---------- */
.snackbar, .site-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  padding: 14px 16px;
  border-radius: var(--r-xs);
  font: var(--t-body-medium);
  font-size: 14px;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.snackbar.show, .site-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
  .snackbar, .site-toast {
    bottom: 96px;
    width: calc(100% - 32px);
    justify-content: space-between;
  }
}

/* ---------- Подсказки (Tooltip: plain, --inverse-surface) ---------- */
.tooltip, .nav-hint {
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  border-radius: var(--r-xs);
  font: var(--t-body-medium);
  font-size: 13px;
  line-height: 18px;
  padding: 6px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

/* ---------- Бейджи статусов (Badges) ---------- */
.badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font: var(--t-label-medium);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge .sym {
  font-size: 16px;
}

.badge.b-ok, .badge.confirmed {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.badge.b-wait, .badge.pending, .badge.unconfirmed {
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
}

.badge.b-no, .badge.rejected {
  background: var(--error-container);
  color: var(--on-error-container);
}

/* ---------- Выпадающее меню профиля ---------- */
.who-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface-high);
  border-radius: var(--r-m);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  width: 260px;
  padding: 8px;
  z-index: 50;
}

.dropdown.open {
  display: block;
}

.dropdown .opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--r-s);
  padding: 10px 12px;
  cursor: pointer;
  font: var(--t-label-large);
  font-size: 14px;
  text-decoration: none;
  color: var(--on-surface);
  transition: background .15s;
}

.dropdown .opt:hover {
  background: var(--surface-highest);
}

.profile-card {
  padding: 12px;
  border-bottom: 1px solid var(--outline-variant);
  margin-bottom: 4px;
}

.profile-card .pn {
  font: var(--t-title-medium);
  font-size: 15px;
  font-weight: 500;
  color: var(--on-surface);
}

.profile-card .pr {
  font: var(--t-body-medium);
  font-size: 13px;
  color: var(--on-surface-variant);
  margin-top: 2px;
}

/* ---------- Универсальная иконка метаданных и поповер ---------- */
.meta-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--on-surface-variant);
  cursor: pointer;
  border-radius: 50%;
  vertical-align: middle;
  transition: color .15s, background .15s;
  flex-shrink: 0;
  outline: none;
}

.meta-icon-btn:hover {
  color: var(--on-surface);
  background: var(--surface-high);
}

.meta-icon-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.meta-icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

.meta-popover {
  position: fixed;
  z-index: 1000;
  background: var(--surface-high);
  border-radius: var(--r-m);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  padding: 16px;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: 85vh;
  overflow-y: auto;
  font: var(--t-body-medium);
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-surface);
}

.meta-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--outline-variant);
}

.meta-popover-title {
  font: var(--t-label-medium);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.meta-popover-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--on-surface-variant);
  cursor: pointer;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: color .15s, background .15s;
}

.meta-popover-close:hover {
  color: var(--on-surface);
  background: var(--surface-highest);
}

.meta-popover-row {
  margin-bottom: 5px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.meta-popover-row b {
  color: var(--on-surface);
  font-weight: 600;
}

.meta-popover-row a {
  color: var(--primary);
  text-decoration: none;
}

.meta-popover-row a:hover {
  text-decoration: underline;
}

.meta-popover-history-sec {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--outline-variant);
}

.meta-popover-history-title {
  font: var(--t-label-medium);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 6px;
}

.meta-popover-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.meta-popover-history-item {
  font-size: 12px;
  line-height: 1.45;
  color: var(--on-surface);
  padding: 5px 0;
  border-bottom: 1px dashed var(--outline-variant);
}

.meta-popover-history-item:last-child {
  border-bottom: none;
}

.meta-popover-history-item b {
  font-weight: 600;
}

/* ---------- TimelineJS: полностью родной вид, шрифты в том числе ---------- */
.tl-message-full{ display:none; } /* английская подсказка про свайп */

/* ---------- Доступность и фокус ---------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

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

/* ---------- Шапка: тонкая, без разделителя, линия вкладки рядом с текстом, правый блок по краю ---------- */
.appbar {
  border-bottom: 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--on-surface) 7%, transparent);
}
.appbar .row { height: 52px; }
.appbar-tabs { gap: 28px; }
.appbar .tab,
.navbar .nav-item {
  font-family: var(--font-menu);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.appbar .tab { padding: 0; }
.appbar .tab.on::after, .appbar .tab.active::after { bottom: 10px; right: .1em; height: 2px; }
.navbar .nav-item { letter-spacing: .06em; font-size: 13px; }

/* Справа три обычных пункта меню, без рамок и заливок: Модерация, Добавить, Войти */
.appbar-right { gap: 24px; }
.appbar .btn {
  font-family: var(--font-menu);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.appbar .btn.appbar-add-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: none;
}
.appbar .btn.appbar-add-btn .sym { font-size: 22px; }
.appbar .btn.appbar-add-btn:hover { background: color-mix(in srgb, var(--primary) 82%, var(--surface)); box-shadow: none; text-decoration: none; }
.appbar #btnAuth {
  height: 32px;
  padding: 0;
  min-width: 0;
  background: none;
  color: var(--on-surface);
  box-shadow: none;
}
.appbar #btnAuth:hover { background: none; opacity: .6; text-decoration: none; }
.appbar .who-wrap { margin-right: -8px; }
.appbar .who-name { font-family: var(--font-menu); font-size: 15px; font-weight: 400; letter-spacing: .04em; }

.modlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 15px/16px var(--font-menu);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-surface-variant);
}
.modlink:hover { color: var(--on-surface); }
.modlink .badge-count {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--on-surface);
  color: var(--surface);
  font: 700 12px/1 var(--font-menu);
  letter-spacing: 0;
}
@media (max-width: 600px) { .appbar-right { gap: 16px; } }

/* Главная: вкладки не показываем, пока не посчитан отступ по фото (или пока его нет в кэше) */
html:not(.nav-ready) body[data-page="index"] .appbar-tabs { visibility: hidden; }

/* ---------- Прелоадер ---------- */
html::before, html::after {
  content: "";
  position: fixed;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility 0s .4s;
}
html::before { inset: 64px 0 0 0; background: var(--surface); z-index: 9998; }
html::after {
  top: calc(50% + 32px); left: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid var(--primary-container);
  border-top-color: var(--primary);
  border-radius: 50%;
  z-index: 9999;
  animation: preloader-spin .9s linear infinite;
}
html.preloading::before, html.preloading::after {
  opacity: 1; visibility: visible; pointer-events: auto; transition: none;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html::before, html::after { transition: none; }
  html::after { animation-duration: 2.4s; }
}

/* Меню остаётся на месте: под шапкой и нижней панелью прелоадер не рисуется */
@media (max-width: 600px) {
  html::before { bottom: 80px; }
  html::after { top: calc(50% - 8px); }
}

/* Переход между страницами: шапка и нижняя панель неподвижны, меняется только содержимое */
@view-transition { navigation: auto; }
.appbar { view-transition-name: appbar; }
.navbar { view-transition-name: navbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* Плашка для гостей в окне «Добавить на сайт» */
.add-auth-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 24px 0;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 13.5px;
  line-height: 1.4;
}
.add-auth-note .sym { font-size: 20px; flex-shrink: 0; }
.add-auth-note span:nth-child(2) { flex: 1; }
.add-auth-note .btn { flex-shrink: 0; }

/* Плашка демо-режима (?demo в адресе) — в шапке слева от «Добавить» */
.demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.demo-pill .sym { font-size: 16px; }
body > .demo-pill { position: fixed; left: 12px; bottom: 12px; z-index: 900; }

/* ==========================================================================
   Окно «Добавить» (v2): одна запись по умолчанию, «Списком» — пакетный режим
   ========================================================================== */
/* ---------- окно ---------- */
.nd-scrim{position:fixed; inset:0; background:rgba(13,27,42,.32); display:none; align-items:center; justify-content:center; z-index:100}
.nd-scrim.open{display:flex}
.nd{background:var(--surface); border-radius:var(--r-xl); box-shadow:0 12px 40px rgba(13,27,42,.18);
    width:640px; max-width:96vw; height:min(660px, 92vh); display:flex; flex-direction:column; overflow:hidden}
.nd[data-mode="batch"]{width:min(1200px, 94vw); height:min(760px, 90vh)}

.nd-head{display:flex; align-items:center; gap:12px; padding:16px 16px 0 24px}
.ad-kind{display:inline-flex; background:var(--surface-mid); border-radius:var(--r-full); padding:3px}
.ad-kind button{border:0; background:transparent; font:var(--t-label-large); color:var(--on-surface-variant); height:32px; padding:0 14px; border-radius:var(--r-full); display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.ad-kind button .sym{font-size:18px}
.ad-kind button.on{background:var(--surface); color:var(--on-surface); box-shadow:0 1px 3px rgba(13,27,42,.14)}
.nd-x{margin-left:auto; border:0; background:none; width:36px; height:36px; border-radius:var(--r-full); display:inline-flex; align-items:center; justify-content:center; color:var(--on-surface-variant); cursor:pointer}
.nd-x:hover{background:var(--surface-low)}

.nd-body{flex:1; overflow:auto; padding:28px 32px 8px}
.nd-pane{display:none}
.nd-pane.on{display:block}

.nd-foot{display:flex; align-items:center; gap:16px; padding:14px 24px 18px 32px; border-top:1px solid var(--surface-mid)}
.nd-foot-l{margin-right:auto; display:flex; flex-direction:column; gap:4px; min-width:0}
.nd-note{font:var(--t-body-medium); color:var(--on-surface-variant)}
.nd-alt{font:var(--t-body-medium); color:var(--on-surface-variant); margin:18px 0 20px}
.nd-alt:empty{display:none}
.nd-alt-link{border:0; background:none; padding:0; font:inherit; color:var(--on-surface); cursor:pointer; text-decoration:underline; text-decoration-color:var(--outline); text-underline-offset:3px}
.nd-alt-link:hover{text-decoration-color:var(--on-surface)}
.nd-foot .btn{white-space:nowrap}
.nd-foot .btn:disabled{opacity:.4; cursor:default}

/* ---------- одна запись ---------- */
.s-big{width:100%; border:0; border-bottom:1.5px solid var(--outline-variant); padding:6px 0 10px; font:700 26px/34px "PT Sans Narrow", "PT Sans", sans-serif; color:var(--on-surface); background:transparent; outline:none}
.s-big:focus{border-bottom-color:var(--primary)}
.s-big::placeholder, .s-line::placeholder, .s-area::placeholder, .s-year::placeholder{color:var(--outline)}
.s-row{display:flex; align-items:flex-end; gap:12px}
.s-parsed{min-height:20px; margin:8px 0 22px; font:var(--t-body-medium); color:var(--on-surface-variant)}
.s-parsed b{font-weight:500; color:var(--on-surface)}
.s-parsed .dup{color:#7A4B00}
.s-parsed a{color:inherit}
.s-sec{margin-bottom:20px}
.s-lab{font:var(--t-label-large); color:var(--on-surface-variant); margin-bottom:8px}
.s-sec .chips{gap:6px}
.s-sec .chip{height:32px; padding:0 12px; white-space:nowrap}
#sSchools{flex-wrap:nowrap}
.s-school{display:inline-flex; align-items:center; gap:0}
.s-school.on .chip{border-top-right-radius:0; border-bottom-right-radius:0}
.s-school input{display:none; width:54px; height:32px; box-sizing:border-box; border:1px solid var(--primary); border-left:0; border-radius:0 var(--r-s) var(--r-s) 0; padding:0 8px; font:var(--t-body-medium); outline:none}
.s-school.on input{display:block}
.s-detail{min-height:66px}
.s-area, .s-line{width:100%; box-sizing:border-box; border:1px solid var(--outline-variant); border-radius:var(--r-m); padding:10px 12px; font:var(--t-body-large); color:var(--on-surface); background:var(--surface); outline:none}
.s-area{resize:none; min-height:68px; font-family:inherit}
.s-area:focus, .s-line:focus{border-color:var(--primary)}
.s-stack{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.s-stack[hidden]{display:none}
.s-year{width:84px; flex:none; border:0; border-bottom:1.5px solid var(--outline-variant); padding:6px 0 10px; font:700 26px/34px "PT Sans Narrow", "PT Sans", sans-serif; color:var(--on-surface); background:transparent; outline:none; font-variant-numeric:tabular-nums}
.s-year:focus{border-bottom-color:var(--primary)}

.ad-tog{border:1px solid var(--outline-variant); background:var(--surface); border-radius:var(--r-s); height:28px; min-width:36px; padding:0 8px; font:var(--t-label-large); color:var(--on-surface); cursor:pointer}
.ad-tog.empty{color:var(--outline)}
.s-row .ad-tog{margin-bottom:12px}

/* ---------- списком ---------- */
.ad-grid{display:grid; grid-template-columns:330px minmax(0, 1fr); gap:28px; align-items:start}
.ad-left{display:flex; flex-direction:column; gap:16px}
.ad-label{font:var(--t-label-large); color:var(--on-surface); margin-bottom:8px}
.ad-hint{font:var(--t-body-medium); color:var(--on-surface-variant)}
.ad-common{background:var(--surface-low); border-radius:var(--r-l); padding:14px; display:flex; flex-direction:column; gap:12px}
.ad-common .chips{gap:6px}
.ad-common .chip{height:30px; padding:0 11px; font-size:13.5px}
.ad-year{width:96px; height:32px; border:1px solid var(--outline); border-radius:var(--r-s); padding:0 10px; font:var(--t-body-large); background:var(--surface)}
.ad-text{width:100%; min-height:140px; resize:vertical; box-sizing:border-box; border:1px solid var(--outline); border-radius:var(--r-l); padding:12px 14px; font:var(--t-body-large); line-height:26px; color:var(--on-surface); background:var(--surface)}
.ad-text:focus, .ad-year:focus{outline:2px solid var(--primary); outline-offset:-1px; border-color:transparent}
.ad-sample{border:0; background:none; padding:0; font:var(--t-label-large); color:var(--primary); cursor:pointer; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.ad-right{min-width:0}
.ad-sum{display:flex; align-items:baseline; gap:16px; margin-bottom:10px; min-height:28px}
.ad-sum b{font:var(--t-title-large); color:var(--on-surface)}
.ad-sum span{font:var(--t-body-medium); color:var(--on-surface-variant)}
.ad-empty{border:1px dashed var(--outline-variant); border-radius:var(--r-l); padding:48px 32px; text-align:center; color:var(--on-surface-variant); font:var(--t-body-large)}
table.ad-t{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font:var(--t-body-medium)}
.ad-t th{font:var(--t-label-medium); color:var(--on-surface-variant); text-align:left; padding:0 8px 8px; border-bottom:1px solid var(--outline-variant); white-space:nowrap}
.ad-t td{padding:4px 2px; border-bottom:1px solid var(--surface-mid); vertical-align:middle}
.ad-t tr.dup td{opacity:.45}
.ad-t tr.dup td.ad-st{opacity:1}
.ad-t input{width:100%; box-sizing:border-box; border:1px solid transparent; border-radius:var(--r-s); padding:6px 6px; font:var(--t-body-medium); background:transparent; color:var(--on-surface)}
.ad-t input:hover{border-color:var(--outline-variant)}
.ad-t input:focus{outline:none; border-color:var(--primary); background:var(--surface)}
.ad-t .num{color:var(--outline); text-align:right; padding-right:6px; font:var(--t-label-medium)}
.ad-t input.y{font-variant-numeric:tabular-nums}
.ad-st{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:var(--t-label-medium)}
.ad-badge{display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--r-full)}
.ad-badge .sym{font-size:15px}
.ad-badge.ok{background:var(--primary-container); color:var(--on-primary-container)}
.ad-badge.warn{background:#FCEFD9; color:#7A4B00}
.ad-badge.dup{background:var(--surface-mid); color:var(--on-surface-variant)}
.ad-del{border:0; background:none; color:var(--outline); cursor:pointer; padding:4px; border-radius:var(--r-full); display:inline-flex}
.ad-del:hover{background:var(--surface-mid); color:var(--on-surface)}
.nd-scrim.open .nd{animation:ndIn .16s ease-out}
@keyframes ndIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .nd-scrim.open .nd{animation:none} }
body.nd-open{overflow:hidden}

/* ==========================================================================
   Поля входа (почта, код): живут в окне «Добавить»
   ========================================================================== */
.auth-in{display:block; width:100%; box-sizing:border-box; height:44px; padding:0 14px; border:1px solid var(--outline-variant);
  border-radius:var(--r-m); background:var(--surface); font:var(--t-body-large); color:var(--on-surface); outline:none; transition:border-color .15s}
.auth-in:focus{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary)}
.auth-in::placeholder{color:var(--outline)}
.auth-code{height:52px; font:700 26px/1 "PT Sans", sans-serif; letter-spacing:.32em; text-align:center; padding:0 0 0 .32em; font-variant-numeric:tabular-nums}
.auth-code::placeholder{letter-spacing:.32em; color:var(--outline-variant)}
.auth-err{font:var(--t-body-medium); color:var(--error); min-height:0; margin-top:8px}
.auth-err:empty{display:none}
.auth-link{border:0; background:none; padding:4px 0; font:var(--t-label-large); color:var(--on-surface-variant); cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--outline-variant); text-underline-offset:3px}
.auth-link:hover{color:var(--on-surface)}
.auth-link:disabled{text-decoration:none; color:var(--outline); cursor:default}

/* ==========================================================================
   Заглушка вместо сайта (v1 — только компьютер): телефоны, планшеты (основной ввод — касание),
   окна уже 1024px (там амфитеатр превращается в круг) или ниже 600px
   ========================================================================== */
.mobile-stub{display:none}
@media (max-width: 1023px), (max-height: 599px), (hover: none) and (pointer: coarse){
  body > *:not(.mobile-stub){display:none !important}
  body{overflow:hidden; background:var(--surface)}
  html.preloading::before, html.preloading::after{display:none !important}
  .mobile-stub{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    min-height:100dvh; padding:32px 28px; box-sizing:border-box; color:var(--on-surface)}
  .mobile-stub-photo{width:160px; height:184px; object-fit:cover; border-radius:var(--r-m); margin-bottom:28px}
  .mobile-stub h1{font:var(--t-headline-small); margin:0}
  .mobile-stub-years{font:var(--t-body-medium); color:var(--on-surface-variant); margin:4px 0 24px}
  .mobile-stub p:last-child{font:var(--t-body-large); color:var(--on-surface-variant); max-width:340px; margin:0; text-wrap:balance}
}

/* Скрытая ссылка на журнал всех изменений — только в технической информации (ⓘ) у записей */
.meta-popover-journal{display:block; margin-top:10px; padding-top:8px; border-top:1px solid var(--outline-variant); font:var(--t-label-medium); color:var(--outline); text-decoration:none}
.meta-popover-journal:hover{color:var(--on-surface); text-decoration:underline}

/* ---------- «Добавить» как ссылка в тексте ---------- */
  .lead-add {
    color: var(--primary, #0D1B2A);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1.5px dashed currentColor;
    cursor: pointer;
    transition: background .18s ease;
  }
  .lead-add:hover { background: rgba(13, 27, 42, 0.06); }

/* ---------- «О сайте»: журнал, обратная связь, авторство (кнопка ? справа в шапке) ---------- */
.about-wrap { position: relative; display: inline-flex; margin-left: -8px; }
.about-btn { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--on-surface-variant); cursor: pointer; display: grid; place-items: center; }
.about-btn:hover { background: var(--surface-high); color: var(--on-surface); }
.about-btn .sym { font-size: 22px; }
.about-pop { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 300px; padding: 20px; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--r-m); box-shadow: 0 4px 16px rgba(0,0,0,.12); z-index: 60; text-transform: none; letter-spacing: 0; }
.about-pop.open { display: block; }
.about-pop p { margin: 0 0 8px; font: 400 14px/20px "PT Sans", sans-serif; color: var(--on-surface-variant); }
.about-t { font: 700 12px/16px var(--font-menu); letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface); margin-bottom: 8px; }
.about-t2 { margin-top: 20px; }
.about-link { display: block; padding: 3px 0; font: 400 15px/22px "PT Sans", sans-serif; color: var(--on-surface); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--outline-variant); }
.about-link:hover { text-decoration-color: currentColor; }
.about-credit { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--outline-variant); font: 400 12px/16px "PT Sans", sans-serif; color: var(--outline); }
.about-credit a { color: inherit; text-decoration: none; }
.about-credit a:hover { color: var(--on-surface-variant); text-decoration: underline; }


/* ==========================================================================
   Правый блок шапки: один ритм. Текстовые пункты и круглые кнопки — высота 36,
   один шрифт и цвет; оба выпадающих окна («имя» и «?») — одна карточка.
   ========================================================================== */
.appbar .appbar-right { gap: 4px; }
.appbar .appbar-right .modlink,
.appbar .appbar-right #btnAuth,
.appbar .appbar-right .who-main {
  height: 36px; padding: 0 12px; margin: 0; border-radius: var(--r-full); border: 0; background: none; box-shadow: none; min-width: 0;
  font: 400 15px/1 var(--font-menu); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--on-surface-variant); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .15s, color .15s;
}
.appbar .appbar-right .modlink:hover,
.appbar .appbar-right #btnAuth:hover,
.appbar .appbar-right .who-main:hover { background: var(--surface-mid); color: var(--on-surface); opacity: 1; text-decoration: none; }
.appbar .appbar-right .who-wrap { margin: 0; }
.appbar .appbar-right .who-name { font: inherit; letter-spacing: inherit; color: inherit; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.appbar .appbar-right .btn.appbar-add-btn { width: 36px; min-width: 36px; height: 36px; margin: 0 4px; }
.appbar .appbar-right .about-wrap { margin: 0; }
.appbar .appbar-right .about-btn { width: 36px; height: 36px; }
.appbar .appbar-right .demo-pill { margin-right: 8px; }

.appbar .dropdown, .appbar .about-pop {
  width: 300px; padding: 20px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: var(--r-m); box-shadow: 0 4px 16px rgba(0,0,0,.12); top: calc(100% + 8px); right: 0; z-index: 60;
}
.appbar .dropdown#whoDropdown { width: max-content; min-width: 190px; max-width: 280px; padding: 14px 18px; text-align: right; }
.appbar .dropdown#whoDropdown .opt { width: 100%; text-align: right; }
.appbar .profile-card .pn, .appbar .profile-card .pr { overflow-wrap: anywhere; }
.appbar .profile-card .pm { display: inline-block; margin-top: 10px; padding: 1px 10px; border: 1px solid var(--outline-variant); border-radius: 999px; font: 400 13px/20px "PT Sans", sans-serif; color: var(--outline); }
.appbar .profile-card .pm.on { background: var(--primary, #0D1B2A); border-color: var(--primary, #0D1B2A); color: #fff; font-weight: 700; }
.appbar .about-pop, .appbar .about-pop .about-lead { text-align: right; }
.appbar .about-pop .about-row { flex-direction: row-reverse; justify-content: flex-start; }
.appbar .profile-card { padding: 0 0 10px; margin: 0 0 8px; border-bottom: 1px solid var(--outline-variant); }
.appbar .profile-card .pn { font: 700 16px/22px "PT Sans", sans-serif; color: var(--on-surface); }
.appbar .profile-card .pr { font: 400 14px/20px "PT Sans", sans-serif; color: var(--on-surface-variant); margin-top: 2px; }
.appbar .dropdown .opt { padding: 3px 0; border-radius: 0; background: none; font: 400 15px/22px "PT Sans", sans-serif; width: auto; display: block; }
.appbar .dropdown .opt .t { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--outline-variant); }
.appbar .dropdown .opt:hover { background: none; }
.appbar .dropdown .opt:hover .t { text-decoration-color: currentColor; }

/* чекбокс «известный человек» */
.s-notable{display:flex; gap:12px; align-items:flex-start; margin-top:16px; cursor:pointer}
.s-notable input{position:absolute; opacity:0; pointer-events:none}
.s-notable-box{flex:none; width:20px; height:20px; margin-top:1px; box-sizing:border-box; border:1.5px solid var(--outline); border-radius:5px; display:inline-flex; align-items:center; justify-content:center; color:transparent; transition:background .12s, border-color .12s}
.s-notable-box .sym{font-size:16px; font-variation-settings:"wght" 600}
.s-notable input:checked + .s-notable-box{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.s-notable input:focus-visible + .s-notable-box{outline:2px solid var(--primary); outline-offset:2px}
.s-notable-txt{display:flex; flex-direction:column; gap:2px; font:var(--t-body-medium); color:var(--on-surface-variant)}
.s-notable-txt b{font-weight:500; color:var(--on-surface)}

/* раздел статьи: три карточки одинаковой ширины */
.sec-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.sec-card{display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; padding:14px; border:1px solid var(--outline-variant); border-radius:var(--r-m); background:var(--surface); cursor:pointer; font-family:inherit; color:var(--on-surface)}
.sec-card:hover{border-color:var(--outline)}
.sec-card.on{border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); background:var(--surface-low)}
.sec-t{font:700 16px/20px "PT Sans", sans-serif}
.sec-d{font:var(--t-body-medium); color:var(--on-surface-variant)}
@media (max-width:620px){ .sec-cards{grid-template-columns:1fr} }
#ndAltB{margin:6px 0 0}

/* правки 22.10 (4): чекбокс «известный» компактнее; подсказка «списком» ниже; шапка справа */
.s-notable{align-items:center; gap:8px; margin-top:14px}
.s-notable-box{width:16px; height:16px; margin-top:0; border-width:1.5px; border-radius:4px}
.s-notable-box .sym{font-size:13px}
.s-notable-txt{font:var(--t-body-medium); color:var(--on-surface)}
.nd-alt{margin-top:28px}
#ndAltB{margin:14px 0 0}
.appbar .appbar-right { gap: 8px; }
.appbar .appbar-right .modlink,
.appbar .appbar-right #btnAuth,
.appbar .appbar-right .who-main { color: var(--on-surface); padding: 0 8px; }
.appbar .appbar-right .btn.appbar-add-btn { margin: 0; }
.appbar .appbar-right .about-btn { border: 1.5px solid var(--on-surface-variant); background: none; color: var(--on-surface-variant); width: 30px; height: 30px; }
.appbar .appbar-right .about-btn:hover { background: none; border-color: var(--on-surface); color: var(--on-surface); }
.about-q { font: 400 15px/1 var(--font-menu); }
.appbar .about-pop { width: 240px; padding: 14px 16px; }
.appbar .about-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.appbar .about-pop .about-credit { margin-top: 10px; padding-top: 10px; }

/* правки 22.10 (5) */
.nsl-head .nsl-lead { max-width: 900px; }
.art-card, .art-card * { text-wrap: pretty; }

/* форма человека: три блока с одинаковым ритмом — имя · связь с Т.И. · дополнения */
#sPeople .s-parsed { margin: 6px 0 26px; }
#sPeople .s-sec { margin-bottom: 0; }
#sPeople #sRel + * , #sPeople .s-detail { margin-top: 20px; }
#sPeople .s-sec:first-of-type { padding-bottom: 0; }
#sPeople .s-stack { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--surface-mid); }
#sPeople .s-lab { margin-bottom: 10px; }
.s-notable { margin-top: 16px; }
.s-notable-txt i { font-style: normal; color: var(--on-surface-variant); }
.nd-alt { margin: 24px 0 8px; }
#ndAlt { padding-top: 0; }

/* фото к событию */
.s-photo { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.s-photo-add { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border: 1px dashed var(--outline); border-radius: var(--r-full); background: none; color: var(--on-surface-variant); font: var(--t-body-medium); cursor: pointer; }
.s-photo-add:hover { color: var(--on-surface); border-color: var(--on-surface-variant); }
.s-photo-add .sym { font-size: 20px; }
.s-photo-has { display: flex; align-items: center; gap: 12px; font: var(--t-body-medium); color: var(--on-surface-variant); }
.s-photo-has[hidden], .s-photo-add[hidden] { display: none; }
.s-photo-has img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.s-photo-del { border: 0; background: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: var(--on-surface-variant); display: grid; place-items: center; }
.s-photo-del:hover { background: var(--surface-mid); }
.s-photo-err { font: var(--t-body-medium); color: #7A4B00; }

/* шапка справа: «Добавить» · «Войти» · точка-подсказка */
.appbar .appbar-right { gap: 6px; }
.appbar .appbar-right .btn.appbar-add-btn { width: auto; min-width: 0; height: 36px; padding: 0 18px; margin: 0 4px 0 0; border-radius: var(--r-full); font-size: 14px; letter-spacing: .1em; }
.appbar .appbar-right .about-btn { width: 24px; height: 36px; border: 0; border-radius: 0; background: none; }
.appbar .appbar-right .about-btn:hover { background: none; }
.about-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--outline); transition: background .15s, transform .15s; display: block; }
.about-btn:hover .about-dot, .about-wrap:hover .about-dot { background: var(--on-surface); transform: scale(1.3); }
.appbar .about-pop { width: 270px; padding: 16px 18px; }
.about-pop .about-t { margin-bottom: 8px; }
.about-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font: 400 15px/22px "PT Sans", sans-serif; color: var(--on-surface); text-decoration: none; }
.about-row svg { flex: none; color: var(--on-surface-variant); }
.about-row:hover span { text-decoration: underline; text-underline-offset: 3px; }
.about-journal { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--outline-variant); }
.about-pop .about-credit { border-top: 0; padding-top: 0; margin-top: 12px; }
.s-notable-txt { display: block; }

/* правки 22.10 (6) */
.s-photo-add { border: 1px solid var(--outline-variant); background: var(--surface-low); color: var(--on-surface); padding: 0 16px 0 12px; transition: background .15s, border-color .15s; }
.s-photo-add:hover { background: var(--surface-mid); border-color: var(--outline); color: var(--on-surface); }
.s-photo-add svg { flex: none; color: var(--on-surface-variant); }
.appbar .appbar-right .modlink:hover,
.appbar .appbar-right #btnAuth:hover,
.appbar .appbar-right .who-main:hover { background: none; color: var(--on-surface); }
.appbar .appbar-right .modlink,
.appbar .appbar-right #btnAuth,
.appbar .appbar-right .who-main { color: var(--on-surface-variant); padding: 0 4px; }
.appbar .appbar-right .btn.appbar-add-btn { gap: 6px; padding: 0 18px 0 12px; }
.appbar .appbar-right .btn.appbar-add-btn .sym { font-size: 19px; }
.appbar .about-pop .about-lead { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--outline-variant); font: 400 14px/20px "PT Sans", sans-serif; color: var(--on-surface-variant); }
.about-row span { text-transform: none; }
.appbar .about-pop { width: 280px; }
.jr-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(13,27,42,.42); display: grid; place-items: center; padding: 24px; }
.jr-dialog { position: relative; width: min(860px, 100%); height: min(86dvh, 900px); background: var(--surface); border-radius: var(--r-l, 16px); box-shadow: 0 12px 40px rgba(0,0,0,.25); overflow: hidden; }
.jr-dialog iframe { width: 100%; height: 100%; border: 0; display: block; }
.jr-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface); color: var(--on-surface-variant); cursor: pointer; display: grid; place-items: center; }
.jr-close:hover { background: var(--surface-mid); color: var(--on-surface); }
body.jr-open { overflow: hidden; }
html.embed .appbar, html.embed .navbar, html.embed .bottom-nav { display: none !important; }
html.embed body { padding-top: 0; }
@media (max-width: 600px) { .jr-overlay { padding: 0; } .jr-dialog { height: 100dvh; border-radius: 0; } }
html.embed .page { margin: 0; max-width: none; padding: 32px 44px 40px 36px; }
html.embed .jr-day { max-width: none; }

/* Имя вошедшего: отделено от «Модерации» тонкой линией, обычным регистром */
.appbar .appbar-right .who-wrap { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--outline-variant); }
.appbar .appbar-right .who-main { text-transform: none; letter-spacing: .02em; font-size: 16px; color: var(--on-surface); }

/* Описание на титульном слайде: строки примерно равной длины, без одинокого хвоста */
#timeline-embed .tl-slide-titleslide .tl-text-content p { text-wrap: balance; }

/* Вход и регистрация в окне «Добавить»: окно не меняет размер, почта и код — сверху, «о себе» — под ними */
.nd-welcome, .nd-acc{display:none}
.nd[data-gate="register"] .nd-acc{display:block}
.nd[data-gate="register"] .nd-head{position:absolute; top:0; right:0; padding:16px 16px 0 0; z-index:2}
.nd[data-gate="register"] .ad-kind{display:none}
.nd{position:relative}
.nd[data-gate="register"] #sPeople .s-stack, .nd[data-gate="register"] #sPeople .s-notable,
.nd[data-gate="self"] #sPeople .s-stack, .nd[data-gate="self"] #sPeople .s-notable{display:none}
.nd-wel-title{font:var(--t-title-large); margin:0 0 6px; color:var(--on-surface)}
.nd-wel-lead{font:var(--t-body-medium); color:var(--on-surface-variant); margin:0 0 18px; max-width:520px}
.nd-acc{margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--surface-mid)}
.nd-acc-grid{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center}
.nd-acc-btn{height:44px; min-width:150px; justify-content:center}
.nd-acc-back{justify-self:end; white-space:nowrap}
.nd-acc .auth-in:disabled{background:var(--surface-low); color:var(--on-surface-variant)}
.nd-acc .auth-code{height:44px; font:700 20px/1 "PT Sans", sans-serif; letter-spacing:.3em; text-align:left; padding:0 14px; font-variant-numeric:tabular-nums}
.nd-acc .auth-code::placeholder{letter-spacing:0; font:var(--t-body-large); color:var(--outline)}
.nd-note.err{color:var(--error)}
.nd[data-gate="register"]:not([data-verified="1"]) #sPeople{display:none}
.nd[data-gate="register"]:not([data-verified="1"]) .nd-acc{margin-bottom:0; padding-bottom:0; border-bottom:0}
.nd-note b{color:var(--on-surface); font-weight:700; word-break:break-all}
@media (max-width: 600px){ .nd-acc-grid{grid-template-columns:1fr} .nd-acc-back{justify-self:start} }
.nd[data-verified="1"] .nd-acc{display:none !important}
.nd[data-gate]{transition:height .2s ease}
.nd[data-gate="register"]:not([data-verified="1"]){height:min(380px, 92vh)}
@media (prefers-reduced-motion: reduce){ .nd[data-gate]{transition:none} }

/* ---------- «Списком»: компактный блок для людей, широкое поле для событий ---------- */
.ad-common{gap:10px; padding:12px}
.ad-common .ad-label{margin-bottom:6px}
.ad-common .chip{padding:0 10px}
.ad-yearrow{display:flex; align-items:center; gap:10px; margin-top:8px}
.ad-yearrow .ad-year{width:84px; flex:none}
.ad-yearrow .ad-hint{font:var(--t-label-medium)}
.ad-tip{display:flex; align-items:center; gap:6px; margin-bottom:8px; font:var(--t-label-medium); color:var(--on-surface-variant)}
.ad-tip .sym{font-size:16px}

.nd[data-mode="batch"] .nd-body{display:flex; flex-direction:column}
.nd[data-mode="batch"] #bPane.on{flex:1; min-height:0; display:flex}
.nd[data-mode="batch"] .ad-grid{flex:1; min-height:0; width:100%; align-items:stretch}
.nd[data-mode="batch"] .ad-left{min-height:0}
.nd[data-mode="batch"] .ad-left > div:last-child{flex:1; min-height:0; display:flex; flex-direction:column}
.nd[data-mode="batch"] .ad-text{flex:1; min-height:120px; resize:none}
.nd[data-mode="batch"] .ad-right{min-height:0; display:flex; flex-direction:column}
.nd[data-mode="batch"] #adPreview{flex:1; min-height:0; overflow:auto}
.nd[data-mode="batch"][data-kind="events"] .ad-grid{grid-template-columns:420px minmax(0, 1fr)}

/* ---------- правка карточки в окне «Добавить» ---------- */
.nd-edit-title{display:none; font:700 20px/28px "PT Sans Narrow", "PT Sans", sans-serif; color:var(--on-surface); padding-top:2px}
.nd[data-edit="1"] .nd-edit-title{display:block}
.nd[data-edit="1"] #adKind{display:none}
.s-edit-only{display:none}
.nd[data-edit="1"] .s-edit-only{display:block}

/* подсказка под выбором «кем приходится» */
.s-since-row{display:flex;align-items:center;gap:12px}
.s-since-in{width:84px;font:400 16px/1.2 "PT Sans",sans-serif;padding:7px 12px;border:1px solid var(--line,#cfd8e3);border-radius:999px;background:#fff;color:inherit;outline:none;text-align:center}
.s-since-in:focus{border-color:var(--prussian,#003153)}
.s-since-hint{font:400 14px/1.3 "PT Sans",sans-serif;color:#737373}
.s-since{margin-top:14px}
.s-since .s-lab{margin-bottom:8px}

/* одна запись (добавить и правка): всё без прокрутки на 1280×700 */
.nd[data-mode="single"][data-gate=""] .nd-body{padding-top:14px}
.nd[data-mode="single"][data-gate=""] #sPeople .s-parsed{margin:4px 0 14px}
.nd[data-mode="single"][data-gate=""] #sPeople #sRel + *, .nd[data-mode="single"][data-gate=""] #sPeople .s-detail{margin-top:14px}
.nd[data-mode="single"][data-gate=""] #sPeople .s-detail{min-height:0}
.nd[data-mode="single"][data-gate=""] #sPeople .s-since{display:flex; align-items:center; gap:12px; margin-top:14px}
.nd[data-mode="single"][data-gate=""] #sPeople .s-since .s-lab{margin:0}
.nd[data-mode="single"][data-gate=""] #sPeople .s-since-hint{display:none}
.nd[data-mode="single"][data-gate=""] #sPeople .s-stack{margin-top:16px; padding-top:14px; gap:8px}
.nd[data-mode="single"][data-gate=""] #sPeople .s-area{min-height:52px; padding:8px 12px}
.nd[data-mode="single"][data-gate=""] #sPeople .s-line{padding:8px 12px}
.nd[data-mode="single"][data-gate=""] #sPeople .s-notable{margin-top:10px}

/* уведомления на сайте: точка у имени и список в меню профиля */
.who-dot{width:8px; height:8px; border-radius:50%; background:#C0392B; flex:none; margin-left:-2px}
.notif-count{display:inline-block; min-width:18px; padding:0 6px; margin-left:4px; border-radius:999px; background:#C0392B; color:#fff; font:700 12px/18px "PT Sans",sans-serif; text-align:center; text-decoration:none}
.appbar .dropdown#whoDropdown.has-notif{width:340px; max-width:340px}
.appbar .dropdown#whoDropdown .notif-sec{text-align:left; margin:6px 0 8px; padding-top:8px; border-top:1px solid var(--outline-variant)}
.notif-head{padding:0 8px 4px; font:700 13px/18px "PT Sans",sans-serif; color:var(--on-surface-variant)}
.appbar .dropdown#whoDropdown .notif-list{display:flex; flex-direction:column; gap:2px; max-height:320px; overflow:auto}
.notif-more{display:block; width:100%; margin-top:4px; padding:6px 8px; border:0; background:none; border-radius:var(--r-s); cursor:pointer; text-align:left; font:700 13px/18px "PT Sans",sans-serif; color:var(--primary)}
.notif-more:hover{background:var(--surface-mid)}
.notif-item{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; padding:8px 8px; border-radius:var(--r-s); text-decoration:none; color:var(--on-surface); font:400 14px/19px "PT Sans",sans-serif}
.notif-item:hover{background:var(--surface-mid)}
.notif-item.new{background:var(--surface-low)}
.notif-st{font:700 12px/18px "PT Sans",sans-serif; padding:0 8px; border-radius:999px; flex:none}
.notif-st.ok{background:#E3F1E6; color:#1E6B34}
.notif-st.no{background:#F8E1DE; color:#9B2C20}
.notif-tx{flex:1 1 180px; min-width:0; overflow-wrap:anywhere}
.notif-note{flex:1 1 100%; color:var(--on-surface-variant); font-style:italic; overflow-wrap:anywhere}
.notif-dt{flex:1 1 100%; color:var(--outline); font-size:12px}

.nd .nd-rm{color:var(--error)}
.nd:not([data-edit="1"]) .nd-rm{display:none}
.nd .nd-rm-row{display:none; flex:1; align-items:center; gap:12px; min-width:0}
.nd .nd-rm-row .s-line{flex:1; min-width:0}
.nd[data-removing="1"] .nd-rm-row{display:flex}
.nd[data-removing="1"] .nd-foot-l, .nd[data-removing="1"] #adClear, .nd[data-removing="1"] #adSend, .nd[data-removing="1"] .nd-rm{display:none}

/* «Это я»: найденные карточки при регистрации */
.s-claim{margin:-6px 0 24px}
.s-claim:empty{display:none}
.claim-q{font:var(--t-label-large); color:var(--on-surface); margin-bottom:8px}
.claim-row{display:flex; align-items:baseline; gap:10px; width:100%; text-align:left; padding:10px 14px; margin-bottom:8px; border:1px solid var(--outline-variant); border-radius:12px; background:var(--surface); color:var(--on-surface); font:var(--t-body-medium); cursor:pointer; transition:border-color .15s, background .15s}
.claim-row:hover{border-color:var(--secondary)}
.claim-row.on{border-color:var(--primary); background:var(--surface-low)}
.claim-nm{font-weight:500; font-size:15px}
.claim-sb{color:var(--on-surface-variant); font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.claim-act{display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--secondary)}
.claim-act .sym{font-size:16px; visibility:hidden}
.claim-row.on .claim-act{color:var(--primary); font-weight:500}
.claim-row.on .claim-act .sym{visibility:visible}
.claim-no{font-size:13px}
#sPeople[data-claimed="1"] > .s-sec, #sPeople[data-claimed="1"] > .s-stack, #sPeople[data-claimed="1"] > .s-notable{display:none !important}