/* ============================================================
   ARENDA DESIGN SYSTEM · COMPONENTS  v1.1  (каркас v1, 09.09.2026)
   Требует tokens.css. Классы с префиксом .ar-

   Каркас (design_v1 §3.3): документ НЕ прокручивается. Прокручивается
   внутренний контейнер .ar-scroll внутри оболочки .ar-app (fixed, inset:0).
   Панель навигации .ar-nav и .ar-actionbar — СОСЕДИ скроллера, не fixed,
   без backdrop-filter и transform: на iOS им нечего «отлеплять».
   ============================================================ */

/* ---------- DOCUMENT / SHELL ---------- */
html, body {
  height: 100%;
  overflow: hidden;              /* скроллится .ar-scroll, а не документ */
  overflow-x: hidden;
  overscroll-behavior: none;
}
body.ar-screen {
  background: var(--ar-screen-solid);   /* плоский цвет: ни градиента, ни attachment, ни 100dvh */
  color: var(--ar-on-blue);
  font-family: var(--ar-font);
  -webkit-font-smoothing: antialiased;
}
html:has(body.ar-screen) { background: var(--ar-screen-solid); }

.ar-app {
  position: fixed; inset: 0;            /* = видимый экран standalone; safe-area учитываем внутри */
  height: var(--ar-vvh, 100%);          /* JS подставляет высоту visualViewport при клавиатуре */
  display: flex; flex-direction: column;
  background: var(--ar-screen-solid);
}
.ar-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-padding-bottom: 96px;          /* фокус на поле не прячется под баром */
  scroll-padding-top: 12px;
}
.ar-scroll > .container {
  padding: calc(8px + var(--ar-safe-top, 0px)) var(--ar-screen-pad) 24px;  /* отступ под панель не нужен — панель снаружи */
  max-width: 640px;
  margin: 0 auto;
}
/* Историческое имя .ar-screen (раньше — оболочка с padding); сейчас только цвет/шрифт */
.ar-screen::before { content: none; }

/* ---------- ACTION BAR (docked, снаружи скроллера) ---------- */
.ar-actionbar {
  flex: none;
  background: var(--ar-screen-solid);
  border-top: 1px solid var(--ar-line);
  padding: 10px var(--ar-screen-pad);
}
.ar-actionbar[hidden] { display: none; }
.ar-actionbar__inner {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  max-width: 640px; margin: 0 auto;
}
.ar-actionbar__meta { font: 500 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink-2); margin-right: auto; white-space: nowrap; }
.ar-actionbar .ar-btn--primary:disabled { opacity: .45; box-shadow: none; cursor: default; }
@media (max-width: 700px) {
  .ar-actionbar__inner .ar-btn--primary { flex: 1 1 auto; }
}
@media (min-width: 701px) {
  .ar-actionbar { padding: 12px 32px; }
}
@media (min-width: 900px) {
  .ar-actionbar__inner { max-width: 1180px; }
}

/* ---------- TYPO ---------- */
.ar-hero {
  font-size: var(--ar-fs-hero); font-weight: 700; letter-spacing: var(--ar-ls-hero); line-height: var(--ar-lh-tight);
  margin: 0; color: var(--ar-on-blue);
  overflow-wrap: anywhere;               /* «14/2025/N/1 (Электролитный)» больше не вылезает за экран */
}
.ar-hero--sm  { font-size: var(--ar-fs-hero2); }
@media (max-width: 700px) {
  .ar-hero     { font-size: clamp(30px, 9.5vw, 44px); }
  .ar-hero--sm { font-size: clamp(24px, 7.5vw, 38px); }
}
.ar-hero-label{ font-size: var(--ar-fs-sub); font-weight: 500; color: var(--ar-on-blue-2); margin-bottom: 6px; }
.ar-hero-sub  { font: 400 var(--ar-fs-sub)/1.5 var(--ar-font); color: var(--ar-on-blue-2); margin-top: 6px; }
.ar-title     { font-size: var(--ar-fs-title); font-weight: 600; }
.ar-muted     { color: var(--ar-on-blue-2); }
.ar-muted-3   { color: var(--ar-ink-3); }

/* Utility-классы типографики (замена инлайн font: ≤ 11.5px) */
.ar-t-body { font: 400 var(--ar-fs-body)/1.45 var(--ar-font); }
.ar-t-sub  { font: 400 var(--ar-fs-sub)/1.4  var(--ar-font); color: var(--ar-ink-2); }
.ar-t-cap  { font: 400 var(--ar-fs-cap)/1.4  var(--ar-font); color: var(--ar-ink-3); }
.ar-t-cap b, .ar-t-sub b { font-weight: 600; }
.ar-num    { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Подпись только для скринридера (шапка колонки действий и т.п.) */
.ar-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Разделитель «·» между кусками подписи. Точка живёт в ::before СЛЕДУЮЩЕГО
   куска и приклеена к нему NBSP-ом: перенос возможен только перед точкой,
   поэтому «·» не остаётся висеть в конце строки (design_v2 §2.4, §3 Р6).
   Длинные куски при этом переносятся как обычно. */
.ar-sep + .ar-sep::before { content: " ·\00a0"; color: var(--ar-ink-3); }

/* Заголовок секции вне карточки (h2) */
.ar-section {
  font: 600 var(--ar-fs-cap) var(--ar-font); color: var(--ar-on-blue-2);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 6px 2px 10px; margin: 0;
}
/* Заголовок карточки (h2 внутри .ar-card-*) */
.ar-card__title { font: 600 15px/1.3 var(--ar-font); color: var(--ar-ink); margin: 0; }
.ar-card__title--caps { font: 600 var(--ar-fs-cap) var(--ar-font); text-transform: uppercase; letter-spacing: .04em; }
.ar-card__sub { font: 400 var(--ar-fs-sub)/1.4 var(--ar-font); color: var(--ar-ink-3); margin-top: 2px; }
.ar-card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }

/* Ключ–значение */
.ar-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.ar-kv__label {
  font: 600 var(--ar-fs-cap)/1.3 var(--ar-font); color: var(--ar-ink-3);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
}
.ar-kv__value { font: 500 var(--ar-fs-body)/1.35 var(--ar-font); color: var(--ar-ink); overflow-wrap: anywhere; }
.ar-kv__value--num { font-variant-numeric: tabular-nums; }
.ar-kv__full { grid-column: 1 / -1; }

/* Статы (полоса стеклянных карточек). На 390 px — 2 колонки, не 3. */
.ar-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ar-stat { min-width: 0; }
.ar-stat__label {
  font: 600 var(--ar-fs-cap)/1.3 var(--ar-font); color: var(--ar-ink-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.ar-stat__num {
  font: 700 20px/1.15 var(--ar-font); letter-spacing: -.01em; margin-top: 4px;
  white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ar-ink);
}
.ar-stat__num--sm { font-size: 16px; }
.ar-stat__sub { font: 400 var(--ar-fs-cap)/1.35 var(--ar-font); color: var(--ar-ink-3); margin-top: 2px; }

/* Заметка / инфобокс (без border-left: на скруглённой карточке он даёт «крючок») */
.ar-note {
  background: var(--ar-frost-bg-muted); border: 1px solid var(--ar-line);
  border-radius: 12px; padding: 10px 12px;
  font: 400 var(--ar-fs-sub)/1.5 var(--ar-font); color: var(--ar-ink-2);
}
.ar-note--warn   { background: rgba(208,152,42,.10); border-color: rgba(208,152,42,.28); color: var(--ar-warning-text); }
.ar-note--danger { background: rgba(217,83,74,.08);  border-color: rgba(217,83,74,.25);  color: var(--ar-danger-text); }
.ar-note--success{ background: var(--ar-green-soft);  border-color: var(--ar-green);      color: var(--ar-success-text); }
.ar-note svg.ar-icon { vertical-align: -4px; margin-right: 4px; }

/* Цветная кромка карточки вместо border-left (не искажается скруглением).
   Специфичность выше .ar-card-frost, чтобы перебить её box-shadow. */
.ar-card-frost.ar-card--edge-danger,  .ar-card--edge-danger  { box-shadow: var(--ar-shadow-card), inset 4px 0 0 var(--ar-danger-text); }
.ar-card-frost.ar-card--edge-warning, .ar-card--edge-warning { box-shadow: var(--ar-shadow-card), inset 4px 0 0 var(--ar-warning-text); }
.ar-card-frost.ar-card--edge-success, .ar-card--edge-success { box-shadow: var(--ar-shadow-card), inset 4px 0 0 var(--ar-success-text); }
.ar-card-frost.ar-card--edge-muted,   .ar-card--edge-muted   { box-shadow: var(--ar-shadow-card), inset 4px 0 0 var(--ar-ink-3); }
.ar-card-frost.ar-card--edge-accent,  .ar-card--edge-accent  { box-shadow: var(--ar-shadow-card), inset 4px 0 0 var(--ar-accent); }

/* Ряд действий */
.ar-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ar-actions--end { justify-content: flex-end; }
/* Лента чипов: прокручивается, край затухает — обрыв по границе больше не
   читается как сломанная вёрстка (design_v2 §3 Р4). */
.ar-actions--scroll {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px; margin: -4px -2px -8px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.ar-actions--scroll::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  /* На десктопе ленты переносятся, а не прокручиваются: места хватает, а
     спрятанный за краем фильтр («Не оплатили · 16») просто не находят. */
  .ar-actions--scroll {
    flex-wrap: wrap; overflow-x: visible;
    -webkit-mask-image: none; mask-image: none;
  }
}
/* «Прижать вправо» — только там, где строка заведомо помещается: на телефоне
   margin-left:auto уводил действие («Скопировать долги», «Экспорт CSV») за край ленты. */
.ar-actions__end { margin-left: auto; }
@media (max-width: 899px) {
  .ar-actions--scroll .ar-actions__end { margin-left: 0; }
}

/* Ссылка «назад» над hero */
.ar-back {
  display: inline-flex; align-items: center; gap: 2px; min-height: 40px;
  font: 500 var(--ar-fs-sub) var(--ar-font); color: var(--ar-on-blue-2); text-decoration: none;
  margin-left: -6px; padding: 0 8px 0 2px; border-radius: 999px;
}
.ar-back:hover { color: var(--ar-ink); background: rgba(26,25,23,.05); }

/* Пустое состояние */
.ar-empty { text-align: center; padding: 36px 20px; color: var(--ar-ink-2); }
.ar-empty .ar-iconsq { margin: 0 auto 10px; width: 48px; height: 48px; }
.ar-empty__title { font: 600 15px var(--ar-font); color: var(--ar-ink); }
.ar-empty__text  { font: 400 var(--ar-fs-sub)/1.5 var(--ar-font); color: var(--ar-ink-3); margin-top: 4px; }

/* ---------- CARDS ---------- */
.ar-card-glass {           /* кремовая панель (статы, hero-блоки) */
  background: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-r-card);
  padding: 13px;
  color: var(--ar-ink);
}
.ar-card-frost {           /* основная белая карточка */
  background: var(--ar-frost-bg);
  border-radius: var(--ar-r-card);
  padding: 14px;
  color: var(--ar-ink);
  box-shadow: var(--ar-shadow-card);
}
.ar-card-frost--muted { background: var(--ar-frost-bg-muted); box-shadow: var(--ar-shadow-card2); }
a.ar-card-frost { text-decoration: none; }

/* ============================================================
   BUTTONS v2 — DESIGN_v2_SPEC §2. Три вида, три размера, и всё.
     primary — ЧЁРНАЯ, ровно одна на экран (главное действие страницы);
     quiet   — белая с рамкой (вторичное действие, действия в строках);
     ghost   — прозрачная (стрелки периодов, «Скрыть», «Отмена»).
   Размеры: базовый 38px, --sm 32px, --lg 44px (docked-бар на телефоне).
   Запрещено: primary внутри строки таблицы или карточки списка.
   Имена .btn* оставлены синонимами: эталон (outputs/proto/proto.html)
   написан на них, разметка приложения — на .ar-btn*.
   ============================================================ */
.ar-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border: 1px solid transparent; border-radius: var(--ar-r-btn);
  background: transparent; color: var(--ar-ink);
  font: 500 14px/1 var(--ar-font); cursor: pointer;
  text-decoration: none; white-space: nowrap; box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.ar-btn--lg, .btn--lg { height: 44px; padding: 0 18px; border-radius: var(--ar-r-tile); font-size: 15px; }
.ar-btn--sm, .btn--sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: var(--ar-r-btn-sm); gap: 6px; }
.ar-btn--primary, .btn--primary { background: var(--ar-black); color: #fff; border-color: var(--ar-black); }
.ar-btn--primary:hover, .btn--primary:hover { background: #2e2b26; border-color: #2e2b26; }
.ar-btn--quiet, .btn--quiet,
.ar-btn--frosted {                              /* --frosted: историческое имя quiet */
  background: #fff; border-color: var(--ar-line); color: var(--ar-ink);
}
.ar-btn--quiet:hover, .btn--quiet:hover, .ar-btn--frosted:hover {
  background: var(--ar-frost-bg-muted); border-color: #d9d0be;
}
.ar-btn--ghost, .btn--ghost { background: transparent; border-color: transparent; color: var(--ar-ink); }
.ar-btn--ghost:hover, .btn--ghost:hover { background: rgba(26,25,23,.05); }
.ar-btn--danger { background: transparent; border-color: transparent; color: var(--ar-danger-text); }
.ar-btn--danger:hover { background: rgba(217,83,74,.08); }
.ar-btn--icon, .btn--icon { width: 38px; padding: 0; justify-content: center; }
/* Кратковременное «получилось» после копирования — вместо смены типа кнопки */
.ar-btn--ok { background: var(--ar-green); border-color: var(--ar-green); color: var(--ar-green-ink); }
.ar-btn--sm.ar-btn--icon, .btn--sm.btn--icon { width: 32px; }
/* Текстовая ссылка-действие с нормальной зоной касания (вместо подчёркнутых 11px) */
.ar-btn--link {
  background: none; border: 0; box-shadow: none;
  color: var(--ar-accent); min-height: 38px; height: auto; padding: 0 8px;
  font: 500 var(--ar-fs-sub) var(--ar-font); text-decoration: none;
  display: inline-flex; align-items: center;
}
.ar-btn--link:hover { text-decoration: underline; background: none; }
.ar-btn--link.ar-btn--link-muted { color: var(--ar-ink-2); }
.ar-btn:active, .btn:active { transform: translateY(1px); }
.ar-btn:disabled, .btn:disabled { opacity: .55; cursor: default; transform: none; }
/* display:inline-flex перебивает UA-правило [hidden]{display:none} — возвращаем */
.ar-btn[hidden], .ar-chip[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .ar-btn, .btn { transition: none; } }

/* Иконко-кнопка шапки (38px, тап-зона добивается margin'ами) */
.ar-iconbtn {
  width: 38px; height: 38px; border-radius: var(--ar-r-btn);
  background: var(--ar-frost-bg); color: var(--ar-ink);
  border: 1px solid var(--ar-line);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
}
.ar-iconbtn__dot {
  position: absolute; top: 7px; right: 8px; width: 6px; height: 6px;
  border-radius: 999px; background: var(--ar-warning);
}

/* ---------- CHIPS (фильтры) — §2 «Панель поиска и фильтров» ---------- */
.ar-chip, .chip {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 13px; border: 1px solid var(--ar-line); border-radius: var(--ar-r-btn);
  font: 500 13px/1 var(--ar-font); cursor: pointer;
  background: #fff; color: var(--ar-ink-2);
  text-decoration: none; box-sizing: border-box;
  transition: background .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ar-chip:hover, .chip:hover { background: var(--ar-frost-bg-muted); }
.ar-chip--active, .chip--on, .ar-chip[aria-pressed="true"] {
  background: var(--ar-green); border-color: transparent; color: var(--ar-green-ink); font-weight: 600;
}
.ar-chip:disabled { opacity: .5; cursor: default; }
.ar-chip .ar-icon { width: 16px; height: 16px; }
/* Счётчик в чипе: приглушён, цифры колонкой — «Долг 15», а не «Долг · 15» */
.ar-chip__n, .chip__n { opacity: .6; font-variant-numeric: tabular-nums; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .ar-chip, .chip { transition: none; } }

/* ---------- BADGES (статусы) ---------- */
.ar-badge {
  white-space: nowrap; display: inline-block;
  font: 600 var(--ar-fs-badge)/1 var(--ar-font);
  text-transform: uppercase; letter-spacing: .02em;
  padding: 4px 7px; border-radius: var(--ar-r-pill);
  font-variant-numeric: tabular-nums;
}
.ar-badge--paid    { color: var(--ar-success-text); background: var(--ar-green-soft); }
.ar-badge--partial { color: var(--ar-warning-text); background: rgba(208,152,42,.14); }
.ar-badge--debt    { color: var(--ar-danger-text);  background: rgba(217,83,74,.11); }
.ar-badge--active  { color: var(--ar-success-text); background: var(--ar-green-soft); }
.ar-badge--muted   { color: var(--ar-ink-2); background: var(--ar-track); }
/* Историческое имя: акцентный «долг»-бейдж */
.ar-badge--on-blue-debt {
  color: var(--ar-danger-text); background: rgba(217,83,74,.13);
  border: 1px solid rgba(217,83,74,.25);
}

/* ---------- PROGRESS ---------- */
.ar-progress { height: 6px; border-radius: 999px; background: var(--ar-track); overflow: hidden; }
.ar-progress--on-blue { height: 8px; background: rgba(26,25,23,.10); }
.ar-progress__fill { height: 100%; border-radius: 999px; background: var(--ar-success); transition: width .6s cubic-bezier(.4,0,.2,1); }
.ar-progress__fill--warn   { background: var(--ar-warning); }
.ar-progress__fill--danger { background: var(--ar-danger); }
.ar-progress__fill--white  { background: var(--ar-success); } /* историческое имя */

/* ---------- ICON SQUARE (плитки «Ещё», алерты) ---------- */
.ar-iconsq {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--ar-r-btn);
  display: flex; align-items: center; justify-content: center;
  background: var(--ar-glass-bg); color: var(--ar-ink-2);   /* базовый фон — иконка не «висит» */
  border: 1px solid var(--ar-glass-border);
}
.ar-iconsq--blue    { background: var(--ar-green-soft);  color: var(--ar-green-ink); border-color: transparent; }
.ar-iconsq--warning { background: rgba(208,152,42,.14); color: var(--ar-warning-text); border-color: transparent; }
.ar-iconsq--danger  { background: rgba(217,83,74,.12);  color: var(--ar-danger-text); border-color: transparent; }
.ar-iconsq--success { background: var(--ar-green-soft); color: var(--ar-success-text); border-color: transparent; }
.ar-iconsq--sm { width: 32px; height: 32px; }

/* ---------- LIST ROW (история платежей и т.п.) ---------- */
.ar-row { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ar-ink); }
.ar-row__body { flex: 1; min-width: 0; }
.ar-row__title { font-size: var(--ar-fs-sub); font-weight: 600; }
.ar-row__sub   { font-size: var(--ar-fs-cap); color: var(--ar-ink-3); }
.ar-row__num   { font-size: var(--ar-fs-sub); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-row__right { text-align: right; flex: none; }
.ar-row--line  { padding: 10px 0; border-bottom: 0.5px solid var(--ar-line); }
.ar-row--line:last-child { border-bottom: 0; }

/* ---------- BOTTOM NAV (5 вкладок, без FAB) ----------
   Сосед скроллера внутри .ar-app: position static, без backdrop/transform. */
.ar-nav {
  flex: none; position: static;
  margin: 8px 14px calc(10px + var(--ar-safe-bottom, 0px));
  height: 62px;
  background: #fff;
  border: 1px solid var(--ar-line);
  border-radius: var(--ar-r-pill);
  box-shadow: var(--ar-shadow-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
}
.ar-nav::before { content: none; }
.ar-nav__item {
  flex: 1; min-height: var(--ar-tap-min);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ar-ink-3); text-decoration: none;
  font: 500 var(--ar-fs-navlabel) var(--ar-font);
  background: none; border: 0; cursor: pointer;   /* сброс для <button> («Ещё») */
  border-radius: 999px; padding: 0 2px;
  -webkit-tap-highlight-color: transparent;
}
.ar-nav__item--active { color: var(--ar-accent); font-weight: 700; }
.kb-open .ar-nav { display: none; }              /* при открытой клавиатуре, как в нативных приложениях */

/* ---------- BOTTOM SHEET (fixed СНАРУЖИ .ar-app, без backdrop-filter) ---------- */
.ar-scrim { position: fixed; inset: 0; background: var(--ar-scrim); z-index: 60; }
.ar-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--ar-frost-bg);
  border-radius: var(--ar-r-sheet) var(--ar-r-sheet) 0 0;
  padding: 12px 14px calc(26px + var(--ar-safe-bottom, 0px));   /* 18px не оставляли места «Сгенерировать» */
  color: var(--ar-ink);
  box-shadow: var(--ar-shadow-sheet);
  max-height: calc(100% - 40px); overflow-y: auto;
}
.ar-sheet__handle { width: 38px; height: 5px; border-radius: 999px; background: #d9d2c3; margin: 0 auto 16px; }
.ar-sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ar-sheet__title { font: 600 17px var(--ar-font); margin: 0; }
.ar-sheet__close { background: #ece6da; color: var(--ar-ink-2); border-radius: 999px; width: 36px; height: 36px; }
.ar-sheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* min-width:auto у грид-элементов раздвигал колонку под неразрывное
   «Сгенерировать» — правые плитки уезжали за край на 390 px (design_v2 §3 Р1). */
.ar-sheet__grid > * { min-width: 0; }
.ar-sheet__tile {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border-radius: var(--ar-r-tile); padding: 10px;
  border: 1px solid var(--ar-line);
  box-shadow: 0 4px 14px rgba(70,58,34,.06);
  font: 600 12.5px/1.3 var(--ar-font); letter-spacing: -.01em; color: var(--ar-ink);
  min-height: var(--ar-tap-min); cursor: pointer; text-decoration: none; text-align: left;
}
/* «Сгенерировать» — самое длинное слово в шите: 34-px иконка и gap 9 дают ему
   влезть в 1fr-колонку целиком, anywhere остаётся страховкой на другие языки. */
.ar-sheet__tile .ar-iconsq { width: 34px; height: 34px; }
.ar-sheet__tile .ar-iconsq .ar-icon { width: 18px; height: 18px; }
.ar-sheet__tile > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ar-sheet__tile--active { background: var(--ar-green-soft); border-color: var(--ar-green); }
.ar-sheet__tile--wide { grid-column: 1 / -1; }
.ar-sheet__logout { width: 100%; margin-top: 14px; text-decoration: none; }
.ar-backrow { padding-top: 8px; }
/* Hero-блок страницы: label + h1 + подпись + действия */
.ar-hero-block { padding: 14px 0 18px; }
.ar-backrow + .ar-hero-block { padding-top: 4px; }
.ar-hero-block .ar-actions { margin-top: 14px; }

/* ---------- SEARCH ---------- §2: высота 38, фокус — зелёное кольцо */
.ar-search {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--ar-line);
  border-radius: var(--ar-r-btn); padding: 0 11px; height: 38px;
  transition: border-color .15s, box-shadow .15s;
}
.ar-search:focus-within { border-color: #c3b9a3; box-shadow: 0 0 0 3px rgba(207,230,174,.45); }
.ar-search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: 400 14px var(--ar-font); color: var(--ar-ink);
}
.ar-search input::placeholder { color: var(--ar-ink-3); }
@media (prefers-reduced-motion: reduce) { .ar-search { transition: none; } }

/* ---------- ICONS ---------- */
.ar-icon { width: 20px; height: 20px; stroke-width: 1.8; flex: none; }
.ar-icon--sm { width: 16px; height: 16px; }
.ar-icon--xs { width: 14px; height: 14px; }
.ar-icon--inline { vertical-align: -3px; }
.ar-icon--danger  { color: var(--ar-danger-text); }
.ar-icon--warning { color: var(--ar-warning-text); }
.ar-icon--muted   { color: var(--ar-ink-3); }
.ar-icon--success { color: var(--ar-success-text); }

/* ---------- FOCUS (единое кольцо для всех интерактивов) ---------- */
.ar-btn:focus-visible, .ar-chip:focus-visible, .ar-nav__item:focus-visible,
.ar-sheet__tile:focus-visible, a.ar-card-frost:focus-visible, .ar-row:focus-visible,
.ar-back:focus-visible, .ar-btn--link:focus-visible, nav.top a:focus-visible,
nav.top button:focus-visible, .ar-iconbtn:focus-visible, .ar-menu__btn:focus-visible {
  outline: 2px solid var(--ar-accent); outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ar-accent); outline-offset: 1px;
}

/* ============================================================
   RESPONSIVE VISIBILITY (integration with legacy app.css)
   Desktop: hide new bottom nav & sheet, keep legacy top nav.
   Mobile:  hide legacy top nav links, show new bottom nav & sheet.
   ============================================================ */

/* Default (desktop ≥ 701px): hide the mobile-only pieces */
.ar-nav, .ar-scrim, .ar-sheet { display: none; }

/* Bottom sheet default state (closed); overrides positional rules in base */
.ar-sheet {
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  pointer-events: none;
}
.ar-scrim {
  background: transparent;
  transition: background .22s ease;
  pointer-events: none;
}
.ar-sheet.open { transform: translateY(0); pointer-events: auto; }
.ar-scrim.open { background: var(--ar-scrim); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .ar-sheet, .ar-scrim { transition: none; }
}

/* ─── Desktop / tablet — wider layout ─── */
@media (min-width: 900px) {
  .ar-scroll > .container {
    max-width: 1180px;
    padding: 20px 32px 40px;
  }
  /* Hero can breathe a bit on wide screens */
  body.ar-screen .ar-hero      { font-size: 44px; }
  body.ar-screen .ar-hero--sm  { font-size: 34px; }
}

/* ─── Reusable desktop grids for cards ─── */
.ar-dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ar-dash-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .ar-dash-grid--2 { grid-template-columns: 1fr 1fr; }
  .ar-dash-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
  .ar-dash-grid--2-1 { grid-template-columns: 2fr 1fr; }
  /* Auto-fit for alert cards — collapses cleanly if some are absent */
  .ar-dash-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
  /* Карточка занимает столько, сколько в ней содержимого: stretch тянул все
     карточки до высоты самой длинной и оставлял под короткими ~430 px пустоты
     (приёмка design_final §3.4). */
  .ar-dash-grid > .ar-card-frost,
  .ar-dash-grid > .ar-card-glass { align-self: start; }
}

/* ---------- TOP NAV (desktop) на кремовом: sticky внутри скроллера ---------- */
body.ar-screen nav.top {
  background: var(--ar-screen-solid);
  border-bottom: 0.5px solid rgba(26,25,23,0.08);
  color: var(--ar-ink);
  padding: 12px 20px;
  flex-wrap: wrap;
}
body.ar-screen nav.top .brand {
  color: var(--ar-ink);
  font-weight: 700;
  letter-spacing: -.01em;
}
body.ar-screen nav.top .links { gap: 2px; flex-wrap: wrap; }
body.ar-screen nav.top .links a,
body.ar-screen nav.top .ar-menu__btn {
  color: var(--ar-ink-2);
  padding: 7px 12px;
  border-radius: var(--ar-r-btn);
  font-weight: 500;
  font-size: 13.5px;
  transition: background .15s, color .15s;
  background: none; border: 0; cursor: pointer; font-family: var(--ar-font);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
body.ar-screen nav.top .links a:hover,
body.ar-screen nav.top .ar-menu__btn:hover {
  color: var(--ar-ink);
  background: rgba(26,25,23,0.05);
}
body.ar-screen nav.top .links a.active,
body.ar-screen nav.top .ar-menu--active > .ar-menu__btn {
  color: var(--ar-ink);
  background: var(--ar-green);
  border: 1px solid var(--ar-green);
}
/* Разделитель между группами меню */
body.ar-screen nav.top .links .sep { width: 1px; height: 18px; background: var(--ar-line); margin: 0 6px; align-self: center; }
/* Выпадающие группы «Документы» / «Данные» (CSS-only: hover / focus-within) */
.ar-menu { position: relative; display: inline-flex; }
.ar-menu__list {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  min-width: 190px; padding: 6px;
  background: #fff; border: 1px solid var(--ar-line); border-radius: 14px;
  box-shadow: var(--ar-shadow-card);
}
.ar-menu:hover .ar-menu__list, .ar-menu:focus-within .ar-menu__list, .ar-menu.open .ar-menu__list { display: block; }
body.ar-screen nav.top .ar-menu__list a {
  display: flex; width: 100%; border-radius: 10px; padding: 8px 10px; box-sizing: border-box;
}
body.ar-screen nav.top .ar-menu__list a.active { background: var(--ar-green); border: 0; }
.ar-menu__btn .ar-icon { width: 14px; height: 14px; }

body.ar-screen nav.top .icon-btn,
body.ar-screen nav.top .ar-iconbtn {
  color: var(--ar-ink);
  border-color: var(--ar-line);
  background: #fff;
}
body.ar-screen nav.top .icon-btn:hover { background: var(--ar-frost-bg-muted); }
body.ar-screen nav.top .user-name { color: var(--ar-ink-2); }
body.ar-screen nav.top .top-right { display: flex; align-items: center; gap: 10px; }
body.ar-screen nav.top .logout-link {
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px;
  border: 1px solid var(--ar-line); border-radius: var(--ar-r-btn); background: #fff;
  font: 500 13px var(--ar-font); color: var(--ar-ink); text-decoration: none;
}
body.ar-screen nav.top .logout-link:hover { background: var(--ar-frost-bg-muted); }

@media (min-width: 701px) {
  body.ar-screen nav.top {
    position: sticky; top: 0; z-index: 20;      /* внутри скроллера — не fixed */
    margin: -8px -16px 20px; padding: 12px 16px;
  }
}
/* Constrain top nav content to same width as page container on desktop */
@media (min-width: 900px) {
  body.ar-screen nav.top {
    margin: -20px -32px 24px;
    padding: 14px 32px;
  }
}
@media (max-width: 899px) {
  body.ar-screen nav.top .user-name { display: none; }
}
body.ar-screen .flash { border-radius: 12px; padding: 10px 14px; }
.flash.info { background: #fff; color: var(--ar-ink-2); border: 1px solid var(--ar-line); }

@media (max-width: 700px) {
  /* Show the new bottom nav + sheet on mobile */
  .ar-nav   { display: flex; }
  .ar-scrim { display: block; }
  .ar-sheet { display: block; }

  /* Hide the legacy top-nav horizontal links on mobile — replaced by ar-nav.
     🔔/«Выйти» тоже скрыты: они есть в шите «Ещё». */
  nav.top .links               { display: none; }
  body.ar-screen nav.top .top-right { display: none; }
  nav.top                       { margin-bottom: 12px; padding: 8px 0 6px; }
}

/* ============================================================
   FORMS — scoped to .ar-form (used inside frosted card)
   ============================================================ */
.ar-form { max-width: 720px; }
.ar-form .field { margin-bottom: 14px; }
.ar-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 520px) {
  .ar-form .field-row { grid-template-columns: 1fr; gap: 0; }
  .ar-form .field-row > div { margin-bottom: 14px; }
}
.ar-form label {
  display: block;
  font: 600 var(--ar-fs-cap) var(--ar-font);   /* капс только ≥ 12 px */
  color: var(--ar-ink-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
/* Длинные метки (генератор): обычный регистр 13 px, пояснения — в small */
.ar-form--plain label {
  text-transform: none; letter-spacing: 0;
  font: 600 var(--ar-fs-sub) var(--ar-font);
}
.ar-form input[type="text"],
.ar-form input[type="email"],
.ar-form input[type="password"],
.ar-form input[type="number"],
.ar-form input[type="date"],
.ar-form input[type="tel"],
.ar-form input[type="url"],
.ar-form textarea,
.ar-form select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  font: 500 15px var(--ar-font);
  color: var(--ar-ink);
  background: #fff;
  border: 1px solid var(--ar-line);
  border-radius: 11px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
  font-variant-numeric: tabular-nums;
}
.ar-form textarea { min-height: 72px; resize: vertical; line-height: 1.4; }
.ar-form input:focus,
.ar-form textarea:focus,
.ar-form select:focus {
  border-color: var(--ar-accent);
  box-shadow: 0 0 0 3px rgba(26,25,23,.10);
}
.ar-form input[aria-invalid="true"], .ar-form select[aria-invalid="true"] { border-color: var(--ar-danger); }
.ar-form .field-error { color: var(--ar-danger-text); font: 400 var(--ar-fs-cap) var(--ar-font); margin-top: 4px; }
.ar-form input[type="checkbox"], .ar-form input[type="radio"] {
  width: 20px; height: 20px;
  accent-color: var(--ar-accent);
  vertical-align: middle;
  margin-right: 6px;
}
/* Строка «флажок + подпись»: тап-зона — вся строка, регистр обычный */
.ar-form label.ar-checkline, label.ar-checkline {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--ar-tap-min); cursor: pointer; margin: 0;
  text-transform: none; letter-spacing: 0;
  font: 500 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink-2);
}
.ar-checkline input { margin-right: 0; }
/* Подсказки под полем — где бы ни стояли (и внутри .field-row > div) */
.ar-form small,
.ar-form .hint,
.ar-form .help-text {
  display: block;
  font: 400 var(--ar-fs-cap) var(--ar-font);
  color: var(--ar-ink-3);
  margin-top: 4px;
  line-height: 1.4;
}
/* Радио-плитки (тип договора, ИП/ООО): выбранная подсвечивается */
.ar-form .ar-radio-tile {
  flex: 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 1px solid var(--ar-line); border-radius: 11px; cursor: pointer; background: #fff;
  font: 500 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink);
  text-transform: none; letter-spacing: 0; margin: 0; min-height: 44px;
}
.ar-form .ar-radio-tile input { margin: 0; width: 16px; height: 16px; }
.ar-form .ar-radio-tile:has(input:checked) { background: var(--ar-green-soft); border-color: var(--ar-green); }
.ar-form .ar-radio-tile--center { justify-content: center; }
/* Заголовок секции внутри формы */
.ar-form .ar-form__section {
  font: 600 var(--ar-fs-cap) var(--ar-font); color: var(--ar-ink);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 20px 0 12px; padding-bottom: 8px; border-bottom: 0.5px solid var(--ar-line);
}
.ar-form .ar-form__section:first-child { margin-top: 0; }
.ar-form .ar-form__footer {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 20px; padding-top: 14px; border-top: 0.5px solid var(--ar-line);
}

/* Компактные инлайн-инпуты (Платежи/ЖКХ, зачёт депозита) */
.ar-input {
  width: 100%; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--ar-line); border-radius: 10px; background: #fff;
  font: 600 15px var(--ar-font); color: var(--ar-ink); outline: none;
  font-variant-numeric: tabular-nums; box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.ar-input:focus { border-color: var(--ar-accent); box-shadow: 0 0 0 3px rgba(26,25,23,.10); }
.ar-input--text { font-weight: 400; }
.ar-input--sm { min-height: 36px; font-size: 14px; }
.ar-input--auto { width: auto; }
.ar-input:placeholder-shown { color: var(--ar-ink-3); font-weight: 400; }
select.ar-input { padding-right: 28px; }
.ar-field-label { font: 500 var(--ar-fs-cap)/1.3 var(--ar-font); color: var(--ar-ink-3); margin-bottom: 4px; display: block; }

/* details без глобального маркера «▸» */
details.ar-details > summary::before { content: none; margin: 0; }
details.ar-details > summary { list-style: none; cursor: pointer; }
details.ar-details > summary::-webkit-details-marker { display: none; }
details.ar-details > summary .ar-icon { transition: transform .18s ease; }
details.ar-details[open] > summary .ar-icon--chev { transform: rotate(180deg); }

/* Ограничение длины строки для справок на десктопе */
.ar-prose { max-width: 68ch; }

/* ============================================================
   БАЗОВЫЕ КОМПОНЕНТЫ ДЛЯ ВОЛНЫ 2 (B — журнал платежей, D — экраны).
   Описание и примеры разметки — audit/C_report.md §«Компоненты».
   Добавлять новые классы — ниже, в конец файла.
   ============================================================ */

/* ---------- .ar-table: десктопная таблица (≥ 900px) со sticky thead и tfoot-итогами.
   На мобильном таблицу не показываем — страница рендерит карточки:
   <div class="ar-table-wrap"> скрыт < 900px, .ar-cards-mobile скрыт ≥ 900px. ---------- */
/* Обёртка несёт фон/скругление/тень; overflow НЕ трогаем — иначе sticky thead
   липнет к таблице, а не к скроллеру .ar-scroll. */
.ar-table-wrap {
  display: none;
  background: var(--ar-frost-bg); border-radius: var(--ar-r-card);
  border: 1px solid var(--ar-line);   /* §1: тонкая линия вместо тени — «спокойный лист» */
}
/* Сводка-полоса приклеена сверху: у таблицы под ней углы только снизу */
.ar-summary + .ar-table-wrap, .ar-summary + .lg-table-wrap {
  border-radius: 0 0 var(--ar-r-card) var(--ar-r-card); border-top: none;
}
.ar-summary + .ar-table-wrap .ar-table thead th:first-child,
.ar-summary + .lg-table-wrap .ar-table thead th:first-child,
.ar-summary + .ar-table-wrap .ar-table thead th:last-child,
.ar-summary + .lg-table-wrap .ar-table thead th:last-child { border-radius: 0; }
.ar-table {
  width: 100%; max-width: 100%; table-layout: auto;
  border-collapse: separate; border-spacing: 0;
  font: 400 var(--ar-fs-sub)/1.35 var(--ar-font); color: var(--ar-ink);
}
/* Страховка от «таблица шире скроллера» (design_v2 §2.1): .ar-scroll режет
   переполнение по X, а обёртка намеренно без overflow (иначе отлипнет thead),
   поэтому содержимое ячеек обязано уметь переноситься. */
.ar-table th, .ar-table td {
  padding: 10px 12px; text-align: left; vertical-align: middle;
  overflow-wrap: break-word;   /* не «anywhere»: иначе рвёт слова посреди («Грайвороновски|й») */
}
.ar-table thead th {
  /* Липнет под sticky nav.top И под липкой строкой поиска, если она есть на экране
     (обе высоты меряет JS в base.html). На одном `top` с .ar-searchbar шапка уезжала
     под поиск, а первая строка резалась пополам (design_v3 §2.1, регрессия N1). */
  position: sticky; top: calc(var(--ar-topnav-h, 0px) + var(--ar-stickybar-h, 0px)); z-index: 2;
  background: #fff;                                   /* §2: шапка белая, не серая */
  font: 600 11px/1 var(--ar-font); color: var(--ar-ink-3);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ar-line); white-space: nowrap;
}
.ar-table thead th:first-child { border-top-left-radius: var(--ar-r-card); }
.ar-table thead th:last-child  { border-top-right-radius: var(--ar-r-card); }
.ar-table tfoot td:first-child { border-bottom-left-radius: var(--ar-r-card); }
.ar-table tfoot td:last-child  { border-bottom-right-radius: var(--ar-r-card); }
.ar-table tbody td { padding: 10px 14px; border-bottom: 1px solid #f1ebdf; }
.ar-table tbody tr:last-child td { border-bottom: 0; }
.ar-table tbody tr:hover td { background: #fdfcf9; transition: background .12s ease; }
.ar-table tbody tr.ar-table__row--muted td { color: var(--ar-ink-3); }
.ar-table tbody tr.ar-table__row--muted .ar-num { color: var(--ar-ink-2); }
.ar-table tfoot td {
  position: sticky; bottom: 0; z-index: 1;
  background: var(--ar-frost-bg-muted); border-top: 1px solid var(--ar-line);
  padding: 13px 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ar-table tfoot td.ar-table__lbl { font-weight: 500; color: var(--ar-ink-2); }
.ar-table .ar-table__num, .ar-table td.ar-num, .ar-table th.ar-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-table .ar-table__group td {            /* строка-заголовок здания внутри таблицы */
  background: var(--ar-frost-bg-muted); font: 600 12px/1.3 var(--ar-font); color: var(--ar-ink-2);
  letter-spacing: .02em; padding: 8px 14px; border-bottom: 1px solid var(--ar-line);
}
.ar-table .ar-input, .ar-table .ar-input--sm { min-height: 34px; font-size: 14px; }
.ar-table td.ar-table__input { width: 150px; }
/* nowrap здесь давал 1474 px таблицы в 1280-px скроллере — колонка обрезалась
   без возможности прокрутки (design_v2 §2.1). Действия переносятся. */
.ar-table td.ar-table__actions { text-align: right; }
.ar-table .ar-btn { height: 32px; padding: 0 11px; font-size: 13px; border-radius: var(--ar-r-btn-sm); }

/* ── Имя и подпись в первой колонке (§2 «Таблица») ── */
.ar-table__who { font: 550 14.5px/1.25 var(--ar-font); color: var(--ar-ink); text-decoration: none; }
a.ar-table__who:hover { text-decoration: underline; }
.ar-table__where { font: 400 12.5px/1.3 var(--ar-font); color: var(--ar-ink-3); margin-top: 2px; }

/* ── Действия строки: колонка фиксированной ширины, содержимое проявляется ──
   §2: ширина резервируется всегда, иначе таблица «дышит» при наведении;
   opacity 0 → 1 за 150 мс на :hover и :focus-within (клавиатура). */
.ar-rowacts {
  display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end;
  opacity: 0; transition: opacity .15s ease;
}
tr:hover > td > .ar-rowacts,
tr:focus-within > td > .ar-rowacts,
tr:has(details[open]) > td > .ar-rowacts { opacity: 1; }
.ar-rowacts__n { font: 400 12.5px var(--ar-font); color: var(--ar-ink-3); font-variant-numeric: tabular-nums; margin-right: 2px; }
@media (hover: none) { .ar-rowacts { opacity: 1; } }   /* тач: наведения нет */
@media (prefers-reduced-motion: reduce) {
  .ar-rowacts { transition: none; }
  .ar-table tbody tr:hover td { transition: none; }
}

@media (min-width: 900px) {
  .ar-table-wrap { display: block; }
  .ar-cards-mobile { display: none; }
  /* Действия строки прижаты вправо только в табличном режиме: на карточках
     (< 900px) они выравниваются влево. */
  .ar-table td.ar-table__actions > div { justify-content: flex-end; }
  .ar-table td.ar-table__actions { width: 170px; }
}

/* ---------- .ar-empty: пустое состояние (иконка + заголовок + текст + одно действие).
   Базовые .ar-empty/.ar-empty__title/.ar-empty__text объявлены выше; здесь — CTA и модификаторы. ---------- */
.ar-empty__cta { margin-top: 14px; display: flex; justify-content: center; gap: 8px; }
.ar-empty--card { background: var(--ar-frost-bg); border-radius: var(--ar-r-card); box-shadow: var(--ar-shadow-card2); }
.ar-empty--compact { padding: 20px 16px; }
.ar-empty--compact .ar-iconsq { width: 40px; height: 40px; }

/* ---------- .ar-toast: нижний тост над docked-панелями; JS — window.arToast(text, undoFn, ms) ---------- */
.ar-toast {
  position: fixed; left: 16px; right: 16px; z-index: 70;
  bottom: calc(var(--ar-dock-h, 0px) + 12px);
  margin: 0 auto; max-width: 520px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 10px 16px; border-radius: 14px;
  background: var(--ar-black); color: #fff;
  font: 500 var(--ar-fs-sub)/1.35 var(--ar-font);
  box-shadow: var(--ar-shadow-nav);
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.ar-toast[hidden] { display: none; }
.ar-toast--show { opacity: 1; transform: none; }
.ar-toast__text { flex: 1; min-width: 0; }
.ar-toast__undo {
  flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ar-green); color: var(--ar-ink); font: 600 13px var(--ar-font);
}
.ar-toast__close {
  flex: none; width: 32px; height: 32px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: #fff; opacity: .8;
  display: inline-flex; align-items: center; justify-content: center;
}
.ar-toast__close:hover, .ar-toast__undo:hover { filter: brightness(1.08); }
@media (min-width: 701px) {
  .ar-toast { left: auto; right: 24px; bottom: calc(var(--ar-dock-h, 0px) + 20px); min-width: 320px; }
}
@media (prefers-reduced-motion: reduce) { .ar-toast { transition: none; } }

/* ---------- .ar-dialog: модальный диалог на <dialog>; JS — window.arConfirm({...}) / window.arDialog(el) ---------- */
dialog.ar-dialog {
  border: 0; padding: 0; margin: auto;
  width: min(420px, calc(100vw - 32px));
  border-radius: var(--ar-r-card); background: var(--ar-frost-bg); color: var(--ar-ink);
  box-shadow: var(--ar-shadow-sheet);
  font-family: var(--ar-font);
}
dialog.ar-dialog::backdrop { background: var(--ar-scrim); }   /* без backdrop-filter */
.ar-dialog__form, .ar-dialog__body { padding: 20px 18px 16px; }
.ar-dialog__title { font: 700 17px/1.3 var(--ar-font); margin: 0 0 8px; }
.ar-dialog__text  { font: 400 var(--ar-fs-body)/1.5 var(--ar-font); color: var(--ar-ink-2); margin: 0; overflow-wrap: anywhere; }
.ar-dialog__text[hidden] { display: none; }
.ar-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.ar-dialog .ar-form { max-width: none; }
.ar-btn--danger-solid { background: var(--ar-danger); color: #fff; box-shadow: var(--ar-shadow-btn); }
@media (max-width: 480px) {
  dialog.ar-dialog { width: calc(100vw - 24px); }
  .ar-dialog__actions .ar-btn { flex: 1 1 auto; }
}

/* ---------- .ar-list-payments: журнал платежей (дата · сумма · вид/источник · автор · сторно).
   Строка — grid; сторнированные строки перечёркнуты, вид платежа — бейдж. ---------- */
.ar-list-payments { display: flex; flex-direction: column; }
.ar-list-payments__row {
  display: grid; grid-template-columns: 74px 1fr auto; grid-template-areas: "date main amount" "date meta void";
  gap: 2px 10px; align-items: center;
  padding: 10px 0; border-bottom: 0.5px solid var(--ar-line);
}
.ar-list-payments__row:last-child { border-bottom: 0; }
.ar-list-payments__date  { grid-area: date; font: 600 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-list-payments__nodate { white-space: normal; font: 400 var(--ar-fs-cap)/1.25 var(--ar-font); display: inline-block; }
.ar-list-payments__main  { grid-area: main; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 500 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink); }
.ar-list-payments__amount{ grid-area: amount; font: 700 15px var(--ar-font); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.ar-list-payments__meta  { grid-area: meta; font: 400 var(--ar-fs-cap)/1.35 var(--ar-font); color: var(--ar-ink-3); min-width: 0; overflow-wrap: anywhere; }
.ar-list-payments__void  { grid-area: void; justify-self: end; }
.ar-list-payments__amount--in  { color: var(--ar-success-text); }
.ar-list-payments__amount--out { color: var(--ar-danger-text); }
.ar-list-payments__row--void .ar-list-payments__amount,
.ar-list-payments__row--void .ar-list-payments__main { text-decoration: line-through; color: var(--ar-ink-3); }
.ar-list-payments__row--void { opacity: .75; }
.ar-list-payments__kind { font: 600 var(--ar-fs-badge)/1 var(--ar-font); text-transform: uppercase; letter-spacing: .03em; padding: 3px 7px; border-radius: 999px; background: var(--ar-track); color: var(--ar-ink-2); white-space: nowrap; }
.ar-list-payments__kind--deposit { background: var(--ar-green-soft); color: var(--ar-success-text); }
.ar-list-payments__kind--refund, .ar-list-payments__kind--out { background: rgba(217,83,74,.11); color: var(--ar-danger-text); }
.ar-list-payments__kind--correction { background: rgba(208,152,42,.14); color: var(--ar-warning-text); }
.ar-list-payments__source { display: inline-flex; align-items: center; gap: 3px; color: var(--ar-ink-3); }
.ar-list-payments__source .ar-icon { width: 14px; height: 14px; }
@media (min-width: 701px) {
  .ar-list-payments__row { grid-template-columns: 90px 1fr auto auto; grid-template-areas: "date main amount void" "date meta amount void"; }
}

/* Имя пользователя в шапке — ссылка на аккаунт (смена пароля) */
body.ar-screen nav.top a.user-name { text-decoration: none; border-radius: 999px; padding: 4px 8px; }
body.ar-screen nav.top a.user-name:hover { background: rgba(26,25,23,.05); color: var(--ar-ink); }

/* ════════════════════════════════════════════════════════════
   v2 (DESIGN_v2_SPEC §2). Эталон: outputs/proto/proto.html.
   Шапка страницы · панель фильтров · сводка-полоса · статус-точка ·
   подсказка ассистента · меню «⋯». Значения — из эталона, не «примерно».
   ════════════════════════════════════════════════════════════ */

/* ---------- Шапка страницы ----------
   Слева: надзаголовок → h1 32/650 → строка контекста. Справа: ghost-стрелки,
   затем quiet, затем ОДНА primary. Выравнивание по нижнему краю. */
.ar-pagehead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 8px 0 0; margin-bottom: 18px;
}
.ar-pagehead__main { min-width: 0; }
.ar-pagehead__eyebrow { font: 400 13px/1.3 var(--ar-font); color: var(--ar-ink-3); margin-bottom: 2px; }
.ar-pagehead__title, .ar-pagehead h1 {
  margin: 0; font: 650 32px/1.1 var(--ar-font); letter-spacing: -.02em; color: var(--ar-ink);
  overflow-wrap: anywhere;
}
.ar-pagehead__title--sm, .ar-pagehead h1.ar-pagehead__title--sm { font-size: 26px; }
.ar-pagehead__meta {
  margin-top: 8px; font: 400 14px/1.4 var(--ar-font); color: var(--ar-ink-2);
  display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline;
}
.ar-pagehead__meta b { font-weight: 600; color: var(--ar-ink); }
.ar-pagehead__meta .ar-num { font-variant-numeric: tabular-nums; }
.ar-pagehead__actions { display: flex; gap: 8px; align-items: center; flex: none; }

/* ---------- Панель поиска и фильтров: ОДНА строка ----------
   §1 п.5: лишние чипы уезжают в горизонтальную прокрутку, а не переносятся
   вниз одиноким хвостом. flex-wrap запрещён. */
.ar-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.ar-toolbar > .ar-search { flex: 1 1 auto; min-width: 0; }
.ar-toolbar__chips {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; flex: 0 1 auto;
  line-height: 0;                       /* иначе базовая линия добавляет 3 px к строке */
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ar-toolbar__chips::-webkit-scrollbar { display: none; }
.ar-toolbar__end { margin-left: auto; flex: none; display: flex; gap: 8px; align-items: center; }

/* ---------- Сводка: одна белая полоса над таблицей ----------
   §2: никаких отдельных карточек-коробок под каждое число. */
.ar-summary {
  display: flex; align-items: baseline; gap: 28px;
  padding: 16px 18px; background: #fff;
  border: 1px solid var(--ar-line); border-bottom: none;
  border-radius: var(--ar-r-card) var(--ar-r-card) 0 0;
  flex-wrap: wrap;
}
.ar-summary__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ar-summary__label { font: 400 12px/1.3 var(--ar-font); color: var(--ar-ink-3); }
.ar-summary__val {
  font: 650 20px/1.15 var(--ar-font); letter-spacing: -.01em; color: var(--ar-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ar-summary__val--muted   { color: var(--ar-ink-3); }
.ar-summary__val--due     { color: var(--ar-warning-text); }
.ar-summary__val--ok      { color: var(--ar-success-text); }
.ar-summary__val--danger  { color: var(--ar-danger-text); }
.ar-summary__bar { margin-left: auto; width: 180px; flex: none; }
.ar-summary__bar .ar-progress { margin-top: 6px; }

/* ---------- Статус: точка + текст ----------
   §1 п.3: заливка бейджа — только там, где статус единичный (карточка
   договора), не в списке из шестнадцати строк. */
.st {
  display: inline-flex; align-items: center; gap: 7px;
  font: 400 13px/1.3 var(--ar-font); color: var(--ar-ink-2); white-space: nowrap;
}
.st__dot { width: 7px; height: 7px; border-radius: 99px; flex: none; background: #cdc6b6; }
.st--paid { color: var(--ar-success-text); }
.st--paid .st__dot { background: var(--ar-success); }
.st--late .st__dot { background: var(--ar-warning); }
.st--crit { color: var(--ar-danger-text); font-weight: 550; }
.st--crit .st__dot { background: var(--ar-danger); }
.st--wait .st__dot { background: #cdc6b6; }

/* ---------- Подсказка ассистента (§2 «Карточка-подсказка») ----------
   Приложение — помощник: заметило → сказало строкой → предложило действие
   в один клик. Красная кромка — только для расхождений в деньгах. */
.ar-hints { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ar-hint {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; background: #fff;
  border: 1px solid var(--ar-line); border-left: 3px solid var(--ar-green);
  border-radius: 12px;
}
.ar-hint--warn   { border-left-color: var(--ar-warning); }
.ar-hint--danger { border-left-color: var(--ar-danger); }
.ar-hint__ic {
  width: 28px; height: 28px; border-radius: 8px; background: var(--ar-green-soft);
  color: var(--ar-green-ink); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.ar-hint__ic .ar-icon { width: 16px; height: 16px; }
.ar-hint--warn   .ar-hint__ic { background: rgba(208,152,42,.14); color: var(--ar-warning-text); }
.ar-hint--danger .ar-hint__ic { background: rgba(217,83,74,.12);  color: var(--ar-danger-text); }
.ar-hint__body  { flex: 1 1 auto; min-width: 0; }
.ar-hint__title { font: 600 14.5px/1.3 var(--ar-font); color: var(--ar-ink); margin-bottom: 2px; }
.ar-hint__text  { font: 400 13.5px/1.45 var(--ar-font); color: var(--ar-ink-2); overflow-wrap: anywhere; }
.ar-hint__acts  { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.ar-hint__acts form { margin: 0; }
/* Больше двух карточек на экран не показываем — остальные под строкой
   «ещё N подсказок» (§0: акцент, который есть у всех, — не акцент). */
.ar-hints__more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  min-height: 38px; padding: 8px 2px; color: var(--ar-ink-2);
  font: 500 var(--ar-fs-sub) var(--ar-font);
}
.ar-hints__more > summary::-webkit-details-marker { display: none; }
.ar-hints__more > summary::before { content: none; }
.ar-hints__more > summary:hover { color: var(--ar-ink); }
.ar-hints__more[open] > summary .ar-icon--chev { transform: rotate(180deg); }
.ar-hints__more .ar-icon--chev { transition: transform .18s ease; color: var(--ar-ink-3); }
.ar-hints__rest { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }

/* ---------- Меню «⋯» в строке (на <details>, с клавиатурой) ----------
   Раньше жило в screens.css только для черновиков; теперь общий компонент:
   всё, что не поместилось в два контрола строки, уезжает сюда. */
details.ar-kebab { position: relative; display: inline-block; }
details.ar-kebab > summary { list-style: none; cursor: pointer; }
details.ar-kebab > summary::-webkit-details-marker { display: none; }
details.ar-kebab > summary::before { content: none; }
details.ar-kebab[open] > summary.ar-btn,
details.ar-kebab[open] > summary .ar-btn { background: var(--ar-frost-bg-muted); border-color: #d9d0be; }
details.ar-kebab > summary:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; border-radius: var(--ar-r-btn-sm); }
.ar-kebab__list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 200px; padding: 6px; text-align: left;
  background: #fff; border: 1px solid var(--ar-line); border-radius: 12px;
  box-shadow: var(--ar-shadow-card);
}
.ar-kebab__item {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  font: 500 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink); text-decoration: none; text-align: left;
  min-height: 38px; white-space: nowrap;
}
.ar-kebab__item:hover { background: var(--ar-frost-bg-muted); }
.ar-kebab__item--danger { color: var(--ar-danger-text); }
.ar-kebab__item .ar-icon { color: var(--ar-ink-3); }
.ar-kebab__item--danger .ar-icon { color: var(--ar-danger-text); }
.ar-kebab__list form { margin: 0; }
.ar-kebab__sep { height: 1px; background: var(--ar-line); margin: 5px 4px; }

/* ---------- Узкий экран: шапка и панель складываются, ничего не обрезано ----------
   Планка 899px — общая база вёрстки. Телефонные тонкости (≤ 700px) живут в
   mobile.css, который подключается последним и может это переопределить. */
@media (max-width: 899px) {
  .ar-pagehead { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  .ar-pagehead__main { flex: 1 1 100%; }
  .ar-pagehead__actions { flex: 1 1 100%; flex-wrap: wrap; }
  .ar-pagehead__title, .ar-pagehead h1 { font-size: 28px; }
  .ar-toolbar { flex-wrap: wrap; }
  .ar-toolbar > .ar-search { flex: 1 1 100%; }
  .ar-toolbar__chips { flex: 1 1 100%; min-width: 0; }
  .ar-toolbar__end { margin-left: 0; }
  .ar-summary { gap: 14px 22px; border-radius: var(--ar-r-card); border-bottom: 1px solid var(--ar-line); margin-bottom: 10px; }
  .ar-summary__bar { margin-left: 0; flex: 1 1 100%; width: auto; }
  .ar-summary + .ar-table-wrap, .ar-summary + .lg-table-wrap { border-radius: var(--ar-r-card); border-top: 1px solid var(--ar-line); }
  .ar-hint { padding: 12px 14px; }
}

/* ---------- Движение (§3): появление страницы и каскад строк ---------- */
@keyframes ar-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ar-flash   { from { background: rgba(207,230,174,.6); } to { background: transparent; } }
.ar-table tbody tr.ar-row--saved > td { animation: ar-flash 1.1s ease-out; }

/* §3, обязательный пункт: уважать системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}