.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;
}

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

.nav-brand__lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.nav-brand__mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
}

.nav-brand__wordmark {
    display: inline-flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1;
}

.nav-brand__line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18rem;
}

.nav-brand__primary,
.nav-brand__secondary {
    color: var(--pui-color-logo-text-primary, var(--text));
    font-size: 0.8rem;
    font-weight: var(--pui-font-weight-medium, 500);
}

.nav-brand__accent {
    color: var(--pui-color-logo-text-secondary, var(--accent));
    font-size: 1.05rem;
    font-weight: var(--pui-font-weight-bold, 700);
}

.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));
}

.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;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

.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));
}

.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);
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown-button[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
}

.nav-sublist {
    position: absolute;
    top: 100%;
    margin-top: 10px;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 14px 12px;
    min-width: 180px;
    background: var(--pui-color-surface-raised, var(--surface));
    border: 1px solid var(--pui-color-border-default, var(--border));
    border-radius: 16px;
    box-shadow: var(--pui-shadow-raised, 0 12px 24px rgba(0, 0, 0, 0.08));
    z-index: 20;
}

.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);
    }
}

.nav-sublist a,
.nav-sublist button {
    color: var(--pui-color-nav-text, var(--text));
    font-weight: 600;
    font-size: 14px;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    border-radius: var(--pui-radius-sm, 0.375rem);
    transition: color var(--pui-motion-fast, 160ms ease);
    cursor: pointer;
}

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

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

/* Grouped product dropdown: titled columns instead of a single link list. */
.nav-sublist--groups {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
}

.nav-sublist-group {
    display: flex;
    flex-direction: column;
}

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

.nav-sublist-group__links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.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;
}

/* 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-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 40px;
    background-color: var(--surface_alt);
    border-top: 1px solid var(--border);
}

.footer-bar-container {
    height: 100%;
    padding: 5px 0;
    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));
    box-sizing: border-box;
}

.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;
    }

    .nav-sublist {
        position: static;
        display: none;
        width: 100%;
        margin-top: 8px;
        box-shadow: none;
    }

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

    .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;
}

.platform-shell-nav-link__note {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}