/* Forms: accessible defaults for every <form> on the site. Loaded after styles.css. */

/* ---------- Forms ----------
   Pico CSS used to auto-style form elements; after migrating to Basecoat
   (which is opt-in by class), raw <label>/<input>/<select>/<textarea>
   fell back to browser defaults — labels rendered inline next to placeholders.
   These rules restore proper, accessible defaults for every <form> on the site.
   :where() keeps specificity at 0 so utility classes (mb-0, grid, etc.) win.
   ============================================================ */

/* Stack form rows vertically with consistent spacing.
   Forms that opt into Tailwind's `grid` (e.g. market-analyzer) override this
   automatically — `.grid` from Tailwind beats :where(form). */
:where(form) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Labels sit above their controls with clear weight + breathing room. */
:where(form label) {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: var(--ppp-text-sm);
  line-height: 1.4;
  color: var(--ppp-text);
}

/* Text-style inputs, selects, and textareas share a single look.
   Filled background (slightly darker than the surrounding card) makes each
   field unambiguously a field at a glance — the consumer-app pattern used
   by Stripe, Linear, Notion, etc. */
:where(
  form input[type="text"],
  form input[type="email"],
  form input[type="tel"],
  form input[type="url"],
  form input[type="number"],
  form input[type="search"],
  form input[type="password"],
  form input[type="date"],
  form input[type="datetime-local"],
  form input[type="month"],
  form input[type="time"],
  form input[type="week"],
  form input:not([type]),
  form textarea,
  form select
) {
  display: block;
  box-sizing: border-box; /* padding included in width — width:100% fills the cell exactly */
  width: 100%;
  min-height: 3.25rem;
  min-width: 0; /* prevents flex/grid overflow when content-box padding is present */
  margin: 0;
  /* Standardize “consumer app” inner spacing and ensure it wins over any
     component-layer defaults (Basecoat/Tailwind/reset). `color` and
     `background-color` carry `!important` for the same reason: Basecoat's
     preflight sets `color: inherit` on bare inputs and `--foreground`
     in :root wins against `:where()` (zero specificity), leaving dark
     text on a dark field — i.e. unreadable. */
  padding-block: 0.95rem !important;
  padding-inline: 1.5rem !important;
  font-family: inherit;
  font-size: var(--ppp-text-base);
  line-height: 1.5;
  color: var(--ppp-text) !important;
  -webkit-text-fill-color: var(--ppp-text);
  background-color: var(--ppp-bg-alt) !important;
  border: 1px solid var(--ppp-border);
  border-radius: var(--ppp-radius-lg);
  box-shadow: inset 0 1px 2px rgba(15, 23, 30, 0.04);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color var(--ppp-duration) var(--ppp-ease),
              box-shadow var(--ppp-duration) var(--ppp-ease),
              background-color var(--ppp-duration-md) var(--ppp-ease);
}

[data-theme="dark"] :where(
  form input[type="text"],
  form input[type="email"],
  form input[type="tel"],
  form input[type="url"],
  form input[type="number"],
  form input[type="search"],
  form input[type="password"],
  form input[type="date"],
  form input[type="datetime-local"],
  form input[type="month"],
  form input[type="time"],
  form input[type="week"],
  form input:not([type]),
  form textarea,
  form select
) {
  background-color: var(--ppp-bg) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Subtle hover lift — telegraphs interactivity to mouse users. */
:where(
  form input[type="text"]:hover,
  form input[type="email"]:hover,
  form input[type="tel"]:hover,
  form input[type="url"]:hover,
  form input[type="number"]:hover,
  form input[type="search"]:hover,
  form input[type="password"]:hover,
  form input[type="date"]:hover,
  form input:not([type]):hover,
  form textarea:hover,
  form select:hover
) {
  border-color: var(--ppp-text-muted);
}

:where(form textarea) {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.6;
}

form input::placeholder,
form textarea::placeholder {
  color: var(--ppp-text-muted) !important;
  -webkit-text-fill-color: var(--ppp-text-muted) !important;
  opacity: 0.28 !important;
  font-style: italic;
}

/* Placeholder text is instructional, not entered data. Keep it visibly dimmed
   even though the input itself uses a strong color for real submissions. */
form input::placeholder,
form textarea::placeholder {
  letter-spacing: 0.01em;
}

:where(form select:invalid) {
  color: var(--ppp-text-muted) !important;
  opacity: 0.62;
  font-style: italic;
}

:where(form select:valid) {
  opacity: 1;
  font-style: normal;
}

/* Custom dropdown chevron (replaces native arrow hidden by appearance:none).
   Light theme: slate-500. Dark theme override below uses a lighter stroke. */
:where(form select) {
  /* Keep room for the chevron with larger inline padding */
  padding-right: 3.25rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1rem 1rem;
  cursor: pointer;
}

[data-theme="dark"] :where(form select) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Focus state — field "lifts" out of the card with a brighter background
   and the brand-blue ring. Clear, accessible, and friendly. */
form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  background-color: var(--ppp-surface) !important;
  border-color: var(--pico-primary);
  box-shadow: 0 0 0 3px var(--ppp-blue-glow);
}

[data-theme="dark"] form input:focus,
[data-theme="dark"] form select:focus,
[data-theme="dark"] form textarea:focus {
  background-color: var(--ppp-surface) !important;
}

/* Disabled state */
:where(
  form input:disabled,
  form select:disabled,
  form textarea:disabled
) {
  background-color: var(--ppp-bg-alt) !important;
  color: var(--ppp-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Browser-native invalid styling is too aggressive (red glow on every empty
   required field before the user has even interacted). Only show invalid
   styling once the user submits — JS in script.js adds .was-validated. */
form.was-validated input:invalid,
form.was-validated select:invalid,
form.was-validated textarea:invalid {
  border-color: var(--ppp-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* Checkbox + radio: keep native rendering, just align nicely in label rows. */
:where(form input[type="checkbox"], form input[type="radio"]) {
  width: 1.05rem;
  height: 1.05rem;
  margin-right: 0.5rem;
  accent-color: var(--pico-primary);
  vertical-align: middle;
}

/* Form submit buttons:
   - `.btn` ships with `display: inline-block`, so the label drifts off-center
     when the button is stretched full-width (`.w-full`) inside a flex form.
     Switching to `inline-flex` with explicit centering fixes that.
   - Match the field min-height so the submit row reads as part of the same
     visual rhythm as the inputs above it.
   Specificity (0,1,2) beats `.btn` (0,1,0) without `!important`. */
form button[type="submit"],
form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  line-height: 1.2;
}

/* Give the submit button a little breathing room from the last field. */
form button[type="submit"] {
  margin-top: 0.25rem;
}

/* Form status message (success / error / loading) */
.form-status {
  display: none;
  margin-top: 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--ppp-radius);
  border: 1px solid var(--ppp-border);
  background: var(--ppp-surface);
  color: var(--ppp-text);
  transition: all var(--ppp-duration-md) var(--ppp-ease);
}

.form-status.success {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
}

[data-theme="dark"] .form-status.success {
  color: #4ade80;
}

.form-status.error {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.10);
  color: #dc2626;
}

[data-theme="dark"] .form-status.error {
  color: #f87171;
}

.form-status.loading {
  border-color: rgba(62, 176, 239, 0.35);
  background: rgba(62, 176, 239, 0.10);
  color: var(--pico-primary);
}