/* ===== user_settings_html (HTML form, scoped) =====
   Anvil's server strips a <style> block out of an HTML template, so the
   form's rules live here. Loaded eagerly from anvil.yaml native_deps.head_html, which
   is also what styles the designer canvas.

   The form root IS <div class="us-overlay" id="us-overlay" data-mode="settings">,
   so .us-overlay is written bare as the root rule and every other rule is
   scoped :where(.us-overlay), which adds no specificity and so cannot change
   which rule wins.

   Three rules are deliberately NOT :where()-scoped or need a second class:

   * .us-overlay itself, the root rule: no min-height, no overflow, no
     position. This form mounts inside an anvil.alert, not inside a scrolling
     layout port, so the position: relative / flex: 1 0 auto the guide adds to
     a screen root has nothing asking for it.
   * .us-overlay[data-mode="gate"] .us-btn-cancel. Its subject names the root
     as an ancestor AND the root carries the attribute, so :where() would keep
     matching but drop it from (0,2,1) to (0,1,1). It is the only rule that
     hides Cancel in gate mode (__init__.py on_cancel_click defends it in
     Python as well), so it stays bare.
   * .us-error / .us-error.show. In a head <link> these two would be decided
     by file order alone; .show is one class
     heavier, so the reveal wins on specificity instead. Written in that order
     so the intent reads the same way it resolves.

   No rule here ties with anything the dependency injects at runtime: this
   sheet declares no .px-* selector and the template applies no px-* class.

   No designer gate. The only hidden-until-JS state is .us-error, so the
   canvas shows the form as the operator first sees it and this leaf carries
   no live class. */

.us-overlay {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0f172a;
  padding: 4px;
  min-width: min(420px, calc(100vw - 64px));
}

:where(.us-overlay) .us-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px;
}

:where(.us-overlay) .us-subtitle {
  font-size: 0.95rem;
  color: #475569;
  margin: 0 0 16px;
}

:where(.us-overlay) .us-email {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 16px;
}

:where(.us-overlay) .us-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

:where(.us-overlay) .us-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

:where(.us-overlay) .us-input {
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
}

:where(.us-overlay) .us-input:focus {
  outline: none;
  border-color: #e11d48;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

:where(.us-overlay) .us-input[disabled] {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

:where(.us-overlay) .us-error {
  display: none;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 0.85rem;
  border-radius: 6px;
  margin: 4px 0 12px;
}

:where(.us-overlay) .us-error.show {
  display: block;
}

:where(.us-overlay) .us-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

:where(.us-overlay) .us-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  min-height: 36px;
  border: 1px solid transparent;
}

:where(.us-overlay) .us-btn-cancel {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

:where(.us-overlay) .us-btn-cancel:hover { background: #e2e8f0; }

:where(.us-overlay) .us-btn-save {
  background: #e11d48;
  color: #ffffff;
  border-color: #be123c;
}

:where(.us-overlay) .us-btn-save:hover { background: #be123c; }

:where(.us-overlay) .us-btn-save[disabled],
:where(.us-overlay) .us-btn-cancel[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

:where(.us-overlay) .us-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.us-overlay[data-mode="gate"] .us-btn-cancel {
  display: none;
}