/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Блоки подэкрана «Публикации»: «Итоги публикаций» (modules-reels-publish-report.js, -stats.js) и «Instagram» (modules-reels-publish-ig.js).
   Значения — только из tokens.css, размеры в rem, обе темы через переменные. Плашки — кольцо --shadow-ring вместо рамки (макет b2), отступ как у карточек;
   победитель — точка и серый текст, без цветных заливок; числа — Geist Mono (классы rl-st-num). Чипы и кнопки — из kit.
   Итоги: две колонки на широком экране (график и «Лучший ролик»), таблица роликов; до 60rem строки таблицы становятся карточками, текст не шире ~68 знаков. Подключается из index.html. */

.rl-pub-h { margin: 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-pub-note { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; max-width: 68ch; }
.rl-pub-note[hidden] { display: none; }
.rl-pub-empty { margin: 0; color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); max-width: 68ch; }
.rl-pub-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Плашка: белая поверхность, рамка 1 px вместо кольца-тени, отступ карточки. */
.tile.rl-pub-report, .tile.rl-pub-ig__card {
  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-pub-report { display: grid; gap: var(--space-4); min-width: 0; align-content: start; container-type: inline-size; }
.rl-pub-report[data-folded="true"] { gap: 0; }
.rl-pub-rep-body { display: grid; gap: var(--space-4); min-width: 0; }
.rl-pub-rep-body[hidden] { display: none; }
.rl-pub-h--fold { min-width: 0; }
.rl-pub-fold {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); box-sizing: border-box; width: 100%; min-height: var(--size-touch-min);
  margin: 0; padding: 0; background: transparent; border: 0; border-radius: var(--radius-ctl); color: inherit; font: inherit; letter-spacing: inherit; text-align: start; cursor: pointer;
}
.rl-pub-fold__t { min-width: 0; overflow-wrap: anywhere; }
.rl-pub-fold__ic {
  flex: none; box-sizing: border-box; width: var(--space-2); height: var(--space-2); margin-inline-end: var(--space-1);
  border-inline-end: var(--size-focus-width) solid var(--color-ink2); border-block-end: var(--size-focus-width) solid var(--color-ink2); transform: rotate(45deg); transition: transform var(--duration-fast) var(--ease-out);
}
.rl-pub-fold[aria-expanded="false"] .rl-pub-fold__ic { transform: rotate(-45deg); }
.rl-pub-fold:hover .rl-pub-fold__ic { border-color: var(--color-ink); }

/* ---------- Итоги: уведомления вместо данных ---------- */
.rl-pub-notice { align-items: flex-start; }
.rl-pub-notice > .ic { flex: none; margin-top: var(--space-1); }
.rl-pub-notice__b { flex: 1 1 16rem; display: grid; gap: var(--space-1); min-width: 0; max-width: 60ch; }
.rl-pub-notice__t { 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); overflow-wrap: anywhere; }
.rl-pub-notice__d { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.rl-pub-notice__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.rl-pub-notice .btn { min-height: var(--size-touch-min); justify-content: center; text-decoration: none; }

/* Окно выбора проекта перед подключением Instagram (общий экран «Публикации»). */
.rl-pub-pick { display: grid; gap: var(--space-3); min-width: 0; }
.rl-pub-pick__sel { min-height: var(--size-touch-min); max-width: 100%; }

/* ---------- Итоги: дашборд ---------- */
.rl-st { display: grid; gap: var(--space-6); min-width: 0; }
.rl-st-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-st-empty, .rl-st-note { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; max-width: 68ch; }
.rl-st-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.rl-st-link {
  display: inline-flex; align-items: center; min-height: var(--size-touch-min); color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
  text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; transition: color var(--duration-fast) var(--ease-out);
}
.rl-st-link:hover { color: var(--color-ink); }

/* Итоги за всё время. */
.rl-st-top { display: grid; gap: var(--space-3); min-width: 0; }
.rl-st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; min-width: 0; }
.rl-st-tile { display: grid; gap: var(--space-1); align-content: start; min-width: 0; margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface-inner); border-radius: var(--radius-ctl); }
.rl-st-tile__l { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.rl-st-tile__v { margin: 0; color: var(--color-ink); font-weight: var(--text-number-lg-weight); font-size: var(--text-h2-size); line-height: var(--text-number-lg-line); letter-spacing: var(--text-number-lg-track); overflow-wrap: anywhere; }

/* График и лучший ролик. */
.rl-st-mid { display: grid; gap: var(--space-6); min-width: 0; align-items: start; }
.rl-st-best { display: grid; gap: var(--space-1); align-content: start; min-width: 0; padding: var(--space-4); background: var(--surface-inner); border-radius: var(--radius-ctl); }
.rl-st-best > p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rl-st-best__k { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-st-best__t { color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); }
.rl-st-best__v { color: var(--color-ink); font-weight: var(--text-number-lg-weight); font-size: var(--text-h2-size); line-height: var(--text-number-lg-line); }
.rl-st-best .rl-st-link { justify-self: start; }
.rl-st-unit { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }

.rl-st-chart { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.rl-st-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-width: 0; }
.rl-st-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.rl-st-pill {
  min-height: var(--size-touch-min); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--surface-inner); color: var(--color-ink2); cursor: pointer;
  font: var(--text-button-weight) var(--text-ui-size)/var(--text-button-line) var(--font-sans); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.rl-st-pill:hover { color: var(--color-ink); }
.rl-st-pill[aria-pressed="true"] { background: var(--color-dark); color: var(--color-on-dark); }
.rl-st-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); min-width: 0; }
.rl-st-y { display: flex; flex-direction: column; justify-content: space-between; height: 11rem; text-align: end; color: var(--color-ink3); font-weight: var(--text-caption-weight); font-size: var(--text-caption-size); line-height: var(--text-caption-line); }
.rl-st-area { position: relative; height: 11rem; min-width: 0; border-radius: var(--radius-xs); }
.rl-st-lines { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.rl-st-lines > span { display: block; height: 0; border-top: 1px solid var(--color-line); }
.rl-st-bars { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 0.125rem; }
.rl-st-col { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.rl-st-bar { display: block; width: 70%; max-width: var(--space-6); height: var(--h, 0%); background: var(--color-acc); border-radius: var(--space-1) var(--space-1) 0 0; transition: opacity var(--duration-fast) var(--ease-out); }
.rl-st-bar[data-zero="true"] { background: transparent; }
.rl-st-area:has(.rl-st-col[data-active="true"]) .rl-st-bar { opacity: 0.45; }
.rl-st-area:has(.rl-st-col[data-active="true"]) .rl-st-col[data-active="true"] .rl-st-bar { opacity: 1; }
.rl-st-x { grid-column: 2; display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-ink3); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-st-tip {
  position: absolute; top: 0; left: var(--x, 0); z-index: 1; display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-ring);
  background: var(--color-panel2); border-radius: var(--radius-ctl); pointer-events: none; white-space: nowrap; transform: translateX(var(--space-3));
}
.rl-st-tip[hidden] { display: none; }
.rl-st-tip[data-side="left"] { transform: translateX(calc(-100% - var(--space-3))); }
.rl-st-tip__d { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-st-tip__v { color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rl-st-fold__s { display: inline-flex; align-items: center; min-height: var(--size-touch-min); cursor: pointer; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-st-fold[open] > .rl-st-fold__s { margin-bottom: var(--space-2); }
.rl-st-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius-ctl); border: 1px solid var(--color-line); }
.rl-st-mini { width: 100%; border-collapse: collapse; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-st-mini th, .rl-st-mini td { padding: var(--space-2) var(--space-3); text-align: start; border-bottom: 1px solid var(--color-line); color: var(--color-ink); }
.rl-st-mini thead th { color: var(--color-ink2); font-weight: var(--weight-regular); }
.rl-st-mini tbody th { font-weight: var(--weight-regular); }
.rl-st-mini td { text-align: end; }
.rl-st-mini thead th:not(:first-child) { text-align: end; }
.rl-st-mini tr:last-child > * { border-bottom: 0; }
.rl-st-mini [data-winner="true"] { color: var(--color-ok-text); }

/* Таблица роликов. */
.rl-st-rows { display: grid; gap: var(--space-3); min-width: 0; }
.rl-st-tools { display: none; }
.rl-st-table { width: 100%; border-collapse: collapse; font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.rl-st-th, .rl-st-td { padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--color-line); overflow-wrap: anywhere; }
.rl-st-th { padding-block: 0; }
.rl-st-th--m, .rl-st-td--m { text-align: end; padding-inline: var(--space-3) 0; }
.rl-st-td--m { font-size: var(--text-mono-size); color: var(--color-ink); white-space: nowrap; }
.rl-st-td--date { color: var(--color-ink2); white-space: nowrap; }
.rl-st-sort {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--size-touch-min); max-width: 100%; padding: 0; background: transparent; border: 0; cursor: pointer;
  color: var(--color-ink2); text-align: start; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
}
.rl-st-sort:hover, .rl-st-sort[data-dir] { color: var(--color-ink); }
.rl-st-sort[data-dir="asc"]::after { content: "\2191"; }
.rl-st-sort[data-dir="desc"]::after { content: "\2193"; }
.rl-st-th--m .rl-st-sort { justify-content: flex-end; }
.rl-st-th--link { width: 1%; }
.rl-st-tr[data-open="true"] { cursor: pointer; }
.rl-st-tr[data-open="true"]:hover { background: var(--color-bg2); }
.rl-st-tr:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: calc(var(--size-focus-width) * -1); }
.rl-st-reel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.rl-st-reel__t { min-width: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.rl-st-reel__v { color: var(--color-ink2); font-size: var(--text-caption-size); }
.rl-st-more {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer;
  color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); text-decoration: underline; text-underline-offset: 0.2em;
}
.rl-st-more:hover { color: var(--color-ink); }
.rl-st-td--title .rl-st-more { display: flex; }
.rl-st-td--reason { color: var(--color-ink2); }
.rl-st-reason { display: inline-flex; align-items: baseline; gap: var(--space-2); max-width: 68ch; overflow-wrap: anywhere; font-size: var(--text-caption-size); }
.rl-st-reason::before { content: ""; flex: none; align-self: center; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-ink3); }
.rl-st-td--link { text-align: end; padding-inline: var(--space-4) 0; white-space: nowrap; }
.rl-st-drow > td { padding: var(--space-4); background: transparent; border: 1px solid var(--color-line); border-radius: var(--radius-ctl); }
.rl-st-detail { display: grid; gap: var(--space-4); min-width: 0; }
.rl-st-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); margin: 0; }
.rl-st-dl__i { display: grid; gap: var(--space-1); min-width: 0; }
.rl-st-dl dt { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rl-st-dl dd { margin: 0; color: var(--color-ink); }
.rl-st-cmp { display: grid; gap: var(--space-2); min-width: 0; }
.rl-st-cmp__h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }

@container (min-width: 50rem) {
  .rl-st-mid[data-best="true"] { grid-template-columns: minmax(0, 1fr) 16rem; }
}

/* Пока плашка уже 52rem (на телефоне и планшете, в том числе при открытом меню), строки таблицы — карточки: название и дата сверху,
   показатели сеткой, ссылка внизу. Шапка скрыта, сортировка — списком. */
@container (max-width: 52rem) {
  .rl-st-tools { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); }
  .rl-st-tools__l { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
  .rl-st-sel { min-width: 0; min-height: var(--size-touch-min); cursor: pointer; text-overflow: ellipsis; }
  .rl-st-dir { min-height: var(--size-touch-min); }
  .rl-st-table, .rl-st-table > tbody, .rl-st-table > tbody > tr, .rl-st-table > tbody > tr > td { display: block; }
  .rl-st-table > tbody { display: grid; gap: var(--space-3); }
  .rl-st-table .rl-st-thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rl-st-table .rl-st-tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-4); background: var(--surface-inner); border-radius: var(--radius-ctl); }
  .rl-st-table .rl-st-tr[data-open="true"]:hover { background: var(--surface-inner); }
  .rl-st-table .rl-st-td { padding: 0; border-bottom: 0; min-width: 0; }
  .rl-st-table .rl-st-td--title, .rl-st-table .rl-st-td--date, .rl-st-table .rl-st-td--reason, .rl-st-table .rl-st-td--link { grid-column: 1 / -1; text-align: start; }
  .rl-st-table .rl-st-td--date::before { content: attr(data-label) ": "; }
  .rl-st-table .rl-st-td--m { display: grid; gap: var(--space-1); align-content: start; text-align: start; font-size: var(--text-ui-size); }
  .rl-st-table .rl-st-td--m::before { content: attr(data-label); color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
  .rl-st-table .rl-st-drow { display: block; margin-top: calc(var(--space-3) * -1); }
  .rl-st-table .rl-st-drow > td { padding: var(--space-4); background: transparent; border: 1px solid var(--color-line); }
}
@container (max-width: 30rem) {
  .rl-st-table .rl-st-tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-st-tools { grid-template-columns: minmax(0, 1fr) auto; }
  .rl-st-tools__l { grid-column: 1 / -1; }
  .rl-st-tile { padding: var(--space-3); }
  .rl-st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-pub-notice__acts, .rl-pub-notice__acts .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-pub-fold__ic, .rl-st-bar { transition: none; }
}

/* ---------- Instagram ---------- */
.rl-pub-ig { display: grid; gap: var(--tile-gap); min-width: 0; align-content: start; }
.rl-pub-ig__card { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.rl-pub-ig__chip { min-width: 0; }
.rl-pub-ig__chip .ui-chip { white-space: normal; }
.rl-pub-ig__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.rl-pub-ig__row .btn { min-height: var(--size-touch-min); }
.rl-pub-ig .btn[hidden] { display: none; }
.rl-pub-ig > .btn { justify-self: start; min-height: var(--size-touch-min); }
/* Повторить и «Опубликовать вручную» при ошибке чтения (в том числе «нет связи с Instagram»). */
.rl-pub-ig__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.rl-pub-ig__acts:not(:has(.btn:not([hidden]))) { display: none; }
.rl-pub-ig__acts .btn { min-height: var(--size-touch-min); }
.rl-pub-ig__keys { min-width: 0; }
.rl-pub-ig__keys .btn, .rl-pub-ig__keys .input { min-height: var(--size-touch-min); }

@media (max-width: 30rem) {
  .tile.rl-pub-report, .tile.rl-pub-ig__card { padding: var(--space-4); }
  .rl-pub-ig__acts, .rl-pub-ig__acts .btn { width: 100%; }
  .rl-pub-ig__acts .btn { justify-content: center; }
  .rl-pub-ig__row .btn { width: 100%; justify-content: center; }
}