/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Мастер первой настройки, шаги 5–6 (классы swf-): первое задание и итог-чеклист. Значения — только из tokens.css, размеры в rem.
   Подключается в index.html после kit.css. */

.swf { display: grid; gap: var(--space-5); min-width: 0; color: var(--color-ink); }
.swf [hidden] { display: none; }
.swf[aria-busy="true"] { cursor: progress; }
.swf-title { margin: 0; font: var(--weight-medium) var(--text-h2-size)/var(--text-h2-line) var(--font-head); letter-spacing: var(--text-h2-track); overflow-wrap: anywhere; }
.swf-title:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); border-radius: var(--radius-xs); }
.swf-lead { margin: 0; color: var(--color-ink2); font: var(--weight-regular) var(--text-lead-size)/var(--text-lead-line) var(--font-sans); overflow-wrap: anywhere; }
.swf-hint, .swf-note { margin: 0; color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.swf-note { color: var(--color-warn-text); }
.swf-error { margin: 0; color: var(--color-danger-text); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.swf-error:empty { display: none; }
.swf-link { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.swf-link:hover { text-decoration-thickness: 0.125rem; }
.swf-link:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); border-radius: var(--radius-xs); }

/* ---------- Первое задание ---------- */
.swf-field { display: grid; gap: var(--space-2); min-width: 0; }
.swf-label { color: var(--color-ink2); font: var(--text-label-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.swf-input {
  width: 100%; min-height: calc(var(--size-touch-min) * 2); padding: var(--space-3) var(--space-4); box-sizing: border-box; resize: vertical;
  background: var(--color-panel); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--radius-ctl);
  font: var(--weight-regular) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.swf-input:hover { border-color: var(--color-ink3); }
.swf-input::placeholder { color: var(--color-ink3); }
.swf-input:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); border-color: var(--color-ink); }
.swf-input[aria-invalid="true"] { border-color: var(--color-danger); }
.swf-examples { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.swf-ex { min-width: 0; max-width: 100%; }
.swf-chip {
  display: block; max-width: 100%; min-height: var(--size-touch-min); padding: var(--space-2) var(--space-4); box-sizing: border-box; text-align: start;
  background: var(--color-panel); color: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--radius-ctl); cursor: pointer;
  font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.swf-chip:hover { background: var(--color-panel2); border-color: var(--color-line2); }
.swf-chip:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.swf-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.swf-actions .btn { min-height: var(--size-touch-min); }
.swf-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.swf-links .btn { min-height: var(--size-touch-min); text-decoration: none; }

/* ---------- Итог-чеклист ---------- */
.swf-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.swf-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-width: 0;
  padding: var(--space-3) var(--space-4); box-sizing: border-box; min-height: var(--size-touch-min);
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-ctl);
}
.swf-row__mark { display: inline-flex; color: var(--color-ink3); }
.swf-row__mark .ic { width: var(--size-icon); height: var(--size-icon); }
.swf-row[data-status="done"] .swf-row__mark { color: var(--color-ok-text); }
.swf-row[data-status="attention"] .swf-row__mark { color: var(--color-warn-text); }
.swf-row__body { display: grid; gap: var(--space-1); min-width: 0; }
.swf-row__title { font: var(--weight-medium) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); overflow-wrap: anywhere; }
.swf-row__status { color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.swf-row .btn { min-height: var(--size-touch-min); }

@media (max-width: 30rem) {
  .swf-row { grid-template-columns: auto minmax(0, 1fr); }
  .swf-row .btn { grid-column: 1 / -1; justify-self: stretch; }
  .swf-actions .btn, .swf-links .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .swf-input, .swf-chip { transition: none; }
}