/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Стили экрана «Решения»: список слева, карточка справа (макет C2). Файл подключён в index.html после screens.css; значения — только из tokens.css, шрифты в rem.
   Узкий экран (меньше 48rem по ширине .dec; то же число NARROW_REM в decisions.js): список и карточка показываются по очереди, data-pane = list | detail. */

.dec { container: decs / inline-size; display: grid; gap: var(--space-4); min-width: 0; }
.dec [hidden] { display: none; }
.dec .head { margin-bottom: 0; }
.dec__note { margin: 0; max-width: var(--layout-measure); color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }

/* Две колонки: список и карточка */
.dec__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tile-gap); align-items: start; min-width: 0; }
.dec__list { display: grid; gap: var(--tile-gap); min-width: 0; align-content: start; }
.dec__card { min-width: 0; }
.dec__back { display: none; justify-self: start; gap: var(--space-2); }
.dec__back .ic { width: 1rem; height: 1rem; }

/* Группа решений одного проекта */
.dec__group { display: grid; gap: var(--space-1); padding: var(--space-2); }
.dec__ghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); padding: var(--space-2) var(--space-3); }
.dec__gh { margin: 0; overflow-wrap: anywhere; font: var(--text-ui-strong-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.dec__count { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.dec__rows { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style-type: none; }
.dec__item { min-width: 0; }

/* Строка списка: вид решения, название, подпись «время · пометка» */
.dec__row {
  display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); align-items: center; column-gap: var(--space-3);
  width: 100%; min-height: var(--size-touch-min); padding: var(--space-3); text-align: left; cursor: pointer;
  color: var(--color-ink); font: inherit;
}
.dec__row[aria-current="true"] { background: var(--surface-inner-hover); box-shadow: inset var(--size-focus-width) 0 0 var(--color-acc); }
.dec__row[data-snoozed="true"] .dec__t { color: var(--color-ink2); }
.dec__kind { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.dec__kind .ic { width: 1rem; height: 1rem; color: var(--color-warn-text); }
.dec__main { display: grid; min-width: 0; }
.dec__t { overflow-wrap: anywhere; }
.dec__m { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.dec__m:empty { display: none; }

/* Карточка выбранного решения */
.dec__detail { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); }
.dec__detail[aria-busy="true"] { opacity: .85; }
.dec__detail--pick { justify-items: center; padding: var(--space-8); }
.dec__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.dec__kindtxt, .dec__proj { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.dec__headline { margin: 0; overflow-wrap: anywhere; font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); }
.dec__headline:focus-visible { outline: var(--size-focus-width) solid var(--color-acc); outline-offset: var(--size-focus-offset); }
.dec__summary { margin: 0; max-width: var(--layout-measure); overflow-wrap: anywhere; white-space: pre-line; font: var(--text-body-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.dec__cap { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.dec__step { 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; }

/* Рекомендация, вопросы плана, предупреждения */
.dec__rec, .dec__qs { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--inner-radius); background: var(--surface-inner); }
.dec__rec-t { margin: 0; overflow-wrap: anywhere; }
.dec__qlist { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-5); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); overflow-wrap: anywhere; }
.dec__warns { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style-type: none; }
.dec__warn { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-ink); font: var(--text-ui-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.dec__warn .ic { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; color: var(--color-warn-text); }
.dec__more { display: grid; gap: var(--space-2); }
.dec__more summary { display: inline-flex; align-items: center; min-height: var(--size-touch-min); cursor: pointer; }
.dec__morebody { display: grid; gap: var(--space-2); }

/* Кнопки и «Свой ответ» */
.dec__acts, .dec__send, .dec__code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.dec__form { display: grid; gap: var(--space-2); max-width: var(--layout-measure); }
.dec__ta {
  width: 100%; min-height: calc(var(--size-control) * 1.5); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line2); border-radius: var(--radius-md); background: var(--color-bg);
  color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); resize: vertical;
}
.dec__ta:hover { border-color: var(--color-ink3); }
.dec__ta[aria-invalid="true"] { border-color: var(--color-danger); }
.dec__ta:disabled { background: var(--color-panel2); color: var(--color-ink2); cursor: not-allowed; }
.dec__field-err { margin: 0; color: var(--color-danger-text); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.dec__task { margin: 0; }
.dec__task .link { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }

/* Выкладка и необратимое: вместо кнопок — пояснение и команда для консоли */
.dec__human { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--inner-radius); background: var(--surface-inner); }
.dec__cmd {
  flex: 1 1 14rem; min-width: 0; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-panel);
  overflow-wrap: anywhere; user-select: all;
}

/* Строка результата */
.dec__result { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.dec__result .ic { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; }
.dec__result--ok { color: var(--color-ink2); }
.dec__result--ok .ic { color: var(--color-ok-text); }
.dec__result--warn { color: var(--color-ink2); }
.dec__result--warn .ic { color: var(--color-warn-text); }
.dec__result--danger { color: var(--color-danger-text); }

/* Пустое состояние: спокойный значок и одна фраза */
.dec .empty { display: grid; justify-items: center; gap: var(--space-3); }
.dec .empty > .ic { width: var(--size-icon-lg); height: var(--size-icon-lg); color: var(--color-ok-text); }

/* Окно подтверждения — kit (.ui-dialog); здесь только содержимое тела */
.dec__dlg { display: grid; gap: var(--space-2); overflow-wrap: anywhere; }

/* Широкий экран: два столбца, карточка остаётся на виду при прокрутке списка */
@container decs (min-width: 48rem) {
  .dec__split { grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr); }
  .dec__card { position: sticky; top: var(--space-4); }
}

/* Узкий экран: сначала список, после выбора — карточка с кнопкой «К списку решений» */
@container decs (max-width: 47.999rem) {
  .dec[data-pane="list"] .dec__card { display: none; }
  .dec[data-pane="detail"] .dec__list { display: none; }
  .dec__back { display: inline-flex; }
  .dec__detail { padding: var(--space-4); }
  .dec__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
  .dec__acts .btn--primary { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .dec__row { transition: background-color var(--duration-fast) var(--ease-out); }
}