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

.rl-sc { min-width: 0; }
.rl-sc-body, .rl-sc-wrap { display: grid; gap: var(--tile-gap); align-content: start; min-width: 0; }

/* ---------- Список по статусам ---------- */
.rl-sc-group { display: grid; gap: var(--space-4); min-width: 0; }
.rl-sc-group__h { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.rl-sc-group__n { color: var(--color-ink3); font-weight: var(--weight-regular); }
.rl-sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .rl-sc-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } }
.rl-sc-li { min-width: 0; }
.rl-sc-item {
  display: grid; gap: var(--space-2); width: 100%; min-height: var(--size-touch-min); padding: var(--space-4); box-sizing: border-box;
  text-align: start; cursor: pointer; color: var(--color-ink); background: var(--surface-inner); border: 1px solid var(--color-line); border-radius: var(--inner-radius);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.rl-sc-item:hover { background: var(--surface-inner-hover); border-color: var(--color-line2); }
.rl-sc-item:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.rl-sc-item__t { font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); overflow-wrap: anywhere; }
.rl-sc-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rl-sc-item__meta .caption { color: var(--color-ink2); }

/* ---------- Карточка ---------- */
.rl-sc-card { display: grid; gap: var(--space-5); min-width: 0; }
.rl-sc-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.rl-sc-card__t { margin: 0; flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.rl-sc-card__t:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.rl-sc-edited {
  flex: 1 1 100%; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--inner-radius);
  background: var(--color-acc-soft); color: var(--color-acc-soft-text);
  font: var(--text-ui-strong-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
}
.rl-sc-scenes, .rl-sc-side, .rl-sc-comments, .rl-sc-caption { display: grid; gap: var(--space-4); min-width: 0; align-content: start; }
.rl-sc-lbl { margin: 0; }
.rl-sc-empty { margin: 0; color: var(--color-ink2); }
@media (min-width: 64rem) {
  .rl-sc-card { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .rl-sc-card__head { grid-column: 1 / -1; }
}

/* ---------- Сцены ---------- */
.rl-sc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rl-sc-th {
  padding: var(--space-2) var(--space-3); text-align: start; color: var(--color-ink2); border-bottom: 1px solid var(--color-line2);
  font: var(--text-ui-strong-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
}
.rl-sc-th:nth-child(1) { width: 3rem; }
.rl-sc-th:nth-child(2) { width: 9rem; }
.rl-sc-cell {
  padding: var(--space-3); vertical-align: top; border-bottom: 1px solid var(--color-line); min-width: 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-sc-cell--n { color: var(--color-ink2); }
.rl-sc-cell--role { font-weight: var(--text-ui-strong-weight); }
.rl-sc-cell--vo { max-width: 40rem; }
.rl-sc-acc { color: var(--color-acc-soft-text); background: var(--color-acc-soft); border-radius: var(--radius-sm); padding: 0 var(--space-1); font-weight: var(--text-ui-strong-weight); }

/* На узком экране сцены стопкой: у каждой ячейки своя подпись из data-label. */
@media (max-width: 47.99rem) {
  .rl-sc-table, .rl-sc-table tbody, .rl-sc-row, .rl-sc-cell { display: block; width: 100%; box-sizing: border-box; }
  .rl-sc-thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rl-sc-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line2); }
  .rl-sc-cell { padding: var(--space-1) 0; border-bottom: 0; }
  .rl-sc-cell::before {
    content: attr(data-label); display: block; color: var(--color-ink2);
    font: var(--text-ui-strong-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
  }
}

/* ---------- Комментарии ---------- */
.rl-sc-clist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.rl-sc-c { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--surface-inner); border-radius: var(--inner-radius); min-width: 0; }
.rl-sc-c--done { opacity: .75; }
.rl-sc-c__text { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rl-sc-c__st { color: var(--color-ink2); }

/* ---------- Кнопки решения и возврат ---------- */
.rl-sc-actions { display: grid; gap: var(--space-3); }
.rl-sc-actions__n { margin: 0; color: var(--color-ink2); }
.rl-sc-actions__b, .rl-sc-return__b { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rl-sc-approve, .rl-sc-return-btn, .rl-sc-btn { min-height: var(--size-touch-min); }
.rl-sc-approve:disabled, .rl-sc-return-btn:disabled, .rl-sc-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 47.99rem) { .rl-sc-actions__b .btn, .rl-sc-return__b .btn { flex: 1 1 100%; } }

.rl-sc-return[hidden] { display: none; }
.rl-sc-field { display: grid; gap: var(--space-2); min-width: 0; }
.rl-sc-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-sc-hint-t { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-sc-area {
  width: 100%; min-width: 0; min-height: var(--size-touch-min); padding: var(--space-3) var(--space-4); box-sizing: border-box; resize: vertical;
  background: var(--color-panel2); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--radius-md); font: inherit;
}
.rl-sc-area:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.rl-sc-problem { 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-sc-problem[hidden] { display: none; }

.rl-sc-note, .rl-sc-hint { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-sc-note[hidden], .rl-sc-hint[hidden] { display: none; }
.rl-sc-note[data-tone="ok"] { color: var(--color-ok-text); }
.rl-sc-note[data-tone="danger"] { color: var(--color-danger-text); }
.rl-sc-hint__a { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }