/* Field Ops v2 components: inputs (field, OTP, stepper, switch) and forms. Tokens only.
   Inputs are never below 16 px (rem >= 1): iOS zooms the page on focus under 16. */

.fld-field { display: flex; flex-direction: column; gap: .375rem; margin: .75rem 0; }
.fld-field__label { font-size: var(--fld-fs-sub); font-weight: 600; color: var(--fld-ink2); }
.fld-field__control { position: relative; display: flex; align-items: center; }
.fld-field__input { width: 100%; min-height: 3.125rem; padding: 0 .875rem; border: 1.5px solid var(--fld-control); border-radius: var(--fld-r-ctl); background: var(--fld-surface); color: var(--fld-ink); font-size: max(1rem, var(--fld-fs-body)); line-height: 1.2; transition: border-color var(--fld-dur-press), box-shadow var(--fld-dur-press); }
.fld-field__input:focus { outline: 0; border-color: var(--fld-ink); box-shadow: 0 0 0 1px var(--fld-ink); }
.fld-field__input:focus-visible { outline: 3px solid var(--fld-focus); outline-offset: 1px; }
.fld-field__input[aria-invalid="true"] { border-color: var(--fld-bad); box-shadow: 0 0 0 1px var(--fld-bad); }
/* Android: the M3 filled text field: tonal fill, rounded top, an underline that thickens in brand on focus. */
:root[data-platform="android"] .fld-field__input { min-height: 3.5rem; border: 0; border-radius: .75rem .75rem .25rem .25rem; background: var(--fld-surface2); box-shadow: inset 0 -1px 0 var(--fld-control); }
:root[data-platform="android"] .fld-form__group .fld-field__input { background: var(--fld-surface2); }
:root[data-platform="android"] .fld-field__input:focus { box-shadow: inset 0 -2px 0 var(--fld-brand); }
:root[data-platform="android"] .fld-field__input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--fld-bad); }
/* The browser default placeholder grey (Android's is 4.07:1) is under 4.5:1; the secondary ink passes in both themes. */
::placeholder { color: var(--fld-ink2); opacity: 1; }
.fld-field__input--eye { padding-right: 3.25rem; }
/* Centred without a transform: the button's press style (scale) must not replace a translate and make it jump. */
.fld-field__eye { position: absolute; right: .125rem; top: 0; bottom: 0; margin-block: auto; }
/* v3 board 3: iPhone says "Show" / "Hide" in brand text (as iOS apps do); Android keeps the eye icon (M3 trailing icon). */
.fld-field__eyetext { display: none; }
:root:not([data-platform="android"]) .fld-field__eye { width: auto; min-width: 2.75rem; padding-inline: .75rem; }
:root:not([data-platform="android"]) .fld-field__eye > svg { display: none; }
:root:not([data-platform="android"]) .fld-field__eyetext { display: inline; color: var(--fld-brand); font-size: var(--fld-fs-body); font-weight: 600; }
:root:not([data-platform="android"]) .fld-field__input--eye { padding-right: 4.5rem; }
.fld-field__hint { font-size: var(--fld-fs-sub); color: var(--fld-ink2); }
.fld-field__error { font-size: var(--fld-fs-sub); font-weight: 600; color: var(--fld-bad); }
/* field_warn: warns, does not stop (A9). Hold colour on its tint, with the warn icon and words. */
.fld-field__warn { display: flex; gap: .375rem; align-items: flex-start; margin: .375rem 0 0; padding: .5rem .625rem;
  border-radius: var(--fld-r-ctl); background: var(--fld-holdbg); color: var(--fld-hold);
  font-size: var(--fld-fs-sub); font-weight: 600; }
.fld-field__warn[hidden] { display: none; }
.fld-field__warnico { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .0625rem; }
.fld-field__input--code { font-family: var(--fld-mono); font-weight: 600; font-size: 1.375rem; letter-spacing: .2em; text-align: center; padding-left: .2em; }
/* v3 board 3: the 6-digit code as six boxes, drawn over the one real input (which stays focusable, autofillable and readable).
   No card around it. A longer value (recovery code) shows the plain field (.is-long, set by components.js). */
.fld-form__group:has(> .fld-field--otp:only-child) { background: transparent; padding: 0; }
.fld-field--otp .fld-field__control { min-height: 3.75rem; }
.fld-field--otp:not(.is-long) .fld-field__input,
:root[data-platform] .fld-field--otp:not(.is-long) .fld-field__input,
:root[data-platform] .fld-field--otp:not(.is-long) .fld-field__input:focus { position: absolute; inset: 0; min-height: 0; height: 100%; border: 0; box-shadow: none; background: transparent; color: transparent; caret-color: transparent; -webkit-text-fill-color: transparent; }
.fld-field--otp:not(.is-long) .fld-field__input::placeholder { color: transparent; }
.fld-otp { position: relative; flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; pointer-events: none; }
.fld-field--otp.is-long .fld-otp { display: none; }
.fld-otp__box { display: grid; place-items: center; min-height: 3.75rem; border-radius: var(--fld-r-ctl); background: var(--fld-surface); box-shadow: inset 0 0 0 1.5px var(--fld-line); font-family: var(--fld-mono); font-size: 1.625rem; font-weight: 700; color: var(--fld-ink); }
.fld-otp__box.is-next { box-shadow: inset 0 0 0 2px var(--fld-ink); }
.fld-field--otp:has(.fld-field__input[aria-invalid="true"]) .fld-otp__box { box-shadow: inset 0 0 0 1.5px var(--fld-bad); }
:root[data-platform="android"] .fld-otp__box { border-radius: .75rem .75rem .25rem .25rem; background: var(--fld-surface2); box-shadow: inset 0 -1px 0 var(--fld-control); }
:root[data-platform="android"] .fld-otp__box.is-next { box-shadow: inset 0 -2px 0 var(--fld-brand); }
.fld-field--otp .fld-field__input:focus-visible { outline: 0; }   /* the next box carries the focus mark */
.fld-field__input--search { padding-left: 2.5rem; }
.fld-field__lead { position: absolute; left: .75rem; width: 1.25rem; height: 1.25rem; color: var(--fld-ink2); pointer-events: none; }

/* Switch: the button is the 44 px hit area; the track (::before, 51x31 iPhone / 52x32 Android) and knob (::after) are drawn inside it */
.fld-switch { position: relative; width: 3.5rem; height: var(--fld-tap); flex: none; border: 0; background: transparent; padding: 0; }
.fld-switch::before { content: ""; position: absolute; top: 50%; left: 50%; width: 3.1875rem; height: 1.9375rem; transform: translate(-50%, -50%); border-radius: 1rem; background: var(--fld-control); transition: background 150ms; }
.fld-switch::after { content: ""; position: absolute; top: 50%; left: calc(50% - 1.5rem); width: 1.6875rem; height: 1.6875rem; margin-top: -.84375rem; border-radius: 50%; background: var(--fld-knob); box-shadow: 0 1px 3px var(--fld-knob-shadow); transition: transform 180ms var(--fld-ease); }
.fld-switch[aria-checked="true"]::before { background: var(--fld-ok); }
.fld-switch[aria-checked="true"]::after { transform: translateX(1.25rem); }
:root[data-platform="android"] .fld-switch::before { width: 3.25rem; height: 2rem; background: transparent; box-shadow: inset 0 0 0 2px var(--fld-control); }   /* M3 off: outlined track, small grey thumb */
:root[data-platform="android"] .fld-switch::after { left: calc(50% - 1.125rem); width: 1rem; height: 1rem; margin-top: -.5rem; background: var(--fld-control); box-shadow: none; }
:root[data-platform="android"] .fld-switch[aria-checked="true"]::before { box-shadow: none; }
:root[data-platform="android"] .fld-switch[aria-checked="true"]::before { background: var(--fld-brand); }
:root[data-platform="android"] .fld-switch[aria-checked="true"]::after { width: 1.5rem; height: 1.5rem; margin-top: -.75rem; left: calc(50% - 1.25rem); transform: translateX(1.375rem); background: var(--fld-onbrand); }

.fld-stepper { display: flex; align-items: center; gap: .375rem; flex: none; }   /* never squeezed by a long title beside it: the buttons must stay 44 px */
.fld-stepper__btn { flex: none; width: var(--fld-tap); height: var(--fld-tap); border: 0; border-radius: 50%; background: var(--fld-surface2); color: var(--fld-ink); display: grid; place-items: center; }
.fld-stepper__btn .fld-i { width: 1.25rem; height: 1.25rem; }
.fld-stepper__value { min-width: 2.5rem; text-align: center; font-family: var(--fld-num); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* Forms */
.fld-form { display: flex; flex-direction: column; gap: .75rem; }
.fld-form__section { display: flex; flex-direction: column; }
/* A section's fields sit together in one surface group (iOS grouped sections, M3 one field style per region):
   the group is the card, each field is an outlined well on the page ground, labels stay above, fields stay full width. */
.fld-form__group { background: var(--fld-surface); border-radius: calc(var(--fld-r-card) + .125rem); padding: .375rem 1rem 1rem; }
.fld-form__group .fld-field__input { background: var(--fld-bg); }
.fld-form__group > .fld-field:first-child { margin-top: .5rem; }
.fld-form__error { padding: .625rem .75rem; border-radius: .75rem; background: var(--fld-badbg); color: var(--fld-bad); font-size: var(--fld-fs-sub); font-weight: 600; }
.fld-actionbar { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: .5rem; padding: .75rem 0 calc(var(--fld-safe-bottom) + .75rem); margin: 0 calc(var(--fld-gutter) * -1); padding-inline: var(--fld-gutter); background: var(--fld-glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.fld-form[aria-busy="true"] { pointer-events: none; }
.fld-switchrow { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .5rem 1rem; background: var(--fld-surface); border-radius: var(--fld-r-ctl); }
.fld-switchrow__text { flex: 1; min-width: 0; }

/* Remembered organisation on sign-in: label above, a removable pill instead of the field */
.fld-orgchip { display: flex; flex-direction: column; gap: .375rem; margin: .75rem 0; }
.fld-orgchip__pill { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: var(--fld-ctl); padding: 0 .25rem 0 1rem; border-radius: 6.25rem; background: var(--fld-surface2); }
.fld-orgchip__name { font-size: var(--fld-fs-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }