/* Miniatura da Pesquisa de Campo (topo de campo.html e vitrine de products.html): o celular de quem coleta e o
   painel da gestão no navegador, ligados pelo fio com o orbe da marca no meio (o servidor). Mesma gramática do
   order-flow.css do Salão (linhas de 1 px, losangos, recortes que escrevem), com o temperamento oposto: o fio pode
   ser cortado. O field-flow.js troca os quadros (classes cumulativas f1…f7 no .ff) e anda os pacotes pelo fio.

   Como o CSS se organiza:
   1. Desenho e QUADRO FINAL (todas as classes f1…f7, como vem no HTML): é o que aparece sem JS.
   2. O que muda a cada quadro: ".ff.fN" vale do quadro N em diante; ".ff.fN:not(.fM)" só entre N e M-1.
      As trocas são transições curtas (transform, opacity, clip-path); com .ff-instant (voltar um passo, recomeço)
      elas não animam. Com movimento reduzido o base.css já zera tudo.
   3. Movimento reduzido: o field-flow.js troca a cena pelas três etapas lado a lado, paradas (.ff-solo).
   Só tokens semânticos; as cores próprias abaixo são misturas deles (valem no claro e no escuro). */

.ff {
  container: ff / inline-size;
  margin: 0;
  min-width: 0;
  --ff-tone: var(--color-partner);
  --ff-glow: var(--color-glow-partner);
  --ff-on: var(--color-on-partner);
  --ff-tone-text: color-mix(in srgb, var(--color-partner) 70%, var(--color-text));
  --ff-tone-soft: color-mix(in srgb, var(--color-partner) 14%, var(--color-panel-solid));
  --ff-ok-text: color-mix(in srgb, var(--color-success) 72%, var(--color-text));
  --ff-ok-bg: color-mix(in srgb, var(--color-success) 16%, var(--color-panel-solid));
  --ff-wait-text: color-mix(in srgb, var(--color-exotic) 80%, var(--color-text));
  --ff-wait-bg: color-mix(in srgb, var(--color-exotic) 18%, var(--color-panel-solid));
  --ff-err-text: color-mix(in srgb, var(--color-orb) 75%, var(--color-text));
  --ff-err-bg: color-mix(in srgb, var(--color-orb) 14%, var(--color-panel-solid));
  --ff-wire: color-mix(in srgb, var(--color-line-strong) 55%, transparent);
  --ff-ease: cubic-bezier(.2, .7, .2, 1);
  --ff-w0: inset(-.3em calc(100% + 2px) -.3em -.3em);
  --ff-w1: inset(-.3em -.3em -.3em -.3em);
}

/* Palco medido em em: celular (padrão) 1 em = largura / 26; computador: largura / 52 */
.ff-stage {
  position: relative;
  width: 26em;
  max-width: 100%;
  margin-inline: auto;
  padding: .45em .5em .4em;
  font-size: .8125rem;
  font-size: min(calc(100cqw / 26), .875rem);
  color: var(--color-text);
  line-height: 1.25;
}
/* Antes do field-flow.js pôr a cena no 1º quadro, ela não aparece (a marca ff-js vem do field-flow-head.js) */
.ff-js .ff:not(.ff-on):not(.ff-solo) .ff-stage { visibility: hidden; }

.ff-corner { position: absolute; width: 10px; height: 10px; border: 0 solid var(--color-line-strong); }
.ff-corner--tl { left: 0; top: 0; border-width: 1px 0 0 1px; }
.ff-corner--tr { right: 0; top: 0; border-width: 1px 1px 0 0; }
.ff-corner--bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.ff-corner--br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }

/* ---------- Trilho: 01 Em campo → 02 Sinal de volta → 03 No mapa. Acende a etapa da vez (data-stage, do JS);
   sem JS, as três acesas ---------- */
.ff-rail {
  --ff-gap: 5px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--ff-gap);
  margin: 0 0 .8em;
  padding: 0 .2em;
  font-size: min(.75rem, .92em, calc((96cqw - 92px) / 20));
  line-height: 1.2;
  white-space: nowrap;
}
.ff-step { display: flex; flex: none; align-items: center; gap: var(--ff-gap); color: var(--color-muted); transition: color .3s; }
.ff-step-txt b { font-family: var(--font-mono); font-size: .92em; font-weight: 500; margin-right: .35em; }
.ff-mark { position: relative; width: 9px; height: 9px; border: 1px solid var(--color-line-strong); transform: rotate(45deg); flex-shrink: 0; }
.ff-mark i { position: absolute; inset: 1px; background: var(--ff-tone); transform: scale(0); transition: transform .3s var(--ff-ease); }
.ff-link { position: relative; flex: 1 1 0; min-width: 6px; height: 1px; background: var(--color-line); }
.ff-link i { position: absolute; inset: 0; background: var(--ff-tone); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--ff-ease); }
.ff:not([data-stage]) .ff-step, .ff[data-stage="1"] .ff-step--1, .ff[data-stage="2"] :is(.ff-step--1, .ff-step--2), .ff[data-stage="3"] .ff-step { color: var(--ff-tone-text); }
.ff:not([data-stage]) .ff-mark i, .ff[data-stage="1"] .ff-step--1 .ff-mark i, .ff[data-stage="2"] :is(.ff-step--1, .ff-step--2) .ff-mark i, .ff[data-stage="3"] .ff-mark i { transform: none; }
.ff:not([data-stage]) .ff-link i, .ff[data-stage="2"] .ff-link:nth-child(2) i, .ff[data-stage="3"] .ff-link i { transform: none; }
.ff-live .ff-step { cursor: pointer; }

/* ---------- Cena (celular por padrão): o celular e o painel lado a lado; o fio desce dos dois e se encontra no
   orbe, embaixo, no meio ---------- */
.ff-scene { position: relative; width: 25em; height: 26.4em; margin-inline: auto; }
.ff-dev { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.ff-phone { --x: 0em; --y: 0em; --w: 11.8em; --h: 23em; }
.ff-laptop { --x: 13.2em; --y: 0em; --w: 11.8em; --h: 23em; }

.ff [data-node="P"] { --x: 5.9em; --y: 23em; }
.ff [data-node="K1"] { --x: 5.9em; --y: 25.1em; }
.ff [data-node="H"] { --x: 12.5em; --y: 25.1em; --hs: 2.3em; }
.ff [data-node="K2"] { --x: 19.1em; --y: 25.1em; }
.ff [data-node="L"] { --x: 19.1em; --y: 23em; }
.ff-seg--pk { --x: 5.9em; --y: 23em; --h: 2.1em; --dir: 180deg; }
.ff-seg--kh { --x: 5.9em; --y: 25.1em; --w: 6.6em; --dir: 90deg; }
.ff-seg--hk { --x: 12.5em; --y: 25.1em; --w: 6.6em; }
.ff-seg--kl { --x: 19.1em; --y: 23em; --h: 2.1em; }
.ff-seg--ph, .ff-seg--hl { display: none; }
.ff-gap { --x: 8.4em; --y: 25.1em; }
.ff-park { --x: 7.1em; --y: 25.1em; }

/* ---------- Fio, nós, vão e pacotes ---------- */
.ff-seg { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w, 1px); height: var(--h, 1px); margin: -.5px 0 0 -.5px; background: var(--ff-wire); transition: background .4s; }
/* Com sinal, o fio fica no tom; sem sinal, o trecho do celular vira tracejado */
.ff.f3 .ff-seg { background: color-mix(in srgb, var(--ff-tone) 65%, transparent); }
.ff:not(.f3) .ff-seg--cut { background: repeating-linear-gradient(var(--dir, 90deg), var(--color-line-strong) 0 3px, transparent 3px 7px); }
/* O vão: onde o sinal some (a mesma hachura da bancada do Salão). Fecha quando o sinal volta */
.ff-gap { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 1.7em; height: .95em; margin: -.475em 0 0 -.85em; border-inline: 1px solid var(--color-line-strong); background: repeating-linear-gradient(135deg, var(--color-line-strong) 0 1px, transparent 1px 4px), var(--color-bg); transform: scaleX(0); transition: transform .45s var(--ff-ease); }
.ff:not(.f3) .ff-gap { transform: none; }
.ff-node { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: .6em; height: .6em; margin: -.3em 0 0 -.3em; border: 1px solid var(--color-line-strong); background: var(--color-bg); transform: rotate(45deg); }
.ff-node--k { width: .36em; height: .36em; margin: -.18em 0 0 -.18em; }
/* O orbe da marca no meio do fio: o servidor. Sem sinal, apagado */
.ff-hub { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--hs); height: var(--hs); margin: calc(var(--hs) / -2) 0 0 calc(var(--hs) / -2); border-radius: 50%; }
.ff-hub::before { content: ""; position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ff-glow) calc(22% * var(--glow-strength)), transparent), transparent); opacity: 1; transition: opacity .5s; }
.ff:not(.f3) .ff-hub::before { opacity: 0; }
.ff-hub-still { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s, filter .4s; }
.ff:not(.f3) .ff-hub-still { opacity: .45; filter: grayscale(1); }
.ff-hub-orb { position: absolute; inset: -45%; width: 190%; height: 190%; }
.ff-hub-ring { position: absolute; inset: -.2em; border: 1px solid var(--ff-tone); border-radius: 50%; opacity: 0; pointer-events: none; }
/* A coleta guardada: um losango dourado parado na saída do celular, enquanto não há sinal */
.ff-park { position: absolute; z-index: 4; left: var(--x); top: var(--y); width: .72em; height: .72em; margin: -.36em 0 0 -.36em; background: var(--color-exotic); box-shadow: 0 0 .6em color-mix(in srgb, var(--color-exotic) 60%, transparent); transform: rotate(45deg) scale(0); transition: transform .35s var(--ff-ease); }
.ff.f1:not(.f3) .ff-park { transform: rotate(45deg) scale(1); }
/* Pacotes que correm pelo fio (o JS anima): o dado, pequeno; a foto, maior */
.ff-pkt { position: absolute; z-index: 5; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; color: var(--ff-glow); }
.ff-pkt::before { content: ""; position: absolute; left: -.34em; top: -.34em; width: .68em; height: .68em; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 .9em .15em currentColor; }
.ff-pkt--photo::before { left: -.5em; top: -.5em; width: 1em; height: 1em; }

/* ---------- Aparelhos em desenho técnico ---------- */
.ff-frame { position: absolute; inset: 0; padding: .24em; border: 1px solid var(--color-line-strong); background: var(--color-bg); }
.ff-phone .ff-frame { border-radius: 1.1em; }
.ff-laptop .ff-frame { border-radius: .55em; }
.ff-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--color-line); border-radius: .85em; background: var(--color-bg); }
.ff-laptop .ff-screen { border-radius: .3em; }
.ff-flash { position: absolute; z-index: 6; inset: -1px; border: 1px solid var(--ff-glow); border-radius: inherit; box-shadow: 0 0 1.1em -.25em var(--ff-glow), inset 0 0 1.1em -.5em var(--ff-glow); opacity: 0; pointer-events: none; }
.ff-tap { position: absolute; z-index: 2; left: 50%; top: 50%; width: 2em; height: 2em; margin: -1em 0 0 -1em; border: 1.5px solid var(--color-text); transform: rotate(45deg) scale(.4); opacity: 0; pointer-events: none; }
.ff-live [data-tap] { cursor: pointer; }
/* Alvo de toque maior que o desenho (44 px), só para ponteiro: a cena é aria-hidden e os controles de verdade ficam
   na barra embaixo */
.ff-live [data-tap] { position: relative; }
.ff-live [data-tap]::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%; }

/* Letras das telas: 1 em da tela = o texto de leitura */
.ff-phone .ff-screen { font-size: .7em; }
.ff-laptop .ff-screen { font-size: .56em; }

/* ---------- 1. Celular ---------- */
.ff-status { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; height: 1.9em; padding: 0 1em; background: var(--ff-tone); color: var(--ff-on); font-size: .85em; font-weight: 600; }
/* Sinal: quatro barras; sem sinal ficam apagadas, com um × */
.ff-sig { position: relative; display: inline-flex; align-items: flex-end; gap: .14em; height: .95em; }
.ff-sig i { width: .22em; background: currentColor; border-radius: 1px; transition: opacity .3s; }
.ff-sig i:nth-child(1) { height: 30%; } .ff-sig i:nth-child(2) { height: 55%; } .ff-sig i:nth-child(3) { height: 78%; } .ff-sig i:nth-child(4) { height: 100%; }
.ff-sig b { position: absolute; right: -.55em; top: -.25em; font-size: .9em; line-height: 1; opacity: 0; transition: opacity .2s; }
.ff-sig b::before { content: "×"; }
.ff:not(.f3) .ff-sig i { opacity: .35; }
.ff:not(.f3) .ff-sig b { opacity: 1; }
.ff-appbar { display: flex; flex-shrink: 0; align-items: center; gap: .7em; min-height: 3.2em; padding: .35em 1em .55em; background: var(--ff-tone); color: var(--ff-on); }
.ff-arrow { font-size: 1.15em; }
.ff-appbar-t { display: grid; flex: 1; min-width: 0; }
.ff-appbar-t strong { font-size: 1.12em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-appbar-t small { font-size: .82em; opacity: .9; line-height: 1.2; }
.ff.f1 .ff-appbar-t small { display: none; }
.ff-avatar { width: 1.6em; height: 1.6em; border: 1.5px solid currentColor; border-radius: 50%; flex-shrink: 0; }

.ff-views { position: relative; flex: 1; min-height: 0; }
.ff-view { position: absolute; inset: 0; display: flex; flex-direction: column; padding: .8em .9em; visibility: hidden; clip-path: inset(0 0 0 100%); transition: clip-path .4s var(--ff-ease), visibility 0s linear .4s; }
.ff:not(.f1) .ff-view--form, .ff.f1:not(.f2) .ff-view--saved, .ff.f2 .ff-view--home { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .45s var(--ff-ease) .08s, visibility 0s; }

/* Nova coleta */
.ff-field { padding-bottom: .7em; margin-bottom: .7em; border-bottom: 1px solid var(--color-line); }
.ff-label { font-weight: 600; margin-bottom: .4em; }
.ff-photo { display: flex; align-items: center; gap: .7em; }
.ff-thumb, .ff-rec-photo { display: block; flex-shrink: 0; width: 3.6em; height: 2.6em; border-radius: .4em; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--ff-tone) 45%, var(--color-panel-solid)) 55% 62%, color-mix(in srgb, var(--ff-tone) 28%, var(--color-panel-solid)) 62%), radial-gradient(circle at 72% 30%, color-mix(in srgb, var(--color-exotic) 70%, transparent) 0 .35em, transparent .4em), color-mix(in srgb, var(--ff-tone) 10%, var(--color-panel-solid)); border: 1px solid var(--color-line); }
.ff-photo span { color: var(--ff-ok-text); font-weight: 600; }
.ff-okline { display: flex; align-items: center; gap: .45em; color: var(--ff-ok-text); font-weight: 600; }
.ff-okline i, .ff-note--ok i { font-style: normal; }
.ff-hint { margin-top: .2em; color: var(--color-muted); font-size: .9em; }
.ff-input { display: flex; justify-content: space-between; align-items: center; height: 2.3em; padding: 0 .7em; border: 1px solid var(--color-line-strong); border-radius: .4em; background: var(--color-panel-solid); font-weight: 600; }
.ff-input em { font-style: normal; color: var(--color-muted); }
.ff-btn { position: relative; display: grid; place-items: center; flex-shrink: 0; height: 2.5em; border-radius: .5em; background: var(--ff-tone); color: var(--ff-on); font-weight: 600; }
.ff-send { margin-top: auto; }
.ff-btn--line { background: none; color: var(--color-text); border: 1px solid var(--color-line-strong); }

/* Coleta salva! */
.ff-view--saved { align-items: center; justify-content: center; text-align: center; gap: .45em; }
.ff-saved-ico { display: grid; place-items: center; width: 2.8em; height: 2.8em; margin-bottom: .3em; border-radius: 50%; background: var(--ff-wait-bg); color: var(--ff-wait-text); font-style: normal; font-weight: 700; font-size: 1.1em; }
.ff-saved-t { font-size: 1.3em; font-weight: 700; }
.ff-saved-s { font-weight: 600; color: var(--ff-wait-text); }
.ff-saved-p { color: var(--color-muted); font-size: .9em; line-height: 1.35; margin-bottom: .8em; }
.ff-view--saved .ff-btn { align-self: stretch; }

/* Tela do projeto */
.ff-view--home { gap: .65em; }
.ff-new { height: 2.4em; }
.ff-card { padding: .6em .7em .55em; border: 1px solid var(--color-line); border-radius: .55em; background: var(--color-panel-solid); }
.ff-card-t { font-weight: 600; font-size: .92em; margin-bottom: .45em; }
.ff-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em; }
.ff-counts > div { display: grid; justify-items: start; gap: .15em; }
.ff-counts b { font-size: 1.35em; font-weight: 500; line-height: 1.1; }
.ff-counts small { font-size: .76em; color: var(--color-muted); }
.ff-ico { display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: .4em; font-style: normal; font-weight: 700; font-size: .85em; }
.ff-ico--ok { background: var(--ff-ok-bg); color: var(--ff-ok-text); }
.ff-ico--wait { position: relative; background: var(--ff-wait-bg); }
.ff-ico--wait::before { content: ""; width: .75em; height: .75em; border: 1.5px solid var(--ff-wait-text); border-radius: 50%; }
.ff-ico--wait::after { content: ""; position: absolute; left: 50%; top: 32%; width: 1.5px; height: .3em; background: var(--ff-wait-text); }
.ff-ico--err { background: var(--ff-err-bg); color: var(--ff-err-text); }
.ff-swap { display: grid; }
.ff-swap > span, .ff-notes > *, .ff-row-st > span, .ff-pin-tag > span, .ff-chip > span { grid-area: 1 / 1; }
.ff-notes { display: grid; }
.ff-note { display: grid; align-content: center; gap: .3em; min-height: 3.2em; padding: .45em .7em; border-left: 3px solid; border-radius: .3em; font-size: .9em; }
.ff-note--wait { border-color: var(--color-exotic); background: var(--ff-wait-bg); }
.ff-note--wait span { font-weight: 600; }
.ff-note--ok { border-color: var(--color-success); background: var(--ff-ok-bg); color: var(--ff-ok-text); font-weight: 600; }
.ff-note--ok p { display: flex; gap: .45em; }
.ff-h { font-size: 1.12em; font-weight: 500; margin-top: .15em; }
.ff-row { display: flex; align-items: center; gap: .6em; padding: .55em .6em; border-radius: .5em; background: var(--color-panel-solid); border: 1px solid var(--color-line); }
.ff-row-ico { position: relative; flex-shrink: 0; width: 1.7em; height: 1.7em; border-radius: .45em; background: var(--ff-wait-bg); transition: background .3s; }
.ff-row-ico::before { content: ""; position: absolute; inset: .45em; border: 1.5px solid var(--ff-wait-text); border-radius: 50%; }
.ff.f4 .ff-row-ico { background: var(--ff-ok-bg); }
.ff.f4 .ff-row-ico::before { inset: .5em .42em .62em .62em; border-width: 0 1.5px 1.5px 0; border-color: var(--ff-ok-text); border-radius: 0; transform: rotate(45deg); }
.ff-row-txt { min-width: 0; }
.ff-row-st { display: grid; font-weight: 600; }
.ff-row-sub { font-size: .8em; color: var(--color-muted); line-height: 1.3; }
.ff-st--s, .ff-st--v { color: var(--ff-ok-text); }

/* Trocas de texto no mesmo lugar: o antigo some e o novo se escreve da esquerda (nunca os dois juntos) */
.ff-swap > span, .ff-notes > *, .ff-row-st > span, .ff-pin-tag > span, .ff-chip > span { visibility: hidden; clip-path: var(--ff-w0); transition: clip-path 0s, visibility 0s; }
.ff:not(.f4) :is(.ff-swap .ff-was, .ff-st--q),
.ff.f4 .ff-swap .ff-now,
.ff.f4:not(.f7) .ff-st--s,
.ff.f7 .ff-st--v,
.ff.f2:not(.f4) .ff-note--wait,
.ff.f4 .ff-note--ok,
.ff.f3:not(.f4) .ff-pt--w,
.ff.f4:not(.f6) .ff-pt--p,
.ff.f6 .ff-pt--v,
.ff:not(.f6) .ff-ch--p,
.ff.f6 .ff-ch--v { visibility: visible; clip-path: var(--ff-w1); transition: clip-path .35s var(--ff-ease) var(--ff-d, .1s), visibility 0s linear var(--ff-d, .1s); }
/* No celular, "Enviado ✓" e o "Tudo sincronizado" só chegam depois que a foto sobe (o contador muda quando a
   fila esvazia) */
.ff.f3 { --ff-d: 1s; }
.ff.f4 { --ff-d: 1.05s; }
.ff.f6 { --ff-d: .55s; }
.ff.f7 { --ff-d: .1s; }

/* ---------- 2. Painel no navegador ---------- */
.ff-chrome { display: flex; flex-shrink: 0; align-items: center; gap: .35em; height: 2em; padding: 0 .7em; border-bottom: 1px solid var(--color-line); background: var(--color-panel-solid); }
.ff-chrome > i { width: .55em; height: .55em; border-radius: 50%; border: 1px solid var(--color-line-strong); }
.ff-url { flex: 1; margin-left: .6em; padding: .2em .7em; border-radius: .4em; background: var(--color-bg); color: var(--color-muted); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-top { display: flex; flex-shrink: 0; align-items: center; gap: .7em; height: 2.6em; padding: 0 .9em; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.ff-logo { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; }
.ff-logo i { width: .65em; height: .65em; border: 1.5px solid var(--color-orb); transform: rotate(45deg); }
.ff-product { padding-left: .7em; border-left: 1px solid var(--color-line-strong); overflow: hidden; text-overflow: ellipsis; }
.ff-who { margin-left: auto; color: var(--color-muted); }
.ff-app { position: relative; display: flex; flex: 1; min-height: 0; }
.ff-side { display: none; flex-direction: column; gap: .15em; width: 7.4em; flex-shrink: 0; padding: .7em .5em; border-right: 1px solid var(--color-line); }
.ff-side span { padding: .45em .6em; border-radius: .4em; color: var(--color-muted); }
.ff-side .is-on { background: var(--ff-tone-soft); color: var(--color-text); font-weight: 600; }
.ff-main { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; gap: .55em; padding: .7em .8em .6em; }
.ff-crumb { font-size: 1.25em; font-weight: 600; letter-spacing: -.01em; }
.ff-tools { display: flex; align-items: center; gap: .7em; white-space: nowrap; }
.ff-tabs { display: inline-flex; border: 1px solid var(--color-line-strong); border-radius: .45em; overflow: hidden; }
.ff-tabs > * { padding: .3em .8em; }
.ff-tabs b { background: var(--ff-tone-soft); font-weight: 600; }
.ff-auto { display: none; align-items: center; gap: .4em; font-size: .9em; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; }
.ff-auto i { width: .85em; height: .85em; border-radius: .2em; background: var(--ff-tone); flex-shrink: 0; }
.ff-export { margin-left: auto; padding: .3em .8em; border: 1px solid var(--color-line-strong); border-radius: .45em; }

/* O mapa: desenhado (manchas de água e curvas de nível genéricas, sem nomes nem mapa de terceiros) */
.ff-map { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: .45em; background: color-mix(in srgb, var(--ff-tone) 5%, var(--color-panel-solid)); }
.ff-land { position: absolute; inset: 0; width: 100%; height: 100%; }
.ff-water, .ff-lagoon { fill: color-mix(in srgb, var(--ff-tone) 16%, var(--color-bg)); stroke: color-mix(in srgb, var(--ff-tone) 45%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ff-contour { fill: none; stroke: var(--color-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ff-contour--w { stroke: color-mix(in srgb, var(--ff-tone) 30%, transparent); stroke-dasharray: 3 4; }

/* Pinos: a forma diz o status, não só a cor. Validada = losango cheio (verde); Pendente = losango em contorno
   (dourado); Aguardando foto = contorno tracejado, cinza */
.ff-pin { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 0; height: 0; }
.ff-pin::before, .ff-k { content: ""; position: absolute; left: -.55em; top: -.55em; width: 1.1em; height: 1.1em; border: 1.5px solid var(--color-success); background: var(--color-success); transform: rotate(45deg); box-shadow: 0 0 0 1.5px var(--color-bg); }
.ff-pin--new { z-index: 3; }
/* Onde cada pino fica no mapa (em classe, não em style=, por causa da CSP) */
.ff-pin--a { --x: 18%; --y: 28%; }
.ff-pin--b { --x: 38%; --y: 70%; }
.ff-pin--c { --x: 78%; --y: 28%; }
.ff-pin--new { --x: 30%; --y: 55%; }
.ff-pin--new::before { transform: rotate(45deg) scale(0); transition: transform .4s var(--ff-ease) .9s, background .3s var(--ff-d, 0s), border-color .3s var(--ff-d, 0s); }
.ff.f3 .ff-pin--new::before { transform: rotate(45deg) scale(1); }
.ff.f3:not(.f4) .ff-pin--new::before { border: 1.5px dashed var(--color-muted); background: var(--color-panel-solid); }
.ff.f4:not(.f6) .ff-pin--new::before { border-color: var(--color-exotic); background: var(--color-bg); }
.ff.f4:not(.f6) .ff-pin--new::after { content: ""; position: absolute; left: -.18em; top: -.18em; width: .36em; height: .36em; background: var(--color-exotic); transform: rotate(45deg); }
.ff-pin-ring { position: absolute; left: -1em; top: -1em; width: 2em; height: 2em; border: 1px solid var(--ff-tone); transform: rotate(45deg); opacity: 0; }
.ff-pin-tag { position: absolute; left: .95em; top: -.8em; display: grid; justify-items: start; font-size: .9em; font-weight: 600; white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path .35s var(--ff-ease) 1.05s; }
.ff.f3 .ff-pin-tag { clip-path: inset(-2px); }
.ff-pin-tag > span { padding: .15em .5em; border-radius: .35em; background: var(--color-panel-solid); border: 1px solid var(--color-line); }
.ff-pt--w { color: var(--color-muted); }
.ff-pt--p { color: var(--ff-wait-text); }
.ff-pt--v { color: var(--ff-ok-text); }
.ff-legend { display: flex; flex-wrap: wrap; gap: .3em 1em; color: var(--color-muted); font-size: .88em; }
.ff-legend > span { display: inline-flex; align-items: center; gap: .55em; }
.ff-k { position: relative; left: auto; top: auto; width: .7em; height: .7em; }
.ff-k--p { border-color: var(--color-exotic); background: none; }
.ff-k--w { border: 1.5px dashed var(--color-muted); background: none; }

/* A coleta aberta: o cartão lateral do painel (RecordSidebar) */
.ff-rec { position: absolute; z-index: 4; top: .4em; right: .4em; bottom: .4em; left: .4em; display: flex; flex-direction: column; gap: .35em; padding: .6em .7em; font-size: .9em; overflow: hidden; border: 1px solid var(--color-line-strong); border-radius: .5em; background: var(--color-panel-solid); box-shadow: 0 .8em 2em -1em color-mix(in srgb, var(--color-text) 30%, transparent); visibility: hidden; clip-path: inset(0 0 0 100%); transition: clip-path .35s ease-in, visibility 0s linear .35s; }
.ff.f5 .ff-rec { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .5s var(--ff-ease) .6s, visibility 0s linear .6s; }
.ff.f7 .ff-rec { transition-delay: 0s; }
.ff-rec-head { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.ff-rec-head strong { font-size: 1.15em; }
.ff-chip { display: grid; font-weight: 600; font-size: .88em; }
.ff-ch { padding: .15em .55em; border-radius: .35em; text-align: center; }
.ff-ch--p { background: var(--ff-wait-bg); color: var(--ff-wait-text); }
.ff-ch--v { background: var(--ff-ok-bg); color: var(--ff-ok-text); }
.ff-rec-photo { width: 100%; height: 2.4em; }
.ff-rec-dl { display: grid; gap: .12em; }
.ff-rec-dl > div { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: .4em; }
.ff-rec-dl dt { color: var(--color-muted); }
.ff-rec-dl dd { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-rec-dl dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-rec-c { color: var(--color-muted); font-size: .9em; margin-top: auto; }
.ff-rec-ta { display: block; flex-shrink: 0; height: 1.8em; border: 1px solid var(--color-line-strong); border-radius: .35em; background: var(--color-bg); }
.ff-rec-acts { display: flex; gap: .35em; }
.ff-b { position: relative; flex: 1 1 auto; padding: .35em .5em; border: 1px solid var(--color-line-strong); border-radius: .4em; text-align: center; font-weight: 600; white-space: nowrap; }
.ff-b--ok { border-color: var(--color-success); background: var(--color-success); color: var(--color-bg); }
/* O cursor de quem valida: vai até o pino e depois até "Aprovar" (o JS diz para onde, em --cx/--cy) */
.ff-cursor { position: absolute; z-index: 7; left: 0; top: 0; width: 1.05em; height: 1.45em; background: var(--color-text); clip-path: polygon(0 0, 100% 68%, 58% 70%, 80% 100%, 64% 100%, 42% 74%, 0 94%); filter: drop-shadow(0 0 1px var(--color-bg)); opacity: 0; transform: translate(var(--cx, 60%), var(--cy, 90%)); transition: transform .55s var(--ff-ease), opacity .2s; pointer-events: none; }
.ff.f5:not(.f7) .ff-cursor { opacity: 1; }
/* A mesa do computador: linha fina com hachura embaixo do painel (só no computador) */
.ff-deck { display: none; position: absolute; left: -1.4em; right: -1.4em; top: calc(100% + .5em); height: .55em; border-top: 1px solid var(--color-line-strong); background: repeating-linear-gradient(135deg, var(--color-line) 0 1px, transparent 1px 5px); }

/* ---------- Computador: celular à esquerda, painel à direita, o fio reto entre os dois ---------- */
@container ff (min-width: 600px) {
  .ff-stage { width: 52em; padding: 1.2em 1em 1em; font-size: min(calc(100cqw / 52), .9375rem); }
  .ff-rail { --ff-gap: 10px; margin-bottom: 1.2em; padding: 0; font-size: .8125rem; }
  .ff-scene { width: 50em; height: 30em; }
  .ff-phone { --x: 0em; --y: 0em; --w: 14.2em; --h: 30em; }
  .ff-laptop { --x: 22.4em; --y: 1.2em; --w: 27.6em; --h: 26.4em; }
  .ff [data-node="P"] { --x: 14.2em; --y: 15em; }
  .ff [data-node="H"] { --x: 18.3em; --y: 15em; --hs: 3.6em; }
  .ff [data-node="L"] { --x: 22.4em; --y: 15em; }
  .ff [data-node="K1"], .ff [data-node="K2"] { display: none; }
  .ff-seg--pk, .ff-seg--kh, .ff-seg--hk, .ff-seg--kl { display: none; }
  .ff-seg--ph { display: block; --x: 14.2em; --y: 15em; --w: 4.1em; --dir: 90deg; }
  .ff-seg--hl { display: block; --x: 18.3em; --y: 15em; --w: 4.1em; }
  .ff-gap { --x: 15.75em; --y: 15em; width: 1.3em; margin-left: -.65em; }
  .ff-park { --x: 15em; --y: 13.9em; }
  .ff-phone .ff-screen { font-size: .86em; }
  .ff-laptop .ff-screen { font-size: .74em; }
  .ff-side { display: flex; }
  .ff-auto { display: inline-flex; }
  .ff-rec { left: auto; width: 21em; }
  .ff-rec-photo { height: 4.2em; }
  .ff-deck { display: block; }
}

/* ---------- Movimento reduzido: as três etapas lado a lado, paradas (o field-flow.js monta as cópias) ---------- */
.ff-solo { position: relative; container: ffs / inline-size; margin: 0 auto 1rem; }
.ff-solo > .ff-dev { position: relative; left: auto; top: auto; width: 100%; font-size: calc(100cqw / var(--solo-w)); height: calc(var(--solo-h) * 100cqw / var(--solo-w)); }
.ff-solo--phone { --solo-w: 14.2; --solo-h: 27; max-width: 15rem; }
.ff-solo--laptop { --solo-w: 27.6; --solo-h: 22; }
.ff-solo .ff-phone .ff-screen { font-size: .86em; }
.ff-solo .ff-laptop .ff-screen { font-size: .74em; }
.ff-solo .ff-deck, .ff-solo .ff-cursor, .ff-solo .ff-rec { display: none; }

/* Movimento reduzido na página do produto: a cena some e as três etapas ficam lado a lado, cada uma com a sua
   cópia parada (o celular sem sinal, o celular sincronizado e o painel com a coleta validada) */
.pp-demo.is-still .ff .ff-stage { display: none; }
.pp-demo.is-still .pp-stages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.9fr); align-items: start; }
@media (max-width: 860px) {
  .pp-demo.is-still .pp-stages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
  .pp-demo.is-still .pp-stage--3 { grid-column: 1 / -1; }
}