/* ═══ Управляемая правая колонка MVQ ═════════════════════════════════════════
 *
 * Пара к `js/right-rail.js`: там описано, **когда** колонка уходит, здесь —
 * как она и её управление выглядят.
 *
 * Подключается ТОЛЬКО из `web.html` и идёт последним из стилей — после
 * `shell.css` и `brand.css`. Порядок здесь не украшение: дорожки сетки
 * `.social` объявлены в `app.css` и переписаны в `shell.css`, и наш случай
 * («колонку убрали руками») обязан читаться после обоих. Переопределений
 * через `!important` и раздутых селекторов нет ни одного: класс `rrl-off`
 * стоит на том же узле, что и `no-side`, и выигрывает обычной специфичностью.
 *
 * Окно настольной программы (`index.html`) этого файла не грузит, и ни одна
 * строка отсюда его не касается ни при каком размере окна. Откат — снять две
 * строки из `web.html` (этот файл и `js/right-rail.js`): колонка вернётся к
 * прежнему виду — стоит там, где положено по ширине окна, и не прячется.
 *
 * # Что здесь решается
 *
 * 1. **Место для общей кнопки.** Колонка получает сверху полосу в 52 точки, и
 *    кнопка «Скрыть колонку» стоит в ней, а не поверх первой карточки.
 * 2. **Колонки нет — ленте её ширина.** Третья дорожка сетки не сжимается, а
 *    исчезает: центр становится шире ровно на 320 точек.
 * 3. **Дорога назад видна.** На месте ушедшей колонки, под шапкой, остаётся
 *    кнопка «Показать колонку» — не в меню и не только в настройках.
 * 4. **Обе темы.** Ни одного своего цвета: поверхность, линия, приглушённый
 *    текст и акцент берутся токенами, поэтому светлая, тёмная и «как в
 *    системе» получаются сами.
 */

/* Кнопки стоят в каркасе ленты, а не в самой колонке: колонку `social.js`
 * перерисовывает целиком на каждое изменение, и всё, что лежит внутри неё,
 * стирается вместе с содержимым. Отсчёт — от каркаса, поэтому ему нужна
 * точка отсчёта. `position` у сетки ничего в ней не переставляет, а полоса
 * растворения низа (`pwa-shell.css`, `.social::after`) стоит `fixed` и
 * считается от окна — её это тоже не задевает. */
.social { position: relative; }

/* По умолчанию управления нет.
 *
 * Это не «скрыли на всякий случай»: до 1080 точек правой колонки нет вовсе
 * (`shell.css`), и кнопка, прячущая то, чего не видно, — обман. Появляется
 * она ровно там же, где появляется колонка.
 *
 * ⚠️ У `.rrl-show` имя вдвоём с классом (`.rrl-btn.rrl-show`), и это не
 * украшение. Найдено живым кадром 02.09.2026: `.rrl-btn` ниже объявляет
 * `display: grid` — та же специфичность (0,1,0), но **позже по файлу**, — и
 * простое `.rrl-show { display: none }` он молча перебивал. Кнопка «Показать
 * колонку» стояла в разметке всегда: обычным элементом сетки `.social` она
 * падала в левый нижний угол экрана и висела там круглой стрелкой «‹‹» на
 * всех ширинах, включая телефон, где никакой правой колонки нет и быть не
 * может. Полоса `.rrl-cap` от этого не страдала — она не `.rrl-btn`, — потому
 * и заметно это было только на одной из двух кнопок.
 *
 * Правило показа (`.social.rrl-off:not(.no-side) .rrl-show`, 0,4,0) по-прежнему
 * сильнее и работает как работало. */
.rrl-cap { display: none; }
.rrl-btn.rrl-show { display: none; }

/* ── Общая кнопка колонки ────────────────────────────────────────────────── */

.rrl-btn {
  position: relative;
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--muted);
  cursor: pointer;
  transition: color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.rrl-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--muted); }
.rrl-btn:active { transform: scale(.94); }
.rrl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Двойная стрелка — две одинаковые внахлёст. Отрицательное поле подобрано под
 * размер значка: сама фигура занимает меньше трети своего поля 24×24, и без
 * нахлёста между стрелками стояла бы пустая ступенька в две трети. */
.rrl-chev { display: flex; align-items: center; color: inherit; }
.rrl-chev svg.ic { width: 15px; height: 15px; }
.rrl-chev svg.ic + svg.ic { margin-left: -8px; }

/* Подпись всплывает своя, а не системная: системная ждёт секунду и появляется
 * у указателя, а не у кнопки. Клавиатуре она нужна не меньше мыши — отсюда
 * `:focus-visible`. */
.rrl-tip {
  position: absolute; top: calc(100% + 8px);
  padding: 4px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface2); color: var(--text);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--fast) var(--ease);
}
/* Подпись длиннее кнопки втрое и обязана остаться в окне: у левой кнопки она
 * растёт вправо, у правой — влево. */
.rrl-hide .rrl-tip { left: 0; }
.rrl-show .rrl-tip { right: 0; }
.rrl-btn:hover .rrl-tip,
.rrl-btn:focus-visible .rrl-tip { opacity: 1; }

/* ── Колонка на месте ────────────────────────────────────────────────────── */

@media (min-width: 1080px) {
  /* Полоса над колонкой. Непрозрачная намеренно: колонка прокручивается сама,
   * и на невысоком ноутбуке карточки уезжают вверх — под кнопкой они должны
   * исчезать, а не просвечивать сквозь неё. Нажатия полоса не ловит: она
   * фон, а не поверхность. */
  .social:not(.no-side) .rrl-cap {
    position: absolute; top: 0; right: 0; z-index: 3;
    width: var(--side); height: 52px;
    display: flex; align-items: center;
    padding-left: 16px;                 /* то же поле, что у карточек колонки */
    background: var(--bg);
    pointer-events: none;
  }
  .rrl-cap > * { pointer-events: auto; }

  /* Место под полосу. Карточки начинаются на 56 точках — ровно под шапкой
   * ленты (64) и на четыре точки ниже края полосы, чтобы между ними читался
   * просвет, а не стык. */
  .social-side { padding-top: 56px; }

  /* Колонку убрали — третья дорожка исчезает целиком, и её 320 точек уходят
   * ленте. Ровно то же, что делает `no-side` у `social.js`, только по
   * решению человека, а не по смыслу экрана. */
  .social.rrl-off { grid-template-columns: var(--nav-w, var(--rail-w, 76px)) minmax(0, 1fr); }
  .social.rrl-off .social-side { display: none; }
  .social.rrl-off .rrl-cap { display: none; }

  /* ⭐ Добавлено при сборке (02.09.2026): пара под свёрнутую навигацию.
   *
   * Срез `shell` сделал левую колонку сворачиваемой и вернул правую с 1080
   * правилом `:root[data-nav="rail"] .social` — это (0,3,0), то есть **сильнее**
   * простого `.social.rrl-off` (0,2,0). Без одноимённой пары ниже дорожка в 320
   * точек отвоёвывала бы себе место обратно: колонка при этом оставалась бы
   * невидимой (её `display: none` идёт с равной специфичностью и позже по
   * порядку файлов), и справа от ленты зияла бы пустая полоса — то есть кнопка
   * «Скрыть колонку» переставала бы работать ровно у тех, кто свернул меню.
   *
   * `!important` для этого не нужен — нужна равная длина селектора. Тем же
   * приёмом и по той же причине `shell.css` выписывает свои пары для `no-side`.
   *
   * Ширина левой дорожки берётся из `--nav-w`, который объявляет `shell.css`
   * (232 или 76 по выбору человека); `--rail-w` оставлен запасным значением на
   * случай отката среза `shell`. */
  :root[data-nav="rail"] .social.rrl-off,
  :root[data-nav="wide"] .social.rrl-off {
    grid-template-columns: var(--nav-w, var(--rail-w, 76px)) minmax(0, 1fr);
  }

  /* Дорога назад: там, где колонка была, под шапкой. Не в углу экрана и не в
   * меню — человек ищет её глазами там же, где нажимал. */
  .social.rrl-off:not(.no-side) .rrl-show {
    position: absolute; z-index: 4;
    top: calc(var(--head) + 12px); right: 12px;
    display: grid;
  }
}