/**
 * Typeform layer styles: presentation-only decoration over the transfers
 * wizard (question badges, Enter hint chip, step-enter animation, desktop
 * pop-out shell). Companion to js/tf-layer.js.
 *
 * Flag-gated: enqueued only when PCA_TRANSFER_TF_LAYER is on (per-request
 * override: ?tflayer=1 forces on, ?tflayer=0 forces off). The JS stamps
 * html.pca-tf-layer when the layer is active; every rule added here must be
 * scoped under .pca-tf-layer AND a (min-width: 768px) media query so mobile
 * and the flag-off state are byte-for-byte untouched. The pop-out shell
 * additionally requires PCA_TRANSFER_TF_SHELL (?tfshell=1 to preview).
 *
 * Rules land incrementally per task (badges here; Enter hint, animation and
 * shell follow in Tasks 3, 5 and 6).
 * Rollback: set PCA_TRANSFER_TF_LAYER=false or delete this file.
 */

/* Task 1: numbered question badge, injected by tf-layer.js into the visible
 * step's h2.pca-step-title. Desktop only, layer-on only. */
@media (min-width: 768px) {
  .pca-tf-layer .pca-q-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-right: 10px; vertical-align: 2px;
    border-radius: 5px; font-size: 12px; font-weight: 800;
    color: #14536b; background: rgba(20, 83, 107, 0.08);
    border: 1px solid rgba(20, 83, 107, 0.25);
  }
}

/* Task 3: Enter-to-advance hint chip. tf-layer.js appends one
 * .pca-enter-hint beside #pca-btn-next and toggles data-enter-ok on
 * #pca-transfers-nav for steps in ENTER_STEPS. Hidden by default; revealed
 * only on desktop, layer-on, and an Enter-eligible step. */
@media (min-width: 768px) {
  .pca-tf-layer .pca-enter-hint {
    display: none; align-items: center; margin-left: 12px;
    font-size: 12px; line-height: 1; white-space: nowrap;
    color: #6b7280; letter-spacing: 0.01em;
  }
  .pca-tf-layer .pca-transfers-nav[data-enter-ok] .pca-enter-hint {
    display: inline;   /* inline, not flex: preserves the space before "Enter" */
  }
  /* Guarantee the gap regardless of how the space renders. */
  .pca-tf-layer .pca-enter-hint b { font-weight: 700; color: #14536b; margin-left: 0.28em; }
}

/* Task 5: step-enter animation. showStep() flips display:none/block;
 * transitions cannot animate that, but a CSS animation replays every time
 * the element becomes rendered. Enter-only (no back-direction variant),
 * desktop only, and suppressed under reduced-motion. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .pca-tf-layer .pca-transfer-step {
    animation: pca-tf-step-in 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes pca-tf-step-in {
    /* Fade only, no vertical slide: the translateY made the screen visibly
       move top-to-bottom on every step (owner QA 2026-07-19). */
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Task 6: desktop pop-out shell. tf-layer.js enterShell() reparents the live
 * #pca-transfers-wizard node into .pca-tf-shell (a fixed inset overlay) and
 * stamps html.pca-tf-shell-open to lock page scroll. The shell is built only on
 * desktop with the shell flag on (PCA_TRANSFER_TF_SHELL or ?tfshell=1), so
 * these rules never touch the DOM on the default flag-off path or on mobile.
 * Everything is scoped under .pca-tf-shell / html.pca-tf-shell-open. No
 * em-dashes anywhere. Rollback: set the flag off or delete this file. */

/* Scroll lock: only the shell body scrolls while the overlay is open. */
html.pca-tf-shell-open,
html.pca-tf-shell-open body {
  overflow: hidden;
}

.pca-tf-shell {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  flex-direction: column;
  /* Warm gradient canvas: soft cream easing into peach, calm and brand-adjacent. */
  background: linear-gradient(165deg, #fdf7f0 0%, #fbe9db 52%, #f6ddcb 100%);
}
.pca-tf-shell.is-open { display: flex; }

/* Slim top bar: logo, step crumb, running total, exit button. */
.pca-tf-shell__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(20, 83, 107, 0.12);
}
.pca-tf-shell__logo {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0e6b54;
  white-space: nowrap;
}
.pca-tf-shell__logo b { color: #14536b; font-weight: 800; }
.pca-tf-shell__crumb {
  font-size: 13px;
  font-weight: 600;
  color: #5c6b73;
  white-space: nowrap;
}
/* margin-left:auto pins the total (and the X after it) to the right edge, even
 * when the total is empty on early steps. */
.pca-tf-shell__total {
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
  color: #14536b;
  white-space: nowrap;
}
.pca-tf-shell__x {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: #14536b;
  background: rgba(20, 83, 107, 0.06);
  border: 1px solid rgba(20, 83, 107, 0.18);
  border-radius: 8px;
  cursor: pointer;
}
.pca-tf-shell__x:hover { background: rgba(20, 83, 107, 0.12); }
.pca-tf-shell__x:focus-visible { outline: 2px solid #14536b; outline-offset: 2px; }

/* Centered, scrollable booking body. The reparented wizard renders as a card
 * on the warm canvas; cap its width so the questions read one at a time. */
.pca-tf-shell__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 32px 20px 64px;
}
.pca-tf-shell__body #pca-transfers-wizard {
  max-width: 720px;
  margin: 0 auto;
}