/* Readable type without magnifying or transforming the application. */
body[data-flow-screen] {
  --flow-header-height: 78px;
  --readable-toolbar-height: 48px;
  font-size: 18px;
  line-height: 1.45;
}
body[data-flow-screen] .app-header { max-width: 1040px; }
body[data-flow-screen] .brand { gap: 10px; }
body[data-flow-screen] .brand > svg { width: 36px; height: 36px; }
body[data-flow-screen] .brand > span { font-size: 36px; line-height: 1; }
body[data-flow-screen] .brand small { margin-top: 7px; font-size: 14px; letter-spacing: .6px; }
body[data-flow-screen] .live-presence { min-height: 52px; gap: 10px; padding: 7px 13px 7px 7px; }
body[data-flow-screen] .live-avatar { width: 38px; height: 38px; }
body[data-flow-screen] .live-copy strong { font-size: 16px; line-height: 1.35; }
body[data-flow-screen] .live-copy strong > span { margin-left: 5px; }
body[data-flow-screen] .live-copy small { font-size: 14px; line-height: 1.3; }
body[data-flow-screen] .live-arrow { font-size: 19px; }
body[data-flow-screen] .experience { max-width: 780px; }
body[data-flow-screen] .reading-workspace { overflow: visible; }
body[data-flow-screen] .flow-toolbar { flex-basis: var(--readable-toolbar-height); }
body[data-flow-screen] #flow-progress.journey-steps { gap: 20px; font-size: 16px; line-height: 1.3; }
body[data-flow-screen] #flow-progress > span { gap: 7px; opacity: .8; }
body[data-flow-screen] #flow-progress > span b { width: 30px; height: 30px; font-size: 14px; }
body[data-flow-screen] #flow-back { display: flex; align-items: center; min-height: 44px; padding: 6px 0; font-size: 16px; }
body[data-flow-screen="question"] #flow-progress { gap: 18px; margin-left: 96px; }
body[data-flow-screen] .vsl-heading h2 { font-size: 38px; line-height: 1.1; }
body[data-flow-screen] #vsl-section:not([hidden]) { gap: 10px; padding-top: 6px; }
body[data-flow-screen] .vsl-frame { max-width: min(100%, 430px); }
body[data-flow-screen] .vsl-caption { font-size: 16px; line-height: 1.35; }
body[data-flow-screen] .vsl-sound { width: min(92%, 350px); min-height: 88px; gap: 13px; padding: 15px; }
body[data-flow-screen] .vsl-sound .sound-icon { flex-basis: 44px; width: 44px; height: 44px; }
body[data-flow-screen] .vsl-sound .sound-label strong { font-size: 20px; line-height: 1.25; }
body[data-flow-screen] .vsl-sound .sound-label small { font-size: 14px; line-height: 1.35; margin-top: 6px; }
body[data-flow-screen] .vsl-fallback-play { min-height: 48px; font-size: 18px; }
body[data-flow-screen] .step-heading { min-height: 42px; margin-bottom: 8px; gap: 10px; }
body[data-flow-screen] .step-heading h2 { font-size: 40px; line-height: 1.1; }
body[data-flow-screen] .step-number { display: none; }
/* The active stage itself supplies the available height to its circle parent. */
body[data-flow-screen] #cards-step:not([hidden]) {
  container-type: size;
  justify-content: center;
  padding: 2px 0 6px;
  overflow: visible;
}
body[data-flow-screen][data-deck-layout="circle"] .card-table { gap: 6px; }
body[data-flow-screen][data-deck-layout="circle"] .selection-zone { padding: 7px 0 3px; }
body[data-flow-screen][data-deck-layout="circle"] .selection-slot { width: 43px; height: 65px; }
body[data-flow-screen][data-deck-layout="circle"] .deck-zone {
  width: min(100%, 520px, calc(100cqh - 238px));
  min-width: 0;
}
body[data-flow-screen] .chosen-number,
body[data-flow-screen] .slot-number { font-size: 14px; }
body[data-flow-screen] .chosen-number { min-width: 24px; height: 24px; }
body[data-flow-screen] .deck-layout-note { max-width: 650px; margin: 8px auto 2px; font-size: 16px; line-height: 1.35; }
body[data-flow-screen] .deck-controls { gap: 10px; margin: 0; }
body[data-flow-screen] .deck-controls > button { min-height: 44px; padding: 8px 0; font-size: 16px; line-height: 1.25; }
body[data-flow-screen] .deck-controls > button svg { width: 18px; height: 18px; }
body[data-flow-screen] .deck-controls > span { font: 16px/1.3 var(--sans); text-align: center; }
body[data-flow-screen][data-deck-layout="circle"] #deck .circle-core-count { font-size: 34px; }
body[data-flow-screen][data-deck-layout="circle"] #deck.has-preview .circle-core-count { font-size: 14px; }
body[data-flow-screen][data-deck-layout="circle"] #deck .circle-core-hint { font-size: 16px; line-height: 1.3; }
body[data-flow-screen][data-deck-layout="circle"] #deck.has-preview .circle-core-hint { display: none; }
body[data-flow-screen][data-deck-layout="circle"] #deck .circle-confirm { min-height: 44px; padding: 8px 10px; font-size: 16px; line-height: 1.25; }
body[data-flow-screen] #question-step:not([hidden]) { gap: 12px; padding: 8px 0 12px; }
body[data-flow-screen] #question-step .question-top label { font-size: 26px; line-height: 1.25; }
body[data-flow-screen] #question-step .question-top > svg { width: 24px; height: 24px; }
body[data-flow-screen] #question-step .question-block { padding: 18px 20px 14px; flex: 0 1 auto; }
body[data-flow-screen] #question-step #question { height: clamp(96px, 18dvh, 170px); max-height: 26dvh; padding-top: 14px; font-size: 20px; line-height: 1.45; }
body[data-flow-screen] #question-step #question::placeholder { font-size: 20px; color: #c3cede; }
body[data-flow-screen] #question-step .question-bottom { font-size: 14px; gap: 14px; line-height: 1.35; }
body[data-flow-screen] #question-step .question-bottom > span:first-child { max-width: none; }
body[data-flow-screen] #question-step .question-examples { gap: 8px; }
body[data-flow-screen] #question-step .question-examples > button { min-height: 44px; font-size: 16px; padding: 9px 13px; white-space: normal; }
body[data-flow-screen] #question-step .question-examples > button > span { font-size: 16px; }
body[data-flow-screen] #question-step .question-next { font-size: 16px; line-height: 1.35; max-width: 650px; }
body[data-flow-screen] .question-error { font-size: 16px; line-height: 1.35; }
body[data-flow-screen] #question-selection { min-height: 57px; margin-bottom: 0; gap: 16px; }
body[data-flow-screen] #question-selection img { width: 31px; height: 47px; }
body[data-flow-screen] #question-selection .question-summary-card > span { min-width: 22px; height: 22px; font-size: 14px; }
body[data-flow-screen] .reveal-area,
body[data-flow-screen].keyboard-open .reveal-area { max-width: 780px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); }
body[data-flow-screen] .action-hint { min-height: 0; margin-bottom: 8px; font-size: 18px; line-height: 1.3; }
body[data-flow-screen] .telegram-cta,
body[data-flow-screen].keyboard-open .telegram-cta { min-height: 60px; padding: 14px 18px; font-size: 22px; line-height: 1.25; gap: 12px; }
body[data-flow-screen] .channel-icon,
body[data-flow-screen] .cta-arrow { width: 24px; height: 24px; }
body[data-flow-screen] .reading-details { display: none; }
body[data-flow-screen] #copy-question { min-height: 44px; padding: 9px 0 1px; font-size: 16px; line-height: 1.3; }
@media (max-width: 850px) {
  body[data-flow-screen] { --flow-header-height: 72px; }
  body[data-flow-screen] .brand > span { font-size: 30px; }
  body[data-flow-screen] .brand > svg { width: 30px; height: 30px; }
  body[data-flow-screen] .brand small { display: none; }
  body[data-flow-screen] .live-presence { gap: 8px; min-height: 52px; padding: 6px 10px 6px 6px; }
  body[data-flow-screen] .live-copy strong { font-size: 14px; }
  body[data-flow-screen] .live-copy strong > span { display: block; margin-left: 0; font-size: 14px; }
  body[data-flow-screen] .live-copy small { display: none; }
  body[data-flow-screen] .live-avatar { width: 34px; height: 34px; }
  body[data-flow-screen] .live-arrow { display: none; }
  body[data-flow-screen] .vsl-heading h2 { font-size: 30px; }
  body[data-flow-screen] .step-heading { min-height: 32px; margin-bottom: 5px; }
  body[data-flow-screen] .step-heading h2 { font-size: 32px; }
  body[data-flow-screen] .action-hint { font-size: 16px; }
  body[data-flow-screen] .telegram-cta,
  body[data-flow-screen].keyboard-open .telegram-cta { font-size: 20px; min-height: 56px; padding-block: 13px; }
  body[data-flow-screen] #question-step .question-top label { font-size: 22px; }
  body[data-flow-screen] .vsl-sound .sound-label strong { font-size: 18px; }
}
@media (max-width: 650px), (max-height: 700px) {
  body[data-flow-screen] { --readable-toolbar-height: 44px; }
  body[data-flow-screen] #flow-progress.journey-steps { gap: 14px; }
  body[data-flow-screen] #flow-progress > span { font-size: 0; }
  body[data-flow-screen="video"] #flow-progress [data-flow-step="video"],
  body[data-flow-screen="cards"] #flow-progress [data-flow-step="cards"],
  body[data-flow-screen="question"] #flow-progress [data-flow-step="question"] { font-size: 16px; }
  body[data-flow-screen] #flow-progress > span b { flex: 0 0 28px; width: 28px; height: 28px; font-size: 14px; }
  body[data-flow-screen="question"] #flow-progress { gap: 10px; margin-left: 92px; }
  body[data-flow-screen] #flow-back { font-size: 16px; }
  body[data-flow-screen] #cards-step .deck-layout-note { display: none; }
  body[data-flow-screen][data-deck-layout="circle"] .deck-zone { width: min(100%, 520px, calc(100cqh - 170px)); }
  body[data-flow-screen] #question-step .question-next { display: none; }
  body[data-flow-screen] .vsl-caption { display: none; }
}
@media (max-width: 650px) {
  body[data-flow-screen] .step-heading h2 { font-size: 28px; }
  body[data-flow-screen] .vsl-heading h2 { font-size: 28px; }
  body[data-flow-screen] .vsl-sound { gap: 10px; padding: 12px; }
  body[data-flow-screen] .vsl-sound .sound-label small { font-size: 14px; }
  body[data-flow-screen] .question-bottom > span:first-child { display: none; }
  body[data-flow-screen] #question-step .question-bottom { justify-content: flex-end; }
  body[data-flow-screen] #question-step .question-examples > button { font-size: 16px; }
  body[data-flow-screen] #question-step .question-examples > button:nth-child(n+3) { display: none; }
  body[data-flow-screen] #cards-step .deck-controls > span { display: none; }
  body[data-flow-screen][data-deck-layout="circle"] #deck .circle-core-count { font-size: 30px; }
  body[data-flow-screen][data-deck-layout="circle"] #deck .circle-core-hint { font-size: 16px; }
}
@media (max-height: 650px) {
  body[data-flow-screen] { --flow-header-height: 64px; }
  body[data-flow-screen] .flow-toolbar { flex-basis: 40px; }
  body[data-flow-screen] #cards-step .step-heading { display: none; }
  body[data-flow-screen] #cards-step { padding-top: 0; padding-bottom: 2px; }
  body[data-flow-screen][data-deck-layout="circle"] .selection-slot { width: 35px; height: 53px; }
  body[data-flow-screen][data-deck-layout="circle"] .selection-zone { padding: 5px 0 2px; }
  body[data-flow-screen][data-deck-layout="circle"] .card-table { gap: 4px; }
  body[data-flow-screen][data-deck-layout="circle"] .deck-zone { width: min(100%, 520px, calc(100cqh - 112px)); }
  body[data-flow-screen] .vsl-heading h2 { font-size: 28px; }
  body[data-flow-screen] #question-step .step-heading,
  body[data-flow-screen] #question-selection,
  body[data-flow-screen] #question-step .question-examples { display: none; }
  body[data-flow-screen] #question-step:not([hidden]) { justify-content: center; padding: 5px 0 9px; }
  body[data-flow-screen] #question-step .question-block { padding: 14px 16px 11px; }
  body[data-flow-screen] #question-step #question { height: 100px; max-height: 24dvh; }
  body[data-flow-screen] .action-hint { font-size: 16px; }
  body[data-flow-screen] .vsl-sound .sound-label small { display: none; }
}
body[data-flow-screen].keyboard-open .flow-toolbar { flex-basis: 40px; }
body[data-flow-screen].keyboard-open #question-step .question-top label { font-size: 20px; }
body[data-flow-screen].keyboard-open #question-step #question { font-size: 20px; height: clamp(48px, calc(var(--flow-viewport-height, 100dvh) - 250px), 130px); }
body[data-flow-screen].keyboard-open #question-step .question-bottom,
body[data-flow-screen].keyboard-open .action-hint { display: none; }
@media (max-height: 430px) {
  /* Retain readable controls when a very short landscape viewport needs to scroll. */
  html { overflow-y: auto; }
  body[data-flow-screen] { height: auto; max-height: none; min-height: var(--flow-viewport-height, 100dvh); overflow: visible; }
  body[data-flow-screen] .experience { flex: 0 0 auto; min-height: calc(100dvh - 110px); overflow: visible; }
  body[data-flow-screen] .reading-workspace { min-height: 350px; overflow: visible; }
  body[data-flow-screen] #cards-step { min-height: 430px; }
  body[data-flow-screen] #question-step { min-height: 270px; }
  body[data-flow-screen] #vsl-section { min-height: 300px; }
}

/* Keep these controls readable over legacy ID selectors. */
body[data-flow-screen] #clear-selection { font-size: 16px; }
body[data-flow-screen] #clear-selection > span { font-size: inherit; }

/* A short screen leaves a smaller ring: keep its confirmation inside the centre. */
body[data-flow-screen][data-deck-layout="circle"] #deck { container-name: readable-deck; }
@container readable-deck (max-width: 310px) {
  body[data-flow-screen][data-deck-layout="circle"] #deck .circle-core::before { display: none; }
  body[data-flow-screen][data-deck-layout="circle"] #deck.has-preview .circle-preview { display: none; }
  body[data-flow-screen][data-deck-layout="circle"] #deck .circle-confirm { padding: 4px; line-height: 1.15; }
}