/* html — блок «Свой HTML». Разметка студии, очищенная
   apps/websites/sanitize.py. Типографика — через :where(): у неё вес одного тега,
   поэтому классы сайта (.btn, .card, .grid…) и style="" студии её перекрывают.
   Цвета — только из схемы секции (--s-*).

   contained — в .wrap, с отступами секции; full — от края до края, без отступов.
   Секция обрезает всё, что вылезло (отрицательные отступы), — блок не наползает
   на шапку и соседние блоки. */
.blk-html { overflow: hidden; contain: paint; }   /* paint: и position:fixed (классы сайта) не вылезет за секцию */
.blk-html.v-full { padding: 0; }

.html-body { overflow-wrap: break-word; }
.html-body::after { content: ""; display: table; clear: both; }

:where(.html-body) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-head); font-weight: 700; line-height: 1.25; margin: 1.4em 0 .5em;
}
:where(.html-body) h1 { font-size: clamp(30px, 4.6vw, 52px); }
:where(.html-body) h2 { font-size: clamp(24px, 3.4vw, 36px); }
:where(.html-body) h3 { font-size: clamp(19px, 2.2vw, 24px); }
:where(.html-body) :is(h4, h5, h6) { font-size: 17px; }
:where(.html-body) > :first-child,
:where(.html-body) > :first-child > :first-child { margin-top: 0; }

:where(.html-body) :is(p, ul, ol, dl, table, figure, blockquote, pre, details, video, audio, iframe) {
  margin-bottom: 1em;
}
:where(.html-body) :is(ul, ol) { padding-left: 1.4em; }
:where(.html-body) li + li { margin-top: .3em; }
:where(.html-body) dt { font-weight: 600; }
:where(.html-body) dd { margin: 0 0 .6em 1.2em; color: var(--s-muted); }
:where(.html-body) a { color: var(--s-accent); text-underline-offset: 3px; }
:where(.html-body) a.btn { color: var(--s-btn-text); text-decoration: none; }
:where(.html-body) hr { border: 0; border-top: 1px solid var(--s-line); margin: 2em 0; }
:where(.html-body) small { color: var(--s-muted); }
:where(.html-body) mark { background: color-mix(in srgb, var(--s-accent) 22%, transparent); color: inherit; padding: 0 .15em; }

:where(.html-body) blockquote {
  border-left: 3px solid var(--s-accent); padding: .4em 0 .4em 1.2em; font-size: 1.08em;
}
:where(.html-body) :is(code, kbd, pre) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em;
}
:where(.html-body) :is(code, kbd) { background: var(--s-surface); border-radius: 4px; padding: .1em .35em; }
:where(.html-body) pre {
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: calc(var(--radius) * .6);
  padding: 14px 16px; overflow-x: auto; white-space: pre;
}

/* картинки и медиа — не шире колонки */
:where(.html-body) :is(img, video) { max-width: 100%; height: auto; }
:where(.html-body) img { display: inline-block; vertical-align: middle; }
:where(.html-body) figure img { display: block; }
:where(.html-body) figcaption { font-size: 13.5px; color: var(--s-muted); margin-top: 8px; }
:where(.html-body) audio { width: 100%; max-width: 560px; }
:where(.html-body) iframe { display: block; max-width: 100%; border: 0; border-radius: calc(var(--radius) * .6); }
/* видео без своих размеров — 16:9 по ширине колонки */
:where(.html-body) iframe:not([height]) { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* таблицы — как в расписании; на телефоне прокручиваются вбок */
:where(.html-body) table {
  display: block; width: max-content; max-width: 100%; min-width: 0; overflow-x: auto;
  border-collapse: collapse; font-size: 15px;
}
:where(.html-body) :is(th, td) { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--s-line); vertical-align: top; }
:where(.html-body) th { color: var(--s-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
:where(.html-body) caption { text-align: left; color: var(--s-muted); font-size: 13.5px; padding-bottom: 6px; }

:where(.html-body) details {
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: calc(var(--radius) * .78);
  padding: 0 18px;
}
:where(.html-body) summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
:where(.html-body) details[open] { padding-bottom: 14px; }