/* ==========================================================================
   ACA shell stylesheet
   Page frame: body, #mainBodyDiv scroll pane, the fixed navbar, the single
   mobile offcanvas menu and the portal tab bar.
   Replaces the .site-navbar / .site-mobile-menu / #mobile-menu / #slidemenu
   systems that used to live in css/style.css.
   Depends on css/aca-tokens.css and css/aca-base.css.

   The chrome is the school's navy throughout - navbar, menu, tab bar and
   sidebar - with the star lattice painted in orange through its mask; the page
   ground is a deep blue a step lighter, with the same lattice (section 1), and a
   hairline of --aca-on-chrome-line separates the chrome from it.
   Sections: 1 page frame · 2 navbar · 3 offcanvas · 6 tab bar · 6b branded
   rail · 7 print. 4 (the office left rail .aca-rail*) and 5 (the office layout
   .aca-office*, --aca-page-header-h and the [class*="-layout-container"]
   height catch-all) were deleted when the Office Portal became the third
   wearer of the portal kit: its nav is the tab bar of section 6 and its
   screens flow instead of filling a fixed-height pane. The remaining numbers
   are left alone so every reference to "aca-shell.css section 6" still reads
   true.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page frame
   The ground is a deep blue (--aca-bg, the navy chrome a step lighter, never
   black) and the star lattice runs faintly over the whole of it - painted in orange through
   the mask and FIXED to the screen, so every page scrolls over the same
   pattern. #mainBodyDiv is position: fixed, which makes it a stacking context:
   the pseudo-element's z-index: -1 lands above the pane's own background and
   below everything in it. Text painted directly on the ground reads the dark
   context tokens the pane carries (aca-tokens.css surface registry). On paper
   the ground goes (section 7) and so does the lattice (aca-base.css section 13).
   -------------------------------------------------------------------------- */

body {
    margin: 0;
    padding: 0;
    background: var(--aca-bg);
    color: var(--aca-ink);
    font-family: var(--aca-font);
}

#mainBodyDiv {
    position: fixed;
    top: var(--aca-navbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--aca-bg);
    /* acaViewportMeta()'s viewport-fit=cover stops Safari insetting the page, so in
       landscape the notch sits over this pane's left or right edge. Nothing else sets
       padding on #mainBodyDiv, so the whole app gets its gutter from here. */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

#mainBodyDiv::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: var(--aca-orange);
    opacity: .08;
    -webkit-mask-image: var(--aca-pattern-star);
    mask-image: var(--aca-pattern-star);
    -webkit-mask-size: 72px 72px;
    mask-size: 72px 72px;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Navbar
   The school's navy, like the portal sidebar it sits above: the lattice fades
   in on the right, the logo sits on a small light tile, and the destinations
   are rounded items - the current one solid orange, the way the sidebar marks
   its own. A dropdown is a raised navy panel of the same items.
   -------------------------------------------------------------------------- */

.aca-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--aca-z-navbar);
    height: var(--aca-navbar-h);
    isolation: isolate;
    border-bottom: 1px solid var(--aca-on-chrome-line);
    background: var(--aca-chrome);
    color: var(--aca-on-chrome);
}

.aca-navbar::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 50%;
    background: linear-gradient(to right, transparent, var(--aca-orange) 45%);
    opacity: .16;
    -webkit-mask-image: var(--aca-pattern-star);
    mask-image: var(--aca-pattern-star);
    -webkit-mask-size: 56px 56px;
    mask-size: 56px 56px;
    pointer-events: none;
}

.aca-navbar__inner {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    /* The bar is fixed to the screen edges, so in landscape its gutter is the token
       padding or the notch inset, whichever is larger. */
    padding-left: max(var(--aca-space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--aca-space-4), env(safe-area-inset-right, 0px));
}

.aca-navbar__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: var(--aca-space-4);
    text-decoration: none;
}

.aca-navbar__brand:hover,
.aca-navbar__brand:focus {
    text-decoration: none;
}

/* The logo's own transparency on the navy, the way the login screen shows it. */
.aca-navbar__logo {
    display: block;
    width: auto;
    height: 40px;
    margin-right: var(--aca-space-2);
}

.aca-navbar__name {
    color: var(--aca-on-chrome);
    font-size: var(--aca-text);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.aca-navbar__nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.aca-navbar__menu {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--aca-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.aca-navbar__item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.aca-navbar__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--aca-space-2) var(--aca-space-3);
    border: 0;
    border-radius: var(--aca-radius-sm);
    background: transparent;
    color: var(--aca-on-chrome-muted);
    font-family: inherit;
    font-size: var(--aca-text-sm);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--aca-transition), background-color var(--aca-transition);
}

.aca-navbar__link i {
    margin-right: var(--aca-space-2);
    font-size: .9em;
}

.aca-navbar__link:hover,
.aca-navbar__link:focus {
    background: var(--aca-chrome-2);
    color: var(--aca-on-chrome);
    text-decoration: none;
}

.aca-navbar__link.is-active {
    background: var(--aca-orange);
    color: var(--aca-on-brand);
}

.aca-navbar__link:focus-visible {
    outline: none;
    box-shadow: var(--aca-focus);
}

.aca-navbar__dropdown-toggle::after {
    content: "\f107";
    margin-left: var(--aca-space-2);
    font-family: "Font Awesome 5 Free";
    font-size: .8em;
    font-weight: 900;
}

.aca-navbar__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--aca-z-navbar);
    display: none;
    min-width: 220px;
    margin: 0;
    padding: var(--aca-space-2);
    border: 1px solid var(--aca-on-chrome-line);
    border-radius: var(--aca-radius);
    background: var(--aca-chrome-2);
    box-shadow: var(--aca-shadow-lg);
    list-style: none;
    text-align: left;
}

.aca-navbar__item--dropdown.is-open > .aca-navbar__dropdown {
    display: block;
}

.aca-navbar__dropdown > li > a,
.aca-navbar__dropdown > li > button {
    display: block;
    width: 100%;
    min-height: 0;
    padding: var(--aca-space-2) var(--aca-space-3);
    border: 0;
    border-radius: var(--aca-radius-sm);
    background: transparent;
    color: var(--aca-on-chrome-muted);
    font-family: inherit;
    font-size: var(--aca-text-sm);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.aca-navbar__dropdown > li > a:hover,
.aca-navbar__dropdown > li > button:hover,
.aca-navbar__dropdown > li > a:focus,
.aca-navbar__dropdown > li > button:focus {
    background: var(--aca-chrome);
    color: var(--aca-on-chrome);
    text-decoration: none;
}

.aca-navbar__dropdown > li > a.is-active {
    background: var(--aca-orange);
    color: var(--aca-on-brand);
}

.aca-navbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--aca-on-chrome-line);
    border-radius: var(--aca-radius-sm);
    background: transparent;
    color: var(--aca-on-chrome);
    font-size: var(--aca-text-lg);
    line-height: 1;
    cursor: pointer;
}

.aca-navbar__toggle:hover {
    background: var(--aca-chrome-2);
    color: var(--aca-on-chrome);
}

.aca-navbar__actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--aca-space-2);
    margin-left: auto;
}

@media (min-width: 992px) {
    .aca-navbar__menu {
        display: flex;
    }

    .aca-navbar__toggle {
        display: none;
    }

    .aca-navbar__item--dropdown:hover > .aca-navbar__dropdown,
    .aca-navbar__item--dropdown:focus-within > .aca-navbar__dropdown {
        display: block;
    }
}

@media (max-width: 991px) {
    .aca-navbar__inner {
        padding-left: max(var(--aca-space-3), env(safe-area-inset-left, 0px));
        padding-right: max(var(--aca-space-3), env(safe-area-inset-right, 0px));
    }

    .aca-navbar__name {
        font-size: var(--aca-text-sm);
    }
}

/* --------------------------------------------------------------------------
   3. Offcanvas (the one and only mobile menu)
   The navy sidebar a laptop gets, on a phone: the same rounded items, the
   current one solid orange, the lattice over its lower half. navbar.js fills
   the body from the desktop menu, so these are the navbar's own links.
   -------------------------------------------------------------------------- */

.aca-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--aca-z-drawer);
    display: flex;
    flex-direction: column;
    width: var(--aca-drawer-w);
    max-width: 100%;
    isolation: isolate;
    background: var(--aca-chrome);
    color: var(--aca-on-chrome);
    box-shadow: var(--aca-shadow-lg);
    transform: translateX(100%);
    transition: transform var(--aca-transition);
}

.aca-offcanvas::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 45%;
    background: linear-gradient(to bottom, transparent, var(--aca-orange) 40%);
    opacity: .13;
    -webkit-mask-image: var(--aca-pattern-star);
    mask-image: var(--aca-pattern-star);
    -webkit-mask-size: 56px 56px;
    mask-size: 56px 56px;
    pointer-events: none;
}

.aca-offcanvas.is-open {
    transform: translateX(0);
}

.aca-offcanvas__header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: var(--aca-navbar-h);
    padding: var(--aca-space-2) var(--aca-space-4);
    /* The panel opens against the right screen edge, so in landscape the notch lands
       on the close button. The inset sits on this row rather than on .aca-offcanvas
       so the header border and the links' full-width highlight still reach the edge. */
    padding-right: max(var(--aca-space-4), env(safe-area-inset-right, 0px));
    border-bottom: 1px solid var(--aca-on-chrome-line);
}

.aca-offcanvas__header .aca-navbar__brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: var(--aca-space-2);
}

.aca-offcanvas__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--aca-radius-sm);
    background: transparent;
    color: var(--aca-on-chrome-muted);
    font-size: var(--aca-text-lg);
    line-height: 1;
    cursor: pointer;
}

.aca-offcanvas__close:hover {
    background: var(--aca-chrome-2);
    color: var(--aca-on-chrome);
}

.aca-offcanvas__body {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* The last link would otherwise end under the iPhone home indicator. */
    padding: var(--aca-space-3) var(--aca-space-3) max(var(--aca-space-6), env(safe-area-inset-bottom, 0px));
}

.aca-offcanvas__link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    margin: 0 0 var(--aca-space-1);
    padding: var(--aca-space-2) var(--aca-space-3);
    border: 0;
    border-radius: var(--aca-radius);
    background: transparent;
    color: var(--aca-on-chrome-muted);
    font-family: inherit;
    font-size: var(--aca-text);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--aca-transition), background-color var(--aca-transition);
}

.aca-offcanvas__link i {
    flex: 0 0 auto;
    width: 1.25rem;
    margin-right: var(--aca-space-3);
    text-align: center;
}

.aca-offcanvas__link:hover,
.aca-offcanvas__link:focus {
    background: var(--aca-chrome-2);
    color: var(--aca-on-chrome);
    text-decoration: none;
}

.aca-offcanvas__link.is-active {
    background: var(--aca-orange);
    color: var(--aca-on-brand);
}

.aca-offcanvas__group {
    margin: var(--aca-space-2) 0 0;
    padding: var(--aca-space-2) 0 0;
    border-top: 1px solid var(--aca-on-chrome-line);
    list-style: none;
}

.aca-offcanvas__group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.aca-offcanvas__group-title {
    margin: 0;
    padding: var(--aca-space-2) var(--aca-space-3);
    color: var(--aca-on-chrome-muted);
    font-size: var(--aca-text-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.aca-offcanvas__group .aca-offcanvas__link {
    padding-left: var(--aca-space-4);
}

.aca-offcanvas__backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: calc(var(--aca-z-drawer) - 1);
    background: rgba(17, 24, 39, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--aca-transition), visibility var(--aca-transition);
}

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

body.aca-offcanvas-open {
    overflow: hidden;
}

@media (min-width: 992px) {
    .aca-offcanvas,
    .aca-offcanvas__backdrop {
        display: none;
    }

    body.aca-offcanvas-open {
        overflow: visible;
    }
}

/* --------------------------------------------------------------------------
   6. Tab bar
   A portal's small, fixed set of destinations, always visible. ONE element
   serves both shapes: a bottom bar on a phone, the same nav as a left rail
   from 992px up. It is a FIXED SIBLING of #mainBodyDiv, never a child - a bar
   that scrolls inside an iOS overflow pane jitters and hides the last row -
   which is also why it lives in this sheet: it has to move that pane's edges,
   and #mainBodyDiv is defined here. A page opts in with body.aca-has-tabbar.
   Both shapes wear the navbar's navy, so a phone is framed top and bottom by
   the same band. Worn by the Family, Staff and Office Portals.
   -------------------------------------------------------------------------- */

.aca-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--aca-z-rail);
    display: flex;
    align-items: stretch;
    /* Fixed to the screen edges, so the home indicator and a landscape notch
       are held off the tap targets rather than the bar's own background. */
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    border-top: 1px solid var(--aca-on-chrome-line);
    background: var(--aca-chrome);
    color: var(--aca-on-chrome);
}

.aca-tabbar__item {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--aca-tabbar-h);
    /* Five labels at the body size across a 390px phone: the slot is 78px and
       "Payments" needs nearly all of them, so the items carry no side padding. */
    padding: var(--aca-space-1) 0;
    color: var(--aca-on-chrome-muted);
    font-size: var(--aca-text-xs);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: color var(--aca-transition), background-color var(--aca-transition);
}

.aca-tabbar__item > i {
    flex: 0 0 auto;
    font-size: var(--aca-text-lg);
    line-height: 1;
}

.aca-tabbar__item:hover,
.aca-tabbar__item:focus {
    color: var(--aca-on-chrome);
    text-decoration: none;
}

.aca-tabbar__item:focus-visible {
    outline: none;
    box-shadow: var(--aca-focus);
}

.aca-tabbar__item.is-active {
    color: var(--aca-on-brand);
}

.aca-tabbar__item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--aca-orange);
}

.aca-tabbar__label {
    display: block;
    max-width: 100%;
    margin-top: var(--aca-space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sits over the icon's top-right corner: the icon is centred in the column, so
   the badge is offset from the column's centre line. */
.aca-tabbar__badge {
    position: absolute;
    top: var(--aca-space-1);
    left: 50%;
    display: block;
    min-width: 22px;
    margin-left: var(--aca-space-1);
    padding: 0 .35em;
    border-radius: var(--aca-radius-pill);
    background: var(--aca-orange);
    color: var(--aca-on-brand);
    font-size: var(--aca-text-xs);
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.aca-tabbar__dot {
    position: absolute;
    top: var(--aca-space-1);
    left: 50%;
    display: block;
    width: 8px;
    height: 8px;
    margin-left: var(--aca-space-2);
    border-radius: var(--aca-radius-pill);
    background: var(--aca-danger);
}

body.aca-has-tabbar #mainBodyDiv {
    bottom: calc(var(--aca-tabbar-h) + env(safe-area-inset-bottom, 0px));
}

/* Android resizes the viewport when the keyboard opens, which rides the fixed bar
   up over the field being typed in. Each portal's shell script puts the class on
   while a field has focus; the pane takes the freed edge back so nothing is cut off. */
@media (max-width: 991px) {
    body.aca-tabbar-typing .aca-tabbar {
        display: none;
    }

    body.aca-tabbar-typing.aca-has-tabbar #mainBodyDiv {
        bottom: 0;
    }
}

@media (min-width: 992px) {
    .aca-tabbar {
        top: var(--aca-navbar-h);
        right: auto;
        width: var(--aca-tabbar-w);
        flex-direction: column;
        justify-content: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
        padding: var(--aca-space-3) 0;
        border-top: 0;
        border-right: 1px solid var(--aca-on-chrome-line);
    }

    .aca-tabbar__item {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        min-height: 44px;
        padding: var(--aca-space-2) var(--aca-space-4);
        border-left: 3px solid transparent;
        font-size: var(--aca-text-sm);
        text-align: left;
    }

    .aca-tabbar__item > i {
        width: 1.25rem;
        margin-right: var(--aca-space-3);
        font-size: var(--aca-text);
        text-align: center;
    }

    .aca-tabbar__item.is-active {
        border-left-color: var(--aca-orange);
        background: var(--aca-chrome-2);
    }

    .aca-tabbar__item.is-active::before {
        display: none;
    }

    .aca-tabbar__label {
        flex: 1 1 auto;
        margin-top: 0;
    }

    .aca-tabbar__badge,
    .aca-tabbar__dot {
        position: static;
        flex: 0 0 auto;
        margin-left: auto;
    }

    body.aca-has-tabbar #mainBodyDiv {
        bottom: 0;
        left: var(--aca-tabbar-w);
    }
}

/* --- 6b. The branded rail (.aca-tabbar--brand) -----------------------------
   From 992px the same nav becomes the school's sidebar: a brand block on top
   (who is signed in), the destinations as rounded items - the current one solid
   orange - and a foot (help + sign out) over a faint star lattice. On a phone
   the bar keeps the plain navy shape of section 6 and the brand and foot blocks
   are not shown, so the modifier only ever touches the rail. */

.aca-tabbar__brand,
.aca-tabbar__foot {
    display: none;
}

@media (min-width: 992px) {
    .aca-tabbar--brand {
        padding: 0;
        background: var(--aca-chrome);
        color: var(--aca-on-chrome);
        isolation: isolate;
    }

    .aca-tabbar--brand::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        height: 45%;
        background-color: var(--aca-orange);
        opacity: .13;
        -webkit-mask-image: var(--aca-pattern-star);
        mask-image: var(--aca-pattern-star);
        -webkit-mask-size: 56px 56px;
        mask-size: 56px 56px;
        pointer-events: none;
    }

    .aca-tabbar--brand .aca-tabbar__brand {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        padding: var(--aca-space-4);
        border-bottom: 1px solid var(--aca-on-chrome-line);
    }

    .aca-tabbar__brand-mark {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: var(--aca-space-3);
        border-radius: var(--aca-radius);
        background: var(--aca-orange);
        color: var(--aca-on-brand);
        font-size: var(--aca-text);
        font-weight: 700;
        letter-spacing: .02em;
    }

    .aca-tabbar__brand-text {
        min-width: 0;
    }

    .aca-tabbar__brand-eyebrow {
        display: block;
        color: var(--aca-on-chrome-muted);
        font-size: var(--aca-text-xs);
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .aca-tabbar__brand-name {
        display: block;
        overflow: hidden;
        font-size: var(--aca-text);
        font-weight: 700;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .aca-tabbar--brand .aca-tabbar__item {
        min-height: 48px;
        margin: var(--aca-space-1) var(--aca-space-3) 0;
        padding: var(--aca-space-2) var(--aca-space-3);
        border-left: 0;
        border-radius: var(--aca-radius);
        color: var(--aca-on-chrome-muted);
        font-size: var(--aca-text);
    }

    .aca-tabbar--brand .aca-tabbar__brand + .aca-tabbar__item {
        margin-top: var(--aca-space-3);
    }

    .aca-tabbar--brand .aca-tabbar__item:hover,
    .aca-tabbar--brand .aca-tabbar__item:focus {
        background: var(--aca-chrome-2);
        color: var(--aca-on-chrome);
    }

    .aca-tabbar--brand .aca-tabbar__item.is-active {
        background: var(--aca-orange);
        color: var(--aca-on-brand);
    }

    .aca-tabbar--brand .aca-tabbar__item.is-active .aca-tabbar__badge {
        background: var(--aca-on-brand);
        color: var(--aca-orange-ink);
    }

    .aca-tabbar--brand .aca-tabbar__item.is-active .aca-tabbar__dot {
        background: var(--aca-on-brand);
    }

    .aca-tabbar--brand .aca-tabbar__foot {
        display: block;
        flex: 0 0 auto;
        margin-top: auto;
        padding: var(--aca-space-4);
        border-top: 1px solid var(--aca-on-chrome-line);
        font-size: var(--aca-text-sm);
    }

    .aca-tabbar__foot-title {
        display: block;
        margin-bottom: var(--aca-space-1);
        font-weight: 700;
    }

    /* Icon and text sit side by side, so a long address starts beside its icon and,
       if it ever has to break, breaks under itself - never under the icon. */
    .aca-tabbar__foot-link {
        display: flex;
        align-items: baseline;
        padding: var(--aca-space-1) 0;
        color: var(--aca-on-chrome-muted);
    }

    .aca-tabbar__foot-link span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .aca-tabbar__foot-link:hover,
    .aca-tabbar__foot-link:focus {
        color: var(--aca-on-chrome);
    }

    .aca-tabbar__foot-link i {
        flex: 0 0 auto;
        width: 1.25rem;
        margin-right: var(--aca-space-2);
        text-align: center;
    }

    .aca-tabbar__signout {
        display: block;
        width: 100%;
        margin-top: var(--aca-space-3);
        padding: var(--aca-space-2) var(--aca-space-3);
        border: 1px solid var(--aca-on-chrome-line);
        border-radius: var(--aca-radius);
        background: transparent;
        color: var(--aca-on-chrome);
        font-size: var(--aca-text-sm);
        font-weight: 600;
        text-align: center;
        transition: background-color var(--aca-transition);
    }

    .aca-tabbar__signout:hover,
    .aca-tabbar__signout:focus {
        background: var(--aca-chrome-2);
    }
}

/* --- 6c. Grouped destinations (.aca-tabbar--groups) ------------------------
   A portal with more destinations than a phone's bar can hold. The registry's
   'main' items sit in the bar; the rest live in .aca-tabbar__group, the sheet
   the More item opens above the bar. Open is a checkbox's :checked state, so
   the sheet works with no script: the More label toggles it, the scrim label
   behind the sheet closes it, and the shell script only keeps aria-expanded
   honest. From 992px the group is display: contents - its items are plain
   rail items with a hairline between the groups - and More, the checkbox and
   the scrim are not shown at all. Worn by the Office Portal. */

.aca-tabbar__scrim,
.aca-tabbar__group,
.aca-tabbar__divider {
    display: none;
}

/* Both are labels, so Bootstrap's label margin has to go; the item keeps its look. */
.aca-tabbar__more,
.aca-tabbar__scrim {
    margin: 0;
    cursor: pointer;
}

@media (max-width: 991px) {
    .aca-tabbar__more-toggle:checked ~ .aca-tabbar__more {
        color: var(--aca-on-brand);
    }

    .aca-tabbar__more-toggle:checked ~ .aca-tabbar__scrim {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: calc(var(--aca-tabbar-h) + env(safe-area-inset-bottom, 0px));
        left: 0;
        z-index: 0;
        background: var(--aca-chrome);
        opacity: .45;
    }

    .aca-tabbar__more-toggle:checked ~ .aca-tabbar__group {
        display: grid;
        position: fixed;
        right: 0;
        bottom: calc(var(--aca-tabbar-h) + env(safe-area-inset-bottom, 0px));
        left: 0;
        z-index: 1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--aca-space-1);
        padding: var(--aca-space-3) var(--aca-space-3) var(--aca-space-2);
        border-top: 1px solid var(--aca-on-chrome-line);
        border-radius: var(--aca-radius) var(--aca-radius) 0 0;
        background: var(--aca-chrome-2);
        box-shadow: var(--aca-shadow-up);
    }

    .aca-tabbar__group .aca-tabbar__item {
        min-height: 64px;
        border-radius: var(--aca-radius);
    }

    .aca-tabbar__group .aca-tabbar__item.is-active {
        background: var(--aca-orange);
        color: var(--aca-on-brand);
    }

    .aca-tabbar__group .aca-tabbar__item.is-active::before {
        display: none;
    }
}

@media (min-width: 992px) {
    .aca-tabbar__more-toggle,
    .aca-tabbar__more,
    .aca-tabbar__scrim {
        display: none;
    }

    .aca-tabbar__group {
        display: contents;
    }

    .aca-tabbar__divider {
        display: block;
        flex: 0 0 auto;
        height: 1px;
        margin: var(--aca-space-2) var(--aca-space-4);
        background: var(--aca-on-chrome-line);
    }

    /* Eleven destinations have to share a laptop's height with the brand block and
       the foot: a little less air per item than the four-tab rails take. */
    .aca-tabbar--brand.aca-tabbar--groups .aca-tabbar__item {
        min-height: 40px;
        margin-top: 2px;
    }

    .aca-tabbar--brand.aca-tabbar--groups .aca-tabbar__brand + .aca-tabbar__item {
        margin-top: var(--aca-space-3);
    }
}

/* --------------------------------------------------------------------------
   7. Print
   The shell owns the pane and the ground, so the shell lets go of both on
   paper - here and nowhere else: section 1 fixes #mainBodyDiv to the screen
   as a scroller and paints body and the pane the deep-blue ground, which
   printed a long page as one clipped sheet, deep blue wherever "Background
   graphics" was ticked. On paper the pane flows on every sheet, over the bare
   paper; the lattice goes in aca-base.css section 13. The ground token is
   white on paper too (aca-tokens.css), so a page wrapper painted with it (the
   store's) needs no print rule of its own.
   -------------------------------------------------------------------------- */

@media print {
    body {
        background: none;
    }

    #mainBodyDiv {
        position: static;
        overflow: visible;
        background: none;
    }
}