/* FROST 5 — «Условия работы» (/oferta). Шапка, токены и кнопки — pay.css; здесь только читаемая колонка текста и содержание.
   Цвета — токены family.css. Текст — на плотной подложке: фон-стекло под ним остаётся декорацией. */

.of { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 22px 16px max(48px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }

/* ---------- содержание ---------- */
.toc { background: var(--metal), var(--cc); border: 1px solid var(--ce); border-radius: var(--r1); }
html.light .toc { box-shadow: var(--sh); }
.toc summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; cursor: pointer; font: 800 14px var(--f); }
.toc summary::-webkit-details-marker { display: none; }
.toc summary:after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--mu); border-bottom: 2px solid var(--mu); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t2) var(--ease); }
.toc[open] summary:after { transform: rotate(-135deg); }
.toc summary:focus-visible, .toc a:focus-visible, .ref:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: var(--r3); }
.toc-l { list-style: none; margin: 0; padding: 0 8px 10px; display: flex; flex-direction: column; }
.toc-l a { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 8px; border-radius: var(--r3); color: var(--fg); text-decoration: none; font: 600 13.5px/1.3 var(--f); }
/* Наведение действует только там, где указатель умеет наводиться. На телефоне наведения нет: браузер
   вешает :hover после КАСАНИЯ и держит, пока не тапнешь в другое место — кнопка остаётся подсвеченной,
   стрелка уехавшей. Владелец 28.10: «интерфейсы кнопки все былмает». */
@media (hover:hover){.toc-l a:hover{ background: var(--ice-soft); }}
.toc-l b { flex: none; min-width: 1.6em; color: var(--ice-t); font: 700 12.5px var(--mono); }

/* ---------- текст ---------- */
.doc { background: var(--metal), var(--cc); border: 1px solid var(--ce); border-radius: var(--r1); padding: 22px 18px 26px; min-width: 0; }
html.light .doc { box-shadow: var(--sh); }
.dh { margin-bottom: 6px; }
.ed { margin: 0 0 6px; color: var(--ice-t); font: 700 12.5px var(--mono); }
.doc h1 { margin: 0 0 8px; font: 800 italic 26px/1.12 var(--disp); text-transform: uppercase; overflow-wrap: anywhere; }
.ruonly { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r2); background: var(--ice-soft); color: var(--fg); font-size: 13px; }
/* Ссылка на русский оригинал в плашке перевода: цвет ссылок страницы, а не браузерный синий; вертикальный отступ — чтобы палец попадал на телефоне */
.ruonly a { color: var(--ice-t); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; display: inline-block; padding: 8px 2px; margin: -8px 0; }
.ruonly a:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: var(--r3); }
.sec { padding-top: 18px; scroll-margin-top: 64px; }
.sec h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font: 800 18px/1.25 var(--f); }
.sec .sn { flex: none; min-width: 1.5em; color: var(--ice-t); font: 700 15px var(--mono); }
.cl, .pp { margin: 0 0 10px; font-size: 15px; line-height: 1.6; max-width: 70ch; scroll-margin-top: 64px; }
.cl { display: grid; grid-template-columns: 3.1em minmax(0, 1fr); gap: 0 6px; }
.cl .n { color: var(--mu); font: 600 13px/1.85 var(--mono); }
.pp { padding-left: calc(3.1em + 6px); }
.doc ul { margin: 0 0 10px; padding-left: calc(3.1em + 24px); font-size: 15px; line-height: 1.6; }
.doc code { padding: 1px 5px; border-radius: 6px; background: var(--p3); font: 600 13px var(--mono); }
html.light .doc code { background: var(--p2); }
.ref { color: var(--ice-t); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cl:target, .sec:target > h2 { background: var(--volt-soft); border-radius: var(--r3); }

/* компьютер: содержание — липкая колонка слева, текст — справа */
@media (min-width: 900px) {
  .of { grid-template-columns: 250px minmax(0, 1fr); gap: 18px; padding-top: 28px; }
  .side { position: sticky; top: 16px; }
  .toc summary { pointer-events: none; cursor: default; }
  .toc summary:after { display: none; }
  .doc { padding: 30px 34px 36px; }
  .doc h1 { font-size: 32px; }
  .sec h2 { font-size: 20px; }
}

/* телефон: плотнее, номера пунктов остаются в левом поле */
@media (max-width: 480px) {
  .of { padding-top: 14px; gap: 10px; }
  .doc { padding: 18px 14px 22px; }
  .doc h1 { font-size: 22px; }
  .cl, .pp { font-size: 15px; }
  .cl { grid-template-columns: 2.7em minmax(0, 1fr); }
  .pp { padding-left: calc(2.7em + 6px); }
}

/* Сноски «п. 1.3» внутри строки текста: сама ссылка 21 px высотой, и на телефоне в неё не попасть. Подложка
   добавляет зону 44×45 вокруг, вид и межстрочный интервал не трогает (absolute, без заливки). */
@media (max-width: 600px) {
  .ref { position: relative; }
  .ref::after { content: ""; position: absolute; inset: -12px -10px; }
}