/* Onboarding flow editor — scoped to keep library and main navigation intact. */
#onboardingEditorView { color:var(--ft-text-primary); }
#onboardingEditorView :is(button,input,select,textarea) { font:inherit; }
#onboardingEditorView .flow-toolbar, #onboardingEditorView .flow-inline-actions { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
#onboardingEditorView .flow-toolbar { justify-content:space-between; margin-bottom:1.5rem; }
#onboardingEditorView button { border:1px solid rgb(var(--ft-border-rgb)/.85); border-radius:.65rem; padding:.65rem .9rem; background:rgb(var(--ft-surface-rgb)); font-size:.85rem; font-weight:600; color:var(--ft-text-primary); cursor:pointer; }
#onboardingEditorView button:hover { background:rgb(var(--ft-secondary-rgb)/.08); }
#onboardingEditorView .flow-primary { background:var(--ft-secondary); border-color:var(--ft-secondary); color:#171b25; }
#onboardingEditorView .flow-delete { color:#dc5252; background:transparent; border-color:rgb(220 82 82/.25); }
#onboardingEditorView .flow-link { border:0; background:transparent; padding:.35rem 0; color:var(--ft-secondary); }
#onboardingEditorView .flow-identity { display:grid; grid-template-columns:1.5fr 1fr; gap:2rem; padding:1.5rem; border:1px solid rgb(var(--ft-border-rgb)/.8); background:rgb(var(--ft-surface-rgb)); border-radius:1rem; margin-bottom:1.5rem; }
#onboardingEditorView .flow-eyebrow { font-size:.65rem; font-weight:700; letter-spacing:.12em; color:var(--ft-secondary); margin:0 0 .4rem; }
#onboardingEditorView #editingFlowCodeDisplay { font-size:1.65rem; font-weight:700; letter-spacing:.04em; margin:0 0 1rem; }
#onboardingEditorView .flow-defaults { padding-left:2rem; border-left:1px solid rgb(var(--ft-border-rgb)/.65); }
#onboardingEditorView h3 { margin:0; font-size:1rem; font-weight:700; }
#onboardingEditorView .flow-workspace { display:grid; grid-template-columns:minmax(0,1fr) 17rem; gap:1.5rem; align-items:start; }
#onboardingEditorView .onboarding-flow-steps { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; padding:0; overflow:visible; }
#onboardingEditorView .flow-card { min-width:0; border:1px solid rgb(var(--ft-border-rgb)/.8); border-radius:1rem; background:rgb(var(--ft-surface-rgb)); overflow:hidden; box-shadow:0 8px 24px rgb(15 23 42/.025); }
#onboardingEditorView .flow-card > header { display:flex; align-items:center; gap:.75rem; padding:1.25rem; border-bottom:1px solid rgb(var(--ft-border-rgb)/.55); min-height:6rem; }
#onboardingEditorView .flow-card > header > div { flex:1; }
#onboardingEditorView .flow-card > header p { font-size:.76rem; color:var(--ft-text-muted); margin:.3rem 0 0; line-height:1.5; }
#onboardingEditorView .flow-icon { width:2.4rem; height:2.4rem; border-radius:.75rem; display:grid; place-items:center; background:rgb(var(--ft-secondary-rgb)/.09); color:var(--ft-secondary); flex-shrink:0; }
#onboardingEditorView .flow-icon svg { width:1.25rem; height:1.25rem; }
#onboardingEditorView .flow-card-content { padding:1.25rem; }
#onboardingEditorView .is-disabled .flow-card-content { opacity:.5; }
#onboardingEditorView .is-disabled .flow-icon { color:var(--ft-text-muted); background:rgb(var(--ft-text-muted-rgb)/.08); }
#onboardingEditorView .flow-switch { position:relative; display:block; width:2.5rem; height:1.4rem; flex-shrink:0; }
#onboardingEditorView .flow-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
#onboardingEditorView .flow-switch span { display:block; height:100%; border-radius:2rem; background:rgb(var(--ft-text-muted-rgb)/.3); }
#onboardingEditorView .flow-switch span:after { content:''; position:absolute; width:1.1rem; height:1.1rem; left:.15rem; top:.15rem; border-radius:50%; background:white; transition:transform .15s; }
#onboardingEditorView .flow-switch input:checked + span { background:var(--ft-secondary); }
#onboardingEditorView .flow-switch input:checked + span:after { transform:translateX(1.1rem); }
#onboardingEditorView :is(button,input,select,textarea):focus-visible { outline:2px solid var(--ft-secondary); outline-offset:3px; }
#onboardingEditorView .flow-switch input:focus-visible + span { outline:2px solid var(--ft-secondary); outline-offset:3px; }
#onboardingEditorView .flow-field { display:flex; flex-direction:column; gap:.45rem; margin:0 0 1rem; font-size:.82rem; font-weight:600; }
#onboardingEditorView .flow-field small { font-size:.72rem; font-weight:400; color:var(--ft-text-muted); }
#onboardingEditorView :is(input:not([type=checkbox]),select,textarea) { width:100%; min-width:0; padding:.7rem .8rem; color:var(--ft-text-primary); background:rgb(var(--ft-bg-rgb,245 246 250)/.35); border:1px solid rgb(var(--ft-border-rgb)/.8); border-radius:.65rem; font-size:.85rem; line-height:1.5; font-weight:400; }
#onboardingEditorView textarea { resize:vertical; }
#onboardingEditorView .flow-help { font-size:.75rem; line-height:1.55; color:var(--ft-text-muted); margin:.6rem 0; }
#onboardingEditorView .flow-field-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.82rem; font-weight:600; }
#onboardingEditorView .flow-welcome-video-control { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }
#onboardingEditorView .flow-welcome-video-control > div { min-width:0; }
#onboardingEditorView .flow-welcome-video-control strong { font-size:.8rem; }
#onboardingEditorView .flow-welcome-video-control .flow-help { margin:.25rem 0 0; }
#onboardingEditorView .flow-timing { font-size:.75rem; color:var(--ft-secondary); background:rgb(var(--ft-secondary-rgb)/.06); padding:.65rem; border-radius:.5rem; }
#onboardingEditorView .flow-field-pair { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
#onboardingEditorView .flow-number { display:flex; align-items:center; gap:.5rem; }
#onboardingEditorView .flow-number input { width:5rem; }
#onboardingEditorView .flow-measurements { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin-top:1rem; }
#onboardingEditorView .flow-measurements label { display:flex; align-items:center; gap:.5rem; padding:.65rem; border:1px solid rgb(var(--ft-border-rgb)/.7); border-radius:.6rem; font-size:.8rem; }
#onboardingEditorView input[type=checkbox] { accent-color:var(--ft-secondary); }
#onboardingEditorView .flow-summary { position:sticky; top:1rem; border:1px solid rgb(var(--ft-border-rgb)/.8); border-radius:1rem; background:rgb(var(--ft-surface-rgb)); padding:1.25rem; }
#onboardingEditorView .flow-draft { display:inline-block; font-size:.67rem; color:var(--ft-text-muted); padding:.3rem .5rem; border-radius:.4rem; background:rgb(var(--ft-text-muted-rgb)/.08); margin:.65rem 0; }
#onboardingEditorView .flow-summary-row { border-bottom:1px solid rgb(var(--ft-border-rgb)/.55); padding:.7rem 0; font-size:.77rem; }
#onboardingEditorView .flow-summary-row p { margin:.25rem 0 0; color:var(--ft-text-muted); line-height:1.5; overflow-wrap:anywhere; }
#onboardingEditorView .flow-summary-row .is-off { opacity:.7; }
#onboardingEditorView .flow-preview { width:min(66rem,94vw); max-height:90vh; overflow:auto; margin:auto; padding:1.5rem; color:var(--ft-text-primary); background:rgb(var(--ft-surface-rgb)); border:1px solid rgb(var(--ft-border-rgb)); border-radius:1.25rem; }
#onboardingEditorView .flow-preview::backdrop { background:rgb(15 23 42/.68); -webkit-backdrop-filter:none; backdrop-filter:none; }
#onboardingEditorView .flow-preview-heading { display:flex; justify-content:space-between; align-items:center; }
#onboardingEditorView .flow-preview h2 { font-size:1.35rem; font-weight:700; }
#onboardingEditorView .flow-preview-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
#onboardingEditorView .flow-preview-steps > section { border:1px solid rgb(var(--ft-border-rgb)); padding:1.25rem; border-radius:1rem; }
#onboardingEditorView .flow-step { display:block; font-size:.65rem; letter-spacing:.08em; color:var(--ft-secondary); margin-bottom:1.5rem; }
#onboardingEditorView .flow-preview-message { white-space:pre-wrap; overflow-wrap:anywhere; background:rgb(var(--ft-secondary-rgb)/.07); border-radius:.75rem; padding:1rem; margin:1rem 0; }
@media(max-width:1250px) { #onboardingEditorView .flow-workspace { grid-template-columns:1fr; } #onboardingEditorView .flow-summary { position:static; } }
@media(max-width:760px) { #onboardingEditorView .onboarding-flow-steps, #onboardingEditorView .flow-identity, #onboardingEditorView .flow-preview-steps { grid-template-columns:1fr; } #onboardingEditorView .flow-defaults { padding-left:0; border-left:0; } #onboardingEditorView .flow-toolbar { align-items:flex-start; } }
/* Reset the previous three-step desktop ordering. */
#onboardingEditorView .onboarding-flow-steps > .flow-card { order:0; }

/* Code availability stays beside its input; hidden state must win over flex. */
#onboardingEditorView #editingFlowCodeInputWrapper { flex-wrap:nowrap; margin-bottom:1rem; }
#onboardingEditorView #editingFlowCodeInputWrapper.hidden { display:none !important; }
#onboardingEditorView #trainerCodeInput { flex:1 1 0; width:0; }
#onboardingEditorView #trainerCodeCheckBtn { flex:0 0 auto; white-space:nowrap; }
#onboardingEditorView .flow-preview { width:min(44rem,94vw); }
#onboardingEditorView .flow-preview-nav { display:flex; gap:.5rem; margin:.6rem 0 1rem; flex-wrap:wrap; }
#onboardingEditorView .flow-preview-nav button[aria-pressed=true] { color:var(--ft-secondary); background:rgb(var(--ft-secondary-rgb)/.1); border-color:transparent; }
#onboardingEditorView .flow-preview-steps { display:block; }
#onboardingEditorView .flow-preview-steps > section { padding:1.5rem; }
#onboardingEditorView .flow-preview-steps > section[hidden] { display:none; }
#onboardingEditorView .flow-welcome-video { display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:.8rem; background:#10141b; margin-top:1rem; }
#onboardingEditorView .flow-preview-steps h3 { font-size:1.3rem; margin-bottom:.65rem; }
#onboardingEditorView .flow-preview-steps p { line-height:1.6; }
/* Compact module overview, with detail editors only where needed. */
#onboardingEditorView .flow-workspace { grid-template-columns:1fr; }
#onboardingEditorView .onboarding-flow-steps { grid-template-columns:repeat(6,minmax(0,1fr)); gap:1rem; align-items:start; }
#onboardingEditorView .flow-card > header { align-items:flex-start; flex-wrap:wrap; padding:1rem; gap:.6rem; min-height:10rem; }
#onboardingEditorView .flow-card > header > div { flex:1 0 100%; order:3; }
#onboardingEditorView .flow-card > header .flow-switch { margin-left:auto; }
#onboardingEditorView .flow-card-content, #onboardingEditorView .flow-compact-content { padding:1rem; }
#onboardingEditorView .flow-card-content[hidden] { display:none!important; }
#onboardingEditorView .flow-compact-description { font-size:.8rem; color:var(--ft-text-muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 1rem; }
#onboardingEditorView .flow-compact-content > button { width:100%; }
#onboardingEditorView .flow-summary { position:static; }
#onboardingEditorView #onboardingSetupSummary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 1.5rem; }
#onboardingEditorView .flow-module-dialog { width:min(38rem,94vw); overflow:visible; }
#onboardingEditorView #flowModuleBody { max-height:calc(90dvh - 10rem); overflow-y:auto; overflow-x:visible; }
#onboardingEditorView .flow-module-dialog[data-module="Messages"] #flowModuleBody { overflow:visible; }
#onboardingEditorView .flow-module-footer { display:flex; justify-content:flex-end; gap:.65rem; }
#onboardingEditorView .flow-info { position:relative; display:inline-block; font-weight:400; color:var(--ft-text-muted); cursor:help; }
#onboardingEditorView .flow-info-tip { display:none; position:absolute; z-index:2147483640; top:1.6rem; left:-1rem; width:min(21rem,75vw); padding:.85rem; background:rgb(var(--ft-surface-rgb)); border:1px solid rgb(var(--ft-border-rgb)); border-radius:.65rem; box-shadow:0 8px 24px #0002; color:var(--ft-text-primary); font-size:.78rem; line-height:1.6; }
#onboardingEditorView .flow-info:is(:hover,:focus) .flow-info-tip { display:block; }
#onboardingEditorView .flow-module-dialog[data-module="Messages"] .flow-info-tip { top:auto; right:-2rem; bottom:1.6rem; left:auto; }

/* Keep UI Lab searchable options intact after their top-layer panel is reparented here. */
#onboardingEditorView .ft-searchable-select-panel .ft-searchable-select-option {
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    width:100%; min-height:2.5rem; padding:.55rem .7rem; border:0;
    border-radius:var(--ft-radius-sm); background:transparent; box-shadow:none;
    color:var(--ft-text-secondary); font-size:.82rem; font-weight:400;
    line-height:1.35; text-align:left;
}
#onboardingEditorView .ft-searchable-select-panel .ft-searchable-select-option:is(:hover,.is-active) { background:rgb(var(--ft-primary-rgb)/.1); color:var(--ft-text-primary); }
#onboardingEditorView .ft-searchable-select-panel .ft-searchable-select-option.is-selected { background:rgb(var(--ft-primary-rgb)/.14); color:var(--ft-primary); font-weight:700; }
#onboardingEditorView .ft-searchable-select-panel .ft-searchable-select-option.is-selected::after { content:none; }

@media(max-width:1000px) { #onboardingEditorView #onboardingSetupSummary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { #onboardingEditorView #onboardingSetupSummary { grid-template-columns:1fr; } #onboardingEditorView .flow-card > header { min-height:0; } }

/* Roomier modules keep the onboarding sequence in one scrollable row. */
#onboardingEditorView .flow-workspace { min-width:0; }
#onboardingEditorView .onboarding-flow-steps {
    --flow-card-width:clamp(16.5rem,20vw,19rem);
    grid-template-columns:repeat(6,var(--flow-card-width));
    grid-template-rows:auto;
    gap:2rem;
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    padding:.5rem .25rem 1.75rem;
    scroll-snap-type:x proximity;
    scroll-padding-inline:.25rem;
    align-items:start;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
}
#onboardingEditorView .onboarding-flow-steps > .flow-card {
    position:relative;
    width:var(--flow-card-width);
    border-radius:1rem;
    scroll-snap-align:start;
    overflow:visible;
    box-shadow:0 10px 28px rgb(15 23 42/.055);
}
#onboardingEditorView .flow-card:not(:last-child)::after {
    content:'→'; position:absolute; right:-1.5rem; top:9rem;
    color:var(--ft-text-muted); opacity:.55; font-size:1rem;
}
#onboardingEditorView .flow-card > header {
    min-height:0;
    padding:.85rem .85rem .3rem;
    gap:.75rem;
    border-bottom:0;
}
#onboardingEditorView .flow-card > header h3 { font-size:.82rem; line-height:1.4; }
#onboardingEditorView .flow-card > header p { font-size:.82rem; line-height:1.55; margin-top:.4rem; }
#onboardingEditorView .flow-card > header .flow-icon { width:1.9rem; height:1.9rem; border-radius:.45rem; }
#onboardingEditorView .flow-card > header .flow-icon svg { width:1.05rem; height:1.05rem; }
#onboardingEditorView .flow-card > header .flow-switch { transform:none; }
#onboardingEditorView .flow-card-content, #onboardingEditorView .flow-compact-content { padding:1.2rem; }
#onboardingEditorView .flow-card .flow-field { font-size:.85rem; margin-bottom:1rem; }
#onboardingEditorView .flow-card :is(select,button) { font-size:.85rem; padding:.7rem .75rem; }
#onboardingEditorView .flow-card .flow-help, #onboardingEditorView .flow-card .flow-timing,
#onboardingEditorView .flow-compact-description { font-size:.8rem; line-height:1.6; }
#onboardingEditorView .flow-card .flow-inline-actions { gap:.35rem; }
#onboardingEditorView .flow-card .flow-field { padding:.55rem; background:rgb(var(--ft-text-muted-rgb)/.035); border-radius:.4rem; }
#onboardingEditorView .flow-card .flow-compact-content > button { color:var(--ft-secondary); border-color:rgb(var(--ft-secondary-rgb)/.4); }
/* Refined module surfaces: restrained category colors and content previews. */
#onboardingEditorView .flow-card { --flow-category:245 158 11; }
#onboardingEditorView #onboardingFormsCard { --flow-category:108 92 231; }
#onboardingEditorView #onboardingAssignmentsCard { --flow-category:42 161 105; }
#onboardingEditorView #onboardingNutritionCard { --flow-category:14 155 166; }
#onboardingEditorView #onboardingCheckinsCard { --flow-category:87 126 215; }
#onboardingEditorView #onboardingMeasurementsCard { --flow-category:157 100 199; }
#onboardingEditorView .flow-card:not(.is-disabled) .flow-icon { color:rgb(var(--flow-category)); background:rgb(var(--flow-category)/.09); }
#onboardingEditorView .flow-card > header { padding:1.35rem 1.2rem .85rem; gap:1.15rem; min-height:10.75rem; align-content:start; }
#onboardingEditorView .flow-card > header .flow-icon { width:2.75rem; height:2.75rem; border-radius:.8rem; }
#onboardingEditorView .flow-card > header h3 { font-size:1.05rem; font-weight:650; letter-spacing:-.015em; }
#onboardingEditorView .flow-card > header p { color:var(--ft-text-muted); font-weight:400; }
#onboardingEditorView .flow-card:not(:last-child)::after { opacity:.7; }
#onboardingEditorView .flow-content-label { display:block; font-size:.85rem; font-weight:600; margin-bottom:.8rem; }
#onboardingEditorView #onboardingMessagesCard .flow-compact-content { margin:0 1.2rem 1.2rem; padding:1rem; border:1px solid rgb(var(--ft-border-rgb)/.8); border-radius:.4rem; }
#onboardingEditorView #flowCompactMessages { display:block; max-height:11rem; overflow-y:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:.7rem; background:rgb(var(--ft-secondary-rgb)/.14); color:var(--ft-text-primary); border-radius:.8rem .8rem .8rem .2rem; font-size:.85rem; line-height:1.65; }
#onboardingEditorView .flow-card .flow-field { padding:.9rem; border:1px solid rgb(var(--ft-border-rgb)/.4); border-radius:.7rem; }
#onboardingEditorView .flow-card button { min-height:2.65rem; font-weight:600; border-radius:.6rem; }
#onboardingEditorView #onboardingFormsContent .flow-inline-actions { flex-direction:column; align-items:stretch; margin-top:.8rem; }
#onboardingEditorView #onboardingFormEditBtn { color:var(--ft-secondary); border-color:rgb(var(--ft-secondary-rgb)/.4); }
#onboardingEditorView .flow-form-count { display:inline-block; margin:.4rem 0; padding:.2rem .4rem; border-radius:.25rem; font-size:.75rem; font-weight:600; background:rgb(var(--flow-category)/.1); color:rgb(var(--flow-category)); }
#onboardingEditorView .flow-form-count[hidden] { display:none; }
#onboardingEditorView .flow-card button:disabled { opacity:.45; cursor:default; }
#onboardingEditorView .flow-toolbar .flow-draft { margin:0; font-size:.7rem; }
#onboardingEditorView .flow-toolbar .flow-draft[hidden] { display:none; }
#onboardingEditorView .flow-field.is-alternate-choice { opacity:.5; transition:opacity .15s ease; }
#onboardingEditorView .flow-field.is-alternate-choice:hover,
#onboardingEditorView .flow-field.is-alternate-choice:focus-within { opacity:.82; }
/* Onboarding uses the Edit Training phone shell and dimensions. */
#onboardingEditorView #onboardingClientPreview {
    display:flex; flex-direction:column; width:min(36rem,96vw); height:min(56rem,96dvh); max-height:96dvh; padding:1.25rem;
    overflow:hidden; overscroll-behavior:none;
    contain:layout paint; isolation:isolate;
    transform:translateZ(0); -webkit-transform:translateZ(0); backface-visibility:hidden;
    will-change:transform; background:rgb(var(--ft-surface-rgb));
    opacity:1; animation:none; transition:none;
}
#onboardingEditorView #onboardingClientPreview:not([open]) { display:none; }
body:has(#onboardingClientPreview[open]) { overflow:hidden; overscroll-behavior:none; }
#flowSelectedFormCount { white-space: nowrap; }
#onboardingEditorView #onboardingClientPreview .flow-preview-heading > div:first-child { min-width:0; }
#onboardingEditorView #onboardingClientPreview > .flow-preview-heading,
#onboardingEditorView #onboardingClientPreview > .flow-help { flex:0 0 auto; }
#onboardingEditorView #onboardingClientPreview .flow-preview-title-row { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
#onboardingEditorView #onboardingClientPreview .flow-preview-title-row h2 { margin:.2rem 0; }
#onboardingEditorView #onboardingClientPreview .flow-preview-title-row .flow-draft { margin:0; }
#onboardingEditorView #onboardingClientPreview .flow-preview-title-row .flow-draft.is-saved { opacity:.7; }
#onboardingClientPreview #onboardingPreviewContent { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; overflow:hidden; }
#onboardingClientPreview .flow-preview-nav { flex:0 0 auto; }
#onboardingClientPreview .flow-phone-stage { display:flex; flex:1 1 auto; min-height:0; justify-content:center; align-items:center; overflow:hidden; padding:.25rem 0 .5rem; }
#onboardingClientPreview .phone-frame-container { width:auto; height:100%; max-height:652px; aspect-ratio:320 / 652; flex:0 1 auto; }
#onboardingClientPreview .outside-border { width:100%; height:100%; aspect-ratio:auto; contain:paint; isolation:isolate; transform:translateZ(0); -webkit-transform:translateZ(0); backface-visibility:hidden; }
#onboardingClientPreview .inside-border { contain:paint; isolation:isolate; background:rgb(var(--ft-surface-rgb)); }
#onboardingClientPreview .phone-frame-container { transform:none; }
#onboardingClientPreview .status-bar { flex-shrink:0; }
#onboardingClientPreview .status-bar svg { width:14px; height:14px; }
#onboardingPhoneScreen {
    flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; padding:14px 16px 18px;
    overscroll-behavior:contain; scrollbar-width:none;
    -webkit-overflow-scrolling:auto; contain:paint; isolation:isolate;
    transform:none; -webkit-transform:none; backface-visibility:hidden;
    will-change:scroll-position; background:rgb(var(--ft-surface-rgb));
}
#onboardingPhoneScreen::-webkit-scrollbar { display:none; }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-steps > section { border:0; border-radius:0; padding:0; }
#onboardingEditorView #onboardingPhoneScreen .flow-step { font-size:.62rem; margin:.4rem 0 1.2rem; }
#onboardingEditorView #onboardingPhoneScreen h3 { font-size:1.3rem; line-height:1.25; }
#onboardingEditorView #onboardingPhoneScreen p { font-size:.82rem; line-height:1.6; }
#onboardingEditorView #onboardingPhoneScreen .flow-help { font-size:.72rem; }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-message { padding:.85rem; }
#onboardingEditorView #onboardingPhoneScreen .flow-welcome-screen { display:flex; flex-direction:column; gap:.8rem; padding:.25rem 0; }
#onboardingEditorView #onboardingPhoneScreen .flow-welcome-screen :is(.flow-step,h3,.flow-preview-message,.flow-welcome-video,.flow-help) { margin:0; }
#onboardingEditorView #onboardingPhoneScreen .flow-welcome-screen .flow-preview-message { padding:1rem; font-size:.86rem; }
#onboardingEditorView #onboardingPhoneScreen .flow-summary-row { background:rgb(var(--ft-surface-rgb)); border:1px solid rgb(var(--ft-border-rgb)/.7); border-radius:.7rem; padding:.8rem; margin:.65rem 0; }
#onboardingEditorView #onboardingPhoneScreen .flow-summary-row strong { font-size:.85rem; }
#onboardingEditorView #onboardingPhoneScreen .flow-summary-row p { margin:.3rem 0 0; font-size:.76rem; line-height:1.5; }
#onboardingEditorView #onboardingPhoneScreen .flow-welcome-video { border-radius:.65rem; margin-top:1rem; }
#onboardingEditorView #onboardingPhoneScreen .flow-form-intro { display:flex; align-items:flex-start; gap:.75rem; padding-bottom:1rem; border-bottom:1px solid rgb(var(--ft-border-rgb)/.7); }
#onboardingEditorView #onboardingPhoneScreen .flow-form-intro h3 { margin:0 0 .25rem; font-size:1.05rem; }
#onboardingEditorView #onboardingPhoneScreen .flow-form-intro p { margin:0; color:var(--ft-text-muted); font-size:.72rem; line-height:1.45; }
#onboardingEditorView #onboardingPhoneScreen .flow-form-intro > div > span { display:inline-block; margin-top:.5rem; padding:.2rem .4rem; border-radius:.3rem; color:var(--ft-secondary); background:rgb(var(--ft-secondary-rgb)/.09); font-size:.62rem; font-weight:700; }
#onboardingEditorView #onboardingPhoneScreen .flow-form-icon { display:grid; place-items:center; flex:0 0 2rem; width:2rem; height:2rem; border-radius:.55rem; color:var(--ft-secondary); background:rgb(var(--ft-secondary-rgb)/.09); font-size:1rem; }
#onboardingEditorView #onboardingPhoneScreen .flow-form-screen-top { display:flex; align-items:center; justify-content:space-between; color:var(--ft-text-muted); font-size:.67rem; font-weight:650; }
#onboardingEditorView #onboardingPhoneScreen .flow-form-progress { height:.25rem; margin:.5rem 0 1rem; overflow:hidden; border-radius:999px; background:rgb(var(--ft-border-rgb)/.8); }
#onboardingEditorView #onboardingPhoneScreen .flow-form-progress span { display:block; height:100%; border-radius:inherit; background:var(--ft-secondary); }
#onboardingEditorView #onboardingPhoneScreen .flow-form-screen-heading { display:grid; justify-items:center; gap:.4rem; margin-bottom:1rem; text-align:center; }
#onboardingEditorView #onboardingPhoneScreen .flow-form-screen-heading > p { max-width:100%; margin:0; overflow:hidden; color:var(--ft-text-muted); font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }
#onboardingEditorView #onboardingPhoneScreen .flow-form-screen-heading h3 { margin:0; }
#onboardingEditorView #onboardingPhoneScreen .flow-screen-requirement { display:inline-flex; align-items:center; min-height:1.35rem; padding:.18rem .5rem; border-radius:.38rem; font-size:.58rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
#onboardingEditorView #onboardingPhoneScreen .flow-screen-requirement.is-required { color:var(--ft-on-secondary); background:var(--ft-secondary); }
#onboardingEditorView #onboardingPhoneScreen .flow-screen-requirement.is-optional { color:var(--ft-text-primary); border:1px solid rgb(var(--ft-secondary-rgb)/.35); background:rgb(var(--ft-secondary-rgb)/.06); }
#onboardingEditorView #onboardingPhoneScreen .flow-question-groups { display:grid; gap:.85rem; padding-top:.85rem; }
#onboardingEditorView #onboardingPhoneScreen .flow-question-group { display:grid; gap:1.15rem; padding:1rem; border:1px solid rgb(var(--ft-border-rgb)/.75); border-radius:.8rem; background:rgb(var(--ft-surface-rgb)); }
#onboardingEditorView #onboardingPhoneScreen .flow-question-block + .flow-question-block { padding-top:1.15rem; border-top:1px solid rgb(var(--ft-border-rgb)/.6); }
#onboardingEditorView #onboardingPhoneScreen .flow-question-number { display:grid; place-items:center; width:1.35rem; height:1.35rem; margin-bottom:.45rem; border-radius:50%; color:var(--ft-secondary); background:rgb(var(--ft-secondary-rgb)/.1); font-size:.62rem; font-weight:700; }
#onboardingEditorView #onboardingPhoneScreen .flow-question-block h4 { margin:0; color:var(--ft-text-primary); font-size:.88rem; line-height:1.4; }
#onboardingEditorView #onboardingPhoneScreen .flow-required { color:#dc5252; }
#onboardingEditorView #onboardingPhoneScreen :is(textarea,input[type="number"]) { width:100%; margin-top:.7rem; border:1px solid rgb(var(--ft-border-rgb)); border-radius:.65rem; padding:.75rem; background:var(--ft-surface); color:var(--ft-text-primary); }
#onboardingEditorView #onboardingPhoneScreen input[type="range"] { width:100%; margin:1rem 0 .5rem; accent-color:var(--ft-secondary); }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-slider > div { display:flex; justify-content:space-between; color:var(--ft-text-muted); font-size:.68rem; }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-top:.7rem; }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-options.has-odd-count > label:last-child { grid-column:1 / -1; }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-options label { display:flex; align-items:center; justify-content:flex-start; gap:.55rem; min-height:2.5rem; padding:.55rem .65rem; border:1px solid rgb(var(--ft-border-rgb)); border-radius:.65rem; background:rgb(var(--ft-surface-rgb)); font-size:.72rem; line-height:1.35; cursor:pointer; }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-options label:hover { border-color:rgb(var(--ft-secondary-rgb)/.55); background:rgb(var(--ft-secondary-rgb)/.05); }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-options label:has(input:checked) { border-color:rgb(var(--ft-secondary-rgb)/.6); background:rgb(var(--ft-secondary-rgb)/.08); }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-options input:is([type="radio"],[type="checkbox"]) { appearance:none; display:grid; place-items:center; flex:0 0 auto; width:1rem; height:1rem; margin:0; border:1.5px solid var(--ft-text-muted); border-radius:50%; background:transparent; }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-options input:is([type="radio"],[type="checkbox"])::after { content:''; width:.5rem; height:.5rem; border-radius:50%; background:var(--ft-secondary); transform:scale(0); transition:transform .12s ease; }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-options input:is([type="radio"],[type="checkbox"]):checked { border-color:var(--ft-secondary); }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-options input:is([type="radio"],[type="checkbox"]):checked::after { transform:scale(1); }
#onboardingEditorView #onboardingPhoneScreen .flow-preview-options input:is([type="radio"],[type="checkbox"]):focus-visible { outline:none; border-radius:50%; box-shadow:0 0 0 3px rgb(var(--ft-secondary-rgb)/.2); }
#onboardingEditorView .flow-phone-controls { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem 1rem 1.05rem; background:rgb(var(--ft-surface-rgb)); }
#onboardingEditorView .flow-phone-controls button { min-width:5rem; padding:.5rem .6rem; border-radius:.65rem; border:1px solid rgb(var(--ft-border-rgb)); background:rgb(var(--ft-surface-strong-rgb,var(--ft-surface-rgb))); color:var(--ft-text-primary); font-size:.69rem; font-weight:750; }
#onboardingEditorView .flow-phone-controls button:last-child { border-color:var(--ft-secondary); background:var(--ft-secondary); color:var(--ft-on-secondary); }
#onboardingEditorView .flow-phone-controls span { font-size:.75rem; color:var(--ft-text-muted); }
#onboardingEditorView .flow-phone-controls button:disabled { opacity:.35; cursor:default; }
#onboardingEditorView #onboardingClientPreview .flow-preview-nav { justify-content:center; }
#onboardingEditorView #onboardingClientPreview .flow-preview-nav button { font-size:.75rem; padding:.5rem .65rem; }

/* Keep larger card controls and their enhanced dropdowns consistent. */
#onboardingEditorView .flow-card .ft-searchable-select { min-width:0; width:100% !important; }
#onboardingEditorView .flow-card .ft-searchable-select-trigger { width:100%; min-height:2.75rem; font-size:.85rem; text-align:left; }
#onboardingEditorView .flow-card > header .flow-icon svg { width:1.35rem; height:1.35rem; }
#onboardingEditorView .flow-card.is-disabled .flow-compact-content { opacity:.5; }
@media(max-width:600px) {
    #onboardingEditorView .onboarding-flow-steps { --flow-card-width:min(18rem,calc(100vw - 3.5rem)); gap:1.5rem; }
    #onboardingEditorView .flow-card:not(:last-child)::after { right:-1.15rem; }
}