/* ============================================================================
   f(x) → NATURE DS — Forms & Inputs bundle
   Field chrome, Input, Input Group, Textarea, Select, Checkbox, Radio, Switch
   helpers, plus the form-composition helpers (fieldset / field-group / actions).
   Also carries the shared chrome for the EXTRA forms slot injected by a second
   agent: Slider, Input OTP, Popover + Command + Combobox, Calendar + Date Picker.

   Consumes ONLY tokens from styles/tokens.css. Works in BOTH dark + light.
   Doc chrome (.fd-doc, .fd-preview, .fd-api, .fd-code, .fd-copy-btn) lives in
   styles/docs.css + styles/utilities.css and is NEVER redefined here.
   NOTE: .fd-switch is defined at the bottom of this file (migrated here from the
   retired components/buttons.css, since Switch now lives in the Forms section).
   ============================================================================ */

/* ====================================================================
   FIELD WRAPPER — label + control + hint, the atomic form row
   ==================================================================== */
.fd-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 360px;
}
.fd-field--full { max-width: 100%; }

.fd-field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--foreground-muted);
}
.fd-field__label-req {
  color: var(--accent-text);
  font-size: var(--text-2xs);
}
.fd-field__label-opt {
  color: var(--foreground-faint);
  letter-spacing: var(--tracking-label);
}

.fd-field__hint {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--foreground-subtle);
}
.fd-field__hint--error { color: var(--error-text); }

.fd-field__hint-icon {
  display: inline-block;
  width: 0.8em;
  text-align: center;
  margin-right: var(--space-1);
  color: var(--error-text);
  font-weight: var(--weight-bold);
}

/* ====================================================================
   INPUT — .fd-input (text field; the form workhorse)
   ==================================================================== */
.fd-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.fd-input::placeholder { color: var(--foreground-subtle); }
.fd-input:hover:not(:disabled):not(:focus) { border-color: var(--border-strong); }
.fd-input:focus,
.fd-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--background-subtle);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.fd-input:disabled {
  cursor: not-allowed;
  color: var(--foreground-subtle);
  background: var(--background-subtle);
  border-color: var(--border-faint);
  opacity: 0.7;
}

/* Sizes */
.fd-input--sm {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
}
.fd-input--md { /* default */ }
.fd-input--lg {
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-4);
}

/* Error state */
.fd-input.is-error { border-color: var(--error); }
.fd-input.is-error:focus,
.fd-input.is-error:focus-visible {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-muted);
}

/* ====================================================================
   INPUT GROUP — prefix / suffix adornments + leading icon
   ==================================================================== */
.fd-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.fd-input-group:hover:not(:focus-within) { border-color: var(--border-strong); }
.fd-input-group:focus-within {
  border-color: var(--accent);
  background: var(--background-subtle);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.fd-input-group.is-error { border-color: var(--error); }
.fd-input-group.is-error:focus-within {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-muted);
}

/* The input inside a group is borderless / transparent */
.fd-input-group .fd-input {
  border: 0;
  background: transparent;
  border-radius: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.fd-input-group .fd-input:focus,
.fd-input-group .fd-input:focus-visible {
  background: transparent;
  box-shadow: none;
}

.fd-input-group__addon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--foreground-subtle);
  background: var(--background-subtle);
  white-space: nowrap;
  user-select: none;
}
.fd-input-group__addon--prefix { border-right: var(--border-width) solid var(--border); }
.fd-input-group__addon--suffix { border-left: var(--border-width) solid var(--border); }

/* Leading icon variant (no background, search-style) */
.fd-input-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--space-3);
  color: var(--foreground-subtle);
}
.fd-input-group__icon svg { width: 16px; height: 16px; }
.fd-input-group:focus-within .fd-input-group__icon { color: var(--accent-text); }

/* ====================================================================
   TEXTAREA — .fd-textarea (multi-line input)
   ==================================================================== */
.fd-textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--foreground);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.fd-textarea::placeholder { color: var(--foreground-subtle); }
.fd-textarea:hover:not(:disabled):not(:focus) { border-color: var(--border-strong); }
.fd-textarea:focus,
.fd-textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--background-subtle);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.fd-textarea:disabled {
  cursor: not-allowed;
  color: var(--foreground-subtle);
  background: var(--background-subtle);
  border-color: var(--border-faint);
  opacity: 0.7;
}
.fd-textarea.is-error { border-color: var(--error); }
.fd-textarea.is-error:focus,
.fd-textarea.is-error:focus-visible {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-muted);
}

/* ====================================================================
   SELECT — native select with custom chevron (inline SVG background)
   ==================================================================== */
.fd-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background-color: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  cursor: pointer;
  /* Chevron stroke must be literal inside the data-URI (SVG data-URIs can't read
     CSS vars). The two values below are token-faithful, NOT free colors:
       %23a3a299 === --foreground-muted (dark)
       %23595850 === --foreground-muted (light, see override rule)
     Keep them in lock-step with tokens.css if --foreground-muted ever changes. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a3a299' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.fd-select::-ms-expand { display: none; }
[data-theme="light"] .fd-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23595850' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
}
.fd-select:hover:not(:disabled):not(:focus) { border-color: var(--border-strong); }
.fd-select:focus,
.fd-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  background-color: var(--background-subtle);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.fd-select:disabled {
  cursor: not-allowed;
  color: var(--foreground-subtle);
  background-color: var(--background-subtle);
  border-color: var(--border-faint);
  opacity: 0.7;
}
.fd-select.is-error { border-color: var(--error); }
.fd-select.is-error:focus,
.fd-select.is-error:focus-visible {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-muted);
}
.fd-select option { color: var(--foreground); background: var(--surface); }

/* Select sizes */
.fd-select--sm {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-8) var(--space-1) var(--space-2);
}
.fd-select--lg {
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
}

/* ====================================================================
   CHECKBOX & RADIO — custom-styled via :checked + sibling box
   ==================================================================== */
.fd-checkbox,
.fd-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--foreground);
  user-select: none;
}

/* visually hide the native input but keep it accessible/focusable */
.fd-checkbox__input,
.fd-radio__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* The custom box / dot */
.fd-checkbox__box,
.fd-radio__box {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.fd-checkbox__box { border-radius: var(--radius-sm); }
.fd-radio__box { border-radius: var(--radius-full); }

/* checkmark (checkbox) */
.fd-checkbox__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform var(--duration-fast) var(--ease-spring);
}
/* dot (radio) */
.fd-radio__box::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--on-accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--duration-fast) var(--ease-spring);
}

/* hover */
.fd-checkbox:hover .fd-checkbox__box,
.fd-radio:hover .fd-radio__box {
  border-color: var(--accent);
}

/* checked */
.fd-checkbox__input:checked ~ .fd-checkbox__box,
.fd-radio__input:checked ~ .fd-radio__box {
  background: var(--accent);
  border-color: var(--accent);
}
.fd-checkbox__input:checked ~ .fd-checkbox__box::after {
  transform: rotate(45deg) scale(1);
}
.fd-radio__input:checked ~ .fd-radio__box::after {
  transform: translate(-50%, -50%) scale(1);
}

/* indeterminate (checkbox only) — a centered dash */
.fd-checkbox__input:indeterminate ~ .fd-checkbox__box {
  background: var(--accent);
  border-color: var(--accent);
}
.fd-checkbox__input:indeterminate ~ .fd-checkbox__box::after {
  left: 50%;
  top: 50%;
  width: 9px;
  height: 0;
  border: 0;
  border-top: var(--border-width-thick) solid var(--on-accent);
  transform: translate(-50%, -50%) scale(1);
}

/* focus-visible ring */
.fd-checkbox__input:focus-visible ~ .fd-checkbox__box,
.fd-radio__input:focus-visible ~ .fd-radio__box {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-color: var(--accent);
}

/* label text + optional hint per row */
.fd-checkbox__label,
.fd-radio__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.fd-checkbox__text,
.fd-radio__text { color: var(--foreground); }
.fd-checkbox__note,
.fd-radio__note {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--foreground-subtle);
}

/* disabled */
.fd-checkbox__input:disabled ~ .fd-checkbox__box,
.fd-radio__input:disabled ~ .fd-radio__box {
  background: var(--background-subtle);
  border-color: var(--border-faint);
}
.fd-checkbox__input:disabled:checked ~ .fd-checkbox__box,
.fd-radio__input:disabled:checked ~ .fd-radio__box {
  background: var(--foreground-faint);
  border-color: var(--foreground-faint);
}
.fd-checkbox:has(.fd-checkbox__input:disabled),
.fd-radio:has(.fd-radio__input:disabled) {
  cursor: not-allowed;
  color: var(--foreground-subtle);
}
.fd-checkbox:has(.fd-checkbox__input:disabled) .fd-checkbox__text,
.fd-radio:has(.fd-radio__input:disabled) .fd-radio__text {
  color: var(--foreground-subtle);
}

/* Radio group wrapper (semantic fieldset, no chrome) */
.fd-radio-group {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fd-radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

/* ====================================================================
   CHOICE GROUP — inline / stacked rows of checkboxes or radios
   ==================================================================== */
.fd-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}
.fd-choice-group--column {
  flex-direction: column;
  gap: var(--space-3);
}

/* ====================================================================
   FIELDSET / FIELD GROUP — composition chrome for the Form block
   ==================================================================== */
.fd-fieldset {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  background: var(--background-subtle);
  min-inline-size: 0; /* allow shrink in flex/grid */
}
.fd-fieldset__legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--foreground-muted);
}
.fd-fieldset__legend-index { color: var(--accent-text); }

/* Stacked group of fields inside the fieldset */
.fd-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.fd-field-group .fd-field { max-width: 100%; }

/* Footer actions row of a composed form */
.fd-field-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}

/* Small inline submit button so the composed form looks complete */
.fd-field-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.fd-field-submit:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.fd-field-submit:active { background: var(--accent-active); transform: translateY(1px); }
.fd-field-submit--ghost {
  color: var(--foreground-muted);
  background: transparent;
  border-color: var(--border-strong);
}
.fd-field-submit--ghost:hover {
  color: var(--foreground);
  background: var(--surface-2);
  border-color: var(--border-strong);
}

/* --- Demo-local layout helper (scoped to forms section) -------------- */
.fd-forms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  width: 100%;
  align-items: start;
}
@media (max-width: 720px) {
  .fd-forms-grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   SLIDER — .fd-slider (native range, brutalist track + square thumb)
   Shared chrome for the EXTRA forms slot (Slider doc injected later).
   ==================================================================== */
.fd-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.fd-slider:focus { outline: none; }

/* Track — WebKit */
.fd-slider::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--border-strong);
  border-radius: var(--radius-none);
}
/* Track — Firefox */
.fd-slider::-moz-range-track {
  height: 2px;
  background: var(--border-strong);
  border-radius: var(--radius-none);
}
.fd-slider::-moz-range-progress {
  height: 2px;
  background: var(--accent);
}

/* Thumb — WebKit (square brutalist handle) */
.fd-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;          /* center on the 2px track */
  background: var(--accent);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.fd-slider::-webkit-slider-thumb:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.fd-slider:active::-webkit-slider-thumb { background: var(--accent-active); }

/* Thumb — Firefox */
.fd-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-none);
}
.fd-slider::-moz-range-thumb:hover { background: var(--accent-hover); }

/* Focus ring on the thumb */
.fd-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.fd-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.fd-slider:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* A header row that pairs a label with a live numeric readout */
.fd-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.fd-slider-output {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--accent-text);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  padding: 0 var(--space-2);
  min-width: 3ch;
  text-align: center;
}
/* Min/Max scale ticks under a slider */
.fd-slider-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--foreground-faint);
}

/* ====================================================================
   INPUT OTP — .fd-otp (segmented one-time-code entry)
   ==================================================================== */
.fd-otp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.fd-otp__group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.fd-otp__slot {
  -webkit-appearance: none;
  appearance: none;
  width: 2.5rem;
  height: 3rem;
  padding: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--foreground);
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-none);
  caret-color: var(--accent);
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.fd-otp__slot:hover:not(:focus) { border-color: var(--foreground-subtle); }
.fd-otp__slot:focus,
.fd-otp__slot:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--background-subtle);
  box-shadow: 0 0 0 3px var(--focus-ring);
  z-index: 1;
}
.fd-otp__slot:disabled {
  cursor: not-allowed;
  color: var(--foreground-subtle);
  background: var(--background-subtle);
  border-color: var(--border-faint);
  opacity: 0.7;
}
.fd-otp__sep {
  width: var(--space-3);
  height: var(--border-width-thick);
  background: var(--border-strong);
  flex: 0 0 auto;
}
.fd-otp--sm .fd-otp__slot { width: 2rem; height: 2.5rem; font-size: var(--text-lg); }

/* ====================================================================
   POPOVER — .fd-popover (anchored floating panel; shared by Combobox +
   Date Picker). Open state toggled by main.js (.is-open).
   ==================================================================== */
.fd-popover,
.fd-combobox,
.fd-datepicker {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
}
.fd-popover__trigger,
.fd-combobox__trigger,
.fd-datepicker__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.fd-popover__trigger:hover,
.fd-combobox__trigger:hover,
.fd-datepicker__trigger:hover { border-color: var(--border-strong); }
.fd-popover__trigger:focus-visible,
.fd-combobox__trigger:focus-visible,
.fd-datepicker__trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.fd-popover.is-open .fd-popover__trigger,
.fd-combobox.is-open .fd-combobox__trigger,
.fd-datepicker.is-open .fd-datepicker__trigger {
  border-color: var(--accent);
}
/* Trigger affordance chevron */
.fd-popover__trigger-icon,
.fd-combobox__trigger-icon,
.fd-datepicker__trigger-icon {
  flex: 0 0 auto;
  color: var(--foreground-subtle);
  transition: transform var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.fd-popover__trigger-icon svg,
.fd-combobox__trigger-icon svg,
.fd-datepicker__trigger-icon svg { display: block; width: 14px; height: 14px; }
.fd-combobox.is-open .fd-combobox__trigger-icon { transform: rotate(180deg); color: var(--accent-text); }

/* The floating panel */
.fd-popover__content {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 100%;
  width: max-content;
  max-width: min(360px, 90vw);
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-md), var(--shadow-hard-border);
  opacity: 0;
  transform: translateY(-4px) scale(0.99);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.fd-popover.is-open > .fd-popover__content,
.fd-combobox.is-open > .fd-popover__content,
.fd-datepicker.is-open > .fd-popover__content {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fd-popover__content--end { left: auto; right: 0; transform-origin: top right; }

/* Plain text/body inside a popover */
.fd-popover__body {
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--foreground-muted);
}
.fd-popover__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  color: var(--foreground);
  margin-bottom: var(--space-1);
}

/* ====================================================================
   COMMAND — .fd-command (filterable command/option list). Used standalone
   and inside the Combobox popover. Filtering handled by main.js.
   ==================================================================== */
.fd-command {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 240px;
  background: var(--surface);
}
.fd-command__input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background: var(--background-subtle);
  border: 0;
  border-bottom: var(--border-width) solid var(--border);
  border-radius: 0;
  padding: var(--space-3) var(--space-3);
}
.fd-command__input::placeholder { color: var(--foreground-subtle); }
.fd-command__input:focus { outline: none; }
.fd-command__list {
  display: flex;
  flex-direction: column;
  max-height: 232px;
  overflow-y: auto;
  padding: var(--space-2);
  gap: 1px;
}
.fd-command__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--foreground-faint);
  padding: var(--space-2) var(--space-2) var(--space-1);
}
.fd-command__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--foreground-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  padding: var(--space-2) var(--space-2);
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.fd-command__item[hidden] { display: none; }
.fd-command__item:hover { color: var(--foreground); background: var(--surface-2); }
.fd-command__item.is-active {
  color: var(--foreground);
  background: var(--accent-muted);
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.fd-command__item[aria-selected="true"] .fd-command__check { opacity: 1; }
.fd-command__item-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--foreground-subtle);
}
.fd-command__item-icon svg { width: 14px; height: 14px; }
.fd-command__item-shortcut {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--foreground-faint);
}
.fd-command__check {
  margin-left: auto;
  flex: 0 0 auto;
  opacity: 0;
  color: var(--accent-text);
  transition: opacity var(--duration-fast) var(--ease-out);
}
.fd-command__check svg { width: 14px; height: 14px; display: block; }
.fd-command__empty {
  padding: var(--space-4) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--foreground-subtle);
  text-align: center;
}

/* Combobox: selected-state checkmark sync via data-attr on the wrapper.
   When an item is aria-selected, reveal its trailing check. */
.fd-combobox .fd-command__item[aria-selected="true"] {
  color: var(--foreground);
}

/* ====================================================================
   CALENDAR — .fd-calendar (static month grid; June 2026 in the demo)
   ==================================================================== */
.fd-calendar {
  width: 100%;
  min-width: 248px;
  padding: var(--space-3);
  background: var(--surface);
  user-select: none;
}
.fd-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.fd-calendar__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--foreground);
}
.fd-calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--foreground-muted);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.fd-calendar__nav:hover { color: var(--foreground); border-color: var(--border-strong); background: var(--surface-2); }
.fd-calendar__nav:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.fd-calendar__nav svg { width: 14px; height: 14px; display: block; }

.fd-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.fd-calendar__weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--foreground-faint);
}
.fd-calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--foreground-muted);
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.fd-calendar__day:hover { color: var(--foreground); background: var(--surface-2); }
.fd-calendar__day:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
/* Days bleeding in from the prev/next month */
.fd-calendar__day--muted { color: var(--foreground-faint); }
.fd-calendar__day--muted:hover { color: var(--foreground-subtle); }
/* Today: hairline accent ring */
.fd-calendar__day.is-today {
  color: var(--accent-text);
  border-color: var(--accent-border);
}
/* Selected: filled accent */
.fd-calendar__day.is-selected {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.fd-calendar__day.is-selected:hover { background: var(--accent-hover); color: var(--on-accent); }
.fd-calendar__day:disabled,
.fd-calendar__day[aria-disabled="true"] {
  color: var(--foreground-faint);
  cursor: not-allowed;
  text-decoration: line-through;
}
/* Calendar footer (range readout, etc.) */
.fd-calendar__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--foreground-subtle);
}

/* The Date Picker trigger holds a leading calendar glyph */
.fd-datepicker__trigger-lead {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.fd-datepicker__trigger-lead svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--foreground-subtle); }
.fd-datepicker__value { color: var(--foreground); }
.fd-datepicker__value--placeholder { color: var(--foreground-subtle); }

/* Date Picker popover wraps a calendar with no extra padding */
.fd-datepicker .fd-popover__content { padding: 0; }
.fd-combobox .fd-popover__content { padding: 0; overflow: hidden; }

/* ============================================================================
   SWITCH — .fd-switch (accessible checkbox toggle)
   Migrated from the retired components/buttons.css; Switch now lives in Forms.
   ============================================================================ */
.fd-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}
.fd-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.fd-switch__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.75rem;
  height: 1.5rem;
  padding: 2px;
  flex: none;
  background: var(--surface-3);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
.fd-switch__thumb {
  width: 1rem;
  height: 1rem;
  background: var(--foreground-muted);
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-spring),
    background-color var(--duration-base) var(--ease-out);
}
.fd-switch__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--foreground-muted);
}

/* Checked */
.fd-switch__input:checked + .fd-switch__track {
  background: var(--accent);
  border-color: var(--accent);
}
.fd-switch__input:checked + .fd-switch__track .fd-switch__thumb {
  background: var(--on-accent);
  transform: translateX(1.25rem);
}
.fd-switch__input:checked ~ .fd-switch__label { color: var(--foreground); }

/* Focus + disabled */
.fd-switch__input:focus-visible + .fd-switch__track {
  outline: var(--border-width-thick) solid var(--accent);
  outline-offset: 2px;
}
.fd-switch__input:disabled + .fd-switch__track {
  opacity: 0.45;
  cursor: not-allowed;
}
.fd-switch:has(.fd-switch__input:disabled) {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Sizes */
.fd-switch--sm .fd-switch__track { width: 2.25rem; height: 1.25rem; }
.fd-switch--sm .fd-switch__thumb { width: 0.8125rem; height: 0.8125rem; }
.fd-switch--sm .fd-switch__input:checked + .fd-switch__track .fd-switch__thumb {
  transform: translateX(1rem);
}