/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
@import url("articles-editor.css");
/* Страница статьи (articles-review.js): шапка с датой, знаками, запросом и кнопками, текст, правка, проверка текста, комментарий агенту, версии. Классы arv-.
   Графитовая тема на токенах пульта: вместо рамок — мягкое свечение (тень и --color-acc-glow). Плитки — tile() из kit.
   Единственная оранжевая кнопка шапки — главное действие по состоянию публикации (.btn--accent); остальные вторичные.
   Только токены, размеры в rem; сначала экран 390 (кнопки шапки столбцом на всю ширину), шире — на 48rem. Подключение — index.html, после modules-articles.css. */

.arv { display: grid; gap: var(--tile-gap); min-width: 0; }
.arv[aria-busy="true"] { cursor: progress; }
.arv [hidden] { display: none; }
.arv-slot { display: grid; min-width: 0; }

/* ---------- Живое поле результата ---------- */
.arv-msg { min-height: 0; margin: 0 0 var(--space-3); color: var(--color-ink2); overflow-wrap: anywhere; }
.arv-msg:empty { display: none; }
.arv-msg[data-tone="ok"] { color: var(--color-ink); }
.arv-msg[data-tone="warn"] { color: var(--color-warn-text); }
.arv-msg:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); border-radius: var(--radius-xs); }

/* ---------- Шапка: заголовок и сведения слева, кнопки справа ---------- */
.arv-head { display: grid; gap: var(--space-3); min-width: 0; }
.arv-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; min-width: 0; }
.arv-bar__t { display: grid; gap: var(--space-3); min-width: 0; }
.arv-title { margin: 0; overflow-wrap: anywhere; }
.arv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.arv-meta .caption { overflow-wrap: anywhere; }
.arv-bar__act { display: grid; gap: var(--space-2); min-width: 0; }
.arv-bar__cta { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.arv-bar__cta .btn { width: 100%; justify-content: center; }
.arv-bar__hint { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; }

/* ---------- Плитки ---------- */
.arv-tile { display: grid; gap: var(--space-4); align-content: start; box-shadow: var(--shadow-sm), 0 0 2rem -.875rem var(--color-acc-glow); }
.arv-tile__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.arv-h { margin: 0; font-family: var(--font-head); font-weight: var(--weight-medium); font-size: var(--text-h3-size); }
.arv-rework { box-shadow: var(--shadow-sm); }
.arv-rework[data-state="ceiling"], .arv-rework[data-state="failed"] { box-shadow: var(--shadow-attn-glow); }

/* Текст статьи: читаемая мера, длинные слова и ссылки переносятся, прокрутка только у таблиц и кода (их рамка уже в md__). */
.arv-prose { display: grid; gap: var(--space-3); max-width: var(--layout-measure); min-width: 0; color: var(--color-ink); font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--font-sans); overflow-wrap: anywhere; }
.arv-prose:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); border-radius: var(--radius-xs); }

/* ---------- Редактор текста (внутренности — articles-editor.css) ---------- */
.arv-editor { min-width: 0; }

/* ---------- Поля ввода ---------- */
.arv-ta {
  display: block; width: 100%; min-height: calc(var(--size-control) * 1.75); padding: var(--space-3) var(--space-4);
  border: 0; border-radius: var(--radius-ctl); background: var(--color-panel2); color: var(--color-ink); box-shadow: var(--shadow-sm);
  font: var(--weight-regular) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); resize: vertical;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.arv-ta::placeholder { color: var(--color-ink3); opacity: 1; }
.arv-ta:hover { box-shadow: var(--shadow-sm), 0 0 1.125rem -.5rem var(--color-acc-glow); }
.arv-ta:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); box-shadow: var(--shadow-sm), 0 0 1.75rem -.5rem var(--color-acc-glow); }
.arv-ta[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--color-danger); }
.arv-err { margin: 0; color: var(--color-danger-text); overflow-wrap: anywhere; }

/* ---------- Кнопки: касания не меньше 44 px ---------- */
.arv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.arv-acts .btn, .arv-ver .btn, .arv-bar__cta .btn, .arv-tile__h .btn { min-height: var(--size-touch-min); }
.arv-acts .btn { flex: 1 1 100%; justify-content: center; }
.arv .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.arv .btn:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }

/* ---------- Проверка текста ---------- */
.arv-lint-tile { box-shadow: var(--shadow-sm), var(--shadow-attn-glow); }
.arv-lint__l { display: grid; gap: var(--space-1); padding-left: var(--space-5); list-style: disc outside; }

/* ---------- Чат правки (articles-chat.js монтируется в .arv-chat) ---------- */
.arv-chat { min-width: 0; }

/* ---------- Версии ---------- */
.arv-vers { display: grid; gap: 0; }
.arv-ver { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); min-width: 0; }
.arv-ver + .arv-ver { border-top: 1px solid var(--color-line); }
.arv-ver__t { display: grid; gap: var(--space-1); min-width: 0; flex: 1 1 12rem; }
.arv-ver__t .caption { overflow-wrap: anywhere; }

.arv-empty { max-width: none; }

@media (min-width: 48rem) {
  .arv-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .arv-bar__act { justify-items: end; }
  .arv-bar__cta { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .arv-bar__cta .btn { width: auto; min-width: 10rem; }
  .arv-bar__hint { text-align: right; }
  .arv-acts .btn { flex: 0 1 auto; min-width: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  .arv *, .arv *::before, .arv *::after { transition: none; animation: none; }
}