/* V42 R2 -- THE header bar of every shell (V42-006 / 010 / 017 / 018 / 019; docs/V42/PB_V42_095300Z V42_R2_HEADER_SYSTEM_MONDAY_HE.md,
   CURRENT/HEADER_SYSTEM_R2.json). Owner of: header.pb42 (_Layout), its cells, the account / communication parts of _NavSummary,
   the preferences panel head (#pbPrefPanel.pb42-pref) and the programmatic-focus heading rule (V42-010).
   - Physical edges never mirror: the bar and its groups are direction:ltr (PrintiBeaver LEFT, the primary action RIGHT); every
     cell carries the page direction again, so text, input and menus read in the user's language.
   - Composition = data-pb42-layout on the header, chosen by Content/v42/pb-v42-header.js from the MEASURED bar width (sidebar,
     translation, font and zoom included): wide (one row, search centred between two equal side groups), tablet (two rows),
     mobile (search row / identity row / communication row), xs (identity split). No JS = the mobile composition (taller, never clipped).
   - V45 SHARED_SHELL (docs/V45 DATA/SHARED_SHELL_V45.json, supersedes the V44 edges): the physical-LEFT edge is the account /
     sign-in control, the physical-RIGHT edge is the primary action; no "PrintiBeaver" wordmark in the bar (the PB mark in the
     sidebar is the home link) and no quick language button (language / currency / appearance = the preferences panel only).
   - V44 HEADER R1 (docs/V44 DATA/HEADER_CONTRACT_V44_TUESDAY_R1.json, supersedes the V42 R2 "light surface in every appearance"
     rule): the bar, the search and its panels follow the appearance -- Light / System / Dark (legacy Black = Dark). In Dark the
     surface is #1C222C, the ink #F5F7FA, the brand word #F5F7FA (the same wordmark, approved reversed monochrome, no white plate,
     no second logo); the primary action and the counters stay PB magenta with white text in both. Every colour below is a
     --pb44-* token declared on the bar (light values), redefined for the explicit Dark choice and for System + OS dark.
   - One header icon family: 24 viewBox, 22px glyph, 1.8 stroke, round caps / joins, PB #BD006E (#FFB3DE in Dark); 48px targets;
     8px gaps (4px in the phone identity row); badges anchored in the button corner. Nothing here reaches the sidebar (.pb-sb*),
     _Icon or another component, and no outline is removed globally. */

/* ------------------------------------------------------------------ surface + the V44 colour tokens (Light) */
.pb42.pb-header, .pb42-pref {
    --pb44-surface: #FFFFFF;
    --pb44-ink: #171A1F;
    --pb44-muted: #667085;
    --pb44-brand: #000000;
    --pb44-icon: #BD006E;
    --pb44-accent-text: #990058;
    --pb44-input: #FFFFFF;
    --pb44-line: #D9DEE7;
    --pb44-input-line: #7B8798;
    --pb44-soft: #FAEAF3;
    --pb44-focus: #0065BD;
    --pb44-error: #A61B29;
    --pb44-create-bg: #BD006E;
    --pb44-create-hover: #A50061;
    --pb44-create-ink: #FFFFFF;
    --pb44-shadow: rgba(0, 0, 0, .14);
}
/* Dark: the explicit choice, and System when the OS prefers dark (no explicit Light) */
html[data-theme="dark"] .pb42.pb-header, html[data-theme="dark"] .pb42-pref,
html[data-theme="black"] .pb42.pb-header, html[data-theme="black"] .pb42-pref {
    --pb44-surface: #1C222C; --pb44-ink: #F5F7FA; --pb44-muted: #B9C2D0; --pb44-brand: #F5F7FA; --pb44-icon: #FFB3DE;
    --pb44-accent-text: #FFB3DE; --pb44-input: #151A22; --pb44-line: #4B5668; --pb44-input-line: #7B8798; --pb44-soft: #3D2033;
    --pb44-focus: #89C4FF; --pb44-error: #FFB4AB; --pb44-shadow: rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pb42.pb-header, html:not([data-theme="light"]) .pb42-pref {
        --pb44-surface: #1C222C; --pb44-ink: #F5F7FA; --pb44-muted: #B9C2D0; --pb44-brand: #F5F7FA; --pb44-icon: #FFB3DE;
        --pb44-accent-text: #FFB3DE; --pb44-input: #151A22; --pb44-line: #4B5668; --pb44-input-line: #7B8798; --pb44-soft: #3D2033;
        --pb44-focus: #89C4FF; --pb44-error: #FFB4AB; --pb44-shadow: rgba(0, 0, 0, .5);
    }
}
.pb42.pb-header {
    background: var(--pb44-surface);
    color: var(--pb44-ink);
    color-scheme: light;
    box-shadow: 0 1px 0 var(--pb44-line);
}
html[data-theme="dark"] .pb42.pb-header, html[data-theme="black"] .pb42.pb-header { color-scheme: dark; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pb42.pb-header { color-scheme: dark; } }
/* the mobile top menu (#pbTopMenu, admin / workspace shell) and the focus / legal process row sit inside the bar: same surface */
.pb42 .pb-topmenu { background: var(--pb44-surface); color: var(--pb44-ink); border-color: var(--pb44-line); }
.pb42 .pb-topmenu nav > a { color: var(--pb44-ink); border-color: var(--pb44-line); }
.pb42 .pb-topmenu nav > a.pb-nav-active, .pb42 .pb-topmenu .pb-topmenu-btn { color: var(--pb44-accent-text); }
.pb42 .pb42-bar {
    display: grid;
    direction: ltr;
    align-items: center;
    column-gap: 4px;
    row-gap: 8px;
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 64px;
    padding: 8px;
    /* V45 SHARED_SHELL: mobile composition (the default) -- identity row (menu + account LEFT, create RIGHT; identityColumns
       96 / remaining / 60), search row (prefs + search; searchColumns 72 / remaining), communication row (members only) */
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
        "brand acct create"
        "prefs search search"
        "comms comms comms";
}
.pb42[data-pb42-auth="0"] .pb42-bar {
    grid-template-areas:
        "brand acct create"
        "prefs search search";
}
.pb42 .pb42-l, .pb42 .pb42-c, .pb42 .pb42-r { display: contents; direction: ltr; }
.pb42 .pb42-cell { display: flex; align-items: center; gap: 8px; min-inline-size: 0; direction: ltr; }
html[dir="rtl"] .pb42 .pb42-cell:not(.pb42-brand) { direction: rtl; }
.pb42 .pb42-brand { grid-area: brand; justify-content: flex-start; }
.pb42 .pb42-acct { grid-area: acct; justify-content: flex-start; }   /* V45: the account / sign-in is the physical-left control */
.pb42 .pb42-search { grid-area: search; justify-content: center; }
.pb42 .pb42-prefs { grid-area: prefs; justify-content: center; }
.pb42 .pb42-comms { grid-area: comms; justify-content: stretch; }
.pb42 .pb42-create { grid-area: create; justify-content: flex-end; }
/* the brand cell holds only the drawer menu button (below 768); when it renders nothing it takes no room */
.pb42 .pb42-brand:empty { display: none; }

/* ------------------------------------------------------------------ xs: the identity row is split (menu + action, then account) */
.pb42[data-pb42-layout="xs"] .pb42-bar {
    grid-template-areas:
        "brand . create"
        "acct acct acct"
        "prefs search search"
        "comms comms comms";
}
.pb42[data-pb42-layout="xs"][data-pb42-auth="0"] .pb42-bar {
    grid-template-areas:
        "brand . create"
        "acct acct acct"
        "prefs search search";
}
.pb42[data-pb42-layout="xs"] .pb42-acct { justify-content: stretch; }
.pb42[data-pb42-layout="xs"] .pb42-acct > * { flex: 1 1 auto; }

/* ------------------------------------------------------------------ tablet: two rows inside the same header (V45: account LEFT, create
   RIGHT on the first row with the search between them; the second row carries preferences + communication) */
.pb42[data-pb42-layout="tablet"] .pb42-bar {
    column-gap: 8px;
    padding: 8px 16px;
    grid-template-columns: auto auto minmax(144px, 1fr) auto;
    grid-template-areas:
        "brand acct search create"
        "prefs prefs . comms";
}
.pb42[data-pb42-layout="tablet"][data-pb42-auth="0"] .pb42-bar {
    grid-template-areas:
        "brand acct search create"
        "prefs prefs . .";
}
.pb42[data-pb42-layout="tablet"] .pb42-acct { justify-content: flex-start; }
.pb42[data-pb42-layout="tablet"] .pb42-prefs,
.pb42[data-pb42-layout="tablet"][data-pb42-auth="0"] .pb42-prefs { justify-content: flex-start; }
.pb42[data-pb42-layout="tablet"] .pb42-comms { justify-content: flex-end; }

/* ------------------------------------------------------------------ wide: one row, the search centred between two EQUAL side groups
   (--pb42-side = the wider group, measured by the script; the groups never overlap and the centre never moves when a counter or
   the account appears) */
.pb42[data-pb42-layout="wide"] .pb42-bar {
    column-gap: 8px;
    padding: 8px 16px;
    grid-template-columns: minmax(var(--pb42-side, 0px), 1fr) minmax(144px, 2fr) minmax(var(--pb42-side, 0px), 1fr);
    grid-template-areas: "left search right";
}
.pb42[data-pb42-layout="wide"] .pb42-l,
.pb42[data-pb42-layout="wide"] .pb42-r { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.pb42[data-pb42-layout="wide"] .pb42-l { grid-area: left; justify-content: flex-start; }
.pb42[data-pb42-layout="wide"] .pb42-r { grid-area: right; }
.pb42[data-pb42-layout="wide"] .pb42-l > .pb42-cell,
.pb42[data-pb42-layout="wide"] .pb42-r > .pb42-cell { flex: 0 0 auto; }
.pb42[data-pb42-layout="wide"] .pb42-create { margin-left: auto; }

/* ------------------------------------------------------------------ brand cell: V45 MAN-05 -- no "PrintiBeaver" wordmark in the bar any
   more; the cell carries the drawer menu button + compact PB mark below 768 (the shells without the site sidebar keep _BrandMark) */
.pb42 .pb42-brand .pb-brand__name {
    display: inline-flex; align-items: center; margin: 0; padding: 0; background: transparent;
    color: var(--pb44-brand); font-size: 18px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: visible;
}
.pb42 .pb42-brand .pb-sb-brand--top { margin-inline-end: 0; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 48px; min-block-size: 48px; }   /* V46 TN-AT-002: the compact PB mark is a 48px target */
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-brand .pb-brand__name { font-size: 15px; }
.pb42 .pb42-brand .pb-brand { gap: 8px; }
/* the compact sidebar mark (< 768) keeps its home link; its "PB" word is not repeated beside "PrintiBeaver" in the bar */
.pb42 .pb42-brand .pb-sb-word { display: none; }
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-brand { gap: 4px; }

/* ------------------------------------------------------------------ buttons: one size, one family */
.pb42 .pb42-btn,
.pb42 .pb41-lang .pb41-lang__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; min-block-size: 48px; min-inline-size: 48px; margin: 0; padding: 0 12px;
    border: 1px solid var(--pb44-line); border-radius: 12px; background: var(--pb44-surface); color: var(--pb44-ink);
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
    white-space: nowrap; cursor: pointer; list-style: none;
}
.pb42 .pb42-ibtn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; inline-size: 48px; block-size: 48px; min-inline-size: 48px; min-block-size: 48px; margin: 0; padding: 0;
    border: 1px solid var(--pb44-line); border-radius: 12px; background: var(--pb44-surface); color: var(--pb44-icon);
    font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none;
}
.pb42 summary.pb42-btn::-webkit-details-marker, .pb42 summary.pb42-ibtn::-webkit-details-marker { display: none; }
.pb42 summary.pb42-btn::marker, .pb42 summary.pb42-ibtn::marker { content: ""; }
.pb42 .pb42-btn:hover, .pb42 .pb42-ibtn:hover, .pb42 .pb41-lang .pb41-lang__btn:hover,
.pb42 .pb42-btn:active, .pb42 .pb42-ibtn:active, .pb42 details[open] > summary.pb42-btn, .pb42 details[open] > summary.pb42-ibtn,
.pb42 .pb42-ibtn[aria-expanded="true"] { background: var(--pb44-soft); }
.pb42 .pb42-glyph, .pb42 .pb42-ibtn > svg, .pb42-pref .pb42-glyph {
    inline-size: 22px; block-size: 22px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.pb42 .pb42-ilabel { display: none; }
.pb42 .pb41-lang { margin: 0; }
.pb42 .pb41-lang .pb41-lang__btn { color: var(--pb44-ink); }
/* the primary action: PB magenta, white text and plus */
.pb42 .pb42-createbtn { background: var(--pb44-create-bg); border-color: var(--pb44-create-bg); color: var(--pb44-create-ink); min-inline-size: 60px; }
.pb42 .pb42-createbtn:hover, .pb42 .pb42-createbtn:active { background: var(--pb44-create-hover); border-color: var(--pb44-create-hover); color: var(--pb44-create-ink); }
.pb42 .pb42-createbtn .pb42-glyph { stroke: var(--pb44-create-ink); }
.pb42 #pbCreateTriggerDesktop .pb41-addp__label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip: auto; }
/* guest identity entry: one button, distinct from (and secondary to) the primary action */
.pb42 .pb42-authbtn { color: var(--pb44-ink); }
/* account: the initial in a 28px circle INSIDE the one account button (a text identity, not an icon) */
.pb42 .pb42-acctbtn { padding-inline: 10px 12px; }
.pb42 .pb42-initial {
    display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%;
    background: var(--pb44-soft); color: var(--pb44-icon); font-size: 14px; font-weight: 700; line-height: 1; unicode-bidi: isolate;
}
.pb42 .pb42-initial svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* phones: the middle identity button may take two lines; the action keeps its words */
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-acct .pb42-btn,
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-createbtn { white-space: normal; padding-inline: 8px; }
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-acct > * { max-inline-size: 100%; }
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb41-lang .pb41-lang__btn { padding-inline: 8px; }
/* V43 S1 (A-V43-04 / FM-04 / GX16-R01): a header word never breaks into letters -- the body-wide "word-break: break-word" (site.css)
   stops at every header control; the account / action label may take a second line at a WORD boundary only. The identity column
   is at least the longest word of the account button (min-content), so a row that cannot hold the words overflows the bar and
   pb-v42-header.js falls through to the xs composition (the account on its own full row) instead of squeezing the text. */
.pb42 .pb42-btn, .pb42 .pb42-ibtn, .pb42 .pb41-lang .pb41-lang__btn, .pb42 .pb42-acct-label, .pb42 .pb41-addp__label, .pb42 .pb42-ilabel {
    word-break: keep-all; overflow-wrap: normal; hyphens: none;
}
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-bar { grid-template-columns: auto minmax(0, 1fr) auto; }   /* V46 TN-D04: three named columns only (the V45 five-column template left two empty columns that overflowed 320px) */
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-acct .pb42-btn { min-inline-size: min-content; text-align: center; }
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-acct .pb42-acct-label { min-inline-size: 0; overflow: visible; }
/* GX16-R03: the script unsticks a bar taller than 40% of the window (keyboard open, 200% zoom); without the script a short window gets
   the same rule so the bar never covers the focused field or the end of a form */
.pb42[data-pb42-unstick="1"] { position: relative; }
@media (max-height: 420px) { .pb42.pb-header { position: relative; } }
/* phones: the communication row shows readable labels beside the bell / bubble */
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-comms .pb42-commsitem { flex: 1 1 0; display: flex; min-inline-size: 0; }
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-comms .pb42-ibtn { inline-size: 100%; padding-inline: 12px; }
.pb42:not([data-pb42-layout="wide"]):not([data-pb42-layout="tablet"]) .pb42-comms .pb42-ilabel { display: inline; color: var(--pb44-ink); }

/* ------------------------------------------------------------------ the global search */
.pb42 .pb42-searchform {
    display: flex; align-items: center; box-sizing: border-box; inline-size: 100%; max-inline-size: 640px; min-inline-size: 144px;
    block-size: 48px; margin: 0 auto; padding-inline-start: 14px; border: 1px solid var(--pb44-input-line); border-radius: 12px; background: var(--pb44-input);
}
.pb42 .pb42-searchform:focus-within { border-color: var(--pb44-icon); outline: 3px solid var(--pb44-focus); outline-offset: 2px; }
/* V43 S1 (AB-V43-SEARCH-02): the length refusal beside the field (server ViewBag.PbHeaderSearchError or the client), the field keeps
   the typed text and is marked aria-invalid; the cell wraps so the message takes its own line under the form */
.pb42 .pb42-search { flex-wrap: wrap; row-gap: 4px; }
.pb42 .pb42-searcherr { flex: 1 1 100%; box-sizing: border-box; max-inline-size: 640px; margin: 0 auto; padding: 0 4px; font-size: 13px; line-height: 1.4; color: var(--pb44-error); }
.pb42 .pb42-searcherr[hidden] { display: none; }
.pb42 .pb42-searcherr:focus { outline: 3px solid var(--pb44-focus); outline-offset: 2px; }
.pb42 .pb42-searchform:has(input[aria-invalid="true"]) { border-color: var(--pb44-error); }
.pb42 .pb42-searchform input[type="search"] {
    flex: 1 1 auto; min-inline-size: 0; block-size: 46px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
    color: var(--pb44-ink); font: inherit; font-size: 15px; -webkit-appearance: none; appearance: none;
}
.pb42 .pb42-searchform input[type="search"]::placeholder { color: var(--pb44-muted); opacity: 1; }
/* V44 HEADER R1: the short VISIBLE label ("Search") sits on the field's top edge; the input's accessible name is the full scope
   ("Search all of PrintiBeaver", aria-label) and the placeholder names the scope. The form is the positioning box of the label. */
.pb42 .pb42-searchform { position: relative; }
.pb42 .pb42-searchlabel {
    position: absolute; top: -8px; inset-inline-start: 12px; z-index: 1; margin: 0; padding: 0 4px;
    background: var(--pb44-surface); color: var(--pb44-muted); font-size: 11px; font-weight: 600; line-height: 14px; white-space: nowrap;
    pointer-events: none;
}
.pb42 .pb42-searchform:focus-within .pb42-searchlabel { color: var(--pb44-accent-text); }
.pb42 .pb42-search { padding-top: 6px; }   /* room for the label above the 48px form inside the 64px bar */
.pb42 .pb42-searchform input[type="search"]:focus { outline: none; }   /* the form carries the visible ring (:focus-within above) */
.pb42 .pb42-searchgo {
    display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 48px; block-size: 48px; margin: -1px 0; padding: 0;   /* V46 TN-AT-002: a full 48px target inside the 48px form */
    border: 0; border-radius: 0 11px 11px 0; background: transparent; color: var(--pb44-icon); cursor: pointer;
}
html[dir="rtl"] .pb42 .pb42-searchgo { border-radius: 11px 0 0 11px; }
.pb42 .pb42-searchgo:hover { background: var(--pb44-soft); }

/* ------------------------------------------------------------------ focus: a visible ring on every header control */
.pb42 a:focus-visible, .pb42 button:focus-visible, .pb42 summary:focus-visible,
.pb42-pref button:focus-visible { outline: 3px solid var(--pb44-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ panels (account menu, messages note, notifications): the script
   anchors them to their control inside the screen (16px gutter, max height = viewport - 32px, internal scroll, never under the
   sidebar); one open at a time */
.pb42 .pb42-menu { position: relative; }
.pb42 .pb42-panel, .pb42 .pb-oc-popover {
    box-sizing: border-box; max-inline-size: calc(100vw - 32px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--pb44-surface); color: var(--pb44-ink); z-index: 60;
}
.pb42 .pb42-note {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; inline-size: 280px; padding: 12px 16px;
    border: 1px solid var(--pb44-line); border-radius: 12px; box-shadow: 0 12px 32px var(--pb44-shadow); font-size: 14px; line-height: 1.5;
}
.pb42 .pb42-menu:not([open]) > .pb42-panel { display: none; }

/* ------------------------------------------------------------------ V46 UX01 / TN-D21: the account disclosure -- a button + a <nav> of
   real links in ONE column (280px preferred; width / position / max-height set by pb-v42-header.js inside the content area and the
   visual viewport). Opaque surface, explicit ink token (never the bar's colour), rows >= 48px, 16px/24px text, 20px line icon, 12px
   gap, 8px padding; the whole row is the target; long names wrap. Active row marked by aria-current (shape + colour). */
.pb42 .pb46-acct { position: relative; }
.pb42 .pb46-acct__nav {
    display: block; padding: 8px; border: 1px solid var(--pb44-line); border-radius: 12px;
    background: var(--pb44-surface); color: var(--pb44-ink); box-shadow: 0 12px 32px var(--pb44-shadow); opacity: 1; z-index: 60;
}
.pb42 .pb46-acct__nav[hidden] { display: none; }
.pb42 .pb46-acct__nav a, .pb42 .pb46-acct__nav button, .pb42 .pb46-acct__nav form { display: flex; align-items: center; gap: 12px; box-sizing: border-box; inline-size: 100%; min-block-size: 48px; margin: 0; padding: 12px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--pb44-ink); font: inherit; font-size: 16px; line-height: 24px; font-weight: 500; text-align: start; text-decoration: none; cursor: pointer; -webkit-text-fill-color: currentColor; }
.pb42 .pb46-acct__nav form { padding: 0; }
.pb42 .pb46-acct__nav form > button { min-block-size: 48px; }
.pb42 .pb46-acct__nav a:hover, .pb42 .pb46-acct__nav button:hover { background: var(--pb44-soft); color: var(--pb44-ink); }
.pb42 .pb46-acct__nav a:focus-visible, .pb42 .pb46-acct__nav button:focus-visible { outline: 3px solid var(--pb44-focus); outline-offset: -3px; }
.pb42 .pb46-acct__nav a[aria-current="page"] { background: var(--pb44-soft); color: var(--pb44-accent-text); font-weight: 700; box-shadow: inset 3px 0 0 var(--pb44-icon); }
html[dir="rtl"] .pb42 .pb46-acct__nav a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--pb44-icon); }
.pb42 .pb46-acct__icon, .pb42 .pb46-acct__nav svg { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pb42 .pb46-acct__text { min-inline-size: 0; overflow-wrap: anywhere; }
.pb42 .pb46-acct__nav .pb-account-menu-heading { padding: 8px 12px 2px; font-size: 13px; color: var(--pb44-muted); }
.pb42 .pb46-acct__nav .pb-account-menu-divider { block-size: 1px; margin: 6px 4px; background: var(--pb44-line); }
.pb42 .pb46-acct__nav .pb-badge { margin-inline-start: auto; }
@media (forced-colors: active) { .pb42 .pb46-acct__nav { border-color: CanvasText; } .pb42 .pb46-acct__nav a[aria-current="page"] { outline: 2px solid Highlight; } }

/* ------------------------------------------------------------------ V46 TN-D04: the COMPACT composition (same row count, tighter) --
   4px gaps, 8px side padding, the primary action keeps its 48px target and its accessible name but shows the glyph only */
.pb42[data-pb42-compact="1"] .pb42-bar { column-gap: 4px; padding-inline: 8px; }
.pb42[data-pb42-compact="1"] .pb42-l, .pb42[data-pb42-compact="1"] .pb42-r { gap: 4px; }
.pb42[data-pb42-compact="1"] .pb42-createbtn { padding-inline: 12px; min-inline-size: 48px; }
.pb42[data-pb42-compact="1"] #pbCreateTriggerDesktop .pb41-addp__label, .pb42[data-pb42-compact="1"] .pb42-createbtn .pb41-addp__label, .pb42[data-pb42-compact="1"] .pb42-createbtn > span:not(.pb42-glyph) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pb42[data-pb42-compact="1"] .pb42-createbtn { position: relative; }
.pb42[data-pb42-compact="1"] .pb42-btn { padding-inline: 8px; }
.pb42[data-pb42-compact="1"] .pb42-comms .pb42-ilabel { display: none; }   /* V46 TN-D04 compact: the bell / bubble keep their glyph + accessible name (aria-label); the visual word goes */

/* ------------------------------------------------------------------ focus / legal process row (below the bar) */
.pb42 .pb42-process { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 0 16px 8px; }
.pb42 .pb42-process .pb-v34-process-title { margin: 0; font-weight: 700; }
.pb42 .pb42-process .pb-shell-focus { flex-wrap: wrap; margin-inline-start: auto; }

/* ------------------------------------------------------------------ preferences panel: one head with the title + an always-visible close */
.pb42-pref .pb42-prefhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 8px; }
.pb42-pref .pb42-preftitle { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.pb42-pref .pb42-ibtn {
    display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
    inline-size: 48px; block-size: 48px; padding: 0; border: 1px solid var(--pb-divider, #E5E7EB); border-radius: 12px;
    background: transparent; color: var(--pb-action-text, #BD006E); cursor: pointer;
}
.pb42-pref .pb42-ibtn:hover { background: var(--pb-surface-hover, #F2F4F7); }
.pb42-pref .pb42-prefnote { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--pb-text-secondary, #667085); }
@media (max-width: 767.98px) {
    /* the modal sheet: the viewport minus 32px, internal scroll, centred (never clipped by the keyboard / a short window) */
    .pb-overlay-backdrop--pref { align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
    .pb42-pref.pb-overlay-sheet--pref {
        inline-size: calc(100vw - 32px); max-inline-size: calc(100vw - 32px);
        max-block-size: calc(100vh - 32px); max-block-size: calc(100dvh - 32px);
        border-radius: 16px; padding-bottom: 20px;
    }
}

/* ------------------------------------------------------------------ V45-UI-001 (QA-003, supersedes V42-010 / V43 GX17-R01): the heading
   the shell focuses after a view change (tabindex=-1, never a Tab stop) and the main landmark never draw a focus FRAME -- a frame on
   a heading read as an input field. Focus still moves (screen readers announce the heading; skip-to-content keeps working); every
   real control keeps its visible ring. */
main h1[tabindex="-1"]:focus, main h1[tabindex="-1"]:focus-visible, main [data-pb-v34-heading]:focus, main [data-pb-v34-heading]:focus-visible,
main#main-content[tabindex="-1"]:focus, main#main-content[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

@media (forced-colors: active) {
    .pb42 .pb42-btn, .pb42 .pb42-ibtn, .pb42 .pb42-searchform { border-color: ButtonText; }
    .pb42 .pb40-hbadge { forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pb42 * { transition: none !important; }
}

/* ------------------------------------------------------------------ feed lab (_FeedLabLayout): the top-bar field is the global site
   search; the feed's own filter sits at the top of the content with a visible "Filter this feed" label (V42-017 CR-H06) */
.pb-feedlab .pb42-flfilter-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.pb-feedlab .pb42-flfilter-label { flex: none; font-size: 14px; font-weight: 600; color: var(--pb-text-primary); }
.pb-feedlab .pb42-flfilter-wrap .pb42-flfilter { flex: 1 1 280px; max-inline-size: 640px; order: 0; }

/* ------------------------------------------------------------------ V49-05: the header above the bottom layers while one of its panels
   is open. Shell layer inventory (V49): header 40 (--pb-z-header, sticky), sidebar rail 41, V48 bottom action region 40 (sticky,
   later in the document, so it painted OVER the header panels), V25 product CTA bar 30 (fixed, phones), V47 printer bottom nav 900
   (fixed, phones), preferences / create overlays 200 (--pb-z-overlay; opening one closes the header panels first), modals 1000+,
   the native <dialog> drawer (top layer). Panels live inside the header's stacking context, so only the HEADER can be lifted: 950
   = above every bottom layer, below the modals. pb-v42-header.js sets data-pb49-layer only while a header panel is open and also
   bounds the panel above the bottom layers (hit-testing of the first and last item stays inside the panel). */
.pb42.pb-header[data-pb49-layer="open"] { z-index: 950; }

/* V49-22 (GROK PB-056): the skip link shows whenever it has the focus (the first Tab of a page moves it there, pb-v42-header.js) */
a.pb-skip-link:focus { inset-inline-start: var(--space-4, 16px); }

/* V49-22: the search field's keyboard focus is a double ring (surface + focus colour) -- distinct from the hover / filled look */
.pb42 .pb42-searchform:has(input:focus-visible) { border-color: var(--pb44-icon); outline: 3px solid var(--pb44-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--pb44-surface); }

/* ------------------------------------------------------------------ V51 (51.6) shell -- F06 header identity, MODE-R2-03 switch placement,
   MODE-R2-06 no empty Create panel. Scoped to the header (.pb42); no token, sidebar or other component is changed. */

/* F06-R009 / R010: the identity circle sits physically LEFT of the "My account" label in HE and EN (the button lays out ltr; the label
   keeps the page direction). DOM order (= the accessible name: label, then the hidden display name) is unchanged. */
.pb42 .pb42-acctbtn { direction: ltr; }
html[dir="rtl"] .pb42 .pb42-acctbtn .pb42-acct-label { direction: rtl; unicode-bidi: isolate; }
/* F06-R004 / R009: the saved avatar (_PbAvatar, 28px) inside the circle -- 28x28, 50% radius, no shrink, centred; a photo keeps the saved
   crop (object-fit cover of the derivative), a character is contained (the avatar's own rules); the fallback initial is shown only after
   an image failed (pb-v42-header.js sets data-pb51s-avfail). */
.pb42 .pb42-initial.pb51s-acctav { display: inline-grid; place-items: center; overflow: hidden; background: transparent; inline-size: 28px; block-size: 28px; border-radius: 50%; flex: 0 0 28px; }
.pb42 .pb51s-acctav > .pb-v32-av { grid-area: 1 / 1; --pb-av-size: 28px; inline-size: 28px; block-size: 28px; }
.pb42 .pb51s-acctav__fb { grid-area: 1 / 1; display: none; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--pb44-soft); color: var(--pb44-icon); font-size: 14px; font-weight: 700; line-height: 1; unicode-bidi: isolate; }
.pb42 .pb51s-acctav__fb svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pb42 .pb51s-acctav[data-pb51s-avfail="1"] > .pb-v32-av { display: none; }
.pb42 .pb51s-acctav[data-pb51s-avfail="1"] > .pb51s-acctav__fb { display: inline-flex; }

/* MODE-R2-03 (C51-MODE ui: physicalOrder / gapPxTypical 8 / minTargetPx 48 / reflow): the account control and the mode switch are ONE
   group -- ltr, account physically LEFT, the switch immediately physically RIGHT, 8px apart, nothing between them, in HE and EN. The
   group never splits and is never reduced to an icon; two readable lines INSIDE the switch are allowed. */
.pb42 .pb51s-acctgrp { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; direction: ltr; min-inline-size: 0; max-inline-size: 100%; }
html[dir="rtl"] .pb42 .pb51s-acctgrp > * { direction: rtl; }
.pb42 .pb51s-acctgrp > .pb-account-menu, .pb42 .pb51s-acctgrp > .pb42-authbtn { flex: 0 1 auto; min-inline-size: 0; }
.pb42 .pb51s-switchslot { display: flex; align-items: center; flex: 0 1 auto; min-inline-size: 0; min-block-size: 48px; }
.pb42 .pb51s-switchslot:empty { display: none; }
.pb42 .pb51s-switchslot:not(:has(*)) { display: none; }   /* a separate rule: a browser without :has() keeps the rule above */
.pb42 .pb51s-switchslot button, .pb42 .pb51s-switchslot a, .pb42 .pb51s-switchslot summary { min-block-size: 48px; min-inline-size: 48px; box-sizing: border-box; }
/* the group moves TOGETHER to its own header row when the row cannot hold it (data-pb51s-wrap: set by pb-v42-header.js, and by the
   server while the switch is shown so a page without script starts in the taller, never clipped composition) */
.pb42[data-pb51s-wrap="1"][data-pb42-layout="mobile"] .pb42-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "brand . create"
        "acct acct acct"
        "prefs search search"
        "comms comms comms";
}
.pb42[data-pb51s-wrap="1"][data-pb42-layout="mobile"][data-pb42-auth="0"] .pb42-bar {
    grid-template-areas:
        "brand . create"
        "acct acct acct"
        "prefs search search";
}
.pb42[data-pb51s-wrap="1"][data-pb42-layout="tablet"] .pb42-bar {
    grid-template-columns: auto minmax(144px, 1fr) auto;
    grid-template-areas:
        "brand search create"
        "acct acct acct"
        "prefs . comms";
}
.pb42[data-pb51s-wrap="1"][data-pb42-layout="tablet"][data-pb42-auth="0"] .pb42-bar {
    grid-template-areas:
        "brand search create"
        "acct acct acct"
        "prefs . .";
}
.pb42[data-pb51s-wrap="1"] .pb42-acct { justify-content: flex-start; }

/* MODE-R2-06: no permitted create action -- the cell keeps its place with a secondary (not primary) "not available" disclosure whose
   panel is the short explanation (#pbCreateNone, the same note panel as "messages not available") */
.pb42 .pb51s-createnone { color: var(--pb44-ink); }
.pb42 .pb51s-createnone .pb42-glyph { stroke: currentColor; }
.pb42[data-pb42-compact="1"] .pb51s-createnone > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pb42[data-pb42-compact="1"] .pb51s-createnone { position: relative; }

/* ------------------------------------------------------------------ V51 F05-R034..R036: the Home-only MOBILE header (data-pb51s-home on the
   guest / member Home). Row 1 menu + account (physically left) and Create (physically right), row 2 preferences + the visible search.
   V52-012 / V52-005 (supersede F05-R035 / R036): there is no account panel any more (the account is a direct link to the account
   details), so a member keeps the ordinary communication row (notifications + the real messages link) as row 3 here too; the
   former account-panel rows (#pbAcctComms) and the unread dot on the account button are no longer rendered. Desktop / tablet and
   every other page keep the approved composition. SW-D-REFLOW precedes: with the mode switch the account + switch group may still
   take its own row. */
.pb42[data-pb51s-home="1"][data-pb42-layout="mobile"] .pb42-bar,
.pb42[data-pb51s-home="1"][data-pb42-layout="mobile"][data-pb42-auth="0"] .pb42-bar {
    grid-template-areas:
        "brand acct create"
        "prefs search search";
}
.pb42[data-pb51s-home="1"][data-pb42-layout="mobile"][data-pb42-auth="1"] .pb42-bar {
    grid-template-areas:
        "brand acct create"
        "prefs search search"
        "comms comms comms";
}
.pb42[data-pb51s-home="1"][data-pb42-layout="mobile"][data-pb51s-wrap="1"] .pb42-bar,
.pb42[data-pb51s-home="1"][data-pb42-layout="mobile"][data-pb51s-wrap="1"][data-pb42-auth="0"] .pb42-bar {
    grid-template-areas:
        "brand . create"
        "acct acct acct"
        "prefs search search";
}
.pb42[data-pb51s-home="1"][data-pb42-layout="mobile"][data-pb51s-wrap="1"][data-pb42-auth="1"] .pb42-bar {
    grid-template-areas:
        "brand . create"
        "acct acct acct"
        "prefs search search"
        "comms comms comms";
}

/* ------------------------------------------------------------------ V52-012: the account control is a LINK to the account details (no
   disclosure): the same 48px button geometry and identity circle; never underlined; the account details page marks it as current */
.pb42 a.pb42-acctbtn, .pb42 a.pb42-acctbtn:hover, .pb42 a.pb42-acctbtn:visited { text-decoration: none; color: var(--pb44-ink); }
.pb42 a.pb42-acctbtn[aria-current="page"] { background: var(--pb44-soft); border-color: var(--pb44-icon); }
@media (forced-colors: active) { .pb42 a.pb42-acctbtn[aria-current="page"] { outline: 2px solid Highlight; } }

/* ------------------------------------------------------------------ V52-005: the messages control is a real link -- nothing inside it
   takes the pointer (the badge already has pointer-events: none), so a press anywhere on the 48px target follows the link */
.pb42 #pbMsgLink > * { pointer-events: none; }

/* ------------------------------------------------------------------ V52-001: the notifications popover follows the header appearance as a
   whole -- its frame, title, rule text and the list (rows: pb-v45-ui.css) use the --pb44-* pairs of the bar (Light / Dark / System) */
.pb42 #pbNotifPanel { border-color: var(--pb44-line); box-shadow: 0 12px 32px var(--pb44-shadow); color: var(--pb44-ink); }
.pb42 #pbNotifPanel h2 { color: var(--pb44-ink); }
.pb42 #pbNotifPanel .pb-muted { color: var(--pb44-muted); }

/* ------------------------------------------------------------------ V54 / delta 52.1 A01-A04: the personal account menu is a native
   <details> again (#pbAccountDisclosure, supersedes the V52-012 direct link): the summary keeps the 48px account button geometry, the
   avatar circle and the label, plus a decorative chevron that turns while open; the panel (the existing .pb46-acct__nav look) is
   anchored at the inline end of the trigger, at most 280px / viewport - 24px wide and 70dvh tall with internal scroll (the script
   then clamps it to the visible content area); rows >= 48px. Without script it still opens as a positioned panel. */
.pb42 .pb54s-acct { position: relative; }
.pb42 .pb54s-acct > summary.pb42-acctbtn { gap: 8px; }
.pb42 .pb54s-acct__chev { inline-size: 14px; block-size: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.pb42 .pb54s-acct[open] .pb54s-acct__chev { transform: rotate(180deg); }
.pb42 .pb54s-acct > .pb46-acct__nav {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
    inline-size: 280px; max-inline-size: calc(100vw - 24px); max-block-size: 70vh; max-block-size: 70dvh; overflow-y: auto; overscroll-behavior: contain;
}
.pb42 .pb54s-acct__status { margin: 4px 12px 8px; font-size: 14px; line-height: 1.5; color: var(--pb44-muted); overflow-wrap: anywhere; }
.pb42 .pb54s-acct__status:empty { display: none; }
.pb42 .pb46-acct__nav button:disabled { cursor: wait; opacity: .65; }
@media (prefers-reduced-motion: reduce) { .pb42 .pb54s-acct__chev { transition: none; } }
@media (forced-colors: active) { .pb42 .pb54s-acct__chev { stroke: CanvasText; } }