/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Панель «Темы» (articles-topics-panel.js): утверждение тем на неделю и месяц. Классы atp-, значения — только токены, размеры в rem.
   Телефон (390) первым: всё в одну колонку, кнопки на всю ширину, касания не ниже --size-touch-min; с 48rem действия и статус встают в ряд. */

.atp { display: grid; gap: var(--space-5); align-content: start; min-width: 0; color: var(--color-ink); }
.atp[aria-busy="true"] { cursor: progress; }
.atp [hidden] { display: none; }

/* ---------- Шапка и переключатель периода ---------- */
.atp-head { display: grid; gap: var(--space-2); min-width: 0; }
.atp-title { margin: 0; font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); }
.atp-title:focus-visible, .atp-period__t:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); border-radius: var(--radius-xs); }
.atp-lead { margin: 0; color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--text-ui-family); overflow-wrap: anywhere; }
.atp-bar { display: grid; gap: var(--space-3); min-width: 0; }
.atp-seg, .atp-navs { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.atp-per, .atp-nav { flex: 1 1 0; min-height: var(--size-touch-min); }
.atp-per[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-panel); color: var(--color-ink); font-weight: var(--weight-medium); }
.atp .btn[aria-disabled="true"] { cursor: not-allowed; }
.atp .btn:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }

/* ---------- Итог действия (live-область над списком) ---------- */
.atp-result { margin: 0; color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--text-ui-family); overflow-wrap: anywhere; }
.atp-result:empty { display: none; }
.atp-result[data-tone="ok"] { color: var(--color-ink); }
.atp-result[data-tone="warn"] { color: var(--color-danger-text); }

/* ---------- Период ---------- */
.atp-body { display: grid; gap: var(--space-4); min-width: 0; }
.atp-content { display: grid; gap: var(--space-4); min-width: 0; }
.atp-period { display: grid; gap: var(--space-2); min-width: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-line); }
.atp-period__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-width: 0; }
.atp-period__t { margin: 0; font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); overflow-wrap: anywhere; }
.atp-prog, .atp-until, .atp-done { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-num); font-variant-numeric: tabular-nums; }
.atp-done { font-family: var(--font-sans); }
.atp-acts { display: grid; gap: var(--space-3); min-width: 0; }
.atp-act { width: 100%; white-space: normal; text-align: center; }

/* ---------- Список тем: тонкие линии вместо рамок ---------- */
.atp-list { display: grid; margin: 0; padding: 0; list-style: none; min-width: 0; }
.atp-row { display: grid; gap: var(--space-2); min-width: 0; padding-block: var(--space-4); border-top: 1px solid var(--color-line); }
.atp-row:first-child { border-top: 0; padding-top: 0; }
.atp-row[data-state="off"] .atp-row__t { color: var(--color-ink3); text-decoration: line-through; }
.atp-row__main { display: grid; gap: var(--space-1); min-width: 0; }
.atp-row__t { margin: 0; font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--text-ui-strong-family); overflow-wrap: anywhere; }
.atp-row__m { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-num); font-variant-numeric: tabular-nums; }
.atp-q { overflow-wrap: anywhere; min-width: 0; }
.atp-row__s { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.atp-note { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- Загрузка, ошибка, пусто ---------- */
.atp-state { display: grid; gap: var(--space-3); justify-items: start; margin: 0; color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--text-ui-family); }
.atp-err { margin: 0; color: var(--color-danger-text); overflow-wrap: anywhere; }
.atp-empty { display: grid; gap: var(--space-1); }
.atp-empty__t { margin: 0; font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--text-ui-strong-family); }
.atp-empty__p { margin: 0; color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--text-ui-family); overflow-wrap: anywhere; }

/* ---------- Планшет и ширина: действия и статус встают в ряд ---------- */
@media (min-width: 48rem) {
  .atp-bar { grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
  .atp-per, .atp-nav { flex: 0 0 auto; }
  .atp-acts { display: flex; flex-wrap: wrap; }
  .atp-act { width: auto; }
  .atp-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-6); }
  .atp-row__s { justify-content: flex-end; text-align: end; }
}

@media (prefers-reduced-motion: reduce) {
  .atp .btn { transition: none; }
}