/* Только то, чего нет ни в site/tokens.css, ни в site/chrome.css: своё у самой
 * страницы расчёта. Шрифт, цвета, радиусы, форма и весь вывод калькулятора —
 * из токенов; шапка с лейблом, проза и подвал — из chrome.css. Здесь их не
 * переопределяют и не дублируют: копия геометрии лейбла жила именно тут и
 * расходилась с лендингом молча.
 */

/* Вводный абзац на этой странице стоит перед формой, а не в карточке прозы,
 * как на лендинге, — под ним нужно чуть больше воздуха, чем даёт .lead. */
.lead{margin-bottom:16px}

/* Оговорка про предварительность расчёта стоит под результатом, а не под
 * формой: она относится к таблице (оператор, 2026-08-20 — «сейчас текст
 * котлетой лежит снизу, а должен быть явно атрибуцирован к полям»). */
[data-calc-result]+.muted{margin-top:12px}

/* --- Галерея фотографий (селекторы src/page/gallery.ts) ------------------
 *
 * Разметку галереи рисует src/page/gallery.ts, а не render.ts, поэтому её
 * атрибуты одеваются здесь, а не в site/tokens.css (там живёт только то, что
 * рисует render.ts, и token-sheet gate в test/landing.test.ts сторожит именно
 * ту пару). Своих цветов и размеров у листа нет: всё из переменных токенов.
 * Правило на каждый атрибут пиннит test/gallery.test.ts — тем же уговором,
 * какой tokens.css получает от гейта.
 *
 * Клиент смотрит с телефона: снимок занимает весь экран, тап-цели от --tap,
 * фон почти непрозрачный, чтобы карточка под ним не отвлекала. */
/* Снимок в карточке — орган управления: курсор обещает увеличение, обводка
   фокуса нужна тому, кто пришёл с клавиатуры. Правило потомка, а не своё у
   [data-photo-*]: те принадлежат site/tokens.css, и второй владелец у них
   разошёлся бы с первым молча. */
[data-photos] img{cursor:zoom-in}
[data-photos] img:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

[data-gallery]{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  /* Тот же тон, что --bg, но почти непрозрачный: страница под галереей
     угадывается по краям и не спорит с фотографией. */
  background:rgba(8,12,22,.96);
  padding:56px 8px;box-sizing:border-box;
  /* Свайп по фотографии листает галерею, а не тянет страницу за собой. */
  touch-action:pan-y;
}
[data-gallery]:focus{outline:none}

[data-gallery-image]{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:var(--radius-input)}

/* Счётчик — слева сверху, как в галерее с дрома: он подпись, а не кнопка,
   поэтому палец сквозь него попадает в фон и закрывает галерею. */
[data-gallery-counter]{
  position:absolute;left:16px;top:16px;
  color:var(--text-muted);font-size:.9rem;line-height:var(--tap);
  pointer-events:none;
}

/* Три кнопки одной формы: круг в --tap, без заливки, поверх фотографии. */
[data-gallery-close],[data-gallery-prev],[data-gallery-next]{
  position:absolute;
  min-width:var(--tap);min-height:var(--tap);padding:0;
  border:0;border-radius:var(--radius-pill);
  background:var(--accent-tint);color:var(--text);
  font-family:inherit;font-size:28px;line-height:1;cursor:pointer;
}
[data-gallery-close]{top:8px;right:8px}
[data-gallery-prev]{left:8px;top:50%;transform:translateY(-50%)}
[data-gallery-next]{right:8px;top:50%;transform:translateY(-50%)}
/* На телефоне листают пальцем, и стрелки только отъедают фотографию — там же,
   где на дроме они спрятаны под .pswp--touch. Мышь их получает. */
@media (hover:none){
  [data-gallery-prev],[data-gallery-next]{display:none}
}