/* ============================================================
   ОТКРЫТИЕ ПРОДАЖ: карточка, договор, окно, замки, очередь бухгалтера.
   Поля и кнопки карточки берутся из общего набора .u-fld / .u-seg /
   .u-stl (user.css): форма реквизитов обязана выглядеть как весь кабинет.
   Здесь только то, чего в общем наборе нет.
   Нажимаемое не ниже 44px. На телефоне окно садится снизу.
   ============================================================ */

/* ---------- карточка «Продажи» ---------- */
/* Карточку прокручивают к себе из окна и из замка: шапка сайта не должна её закрыть. */
.slr-card { scroll-margin-top: 4.5rem; }
.slr-fld { min-width: 0; }
/* [hidden] у пары полей проигрывал display:grid из общего набора: номер и
   дата доверенности стояли на экране при уставе и ИП. */
.slr-form [hidden] { display: none !important; }
.slr-card .u-stl__h { flex-wrap: wrap; row-gap: 0.3rem; }
/* Ошибка под одним полем пары не должна сдвигать соседнее. */
.slr-form .u-fld__pair { align-items: start; }
.slr-save:disabled { cursor: progress; }
.slr-card__lead { margin: 0.6rem 0 0; font: 400 var(--t-small)/1.55 var(--grotesk); color: var(--ink-soft); max-width: 62ch; }
.slr-card__active:empty, .slr-card__docs:empty { display: none; }
.slr-card__acc { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; align-items: baseline; margin: 0.8rem 0 0; }
.slr-card__k { font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.slr-card__v { font: 400 var(--t-small)/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.slr-card__doc {
  min-height: 44px; margin-top: 0.4rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--t-small)/1.3 var(--grotesk); color: var(--accent-deep);
  text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.slr-card__doc:hover { color: var(--ink); }
.slr-fld__err { font: 400 var(--t-small)/1.35 var(--grotesk); color: var(--accent-deep); }
.slr-fld__err:empty { display: none; }
.u-fld__in.is-err { border-color: var(--accent-deep); }
.slr-seg { flex-wrap: wrap; align-self: flex-start; }
.slr-seg .u-seg__b { -webkit-appearance: none; appearance: none; cursor: pointer; }
.slr-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.slr-acts { margin-top: 1.1rem; }
/* Отступ сверху у общей кнопки рассчитан на одну кнопку; в ряду из трёх он складывался с зазором ряда. */
.slr-acts .u-stl__save { margin-top: 0; -webkit-appearance: none; appearance: none; }
.slr-signbtn { background: transparent; color: var(--ink); }
.slr-signbtn:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Третья кнопка тише двух первых: документы по желанию. */
.slr-docsbtn { background: transparent; border-color: var(--line-strong); color: var(--ink-soft); }
.slr-docsbtn:hover:not(:disabled) { background: transparent; border-color: var(--ink); color: var(--ink); }
.slr-docs__n { font: 400 var(--t-small)/1.3 var(--grotesk); color: var(--ink-faint); }
.slr-docs__n:empty { display: none; }
.slr-acts__why { margin: 0.5rem 0 0; font: 400 var(--t-small)/1.45 var(--grotesk); color: var(--ink-faint); }
.slr-acts__why:empty { display: none; }

/* ---------- окно при создании страницы ---------- */
.slr-modal {
  position: fixed; inset: 0; z-index: 1250; display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; background: oklch(0.235 0.012 60 / 0.55);
}
.slr-modal__box {
  position: relative; width: min(32rem, 100%); max-height: 90vh; overflow: auto;
  background: var(--paper-raise); color: var(--ink); border: var(--rule) solid var(--line);
  padding: 1.6rem 1.5rem 1.35rem; box-shadow: 0 1.5rem 3rem oklch(0.235 0.012 60 / 0.28);
}
.slr-modal__x {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink-faint); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.slr-modal__x svg { width: 20px; height: 20px; }
.slr-modal__x:hover { color: var(--ink); }
.slr-modal__t { font: 600 var(--t-h3)/1.2 var(--serif); margin: 0 2.5rem 0.7rem 0; }
.slr-modal__p { font: 400 var(--t-small)/1.55 var(--grotesk); color: var(--ink-soft); margin: 0 0 0.8rem; }
.slr-modal__list { margin: 0 0 0.9rem; padding-left: 1.1rem; font: 400 var(--t-small)/1.7 var(--grotesk); color: var(--ink); }
.slr-modal__acts { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.slr-modal__go, .slr-modal__alt {
  min-height: 44px; padding: 0.65rem 1rem; cursor: pointer; text-align: center;
  font: 500 var(--t-micro)/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  -webkit-appearance: none; appearance: none;
}
.slr-modal__go { border: var(--rule) solid var(--accent); background: var(--accent); color: var(--paper-raise); }
.slr-modal__go:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
/* Вторая кнопка равноправна: это не отказ, страница заводится и без продаж. */
.slr-modal__alt { border: var(--rule) solid var(--line-strong); background: transparent; color: var(--ink); }
.slr-modal__alt:hover { border-color: var(--ink); }

/* ---------- окно документов ---------- */
.slr-docs { width: min(38rem, 100%); }
.slr-docs__body { display: flex; flex-direction: column; }
.slr-docs__err { margin: 0 0 0.6rem; font: 400 var(--t-small)/1.4 var(--grotesk); color: var(--accent-deep); }
.slr-docs__err:empty { display: none; }
.slr-docs__group { margin: 1rem 0 0.2rem; font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.slr-docs__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label pick" "files files";
  align-items: center; column-gap: 0.8rem; padding: 0.35rem 0; border-top: var(--rule) solid var(--line);
}
.slr-docs__label { grid-area: label; font: 400 var(--t-small)/1.4 var(--grotesk); color: var(--ink); min-width: 0; }
.slr-docs__pick {
  grid-area: pick; position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 9.5rem; padding: 0 0.9rem; border: var(--rule) solid var(--line-strong); cursor: pointer;
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.slr-docs__pick:hover { border-color: var(--ink); }
.slr-docs__pick.is-busy { opacity: 0.6; pointer-events: none; }
/* Поле выбора файла прозрачное поверх кнопки: нажатие по всей площади открывает выбор. */
.slr-docs__in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.slr-docs__files { grid-area: files; display: flex; flex-direction: column; margin-top: 0.2rem; }
.slr-docs__file { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.7rem; }
.slr-docs__fname { font: 400 var(--t-small)/1.35 var(--grotesk); color: var(--ink-soft); overflow-wrap: anywhere; min-width: 0; }
.slr-docs__fsize { font: 400 var(--t-micro)/1 var(--mono); color: var(--ink-faint); }
.slr-docs__acts { display: inline-flex; gap: 0.9rem; margin-left: auto; }
.slr-docs__act {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  -webkit-appearance: none; appearance: none;
}
.slr-docs__act:hover { color: var(--ink); }
.slr-docs__del.is-armed { color: var(--accent-deep); }

/* ---------- замки ---------- */
.slr-guard { position: relative; }
.slr-guard.is-locked { color: var(--ink-faint); }
.slr-guard__ic { display: inline-flex; margin-left: auto; color: var(--ink-faint); }
.slr-guard__ic svg { width: 14px; height: 14px; }
.addmenu__i.slr-guard { min-height: 44px; }
/* В карточке «+ афиша» замок в углу, а не посреди карточки; на кнопке кассы - после слова. */
.vaf-add.slr-guard .slr-guard__ic { position: absolute; top: 0.75rem; right: 0.75rem; margin: 0; }
.vaf-add.slr-guard .slr-guard__ic svg { width: 16px; height: 16px; }
.u-stl__save.slr-guard .slr-guard__ic { margin-left: 0.5rem; vertical-align: -2px; }
.slr-lock {
  display: flex; gap: 0.6rem; align-items: flex-start; grid-column: 1 / -1;
  padding: 0.75rem 0.85rem; background: var(--paper-sink, var(--paper)); border-left: 2px solid var(--accent-deep);
  text-transform: none; letter-spacing: 0; cursor: default;
}
.slr-lock__ic { display: inline-flex; color: var(--accent-deep); padding-top: 0.1rem; }
.slr-lock__ic svg { width: 16px; height: 16px; }
.slr-lock__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.slr-lock__t { margin: 0; font: 500 var(--t-small)/1.45 var(--grotesk); color: var(--ink); }
.slr-lock__s { margin: 0; font: 400 var(--t-small)/1.45 var(--grotesk); color: var(--ink-soft); }
.slr-lock__s:empty { display: none; }
.slr-lock__go {
  align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep);
  -webkit-appearance: none; appearance: none;
}
.slr-lock__go:hover { color: var(--ink); }
/* Место для объяснения под лентой афиши и строкой кассы. */
.slr-lockslot:empty { display: none; }
.slr-lockslot { margin: 0.6rem 0 0; }

/* ---------- договор ---------- */
.slr-doc-open, .slr-doc-open body { overflow: hidden; }
.slr-doc {
  position: fixed; inset: 0; z-index: 1260; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
}
.slr-doc__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.25rem 0.5rem 0.25rem 1.2rem; border-bottom: var(--rule) solid var(--line);
}
.slr-doc__bt { font: 500 var(--t-micro)/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.slr-doc__x {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink-faint); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.slr-doc__x svg { width: 20px; height: 20px; }
.slr-doc__x:hover { color: var(--ink); }
.slr-doc__scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.slr-doc__paper {
  max-width: 46rem; margin: 0 auto; padding: 1.6rem clamp(1rem, 4vw, 2.5rem) 3rem;
  /* Как оферта на сайте: гротеск, цифры одной высоты. В антикве БИН и счёт
     набирались старостильными цифрами, и их было трудно сверить глазами. */
  font: 400 0.98rem/1.64 var(--grotesk); color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums;
}
.slr-doc__wait { font: 400 var(--t-small)/1.5 var(--grotesk); color: var(--ink-faint); margin: 0 0 1.2rem; }
/* Предупреждение о языке заметное, а не сноска: при автопереводе человек
   читает перевод, а подписывает русский текст. */
.slr-doc__note {
  margin: 0 0 1.4rem; padding: 0.7rem 0.9rem; border-left: 2px solid var(--accent-deep);
  background: var(--paper-raise); font: 500 var(--t-small)/1.5 var(--grotesk); color: var(--ink);
}
.slr-doc__title { font: 500 var(--t-h3)/1.25 var(--serif); color: var(--ink); text-align: center; margin: 0 0 1rem; }
.slr-doc__nd { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 0 1.2rem; }
.slr-doc__h { font: 500 clamp(1.05rem, 1.1vw, 1.15rem)/1.2 var(--serif); color: var(--ink); margin: 1.65rem 0 0.75rem; padding-top: 1.1rem; border-top: var(--rule) solid var(--line); }
.slr-doc__app { text-align: right; margin: 3rem 0 0.2rem; font-weight: 600; color: var(--ink); }
.slr-doc__ref { text-align: right; margin: 0 0 1rem; color: var(--ink-soft); }
.slr-doc__sub { font: 500 var(--t-h3)/1.25 var(--serif); color: var(--ink); text-align: center; margin: 0 0 1rem; }
.slr-doc__p { margin: 0 0 0.95rem; text-wrap: pretty; }
.slr-doc__val { color: var(--ink); font-weight: 600; }
.slr-doc__tblwrap { overflow-x: auto; margin: 0.8rem 0 1.2rem; }
.slr-doc__tbl { width: 100%; border-collapse: collapse; }
.slr-doc__tbl th, .slr-doc__tbl td { border: var(--rule) solid var(--line-strong); padding: 0.45rem 0.6rem; vertical-align: top; text-align: left; }
.slr-doc__tbl th { font: 500 var(--t-micro)/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.slr-doc__line { display: block; }
/* пустые строки бумажной подписи: место под росчерк, но не полэкрана на телефоне */
.slr-doc__line.is-blank { height: 0.7em; }
.slr-sign { margin: 1rem 0 1.6rem; padding: 1rem 0 0; border-top: var(--rule) solid var(--line-strong); }
.slr-sign__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; }
.slr-sign__col { min-width: 0; overflow-wrap: anywhere; }
.slr-sign__who { display: block; margin-bottom: 0.3rem; font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.slr-mark {
  display: flex; align-items: center; gap: 0.7rem; min-height: 44px; margin: 0.9rem 0 0;
  padding: 0.55rem 0.8rem; border: var(--rule) solid var(--accent-deep); cursor: pointer;
  font: 500 var(--t-small)/1.35 var(--grotesk); color: var(--ink);
}
.slr-mark.is-on { background: var(--paper-raise); border-color: var(--accent); }
.slr-mark.is-view { cursor: default; border-style: dashed; }
.slr-mark__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slr-mark__box {
  flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--rule) solid var(--ink); color: transparent; background: var(--paper-raise);
}
.slr-mark__box svg { width: 18px; height: 18px; }
.slr-mark.is-on .slr-mark__box { background: var(--accent); border-color: var(--accent); color: var(--paper-raise); }
.slr-mark__in:focus-visible + .slr-mark__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.slr-mark__txt { display: flex; flex-direction: column; gap: 0.15rem; }
.slr-mark__t { overflow-wrap: anywhere; }
.slr-mark__time { font: 400 var(--t-micro)/1.2 var(--mono); color: var(--ink-faint); }
.slr-mark__time:empty { display: none; }
.slr-doc__trail { margin: 2rem 0 0; padding: 1rem 0 0; border-top: var(--rule) solid var(--line-strong); font: 400 var(--t-small)/1.5 var(--grotesk); color: var(--ink-soft); }
.slr-doc__trail p { margin: 0 0 0.3rem; }
.slr-doc__hash { font-family: var(--mono); overflow-wrap: anywhere; color: var(--ink); }
.slr-doc__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; justify-content: flex-end;
  padding: 0.6rem clamp(1rem, 4vw, 2.5rem) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  border-top: var(--rule) solid var(--line); background: var(--paper-raise);
}
.slr-doc__foot:empty { display: none; }
.slr-doc__count, .slr-doc__go, .slr-doc__print {
  min-height: 44px; padding: 0 1.1rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  -webkit-appearance: none; appearance: none;
}
.slr-doc__count { border: var(--rule) solid var(--line-strong); background: transparent; color: var(--accent-deep); margin-right: auto; }
.slr-doc__count.is-done { color: var(--ink-soft); }
.slr-doc__go { border: var(--rule) solid var(--accent); background: var(--accent); color: var(--paper-raise); }
.slr-doc__go:disabled { opacity: 0.45; cursor: default; }
.slr-doc__print { border: var(--rule) solid var(--line-strong); background: transparent; color: var(--ink); }
.slr-doc__print svg { width: 18px; height: 18px; }
.slr-doc__err { flex-basis: 100%; margin: 0; font: 400 var(--t-small)/1.4 var(--grotesk); color: var(--accent-deep); text-align: right; }
.slr-doc__err:empty { display: none; }

/* ---------- бухгалтер ---------- */
.slr-q { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.9rem; }
.slr-q__badge { color: var(--accent-deep); }
.slr-q__party { margin: 0; font: 400 var(--t-small)/1.5 var(--grotesk); color: var(--ink); }
.slr-q__rows { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: 0.2rem 1rem; }
.slr-q__row { display: contents; }
.slr-q__k { font: 500 var(--t-micro)/1.6 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.slr-q__v { font: 400 var(--t-small)/1.45 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.slr-q__row.is-changed .slr-q__v { color: var(--accent-deep); font-weight: 600; }
.slr-q__was { grid-column: 2; font: 400 var(--t-micro)/1.3 var(--mono); color: var(--ink-faint); text-decoration: line-through; }
.slr-q__sig { margin: 0; font: 400 var(--t-small)/1.45 var(--grotesk); color: var(--ink-soft); }
.slr-q__hash { font-family: var(--mono); color: var(--ink-faint); }
.slr-q__doc {
  align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--t-small)/1.3 var(--grotesk); color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px;
  -webkit-appearance: none; appearance: none;
}
.slr-q__docs { padding: 0.6rem 0.8rem; border: var(--rule) solid var(--line); }
.slr-q__dh { margin: 0 0 0.3rem; font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.slr-q__none { margin: 0; font: 400 var(--t-small)/1.45 var(--grotesk); color: var(--ink-faint); }
.slr-q__doc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.2rem 1rem; align-items: center; padding: 0.15rem 0; border-top: var(--rule) solid var(--line); }
.slr-q__doc-row:first-of-type { border-top: 0; }
.slr-q__doc-l { font: 400 var(--t-small)/1.4 var(--grotesk); color: var(--ink); }
.slr-q__doc-row.is-empty .slr-q__doc-l { color: var(--ink-faint); }
.slr-q__doc-files { display: flex; flex-wrap: wrap; gap: 0 0.8rem; }
.slr-q__open {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 var(--t-small)/1.3 var(--grotesk); color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere; -webkit-appearance: none; appearance: none;
}
.slr-q__doc-no { font: 400 var(--t-micro)/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.slr-q__why { max-width: 36rem; }
.slr-q__msg:empty { display: none; }

@media (max-width: 620px) {
  .slr-acts { flex-direction: column; align-items: stretch; }
  .slr-acts .u-stl__save { width: 100%; }
  .slr-sign__cols { grid-template-columns: 1fr; }
  .slr-q__rows { grid-template-columns: 1fr; }
  .slr-q__was { grid-column: 1; }
  .slr-q__doc-row { grid-template-columns: 1fr; }
  /* На телефоне: название, под ним загруженный файл, кнопка последней. */
  .slr-docs__row { grid-template-columns: 1fr; grid-template-areas: "label" "files" "pick"; row-gap: 0.3rem; }
  .slr-docs__pick { width: 100%; }
  .slr-docs__acts { margin-left: 0; }
  .slr-doc__foot { justify-content: stretch; }
  .slr-doc__count, .slr-doc__go, .slr-doc__print { flex: 1 1 auto; justify-content: center; }
  .slr-doc__count { margin-right: 0; }
  .slr-seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .slr-seg .u-seg__b { padding: 0 0.4rem; }
}

@media (max-width: 560px) {
  /* На телефоне окно садится снизу: до кнопок дотягивается большой палец. */
  .slr-modal { align-items: flex-end; padding: 0; }
  .slr-modal__box { width: 100%; max-height: 92vh; padding: 1.4rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); border-left: 0; border-right: 0; border-bottom: 0; }
}

/* Печать подписанного договора: на листе только договор. */
@media print {
  .slr-doc-open body > *:not(.slr-doc) { display: none !important; }
  .slr-doc { position: static; display: block; background: #fff; color: #000; }
  .slr-doc__bar, .slr-doc__foot { display: none !important; }
  .slr-doc__note { border-left-color: #000; background: none; }
  .slr-doc__scroll { overflow: visible; }
  .slr-doc__paper { max-width: none; padding: 0; }
  .slr-mark { border-color: #000; }
}