/* .wfs-* — the Workforce SESSION visual: the admin console window
   (workforce nav · Employee detail · the identities queue with Sofia
   Johnson selected) with the employee's re-auth success phone overlapping
   its foot. Rendered by components/WorkforceSession.astro.

   Shared by two surfaces:
   · /use-cases/workforce-trust/ — the hero visual (bespoke hero-stage slot)
   · /products/workforce/ — step 02 of how-it-works (biometric re-auth),
     where .wfs-stage--step drops the ambient float and fits the walk stage.

   Lifted out of pages/workforce-trust.css on 2026-08-10 (Mike: "esa misma
   pantalla úsala aquí") — the declarations are unchanged, only the scope
   and the wft- prefix. */
.wfs-stage {
  position: relative;
  width: min(100%, 600px);
  animation: wfs-float 7s ease-in-out infinite alternate;
}
@keyframes wfs-float {
  from { transform: translateY(-7px); }
  to { transform: translateY(7px); }
}

/* the admin dashboard — a clean browser window, real product screen */
.wfs-win {
  display: flex;
  flex-direction: column;
  width: min(100%, 540px);
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: none;
  overflow: hidden;
}
.wfs-win__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--color-grey-100);
  background: var(--color-grey-50);
}
.wfs-win__dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.wfs-win__dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.wfs-win__url {
  flex: 1;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--color-grey-100);
  background: var(--color-white);
}
/* r4: sidebar + main split — the workforce nav rides at the left */
.wfs-win__body {
  display: flex;
  align-items: stretch;
}
/* r5: the nav is drawn at product proportions (labels, glyphs, the blue
   active row) instead of cropped out of the dashboard raster */
.wfs-win__side {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 8px 10px;
  border-right: 1px solid var(--color-grey-100);
  background: var(--color-white);
}
.wfs-side__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 4px;
}
.wfs-side__logo {
  width: 42px;
  height: auto;
}
.wfs-side__product {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  color: var(--color-black);
}
.wfs-side__nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
}
.wfs-side__item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border-radius: 5px;
  font-size: 7px;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-grey-400);
}
.wfs-side__item--on {
  background: var(--color-blue-500);
  color: var(--color-white);
  font-weight: 500;
}
.wfs-side__ico {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}
.wfs-side__user {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding: 0 4px;
}
.wfs-side__avatar {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-grey-100);
  color: var(--color-grey-400);
}
.wfs-side__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wfs-side__name {
  font-size: 7px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-grey-600);
}
.wfs-side__role {
  font-size: 6px;
  line-height: 1.4;
  color: var(--color-grey-400);
}
.wfs-win__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wfs-win__title {
  padding: 12px 18px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-black);
}

/* profile detail strip (r3): photo · verified · info skeletons */
.wfs-win__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--color-grey-100);
}
.wfs-win__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.wfs-win__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.wfs-win__namebar {
  width: 92px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.wfs-win__pill {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-green-100);
  color: var(--color-green-600);
  font-size: 7px;
  font-weight: 600;
  line-height: 1.5;
}
.wfs-win__meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.wfs-win__metabar {
  width: 120px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.wfs-win__metabar--short { width: 76px; }

/* the identities queue, drawn at product proportions (r6) — the raster
   crop could not carry a selected row; Sofia Johnson leads it, selected */
.wfs-win__list {
  padding: 0 18px 16px;
}
.wfs-list__head,
.wfs-list__row {
  display: grid;
  grid-template-columns: 1.1fr 1.25fr 1.1fr 40px;
  align-items: center;
  gap: 6px;
}
.wfs-list__head {
  padding: 5px 6px;
  border-radius: 4px;
  background: var(--color-grey-50);
  font-size: 5.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-grey-400);
}
.wfs-list__row {
  padding: 7px 6px;
  border-radius: 4px;
  border-bottom: 1px solid var(--color-grey-100);
}
.wfs-list__row--on {
  background: var(--color-blue-100);
  border-bottom-color: transparent;
}
.wfs-list__who {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.wfs-list__ava {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-grey-300);
}
.wfs-list__row:not(.wfs-list__row--on) .wfs-list__ava {
  background: var(--color-grey-100);
}
.wfs-list__ico {
  width: 9px;
  height: 9px;
}
.wfs-list__name {
  font-size: 6.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-grey-600);
  white-space: nowrap;
}
.wfs-list__cell {
  font-size: 6px;
  line-height: 1.3;
  color: var(--color-grey-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wfs-list__pill {
  justify-self: end;
  padding: 1px 4px;
  border-radius: 999px;
  font-size: 5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.wfs-list__pill--ok {
  background: var(--color-green-100);
  color: var(--color-green-600);
}
.wfs-list__pill--wait {
  background: var(--color-grey-100);
  color: var(--color-grey-400);
}
.wfs-list__pill--flag {
  background: var(--color-red-100);
  color: var(--color-red-600);
}

/* the employee's re-auth, riding the shared bezel chrome
   (sol-stage__frame from solution.css), overlapping the window's foot.
   The screen is a composition (r2): wordmark · the face in the capture
   ring (small, high) · a success check instead of copy. */
.wfs-phone {
  position: absolute;
  right: 0;
  bottom: -36px;
  width: clamp(150px, 13vw, 186px);
}
.wfs-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  aspect-ratio: 390 / 844;
  border-radius: 34px;
  background: var(--color-white);
  overflow: hidden;
}
.wfs-screen__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px 0;
}
.wfs-screen__spill {
  display: block;
  width: 20px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.wfs-screen__spill--sm { width: 14px; }
.wfs-screen__sright {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wfs-screen__sdot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-grey-200);
}
.wfs-screen__logo {
  width: 30%;
  height: auto;
  margin-top: 7%;
}
.wfs-screen__ring {
  position: relative;
  display: block;
  width: 56%;
  aspect-ratio: 1;
  margin-top: 15%;
  border-radius: 50%;
  overflow: hidden;
}
.wfs-screen__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid var(--color-green-600);
}
.wfs-screen__ring img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the verdict sits just below center (r4): a touch lower than the
   reference so the photo fits above it */
.wfs-screen__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14%;
}
/* the verdict, at the success screen's own proportions (r5): a solid
   green disc with a bare white tick — the circled check.svg glyph drew a
   second ring inside the disc — and Success! a size below it */
.wfs-screen__check {
  display: grid;
  place-items: center;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-green-600);
  color: var(--color-white);
}
.wfs-screen__check svg {
  display: block;
  width: 62%;
  height: 62%;
}
.wfs-screen__success {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-black);
}
.wfs-screen__foot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  font-size: 7px;
  color: var(--color-grey-400);
}
.wfs-screen__fdot {
  display: grid;
  place-items: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-blue-500);
  color: var(--color-white);
}
.wfs-screen__fdot svg {
  display: block;
  width: 6px;
  height: 6px;
}
.wfs-screen__foot img {
  width: 26px;
  height: auto;
}
.wfs-screen__home {
  width: 34%;
  height: 4px;
  border-radius: 999px;
  background: var(--color-grey-800);
  margin-top: 8px;
  margin-bottom: 10px;
}

/* narrow: the composition scales with the stage; give the overlap room */
@media (max-width: 1023px) {
  .wfs-stage { width: min(520px, calc(100vw - 48px)); }
}

@media (prefers-reduced-motion: reduce) {
  .wfs-stage { animation: none; }
}

/* ── view="integrations" · the same console on its Integrations page: the
   IAM and HR systems the verified profile flows into ────────────────── */
.wfs-int {
  display: flex;
  flex-direction: column;
  padding: 4px 18px 16px;
}
.wfs-int__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-grey-100);
}
.wfs-int__row:last-child { border-bottom: 0; }
.wfs-int__logo {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--color-grey-100);
  background: var(--color-white);
  overflow: hidden;
}
.wfs-int__logo img { display: block; width: auto; max-width: 18px; }
.wfs-int__name {
  font-size: 7.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-grey-600);
  white-space: nowrap;
}
.wfs-int__pill {
  justify-self: end;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-green-100);
  color: var(--color-green-600);
  font-size: 6px;
  font-weight: 600;
  line-height: 1.6;
}

/* ── the step variant · the visual as one screen of a how-it-works walk:
   centered in the stage, crossfaded on the same [data-sol-screen]
   mechanics solution-hero.js drives, no ambient float (the walk owns the
   transform), and the inline phone steps aside while it is up ───────── */
/* the step's containing block is the stage CARD, not the pinned section —
   solution.css leaves .sol-how__stage static (product-workforce.css makes
   it relative for .wfd, but pages on the shared sheet, like
   /use-cases/employee-onboarding/, load no page css), so without this the
   console centers on the viewport and rides over the steps rail */
.sol-how__stage:has(.wfs-stage--step) { position: relative; }
.wfs-stage--step {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* the same footprint as the .wfd window on /products/workforce/ */
  width: min(calc(100% - 64px), 560px);
  animation: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.wfs-stage--step.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease;
}
.sol-how__stage:has(.wfs-stage--step.is-active) .sol-how__phone { opacity: 0; }

/* view="monitoring" · the queue on its own has fewer boxes than the
   Integrations page, so at the same width it landed ~70px shorter and read
   cramped next to it (Mike 2026-08-10: "deja la del 4 con el mismo alto
   que la del 3"). The rows take the slack. */
.wfs-stage--monitoring .wfs-list__head { padding: 8px 6px; }
.wfs-stage--monitoring .wfs-list__row { padding: 13px 6px; }