/* V23 W1 -- PbShell (NAV_POLICY_96). Colours come ONLY from pb-tokens.css (single source).
   Brand + nav are PHYSICALLY LEFT in HE/RTL and EN/LTR (V23_MASTER: "brand and bar left in both directions"). */
html[dir="rtl"] .pb-shell-header .pb-header-row { flex-direction: row-reverse; }
html[dir="rtl"] .pb-shell .pb-space-layout { direction: ltr; }
html[dir="rtl"] .pb-shell .pb-space-layout > * { direction: rtl; }
html[dir="rtl"] .pb-shell .pb-space-sidebar { border-inline-end: 0; border-inline-start: 1px solid var(--pb-divider); padding-inline-end: 0; padding-inline-start: 16px; }

/* focus: brand + contextual back + help only */
.pb-shell-focus { display: flex; align-items: center; gap: 16px; margin-inline-start: auto; min-width: 0; }
html[dir="rtl"] .pb-shell-focus { margin-inline-start: 0; margin-inline-end: auto; }
.pb-shell-focus a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--pb-touch-target, 48px); padding: 0 12px; border-radius: 10px; color: var(--pb-text-primary); font-weight: 600; text-decoration: none; }
.pb-shell-focus a:hover { background: var(--pb-surface-hover); }
.pb-shell-focus a:focus-visible { outline: 3px solid var(--pb-focus); outline-offset: 2px; }
.pb-shell-focus svg { width: 20px; height: 20px; }
.pb-shell-help { color: var(--pb-link) !important; }
.pb-shell--focus .pb-main { padding-bottom: 32px; }

/* workspace: wide work screens use the full container */
@media (min-width: 1200px) { .pb-shell--workspace .pb-main.pb-container { max-width: 1440px; } }

/* screen-state hooks (W2 feeds data-pb-state from the server ScreenState; _UiStates stays the renderer) */
[data-pb-state-region] { min-width: 0; }
[data-pb-state-region][data-pb-state="loading"] { cursor: progress; }
[data-pb-state-region][data-pb-state="loading"] [data-pb-state-content] { opacity: .55; pointer-events: none; }
[data-pb-state-region] [data-pb-state-slot] { display: none; }
[data-pb-state-region][data-pb-state="loading"] [data-pb-state-slot="loading"],
[data-pb-state-region][data-pb-state="empty"] [data-pb-state-slot="empty"],
[data-pb-state-region][data-pb-state="error"] [data-pb-state-slot="error"],
[data-pb-state-region][data-pb-state="stale"] [data-pb-state-slot="stale"],
[data-pb-state-region][data-pb-state="denied"] [data-pb-state-slot="denied"],
[data-pb-state-region][data-pb-state="success"] [data-pb-state-slot="success"] { display: block; }
html, body { overflow-x: clip; }

/* V23 integration -- browse catalog search: one labelled field in the header strip (all widths, tokens only) */
.pb-shell-searchbar { padding-block: 0 10px; }
.pb-shell-searchform { display: flex; align-items: center; gap: 6px; max-width: 640px; margin-inline: auto; min-width: 0; }
.pb-shell-searchform input[type="search"] { flex: 1 1 auto; min-width: 0; height: var(--pb-touch-target, 48px); padding: 0 14px; border: 1px solid var(--pb-divider); border-radius: 22px; background: var(--pb-surface); color: var(--pb-text-primary); font: inherit; }
.pb-shell-searchform input[type="search"]:focus-visible { outline: 3px solid var(--pb-focus); outline-offset: 2px; }
.pb-shell-searchform .pb-btn-icon { flex: 0 0 auto; min-width: var(--pb-touch-target, 48px); min-height: var(--pb-touch-target, 48px); }

/* V23 integration (nav QA): the calendar button INSIDE a date/time field takes keyboard focus but the field stopped
   matching :focus -> no visible ring. :focus-within keeps the ring while focus is anywhere in the field. */
input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"]):focus-within { outline: 2px solid var(--pb-focus); outline-offset: 2px; box-shadow: 0 0 0 1px var(--pb-focus); }

/* V23 integration (nav QA, PBUI-054 EN tablet): a visually-hidden label inside a scrolled table kept its static position
   past the scroller (absolute boxes escape overflow:auto without a positioned ancestor) and widened the page by 15px.
   Anchor it at the start of its containing block: still 1px + clipped, never outside the page. */
.pb-visually-hidden, .pb-sr-only { inset-inline-start: 0; top: 0; }