/* ============================================================================
   Служебные страницы: вход, «Мои материалы», «Управление», касса,
   полоска «Сохранить» на материалах.

   Страница набрана главой издания (src/templates/parts/service-open.php):
   бумага, Д2 с маркером меню, лид, корпус, кнопка-рамка, колофон — всё
   из site.css. Здесь только то, чего у издания не было: поле, галочка,
   сообщение, строка с ценой. Вид — по демо review/preview/src/vhod-vid.html.

   ИЕРАРХИЯ — ТА ЖЕ ЛЕСТНИЦА, ЧТО НА САЙТЕ, без новых ступеней:
   Д2 — заголовок; Р1 — лид, названия купленного, вводимый текст;
   Р2 полужирный — имя пункта (как имя варианта в предложении);
   Р2 — корпус; моно-подпись — пояснения; моно-колонтитул — группы.

   РИТМ — ДВА ШАГА. Большой отделяет одно от другого (группу, поле,
   раздел) — тот же, что между вариантами предложения. Малый — внутри
   одного (подпись к полю, строка к строке).
   ========================================================================= */

.auth {
  --auth-step: clamp(38px, 6vh, 54px);
  --auth-gap:  clamp(10px, 1.6vh, 16px);
}

/* Кнопка формы — та же рамка, что ссылка-кнопка: без серой заливки браузера. */
button.btn { background: none; cursor: pointer; }

.auth__page > form,
.auth__page > .auth__sect { max-width: var(--measure); }

/* ── Сообщение ──────────────────────────────────────────────────────────
   Строка с коротким эгейским штрихом слева — тем же, что отмечает
   текущий пункт оглавления. Не ящик и не цветная плашка (§8).          */
.auth__msg {
  position: relative;
  max-width: 52ch;
  margin: 0 0 var(--auth-step);
  padding-left: 24px;
}
.auth__msg::before {
  content: '';
  position: absolute;
  left: 0;
  top: .8em;
  width: 14px;
  height: 1px;
  background: var(--aegean);
}

/* ── Поле ───────────────────────────────────────────────────────────────
   Строка без рамки: линия снизу, как линейка в выходных данных. В фокусе
   линия становится эгейской и вдвое толще — голубой красит линии, не
   буквы (док. 01 §2). Кегль Р1: не меньше 16px, иначе iOS увеличивает
   страницу при фокусе.                                                  */
.auth__label {
  display: block;
  margin-top: var(--auth-step);
  font-size: var(--doc-caption);
  letter-spacing: var(--doc-caption-ls);
  color: var(--ink-soft);
}
/* После кнопки — вдвое дальше: это уже другой способ, а не продолжение. */
.auth__label--far { margin-top: calc(var(--auth-step) * 1.4); }

.auth__field {
  display: block;
  width: 100%;
  max-width: 30rem;
  margin-top: 2px;
  padding: 10px 0 9px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-family: var(--speech);
  font-size: var(--t-lead);
  line-height: 1.4;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.auth__field:focus { border-bottom: 2px solid var(--aegean); padding-bottom: 8px; }
.auth__field::placeholder { color: var(--ink-soft); opacity: .7; }
textarea.auth__field { resize: vertical; min-height: calc(var(--t-lead) * 1.4 + 19px); }
.auth__field[type="search"] { margin-top: var(--auth-gap); }
.auth__field[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* КОД ИЗ ПИСЬМА — ШЕСТЬ МЕСТ. Под полем шесть коротких линеек: видно,
   сколько цифр и сколько осталось. Моно, шаг знака равен шагу линейки. */
.auth__code {
  display: block;
  /* Шесть ячеек по 1.5em плюс поля: без запаса шестая цифра со своим
     межбуквенным хвостом не влезала, и поле прокручивало первую. Линейки
     рисуются по полю содержимого — ровно под цифрами. */
  width: calc(6 * 1.5em + .3em);
  margin-top: var(--auth-step);
  padding: 4px .1em 10px .2em;
  background-origin: content-box !important;
  background-clip: content-box !important;
  border: 0;
  border-radius: 0;
  outline: none;
  background: linear-gradient(90deg, var(--ink) 0 1.05em, transparent 1.05em 1.5em) 0 100% / 1.5em 1px repeat-x;
  color: var(--ink);
  font-family: var(--doc);
  font-size: 34px;
  letter-spacing: .9em;
  -webkit-appearance: none;
  appearance: none;
}
.auth__code:focus {
  background-image: linear-gradient(90deg, var(--aegean) 0 1.05em, transparent 1.05em 1.5em);
  background-size: 1.5em 2px;
}

/* ── Галочка ────────────────────────────────────────────────────────────
   Квадрат-строка 18px той же линией, что кнопка-рамка; отмеченная залита
   чернилом с полем бумаги внутри. Выбор одного из нескольких — круг: это
   договорённость, которую читают раньше слов, и квадратом её не заменить. */
.auth__checks { min-width: 0; margin: var(--auth-gap) 0 0; padding: 0; border: 0; }
.auth__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 34rem;
  padding: 9px 0;
  line-height: 1.4;
  cursor: pointer;
}
.auth__check input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.auth__check input[type="radio"] { border-radius: 50%; }
.auth__check input:checked { background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }
.auth__check input:focus-visible { outline: 2px solid var(--aegean); outline-offset: 2px; }
.auth__check--all { font-weight: 500; }
.auth__check--off { color: var(--ink-soft); cursor: default; }
.auth__check--off input { border-color: var(--hairline); cursor: default; }
.auth__checks-sub { padding-left: 30px; }
.auth__aside { font-size: var(--doc-caption); letter-spacing: var(--doc-caption-ls); color: var(--ink-soft); }
/* Согласие с условиями — на малый шаг под полем: оно о том же поле. */
.auth__agree { margin-top: var(--auth-gap); }

/* Строка с ценой: название слева, цена моно у правого поля — колонка
   цен сравнивается одним взглядом. */
.auth__price {
  margin-left: auto;
  padding-left: 16px;
  font-size: var(--doc-caption);
  letter-spacing: var(--doc-caption-ls);
  white-space: nowrap;
  line-height: calc(var(--t-body) * 1.4);
}
.auth__line {
  display: flex;
  align-items: flex-start;
  max-width: 34rem;
  margin: var(--auth-gap) 0 0;
  padding: 9px 0;
  line-height: 1.4;
  font-weight: 500;
}
.auth__line .auth__price { font-weight: 400; }

/* ── Мелкое ─────────────────────────────────────────────────────────────
   Пояснения, политика, кто вошёл и «Выйти» — моно-подписью в конце, не
   кнопками: это выходные данные страницы, а не её действие.            */
.auth__fine {
  max-width: 52ch;
  margin-top: var(--auth-step);
  font-size: var(--doc-caption);
  letter-spacing: var(--doc-caption-ls);
  color: var(--ink-soft);
}
.auth__fine + .auth__fine { margin-top: var(--auth-gap); }

/* Кнопка формы, набранная ссылкой: «Выйти», «Прислать заново». */
.auth__link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline-aegean);
  text-underline-offset: .2em;
  cursor: pointer;
}

/* Второе действие рядом с кнопкой-рамкой — словом: «Закрыть», «Отозвать».
   Высота цели — 44px, как у кнопки. */
.auth__textbtn {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--speech);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline);
  text-underline-offset: .2em;
  cursor: pointer;
}
.auth__textbtn:hover { color: var(--aegean); }
.auth__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-top: clamp(24px, 4vh, 40px);
}
.auth__actions .btn { margin-top: 0; }

/* ── Купленное ──────────────────────────────────────────────────────────
   Группа — колонтитулом (как подзаголовок группы перечня), под ней
   названия ссылками на ступени лида, как «Содержание» материалов. */
.auth__group {
  margin-top: var(--auth-step);
  font-size: var(--doc-folio);
  letter-spacing: var(--doc-folio-ls);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.entry + .auth__group,
.auth__msg + .auth__group,
.auth__sect > .auth__group:first-child { margin-top: 0; }
.auth__toc { margin: var(--auth-gap) 0 0; padding: 0; list-style: none; max-width: var(--measure); }
.auth__toc li { padding: clamp(7px, 1.2vh, 11px) 0; font-size: var(--t-lead); line-height: 1.35; }
.auth__after { margin-top: var(--auth-step); }

/* ── Три пути (пустые «Мои материалы») ──────────────────────────────────
   Перечень с номером в жёлобе — той же конструкции, что «Кому не
   подойдёт» и «Содержание»: номер моно в своей колонке, текст ровно. */
.auth__steps { margin: var(--auth-step) 0 0; padding: 0; list-style: none; max-width: var(--measure); }
.auth__steps > li { position: relative; padding-left: calc(2.6em + 12px); }
.auth__steps > li + li { margin-top: var(--auth-step); }
.auth__n {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 11px;
  letter-spacing: var(--doc-folio-ls);
  line-height: calc(var(--t-body) * 1.62);
  color: var(--ink-soft);
}
.auth__step { margin: 0 0 .35em; font-weight: 500; }
.auth__steps .chapter__p { margin: 0; }
.auth__steps form { margin-top: var(--auth-gap); }

/* ── «Управление» ───────────────────────────────────────────────────── */
.auth__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  font-size: var(--doc-service);
  letter-spacing: var(--doc-service-ls);
  text-transform: uppercase;
}
.auth__jump a { padding: 10px 0; }
.auth__sect { margin-top: calc(var(--auth-step) * 1.4); scroll-margin-top: 24px; }
.auth__item { margin-top: var(--auth-gap); }
.auth__item + .auth__item { margin-top: calc(var(--auth-step) * .6); }
.auth__who { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.auth__meta { margin: 2px 0 0; font-size: var(--doc-caption); letter-spacing: var(--doc-caption-ls); color: var(--ink-soft); }
.auth__item .chapter__p { margin-top: 2px; }
.auth__item > .auth__textbtn { margin-top: 4px; }
.auth__note { max-width: 52ch; margin: 8px 0 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }

.auth__person { margin-top: var(--auth-step); }
.auth__person[hidden] { display: none; }
.auth__person + .auth__person { margin-top: calc(var(--auth-step) * .6); }
.auth__has {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  max-width: 34rem;
}
.auth__has .auth__textbtn { flex: 0 0 auto; font-size: 14px; }

/* ── Полоска «Сохранить» на материалах (Р-137) ──────────────────────────
   Прибита к низу экрана: наверху её унёс бы снап. Подложка paper-deep —
   «редкая отбивка» системы, волосяная сверху; не чёрная, чтобы не спорить
   с колофоном, и не цветная, чтобы не кричать на каждой встрече. */
.bind-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px var(--pad) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline);
  background: var(--paper-deep);
  color: var(--ink);
  font-family: var(--speech);
  font-size: 15px;
  line-height: 1.4;
}
.bind-strip > span { flex: 1; }
.bind-strip .btn { flex: 0 0 auto; margin: 0; padding: 12px 20px; background: none; cursor: pointer; }

/* Под колонтитулом группы текст — на малый шаг, как список под ним. */
.auth__group + .chapter__p { margin-top: var(--auth-gap); }
/* Откуда и когда — своей строкой под названием: в одну строку с
   «Отозвать» на 390px она рвалась посередине. */
.auth__has .auth__aside { display: block; }
.auth__has + .auth__has { margin-top: 4px; }

/* Зачем сохранять — подписью под вопросом: полоска не толще трёх строк. */
.bind-strip__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--doc-caption);
  letter-spacing: var(--doc-caption-ls);
  color: var(--ink-soft);
}