/*
 * Shared form controls for the Personal Growth Workbench.
 * Keep structural page styling in the page stylesheets; this layer owns the
 * final, reusable control details that must remain consistent everywhere.
 */

:root {
  --pg-select-arrow-inset: 14px;
  --pg-select-arrow-size: 14px;
  --pg-select-content-end: 42px;
}

/*
 * Replace the platform arrow on single-value selects so compact filters and
 * full-width forms share the same calm edge spacing. Multiple-choice listboxes
 * retain their native affordance and scrolling behavior.
 */
select:not([multiple]):not([size]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4.5 6.25 3.5 3.5 3.5-3.5' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--pg-select-arrow-inset) center !important;
  background-size: var(--pg-select-arrow-size) !important;
  padding-right: var(--pg-select-content-end) !important;
  padding-inline-end: var(--pg-select-content-end) !important;
}

@media (forced-colors: active) {
  select:not([multiple]):not([size]) {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    background-image: none !important;
    padding-right: 12px !important;
    padding-inline-end: 12px !important;
  }
}