/* ============================================================
   АКАДЕМИЧЕСКИЙ САЛОН · «Печатный двор» — оттиск-редизайн цен.

   Файл живёт ТОЛЬКО на tariffs.html и грузится последним:
   всё здесь — надстройка над polish15-catalog.css, ничего из
   каталога и карточек услуг не трогает. Область видимости —
   [data-p15-tariffs], чтобы ни одно правило не утекло на
   services.html, где те же классы .price-row/.pricesearch.

   ГЛАВНОЕ ПРАВИЛО ЭТОЙ СТРАНИЦЫ, добытое замером: цена И кнопка
   «Рассчитать точно» обязаны попадать в первый экран ноутбука
   1280×720. Первая редакция файла об это разбилась — колофонная
   строка и шкала прайса вместе стоили 116px и вытолкнули кнопку
   на 817px, то есть за экран. Отсюда бюджетное правило: элемент,
   который занимает высоту ВЫШЕ кнопки, обязан нести факт, которого
   на странице ещё нет. Украшение имеет право только на то место,
   которое ничего не стоит: абсолютный слой, фон, состояние.
   ============================================================ */

/* ── Фишки выбора ──────────────────────────────────────────────
   Нажатие ощущается пальцем; недоступные сочетания гаснут. */
[data-p15-tariffs] .pick-chip {
  transition: color .16s ease, background-color .16s ease,
              border-color .16s ease, opacity .16s ease, transform .12s ease;
}

[data-p15-tariffs] .pick-chip:active { transform: scale(.96); }

/* Сочетания, которого нет в прайсе, быть не должно тупиком: раньше
   «Реферат + Защита» молча приводил к «посчитаем индивидуально»,
   и человек узнавал об этом только после клика. Теперь видно
   заранее. Кнопка НЕ блокируется: выбор остаётся возможным, за ним
   честный ответ про индивидуальный расчёт — просто он больше не
   выглядит как обычный путь. Стоимость по высоте — ноль. */
[data-p15-tariffs] .pick-chip[data-pick-off="1"] {
  opacity: .4;
  border-style: dashed;
}

[data-p15-tariffs] .pick-chip[data-pick-off="1"]:hover { opacity: .72; }

/* ── Карточка цены ─────────────────────────────────────────────
   Формуляр расчёта: стопка листов под верхним, сургучная печать
   мастерской, крупная цена. Всё добавленное — абсолютное или
   фоновое, высоты карточки не занимает. */
[data-p15-tariffs] .pricecard {
  position: relative;
  box-shadow: var(--shadow-paper-p15);
}

[data-p15-tariffs] .pricecard::before {
  content: "";
  position: absolute;
  inset: 10px -7px -7px 10px;
  background: var(--paper-p15);
  border: 1px solid var(--line-p15);
  transform: rotate(.5deg);
  z-index: -1;
}

/* Печать — плотный сургучный круг с засечным «АС», как
   .resume-card__seal и .choice-help__seal в эталоне style-lab/full.
   Первая редакция рисовала тонкий контурный кружок с пунктиром —
   стилистика не наша, да и размером 74px он спорил с ценой.
   Теперь 44px, приглушён и стоит выше строки типа работы. */
[data-p15-tariffs] .pricecard__seal {
  position: absolute;
  top: clamp(18px, 2vw, 24px);
  right: clamp(18px, 2vw, 24px);
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #fff5ea;
  background: var(--wax-p15);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .1);
  font: 500 14px/1 var(--serif);
  letter-spacing: .02em;
  opacity: .9;
  transform: rotate(-7deg);
  transform-origin: 50% 50%;
  pointer-events: none;
}

/* Смена цены = новый оттиск: цифра проявляется из лёгкой
   размытости (краска садится в бумагу), печать прижимается.
   Класс вешает JS; без него карточка просто мгновенно меняет
   текст — как и было до этого файла. */
[data-p15-tariffs] .pricecard.is-press .pricecard__sum strong {
  animation: press-sum .46s var(--ease-out-p15);
}

@keyframes press-sum {
  0%   { opacity: 0; transform: translateY(.22em); filter: blur(2px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: none; }
}

[data-p15-tariffs] .pricecard.is-press .pricecard__seal {
  animation: press-seal .5s var(--ease-out-p15);
}

@keyframes press-seal {
  0%   { transform: rotate(-7deg) scale(1); }
  35%  { transform: rotate(-8.5deg) scale(.9); }
  70%  { transform: rotate(-6.5deg) scale(1.05); }
  100% { transform: rotate(-7deg) scale(1); }
}

/* Цифры — табличные, чтобы при смене выбора разряды не плясали
   и цена меняла значение, а не ширину. */
[data-p15-tariffs] .pricecard__sum strong { font-variant-numeric: tabular-nums; }

/* Строка типа работы не должна заезжать под печать. */
[data-p15-tariffs] .pricecard__what { padding-right: 56px; }

/* ── Комиссия №0: три фиксированные цены прямо в карточке ──────
   Раньше флагман стоял без единой цифры, хотя цены у него
   единственного фиксированные — то есть самые твёрдые на
   странице. Теперь это видно без прокрутки к списку. */
[data-p15-tariffs] .k0card__prices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

[data-p15-tariffs] .k0card__prices li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 13px;
  background: rgba(var(--sheet-rgb-p15), .6);
  border: 1px solid var(--line-p15);
  border-radius: 999px;
}

[data-p15-tariffs] .k0card__prices span {
  color: var(--quiet-p15);
  font: 400 9.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

[data-p15-tariffs] .k0card__prices strong {
  color: var(--ink-p15);
  font: 500 14px/1 var(--serif);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Поиск по прайсу: лупа и живой счётчик ───────────────────── */
[data-p15-tariffs] .fulllist__tools {
  display: flex;
  align-items: center;
  gap: 18px;
}

[data-p15-tariffs] .pricesearch {
  position: relative;
  flex: 1 1 auto;
}

[data-p15-tariffs] .pricesearch__glass {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--quiet-p15);
  stroke-width: 1.6;
  stroke-linecap: round;
  pointer-events: none;
}

[data-p15-tariffs] .pricesearch input { padding-left: 40px; }

[data-p15-tariffs] .pricesearch__count {
  flex: none;
  margin: 0;
  color: var(--quiet-p15);
  font: 400 10.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ── Картотека: пять ящиков вместо ленты на 16 строк ───────────
   Сплошной список читался только перебором. Ящик = группа с
   именем и счётом позиций. Заголовок держим в одну строку и без
   собственного вертикального ритма: пять заголовков — это пять
   раз по высоте, и они уже стоили списку 270px. */
[data-p15-tariffs] .price-table--folio {
  display: grid;
  gap: 22px;
  padding-top: 20px;
  border-top: 0;
}

[data-p15-tariffs] .price-group__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-strong-p15);
}

[data-p15-tariffs] .price-group__head span {
  color: var(--ink-p15);
  font: 500 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

[data-p15-tariffs] .price-group__head em {
  color: var(--muted-p15);
  font: italic 400 12px/1.2 var(--serif);
  letter-spacing: .01em;
}

[data-p15-tariffs] .price-group__head small {
  margin-left: auto;
  color: var(--quiet-p15);
  font: 400 10px/1 var(--mono);
}

[data-p15-tariffs] .price-group .price-row { border-bottom-style: dotted; }
[data-p15-tariffs] .price-group .price-row:last-child { border-bottom: 0; }

/* Левое поле картотеки.

   Подсветка выбранной строки рисует сургучную полосу ВНУТРЬ
   (`box-shadow: inset 3px`), а у строки списка левый отступ был 4px на
   десктопе и ровно 0 на телефоне. Полоса ложилась прямо на текст: «от»
   у цены уходило под сургуч, а название начиналось от самой кромки.
   Теперь у строк и заголовков групп общее левое поле, и полоса живёт
   в нём, а не поверх букв. Значение больше толщины полосы с запасом. */
[data-p15-tariffs] .fulllist .price-row,
[data-p15-tariffs] .price-group__head {
  padding-left: 14px;
}

/* Подсветка непрозрачная, а не сургуч с прозрачностью: сквозь
   полупрозрачную заливку просвечивала фоновая вертикальная линия
   набора и рассекала строку пополам — читалось как артефакт. */
[data-p15-tariffs] .fulllist .price-row.is-picked {
  background: var(--wax-soft-p15);
}

/* Наведение — лист приподнимается из ящика: подложка и сургучная
   закладка слева. Сдвигов нет, только краска. */
@media (hover: hover) {
  [data-p15-tariffs] .fulllist .price-row:hover {
    background: rgba(var(--sheet-rgb-p15), .66);
    box-shadow: inset 2px 0 0 var(--wax-p15);
  }
}

/* Сумма — засечками, как в переплетённом прейскуранте; табличные
   цифры держат разряды в одну вертикаль по всему ящику. */
[data-p15-tariffs] .fulllist .price-row__sum strong {
  font: 500 15px/1 var(--serif);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* Точечное заполнение между названием и ценой.

   На широком экране строка разваливалась: колонка названия тянется
   на всю свободную ширину, а текст в ней короткий — между концом
   «ВКР / диплом» и его ценой оставалось 968px пустоты (замер на
   окне 2029px). Глазу не за что держаться, строка читается как два
   несвязанных куска, и в пустой зоне вылезала фоновая вертикальная
   линия набора — со стороны это выглядело поломкой, а не воздухом.

   Решение из книжного набора: отточие, как в оглавлении и в любом
   настоящем прейскуранте. Оно ведёт взгляд от названия к сумме и
   ничего не стоит по высоте.

   Точки живут на ::before, а не на ::after: ::after у этого же
   элемента уже занят меткой «ваш подбор». Порядок внутри строки
   задаётся order — текст (0), метка (2), отточие (3). */
[data-p15-tariffs] .fulllist .price-row > div strong {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

[data-p15-tariffs] .fulllist .price-row > div strong::before {
  content: "";
  order: 3;
  flex: 1 1 auto;
  min-width: 20px;
  align-self: center;
  border-bottom: 1px dotted var(--line-strong-p15);
  opacity: .8;
}

[data-p15-tariffs] .fulllist .price-row.is-picked > div strong::after {
  order: 2;
  margin-left: 0;
}

/* На подобранной строке отточие подсвечивается вместе с ней. */
[data-p15-tariffs] .fulllist .price-row.is-picked > div strong::before {
  border-bottom-color: var(--wax-p15);
  opacity: .4;
}

/* Строка, выбранная подбором наверху, получает подпись — иначе
   подсветку легко принять за случайное выделение. */
[data-p15-tariffs] .fulllist .price-row.is-picked > div strong::after {
  content: "ваш подбор";
  margin-left: 10px;
  color: var(--wax-p15);
  font: 400 9.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: .16em;
  white-space: nowrap;
}

/* ── Оплата: три строчные виньетки ─────────────────────────────
   Первая редакция ставила рисунок блоком НАД текстом: 154px на
   карточку, блок оплаты раздувался с 420 до 591px, а в статике
   (то есть в любой случайный момент девятисекундного цикла) это
   выглядело как три бледные пустые рамки. Теперь виньетка стоит
   в строке с номером — 46px, плотный штрих, и она читается даже
   застывшей. Токены вместо литералов: тёмная тема сама. */
[data-p15-tariffs] .term-grid--inline article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}

[data-p15-tariffs] .term-grid--inline .pay-fig {
  grid-row: 1 / span 2;
  margin: 0;
  padding: 0;
}

[data-p15-tariffs] .term-grid--inline article > span { align-self: end; }
[data-p15-tariffs] .term-grid--inline h3 { align-self: start; }

/* Абзац уходит под виньетку во всю ширину: короткая колонка
   рядом с картинкой рвала бы текст на четыре слова в строке. */
[data-p15-tariffs] .term-grid--inline article > p {
  grid-column: 1 / -1;
  margin-top: 8px;
}

[data-p15-tariffs] .pay-fig svg {
  display: block;
  width: 58px;
  height: auto;
}

[data-p15-tariffs] .pay-fig svg * {
  fill: none;
  stroke: var(--muted-p15);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Сургучом — только смысловые акценты: принято, заверено, вернулось. */
[data-p15-tariffs] .pay-fig .pf-tick,
[data-p15-tariffs] .pay-fig .pf-stamp circle,
[data-p15-tariffs] .pay-fig .pf-stamptick,
[data-p15-tariffs] .pay-fig .pf-back,
[data-p15-tariffs] .pay-fig .pf-backhead,
[data-p15-tariffs] .pay-fig .pf-coin { stroke: var(--wax-p15); }

[data-p15-tariffs] .pay-fig .pf-leaf,
[data-p15-tariffs] .pay-fig .pf-row { stroke-width: 2; opacity: .75; }

/* Гравюра 1 «По этапам»: нить тянется под тремя тетрадями, после
   каждой — отметка о принятии. Пауза между рывками и есть смысл
   картинки: следующий платёж только после принятия предыдущего.

   Раскладка цикла подчинена одному требованию: собранная картинка
   должна стоять дольше, чем рисоваться. В первой редакции последняя
   отметка появлялась на 75% цикла — то есть 6 секунд из 8 виньетка
   была недорисованной, и в любой случайный момент (а скриншот и
   беглый взгляд — это всегда случайный момент) читалась как пустая
   рамка. Теперь всё собирается к 30% и держится до 88%. */
[data-p15-tariffs] .pay-fig--stages .pf-thread {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pf-thread 8s linear infinite;
}

@keyframes pf-thread {
  0%       { stroke-dashoffset: 1;  opacity: 1; }
  6%       { stroke-dashoffset: .71; }
  12%      { stroke-dashoffset: .71; }
  17%      { stroke-dashoffset: .36; }
  22%      { stroke-dashoffset: .36; }
  27%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0;  opacity: 1; }
  96%,100% { stroke-dashoffset: 0;  opacity: 0; }
}

[data-p15-tariffs] .pay-fig--stages .pf-tick {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

[data-p15-tariffs] .pf-stage--a .pf-tick { animation: pf-tick-a 8s var(--ease-out-p15) infinite; }
[data-p15-tariffs] .pf-stage--b .pf-tick { animation: pf-tick-b 8s var(--ease-out-p15) infinite; }
[data-p15-tariffs] .pf-stage--c .pf-tick { animation: pf-tick-c 8s var(--ease-out-p15) infinite; }

@keyframes pf-tick-a {
  0%, 6%   { stroke-dashoffset: 1; opacity: 1; }
  11%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0; opacity: 1; }
  96%,100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes pf-tick-b {
  0%, 17%  { stroke-dashoffset: 1; opacity: 1; }
  22%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0; opacity: 1; }
  96%,100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes pf-tick-c {
  0%, 27%  { stroke-dashoffset: 1; opacity: 1; }
  32%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0; opacity: 1; }
  96%,100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Гравюра 2 «С чеком»: чек выезжает из прорези, строки печатаются,
   круглая печать заверяет. Прорезь — clipPath внутри самой SVG:
   ниже линии чека просто не существует. */
[data-p15-tariffs] .pay-fig--receipt .pf-receipt {
  transform: translateY(46px);
  animation: pf-rise 9s var(--ease-out-p15) infinite;
}

@keyframes pf-rise {
  0%   { transform: translateY(46px); opacity: 1; }
  11%  { transform: translateY(0); }
  85%  { transform: translateY(0);    opacity: 1; }
  93%  { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(46px); opacity: 0; }
}

[data-p15-tariffs] .pay-fig--receipt .pf-row { opacity: 0; }
[data-p15-tariffs] .pay-fig--receipt .pf-row--a { animation: pf-row-a 9s linear infinite; }
[data-p15-tariffs] .pay-fig--receipt .pf-row--b { animation: pf-row-b 9s linear infinite; }
[data-p15-tariffs] .pay-fig--receipt .pf-row--c { animation: pf-row-c 9s linear infinite; }

@keyframes pf-row-a { 0%,12% { opacity: 0; } 15% { opacity: .75; } 85% { opacity: .75; } 91%,100% { opacity: 0; } }
@keyframes pf-row-b { 0%,15% { opacity: 0; } 18% { opacity: .75; } 85% { opacity: .75; } 91%,100% { opacity: 0; } }
@keyframes pf-row-c { 0%,18% { opacity: 0; } 21% { opacity: .75; } 85% { opacity: .75; } 91%,100% { opacity: 0; } }

[data-p15-tariffs] .pay-fig--receipt .pf-stamp circle {
  transform: scale(0);
  transform-origin: 36px 33px;
  animation: pf-stampin 9s var(--ease-out-p15) infinite;
}

@keyframes pf-stampin {
  0%, 23%  { transform: scale(0);    opacity: 0; }
  28%      { transform: scale(1.12); opacity: 1; }
  32%      { transform: scale(1); }
  85%      { transform: scale(1);    opacity: 1; }
  91%,100% { transform: scale(1);    opacity: 0; }
}

[data-p15-tariffs] .pay-fig--receipt .pf-stamptick {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pf-stamptick 9s linear infinite;
}

@keyframes pf-stamptick {
  0%, 28%  { stroke-dashoffset: 1; opacity: 1; }
  33%      { stroke-dashoffset: 0; }
  85%      { stroke-dashoffset: 0; opacity: 1; }
  91%,100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Гравюра 3 «С правом отказаться»: платёж уходит тонкой линией
   вправо, сургучная линия возвращается к кошельку, монета встаёт
   на место. Обратный путь нарисован справа налево — SVG рисует
   штрих по направлению пути, «назад» получается само. */
[data-p15-tariffs] .pay-fig--refund .pf-fwd {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pf-fwd 9s linear infinite;
}

@keyframes pf-fwd {
  0%, 3%   { stroke-dashoffset: 1; opacity: .7; }
  12%      { stroke-dashoffset: 0; }
  86%      { stroke-dashoffset: 0; opacity: .7; }
  94%,100% { stroke-dashoffset: 0; opacity: 0; }
}

[data-p15-tariffs] .pay-fig--refund .pf-back {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pf-backdraw 9s var(--ease-out-p15) infinite;
}

@keyframes pf-backdraw {
  0%, 15%  { stroke-dashoffset: 1; opacity: 1; }
  28%      { stroke-dashoffset: 0; }
  86%      { stroke-dashoffset: 0; opacity: 1; }
  94%,100% { stroke-dashoffset: 0; opacity: 0; }
}

[data-p15-tariffs] .pay-fig--refund .pf-backhead {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pf-backhead 9s linear infinite;
}

@keyframes pf-backhead {
  0%, 28%  { stroke-dashoffset: 1; opacity: 1; }
  32%      { stroke-dashoffset: 0; }
  86%      { stroke-dashoffset: 0; opacity: 1; }
  94%,100% { stroke-dashoffset: 0; opacity: 0; }
}

[data-p15-tariffs] .pay-fig--refund .pf-coin {
  transform: scale(0);
  transform-origin: 26px 35px;
  animation: pf-coin 9s var(--ease-out-p15) infinite;
}

@keyframes pf-coin {
  0%, 32%  { transform: scale(0);    opacity: 0; }
  37%      { transform: scale(1.15); opacity: 1; }
  41%      { transform: scale(1); }
  86%      { transform: scale(1);    opacity: 1; }
  94%,100% { transform: scale(1);    opacity: 0; }
}

/* ── Тёмная тема: точечные поправки ────────────────────────────
   Токены перекрашивают всё сами; вручную — только подложка
   стопки, которой нужен более глухой тон, чем лист. */
:root[data-theme="dark"] [data-p15-tariffs] .pricecard::before { background: var(--canvas-deep); }

/* ── Телефон ───────────────────────────────────────────────────
   Первый экран с ценой неприкосновенен: на 844px каждая лишняя
   строка отодвигает цену от края. Печать остаётся — она
   абсолютная и высоты не ест. */
@media (max-width: 920px) {
  [data-p15-tariffs] .pricecard__seal {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    font-size: 12px;
  }

  [data-p15-tariffs] .pricecard__what { padding-right: 46px; }
  [data-p15-tariffs] .pricecard::before { inset: 8px -5px -5px 8px; }

  [data-p15-tariffs] .price-table--folio { gap: 18px; padding-top: 16px; }
  [data-p15-tariffs] .price-group__head em { display: none; }
  [data-p15-tariffs] .pricesearch__count { display: none; }
  [data-p15-tariffs] .fulllist .price-row.is-picked > div strong::after { content: none; }

  /* Отточие — лекарство от широкой строки; на телефоне разрыва нет,
     название и цена и так стоят рядом. Точки там только шумели бы. */
  [data-p15-tariffs] .fulllist .price-row > div strong::before { display: none; }

  [data-p15-tariffs] .term-grid--inline article { grid-template-columns: 48px minmax(0, 1fr); }
  [data-p15-tariffs] .pay-fig svg { width: 48px; }
}

/* ── Покой по просьбе системы ──────────────────────────────────
   Виньетки застывают на финальном кадре (всё принято, чек
   заверен, монета вернулась), а не на пустом первом. */
@media (prefers-reduced-motion: reduce) {
  [data-p15-tariffs] .pricecard.is-press .pricecard__sum strong,
  [data-p15-tariffs] .pricecard.is-press .pricecard__seal,
  [data-p15-tariffs] .pay-fig svg * { animation: none !important; }

  [data-p15-tariffs] .pay-fig--stages .pf-thread,
  [data-p15-tariffs] .pay-fig--stages .pf-tick,
  [data-p15-tariffs] .pay-fig--receipt .pf-stamptick,
  [data-p15-tariffs] .pay-fig--refund .pf-fwd,
  [data-p15-tariffs] .pay-fig--refund .pf-back,
  [data-p15-tariffs] .pay-fig--refund .pf-backhead { stroke-dashoffset: 0; }

  [data-p15-tariffs] .pay-fig--receipt .pf-receipt { transform: none; }
  [data-p15-tariffs] .pay-fig--receipt .pf-row { opacity: .75; }
  [data-p15-tariffs] .pay-fig--receipt .pf-stamp circle,
  [data-p15-tariffs] .pay-fig--refund .pf-coin { transform: none; opacity: 1; }
}