/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Общие части подэкранов «Ролики»: вкладки (rl-tabs*) и блок «Требует внимания» (rl-alerts*).
   Подключён в index.html после modules-reels.css; значения — только из tokens.css, размеры в rem.
   Вкладки — как вкладки проекта (текст, активная темнее и с подчёркиванием, без заливок); тревоги — белая плашка с рамкой 1 px, статус точкой и серым словом. */

/* ---------- Вкладки ---------- */
.rl-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); min-width: 0; border-bottom: 1px solid var(--color-line2); }
.rl-tabs__a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--size-touch-min); padding: 0; box-sizing: border-box;
  color: var(--color-ink2); text-decoration: none; white-space: nowrap; background: none; border: 0;
  font: var(--text-ui-strong-weight) var(--text-ui-size)/1 var(--font-sans);
  transition: color var(--duration-fast) var(--ease-out);
}
.rl-tabs__a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.0625rem; height: 0.125rem; background: var(--color-acc);
  transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out);
}
.rl-tabs__a:hover { color: var(--color-ink); }
.rl-tabs__a--on, .rl-tabs__a[aria-current="page"] { color: var(--color-ink); }
.rl-tabs__a--on::after, .rl-tabs__a[aria-current="page"]::after { transform: scaleX(1); }
.rl-tabs__a:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); border-radius: var(--radius-xs); }

/* ---------- Требует внимания ---------- */
.rl-alerts { display: grid; gap: var(--space-3); min-width: 0; padding: var(--card-pad); box-sizing: border-box; background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.rl-alerts[hidden] { display: none; }
.rl-alerts__h { margin: 0; color: var(--color-ink); font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--font-head); letter-spacing: var(--text-h3-track); }
.rl-alerts__list { list-style: none; margin: 0; padding: 0; display: grid; }
.rl-alerts__li { min-width: 0; }
.rl-alerts__li + .rl-alerts__li { border-top: 1px solid var(--color-line); }
.rl-alerts__a {
  --dot: var(--color-dot-wait);
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); padding: var(--space-2) 0; box-sizing: border-box;
  color: var(--color-ink2); text-decoration: none;
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
  transition: color var(--duration-fast) var(--ease-out);
}
.rl-alerts__a:hover { color: var(--color-ink); }
.rl-alerts__a:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); border-radius: var(--radius-xs); }
.rl-alerts__a[data-tone="danger"] { --dot: var(--color-danger); }
.rl-alerts__dot { flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--dot); }
.rl-alerts__t { min-width: 0; overflow-wrap: anywhere; }
.rl-alerts__n { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* «Назад» (reelsBack): ссылка уровня модуля на узком экране скрыта. */
.rl-back { display: block; }
@media (max-width: 39.99rem) { .rl-back--module { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .rl-tabs__a, .rl-tabs__a::after, .rl-alerts__a { transition: none; }
}