/* V65 FINAL MASTER -- workstream mobile (M): THE mobile header of every normal site shell (V65-002 / 003 / 004 / 005 / 006 / 010 /
   011; OVR65-01 / 02 / 05; ANNEXES/V65 PB_V65_MOBILE_UI_FINAL_R7_HE_EN.md sections 1-7e; DESIGN_SYSTEM_CONTRACT "Header and
   responsive sizing"). Linked LAST in the head of _Layout (after the Simple / guest sheets) so it wins in every mode.
   Scope = the header composition Content/v42/pb-v42-header.js calls "mobile" (layout viewport below 768px; without script the
   server default, as before). Tablet / desktop keep the V64 compositions untouched (pb-v42-header.css); isolated shells without
   _Layout (payment return, print / packing slips) keep theirs; the focus / legal process row below the bar is unchanged.
   - EXACTLY TWO LOGICAL ROWS: row 1 = the icon controls in the semantic DOM order Menu, Account, Notifications, Messages, Simple
     switch, Preferences (globe), Create (+) -- the server renders this order and the bar takes the PAGE direction, so English
     reads Menu at the LEFT edge and Create at the RIGHT edge and Hebrew mirrors it (Menu RIGHT, Create LEFT) with no row-reverse
     and no double flip (tab order = reading order); row 2 = the ONE global site search. No logo, wordmark, login / sign-up text,
     role row or label row; nothing is hidden to make the row fit. A control that does not exist for this request (the switch
     while the mode feature is off) simply is not there; the others keep their order.
   - Geometry: base 112px (+ the top safe area) = row 1 56px (6px + 44px targets + 6px) and the search row 56px (6px + a 44px field
     + 6px); targets 44 x 44 (a LOCAL shell exception -- content actions keep 48px), 22px glyphs / 1.8 stroke, account picture or
     letter 30px, the plus = a 36 x 36 magenta square (radius 10) inside its target. Side gutters 12px from 332px, 6px at 320-331px
     (7 x 44 + 2 x 6 = 320), space-between, no gap; the search row keeps 12px sides. Enlarged text may grow the rows (min sizes
     only, the field wraps its error line), never clips them.
   - Colours = the --pb44-* header tokens (PB_PALETTE_R1, Content/v42/pb-v42-header.css): neutral glyphs on a transparent target, no
     frames; hover / press = the secondary surface, an OPEN control = the selection pair; the plus, the active Simple switch and
     the counters are the only magenta. Focus = the 2px brand ring 2px off the control. */

#pbHeader.pb42[data-pb42-layout="mobile"] {
    --pb65m-g: 12px;
    --pb65m-pl: max(var(--pb65m-g), env(safe-area-inset-left, 0px));
    --pb65m-pr: max(var(--pb65m-g), env(safe-area-inset-right, 0px));
    padding-block-start: env(safe-area-inset-top, 0px);
}
@media (max-width: 331.98px) {
    #pbHeader.pb42[data-pb42-layout="mobile"] { --pb65m-g: 6px; }
}

/* ------------------------------------------------------------------ row 1 + row 2 in one wrapping flex line set */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    box-sizing: border-box;
    min-block-size: 0;
    padding: 6px var(--pb65m-pr) 0 var(--pb65m-pl);
    direction: ltr;
    grid-template-areas: none;
}
html[dir="rtl"] #pbHeader.pb42[data-pb42-layout="mobile"] .pb42-bar { direction: rtl; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-l,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-c,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-r { display: contents; }
/* the control cells dissolve: every control is one item of row 1, in DOM (= reading) order */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-cell:not(.pb42-search) { display: contents; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-brand > *,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct > *,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-comms > *,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-prefs > *,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-create > * { flex: 0 0 auto; margin: 0; }

/* no logo / wordmark row or item (the PB home link is the first row of the menu drawer), no second sign-up text */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-brand .pb-sb-brand--top,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-brand .pb-brand,
#pbHeader.pb42[data-pb42-layout="mobile"] #pb61sAccountRegister { display: none; }

/* ------------------------------------------------------------------ the 44px icon targets */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb-sb-menu,
#pbHeader.pb42[data-pb42-layout="mobile"] #pbTopMenuToggle,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-ibtn,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct .pb42-btn,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-create .pb42-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    inline-size: 44px;
    block-size: 44px;
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: none;
    margin: 0;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--pb44-glyph);
    white-space: nowrap;
}
/* the drawer button exists below 768px only (pb-sidebar.css); a no-script wide window that keeps the server's mobile composition
   still has the sidebar column, so the button stays hidden there */
@media (min-width: 768px) {
    #pbHeader.pb42[data-pb42-layout="mobile"] .pb-sb-menu { display: none; }
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb-sb-menu:hover,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb-sb-menu:active,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-ibtn:hover,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-ibtn:active,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct .pb42-btn:hover,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct .pb42-btn:active,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb51s-createnone:hover { background: var(--pb44-press); }
/* an OPEN control (drawer, account menu, notifications, preferences, a note) -- the expanded state is also exposed to AT */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb-sb-menu[aria-expanded="true"],
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-ibtn[aria-expanded="true"],
#pbHeader.pb42[data-pb42-layout="mobile"] details[open] > summary.pb42-ibtn,
#pbHeader.pb42[data-pb42-layout="mobile"] details[open] > summary.pb42-btn { background: var(--pb44-soft); color: var(--pb44-icon); }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-glyph,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-ibtn > svg,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb-sb-menu .pb-sb-icon {
    inline-size: 22px; block-size: 22px; flex: none; stroke-width: 1.8;
}
/* visual labels never sit beside the icons; every control keeps its localized accessible name (aria-label or this text) */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-ilabel,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb54s-acct__chev { display: none; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct .pb42-acct-label,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb65m-acct-text,
#pbHeader.pb42[data-pb42-layout="mobile"] #pbCreateTriggerDesktop > span,
#pbHeader.pb42[data-pb42-layout="mobile"] #pbCreateTriggerDesktop .pb41-addp__label,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb51s-createnone > span {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ account: the picture / letter / chosen avatar only (30px) */
.pb42 .pb65m-acct-glyph { display: none; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb65m-acct-glyph {
    display: inline-flex; align-items: center; justify-content: center; inline-size: 30px; block-size: 30px; border-radius: 50%;
    background: var(--pb44-secondary); color: var(--pb44-ink);
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb65m-acct-glyph svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct .pb-account-menu,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct .pb54s-acct { position: relative; display: inline-flex; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct .pb42-initial,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct .pb51s-acctav,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct .pb51s-acctav__fb {
    inline-size: 30px; block-size: 30px; flex: 0 0 30px; font-size: 15px;
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-acct .pb51s-acctav > .pb-v32-av { --pb-av-size: 30px; inline-size: 30px; block-size: 30px; }

/* ------------------------------------------------------------------ messages / notifications: icon only, numeric counter inside the target */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-comms .pb42-commsitem {
    position: relative; display: inline-flex; flex: 0 0 auto; min-inline-size: 0;
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-comms .pb42-ibtn { inline-size: 44px; padding-inline: 0; }
/* a guest keeps the two positions (no jump after sign-in): each opens the existing sign-in and returns to its own collection;
   no count, no invented inbox. Shown in this composition only (the tablet / desktop guest bar is unchanged). */
.pb42:not([data-pb42-layout="mobile"]) .pb65m-guestcomms { display: none; }

/* ------------------------------------------------------------------ the Normal / Simple PILL (OVR65-02; mobile only -- tablet / desktop
   keep the V64 infinity glyph). One switch (role=switch, aria-checked from the server-verified mode): track 32 x 20, knob 16 with
   2px inset; Normal = neutral track, knob at the inline START (EN left / HE right); Simple = magenta track, knob at the inline END
   (EN right / HE left). Dark adds a 1px #B8C2D1 track line. Not verified = a dashed empty track without a knob and without
   aria-checked (never shown as Normal or as a success). Busy = the knob dimmed. Motion 120ms, none under reduced motion. */
.pb42 .pb65m-pill { display: none; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-slot { min-inline-size: 44px; min-block-size: 44px; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-slot .pb51m { display: inline-flex; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-ibtn.pb64m-btn,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-ibtn.pb64m-btn[data-pb64m-state="simple"],
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-ibtn.pb64m-btn[data-pb64m-state="unverified"] {
    border: 0; box-shadow: none; background: transparent; color: var(--pb44-glyph);
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-ibtn.pb64m-btn:hover { background: var(--pb44-press); }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn .pb64m-glyph { display: none; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn .pb65m-pill {
    position: relative; display: block; flex: none; box-sizing: border-box; inline-size: 32px; block-size: 20px; border-radius: 10px;
    background: var(--pb44-switch-off); box-shadow: inset 0 0 0 1px var(--pb44-switch-line); pointer-events: none;
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn .pb65m-knob {
    position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 16px; block-size: 16px; border-radius: 50%;
    background: #FFFFFF; transition: inset-inline-start 120ms ease;
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn[data-pb64m-state="simple"] .pb65m-pill { background: var(--pb44-create-bg); }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn[data-pb64m-state="simple"] .pb65m-knob { inset-inline-start: 14px; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn[data-pb64m-state="unverified"] .pb65m-pill {
    background: transparent; box-shadow: none; border: 1px dashed var(--pb44-input-line);
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn[data-pb64m-state="unverified"] .pb65m-knob { display: none; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn[aria-busy="true"] .pb65m-knob { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    #pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn .pb65m-knob { transition: none; }
}

/* ------------------------------------------------------------------ Create: the white plus in a 36px magenta square (radius 10) */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-createbtn,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-createbtn:hover,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-createbtn:active { isolation: isolate; background: transparent; color: var(--pb44-create-ink); }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-createbtn::before {
    content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 10px;
    background: var(--pb44-create-bg); box-shadow: inset 0 0 0 1px var(--pb44-create-outline);
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-createbtn:hover::before,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-createbtn:active::before,
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-createbtn[aria-expanded="true"]::before { background: var(--pb44-create-hover); }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-createbtn .pb42-glyph { stroke: var(--pb44-create-ink); }
/* no permitted create action: the same position keeps the existing explained note (neutral plus, never a fake primary) */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb51s-createnone { color: var(--pb44-glyph); }

/* ------------------------------------------------------------------ row 2: the ONE global search (44px field in a 56px row) */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-search {
    display: flex;
    flex: 0 0 calc(100% + var(--pb65m-pl) + var(--pb65m-pr));
    flex-wrap: wrap;
    row-gap: 4px;
    justify-content: stretch;
    box-sizing: border-box;
    min-inline-size: 0;
    margin: 6px 0 0;
    margin-left: calc(-1 * var(--pb65m-pl));
    margin-right: calc(-1 * var(--pb65m-pr));
    padding: 6px max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px));
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-searchform {
    display: flex; align-items: center; box-sizing: border-box; inline-size: 100%; max-inline-size: none; min-inline-size: 0;
    block-size: auto; min-block-size: 44px; margin: 0; padding: 0;
    border: 1px solid var(--pb44-input-line); border-radius: 12px; background: var(--pb44-secondary);
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-searchlabel { display: none; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-searchform input[type="search"] {
    order: 0; flex: 1 1 auto; min-inline-size: 0; block-size: auto; min-block-size: 42px; padding: 0 4px;
    color: var(--pb44-ink); font-size: 16px; line-height: 1.4;   /* 16px: no automatic zoom while typing */
}
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-searchform input[type="search"]::placeholder { color: var(--pb44-placeholder); opacity: 1; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-searchform input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* the magnifier = the existing submit, at the reading START inside the field; the clear (X) at the other end while there is text */
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-searchgo {
    order: -1; inline-size: 44px; block-size: 42px; min-block-size: 42px; margin: 0; flex: none;
    border-radius: 11px 0 0 11px; color: var(--pb44-glyph); background: transparent;
}
html[dir="rtl"] #pbHeader.pb42[data-pb42-layout="mobile"] .pb42-searchgo { border-radius: 0 11px 11px 0; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-searchgo:hover { background: var(--pb44-press); }
.pb42 .pb65m-clear { display: none; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb65m-clear {
    order: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
    inline-size: 44px; block-size: 42px; margin: 0; padding: 0; border: 0; border-radius: 0 11px 11px 0;
    background: transparent; color: var(--pb44-glyph); cursor: pointer;
}
html[dir="rtl"] #pbHeader.pb42[data-pb42-layout="mobile"] .pb65m-clear { border-radius: 11px 0 0 11px; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb65m-clear[hidden] { display: none; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb65m-clear:hover { background: var(--pb44-press); }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb65m-clear svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#pbHeader.pb42[data-pb42-layout="mobile"] .pb42-searcherr { flex: 1 1 100%; max-inline-size: none; }

@media (forced-colors: active) {
    #pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn .pb65m-pill { forced-color-adjust: none; background: Canvas; border: 1px solid ButtonText; box-shadow: none; }
    #pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn .pb65m-knob { background: ButtonText; }
    #pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn[data-pb64m-state="simple"] .pb65m-pill { background: Highlight; border-color: Highlight; }
    #pbHeader.pb42[data-pb42-layout="mobile"] .pb64m-btn[data-pb64m-state="simple"] .pb65m-knob { background: Canvas; }
    #pbHeader.pb42[data-pb42-layout="mobile"] .pb42-createbtn::before { forced-color-adjust: none; background: ButtonText; }
}