/* appbar.css — the shared "Apps" launcher.
   Every rule is namespaced under .pab so the launcher can drop into eight sites
   with eight different design systems without colliding with any of them.

   The shelf lives on the LEFT edge on a pointer-sized screen: the top-left is
   where every one of these sites puts its own logotype, and a tab parked there
   covered it. On a narrow screen there is no room for a side shelf, so it
   becomes a sheet from the top with a close button, because a phone has no
   hover to leave. */

/* The shelf sizes itself, so it cannot inherit the host page's box model: with
   content-box the panel's padding is added to its width, the closing transform
   then under-shoots by exactly that padding, and the rail floats off the edge.
   Eight sites, eight resets — declare it here and depend on none of them. */
.pab, .pab *, .pab *::before, .pab *::after { box-sizing: border-box; }

.pab {
    --pab-purple: #422186;
    --pab-deep: #33004c;
    --pab-rail: 6px;
    --pab-panel: 176px;   /* the shelf's WIDTH on a side-mounted layout */
    --pab-sheet: 92px;    /* its HEIGHT when it drops from the top instead */
    --pab-ease: 260ms cubic-bezier(0.25, 0.8, 0.3, 1);

    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2147483000; /* above app chrome, below nothing that matters */
    display: flex;
    flex-direction: row;
    font-family: Tahoma, Arial, sans-serif;

    /* Closed, the panel sits exactly its own width to the left of the viewport,
       which leaves the rail beside it as the only visible part. */
    transform: translateX(calc(var(--pab-panel) * -1));
    transition: transform var(--pab-ease);
}
.pab[data-state="open"] { transform: translateX(0); }

/* The page is pushed aside by the panel width while the shelf is open. The rail
   is not counted: it overlays a few pixels of the margin at rest, so a closed
   shelf costs the page no layout at all. */
body.pab-open { padding-left: var(--pab-page-shift-x, 176px); }
body.pab-shift { transition: padding-left 260ms cubic-bezier(0.25, 0.8, 0.3, 1),
                             padding-top 260ms cubic-bezier(0.25, 0.8, 0.3, 1); }

.pab__panel {
    width: var(--pab-panel);
    height: 100%;
    background: linear-gradient(160deg, var(--pab-deep), var(--pab-purple));
    box-shadow: 6px 0 20px rgba(51, 0, 76, 0.28);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

.pab__app {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    text-decoration: none;
    color: #fff;
    border: 1px solid transparent;
}
.pab__app:hover, .pab__app:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    outline: none;
}
.pab__app--current { background: rgba(255, 255, 255, 0.16); }

.pab__tile {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pab-tile, #422186);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.pab__tile svg { width: 18px; height: 18px; display: block; }

.pab__label { min-width: 0; display: flex; flex-direction: column; }
.pab__name {
    font-size: 12px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pab__here {
    font-size: 9px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.75;
    /* A blurb that wraps makes its row taller than its neighbours; one line. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The rail is the always-visible sliver of purple down the edge, and the tab
   hangs off it as the thing to aim at. Both are vertically centred, well clear
   of the corner where the host site keeps its own logo. */
.pab__rail {
    position: relative;
    width: var(--pab-rail);
    height: 100%;
    background: var(--pab-purple);
}
.pab__tab {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 5px 12px;
    border: none;
    border-radius: 0 3px 3px 0;
    background: var(--pab-purple);
    color: #fff;
    font: inherit;
    font-size: 11.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 3px 0 6px rgba(51, 0, 76, 0.25);
    writing-mode: vertical-rl;
}
.pab__tab:hover, .pab__tab:focus-visible { background: var(--pab-deep); outline: none; }

/* The tab shows on arrival so the shelf is discoverable, then slides behind the
   rail: it overlays the page, and chrome that never yields is chrome in the way.
   The rail itself stays, so the shelf is still findable, and pointing at the
   edge brings the tab straight back. Transform rather than display, so it
   animates and keeps its hit area until it has actually gone. */
.pab__tab { transition: transform var(--pab-ease), opacity var(--pab-ease), background var(--pab-ease); }
.pab[data-tab="hidden"] .pab__tab {
    transform: translateY(-50%) translateX(-100%);
    opacity: 0;
    pointer-events: none;
}
.pab__chevron {
    writing-mode: horizontal-tb;
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid currentColor;
    transition: transform var(--pab-ease);
}
.pab[data-state="open"] .pab__chevron { transform: rotate(180deg); }

/* The close button is for touch, where there is no pointer to move away. */
.pab__close { display: none; }

/* The hover target: a strip down the very edge of the page, so the shelf answers
   to "point at the edge" and not only to hitting the tab. */
.pab__hot {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 14px;
    z-index: 2147482999;
}
.pab[data-state="open"] ~ .pab__hot { display: none; }

@media (prefers-reduced-motion: reduce) {
    .pab, .pab__chevron, body.pab-shift { transition: none; }
}

/* ---- Narrow screens: a sheet from the top, closed by touch --------------- */
/* There is no room for a side shelf on a phone, and no hover to leave, so the
   panel drops from the top across the full width and carries an X. */
@media (max-width: 640px) {
    .pab {
        right: 0;
        bottom: auto;
        flex-direction: column;
        transform: translateY(calc(var(--pab-sheet) * -1));
    }
    .pab[data-state="open"] { transform: translateY(0); }

    body.pab-open { padding-left: 0; padding-top: var(--pab-page-shift-y, 92px); }

    .pab__panel {
        width: auto;
        height: var(--pab-sheet);
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 0 44px 0 14px;   /* room on the right for the close button */
        overflow-x: auto;
        overflow-y: hidden;
        box-shadow: 0 6px 20px rgba(51, 0, 76, 0.28);
        background: linear-gradient(180deg, var(--pab-deep), var(--pab-purple));
    }
    .pab__app { flex-direction: column; gap: 5px; width: 76px; padding: 8px 4px 6px; }
    .pab__label { align-items: center; text-align: center; max-width: 100%; }
    .pab__name, .pab__here { max-width: 68px; }

    .pab__rail { width: auto; height: var(--pab-rail); }
    .pab__tab {
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        flex-direction: row;
        writing-mode: horizontal-tb;
        border-radius: 0 0 3px 3px;
        padding: 3px 14px 5px;
        box-shadow: 0 3px 6px rgba(51, 0, 76, 0.25);
    }
    .pab__chevron {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid currentColor;
        border-bottom: 0;
    }
    /* Hanging below the rail here, so it retreats upward behind it. */
    .pab[data-tab="hidden"] .pab__tab { transform: translateX(-50%) translateY(-100%); }
    .pab__close {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font: inherit;
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
    }
    .pab__hot { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 16px; }
}

@media print {
    .pab, .pab__hot { display: none; }
    body.pab-open { padding-left: 0; padding-top: 0; }
}