/**
 * Lindsay Core — Material Design 3 outlined text fields (public forms).
 * Spec: https://m3.material.io/components/text-fields/overview
 */

:root {
  --lindsay-m3-primary: #082b4e;
  --lindsay-m3-on-surface: #111827;
  --lindsay-m3-on-surface-variant: #6b7280;
  --lindsay-m3-outline: #6b7280;
  --lindsay-m3-outline-focus: #082b4e;
  --lindsay-m3-surface: #ffffff;
  --lindsay-m3-readonly-surface: #f3f4f6;
  --lindsay-m3-readonly-outline: #d1d5db;
  --lindsay-m3-error: #b91c1c;
  /* Standard web form field height = 44dp (2.75rem). Single source of truth: every
     .lindsay-m3-field inherits this, so future fields are 44dp automatically.
     Do not hard-code field heights elsewhere — adjust this token. (Was 56dp/3.5rem.) */
  --lindsay-m3-field-height: 2.75rem;
}

.lindsay-m3-field {
  margin: 0;
  width: 100%;
}

.lindsay-m3-field-control {
  position: relative;
  display: block;
  min-height: var(--lindsay-m3-field-height);
}

.lindsay-m3-field-input {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.75rem;
  height: var(--lindsay-m3-field-height);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--lindsay-m3-on-surface);
  background: transparent;
  border: none;
  border-radius: 4px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.lindsay-m3-field-input::placeholder {
  color: transparent;
}

.lindsay-m3-field-textarea .lindsay-m3-field-control {
  min-height: 5.5rem;
}

.lindsay-m3-field-textarea .lindsay-m3-field-input {
  height: auto;
  min-height: 5.5rem;
  padding-top: 1.25rem;
  padding-bottom: 0.65rem;
}

.lindsay-m3-field-textarea.is-filled .lindsay-m3-field-input,
.lindsay-m3-field-textarea.is-focused .lindsay-m3-field-input {
  padding-top: 1.5rem;
}

.lindsay-m3-field-select .lindsay-m3-field-input {
  padding-right: 2rem;
  cursor: pointer;
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--lindsay-m3-on-surface-variant) 50%),
    linear-gradient(135deg, var(--lindsay-m3-on-surface-variant) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) calc(50% + 0.1rem), calc(100% - 0.75rem) calc(50% + 0.1rem);
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

/* Empty date inputs show browser mm/dd/yyyy hints that collide with the centered floating label. */
.lindsay-m3-field-date:not(.is-filled):not(.is-focused) .lindsay-m3-field-input {
  color: transparent;
}

.lindsay-m3-field-date:not(.is-filled):not(.is-focused) .lindsay-m3-field-input::-webkit-datetime-edit,
.lindsay-m3-field-date:not(.is-filled):not(.is-focused) .lindsay-m3-field-input::-webkit-datetime-edit-fields-wrapper,
.lindsay-m3-field-date:not(.is-filled):not(.is-focused) .lindsay-m3-field-input::-webkit-datetime-edit-text,
.lindsay-m3-field-date:not(.is-filled):not(.is-focused) .lindsay-m3-field-input::-webkit-datetime-edit-month-field,
.lindsay-m3-field-date:not(.is-filled):not(.is-focused) .lindsay-m3-field-input::-webkit-datetime-edit-day-field,
.lindsay-m3-field-date:not(.is-filled):not(.is-focused) .lindsay-m3-field-input::-webkit-datetime-edit-year-field {
  color: transparent;
}

.lindsay-m3-field-date.is-focused .lindsay-m3-field-input,
.lindsay-m3-field-date.is-filled .lindsay-m3-field-input {
  color: var(--lindsay-m3-on-surface);
}

.lindsay-m3-field-label {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  max-width: calc(100% - 1.5rem);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--lindsay-m3-on-surface-variant);
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: left center;
  transition: transform 0.15s ease, color 0.15s ease, top 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
  background: transparent;
  padding: 0 0.2rem;
}

.lindsay-m3-field-outline {
  position: absolute;
  inset: 0;
  border: 1px solid var(--lindsay-m3-outline);
  border-radius: 4px;
  pointer-events: none;
  transition: border-color 0.15s ease, border-width 0.15s ease;
  z-index: 0;
}

/* Outlined / floating label — on border when editing or has value */
.lindsay-m3-field.is-filled .lindsay-m3-field-label,
.lindsay-m3-field.is-focused .lindsay-m3-field-label {
  top: 0;
  transform: translateY(-50%) scale(0.75);
  background: var(--lindsay-m3-surface);
  padding: 0 0.35rem;
  max-width: calc(133% - 1rem);
}

.lindsay-m3-field.is-filled .lindsay-m3-field-input,
.lindsay-m3-field.is-focused .lindsay-m3-field-input {
  padding-top: 0.875rem;
  padding-bottom: 0.25rem;
  height: var(--lindsay-m3-field-height);
}

.lindsay-m3-field.is-focused .lindsay-m3-field-outline {
  border-color: var(--lindsay-m3-outline-focus);
  border-width: 2px;
}

.lindsay-m3-field.is-focused .lindsay-m3-field-label {
  color: var(--lindsay-m3-outline-focus);
}

/* Sensitive on-file values (TIN, account #): show status inside the field, not below it */
.lindsay-m3-field-on-file:not(.is-focused) .lindsay-m3-field-input::placeholder {
  color: var(--lindsay-m3-on-surface-variant);
  opacity: 1;
}

.lindsay-m3-field-readonly .lindsay-m3-field-input {
  color: var(--lindsay-m3-on-surface-variant);
  cursor: default;
}

.lindsay-m3-field-readonly .lindsay-m3-field-control {
  background: var(--lindsay-m3-readonly-surface);
  border-radius: 4px;
}

.lindsay-m3-field-readonly .lindsay-m3-field-outline {
  border-color: var(--lindsay-m3-readonly-outline);
  border-style: dashed;
}

.lindsay-m3-field-readonly.is-filled .lindsay-m3-field-label,
.lindsay-m3-field-readonly.is-focused .lindsay-m3-field-label {
  background: var(--lindsay-m3-readonly-surface);
}

.lindsay-m3-field-readonly.is-focused .lindsay-m3-field-outline {
  border-color: var(--lindsay-m3-readonly-outline);
  border-width: 1px;
}

.lindsay-m3-field-readonly.is-focused .lindsay-m3-field-label {
  color: var(--lindsay-m3-on-surface-variant);
}

/* Reference-only values (e.g. sign-in email) — readable, not grayed/disabled-looking */
.lindsay-m3-field-reference .lindsay-m3-field-input {
  color: var(--lindsay-m3-on-surface);
  cursor: default;
}

.lindsay-m3-field-reference .lindsay-m3-field-control {
  background: var(--lindsay-m3-surface);
}

.lindsay-m3-field-reference .lindsay-m3-field-outline {
  border-color: var(--lindsay-m3-outline);
  border-style: solid;
}

.lindsay-m3-field-reference.is-filled .lindsay-m3-field-label,
.lindsay-m3-field-reference.is-focused .lindsay-m3-field-label {
  background: var(--lindsay-m3-surface);
}

.lindsay-m3-field-reference.is-focused .lindsay-m3-field-outline {
  border-color: var(--lindsay-m3-outline);
  border-width: 1px;
}

.lindsay-m3-field-reference.is-focused .lindsay-m3-field-label {
  color: var(--lindsay-m3-on-surface-variant);
}

.lindsay-m3-field-mono .lindsay-m3-field-input {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.875rem;
}

.lindsay-m3-field-hint {
  margin: 0.25rem 0 0 0.75rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--lindsay-m3-on-surface-variant);
}

@media (max-width: 767px) {
  .lindsay-m3-field-input {
    font-size: 16px;
  }
}

/* M3 filled / tonal buttons — https://m3.material.io/components/buttons/overview */
.lindsay-m3-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  min-height: var(--lindsay-m3-field-height);
  padding: 0 1.5rem;
  border: none;
  border-radius: calc(var(--lindsay-m3-field-height) / 2);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.00625rem;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.lindsay-m3-button:focus {
  outline: none;
}

.lindsay-m3-button:focus-visible {
  outline: 2px solid var(--lindsay-m3-primary);
  outline-offset: 2px;
}

.lindsay-m3-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  box-shadow: none;
}

.lindsay-m3-button-filled {
  background: var(--lindsay-m3-primary);
  color: #fff;
}

.lindsay-m3-button-filled:hover:not(:disabled) {
  background: #0b3a66;
}

.lindsay-m3-button-filled:active:not(:disabled) {
  background: #061f38;
}