/* ============================================================
   КОМИШКА · components.css — общие компоненты обеих зон
   Шапка · подвал · кнопки · карточка лота · штампы · формы ·
   ведомости · отточия · тикер · печать · гильош · модалка · тост
   ============================================================ */

/* ============ ШАПКА ============
   Всегда чернильная — «переплёт», сшивающий обе зоны. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgba(239, 231, 217, .14);
}

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--paper);
  flex: none;
}

.brand__seal { width: 34px; height: 34px; flex: none; }

.brand__name {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: .01em;
  line-height: 1;
}

.brand__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--paper-dim);
  display: block;
  margin-top: 3px;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
}

.site-nav__link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--paper-dim);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}

.site-nav__link:hover { color: var(--paper); }

.site-nav__link.is-active {
  color: var(--paper);
  border-bottom-color: var(--wax);
}

/* «Вход» / «Кабинет» — сургучная рамка, приглашение в профзону */
.site-nav__link--cta {
  color: var(--wax-bright);
  border: 1px solid var(--wax);
  border-radius: var(--radius-s);
  padding: 8px 14px;
}

.site-nav__link--cta:hover { background: var(--wax); color: var(--paper); }
.site-nav__link--cta.is-active { border-bottom-color: var(--wax); }

/* Кнопка «Выход» в навигации */
.site-nav__logout {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--paper-dim);
  padding: 6px 2px;
  transition: color var(--dur-fast) var(--ease);
}

.site-nav__logout:hover { color: var(--wax-bright); }

.site-nav__install {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 8px 12px;
  border: 1px solid var(--wax);
  background: var(--wax);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.site-nav__install:hover { background: var(--wax-bright); color: var(--ink); }

/* Плавающее приглашение видно только до установки PWA. */
.install-float {
  position: fixed;
  right: max(var(--pad-x), env(safe-area-inset-right));
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
  z-index: calc(var(--z-header) - 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 16px 10px 10px;
  color: var(--paper);
  background: var(--wax);
  border: 1px solid var(--wax-bright);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38), 0 0 0 0 rgba(215, 94, 62, .42);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: install-glow 2.4s ease-out infinite;
}

.install-float img { flex: none; border-radius: 50%; }
.install-float:hover { background: var(--wax-bright); color: var(--ink); }

@keyframes install-glow {
  0%, 45% { box-shadow: 0 10px 34px rgba(0, 0, 0, .38), 0 0 0 0 rgba(215, 94, 62, .42); }
  80%, 100% { box-shadow: 0 10px 34px rgba(0, 0, 0, .38), 0 0 0 13px rgba(215, 94, 62, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .install-float,
  .install-safari__target,
  .install-guide__arrow,
  .install-coach__arrow { animation: none; }
}

/* Бургер (мобайл) */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--paper);
}

.nav-toggle__bars {
  position: relative;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: background var(--dur-fast) var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .install-float { display: none; }

  .site-nav {
    display: none;
    position: absolute;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--ink);
    border-bottom: 1px solid rgba(239, 231, 217, .14);
    padding: 8px var(--pad-x) 20px;
    box-shadow: var(--shadow-lift);
  }

  .site-nav.is-open { display: flex; }

  .site-nav__link,
  .site-nav__logout,
  .site-nav__install {
    display: block;
    width: 100%;
    padding: 14px 2px;
    border-bottom: 1px solid rgba(239, 231, 217, .14);
    text-align: left;
  }

  .site-nav__install { color: var(--wax-bright); background: none; border-top: 0; border-inline: 0; }

  .site-nav__link--cta { border: 0; border-bottom: 1px solid rgba(239, 231, 217, .14); border-radius: 0; }
  .site-nav__link--cta:hover { background: none; color: var(--wax-bright); }
  .site-nav__link.is-active { border-bottom-color: var(--wax); }
}

/* Несгораемая строка кабинета «ПРИЧИТАЕТСЯ: …» — под шапкой */
.due-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  padding: 9px var(--pad-x);
  background: var(--surface);
  border-bottom: var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.due-line__label { color: var(--text-dim); }

.due-line__sum {
  color: var(--gain);
  font-size: 15px;
  letter-spacing: .06em;
  border-top: 1px solid var(--gain); /* надчёркивание суммы */
  padding-top: 2px;
}

/* ============ ГИЛЬОШ ============
   Сетка дуг как на банкноте, 3–4% непрозрачности —
   «водяной знак» шапки кабинета. */
.guilloche { position: relative; }

.guilloche::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27128%27%20height%3D%27128%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23161412%27%20stroke-width%3D%271%27%3E%3Ccircle%20cx%3D%2764%27%20cy%3D%2764%27%20r%3D%2760%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%2760%27/%3E%3Ccircle%20cx%3D%27128%27%20cy%3D%270%27%20r%3D%2760%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%27128%27%20r%3D%2760%27/%3E%3Ccircle%20cx%3D%27128%27%20cy%3D%27128%27%20r%3D%2760%27/%3E%3Ccircle%20cx%3D%2764%27%20cy%3D%2764%27%20r%3D%2740%27/%3E%3Ccircle%20cx%3D%2764%27%20cy%3D%2764%27%20r%3D%2720%27/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px 128px;
}

.guilloche > * { position: relative; }

/* ============ ПОДВАЛ ============ */
.site-footer {
  flex-shrink: 0;
  margin-top: auto;
  background: var(--ink);
  color: var(--paper-dim);
  border-top: 1px solid rgba(239, 231, 217, .14);
  font-size: var(--fs-small);
}

.site-footer a { color: var(--paper-dim); }
.site-footer a:hover { color: var(--paper); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--gap);
  padding-block: clamp(36px, 5vw, 64px) 28px;
}

@media (max-width: 719px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__brand .brand__name { color: var(--paper); }

.site-footer__note {
  margin-top: 14px;
  max-width: 44ch;
  line-height: 1.55;
}

.site-footer__head {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 14px;
}

.site-footer__list { list-style: none; padding: 0; display: grid; gap: 9px; }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 18px 26px;
  border-top: 1px solid rgba(239, 231, 217, .14);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
}

/* ============ КНОПКИ ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

/* Сургучная primary (в профзоне сама станет «чернилами авторучки») */
.btn--primary {
  background: var(--accent);
  color: #EFE7D9;
  border-color: var(--accent);
}

.btn--primary:hover { background: var(--accent-down); border-color: var(--accent-down); }
.btn--primary:active { background: var(--accent-down); transform: translateY(1px); }

/* Призрачная — текст с подчёркиванием-линейкой */
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}

.btn--ghost:hover { border-color: var(--accent); color: var(--accent-text); }

/* Текстовая ghost без рамки — «Я риелтор →» */
.btn--link {
  min-height: 0;
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  color: var(--accent-text);
  border-bottom: 1px solid currentColor;
}

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

.btn--small { min-height: 36px; padding: 7px 16px; font-size: var(--fs-caption); }

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

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* ============ КАТАЛОЖНАЯ НУМЕРАЦИЯ ============ */
.catalog-no {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
  font-feature-settings: var(--num);
}

.catalog-no--big { font-size: 15px; color: var(--text); }

/* ============ ЦЕНЫ-ВЕДОМОСТИ ============ */
/* Любая сумма: PT Mono + тонкое надчёркивание */
.price {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .02em;
  border-top: 1px solid var(--line-strong);
  padding-top: 6px;
  white-space: nowrap;
}

.price--big { font-size: clamp(21px, 2.4vw, 28px); }

/* Итог: двойное подчёркивание — классика гроссбуха */
.price--total {
  border-bottom: 3px double var(--text);
  padding-bottom: 3px;
}

.price--gain { color: var(--gain); }
.price--gain.price--total { border-bottom-color: var(--gain); }

/* ============ КАРТОЧКА ЛОТА ============ */
.prop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--radius-0);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease);
}

.prop-card:hover { box-shadow: var(--shadow-lift); }

.prop-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-3);
}

.prop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.prop-card:hover .prop-card__img,
.prop-card:focus-within .prop-card__img { transform: scale(1.03); }

/* Бумажная плашка «№ 042» поверх фото */
.prop-card__num {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  padding: 5px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* Штампы статуса на фото (СДАН/СТРОИТСЯ/ВТОРИЧКА) */
.prop-card__stamp {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Круглая сургучная печать «Смотреть» на hover */
.prop-card__seal {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-stamp);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wax);
  color: #EFE7D9;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-align: center;
  box-shadow: inset 0 0 0 1.5px rgba(239, 231, 217, .55), inset 0 0 0 5px var(--wax), 0 6px 18px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: scale(.82) rotate(-8deg);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.prop-card:hover .prop-card__seal,
.prop-card:focus-within .prop-card__seal {
  opacity: 1;
  transform: scale(1) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
  .prop-card__seal { transform: none; }
  .prop-card:hover .prop-card__img { transform: none; }
}

.prop-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 0;
}

.prop-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  color: var(--text);
}

.prop-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Растянуть клик карточки на всю площадь */
.prop-card__title a::after { content: ""; position: absolute; inset: 0; }

.prop-card__region {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}

.prop-card__price { margin-top: 6px; }

/* Мини-таблица спецификаций: «3 сп. | 245 м² | 2027» */
.prop-card__specs {
  display: flex;
  margin-top: 14px;
  border-top: var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  font-feature-settings: var(--num);
}

.prop-card__specs > span {
  flex: 1;
  padding: 12px 10px 14px;
  text-align: center;
  white-space: nowrap;
}

.prop-card__specs > span + span { border-left: var(--rule); }

/* «Вложенный листок» комиссии — ТОЛЬКО профзона
   (в публичной разметке этой строки физически нет) */
.prop-card__commission {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 10px -8px;
  padding: 11px 14px;
  background: var(--paper);
  color: #221F1B;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  border-left: 3px solid var(--wax-deep); /* маржинальная линия листка */
  box-shadow: var(--shadow-sheet);
  transform: translateY(6px);
  position: relative;
  z-index: 1;
}

.prop-card__commission-sum { color: var(--gain); white-space: nowrap; }

/* последний элемент тела карточки без листка — прижать низ */
.prop-card__body > :last-child { margin-bottom: 0; }
.prop-card > .prop-card__specs { margin-top: auto; }

/* ============ ШТАМПЫ ============
   Outline-плашки капсом вместо цветных пилюль. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 3px;
  border: 1px solid currentColor;
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  white-space: nowrap;
}

/* На фото — бумажная подложка, чтобы читался на любом кадре */
.prop-card__stamp .stamp { background: rgba(22, 20, 18, .55); color: var(--paper); border-color: rgba(239, 231, 217, .6); }

.stamp--wax { color: var(--wax-bright); }
[data-zone="pro"] .stamp--wax { color: var(--wax-deep); }

.stamp--gain { color: var(--gain); }
.stamp--ink { color: var(--accent-text); }
.stamp--muted { opacity: .65; }

/* Статусы сделок (кабинет): НОВЫЙ / В РАБОТЕ / … / ВЫПЛАЧЕНО */
.stamp--lead { color: var(--text-dim); }
.stamp--reserved { color: var(--accent-text); }
.stamp--contract { color: var(--wax-deep); }
.stamp--paid { color: var(--gain); }
.stamp--cancelled { color: var(--text-dim); text-decoration: line-through; }
.stamp--pending { color: var(--text-dim); }
.stamp--published { color: var(--gain); }
.stamp--rejected { color: var(--wax-deep); }

/* ============ СУРГУЧНАЯ ПЕЧАТЬ ============
   Единственный круглый элемент системы. */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-stamp);
  border: 1.5px solid var(--wax);
  color: var(--wax);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  padding: 10px;
  transform: rotate(-6deg);
  position: relative;
}

/* внутреннее кольцо — «оттиск» */
.seal::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: var(--radius-stamp);
  border: 1px dashed color-mix(in srgb, var(--wax) 65%, transparent);
}

.seal--filled {
  background: var(--wax);
  color: #EFE7D9;
  box-shadow: inset 0 0 0 1.5px rgba(239, 231, 217, .5), inset 0 0 0 5px var(--wax);
  border-color: var(--wax);
}

.seal--filled::before { border-color: rgba(239, 231, 217, .45); }

.seal--gain { border-color: var(--gain); color: var(--gain); }
.seal--gain::before { border-color: color-mix(in srgb, var(--gain) 65%, transparent); }

.seal--small { width: 64px; height: 64px; font-size: 9px; padding: 6px; }

/* ============ ФОРМЫ ============
   Поля на линейках гроссбуха, лейблы микрокапсом. */
.form { display: grid; gap: 22px; max-width: 560px; }

.form--wide { max-width: none; }

.field { display: grid; gap: 7px; position: relative; }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}

.field__label b {
  font-weight: 400;
  color: var(--wax-bright);
}

[data-zone="pro"] .field__label b { color: var(--wax-deep); }

.field__input {
  width: 100%;
  min-height: 46px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong); /* линейка гроссбуха */
  border-radius: 0;
  padding: 8px 2px;
  color: var(--text);
  font-family: var(--font-text);
  font-feature-settings: var(--num);
  transition: border-color var(--dur-fast) var(--ease);
}

.field__input::placeholder { color: var(--text-dim); opacity: .7; }

.field__input:hover { border-bottom-color: var(--text-dim); }

.field__input:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
}

textarea.field__input { min-height: 120px; resize: vertical; line-height: 1.55; }

select.field__input { appearance: none; cursor: pointer; }

.field__input--mono { font-family: var(--font-mono); letter-spacing: .03em; }

.field__hint { font-size: var(--fs-caption); color: var(--text-dim); }

.field__error {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--wax-bright);
}

[data-zone="pro"] .field__error { color: var(--wax-deep); }

.field.is-invalid .field__input { border-bottom-color: var(--wax); }

/* Пронумерованное поле «описи листа» — 01–08 */
.field--numbered {
  grid-template-columns: 40px 1fr;
  align-items: start;
  column-gap: 14px;
}

.field--numbered .field__no {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-dim);
  border-right: var(--rule);
  padding: 10px 12px 0 0;
  align-self: stretch;
}

.field--numbered .field__label,
.field--numbered .field__input,
.field--numbered .field__hint,
.field--numbered .field__error { grid-column: 2; }

/* Обособленное поле «видно только коллегам» (комиссия, %) */
.field--private {
  border: 1px dashed var(--accent);
  padding: 16px 16px 18px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.field--private::before {
  content: "ВИДНО ТОЛЬКО КОЛЛЕГАМ";
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-caps);
  color: var(--accent-text);
}

/* Чекбокс согласия (152-ФЗ) */
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--text-dim);
  cursor: pointer;
  max-width: var(--measure);
}

.check input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.check input[type="checkbox"]:checked::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #EFE7D9;
  border-bottom: 2px solid #EFE7D9;
  transform: rotate(-45deg) translate(1px, -1px);
}

.check input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }

/* Радио-вкладки фильтров/сегментов (mono-капс) */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seg__item {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 8px 14px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

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

.seg__item.is-active,
.seg__item[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #EFE7D9;
}

/* ============ ТАБЛИЦЫ-ВЕДОМОСТИ ============
   Голубые линейки, красная маржинальная линия, строки 44px,
   суммы вправо PT Mono, итог с двойным подчёркиванием. */
.ledger {
  position: relative;
  background: var(--surface);
  border: var(--rule);
  box-shadow: var(--shadow-card);
  padding-left: 26px; /* поле до маржинальной линии */
}

.ledger::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--margin-line); /* красная маржинальная линия */
}

/* мобильный скролл ведомости, первая колонка — липкая */
.ledger__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ledger__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-feature-settings: var(--num);
}

.ledger__table caption {
  text-align: left;
  padding: 16px 18px 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}

.ledger__table th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: left;
  padding: 14px 18px 10px;
  border-bottom: var(--rule);
  white-space: nowrap;
}

.ledger__table td {
  height: var(--row-h);
  padding: 6px 18px;
  border-bottom: var(--rule);
  font-size: var(--fs-small);
  vertical-align: middle;
}

.ledger__table tbody tr:hover td { background: var(--surface-hover); }

/* липкая колонка лота на узких экранах */
.ledger__table th:first-child,
.ledger__table td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
}

.ledger__table tbody tr:hover td:first-child { background: var(--surface-hover); }

/* цифровые колонки: PT Mono, прижаты вправо в идеальный столбец */
.ledger__num,
.ledger__table th.ledger__num {
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
  letter-spacing: .02em;
}

.ledger__num--gain { color: var(--gain); }

/* Итоговая строка: двойное подчёркивание */
.ledger__total td {
  border-top: 1px solid var(--line-strong);
  border-bottom: 3px double var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  height: calc(var(--row-h) + 6px);
}

.ledger__total .ledger__num--gain { border-bottom-color: var(--gain); }

/* Микрокапс-пометка честности у итога комиссий */
.ledger__note {
  display: block;
  padding: 12px 18px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ============ ОТТОЧИЯ-ЛЕДЖЕР (dot leaders) ============
   «параметр …… значение», цифры вправо в столбец. */
.leaders {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2px;
  max-width: 60ch;
}

.leaders__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-block: 8px;
  font-size: var(--fs-small);
}

.leaders__key { color: var(--text-dim); flex: none; }

.leaders__row::after { content: none; }

.leaders__dots {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-4px);
}

.leaders__val {
  flex: none;
  font-family: var(--font-mono);
  font-feature-settings: var(--num);
  letter-spacing: .02em;
  text-align: right;
  color: var(--text);
  white-space: nowrap;
}

.leaders__val--gain { color: var(--gain); }

/* оглавление номера: римская нумерация + счётчик лотов */
.leaders--toc .leaders__key { color: var(--text); font-family: var(--font-text); }
.leaders--toc .leaders__row { padding-block: 11px; border-bottom: var(--rule); }

/* ============ ТИКЕР РАЙОНОВ ============
   Газетная строка-«биржевой тикер», краска --text-dim. */
.ticker {
  overflow: hidden;
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding-block: 12px;
  white-space: nowrap;
  position: relative;
}

.ticker__track {
  display: inline-flex;
  gap: 0;
  animation: ticker-run 48s linear infinite;
  will-change: transform;
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

.ticker__item {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-inline: 14px;
  font-feature-settings: var(--num);
}

.ticker__item::after {
  content: "·";
  margin-left: 28px;
  color: var(--wax);
}

@keyframes ticker-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* трек дублируется дважды в JS */
}

@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker__track { animation: none; }
}

/* ============ КАРТА УЧАСТНИКА (кабинет) ============ */
.member-card {
  position: relative;
  background: var(--surface);
  border: var(--rule);
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  overflow: hidden;
}

.member-card__no {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.member-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  /* «тиснение» имени */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35), 0 -1px 0 rgba(22, 20, 18, .12);
}

.member-card__seal { flex: none; }

/* ============ МОДАЛКА ============ */
.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(560px, calc(100vw - 2 * var(--pad-x)));
  width: 100%;
}

.modal::backdrop {
  background: rgba(10, 9, 8, .72);
  backdrop-filter: blur(2px);
}

.modal__dialog {
  background: var(--surface);
  color: var(--text);
  border: var(--rule);
  box-shadow: var(--shadow-lift);
  padding: clamp(22px, 4vw, 40px);
  position: relative;
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin-bottom: 6px;
  padding-right: 44px;
}

.modal__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.modal__close:hover { color: var(--text); border-color: var(--line-strong); }

.install-steps {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding-left: 24px;
  color: var(--text-dim);
  line-height: 1.55;
}

.install-steps li::marker {
  color: var(--wax);
  font-family: var(--font-mono);
  font-weight: 700;
}

.install-guide { margin-top: 22px; }

.install-safari {
  display: grid;
  grid-template-columns: 24px 24px minmax(0, 1fr) 38px 24px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--text-dim);
  font-size: 22px;
  text-align: center;
}

.install-safari__address {
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
}

.install-safari__target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--wax);
  color: var(--wax-bright);
  animation: install-target 1.25s ease-in-out infinite;
}

.install-guide__arrow {
  display: block;
  width: 38px;
  margin: 4px 36px 0 auto;
  color: var(--wax-bright);
  font-size: 30px;
  text-align: center;
  animation: install-arrow 1.25s ease-in-out infinite;
}

.install-guide__ready { margin-top: 22px; }

.install-coach {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: calc(var(--z-header) + 2);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: min(520px, calc(100vw - 24px));
  padding: 14px 44px 14px 16px;
  transform: translateX(-50%);
  border: 1px solid var(--wax);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-lift);
}

.install-coach__arrow {
  position: absolute;
  left: 50%;
  bottom: -25px;
  color: var(--wax-bright);
  font-size: 34px;
  animation: install-arrow-down 1.1s ease-in-out infinite;
}

.install-coach__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--wax);
  color: var(--wax-bright);
  font-size: 24px;
}

.install-coach__text { display: grid; gap: 3px; line-height: 1.3; }
.install-coach__text strong { font-size: 14px; }
.install-coach__text small { color: var(--paper-dim); font-size: 11px; }

.install-coach__close {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--paper-dim);
  font-size: 22px;
}

@keyframes install-target {
  50% { background: var(--wax); color: var(--paper); transform: scale(1.08); }
}

@keyframes install-arrow {
  50% { transform: translateY(-6px); }
}

@keyframes install-arrow-down {
  50% { transform: translateY(5px); }
}

.install-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-inline: 2px;
  border: 1px solid var(--line-strong);
  color: var(--accent-text);
  font-size: 18px;
  line-height: 1;
}

.install-copy { margin-top: 20px; color: var(--text-dim); line-height: 1.55; }

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ============ ТОСТЫ ============ */
.toast-root {
  position: fixed;
  z-index: var(--z-toast);
  bottom: 20px;
  right: 20px;
  left: 20px;
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: none;
}

@media (min-width: 720px) { .toast-root { left: auto; width: 380px; } }

.toast {
  pointer-events: auto;
  width: 100%;
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid rgba(239, 231, 217, .18);
  border-left: 3px solid var(--wax);
  box-shadow: var(--shadow-lift);
  padding: 14px 18px;
  font-size: var(--fs-small);
  display: flex;
  gap: 12px;
  align-items: baseline;
  animation: toast-in var(--dur) var(--ease-out);
}

.toast--ok { border-left-color: var(--gain); }
.toast--error { border-left-color: var(--wax-deep); }

.toast__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--paper-dim);
  flex: none;
}

.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ============ РАЗВОРОТ-ФОТО (full-bleed) ============ */
.spread {
  position: relative;
  overflow: hidden;
}

.spread__img { width: 100%; height: 100%; object-fit: cover; }

/* параллакс 4–6% внутри неподвижной рамки — включается JS-ом,
   классом is-parallax; при reduced-motion не назначать */
.spread.is-parallax .spread__img {
  height: 112%;
  will-change: transform;
}

/* ============ ПУСТОЕ СОСТОЯНИЕ ============ */
.empty {
  text-align: center;
  padding: clamp(40px, 7vw, 88px) var(--gap);
  border: 1px dashed var(--line-strong);
  color: var(--text-dim);
}

.empty__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text); margin-bottom: 8px; }

/* ============ СЕТКА КАТАЛОГА ============ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--gap);
}

/* ============ ВКЛАДКИ КАБИНЕТА ============ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: var(--rule);
  overflow-x: auto;
}

.tabs__tab {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

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

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