/* pl-header.css — THE ONE TOP ROW of every signed-in page (owner 2026-10-14: "the signed-in header is
   identical on every page, desktop and phone, light and dark"). Linked right after pl-system.css on
   all 15 signed-in pages (home, invoices, app, projects, contracts, kit, calendar, crew, clients,
   profile, me, messages, notifications, rentals, jobs). It replaces the per-page copies of the same
   rules that lived in each page's inline <style>, which is how the headers drifted apart.

   WHAT IT OWNS (top row only; a second row is a separate element UNDER this one, never inside it):
     • the band: 54px tall above 600px, content-sized (41px with a mouse, 45px with a finger) at
       <=600px, padding 0 16px (4px 12px on a phone), sticky at top:0 (never fixed);
     • the brand (.fi-brand, 22px mark) at the same x/y; the nav's first link at the same x;
     • the right cluster in ONE order, whatever order the DOM builds it in (auth.js injects the theme
       button and pl-notify.js injects the bell after first paint):
           [plan pill] [eye] [bell] [theme toggle] [account]
       The bell's slot is reserved while the bell is hidden or not yet injected, so a bell appearing
       never shifts the eye or the toggle.
   WHAT IT DOES NOT OWN: the look of the nav links (pl-system.css), colours of the plan pill and the
   avatar (plnav.js v2 block), the hamburger and its panel (plnav.js), the account dropdown rows
   (auth.js), page toolbars (they live in their own row under the header).
   Selectors are prefixed `html header:is(...)` so a leftover page rule of one class cannot win by
   load order. tests/header-parity-1014 measures all 15 pages and pins the static half. */

html header:is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 8px;
  height: 54px;
  min-height: 54px;
  padding: 0 16px;
  margin: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 100;
  --pl-hdr-slot: 30px;
}

/* ── Brand ── */
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .fi-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .fi-brand-mark { color: var(--accent); display: inline-flex; align-items: center; }
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .fi-brand-mark svg { display: block; width: 22px; height: 22px; }
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .fi-brand-word { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.5; }

/* ── The brand logo slot (white-label, owner 2026-10-14; integration fix) ──
   A Business account's logo is a DOM sibling of .fi-brand (auth.js paintBrandMark) but it is NOT drawn there. Drawn
   beside the Ledger words it pushed the Menu button and the first nav link 43px (a square logo) to about 110px (a wide
   one) right of where every other account has them, and the parity suite could not see it. `order` draws it in the free
   band between the nav and the right cluster instead (the spacer absorbs the slack), in a FIXED slot: the separator plus
   a logo up to 80px wide and 22px tall (auth.js). Nothing to its left can move, and the eye, toggle and account stay put
   (pinned on a branded fixture by tests/brand-chrome). The pill nav leaves about 130px of free band at 1280px and the slot
   plus its flex gap costs about 105, so the slot is dropped from 1090px to 1299px (measured: at 1264px plnav's fit()
   clips the nav and the cluster jumps; from 1272px it holds; 1300px keeps 25px of slack for a wider plan pill). Below
   1090px the nav is the Menu button, the band is wide, and the slot shows; auth.js hides it at 560px. It also shrinks
   before anything else (flex-shrink 100) as a last line, never the nav. */
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-brand-co { order: 1; flex: 0 100 auto; min-width: 0; overflow: hidden; margin: 0; }
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-user-wrap, .cr-user-wrap, .kv-user-wrap, .user-menu) { order: 2; }
@media (min-width: 1090px) and (max-width: 1299px) {
  html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-brand-co { display: none; }
}

/* ── Nav container (the link LOOK is pl-system.css's) ── */
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-nav {
  display: flex;
  align-items: center;
  margin-left: 0;
  /* flex-wrap is plnav.js's: nowrap + a quiet sideways scroll from 1090px, hidden below it. Never set it here: this
     selector out-ranks plnav's and a wrapping nav grows to two rows inside the fixed 54px band. */
}
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-nav a { text-decoration: none; }
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-spacer { flex: 1 1 auto; }

/* ── The right cluster: one wrap, one order ── */
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-user-wrap, .cr-user-wrap, .kv-user-wrap, .user-menu) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
}
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-user-wrap, .cr-user-wrap, .kv-user-wrap, .user-menu) > :is(.pl-pro-dot, .cr-pro-dot, .kv-pro-dot, .user-pro-dot) { order: 0; }
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-user-wrap, .cr-user-wrap, .kv-user-wrap, .user-menu) > .pl-eye { order: 1; flex: 0 0 auto; }
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-user-wrap, .cr-user-wrap, .kv-user-wrap, .user-menu) > .pl-bell { order: 2; margin-right: 0; }
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-user-wrap, .cr-user-wrap, .kv-user-wrap, .user-menu) > .fi-theme-btn { order: 3; }
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-user-wrap, .cr-user-wrap, .kv-user-wrap, .user-menu) > :is(#pl-user-btn, #cr-user-btn, #kv-user-btn, .pl-user-btn, .cr-user-btn, .kv-user-btn, .user-btn) { order: 4; }

/* The plan pill and the 34px avatar (colours: plnav.js v2 block). */
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-pro-dot, .cr-pro-dot, .kv-pro-dot) {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 10px;
}
html :is(.pl-header, .iv-header, .cr-header, .kv-header) :is(.pl-user-btn, .cr-user-btn, .kv-user-btn) {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #fff; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
html :is(.pl-header, .iv-header, .cr-header, .kv-header) :is(.pl-user-btn, .cr-user-btn, .kv-user-btn):hover { opacity: .85; }

/* THE BELL SLOT. The bell is injected after first paint (pl-notify.js) and is hidden unless there is
   something to show. Hidden keeps its box (invisible, not clickable), and a page the bell has not
   reached yet gets the same 30px from the ::before below, so the eye and the toggle sit at the same
   x with the bell absent, hidden or shown. */
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-bell[hidden] {
  display: inline-flex !important;
  visibility: hidden;
  pointer-events: none;
}
html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-user-wrap, .cr-user-wrap, .kv-user-wrap, .user-menu):not(:has(> .pl-bell))::before {
  content: "";
  order: 2;
  flex: 0 0 var(--pl-hdr-slot, 30px);
  width: var(--pl-hdr-slot, 30px);
  height: 30px;
  visibility: hidden;
}

/* ── Phones and narrow windows ── */
@media (max-width: 720px) {
  html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .fi-brand-word { display: none; }
  html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-nav::-webkit-scrollbar { display: none; }
  html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-nav a { flex-shrink: 0; }
}
@media (max-width: 600px) {
  html header:is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) {
    height: auto;
    min-height: 44px;
    padding: 4px 12px;
    column-gap: 8px;
    row-gap: 10px;
    flex-wrap: wrap;
    --pl-hdr-slot: 36px;
  }
  html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-bell { width: 36px; height: 36px; }
  html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-user-wrap, .cr-user-wrap, .kv-user-wrap, .user-menu):not(:has(> .pl-bell))::before { height: 36px; }
}
/* A mouse on a narrow window never gets bigger (mobile.css §7): a 40px band, 32px controls. */
@media (max-width: 600px) and (pointer: fine) {
  html header:is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) { min-height: 40px; row-gap: 6px; --pl-hdr-slot: 32px; }
  html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) .pl-bell { width: 32px; height: 32px; }
  html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-user-wrap, .cr-user-wrap, .kv-user-wrap, .user-menu):not(:has(> .pl-bell))::before { height: 32px; }
}
/* THE PLAN PILL YIELDS ON A PHONE. The eye (36px) and the bell's reserved slot (36px) now join the account cluster on every page, and
   the trial pill ("Business trial · 14 days", up to 104px wrapped) no longer fits one row at 375-390 beside Menu, brand and the avatar: the
   header wrapped to 91px on kit. The plan stays on Account and Billing and plan; the header is one row on every page (owner 2026-10-14). */
@media (max-width: 480px) {
  html :is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) :is(.pl-pro-dot, .cr-pro-dot, .kv-pro-dot, .user-pro-dot) { display: none; }
}
@media print {
  html header:is(.pl-header, .iv-header, .cr-header, .kv-header, .app-header) { position: static; }
}