/* ==========================================================================
   Desktop surface, wallpaper, logo pill, nav pill, taskbar, desktop icons.
   ========================================================================== */

.hxp-desktop {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

/* --- wallpaper ---------------------------------------------------------- */

.hxp-wallpaper {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* A flat stand-in behind the photo so first paint is never white. The
       stops are sampled from the wallpaper itself at the heights they sit at,
       so the swap from colour to photograph is barely a change. Resample if
       the wallpaper is replaced. */
    background: linear-gradient(180deg, #3181de 0%, #80b5ed 44%, #92ac83 60%, #536e14 100%);
}

.hxp-wallpaper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- logo pill, top left ------------------------------------------------ */

.hxp-logo {
    position: absolute;
    z-index: 60;
    left: calc(var(--canvas-gutter) + 9 * var(--u));
    top: calc(10 * var(--u));
    height: calc(48 * var(--u));
    padding-inline: calc(13 * var(--u));

    display: flex;
    align-items: center;
    gap: calc(13 * var(--u));

    background: var(--glass);
    border: 1px solid var(--glass-edge);
    border-radius: var(--win-radius);
    backdrop-filter: blur(10px);
    text-decoration: none;
}

.hxp-logo__mark {
    display: grid;
    place-items: center;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    background: var(--harry-yellow);
    border-radius: calc(6 * var(--u));
}

.hxp-logo__mark img {
    width: calc(17 * var(--u));
    height: auto;
}

.hxp-logo__rule {
    width: 1px;
    height: calc(25 * var(--u));
    background: var(--glass-edge);
}

.hxp-logo__word img {
    width: calc(63 * var(--u));
    height: auto;
}

/* --- nav pill, top right ------------------------------------------------ */

.hxp-nav {
    position: absolute;
    /* Above the modal scrim: the contact panel hangs off this nav, so the rest
       of it has to stay clickable while the panel is open. */
    z-index: 860;
    right: calc(var(--canvas-gutter) + 10 * var(--u));
    top: calc(10 * var(--u));
    height: calc(48 * var(--u));

    display: flex;
    align-items: center;

    background: var(--glass);
    border: 1px solid var(--glass-edge);
    border-radius: var(--win-radius);
    backdrop-filter: blur(10px);
}

.hxp-nav__list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
}

.hxp-nav__list li {
    display: flex;
    align-items: center;
    height: 100%;
}

.hxp-nav__list li + li {
    border-left: 1px solid var(--glass-edge);
}

.hxp-nav__list a {
    display: flex;
    align-items: center;
    height: 100%;
    padding-inline: calc(27 * var(--u));
    font-size: calc(var(--t-title) * var(--u));
    /* The window titles' weight. The nav is the first thing read on either
       layout and at 400 it was the quietest type on the page. */
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none;
    color: var(--ink);
    opacity: 0.72;
    transition: opacity 0.15s var(--ease);
    white-space: nowrap;
}

.hxp-nav__list a:hover,
.hxp-nav__list a:focus-visible {
    opacity: 1;
}

/* Every item is bold now, so "you are here" is carried by opacity alone - full
   white against the others' 72%, the same lift hover gives. */
.hxp-nav__list .current-menu-item a,
.hxp-nav__list a[aria-current="page"] {
    opacity: 1;
}

/* --- desktop icons ------------------------------------------------------ */

.hxp-icons {
    position: absolute;
    z-index: 5;   /* behind the windows, as on a real desktop */
    /* The bin belongs to the screen, not the canvas: bottom-right corner of
       the desktop, whatever width the composition is spread across. */
    right: calc(22 * var(--u));
    bottom: calc(var(--taskbar-h) + 22 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(14 * var(--u));
}

.hxp-icon {
    display: grid;
    justify-items: center;
    text-decoration: none;   /* shortcuts are links or buttons; both read alike */
    color: inherit;
    gap: 4px;
    width: calc(76 * var(--u));
    padding: 4px;
    border-radius: 3px;
}

.hxp-icon:hover .hxp-icon__img,
.hxp-icon:focus-visible .hxp-icon__img {
    filter: brightness(1.12);
}

.hxp-icon__img img {
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.hxp-icon__label {
    font-family: var(--font-xp);
    font-size: 11px;
    line-height: 1.25;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* ==========================================================================
   Taskbar
   ========================================================================== */

.hxp-taskbar {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--taskbar-h);

    display: flex;
    align-items: stretch;
    justify-content: space-between;

    background: var(--bar-face);
    font-family: var(--font-xp);
    font-size: 12.5px;
    color: #fff;
    user-select: none;
}

.hxp-taskbar__lead {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    padding-right: 6px;
}

/* --- start button ------------------------------------------------------- */

.hxp-start {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 5px 30px 6px 13px;
    background: var(--bar-start);
    border-radius: 0 9px 9px 0;
    /* Lit from above on a light face: a white edge along the top and the
       shadow pulled in from the bottom, rather than XP's dark green well. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65),
                inset 0 -3px 7px rgba(120, 130, 0, 0.35);
    color: var(--mono-black);
    cursor: default;
    flex-shrink: 0;
}

/* Inert by brief, but it should read as decorative rather than broken. */
.hxp-start[disabled] {
    opacity: 1;
}

.hxp-start:hover {
    filter: brightness(1.07);
}

/* Harry's mark, not Microsoft's. The glyph is already --mono-black, so it
   reads straight off the yellow without a shadow propping it up. */
.hxp-start__flag {
    width: 18px;
    height: 18px;
}

/* The wordmark ships white, for the dark logo pill. Painting it through a mask
   rather than loading it as an image lets the one file serve both: the colour
   is set here, black for the yellow button, and stays white where the login
   screen puts it on black. */
.hxp-start__label {
    width: 62px;
    height: 24px;
    flex-shrink: 0;
    background-color: var(--mono-black);
    -webkit-mask: url("../img/logo-wordmark.svg") center / contain no-repeat;
            mask: url("../img/logo-wordmark.svg") center / contain no-repeat;
}

/* --- program tabs ------------------------------------------------------- */

.hxp-tasklist {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.hxp-tab {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1 1 0;
    min-width: 36px;
    max-width: 160px;   /* the XP kit's documented behaviour */
    height: 28px;
    padding: 5px 18px 5px 12px;

    background: var(--bar-tab);
    border: 1px solid var(--bar-tab-edge);
    border-radius: 3px;
    box-shadow: inset -1px -0.5px 3px rgba(0, 0, 0, 0.45),
                inset 2px 0 2px rgba(255, 255, 255, 0.14);
    color: #fff;
    overflow: hidden;
}

.hxp-tab:hover {
    filter: brightness(1.1);
}

/* Pressed in, and the brand does the signalling the blue used to: a yellow
   edge down the leading side rather than a lighter shade of the bar. */
.hxp-tab.is-active {
    background: var(--bar-tab-active);
    box-shadow: inset 2px 0 0 var(--harry-yellow),
                inset 1px 0.5px 3px rgba(0, 0, 0, 0.6),
                inset -1px -1px 3px rgba(255, 255, 255, 0.06);
}

.hxp-tab__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.hxp-tab__label {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* --- system tray -------------------------------------------------------- */

.hxp-tray {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hxp-tray__overflow {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    margin-right: -9px;
    z-index: 2;
    background: linear-gradient(135deg, #6a6a6a 20%, #454545 49.5%, #2a2a2a 80%);
    border: 1px solid #0c0c0c;
    border-radius: 50%;
}

.hxp-tray__icons {
    display: flex;
    align-items: center;
    gap: 1px;
    height: var(--taskbar-h);
    padding: 3px 11px 3px 14px;
    background: var(--bar-tray);
    filter: drop-shadow(-1px 0 0.5px rgba(0, 0, 0, 0.5));
    z-index: 1;
}

.hxp-tray__icons img {
    width: 18px;
    height: 18px;
}

.hxp-clock {
    padding-inline: 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   Detonation — the big red button's payload

   The desktop comes apart and piles up along the bottom of the screen, then
   rebuilds itself with a reload. Everything here is transform and opacity, so
   the fall stays on the compositor: the physics in detonate.js writes one
   transform per piece per frame and touches nothing else.
   ========================================================================== */

/* The page is inert for the thirty seconds it takes to come back. Half a
   demolished desktop is not a thing anyone should be able to click through. */
.hxp-detonating .hxp-desktop {
    pointer-events: none;
    user-select: none;
}

/* On the mobile stack the desktop is a scrolling column rather than a fixed
   pane, so falling pieces would push the page taller and hand you a scrollbar
   into empty space. Both are clamped for the duration. */
.hxp-detonating,
.hxp-detonating .hxp-desktop {
    overflow: hidden;
}

/* A piece in flight. The frame's own transitions would fight the integration -
   every step would ease towards the last position instead of landing on it. */
.hxp-boom {
    transition: none !important;
    will-change: transform;
    pointer-events: none;
}

/* Reduced motion: no blast, no tumble, no shake. The desktop simply goes, and
   the notice carries the same information the animation would have. */
.hxp-detonating--still .hxp-desktop {
    opacity: 0.12;
    filter: grayscale(1);
}

/* --- the blast ---------------------------------------------------------- */

.hxp-boom-flash {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: radial-gradient(
        circle at var(--ox) var(--oy),
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 224, 130, 0.85) 12%,
        rgba(255, 120, 32, 0.55) 26%,
        rgba(120, 20, 0, 0.25) 44%,
        rgba(0, 0, 0, 0) 66%
    );
    animation: hxp-boom-flash 900ms var(--ease) forwards;
}

/* The shockwave, thrown from the button rather than from the middle of the
   screen - the ring has to leave from where the press happened. */
.hxp-boom-flash__wave {
    position: absolute;
    left: var(--ox);
    top: var(--oy);
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 40px 12px rgba(255, 170, 60, 0.55);
    animation: hxp-boom-wave 900ms cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
}

@keyframes hxp-boom-flash {
    0%   { opacity: 0; }
    6%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes hxp-boom-wave {
    0%   { transform: scale(0.2); opacity: 1; border-width: 6px; }
    100% { transform: scale(90); opacity: 0; border-width: 0.5px; }
}

/* --- the shake ---------------------------------------------------------- */

.hxp-desktop.is-detonated {
    animation: hxp-boom-shake 640ms linear;
}

@keyframes hxp-boom-shake {
    0%   { transform: translate3d(0, 0, 0); }
    8%   { transform: translate3d(-14px, 8px, 0) rotate(-0.5deg); }
    18%  { transform: translate3d(12px, -10px, 0) rotate(0.45deg); }
    30%  { transform: translate3d(-10px, -6px, 0) rotate(-0.3deg); }
    44%  { transform: translate3d(8px, 7px, 0) rotate(0.28deg); }
    60%  { transform: translate3d(-5px, 4px, 0) rotate(-0.16deg); }
    78%  { transform: translate3d(3px, -3px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* --- the notice --------------------------------------------------------- */

.hxp-boom-panel {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 6vh 6vw;
    background: rgba(0, 0, 0, 0.55);
    font-family: var(--font-xp);
    animation: hxp-boom-in 260ms var(--ease) both;
}

@keyframes hxp-boom-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hxp-boom-panel__frame {
    width: min(460px, 100%);
    background: #262626;
    color: #f2f2f2;
    border: 1px solid var(--menu-edge);
    border-radius: 8px 8px 4px 4px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.hxp-boom-panel__bar {
    padding: 6px 10px;
    background: var(--dialog-bar);
    border-bottom: 2px solid var(--harry-yellow);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.hxp-boom-panel__body {
    padding: 16px 18px 18px;
    font-size: 12px;
    line-height: 1.55;
}

.hxp-boom-panel__body p {
    margin: 0 0 10px;
}

.hxp-boom-panel__lead {
    font-size: 14px;
    font-weight: 700;
}

.hxp-boom-panel__count {
    margin-top: 14px !important;
    font-variant-numeric: tabular-nums;
}

.hxp-boom-panel__meter {
    height: 12px;
    background: #111;
    border: 1px solid #4a4a4a;
    border-radius: 2px;
    overflow: hidden;
}

/* The XP segmented progress bar - blocks, not a smooth sweep. */
.hxp-boom-panel__meter span {
    display: block;
    height: 100%;
    width: var(--fill, 0%);
    background:
        repeating-linear-gradient(90deg,
            var(--harry-yellow) 0 8px,
            transparent 8px 11px);
    transition: width 0.25s linear;
}

.hxp-boom-panel__actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.hxp-boom-panel__btn {
    padding: 5px 18px;
    font: inherit;
    font-size: 12px;
    color: #f2f2f2;
    background: var(--bar-tab);
    border: 1px solid var(--menu-edge);
    border-radius: 3px;
}

.hxp-boom-panel__btn:hover {
    border-color: var(--harry-yellow);
    filter: brightness(1.15);
}

/* --- the handover ------------------------------------------------------- */

/* Going and arriving are one move split across two documents, and the wallpaper
   is what makes it work: it is not part of the composition that falls, so it is
   the one thing on screen that does not change across the swap. The widgets
   fade off it one at a time, the browser exchanges the page behind an image
   that looks identical either side, and they pop back onto it in order. There
   is no curtain and no black frame - the desktop is simply cleared and relaid.

   The arriving half is pure CSS, on purpose. It is painted before any module
   has run, and `backwards` holds each piece at the from-state through its own
   delay, so nothing appears before its turn. If a module never loads the
   keyframes still play and the desktop still assembles. */

@keyframes hxp-pop-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Each widget grows into place from its own centre - it is absolutely
   positioned, so scaling about the middle lands it exactly where it belongs
   without travelling there. The overshoot is deliberately tiny: 1.5% is enough
   to read as something arriving under its own weight, where anything more
   starts to bounce and, across a dozen widgets in sequence, to look restless. */
@keyframes hxp-pop-in {
    /* Per-segment easing rather than one curve across the whole thing. The
       piece rises quickly and decelerates into the overshoot, then drifts back
       to its size on a slower curve than it arrived on - which is what stops
       the settle reading as a snap at the end of an otherwise soft move. */
    from { opacity: 0; transform: scale(0.9);   animation-timing-function: cubic-bezier(0.16, 0.84, 0.30, 1); }
    58%  { opacity: 1; transform: scale(1.015); animation-timing-function: cubic-bezier(0.36, 0, 0.28, 1); }
    to   { opacity: 1; transform: none; }
}

/* The taskbar is the width of the screen and pinned to the bottom edge, so
   scaling it about its centre pulls it away from that edge and reads as a
   mistake. It only fades. */
@keyframes hxp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

html.hxp-arriving .hxp-logo,
html.hxp-arriving .hxp-nav,
html.hxp-arriving .hxp-icon,
html.hxp-arriving .hxp-win:not([data-state="min"]):not([data-state="closed"]) {
    /* backwards, not forwards: once a piece has arrived it goes back to the
       stylesheet, so nothing here leaks into the rest of the session. */
    animation: hxp-pop-in 560ms linear backwards;   /* the curve lives in the keyframes */
}

html.hxp-arriving .hxp-taskbar {
    animation: hxp-fade-in 560ms var(--ease) backwards;
}

/* The shell first, so there is a desktop for the widgets to land on. */
html.hxp-arriving .hxp-taskbar { animation-delay: 40ms; }
html.hxp-arriving .hxp-logo    { animation-delay: 140ms; }
html.hxp-arriving .hxp-nav     { animation-delay: 235ms; }

/* Then the windows, in the order the stack renders them. */
html.hxp-arriving .hxp-windows > .hxp-win:nth-child(1)  { animation-delay: 330ms; }
html.hxp-arriving .hxp-windows > .hxp-win:nth-child(2)  { animation-delay: 425ms; }
html.hxp-arriving .hxp-windows > .hxp-win:nth-child(3)  { animation-delay: 520ms; }
html.hxp-arriving .hxp-windows > .hxp-win:nth-child(4)  { animation-delay: 615ms; }
html.hxp-arriving .hxp-windows > .hxp-win:nth-child(5)  { animation-delay: 710ms; }
html.hxp-arriving .hxp-windows > .hxp-win:nth-child(6)  { animation-delay: 805ms; }
html.hxp-arriving .hxp-windows > .hxp-win:nth-child(7)  { animation-delay: 900ms; }
html.hxp-arriving .hxp-windows > .hxp-win:nth-child(8)  { animation-delay: 995ms; }
html.hxp-arriving .hxp-windows > .hxp-win:nth-child(9)  { animation-delay: 1090ms; }
html.hxp-arriving .hxp-windows > .hxp-win:nth-child(n+10) { animation-delay: 1185ms; }

/* The bin last - it is the furthest thing from the point of the page. */
html.hxp-arriving .hxp-icon { animation-delay: 1280ms; }

/* A maximised window is the page, not a piece of a composition being rebuilt.
   Popping it in behind everything else would read as a load failure. */
html.hxp-arriving .hxp-win[data-state="max"] { animation-delay: 40ms; }

/* ==========================================================================
   Bouncing word — DVD-player screensaver

   Idle for a minute and it comes to the front over everything, taskbar
   included. It never takes the pointer, so the dim can never swallow a click:
   whatever you do to dismiss it also reaches the page underneath.
   ========================================================================== */

.hxp-saver {
    position: absolute;
    inset: 0;
    z-index: 900;            /* over the windows and the taskbar, under the BSOD */
    overflow: hidden;
    pointer-events: none;
    contain: strict;         /* the drift never invalidates the rest of the page */

    background: rgba(6, 10, 18, 0.55);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}

.hxp-saver.is-awake {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s var(--ease), visibility 0s;
}

.hxp-saver__word {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-display);
    font-size: calc(112 * var(--u));   /* twice the original 56 */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;

    color: var(--saver-colour, var(--harry-yellow));
    text-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.45);

    /* JS writes translate3d only, so the drift stays on the compositor. */
    will-change: transform;
    transition: color 0.25s var(--ease);
}

/* An image in the word's place: bounded, so a large upload still drifts rather
   than filling the screen. */
.hxp-saver__image {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    max-width: calc(420 * var(--u));
    max-height: calc(300 * var(--u));
    filter: drop-shadow(0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.45));
    will-change: transform;
}

/* Nobody wants a word ricocheting behind the copy they are reading. It stays,
   it just stops moving. */
@media (prefers-reduced-motion: reduce) {
    .hxp-saver__word {
        transition: none;
    }
}

/* The stacked tier scrolls; a bouncing word over it is only noise. */
@media (max-width: 1023.98px) {
    .hxp-saver {
        display: none;
    }
}

/* ==========================================================================
   Start menu — XP's two columns, sitting on the taskbar.
   ========================================================================== */

.hxp-start-menu {
    position: absolute;
    left: 0;
    bottom: var(--taskbar-h);
    z-index: 120;               /* over the windows, under the screensaver */

    width: 380px;
    max-width: calc(100vw - 8px);
    border: 1px solid var(--menu-edge);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.45);
    overflow: hidden;

    font-family: var(--font-xp);
    font-size: 12px;
    color: #f2f2f2;

    transform-origin: 0 100%;
    animation: hxp-start-in 0.12s var(--ease);
}

.hxp-start-menu[hidden] {
    display: none;
}

@keyframes hxp-start-in {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hxp-start-menu { animation: none; }
}

/* --- header -------------------------------------------------------------- */

.hxp-start-menu__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bar-face);
    border-bottom: 2px solid var(--harry-yellow);
}

.hxp-start-menu__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--harry-yellow);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 4px;
}

.hxp-start-menu__avatar img {
    width: 18px;
    height: auto;
}

.hxp-start-menu__name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* --- columns ------------------------------------------------------------- */

/* Taller than its contents, with everything held at the top - XP's menu keeps
   its height whether it holds four entries or a dozen, and the space below the
   last one is part of the look. */
.hxp-start-menu__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 340px;
}

.hxp-start-menu__col {
    margin: 0;
    padding: 8px 0;
    list-style: none;

    /* Entries sit at the top; the empty run below them is deliberate. */
    display: flex;
    flex-direction: column;
    align-content: flex-start;
}

.hxp-start-menu__col--left {
    background: var(--menu-col);
}

.hxp-start-menu__col--right {
    background: var(--menu-col-alt);
    border-left: 1px solid var(--menu-rule);
}

.hxp-start-menu__gap {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--menu-rule);
}

.hxp-start-menu__rule {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--menu-rule);
}

/* --- items --------------------------------------------------------------- */

.hxp-start-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.hxp-start-item:hover,
.hxp-start-item:focus-visible {
    background: var(--harry-yellow);
    color: var(--mono-black);
    outline: none;
}

.hxp-start-item:hover .hxp-start-item__sub,
.hxp-start-item:focus-visible .hxp-start-item__sub {
    color: rgba(32, 32, 32, 0.72);
}

.hxp-start-item__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.hxp-start-item--big .hxp-start-item__icon {
    width: 32px;
    height: 32px;
}

.hxp-start-item__icon--glyph {
    display: grid;
    place-items: center;
}

.hxp-start-item__icon--glyph svg {
    width: 24px;
    height: 24px;
}

.hxp-start-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hxp-start-item__title {
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hxp-start-menu__col--right .hxp-start-item__title {
    font-weight: 400;
}

.hxp-start-item__sub {
    line-height: 1.3;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- footer -------------------------------------------------------------- */

.hxp-start-menu__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 7px 14px;
    background: var(--bar-face);
    border-top: 1px solid #3c3c3c;
}

.hxp-start-session {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    background: none;
    border: 0;
    border-radius: 3px;
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.hxp-start-session:hover,
.hxp-start-session:focus-visible {
    color: #fff;
    text-decoration: underline;
    outline: none;
    background: rgba(255, 255, 255, 0.14);
}

/* Log On / Log Off: there for the picture, not a control. */
.hxp-start-session--inert {
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.hxp-start-session__badge {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.hxp-start-session__badge--off {
    background: linear-gradient(180deg, #f0c14b 0%, #d99a1c 55%, #b87c0c 100%);
}

.hxp-start-session__badge--power {
    background: linear-gradient(180deg, #e2564a 0%, #c62b1d 55%, #a81b0f 100%);
}

/* --- the button while the menu is up ------------------------------------- */

.hxp-start[aria-expanded="true"] {
    filter: brightness(1.12);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* The stacked tier used to have no desktop to summon windows onto, so this
   hid the menu outright. It has an accordion now, and a Start entry expands
   its widget and scrolls to it exactly as a nav item does - so the menu works
   there and stays. responsive.css fixes it to the screen instead of the
   document, because the taskbar it sits on is fixed. */