/* =========================================================
   Maker Meik DS — input accent overrides
   Rebinds the NEUTRAL (ink-900) focus / checked / selected /
   active states of the form-input cards to the active mode's
   accent (var(--accent)). Labeled showcase variants
   (.ux / .ai / .play) are intentionally left untouched so the
   palette demos still read.
   Scope: only inside #ds-stage.
   ========================================================= */

/* ---- focus rings (all inputs) ---- */
#ds-stage .input:focus,
#ds-stage .input.is-focused,
#ds-stage .textarea:focus,
#ds-stage .native:focus,
#ds-stage .affix:focus-within,
#ds-stage .select:focus,
#ds-stage .select.is-open,
#ds-stage .stepper:focus-within,
#ds-stage .search:focus-within,
#ds-stage .combo.is-open,
#ds-stage .combo:focus-within,
#ds-stage .ms.is-open,
#ds-stage .ms:focus-within,
#ds-stage .date-trigger.is-open {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
#ds-stage .select.is-open .select__caret,
#ds-stage .ms.is-open .ms__caret { stroke: var(--accent) !important; }

/* ---- checked toggles (neutral only) ---- */
#ds-stage .check input:checked + .box,
#ds-stage .check input:indeterminate + .box,
#ds-stage .check.indeterminate .box {
  background: var(--accent) !important; border-color: var(--accent) !important;
}
#ds-stage .radio input:checked + .dot { border-color: var(--accent) !important; }
#ds-stage .radio input:checked + .dot::after { background: var(--accent) !important; }
#ds-stage .switch:not(.ux):not(.ai):not(.play) input:checked + .track { background: var(--accent) !important; }

/* ---- range sliders (neutral only) ---- */
#ds-stage input[type="range"].slider:not(.ux):not(.ai):not(.play)::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--accent) var(--pct, 50%), var(--paper-300) var(--pct, 50%)) !important;
}
#ds-stage input[type="range"].slider:not(.ux):not(.ai):not(.play)::-webkit-slider-thumb { border-color: var(--accent) !important; }
#ds-stage input[type="range"].slider:not(.ux):not(.ai):not(.play)::-moz-range-progress { background: var(--accent) !important; }
#ds-stage input[type="range"].slider:not(.ux):not(.ai):not(.play)::-moz-range-thumb { border-color: var(--accent) !important; }
#ds-stage input[type="range"].slider:not(.ux):not(.ai):not(.play):active::-webkit-slider-thumb { background: var(--accent) !important; }
/* dual-range mock */
#ds-stage .dual__range { background: var(--accent) !important; }
#ds-stage .dual__thumb { border-color: var(--accent) !important; }
#ds-stage .dual__bubble { background: var(--accent) !important; }
#ds-stage .dual__bubble::after { background: var(--accent) !important; }

/* ---- menus: selected item + type-ahead create ---- */
#ds-stage .menu__item.is-selected { color: var(--accent-deep) !important; }
#ds-stage .menu__item.is-selected .menu__check { background: var(--accent) !important; border-color: var(--accent) !important; }
#ds-stage .menu__create { color: var(--accent-deep) !important; }
#ds-stage .menu__create:hover { background: var(--accent-tint) !important; }
/* type-ahead "create" marker: mode-tinted accent circle with a real
   inline-SVG plus (real DOM child, so it renders everywhere). */
#ds-stage .menu__create-ic { background: var(--accent) !important; }
#ds-stage .menu__item .hit { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; }

/* ---- stepper / steppers active ---- */
#ds-stage .timepick__seg.is-active { background: var(--accent) !important; }

/* ---- date calendar (neutral selection) ---- */
#ds-stage .cal__cell.is-selected,
#ds-stage .cal__cell.in-range.range-start,
#ds-stage .cal__cell.in-range.range-end { background: var(--accent) !important; color: #fff !important; }
#ds-stage .cal__cell.in-range { background: var(--accent-tint) !important; }
#ds-stage .cal__cell.is-today::after { background: var(--accent) !important; }
#ds-stage .cal__cell.is-selected.is-today::after { background: #fff !important; }
#ds-stage .cal__btn.primary { background: var(--accent) !important; }
#ds-stage .cal__btn.primary:hover { background: var(--accent-deep) !important; }

/* ---- file drop active ---- */
#ds-stage .drop:hover,
#ds-stage .drop.is-dragging { border-color: var(--accent) !important; }
#ds-stage .drop.is-dragging { background: var(--accent-wash) !important; }
#ds-stage .drop__title strong { color: var(--accent-deep) !important; border-bottom-color: var(--accent-deep) !important; }
#ds-stage .file-row__bar > i { background: var(--accent) !important; }

/* ---- color swatch active ---- */
#ds-stage .swatch.is-active { border-color: var(--accent) !important; }
#ds-stage .swatch.is-active::after { border-color: var(--accent) !important; }