/* ===========================================================================
   DesignOS — Input field, Text Area, OTP Input
   ---------------------------------------------------------------------------
   Figma: page `-> Inputs & Text Area`
     Input field  node 762:8731  — 2 sizes x 13 types x 5 states = 130
     Text Area    node 1803:768  — 5 states                      =   5
     OTP Input    node 1881:949  — 6 details x 3 states          =  18

   All three share one wrapper: Label / Field / Hint in a 4px column.
   Requires tokens.css.
   =========================================================================== */

/* --- Shared wrapper -------------------------------------------------------- */
.dos-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-4);
  width: 320px;
  max-width: 100%;
  font-family: var(--family-text);
}

.dos-field__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  height: 18px;
  width: 100%;
  font-family: var(--family-caption);
  font-size: var(--font-size-caption-md);
  line-height: var(--line-height-caption-md);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

.dos-field__optional { font-weight: var(--weight-regular); color: var(--text-disabled); }
.dos-field__required { color: var(--text-error); }

.dos-field__hint {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  min-height: 18px;
  width: 100%;
  font-family: var(--family-caption);
  font-size: var(--font-size-caption-md);
  line-height: var(--line-height-caption-md);
  font-weight: var(--weight-regular);
  color: var(--text-quarternary);
}

/* The hint is the only part of the wrapper that reacts to the error state. */
.dos-field.is-error .dos-field__hint { color: var(--text-error); }

/* ===========================================================================
   Input field
   =========================================================================== */

.dos-input {
  --dos-input-bg: var(--bg-primary);
  --dos-input-border: var(--border-primary);
  --dos-input-fg: var(--text-primary);
  --dos-input-ring: 0 0 0 0 transparent;

  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  box-sizing: border-box;
  height: var(--dos-input-height, 40px);
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--dos-input-border);
  border-radius: var(--input);
  background-color: var(--dos-input-bg);
  color: var(--dos-input-fg);
  box-shadow: var(--dos-input-ring);
  overflow: hidden;
  transition:
    border-color var(--motion-state) var(--motion-ease),
    box-shadow var(--motion-state) var(--motion-ease),
    background-color var(--motion-state) var(--motion-ease);
}

.dos-field--lg .dos-input { --dos-input-height: 48px; }

.dos-input__content {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-0) var(--spacing-2);
  overflow: hidden;
}

.dos-input__text {
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
  font-weight: var(--weight-regular);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A real control, styled to disappear into the frame. */
.dos-input__field {
  flex: 1 0 0;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
  font-weight: var(--weight-regular);
}
.dos-input__field::placeholder { color: var(--text-placeholder); opacity: 1; }
.dos-input__field:disabled { color: var(--text-disabled); cursor: not-allowed; -webkit-text-fill-color: var(--text-disabled); }
.dos-field.is-error .dos-input__field { color: var(--text-primary); }

.dos-input__icon { display: block; flex: none; width: 16px; height: 16px; color: var(--icon-tertiary); }

/* --- Input states ---------------------------------------------------------
   Placeholder and Filled differ only in content colour; the frame is identical.
   -------------------------------------------------------------------------- */
.dos-field.is-placeholder .dos-input { --dos-input-fg: var(--text-placeholder); }
.dos-field.is-filled      .dos-input { --dos-input-fg: var(--text-primary); }

.dos-field.is-focus .dos-input,
.dos-input:focus-within {
  --dos-input-border: var(--border-brand);
  --dos-input-fg: var(--text-primary);
  --dos-input-ring: 0 0 0 2px var(--ring-offset), 0 0 0 4px var(--ring-brand);
}

.dos-field.is-disabled .dos-input {
  --dos-input-bg: var(--bg-disabled);
  --dos-input-border: var(--border-disabled);
  --dos-input-fg: var(--text-disabled);
  cursor: not-allowed;
}
.dos-field.is-disabled .dos-input__icon { color: var(--icon-disabled); }

.dos-field.is-error .dos-input {
  --dos-input-border: var(--border-error);
  --dos-input-ring: 0 0 0 2px var(--ring-offset), 0 0 0 4px var(--ring-error);
}
.dos-field.is-error .dos-input__icon { color: var(--icon-error); }

/* The blinking caret Figma draws as a static "typing indicator". */
.dos-input__caret {
  display: inline-block;
  flex: none;
  width: 1px;
  height: 16px;
  background: var(--text-primary);
  animation: dos-caret 1s steps(1) infinite;
}
@keyframes dos-caret { 50% { opacity: 0; } }

/* ===========================================================================
   Segmented input frames
   Leading Text, Phone Number, Currency, Number Input and Upload File split the
   frame into an addon and a field. The outer frame drops its own border and
   each segment carries the matching edges, so the seam reads as one control.
   =========================================================================== */

.dos-input--segmented {
  padding: 0;
  gap: var(--spacing-0);
  border-color: transparent;
  background: var(--bg-primary);
}

.dos-input__addon {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  height: 100%;
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--dos-input-border);
  border-right: 0;
  border-radius: var(--input) 0 0 var(--input);
  background: var(--bg-secondary);
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
  color: var(--text-primary);
  white-space: nowrap;
}

.dos-input__well {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--spacing-8);
  height: 100%;
  padding: var(--spacing-8);
  border: 1px solid var(--dos-input-border);
  border-radius: 0 var(--input) var(--input) 0;
  background: var(--bg-primary);
  overflow: hidden;
}
.dos-input__well .dos-input__content { padding-inline: var(--spacing-4); }

.dos-field.is-disabled .dos-input__well,
.dos-field.is-disabled .dos-input__addon { background: var(--bg-disabled); color: var(--text-disabled); }

/* Number Input puts its stepper on the trailing edge instead. */
.dos-input__well--lead { border-radius: var(--input) 0 0 var(--input); border-right: 0; padding-inline: var(--spacing-12); }

.dos-input__actions {
  display: flex;
  align-items: center;
  height: 100%;
  border: 1px solid var(--dos-input-border);
  border-left: 0;
  border-radius: 0 var(--input) var(--input) 0;
}

.dos-input__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  padding: var(--spacing-12);
  border: 0;
  background: transparent;
  color: var(--icon-primary);
  cursor: pointer;
}
.dos-input__step + .dos-input__step { border-left: 1px solid var(--border-secondary); }
.dos-input__step:focus-visible { outline: 2px solid var(--border-focus-ring); outline-offset: -2px; }
.dos-field.is-disabled .dos-input__step { color: var(--icon-disabled); cursor: not-allowed; }

/* Chips for Tag Input. */
.dos-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 2px var(--spacing-6);
  border-radius: var(--input);
  background: var(--bg-secondary);
  font-size: var(--font-size-caption-md);
  line-height: var(--line-height-caption-md);
  color: var(--text-primary);
  white-space: nowrap;
}
.dos-chip button { border: 0; background: transparent; padding: 0; color: var(--icon-tertiary); cursor: pointer; display: flex; }

/* Colour swatch for Color Input. */
.dos-swatch { width: 16px; height: 16px; border-radius: 50%; flex: none; }

/* ===========================================================================
   Text Area
   One size only. Resting border is border-secondary, NOT the border-primary
   the Input field uses — that inconsistency is in the source.
   =========================================================================== */

.dos-textarea {
  --dos-input-border: var(--border-secondary);
  height: auto;
  min-height: 72px;
  align-items: flex-start;
}

.dos-textarea .dos-input__field { resize: vertical; min-height: 54px; align-self: stretch; }

/* ===========================================================================
   OTP Input
   =========================================================================== */

.dos-otp { width: 356px; }

.dos-otp__list { display: flex; align-items: center; gap: var(--spacing-8); }
.dos-otp__list--split { gap: var(--spacing-6); justify-content: center; }

.dos-otp__cell {
  --dos-input-border: var(--border-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  width: 48px;
  height: 48px;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--dos-input-border);
  border-radius: var(--input);
  background: var(--bg-primary);
  color: var(--text-placeholder);
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
  font-weight: var(--weight-regular);
  text-align: center;
  transition: border-color var(--motion-state) var(--motion-ease), box-shadow var(--motion-state) var(--motion-ease);
}

.dos-otp__cell.is-filled, .dos-otp__cell:not(:placeholder-shown) { color: var(--text-dark); }

.dos-otp__cell.is-active,
.dos-otp__cell:focus {
  --dos-input-border: var(--border-alt-2);
  color: var(--text-dark);
  box-shadow: 0 0 0 2px var(--ring-offset), 0 0 0 4px var(--ring-brand);
  outline: 0;
  z-index: 1;
}

/* Connected: one outer border and radius, cells share a single hairline. */
.dos-otp__group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-primary);
  border-radius: var(--input);
  overflow: hidden;
}
.dos-otp__group .dos-otp__cell { border: 0; border-radius: 0; }
.dos-otp__group .dos-otp__cell + .dos-otp__cell { border-left: 1px solid var(--border-primary); }
.dos-otp__group .dos-otp__cell.is-active { box-shadow: inset 0 0 0 1px var(--border-alt-2); }

.dos-otp__sep { display: flex; align-items: center; padding-inline: var(--spacing-2); }
.dos-otp__sep i { display: block; width: 16px; height: 1px; background: var(--border-secondary); }

@media (prefers-reduced-motion: reduce) {
  .dos-input, .dos-otp__cell { transition: none; }
  .dos-input__caret { animation: none; }
}

/* ===========================================================================
   Component properties
   ---------------------------------------------------------------------------
   The Figma component set exposes 19 properties. Three are variant axes
   (Size / Type / State); the rest are booleans, instance swaps and text slots
   that toggle optional parts of the anatomy.

   Optional parts are authored in the markup and hidden by default, so a
   consumer opts in with a `p-` class and nothing needs re-rendering.
   Defaults below match the Figma defaults exactly.
   =========================================================================== */

/* has Label? — default True, so the label shows unless opted out. */
.dos-field--no-label .dos-field__label { display: none; }

/* is Optional / is Required — default False. */
.dos-field__optional,
.dos-field__required { display: none; }
.dos-field--optional .dos-field__optional { display: inline; }
.dos-field--required .dos-field__required { display: inline; }

/* Hint — default False. */
.dos-field__hint { display: none; }
.dos-field--hint .dos-field__hint { display: flex; }

/* Leading Icon / Trailing Icon — default False on Simple. */
.dos-input__icon--lead,
.dos-input__icon--trail { display: none; }
.dos-field--lead-icon  .dos-input__icon--lead  { display: block; }
.dos-field--trail-icon .dos-input__icon--trail { display: block; }

/* Country Code — default True on Phone Number. */
.dos-field--no-country-code .dos-input__country-code { display: none; }

/* A hidden label still has to reach assistive tech. */
.dos-field--no-label .dos-field__label.sr-only {
  display: block;
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}