/* mobile-flow.css — registration flow inside .mobile-frame (402px iOS device)
   ============================================================================
   PROTOTYPE-ONLY SCOPING. In production, port these rules to a real
   `@media (max-width: 768px)` query (replace `.mobile-frame X` with `X` and wrap
   the block in the media query). The .mobile-frame ancestor exists only because
   the prototype simulates mobile by rendering inside a fixed 402px iOS frame,
   so viewport-based media queries don't fire. See HANDOFF.md.
   ============================================================================
   Overrides desktop two-column layout so the flow fits and feels native on mobile. */

.mobile-frame .flow-overlay {
  position: absolute; /* contained within the iOS device, not full viewport */
  inset: 0;
  padding: 0;
  background: rgba(7, 22, 64, 0.55);
}

.mobile-frame .flow-panel {
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  grid-template-columns: 1fr;        /* single column */
  grid-template-rows: auto 1fr;      /* compact header, scrollable body */
  background: #fff;
}

/* Sidebar collapses into a navy header strip */
.mobile-frame .flow-sidebar {
  padding: 16px 18px 14px;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-frame .flow-sidebar .sb-logo {
  font-size: 13px;
  margin-bottom: 12px;
}
.mobile-frame .flow-sidebar .sb-logo .logo-mark {
  width: 22px; height: 22px; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
}
.mobile-frame .flow-sidebar h3 {
  font-size: 18px;
  margin-bottom: 6px;
}
/* Hide long marketing sub on mobile — saves vertical space */
.mobile-frame .flow-sidebar .sb-sub { display: none; }

/* Convert vertical step list into a horizontal pill row */
.mobile-frame .flow-steps {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mobile-frame .flow-steps::-webkit-scrollbar { display: none; }
.mobile-frame .flow-steps li {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  padding: 0;
  gap: 4px;
  font-size: 11px;
  position: relative;
}
.mobile-frame .flow-steps li + li::before {
  display: none; /* drop the dashed connector */
}
.mobile-frame .flow-steps .step-dot {
  display: none; /* drop number circles, use bar + label instead */
}
.mobile-frame .flow-steps li::after {
  content: "";
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.16);
  order: -1;
  margin-bottom: 6px;
}
.mobile-frame .flow-steps li.done::after { background: rgba(255,255,255,0.55); }
.mobile-frame .flow-steps li.active::after { background: var(--amber, #F59E0B); }
.mobile-frame .flow-steps li .step-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-frame .flow-steps li .step-desc { display: none; }

/* Main scrollable body */
.mobile-frame .flow-main {
  padding: 18px 18px 100px; /* room for sticky footer */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-frame .flow-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.mobile-frame .flow-head .step-label {
  font-size: 11px;
  font-family: var(--mono, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748B);
}
.mobile-frame .flow-close {
  width: 32px; height: 32px;
}
.mobile-frame .flow-main h2 {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 6px;
}
.mobile-frame .flow-main .lead {
  font-size: 13px;
  margin-bottom: 18px;
  max-width: none;
}
.mobile-frame .flow-body {
  gap: 14px;
}

/* Form fields: stack everything vertically */
.mobile-frame .flow-main .row-2,
.mobile-frame .flow-main .row-3 {
  grid-template-columns: 1fr;
  gap: 14px;
}
.mobile-frame .flow-main .field { font-size: 13px; }
.mobile-frame .flow-main label { font-size: 12px; }
.mobile-frame .flow-main input,
.mobile-frame .flow-main select,
.mobile-frame .flow-main textarea {
  font-size: 14px;
  padding: 11px 12px;
}
.mobile-frame .flow-main textarea { min-height: 96px; }
.mobile-frame .flow-main .chips { gap: 6px; }
.mobile-frame .flow-main .chip { font-size: 12px; padding: 7px 11px; }
.mobile-frame .flow-main .pill-options { flex-wrap: wrap; gap: 6px; }
.mobile-frame .flow-main .pill-options .pill { font-size: 12px; padding: 8px 12px; }

/* Sticky footer with prev/next */
.mobile-frame .flow-footer {
  position: sticky;
  bottom: 0;
  margin: 14px -18px -100px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line, #E5E8EF);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  z-index: 5;
}
.mobile-frame .flow-footer .btn { padding: 10px 14px; font-size: 13px; }
.mobile-frame .flow-footer .btn-link { font-size: 12px; padding: 8px 0; }
.mobile-frame .flow-footer .progress-text { font-size: 11px; }

/* Success state */
.mobile-frame .flow-body.success { padding: 8px 0; }
.mobile-frame .flow-body.success h2 { font-size: 22px; }
.mobile-frame .flow-body.success p { font-size: 13px; }
.mobile-frame .check-big { width: 56px; height: 56px; }
.mobile-frame .next-steps { padding: 14px; }
.mobile-frame .next-steps h4 { font-size: 13px; }
.mobile-frame .next-steps ol { font-size: 12px; }

/* Audience choice modal — fit inside frame */
.mobile-frame .audience-choice-panel {
  width: calc(100% - 24px);
  max-width: 100%;
  padding: 22px 18px;
  border-radius: 16px;
}
.mobile-frame .audience-choice-panel h2 { font-size: 20px; }
.mobile-frame .audience-choice-panel .ac-sub { font-size: 13px; }
.mobile-frame .audience-choice-options {
  grid-template-columns: 1fr;
  gap: 10px;
}
.mobile-frame .ac-option { padding: 14px; }

/* Login modal */
.mobile-frame .login-panel {
  width: calc(100% - 24px);
  padding: 22px 18px;
  border-radius: 16px;
}