/*
 * PBJ CRM — the navigation shell's HEADER (Phase 2 of the navigation redesign,
 * 2026-08-21) and the themed sign-in page (15.2).
 *
 * TWO THINGS LIVE IN ONE FILE ON PURPOSE. The header strip is drawn by
 * assets/js/pbj-crm-header.js on the portal; the sign-in shell (the company
 * logo above the card) is drawn by PHP on the login page. They share this
 * stylesheet because they share the same tokens and because assets/css/
 * pbj-crm.css is not this build's to edit.
 *
 * ------------------------------------------------------- WHICH TOKEN FAMILY
 *
 * ⛔ THE SHELL CHROME IS WRITTEN IN --nav-*, NOT --pbjcrm-*. Phase 1 landed
 * assets/css/pbj-crm-nav.css, which declares the design's own 33 names as
 * aliases onto the --pbjcrm-* variables PBJ_CRM_Theme resolves, and re-declares
 * them on .pbjcrm-hdr itself so the bar re-resolves against its own inline
 * theme block. Every colour, line and chrome measurement below therefore reads
 * a --nav-* name. There is not one hard-coded hex in the shell rules and there
 * must never be one: a colour written here would be a second opinion about the
 * theme and would be wrong on fifteen of the sixteen presets.
 *
 * ⚠ NO var() FALLBACKS ON --nav-* NAMES, for the reason pbj-crm-nav.css writes
 * out in full: a fallback looks like caution and behaves like a hard-coded dark
 * hex on a light preset. The theme emits every one of them on every render.
 *
 * ⚠ THE OLDER --pbjcrm-* RULES BELOW THE SHELL SECTIONS ARE LEFT ALONE. The
 * Notifications menu, the audit block, the dropdown box, the search overlay and
 * the sign-in page were not part of this phase's brief and keep the tokens and
 * the fallbacks they shipped with. Mixing the families inside one rule is what
 * is forbidden — not the two families coexisting in one file.
 *
 * ⚠ THREE COLOURS THE DESIGN NAMES HAVE NO --nav-* NAME YET, and each one is
 * marked at the rule that needs it: ink-on-red (the design says `#fff`; the
 * missing sibling of --nav-green-ink), the ⌘K chip's control fill (`#191a1f`),
 * and the focus ring. They are resolved from the theme's OWN declared values —
 * never invented, never hard-coded — and reported upstream.
 *
 * ---------------------------------------------------------------- THE SHAPE
 *
 * §2.1 of the shell spec, left to right, 48px tall, 14px side padding, 14px
 * gaps: rail toggle (under 860px only) · logo · TAB SLOT · Create · spacer ·
 * mode · ⌘K chip · notifications · account chip.
 *
 * ⛔ #pbj-crm-tabs IS A SLOT THIS FILE STYLES AND NEVER FILLS. assets/js/
 * pbj-crm.js paints the five area tabs into it. The `button.pbjcrm-tab` rules
 * below are the contract for what it paints.
 *
 * Class prefix: .pbjcrm-hdr-* for the bar, .pbjcrm-search-* for the overlay,
 * .pbjcrm-tab(s) and .pbjcrm-rail-toggle for the two shared contracts.
 */

/* ---------------------------------------------------------------- The bar */

.pbjcrm-hdr-mount {
	display: block;
	width: 100%;

	/* ⛔ THE MOUNT IS THE SPACER, AND IT HAS TO BE. The bar is `position: fixed`
	   (§2.1), so it reserves no room in the flow, and the mount — rendered by
	   PHP immediately above #pbj-crm-app — is the element sitting exactly where
	   the bar used to sit. Giving it the bar's own height is what stops the
	   first screenful of the app sliding underneath the chrome.

	   ⚠️ THE SPEC PUTS THIS PADDING ON THE CONTENT REGION instead. That rule
	   belongs to assets/css/pbj-crm.css, which is not this build's to edit, so
	   the mount carries it here. If the content region later gains its own
	   `padding-top: var(--nav-header-h)`, this height must come off in the same
	   edit or the app gains 48px of dead space. */
	height: var(--nav-header-h);
}

.pbjcrm-hdr {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 14px;

	/* ⛔ 48px EXACTLY, AND NOT DERIVED FROM THE DENSITY SETTING. This used to be
	   `padding: var(--pbjcrm-space-sm) var(--pbjcrm-space)`, which moved the
	   bar's height with the owner's density choice; acceptance §1 asks for a
	   header that is exactly 48px tall. --nav-header-h resolves to the theme's
	   CHROME_HEADER_H constant, which is 48 and is emitted on every render
	   whatever the density is. The side padding is a literal 14px for the same
	   reason: the shell chrome opts out of --pbjcrm-space entirely. */
	height: var(--nav-header-h);
	padding: 0 14px;
	box-sizing: border-box;

	background: var(--nav-bg-chrome);
	color: var(--nav-text);
	font-family: var(--nav-font);
	font-size: 13px;
	line-height: 1.4;
}

.pbjcrm-hdr * {
	box-sizing: border-box;
}

/* ----------------------------------------------------- Touch targets (§2.8)

   ⛔ THE HIT AREA GROWS, THE CHIP DOES NOT. §2.8 asks for 44×44 CSS px on every
   interactive target and §2.1 fixes the visual sizes at 26, 28 and 22px — so
   the two are reconciled the way the spec itself says to: pad the hit area,
   keep the visual size. Each control gets a transparent ::after centred on it,
   which is part of the button (a click on it IS a click on the button) and
   paints nothing.

   ⚠️ IT FITS. 44px inside a 48px bar leaves 2px top and bottom, and the
   horizontal overhang on the narrowest control (the 22px avatar's chip) is
   11px a side against a 14px gap — so two neighbouring hit areas never meet. */
.pbjcrm-rail-toggle,
button.pbjcrm-tab,
.pbjcrm-hdr-create,
.pbjcrm-hdr-jump,
.pbjcrm-hdr-mode,
.pbjcrm-hdr-notif,
.pbjcrm-hdr-account,
.pbjcrm-hdr-utility,
.pbjcrm-hdr-logolink {
	position: relative;
}

.pbjcrm-rail-toggle::after,
button.pbjcrm-tab::after,
.pbjcrm-hdr-create::after,
.pbjcrm-hdr-jump::after,
.pbjcrm-hdr-mode::after,
.pbjcrm-hdr-notif::after,
.pbjcrm-hdr-account::after,
.pbjcrm-hdr-utility::after,
.pbjcrm-hdr-logolink::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	min-width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	pointer-events: auto;
}

/* ------------------------------------------------ Rail drawer control (§2.8)

   ⛔ THIS FILE OWNS THE BUTTON AND NOTHING ELSE. The contract is: a real
   <button class="pbjcrm-rail-toggle"> with aria-controls="pbj-crm-rail" and an
   honest aria-expanded, which toggles the class `pbjcrm-rail-open` on
   #pbj-crm-app. What that class DOES — the off-canvas drawer, the scrim, the
   rail's own transform — belongs to the rail's stylesheet, not to this one.

   ⚠️ THE BARS ARE DRAWN, NOT TYPED. No icon pack and no emoji (handoff rule),
   so the control is three spans with a background colour; the button carries
   the aria-label because its visible content is a symbol. */
.pbjcrm-rail-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--nav-line-control);
	border-radius: 8px;
	cursor: pointer;
}

.pbjcrm-rail-toggle:hover {
	background: var(--nav-bg-panel);
}

.pbjcrm-rail-toggle-bars {
	display: block;
	width: 14px;
}

.pbjcrm-rail-toggle-bar {
	display: block;
	height: 1.5px;
	background: var(--nav-text-2);
	border-radius: 1px;
}

.pbjcrm-rail-toggle-bar + .pbjcrm-rail-toggle-bar {
	margin-top: 3px;
}

/* The right-hand narrow-desktop door. It is a sibling of the left rail
   control, not a second rail button: its panel contains the workspace/account
   menu while the left control continues to own only #pbj-crm-rail. */
.pbjcrm-hdr-utility-wrap {
	display: none;
}

.pbjcrm-hdr-utility {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--nav-line-control);
	border-radius: 8px;
	cursor: pointer;
}

.pbjcrm-hdr-utility:hover {
	background: var(--nav-bg-panel);
}

.pbjcrm-hdr-utility-bars {
	display: block;
	width: 14px;
}

.pbjcrm-hdr-utility-bar {
	display: block;
	height: 1.5px;
	background: var(--nav-text-2);
	border-radius: 1px;
}

.pbjcrm-hdr-utility-bar + .pbjcrm-hdr-utility-bar {
	margin-top: 3px;
}

.pbjcrm-hdr-utility > .pbjcrm-hdr-badge-count {
	position: absolute;
	top: -7px;
	right: -7px;
}

/* ------------------------------------------------------------------- Logo */

/* The logo is a link to the reader's own home screen (item 10, 2026-08-15).
   The link is pure structure — no colour, underline or padding of its own. */
.pbjcrm-hdr-logolink,
.pbjcrm-hdr-logolink:link,
.pbjcrm-hdr-logolink:visited,
.pbjcrm-hdr-logolink:hover,
.pbjcrm-hdr-logolink:focus {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-decoration: none;
}

/* §2.1 point 1: max height 22px. */
.pbjcrm-hdr-logo {
	display: block;
	height: auto;
	max-height: 22px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}

/* The fallback when no logo file is set. Sized to sit inside the same 22px. */
.pbjcrm-hdr-wordmark {
	display: inline-flex;
	align-items: center;
	max-height: 22px;
	color: var(--nav-text);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .035em;
	line-height: 1;
	white-space: nowrap;
}

/* ------------------------------------------------------------- Tabs (§2.1)

   ⛔ AN EMPTY CONTAINER THIS FILE NEVER FILLS. #pbj-crm-tabs is created by
   pbj-crm-header.js and painted by pbj-crm.js. It is created unconditionally
   and never removed: the portal falls back to painting its tabs inside the app
   when the slot is missing, so a slot that came and went would give somebody
   two rows of tabs.

   Every measurement here is §2.1 point 2, exactly: 13px, --nav-text-2, 6px/12px
   padding, 7px radius, 4px gap; active is --nav-red / white / weight 500; an
   inactive tab hovers to --nav-bg-panel. */
.pbjcrm-tabs {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	overflow-x: auto;
	/* The bar never grows a scrollbar of its own — acceptance §1 allows exactly
	   one scrollbar on the page, in the content region. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pbjcrm-tabs::-webkit-scrollbar {
	display: none;
}

button.pbjcrm-tab {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 6px 12px;
	background: transparent;
	color: var(--nav-text-2);
	border: 0;
	border-radius: 7px;
	font: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
}

button.pbjcrm-tab:not(.pbjcrm-active):hover {
	background: var(--nav-bg-panel);
	color: var(--nav-text);
}

/* ⚠️ INK-ON-RED HAS NO --nav-* NAME. The design writes `#fff` here, and a
   literal white would be wrong on the light presets where --nav-red resolves to
   a pale accent. --pbjcrm-accent-contrast is the theme's OWN contrast-checked
   partner for the variable --nav-red aliases, so it is the value a
   `--nav-red-ink` token would be defined as. Reported upstream as the missing
   sibling of --nav-green-ink; swap this one line when it lands. */
button.pbjcrm-tab.pbjcrm-active {
	background: var(--nav-red);
	color: var(--pbjcrm-accent-contrast);
	font-weight: 500;
}

/* ------------------------------------------------------ Create button (§2.1)

   §2.1 point 3, exactly: green pill, --nav-green on --nav-green-ink, weight
   700, 28px tall, 12px horizontal padding, 8px radius, label `+ Create`. Under
   1100px the word goes and it becomes a 28×28 `+` (§2.8) — the sign stays, so
   the control never becomes an empty box. */
.pbjcrm-hdr-createslot {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;

	/* §2.1 point 3: "6px to the right of the last tab". The bar's own gap is
	   14px, so the slot pulls 8px back off it. 14 − 8 = 6. */
	margin-left: -8px;
}

.pbjcrm-hdr-create {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 28px;
	padding: 0 12px;
	background: var(--nav-green);
	color: var(--nav-green-ink);
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.pbjcrm-hdr-create-sign {
	font-size: 14px;
	line-height: 1;
}

/* ------------------------------------------------------------- The spacer */

.pbjcrm-hdr-spacer {
	margin-left: auto;
}

/* ------------------------------------------------------- ⌘K chip (§2.1 · 5)

   Height 26px, 1px --nav-line-control, 8px radius, "Jump to…" at 12px
   --nav-text-mute, then a mono 10.5px keycap in its own bordered box.

   ⛔ ALWAYS VISIBLE. The spec says a keyboard-only palette is not acceptable,
   so this chip is never hidden at any width — under 860px it loses the words
   and keeps the keycap, which is still a visible, tappable door.

   ⚠️ THE FILL HAS NO --nav-* NAME. The design writes `#191a1f`; the only
   declared name whose literal matches is --nav-bg-bulkbar (`#181a1f`, one step
   in one channel), and it is an alias onto the theme's surface-alt, so it
   follows the preset. Reported upstream as a missing --nav-bg-control. */
.pbjcrm-hdr-jump {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	height: 26px;
	padding: 0 8px;
	background: var(--nav-bg-bulkbar);
	color: var(--nav-text-mute);
	border: 1px solid var(--nav-line-control);
	border-radius: 8px;
	font: inherit;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.pbjcrm-hdr-jump:hover {
	background: var(--nav-bg-panel);
	color: var(--nav-text-2);
}

.pbjcrm-hdr-jump-label {
	font-size: 12px;
	color: inherit;
}

.pbjcrm-hdr-jump-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 16px;
	padding: 0 4px;
	border: 1px solid var(--nav-line-control);
	/* Not a spec'd value: a 16px box cannot carry the chip's own 8px corner
	   without reading as a lozenge. 4px is half of it, which is the smallest
	   choice that keeps the two shapes related. */
	border-radius: 4px;
	font-family: var(--nav-font-mono);
	font-size: 10.5px;
	line-height: 1;
	color: var(--nav-text-mute);
}

/* -------------------------------------------- Desktop / phone, one control

   ⛔ THE LABEL IS THE MODE IT SWITCHES TO (Jake, 2026-08-21). On the desktop
   interface it reads "Mobile". That makes it an ACTION label, not a state
   indicator, so the old is-on / is-off pair — where a green or muted background
   carried the state — is gone with them: a background that means something is
   exactly what an action label must not have. It is an ordinary themed control
   now, and pbj-crm-header.js drops aria-pressed to match (a toggle button's
   label must not change with its pressed state; see paintModeButton()).

   ⚠️ .is-on AND .is-off ARE DELIBERATELY ABSENT rather than left behind as dead
   rules. Nothing emits them any more, and a stale rule pair is how the next
   session concludes the state colouring is still wanted. */
.pbjcrm-hdr-modeslot {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.pbjcrm-hdr-mode {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	background: transparent;
	color: var(--nav-text-2);
	border: 1px solid var(--nav-line-control);
	border-radius: 8px;
	font: inherit;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.pbjcrm-hdr-mode:hover {
	background: var(--nav-bg-panel);
	color: var(--nav-text);
}

/* ------------------------------------------------- Notifications (§2.1 · 6)

   Only the BADGE and the button's own chrome changed here. The panel under it
   — the rows, the "why is this number what it is?" audit and the desktop-
   notification switch — is untouched and keeps its own tokens further down.

   ⛔ HIDDEN ENTIRELY AT ZERO, NOT RENDERED AS "0" (§2.1 point 6). Which leaves
   the button with nothing to show when there is nothing waiting, so it carries
   a small hollow ring as its resting mark: no icon pack, no emoji, one CSS
   circle, and the same box the badge occupies so the bar cannot reflow when a
   count arrives. */
.pbjcrm-hdr-notif {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	height: 28px;
	padding: 0 8px;
	background: transparent;
	color: var(--nav-text-2);
	border: 1px solid transparent;
	border-radius: 8px;
	font: inherit;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.pbjcrm-hdr-notif:hover {
	background: var(--nav-bg-panel);
	color: var(--nav-text);
}

.pbjcrm-hdr-notif-mark {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid var(--nav-line-control);
	border-radius: 50%;
}

.pbjcrm-hdr-notif-mark[hidden] {
	display: none;
}

/* ⚠️ WHITE HAS NO --nav-* NAME — same gap as the active tab above, same
   resolution, same one-line swap when --nav-red-ink lands. */
.pbjcrm-hdr-notif > .pbjcrm-hdr-badge-count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--nav-red);
	color: var(--pbjcrm-accent-contrast);
	border: 0;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 700;
}

/* `hidden` means not here, and no preset or palette may out-order it — the same
   reason written out over .pbjcrm-subnav[hidden] in pbj-crm.css. */
.pbjcrm-hdr-badge-count[hidden] {
	display: none !important;
}

/* -------------------------------------------------- Account chip (§2.1 · 7)

   22px round avatar + display name at 12px, opening the account menu (§2.5).

   ⛔ "COWORKERS ONLINE" FOLDED IN HERE (Jake, 2026-08-21) and this is a
   PRESENTATION merge only: the heartbeat, the online window, the cap and the
   visibilitychange pause are all exactly as they were. What changed is where
   the answer is shown — a count on the chip, and the names in the chip's own
   panel — instead of a second control in the bar. */
.pbjcrm-hdr-account {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	max-width: 220px;
	height: 32px;
	padding: 0 8px 0 5px;
	background: transparent;
	color: var(--nav-text);
	border: 1px solid transparent;
	border-radius: 8px;
	font: inherit;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

.pbjcrm-hdr-account:hover {
	background: var(--nav-bg-panel);
}

/* ⚠️ INITIALS, BECAUSE THERE IS NO PICTURE TO SHOW. GET /header sends
   { id, name, profile_hash } and no avatar URL, and includes/ is not this
   build's to edit — so the 22px round mark is the display name's own initial
   on a themed disc. It is a real avatar shape at the spec's size; the day the
   payload carries a URL, an <img> goes inside this same box. */
.pbjcrm-hdr-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	overflow: hidden;
	background: var(--nav-bg-panel);
	color: var(--nav-text-2);
	border: 1px solid var(--nav-line-control);
	border-radius: 50%;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.pbjcrm-hdr-account-name {
	min-width: 0;
	overflow: hidden;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* How many other people are signed in, in the place the words used to be.
   Hidden at zero for the same reason the notification badge is: a control that
   says "0" is a line that says nothing. */
.pbjcrm-hdr-account-online {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--nav-bg-bulkbar);
	color: var(--nav-text-mute);
	border: 1px solid var(--nav-line-control);
	border-radius: 8px;
	font-family: var(--nav-font-mono);
	font-size: 10px;
	line-height: 1;
}

.pbjcrm-hdr-account-online[hidden] {
	display: none;
}

.pbjcrm-hdr-account-menu {
	min-width: 240px;
	max-width: 300px;
}

/* The panel's own group label, the rail's label shape at the rail's size. */
.pbjcrm-hdr-account-label {
	margin: 2px 0 4px;
	padding: 0 6px;
	color: var(--nav-text-faint);
	font-family: var(--nav-font-mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.pbjcrm-hdr-account-menu .pbjcrm-hdr-drop-list li + li {
	border-top: 1px solid var(--nav-line-soft);
}

/* The rows that survive in this panel until §2.5's own menu takes over:
   the reader's profile, the wp-admin door and the way out. */
.pbjcrm-hdr-btn,
.pbjcrm-hdr-link {
	display: block;
	width: 100%;
	margin-top: 2px;
	padding: 7px 8px;
	background: transparent;
	color: var(--nav-text);
	border: 1px solid transparent;
	border-radius: 7px;
	font: inherit;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.pbjcrm-hdr-btn:hover,
.pbjcrm-hdr-link:hover {
	background: var(--nav-bg-panel);
}

/* §2.5: Log out is the last row and it is the alert colour. */
.pbjcrm-hdr-logout,
.pbjcrm-hdr-logout:link,
.pbjcrm-hdr-logout:visited {
	margin-top: 6px;
	border-top: 1px solid var(--nav-line-soft);
	border-radius: 0;
	color: var(--nav-red-alert);
	font-weight: 600;
}

/* ------------------------------------------------- The controls with menus

   Notifications, the account chip and Create each sit inside a
   .pbjcrm-hdr-drop wrapper, which is what their absolutely-positioned panel is
   measured from. As a direct child of the bar that wrapper is a flex item, and
   without this it would be free to shrink and squeeze the control inside it. */
.pbjcrm-hdr > .pbjcrm-hdr-drop,
.pbjcrm-hdr-createslot > .pbjcrm-hdr-drop {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

/* The generic drop wrapper above must not make the narrow-only utility door
   visible on a wide desktop or in the dedicated phone header. The 640px rule
   later opts it in only for narrow desktop mode. */
.pbjcrm-hdr > .pbjcrm-hdr-utility-wrap {
	display: none;
}

.pbjcrm-hdr-account-wrap {
	min-width: 0;
}

/* ------------------------------------------------------------ Focus (§2.8)

   ⛔ EVERY CONTROL IN THE BAR, NOT THE ONE THAT CHANGED. The list is swept
   together on purpose (pbj-behavior 9b): a focus ring that covers six of eight
   controls is worse than none, because the two that are missing look like they
   are not reachable.

   ⚠️ THE RING HAS NO --nav-* NAME EITHER. --pbjcrm-focus-ring is derived from
   the accent by the theme and is visible on every preset; reported upstream
   with the other two gaps. */
.pbjcrm-rail-toggle:focus-visible,
button.pbjcrm-tab:focus-visible,
.pbjcrm-hdr-logolink:focus-visible,
.pbjcrm-hdr-create:focus-visible,
.pbjcrm-hdr-jump:focus-visible,
.pbjcrm-hdr-mode:focus-visible,
.pbjcrm-hdr-notif:focus-visible,
.pbjcrm-hdr-account:focus-visible,
.pbjcrm-hdr-utility:focus-visible,
.pbjcrm-hdr-btn:focus-visible,
.pbjcrm-hdr-link:focus-visible,
.pbjcrm-hdr-notif-row:focus-visible,
.pbjcrm-hdr-notif-all:focus-visible,
.pbjcrm-hdr-audit-btn:focus-visible,
.pbjcrm-hdr-create-row:focus-visible,
.pbjcrm-search-item:focus-visible,
.pbjcrm-search-close:focus-visible,
.pbjcrm-search-input:focus-visible {
	outline: 2px solid var(--pbjcrm-focus-ring, #2271b1);
	outline-offset: 2px;
	border-radius: 7px;
}

.pbjcrm-hdr-notif-row[disabled] {
	background: var(--pbjcrm-action-disabled-bg, var(--pbjcrm-surface-alt));
	color: var(--pbjcrm-action-disabled-text, var(--pbjcrm-text-soft));
	border-color: var(--pbjcrm-action-disabled-border, var(--pbjcrm-edge));
	cursor: default;
	opacity: 1;
}

/* The count pill inside the MENUS keeps the shape it always had — it is a
   figure in a list, not the bar's alert badge. */
.pbjcrm-hdr-badge-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--pbjcrm-radius-pill, 999px);
	background: var(--pbjcrm-surface-alt, #f6f7f8);
	color: var(--pbjcrm-text, #1d2327);
	font-size: 12px;
	font-weight: 700;
}

/* --------------------------------------------------- Notifications (item 11)

   ONE control where a badge per count used to be. The button wears exactly the
   same pill as its neighbours (it is in the shared list above) — what is new
   here is the menu underneath it, which reuses .pbjcrm-hdr-drop-panel for the
   box and adds rows and a footer.

   ⛔ NOT ONE HEX THAT IS NOT A FALLBACK. Every colour is a --pbjcrm-* token the
   theme emits, so the light presets and the two dark ones are both right
   without this file knowing what dark means. */

/* ⛔ THE WORD IS CLIPPED AT EVERY WIDTH NOW, NOT ONLY ON A PHONE. §2.1 point 6
   gives this control a count badge and nothing else, so the label has no room
   in a 48px bar — but a control whose only visible content is a number (and, at
   zero, a ring) is a control a screen reader cannot name. Clipping keeps the
   word in the accessibility tree; `display: none` would delete it. */
.pbjcrm-hdr-notif-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Wider than the coworkers panel because a row here is a sentence ("Waiting on
   a reply") with a number pinned to the far end. */
.pbjcrm-hdr-notif-menu {
	min-width: 240px;
	max-width: 320px;
}

/* One count. The label goes left, the number right, and the whole row is the
   target — a person aiming at "3" and a person aiming at the words both land
   on the same screen. */
.pbjcrm-hdr-notif-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 7px 8px;
	background: transparent;
	color: var(--pbjcrm-text, #1d2327);
	border: 1px solid transparent;
	border-radius: var(--pbjcrm-radius-sm, 3px);
	font: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.pbjcrm-hdr-notif-row:hover {
	background: var(--pbjcrm-surface-alt, #f6f7f8);
	border-color: var(--pbjcrm-border, #d8dce0);
}

.pbjcrm-hdr-notif-row-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Every row in this menu is a live count — a zero row is omitted, never dimmed
   (see paintNotifications()) — so the number always wears the accent. */
.pbjcrm-hdr-notif-row .pbjcrm-hdr-badge-count {
	background: var(--pbjcrm-accent, #2271b1);
	color: var(--pbjcrm-accent-contrast, #ffffff);
}

.pbjcrm-hdr-notif-row[disabled] .pbjcrm-hdr-badge-count {
	background: var(--pbjcrm-surface-alt, #f6f7f8);
	color: var(--pbjcrm-text, #1d2327);
}

/* The way through to the whole list. It is the last thing in the menu and it is
   separated by a rule, because it is a different KIND of thing from the rows
   above it: they narrow, this one opens. */
.pbjcrm-hdr-notif-all {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 8px;
	background: transparent;
	color: var(--pbjcrm-accent-strong, #135e96);
	border: 0;
	border-top: 1px solid var(--pbjcrm-border, #d8dce0);
	border-radius: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.pbjcrm-hdr-notif-all:hover {
	color: var(--pbjcrm-accent, #2271b1);
	text-decoration: underline;
}

/* ------------------------------------------- Desktop notifications (F11) */

/* The switch is the LAST thing in the menu and quieter than everything above
   it: the rows are today's work and this is a setting about how you are told
   about tomorrow's. Same left-aligned full-width shape as the rows, so the menu
   is still one column of things you can press. */
.pbjcrm-hdr-notif-desktop {
	margin-top: 4px;
	border-top: 1px solid var(--pbjcrm-border, #d8dce0);
}

.pbjcrm-hdr-notif-desktop-btn {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 8px;
	background: transparent;
	color: var(--pbjcrm-text-soft, #3c434a);
	border: 0;
	border-radius: var(--pbjcrm-radius-sm, 3px);
	font: inherit;
	font-size: 12px;
	text-align: left;
	cursor: pointer;
}

.pbjcrm-hdr-notif-desktop-btn:hover {
	background: var(--pbjcrm-surface-alt, #f6f7f8);
	color: var(--pbjcrm-text, #1d2327);
}

.pbjcrm-hdr-notif-desktop-btn:focus-visible {
	outline: 2px solid var(--pbjcrm-focus-ring, #2271b1);
	outline-offset: 2px;
}

/* On, and saying so: the accent is the same one the live badge wears, which is
   the colour this bar already means "there is something here" with. */
.pbjcrm-hdr-notif-desktop-btn.is-on {
	color: var(--pbjcrm-accent-strong, #135e96);
	font-weight: 600;
}

.pbjcrm-hdr-notif-desktop-btn[disabled] {
	color: var(--pbjcrm-action-disabled-text, var(--pbjcrm-text-soft));
	cursor: default;
}

/* Said where the button is, because this bar has no toast. Hidden until the
   browser has actually refused — the attribute is what hides it, so a browser
   with no CSS from us still gets that right. */
.pbjcrm-hdr-notif-blocked {
	margin: 0 0 6px;
	padding: 0 8px;
	color: var(--pbjcrm-danger, #b32d2e);
	font-size: 12px;
}

.pbjcrm-hdr-notif-blocked[hidden] {
	display: none;
}

/* ------------------------------------ "Why is this number what it is?" (1.56.0)

   ⛔ THIS EXISTS BECAUSE THE NUMBERS WERE ALREADY RIGHT. Jake's screen read
   bell 9 · Open tasks 1 · "Tickets: 4 open 4 replied" badge 6 · Inbox 2 — every
   figure arithmetically correct, drawn from three different populations, with
   nothing on screen saying so. This block is the plain-English answer, printed
   from GET /inbox/audit and never worked out in the browser.

   Quieter than the rows above it: those are today's work, this is a question
   somebody asks once. Every colour is a --pbjcrm-* token the theme emits onto
   .pbjcrm-hdr, so it is right on the light presets and the two dark ones
   without this file knowing what dark means. */
.pbjcrm-hdr-audit {
	margin-top: 4px;
	border-top: 1px solid var(--pbjcrm-border, #d8dce0);
}

.pbjcrm-hdr-audit-btn {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 7px 8px;
	background: transparent;
	color: var(--pbjcrm-muted, #646d76);
	border: 1px solid transparent;
	border-radius: var(--pbjcrm-radius-sm, 3px);
	font: inherit;
	font-size: 12px;
	text-align: left;
	cursor: pointer;
}

.pbjcrm-hdr-audit-btn:hover {
	background: var(--pbjcrm-surface-alt, #f6f7f8);
	color: var(--pbjcrm-text, #1d2327);
	border-color: var(--pbjcrm-border, #d8dce0);
}

.pbjcrm-hdr-audit-out:not(:empty) {
	margin-top: 6px;
	padding: 8px;
	background: var(--pbjcrm-surface-alt, #f6f7f8);
	border: 1px solid var(--pbjcrm-border, #d8dce0);
	border-radius: var(--pbjcrm-radius-sm, 3px);
}

.pbjcrm-hdr-audit-rule,
.pbjcrm-hdr-audit-note,
.pbjcrm-hdr-audit-sub {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--pbjcrm-text, #1d2327);
}

.pbjcrm-hdr-audit-note {
	color: var(--pbjcrm-muted, #646d76);
}

.pbjcrm-hdr-audit-sub {
	margin-top: 8px;
	font-weight: 600;
}

.pbjcrm-hdr-audit-list {
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.pbjcrm-hdr-audit-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 0;
	font-size: 12px;
	color: var(--pbjcrm-text, #1d2327);
}

.pbjcrm-hdr-audit-line + .pbjcrm-hdr-audit-line {
	border-top: 1px solid var(--pbjcrm-border, #d8dce0);
}

.pbjcrm-hdr-audit-line-label {
	min-width: 0;
}

/* The three figures are FACTS, not alerts: the accent pill the rest of this
   menu uses would shout at somebody who only asked a question. */
.pbjcrm-hdr-audit-line .pbjcrm-hdr-badge-count {
	background: var(--pbjcrm-surface, #ffffff);
	color: var(--pbjcrm-text, #1d2327);
	border: 1px solid var(--pbjcrm-edge, #8e9296);
}

.pbjcrm-hdr-audit-ok {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--pbjcrm-success, #157347);
}

.pbjcrm-hdr-audit-bad {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pbjcrm-warning, #8a6100);
}

/* The server's own words, printed as they arrived. ⛔ Nothing here rewrites,
   summarises or second-guesses a note — a second opinion about this number is
   how the surface broke four times. */
.pbjcrm-hdr-audit-notes {
	margin: 0;
	padding-left: 18px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--pbjcrm-text, #1d2327);
}

.pbjcrm-hdr-audit-notes li + li {
	margin-top: 4px;
}

/* ------------------------------------------- Quick create — item 6 (1.56.0)

   Jake, verbatim: "Quick create button next to search in desktop mode only,
   modeled after mobile create (create+) is the label of the button for the
   popup".

   ⛔ WHERE IT MOUNTS IS A THEME DECISION, NOT A LAYOUT ONE. The popup is a
   CHILD OF .pbjcrm-hdr — inside .pbjcrm-hdr-right, in the slot the script
   fills — and never appended to <body>. The theme's custom properties are
   printed onto `:root, .pbjcrm-login, .pbjcrm-hdr, .pbjcrm-search-overlay`
   (PBJ_CRM_Theme::inline_css()), so a body-level panel would inherit :root's
   set and MISS the header's own inline one; sitting inside the bar it gets
   every token by inheritance, exactly like the Notifications menu beside it.
   It also reuses .pbjcrm-hdr-drop-panel, so the box, the border and the shadow
   are one implementation for both menus. */
/* ⚠️ .pbjcrm-hdr-createslot AND .pbjcrm-hdr-create ARE STYLED IN THE SHELL
   SECTION AT THE TOP OF THIS FILE (§2.1 point 3: the green pill). What is left
   here is the POPUP only — the panel this button opens when pbj-crm.js has not
   published window.pbjCrm.openCreateMenu() yet. */

/* ⛔ THE CREATE PANEL HANGS OFF THE LEFT NOW. Its button moved from the bar's
   right-hand end to between the tabs and the spacer (§2.1 point 3), and the
   shared .pbjcrm-hdr-drop-panel pins panels by their RIGHT edge — which was
   right for controls at the right end and is wrong here. §2.4: "anchored below
   the button, left edges aligned". */
.pbjcrm-hdr-create-wrap .pbjcrm-hdr-drop-panel {
	right: auto;
	left: 0;
}

/* Wider than the account panel because every row is a name with a line of
   plain English under it. */
.pbjcrm-hdr-create-menu {
	min-width: 240px;
	max-width: 320px;
}

.pbjcrm-hdr-create-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: 100%;
	padding: 7px 8px;
	background: transparent;
	color: var(--pbjcrm-text, #1d2327);
	border: 1px solid transparent;
	border-radius: var(--pbjcrm-radius-sm, 3px);
	font: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.pbjcrm-hdr-create-row:hover {
	background: var(--pbjcrm-surface-alt, #f6f7f8);
	border-color: var(--pbjcrm-border, #d8dce0);
}

.pbjcrm-hdr-create-row-label {
	font-weight: 600;
}

.pbjcrm-hdr-create-row-hint {
	font-size: 12px;
	line-height: 1.35;
	color: var(--pbjcrm-muted, #646d76);
}

/* The module half. It fills in after two REST calls, so it is a box that is
   empty until it is not — no heading, because a heading over nothing reads as
   something that failed to load. */
.pbjcrm-hdr-create-extra:not(:empty) {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--pbjcrm-border, #d8dce0);
}

/* ⚠️ .pbjcrm-hdr-icon-glyph IS GONE BECAUSE NOTHING EMITS IT ANY MORE. The
   loose search icon was folded into the ⌘K chip (§2.1 point 5), which is the
   one door to the palette and to the search overlay behind it. .pbjcrm-hdr-
   logout is styled with the other account-panel rows at the top of this file. */

/* --------------------------------------------------------- The dropdown */

.pbjcrm-hdr-drop {
	position: relative;
}

.pbjcrm-hdr-drop-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 10;
	min-width: 200px;
	max-width: 280px;
	max-height: 320px;
	overflow: auto;
	padding: var(--pbjcrm-space-sm, 7px);
	background: var(--pbjcrm-surface, #ffffff);
	color: var(--pbjcrm-text, #1d2327);
	/* --pbjcrm-edge: this panel hangs over the header bar, and --pbjcrm-border
	   measured 1.32–1.51:1 against that bar. The edge token measures 3.52:1 at
	   worst across the eight presets. */
	border: 1px solid var(--pbjcrm-edge, #8e9296);
	border-radius: var(--pbjcrm-radius, 6px);
	box-shadow: 0 6px 18px var(--pbjcrm-shadow, rgba(0, 0, 0, 0.18));
}

/* `!important` for the reason written out in full over .pbjcrm-subnav[hidden] in
   pbj-crm.css (item 4, 2026-08-15): `hidden` means not here, and no preset, tab
   style or palette may out-order it. Swept with that fix rather than left as the
   sibling that fails next (pbj-behavior 9b). */
.pbjcrm-hdr-drop-panel[hidden] {
	display: none !important;
}

.pbjcrm-hdr-drop-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pbjcrm-hdr-drop-list li {
	padding: 5px 6px;
	font-size: 13px;
	border-radius: var(--pbjcrm-radius-sm, 3px);
}

.pbjcrm-hdr-drop-list li + li {
	border-top: 1px solid var(--pbjcrm-border, #d8dce0);
}

.pbjcrm-hdr-drop-note {
	margin: 0;
	padding: 4px 6px;
	font-size: 13px;
	color: var(--pbjcrm-muted, #646d76);
}

/* --------------------------------------------------------- Search overlay */

.pbjcrm-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 8vh 16px 16px;
	/* One scrim for the whole suite (--pbjcrm-overlay, 2026-08-15). This used to
	   be a private rgba() and no two dialogs in the suite agreed on the number. */
	background: var(--pbjcrm-overlay, rgba(0, 0, 0, 0.45));
	color: var(--pbjcrm-text, #1d2327);
	font-family: var(--pbjcrm-font, inherit);
	box-sizing: border-box;
}

/* `!important` for the reason written out in full over .pbjcrm-subnav[hidden] in
   pbj-crm.css (item 4, 2026-08-15): `hidden` means not here, and no preset, tab
   style or palette may out-order it. Swept with that fix rather than left as the
   sibling that fails next (pbj-behavior 9b). */
.pbjcrm-search-overlay[hidden] {
	display: none !important;
}

.pbjcrm-search-overlay * {
	box-sizing: border-box;
}

.pbjcrm-search-panel {
	width: 100%;
	max-width: 620px;
	max-height: 76vh;
	overflow: auto;
	padding: var(--pbjcrm-space, 14px);
	background: var(--pbjcrm-surface, #ffffff);
	color: var(--pbjcrm-text, #1d2327);
	border: 1px solid var(--pbjcrm-edge, #8e9296);
	border-radius: var(--pbjcrm-radius, 6px);
	box-shadow: 0 12px 40px var(--pbjcrm-shadow, rgba(0, 0, 0, 0.18));
}

.pbjcrm-search-bar {
	display: flex;
	align-items: center;
	gap: var(--pbjcrm-space-sm, 7px);
}

.pbjcrm-search-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	background: var(--pbjcrm-surface, #ffffff);
	color: var(--pbjcrm-text, #1d2327);
	/* --pbjcrm-edge (item 3 sweep, 2026-08-15): this is the one control ON the
	   search overlay, so it is part of the same above-page family and owes the
	   same 3:1 boundary. border-strong measures 1.71-2.45:1 against this very
	   surface on six of eight presets. */
	border: 1px solid var(--pbjcrm-edge, #b4bcc3);
	border-radius: var(--pbjcrm-radius-sm, 3px);
	font: inherit;
	font-size: 16px;
}

.pbjcrm-search-close {
	padding: 8px 12px;
	background: var(--pbjcrm-btn-soft-bg, #ffffff);
	color: var(--pbjcrm-btn-soft-text, #1d2327);
	border: 1px solid var(--pbjcrm-btn-soft-border, #b4bcc3);
	border-radius: var(--pbjcrm-radius-sm, 3px);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.pbjcrm-search-close:hover {
	background: var(--pbjcrm-btn-soft-hover-bg, #f6f7f8);
}

/* 15.4's slot, now the kind filter. Still collapses to nothing when there is
   nothing to filter by — an older server, or a caller with no kinds. */
.pbjcrm-search-filters:empty {
	display: none;
}

.pbjcrm-search-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--pbjcrm-space-sm, 7px);
}

/* The kind pills. Same tokens as every other pill in the suite, so they follow
   the owner's preset rather than declaring a look of their own; the on/off pair
   is contrast-checked by the theme, which is why the pressed state can safely
   be a solid accent fill. */
.pbjcrm-search-filters .pbjcrm-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: var(--pbjcrm-pill-bg, #f6f7f8);
	color: var(--pbjcrm-pill-text, #1d2327);
	border: 1px solid var(--pbjcrm-pill-border, #d8dce0);
	border-radius: var(--pbjcrm-radius-pill, 999px);
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
}

.pbjcrm-search-filters .pbjcrm-pill:hover {
	border-color: var(--pbjcrm-border-strong, #b4bcc3);
}

/* Pressed is the ONLY on-state: there is no separate class to keep in step with
   aria-pressed, so what a screen reader is told and what the eye sees are the
   same fact. */
.pbjcrm-search-filters .pbjcrm-pill[aria-pressed="true"] {
	background: var(--pbjcrm-pill-on-bg, #2271b1);
	color: var(--pbjcrm-pill-on-text, #ffffff);
	border-color: var(--pbjcrm-pill-on-border, #2271b1);
}

.pbjcrm-search-filters .pbjcrm-pill:focus-visible {
	outline: 2px solid var(--pbjcrm-focus-ring, #2271b1);
	outline-offset: 2px;
}

.pbjcrm-search-results {
	margin-top: var(--pbjcrm-space-sm, 7px);
}

.pbjcrm-search-group + .pbjcrm-search-group {
	margin-top: var(--pbjcrm-space, 14px);
}

.pbjcrm-search-group-label {
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pbjcrm-muted, #646d76);
}

.pbjcrm-search-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: 100%;
	padding: 8px 10px;
	background: transparent;
	color: var(--pbjcrm-text, #1d2327);
	border: 1px solid transparent;
	border-radius: var(--pbjcrm-radius-sm, 3px);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pbjcrm-search-item:hover {
	background: var(--pbjcrm-surface-alt, #f6f7f8);
	border-color: var(--pbjcrm-border, #d8dce0);
}

.pbjcrm-search-item-label {
	font-weight: 600;
}

.pbjcrm-search-item-sub {
	font-size: 12px;
	color: var(--pbjcrm-muted, #646d76);
}

.pbjcrm-search-note {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--pbjcrm-muted, #646d76);
}

/* ------------------------------------------------------- Responsive (§2.8)

   Two breakpoints, and only two: under 1100px Create loses its word, under
   860px the rail becomes a drawer opened from the control at the bar's far
   left. The gaps and the side padding stay at 14px at every width, because
   §2.1's pixel values are exact and nothing in §2.8 relaxes them.

   ⚠️ THE WORDS ARE CLIPPED, NEVER `display: none`. A control whose only label
   is a symbol is a control a screen reader cannot name — clipping keeps the
   word in the accessibility tree while taking it out of the layout, which is
   the whole difference between hiding a word and deleting it. Each of these
   controls also carries an aria-label, so the two never disagree. */

.pbjcrm-hdr-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 1099.98px) {
	/* §2.8: "Create collapses to +" — a 28×28 square, the sign kept. */
	.pbjcrm-hdr-create {
		width: 28px;
		padding: 0;
		gap: 0;
	}

	.pbjcrm-hdr-create-word {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

@media (max-width: 859.98px) {
	/* §2.8: "the rail becomes an off-canvas drawer opened from a control at
	   the header's left". The button is always in the DOM — it is drawn on
	   every paint — and this is the only thing that decides whether it is on
	   screen, so its aria-expanded is never out of step with what is visible. */
	.pbjcrm-rail-toggle {
		display: inline-flex;
	}

	/* The ⌘K chip stays — a keyboard-only palette is explicitly not acceptable
	   — but the words go and the keycap alone carries it. */
	.pbjcrm-hdr-jump-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.pbjcrm-hdr-jump {
		padding: 0 6px;
	}

	/* The account chip falls back to its avatar. */
	.pbjcrm-hdr-account-name {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.pbjcrm-hdr-account {
		padding: 0 5px;
	}

	/* The logo keeps its place at the left of the tabs; the drawer control is
	   in front of it, which is where §2.8 puts it. */
	.pbjcrm-hdr-logo {
		max-width: 110px;
	}
}

@media (max-width: 640px) {
	/* Desktop mode at a phone width has TWO doors: the rail at left and this
	   workspace menu at right. The wide header controls move into the right
	   menu instead of wrapping through the middle of the fixed bar. Dedicated
	   phone mode keeps its own logo + notifications + account header. */
	.pbjcrm-hdr:not(.pbjcrm-hdr-phone) .pbjcrm-tabs,
	.pbjcrm-hdr:not(.pbjcrm-hdr-phone) .pbjcrm-hdr-createslot,
	.pbjcrm-hdr:not(.pbjcrm-hdr-phone) .pbjcrm-hdr-modeslot,
	.pbjcrm-hdr:not(.pbjcrm-hdr-phone) .pbjcrm-hdr-jump,
	.pbjcrm-hdr:not(.pbjcrm-hdr-phone) .pbjcrm-hdr-notif-wrap,
	.pbjcrm-hdr:not(.pbjcrm-hdr-phone) .pbjcrm-hdr-account-wrap {
		display: none;
	}

	.pbjcrm-hdr:not(.pbjcrm-hdr-phone) .pbjcrm-hdr-utility-wrap {
		display: block;
		margin-left: auto;
	}

	.pbjcrm-hdr:not(.pbjcrm-hdr-phone) {
		gap: 10px;
	}

	.pbjcrm-hdr:not(.pbjcrm-hdr-phone) .pbjcrm-hdr-spacer {
		display: block;
		flex: 1 1 auto;
	}

	.pbjcrm-search-overlay {
		padding: 0;
	}

	.pbjcrm-search-panel {
		max-width: none;
		max-height: 100%;
		height: 100%;
		border-radius: 0;
	}

	/* A filter pill is a thumb target on a phone, not a 13px word. */
	.pbjcrm-search-filters .pbjcrm-pill {
		min-height: 34px;
		padding: 7px 14px;
	}

	/* The dropdowns must not hang off the edge of a narrow screen. */
	.pbjcrm-hdr-notif-menu,
	.pbjcrm-hdr-create-menu,
	.pbjcrm-hdr-account-menu {
		min-width: 0;
		max-width: min(300px, 92vw);
	}

	.pbjcrm-hdr-utility-menu {
		max-height: calc(100vh - var(--nav-header-h) - 12px);
		overflow-y: auto;
	}
}

/* ------------------------------------------------------- 15.2 Sign in */

/* The shell wraps the logo and the card so the logo can sit above it without
   the card growing. The canvas flattens any ancestor of .pbjcrm-login, which
   is exactly what this wants — it contributes no box of its own. */
.pbjcrm-login-shell {
	display: block;
	width: 100%;
}

.pbjcrm-login-logo {
	max-width: 420px;
	margin: 40px auto 0;
	text-align: center;
}

.pbjcrm-login-logo img {
	display: inline-block;
	height: auto;
	max-height: 72px;
	max-width: 100%;
	object-fit: contain;
}

/* With a logo above it the card no longer needs its own top margin. */
.pbjcrm-login-logo + .pbjcrm-login {
	margin-top: var(--pbjcrm-space, 14px);
}

/* The page behind the card follows the theme too, on the plugin's own canvas
   only — a portal still embedded in a site's theme keeps that theme's page. */
body.pbj-crm-canvas .pbjcrm-login {
	font-family: var(--pbjcrm-font, inherit);
}