/* ===========================================================================
   content.css — оформление тела страницы: блок `.cfa-rt`, то есть всё, что
   выходит из редактора. TASKS P4-6.

   ЭТО ПОРТ. Источник — блок `<helmet><style>` файла `design/CFA Site.dc.html`,
   строки правил перенесены как есть, по одному правилу в строку, в исходном
   порядке. Так их можно построчно сверить с дизайном, и так же их проще
   переносить обратно, если дизайн поправят. Отсюда и стиль, не совпадающий
   с остальными файлами: сплошные хексы вместо токенов, `gap` в списках,
   слитная запись. Это сознательно, и линтер знает про этот файл (профиль
   content.css в tools/css-lint.php).

   ПОЧЕМУ ФАЙЛ ОТДЕЛЬНЫЙ. Он подключается дважды: на публичной странице и в
   редакторе админки, на тот же самый `.cfa-rt` (там ещё и с
   `contenteditable`). Это условие «WYSIWYG = live» из дизайн-хендоффа.
   Любая копипаста отсюда в admin.css или в components.css ломает его молча:
   расхождение видно не сразу, а когда автор сохранит страницу и обнаружит,
   что на сайте она выглядит иначе. Поэтому — один файл, одна истина.

   Набор классов внутри закрыт санитайзером (DESIGN §9.4, app/src/sanitize.php):
   `rt-notice` + `info|warn|new`, `rt-dl`, `rt-btn` + `blue`, `rt-mirror`,
   `rt-ip`, `rt-patch`, `has-mirror`. Ничего другого из редактора не выйдет,
   поэтому селекторов здесь ровно столько, сколько есть классов.

   ---------------------------------------------------------------------------
   ПЯТЬ ОТЛИЧИЙ ОТ ИСХОДНИКА — четыре вынужденных и одно по дизайн-системе

   1. `.rt-dl:has(+ .rt-mirror)` заменён на `.rt-dl.has-mirror` (DESIGN §10
      п.2). `:has()` нет ни в одном браузере яруса A; класс проставляет
      рендерер при сохранении (app/src/content.php, CONTENT_MIRROR_CLASS), и
      он же его снимает, если зеркала не стало. Селектор — единственное, что
      в этом правиле изменилось.

   2. У `user-select:all` добавлен `-webkit-` — без него Safari 13 (нижняя
      граница яруса A) не выделит IP целиком по клику, а это ровно та вещь,
      ради которой панель `.rt-ip` и сделана.

   3. Правила `body`, `*`, `a`, `input` из того же блока сюда НЕ попали: это
      не контент, а reset и ссылки, они живут в base.css и приезжают раньше
      по каскаду. Дублировать их здесь значило бы перебивать base.css из
      файла, который подключён ещё и в редакторе.

   4. Шрифты названы семействами из токенов — `'Exo 2'` и `'Titillium Web'`
      уже загружены локально (P4-1), но в исходнике после них стоит голый
      `sans-serif`, а у нас в `--f-display`/`--f-body` есть промежуточные
      фолбэки. Тут оставлено как в исходнике: файл обязан работать и в
      редакторе, и в отрыве от tokens.css.

   5. У `a.rt-btn` есть нажатие: подъём на 1px при наведении, опускание на
      3–4px при нажатии со сжатием сплошной тени до 1px, и transition между
      ними. В прототипе сайта у кнопки только `filter` на hover, а в
      стайлгайде (`CFA Styleguide.dc.html`, «Buttons») и в README («Active
      (pressed) state») нажатие описано для всех глянцевых кнопок. Решено:
      верх за дизайн-системой (2026-10-05), тем более что в админке кнопки
      это уже умели. Подъём и нажатие сняты в редакторе
      (`:not([contenteditable])`): там по кнопке щёлкают, чтобы поставить
      курсор в текст, и прыжок на 4px под мышью мешал бы. Исходная строка
      `a.rt-btn:hover` оставлена как была — новые правила идут ниже.
   =========================================================================== */

/* --- Базовый блок --------------------------------------------------------- */
.cfa-rt{font-size:16px;line-height:1.65;color:#10284a;overflow-wrap:break-word}
.cfa-rt>*:first-child{margin-top:0}
.cfa-rt p{margin:0 0 14px;text-wrap:pretty}

/* --- Заголовки ------------------------------------------------------------ */
.cfa-rt h2{display:flex;align-items:center;gap:14px;font-family:'Exo 2',sans-serif;font-weight:900;font-style:italic;font-size:30px;line-height:1.1;margin:36px 0 14px;color:#0b72c2;text-shadow:0 2px 0 #cdeeff}
.cfa-rt h2::after{content:'';flex:1;height:3px;min-width:40px;background:linear-gradient(90deg,#1ea7f2,transparent)}
.cfa-rt h3{display:flex;align-items:center;gap:10px;font-family:'Exo 2',sans-serif;font-weight:800;font-style:italic;font-size:22px;line-height:1.2;margin:26px 0 10px;color:#0a2a55}
.cfa-rt h3::before{content:'';flex:none;width:12px;height:12px;transform:rotate(45deg);background:linear-gradient(135deg,#ff5a5f,#c2121a);border:1px solid #6d060b;box-shadow:0 0 0 2px #ffd3d4}
.cfa-rt h4{font-family:'Exo 2',sans-serif;font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#0b72c2;margin:18px 0 8px;padding-bottom:4px;border-bottom:2px dotted #7fc4ee}

/* --- Списки: ромбы у ul, золотые плитки-номера у ol ----------------------- */
.cfa-rt ul,.cfa-rt ol{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.cfa-rt ul>li{position:relative;padding-left:22px}
.cfa-rt ul>li::before{content:'';position:absolute;left:3px;top:.62em;width:8px;height:8px;transform:rotate(45deg);background:#1ea7f2;border:1px solid #064a85}
.cfa-rt ol{counter-reset:n}
.cfa-rt ol>li{counter-increment:n;position:relative;padding-left:38px;min-height:26px}
.cfa-rt ol>li::before{content:counter(n);position:absolute;left:0;top:1px;width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:linear-gradient(180deg,#ffe56e,#ff9500);border:1px solid #9a4200;font-family:'Exo 2',sans-serif;font-weight:900;font-size:14px;line-height:1;color:#fff;text-shadow:0 1px 0 #8a3a00}

/* --- Картинки, цитаты, код, линейка --------------------------------------- */
.cfa-rt figure{margin:0 0 18px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#fff,#dfe7ef);border:1px solid #6b7c90;box-shadow:0 6px 14px rgba(6,40,90,.2)}
.cfa-rt img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:6px}
.cfa-rt figure img{border:1px solid #0a2a55}
.cfa-rt figcaption{padding:8px 4px 0;font-size:13px;color:#4a5f7a;font-style:italic}
.cfa-rt code{font-family:Consolas,monospace;font-size:.9em;background:#0a2a55;color:#8fe1ff;padding:1px 6px;border-radius:4px}
.cfa-rt blockquote{margin:0 0 16px;padding:14px 18px;border-radius:10px;background:linear-gradient(180deg,#f3faff,#e2f3ff);border:1px solid #9ec3e2;font-style:italic;color:#23446e}
.cfa-rt hr{border:0;height:4px;margin:28px 0;background:linear-gradient(90deg,transparent,#1ea7f2 20%,#ffc629 50%,#1ea7f2 80%,transparent);border-radius:2px}

/* --- Нотисы: info (по умолчанию), warn, new ------------------------------- */
.cfa-rt .rt-notice{position:relative;margin:0 0 16px;padding:14px 16px 14px 58px;border-radius:10px;border:2px solid #0b72c2;background:repeating-linear-gradient(45deg,#eef8ff 0 14px,#e2f3ff 14px 28px)}
.cfa-rt .rt-notice p:last-child{margin:0}
.cfa-rt .rt-notice::before{content:'i';position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#5fd0ff,#0b72c2);border:1px solid #064a85;color:#fff;font-family:'Exo 2',sans-serif;font-weight:900}
.cfa-rt .rt-notice.warn{border-color:#e4262c;background:repeating-linear-gradient(45deg,#fff1f1 0 14px,#ffe4e4 14px 28px)}
.cfa-rt .rt-notice.warn::before{content:'!';background:linear-gradient(180deg,#ff5a5f,#c2121a);border-color:#6d060b}
.cfa-rt .rt-notice.new{border-color:#d98a00;background:repeating-linear-gradient(45deg,#fff9e6 0 14px,#fff2c9 14px 28px)}
.cfa-rt .rt-notice.new::before{content:'★';background:linear-gradient(180deg,#ffe56e,#ff9500);border-color:#9a4200}

/* --- Панель загрузок и кнопки --------------------------------------------- */
.cfa-rt .rt-dl{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:0 0 20px;padding:20px 16px;border-radius:12px;background:radial-gradient(rgba(255,255,255,.1) 1.2px,transparent 1.4px) 0 0/8px 8px,linear-gradient(180deg,#0b4f8f,#0a2a55);border:2px solid #064a85;box-shadow:inset 0 2px 0 rgba(143,225,255,.4)}
.cfa-rt a.rt-btn{display:inline-block;font-family:'Exo 2',sans-serif;font-weight:900;font-style:italic;font-size:19px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:#fff;padding:12px 24px;border-radius:10px;border:2px solid #9a4200;background:linear-gradient(180deg,#ffe56e 0%,#ffb51f 48%,#ff9500 52%,#ff7a00 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 5px 0 #8a3a00,0 8px 14px rgba(0,0,0,.3);text-shadow:0 2px 0 #8a3a00,1px 0 0 #8a3a00,-1px 0 0 #8a3a00}
.cfa-rt .rt-dl a.rt-btn{flex:1 1 240px;max-width:340px;text-align:center;font-size:22px;padding:14px 20px}
.cfa-rt a.rt-btn small{display:block;margin-top:4px;font-family:'Titillium Web',sans-serif;font-style:normal;font-weight:700;font-size:13px;letter-spacing:0;text-transform:none;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.cfa-rt p small{font-size:13px;color:#4a5f7a}

/* --- Панель «CONNECT TO» --------------------------------------------------- */
.cfa-rt .rt-ip{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:0 0 18px;padding:14px 18px;border-radius:12px;background:radial-gradient(rgba(255,255,255,.1) 1.2px,transparent 1.4px) 0 0/8px 8px,linear-gradient(180deg,#0b4f8f,#0a2a55);border:2px solid #064a85;box-shadow:inset 0 2px 0 rgba(143,225,255,.4)}
.cfa-rt .rt-ip b{font-family:'Exo 2',sans-serif;font-weight:900;font-style:italic;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#8fe1ff}
.cfa-rt .rt-ip code{font-size:20px;font-weight:700;letter-spacing:.02em;padding:4px 12px;background:#061a38;border:1px solid #1ea7f2;box-shadow:inset 0 1px 0 rgba(143,225,255,.25);-webkit-user-select:all;user-select:all}

/* --- Зеркала. Класс has-mirror ставит рендерер — отличие 1 в шапке --------- */
.cfa-rt .rt-dl.has-mirror{margin-bottom:0;border-radius:12px 12px 0 0;border-bottom:0}
.cfa-rt .rt-mirror{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0 0 20px;padding:10px 16px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#e6f6ff,#cdeafc);border:2px solid #064a85;border-top:2px solid #1ea7f2;font-size:14px}
.cfa-rt .rt-mirror b{font-family:'Exo 2',sans-serif;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#0b5fa3}
.cfa-rt .rt-mirror a{font-size:14px}
.cfa-rt a.rt-btn:hover{color:#fff;filter:brightness(1.1)}
.cfa-rt a.rt-btn.blue{border-color:#064a85;background:linear-gradient(180deg,#8fe1ff 0%,#2cb0f6 48%,#0e8ee0 52%,#0b6fbf 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 5px 0 #043563,0 8px 14px rgba(0,0,0,.3);text-shadow:0 2px 0 #064a85,1px 0 0 #064a85,-1px 0 0 #064a85}

/* --- Нажатие кнопки — отличие 5 в шапке, по стайлгайду, а не по прототипу -- */
.cfa-rt a.rt-btn{transition:filter .12s,transform .08s,box-shadow .08s}
.cfa-rt:not([contenteditable]) a.rt-btn:hover,.cfa-rt:not([contenteditable]) a.rt-btn:focus{color:#fff;filter:brightness(1.1) saturate(1.1);transform:translateY(-1px)}
.cfa-rt:not([contenteditable]) a.rt-btn.blue:hover,.cfa-rt:not([contenteditable]) a.rt-btn.blue:focus{filter:brightness(1.1)}
.cfa-rt:not([contenteditable]) a.rt-btn:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 1px 0 #8a3a00}
.cfa-rt:not([contenteditable]) a.rt-btn.blue:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 1px 0 #043563}
@media (prefers-reduced-motion:reduce){.cfa-rt a.rt-btn{transition:none}}

/* --- Запись ченджлога ------------------------------------------------------ */
.cfa-rt .rt-patch{margin:0 0 22px;border-radius:12px;overflow:hidden;border:1px solid #0b5fa3;box-shadow:0 4px 12px rgba(6,40,90,.18);background:#fff}
.cfa-rt .rt-patch h3{margin:0;padding:10px 16px;align-items:baseline;gap:12px;font-size:18px;color:#fff;background:linear-gradient(90deg,#0a2a55,#0b5fa3 70%,#1ea7f2)}
.cfa-rt .rt-patch h3::before{display:none}
.cfa-rt .rt-patch h3 b{font-weight:900;font-size:28px;color:#ffc629;text-shadow:0 2px 0 #000}
.cfa-rt .rt-patch>h4,.cfa-rt .rt-patch>ul,.cfa-rt .rt-patch>p{margin-left:16px;margin-right:16px}
.cfa-rt .rt-patch>h4{margin-top:14px}
.cfa-rt .rt-patch>:last-child{margin-bottom:16px}

/* --- Только для редактора (P5-4): рамка фокуса у contenteditable ----------- */
.cfa-rt[contenteditable]:focus{outline:none}