/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Подэкран «Публикации» (modules-reels-publish.js): план недели, очередь, результат действия, плашка «Публикация выключена».
   Значения — только из tokens.css, размеры в rem, обе темы через переменные. Кнопки и статусы — из base.css и kit.css.
   Макет b2: плашки на --color-panel с мягким кольцом --shadow-ring вместо рамки, отступ карточки, шкала отступов 4/8/12/16/24/32; таблицы без заливок;
   статус — точка и серый текст; дата, время и номера — Geist Mono. Окно «Опубликовать вручную» — .rl-pb-m*.
   На узком экране строки таблиц становятся карточками (без горизонтальной прокрутки страницы). Подключается из index.html. */

.rl-pb { min-width: 0; }
.rl-pb-content { display: grid; gap: var(--tile-gap); min-width: 0; align-content: start; }
.rl-pb-content[hidden], .rl-pb .empty[hidden], .rl-pb .notice[hidden] { display: none; }
.rl-pb-off { margin: 0; }
.rl-pb-off > .btn { min-height: var(--size-touch-min); }

/* ---------- Плашки и заголовки блоков ---------- */
.rl-pb-plan, .rl-pb-queue { display: grid; gap: var(--space-4); min-width: 0; align-content: start; }
.rl-pb .rl-pb-plan.tile, .rl-pb .rl-pb-queue.tile {
  box-sizing: border-box; padding: var(--card-pad); background: var(--color-panel);
  border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-ring);
}
.rl-pb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.rl-pb-h { margin: 0; min-width: 0; color: var(--color-ink); font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); }
.rl-pb-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.rl-pb .btn { min-height: var(--size-touch-min); }
.rl-pb .btn[disabled] { cursor: not-allowed; }
.rl-pb-meta, .rl-pb-note, .rl-pb-empty {
  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-pb-meta:empty, .rl-pb-note[hidden] { display: none; }
.rl-pb-note { color: var(--color-ink2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-ctl); box-shadow: var(--shadow-ring); }
.rl-pb-body { display: grid; gap: var(--space-4); min-width: 0; }

/* ---------- Результат действия ---------- */
.rl-pb-results { display: grid; gap: var(--space-2); min-width: 0; }
.rl-pb-result {
  --dot: var(--color-ink3);
  display: flex; align-items: baseline; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4);
  color: var(--color-ink2); background: var(--color-panel); border: 0; border-radius: var(--radius-ctl); box-shadow: var(--shadow-ring);
  overflow-wrap: anywhere; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.rl-pb-result[hidden] { display: none; }
.rl-pb-result::before {
  content: ""; flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--dot);
}
.rl-pb-result[data-tone="ok"] { --dot: var(--color-dot-ok); }
.rl-pb-result[data-tone="danger"] { --dot: var(--color-danger); flex-wrap: wrap; align-items: center; }
.rl-pb-result > span { flex: 1 1 12rem; min-width: 0; }
.rl-pb-result > .btn { flex: none; }

/* ---------- Фильтр очереди ---------- */
.rl-pb-filter {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); cursor: pointer; color: var(--color-ink);
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.rl-pb-check { width: var(--space-6); height: var(--space-6); margin: 0; accent-color: var(--color-acc); flex: none; }

/* ---------- Дни плана ---------- */
.rl-pb-day, .rl-pb-unplaced { display: grid; gap: var(--space-2); min-width: 0; }
.rl-pb-day__h { margin: 0; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); }
.rl-pb-unplaced__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rl-pb-unplaced__li {
  display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line);
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.rl-pb-unplaced__n { color: var(--color-ink); overflow-wrap: anywhere; }
.rl-pb-unplaced__r { color: var(--color-ink2); overflow-wrap: anywhere; }
.rl-pb-unplaced__li:last-child { border-bottom: 0; }

/* ---------- Таблицы ---------- */
.rl-pb-table {
  width: 100%; min-width: 0; border-collapse: collapse; background: transparent;
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.rl-pb-th, .rl-pb-td { padding: var(--space-2) var(--space-3); text-align: start; vertical-align: top; border-bottom: 1px solid var(--color-line); overflow-wrap: anywhere; }
.rl-pb-th { color: var(--color-ink2); font-weight: var(--weight-regular); font-size: var(--text-caption-size); }
.rl-pb-th, .rl-pb-td { padding-inline: 0 var(--space-3); }
.rl-pb-td { color: var(--color-ink); }
/* План недели: у таблиц всех дней одинаковые колонки (время, ролик, проверка, действие). */
.rl-pb-table:not(.rl-pb-table--queue) { table-layout: fixed; }
.rl-pb-table:not(.rl-pb-table--queue) .rl-pb-th:nth-child(1) { width: 14%; }
.rl-pb-table:not(.rl-pb-table--queue) .rl-pb-th:nth-child(2) { width: 32%; }
.rl-pb-table:not(.rl-pb-table--queue) .rl-pb-th:nth-child(3) { width: 22%; }
.rl-pb-table:not(.rl-pb-table--queue) .rl-pb-th:nth-child(4) { width: 32%; }
/* Кнопки строки («Опубликовать сейчас», «Опубликовать вручную», «Отменить») — в ряд, переносятся. */
.rl-pb-rowacts { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.rl-pb-table tbody tr:last-child > .rl-pb-td { border-bottom: 0; }
.rl-pb-td > .ui-chip { margin-inline-start: 0; }
.rl-pb-time { font-family: var(--font-mono); font-size: var(--text-mono-size); font-variant-numeric: tabular-nums; }
.rl-pb-trial { margin-inline-start: var(--space-2); color: var(--color-ink2); font-size: var(--text-caption-size); }
/* Ролик: тема, под ней «Вариант N» и пометка «Пробный». */
.rl-pb-reel { display: grid; gap: var(--space-1); min-width: 0; justify-items: start; }
.rl-pb-reel__t { color: var(--color-ink); overflow-wrap: anywhere; }
.rl-pb-reel__v, .rl-pb-nocheck { color: var(--color-ink2); font-size: var(--text-caption-size); overflow-wrap: anywhere; }
.rl-pb-reel .rl-pb-trial { margin-inline-start: 0; }
.rl-pb-lead { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rl-pb-lead[hidden] { display: none; }
/* Утверждённый план: слоты с временем. */
.rl-pb-appr { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.rl-pb-appr__li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line);
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.rl-pb-appr__li:last-child { border-bottom: 0; }
.rl-pb-appr__n { flex: 1 1 10rem; min-width: 0; color: var(--color-ink); overflow-wrap: anywhere; }
/* Строка очереди открывает панель ролика: курсор, наведение и видимый фокус. */
.rl-pb-tr--open { cursor: pointer; }
.rl-pb-tr--open:hover { background: var(--color-bg2); }
.rl-pb-tr--open:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: calc(var(--size-focus-width) * -1); }
.rl-pb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rl-pb-nodata { color: var(--color-ink3); font-family: var(--font-sans); font-size: var(--text-caption-size); }
.rl-pb-err { display: block; margin-top: var(--space-1); color: var(--color-ink2); font-size: var(--text-caption-size); overflow-wrap: anywhere; }
.rl-pb-link {
  display: inline-flex; align-items: center; min-height: var(--size-touch-min); margin-inline-start: var(--space-2);
  color: var(--color-ink2); text-decoration: underline; text-underline-offset: 0.2em;
}
.rl-pb-table--queue .rl-pb-link { margin-inline-start: 0; display: flex; }

.rl-pb-ig, .rl-pb-report { min-width: 0; }

/* Сообщение «Нет связи с Instagram…» в очереди: текст и кнопки в ряд, кнопки не меньше касания. */
.rl-pb-notice { flex-wrap: wrap; }
.rl-pb-notice__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }

/* ---------- Окно «Опубликовать вручную» (вне .rl-pb: окно живёт в <dialog>) ---------- */
.rl-pb-m { display: grid; gap: var(--space-4); min-width: 0; }
.rl-pb-m [hidden] { display: none; }
.rl-pb-m__intro, .rl-pb-m__note { 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-pb-m__note[data-tone="warn"] { color: var(--color-warn-text); }
.rl-pb-m__intro { font-size: var(--text-ui-size); line-height: var(--text-ui-line); }
.rl-pb-m__step { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-panel); box-shadow: var(--shadow-ring); }
.rl-pb-m__h { margin: 0; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); }
.rl-pb-m__row { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.rl-pb-m__btn { min-height: var(--size-touch-min); justify-content: center; text-decoration: none; }
.rl-pb-m__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); color: var(--color-ink); overflow-wrap: anywhere; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rl-pb-m__text {
  box-sizing: border-box; width: 100%; min-height: calc(var(--size-touch-min) * 2); padding: var(--space-3); resize: vertical;
  color: var(--color-ink); background: var(--color-bg2); border: 0; border-radius: var(--radius-ctl); box-shadow: var(--shadow-ring);
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.rl-pb-m__label { color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rl-pb-m__input { box-sizing: border-box; width: 100%; min-height: var(--size-touch-min); }
.rl-pb-m__result {
  --dot: var(--color-ink3);
  display: flex; align-items: baseline; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4);
  color: var(--color-ink); background: var(--color-bg2); border-radius: var(--radius-ctl); box-shadow: var(--shadow-ring);
  overflow-wrap: anywhere; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.rl-pb-m__result::before { content: ""; flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--dot); }
.rl-pb-m__result[data-tone="ok"] { --dot: var(--color-dot-ok); }
.rl-pb-m__result[data-tone="warn"] { --dot: var(--color-warn); }
.rl-pb-m__result[data-tone="danger"] { --dot: var(--color-danger); }

/* ---------- Узкий экран: строки становятся карточками ---------- */
@media (max-width: 40rem) {
  .rl-pb-table, .rl-pb-table tbody, .rl-pb-tr, .rl-pb-td { display: block; }
  .rl-pb-thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rl-pb-tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
  .rl-pb-table tbody tr:last-child { border-bottom: 0; }
  .rl-pb-td { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: var(--space-2); padding-inline: 0; border-bottom: 0; }
  .rl-pb-td:empty { display: none; }
  .rl-pb-td::before { content: attr(data-label); color: var(--color-ink2); font-size: var(--text-caption-size); }
  .rl-pb-td > .ui-chip, .rl-pb-td > .rl-pb-trial, .rl-pb-td > .rl-pb-err, .rl-pb-td > .rl-pb-link { grid-column: 2; margin-inline-start: 0; justify-self: start; }
  .rl-pb .rl-pb-plan.tile, .rl-pb .rl-pb-queue.tile { padding: var(--space-4); }
  .rl-pb-td > .btn, .rl-pb-td > .rl-pb-rowacts { grid-column: 2; justify-self: stretch; }
  .rl-pb-rowacts .btn { flex: 1 1 10rem; justify-content: center; }
  .rl-pb-notice__acts, .rl-pb-notice__acts .btn { width: 100%; }
  .rl-pb-result > .btn { width: 100%; justify-content: center; }
  .rl-pb-m__row .btn { flex: 1 1 100%; }
  .rl-pb-acts { width: 100%; }
  .rl-pb-acts .btn { flex: 1 1 10rem; justify-content: center; }
  .rl-pb-off > .btn { width: 100%; justify-content: center; }
}