/* DZ-D11: neutral sidebar and a compact phone menu. */
.skip-link { position: absolute; left: var(--dz-space-16); top: var(--dz-space-8); z-index: 30; padding: var(--dz-space-12) var(--dz-space-16); background: var(--dz-surface); color: var(--dz-accent); transform: translateY(-200%); }
.skip-link:focus { transform: none; outline: var(--dz-focus-width) solid var(--dz-focus); outline-offset: var(--dz-focus-offset); }
.page:focus { outline: none; }
.shell, .shell--bare { display: block; min-height: 100dvh; }
.rail { display: none; }
.rail__group { display: flex; flex-direction: column; gap: var(--dz-space-4); }
.rail__group form { margin: 0; }
.rail__mark { display: inline-flex; align-items: center; min-height: var(--dz-control-height); color: var(--dz-ink); font-size: 18px; text-decoration: none; }
.rail__link { display: flex; align-items: center; gap: var(--dz-space-12); box-sizing: border-box; width: 100%; min-height: var(--dz-control-height); padding: var(--dz-space-4) var(--dz-space-12); border: 0; border-radius: var(--dz-radius-chip); background: transparent; color: var(--dz-muted); font: inherit; text-decoration: none; text-align: left; cursor: pointer; }
.rail__button { appearance: none; }
.rail__link:hover { color: var(--dz-ink); background: var(--dz-soft); }
.rail__link[aria-current="page"], .rail__link--current { background: var(--dz-soft); color: var(--dz-ink); font-weight: var(--dz-type-control-weight); }
.rail__link:focus-visible, .rail__mark:focus-visible, .rail__new:focus-visible, .menu__summary:focus-visible { outline: var(--dz-focus-width) solid var(--dz-focus); outline-offset: var(--dz-focus-offset); }
.rail__new.rs-btn { justify-content: flex-start; gap: var(--dz-space-12); padding: 0 var(--dz-space-12); border: 0; color: var(--dz-ink); font-weight: var(--dz-type-body-weight); margin-top: var(--dz-space-24); }
.rail__new.rs-btn:hover { background: var(--dz-soft); color: var(--dz-ink); text-decoration: none; }
.rail__icon { flex: none; width: 18px; height: 18px; }
.topbar { position: relative; z-index: 10; box-sizing: border-box; padding: var(--dz-space-12) var(--dz-gutter-phone); background: var(--dz-ground); }
.topbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--dz-space-16); min-height: 44px; }
.menu { margin: 0; }
.menu__current { color: var(--dz-muted); }
.menu__summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--dz-space-8); border-radius: var(--dz-radius-control); list-style: none; cursor: pointer; }
.menu__summary::-webkit-details-marker { display: none; }
.menu__summary:hover, .menu[open] > .menu__summary { background: var(--dz-soft); }
.menu__nav { position: absolute; z-index: 10; top: 100%; right: 0; display: flex; flex-direction: column; box-sizing: border-box; width: min(320px, 100vw); height: calc(100dvh - 68px); padding: var(--dz-space-24) var(--dz-space-16); overflow: auto; background: var(--dz-ground); box-shadow: var(--dz-shadow-overlay); }
.menu__nav .rail__group--end { margin-top: auto; padding-top: var(--dz-space-32); }
.menu__nav .rail__link { min-height: 44px; }
@media (min-width: 761px) {
  .shell:not(.shell--bare) { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; background: var(--dz-ground); }
  .topbar { display: none; }
  .rail.nav { position: sticky; top: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; box-sizing: border-box; height: 100dvh; margin: 0; padding: var(--dz-space-24) var(--dz-space-12); overflow-y: auto; border: 0; background: var(--dz-ground); }
  .rail__mark { padding: 0 var(--dz-space-12); margin-bottom: var(--dz-space-24); }
  .rail__group--end { margin-top: auto; padding-top: var(--dz-space-32); }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .shell:not(.shell--bare) { grid-template-columns: 176px minmax(0, 1fr); }
  .rail__link { gap: var(--dz-space-8); padding-inline: var(--dz-space-8); white-space: nowrap; }
  .rail__mark { padding: 0 var(--dz-space-8); font-size: var(--dz-type-body-size); }
}
@media print { .rail.nav, .topbar, .skip-link { display: none; } .shell:not(.shell--bare) { display: block; } }
.rail__alpha { align-self: flex-start; margin: calc(-1 * var(--dz-space-16)) 0 var(--dz-space-24) var(--dz-space-12); }
.topbar__brand { display: inline-flex; align-items: center; gap: var(--dz-space-8); min-width: 0; }

/* Environment codename chip (Nox, Lux, Umbra) and the QA top band. */
.stage-chip { gap: var(--dz-space-8); }
.stage-chip__dot { flex: none; width: 6px; height: 6px; border-radius: var(--dz-radius-circle); background: currentColor; }
.rail__alpha--tight { margin-bottom: var(--dz-space-8); }
.rail__stage { align-self: flex-start; margin: 0 0 var(--dz-space-24) var(--dz-space-12); }
.topbar__brand .rail__mark, .topbar__brand .rsx-chip:not(.stage-chip) { flex: none; white-space: nowrap; }
.topbar__brand .stage-chip { flex: 0 1 auto; min-width: 0; }
.stage-chip > span[aria-hidden="true"]:not(.stage-chip__dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.login-stage { align-self: flex-start; }
body[data-stage="qa"]::before { content: ""; position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: 3px; background: var(--dz-st-warning); pointer-events: none; }
@media (max-width: 400px) { .topbar__brand { gap: var(--dz-space-4); } .topbar__brand .rsx-chip { padding-inline: var(--dz-space-4); } .topbar__row { gap: var(--dz-space-4); } .topbar .menu__summary { padding-inline: 0; } .topbar__brand .stage-chip { gap: var(--dz-space-4); padding-inline: var(--dz-space-4); } }

/* Postevio brand images. The reversed file shows on the dark theme, like the tokens in raster.css. */
.brand-image { display: block; max-width: 100%; height: auto; }
.brand-image--reversed { display: none; }
[data-theme="dark"] .brand-image--normal { display: none; }
[data-theme="dark"] .brand-image--reversed { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand-image--normal, [data-theme="system"] .brand-image--normal { display: none; }
  :root:not([data-theme]) .brand-image--reversed, [data-theme="system"] .brand-image--reversed { display: block; }
}
.rail__mark--logo, .rail__mark--symbol { min-height: var(--dz-control-height); }
.brand-block { display: flex; flex-direction: column; gap: var(--dz-space-8); margin-bottom: var(--dz-space-24); }
.brand-block__logo { display: block; width: 320px; max-width: 100%; }
.brand-block__logo .brand-image { width: 100%; }
.brand-block__tagline, .brand-block p { margin: 0; }
.brand-block__tagline { display: block; }