/* Med-Compas Common Components — buttons, cards, form-fields.
   Per-component CSS (header/footer/etc.) — в public.css или отдельных файлах. */

/* ───────────────────────────────────────────────────────
   Buttons
   ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;                       /* min touch target (D6) */
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:disabled,
.btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.btn-tertiary {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
  padding-inline: var(--space-md);
}
.btn-tertiary:hover,
.btn-tertiary:focus-visible {
  background: var(--color-bg-section);
  color: var(--color-primary);
}

.btn-lg {
  min-height: 56px;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--fs-lg);
}

.btn-sm {
  min-height: 40px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-sm);
}

.btn-block {
  width: 100%;
}

.btn [data-lucide], .btn .lucide { width: var(--icon-sm); height: var(--icon-sm); }

/* ───────────────────────────────────────────────────────
   Cards
   ─────────────────────────────────────────────────────── */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.card-clickable {
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text);
  display: block;
}
.card-clickable:hover,
.card-clickable:focus-visible {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);                /* НЕ scale (skill ux: layout-shifting hovers) */
  border-color: var(--color-primary-soft);
  text-decoration: none;
}

/* ───────────────────────────────────────────────────────
   Form fields
   ─────────────────────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-md);
}
.form-field > label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;                         /* min touch target */
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.form-field textarea { min-height: 96px; resize: vertical; }

.form-field .hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.form-field .error,
.form-field input[aria-invalid="true"] + .error {
  color: var(--color-danger);
  font-size: var(--fs-sm);
  margin-top: var(--space-xs);
}
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.15);
}

.form-field-checkbox {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.form-field-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.form-field-checkbox a { color: var(--color-primary); }

/* Status banners (form feedback per skill ux: Submit Feedback severity High) */
.form-status {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.form-status:empty { display: none; }
.form-status.is-success { background: #E6F4EA; color: var(--color-success); }
.form-status.is-error   { background: #FCE8E6; color: var(--color-danger); }

/* Honeypot — invisible to users, visible to bots */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }