/* Field Ops v2 components: actions (button, icon button, segmented, chip, badge). Tokens only. */

/* v3: capsule buttons on both phones (iOS 26 capsules, M3 2025 round buttons); 50 px on iPhone, 48 on Android. */
.fld-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 3.125rem; padding: 0 1.25rem; border: 0; border-radius: 6.25rem; background: var(--fld-brand); color: var(--fld-onbrand); font-size: var(--fld-fs-body); font-weight: 700; text-decoration: none; position: relative; overflow: hidden; transition: transform var(--fld-dur-press) var(--fld-ease), filter var(--fld-dur-press); }
:root[data-platform="android"] .fld-btn { min-height: var(--fld-ctl); font-weight: 500; }
.fld-btn:active { transform: scale(.97); filter: brightness(.92); }
.fld-btn .fld-i { width: 1.25rem; height: 1.25rem; }
.fld-btn--tonal { background: var(--fld-surface2); color: var(--fld-ink); }
.fld-btn--tonal.fld-btn--small { color: var(--fld-brand); }   /* a row action (Hand out): quiet, so only the screen's main action is filled orange */
.fld-btn--outline { background: transparent; color: var(--fld-ink); box-shadow: inset 0 0 0 1.5px var(--fld-control); }
.fld-btn--ink { background: var(--fld-ink); color: var(--fld-bg); }   /* v3: an action inside a step card, so the screen keeps ONE brand button */
.fld-btn--plain { background: transparent; color: var(--fld-ink2); font-weight: 400; }   /* v3: a quiet way out under the main action (e.g. Cancel and sign in again) */
.fld-btn--ok { background: var(--fld-ok); color: var(--fld-onok); }
.fld-btn--bad { background: var(--fld-badbg); color: var(--fld-bad); }
.fld-btn--small { width: auto; min-height: var(--fld-tap); padding: 0 1rem; font-size: .9375rem; }
.fld-btn[disabled], .fld-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.fld-btn[aria-busy="true"] { pointer-events: none; }
.fld-btn[aria-busy="true"] > :not(.fld-btn__spin) { opacity: 0; }
.fld-btn__spin { position: absolute; inset: 0; display: none; place-items: center; }
.fld-btn[aria-busy="true"] .fld-btn__spin { display: grid; }
.fld-btn__spin::before { content: ""; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: fld-spin .7s linear infinite; }
@keyframes fld-spin { to { transform: rotate(360deg); } }
.fld-btn--hold { touch-action: none; }
.fld-btn__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fld-fill); pointer-events: none; }
.fld-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--fld-tap); padding: 0 .5rem; border: 0; background: transparent; color: var(--fld-brand); font-size: var(--fld-fs-sub); font-weight: 600; text-decoration: none; }

.fld-iconbtn { width: var(--fld-tap); height: var(--fld-tap); display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--fld-surface2); color: var(--fld-ink); flex: none; }
.fld-iconbtn--plain { background: transparent; }
.fld-iconbtn--glass { background: var(--fld-glass-on-dark); color: var(--fld-white); }
.fld-iconbtn .fld-i { width: 1.375rem; height: 1.375rem; }
.fld-iconbtn:active { transform: scale(.94); }
/* The sheet's close button: a lighter 32 px circle and a 16 px cross with the full 44 px to tap (a transparent 6 px border around the circle, painted only inside it). The focus ring hugs the circle. */
.fld-iconbtn--close { border: .375rem solid transparent; background-clip: padding-box; }
.fld-iconbtn--close .fld-i { width: 1rem; height: 1rem; }
.fld-iconbtn--close:focus-visible { outline-offset: -.375rem; }

/* Segmented control (links or buttons) */
/* Segmented control. iPhone: sliding capsule thumb in a track. Android: M3 segmented buttons (outlined, selected = tonal fill + check). */
.fld-seg { display: flex; background: var(--fld-surface2); border-radius: 6.25rem; padding: .1875rem; gap: .125rem; }
.fld-seg__btn { flex: 1; min-height: var(--fld-tap); display: inline-flex; align-items: center; justify-content: center; gap: .375rem; border: 0; border-radius: 6.25rem; background: transparent; color: var(--fld-ink2); font-size: .9375rem; font-weight: 600; text-decoration: none; transition: background-color var(--fld-dur-press) var(--fld-ease), color var(--fld-dur-press); }
.fld-seg__btn[aria-pressed="true"], .fld-seg__btn[aria-current="page"] { background: var(--fld-surface); color: var(--fld-ink); box-shadow: 0 2px 6px var(--fld-lift); }
:root[data-platform="android"] .fld-seg { background: transparent; padding: 0; gap: 0; box-shadow: inset 0 0 0 1px var(--fld-control); overflow: hidden; }
:root[data-platform="android"] .fld-seg__btn { border-radius: 0; font-size: .875rem; font-weight: 500; color: var(--fld-ink); }
:root[data-platform="android"] .fld-seg__btn + .fld-seg__btn { box-shadow: inset 1px 0 0 var(--fld-control); }
:root[data-platform="android"] .fld-seg__btn[aria-pressed="true"], :root[data-platform="android"] .fld-seg__btn[aria-current="page"] { background: color-mix(in srgb, var(--fld-brand) 16%, transparent); box-shadow: none; }
:root[data-platform="android"] .fld-seg__btn[aria-pressed="true"]::before, :root[data-platform="android"] .fld-seg__btn[aria-current="page"]::before { content: "✓"; font-weight: 700; }

.fld-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fld-fs-cap); font-weight: 600; padding: .25rem .625rem; border-radius: .625rem; background: var(--fld-surface2); color: var(--fld-ink); white-space: nowrap; }
:root[data-platform="android"] .fld-chip { border-radius: .5rem; padding: .3125rem .625rem; font-weight: 500; }
.fld-chip--ok { background: var(--fld-okbg); color: var(--fld-ok); }
.fld-chip--bad { background: var(--fld-badbg); color: var(--fld-bad); }
.fld-chip--hold { background: var(--fld-holdbg); color: var(--fld-hold); }
.fld-badge { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .375rem; border-radius: .6875rem; background: var(--fld-mark); color: var(--fld-onmark); font-size: var(--fld-fs-cap); font-weight: 700; }
.fld-actions { display: flex; flex-direction: column; gap: .5rem; }
.fld-actions--row { flex-direction: row; flex-wrap: wrap; align-items: center; }