/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Экран «Цель» (#goal, #goal-G-01; pult/js/screens/goal.js). Макет — docs/queue-system/goal.html (имена и значения макета переведены на классы экрана и токены tokens.css).
   Подключён в index.html после queue.css; значения — только из tokens.css, размеры в rem, обе темы через переменные.
   Раскладка: одна колонка секций с зазором --space-6; плитки .tile (base.css) для «Что должно получиться», «Что мешает», репозиториев и полос.
   390 — всё в одну колонку; репозитории и полосы сами добавляют колонки (auto-fill), горизонтальной прокрутки нет.
   Движение — только transform (стрелка «Находки»); при prefers-reduced-motion переходов нет. */

.screen[data-screen="goal"] { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.screen[data-screen="goal"] .page-title {
  margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.6vw, var(--text-display-size)); overflow-wrap: anywhere;
}
.gl-nav { min-width: 0; }
.gl-body { display: grid; gap: var(--space-6); align-content: start; min-width: 0; margin-top: var(--space-2); }
.gl-body > * { min-width: 0; margin: 0; }
.gl-state { margin-top: var(--space-4); }

/* ---------- Шапка: статус, продукт, срок и «Зачем» ---------- */
.gl-head { display: grid; gap: var(--space-3); }
.gl-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; }
.gl-head__meta .caption { color: var(--color-ink2); }
.gl-head__why { margin: 0; max-width: var(--layout-measure); color: var(--color-ink); overflow-wrap: anywhere; font: var(--text-lead-weight) var(--text-lead-size)/var(--text-lead-line) var(--font-sans); }

/* Другие цели — чипы-ссылки в ряд */
.gl-others__l { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.gl-others .chip { max-width: 100%; text-decoration: none; overflow-wrap: anywhere; }

/* ---------- Прогресс: плашка с полосой и строкой «Условия выполнены…» ---------- */
.gl-prog {
  display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card);
  background: var(--color-panel); box-shadow: var(--shadow-ring);
}
.gl-prog__t { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; }

/* ---------- Заголовки секций ---------- */
.gl-sec__t {
  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);
}
.gl-exits, .gl-blockers, .gl-repo, .gl-lane { display: grid; gap: var(--space-4); align-content: start; }
.gl-repos, .gl-lanes { display: grid; gap: var(--space-3); align-content: start; }
.gl-repos > .caption, .gl-lanes > .caption { margin: 0; color: var(--color-ink2); }
.gl-lanes__sum { max-width: var(--layout-measure); overflow-wrap: anywhere; }

/* ---------- Списки: строки с линией 1 px между ними ---------- */
.gl-list { display: grid; margin: 0; padding: 0; list-style: none; }
.gl-list > li { min-width: 0; padding-block: var(--space-3); overflow-wrap: anywhere; }
.gl-list > li:first-child { padding-top: 0; }
.gl-list > li:last-child { padding-bottom: 0; }
.gl-list > li + li { border-top: 1px solid var(--color-line); }

/* Критерии: отметка слева, текст и пометки в одну строку с переносом */
.gl-exit { position: relative; padding-inline-start: calc(var(--space-5) + var(--space-3)); }
.gl-exit__m {
  position: absolute; inset-inline-start: 0; top: var(--space-3); display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-5); height: var(--space-5); border-radius: var(--radius-round); box-shadow: 0 0 0 1px var(--color-line2);
  color: var(--color-ink3); font: var(--weight-medium) var(--text-label-size)/1 var(--font-sans);
}
.gl-list > .gl-exit:first-child > .gl-exit__m { top: 0; }
.gl-exit[data-done="1"] .gl-exit__m { background: var(--color-ok-soft); color: var(--color-ok-soft-text); box-shadow: none; }
.gl-exit[data-done="0"] { color: var(--color-ink); }

/* Что мешает: метка и название идут одной строкой текста */
.gl-block .ui-chip { margin-inline-end: var(--space-2); vertical-align: middle; }
.gl-block__st, .gl-row__st { color: var(--color-ink2); }
/* Строки полос и находок: номер задачи виден по подсказке, текст переносится */
.gl-list > .gl-row, .gl-list > .gl-find { color: var(--color-ink); line-height: var(--text-ui-line); }

/* ---------- Где работаем: репозитории и чипы областей ---------- */
.gl-repos__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--tile-gap); }
.gl-repo__t, .gl-lane__t {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; color: var(--color-ink);
  font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.gl-lane__t .caption { font-family: var(--font-num); font-variant-numeric: var(--num-features); }
.gl-repo__a { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.gl-area {
  max-width: 100%; min-height: var(--size-ctl-sm); padding-inline: var(--space-3); border-radius: var(--radius-item);
  background: var(--color-panel2); border-color: var(--color-line2); color: var(--color-ink); text-align: left;
  font: var(--weight-medium) var(--text-caption-size)/1 var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.gl-area:hover { background: var(--surface-inner-hover); }
.gl-area .chip__n { color: var(--color-ink2); font: var(--weight-regular) var(--text-mono-size)/1 var(--font-num); font-variant-numeric: var(--num-features); }
.gl-area--ring, .gl-area--ring:hover { border-color: var(--color-acc); }
.gl-area--ring .chip__n { color: var(--color-acc-text); }
.gl-area[aria-pressed="true"], .gl-area[aria-pressed="true"]:hover { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-on-dark); }
.gl-area[aria-pressed="true"] .chip__n { color: var(--color-on-dark); }
@media (max-width: 47.9375rem), (pointer: coarse) { .gl-area { min-height: var(--size-touch-min); } }

/* Фильтр области: полоса с кнопкой «Сбросить» */
.gl-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-ctl); background: var(--surface-inner); color: var(--color-ink);
}

/* ---------- Задачи по этапам: плитки-полосы сами добавляют колонки ---------- */
.gl-lanes__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--tile-gap); align-items: start; }
.gl-lane .btn--text { justify-self: start; margin-inline-start: calc(var(--space-3) * -1); }
.gl-lanes__empty { color: var(--color-ink3); }

/* ---------- Находки: свёрнутая плашка со стрелкой ---------- */
.gl-findings { border-radius: var(--radius-card); background: var(--color-panel); box-shadow: var(--shadow-ring); }
.gl-findings__s {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--size-touch-min);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-card); color: var(--color-ink2); cursor: pointer; list-style: none;
}
.gl-findings__s::-webkit-details-marker { display: none; }
.gl-findings__s:hover { color: var(--color-ink); }
.gl-findings__s::after {
  content: ""; flex: none; width: var(--space-2); height: var(--space-2); margin-inline-end: var(--space-1);
  border-inline-end: var(--size-focus-width) solid currentColor; border-block-end: var(--size-focus-width) solid currentColor;
  transform: rotate(-45deg); transition: transform var(--duration-fast) var(--ease-out);
}
.gl-findings[open] > .gl-findings__s::after { transform: rotate(45deg); }
.gl-findings > .gl-list { padding: var(--space-1) var(--space-4) var(--space-4); }

/* ---------- Что видит клиент: пунктирная рамка, внутри — окно предпросмотра ---------- */
.gl-client.tile__inner {
  display: grid; gap: var(--space-3); align-content: start; padding: var(--tile-pad);
  border: 1px dashed var(--color-line2); border-radius: var(--radius-card);
}
.gl-client > .caption { margin: 0; }
.gl-client__t {
  margin: var(--space-2) 0 0; color: var(--color-ink);
  font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.gl-client .gl-list { gap: var(--space-2); }
.gl-client .gl-list > .gl-client__row {
  padding: var(--space-3); border-top: 0; border-radius: var(--radius-ctl); background: var(--color-panel); box-shadow: var(--shadow-ring);
}

@media (max-width: 47.9375rem) {
  .gl-body { gap: var(--space-5); }
  .gl-lane .btn--text { min-height: var(--size-touch-min); }
}

@media (prefers-reduced-motion: reduce) {
  .gl-area, .gl-findings__s::after { transition: none; }
}