/* Hero ad film (hero builder). The stage is a fixed 1280 x 600 drawing scaled by
   js/sec-film.js; everything inside it is in stage pixels. Film text is at least 14 stage
   px so it stays readable once scaled (narrow films zoom in per beat). Light only, no shadows:
   structure is hairlines, fills from tokens. Green only on verified names. */

.film {
  /* Component tier. Amber comes from the shared tokens. The site has no tokens for the
     items below, so they mirror vendor/verified-ds/css/tokens.css (canvas, grid line, light
     glass) or are drawn for the film only (call grey, wallpaper, veils). */
  --f-caution: var(--caution);
  --f-caution-ink: var(--caution-ink);
  --f-caution-soft: color-mix(in srgb, var(--caution) 10%, transparent);
  --f-caution-line: color-mix(in srgb, var(--caution) 55%, transparent);
  --f-canvas: #f2f2f2;          /* DS --canvas */
  --f-call: #e9e9ea;
  --f-wall-hi: #eceef1;
  --f-wall-lo: #cdd1d7;
  --f-veil: rgba(255, 255, 255, .86);
  --f-veil-soft: rgba(255, 255, 255, .62);
  --f-shade: rgba(25, 25, 25, .55);   /* name label over video */
  --f-grid: rgba(37, 37, 37, .15);
  --f-faint: rgba(37, 37, 37, .06);
  --f-glass-hi: #ffffff;
  --f-glass-lo: #dadada;
  --f-glass-rim: rgba(37, 37, 37, .20);
  --f-ink-dark: #252525;
  --f-radius: 14px;

  position: relative;
  width: min(1360px, 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding-bottom: 56px;
}

/* ---------- viewport + camera ---------- */
.film-viewport {
  position: relative;
  aspect-ratio: 1280 / 600;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--f-radius);
  background: var(--f-wall-lo);
  contain: layout paint;
}
.film.is-cropped .film-viewport { aspect-ratio: 16 / 10; background: var(--f-wall-lo); }
/* Label: the film is drawn, not filmed. Sits outside the camera so it keeps one size. */
.film-illus { position: absolute; z-index: 2; left: 10px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); pointer-events: none; }
.film.is-framed .film-camera { will-change: transform; }
.film-camera {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 600px;
  transform-origin: 0 0;
  will-change: transform;
}
.film-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
.film-stage .px-icon { --px-size: 20px; }

/* authored glyphs on the same 20 x 20 grid */
.fg { display: inline-block; width: 20px; height: 20px; line-height: 0; flex: none; }
.fg svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------- desktop ---------- */
.fd-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 78% 18%, var(--f-wall-hi), transparent 70%),
    radial-gradient(60% 80% at 12% 92%, var(--f-veil-soft), transparent 70%),
    linear-gradient(160deg, var(--f-wall-hi), var(--f-wall-lo));
}

.ftask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--f-veil);
  border-top: 1px solid var(--f-grid);
}
.ftask__apps { display: flex; gap: 6px; }
.ftask__app {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: var(--ink-2);
}
.ftask__app.is-on { background: var(--f-faint); }
.ftask__app.is-on::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 13px;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-2);
}
.ftask__browser {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ink-2);
  background: linear-gradient(var(--ink-2), var(--ink-2)) center / 100% 2px no-repeat;
}
.ftask__tray {
  position: absolute;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  line-height: 15px;
  text-align: right;
  color: var(--ink-2);
}

/* ---------- browser window ---------- */
.fw {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--f-grid);
  border-radius: 10px;
  background: var(--white);
}
.fw__tabs {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 38px;
  padding-left: 10px;
  background: var(--f-canvas);
}
.fw__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  height: 31px;
  padding: 0 8px 0 12px;
  border-radius: 9px 9px 0 0;
  background: var(--white);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.fw__fav {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}
.fw__fav .px-icon { --px-size: 18px; }
.fw__x { margin-left: auto; color: var(--muted); }
.fw__x .px-icon { --px-size: 16px; }
.fw__newtab { display: grid; place-items: center; width: 30px; height: 31px; color: var(--muted); }
.fw__newtab .px-icon { --px-size: 16px; }
.fw__ctrls { position: absolute; right: 0; top: 0; display: flex; height: 32px; }
.fw__ctrls i { position: relative; width: 46px; height: 32px; }
.fw__ctrls i::before, .fw__ctrls i::after { content: ''; position: absolute; left: 50%; top: 50%; }
.fw__min::before { width: 10px; height: 1px; margin: 0 0 0 -5px; background: var(--ink-2); }
.fw__max::before { width: 9px; height: 9px; margin: -5px 0 0 -5px; border: 1px solid var(--ink-2); }
.fw__cls::before, .fw__cls::after { width: 12px; height: 1px; margin-left: -6px; background: var(--ink-2); transform: rotate(45deg); }
.fw__cls::after { transform: rotate(-45deg); }

.fw__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 10px;
  border-bottom: 1px solid var(--f-grid);
}
.fw__nav { display: grid; place-items: center; width: 30px; height: 30px; color: var(--ink-2); }
.fw__nav--back { transform: scaleX(-1); }
.fw__url {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  height: 32px;
  margin: 0 8px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--f-canvas);
  font-size: 13px;
  color: var(--ink-2);
}
.fw__url .px-icon { --px-size: 16px; color: var(--muted); }
.fw__ext {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.fw__ext-mark,
.fend__mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--signal);
}
.fw__ext-mark svg, .fend__mark svg { width: 12px; height: 12px; fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fw__me {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--f-canvas);
  font-size: 12px;
  font-weight: 600;
}

/* ---------- call ---------- */
.fc { position: relative; flex: 1; background: var(--f-call); }

.ft {
  --flagged: 0;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--white);
  will-change: transform;
}
.ft__media { position: absolute; inset: 0; overflow: hidden; }
.ft__media img, .ft__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
}
.ft__media video { opacity: 0; }
.has-video video { opacity: 1; }
.has-video img { opacity: 0; }
.has-video.is-stalled video { opacity: 0; }   /* a clip that can't keep playing shows its poster */
.has-video.is-stalled img { opacity: 1; }   /* swap in one step: two crops never overlap */
.ft__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--f-caution-line);
  border-radius: inherit;
  opacity: var(--flagged);
  pointer-events: none;
}
.ft__mute {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--f-veil);
  color: var(--ink);
}
/* Name + shield chip, bottom left. The chip is icon only (words live in the hover tip). */
.ft__label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ft__name {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  background: var(--f-shade);
  font-size: 15px;
  font-weight: 600;
  line-height: 30px;
  color: var(--white);
}
.ft__chip {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
}
.ft__state { grid-area: 1 / 1; display: grid; place-items: center; }
.ft__state .px-icon { --px-size: 18px; color: var(--muted); }
.ft__state--flag { color: var(--f-caution); }
.ft__state--flag .fg { width: 20px; height: 20px; }
/* Active speaker: Meet's level icon and a highlighted tile edge. */
.ft.is-speaking::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid var(--ink-2);
  border-radius: inherit;
  pointer-events: none;
}
.ft__talk {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink-2);
}
.ft__talk i { width: 3px; height: 14px; border-radius: 2px; background: var(--white); transform-origin: 50% 50%; }
.ft__talk i:nth-child(2) { height: 18px; }

.fc__toast {
  position: absolute;
  left: 28px;
  top: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--f-grid);
  border-radius: 10px;
  background: var(--white);
  font-size: 13px;
  font-weight: 500;
}

.fc__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 62px;
  padding: 0 20px;
}
.fc__time { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.fc__time i { width: 1px; height: 14px; background: var(--f-grid); }
.fc__btns { display: flex; gap: 10px; }
.fc__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--f-glass-rim);
  background: radial-gradient(120% 120% at 20% 15%, var(--f-glass-hi), var(--f-glass-lo));
  color: var(--ink);
}
.fc__btn.is-off { background: var(--white); }
.fc__btn--leave { width: 64px; border-radius: 23px; background: radial-gradient(120% 120% at 20% 15%, var(--ink-2), var(--f-ink-dark)); color: var(--white); border-color: transparent; }
.fc__side { justify-self: end; }
.fc__btn--ghost { width: auto; padding: 0 12px; gap: 6px; display: flex; border-radius: 23px; background: transparent; border-color: transparent; font-size: 13px; }

/* ---------- finding pop-up (top centre), hover tips ---------- */
.falert {
  position: absolute;
  top: 26px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--f-caution-line);
  border-radius: 21px;
  background: var(--white);
  font-size: 15px;
  white-space: nowrap;
  color: var(--ink);
}
.falert .fg { color: var(--f-caution); }
.falert b { font-weight: 700; }
.falert i { font-style: normal; color: var(--muted-2); }
.falert span { font-weight: 600; color: var(--f-caution-ink); }
.falert .px-icon { --px-size: 18px; margin-left: 4px; color: var(--muted); }
.ftip {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 10px;
  border: 1px solid var(--f-grid);
  border-radius: 8px;
  background: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  color: var(--ink);
}

/* ---------- Meet bar: the Verified shield ---------- */
.fc__btn--vf { position: relative; display: grid; }
.fc__vf { grid-area: 1 / 1; display: grid; place-items: center; }
.fc__vf--flag { color: var(--f-caution); }
.fc__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--f-caution);
}

/* ---------- "Verified checks" panel (in Meet) ---------- */
.fv {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--white);
  overflow: hidden;
}
.fv__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  flex: none;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--f-grid);
}
.fv__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.fv__close { display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted); }
.fv__scroll { position: relative; flex: 1; overflow: hidden; }
.fv__list { padding: 0 18px; }
.fv__card { padding: 14px 0 16px; border-bottom: 1px solid var(--f-grid); }
.fv__who { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.fv__chip { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.fv__chip--flag { color: var(--f-caution); }
.fv__who [data-tam-flag] { margin-left: -32px; }
.fv__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; font-size: 14px; }
.fv__k { color: var(--muted); }
.fv__v { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-align: right; }
.fv__row--ok .fv__v { color: var(--signal); }
.fv__row--flag .fv__v { color: var(--f-caution-ink); }
/* A finding named in the panel: ink. */
.fv__row--note .fv__v { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.fv__row--note .px-icon { --px-size: 18px; color: var(--ink); }
.fv__row--flag .fg { color: var(--f-caution); }
.fv__v .fg { width: 18px; height: 18px; }
.fv__swap { display: grid; }
.fv__swap > div { grid-area: 1 / 1; }
.fv__sub { margin: 10px 0 8px; font-size: 14px; font-weight: 700; }
.fv__views { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.fv__views figure, .fdlg__views figure { margin: 0; }
.fimg { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 8px; }
/* The stills are framed on the person (film only; the product shows the full frame). */
.fimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fv__views figcaption, .fdlg__views figcaption { margin-top: 4px; font-size: 14px; font-weight: 600; }
.fv__review { margin: 10px 0 6px; font-size: 14px; line-height: 20px; color: var(--ink); }
.fv__detail { margin-top: 4px; }
.fv__kvs { display: grid; gap: 4px; margin: 0; }
.fv__kv { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; line-height: 20px; }
.fv__kv dt { color: var(--muted); }
.fv__kv dd { margin: 0; font-weight: 600; text-align: right; }
.fv__card--short { padding-bottom: 12px; }

/* ---------- compare dialog ---------- */
.fdlg {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  border: 1px solid var(--f-grid);
  border-radius: 14px;
  background: var(--white);
}
.fdlg__head { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
.fdlg__head b { font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.fdlg__close { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted); }
.fdlg__views { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fdlg__views figcaption { display: flex; justify-content: space-between; font-size: 15px; }
.fdlg__views small { font-size: 14px; font-weight: 500; color: var(--muted); }
.fdlg__btn { width: 100%; min-height: 44px; margin-top: auto; font-size: 15px; }

/* ---------- end card ---------- */
.fend {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 0 0 10px 10px;
  background: var(--white);
  text-align: center;
}
.fend__mark { width: 44px; height: 44px; }
.fend__mark svg { width: 24px; height: 24px; }
.fend__line { margin: 0; max-width: 16ch; font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.fend__sub { margin: 0; font-size: 18px; color: var(--muted); }

/* ---------- cursor ---------- */
.fcur {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  transform-origin: 3px 2px;
  pointer-events: none;
}
.fcur svg { position: relative; z-index: 1; width: 30px; height: 30px; margin: -2px 0 0 -3px; fill: var(--ink); stroke: var(--white); stroke-width: 1.4; stroke-linejoin: round; }
.fcur__ring {
  position: absolute;
  left: -18px;
  top: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  opacity: 0;
}

/* Initial states before the timeline takes over (and the no-GSAP still). */
.ft[data-tile="ravi"] .ft__state--check,
.ft__state--flag, .fend, .fc__toast, .fv, .falert, .ftip, .fdlg, .fc__vf--flag { visibility: hidden; }
.ft__state--check { visibility: hidden; }

/* ---------- caption bar ---------- */
.film-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "caption controls"
    "beats beats";
  align-items: center;
  gap: 12px 20px;
  margin-top: 20px;
}
.film-caption {
  grid-area: caption;
  margin: 0;
  min-height: 1.3em;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.film-controls { grid-area: controls; display: flex; gap: 8px; }
.film-ctl {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.film-ctl:hover { border-color: var(--ink); }
.film-ctl:focus-visible { border-radius: 50%; }
.film-ctl .fg, .film-ctl .px-icon { width: 20px; height: 20px; }

.film-beats {
  grid-area: beats;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.film-beat {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--ink-2);
}
/* With JS: the list becomes six chapter bars, the caption above carries the words. */
.film.is-live .film-beats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.film.is-live .film-beat {
  position: relative;
  height: 24px;
  overflow: hidden;
  color: transparent;
  white-space: nowrap;
}
.film.is-live .film-beat::before,
.film.is-live .film-beat::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
}
.film.is-live .film-beat::after { background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.film.is-live .is-done .film-beat::after { transform: none; }
.film.is-live .is-active .film-beat::after { transform: none; opacity: .55; }
.film.is-live .film-beat:hover::before { background: var(--muted-2); }
.film.is-live .film-beat:focus-visible { outline-offset: 0; }

@media (max-width: 759px) {
  .film { width: calc(100% - 2 * var(--rail-w, 16px)); padding-bottom: 40px; }
  .film-viewport { border-radius: 12px; }
  .film-caption { font-size: 20px; min-height: 2.6em; }
  .film-bar { margin-top: 14px; gap: 10px 12px; align-items: start; }
}

/* People are drawn greyscale pictures (img/drawn), framed at 4:3. */
.ft__media video, .ft__media img { object-position: var(--focus, 50% 50%); }


/* "Verified at work" cue above the film: a display-face eyebrow and a bobbing pixel arrow.
   Clicking it brings the film fully into view. Its height is --film-cue-h in sec-hero.css. */
.film-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 64px;
  margin: 0 auto;
  padding: 6px 12px 0;
  border: 0;
  background: none;
  font-family: var(--font-body);   /* micro role (design-system pass) */
  font-size: var(--w-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.film-cue:hover { color: var(--ink); }
.film-cue__arrow { display: block; width: 24px; height: 24px; }
.film-cue__arrow .fg { width: 24px; height: 24px; }

/* The page's column hairlines run down past the cue and stop at the film's frame; the
   caption bar covers them below. "+" marks where the rails meet the frame's top edge
   (desktop rails only: the film and the rails share a centre). */
.film-bar { position: relative; background: var(--paper); }
.film-viewport { z-index: 1; }
@media (min-width: 1100px) {
  .film::before,
  .film::after {
    content: '';
    position: absolute;
    top: calc(64px - 6px);
    z-index: 2;
    width: 11px;
    height: 11px;
    background:
      linear-gradient(var(--l-mark), var(--l-mark)) center / 1px 100% no-repeat,
      linear-gradient(var(--l-mark), var(--l-mark)) center / 100% 1px no-repeat;
    pointer-events: none;
  }
  .film::before { left: calc((100% - var(--l-center)) / 2 - 6px); }
  .film::after { left: calc((100% + var(--l-center)) / 2 - 5px); }
}

/* Flat verified shield (the DS badge's 2D look; no three.js on the marketing page). */
.fbadge { display: inline-block; width: var(--b); height: var(--b); line-height: 0; flex: none; }
.fbadge svg { width: 100%; height: 100%; }
.fbadge__s { fill: var(--signal); }
.fbadge__t { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Clean corners: the scaled stage never shows past the rounded frame. */
.film-viewport { overflow: clip; clip-path: inset(0 round var(--f-radius)); }

/* Phones: the film and its caption bar sit 8px inside the rails, like the other sections. */
@media (max-width: 759px) {
  .film { width: calc(100% - 2 * (var(--rail-w, 16px) + 8px)); }
}

/* ---------- a person's checks card, opened from their tile badge ----------
   The host panel's per-person card (badgeView.ts): name and state, then one row per check.
   Green check = done and fine, grey loader = still checking, amber square = needs a look. */
.fpop {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 412px;
  padding: 12px 16px 8px;
  border: 1px solid var(--f-grid);
  border-radius: 12px;
  background: var(--white);
  transform-origin: 24px 100%;
  visibility: hidden;
}
.fpop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--f-grid);
}
.fpop__name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.fpop__st { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.fpop__st--ok { color: var(--signal); }
.fpop__st--wait { color: var(--muted); }
.fpop__st--flag { color: var(--f-caution-ink); }
.fpop__rows { display: grid; }
.fpop__row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--f-faint);
}
.fpop__row:last-child { border-bottom: 0; }
.fpop__k { padding-top: 1px; font-size: 14px; line-height: 20px; color: var(--muted); }
.fpop__swap { display: grid; }
.fpop__swap > * { grid-area: 1 / 1; }
.fpop__swap--end { justify-items: end; }
.fpop__cell { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.fpop__ic { display: grid; place-items: center; width: 20px; height: 22px; }
.fpop__ic .fg { width: 18px; height: 18px; }
.fpop .px-icon { --px-size: 18px; }
.fpop__v { display: grid; gap: 1px; }
.fpop__v b { font-size: 15px; font-weight: 600; line-height: 22px; color: var(--ink); }
.fpop__v small { font-size: 14px; line-height: 19px; color: var(--muted); }
.fpop__cell--ok .fpop__ic { color: var(--signal); }
.fpop__cell--wait .fpop__ic { color: var(--muted); }
.fpop__cell--wait .fpop__v b { color: var(--ink-2); font-weight: 500; }
.fpop__cell--flag .fpop__ic { color: var(--f-caution); }
.fpop__cell--flag .fpop__v b { color: var(--f-caution-ink); }
.fpop__st--flag .px-icon { color: var(--f-caution); }