@layer components {
/* =============================================================================
   @elements/style — forms (bare elements)

   Bare-element defaults for input, textarea, select, checkbox, radio.
   Wrapped in :where() so any class on the element wins at zero
   specificity.


   The .field wrapper provides label + control + hint/error structure.

   Modifiers (apply via class on the input element):
     is-sm / is-lg            — size
     is-error / is-ok         — state
     is-disabled / is-readonly — state (in addition to :disabled / readonly)
============================================================================= */

/* BARE TEXT INPUTS, TEXTAREA, SELECT --------------------------------- */

:where(input:not([type]),    input[type="text"],   input[type="email"],
       input[type="password"], input[type="search"],
       input[type="tel"],    input[type="url"],
       input[type="number"], input[type="date"],
       input[type="time"],   input[type="datetime-local"],
       input[type="month"],  input[type="week"],
       textarea, select) {
  display:       block;
  width:         100%;
  height:        var(--input-height);
  padding:       0 var(--input-padding-x);
  font-family:   var(--font-sans);
  font-size:     var(--input-font-size);
  font-weight:   var(--weight-regular);
  line-height:   var(--leading-snug);
  color:         var(--ink);
  background:    var(--input-bg);
  border:        1px solid var(--input-border);
  border-radius: var(--input-radius);
  transition:    var(--transition-colors);
}

:where(textarea) {
  height:         auto;
  min-height:     6rem;
  padding-top:    var(--input-padding-y);
  padding-bottom: var(--input-padding-y);
  line-height:    var(--leading-body);
  resize:         vertical;
}

:where(input:hover, textarea:hover, select:hover) {
  border-color: var(--input-border-hover);
}

:where(input:focus-visible, textarea:focus-visible, select:focus-visible) {
  outline:      none;
  border-color: var(--input-border-focus);
  box-shadow:   0 0 0 1px var(--input-border-focus);
}

:where(input:disabled, textarea:disabled, select:disabled) {
  cursor:     not-allowed;
  opacity:    var(--opacity-disabled);
  background: var(--bg-soft);
}

:where(input[readonly], textarea[readonly]) {
  background: var(--bg-soft);
  color:      var(--ink-soft);
}

:where(input::placeholder, textarea::placeholder) {
  color: var(--input-placeholder);
}

/* SIZE VARIANTS ------------------------------------------------------- */

input.is-sm, textarea.is-sm, select.is-sm {
  height:    var(--input-height-sm);
  font-size: var(--text-sm);
  padding:   0 var(--space-2-5);
}

input.is-lg, textarea.is-lg, select.is-lg {
  height:    var(--input-height-lg);
  font-size: var(--text-md);
  padding:   0 var(--space-4);
}

/* STATE — ERROR -------------------------------------------------------- */

input.is-error, textarea.is-error, select.is-error {
  border-color: var(--danger);
}

input.is-error:focus-visible,
textarea.is-error:focus-visible,
select.is-error:focus-visible {
  border-color: var(--danger);
  box-shadow:   0 0 0 1px var(--danger);
}

/* STATE — OK ---------------------------------------------------------- */

input.is-ok, textarea.is-ok, select.is-ok {
  border-color: var(--success);
}

/* SELECT — custom caret (glyph color per mode via --select-caret,
   defined in themes/default.css) ------------------------------------- */

:where(select) {
  appearance:           none;
  -webkit-appearance:   none;
  padding-right:        var(--space-8);
  background-image:     var(--select-caret);
  background-repeat:    no-repeat;
  background-position:  right var(--space-3) center;
  background-size:      12px;
}

/* CHECKBOX & RADIO --------------------------------------------------- */

:where(input[type="checkbox"], input[type="radio"]) {
  appearance:         none;
  -webkit-appearance: none;
  width:              1.125rem;
  height:             1.125rem;
  margin:             0;
  background:         var(--bg);
  border:             1.5px solid var(--rule-strong);
  cursor:             pointer;
  display:            inline-flex;
  align-items:        center;
  justify-content:    center;
  flex-shrink:        0;
  vertical-align:     -2px;
  transition:         var(--transition-colors);
}

:where(input[type="checkbox"]) { border-radius: var(--radius-xs);  }
:where(input[type="radio"])    { border-radius: var(--radius-full); }

:where(input[type="checkbox"]:hover, input[type="radio"]:hover) {
  border-color: var(--accent);
}

:where(input[type="checkbox"]:checked, input[type="radio"]:checked) {
  background:   var(--accent);
  border-color: var(--accent);
}

/* Checkmark via inline SVG background — crisper than clip-path. Data
   URIs can't reference variables, so the theme ships --checkbox-check
   with a stroke color matching --accent-ink per mode. */
:where(input[type="checkbox"]:checked) {
  background-image:    var(--checkbox-check);
  background-size:     100% 100%;
  background-repeat:   no-repeat;
  background-position: center;
}

/* Radio dot via radial-gradient — gradients CAN read variables, so the
   dot tracks --accent-ink directly. */
:where(input[type="radio"]:checked) {
  background-image:
    radial-gradient(circle, var(--accent-ink) 0%, var(--accent-ink) 30%, transparent 36%);
}

:where(input[type="checkbox"]:focus-visible,
       input[type="radio"]:focus-visible) {
  outline:    none;
  box-shadow: var(--focus-ring);
}

:where(input[type="checkbox"]:disabled, input[type="radio"]:disabled) {
  opacity: var(--opacity-disabled);
  cursor:  not-allowed;
}

/* FIELD WRAPPER — label + control + hint/error ----------------------- */

.field {
  display: block;
}

.field > .head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   var(--space-2);
}

.field > label,
.field > .head > label {
  display:     block;
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
  color:       var(--ink);
}

.field > label {
  margin-bottom: var(--space-2);
}

.field > .head > .helper,
.field > .head > a {
  font-size:       var(--text-xs);
  color:           var(--ink-soft);
  text-decoration: none;
}

.field > .head > a:hover {
  color:           var(--accent-deep);
  text-decoration: underline;
}

.field > .hint {
  margin-top:  var(--space-1-5);
  font-size:   var(--text-xs);
  color:       var(--ink-soft);
  line-height: var(--leading-snug);
}

.field > .error {
  margin-top:  var(--space-1-5);
  font-size:   var(--text-xs);
  color:       var(--danger-ink);
  line-height: var(--leading-snug);
}

/* FORM — two-column grid layout -------------------------------------- */

form.is-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4) var(--space-5);
}

form.is-grid .field.is-full {
  grid-column: 1 / -1;
}

@media (max-width: 40rem) {
  form.is-grid {
    grid-template-columns: 1fr;
  }
}

/* FIELDSET / LEGEND -------------------------------------------------- */

:where(fieldset) {
  border:        1px solid var(--rule);
  border-radius: var(--radius-md);
  padding:       var(--space-4) var(--space-5);
}

:where(legend) {
  font-size:    var(--text-sm);
  font-weight:  var(--weight-medium);
  color:        var(--ink-soft);
  padding:      0 var(--space-2);
}

}