/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Набор компонентов пульта (pult/js/ui): плашка, статус и чип, прогресс, переключатель, кнопки, поля, показатель, сегменты, поповер, диалог, уведомление.
   Плитка и вложенный элемент (.tile, .tile__inner) — в base.css. Значения — только из tokens.css. */

/* ---------- Плашка: белая поверхность с рамкой-тенью; списки внутри разделены линией 1 px ---------- */
.ui-card {
  min-width: 0; padding: var(--card-pad); border-radius: var(--radius-card);
  background: var(--color-panel); color: var(--color-ink); box-shadow: var(--shadow-ring);
}
.ui-card__t {
  margin: 0 0 var(--space-4); color: var(--color-ink);
  font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--font-head); letter-spacing: var(--text-h3-track);
}
.ui-card__list { display: grid; margin: 0; padding: 0; list-style: none; }
.ui-card__list > li { padding-block: var(--space-3); }
.ui-card__list > li:first-child { padding-top: 0; }
.ui-card__list > li:last-child { padding-bottom: 0; }
.ui-card__list > li + li { border-top: 1px solid var(--color-line); }

/* ---------- Статус и чип: точка цвета состояния + серое слово, без заливки (значок внутри чипа скрыт) ---------- */
.ui-chip, .ui-status {
  --dot: var(--color-ink3);
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--space-6); padding: 0; border-radius: var(--radius-xs); background: none; color: var(--color-ink2);
  font: var(--weight-regular) var(--text-caption-size)/1.2 var(--font-sans);
  white-space: nowrap; cursor: default; user-select: none;
}
.ui-chip::before, .ui-status::before {
  content: ""; flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--dot);
}
.ui-chip .ic { display: none; }
.ui-chip[data-tone="acc"], .ui-status[data-tone="acc"] { --dot: var(--color-acc); }
.ui-chip[data-tone="ok"], .ui-status[data-tone="ok"] { --dot: var(--color-dot-ok); }
.ui-chip[data-tone="warn"], .ui-status[data-tone="warn"] { --dot: var(--color-dot-wait); }
.ui-chip[data-tone="danger"], .ui-status[data-tone="danger"] { --dot: var(--color-danger); }

/* ---------- Прогресс: полоса на дорожке (нативный <progress>) ----------
   Один общий вид для всех полос пульта: заливка — акцент (--color-acc), дорожка — его приглушённый тон (--color-acc-track).
   Тон (предел, предупреждение) переопределяет --bar-fill и --bar-track на самой полосе; остальные классы (.ov-bar, .pjn-bar, .pjv-pbar) берут вид отсюда. */
.ui-progress {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--size-progress);
  border: 0; border-radius: var(--radius-pill); overflow: hidden; color: var(--bar-fill, var(--color-acc));
  background: var(--color-track); background: var(--bar-track, var(--color-acc-track));
}
:is(.ui-progress, .ov-bar, .pjn-bar)::-webkit-progress-bar { background: var(--bar-track, var(--color-acc-track)); border-radius: var(--radius-pill); }
:is(.ui-progress, .ov-bar, .pjn-bar, .pjv-pbar)::-webkit-progress-value { background: var(--bar-fill, var(--color-acc)); border-radius: var(--radius-pill); }
:is(.ui-progress, .ov-bar, .pjn-bar, .pjv-pbar)::-moz-progress-bar { background: var(--bar-fill, var(--color-acc)); border-radius: var(--radius-pill); }
.ui-progress::-webkit-progress-value { transition: width var(--duration-base) var(--ease-out); }

/* ---------- Переключатель (role=radiogroup): дорожка, активный вариант — плашка ---------- */
.ui-switch {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: var(--space-1);
  border-radius: var(--radius-ctl); background: var(--color-track);
}
.ui-switch__b {
  min-height: var(--size-ctl-sm); padding-inline: var(--space-3); border: 0; border-radius: var(--radius-item);
  background: transparent; color: var(--color-ink2); cursor: pointer;
  font: var(--weight-regular) var(--text-caption-size)/1.2 var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.ui-switch__b:hover:not(:disabled) { color: var(--color-ink); }
.ui-switch__b[aria-checked="true"] { background: var(--color-panel); color: var(--color-ink); font-weight: var(--weight-medium); box-shadow: var(--shadow-sm); }
.ui-switch__b:disabled { color: var(--color-ink3); cursor: not-allowed; }

/* ---------- Кнопки: высота и радиус контрола; главная тёмная, акцентная оранжевая, вторичная с рамкой ---------- */
.btn { min-height: var(--size-ctl); padding-inline: var(--space-4); border-radius: var(--radius-ctl); }
.btn--sm { min-height: var(--size-ctl-sm); padding-inline: var(--space-3); }
.btn--text { min-height: var(--size-touch-min); padding-inline: var(--space-3); }
.btn--primary { background: var(--color-dark); color: var(--color-on-dark); }
.btn--primary::before { display: none; }
.btn--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--color-dark) 88%, var(--color-on-dark)); }
.btn--accent { background: var(--color-acc); color: var(--color-on-acc); }
.btn--accent:hover:not(:disabled):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--color-acc) 88%, var(--color-dark)); }
.btn--secondary { background: var(--color-panel); border-color: var(--color-line); color: var(--color-ink); }
.btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-panel2); border-color: var(--color-line2); }
@media (pointer: coarse) {
  .btn, .btn--sm, .ui-switch__b { min-height: var(--size-touch-min); }
}

/* ---------- Поле: подпись, элемент ввода с рамкой-тенью, подсказка; фокус — кольцо акцентом ---------- */
.ui-field { display: grid; gap: var(--space-2); min-width: 0; }
.ui-field__l { color: var(--color-ink); font: var(--weight-medium) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ui-field__h, .ui-field__e { margin: 0; font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ui-field__h { color: var(--color-ink2); }
.ui-field__e { color: var(--color-danger-text); }
.ui-field :is(input, select, textarea) {
  width: 100%; min-height: var(--size-ctl); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-ctl);
  background: var(--color-panel); color: var(--color-ink); box-shadow: var(--shadow-ring);
  font: var(--weight-regular) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.ui-field textarea { padding-block: var(--space-3); resize: vertical; min-height: calc(var(--size-ctl) * 2); }
.ui-field :is(input, select, textarea)::placeholder { color: var(--color-ink3); }
.ui-field :is(input, select, textarea):focus-visible { outline: var(--size-focus-width) solid var(--color-acc); outline-offset: 0; }
.ui-field :is(input, select, textarea)[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--color-danger); }
.ui-field :is(input, select, textarea):disabled { background: var(--color-panel2); color: var(--color-ink3); cursor: not-allowed; }
@media (pointer: coarse) {
  .ui-field :is(input, select) { min-height: var(--size-touch-min); }
}

/* ---------- Показатель: подпись, крупное значение, пояснение ---------- */
.ui-kpi { display: grid; gap: var(--space-1); align-content: start; min-width: 0; color: inherit; text-decoration: none; }
a.ui-kpi { min-height: var(--size-touch-min); }
.ui-kpi__l { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ui-kpi__v {
  color: var(--color-ink); font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-track); overflow-wrap: anywhere;
}
.ui-kpi__h { color: var(--color-ink3); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
a.ui-kpi:hover .ui-kpi__v { color: var(--color-acc-text); }

/* ---------- Сегменты (role=tablist): вкладки с подчёркиванием активной ---------- */
.ui-seg { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); border-bottom: 1px solid var(--color-line2); }
.ui-seg__b {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-touch-min); padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--color-ink2); font: var(--text-ui-strong-weight) var(--text-ui-size)/1 var(--font-sans);
  transition: color var(--duration-fast) var(--ease-out);
}
.ui-seg__b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-acc);
  transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out);
}
.ui-seg__b[aria-selected="true"] { color: var(--color-ink); }
.ui-seg__b[aria-selected="true"]::after { transform: scaleX(1); }
.ui-seg__b:hover:not(:disabled) { color: var(--color-ink); }
.ui-seg__b:disabled { color: var(--color-ink3); cursor: not-allowed; }
.ui-seg__n { color: var(--color-ink3); font-variant-numeric: tabular-nums; font-weight: var(--weight-regular); }

/* ---------- Поповер: панель встаёт сразу после опоры, родитель опоры — точка отсчёта ---------- */
[data-pop-host] { position: relative; }
.ui-pop {
  position: absolute; z-index: var(--z-overlay); top: calc(100% + var(--space-2));
  width: max-content; max-width: min(22rem, calc(100vw - var(--space-8)));
  padding: var(--space-4); display: grid; gap: var(--space-3);
  background: var(--color-panel); border: 1px solid var(--color-line2); border-radius: var(--tile-radius); box-shadow: var(--shadow-md);
  color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
  opacity: 0; visibility: hidden; transform: translateY(calc(var(--space-1) * -1));
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
}
.ui-pop[data-placement="start"] { inset-inline-start: 0; }
.ui-pop[data-placement="end"] { inset-inline-end: 0; }
/* Мост над щелью: указатель переходит с опоры на панель, не закрывая её */
.ui-pop::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--space-2) * -1 - 1px); height: var(--space-2); }
.ui-pop[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

/* ---------- Диалог ---------- */
.ui-dialog {
  width: min(calc(100% - var(--space-8)), 28rem); max-height: calc(100dvh - var(--space-8)); margin: auto; padding: 0; overflow: auto;
  background: var(--color-panel); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--tile-radius); box-shadow: var(--shadow-lg);
}
.ui-dialog::backdrop { background: var(--color-scrim); }
.ui-dialog__in { display: grid; gap: var(--space-4); padding: var(--space-6); }
.ui-dialog__h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.ui-dialog__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); }
.ui-dialog__x {
  display: inline-flex; align-items: center; justify-content: center; flex: none; margin: calc(var(--space-2) * -1);
  width: var(--size-touch-min); height: var(--size-touch-min); background: none; border: 0; border-radius: var(--radius-pill);
  color: var(--color-ink2); cursor: pointer;
}
.ui-dialog__x:hover { color: var(--color-ink); background: var(--color-panel2); }
.ui-dialog__b { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.ui-dialog__p { margin: 0; }
.ui-dialog__a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-3); }
.btn.ui-btn--danger { border-color: var(--color-danger-soft-text); color: var(--color-danger-soft-text); }
.btn.ui-btn--danger:hover { background: var(--color-danger-soft); border-color: var(--color-danger-soft-text); }
@media (max-width: 47.9375rem) {
  .ui-dialog__a { flex-direction: column-reverse; }
  .ui-dialog__a .btn { width: 100%; }
}

/* ---------- Уведомление (одна область внизу по центру) ---------- */
.ui-toast {
  position: fixed; z-index: var(--z-toast); left: 50%; bottom: var(--space-6);
  transform: translate(-50%, var(--space-4)); opacity: 0; visibility: hidden;
  max-width: calc(100% - var(--space-8)); padding: var(--space-3) var(--space-6);
  background: var(--color-panel); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
  font: var(--text-ui-weight) var(--text-ui-size)/1.3 var(--font-sans); overflow-wrap: anywhere;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base);
}
.ui-toast[data-open="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ui-toast[data-tone="ok"] { border-color: var(--color-ok-soft-text); }
.ui-toast[data-tone="warn"] { border-color: var(--color-warn-soft-text); }
.ui-toast[data-tone="danger"] { border-color: var(--color-danger-soft-text); }
@media (min-width: 64rem) { .ui-toast { bottom: var(--space-8); } }
@media print { .ui-toast, .ui-pop { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ui-seg__b, .ui-seg__b::after, .ui-switch__b, .ui-progress::-webkit-progress-value, .btn, .ui-pop, .ui-toast { transition: none; }
}

/* ---------- Окно задачи (dialog size:'task'): ширина --modal-w, композер, оценка колонками, переключатель, тёмная главная кнопка ---------- */
.ui-dialog--task {
  --dlg-top: var(--space-24);
  width: min(var(--modal-w), calc(100% - var(--space-4) * 2)); max-height: calc(100dvh - var(--dlg-top) - var(--space-8));
  margin: var(--dlg-top) auto auto; border: 0; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ring), var(--shadow-md);
}
.ui-dialog--task .ui-dialog__in { gap: var(--space-5); padding: calc(var(--card-pad) + var(--space-1)); }
.ui-dialog--task .ui-dialog__t { font: var(--weight-medium) var(--text-h3-size)/var(--text-h3-line) var(--font-head); letter-spacing: var(--text-h3-track); }
.ui-dialog__ht { display: grid; gap: var(--space-1); min-width: 0; }
.ui-dialog__s { margin: 0; color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ui-dialog--task .ui-dialog__b { display: grid; gap: var(--space-5); color: var(--color-ink); }
.ui-dialog__sec { display: grid; gap: var(--space-3); min-width: 0; }
.ui-dialog__cap { margin: 0; color: var(--color-ink2); font: var(--text-label-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.ui-dialog__note { margin: 0; color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ui-dialog--task .ui-dialog__a { align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.ui-dialog__aside { display: inline-flex; align-items: center; min-height: var(--size-touch-min); margin-right: auto; color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ui-dialog__btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
@media (max-width: 47.9375rem) {
  .ui-dialog--task { --dlg-top: var(--space-8); }
  .ui-dialog__btns { flex-direction: column-reverse; width: 100%; }
  .ui-dialog__btns .btn { width: 100%; }
  .ui-dialog__aside { margin-right: 0; }
}

/* ---------- Композер: рамка-тень, поле без своей рамки, нижняя панель с действиями; кольцо фокуса вокруг всей рамки ---------- */
.ui-composer {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-ctl);
  background: var(--color-panel); color: var(--color-ink); box-shadow: var(--shadow-ring);
}
.ui-composer:focus-within { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: 0; }
.ui-composer__l {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ui-composer__ta {
  display: block; box-sizing: border-box; width: 100%; min-height: calc(var(--size-ctl) * 2.5); padding: var(--space-4) var(--space-4) var(--space-2);
  border: 0; outline: 0; border-radius: var(--radius-ctl) var(--radius-ctl) 0 0; resize: none; background: transparent; color: inherit;
  font: var(--weight-regular) var(--text-ui-size)/1.55 var(--font-sans);
}
.ui-composer__ta::placeholder { color: var(--color-ink3); }
.ui-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2); }
.ui-composer__start, .ui-composer__end { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.ui-composer__end { justify-content: flex-end; margin-left: auto; color: var(--color-ink2); font: var(--weight-regular) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.ui-composer__bar .btn--text { min-height: var(--size-touch-min); }

/* ---------- Оценка: колонки «подпись / значение»; значение с числом — шрифтом чисел, слово (в том числе модель) — обычным ---------- */
.ui-estimate { display: grid; gap: var(--space-3); min-width: 0; }
.ui-estimate__t { margin: 0; color: var(--color-ink2); font: var(--text-label-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.ui-estimate__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-3); margin: 0; }
.ui-estimate__i { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ui-estimate__l { color: var(--color-ink2); font: var(--text-label-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.ui-estimate__v {
  margin: 0; color: var(--color-ink); overflow-wrap: anywhere;
  font: var(--weight-regular) var(--text-ui-size)/var(--text-ui-line) var(--font-num); font-variant-numeric: tabular-nums;
}
.ui-estimate__v[data-kind="text"], .ui-estimate__v[data-kind="model"] { font-family: var(--font-sans); }
.ui-estimate__n { margin: 0; color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
@media (max-width: 47.9375rem) {
  .ui-estimate__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Окно «Новая задача» (openTaskDialog): поле проекта, композер, сообщение об ошибке, переключатель на всю ширину ---------- */
.ui-taskdlg { display: grid; gap: var(--space-5); min-width: 0; }
.ui-taskdlg__proj, .ui-taskdlg__text, .ui-taskdlg__acc { display: grid; gap: var(--space-2); min-width: 0; }
.ui-taskdlg__proj select, .ui-taskdlg__acc select { cursor: pointer; text-overflow: ellipsis; }
.ui-taskdlg__comp .ui-composer__ta { min-height: calc(var(--size-ctl) * 3); }
.ui-taskdlg__err { margin: 0; color: var(--color-danger-text); overflow-wrap: anywhere; font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ui-taskdlg__when { width: 100%; }
@media (pointer: coarse) { .ui-taskdlg__when .ui-switch__b { min-height: var(--size-touch-min); } }
@media (max-width: 47.9375rem) {
  .ui-taskdlg__when .ui-switch__b { padding-inline: var(--space-2); }
}

/* ---------- Касание на телефоне (≤47.9375rem): кнопки, переключатель, поля, флажки и радио — не ниже 44 px; десктоп не меняется ---------- */
@media (max-width: 47.9375rem) {
  .btn, .btn--sm, .btn--text, .ui-switch__b, .ui-seg__b, button.ui-chip, a.ui-chip { min-height: var(--size-touch-min); }
  .btn--text, .ui-dialog__x { min-width: var(--size-touch-min); }
  /* Короткие вкладки («1 ч», «6 ч») без поля вокруг текста были уже 44 px: ширина касания не меньше touch-min, подпись по центру. */
  .ui-seg__b { min-width: var(--size-touch-min); justify-content: center; }
  .ui-field :is(input, select), input[type="number"] { min-height: var(--size-touch-min); }
  /* Ссылка-заголовок группы в «Решениях»: inline-flex с центровкой, чтобы строка не прыгала. Когда decisions.css освободится — перенести туда. */
  .dec__glink { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }
  /* :where — нулевая специфичность: класс экрана при необходимости переопределяет раскладку подписи */
  :where(label:has(input[type="checkbox"], input[type="radio"]), input[type="checkbox"] + label, input[type="radio"] + label) {
    display: inline-flex; align-items: center; min-height: var(--size-touch-min);
  }
}