/* «ИИ: модели и скилы» (/admin/ai): карточки маршрутов, пробные варианты, панель сохранения, статистика вариантов. */
.ai-panel:focus-visible { outline: var(--focus-w) solid var(--ring); outline-offset: var(--focus-offset); }
.seg-btn[aria-pressed="true"] { background: var(--seg-active-bg); color: var(--seg-active-fg); border-color: var(--seg-active-border);
  box-shadow: var(--seg-active-shadow); font-weight: var(--fw-semibold); }
.seg-btn .icon { width: 14px; height: 14px; margin-right: var(--s1); vertical-align: -2px; }

.ai-route { display: flex; flex-direction: column; gap: var(--s4); }
.ai-route.is-changed { border-color: var(--warn); }
.ai-route-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s2) var(--s3); }
.ai-route-head h3 { font-size: var(--fs-lg); text-wrap: balance; }
.ai-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s3) var(--s4); }
.ai-wide { grid-column: 1 / -1; }
.field > label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.field > span[id] { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.ai-model { display: flex; gap: var(--s2); align-items: center; }
.ai-model select { flex: 1 1 auto; min-width: 0; }
.ai-model .btn { flex: none; }

.ai-canaries { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s3); border-top: var(--border-w) solid var(--border); }
.ai-canaries h4 { font-size: var(--fs-md); }
.ai-canary { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border: var(--border-w) solid var(--border);
  border-radius: var(--r); background: var(--surface-2); }
.ai-canary-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 96px auto; gap: var(--s3); align-items: end; }
.ai-canary summary { cursor: pointer; font-size: var(--fs-sm); color: var(--fg-muted); min-height: 32px; display: flex; align-items: center; }
.ai-canary summary:focus-visible { outline: var(--focus-w) solid var(--ring); outline-offset: var(--focus-offset); border-radius: var(--r-sm); }
.ai-skills .chips { padding-top: var(--s2); }
.ai-route button.chip { min-height: 32px; padding-inline: var(--s3); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ai-route button.chip:focus-visible { outline: var(--focus-w) solid var(--ring); outline-offset: var(--focus-offset); }
.ai-route button.chip[aria-pressed="true"]::before { content: "\2713"; font-weight: var(--fw-semibold); }
.ai-route .error:empty { display: none; }

.ai-savebar { position: sticky; bottom: var(--s3); z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 320px) auto;
  gap: var(--s3); align-items: end; padding: var(--s3) var(--s4); background: var(--surface-1); border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.ai-bar-error { grid-column: 1 / -1; }
.ai-bar-error:empty { display: none; }

.ai-stats td code { font-size: var(--fs-sm); }
.ai-stats .chip + .chip { margin-left: var(--s1); }
.ai-stats tr.ai-best { background: var(--success-soft); }
.ai-summary { white-space: pre-line; text-wrap: pretty; }
.ai-recs li { display: block; }
.ai-recs li + li { border-top: var(--border-w) solid var(--border); }
.ai-review .card-head { align-items: flex-start; flex-wrap: wrap; }

@media (max-width: 760px) {
  .ai-canary-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ai-canary-main > :first-child { grid-column: 1 / -1; }
  .ai-savebar { grid-template-columns: 1fr; bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .ai-savebar .row .btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .ai-model { flex-wrap: wrap; }
  .ai-model select { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ai-route button.chip { transition: none; } }