/* ============================================================================
   СУПРЕМУМ · pub-veil.css — плашка «4А» публичной копии темы теории.

   Гость видит текст темы целиком, а на месте каждой панели интерактива —
   её бледный неподвижный снимок и поверх карточка «Зарегистрируйся бесплатно».
   Эталон — site\_lab\dostup\4a-teoriya-zamok.html (pages_theory.py, s4a).
   Копии собирает tools\public_theory\build_public.py, снимки — snap_viz.py.

   Снимок — PNG-маска чернил: чёрный цвет, прозрачность — сила линии. Поэтому
   один файл годится обеим темам: в тёмной он инвертируется в светлый контур.
   Обёртка панели — живые классы .seg-viz > .viz-block: липкость, рамка и
   поля приходят из theory-seg.css такими же, как у настоящей панели.
   Свои классы — только с приставкой pv-; селекторы с весом html .seg-viz,
   потому что <style> самих страниц пишет правила вида .viz-block p/svg/h3.
   ============================================================================ */

/* Площадка: снимок и карточка в одной клетке сетки. Высота — большее из двух,
   поэтому у короткой панели карточка не вылезает за рамку, а у высокой
   контур чертежа читается сверху и снизу карточки. */
/* Панель — обычный блок. 31 тема алгебры 7–8 пишет в <style> страницы
   .viz-block { display: flex } (ряд), и площадка схлопывалась в ноль ширины:
   на 360px карточка становилась столбиком в 34px. */
html .seg-viz .viz-block.pv-block { display: block; }
html .seg-viz .pv-veil {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  container-type: inline-size;
  margin: 0;
  padding: 0;
}
html .seg-viz .pv-veil > * { grid-area: 1 / 1; }

html .seg-viz .pv-veil > .pv-snap {
  display: block;
  width: 100%;
  max-width: var(--pv-w, 100%);
  height: auto;
  margin: 0 auto;
  opacity: .22;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Снимка нет (панель скрыта или не снялась) — та же высота пустым местом. */
html .seg-viz .pv-veil.is-blank { min-height: var(--pv-h, 340px); }

/* Тёмная тема: чёрные чернила маски → светлые. Те же три пути, что у
   переменных темы (sup-tokens-paper.css): явная тёмная и системная. */
html[data-theme="dark"] .seg-viz .pv-veil > .pv-snap { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .seg-viz .pv-veil > .pv-snap { filter: invert(1); }
}

/* Заголовок панели остаётся живым текстом над площадкой: на него ссылается
   текст темы («в блоке „Решето Эратосфена“ справа»). */
/* Поля — как у .viz-inner, внутри которой заголовок стоял в настоящей панели;
   промежуток под ним уже есть в снимке (снимок начинается сразу под ним). */
html .seg-viz .pv-block > .pv-head { padding: 22px 22px 0; text-align: left; }
html .seg-viz .pv-block > .pv-head > .viz-title { margin: 0; }

/* ── Карточка ──────────────────────────────────────────────────────────── */
html .seg-viz .pv-card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 26rem;
  margin: var(--sp-4);
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  background: var(--solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
}
/* Не <h3>: пять одинаковых заголовков «Зарегистрируйся…» засорили бы
   оглавление страницы для поиска. Вид — как у h3 слоя. */
html .seg-viz .pv-card .pv-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display, 600);
  font-optical-sizing: auto;
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  color: var(--text-strong);
  text-wrap: balance;
}
html .seg-viz .pv-card .pv-text {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Круглый значок-замок. Рисуется маской, а не <svg>: в копии вне KaTeX
   не должно быть ни одного svg, а правила страниц вида .viz-block svg
   { width: 100% } раздули бы значок на всю панель. */
html .seg-viz .pv-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-strong);
}
html .seg-viz .pv-lock::before {
  content: "";
  width: 24px; height: 24px;
  background: currentColor;
  -webkit-mask: var(--pv-lock-ic) center / contain no-repeat;
          mask: var(--pv-lock-ic) center / contain no-repeat;
}
html .seg-viz .pv-veil {
  --pv-lock-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

html .seg-viz .pv-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: center;
}
html .seg-viz .pv-actions .btn { text-decoration: none; }

html .seg-viz .pv-block > .pv-note { text-align: center; }

/* Место карточки по высоте — там, где под ней меньше всего чертежа (сборщик
   считает по снимку: --pv-y — доля высоты снимка). Высота снимка на экране =
   его ширина / пропорция, ширина — меньшее из ширины площадки и снимка. */
@media (min-width: 561px) {
  html .seg-viz .pv-veil.has-y > .pv-card {
    align-self: start;
    margin-top: calc(var(--pv-y) * min(100cqw, var(--pv-w)) / var(--pv-ar));
  }
}

/* ── Телефон: как в эталоне ─────────────────────────────────────────────
   Карточка не поверх, а под снимком, наезжая на его низ: на узкой панели
   карточка поверх закрыла бы чертёж целиком. Наезд — не больше 128px и не
   больше 45 % высоты снимка (100cqw / пропорция = высота снимка). */
@media (max-width: 560px) {
  html .seg-viz .pv-veil { display: block; }
  html .seg-viz .pv-veil > .pv-snap { max-width: 100%; }
  html .seg-viz .pv-card {
    width: 100%;
    max-width: none;
    margin: calc(min(128px, 100cqw / var(--pv-ar, 1.6) * .45) * -1) 0 0;
    padding: var(--sp-5) var(--sp-4);
  }
  html .seg-viz .pv-veil.is-blank { min-height: 0; }
  html .seg-viz .pv-veil.is-blank > .pv-card { margin-top: 0; }
  html .seg-viz .pv-actions { flex-direction: column; align-items: stretch; }
  html .seg-viz .pv-actions > * { width: 100%; justify-content: center; text-align: center; }
}

/* Пошаговые доказательства и примеры в колонке текста — это текст: в копии
   шаги показаны сразу (кнопки шагов сборщик убирает). Страницы прячут шаг
   через display: none + opacity: 0 и показывают скриптом, которого в копии нет. */
html[data-public] .proof-step {
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
}

@media print {
  html .seg-viz .pv-veil { display: none; }
}