@layer components {

    /* ── Topbar ─────────────────────────────────────────────────────
     Sticky header with backdrop blur, shared by the marketing and app
     shells of every site. Nothing in it wraps; it compacts instead, in
     three states keyed to the breakpoint tokens:
       ≥ --bp-lg (1200)   full: wordmark, full labels, wide nav gaps
       < --bp-lg          compact: logo mark only, short labels, tight gaps
       < --bp-md (900)    nav moves into the hamburger drawer
     A site's bar must fit in full at 1200 and compact at 900. */
    .c-topbar {
        /* One height for every control and one size for every label in the
           bar — nav, buttons, pills — so every top bar matches whatever it
           holds. Change them here. */
        --topbar-control: 2.25rem;
        --topbar-font: var(--fs-body-sm);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(10px);
        background: color-mix(in srgb, var(--color-surface) 85%, transparent);
        border-bottom: 1px solid var(--color-line);
    }

    .c-topbar__inner {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--space-3) var(--space-7);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-5);
    }

    /* Dropdowns anchored in the bar are ordinary text, which may wrap. */
    .c-topbar .c-user-menu {
        white-space: normal;
    }

    @media (max-width: 899.98px) { /* --bp-md */
        .c-topbar__inner {
            padding-inline: var(--space-5);
        }
    }

    .c-topbar__nav {
        display: flex;
        gap: var(--space-7);
        font-size: var(--topbar-font);
        color: var(--color-ink-soft);
    }

    .c-topbar__nav a {
        color: inherit;
        text-decoration: none;
        transition: color var(--dur-fast) var(--ease);
    }

    .c-topbar__nav a:hover {
        color: var(--color-accent);
    }

    /* Same width at which .c-sidenav-toggle appears (app-c-shell.css).
       Without the nav, space-between would centre the logo between the
       hamburger and the actions; the actions take the right edge instead,
       so the logo stays beside the hamburger. */
    @media (max-width: 899.98px) { /* --bp-md */
        .c-topbar__nav { display: none; }
        .c-topbar__cta { margin-left: auto; }
    }

    /* The buttons inherit the bar's label size from here. */
    .c-topbar__cta {
        display: flex;
        gap: var(--space-2);
        align-items: center;
        font-size: var(--topbar-font);
    }

    .c-topbar__cta .c-button {
        height: var(--topbar-control);
    }

    /* ── Icon button (help / cart / messages) ────────────────────
       Circular icon-button rail used by the authenticated CTA tag
       helpers (<app-help-center-header/>, <app-shopping-cart-header/>,
       <app-message-center-header/>). Each tag helper emits its own
       <a class="c-topbar__icon-btn"> so styling is centralized here.
       Notification counts are positioned absolutely via .c-topbar__badge. */
    .c-topbar__icon-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--topbar-control);
        height: var(--topbar-control);
        border-radius: 50%;
        color: var(--color-ink);
        background: transparent;
        text-decoration: none;
        font-size: var(--fs-body);
        transition: background var(--dur-fast) var(--ease),
                    color var(--dur-fast) var(--ease);
    }

    .c-topbar__icon-btn:hover,
    .c-topbar__icon-btn:focus-visible {
        background: color-mix(in srgb, var(--color-ink) 6%, transparent);
        color: var(--color-accent);
        outline: none;
    }

    .c-topbar__icon-btn:focus-visible {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent);
    }

    /* ── Notification badge ──────────────────────────────────────
       Small pill overlaid on an icon-button's top-right corner to
       show a count (messages, cart). Positioned inside the button
       bounds so it sits ON the icon itself. Accent-green fill with
       inverse-surface text reads clearly on both light and dark
       surfaces; the surface-tone ring separates the badge from the
       icon behind it so the number stays legible even when it
       overlaps the bell/cart glyph. */
    .c-topbar__badge {
        position: absolute;
        top: 0.125rem;
        right: 0.125rem;
        min-width: 1rem;
        height: 1rem;
        padding: 0 0.25rem;
        background: var(--color-accent);
        color: var(--color-on-surface-inverse);
        border: 1.5px solid var(--color-surface);
        border-radius: 0.625rem;
        font-size: 0.625rem;
        font-weight: 600;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    /* ── Register slot ───────────────────────────────────────────
       Wrapper around the <app-register-header /> output. Sits leftmost
       in the CTA cluster as a labeled pill button — visually distinct
       from the surrounding icon-buttons. Position-relative so the
       dropdown panel (.c-user-menu) anchors to it. Extra right margin
       creates the gap that separates the action from the icon cluster. */
    .c-topbar__register {
        position: relative;
        display: inline-flex;
        align-items: center;
        margin-right: var(--space-2);
    }

    .c-topbar__register-btn {
        /* Sized to fit the functional topbar — smaller than the icon
           rail's 2.25rem so the labeled pill doesn't visually outweigh
           the icons. Soft accent tint carries the affordance; no
           border, no display-font emphasis. */
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        height: 1.75rem;
        padding: 0 0.625rem;
        border: 0;
        border-radius: 9999px;
        background: color-mix(in srgb, var(--color-accent) 10%, transparent);
        color: var(--color-ink);
        font: inherit;
        font-size: var(--fs-ui-sm);
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        transition: background var(--dur-fast) var(--ease),
                    color var(--dur-fast) var(--ease);
    }
    .c-topbar__register-plus {
        /* Plus glyph carries slightly heavier weight than the label so
           it reads as an "add" affordance, especially in the phone
           icon-only state where it's the only thing visible. */
        font-weight: 600;
        font-size: 1.05em;
        line-height: 1;
    }
    .c-topbar__register-label {
        line-height: 1;
    }

    /* Phone: collapse to a plus-only round icon button. Drops the
       label and reshapes the pill into a circle so the rest of the
       right-side topbar cluster has room to breathe. */
    @media (max-width: 767.98px) {
        .c-topbar__register-btn {
            width: 1.75rem;
            padding: 0;
            justify-content: center;
            gap: 0;
        }
        .c-topbar__register-label {
            display: none;
        }
    }

    .c-topbar__register-btn:hover,
    .c-topbar__register-btn:focus-visible {
        background: color-mix(in srgb, var(--color-accent) 18%, transparent);
        color: var(--color-accent);
        outline: none;
    }

    .c-topbar__register-btn:focus-visible {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent);
    }

    /* ── User slot ───────────────────────────────────────────────
       Wrapper around the <app-user-header /> output. Holds just the
       avatar icon-btn (modern-SaaS convention — name lives inside the
       dropdown, not in the topbar chrome), and anchors the Syncfusion
       context-menu dropdown triggered via #appHeaderbarUser click. */
    .c-topbar__user {
        position: relative;
        display: inline-flex;
        align-items: center;
        margin-left: var(--space-2);
        cursor: pointer;
    }

    /* ── Logo ────────────────────────────────────────────────────── */
    .c-logo {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: 500;
        letter-spacing: -0.01em;
        color: inherit;
        text-decoration: none;
    }

    .c-logo__mark {
        /* Brand verified-logo SVG. Sized to sit comfortably in the topbar
           row. The SVG itself carries the brand green, so the same asset
           works on light and dark surfaces — no color inversion needed. */
        display: block;
        width: auto;
        height: 2rem;
        flex: none;
    }

    /* ── Button arrow flourish ──────────────────────────────────────
     The --solid button's trailing arrow slides on hover. Declared here
     because the topbar is the first place a button appears; behaviour
     applies wherever .c-button__arr markup is used. */
    .c-button__arr {
        display: inline-block;
        transition: transform var(--dur-base) var(--ease);
    }

    .c-button--solid:hover .c-button__arr {
        transform: translateX(3px);
    }

    /* ── Check a document ───────────────────────────────────────────
     The one action that needs no account, so it stays in the header on
     phones too. Accent outline on a wash: louder than the text links,
     quieter than the solid primary beside it. */
    .c-topbar__check {
        border-color: var(--color-accent);
        background: var(--color-accent-wash);
        color: var(--color-accent);
    }

    .c-topbar__check:hover,
    .c-topbar__check:focus-visible {
        background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    }

    /* A button's full label and its compact label; every top bar button
       that has both switches at the same width. */
    .c-topbar__label-short {
        display: none;
    }

    .c-topbar__signin {
        padding-inline: var(--space-3);
        color: var(--color-ink);
        font-weight: 500;
        text-decoration: none;
    }

    .c-topbar__signin:hover {
        color: var(--color-accent);
    }

    /* Compact: the logo mark carries the brand alone, buttons take their
       short labels and the nav tightens — the cheapest space first. */
    @media (max-width: 1199.98px) { /* --bp-lg */
        .c-topbar .c-logo__word,
        .c-topbar__label-long {
            display: none;
        }

        .c-topbar__label-short {
            display: inline;
        }

        .c-topbar__nav {
            gap: var(--space-5);
        }
    }

    /* Phone: the hamburger, logo mark and two buttons have to fit 375px;
       Sign in moves to the drawer. */
    @media (max-width: 767.98px) { /* --bp-sm */
        .c-topbar__signin,
        .c-topbar__cta .c-button__arr {
            display: none;
        }
    }
}