/* Field Ops v2 components: surfaces (card, list, list row, stat hero, stat tile, ticket stub, empty state). Tokens only. */

.fld-card { background: var(--fld-surface); border-radius: var(--fld-r-card); padding: 1rem; }
.fld-card--flush { padding: 0; overflow: hidden; }

/* The small label above a figure or a block (decision P6-26): sentence case like the section labels and the tiles. The ticket stub keeps its caption style (the one decorative part). */
.fld-label-cap { font-size: var(--fld-fs-sub); font-weight: 600; color: var(--fld-ink2); }
.fld-stub .fld-label-cap { font-size: var(--fld-fs-cap); letter-spacing: .08em; text-transform: uppercase; }

/* List: grouped rows, inset dividers */
.fld-list { background: var(--fld-surface); border-radius: var(--fld-r-card); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.fld-list__row { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem; padding: .75rem 1rem; border: 0; background: transparent; color: inherit; text-align: left; text-decoration: none; }
.fld-list__row + .fld-list__row::before { content: ""; position: absolute; top: 0; left: 1rem; right: 0; border-top: 1px solid var(--fld-line); }
.fld-list__row--tap:active { background: var(--fld-surface2); }
.fld-list__lead { width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: var(--fld-surface2); display: grid; place-items: center; flex: none; font-size: var(--fld-fs-sub); font-weight: 700; }
.fld-list__lead .fld-i { width: 1.25rem; height: 1.25rem; }
.fld-list__lead--hold { background: var(--fld-holdbg); color: var(--fld-hold); }
.fld-list__lead--bad { background: var(--fld-badbg); color: var(--fld-bad); }
.fld-list__main { flex: 1; min-width: 0; }
.fld-list__title { display: block; font-size: var(--fld-fs-body); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }   /* a long unbroken word (an email, a surname) breaks at the row edge instead of running under the figure */
.fld-list__sub { display: block; font-size: var(--fld-fs-sub); color: var(--fld-ink2); line-height: 1.3; overflow-wrap: anywhere; }
.fld-list__trail { display: flex; align-items: center; gap: .5rem; flex: none; }
.fld-list__amount { font-family: var(--fld-num); font-weight: 700; font-size: var(--fld-fs-amt); }
.fld-list__chev { width: 1rem; height: 1rem; color: var(--fld-ink2); }
/* meter_row: the title and figure on one line, the thin bar under both */
.fld-meter { flex-wrap: wrap; row-gap: .375rem; }
.fld-meter__bar { flex: 1 0 100%; }
.fld-meter .fld-progress--thin { margin-top: 0; }

/* Stat hero (v3, A+B mix): the one bold block on a screen. Ink in Day, logo orange in Gate (tokens --fld-hero-*). */
.fld-hero { background: var(--fld-hero-bg); color: var(--fld-hero-ink); border-radius: calc(var(--fld-r-card) + .375rem); padding: 1.25rem; }
.fld-hero .fld-label-cap, .fld-hero .fld-hero__of, .fld-hero .fld-hero__foot { color: var(--fld-hero-ink2); }
.fld-hero .fld-progress { background: var(--fld-hero-track); }
.fld-hero .fld-progress__bar { background: var(--fld-hero-fill); }
.fld-hero .fld-list__sub { color: var(--fld-hero-ink2); }
.fld-hero .fld-tiles { background: transparent; border-radius: 0; margin-top: .875rem; padding-top: .75rem; border-top: 1px solid var(--fld-hero-track); gap: 0; }
.fld-hero .fld-tile { background: transparent; padding: 0; }
.fld-hero .fld-tile .fld-label-cap, .fld-hero .fld-tile .fld-list__sub { color: var(--fld-hero-ink2); }
.fld-hero__value { font-family: var(--fld-num); font-weight: 800; font-size: calc(var(--fld-fs-hero) * 1.25); line-height: 1.05; letter-spacing: -.03em; margin-top: .25rem; }
.fld-hero__of { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; color: var(--fld-ink2); }
.fld-hero__foot { display: flex; justify-content: space-between; gap: .75rem; margin-top: .5rem; font-size: var(--fld-fs-sub); color: var(--fld-ink2); }

/* Tiles (v3, owner 2026-10-14 "too small and empty"): separate rounded cards with a small icon chip, a big figure and a one-line label; they rise in one after
   another and the figure counts up (motion.js). Inside a hero they stay flat ledger cells (see .fld-hero .fld-tile below). */
.fld-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.75rem, 1fr)); gap: .5rem; }   /* three across at the normal text size, wrapping to two and one as the text grows (rem follows the phone's text size) */
.fld-tiles--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fld-evlist { margin-top: .75rem; }
.fld-evlist__empty { padding: 1.5rem .5rem; text-align: center; }
.fld-tile { background: var(--fld-surface); padding: .875rem; min-width: 0; border-radius: var(--fld-r-card); }
:root[data-platform="ios"] .fld-tile { box-shadow: 0 1px 2px color-mix(in srgb, var(--fld-ink) 8%, transparent); }   /* iPhone: a whisper of lift; Android cards stay flat tonal */
@media (prefers-reduced-motion: no-preference) {
  .fld-tile { animation: fld-tile-rise 280ms var(--fld-ease) both; }
  .fld-tile:nth-child(2) { animation-delay: 40ms; }
  .fld-tile:nth-child(3) { animation-delay: 80ms; }
}
@keyframes fld-tile-rise { from { opacity: 0; transform: translateY(.5rem); } }
.fld-tile__value { display: block; font-family: var(--fld-num); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; margin-top: .375rem; overflow-wrap: anywhere; }   /* a figure has no spaces so it stays whole; free text (the sync sheet's "Oldest") may wrap, never push a sheet sideways */
/* Glance tile (decision P6-25): the figure, the label in sentence case, then one context line (the currency, or "of 600 allocated"). The currency is never part of the figure,
   so the figure never wraps and is never taken for a count. v3: the tonal icon is not drawn (ledger look). */
.fld-tile { display: flex; flex-direction: column; }
.fld-tile__ico { order: 0; display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .625rem; border-radius: 50%; background: var(--fld-surface2); color: var(--fld-ink); }
.fld-tile__ico .fld-i { width: 1.0625rem; height: 1.0625rem; }
.fld-hero .fld-tile__ico { display: none; }
.fld-hero .fld-tile { animation: none; box-shadow: none; }
.fld-hero .fld-tile .fld-tile__value { font-size: 1.5rem; font-weight: 800; }
.fld-tile__value { order: 1; margin-top: 0; font-size: 1.875rem; font-weight: 700; }
.fld-tile__label { order: 2; margin-top: .25rem; font-size: var(--fld-fs-sub); letter-spacing: 0; text-transform: none; }
.fld-tile__unit, .fld-tile__sub { order: 3; display: block; margin-top: .125rem; font-size: var(--fld-fs-cap); font-weight: 600; color: var(--fld-ink2); }

/* Ticket stub: the one decorative part (Review and Done only) */
.fld-stub { position: relative; background: var(--fld-surface); border-radius: var(--fld-r-card); overflow: hidden; --fld-stub-cut: 6rem; }
.fld-stub__top { padding: 1rem; border-bottom: 2px dashed var(--fld-line); }
.fld-stub__headline { font-size: 1.5rem; line-height: 1.1; margin-top: .25rem; }
.fld-stub__value { font-size: 1.375rem; }
.fld-empty__actions { width: 100%; max-width: 20rem; }
.fld-stub__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem; padding: .875rem 1rem; }
.fld-stub::before, .fld-stub::after { content: ""; position: absolute; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--fld-bg); top: calc(var(--fld-stub-cut) - .6875rem); }
.fld-stub::before { left: -.6875rem; }
.fld-stub::after { right: -.6875rem; }

/* Empty / error state: the centred focal group */
.fld-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; text-align: center; padding: 2rem 1rem; min-height: 50dvh; }
.fld-empty__icon { width: 4rem; height: 4rem; display: grid; place-items: center; color: var(--fld-ink); }   /* v3: a line drawing in ink, no tinted circle */
.fld-empty__icon .fld-i { width: 3.5rem; height: 3.5rem; stroke-width: 1.2; }
.fld-empty__title { font-family: var(--fld-num); font-weight: 700; font-size: var(--fld-fs-sheet); }
.fld-empty__text { color: var(--fld-ink2); font-size: var(--fld-fs-sub); max-width: 22rem; }
.fld-empty__ref { font-family: var(--fld-mono); font-size: var(--fld-fs-cap); color: var(--fld-ink2); }
/* State screens (empty, error, offline, no access): the compact group sits a little above true centre (about 40 / 60). */
.fld-screen--center { display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(var(--fld-safe-bottom) + 1rem); }
.fld-screen--center.fld-screen--tabs { padding-bottom: calc(var(--fld-tabbar-h) + var(--fld-safe-bottom) + 2rem); }
.fld-screen--center > .fld-empty { margin-bottom: 8dvh; }

/* Quiet line under a control; platform-only variants are shown by CSS from data-platform (no JS) */
.fld-note { color: var(--fld-ink2); font-size: var(--fld-fs-sub); line-height: 1.35; }
/* Info block (decision P6-28): a tonal block with an info icon and one or two short sentences. */
.fld-info { display: flex; align-items: center; gap: .625rem; padding: .75rem; border-radius: calc(var(--fld-r-card) - .25rem); background: var(--fld-surface2); }
.fld-info__ico { flex: none; width: 1.25rem; height: 1.25rem; color: var(--fld-ink2); }
.fld-info__ico .fld-i { width: 1.25rem; height: 1.25rem; }
.fld-info__text { margin: 0; min-width: 0; color: var(--fld-ink2); font-size: var(--fld-fs-sub); line-height: 1.35; }
.fld-info__ios, .fld-info__android { display: none; }
:root[data-platform="ios"] .fld-info__ios { display: inline; }
:root[data-platform="android"] .fld-info__android { display: inline; }
.fld-note--ios-only { display: none; }
:root[data-platform="ios"] .fld-note--ios-only { display: block; }
.fld-note--android-only { display: none; }
:root[data-platform="android"] .fld-note--android-only { display: block; }

.fld-install { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; margin-bottom: 8dvh; }
.fld-install > .fld-btn, .fld-install .fld-only > .fld-btn { max-width: 20rem; }
.fld-install .fld-steps { text-align: left; max-width: 22rem; }
.fld-only { display: none; flex-direction: column; gap: .75rem; }
:root[data-platform="ios"] .fld-only--ios { display: flex; }
:root[data-platform="android"] .fld-only--android { display: flex; }
.fld-only[data-ready="false"] { display: none !important; }

/* Numbered steps (2FA set-up) */
.fld-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.fld-steps__item { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--fld-fs-body); line-height: 1.35; }
.fld-steps__n { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--fld-surface2); display: grid; place-items: center; font-size: var(--fld-fs-sub); font-weight: 700; }
.fld-steps__text { flex: 1; min-width: 0; padding-top: .125rem; }
/* step_card (v3 board 3): a numbered step on its own surface; the number is an ink disc, the body lines up under the title. */
.fld-stepcard { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border-radius: var(--fld-r-card); background: var(--fld-surface); }
.fld-stepcard__head { display: flex; align-items: center; gap: .75rem; }
.fld-stepcard__n { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--fld-ink); color: var(--fld-bg); font-size: var(--fld-fs-sub); font-weight: 700; }
.fld-stepcard__title { margin: 0; font-size: var(--fld-fs-body); font-weight: 700; }
.fld-stepcard__body { display: flex; flex-direction: column; gap: .75rem; }
.fld-stepcard__body > p { margin: 0; color: var(--fld-ink2); font-size: var(--fld-fs-body); line-height: 1.35; }
.fld-stepcard .fld-field { margin: 0; }
.fld-stepcard .fld-disc { margin: 0; border-top: 1px solid var(--fld-line); }

/* One-time codes: two mono columns on a surface */
.fld-codes { list-style: none; margin: 0; padding: .75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .75rem; background: var(--fld-surface); border-radius: var(--fld-r-card); }
.fld-codes__item { font-family: var(--fld-mono); font-weight: 600; font-size: var(--fld-fs-body); letter-spacing: .04em; padding: .5rem .25rem; text-align: center; overflow-wrap: anywhere; }

/* Disclosure: native <details> */
.fld-disc { background: var(--fld-surface); border-radius: var(--fld-r-ctl); }
.fld-disc__sum { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.5rem; padding: .5rem 1rem; list-style: none; font-size: var(--fld-fs-body); font-weight: 600; }
.fld-disc__sum::-webkit-details-marker { display: none; }
.fld-disc__chev { width: 1rem; height: 1rem; color: var(--fld-ink2); transition: transform var(--fld-dur-press); }
.fld-disc[open] .fld-disc__chev { transform: rotate(180deg); }
.fld-disc__body { padding: 0 1rem 1rem; }

/* QR tile: always dark on white, in Gate too */
.fld-qr { width: min(100%, 14rem); margin-inline: auto; padding: .75rem; border-radius: var(--fld-r-ctl); background: var(--fld-white); line-height: 0; }
.fld-qr svg { width: 100%; height: auto; }