/* Welcome (js/welcome.js): the new-workspace setup. Its page is styled in css/da-onboarding.css.
 * Here: the app chrome steps aside while it is on screen (no sidebar, no top bar; the chrome arrives when they leave it),
 * and the personal sample's dialog. */
html body[data-route="welcome"] .shell { grid-template-columns: minmax(0, 1fr); }
:root[data-sidebar] body.app[data-route="welcome"] .shell { grid-template-columns: minmax(0, 1fr); }
body[data-route="welcome"] #sidebar,
body[data-route="welcome"] #topbar,
body[data-route="welcome"] .atmos-slot,
body[data-route="welcome"] .atmos-halftone { display: none; }
/* Ask Volare's round button would sit on the action and the strip; the welcome has Skip for now */
body[data-route="welcome"] .ask-fab { display: none; }
:root[data-look] body.app[data-route="welcome"] .main { padding-top: 0; padding-bottom: 0; padding-left: var(--rs-gap); padding-right: var(--rs-gap); }   /* rs-fix: the page gutter (16px) on .main, like every other page */

/* the personal sample's dialog (rs-wire:onboarding: the mockup's .dlg) */
.welcome-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--rs-inset); }
.welcome-media video, .welcome-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal.welcome-modal-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rs-pad); width: min(680px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); overflow-y: auto; padding: var(--rs-pad); border: 0; border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); font-family: var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
.welcome-modal-box .card-title { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; letter-spacing: 0; }
.welcome-modal-box .welcome-modal-media { width: 100%; min-width: 0; margin: 0; box-shadow: 0 0 0 1px var(--rs-line); }
.welcome-modal-box .welcome-sub { margin: 0; font-size: var(--rs-fs-body); color: var(--rs-tx-2); line-height: 1.5; }
.welcome-modal-box .welcome-sub:empty { display: none; }
.welcome-modal-box .welcome-modal-actions { margin: 0; display: flex; justify-content: flex-end; gap: var(--rs-s8); padding-top: var(--rs-pad); border-top: 1px solid var(--rs-line); }
/* rs-fix: the mockup keeps the two answers side by side, right-aligned, on phones too */
@media (max-width: 760px) { body .modal.welcome-modal-box .welcome-modal-actions { flex-direction: row; justify-content: flex-end; } body .modal.welcome-modal-box .welcome-modal-actions > .rs-btn { width: auto; flex: none; } }