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

/* ---------- Вкладки ---------- */
.rl-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.rl-tabs__a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-touch-min); padding: 0 var(--space-4); box-sizing: border-box;
  color: var(--color-ink2); text-decoration: none; white-space: nowrap;
  font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans);
  background: var(--surface-inner); border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.rl-tabs__a:hover { background: var(--surface-inner-hover); border-color: var(--color-line2); color: var(--color-ink); }
.rl-tabs__a--on, .rl-tabs__a[aria-current="page"] { background: var(--color-acc-soft); border-color: var(--color-acc); color: var(--color-acc-soft-text); }

/* ---------- Требует внимания ---------- */
.rl-alerts { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-4); box-sizing: border-box; background: var(--color-warn-soft); border: 1px solid var(--color-warn); border-radius: var(--inner-radius); }
.rl-alerts[hidden] { display: none; }
.rl-alerts__h { margin: 0; color: var(--color-warn-soft-text); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); }
.rl-alerts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rl-alerts__li { min-width: 0; }
.rl-alerts__a {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch-min); padding: var(--space-2) var(--space-3); box-sizing: border-box;
  color: var(--color-ink); text-decoration: none; background: var(--surface-inner); border-radius: var(--inner-radius);
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.rl-alerts__a:hover { background: var(--surface-inner-hover); }
.rl-alerts__dot { flex: none; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-warn); }
.rl-alerts__a[data-tone="danger"] .rl-alerts__dot { background: var(--color-danger); }
.rl-alerts__t { min-width: 0; overflow-wrap: anywhere; }