/**
 * Bundled global UI: live-form hints.
 * Palette: ../css/design-tokens.css
 */

:root {
  --fz-brand: var(--btn-brand-bg);
  --fz-brand-hover: var(--btn-brand-hover);
  --fz-danger: var(--color-error-border-strong);
  --fz-danger-soft: var(--color-error-bg);
  --fz-radius-input: 8px;
  --fz-radius-panel: 10px;
  --fz-shadow-soft: var(--shadow-soft);
}

textarea {
  max-width: 100%;
}

.container {
  box-shadow: var(--fz-shadow-soft);
}

.settings-submit {
  transition:
    filter 0.15s ease,
    transform 0.12s ease;
}

.settings-submit:active {
  transform: scale(0.98);
}

.form-field {
  position: relative;
}

.js-live-hint {
  display: none;
  font-size: 0.86rem;
  line-height: 1.4;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: var(--fz-radius-panel);
  border: 1px solid var(--hint-info-border);
  background: var(--hint-info-bg);
  color: var(--hint-info-text);
}

.js-live-hint.is-visible {
  display: block;
}

.js-live-hint--warn {
  border-color: var(--color-error-border);
  background: var(--hint-warn-bg);
  color: var(--hint-warn-text);
}

.form-field--client-warn .settings-input,
.form-field--client-warn select,
.form-field--client-warn textarea {
  border-color: var(--color-warn) !important;
  box-shadow: 0 0 0 2px var(--color-warn-glow);
}

.form-field--has-error .js-live-hint {
  display: none !important;
}