/* Окно «Прокси» (docs/design/proxy-pool-spec.md): размер окна не зависит от числа прокси и строк; прокручиваются
   только список плиток и блок итога; полоса хода и подвал всегда видны. Только токены DESIGN.md. */
#modal:has(.pool-dialog) { width: min(980px, calc(100vw - 32px)); height: min(86dvh, 760px); }
.pool-dialog .modal-head { gap: 16px; }
.pool-dialog .pool-head { display: flex; flex: 1; align-items: center; gap: 16px; min-width: 0; }
.pool-dialog .pool-tabs { flex: none; overflow: visible; }
.pool-dialog .pool-tabs .n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.pool-dialog .modal-body { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.pool-dialog .pool-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.pool-dialog .pool-panel[hidden] { display: none; }

.pool-dialog .pool-toolbar { display: flex; flex: none; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.pool-dialog .pool-toolbar .chips { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; margin: -4px; padding: 4px; overflow-x: auto; scrollbar-width: none; }   /* 4px — место под кольцо фокуса; длинные счётчики не выталкивают «Проверить все» */
.pool-dialog .pool-toolbar .chip .n { font-variant-numeric: tabular-nums; }
.pool-dialog .pool-toolbar .search-field { flex: 1; min-width: 120px; }
.pool-dialog .pool-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 12px 8px 16px 20px; }
.pool-dialog .pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 8px; }
.pool-dialog .pool-group { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 8px 0; font-size: var(--fs-md); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.pool-dialog .pool-group:first-child { padding-top: 0; }
.pool-dialog .pool-group .n { color: var(--text-3); font-weight: 500; }

.pool-dialog .pool-tile { display: grid; grid-template-rows: 30px 22px 16px; row-gap: 4px; height: 96px; min-width: 0; padding: 10px 8px 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); transition: border-color var(--dur) ease-out; }
.pool-dialog .pool-tile:hover { border-color: var(--line-2); }
.pool-dialog .pool-tile.is-new { border-color: var(--accent); }
.pool-dialog .pool-tile.is-confirm { grid-template-rows: 20px 16px 30px; border-color: var(--bad); background: var(--bad-soft); }
.pool-dialog .pool-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pool-dialog .pool-ep { display: flex; flex: 1; min-width: 0; font-family: var(--font-data); font-size: var(--fs-sm2); font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.pool-dialog .pool-host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-dialog .pool-port { flex: none; }
.pool-dialog .pool-acts { display: flex; flex: none; gap: 4px; }
.pool-dialog .pool-acts .btn { color: var(--text-2); }
.pool-dialog .pool-mid { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; }
.pool-dialog .pool-mid .badge { margin-left: auto; flex: none; }
.pool-dialog .pool-mark { color: var(--accent-text); font-weight: 500; }
.pool-dialog .pool-sub { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-sm); line-height: 16px; color: var(--text-3); white-space: nowrap; }
.pool-dialog .pool-sub .st { font-size: var(--fs-sm); }
.pool-dialog .pool-sub .pool-why { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.pool-dialog .pool-confirm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); line-height: 16px; color: var(--text); }
.pool-dialog .pool-confirm-acts { display: flex; justify-content: flex-end; gap: 8px; }
.pool-dialog .pool-tile.is-confirm .pool-mid, .pool-dialog .pool-tile.is-confirm .pool-sub, .pool-dialog .pool-tile.is-confirm .pool-acts { display: none; }

.pool-dialog .pool-strip { position: relative; display: flex; flex: none; align-items: center; gap: 12px; min-height: 48px; padding: 8px 20px; border-top: 1px solid var(--line); font-size: var(--fs-md); color: var(--text-2); }
.pool-dialog .pool-bar { position: absolute; top: -1px; left: 0; right: 0; height: 4px; background: var(--line); }
.pool-dialog .pool-bar[hidden] { display: none; }
.pool-dialog .pool-bar b { display: block; height: 100%; background: var(--accent); transition: width 200ms ease-out; }
.pool-dialog .pool-strip-text { flex: 1; min-width: 0; }
.pool-dialog .pool-strip-text strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pool-dialog .pool-strip #modal-error { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-md); }
.pool-dialog .pool-strip:has(#modal-error:not(:empty)) .pool-strip-text { display: none; }   /* ошибка встаёт на место строки хода */
.pool-dialog .pool-strip-act:empty { display: none; }
.pool-dialog .pool-strip .btn { flex: none; }

.pool-dialog .pool-add { display: grid; grid-template-columns: minmax(0, 1fr) 360px; flex: 1; min-height: 0; }
.pool-dialog .pool-add[hidden] { display: none; }
.pool-dialog .pool-field { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 16px 20px; font-size: var(--fs-md); font-weight: 500; color: var(--text-2); }
.pool-dialog .pool-field-head { display: flex; justify-content: space-between; gap: 12px; }
.pool-dialog .pool-count { font-weight: 400; color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pool-dialog .pool-count.is-over { color: var(--bad); }
.pool-dialog .pool-field textarea { flex: 1; min-height: 0; resize: none; font-family: var(--font-data); font-size: var(--fs-sm2); line-height: 20px; white-space: pre; overflow: auto; }
.pool-dialog .pool-field small { font-weight: 400; color: var(--text-3); font-size: var(--fs-sm); }
.pool-dialog .pool-issues { min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 16px 12px 16px 16px; border-left: 1px solid var(--line); font-size: var(--fs-md); }
.pool-dialog .pool-sec + .pool-sec { margin-top: 16px; }
.pool-dialog .pool-sec h3 { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.pool-dialog .pool-sec h3 .n { color: var(--text-3); font-weight: 500; }
.pool-dialog .pool-issue { padding: 8px 0; border-top: 1px solid var(--line); }
.pool-dialog .pool-issue p { color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
.pool-dialog .pool-issue .pool-lines { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pool-dialog .pool-eps { list-style: none; margin: 4px 0 0; padding: 0; color: var(--text-2); font-family: var(--font-data); font-size: var(--fs-sm); line-height: 18px; overflow-wrap: anywhere; }
.pool-dialog .pool-ok-note { color: var(--text-2); }
.pool-dialog .pool-issues-empty { color: var(--text-3); }

.pool-dialog .modal-footer { align-items: center; }
.pool-dialog .pool-foot-note { margin-right: auto; color: var(--text-3); font-size: var(--fs-sm); }

@media (max-width: 1023px) {
 .pool-dialog .pool-toolbar { flex-wrap: wrap; gap: 8px 12px; }
 .pool-dialog .pool-toolbar .search-field { order: 1; flex: 1 1 0; min-width: 0; }
 .pool-dialog .pool-toolbar .pool-check-all { order: 2; }
 .pool-dialog .pool-toolbar .chips { order: 3; flex: 1 0 100%; }
}
@media (max-width: 767px) {
 #modal:has(.pool-dialog) { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
 .pool-dialog .modal-head { flex-wrap: wrap; row-gap: 8px; padding: 8px 8px 8px 16px; }
 .pool-dialog .pool-head { display: contents; }
 .pool-dialog .pool-head h2 { flex: 1; }
 .pool-dialog .pool-tabs { order: 3; flex: 1 0 100%; margin-right: 8px; }
 .pool-dialog .pool-tabs .tab { flex: 1; justify-content: center; }
 .pool-dialog .pool-toolbar { gap: 8px; padding: 8px 16px; }
 .pool-dialog .pool-toolbar .chips { margin: -4px -16px; padding: 4px 16px; scroll-padding-inline: 16px; }   /* фокус с клавиатуры прокручивает ленту к чипу целиком, а не к краю экрана */
 .pool-dialog .pool-toolbar .btn, .pool-dialog .pool-strip .btn, .pool-dialog .pool-confirm-acts .btn { height: 40px; }
 .pool-dialog:not(:has(#pool-add:not([hidden]))) .modal-footer { display: none; }   /* в списке подвал только «Закрыть» — его заменяет × */
 .pool-dialog .pool-scroll { padding: 8px 16px 16px; scrollbar-gutter: auto; }
 .pool-dialog .pool-grid { grid-template-columns: minmax(0, 1fr); }
 .pool-dialog .pool-tile { grid-template-rows: 40px 22px 16px; height: 102px; padding: 8px 4px 8px 12px; }
 .pool-dialog .pool-tile.is-confirm { grid-template-rows: 20px 16px 40px; padding-right: 8px; }
 .pool-dialog .pool-acts .btn.icon-btn { width: 40px; height: 40px; }
 .pool-dialog .pool-strip { padding: 8px 16px; min-height: 56px; }
 .pool-dialog .pool-add { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(200px, 45%) minmax(0, 1fr); }
 .pool-dialog .pool-field { padding: 12px 16px; }
 .pool-dialog .pool-issues { border-left: 0; border-top: 1px solid var(--line); padding: 12px 16px; }
 .pool-dialog .pool-issue .pool-lines .btn { height: 40px; }
 .pool-dialog .pool-foot-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pool-dialog .pool-bar b, .pool-dialog .pool-tile { transition: none; } }
