/* Meridian · Input
   Pieces:   .dm-field (text/textarea, floating label) | .dm-checkbox | .dm-radio | .dm-switch
   States:   .dm-field--filled (set by input.js), .dm-field--error, .dm-field--disabled
   The label floats on :focus-within (CSS) or when the field has content (JS). */

/* ---- Field shell --------------------------------------------------------- */

.dm-field {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
}

.dm-field__control {
  position: relative;
  background: var(--dm-color-surface);
  border: 1px solid var(--dm-color-outline);
  border-radius: var(--dm-rounded-md);
  transition: border-color var(--dm-duration-fast) var(--dm-ease-standard),
    box-shadow var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-field__control:hover {
  border-color: var(--dm-color-on-surface-variant);
}

.dm-field__control:focus-within {
  border-color: var(--dm-color-primary);
  box-shadow: 0 0 0 1px var(--dm-color-primary);
}

.dm-field__input {
  display: block;
  width: 100%;
  height: var(--dm-input-height);
  padding: 0 14px;
  font: var(--dm-type-body-md);
  color: var(--dm-color-on-surface);
  background: transparent;
  border: 0;
  border-radius: inherit;
  outline: none; /* the ring lives on .dm-field__control via :focus-within */
}

textarea.dm-field__input {
  height: auto;
  min-height: 112px;
  padding: 12px 14px;
  resize: vertical;
}

/* ---- Floating label ------------------------------------------------------ */

.dm-field__label {
  position: absolute;
  top: 0;
  left: 10px;
  padding: 0 4px;
  font: var(--dm-type-body-md);
  color: var(--dm-color-on-surface-variant);
  background: var(--dm-color-surface);
  border-radius: var(--dm-rounded-xs);
  pointer-events: none;
  transform-origin: left center;
  transform: translateY(14px); /* optically centered in the 48px control */
  transition: transform var(--dm-duration-base) var(--dm-ease-emphasized),
    color var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-field--textarea .dm-field__label {
  transform: translateY(10px); /* sit on the first line of the textarea */
}

.dm-field__control:focus-within .dm-field__label,
.dm-field--filled .dm-field__label {
  transform: translateY(-50%) scale(0.78);
}

.dm-field__control:focus-within .dm-field__label {
  color: var(--dm-color-primary);
}

/* ---- Helper text ---------------------------------------------------------- */

.dm-field__helper {
  margin-top: var(--dm-space-xs);
  padding: 0 14px;
  font: var(--dm-type-body-sm);
  color: var(--dm-color-on-surface-variant);
}

/* ---- Error state ----------------------------------------------------------- */

.dm-field--error .dm-field__control {
  border-color: var(--dm-color-error);
}

.dm-field--error .dm-field__control:focus-within {
  border-color: var(--dm-color-error);
  box-shadow: 0 0 0 1px var(--dm-color-error);
}

.dm-field--error .dm-field__label,
.dm-field--error .dm-field__control:focus-within .dm-field__label,
.dm-field--error .dm-field__helper {
  color: var(--dm-color-error);
}

/* ---- Disabled state ---------------------------------------------------------- */

.dm-field--disabled {
  opacity: 0.45;
}

.dm-field--disabled .dm-field__control,
.dm-field--disabled .dm-field__input {
  cursor: not-allowed;
}

.dm-field--disabled .dm-field__control:hover {
  border-color: var(--dm-color-outline);
}

/* ==========================================================================
   Checkbox & Radio — native input (kept for a11y), custom drawn box
   ========================================================================== */

.dm-checkbox,
.dm-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--dm-control-height);
  font: var(--dm-type-body-md);
  color: var(--dm-color-on-surface);
  cursor: pointer;
  user-select: none;
}

.dm-checkbox__input,
.dm-radio__input,
.dm-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.dm-checkbox__box {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--dm-color-surface);
  border: 1px solid var(--dm-color-outline);
  border-radius: var(--dm-rounded-xs);
  transition: background-color var(--dm-duration-fast) var(--dm-ease-standard),
    border-color var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-checkbox:hover .dm-checkbox__box {
  border-color: var(--dm-color-on-surface-variant);
}

/* Checkmark drawn from two borders, scales in with the pop */
.dm-checkbox__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--dm-color-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-checkbox__input:checked + .dm-checkbox__box {
  background: var(--dm-color-primary);
  border-color: var(--dm-color-primary);
  animation: dm-check-pop var(--dm-duration-slow) var(--dm-ease-spring);
}

.dm-checkbox__input:checked + .dm-checkbox__box::after {
  transform: rotate(45deg) scale(1);
  transition-delay: var(--dm-duration-fast);
}

@keyframes dm-check-pop {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

/* ---- Radio ----------------------------------------------------------------- */

.dm-radio__dot {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--dm-color-surface);
  border: 1px solid var(--dm-color-outline);
  border-radius: var(--dm-rounded-full);
  transition: border-color var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-radio:hover .dm-radio__dot {
  border-color: var(--dm-color-on-surface-variant);
}

.dm-radio__dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--dm-color-primary);
  border-radius: var(--dm-rounded-full);
  transform: scale(0);
  transition: transform var(--dm-duration-base) var(--dm-ease-spring);
}

.dm-radio__input:checked + .dm-radio__dot {
  border-color: var(--dm-color-primary);
}

.dm-radio__input:checked + .dm-radio__dot::after {
  transform: scale(1);
}

/* ---- Shared focus / disabled for checkbox, radio, switch --------------------- */

.dm-checkbox__input:focus-visible + .dm-checkbox__box,
.dm-radio__input:focus-visible + .dm-radio__dot,
.dm-switch__input:focus-visible + .dm-switch__track {
  outline: 2px solid var(--dm-color-focus-ring);
  outline-offset: 2px;
}

.dm-checkbox:has(.dm-checkbox__input:disabled),
.dm-radio:has(.dm-radio__input:disabled),
.dm-switch:has(.dm-switch__input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- Radio group (fieldset wrapper) ------------------------------------------ */

.dm-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.dm-radio-group__legend {
  padding: 0;
  margin-bottom: var(--dm-space-xs);
  font: var(--dm-type-label-md);
  letter-spacing: var(--dm-tracking-label);
  color: var(--dm-color-on-surface);
}

/* ==========================================================================
   Switch — sliding knob on a pill track
   ========================================================================== */

.dm-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--dm-control-height);
  font: var(--dm-type-body-md);
  color: var(--dm-color-on-surface);
  cursor: pointer;
  user-select: none;
}

.dm-switch__track {
  flex: none;
  width: 44px;
  height: 24px;
  padding: 2px;
  background: var(--dm-color-surface-variant);
  border: 1px solid var(--dm-color-outline);
  border-radius: var(--dm-rounded-full);
  transition: background-color var(--dm-duration-base) var(--dm-ease-standard),
    border-color var(--dm-duration-base) var(--dm-ease-standard);
}

.dm-switch__knob {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--dm-color-surface);
  border-radius: var(--dm-rounded-full);
  box-shadow: var(--dm-shadow-sm);
  transition: transform var(--dm-duration-base) var(--dm-ease-spring);
}

.dm-switch__input:checked + .dm-switch__track {
  background: var(--dm-color-primary);
  border-color: var(--dm-color-primary);
}

.dm-switch__input:checked + .dm-switch__track .dm-switch__knob {
  background: var(--dm-color-on-primary);
  transform: translateX(20px);
}