/* ==========================================================================
   WizBrand — the navbar system.
   ==========================================================================

   ONE file, because there is meant to be ONE navbar.

   Before this, the project carried six different bars and a page could show
   any of them:

     A  page-layouts/navbar.blade.php          dark navy, ~74 pages
     F  layout/head.blade.php .wz-topbar       WHITE, ~76 dashboard pages
     D  layouts/app.blade.php                  Laravel's scaffold default, 5
     E  publicview.blade.php                   its own inline Bootstrap bar
     B  layouts/page-layouts/navbar.blade.php  dead, nothing includes it
     C  layouts/orgs-page-layout/org-nav.blade.php  dead, 473 lines

   A and F were the two live ones, and they did not even agree on a
   background colour -- that is what made the site feel like two products
   stitched together. Both are skinned from this file now, from the same
   tokens, so they are the same bar with different middles: the public bar
   carries the eight marketing links, the dashboard bar carries the sidebar
   toggle and the page heading (it sits beside a 260px sidebar that already
   holds the navigation, so marketing links there would be noise).

   No @import and no webfont request. The old navbar pulled Inter from
   fonts.googleapis.com; browser tracking-prevention blocks that host for
   some visitors, which is the documented cause of the "page loads forever"
   bug in this project. The system stack renders this design as drawn.
   ========================================================================== */

:root {
    /* The bar itself */
    --wznav-bg-top: #142c60;
    --wznav-bg-bot: #0d1f45;
    --wznav-line: rgba(255, 255, 255, .09);
    --wznav-h: 60px;

    /* Type on the bar */
    --wznav-ink: #c3d3f0;
    --wznav-ink-strong: #ffffff;
    --wznav-ink-soft: #9db3d9;

    /* Controls on the bar */
    --wznav-fill: rgba(255, 255, 255, .1);
    --wznav-fill-hi: rgba(255, 255, 255, .2);
    --wznav-stroke: rgba(255, 255, 255, .15);

    /* Accent. The gold is the mark's gold -- nowhere else on the bar. */
    --wznav-gold: #ffc93c;
    --wznav-danger: #e11d48;

    /* Dropdown panels. Light on purpose: every page under this bar is
       light, and the old dark #0e2350 panel read as a piece of another
       application floating over the page. */
    --wznav-pop: #ffffff;
    --wznav-pop-line: #e3eaf5;
    --wznav-pop-ink: #0f1b34;
    --wznav-pop-ink-2: #41506b;
    --wznav-pop-muted: #5c6e8b;
    --wznav-pop-tint: #eaf1ff;
    --wznav-pop-brand: #1d4ed8;

    --wznav-font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* Set by wizbrand-navbar.js while the drawer or a dialog is open, so the
   page behind does not scroll under the overlay. A class, not an inline
   style, because this project forbids style="" in markup and the same rule
   is worth keeping in script. */
body.wznav-open {
    overflow: hidden;
}

/* The sprite in partials/wz-mark.blade.php must take no space. */
.wz-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ==========================================================================
   1 · Shared atoms — used by BOTH bars
   ========================================================================== */

/* ---- brand lockup ---- */
.wznav__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    text-decoration: none;
}

.wznav__brand:hover,
.wznav__brand:focus {
    text-decoration: none;
}

.wznav__mark {
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

.wznav__word {
    font: 800 17px/1 var(--wznav-font);
    letter-spacing: -.02em;
    color: var(--wznav-ink-strong);
    white-space: nowrap;
}

.wznav__word span {
    color: #8fb2f0;
    font-weight: 700;
}

/* ---- round icon button (the bell) ---- */
.wznav .wzicon,
.wz-topbar .wzicon {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--wznav-fill);
    border: 1px solid var(--wznav-stroke);
    color: #dbe6fb;
    cursor: pointer;
}

.wznav .wzicon:hover,
.wznav .wzicon:focus-visible,
.wz-topbar .wzicon:hover,
.wz-topbar .wzicon:focus-visible {
    background: var(--wznav-fill-hi);
    color: var(--wznav-ink-strong);
}

/* The count is drawn from the attribute, not from a text node, and the badge
   is always written rather than wrapped in an @if -- a Blade directive inside
   the button is text to an HTML scanner, which is a second label competing
   with aria-label. Nothing to show at zero, so it is hidden here. */
.wzicon__dot::before {
    content: attr(data-count);
}

.wzicon__dot[data-count="0"] {
    display: none;
}

.wzicon__dot {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--wznav-danger);
    color: #fff;
    font: 700 10.5px/18px var(--wznav-font);
    text-align: center;
    border: 2px solid var(--wznav-bg-bot);
}

/* ---- the account pill ---- */
.wznav .wzme,
.wz-topbar .wzme {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 3px;
    background: var(--wznav-fill);
    border: 1px solid var(--wznav-stroke);
    border-radius: 999px;
    color: var(--wznav-ink-strong);
    font: 700 13px/1 var(--wznav-font);
}

.wznav .wzme:hover,
.wz-topbar .wzme:hover {
    background: rgba(255, 255, 255, .18);
}

/* The pill is a wrapper now, not a button: the photo and the name do
   different things, so they are two controls. They were one, and a single
   click ran both -- the menu opened and the photo lightbox opened straight
   over it. */
.wzme__pic,
.wzme__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.wzme__pic {
    border-radius: 50%;
    line-height: 0;
    cursor: zoom-in;
}

.wzme__pic:hover img,
.wzme__pic:focus-visible img {
    border-color: rgba(255, 255, 255, .8);
}

.wzme img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, .35);
}

.wzme__nm {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- dropdown ---- */
.wzdd {
    position: relative;
}

.wzdd__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 264px;
    padding: 7px;
    background: var(--wznav-pop);
    border: 1px solid var(--wznav-pop-line);
    border-radius: 13px;
    box-shadow: 0 20px 48px rgba(9, 18, 40, .26);
    text-align: left;
    display: none;
    z-index: 1200;
}

.wzdd.is-open .wzdd__panel {
    display: block;
}

.wzdd__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 9px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--wznav-pop-line);
}

.wzdd__head img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.wzdd__head b {
    display: block;
    font-size: 14px;
    color: var(--wznav-pop-ink);
}

.wzdd__head small {
    color: var(--wznav-pop-muted);
    font-size: 12px;
}

/* The three dashboards used to sit in one flat list between the profile
   items, with nothing saying they were a set. Same three links, now under
   a heading. */
.wzdd__lbl {
    padding: 9px 10px 4px;
    font: 700 10.5px/1 var(--wznav-font);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--wznav-pop-muted);
}

.wzdd__panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--wznav-pop-ink);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.wzdd__panel a:hover,
.wzdd__panel a:focus-visible {
    background: var(--wznav-pop-tint);
    color: var(--wznav-pop-brand);
    text-decoration: none;
}

.wzdd__panel a.is-out {
    color: #b91c1c;
}

.wzdd__panel a.is-out:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.wzdd__panel hr {
    border: 0;
    border-top: 1px solid var(--wznav-pop-line);
    margin: 5px 0;
}

/* Notifications reuse the same panel, one size wider. */
.wzdd__panel--noti {
    width: 322px;
}

.wzdd__panel--noti a {
    align-items: flex-start;
}

.wznoti__ic {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 13px;
}

.wznoti__ic--ok {
    background: #e8f7ee;
    color: #1b7f45;
}

.wznoti__ic--inf {
    background: var(--wznav-pop-tint);
    color: var(--wznav-pop-brand);
}

.wznoti__ic--wr {
    background: #fff4e5;
    color: #9a5b00;
}

.wznoti__b {
    min-width: 0;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wznav-pop-ink-2);
}

.wznoti__b b {
    color: var(--wznav-pop-ink);
}

.wznoti__b em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--wznav-pop-muted);
    margin-top: 2px;
}

.wzdd__all {
    justify-content: center;
    color: var(--wznav-pop-brand);
    font-size: 13px;
}

/* Keyboard users must be able to see where they are. */
.wznav a:focus-visible,
.wznav button:focus-visible,
.wz-topbar .wzicon:focus-visible,
.wz-topbar .wzme:focus-visible,
.wzdd__panel a:focus-visible {
    outline: 2px solid var(--wznav-gold);
    outline-offset: 2px;
}

/* ==========================================================================
   2 · The public bar
   ========================================================================== */

#navbar.wznav,
.wznav {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, var(--wznav-bg-top), var(--wznav-bg-bot));
    border-bottom: 1px solid var(--wznav-line);
    font-family: var(--wznav-font);
}

/* max-width and padding are the page .container's own values, measured
   rather than chosen: 1180px and 24px. At 1240/16 the brand sat 38px to the
   left of the page's own content, so the logo did not line up with the hero
   underneath it. */
.wznav__in {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1180px;
    height: var(--wznav-h);
    margin: 0 auto;
    padding: 0 24px;
}

/* The links take the middle and sit centred in it.
   There used to be a .wznav__sp spacer here that swallowed every spare
   pixel -- 370px of it -- and shoved the account controls hard against the
   right edge, leaving a 403px hole between the last link and them. Splitting
   the slack either side of the centred links removes the hole. */
.wznav__links {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    align-self: stretch;
    justify-content: center;
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wznav__links > li {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

.wznav__links a {
    display: block;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--wznav-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.wznav__links a:hover,
.wznav__links a:focus-visible {
    color: var(--wznav-ink-strong);
    background: rgba(255, 255, 255, .08);
    text-decoration: none;
}

.wznav__links a[aria-current="page"] {
    color: var(--wznav-ink-strong);
}

/* The underline hangs off the <li>, not the <a>.
   The link's height comes from the inherited line-height, so an offset
   measured against the link drifts the moment a font changes; the <li> is
   the full height of the bar and cannot. If :has() is unavailable the
   underline is all that is lost -- the white text still marks the page. */
.wznav__links > li:has(a[aria-current="page"])::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--wznav-gold);
}

.wznav__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Guests get one button instead of the account pill. */
.wznav__login {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, #3b82f6, #2563eb);
    color: #fff;
    font: 700 13.5px/1 var(--wznav-font);
    cursor: pointer;
    text-decoration: none;
}

.wznav__login:hover,
.wznav__login:focus {
    filter: brightness(1.08);
    color: #fff;
    text-decoration: none;
}

.wznav__burger {
    display: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    background: var(--wznav-fill);
    border: 1px solid var(--wznav-stroke);
    color: #fff;
    cursor: pointer;
    place-items: center;
}

.wznav__skip {
    position: absolute;
    left: -9999px;
    top: 10px;
    z-index: 1300;
    padding: 8px 14px;
    border-radius: 9px;
    background: #fff;
    color: var(--wznav-pop-brand);
    font: 700 13px/1 var(--wznav-font);
    text-decoration: none;
}

.wznav__skip:focus {
    left: 16px;
}

.wznav__scrim {
    display: none;
}

/* ---- the profile lightbox (unchanged behaviour, restyled) ---- */
.wznav-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 17, 38, .78);
}

.wznav-lightbox.is-open {
    display: flex;
}

.wznav-lightbox__box {
    position: relative;
    max-width: 90vw;
}

.wznav-lightbox__box img {
    display: block;
    max-width: 340px;
    max-height: 80vh;
    border-radius: 18px;
    border: 4px solid #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.wznav-lightbox__close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #0b2350;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

/* ---- the sign-in dialog -------------------------------------------------

   Written once in page-layouts/navbar.blade.php and reached from three
   places -- this bar's Login button, the profile page's "Hire for a
   campaign" when a guest presses it, and the Work with me panel's Sign in
   -- so there is one dialog to style and it cannot drift into three looks.

   Three bands: a navy head that carries the mark, the three choices, and a
   tinted foot. The rows are the only decision in here; anything that is not
   a choice sits outside them. */
.wznav-modal {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 17, 38, .72);
}

.wznav-modal.is-open {
    display: flex;
}

.wznav-modal__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    background: var(--wznav-pop);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(8, 17, 38, .4);
}

/* The head carries the mark. Without it the dialog named no owner -- it
   could have been any site's popup floating over the page. Same navy as
   the bar it opens from, from the same two tokens. */
.wznav-modal__head {
    position: relative;
    padding: 20px 22px 18px;
    background: linear-gradient(180deg, var(--wznav-bg-top), var(--wznav-bg-bot));
    color: var(--wznav-ink-strong);
}

.wznav-modal__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wznav-ink-soft);
}

.wznav-modal__mark {
    width: 27px;
    height: 27px;
}

.wznav-modal__box h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--wznav-ink-strong);
}

.wznav-modal__box .sub {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--wznav-ink);
}

.wznav-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--wznav-fill);
    color: var(--wznav-ink-strong);
    cursor: pointer;
    transition: background .14s;
}

.wznav-modal__close:hover,
.wznav-modal__close:focus-visible {
    background: var(--wznav-fill-hi);
}

.wznav-modal__body {
    padding: 16px 18px 6px;
}

/* Three rows with no label read as a list of links. This says they are a
   choice -- which is the one thing a first-time visitor cannot work out
   from three near-identical rows. */
.wznav-modal__lbl {
    margin: 0 0 9px;
    padding-left: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #8396b3;
}

/* Each role carries its own accent, set by the modifiers below: the same
   three colours as the three dashboards behind them. They used to share
   one blue, which made three different products look like three copies of
   the same row. The two custom properties default to the brand blue, so a
   row with no modifier still renders. */
.wznav-role {
    --wzrole-ink: var(--wznav-pop-brand);
    --wzrole-tint: var(--wznav-pop-tint);

    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 13px;
    border: 1px solid var(--wznav-pop-line);
    border-radius: 13px;
    color: var(--wznav-pop-ink);
    text-decoration: none;
    transition: border-color .14s, background .14s;
}

.wznav-role--seo {
    --wzrole-ink: #1d4ed8;
    --wzrole-tint: #eaf1ff;
}

.wznav-role--influencer {
    --wzrole-ink: #6d28d9;
    --wzrole-tint: #f1ebff;
}

.wznav-role--advertiser {
    --wzrole-ink: #b45309;
    --wzrole-tint: #fdf0d9;
}

.wznav-role + .wznav-role {
    margin-top: 8px;
}

.wznav-role:hover,
.wznav-role:focus-visible {
    border-color: var(--wzrole-ink);
    background: var(--wzrole-tint);
    color: var(--wznav-pop-ink);
    text-decoration: none;
}

/* The hover tint IS the row's background once focused, so a ring drawn in
   that tint would be invisible. The outline is drawn in the row's own ink
   instead, offset clear of the border. */
.wznav-role:focus-visible {
    outline: 2px solid var(--wzrole-ink);
    outline-offset: 2px;
}

.wznav-role .ic {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--wzrole-tint);
    color: var(--wzrole-ink);
}

.wznav-role__t {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.3;
}

.wznav-role small {
    display: block;
    font-weight: 500;
    font-size: 12px;
    color: var(--wznav-pop-muted);
}

/* Nothing on the row said it led anywhere. */
.wznav-role__go {
    flex: 0 0 auto;
    color: #b6c2d6;
    transition: transform .16s, color .16s;
}

.wznav-role:hover .wznav-role__go,
.wznav-role:focus-visible .wznav-role__go {
    color: var(--wzrole-ink);
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .wznav-role,
    .wznav-role__go,
    .wznav-modal__close {
        transition: none;
    }

    .wznav-role:hover .wznav-role__go,
    .wznav-role:focus-visible .wznav-role__go {
        transform: none;
    }
}

/* The foot is a band, not a line of text under the rows: "create an
   account" is not a fourth choice and should not sit among the three. */
.wznav-modal__alt {
    margin: 16px 0 0;
    padding: 13px 18px;
    background: #f5f8fd;
    border-top: 1px solid var(--wznav-pop-line);
    text-align: center;
    font-size: 13.5px;
    color: var(--wznav-pop-muted);
}

.wznav-modal__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--wznav-pop-brand);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.wznav-modal__link:hover,
.wznav-modal__link:focus-visible {
    text-decoration: underline;
}

/* ==========================================================================
   3 · The dashboard bar — same skin, different middle
   ==========================================================================
   Only colour is overridden here. The layout rules in wizbrand-orgs-ui.css
   stay exactly as they are, including the padding that clears the 260px
   sidebar, because 76 pages are laid out against them. !important matches
   the !important already on the rule being overridden.
   ========================================================================== */

header.mdc-top-app-bar.wz-topbar {
    background: linear-gradient(180deg, var(--wznav-bg-top), var(--wznav-bg-bot)) !important;
    color: var(--wznav-ink-strong) !important;
    border-bottom: 1px solid var(--wznav-line);
    box-shadow: 0 2px 14px rgba(8, 17, 38, .18);
}

.wz-topbar .wz-topbar__pagetitle {
    color: var(--wznav-ink-strong);
}

.wz-topbar .wz-topbar__pagedesc {
    color: var(--wznav-ink-soft);
}

/* #main-wrapper is carried here to match the specificity of the rules in
   wizbrand-orgs-ui.css, which are written as `#main-wrapper .wz-breadcrumb a`.
   Without the id these lost, and the breadcrumb kept the colours it had for
   a white bar: the current page rendered at 1.71:1 against the navy -- all
   but invisible -- and the links at 3.05:1, both under the 4.5:1 floor.
   Measured in the browser, not guessed. */
#main-wrapper .wz-topbar .wz-breadcrumb,
#main-wrapper .wz-topbar .wz-breadcrumb a,
.wz-topbar .wz-breadcrumb,
.wz-topbar .wz-breadcrumb a {
    color: var(--wznav-ink);
}

#main-wrapper .wz-topbar .wz-breadcrumb a:hover,
.wz-topbar .wz-breadcrumb a:hover {
    color: var(--wznav-ink-strong);
}

#main-wrapper .wz-topbar .wz-breadcrumb__current,
.wz-topbar .wz-breadcrumb__current {
    color: var(--wznav-ink-strong);
}

#main-wrapper .wz-topbar .wz-breadcrumb__sep,
.wz-topbar .wz-breadcrumb__sep {
    color: var(--wznav-ink-soft);
}

.wz-topbar .wz-topbar__icon {
    color: var(--wznav-gold);
}

.wz-topbar .wz-topbar__toggle {
    background: var(--wznav-fill);
    border: 1px solid var(--wznav-stroke);
    color: var(--wznav-ink-strong);
}

.wz-topbar .wz-topbar__toggle:hover,
.wz-topbar .wz-topbar__toggle:focus-visible {
    background: var(--wznav-fill-hi);
    color: var(--wznav-ink-strong);
}

/* The bell and the account pill, matched to the public bar. */
.wz-topbar .wz-iconbtn {
    background: var(--wznav-fill);
    border: 1px solid var(--wznav-stroke);
    color: #dbe6fb;
}

.wz-topbar .wz-iconbtn:hover,
.wz-topbar .wz-iconbtn:focus-visible {
    background: var(--wznav-fill-hi);
    color: var(--wznav-ink-strong);
}

.wz-topbar .wz-iconbtn__badge {
    background: var(--wznav-danger);
    color: #fff;
    border: 2px solid var(--wznav-bg-bot);
}

.wz-topbar .wz-profile {
    background: var(--wznav-fill);
    border: 1px solid var(--wznav-stroke);
    color: var(--wznav-ink-strong);
}

.wz-topbar .wz-profile:hover,
.wz-topbar .wz-profile:focus-visible {
    background: rgba(255, 255, 255, .18);
}

.wz-topbar .wz-profile__name {
    color: var(--wznav-ink-strong);
}

.wz-topbar .wz-profile__caret {
    color: var(--wznav-ink-soft);
}

/* The sidebar brand draws the same mark. It wanted a square box rather
   than the 166x58 the raster had, and a gap -- .wz-side-brand is a flex
   row with no gap, because until now it held a single <img>. The sidebar
   is already navy, so the white wordmark reads there as it does here. */
.wz-side-brand {
    gap: 9px;
}

.wz-side-brand .wznav__mark {
    width: 34px;
    height: 34px;
}

.wz-side-brand .wznav__word {
    font-size: 16px;
}

/* ==========================================================================
   4 · Narrow screens
   ========================================================================== */

@media (max-width: 1180px) {
    .wzme__nm {
        display: none;
    }
}

@media (max-width: 1040px) {
    .wznav__burger {
        display: grid;
    }

    /* Hold the right edge once the links leave the row.
       --------------------------------------------------------------------
       On a wide screen `.wznav__links` takes the middle and pushes the
       account controls to the end. Below this width it becomes a fixed
       drawer, so it leaves the flex flow -- and with nothing left to take up
       the slack, the mark, Login and the burger bunched together at the
       start. Measured at a phone width: 221px of empty bar to the right of
       the burger, with all three sitting near the middle.

       `margin-left: auto` gives that slack back to the gap before the
       account block, which is where it was coming from anyway. */
    .wznav__right {
        margin-left: auto;
    }

    /* The drawer. It used to stack the links and nothing else; the account
       block sits at the top now because on a phone that is what people
       reach for first. */
    .wznav__links {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 1250;
        width: min(82vw, 312px);
        flex: 0 0 auto;
        flex-direction: column;
        /* The bar centres its links; a column drawer must not, or they bunch
           in the middle of a tall panel. */
        justify-content: flex-start;
        align-items: stretch;
        gap: 2px;
        padding: 72px 12px 24px;
        background: var(--wznav-bg-bot);
        border-left: 1px solid var(--wznav-line);
        box-shadow: -18px 0 55px rgba(0, 0, 0, .5);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(106%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    }

    .wznav.is-open .wznav__links {
        transform: none;
    }

    .wznav__links a {
        padding: 12px 13px;
        font-size: 15px;
    }

    .wznav__links a[aria-current="page"] {
        background: rgba(255, 201, 60, .14);
    }

    .wznav__links > li:has(a[aria-current="page"])::after {
        left: 0;
        right: auto;
        top: 8px;
        bottom: 8px;
        width: 3px;
        height: auto;
        border-radius: 0 3px 3px 0;
    }

    .wznav.is-open .wznav__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1240;
        background: rgba(5, 10, 25, .62);
    }

    /* A panel anchored to the right edge of a 36px button would hang off a
       360px screen. */
    .wzdd__panel {
        position: fixed;
        right: 10px;
        left: auto;
        top: calc(var(--wznav-h) + 8px);
        width: min(322px, calc(100vw - 20px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .wznav__links {
        transition: none;
    }
}