.nav-shell {
    border-bottom: 1px solid var(--pui-color-nav-border, var(--border));
    background: var(--pui-color-nav-background, var(--surface));
    padding: 12px 0;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: calc(var(--page-max-width, var(--pui-breakpoint-xl, 1280px)) + (var(--page-gutter-x, var(--pui-space-5, 1rem)) * 2));
    margin: 0 auto;
    padding-inline: var(--page-gutter-x, var(--pui-space-5, 1rem));
    width: 100%;
    box-sizing: border-box;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--pui-touch-target-min, 2.75rem);
    text-decoration: none;
}

/* The states as well as the resting look, because a logo is a picture of the product and a rule
   underlining it is always somebody else's rule reaching too far. A host may reasonably underline
   links on hover for prose, and that must not reach the masthead.

   Anchored on .nav-shell, because one class is not enough to hold. A plain `a:hover` scores 0,1,1
   and loses, but `a:not(.some-class):hover` counts the class inside :not() and scores 0,2,1, which
   beats `.nav-brand:hover` at 0,2,0 whatever the load order. Two classes and a pseudo-class put
   the logo's own rule ahead of either shape of host link rule. */
.nav-shell .nav-brand:hover,
.nav-shell .nav-brand:focus,
.nav-shell .nav-brand:focus-visible,
.nav-shell .nav-brand:active {
    text-decoration: none;
}

.nav-brand img {
    height: 36px;
    display: block;
}

/* THE LOCKUP: the mark and the name, one standard for every site.

   Sized in em from one property, --platform-shell-lockup-size (1rem by default), so a smaller
   instance such as a footer's scales the mark, the gap and the name together. The mark follows the
   name's layout: a name on two lines stands about 31px tall, and a 36px mark matches it, where a mark
   sized for one line looked undersized beside two. On one line the mark is 28px. */
.nav-brand__lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--platform-shell-lockup-size, 1rem);
}

.nav-brand__lockup .nav-brand__mark {
    width: 1.75em;
    height: 1.75em;
    flex: 0 0 1.75em;
}

.nav-brand__lockup.nav-brand__lockup--stacked .nav-brand__mark {
    width: 2.25em;
    height: 2.25em;
    flex: 0 0 2.25em;
}

/* THE DARK MARK, WHERE A BRAND SUPPLIES ONE.

   Both are in the markup and CSS picks. The alternative is swapping the src in script, which
   flashes the wrong plate on first paint, or choosing on the server, which cannot see the theme:
   an explicit choice is in a cookie the shell reads after the markup is built, and the default is
   prefers-color-scheme, which never reaches the server at all.

   Three states, because that is how many a theme has. An explicit light choice keeps the ordinary
   mark whatever the system prefers; an explicit dark choice takes the dark one; and with no
   choice made the system decides. A host that supplies no dark mark renders one image and none of
   this applies. */
/* Two classes rather than one, and not scoped to an ancestor. `.nav-brand img` above sets
   display:block and carries a class plus a type, which outranks a single class, so the bare class
   loses and both marks render side by side on a light theme. Scoping it under `.nav-brand` fixed
   that and broke the lockup everywhere else, including the footer, which has no such ancestor.
   The element carries both classes, so this wins on specificity and travels. */
.nav-brand__mark.nav-brand__mark--dark {
    display: none;
}

/* THE SWAP ONLY HAPPENS WHERE THERE IS SOMETHING TO SWAP TO.

   The `:has()` guard is the whole point. These rules previously hid the light mark on any dark
   theme, whether or not the host had supplied a dark one, so BeforeYouMove and BeforeYouTravel,
   which supply a single mark, lost their icon entirely on a dark theme: the light one was hidden
   and there was nothing to take its place. Only BeforeYouTrade ships a pair.

   Scoped to the lockup that actually contains a dark mark, a host with one mark keeps showing it
   at every theme, and a host with two swaps between them. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .nav-brand__lockup:has(.nav-brand__mark--dark)
        .nav-brand__mark:not(.nav-brand__mark--dark) {
        display: none;
    }

    html:not([data-theme]) .nav-brand__mark--dark {
        display: inline-block;
    }
}

html[data-theme$="dark"] .nav-brand__lockup:has(.nav-brand__mark--dark)
    .nav-brand__mark:not(.nav-brand__mark--dark) {
    display: none;
}

html[data-theme$="dark"] .nav-brand__mark--dark {
    display: inline-block;
}

/* THE WORDMARK. One standard for every site's name beside its mark.

   PlatformShellBrandWordmark decides the layout from the words: up to two set on one line, three or
   more on two, the plain part small above and the accent part below. Every part is set in em from
   lockup's size, so --platform-shell-lockup-size scales an instance, such as a smaller footer
   lockup, without changing its proportions. That property and the two logo colour tokens are the
   only things a host sets; PlatformShellHeaderStyleContract reports any other host rule here.

   Anchored on .nav-brand__wordmark, so a host rule for spans or text cannot reach the parts. */
.nav-brand__wordmark {
    display: inline-flex;
    flex-direction: column;
    gap: 0.05rem;
    font-size: 1em;
    line-height: 1;
    white-space: nowrap;
}

/* Text flow rather than flex, so the space between two words on one line is a real space. */
.nav-brand__wordmark .nav-brand__line {
    display: block;
}

.nav-brand__wordmark .nav-brand__secondary {
    color: var(--pui-color-logo-text-primary, var(--text));
    font-size: 0.8125em;
    font-weight: var(--pui-font-weight-medium, 500);
    letter-spacing: 0.01em;
}

.nav-brand__wordmark .nav-brand__primary,
.nav-brand__wordmark .nav-brand__accent {
    font-size: 1.0625em;
    font-weight: var(--pui-font-weight-bold, 700);
    letter-spacing: -0.01em;
}

.nav-brand__wordmark .nav-brand__primary {
    color: var(--pui-color-logo-text-primary, var(--text));
}

.nav-brand__wordmark .nav-brand__accent {
    color: var(--pui-color-logo-text-secondary, var(--accent));
}

.nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: var(--pui-touch-target-min, 2.75rem);
    min-height: var(--pui-touch-target-min, 2.75rem);
    background: transparent;
    border: 0;
    border-radius: var(--pui-radius-sm, 0.375rem);
    padding: 6px;
    cursor: pointer;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--pui-color-nav-text, var(--text));
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex: 1;
}

.nav-scrim {
    display: none;
}

.nav-close {
    display: none;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list a {
    text-decoration: none;
    color: var(--pui-color-nav-text, var(--text));
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--pui-radius-sm, 0.375rem);
    transition: color var(--pui-motion-fast, 160ms ease);
}

.nav-list a:hover {
    color: var(--pui-color-nav-text-active, var(--accent));
}

/* THE BAR'S LINKS: one dominant colour for hover and for where the reader is, never an underline.

   A link turns --pui-color-nav-text-active on hover, and keeps it while it is the current page, so
   the item a reader chose stays marked until they choose another. The dropdown button takes it on
   hover, while its menu is open, and while one of its pages is current. Each host sets that token to
   its dominant brand colour, far enough from its resting text to read as a change: a difference of
   at least PlatformShellHeaderStyleContract.MinimumNavStateDifference, which each host's tests check.

   Anchored on .nav-shell and the list's own items, scoring 0,3,2 on hover, because hosts underline
   links on hover for prose with rules such as `a:not(.some-class):hover` (0,2,1) and `a:hover`
   (0,1,1). Those load after this stylesheet, and at the lighter specificity they reached the bar and
   underlined its links. */
.nav-shell .nav-list > li > a {
    text-decoration: none;
}

.nav-shell .nav-list > li > a:hover,
.nav-shell .nav-list > li > a[aria-current="page"],
.nav-shell .nav-dropdown-button:hover,
.nav-shell .nav-dropdown-button[aria-expanded="true"],
.nav-shell .nav-dropdown-button.nav-dropdown-button--active {
    color: var(--pui-color-nav-text-active, var(--accent));
    text-decoration: none;
}

.nav-list a[aria-current="page"],
.nav-dropdown-button--active {
    color: var(--pui-color-nav-text-active, var(--accent));
}

.nav-list a:focus-visible,
.nav-dropdown-button:focus-visible,
.nav-toggle:focus-visible,
.nav-close:focus-visible,
.nav-sublist a:focus-visible,
.nav-sublist button:focus-visible,
.footer-links a:focus-visible,
.footer-terms:focus-visible {
    outline: none;
    box-shadow: var(--pui-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.2));
}

.nav-list a.nav-leading-link {
    display: inline-flex;
    align-items: center;
    /* The badge sits in the flow beside the label rather than over it: a count laid on top of a
       word is unreadable at either end of the label's length. */
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: normal;
}

/* A count of the reader's own items. Deliberately quiet: this is how many things somebody kept,
   not a notification, and a loud pill beside one nav item pulls the eye away from the page. */
.nav-list a.nav-leading-link .nav-leading-link__badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: currentColor;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* The digit takes the page background so it reads against the link's own colour, whatever that
   colour is on the current section. */
.nav-list a.nav-leading-link .nav-leading-link__badge > [aria-hidden="true"] {
    color: var(--platform-shell-surface, #ffffff);
}

/* Announced, never shown. Not `display: none`, which removes it from the accessibility tree too --
   the number beside a link is read as the label running into a digit without the word. */
.platform-shell-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    /* Both forms: clip is what older engines honour, clip-path is what current ones do. */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-actions .mud-button-root {
    min-width: 0;
}
.nav-actions .mud-button-root.mud-button-filled,
.nav-actions .mud-button-root.mud-button-outlined {
    padding-inline: 0.75rem;
}

.nav-actions .theme-toggle-button {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--pui-color-surface-control, var(--surface_alt));
    color: var(--pui-color-nav-text, var(--text));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition:
        background var(--pui-motion-fast, 160ms ease),
        border-color var(--pui-motion-fast, 160ms ease),
        color var(--pui-motion-fast, 160ms ease);
}

.nav-actions .theme-toggle-button:focus-visible {
    outline: none;
    box-shadow: var(--pui-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.2));
}

.nav-actions .theme-toggle-button:hover {
    background: var(--pui-color-nav-hover-background, var(--state_hover_bg));
}

.nav-actions .theme-toggle-icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* PRODUCT DROPDOWN. One standard for every host.

   Its geometry, surface, type and motion are owned here and nowhere else. A host themes it through
   the --pui colour tokens and switches its behaviour through the shell definition; its test suite
   checks its stylesheets against PlatformShellHeaderStyleContract, so a host rule cannot quietly
   restyle it. The --platform-shell-menu-* properties are this component's own, not a host hook. */

.nav-dropdown {
    position: relative;

    /* How long an open menu waits after the pointer leaves before it starts to close. Long enough
       for a diagonal move from the button to a far column, which crosses the bar and the gap under
       it outside the button; short enough that moving on to the next item still reads as instant.
       A pause, not motion, so reduced motion keeps it. */
    --platform-shell-menu-linger: 150ms;
}

.nav-dropdown-button {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pui-color-nav-text, var(--text));
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--pui-radius-sm, 0.375rem);
    transition: color var(--pui-motion-fast, 160ms ease);
}

.products-button {
    font-size: 15px;
    font-weight: 700;
}

.nav-dropdown-button:hover {
    color: var(--pui-color-nav-text-active, var(--accent));
}

/* Turns back after the same pause as the menu, so it does not point up at a closed menu or down
   at an open one. */
.nav-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--pui-motion-fast, 160ms ease) var(--platform-shell-menu-linger, 0s);
}

/* The caret points up while its menu is open, by hover or by the button. The modifier class is
   rendered only when the shell definition's FlipProductDropdownCaret flag is on, so the flag is the
   one switch for the turn. Anchored on .nav-shell with both dropdown classes, scoring 0,5,0 and
   0,6,0, because a host rule restyling the caret such as `.nav-shell .nav-dropdown:hover .nav-caret`
   scores 0,4,0 and loads later: at a tie it would cancel the flag without anyone turning it off. */
.nav-shell .nav-dropdown.nav-dropdown--flip-caret:hover .nav-caret,
.nav-shell .nav-dropdown.nav-dropdown--flip-caret .nav-dropdown-button[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
    transition-delay: 0s;
}

.nav-sublist {
    position: absolute;
    z-index: 20;
    display: none;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Narrow screens, where the drawer shows the list in place. Wide screens replace this with the
   fade further down. */
.nav-sublist.open,
.nav-dropdown:hover .nav-sublist {
    display: flex;
    animation: nav-sublist-enter var(--pui-motion-medium, 240ms ease);
}

@keyframes nav-sublist-enter {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Primary text rather than the bar's softer navigation colour: inside the panel these are the
   content, read against a raised surface. Weight 500, so a column of six reads as a list rather
   than a block of bold.

   Anchored on .nav-shell .nav-dropdown, scoring 0,3,1, and stating every property a host's header
   links set. The menu's links sit inside .nav-list, so a host rule for its bar links such as
   `.nav-shell .nav-list a` (0,2,1) reaches them too: measured, hosts set colour, size, weight,
   letter-spacing, padding, background and white-space that way, and each would otherwise have
   given that host's menu its own type. */
.nav-shell .nav-dropdown .nav-sublist a,
.nav-shell .nav-dropdown .nav-sublist button {
    display: inline;
    margin: 0;
    padding: 0;
    color: var(--pui-color-text-primary, var(--text));
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
    background: none;
    border: 0;
    text-align: left;
    text-decoration: none;
    border-radius: var(--pui-radius-sm, 0.375rem);
    transition:
        background var(--pui-motion-fast, 160ms ease),
        color var(--pui-motion-fast, 160ms ease);
    cursor: pointer;
}

.nav-shell .nav-dropdown .nav-sublist a:hover,
.nav-shell .nav-dropdown .nav-sublist button:hover,
.nav-shell .nav-dropdown .nav-sublist a[aria-current="page"] {
    color: var(--pui-color-nav-text-active, var(--accent));
}

.nav-sublist-back {
    display: none;
}

/* Grouped dropdown: titled columns instead of a single list.

   THE COLUMNS MUST NOT BE SQUEEZED. Three columns once divided a single-column minimum width
   between them: every column came out under 115px, so every heading and every link wrapped, and
   the menu read as ragged text rather than a menu. Each column sizes to its own longest label and
   refuses to wrap, and the menu widens to fit them. */
.nav-sublist-group {
    display: flex;
    flex-direction: column;

    /* Sized by its own content, so a column is as wide as its longest label and no wider. */
    flex: 0 0 auto;
    min-width: 0;
    align-items: flex-start;
}

.nav-shell .nav-dropdown .nav-sublist-group__title {
    color: var(--pui-color-text-muted, var(--text_muted));
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: var(--pui-letter-spacing-caps, 0.08em);
    text-transform: uppercase;

    /* A heading broken across two lines pushes its column's first link out of line with its
       neighbours', so the columns no longer start together. */
    white-space: nowrap;
}

.nav-shell .nav-dropdown .nav-sublist-group__links {
    display: flex;
    flex-direction: column;
    gap: var(--pui-space-1, 0.125rem);
    margin: var(--pui-space-4, 0.75rem) 0 0;
    padding: 0;
    list-style: none;
}

/* One line each, and never underlined. A wrapped link in a narrow column reads as two entries, and
   an underline inside a menu competes with the hover state that actually signals interactivity. */
.nav-shell .nav-dropdown .nav-sublist-group__links a {
    white-space: nowrap;
}

/* Under the links it describes, sized as supporting text rather than as another link, so the eye
   does not try to click it. Bounded so a description cannot widen the menu, and balanced so its
   two lines come out even. */
.nav-shell .nav-dropdown .nav-sublist-group__description {
    margin: var(--pui-space-2, 0.25rem) 0 0;
    max-width: 24ch;
    color: var(--pui-color-text-muted, var(--text_muted));
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    text-wrap: balance;
}

/* The lead column's links carry the active colour, so the page most readers came for stands out
   from the ways into one part of it. */
.nav-shell .nav-dropdown .nav-sublist-group--lead .nav-sublist-group__links a {
    color: var(--pui-color-nav-text-active, var(--accent));
    font-weight: 600;
}

/* Anchored on .nav-sublist as well, because two classes and a type are not enough to hold against
   a host's global link rule. A selector such as `a:not(.some-class):hover` counts the class inside
   :not(), so it scores 0,2,1 and ties with `.nav-sublist-group__links a:hover`; host stylesheets
   load after the shell's, so the host wins the tie and the menu underlines on hover. The extra
   class puts the menu's own rule ahead wherever either stylesheet loads. */
.nav-sublist .nav-sublist-group__links a:hover,
.nav-sublist .nav-sublist-group__links a:focus-visible {
    text-decoration: none;
}

@media (min-width: 901px) {
    /* The bar is the panel's containing block, so the panel drops from the bar's bottom edge on
       every host whatever the bar's height or where the button sits in it. Measured on three hosts,
       the button ended 18px, 20px and 23px above that edge, so an offset taken from the button
       landed somewhere different on each, and two of them opened the panel over the bar. A host
       that makes the bar sticky or fixed keeps that: both are positioned too. */
    .nav-shell {
        position: relative;
    }

    .nav-shell .nav-dropdown {
        position: static;
    }

    /* The bridge from the button down to the panel. As wide as the button, there only while the
       menu is open so the page under the bar never opens it, and long enough to end under the
       panel, which paints over the rest. */
    .nav-shell .nav-dropdown-button {
        position: relative;
    }

    .nav-shell .nav-dropdown:hover .nav-dropdown-button::after,
    .nav-shell .nav-dropdown-button[aria-expanded="true"]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 56px;
    }

    .nav-shell .nav-sublist {
        --platform-shell-menu-pad-y: var(--pui-space-3, 0.5rem);
        --platform-shell-menu-pad-x: var(--pui-space-3, 0.5rem);
        --platform-shell-menu-chip-x: var(--pui-space-4, 0.75rem);
        --platform-shell-menu-shift-x: 0px;

        /* 10px: a clear breath under the bar's hairline, so the panel reads as dropped from the bar
           rather than colliding with it. */
        top: calc(100% + 10px);

        /* Left at its static position, under the button, then drawn back by its border, padding
           and link padding so the first link's text starts exactly under the button's label. */
        left: auto;
        margin-left: calc(-1 * (1px + var(--platform-shell-menu-pad-x) + var(--platform-shell-menu-chip-x)));
        display: flex;
        gap: var(--pui-space-1, 0.125rem);
        width: max-content;
        min-width: 220px;
        padding: var(--platform-shell-menu-pad-y) var(--platform-shell-menu-pad-x);
        background: var(--pui-color-surface-raised, var(--surface));
        border: 1px solid var(--pui-color-border-default, var(--border));
        border-radius: var(--pui-radius-lg, 1rem);
        box-shadow: var(--pui-shadow-menu, 0 24px 60px -20px rgba(15, 23, 42, 0.3));

        /* Fades and rises rather than appearing, and closes only after the linger, so a pointer
           crossing the gap reaches it before it goes. Visibility rides the same transition, which
           keeps the panel reachable until the fade ends and out of the tab order once closed. */
        visibility: hidden;
        opacity: 0;
        translate: var(--platform-shell-menu-shift-x) -4px;
        animation: none;
        transition:
            opacity var(--pui-motion-fast, 160ms ease) var(--platform-shell-menu-linger),
            translate var(--pui-motion-fast, 160ms ease) var(--platform-shell-menu-linger),
            visibility var(--pui-motion-fast, 160ms ease) var(--platform-shell-menu-linger);
    }

    /* Spans the gap between the bar and the panel across the panel's full width, so a diagonal
       move to a far column holds. Hidden with the panel. */
    .nav-shell .nav-sublist::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 11px;
    }

    .nav-shell .nav-dropdown:hover .nav-sublist,
    .nav-shell .nav-sublist.open,
    .nav-shell .nav-dropdown.nav-dropdown--focus-open:has(:focus-visible) .nav-sublist {
        visibility: visible;
        opacity: 1;
        translate: var(--platform-shell-menu-shift-x) 0;
        transition-delay: 0s;
    }

    /* Keyboard focus opens the menu only for a host that opts in, and the caret follows. Pointer
       focus must not: a clicked link keeps focus after client-side navigation, and would hold the
       menu open once the pointer had moved away. A mouse click does not match :focus-visible. */
    .nav-shell .nav-dropdown.nav-dropdown--flip-caret.nav-dropdown--focus-open:has(:focus-visible) .nav-caret {
        transform: rotate(180deg);
        transition-delay: 0s;
    }

    .nav-shell .nav-dropdown .nav-sublist a:hover,
    .nav-shell .nav-dropdown .nav-sublist a:focus-visible {
        background: var(--pui-color-nav-hover-background, var(--state_hover_bg));
        color: var(--pui-color-nav-text-active, var(--accent));
    }

    /* A single column: each link a full-width row with its own hover chip. */
    .nav-shell .nav-dropdown .nav-sublist:not(.nav-sublist--groups) a {
        display: block;
        padding: var(--pui-space-3, 0.5rem) var(--platform-shell-menu-chip-x);
        white-space: nowrap;
    }

    .nav-shell .nav-sublist--groups {
        --platform-shell-menu-pad-y: var(--pui-space-6, 1.5rem);
        --platform-shell-menu-pad-x: var(--pui-space-7, 2rem);
        --platform-shell-menu-gap: var(--pui-space-8, 2.5rem);

        /* The space either side of a lead column's hairline, from the text to the line. */
        --platform-shell-menu-lead-space: calc(var(--platform-shell-menu-gap) - var(--platform-shell-menu-chip-x));

        /* Grouped links bleed their chip padding back out, so only border and padding stand
           between the panel's edge and the first column's text. */
        margin-left: calc(-1 * (1px + var(--platform-shell-menu-pad-x)));
        flex-direction: row;
        align-items: stretch;
        gap: var(--platform-shell-menu-gap);
        min-width: 0;
    }

    /* Sized to the label, so the gap between columns stays visible and a hover chip covers the
       word rather than the whole column. The negative margin keeps the text in line with its title. */
    .nav-shell .nav-dropdown .nav-sublist--groups .nav-sublist-group__links a {
        display: inline-block;
        margin-left: calc(-1 * var(--platform-shell-menu-chip-x));
        padding: var(--pui-space-3, 0.5rem) var(--platform-shell-menu-chip-x);
    }

    /* The hairline sits midway between the lead column's text and the next column's. The link's box
       runs chip-x past its text, so the column pads the rest; the negative margin takes the column
       gap after the line down to the same space. */
    .nav-shell .nav-sublist--groups .nav-sublist-group--lead {
        padding-right: calc(var(--platform-shell-menu-lead-space) - var(--platform-shell-menu-chip-x));
        margin-right: calc(var(--platform-shell-menu-lead-space) - var(--platform-shell-menu-gap));
        border-right: 1px solid var(--pui-color-border-default, var(--border));
    }
}

/* Narrow wide screens. Below 1100px a grouped panel hung from its button can run past the window's
   edge: measured 28px over at 901px on one host, whose longest column alone is 260px, so tighter
   spacing cannot take it in everywhere. Here the panel centres on the bar instead, which is its
   containing block, so it cannot leave the window at any width the columns fit, and it still sits
   over the button for the pointer's path down. Tighter padding and gaps keep it compact. */
@media (min-width: 901px) and (max-width: 1099px) {
    .nav-shell .nav-sublist--groups {
        --platform-shell-menu-pad-x: var(--pui-space-6, 1.5rem);
        --platform-shell-menu-gap: var(--pui-space-6, 1.5rem);
        --platform-shell-menu-lead-space: 20px;
        --platform-shell-menu-shift-x: -50%;
        left: 50%;
        margin-left: 0;
        max-width: calc(100vw - 2 * var(--pui-space-5, 1rem));
    }
}

.nav-status-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.nav-status-dot--success {
    background: var(--pui-color-success);
}

.nav-status-dot--warning {
    background: var(--pui-color-warning);
}

.nav-status-dot--danger {
    background: var(--pui-color-danger);
}

.nav-status-text {
    color: var(--pui-color-nav-text, var(--text));
}

.nav-status-label {
    color: var(--pui-color-text-muted, var(--text_muted));
    font-size: 12px;
    font-weight: 600;
}

.footer-shell {
    margin-top: 20px;
    padding-bottom: 60px;
    color: var(--pui-color-text-muted, var(--text_muted));
}

.footer-shell__divider {
    border: 0;
    border-top: 1px solid var(--pui-color-border-default, var(--border));
    opacity: 1;
}

.footer-shell__divider,
.footer-top,
.footer-legal {
    box-sizing: border-box;
    max-width: calc(var(--page-max-width, var(--pui-breakpoint-xl, 1280px)) + (var(--page-gutter-x, var(--pui-space-5, 1rem)) * 2));
    margin-inline: auto;
    width: 100%;
}

.footer-top,
.footer-legal {
    padding-inline: var(--page-gutter-x, var(--pui-space-5, 1rem));
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
}

/* A footer with groups that flow across it rather than down a column.

   Ten links stacked beside neighbours of four and three made the footer about that one group, so
   a group can flow its links across the footer's width instead. Any number of groups can: each
   flowing group takes the full width right of the brand block on a row of its own, in the host's
   order, and groups that still stack as columns sit beneath the last of them, side by side,
   sharing its left edge. The whole right-hand block reads as one aligned unit.

   Placement is by column only. No row is named, so every group lands on the next free row in
   source order and two groups can never be given the same cell. Naming rows is what went wrong
   before: a fixed `grid-row: 1` for the flowing group could only ever hold one, and a later blanket
   rule put both column groups in the same cell, where they printed on top of each other.

   The column groups are counted among themselves, `:nth-child(... of ...)`, and the brand block
   and flowing groups are excluded from that count by name. A bare `:not(.footer-column--wide)` also
   matches the brand block, and once moved it into column two, which is the exact reverse of the
   intent. */
.footer-top:has(.footer-column--wide) {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 180px) minmax(0, 1fr);
    align-items: start;
}

/* The brand block spans the first two rows, so a brand block taller than the first group shares
   its height across both rather than setting the first row's alone and pushing every later row
   down by the difference. Only where a second row exists, or the span would add an empty one. */
.footer-top:has(.footer-column--wide ~ .footer-column) .footer-column--lead {
    grid-row: span 2;
}

/* Spanning both tracks. Confined to the first, the flowed links would wrap far too early. */
.footer-top:has(.footer-column--wide) .footer-column--wide {
    grid-column: 2 / -1;
}

.footer-top:has(.footer-column--wide) .footer-column--wide ~ .footer-column:nth-child(odd of .footer-column:not(.footer-column--wide, .footer-column--lead)) {
    grid-column: 2;
}

.footer-top:has(.footer-column--wide) .footer-column--wide ~ .footer-column:nth-child(even of .footer-column:not(.footer-column--wide, .footer-column--lead)) {
    grid-column: 3;
}

.footer-links--flow {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 28px;
}

/* The entry the rest of a group are ways of interrogating, so it leads and is weighted to say so.
   Its own opt-in rather than part of flowing: once several groups could flow, tying the two
   together would have bolded the first link of every one of them, whether or not it leads. */
.footer-links--emphasise-first li:first-child a {
    font-weight: 700;
}

@media (max-width: 900px) {
    /* One column throughout: a wrapped row of ten reads as a paragraph of links on a narrow
       screen, and side-by-side groups have nowhere to go. */
    .footer-top:has(.footer-column--wide) {
        grid-template-columns: 1fr;
    }

    .footer-top:has(.footer-column--wide ~ .footer-column) .footer-column--lead,
    .footer-top:has(.footer-column--wide) .footer-column--wide,
    .footer-top:has(.footer-column--wide) .footer-column--wide ~ .footer-column:nth-child(odd of .footer-column:not(.footer-column--wide, .footer-column--lead)),
    .footer-top:has(.footer-column--wide) .footer-column--wide ~ .footer-column:nth-child(even of .footer-column:not(.footer-column--wide, .footer-column--lead)) {
        grid-column: auto;
        grid-row: auto;
    }

    .footer-links--flow {
        flex-direction: column;
        gap: 8px;
    }
}

/* Every level FooterGroupHeadingLevel can produce. The footer column title looks the same
   whatever its position in the host's outline, the level is a document-structure decision, not
   a visual one. */
.footer-column h2,
.footer-column h3,
.footer-column h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pui-color-text-muted, var(--text_muted));
    text-transform: uppercase;
    letter-spacing: var(--pui-letter-spacing-caps, 0.04em);
}

.footer-links a {
    color: var(--pui-color-text-muted, var(--text_muted));
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--pui-radius-sm, 0.375rem);
    transition: color var(--pui-motion-fast, 160ms ease);
}

.footer-links a:hover,
.footer-terms:hover {
    color: var(--accent);
}

/* The estate's line, sitting with the copyright rather than above it. Set in the label face and
   letterspaced so it reads as a mark rather than as another sentence competing with the legal
   text beside it.

   DELIBERATELY NO COLOUR. It inherits from .footer-legal, which each host already sets for its own
   footer, and footers here are not all the same. BeforeYouMove's is dark green and colours its
   legal row with a light token; a global "strong text" colour written here painted dark text on
   that dark ground and the line was invisible on the one app it was added for. Inheriting is
   legible everywhere by construction. A host that wants it branded overrides this one property. */
.footer-legal__copyright {
    grid-column: 1;
    justify-self: start;
}

.footer-legal__aside {
    grid-column: 3;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 16px;
}

/* One column on a phone, where three across is three things too small to read. Left-aligned
   rather than centred, so they line up with everything above them. */
@media (max-width: 720px) {
    .footer-legal {
        grid-template-columns: 1fr;
    }

    .footer-legal__copyright,
    .footer-legal__aside,
    .footer-principle {
        grid-column: 1;
        justify-self: start;
    }

    .footer-legal__aside {
        justify-content: flex-start;
    }
}

.footer-principle {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    font-family: var(--pui-font-family-label, var(--font-label, inherit));
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.11em;
}

/* Copyright left, the estate's line centred, links and provenance right, the same on every app.
   Grid rather than flex, because centring the middle between two groups of different widths is
   what 1fr auto 1fr does and what space-between cannot. Columns are named explicitly, so a row
   with no principle leaves the middle empty instead of shifting the other two. */
.footer-legal {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px 16px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--pui-color-text-muted, var(--text_muted));
}

.footer-terms {
    color: var(--pui-color-text-muted, var(--text_muted));
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--pui-radius-sm, 0.375rem);
    transition: color var(--pui-motion-fast, 160ms ease);
}

.footer-shell--wrapped .footer-top {
    align-items: start;
}

.footer-shell--wrapped .footer-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-shell--wrapped .footer-column h2,
.footer-shell--wrapped .footer-column h3,
.footer-shell--wrapped .footer-column h4 {
    margin: 0;
}

.footer-shell--wrapped .footer-links {
    flex-flow: row wrap;
    gap: 8px 16px;
}

.footer-shell--wrapped .footer-links li {
    display: flex;
}

@media (max-width: 768px) {
    .footer-shell--wrapped .footer-links {
        flex-direction: column;
        gap: 8px;
    }

    .footer-shell--wrapped .footer-links li {
        display: block;
    }
}

@media (max-width: 900px) {
    .nav-container {
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: flex;
        margin-left: auto;
    }

    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--pui-color-scrim, rgba(17, 24, 39, 0.45));
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--pui-motion-fast, 0.2s ease);
        z-index: 1000;
    }

    .nav-scrim.open {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-links {
        position: fixed;
        inset: 0 0 0 auto;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        width: min(320px, 85vw);
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        display: flex;
        padding: 20px;
        background: color-mix(in srgb, var(--pui-color-nav-background, var(--surface)) 88%, transparent);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        transform: translateX(100%);
        transition: transform var(--pui-motion-medium, 0.2s ease);
        box-shadow: var(--pui-shadow-raised, 0 12px 24px rgba(0, 0, 0, 0.12));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        pointer-events: none;
        visibility: hidden;
        will-change: transform;
        contain: layout paint;
        z-index: 1001;
    }

    .nav-links.open {
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
    }

    .nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        background: none;
        border: 0;
        border-radius: var(--pui-radius-sm, 0.375rem);
        font-size: 26px;
        line-height: 1;
        padding: 4px;
        min-width: var(--pui-touch-target-min, 2.75rem);
        min-height: var(--pui-touch-target-min, 2.75rem);
        cursor: pointer;
    }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .nav-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .nav-status-dot {
        display: none;
    }

    /* Full width, so the list under it spans the drawer rather than the width of its label. */
    .nav-dropdown {
        align-self: stretch;
    }

    /* In the drawer the menu is a list in place, not a floating panel: it has no surface, border or
       shadow of its own, and every row is tall enough to tap. */
    .nav-sublist {
        position: static;
        width: 100%;
        margin-top: var(--pui-space-3, 0.5rem);
    }

    .nav-shell .nav-dropdown .nav-sublist a {
        display: flex;
        align-items: center;
        min-height: var(--pui-touch-target-min, 2.75rem);
        font-size: 15px;

        /* A long label wraps here rather than running out of a drawer a third of a screen wide. */
        white-space: normal;
    }

    /* Grouped columns stack inside the drawer. */
    .nav-sublist--groups {
        flex-direction: column;
        gap: 18px;
    }

    .nav-shell .nav-dropdown .nav-sublist-group__links {
        gap: 0;
        margin-top: var(--pui-space-2, 0.25rem);
    }

    .nav-sublist-back {
        display: block;
    }
}


/* A navigation item whose page is not built yet. Quieter than a link and not
   interactive, but never conveyed by colour alone, the note carries the meaning. */
.platform-shell-nav-link--unavailable {
  opacity: 0.55;
  cursor: default;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

/* UXD-12. This was 0.6875rem, 11px, the smallest text anywhere in the estate and the only thing
   under 12px. It is uppercase and letterspaced as well, which costs more legibility again, and it
   carries real information: that a section a reader is looking for is not available yet. 0.75rem
   keeps it clearly subordinate to the link beside it and stops it being the hardest thing on the
   page to read. */
.platform-shell-nav-link__note {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}