/* Page geometry and the page head (DESIGN.md §6). Every routed page uses rb-page;
   one width owns the application. Sidebar and mobile bar live in nav.css. */
:root{
--rb-page-width:var(--page-w);
--rb-page-gutter:var(--page-gut);
--rb-page-gap:24px;
--rb-panel-radius:16px;
--rb-panel-padding:20px;
--rb-title-size:var(--fs-title);
}
#app{padding:0}
#app>*{min-width:0}
#app .rb-page,.rb-page{box-sizing:border-box;width:100%;max-width:calc(var(--page-w) + var(--page-gut) * 2);margin-inline:auto;padding-inline:var(--page-gut);padding-block:28px 64px;min-width:0}
.rb-page .rb-page{padding:0;max-width:none}
.rb-page .rb-page-header,.rb-page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:var(--rb-page-gap)}
.rb-page-header>div:first-child{min-width:0;max-width:100%}
.rb-page .rb-page-title,.rb-page-title{margin:0;color:var(--ink);font-size:var(--fs-title);font-weight:800;line-height:1.1;letter-spacing:-.035em;overflow-wrap:anywhere;text-wrap:balance}
.rb-page-header p,.rb-page-header .rb-subhead{margin:6px 0 0;color:var(--ink-3);font-size:14px;max-width:70ch;line-height:1.5}
.rb-page-crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 10px;padding:0;list-style:none;font-size:13px;font-weight:600;color:var(--ink-3)}
.rb-page-crumbs li+li::before{content:"/";margin-right:8px;color:var(--ink-4)}
.rb-page-crumbs a{color:inherit;text-decoration:none}
.rb-page-crumbs a:hover,.rb-page-crumbs [aria-current]{color:var(--ink)}
.rb-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rb-page-actions .btn{white-space:nowrap}
.rb-section{margin-top:32px}
.rb-section__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.rb-section__title{margin:0;font-size:var(--fs-section);font-weight:800;letter-spacing:-.02em}
.rb-section__head>.rb-actions,.rb-section__head>.rb-toolbar__end{margin-left:auto}
.rb-grid{display:grid;gap:16px}
.rb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rb-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rb-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:start}
@media (max-width:991.98px){.rb-grid--3,.rb-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.rb-split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767.98px){
#app .rb-page,.rb-page{padding-block:20px 48px}
.rb-page-header{align-items:flex-start}
.rb-page-actions{width:100%}
.rb-grid--2,.rb-grid--3,.rb-grid--4{grid-template-columns:minmax(0,1fr)}
}

/* Product gate: a quiet state page (the site's rbu-state, at app scale). */
.rb-gate{max-width:560px;margin:clamp(24px,8vh,96px) auto 0;padding:32px;border-radius:24px;background:var(--paper);box-shadow:var(--sh2)}
.rb-gate__ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;border-radius:12px;background:var(--ink);color:var(--on-ink)}
.rb-gate__plan{margin:0 0 8px}
.rb-gate__title{margin:0;font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1.08}
.rb-gate__lede{margin:12px 0 0;font-size:15px;color:var(--ink-2);line-height:1.55}
.rb-gate__note{margin:16px 0 24px;padding:12px 14px;border-radius:12px;background:var(--well);font-size:13.5px;color:var(--ink-2)}
@media (max-width:640px){.rb-gate{padding:24px 20px;border-radius:16px}}

/* Route transitions (router.js). JS sets --rb-route-enter-ms / --rb-route-exit-ms /
   --rb-route-lift per swap; the fallbacks match ROUTE_ENTER/EXIT_DURATION_MS. */
#app{position:relative}
.rb-route-preload{position:absolute!important;inset:0!important;opacity:0!important;pointer-events:none!important;z-index:-1!important}
.rb-route-enter{opacity:0;transform:translateY(var(--rb-route-lift,4px))}
.rb-route-enter-active{opacity:1;transform:translateY(0);transition:opacity var(--rb-route-enter-ms,90ms) ease-out,transform var(--rb-route-enter-ms,90ms) ease-out}
.rb-route-exit{opacity:1}
.rb-route-exit-active{opacity:0;transition:opacity var(--rb-route-exit-ms,70ms) ease-out}
@media (prefers-reduced-motion:reduce){
.rb-route-enter,.rb-route-enter-active,.rb-route-exit,.rb-route-exit-active{transition:none!important;transform:none!important;opacity:1!important}
}

/* Navigation pending state (utils/navigation.js): buttons swap their content for a
   centred spinner, links get a trailing one. --rb-loading-color is set from JS. */
@keyframes rb-nav-spin{to{transform:rotate(360deg)}}
.rb-nav-loading{pointer-events:none}
button.rb-nav-loading{position:relative;color:transparent!important}
button.rb-nav-loading>*{opacity:0}
button.rb-nav-loading::after{content:'';position:absolute;top:50%;left:50%;width:.9rem;height:.9rem;margin:-.45rem 0 0 -.45rem;border-radius:50%;border:2px solid var(--rb-loading-color,var(--ink-3));border-right-color:transparent;animation:rb-nav-spin 700ms linear infinite}
a.rb-nav-loading{opacity:.82}
a.rb-nav-loading::after{content:'';display:inline-block;width:.75rem;height:.75rem;margin-left:.45rem;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:rb-nav-spin 700ms linear infinite;vertical-align:-.1em}

/* Image placeholder: the logo on a quiet well while a remote image loads or fails. */
img.rb-img-ph{background-color:var(--well);background-image:url('/icons/logo.svg');background-repeat:no-repeat;background-position:center;background-size:34%}

/* Boot loader logo (utils/loader-utils.js). */
.robot-loader .logo-icon--boot{width:7rem;height:7rem}