/* AI-native signup flow (docs/AI_NATIVE_ONBOARDING_PLAN.md) — ais- namespace.
   Tokens mirror the portal: navy #003264, ink #303233, mute #6d87a1,
   line #eef0f4 / #dfe3e8, page #fbfcfd, dash purple #7c3aed→#9333ea. */

/* The portal's body-as-scroll-container CSS (height: 100vh + overflow: auto)
   breaks touch/viewport scrolling on this standalone page - scope the signup
   page back to normal document scrolling. */
body:has(.ais-stage) { height: auto !important; max-height: none !important; overflow-y: visible !important; }

.ais-stage { min-height: 100vh; min-height: 100dvh; position: relative; background: #fbfcfd; display: flex; flex-direction: column; overflow: hidden; }
.ais-aurora { position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(520px 340px at 50% 44%, rgba(0, 163, 250, 0.10), transparent 70%),
		radial-gradient(640px 420px at 62% 58%, rgba(124, 58, 237, 0.06), transparent 72%),
		radial-gradient(700px 480px at 38% 60%, rgba(0, 50, 100, 0.05), transparent 75%); }

.ais-topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; }
.ais-topbar-right { display: flex; align-items: center; gap: 14px; }
.ais-trust-chip { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #16a34a; background: #d8f1e4; border-radius: 999px; padding: 5px 12px; font-weight: 600; white-space: nowrap; }
.ais-login-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; color: #003264; background: #ffffff; border: 1px solid #dfe3e8; border-radius: 999px; padding: 8px 18px; cursor: pointer; text-decoration: none; }
.ais-login-btn:hover { background: #f6f7f9; color: #003264; }

.ais-rail { position: absolute; z-index: 2; left: 32px; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.ais-rail-step { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #94a3b8; }
.ais-rail-step.active { color: #003264; font-weight: 600; }
.ais-rail-step.done { color: #6d87a1; }
button.ais-rail-step { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
button.ais-rail-step:hover { color: #003264; }
button.ais-rail-step:hover span:last-child { text-decoration: underline; }
.ais-rail-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #dfe3e8; background: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ais-rail-step.active .ais-rail-dot { border-color: #003264; background: #003264; box-shadow: inset 0 0 0 3px #ffffff; }
.ais-rail-step.done .ais-rail-dot { border-color: #003264; background: #003264; }

.ais-center { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px 64px; }
.ais-center.top { justify-content: flex-start; padding-top: 34px; }
.ais-h1 { font-size: 38px; line-height: 1.15; font-weight: 700; color: #003264; margin: 22px 0 0 0; text-align: center; letter-spacing: -0.5px; }
.ais-h1.sm { font-size: 31px; }
.ais-sub { font-size: 15.5px; color: #5A7089; margin: 12px 0 0 0; text-align: center; max-width: 560px; line-height: 1.55; }

.ais-orb { filter: drop-shadow(0 10px 28px rgba(124, 58, 237, 0.35)); }

.ais-pill { display: flex; align-items: center; gap: 10px; width: min(540px, 92vw); background: #ffffff; border: 1px solid #dfe3e8; border-radius: 999px; padding: 5px 5px 5px 22px; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06); margin-top: 30px; }
.ais-pill input { flex: 1; border: none; outline: none; font-size: 15px; color: #303233; background: transparent; min-width: 0; height: 44px; }
.ais-pill input::placeholder { color: #94a3b8; }
.ais-pill-send { width: 44px; height: 44px; border-radius: 50%; background: #003264; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; cursor: pointer; }
.ais-pill-send:hover { background: #14457A; }

.ais-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: #ffffff; background: #003264; border: none; border-radius: 10px; padding: 12px 26px; cursor: pointer; }
.ais-btn-primary:hover { background: #14457A; }
.ais-btn-primary:disabled { opacity: 0.6; cursor: default; }
.ais-btn-secondary { display: inline-flex; align-items: center; justify-content: center; font-size: 14.5px; color: #303233; background: #ffffff; border: 1px solid #dfe3e8; border-radius: 10px; padding: 12px 22px; cursor: pointer; }
.ais-btn-row { display: flex; align-items: center; gap: 12px; margin-top: 26px; }

.ais-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #444444; background: #ffffff; border: 1px solid #dfe3e8; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.ais-chip:hover { border-color: #94a3b8; }
.ais-chip.sel { border: 1.5px solid #003264; background: #EBF0F5; color: #003264; font-weight: 600; }

.ais-card { background: #ffffff; border: 1px solid #eef0f4; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03); }
.ais-card a { display: inline; }

.ais-mut { color: #6d87a1; }
.ais-small { font-size: 12.5px; }
.ais-escape { position: relative; z-index: 2; text-align: center; font-size: 13px; color: #6d87a1; padding: 0 0 26px; }
.ais-escape a, .ais-escape button { color: #003264; display: inline; background: none; border: none; padding: 0; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* Field chrome (confirm + item + claim) */
.ais-field-label { font-size: 12.5px; color: #6d87a1; margin-bottom: 5px; }
.ais-input, .ais-select { width: 100%; height: 42px; border: 1px solid #dfe3e8; border-radius: 8px; padding: 0 13px; font-size: 14px; background: #ffffff; color: #303233; outline: none; }
.ais-input:focus, .ais-select:focus { border-color: #003264; }
.ais-textarea { width: 100%; border: 1px solid #dfe3e8; border-radius: 8px; padding: 11px 13px; font-size: 13.5px; line-height: 1.55; background: #ffffff; color: #303233; outline: none; resize: vertical; }
.ais-error { font-size: 12.5px; color: #dc2626; margin-top: 4px; }

/* Module choice cards — same anatomy as the wizard's onboarding-choice-card */
.ais-choice { flex: 1; position: relative; border: 1px solid #dfe3e8; background: #ffffff; border-radius: 10px; padding: 14px 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; text-align: center; }
.ais-choice.sel { border: 1.5px solid #003264; background: #f8fafc; }
.ais-choice .ais-choice-check { position: absolute; top: 8px; right: 8px; display: none; }
.ais-choice.sel .ais-choice-check { display: block; }
.ais-choice-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ais-choice-title { font-size: 13.5px; font-weight: 700; color: #303233; }
.ais-choice-sub { font-size: 11.5px; color: #6d87a1; }

/* Candidate pick-one rows */
.ais-cand { border: 1px solid #dfe3e8; background: #ffffff; border-radius: 10px; padding: 11px 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 10px; }
.ais-cand.sel { border: 1.5px solid #003264; background: #EBF0F5; }
.ais-cand-name { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #444444; }
.ais-cand.sel .ais-cand-name { font-weight: 600; color: #003264; }
.ais-cand-radio { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #dfe3e8; flex-shrink: 0; }
.ais-cand.sel .ais-cand-radio { border-color: #003264; background: #003264; box-shadow: inset 0 0 0 3px #EBF0F5; }
.ais-cand-meta { font-size: 13px; color: #94a3b8; white-space: nowrap; }
.ais-cand.sel .ais-cand-meta { color: #5A7089; }
.ais-cand.dashed { border-style: dashed; justify-content: center; color: #6d87a1; font-size: 13.5px; }

/* Analyze progress card */
.ais-progress-track { height: 6px; border-radius: 999px; background: #eef0f4; margin-top: 12px; overflow: hidden; }
.ais-progress-fill { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #003264, #7c3aed); transition: width 0.9s ease; }
.ais-check-row { display: flex; align-items: center; gap: 11px; font-size: 14px; color: #303233; }
.ais-check-row.pending { color: #94a3b8; }
.ais-check-row.active { color: #003264; font-weight: 600; }
@keyframes ais-spin { to { transform: rotate(360deg); } }
.ais-spinner { animation: ais-spin 1s linear infinite; transform-origin: center; }

/* Booking-page preview frame */
.ais-preview-frame { width: min(520px, 94vw); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14); background: #ffffff; border: 1px solid #eef0f4; }
.ais-preview-bar { display: flex; align-items: center; gap: 8px; background: #f6f7f9; border-bottom: 1px solid #eef0f4; padding: 10px 14px; }
.ais-preview-dot { width: 9px; height: 9px; border-radius: 50%; background: #dfe3e8; flex-shrink: 0; }
.ais-preview-url { font-size: 12px; color: #6d87a1; background: #ffffff; border: 1px solid #eef0f4; border-radius: 999px; padding: 4px 16px; }
.ais-preview-badge { font-size: 11px; font-weight: 700; color: #16a34a; background: #d8f1e4; border-radius: 999px; padding: 3px 9px; }

/* AI accent */
.ais-ai-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #ffffff; background: linear-gradient(135deg, #7c3aed, #9333ea); border-radius: 999px; padding: 5px 12px; border: none; cursor: pointer; }
.ais-ai-hint { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #6d87a1; margin-top: 6px; }

@media (max-width: 900px) {
	.ais-rail { display: none; }
	.ais-h1 { font-size: 29px; }
	.ais-h1.sm { font-size: 25px; }
}

/* Searchable pickers (select2: country with flags, timezone, currency) —
   same chrome as .ais-input. Global stylesheets (classic signup, portal)
   restyle bare select2 selectors, so every property is pinned here. */
.ais-s2-wrap .select2-container { width: 100% !important; }
.ais-s2-wrap > select { width: 100%; height: 42px; border: 1px solid #dfe3e8; border-radius: 8px; padding: 0 13px; font-size: 14px; background: #ffffff; color: #303233; outline: none; appearance: none; }
.ais-s2-wrap .select2-container .select2-selection--single {
	height: 42px !important; min-height: 42px !important;
	border: 1px solid #dfe3e8 !important; border-radius: 8px !important;
	background: #ffffff !important; padding: 0 !important; display: block; }
.ais-s2-wrap .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 40px !important; height: 40px !important; background: transparent !important;
	border: none !important; border-radius: 0 !important; box-shadow: none !important;
	padding: 0 30px 0 13px !important; font-size: 14px !important; color: #303233 !important;
	/* Flex, not baseline: the country flag is taller than the text, so
	   vertical-align left it sitting high in the field. */
	display: flex !important; align-items: center !important; }
.ais-s2-wrap .select2-container .select2-selection--single .select2-selection__arrow {
	/* overwriteThirdParty.css hides every select2 arrow app-wide, which left
	   these three reading as plain text boxes. Put ours back, scoped. */
	display: block !important;
	height: 40px !important; top: 0 !important; right: 6px !important; width: 26px !important;
	/* select2 draws a CSS triangle that is invisible against this chrome, so
	   these read as plain text boxes. Use the portal's own chevron instead -
	   same mark as <x-filters.listing-filters>. */
	background: url('/icons/chevron-down-blue.svg') no-repeat center center !important;
	background-size: 11px auto !important; }
.ais-s2-wrap .select2-container .select2-selection--single .select2-selection__arrow b { display: none !important; }
/* Before select2 initializes the bare <select> is arrowless too (appearance:none). */
.ais-s2-wrap > select {
	background: #ffffff url('/icons/chevron-down-blue.svg') no-repeat right 12px center;
	background-size: 11px auto; padding-right: 34px; }
.ais-s2-wrap .select2-container--open .select2-selection--single,
.ais-s2-wrap .select2-container--focus .select2-selection--single {
	border-color: #003264 !important; }
.ais-s2-wrap .img-flag { margin-right: 7px; border-radius: 2px; flex: 0 0 auto; }
/* Dropdowns attach to body — scope via the marker class added at open time. */
.ais-s2-drop.select2-dropdown {
	border: 1px solid #dfe3e8; border-radius: 8px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12); }
.ais-s2-drop .select2-search--dropdown .select2-search__field {
	border: 1px solid #dfe3e8 !important; border-radius: 6px; height: 34px; padding: 0 10px; font-size: 13.5px; outline: none; }
.ais-s2-drop .select2-results__option { font-size: 13.5px; padding: 7px 12px; display: flex; align-items: center; }
.ais-s2-drop .img-flag { margin-right: 7px; border-radius: 2px; flex: 0 0 auto; }
.ais-s2-drop .select2-results__option--highlighted[aria-selected] { background: #003264; }


/* Live analysis indicator on the details step */
.ais-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #5A7089; background: #ffffff; border: 1px solid #eef0f4; border-radius: 999px; padding: 7px 15px; margin-top: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.ais-live strong { color: #003264; font-weight: 600; }

/* Word-by-word reveal on step headlines - Dash talking to you */
.ais-tw { opacity: 0; display: inline-block; animation: ais-tw-in 0.3s ease forwards; }
@keyframes ais-tw-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ais-tw { animation: none; opacity: 1; } }

/* Mobile: recent iPhone / Android, Safari + Chrome */
.ais-chip, .ais-choice, .ais-cand, .ais-btn-primary, .ais-btn-secondary, .ais-pill-send, .ais-login-btn { -webkit-tap-highlight-color: transparent; }
@media (max-width: 640px) {
	/* The trust chip pushes Log in off-screen on phones. */
	.ais-trust-chip { display: none; }
	.ais-topbar { padding: 16px 18px; }
	/* iOS Safari auto-zooms any focused control under 16px. */
	.ais-input, .ais-select, .ais-textarea, .ais-pill input,
	.ais-s2-wrap > select,
	.ais-s2-wrap .select2-container .select2-selection--single .select2-selection__rendered {
		font-size: 16px !important;
	}
	.ais-s2-drop .select2-search--dropdown .select2-search__field { font-size: 16px !important; height: 40px; }
	/* Comfortable thumb targets. */
	.ais-chip { padding: 11px 18px; }
	.ais-cand { padding: 13px 14px; }
	.ais-center { padding-left: 14px; padding-right: 14px; }
}

/* Claim: the form and the page it unlocks, side by side. */
.ais-claim-split {
	display: flex; gap: 32px; margin-top: 22px;
	align-items: flex-start; justify-content: center; flex-wrap: wrap; width: 100%; }
.ais-claim-form { width: min(400px, 94vw); flex: 0 0 auto; }
.ais-claim-split .ais-preview-frame { flex: 0 0 auto; }
@media (max-width: 900px) {
	/* Phone/tablet: the form comes first - the preview is proof, not a gate. */
	.ais-claim-split { gap: 22px; }
	.ais-claim-split .ais-preview-frame { order: 2; width: min(460px, 94vw); }
	.ais-claim-form { order: 1; }
}

/* "Show N more" under a truncated found-items list. */
.ais-show-more {
	background: none; border: none; padding: 4px 2px; margin: 0;
	font-size: 13px; font-weight: 600; color: #003264; text-decoration: underline;
	cursor: pointer; text-align: left; align-self: flex-start; }
.ais-show-more:hover { color: #00224a; }

/* Quantity field: typing beats pressing + forty times, so it is a real input.
   The native spinners would sit on top of our own -/+ buttons. */
.ais-qty-input::-webkit-outer-spin-button,
.ais-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The module and product pickers are real <button>s so they can be reached by
   keyboard. Reset the browser chrome they bring with them. */
button.ais-choice, button.ais-cand {
	appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
	text-align: left; width: 100%; }

/* A visible focus ring on everything focusable - without one, tabbing through
   the signup is invisible. */
.ais-btn-primary:focus-visible,
.ais-btn-secondary:focus-visible,
.ais-choice:focus-visible,
.ais-cand:focus-visible,
.ais-show-more:focus-visible,
.ais-chip:focus-visible,
.ais-input:focus-visible {
	outline: 2px solid #003264; outline-offset: 2px; }