/* Rahmah identity, Phase 3 (area B): setup and flow screens, journal, help screens, modals. * Presentation only. Source of truth: bym/styles/rahmah.css and docs/bym/rahmah (handoff v1.0). * Corners: 4px controls, 8px media, square elsewhere. * * SCOPE (one list, repeated in each :is(...)): * screens: #screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview * overlays: #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast * TO REVERT: delete the one in index.html's . * Fonts: "BYM Afacad" is declared in rahmah-landing.css. Tokens: --bym-* from bym/styles/rahmah.css. */ /* ---- 1. Tokens ---- */ :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) { --font-display: "BYM Afacad", "Afacad Flux", "Avenir Next", Arial, sans-serif; --font-body: var(--font-display); --font-ui: var(--font-display); --font-mono: var(--font-display); --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-pill: 0px; --line: var(--bym-rule); --line-soft: var(--bym-rule); --line-faint: var(--bym-rule); --text: var(--bym-text); --text-body: var(--bym-text); --muted: var(--bym-text-muted); --muted-2: var(--bym-text-muted); --faint: var(--bym-text-muted); --surface: var(--bym-surface); --surface-2: var(--bym-surface); --accent: var(--bym-primary); --accent-2: var(--bym-primary); --accent-glow: var(--bym-rule); font-family: var(--font-display); color: var(--bym-text); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) { font-size: var(--bym-text-base); line-height: 1.55; } /* ---- 2. No shadows, glows or gradients; square except controls ---- */ :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) *, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) *::before, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) *::after { border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn-gold, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn-outline, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .fw-close, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .end-conn-confirm, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .section-reward-prompt, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .jrep-form-section, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .session-card { background-image: none !important; } /* ---- 3. Controls ---- */ :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .fw-close, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .fw-back, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .end-conn-cancel, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .end-conn-confirm, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .voice-mic-btn { border-radius: var(--bym-radius-control) !important; min-height: var(--bym-target-min); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 600; font-size: var(--bym-text-sm); letter-spacing: 0; text-transform: none; transform: none; transition: background-color var(--bym-fast) var(--bym-ease), color var(--bym-fast) var(--bym-ease), border-color var(--bym-fast) var(--bym-ease); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn-gold, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .fw-close { background-color: var(--bym-primary); color: var(--bym-on-primary); border: 1px solid var(--bym-primary); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn:hover:not(:disabled), :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn-gold:hover:not(:disabled), :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .fw-close:hover { background-color: #2f1f2e; color: var(--bym-on-primary); transform: none; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn-outline, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .fw-back, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .end-conn-cancel { background-color: transparent; color: var(--bym-primary); border: 1px solid var(--bym-primary); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn-outline:hover:not(:disabled), :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .fw-back:hover, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .end-conn-cancel:hover { background-color: var(--bym-surface-soft); color: var(--bym-primary); border-color: var(--bym-primary); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .btn:disabled { opacity: 1; background-color: var(--bym-rule); border-color: var(--bym-rule); color: var(--bym-text-muted); cursor: not-allowed; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--bym-focus); outline-offset: 2px; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .input, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .end-conn-reason { border: 1px solid var(--bym-border); border-radius: var(--bym-radius-control) !important; background: var(--bym-surface); min-height: var(--bym-control-height); font-size: var(--bym-text-base); color: var(--bym-text); font-family: var(--font-ui); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) textarea.input, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .end-conn-reason { min-height: 96px; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .input:focus { border-color: var(--bym-focus); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .input::placeholder { color: var(--bym-text-muted); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .form-group label, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) label { font-size: var(--bym-text-xs); font-weight: 600; color: var(--bym-text); font-family: var(--font-ui); } /* Male / Female pickers: JS sets inline blue and purple fills and old gold text; Fig for the selected one */ :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .role-btn { color: var(--bym-primary) !important; border-color: var(--bym-primary) !important; background-color: transparent !important; font-size: var(--bym-text-sm) !important; min-height: var(--bym-target-min); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .role-btn[style*="74, 122, 158"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .role-btn[style*="138, 106, 158"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .role-btn[style*="#4a7a9e"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .role-btn[style*="#8a6a9e"] { background-color: var(--bym-primary) !important; color: var(--bym-on-primary) !important; } /* ---- 4. Links and small text ---- */ :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) a:not(.btn) { color: var(--bym-primary) !important; text-decoration: underline; text-underline-offset: 2px; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) [style*="font-size:11"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) [style*="font-size:12"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) [style*="font-size:13"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) [style*="font-size: 11"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) [style*="font-size: 12"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) [style*="font-size: 13"] { font-size: var(--bym-text-xs) !important; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) [style*="color:#B88355"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) [style*="color: #B88355"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) [style*="color:#b88355"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) [style*="color:#C8A96E"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) [style*="color:#c8a96e"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) [style*="color:#7A6678"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) [style*="color:#665464"], :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) [style*="color:#8a6020"] { color: var(--bym-text-muted) !important; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .leave-link, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) button.leave-link { display: inline-flex; align-items: center; min-height: var(--bym-target-min); color: var(--bym-primary); text-decoration: underline; font-size: var(--bym-text-sm); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .error-text { color: var(--bym-error); font-size: var(--bym-text-xs); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .status-text { color: var(--bym-text-muted); font-size: var(--bym-text-xs); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) .status-text.joined { color: var(--bym-success); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) h1, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) h2, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) h3, :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) h4 { color: var(--bym-primary); font-weight: 600; letter-spacing: -0.02em; } /* ---- 5. Cards and structure ---- */ :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .session-card { background: var(--bym-surface); border: 1px solid var(--bym-rule); margin: 32px auto; padding: 32px; max-width: 460px; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .session-card h2 { font-size: var(--bym-text-xl); line-height: 1.1; margin-bottom: 20px; } @media (max-width: 480px) { :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .session-card { margin: 16px auto; padding: 24px 16px; } } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .fw-eyebrow { font-family: var(--font-ui); font-size: var(--bym-text-xs); letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--bym-text-muted); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .code-display { font-family: var(--font-display); background: var(--bym-surface); border: 1px solid var(--bym-primary); color: var(--bym-primary); letter-spacing: 4px; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .dash-path-grid { gap: 12px; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .dash-path-card { background: var(--bym-surface); border: 1px solid var(--bym-rule); color: var(--bym-text); min-height: var(--bym-target-min); transform: none !important; } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .dash-path-card:hover { border-color: var(--bym-primary); background: var(--bym-surface-soft); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .dash-path-arrow { color: var(--bym-primary); } :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview) .dash-path-num { background: var(--bym-primary); color: var(--bym-on-primary); border-radius: 4px !important; } /* ---- 6. Top bar of the help, journal and profile screens: the same Fig bar as the questionnaire ---- */ :is(#screen-how-to, #screen-situation-guidance, #screen-journal, #screen-profile, #screen-my-preview) .topbar { background: var(--bym-primary); border-bottom: 0; padding: 8px 16px; min-height: 56px; } :is(#screen-how-to, #screen-situation-guidance, #screen-journal, #screen-profile, #screen-my-preview) .topbar-title { color: var(--bym-on-primary); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; } :is(#screen-how-to, #screen-situation-guidance, #screen-journal, #screen-profile, #screen-my-preview) .topbar-right { gap: 8px; } :is(#screen-how-to, #screen-situation-guidance, #screen-journal, #screen-profile, #screen-my-preview) .topnav-link, :is(#screen-how-to, #screen-situation-guidance, #screen-journal, #screen-profile, #screen-my-preview) .dashboard-nav-link, :is(#screen-how-to, #screen-situation-guidance, #screen-journal, #screen-profile, #screen-my-preview) .topbar-right .leave-link { color: var(--bym-on-primary) !important; font-size: var(--bym-text-xs); min-height: var(--bym-target-min); display: inline-flex; align-items: center; padding: 0 8px; text-decoration: none; } :is(#screen-how-to, #screen-situation-guidance, #screen-journal, #screen-profile, #screen-my-preview) .topbar .btn, :is(#screen-how-to, #screen-situation-guidance, #screen-journal, #screen-profile, #screen-my-preview) .topbar .btn-outline { min-height: 44px; padding: 0 14px; background: transparent; color: var(--bym-on-primary); border: 1px solid rgba(251,245,237,.55); font-weight: 500; font-size: var(--bym-text-xs); } :is(#screen-how-to, #screen-situation-guidance) .page-header h1, :is(#screen-how-to, #screen-situation-guidance) .page-header h2 { font-size: var(--bym-text-xl); color: var(--bym-primary); } :is(#screen-how-to, #screen-situation-guidance) .subtitle { color: var(--bym-text-muted); font-size: var(--bym-text-sm); } #screen-how-to .essentials-breakdown { background: var(--bym-surface); border: 1px solid var(--bym-rule); } #screen-how-to .tag-help-label { font-family: var(--font-ui); letter-spacing: 0; text-transform: none; font-size: var(--bym-text-xs); font-weight: 600; } #screen-how-to .tag-help-label.red { color: var(--bym-error); } #screen-how-to .tag-help-label.amber { color: #7a5530; } #screen-how-to .tag-help-label.cherry { color: #8c4a47; } #screen-how-to .tag-help-label.essential { color: var(--bym-primary); } #screen-how-to .tag-help-text { font-size: var(--bym-text-sm); line-height: 1.5; color: var(--bym-text); } /* ---- 7. Journal ---- */ #screen-journal .jrep-form-section { background: var(--bym-surface); border: 1px solid var(--bym-rule); } #screen-journal .jrep-section-badge { background: var(--bym-primary); color: var(--bym-on-primary); border-radius: 4px !important; } #screen-journal .jrep-hint { color: var(--bym-text-muted); font-size: var(--bym-text-xs); } #screen-journal .jrep-add-block { color: var(--bym-primary) !important; font-size: var(--bym-text-sm); min-height: var(--bym-target-min); display: inline-flex; align-items: center; } #screen-journal .jrep-flag-label-red { color: var(--bym-error); } #screen-journal .jrep-flag-label-amber { color: #7a5530; } #screen-journal .jrep-flag-label-green { color: var(--bym-success); } #screen-journal .voice-mic-btn { background: var(--bym-surface); border: 1px solid var(--bym-primary); color: var(--bym-primary); min-width: var(--bym-target-min); } #screen-journal .voice-prompt { color: var(--bym-text-muted) !important; font-size: var(--bym-text-xs); } #screen-journal #ready-to-meet-launch { background: var(--bym-surface-soft) !important; border: 1px solid var(--bym-rule) !important; } #screen-journal #ready-to-meet-form { background: var(--bym-surface) !important; border: 1px solid var(--bym-rule) !important; } /* ---- 8. Modals and overlays ---- */ #flags-walkthrough-backdrop, #end-conn-backdrop { background: rgba(48,34,46,.6); } .flags-walkthrough-modal, .end-conn-modal { background: var(--bym-surface); border: 1px solid var(--bym-rule); padding: 32px 24px 24px; font-family: "BYM Afacad", "Afacad Flux", "Avenir Next", Arial, sans-serif; } @media (min-width: 600px) { .flags-walkthrough-modal, .end-conn-modal { padding: 32px 32px 28px; } } :is(#flags-walkthrough-backdrop, #end-conn-backdrop) .fw-title, :is(#flags-walkthrough-backdrop, #end-conn-backdrop) .end-conn-title { color: var(--bym-primary); font-size: var(--bym-text-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; } :is(#flags-walkthrough-backdrop, #end-conn-backdrop) .fw-sub, :is(#flags-walkthrough-backdrop, #end-conn-backdrop) .end-conn-body, :is(#flags-walkthrough-backdrop, #end-conn-backdrop) .end-conn-reason-label, :is(#flags-walkthrough-backdrop, #end-conn-backdrop) .end-conn-status { font-size: var(--bym-text-sm); color: var(--bym-text); line-height: 1.55; } #flags-walkthrough-backdrop .fw-skip { font-size: var(--bym-text-sm); color: var(--bym-primary); text-decoration: underline; min-height: var(--bym-target-min); display: inline-flex; align-items: center; } #flags-walkthrough-backdrop .fw-dot { width: 24px; height: 4px; background: var(--bym-rule); transform: none; } #flags-walkthrough-backdrop .fw-dot.active { background: var(--bym-primary); transform: none; } #flags-walkthrough-backdrop .fw-essential-block { background: none; border-top: 1px solid var(--bym-rule); } #flags-walkthrough-backdrop .fw-essential-flag { background: var(--bym-primary); color: var(--bym-on-primary); border-radius: 4px !important; font-family: var(--font-ui); letter-spacing: 0; text-transform: none; font-size: var(--bym-text-xs); } #flags-walkthrough-backdrop .fw-essential-distinction { background: var(--bym-surface-soft); border-left: 3px solid var(--bym-primary); color: var(--bym-text); font-size: var(--bym-text-xs); } #flags-walkthrough-backdrop .fw-example-card { background: var(--bym-surface); border: 1px solid var(--bym-rule); } #flags-walkthrough-backdrop .fw-example-opt { font-size: var(--bym-text-xs); color: var(--bym-text); } #flags-walkthrough-backdrop .fw-example-opt-flagged { background: var(--bym-error-surface); color: var(--bym-error); } #end-conn-backdrop .end-conn-reason-chip { border-radius: 4px !important; min-height: var(--bym-target-min); font-size: var(--bym-text-xs); color: var(--bym-text); border: 1px solid var(--bym-border); background: var(--bym-surface); } #end-conn-backdrop .end-conn-reason-chip.selected { background: var(--bym-primary); border-color: var(--bym-primary); color: var(--bym-on-primary); } #end-conn-backdrop .end-conn-confirm { background-color: var(--bym-error); border: 1px solid var(--bym-error); color: #fff; } #end-conn-backdrop .end-conn-confirm:hover { background-color: #7e2a31; } /* delete-account overlay is built in JS with inline styles */ #delete-account-overlay { background: rgba(48,34,46,.6) !important; } #delete-account-overlay > div { background: var(--bym-surface) !important; border: 1px solid var(--bym-error) !important; border-radius: 0 !important; box-shadow: none !important; } #delete-account-overlay h3 { color: var(--bym-error) !important; font-size: var(--bym-text-lg); } #delete-account-overlay p, #delete-account-overlay label { color: var(--bym-text) !important; font-size: var(--bym-text-sm) !important; } #delete-account-overlay button[style*="a84040"], #delete-account-overlay button[style*="168, 64, 64"] { background: var(--bym-error) !important; border-color: var(--bym-error) !important; color: #fff !important; } #delete-account-overlay #del-acct-status, #delete-account-overlay [style*="color:#a84040"] { color: var(--bym-error) !important; } /* chapter complete toast */ #chapter-complete-toast { background: var(--bym-primary); color: var(--bym-on-primary); border-radius: 4px !important; font-family: var(--font-ui); font-size: var(--bym-text-sm); } #chapter-complete-toast .cct-check { color: var(--bym-on-primary); } /* ---- 9. Floating Dashboard button and Report an issue pill while one of these screens is showing ---- */ body:has(:is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview).active) #floating-dashboard-btn { background: var(--bym-canvas); color: var(--bym-primary); border: 1px solid var(--bym-primary); border-radius: var(--bym-radius-control) !important; box-shadow: none !important; min-height: var(--bym-target-min); font-family: "BYM Afacad", "Afacad Flux", "Avenir Next", Arial, sans-serif; font-size: var(--bym-text-sm); font-weight: 600; padding: 0 16px; } body:has(:is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview).active) .bym-ri-btn { border-radius: var(--bym-radius-control) !important; box-shadow: none !important; min-height: var(--bym-target-min); padding: 0 16px; font-size: var(--bym-text-sm); background: var(--bym-canvas); color: var(--bym-primary); border: 1px solid var(--bym-primary); } @media (max-width: 760px) { body:has(:is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview).active) .bym-ri-btn { position: static; display: block; margin: 24px auto 32px; z-index: auto; } } body:has(:is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview).active) .bym-ri-btn:hover { background: var(--bym-surface-soft); color: var(--bym-primary); } body:has(:is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview).active) .bym-ri-box { border-radius: var(--bym-radius-control) !important; box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { :is(#screen-account-onboarding, #screen-account-loading, #screen-create, #screen-join, #screen-link-session, #screen-force-link, #screen-guided-start, #screen-practice-question, #screen-guided-code, #screen-guided-other-ways, #screen-how-to, #screen-situation-guidance, #screen-journal, #screen-pairing, #screen-profile, #screen-my-preview, #flags-walkthrough-backdrop, #end-conn-backdrop, #delete-account-overlay, #chapter-complete-toast) * { transition: none !important; animation: none !important; } }