/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTS — nav, buttons, fields, cards, progress, chips, toasts.
   Anything reused across more than one screen lives here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────── NAV ────────────────────────────────────── */
.nav-wrap {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: var(--s-4) 0;
  padding-top: max(var(--s-4), env(safe-area-inset-top));
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* Scrim behind the floating pill. Without it, page content scrolls through the
   transparent gaps around the pill and reads as "cut off" text. Fades to
   nothing at the bottom so there's no hard edge. */
.nav-wrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 1.4rem);
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    var(--bg) 55%,
    color-mix(in srgb, var(--bg) 82%, transparent) 76%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
}

.nav {
  pointer-events: auto;
  width: var(--shell);
  max-width: 1120px;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0.55rem 0.55rem 0.55rem 1.15rem;
  border-radius: var(--r-pill);
  /* Glassmorphism — the pill nav from the SkyLift homepage. */
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  transition: background var(--d-base) var(--ease-soft),
              box-shadow var(--d-base) var(--ease-soft),
              border-color var(--d-base) var(--ease-soft);
}
.nav.is-scrolled { box-shadow: var(--shadow-md); border-color: var(--line-strong); }

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.brand:hover { text-decoration: none; }

/* ── Real logo lockups (assets/img/), swapped per theme ──────────────────── */
.brand-img {
  height: 30px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  display: none;            /* the matching theme reveals one of them */
}
:root[data-theme="light"] .brand-img--light { display: block; }
:root[data-theme="dark"]  .brand-img--dark  { display: block; }

/* No dedicated white file? Render the navy lockup white for dark mode.
   brightness(0) flattens every visible pixel to black, invert(1) flips it to
   white; transparent areas stay transparent. (The gold flag whitens too — drop
   a skylift-dark.svg to keep it gold.) */
.brand.no-dark-logo .brand-img--dark { display: none; }
:root[data-theme="dark"] .brand.no-dark-logo .brand-img--light {
  display: block;
  filter: brightness(0) invert(1);
}

/* Built-in vector fallback — shown only if neither logo file loads. */
.brand-fallback { display: none; align-items: center; gap: 0.6rem; min-width: 0; }
.brand.use-fallback .brand-img { display: none !important; }
.brand.use-fallback .brand-fallback { display: flex; }
.brand-mark {
  width: 31px; height: 31px;
  flex: none;
  color: var(--brand-ink);
  transition: color var(--d-base) var(--ease-soft);
}
.brand-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand-word {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.035em;
  color: var(--brand-ink);
}
/* Title case, tucked under the wordmark — as it sits in the real lockup. */
.brand-sub {
  font-size: 0.615rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-3);
  margin-top: 3px;
  align-self: flex-end;
  padding-right: 0.05em;
}

.nav-right { display: flex; align-items: center; gap: var(--s-2); }

/* Live progress + elapsed clock, shown only during the assessment. */
.nav-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.7rem;
  margin-right: 0.15rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nav-meta[hidden] { display: none; }
.nav-meta-sep {
  width: 1px;
  height: 12px;
  background: var(--line-strong);
  flex: none;
}
.nav-step { color: var(--text); }
.nav-timer { display: inline-flex; align-items: center; gap: 0.32rem; }
.nav-timer svg { width: 12px; height: 12px; flex: none; color: var(--accent); }
/* A quiet 1s pulse so the clock reads as *live*, not as a static label. */
.nav-timer-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok);
  animation: tick 2s var(--ease-soft) infinite;
}
@keyframes tick { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

/* ── Theme toggle ────────────────────────────────────────────────────────── */
.theme-toggle {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  transition: color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--text); background: var(--surface-hover); }
.theme-toggle:active { transform: scale(0.93); }
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
/* Dark theme shows the sun (the thing you'd switch *to*), and vice versa. */
:root[data-theme="dark"]  .icon-moon { opacity: 0; transform: rotate(-70deg) scale(0.5); }
:root[data-theme="light"] .icon-sun  { opacity: 0; transform: rotate(70deg) scale(0.5); }

/* ─────────────────────────────── BUTTONS ────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;                 /* comfortable touch target */
  padding: 0.68rem 1.3rem;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              opacity var(--d-fast) linear;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.985); }

.btn-lg { min-height: 52px; padding: 0.9rem 1.75rem; font-size: 0.97rem; }
.btn-block { width: 100%; }

/* Primary = the white pill from the homepage (inverts in light mode). */
.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-ink);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--shadow-cta); }
.btn-primary:active { transform: translateY(0) scale(0.985); }

/* Sheen that sweeps across on hover. Tasteful, not a casino. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.35) 50%, transparent 62%);
  opacity: 0;
  transform: translateX(-120%);
  pointer-events: none;
}
.btn-primary:hover::after { animation: sheen 900ms var(--ease-out); }
@keyframes sheen {
  0%   { opacity: 0;   transform: translateX(-120%); }
  35%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translateX(120%); }
}
:root[data-theme="light"] .btn-primary::after {
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--text-3); transform: translateY(-2px); }

.btn-pill {
  background: var(--cta-bg);
  color: var(--cta-ink);
  padding: 0.6rem 1.15rem;
  min-height: 40px;
  font-size: var(--t-xs);
  box-shadow: none;
}
.btn-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-arrow {
  width: 18px; height: 18px;
  flex: none;
  transition: transform var(--d-base) var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Disabled + in-flight states */
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}
.btn[disabled]::after { display: none; }

.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy .btn-arrow { opacity: 0; }
.btn.is-busy::before {
  content: "";
  position: absolute;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--cta-ink);
  animation: spin 620ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────── CARDS ──────────────────────────────────── */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.4rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* The blue bloom in the top-left corner of every SkyLift card. */
.card-glow::before {
  content: "";
  position: absolute;
  top: -60%; left: -25%;
  width: 90%; height: 190%;
  background: radial-gradient(closest-side, var(--glow-1), transparent 72%);
  pointer-events: none;
  opacity: 0.9;
}
.card-glow > * { position: relative; }

/* ─────────────────────────────── FIELDS ─────────────────────────────────── */
.field { margin-bottom: var(--s-5); }
.field:last-of-type { margin-bottom: var(--s-6); }

.field label,
.field-label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -0.008em;
  margin-bottom: 0.45rem;
}

.input, .field input, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 1rem;                 /* 16px — stops iOS zooming on focus */
  line-height: 1.5;
  transition: border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.62;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); }

.field input:hover, .field textarea:hover { border-color: var(--line-strong); }

.field input:focus, .field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-solid) 18%, transparent);
}

.field.has-error input,
.field.has-error textarea { border-color: var(--err); }
.field.has-error input:focus,
.field.has-error textarea:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--err) 18%, transparent);
}

/* ── Phone field with country chip (Pakistan-only for now) ───────────────── */
.phone-group {
  display: flex;
  align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.phone-group:hover { border-color: var(--line-strong); }
.phone-group:focus-within {
  background: var(--surface);
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-solid) 18%, transparent);
}
.field.has-error .phone-group { border-color: var(--err); }
.field.has-error .phone-group:focus-within {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--err) 18%, transparent);
}

/* The country segment. Styled like a selector so it can become a dropdown
   later; today it's fixed to Pakistan. */
.phone-country {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.85rem;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
  user-select: none;
}
.phone-country .flag { font-size: 1.1rem; line-height: 1; }

/* The input inside the group is borderless — the group carries the frame. */
.phone-group input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

.field-hint, .field-error {
  font-size: var(--t-xs);
  line-height: 1.5;
  margin-top: 0.42rem;
}
.field-hint { color: var(--text-3); }
.field-error {
  color: var(--err);
  font-weight: 600;
  display: none;
}
.field.has-error .field-error { display: block; animation: nudge 380ms var(--ease-out); }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  22%      { transform: translateX(-5px); }
  55%      { transform: translateX(4px); }
  80%      { transform: translateX(-2px); }
}

/* ─────────────────────────── PROGRESS BAR ───────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--line);
  z-index: 110;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-lift) 55%, var(--gold) 100%);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 14px color-mix(in srgb, var(--blue) 55%, transparent);
  transition: width 620ms var(--ease-out);
}

/* ─────────────────────────────── CHIP ───────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.72rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-2);
}
.chip-accent {
  background: color-mix(in srgb, var(--accent-solid) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-solid) 34%, transparent);
  color: var(--accent);
}
.chip-gold {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
  color: var(--gold);
}
:root[data-theme="light"] .chip-gold { color: #8a6a00; }

/* ─────────────────────────────── TOASTS ─────────────────────────────────── */
.toasts {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: max(var(--s-5), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-2);
  width: min(440px, calc(100% - 2rem));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text);
  animation: toastIn 380ms var(--ease-out) both;
}
.toast.is-out { animation: toastOut 240ms var(--ease-soft) both; }
.toast-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex: none;
  background: var(--text-3);
}
.toast-info .toast-dot  { background: var(--accent-solid); }
.toast-warn .toast-dot  { background: var(--warn); }
.toast-error .toast-dot { background: var(--err); }
.toast-ok .toast-dot    { background: var(--ok); }
.toast-body { flex: 1; min-width: 0; }
.toast-body strong { display: block; font-weight: 700; margin-bottom: 1px; }
.toast-body span { color: var(--text-2); }
.toast-action {
  flex: none;
  align-self: center;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--accent);
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
}
.toast-action:hover { background: var(--surface-hover); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(8px) scale(0.97); }
}

/* ────────────────────────── MOBILE ADJUSTMENTS ──────────────────────────── */
.nav-cta[hidden] { display: none; }

@media (max-width: 720px) {
  .nav { padding-left: 0.9rem; gap: var(--s-2); }
  .brand-sub { display: none; }
  .nav-cta { display: none; }          /* the hero CTA is right there anyway */
}

@media (max-width: 460px) {
  .nav-meta { padding: 0.3rem 0.55rem; font-size: 0.7rem; gap: 0.38rem; }
  .brand-word { font-size: 1rem; }
  .brand-img { height: 26px; max-width: 150px; }
}