/* ==========================================================================
   Customer shell — top bar, mobile tab bar, menu sheet, loader, footer

   The shell is the first thing that says what kind of product this is, so it
   is built twice: a website header with a real nav rail on a desktop, and a
   native-feeling tab bar with a bottom sheet on a phone. Neither is the
   other one shrunk.

   Depends on theme.css tokens. The auth screens carry their own sheets
   (file-wise/_auth.css and file-wise/_onboarding.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Top app bar

   Flat on the canvas until the page moves under it, then it grows a blurred
   fill and a hairline. That transition is the whole separation — there is no
   permanent rule across the screen.
   -------------------------------------------------------------------------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--header-h);
    background: transparent;
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.app-header.is-stuck {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    box-shadow: inset 0 -1px 0 var(--border), 0 4px 20px rgba(18, 19, 26, 0.05);
}

body[theme='dark'] .app-header.is-stuck {
    box-shadow: inset 0 -1px 0 var(--border), 0 4px 20px rgba(0, 0, 0, 0.4);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .app-header.is-stuck { background: var(--surface); }
}

.app-header__inner {
    max-width: var(--page-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.app-header__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

.app-header__brand img {
    height: 22px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    object-position: left center;
}

@media (min-width: 992px) {
    .app-header__brand img { height: 40px; max-width: 200px; }
}

.app-header__spacer { flex: 1 1 auto; min-width: var(--sp-2); }

.app-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

/* --- Desktop nav rail ---------------------------------------------------

   A pill rail, centred in the bar: the destinations read as one control the
   way a segmented tab set does, and the active page is a raised pill rather
   than a coloured word. Hidden below 992px, where the tab bar takes over. */
.app-header__nav { display: none; }

@media (min-width: 992px) {
    .app-header__nav {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 4px;
        margin-inline: auto;
        border-radius: var(--r-pill);
        background: var(--surface-2);
        box-shadow: var(--ring);
    }

    .app-header__nav-link {
        padding: 8px var(--sp-4);
        border-radius: var(--r-pill);
        color: var(--text-2);
        font-size: var(--t-sm);
        font-weight: 600;
        white-space: nowrap;
        transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
            box-shadow var(--dur) var(--ease);
    }

    .app-header__nav-link:hover { color: var(--text); }

    .app-header__nav-link.is-active {
        background: var(--surface);
        color: var(--text);
        box-shadow: var(--shadow-sm);
    }

    body[theme='dark'] .app-header__nav-link.is-active { background: var(--surface-3); }

    /* Narrow desktops: drop the links the avatar menu already carries rather
       than letting the rail collide with the action cluster. */
    @media (max-width: 1149.98px) {
        .app-header__nav-link--secondary { display: none; }
    }
}

/* --- Balance pill -------------------------------------------------------- */
.header-balance {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-pill);
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    font-size: var(--t-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background var(--dur) var(--ease);
}

.header-balance:hover { background: rgba(var(--primary-rgb), 0.17); color: var(--primary); }

.header-balance i { font-size: 0.85rem; opacity: 0.8; }

@media (max-width: 400px) {
    .header-balance { padding: 0 var(--sp-3); font-size: var(--t-xs); }
    .header-balance i { display: none; }
}

/* --- Avatar button ------------------------------------------------------- */
.header-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    line-height: 0;
    cursor: pointer;
}

.header-avatar-btn::after { display: none; }

.header-avatar-btn .avatar {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(var(--primary-rgb), 0.18);
    transition: box-shadow var(--dur) var(--ease);
}

.header-avatar-btn:hover .avatar,
.header-avatar-btn[aria-expanded='true'] .avatar {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(var(--primary-rgb), 0.45);
}

.header-avatar-btn__caret {
    font-size: 0.6rem;
    color: var(--text-muted);
    transition: transform var(--dur) var(--ease);
}

.header-avatar-btn[aria-expanded='true'] .header-avatar-btn__caret { transform: rotate(180deg); }

/* The avatar menu is a desktop affordance; a phone has the tab bar, the
   menu sheet and the profile tab. */
@media (max-width: 991.98px) {
    .header-avatar-btn { display: none; }
}

/* The menu button is the mirror image: phone only. */
.app-header__menu { display: inline-flex; }

@media (min-width: 992px) {
    .app-header__menu { display: none; }
}

/* --------------------------------------------------------------------------
   2. Mobile tab bar

   A real app tab bar: edge to edge, sitting on the bottom of the viewport
   with the home-indicator inset respected, blurred over whatever scrolls
   under it. The active tab is a filled icon inside a tinted capsule that
   springs up a couple of pixels — the same feedback a native tab gives.
   -------------------------------------------------------------------------- */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 1px 0 var(--border), 0 -6px 24px rgba(18, 19, 26, 0.06);
}

body[theme='dark'] .tabbar { box-shadow: inset 0 1px 0 var(--border), 0 -6px 24px rgba(0, 0, 0, 0.5); }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .tabbar { background: var(--surface); }
}

.tabbar__inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    max-width: 520px;
    height: var(--tabbar-h);
    margin: 0 auto;
    padding: 0 var(--sp-1);
}

.tabbar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    min-width: 0;
    padding: 0 2px;
    color: var(--text-muted);
    -webkit-tap-highlight-color: transparent;
}

.tabbar__item:hover { color: var(--text-2); }

/* The capsule behind the icon — it is what actually moves and fills. */
.tabbar__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 28px;
    border-radius: var(--r-pill);
    background: transparent;
    font-size: 1.08rem;
    transition: background var(--dur) var(--ease), transform 0.34s var(--ease-spring),
        color var(--dur) var(--ease);
}

/* Outline by default, solid once the tab is the page you are on. Both marks
   are in the markup so the swap costs nothing at tap time. */
.tabbar__icon i {
    position: absolute;
    transition: opacity 0.18s var(--ease), transform 0.34s var(--ease-spring);
}

.tabbar__icon .tab-ico--on { opacity: 0; transform: scale(0.7); }
.tabbar__icon .tab-ico--off { opacity: 1; transform: none; }

.tabbar__label {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--dur) var(--ease), font-weight var(--dur) var(--ease);
}

.tabbar__item.is-active { color: var(--primary); }

.tabbar__item.is-active .tabbar__icon {
    background: rgba(var(--primary-rgb), 0.13);
    transform: translateY(-2px);
}

.tabbar__item.is-active .tab-ico--on { opacity: 1; transform: none; }
.tabbar__item.is-active .tab-ico--off { opacity: 0; transform: scale(1.3); }

.tabbar__item.is-active .tabbar__label { font-weight: 700; }

.tabbar__item:active .tabbar__icon { transform: scale(0.88); }
.tabbar__item.is-active:active .tabbar__icon { transform: translateY(-2px) scale(0.9); }

/* The centre tab — the app's main action.

   Third of five, lifted out of the bar as a branded orb so the thumb finds
   it without reading a label. It is the only mark that moves on its own:
   the glyph breathes on a long loop while two rings ride out of the orb,
   slow enough and faint enough to read as ambient rather than as an alert.
   Everything that loops is a transform or an opacity, so it stays on the
   compositor and never costs a layout. */

/* The anchor grows upward by the same amount the orb is lifted, so the part
   of the orb standing above the bar is still inside the tap target. */
.tabbar__item--center {
    align-self: end;
    height: calc(100% + 20px);
    padding-top: 16px;
}

.tabbar__item--center .tabbar__label {
    display: none;
}

.tabbar__icon--center {
    width: 54px;
    height: 54px;
    margin-top: -24px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--primary-hover), var(--primary));
    color: var(--on-primary);
    font-size: 1.3rem;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.36), 0 0 0 5px var(--surface);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        transform 0.34s var(--ease-spring);
}

/* Both marks carry the loop; only one of them is ever visible. */
.tabbar__icon--center i { animation: tab-orb-breathe 3.2s var(--ease-in-out) infinite; }

.tabbar__halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(var(--primary-rgb), 0.5);
    opacity: 0;
    pointer-events: none;
    animation: tab-orb-halo 3.2s var(--ease) infinite;
}

/* The second ring is the same ring, half a cycle behind. */
.tabbar__halo--lag { animation-delay: 1.6s; }

@keyframes tab-orb-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-2px) scale(1.08); }
}

@keyframes tab-orb-halo {
    0%   { opacity: 0.5; transform: scale(1); }
    65%  { opacity: 0; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* On the Task page: deeper fill, and a brand ring outside the bar's cutout
   so "you are here" reads on the orb too, not only on its label. */
.tabbar__item--center.is-active .tabbar__icon--center {
    background: linear-gradient(145deg, var(--primary), var(--primary-active));
    transform: none;
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.46), 0 0 0 5px var(--surface),
        0 0 0 7px rgba(var(--primary-rgb), 0.3);
}

.tabbar__item--center:active .tabbar__icon--center,
.tabbar__item--center.is-active:active .tabbar__icon--center { transform: scale(0.93); }

@media (prefers-reduced-motion: reduce) {
    .tabbar__icon,
    .tabbar__icon i { transition: opacity 0.15s linear; }
    .tabbar__item.is-active .tabbar__icon { transform: none; }

    /* Nothing loops, but the orb keeps its lift and its fill. */
    .tabbar__icon--center i,
    .tabbar__halo { animation: none; }
    .tabbar__halo { opacity: 0; }
}

/* Short phones: shave the lift so the orb never crowds the content above it. */
@media (max-height: 640px), (max-width: 340px) {
    .tabbar__item--center {
        height: calc(100% + 18px);
        padding-top: 18px;
    }

    .tabbar__icon--center {
        width: 48px;
        height: 48px;
        margin-top: -18px;
        font-size: 1.16rem;
    }
}

/* --------------------------------------------------------------------------
   3. Menu sheet

   The overflow menu. On a phone it is a bottom sheet — it comes from the
   edge the thumb is already near, it has a grab handle, and it never
   pretends to be a desktop sidebar.
   -------------------------------------------------------------------------- */
.drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    background: var(--surface);
    box-shadow: 0 -20px 60px rgba(18, 19, 26, 0.24);
    transform: translateY(101%);
    transition: transform 0.36s var(--ease);
    will-change: transform;
}

body[theme='dark'] .drawer { box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6); }

.drawer.is-open { transform: none; }

.drawer__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
}

/* The grab handle. Decorative, but it is the thing that says "this drags". */
.drawer__head::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--border-strong);
}

.drawer__title { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 700; }

.drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--sp-5) var(--sp-4);
}

.drawer__group + .drawer__group { margin-top: var(--sp-5); }

.drawer__group-title {
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--sp-2);
}

/* Two columns of compact targets rather than one long list of rows: the
   whole menu then fits in a sheet you can reach the bottom of. */
.drawer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
}

.drawer__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 600;
    min-width: 0;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
        transform 0.12s var(--ease);
}

.drawer__link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer__link i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 0.85rem;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.drawer__link:active { transform: scale(0.97); }

.drawer__link:hover,
.drawer__link.is-active {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

.drawer__link:hover i,
.drawer__link.is-active i {
    background: rgba(var(--primary-rgb), 0.16);
    color: var(--primary);
}

.drawer__foot {
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    background: var(--surface-2);
    box-shadow: inset 0 1px 0 var(--border);
}

.drawer__user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    min-width: 0;
}

.drawer__user-name { font-size: var(--t-body); font-weight: 700; }
.drawer__user-uid { font-size: var(--t-xs); color: var(--text-muted); }

.scrim {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(8, 8, 14, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

.scrim.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   4. Content column

   The old shell rendered the whole app inside a fixed 500px phone frame
   (.mobile-box-container). That is gone, so pages that have not been converted
   yet would run edge to edge on a desktop screen. A converted page brings its
   own `.page` column; everything else gets one here.
   -------------------------------------------------------------------------- */
.app-main {
    min-height: 50vh;
    padding-bottom: var(--sp-6);
}

.app-main > *:not(.page) {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

/* --------------------------------------------------------------------------
   5. Full page loader
   -------------------------------------------------------------------------- */
.app-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}

.app-loader.is-done {
    opacity: 0;
    visibility: hidden;
}

.app-loader__mark {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    animation: loaderPulse 1.4s var(--ease) infinite;
}

@keyframes loaderPulse {
    0%, 100% { transform: scale(1) rotate(0deg); border-radius: var(--r-lg); }
    50% { transform: scale(0.82) rotate(45deg); border-radius: var(--r-xl); }
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */
.app-footer {
    background: var(--surface);
    padding: var(--sp-8) 0 var(--sp-6);
    margin-top: var(--sp-10);
}

/* Signed-in users navigate from the bottom nav on mobile, so the footer links
   are redundant there — hide it and drop the space it reserved. */
@media (max-width: 768px) {
    body.is-authenticated .app-footer { display: none; }
}

.app-footer__inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

.app-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--sp-6);
}

@media (max-width: 860px) {
    .app-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .app-footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.app-footer__brand img {
    height: 32px;
    width: auto;
    object-fit: contain;
    margin-bottom: var(--sp-3);
}

.app-footer__about {
    color: var(--text-muted);
    font-size: 0.84rem;
    max-width: 34ch;
}

.app-footer__col-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--sp-3);
}

.app-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-footer__links li + li { margin-top: var(--sp-2); }

.app-footer__links a {
    color: var(--text-2);
    font-size: 0.86rem;
}

.app-footer__links a:hover { color: var(--primary); }

.app-footer__bottom {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.app-footer__bottom p { margin: 0; }


/* --------------------------------------------------------------------------
   7. Desktop shell (>= 992px)

   Below this width the shell is an app: tab bar, bottom sheet, one column.
   From here up the same pages are a website: a nav rail in the header, no
   tab bar, and a wider centred column.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Phone affordances, all of them. */
    .tabbar,
    .drawer,
    .scrim { display: none !important; }

    /* Reclaim the space the tab bar reserved. */
    body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   8. Account menu

   The header dropdown, and on a desktop the only account navigation there
   is — so it carries the identity, the two figures worth interrupting for,
   and the destinations, rather than three plain links.
   -------------------------------------------------------------------------- */
.account-menu {
    --bs-dropdown-bg: var(--surface);
    width: 300px;
    max-width: calc(100vw - 24px);
    margin-top: var(--sp-2);
    padding: var(--sp-2);
    border: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--ring), var(--shadow-xl);
}

/* Identity row — tappable, because it goes to the account page. */
.account-menu__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    color: var(--text);
    transition: background var(--dur) var(--ease);
}

.account-menu__head:hover { background: var(--surface-3); color: var(--text); }

.account-menu__name {
    display: block;
    font-size: var(--t-body);
    font-weight: 700;
    line-height: 1.3;
}

.account-menu__uid {
    display: block;
    font-size: var(--t-xs);
    color: var(--text-muted);
}

.account-menu__head .list__chevron { margin-left: auto; }

/* Two figures, side by side, each its own soft block. */
.account-menu__figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    margin: var(--sp-2) 0;
}

.account-menu__figure {
    padding: var(--sp-3);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    color: var(--text);
    transition: background var(--dur) var(--ease);
}

.account-menu__figure:hover { background: var(--surface-3); color: var(--text); }

.account-menu__figure-k {
    display: block;
    font-size: var(--t-2xs);
    font-weight: 600;
    color: var(--text-muted);
}

.account-menu__figure-v {
    display: block;
    margin-top: 2px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Two columns of destinations: six links in one column would make the panel
   taller than the header it hangs from. */
.account-menu__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-2);
    box-shadow: inset 0 -1px 0 var(--border);
}

.account-menu__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px var(--sp-2);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: var(--t-sm);
    font-weight: 500;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.account-menu__link i {
    width: 16px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color var(--dur) var(--ease);
}

.account-menu__link:hover { background: var(--surface-2); color: var(--text); }
.account-menu__link:hover i { color: inherit; }

.account-menu__link.is-active {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    font-weight: 600;
}

.account-menu__link.is-active i { color: inherit; }

.account-menu__link--danger { color: var(--danger); }
.account-menu__link--danger i { color: var(--danger); }
.account-menu__link--danger:hover { background: var(--danger-soft); color: var(--danger); }

/* Two labels per row, so none of them wraps and the rows stay even. */
.account-menu__link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pushes the action cluster to the right edge on a phone, where the nav rail
   that normally does that job is hidden. */
.app-header__spacer { flex: 1 1 auto; min-width: var(--sp-2); }

@media (min-width: 992px) {
    .app-header__spacer { display: none; }
}