/* KM Status — база: сброс, типографика, ссылки, формы, фокус, утилиты. */
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs-md)/1.5 var(--font);
  text-rendering: optimizeLegibility;
}
button, input, select, textarea, summary { font: inherit; color: inherit; }
button, a, input, select, summary, label { -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* Текст */
h1, h2, h3, p, li, td, th { overflow-wrap: break-word; }
h1 { margin: 0; font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
h1 small {
  display: block;
  max-width: 72ch;
  margin-top: var(--sp-2);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}
h1 small.mono { font-size: var(--fs-sm); }
h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); font-weight: 650; line-height: 1.3; }
h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-md); font-weight: 650; line-height: 1.4; }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: var(--sp-2) 0 var(--sp-4); padding-left: var(--sp-6); }
b, strong { font-weight: 650; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
a:active { color: var(--accent-active); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }

/* Формы */
label { display: block; margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-sm); font-weight: 600; }
input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-md);           /* не меньше 16 px, иначе iOS зумит */
}
input::placeholder { color: var(--fg-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--fg-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: 0; }
input:disabled, select:disabled { background: var(--surface-2); color: var(--fg-muted); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); box-shadow: none; }
input[type="file"] { padding: 9px; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
select { padding-right: 36px; background-image: url(/static/icons/chevron.svg); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; -webkit-appearance: none; appearance: none; }
select.auto { width: auto; }
fieldset { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); }
legend { padding: 0 var(--sp-2); font-weight: 650; }
.hint { display: block; margin-top: var(--sp-1); color: var(--fg-muted); font-size: var(--fs-xs); }
.field-error { display: block; margin-top: var(--sp-1); color: var(--bad); font-size: var(--fs-xs); font-weight: 600; }
.form-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.form-row > * { margin: 0; }
.form-row input:not([type="hidden"]) { width: auto; flex: 1 1 220px; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; margin-top: var(--sp-5); }
form.inline { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0; }
form.inline input:not([type="hidden"]) { width: auto; min-width: 160px; }
label.confirm { display: flex; gap: var(--sp-3); align-items: flex-start; margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-md); font-weight: 500; }
label.confirm input { flex: 0 0 auto; margin-top: 2px; }

/* Утилиты (имена фиксированы JS и шаблонами) */
.ok { color: var(--ok); }
.error { color: var(--bad); }
.muted { color: var(--fg-muted); }
.small { font-size: var(--fs-sm); font-weight: 400; }
.mono { font-family: var(--mono); font-size: .94em; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.mobile-only { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed;
  inset: var(--sp-2) auto auto var(--sp-2);
  z-index: var(--z-skip);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  translate: 0 -160%;
}
.skip-link:focus { translate: 0; }

/* Движение */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 767px) {
  h1 { font-size: var(--fs-xl); }
  .mobile-only { display: inline-flex !important; }
  .form-row > *, .form-row input:not([type="hidden"]) { width: 100%; flex: 1 1 100%; }
  form.inline { width: 100%; }
  form.inline input:not([type="hidden"]), form.inline button { width: 100%; }
}