/* ============================================================================
   f(x) → NATURE DS — Advanced Forms (extra) bundle
   Self-contained, token-only styles for the ADVANCED form controls documented
   in sections/forms-extra.html:
     · Slider      .fd-slider (+ head / output / scale)
     · Input OTP   .fd-otp (+ __group / __slot / __sep)
     · Combobox    .fd-combobox (+ shared .fd-popover / .fd-command)
     · Calendar    .fd-calendar (grid · weekday row · day cells · is-today /
                   is-selected / is-muted)
     · Date Picker .fd-datepicker (popover trigger -> .fd-calendar)

   Behaviour lives in scripts/main.js (slider output, OTP, popover, command/
   combobox, date-picker popover). This file only paints.

   HARD RULE: consumes ONLY custom properties from styles/tokens.css — no
   hard-coded colors. Correct in BOTH dark (default) and [data-theme="light"].
   Does NOT redefine doc chrome (.fd-doc / .fd-preview / .fd-api / .fd-code /
   .fd-copy-btn) — those live in styles/docs.css + styles/utilities.css.
   ============================================================================ */

/* ============================================================================
   1 · SLIDER — native range input, brutalist hairline track + square thumb
   ============================================================================ */
.fd-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.fd-slider:focus { outline: none; }

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

/* Thumb — WebKit (square brutalist handle, centered on the 2px track) */
.fd-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  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),
    border-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);
  box-shadow: var(--shadow-sm);
}
.fd-slider::-moz-range-thumb:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Focus ring painted on the thumb in both engines */
.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;
}
.fd-slider:disabled::-webkit-slider-thumb { background: var(--foreground-subtle); border-color: var(--foreground-subtle); }
.fd-slider:disabled::-moz-range-thumb { background: var(--foreground-subtle); border-color: var(--foreground-subtle); }

/* Header row pairing a mono label with a live numeric readout */
.fd-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}
.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);
  border-radius: var(--radius-none);
  padding: 0 var(--space-2);
  min-width: 3ch;
  text-align: center;
}
/* Min / Max scale ticks below a slider */
.fd-slider-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--foreground-faint);
}

/* A self-contained slider field block (label + slider + scale) */
.fd-slider-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 360px;
}

/* ============================================================================
   2 · 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;
}
/* Separator dash between OTP groups */
.fd-otp__sep {
  width: var(--space-3);
  height: var(--border-width-thick);
  background: var(--border-strong);
  flex: 0 0 auto;
}
/* Error styling on the whole field */
.fd-otp.is-error .fd-otp__slot {
  border-color: var(--error);
  color: var(--error-text);
}
.fd-otp.is-error .fd-otp__slot:focus { box-shadow: 0 0 0 3px var(--error-muted); }
/* Compact size */
.fd-otp--sm .fd-otp__slot { width: 2rem; height: 2.5rem; font-size: var(--text-lg); }

/* ============================================================================
   3 · POPOVER SHELL — shared anchored floating panel used by Combobox + Date
   Picker. Open state toggled by main.js (.is-open). Defined here so the extra
   bundle is self-contained.
   ============================================================================ */
.fd-combobox,
.fd-datepicker {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
}
.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-combobox__trigger:hover,
.fd-datepicker__trigger:hover { border-color: var(--border-strong); }
.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-combobox.is-open .fd-combobox__trigger,
.fd-datepicker.is-open .fd-datepicker__trigger { border-color: var(--accent); }
.fd-combobox__trigger:disabled,
.fd-datepicker__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  color: var(--foreground-subtle);
  background: var(--background-subtle);
}

/* Trigger affordance chevron */
.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-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-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; }

/* ============================================================================
   4 · COMMAND LIST — filterable option list inside the Combobox popover.
   Filtering / keyboard nav 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"] { color: var(--foreground); }
.fd-command__item[aria-selected="true"] .fd-command__check { opacity: 1; }
.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 popover hugs the command list with no extra padding */
.fd-combobox .fd-popover__content { padding: 0; overflow: hidden; }

/* ============================================================================
   5 · CALENDAR — .fd-calendar static month grid (June 2026 in the demo)
   Weekday header row · day cells · is-today / is-selected / is-muted.
   ============================================================================ */
.fd-calendar {
  width: 100%;
  min-width: 248px;
  padding: var(--space-3);
  background: var(--surface);
  -webkit-user-select: none;
  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.is-muted { color: var(--foreground-faint); }
.fd-calendar__day.is-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;
}
/* Footer (range / hint readout) */
.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);
}

/* ============================================================================
   6 · DATE PICKER — .fd-datepicker (popover trigger -> .fd-calendar)
   ============================================================================ */
.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; }

/* ============================================================================
   7 · RESPONSIVE — keep controls comfortable on small screens
   ============================================================================ */
@media (max-width: 480px) {
  .fd-otp__slot { width: 2rem; height: 2.5rem; font-size: var(--text-lg); }
  .fd-combobox,
  .fd-datepicker { max-width: 100%; }
}