/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Доска «Ролики» (#modules-reels, modules-reels.js) по макету docs/reels-nav/b2 (css/b2.css, data-view="board"): сводка и кнопки над доской,
   фильтры, столбцы по статусу, карточки роликов. Графитовая тема: вместо рамок — тонкое кольцо и мягкое свечение из tokens.css.
   Столбцы не ужимаются (18,5 rem), пустой столбец — полоса с числом. До 48 rem доска — один столбец выбранного этапа.
   Значения — только токены, размеры в rem; размеры раскладки без токена названы в .rb. */

.rb {
  --rb-col-w: 18.5rem;        /* ширина столбца доски: не ужимается, правый может уходить за край */
  --rb-col-strip: 3rem;       /* свёрнутый столбец */
  --rb-thumb-w: 3.5rem;       /* кадр обложки 9:16 на карточке */
  --rb-thumb-r: calc(var(--radius-ctl) / 2);
  --rb-btn-h: var(--size-ctl-sm);
  --rb-board-max: calc(100dvh - 24.5rem); /* потолок высоты доски: дальше столбец прокручивается внутри */
  --rb-board-min: 24rem;
  --rb-fs-stat: 1.5rem;
  display: grid; gap: var(--space-4); align-content: start; min-width: 0;
}
@media (max-width: 47.9375rem) { .rb { --rb-fs-stat: 1.25rem; --rb-btn-h: var(--size-touch-min); --rb-thumb-w: 4.375rem; } }

/* ---------- Над доской: сводка и кнопки ---------- */
.rb-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: center; }
@media (min-width: 64rem) { .rb-bar { grid-template-columns: minmax(0, 1fr) auto; } }
.rb-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; border-radius: var(--radius-card); background: var(--color-panel); box-shadow: var(--shadow-ring); overflow: hidden; }
.rb-sum__i { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; padding: var(--space-3) var(--space-4); }
.rb-sum__i + .rb-sum__i { box-shadow: inset 1px 0 0 var(--color-line); }
.rb-sum__v { color: var(--color-ink); font: var(--weight-regular) var(--rb-fs-stat)/1 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: var(--text-number-lg-track); }
.rb-sum__v[data-tone="acc"] { color: var(--color-acc-text); }
.rb-sum__l { min-width: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
@media (min-width: 48rem) {
  .rb-sum__i { flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .rb-sum__l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Главная кнопка над доской тёмная (.btn--primary): оранжевая остаётся только на «Согласовать» в карточке. */
.rb-bar__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rb-bar__cta .btn { min-height: var(--size-ctl); }
.rb-bar__cta .btn .ic { width: 1.125rem; height: 1.125rem; }
@media (max-width: 47.9375rem) { .rb-bar__cta .btn { flex: 1 1 100%; min-height: var(--size-touch-min); } }
.rb-msg { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rb-msg[data-tone="ok"] { color: var(--color-ok-text); }
.rb-msg[data-tone="danger"] { color: var(--color-danger-text); }
.rb-ideas__bar { display: flex; margin-bottom: var(--space-4); }

/* ---------- Фильтры ---------- */
.rb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rb-filters__grp { display: contents; }
.rb-sel { position: relative; display: inline-flex; min-width: 0; }
.rb-sel select {
  appearance: none; -webkit-appearance: none; min-height: var(--size-ctl-sm); max-width: 100%; padding: 0 var(--space-6) 0 var(--space-3); border: 0; border-radius: var(--radius-ctl);
  background: var(--color-panel); color: var(--color-ink); cursor: pointer; box-shadow: var(--shadow-ring); font: var(--weight-regular) var(--text-caption-size)/1 var(--font-sans);
}
.rb-sel select:hover { box-shadow: 0 0 0 1px var(--color-line2); }
.rb-sel select[data-set="true"] { box-shadow: 0 0 0 1px var(--color-ink2); font-weight: var(--weight-medium); }
.rb-sel select:focus-visible, .rb-filters__toggle:focus-visible, .rb-stage:focus-visible, .rb-strip:focus-visible, .rb-col__x:focus-visible, .rb-board:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.rb-sel::after {
  content: ""; position: absolute; right: var(--space-3); top: 50%; width: var(--space-2); height: var(--space-2); margin-top: calc(var(--space-1) * -1.5);
  border-right: var(--size-focus-width) solid var(--color-ink2); border-bottom: var(--size-focus-width) solid var(--color-ink2); transform: rotate(45deg); pointer-events: none;
}
.rb-filters__sort { margin-left: auto; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/1 var(--font-sans); white-space: nowrap; }
.rb-filters__toggle { display: none; }
.rb-filters .btn--text { min-height: var(--size-ctl-sm); padding-inline: var(--space-2); }
@media (max-width: 47.9375rem) {
  .rb-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .rb-filters__toggle {
    display: inline-flex; align-items: center; justify-content: flex-start; min-height: var(--size-touch-min); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-ctl);
    background: var(--color-panel); box-shadow: var(--shadow-ring); color: var(--color-ink); cursor: pointer; font: var(--weight-medium) var(--text-caption-size)/1 var(--font-sans);
  }
  .rb-filters__grp { display: none; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .rb-filters__grp[data-open="true"] { display: grid; }
  .rb-sel, .rb-sel select { width: 100%; min-height: var(--size-touch-min); }
  .rb-filters__sort { margin: 0; align-self: center; }
  .rb-filters .btn--text { grid-column: 1 / -1; justify-content: flex-start; min-height: var(--size-touch-min); }
}

/* ---------- Переключатель этапов (телефон): сегменты со счётчиками, прокручиваются внутри себя ---------- */
.rb-stages { display: none; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scroll-snap-type: x proximity; scrollbar-width: none; min-width: 0; }
.rb-stages::-webkit-scrollbar { display: none; }
@media (max-width: 47.9375rem) { .rb-stages { display: flex; } }
.rb-stage {
  flex: none; display: inline-flex; align-items: baseline; justify-content: center; gap: var(--space-2); min-height: var(--size-touch-min); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill);
  background: var(--color-panel); box-shadow: var(--shadow-ring); color: var(--color-ink2); cursor: pointer; scroll-snap-align: start; white-space: nowrap;
  font: var(--weight-medium) var(--text-caption-size)/var(--size-touch-min) var(--font-sans);
}
.rb-stage__n { font: var(--weight-regular) var(--text-caption-size)/var(--size-touch-min) var(--font-num); font-variant-numeric: tabular-nums; }
.rb-stage[aria-pressed="true"] { background: var(--color-ink); color: var(--color-bg); box-shadow: none; }
.rb-stage[data-attn="true"]:not([aria-pressed="true"]) .rb-stage__n { color: var(--color-acc-text); }

/* ---------- Доска: столбцы в ряд, свободная прокрутка по горизонтали ---------- */
.rb-board {
  display: flex; gap: var(--space-3); min-width: 0; max-height: max(var(--rb-board-min), var(--rb-board-max)); overflow-x: auto; overflow-y: hidden; padding-bottom: var(--space-2);
  scrollbar-width: thin; scrollbar-color: var(--color-line2) transparent; outline-offset: calc(var(--size-focus-offset) * -1);
}
@media (min-width: 48rem) {
  .rb-board { cursor: grab; user-select: none; -webkit-user-select: none; overscroll-behavior-x: contain; }
  .rb-board[data-panning] { cursor: grabbing; scroll-behavior: auto; }
  .rb-board[data-panning] * { pointer-events: none; cursor: grabbing; }
  .rb-board :is(button, a, select, input, textarea) { cursor: pointer; }
}
.rb-col { flex: 1 0 var(--rb-col-w); display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--space-2); border-radius: var(--radius-card); background: var(--color-bg2); box-shadow: var(--shadow-ring); }
.rb-col__h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--size-ctl); padding: 0 var(--space-1) 0 var(--space-2); }
.rb-col__ttl { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.rb-col__ttl h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--weight-medium) var(--text-h3-size)/var(--text-ui-size) var(--font-head); letter-spacing: var(--text-h3-track); }
.rb-col__n { color: var(--color-ink); font: var(--weight-regular) var(--text-caption-size)/var(--text-ui-size) var(--font-num); font-variant-numeric: tabular-nums; }
.rb-col__n[data-tone="acc"] { color: var(--color-acc-soft-text); }
.rb-col__x {
  display: inline-grid; place-items: center; flex: none; width: var(--size-ctl-sm); height: var(--size-ctl-sm); padding: 0; border: 0; border-radius: var(--radius-ctl);
  background: none; color: var(--color-ink2); cursor: pointer;
}
.rb-col__x:hover { background: var(--color-panel2); color: var(--color-ink); }
.rb-col__x .ic { width: 1.125rem; height: 1.125rem; }
.rb-list {
  list-style: none; margin: 0; display: grid; align-content: start; gap: var(--space-2); flex: 1 1 auto; min-height: 0; padding: 0 0 var(--space-2); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--color-line2) transparent;
}
.rb-empty { padding: var(--space-4); border-radius: var(--radius-ctl); background: var(--color-panel); box-shadow: var(--shadow-ring); color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rb-more { display: none; }

/* Свёрнутый столбец: узкая полоса с названием и числом */
.rb-col[data-collapsed="true"] { flex: 0 0 var(--rb-col-strip); padding: 0; }
.rb-strip {
  display: none; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; height: 100%; padding: var(--space-3) 0; border: 0; border-radius: inherit;
  background: none; color: var(--color-ink); cursor: pointer;
}
.rb-strip:hover { background: var(--color-panel2); }
.rb-strip__n { color: var(--color-ink); font: var(--weight-regular) var(--text-caption-size)/1 var(--font-num); }
.rb-strip__t { writing-mode: vertical-rl; white-space: nowrap; font: var(--weight-medium) var(--text-ui-size)/1 var(--font-head); }
.rb-col[data-empty="true"][data-collapsed="true"] .rb-strip__t { color: var(--color-ink2); }
@media (min-width: 48rem) {
  .rb-col[data-collapsed="true"] .rb-list, .rb-col[data-collapsed="true"] .rb-col__h, .rb-col[data-collapsed="true"] .rb-more { display: none; }
  .rb-col[data-collapsed="true"] .rb-strip { display: flex; }
}

/* ---------- Карточка ролика ---------- */
.rb-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-ctl); background: var(--color-panel);
  box-shadow: var(--shadow-ring); transition: box-shadow var(--duration-fast) var(--ease-out);
}
.rb-card:hover { box-shadow: var(--shadow-ring), var(--shadow-glow); }
.rb-card__top { display: grid; grid-template-columns: var(--rb-thumb-w) minmax(0, 1fr); gap: var(--space-2); }
.rb-thumb {
  display: grid; place-items: center; align-self: start; width: var(--rb-thumb-w); aspect-ratio: 9 / 16; border-radius: var(--rb-thumb-r);
  background: var(--color-panel2); box-shadow: var(--shadow-ring);
}
.rb-thumb__play { display: block; width: 1rem; height: 1rem; background: var(--color-ink2); clip-path: polygon(20% 8%, 92% 50%, 20% 92%); }
.rb-card:hover .rb-thumb__play { background: var(--color-ink); }
.rb-card__body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-1); min-width: 0; }
/* Заголовок — кнопка, растянутая на всю карточку: клик по карточке открывает ролик; кнопки внизу лежат выше */
.rb-card__t {
  position: static; margin: 0; padding: 0; border: 0; background: none; color: var(--color-ink); text-align: left; cursor: pointer;
  font: var(--weight-medium) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rb-card__t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rb-card__t:focus-visible { outline: none; }
.rb-card__t:focus-visible::after { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: calc(var(--size-focus-width) * -1); border-radius: var(--radius-ctl); }
.rb-card__meta { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-card__qa { margin: 0; display: flex; }
.rb-card__qa .ui-chip, .rb-card__chips .ui-chip { min-height: 0; max-width: 100%; color: var(--color-ink2); }
.rb-card__chips { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-ink2); }
.rb-card__info { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-2); color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rb-card__info > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-wait { flex: none; white-space: nowrap; }
.rb-wait[data-long="true"] { color: var(--color-warn-text); font-weight: var(--weight-medium); }
.rb-card__f { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-1); min-height: var(--rb-btn-h); }
.rb-card__f .btn { flex: 0 0 auto; min-height: var(--rb-btn-h); padding-inline: var(--space-2); font-size: var(--text-caption-size); }
.rb-card__f .rb-main { flex: 1 1 auto; }
.rb-card__f .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Телефон: доска — один столбец выбранного этапа, без горизонтальной прокрутки ---------- */
@media (max-width: 47.9375rem) {
  .rb-board { display: block; max-height: none; overflow: visible; padding: 0; }
  .rb-col { display: none; padding: 0; background: none; box-shadow: none; }
  .rb-col[data-current="true"] { display: flex; }
  .rb-col__h { display: none; }
  .rb-list { overflow: visible; padding: 0; }
  .rb-col[data-collapsed="true"] .rb-strip { display: none; }
  .rb-col[data-collapsed="true"] .rb-list { display: grid; }
  .rb-card { padding: var(--space-3); }
  .rb-card__t { min-height: var(--size-touch-min); display: flex; align-items: center; }
  .rb-card__top { gap: var(--space-3); }
  .rb-card__f .btn { padding-inline: var(--space-3); }
  .rb-list[data-clip="true"] .rb-card:nth-child(n+9) { display: none; }
  .rb-more { display: flex; justify-content: center; min-height: var(--size-touch-min); margin-top: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .rb-card { transition: none; }
  .rb-board { scroll-behavior: auto; }
}