/* ==========================================================================
   ONE DIGITAL MUSIC — Header
   --------------------------------------------------------------------------
   Everything that renders from views/partials/header.ejs: the impersonation
   bar, the pinned header, the brand, the nav and its dropdowns, the account
   controls, the mobile drawer and its scrim.

   It lives in its own file because the header is the one component on every
   single page — a change to it in the shared stylesheet re-downloads the
   whole design system for every visitor, and a mistake in it is visible
   everywhere at once. Loaded AFTER style.css (see partials/head.ejs), so it
   may rely on that file's tokens and may override it.

   Flat, like the rest of the system: no drop shadows anywhere in here. Every
   edge is a real border. Depth comes from the graphite steps alone.

   HOW IT STAYS RESPONSIVE
   -----------------------
   Two rules do the work, and both were the previous layout's undoing:

   1. The side gutter is fluid, never a fixed pixel figure. The old rule put
      215px of padding on each side (plus a 150px right override), which is
      365px that a 1200px laptop simply does not have — the nav then had less
      room than its own text and spilled underneath the account controls. The
      gutter now scales with the viewport and bottoms out at 16px.

   2. Only the brand may shrink. The nav and the account controls are
      flex-shrink: 0, so they always reserve their true width; if anything
      has to give it is the wordmark, which ellipses. Overlap is therefore
      not something the layout can express, whatever the viewport.

   BREAKPOINTS
   -----------
     <= 1024px   drawer      phones, iPad portrait AND iPad landscape
     >= 1025px   horizontal nav
     1025-1279   compact     small laptops: tighter gaps, smaller type
     >= 1280px   comfortable

   The drawer line sits at 1024 rather than the old 960 because the admin nav
   is six items wide (~890px with the brand and account controls). At 960 it
   fitted only in theory, with nothing left for a longer artist name or a
   wider font fallback. Anything that must be measured to fit is a bug
   waiting for a different machine.

   `main.js` closes an open drawer above this same width — the two must be
   changed together.
   ========================================================================== */

:root {
  /* Gutter between the viewport edge and the header's contents. Fluid, so
     the header reaches toward the edges on a tablet (where the old fixed
     padding stranded the brand in the middle of the bar) and keeps generous
     air on a desktop. */
  --header-gutter: clamp(16px, 3vw, 40px);

  /* Letter-spacing for the uppercase nav. One value, named, because the same
     tracking has to hold across all four responsive tiers and on the landing
     page's own header — tuning it in one place is the only way those stay in
     step. In em so it scales with whatever size the tier sets. */
  --nav-tracking: 0.09em;

  /* The header is deliberately WIDER than --content-max: the brand and the
     account controls sit outboard of the page's content column, which is
     what makes the bar read as chrome rather than as part of the page. */
  --header-max: 1600px;

  /* The hairline under the header. It has to be a named quantity because
     three other things are measured from it, and they were all out by
     exactly its width: --header-height (68px) sizes .header-container, but
     the rule sits BELOW that box, so the pinned chrome really occupies 69px.
     The spacer reserved 68 and the drawer was positioned at 68 — so the page
     began one pixel under the header and the drawer's top edge cut into the
     bar. Small, but it is the kind of gap that shows as a flicker of content
     sliding beneath a border on every scroll. */
  --header-rule: 1px;

  /* What the pinned chrome actually occupies, border included. */
  --header-band: calc(var(--header-height) + var(--header-rule));
}

/* --------------------------------------------------------------------------
   1. Pinned chrome
   --------------------------------------------------------------------------
   The bar and the header are pinned as one block, so the space reserved for
   them can never disagree with what is actually on screen. */

.site-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  /* One source of truth for how tall the pinned chrome is, so the drawer and
     its scrim can sit exactly beneath it without either guessing. */
  --chrome-h: var(--header-band);
}

.site-chrome.has-bar {
  --chrome-h: calc(var(--header-band) + var(--impersonation-height));
}

.site-header {
  position: relative;
  background: var(--bg-surface);
  border-bottom: var(--header-rule) solid var(--border);
}

/* Occupies the chrome's height in normal flow. It is a SIBLING of
   .site-chrome, not a descendant, so --chrome-h does not reach it — both
   sides are built from --header-band instead, which is the shared figure
   that keeps them agreeing. */
.chrome-spacer { height: var(--header-band); }
.chrome-spacer.is-tall { height: calc(var(--header-band) + var(--impersonation-height)); }

/* --------------------------------------------------------------------------
   2. Impersonation bar
   --------------------------------------------------------------------------
   Sits above the header for the whole session so the way back is always in
   view, and never looks like part of the artist's own interface. */

.impersonation-bar {
  position: relative;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* NOT flex-wrap: wrap. The bar's height is a token that .chrome-spacer and
     --chrome-h both read; a wrapped second line would make the real bar
     taller than every measurement of it, and the page would start underneath
     the header. The label ellipses instead — see .impersonation-text. */
  flex-wrap: nowrap;
  height: var(--impersonation-height);
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  background: var(--gold);
  color: #201703;
  font-size: 0.81rem;
  font-weight: 600;
}

.impersonation-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impersonation-text .icon { width: 15px; height: 15px; opacity: 0.7; }
.impersonation-text strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.impersonation-bar strong { color: inherit; }
.impersonation-bar form { flex-shrink: 0; }

.impersonation-exit {
  --btn-h: 28px;
  font-size: 0.75rem;
  background: #201703;
  color: var(--gold);
  border-color: transparent;
  font-weight: 600;
}

.impersonation-exit:hover { background: #2e2205; color: var(--gold); }

/* Duplicated inside the drawer; hidden where the bar itself is visible. */
.header-return-form { display: none; }

/* --------------------------------------------------------------------------
   3. The bar itself
   -------------------------------------------------------------------------- */

.header-container {
  display: flex;
  align-items: center;
 /* gap: 12px;*/
  height: var(--header-height);
  width: 100%;
  max-width: var(--header-max);
  margin-inline: auto;
  /* max() rather than a bare gutter: on a notched handset held sideways the
     inset can exceed the gutter, and the brand would sit under the cutout. */
  padding-left: max(var(--header-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--header-gutter), env(safe-area-inset-right, 0px));
}

/* The ONE element permitted to shrink. Everything else in the bar reserves
   its full width, so a cramped viewport truncates the wordmark instead of
   folding the nav underneath the account controls. */
.header-container > .logo {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.header-container > .mobile-toggle { margin-left: auto; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   4. Brand
   -------------------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  flex-shrink: 0;
}

.logo-mark .icon { width: 16px; height: 16px; stroke-width: 1.8; }

/* The mark always survives; the words are what give way under pressure. */
.logo-text {
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo-highlight { color: var(--text-secondary); font-weight: 400; }
.logo-img { max-height: 34px; width: auto; }

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 7px;
}

.nav-link {
  /* The rule under the label is inset to match this link's horizontal padding,
     so it is the width of the word rather than the width of the hit area. Kept
     as a variable because the padding tightens on the narrow desktop tier, and
     a hardcoded inset there would sit three pixels proud at each end. */
  --nav-rule-inset: 11px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 7px + the 1px border below = the 8px the design calls for. The border is
     carried by every link, transparent until the link is active, so the
     active state cannot change a link's size — and it is a real border, not
     an inset shadow. It is transparent in the bar now that the selection is
     an underline; the drawer still uses it. */
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

/* --- Bar typography ------------------------------------------------------
   The top-level nav is set as small uppercase with an even tracking, which is
   what gives the bar its finish: at this size, caps without added spacing set
   solid and become hard to read, so the two go together.

   Scoped INSIDE .nav-links, and a descendant selector rather than a child
   one: the dropdown triggers ("Catalogue", "People", "Finance") are
   `.nav-link.nav-dropdown-btn` wrapped in a .nav-dropdown-wrapper, so a `>`
   reaches the plain links and silently skips every dropdown — which left the
   bar half uppercase and half not.

   Still safely scoped, because the two things that must NOT pick this up are
   both outside .nav-links: the dropdown MENU entries use .dropdown-item, and
   the user-panel rows ("Profile", "Subscription") live in .header-actions.

   Tracking is set in em, not px, so it stays proportional wherever the size
   changes across the tiers below rather than looking tight on the large ones
   and loose on the small. */
.nav-links .nav-link {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
}

/* --- The one button allowed on the bar -----------------------------------
   "New release" is a filled button sitting in a row of small-caps labels, and
   that contrast is the point: it is the action, not a place you can be. It
   carries .btn classes only — never .nav-link — so none of the bar treatment
   above reaches it and it cannot pick up an underline it has no use for.

   flex-shrink: 0 for the same reason the bar's other groups have it: a button
   that can be squeezed clips its own label long before the bar runs out of
   room. The margin separates it from the last nav word, which sits closer than
   the 7px gap alone suggests once that word's padding is counted. */
.nav-cta {
  flex-shrink: 0;
  margin-left: 6px;
}

/* --- Selection, as a rule under the word ---------------------------------
   The current page used to be a filled, outlined box. In a bar of six items
   set in small caps that reads as a button among labels — the one thing on the
   bar with a border and a fill, sitting next to five things without either —
   and it made the bar look like a row of controls rather than a place you are.

   A rule under the word says the same thing without competing: it belongs to
   the label rather than boxing it.

   Drawn as a pseudo-element that scales rather than a border that appears, for
   two reasons. A border-bottom toggling from transparent has nothing to
   animate ACROSS — it fades in place — and adding one on hover would move
   every other link by a pixel. This grows out from the middle and occupies no
   layout at all.

   Inset to the text rather than the padding box, so the rule is the width of
   the word and not the width of the hit area. */
.nav-link::after {
  content: '';
  position: absolute;
  left: var(--nav-rule-inset);
  right: var(--nav-rule-inset);
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms var(--ease);
  /* The bar is the target; the rule is decoration on it. */
  pointer-events: none;
}

.nav-link:hover,
.nav-link:focus-visible { color: var(--text-primary); }

/* Hover, keyboard focus and the current page all draw the same rule. Focus
   included deliberately: tabbing along the bar should show where you are the
   same way pointing at it does. */
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after,
.nav-dropdown-wrapper.is-open > .nav-link::after { transform: scaleX(1); }

.nav-link.active { color: var(--text-primary); }

/* The one link that is a button rather than a label keeps its fill and takes
   no rule — an underline under a solid accent button is two selections. */
.nav-link-accent::after { content: none; }

.nav-link-accent {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.nav-link-accent:hover { background: var(--accent-hover); color: var(--accent-ink); }

/* --- Dropdowns ---------------------------------------------------------- */

.nav-dropdown-wrapper { position: relative; }

.nav-dropdown-menu,
.user-dropdown,
.notification-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  min-width: 208px;
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
  z-index: 250;
}

.nav-dropdown-menu { left: 0; }
.user-dropdown, .notification-dropdown { right: 0; }

/*
 * Top-bar menus open on .is-open, set by main.js (initNavDropdowns) — never
 * on :hover / :focus-within.
 *
 * Both of those at once was the "two menus open, one stuck" bug: clicking
 * "Catalogue" focused its button, so :focus-within held that menu open, and
 * pointing at "People" opened a second one beside it. The script keeps exactly
 * one open: pointing at or clicking a heading opens its menu and closes any
 * other; leaving the menu, clicking elsewhere, or Escape closes it.
 *
 * Without the script (it failed to load), hover still works — .js is only
 * set once the script has run.
 */
html:not(.js) .nav-dropdown-wrapper:hover .nav-dropdown-menu,
.nav-dropdown-wrapper.is-open .nav-dropdown-menu,
.user-dropdown.show,
.notification-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: left;
}

.dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dropdown-item-danger { color: var(--danger); }
.dropdown-item-danger:hover { color: var(--danger); background: var(--danger-bg); }

.dropdown-divider { height: 1px; margin: 6px 4px; background: var(--border-subtle); }

/* --------------------------------------------------------------------------
   6. Account controls
   -------------------------------------------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Drawer-only chrome; the drawer tier below reveals it. */
.drawer-head,
.drawer-account { display: none; }

.header-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.header-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.header-btn .icon { width: 18px; height: 18px; }

.bell-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* --- Notification panel -------------------------------------------------- */

.notification-bell { position: relative; }

.notification-dropdown { width: min(360px, calc(100vw - 32px)); padding: 0; }

.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.dropdown-header h4 { font-size: 0.875rem; }

.mark-all-read {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.mark-all-read:hover { color: var(--text-primary); }

.dropdown-body { max-height: 340px; overflow-y: auto; }

.notification-item {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: var(--bg-hover); }
.notification-item.unread { background: var(--bg-raised); }

.notif-dot {
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}

.notif-success { background: var(--success); }
.notif-warning { background: var(--warning); }
.notif-error   { background: var(--danger); }
.notif-info    { background: var(--info); }

.notif-content { min-width: 0; }
.notif-content strong { display: block; font-size: 0.82rem; font-weight: 600; }
.notif-content p {
  margin: 2px 0 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.notif-content small { font-size: 0.7rem; color: var(--text-tertiary); }

.no-notifications {
  padding: 30px 16px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

.dropdown-footer {
  padding: 12px;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
}

.dropdown-footer a { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; }
.dropdown-footer a:hover { color: var(--text-primary); }

/* --- User menu ----------------------------------------------------------- */

.user-menu { position: relative; }

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: background var(--speed) var(--ease);
}

.user-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.user-avatar,
.user-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.user-avatar-placeholder {
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
}

.user-name {
  font-size: 0.85rem;
  font-weight: 500;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Panel switcher
   --------------------------------------------------------------------------
   Lets an administrator open any artist's panel and come straight back,
   without ever signing out. Kept beside the header because it borrows the
   dropdown primitives above. */

.panel-switch { position: relative; }

.panel-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 550;
  white-space: nowrap;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.panel-switch-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--text-primary);
}

.panel-switch-btn .icon { width: 16px; height: 16px; }

.panel-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
  z-index: 250;
  overflow: hidden;
}

.panel-switch-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }

.panel-switch-menu .dropdown-header { flex-direction: column; align-items: flex-start; gap: 2px; }
.panel-switch-menu .dropdown-body { max-height: 320px; }

.panel-switch-item-form { display: block; }

.panel-switch-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 16px;
  text-align: left;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--speed) var(--ease);
}

.panel-switch-item:hover { background: var(--bg-hover); color: var(--text-primary); }

.panel-switch-item-text { flex: 1; min-width: 0; }
.panel-switch-item-text strong { display: block; font-size: 0.85rem; color: var(--text-primary); }

.panel-switch-item-text small {
  display: block;
  font-size: 0.73rem;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch-preview {
  display: flex;
  padding: 18px;
  margin: 8px 0 6px;
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   8. Hamburger
   -------------------------------------------------------------------------- */

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.mobile-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 180ms var(--ease), opacity 140ms var(--ease);
}

/* Morphs into a close mark while the drawer is open. */
.mobile-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ==========================================================================
   9. Horizontal nav — 1025px and up
   --------------------------------------------------------------------------
   The wrapper dissolves (display: contents) so .nav-links and .header-actions
   become direct flex children of the bar: brand on the left, the two of them
   as one group on the right. Both are flex-shrink: 0, which is what makes
   overlap impossible — a flex item that cannot shrink cannot be squeezed
   under its neighbour.
   ========================================================================== */

@media (min-width: 1025px) {
  .header-nav { display: contents; }

  .nav-links {
    margin-left: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  .header-actions {
    padding-left: 10px;
    flex-shrink: 0;
    gap: 8px;
  }

  /* The avatar identifies the account; the name beside it is redundant, and
     an artist with a long name is exactly when the bar can least afford it. */
  .user-name { display: none; }
  .user-menu-btn { padding: 5px; }

  .header-container > .mobile-toggle { display: none; }
}

/* --- Compact desktop: 1025-1279px ----------------------------------------
   Small laptops and the larger tablets in landscape. Six admin nav items at
   full size come to roughly 890px with the brand and account controls; this
   tier takes about 90px out of that with tighter padding and a slightly
   smaller face, so the bar has real slack instead of only just fitting. */

@media (min-width: 1025px) and (max-width: 1279px) {
  .header-container { gap: 8px; }

  .nav-links { gap: 2px; }

  .nav-link {
    --nav-rule-inset: 8px;
    padding: 7px 8px;
    font-size: 0.82rem;
    gap: 4px;
  }

  /* Bar items hold their 11px caps; only the padding tightens. Tracking adds
     real width to a capitalised label, so on this tier it eases back a step
     to buy the room the smaller padding is also chasing. */
  .nav-links .nav-link {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .nav-link .icon-sm { width: 13px; height: 13px; }

  /* Tightened with everything else on this tier. The plus carries the meaning
     at a glance, so the label can afford to lose a little of its padding. */
  .nav-cta { margin-left: 4px; padding: 0 10px; font-size: 0.74rem; }
  .nav-cta .icon { width: 14px; height: 14px; }

  .header-actions { padding-left: 4px; gap: 4px; }

  .logo { font-size: 0.96rem; }
  .logo-mark { width: 28px; height: 28px; }
}

/* ==========================================================================
   10. Drawer — 1024px and down
   --------------------------------------------------------------------------
   Phones, iPad portrait and iPad landscape. The links move into a panel that
   slides in from the right. It is fixed to the viewport, so it is unaffected
   by scroll position or by whether the impersonation bar is showing.
   ========================================================================== */

@media (max-width: 1024px) {
  .header-container > .mobile-toggle { display: flex; }

  .drawer-head { display: flex; }
  .drawer-account { display: flex; flex-direction: column; gap: 2px; }

  .header-return-form { display: block; width: 100%; }
  .header-return-form .btn { width: 100%; }

  /* Desktop popovers have no place in a narrow drawer: the same destinations
     are listed in .drawer-account instead. They are removed with display:none
     rather than merely hidden — an invisible static element still reserves
     its height, which left a dead gap in the middle of the drawer. */
  .header-actions,
  .notification-bell,
  .user-menu,
  .notification-dropdown,
  .user-dropdown { display: none !important; }

  .header-nav {
    position: fixed;
    top: var(--chrome-h, var(--header-height));
    right: 0;
    bottom: 0;
    left: auto;
    width: min(330px, 88vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--bg-surface);
    /* A border, not a shadow. The panel is a plane that meets the page at an
       edge; it does not float above it. */
    border-left: 1px solid var(--border);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 2;

    display: flex;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 280ms var(--ease), visibility 280ms;
  }

  .header-nav.show { transform: translateX(0); visibility: visible; }

  /* Brand row, pinned at the top of the drawer */
  .drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 16px 18px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
  }

  .drawer-head .logo { font-size: 0.95rem; min-width: 0; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    padding: 14px 12px;
  }

  .nav-link {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 13px;
    font-size: 0.92rem;
    border-radius: var(--radius-sm);
  }

  /* In the drawer these are full-width rows read at arm's length, not a
     compact bar, so they take the tier's larger face rather than the bar's
     11px. The caps and the tracking stay, so the drawer still reads as the
     same navigation — it is the size that changes, not the treatment. */
  .nav-links .nav-link {
    font-size: 0.82rem;
    letter-spacing: var(--nav-tracking);
  }

  .nav-link .icon { width: 18px; height: 18px; color: var(--text-tertiary); }
  .nav-link:hover .icon, .nav-link.active .icon { color: var(--text-primary); }

  /* No underline in the drawer.
   *
   * These are full-width rows in a vertical list, not words in a bar. A rule
   * spanning a 300px row does not read as "this one" — it reads as a divider
   * between rows, which is the opposite of what it is for. The filled row is
   * the right shape for a list, so the drawer keeps it. */
  .nav-link::after { content: none; }
  .nav-link:hover { background: var(--bg-hover); }
  .nav-link.active {
    background: var(--accent-soft);
    border-color: var(--accent-line);
  }

  /* In the drawer it becomes a full-width row like everything else, but keeps
     its fill — it is still the action among a list of destinations. The margin
     lifts it clear of the Earnings group above, whose sub-items are expanded
     here and would otherwise run straight into it. */
  .nav-cta {
    width: 100%;
    margin-left: 0;
    margin-top: 18px;
    justify-content: center;
  }

  /* A group heading, not a control — the sub-items are always visible. */
  .nav-dropdown-wrapper { width: 100%; margin-top: 12px; }

  .nav-dropdown-btn {
    display: flex;
    width: 100%;
    padding: 6px 14px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: none;
    border-color: transparent;
    pointer-events: none;
    cursor: default;
  }

  .nav-dropdown-btn .icon { display: none; }

  .nav-dropdown-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    width: auto;
    background: transparent;
  }

  .nav-dropdown-menu .dropdown-item {
    padding: 12px 14px;
    font-size: 0.92rem;
    border-radius: var(--radius-sm);
  }

  .nav-dropdown-menu .dropdown-item .icon { width: 18px; height: 18px; color: var(--text-tertiary); }

  /* Account block, pushed to the foot of the drawer */
  .drawer-account {
    margin-top: auto;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-raised);
  }

  .drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px 14px;
    min-width: 0;
  }

  .drawer-user .user-avatar,
  .drawer-user .user-avatar-placeholder { width: 36px; height: 36px; font-size: 0.9rem; }

  .drawer-user-text { min-width: 0; }

  .drawer-user-text strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .drawer-user-text small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .drawer-form { width: 100%; }
  .drawer-form .nav-link { text-align: left; }
  .nav-link-danger { color: var(--danger); }
  .nav-link-danger:hover { background: var(--danger-bg); color: var(--danger); }
  .nav-link-danger .icon { color: var(--danger); }

  .drawer-count {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
  }
}

/* --- Scrim behind the open drawer ---------------------------------------- */

.nav-scrim {
  position: fixed;
  inset: var(--chrome-h, 0) 0 0 0;
  /* Ranked inside .site-chrome, directly against .header-nav below it. */
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.nav-scrim.is-open { opacity: 1; }
.nav-scrim[hidden] { display: none; }

@media (min-width: 1025px) {
  .nav-scrim { display: none !important; }
}

/* Freeze the page behind the drawer so scrolling does not bleed through. */
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   11. Touch targets
   --------------------------------------------------------------------------
   44 CSS px (iOS) / 48dp (Android) is the floor for a fingertip. These three
   header controls are sized for a pointer; they grow only where the pointer
   is actually a finger. Only the box grows — type, colour and spacing are
   untouched. Kept here rather than in the shared stylesheet because this file
   loads later and would otherwise win. */

@media (pointer: coarse), (max-width: 768px) {
  /* The one control every panel page depends on to reach navigation. */
  .mobile-toggle { width: 44px; height: 44px; }

  /* Icon buttons in the bar and at the top of the open drawer. */
  .header-btn { width: 44px; height: 44px; }

  /* The wordmark doubles as the link home. */
  .logo { min-height: 40px; }
}

/* --------------------------------------------------------------------------
   12. Phones
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* The gutter's clamp already floors at 16px; this keeps the impersonation
     bar in step with it so the two rows share one left edge. */
  .impersonation-bar { gap: 10px; font-size: 0.78rem; }
}

/* Very narrow handsets: the drawer takes the full width rather than leaving
   a sliver of page beside it, which is too small to be a useful target and
   reads as a rendering fault. */
@media (max-width: 360px) {
  .header-nav { width: 100%; border-left: none; }
}