/* Form controls in the brand style (PRJ-157), shared by every page.
   Palette as on landing.html: wells #0a0a12, cards #13131f, indigo #6366f1 /
   #818cf8, button gradient #5b5ef0 → #9333ea. */

/* ── Checkboxes and radios ──────────────────────────────────────────────
   Dark field, light border; checked = the button gradient with a white tick
   (checkbox) or dot (radio). Switches (role="switch") keep their own look.
   The .pf-switch toggles (an invisible checkbox over a track) are switches too.
   20 px box; the surrounding <label> gives the 24 px target. Sizes a page
   sets itself (e.g. 24 px in the AI wizard) still win. */
/* Size at zero specificity, so a page's own size/margin rule keeps winning. */
:where(input[type="checkbox"]:not([role="switch"]):not(.pf-switch input), input[type="radio"]:not([role="switch"]):not(.pf-switch input)) {
  width: 20px; height: 20px; flex: none; vertical-align: middle;
}
input[type="checkbox"]:not([role="switch"]):not(.pf-switch input),
input[type="radio"]:not([role="switch"]):not(.pf-switch input) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  box-sizing: border-box; min-width: 18px; min-height: 18px;
  background-color: #0a0a12; background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
  border: 1.5px solid #757585; border-radius: 5px; /* ≥ 3:1 on #0a0a12 … #22222f (WCAG 1.4.11) */
  color-scheme: dark; cursor: pointer; accent-color: #6366f1;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
input[type="radio"]:not([role="switch"]):not(.pf-switch input) { border-radius: 50%; }
input[type="checkbox"]:not([role="switch"]):not(.pf-switch input):hover:not(:disabled),
input[type="radio"]:not([role="switch"]):not(.pf-switch input):hover:not(:disabled) { border-color: rgba(165, 180, 252, .75); }
input[type="checkbox"]:not([role="switch"]):not(.pf-switch input):checked,
input[type="checkbox"]:not([role="switch"]):not(.pf-switch input):indeterminate,
input[type="radio"]:not([role="switch"]):not(.pf-switch input):checked {
  border-color: transparent; background-color: #6366f1;
}
input[type="checkbox"]:not([role="switch"]):not(.pf-switch input):checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg, #5b5ef0, #9333ea);
}
input[type="checkbox"]:not([role="switch"]):not(.pf-switch input):indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10h9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"), linear-gradient(135deg, #5b5ef0, #9333ea);
}
input[type="radio"]:not([role="switch"]):not(.pf-switch input):checked {
  background-image: radial-gradient(circle, #fff 0 27%, transparent 31%), linear-gradient(135deg, #5b5ef0, #9333ea);
}
input[type="checkbox"]:not([role="switch"]):not(.pf-switch input):disabled,
input[type="radio"]:not([role="switch"]):not(.pf-switch input):disabled { opacity: .5; cursor: not-allowed; }
/* Same visible keyboard focus as every other form control (WCAG 2.4.7). */
input[type="checkbox"]:not([role="switch"]):not(.pf-switch input):focus-visible,
input[type="radio"]:not([role="switch"]):not(.pf-switch input):focus-visible {
  outline: 2px solid #818cf8 !important; outline-offset: 2px;
}
/* Windows high-contrast: let the system draw the controls. */
@media (forced-colors: active) {
  input[type="checkbox"]:not([role="switch"]):not(.pf-switch input),
  input[type="radio"]:not([role="switch"]):not(.pf-switch input) { -webkit-appearance: auto; appearance: auto; }
}

/* ── Dropdowns ───────────────────────────────────────────────────────────
   The one source of the select look (every page loads this file).
   Closed field: dark with one chevron; color-scheme: dark keeps the native
   list dark where the browser honours it (touch devices, data-native-select).
   !important because many selects set an inline `background` shorthand,
   which would drop the chevron image. The list that opens on desktop comes
   from js/pf-select.js (role="listbox", card style). */
select {
  color-scheme: dark;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a3aec2'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  padding-right: 34px !important;
  min-height: 24px;
}
select[multiple], select[size]:not([size="1"]) { background-image: none !important; padding-right: 12px !important; }
select option, select optgroup { background-color: #13131f; color: #e2e8f0; }
select[aria-expanded="true"] { border-color: #6366f1 !important; }

.pf-listbox {
  position: fixed; z-index: 10050; box-sizing: border-box; width: max-content;
  margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain;
  background: #13131f; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .75), 0 0 0 1px rgba(99, 102, 241, .08);
  color: #e2e8f0; font-family: inherit; line-height: 1.35; text-align: left;
  animation: pf-listbox-in .12s ease both;
}
.pf-listbox:focus { outline: none; }
@keyframes pf-listbox-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.pf-listbox.is-up { animation-name: pf-listbox-in-up; }
@keyframes pf-listbox-in-up { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pf-listbox { animation: none; } }
.pf-listbox-group {
  padding: 8px 10px 4px; font-size: .78em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a3aec2;
}
.pf-option {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 12px 6px 8px;
  border-radius: 7px; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.pf-option-check { flex: none; width: 16px; height: 16px; color: #a5b4fc; visibility: hidden; }
.pf-option[aria-selected="true"] { color: #fff; font-weight: 600; }
.pf-option[aria-selected="true"] .pf-option-check { visibility: visible; }
.pf-option.is-active { background: rgba(99, 102, 241, .28); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .65); color: #fff; }
.pf-option[aria-disabled="true"] { color: #8590a2; cursor: not-allowed; }
.pf-option[aria-disabled="true"].is-active { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.pf-option-text { min-width: 0; overflow-wrap: anywhere; }
@media (forced-colors: active) {
  .pf-listbox { border: 1px solid CanvasText; }
  .pf-option.is-active { outline: 2px solid Highlight; }
}

/* Live region of js/pf-select.js: read by screen readers, never shown. */
.pf-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}