/* Layout collapse rules. These ship to consumers: add the class, get the
   behaviour. They use !important because the components style inline.

   Every rule exists twice: once against the viewport, and once against a
   `.rs-viewport` container. Put `.rs-viewport` on the frame and `data-rs-app`
   on the app root inside it, and the app adapts to that box instead of the
   window — which is how the mobile previews render a true phone layout inside
   a wide page. */

.rs-viewport{container-type:inline-size;container-name:rsapp;height:100%;overflow:auto}
[data-rs-app]{--rs-app-height:100%}

/* Two-column page layout: main column + right rail. */
.rs-two-col{display:grid;gap:var(--layout-section-gap);align-items:start}
@media (max-width:1080px){
  .rs-two-col{grid-template-columns:minmax(0,1fr)!important}
  .rs-two-col>*{position:static!important;top:auto!important}
}
@container rsapp (max-width:1080px){
  .rs-two-col{grid-template-columns:minmax(0,1fr)!important}
  .rs-two-col>*{position:static!important;top:auto!important}
}

/* Split auth layouts stack, dropping the brand aside. */
.rs-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.rs-split{grid-template-columns:minmax(0,1fr)!important}.rs-split>.rs-split-aside{display:none!important}}
@container rsapp (max-width:900px){.rs-split{grid-template-columns:minmax(0,1fr)!important}.rs-split>.rs-split-aside{display:none!important}}

/* SideNav collapses to a 64px icon rail, then gives way to the tab bar. */
@media (max-width:1020px){
  .rs-sidenav{width:64px!important;padding-left:8px!important;padding-right:8px!important}
  .rs-sidenav .rs-nav-label,.rs-sidenav .rs-nav-status,.rs-sidenav .rs-nav-footer{display:none!important}
}
@container rsapp (max-width:1020px){
  .rs-sidenav{width:64px!important;padding-left:8px!important;padding-right:8px!important}
  .rs-sidenav .rs-nav-label,.rs-sidenav .rs-nav-status,.rs-sidenav .rs-nav-footer{display:none!important}
}
@media (max-width:680px){.rs-sidenav{display:none!important}.rs-tabbar{display:block!important}}
@container rsapp (max-width:680px){.rs-sidenav{display:none!important}.rs-tabbar{display:block!important}}

/* The header context ellipsises to noise on phones — drop it. */
@media (max-width:560px){.rs-header-context{display:none!important}}
@container rsapp (max-width:560px){.rs-header-context{display:none!important}}

/* StepProgress drops its labels before they can be crushed to zero width. */
@media (max-width:820px){
  .rs-stepper .rs-step-label{display:none!important}
  .rs-stepper .rs-step-rule{margin:0 8px!important}
}
@container rsapp (max-width:820px){
  .rs-stepper .rs-step-label{display:none!important}
  .rs-stepper .rs-step-rule{margin:0 8px!important}
}

/* Page padding tightens on small screens. */
@media (max-width:680px){
  :root{--layout-page-x:20px;--layout-page-y:24px;--layout-card-padding:18px;--layout-card-padding-lg:20px}
}
/* Declared on [data-rs-app], never on .rs-viewport itself — a container query
   cannot match the element that establishes the container. Put .rs-viewport on
   the frame and data-rs-app on the app root mounted inside it. */
@container rsapp (max-width:680px){
  [data-rs-app]{--layout-page-x:20px;--layout-page-y:24px;--layout-card-padding:18px;--layout-card-padding-lg:20px}
}

/* Question-page step transition. */
@keyframes rs-q-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rs-q-enter{animation:rs-q-in var(--duration-slow) var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.rs-q-enter{animation:none}}

/* Keyboard affordance only where there is a keyboard. */
@media (min-width:700px){.rs-enter-hint{display:inline-flex!important}}
@container rsapp (max-width:699px){.rs-enter-hint{display:none!important}}