/* ============================================================
   Кнопки, поля, ссылки.
   Пока только то, без чего страница нечитаема на тёмном фоне.
   Карточки, окно загрузки и плитки комплекта — на стадии возможностей.
   ============================================================ */

a {
  color: var(--c-accent-text);
  text-underline-offset: 0.18em;
}

/* Видимая рамка фокуса обязательна: по сайту ходят и с клавиатуры, а на
   тёмном фоне браузерная рамка по умолчанию почти не видна. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* ---------- поля ---------- */

input, textarea, select, button { font: inherit; }

:where(input:not([type="submit"]):not([type="button"]), textarea, select) {
  background: var(--c-surface);
  color: var(--c-text);
  border: var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
}

::placeholder { color: var(--c-muted); opacity: 1; }

/* ---------- кнопки ---------- */

:where(button, input[type="submit"], input[type="button"], .button) {
  background: var(--c-accent);
  color: var(--c-accent-in);
  border: 0;
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-5);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}

:where(button, input[type="submit"], input[type="button"], .button):hover {
  filter: brightness(1.08);
}

/* ============================================================
   Окно загрузки
   ============================================================ */

.sr-lede { max-width: 54ch; margin-block-end: var(--s-7); }

.sr-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-4);
}

/*
 * Отступ под заголовком больше, чем над ним.
 *
 * Было одинаково: 16 пикселей после надзаголовка в 12 пикселей и столько же
 * после заголовка в 56. Один зазор для крошечной строки и для огромной —
 * отсюда ощущение, что текст слипся. Воздух обязан считаться от роста того,
 * за чем он идёт.
 *
 * Надзаголовок остаётся прижатым: он подпись к заголовку, а не отдельная
 * мысль, и отодвинуть его значило бы разорвать пару.
 */
.sr-lede__title { font-size: var(--t-hero); margin: 0 0 var(--s-5); }

.sr-lede__sub {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-lg);
  max-width: var(--w-text);
}

/* ---------- зона броска ---------- */

.sr-drop {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px dashed var(--c-line);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.sr-drop:hover { background: var(--c-hover); }

/* Поле спрятано от глаза, но не от клавиатуры и не от чтеца: display:none
   выкинул бы его из порядка обхода, и зона перестала бы открываться с
   клавиатуры вовсе. */
.sr-drop__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sr-drop:focus-within {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.sr-drop.is-over {
  border-color: var(--c-accent-text);
  border-style: solid;
  background: var(--c-hover);
}

.sr-drop__mark {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  background: var(--c-accent);
  flex: none;
}

.sr-drop__text { display: flex; flex-direction: column; gap: var(--s-1); }
.sr-drop__text b { font-weight: var(--fw-semi); }

.sr-drop__hint {
  color: var(--c-muted);
  font-size: var(--t-sm);
}

.sr-drop__cta {
  margin-inline-start: auto;
  background: var(--c-accent);
  color: var(--c-accent-in);
  padding: var(--s-3) var(--s-5);
  font-weight: var(--fw-semi);
  font-size: var(--t-sm);
  white-space: nowrap;
}

/* ---------- что вышло ---------- */

.sr-outcome { margin-block-start: var(--s-6); }

.sr-working {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
}

.sr-working__spin {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border: 2px solid var(--c-line);
  border-top-color: var(--c-accent-text);
  border-radius: var(--r-dot);
  animation: sr-spin 700ms linear infinite;
  flex: none;
}

@keyframes sr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sr-working__spin { animation: none; border-top-color: var(--c-accent-text); }
}

/*
 * Отступ снизу — не украшение. Без него сообщение об ошибке прилипает к
 * первому полю формы, и «That email and password do not match» читается как
 * подпись к полю «Your email». Так было на странице регистрации с самого
 * начала, просто ошибку там до сих пор никто не видел.
 */
.sr-error {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface);
  border-inline-start: 3px solid var(--c-error);
  color: var(--c-text);
  max-width: var(--w-text);
}

.sr-ready {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 720px) {
  .sr-ready { grid-template-columns: 1fr; }
}

.sr-ready__shot { margin: 0; background: var(--c-sunk); border: var(--border); }
.sr-ready__shot img { display: block; inline-size: 100%; block-size: auto; }

.sr-ready__title { font-size: var(--t-xl); margin: 0 0 var(--s-4); }

.sr-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  margin: 0 0 var(--s-5);
  font-size: var(--t-sm);
}

.sr-facts dt {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  align-self: center;
}

.sr-facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.sr-note {
  margin: 0 0 var(--s-5);
  color: var(--c-ok);
  font-size: var(--t-sm);
  max-width: 46ch;
}

.sr-actions { margin: 0; }

.sr-unfinished {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: var(--border);
  color: var(--c-muted);
  font-size: var(--t-sm);
  max-width: var(--w-text);
}

/* ---------- кнопка ---------- */

/* Отдельным классом, а не только через :where(button).
   У :where() специфичность ноль, и правило родительской темы его перебивает —
   кнопка выходила серой, хотя цвет был задан. Наши кнопки носят этот класс. */
.sr-button {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-accent-in);
  border: 0;
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-5);
  font-family: var(--f-body);
  font-weight: var(--fw-semi);
  font-size: var(--t-sm);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--dur-fast) var(--ease);
}

.sr-button:hover { filter: brightness(1.08); }
.sr-button:active { filter: brightness(0.94); }

/* На телефоне зона броска складывается столбиком: в строку она не влезает —
   заголовок рвётся посреди слова, а кнопка отжимает подсказку в узкую колонку.
   Телефон здесь не запасной случай, а основной: товар снимают им же. */
@media (max-width: 560px) {
  .sr-drop {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    padding: var(--s-5);
  }

  .sr-drop__mark { align-self: flex-start; }

  .sr-drop__cta {
    margin-inline-start: 0;
    text-align: center;
    padding-block: var(--s-4);
  }
}

/* ---------- ход работы ---------- */

.sr-running { margin-block-start: var(--s-6); max-width: var(--w-text); }

.sr-bar {
  display: block;
  block-size: 6px;
  background: var(--c-surface);
  border: var(--border);
  overflow: hidden;
  margin-block: var(--s-4) var(--s-3);
}

.sr-bar__fill {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--c-accent);
  transition: inline-size var(--dur-base) var(--ease);
}

.sr-running__stage {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ---------- готовый комплект ---------- */

.sr-set { margin-block-start: var(--s-6); }

.sr-tiles {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s-5);
  /* Каждая карточка своей высоты. Растянутые до общей, они оставляют
     пустоту под широким баннером — а разная высота здесь правда: комплект и
     состоит из разных форм. */
  align-items: start;
}

.sr-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--c-surface);
  border: var(--border);
  padding: var(--s-4);
}

/* Плитки разной формы, и это правда о содержимом: комплект и состоит из
   разных форм. Ровная сетка квадратов сказала бы неправду. */
.sr-tile img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  background: var(--c-sunk);
}

.sr-tile__cap {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--c-muted);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.sr-tile__cap b {
  display: block;
  color: var(--c-text);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}

.sr-tile__link {
  margin-block-start: auto;
  align-self: flex-start;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--c-accent-text);
  text-decoration: none;
  border-block-end: 1px solid currentColor;
}

/* Второстепенное действие рядом с главным: не кнопка, чтобы не спорить с ней. */
.sr-plain {
  background: none;
  border: 0;
  color: var(--c-muted);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  cursor: pointer;
  padding: var(--s-3) var(--s-2);
  margin-inline-start: var(--s-3);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sr-plain:hover { color: var(--c-text); }

/* ---------- подхват брошенной работы и кошелёк ---------- */

.sr-resume {
  margin-block-end: var(--s-5);
  padding: var(--s-5);
  background: var(--c-surface);
  border: var(--border);
  border-inline-start: 3px solid var(--c-accent);
  max-width: var(--w-text);
}

.sr-resume__text { margin: 0 0 var(--s-4); }

.sr-purse {
  margin: 0 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.sr-error__text { margin: 0; }
.sr-error .sr-actions { margin-block-start: var(--s-4); }

/* ---------- форма ---------- */

.sr-form { max-width: var(--w-form); margin-block-end: var(--s-6); }

.sr-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
}

.sr-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.sr-input {
  inline-size: 100%;
  background: var(--c-surface);
  color: var(--c-text);
  border: var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-base);
}

.sr-hint { font-size: var(--t-sm); color: var(--c-muted); }

/* ---------- выбор фона ---------- */

.sr-picking { margin-block-start: var(--s-6); }

.sr-picking__note {
  color: var(--c-muted);
  max-inline-size: var(--w-text);
  margin-block: 0 var(--s-5);
}

/*
 * Два в ряд на телефоне, четыре на широком экране.
 *
 * Не `auto-fit`: он растягивает последний ряд, и когда служба вернула три фона
 * вместо четырёх, третий становится вдвое шире соседей — человек читает это
 * как «этот главный».
 */
.sr-pick {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  max-inline-size: 52rem;
}

@media (min-width: 48rem) {
  .sr-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sr-pick__one {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 120ms var(--ease), transform 120ms var(--ease);
}

.sr-pick__one img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.sr-pick__one:hover:not(:disabled),
.sr-pick__one:focus-visible {
  border-color: var(--c-accent);
  transform: translateY(-2px);
}

/* Выбранный остаётся ярким, пока остальные гаснут: видно, что нажалось. */
.sr-pick__one[data-taken='yes'] { border-color: var(--c-accent); opacity: 1; }
.sr-pick__one:disabled { cursor: default; opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
  .sr-pick__one { transition: none; }
  .sr-pick__one:hover:not(:disabled),
  .sr-pick__one:focus-visible { transform: none; }
}

/* ---------- выбранный фон крупно ---------- */

.sr-look { margin-block-start: var(--s-6); }

/*
 * Ограничено по высоте окна, а не только по ширине.
 *
 * Квадрат в 640 точек на широком экране вытесняет обе кнопки за нижний край, и
 * человек, которому предложили посмотреть и решить, видит картинку без решения.
 */
/*
 * Ширина считается и от высоты окна тоже.
 *
 * Сначала я ограничил только высоту картинки — и квадрат встал в широкой
 * коробке между двух чёрных полей. Образец квадратный, значит и место под него
 * должно быть квадратным: ширина берётся наименьшей из трёх — предела в 30
 * рем, половины высоты окна и ширины полосы. Тогда на низком экране кнопки
 * остаются на виду, а полей не появляется никогда.
 */
.sr-look__shot {
  inline-size: min(30rem, 52vh, 100%);
  aspect-ratio: 1 / 1;
  margin-block-end: var(--s-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-sunk);
}

.sr-look__shot img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ---------- форма обратной связи ---------- */

/*
 * Форма на всю ширину полосы, а не в узкую колонку: у неё есть поле, в которое
 * пишут абзацами, и в колонке шириной с поле ввода оно выглядит как щель.
 */
.sr-form--wide { max-width: min(46rem, 100%); }

/*
 * Имя и почта рядом, когда есть место. Оба короткие, и в столбик они растягивают
 * форму вдвое без всякой пользы. Ниже 40rem — обратно в столбик: два поля в ряд
 * на телефоне становятся двумя щелями.
 */
.sr-form__row { display: grid; gap: 0 var(--s-4); }

@media (min-width: 40rem) {
  .sr-form__row { grid-template-columns: 1fr 1fr; }
}

.sr-textarea {
  min-block-size: 9lh;
  resize: vertical;
  line-height: 1.6;
}

.sr-label__soft { color: var(--c-muted); font-weight: var(--fw-reg); }

/*
 * Поле-приманка.
 *
 * Не `display: none` и не `hidden`: часть рассылающих машин именно так его и
 * ищет — заполняют то, что спрятано самым очевидным способом. Здесь поле
 * уносится за край окна, то есть остаётся настоящим полем, просто его не видно.
 *
 * `left: -9999px` вместо `translate`: смещение трансформацией не выносит
 * элемент из потока, и страница получает горизонтальную прокрутку.
 */
.sr-trap {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.sr-rule {
  border: 0;
  border-block-start: var(--border);
  margin-block: var(--s-6);
}

/*
 * Строка с галочкой.
 *
 * Не `.sr-field`: там подпись стоит над полем, а у галочки она обязана стоять
 * рядом — иначе непонятно, к чему галочка относится, когда их в форме две.
 *
 * `align-items: start` вместо `center`: подпись из двух строк на узком экране
 * иначе съезжает относительно квадратика, и строка выглядит сломанной.
 */
.sr-check {
  display: flex;
  align-items: start;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
}

.sr-check__box {
  /* Размер задаётся явно: по умолчанию браузеры рисуют галочку кеглем
     наследуемого шрифта, и в форме с крупным вводом она выходит крошечной. */
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.15rem;
  flex: none;
  accent-color: var(--c-accent);
}

.sr-check__label {
  font-size: var(--t-sm);
  color: var(--c-muted);
  cursor: pointer;
}

.sr-note-plain {
  color: var(--c-muted);
  font-size: var(--t-sm);
  max-width: var(--w-text);
}

/* Сообщение о подтверждении — на видном месте, но не тревожное. */
.sr-said {
  margin-block-end: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface);
  border: var(--border);
  border-inline-start: 3px solid var(--c-ok);
  max-width: var(--w-text);
}

/*
 * Между абзацами внутри рамки нужен просвет, а после последнего — нет.
 *
 * Раньше стоял ноль на все: рамка задумывалась однострочной. С двумя абзацами
 * они слипаются в сплошной кусок, и второй читается как продолжение первого
 * предложения.
 */
.sr-said p { margin: 0 0 var(--s-3); }
.sr-said p:last-child { margin-block-end: 0; }
.sr-said.is-warn { border-inline-start-color: var(--c-error); }

/* ---------- история работ ---------- */

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

.sr-history__row {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  padding-block: var(--s-5);
  border-block-start: var(--border);
}

.sr-history__row:last-child { border-block-end: var(--border); }

.sr-history__shot { flex: none; inline-size: 96px; }

.sr-history__shot img,
.sr-history__blank {
  display: block;
  inline-size: 96px;
  block-size: 96px;
  object-fit: cover;
  background: var(--c-sunk);
  border: var(--border);
}

.sr-history__what { min-inline-size: 0; }

.sr-history__when {
  margin: 0 0 var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.sr-history__files {
  margin: 0 0 var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.9;
}

.sr-history__life,
.sr-history__state {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-muted);
}

.sr-history__state.is-bad { color: var(--c-error); }
.sr-history__gone { color: var(--c-muted); }

/* ---------- цены ---------- */

.sr-prices {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  min-inline-size: 560px;
}

.sr-prices th,
.sr-prices td {
  text-align: start;
  padding: var(--s-4) var(--s-5);
  border-block-end: var(--border);
  vertical-align: baseline;
}

.sr-prices thead th {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-sunk);
}

.sr-prices tbody th {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-stretch: var(--fs-display-stretch);
  font-size: var(--t-lg);
  white-space: nowrap;
}

.sr-prices tbody tr:last-child th,
.sr-prices tbody tr:last-child td { border-block-end: 0; }

.sr-prices .num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sr-off {
  display: inline-block;
  margin-inline-start: var(--s-2);
  color: var(--c-ok);
  font-size: var(--t-xs);
}

.scroller { overflow-x: auto; border: var(--border); margin-block-end: var(--s-5); }

/* ---------- юридические документы ---------- */

/*
 * Правовые страницы идут во всю ширину полосы, а не колонкой слева.
 *
 * Раньше стояло ограничение в 65 знаков — читаемая длина строки. Владелец
 * попросил шире: столбик в левой части при пустой правой половине выглядит
 * недоделкой. Здесь текст занимает всю ширину, которую даёт оболочка.
 *
 * Плата известна и названа: на широком экране строка выходит длинной, и взгляд
 * тяжелее находит начало следующей. Поэтому вместе с шириной чуть увеличены
 * межстрочный просвет и отступ между абзацами — на длинной строке они и держат
 * глаз на месте.
 */
.sr-legal { max-width: none; }

.sr-legal__body {
  line-height: 1.75;
  max-inline-size: none;
}

.sr-legal__body > p { max-inline-size: none; }

.sr-legal__head { margin-block-end: var(--s-6); }

.sr-legal__title {
  font-size: var(--t-3xl);
  margin: var(--s-3) 0 0;
}

.sr-legal__lede {
  font-size: var(--t-lg);
  color: var(--c-muted);
  margin-block-end: var(--s-6);
}

.sr-legal__body h2 {
  font-size: var(--t-xl);
  margin-block: var(--s-7) var(--s-4);
}

.sr-legal__body p { margin-block: 0 var(--s-5); }

.sr-legal__body ul {
  margin-block: 0 var(--s-4);
  padding-inline-start: var(--s-5);
}

.sr-legal__body li { margin-block-end: var(--s-3); }

.sr-legal__body b { color: var(--c-text); font-weight: var(--fw-semi); }

/*
 * Абзац, который сам признаётся, что не дописан.
 *
 * Отмечен видимо и нарочно: правовая страница, где одно место ещё не улажено,
 * обязана показывать это место, а не прятать среди ровного текста. Читатель,
 * наткнувшийся на такой абзац, узнаёт ровно то, что есть.
 *
 * Цвет не красный: это не ошибка и не опасность, а честная незавершённость.
 */
.sr-legal__body .sr-legal__flag {
  padding: var(--s-4) var(--s-5);
  border-inline-start: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
}

/*
 * Место, которое заполнит форма настроек.
 *
 * Пунктиром и словом, что именно сюда встанет. Видно только владельцу и только
 * пока реквизиты пусты; как только они заполнены, на этом месте стоит обычный
 * текст и никакой пометки не остаётся.
 */
.sr-blank {
  font-family: var(--f-mono);
  font-size: 0.85em;
  color: var(--c-accent-text);
  border: 1px dashed var(--c-accent);
  border-radius: var(--r-sm);
  padding: 0.05em 0.4em;
  white-space: nowrap;
}

.sr-legal__big {
  font-family: var(--f-mono);
  font-size: var(--t-lg);
  margin-block: var(--s-4) var(--s-5);
}

.sr-legal__foot {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: var(--border);
  color: var(--c-muted);
  font-size: var(--t-sm);
}

.sr-legal__foot p { margin: 0; }


/* ---------- «кому это нужно» ---------- */

/*
 * Карточки со случаями, для кого сервис. Не решётка из ячеек, как были
 * шаги на первой странице: там четыре шага одного вида, здесь пять разных
 * положений, и каждое должно читаться отдельным.
 *
 * Три в ряд при 1200: пятое и шестое место остаются пустыми, и последние две
 * карточки стоят парой, а не сиротой в конце длинного ряда.
 */
.sr-who {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Ровно три в ряд: шесть карточек встают двумя полными рядами. При
     auto-fit пятая и шестая оставались бы в ряду с пустым местом справа —
     ряд читался бы недоделанным. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

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

@media (max-width: 620px) {
  .sr-who { grid-template-columns: 1fr; }
}

.sr-who li {
  position: relative;
  background: var(--c-surface);
  border: var(--border);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  transition:
    background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

/*
 * Значок вместо малиновой черты.
 *
 * Черта была одинаковой у всех шести и говорила только «здесь начинается
 * отдельная мысль». Значок говорит, о ком мысль, — и по ряду карточек глаз
 * теперь идёт, не читая: витрина, гончарный круг, растущий склад, коробка,
 * разнобой, четыре рамки.
 *
 * Плитка под значком — акцент в одну десятую. Полный акцент здесь спорил бы с
 * кнопкой: на странице должен быть один самый яркий предмет, и это не значок.
 */
.sr-who__mark {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
  color: var(--c-accent-text);
  flex: none;
}

.sr-who__mark svg {
  inline-size: 24px;
  block-size: 24px;
}

.sr-who h3 {
  margin: var(--s-2) 0 0;
  font-size: var(--t-base);
  line-height: 1.35;
  letter-spacing: var(--ls-tight);
}

.sr-who p {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-sm);
  line-height: 1.7;
}

.sr-who li:hover {
  background: var(--c-hover);
  border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line));
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .sr-who li:hover { transform: none; }
}

/* ============================================================
   Скругление и поверхности

   Владелец попросил округлить углы у кнопок, рамок и таблиц и
   развести цвета: страница выглядела «очень тёмной».

   Радиус берётся по размеру предмета, а не один на всё: у поля
   ввода в 44 точки и у панели в 400 одинаковый угол выглядит
   ошибкой — на маленьком он съедает угол, на большом теряется.
   ============================================================ */

/* Крупное: зона загрузки, таблица цен. */
.sr-drop,
.scroller {
  border-radius: var(--r-xl);
}

/* Карточки и панели. */
.sr-working,
.sr-error,
.sr-ready__shot,
.sr-unfinished,
.sr-tile,
.sr-plain,
.sr-resume,
.sr-purse,
.sr-said,
.sr-who li,
.sr-history__row,
.sr-history__shot img,
.sr-history__blank {
  border-radius: var(--r-lg);
}

/* Мелкое. */
.sr-bar,
.sr-off,
.sr-facts dd {
  border-radius: var(--r-sm);
}

/* Изображение внутри скруглённой рамки обязано скругляться вместе с ней,
   иначе угол картинки торчит из-под угла рамки. */
.sr-ready__shot img,
.sr-tile img {
  border-radius: inherit;
}

/*
 * Тонкая светлая грань по верхнему краю карточек.
 *
 * На тёмном фоне тень не работает — её попросту не видно. Свет по верхнему
 * ребру делает ту же работу: предмет читается лежащим на странице, а не
 * вырезанным в ней. Держим на 6 %: выше — и грань превращается в полоску.
 */
.sr-drop,
.sr-tile,
.sr-plain,
.sr-resume,
.sr-purse,
.sr-who li,
.sr-unfinished {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-text) 6%, transparent);
}

/* ---------- таблица цен ---------- */

/*
 * Шапка была утопленной — темнее самой таблицы, и таблица от этого казалась
 * ямой. Теперь наоборот: шапка приподнята, строки чередуются, и таблица
 * читается сверху вниз без линейки.
 */
.sr-prices thead th {
  background: var(--c-raised);
  color: var(--c-text);
}

.sr-prices tbody tr:nth-child(even) th,
.sr-prices tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--c-raised) 55%, transparent);
}

.sr-prices tbody tr {
  transition: background var(--dur-base) var(--ease);
}

.sr-prices tbody tr:hover th,
.sr-prices tbody tr:hover td {
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
}

/* Внутренние линии тоньше внешней рамки: сетка не должна спорить с краем. */
.sr-prices th,
.sr-prices td {
  border-block-end: 1px solid var(--c-line-soft);
}

/*
 * Панели с цветной гранью слева — предупреждение, ошибка — скругляются только
 * справа. Скруглённая слева, грань превращается в дугу и перестаёт читаться
 * линией: у неё вся работа в том, чтобы быть прямой и цветной.
 */
.sr-said,
.sr-error {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* ---------- цвет в таблице ---------- */

/*
 * Розовая нить под шапкой. Одна линия на всю таблицу вместо розовой обводки
 * каждой ячейки: цвет появляется там, где таблица делится на «что означают
 * столбцы» и «сами числа», то есть работает, а не украшает.
 */
.sr-prices thead th {
  border-block-end: 2px solid color-mix(in srgb, var(--c-accent) 70%, transparent);
}

/* Светлая грань по верхнему ребру карточек — тоже тёплая, а не серая. */
.sr-drop,
.sr-tile,
.sr-plain,
.sr-resume,
.sr-purse,
.sr-who li,
.sr-unfinished {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-edge) 22%, transparent);
}

/* ============================================================
   Страница «About»

   Единственная страница сайта, выключенная по центру. Владелец
   попросил, и для неё это верно: она не рабочий экран, где глаз
   идёт по левому полю сверху вниз, а текст, который читают подряд.

   По центру стоят заголовки и колонки. Сами абзацы остались с
   ровным левым краем: выключка по центру на длинном тексте
   заставляет заново искать начало каждой строки.
   ============================================================ */

.sr-about { text-align: center; }

/*
 * Колонки шире, чем на остальном сайте.
 *
 * Владелец попросил растянуть текст: рядом с широкими рядами примеров узкая
 * колонка посреди пустого поля смотрелась потерянной, и это правда.
 *
 * Растянуто не до конца полотна. Обмерено в браузере: 84ch дают колонку в
 * 857 точек и около 99 знаков в строке. Во всю ширину (1200) вышло бы под 140,
 * а на такой длине глаз, дойдя до правого края, перестаёт попадать на начало
 * следующей строки и перечитывает ту же самую.
 *
 * 99 — уже больше привычных 65–75, то есть выбор в сторону просьбы владельца,
 * а не в сторону правил. Но 140 — это уже не «шире», а «неудобно читать».
 *
 * Кегль поднят с 16 до 17: та же строка в знаках занимает больше места,
 * то есть колонка становится шире, не удлиняясь для глаза.
 */
.sr-about .sr-lede,
.sr-about .sr-sec__head {
  margin-inline: auto;
  max-inline-size: 70ch;
}

.sr-about .sr-lede__sub {
  max-inline-size: 62ch;
  margin-inline: auto;
}

/* Абзацы — единственное, что не центрируется. */
.sr-about .sr-prose {
  margin-inline: auto;
  max-inline-size: 84ch;
  text-align: start;
  font-size: 1.0625rem;
}

.sr-about .sr-prose p { line-height: 1.75; }

.sr-about .sr-note-plain { text-align: center; }

/* Малиновая черта над заголовком висела у левого края блока. Раз блок
   теперь по центру — черта тоже. */
.sr-about .sr-sec__head h2::before,
.sr-about .sr-lede h1::before {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* Карточки «кому это нужно» — текст внутри читается, а не разглядывается. */
.sr-about .sr-who li,
.sr-about .sr-half { text-align: start; }

/* ---------- один снимок в, комплект наружу ---------- */

/*
 * Один снимок в, четыре наружу — всё в одну строку.
 *
 * Сперва правый столбец был сеткой два на два, и целиком показ не помещался в
 * экран: приходилось листать, чтобы увидеть, что получилось. Владелец сказала
 * верное — расположить складнее и уменьшить, чтобы было видно сразу всё.
 *
 * Теперь пять предметов в ряд: исходник, стрелка, четыре выхода. Читается
 * слева направо ровно как действие, и весь показ помещается на один экран.
 */
.sr-show {
  display: grid;
  grid-template-columns: minmax(0, 190px) auto minmax(0, 1fr);
  gap: var(--s-5);
  /*
   * Столбцы тянутся на всю высоту ряда, а не сжимаются по своему содержимому.
   *
   * Иначе средняя полоса — та, где стоят картинки, — у исходника выходит ниже,
   * чем у выходов, и его пояснение поднимается на шесть десятков точек выше
   * соседних. Растянутые столбцы получают одну высоту, их средние полосы
   * совпадают, и все пять пояснений встают на одну линию, как и картинки.
   */
  align-items: stretch;
  text-align: start;
  margin-block-end: var(--s-5);
}

/*
 * Исходник устроен так же, как выход: подпись, картинка, пояснение — и все три
 * полосы встают на одну высоту с соседями. Пока подпись у него была в одну
 * строку, а у выходов в две, его снимок начинался выше остальных и выпадал
 * из ряда.
 */
.sr-show__in {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-4);
  justify-items: center;
  text-align: center;
}

.sr-show__in .sr-uses__k { max-inline-size: none; }

.sr-show__in img {
  align-self: center;
  inline-size: 100%;
  max-block-size: 340px;
  object-fit: cover;
  block-size: auto;
  display: block;
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--c-sunk);
}

.sr-show__in figcaption {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.sr-show__arrow {
  align-self: start;
  margin-block-start: var(--s-8);
  font-size: var(--t-2xl);
  color: var(--c-accent);
  line-height: 1;
}

.sr-show__note {
  /* Подписи под кадрами стоят на разной высоте — кадры выровнены по нижней
     линии, а не по верхней. Без отступа приписка липнет к самой нижней. */
  margin: var(--s-5) 0 0;
  max-inline-size: 72ch;
  text-align: start;
  color: var(--c-muted);
  font-size: var(--t-sm);
}

/* Стрелка вбок на телефоне не работает: столбцы встают друг под друга,
   и указывать вправо ей больше некуда. */
@media (max-width: 900px) {
  .sr-show {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    justify-items: start;
  }

  .sr-show__arrow { transform: rotate(90deg); }
  .sr-show__in { max-inline-size: 320px; }
}


/* ============================================================
   Комплект, показанный по местам

   Ряд из четырёх кадров в настоящем масштабе показывал разницу
   в размерах честно, но по нему всё равно не читалось, что
   именно делает сайт: четыре снимка одной бутылки говорят «вот
   четыре снимка», а не «вот витрина, вот лента, вот сторис».

   Теперь каждый файл лежит внутри своего места. Макеты нарочно
   обобщённые — ни названий площадок, ни логотипов, ни фирменных
   цветов: иначе сайт заявлял бы связь с чужой компанией.
   ============================================================ */

/*
 * Два ряда по два, а не четыре в строку.
 *
 * В строку они лезли по 280 точек на макет — телефон в такую ширину читается
 * с трудом, — и вдобавок ряд выходил рваным: макеты разной высоты и разной
 * ширины, отчего и промежутки казались разными. Владелец сказал прямо:
 * выровнять или разбить на два ряда. Разбиваем — заодно каждый макет
 * становится вдвое крупнее.
 */
.sr-uses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
  text-align: start;
}

/*
 * Три полосы: подпись, макет, пояснение. Средняя тянется, поэтому подписи
 * стоят на одной высоте сверху, пояснения — на одной снизу, а макеты плавают
 * между ними по середине. Их собственная высота при этом остаётся честной:
 * сторис правда выше баннера, просто это больше не перекашивает ряд.
 */
/*
 * Подпись, макет и пояснение стоят одним столбиком по середине ячейки: подпись
 * ровно над картинкой, а не у левого края ячейки, где она читалась сама по
 * себе. Ширина у всех троих одна — макета, — поэтому столбик держится вместе.
 */
.sr-uses__item {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-4);
  justify-items: center;
  text-align: center;

  --mock-w: 320px;
}

.sr-uses__item.is-narrow { --mock-w: 200px; }

.sr-uses__item > .sr-mock {
  align-self: center;
  inline-size: 100%;
  max-inline-size: var(--mock-w);
}

/* Пояснению не даём стать уже читаемого: у телефона макет в 200 точек, и
   строка в такую ширину рвётся на четыре слова. */
.sr-uses__k,
.sr-uses__note {
  max-inline-size: max(var(--mock-w), 260px);
}

.sr-uses__k {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.sr-uses__k b {
  display: block;
  color: var(--c-text);
  font-weight: var(--fw-semi);
}

.sr-uses__note {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* ---------- общее для макетов ---------- */

.sr-mock {
  --mock-line: color-mix(in srgb, var(--c-text) 14%, transparent);
  --mock-dim: color-mix(in srgb, var(--c-text) 30%, transparent);
}

.sr-mock__shot { overflow: hidden; background: var(--c-sunk); }
.sr-mock__shot--square { aspect-ratio: 1 / 1; }
.sr-mock__shot--wide { aspect-ratio: 1200 / 628; }

.sr-mock__shot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Кружок вместо аватара и полоски вместо строк текста: макет должен
   читаться как макет, а не притворяться настоящей страницей. */
.sr-mock__ava {
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--r-dot);
  background: var(--mock-dim);
  flex: none;
}

.sr-mock__handle {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text);
}

/* ---------- витрина магазина ---------- */

.sr-mock--shop {
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
}

.sr-mock--shop .sr-mock__meta {
  padding: var(--s-4);
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}

.sr-mock__name {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-text);
}

.sr-mock__price {
  margin: 0 0 var(--s-2);
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--t-lg);
  color: var(--c-text);
}

.sr-mock__buy {
  inline-size: 100%;
  text-align: center;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: var(--c-accent-in);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
}

/* ---------- пост в ленте ---------- */

.sr-mock--feed {
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
}

.sr-mock__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
}

.sr-mock__dots { margin-inline-start: auto; color: var(--c-muted); letter-spacing: 0.1em; }

.sr-mock__acts {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4) 0;
  color: var(--c-text);
}

.sr-mock__cap {
  margin: 0;
  padding: var(--s-2) var(--s-4) var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-muted);
  line-height: 1.6;
}

.sr-mock__cap b { color: var(--c-text); font-weight: var(--fw-semi); }

/* ---------- сторис в телефоне ---------- */

/*
 * Телефон нарисован рамкой, а не картинкой: одна лишняя загрузка ради
 * прямоугольника со скруглением — плохая сделка, а на любом экране он
 * останется чётким.
 */
.sr-phone {
  position: relative;
  border: 7px solid color-mix(in srgb, var(--c-text) 22%, var(--c-sunk));
  border-radius: 26px;
  background: var(--c-sunk);
  overflow: hidden;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

.sr-phone__notch {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 34%;
  block-size: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-text) 22%, var(--c-sunk));
  z-index: 2;
}

.sr-phone__screen { position: relative; aspect-ratio: 1080 / 1920; }

.sr-phone__screen img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.sr-phone__bars {
  position: absolute;
  inset-block-start: 18px;
  inset-inline: 8px;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.sr-phone__bars i {
  flex: 1;
  block-size: 2px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.32);
}

.sr-phone__bars i.is-done { background: rgb(255 255 255 / 0.85); }
.sr-phone__bars i.is-now { background: linear-gradient(90deg, rgb(255 255 255 / 0.85) 45%, rgb(255 255 255 / 0.32) 45%); }

.sr-phone__who {
  position: absolute;
  inset-block-start: 28px;
  inset-inline: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
}

.sr-phone__who .sr-mock__ava { background: rgb(255 255 255 / 0.7); inline-size: 16px; block-size: 16px; }
.sr-phone__who .sr-mock__handle { color: #fff; }
.sr-phone__ago { margin-inline-start: auto; font-family: var(--f-mono); font-size: var(--t-xs); color: rgb(255 255 255 / 0.75); }

.sr-phone__cta {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: var(--s-2) var(--s-5);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: #17110F;
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  white-space: nowrap;
}

/* ---------- баннер на чужой странице ---------- */

.sr-page {
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-4);
}

.sr-page__lines { display: grid; gap: 7px; }

.sr-page__lines i {
  block-size: 6px;
  border-radius: 4px;
  background: var(--mock-line);
}

.sr-page__lines i.is-short { inline-size: 55%; }

.sr-page__slot {
  border: 1px dashed var(--mock-dim);
  border-radius: var(--r-md);
  padding: var(--s-2);
  display: grid;
  gap: var(--s-2);
}

.sr-page__k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.sr-page__slot .sr-mock__shot { border-radius: var(--r-sm); }

/* На телефоне два столбца не встают: витрина с кнопкой в 160 точек шириной
   нечитаема. Один столбец, макеты во всю ширину. */
@media (max-width: 700px) {
  .sr-uses { grid-template-columns: 1fr; gap: var(--s-6); }
}

/*
 * Внутри показа «один в, четыре наружу» макеты стоят вчетвером в ряд и мельче,
 * чем на первой странице: там у них половина полотна на каждый, здесь — пятая
 * часть. Телефон ещё уже прочих, чтобы его высота не тянула строку вверх.
 */
@media (min-width: 1000px) {
  /*
   * Все пять картинок — члены одной сетки, а не двух вложенных.
   *
   * Выходы лежат в обёртке, под которой стоит ещё и общее пояснение, поэтому
   * обёртка выше самих макетов — и столбец исходника, растянутый на её высоту,
   * опускал своё пояснение ниже соседних. Подпирать это отступами значило бы
   * подгонять числа, которые разойдутся от любой правки текста.
   *
   * `display: contents` снимает обёртки из раскладки, не трогая разметку:
   * исходник и четыре выхода становятся соседями в одной сетке, и три их
   * полосы — подпись, картинка, пояснение — совпадают по устройству, а не по
   * подгонке. Общее пояснение уходит на свою строку во всю ширину.
   */
  .sr-show {
    grid-template-columns: minmax(0, 190px) auto repeat(4, minmax(0, 1fr));
  }

  .sr-show__out,
  .sr-show .sr-uses {
    display: contents;
  }

  .sr-show .sr-show__note {
    grid-column: 1 / -1;
    margin-block-start: var(--s-5);
  }

  .sr-show .sr-uses__item { --mock-w: 190px; }
  .sr-show .sr-uses__item.is-narrow { --mock-w: 130px; }

  /*
   * Здесь макеты прижаты к верху, а не выключены по середине.
   *
   * На первой странице они стоят по два в ряд и середина им идёт: полосы
   * широкие, разница в высоте гуляет мягко. Здесь их пять в строку рядом с
   * исходником, и середина разводит верхние края на полсотни точек — ряд
   * перестаёт читаться рядом. Владелец сказала прямо: поставить первую
   * картинку на одну линию с остальными.
   *
   * Нижние края при этом расходятся, и это честно: сторис правда выше баннера.
   * А пояснения всё равно стоят на одной высоте — они в своей полосе.
   */
  .sr-show .sr-uses__item > .sr-mock,
  .sr-show .sr-show__in img {
    align-self: start;
  }
}

/* Ниже тысячи строка в пять предметов не встаёт: исходник ужимается до
   полоски. Столбцы расходятся, показ читается сверху вниз. */
@media (max-width: 999px) {
  .sr-show {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .sr-show__arrow { transform: rotate(90deg); margin-block-start: 0; }
  .sr-show__in { max-inline-size: 260px; }
}