/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Панель «Подпись публикации» в карточке ролика (modules-reels-caption.js): просмотр и форма правки.
   Значения — только из tokens.css (светлая и тёмная тема берутся из переменных), размеры в rem. Кнопки — .btn из base.css. */

.rl-cap {
  display: grid; gap: var(--space-4); min-width: 0; box-sizing: border-box; padding: var(--space-5);
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-card);
}
@media (min-width: 48rem) { .rl-cap { padding: var(--space-6); } }
.rl-cap__h { margin: 0; }
.rl-cap__body, .rl-cap__view, .rl-cap__form, .rl-cap__empty { display: grid; gap: var(--space-4); min-width: 0; }
.rl-cap__empty { justify-items: start; }

/* Статус сохранения — .ui-status из kit.css: точка цвета состояния и серый текст; длинный текст переносится. */
.rl-cap__note { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.rl-cap__note[hidden] { display: none; }

.rl-cap__muted { margin: 0; color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rl-cap__error { margin: 0; color: var(--color-danger-text); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rl-cap__hint { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-cap__badge { justify-self: start; margin: 0; white-space: normal; }

/* ---------- Просмотр ---------- */
.rl-cap__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rl-cap__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rl-cap__tag {
  padding: var(--space-1) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-xs); overflow-wrap: anywhere;
  background: none; color: var(--color-ink2);
  font: var(--text-mono-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-num);
}
.rl-cap__cover { margin: 0; overflow-wrap: anywhere; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rl-cap__k { margin: 0; color: var(--color-ink2); font: var(--text-ui-strong-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-cap__first { display: grid; gap: var(--space-1); }

/* ---------- Форма правки ---------- */
.rl-cap__field { display: grid; gap: var(--space-2); min-width: 0; }
.rl-cap__label { color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); }
.rl-cap__input {
  width: 100%; min-width: 0; min-height: var(--size-touch-min); padding: var(--space-3) var(--space-4); box-sizing: border-box;
  background: var(--color-panel); color: var(--color-ink); border: 0; border-radius: var(--radius-ctl); box-shadow: var(--shadow-ring);
  font: var(--weight-regular) var(--text-ui-size)/1.55 var(--font-sans);
}
.rl-cap__input::placeholder { color: var(--color-ink3); }
.rl-cap__input:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: 0; }
.rl-cap__area { resize: vertical; min-height: calc(var(--size-ctl) * 2.5); }
.rl-cap__count { margin: 0; justify-self: end; color: var(--color-ink2); font: var(--text-mono-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-mono); }
.rl-cap__count[data-over="true"] { color: var(--color-danger-text); }

/* На 390 px поля в столбец на всю ширину; на широком экране секунда и текст обложки рядом. */
.rl-cap__row { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .rl-cap__row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); } }

.rl-cap__problems-host:empty { display: none; }
.rl-cap__problems-box {
  display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--inner-radius);
  background: none; color: var(--color-ink2);
}
.rl-cap__problems-t { margin: 0; color: var(--color-danger-text); font: var(--text-ui-strong-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-cap__problems { margin: 0; padding-inline-start: var(--space-5); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }

.rl-cap__acts { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rl-cap__btn { min-height: var(--size-touch-min); }
.rl-cap__btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 47.99rem) { .rl-cap__acts .rl-cap__btn { flex: 1 1 100%; } }