/* ============================================================
   NEXORA · User frontend / Global form controls
   The ONE global custom UI for text fields and dropdowns across
   the entire user side (landing page, Explore, app shell). Loaded
   by all three documents — every select.input in the system gets
   a theme-aware chevron instead of the browser default arrow.

   Covers: landing auth + app screens (sorts, filters, sheet type,
   circuit/project pickers, TTS/prefs selects) and manage screens
   that reuse select.input (learning, community). The management
   console's own controls live separately in
   manage/css/admin-form-controls.css — never mix the two files.
   ============================================================ */

/* Match the body typeface instead of the UA system font. */
.input {
  font-family: inherit;
}

/* ---------- Custom dropdown (global) ------------------------
   appearance:none drops the native bevel and arrow; the chevron
   is a theme-aware inline SVG (light + dark variants). The option
   rule themes the OS popup list where the platform allows it. */

select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.9em;
}

[data-theme="dark"] select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a8b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select.input::-ms-expand { display: none; }

select.input:disabled,
.input:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

select.input option,
select.input optgroup {
  background: var(--bg-elevated);
  color: var(--text-1);
}

/* ---------- Textarea polish -------------------------------- */

textarea.input {
  resize: vertical;
  min-height: 3.2rem;
  line-height: var(--leading-relaxed);
}