/* V38 -- THE site navigation (Views/Shared/_PbSidebar.cshtml), promoted from the /feed sidebar; the ONE stylesheet of the sidebar,
   its rail / drawer, the header menu button, the direct workspace links and the brand logo. Loaded by _Layout (every page) and
   _FeedLabLayout (/feed). Authority: docs/V38/PB_V38/PB_V38_FULL_MASTER (CLAUDE_HANDOFF_EN "Home and sidebar exact requirements",
   "Approved logo exact requirements"; SPEC/V38 DECISIONS D03/D04/D07/D09/D16).
   - Logical properties only: the sidebar sits at the inline START -- Hebrew RIGHT, English LEFT -- nothing is forced physically left.
   - ONE variable (--pb-sb-cur, on the shell root .pb-sb-root) drives the sidebar width AND the page margin-inline-start, so
     collapsing releases real space. >= 1200: 240 expanded / 80 collapsed (per-tab choice, html[data-pb-sb="rail"]);
     768-1199: the 80 rail; < 768: no column -- a closed native <dialog> drawer, width min(300px, 100vw - 48px), its inline edge
     from the document direction.
   - The sidebar has its own scroll (100dvh, overscroll-behavior: contain); the document owns the page scroll.
   - Glyphs: 18x18 CSS px, stroke 1.6, currentColor -- through the .pb-sb-icon class only (never a global svg rule) -- inside
     targets of at least 48x48. Rail rows keep their text as the accessible name (visually clipped, not removed) + a tooltip.
   - Logo (MASTER LOGO 1): object-fit: contain, 48 desktop / 44 rail / 36 mobile header / 28 footer; no filter, recolor, clip,
     disc, border or padding; never mirrored (the brand link is direction: ltr, no transform).
   Colours and fonts only from pb-tokens.css. */

.pb-sb-root {
    --pb-sb-w: var(--pb-sidebar-expanded, 240px);
    --pb-sb-rail: var(--pb-sidebar-collapsed, 80px);
    --pb-sb-cur: var(--pb-sb-w);
    --pb-sb-hit: var(--pb-touch-target, 48px);
}
.pb-sb-root .pb-sb-page { margin-inline-start: var(--pb-sb-cur); min-inline-size: 0; transition: margin-inline-start .2s var(--pb-ease, ease); }

/* ------------------------------------------------------------------ glyphs + controls */
.pb-sb-icon { display: block; inline-size: 18px; block-size: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pb-sb-btn, .pb-sb-menu {
    position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--pb-sb-hit); block-size: var(--pb-sb-hit);
    flex: none; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pb-text-primary); cursor: pointer; text-decoration: none;
}
.pb-sb-btn:hover, .pb-sb-menu:hover { background: var(--pb-surface-hover); }
.pb-sb-menu { display: none; }

/* ------------------------------------------------------------------ brand (sidebar, compact header, _BrandMark header + footer) */
.pb-sb-brand {
    display: inline-flex; align-items: center; gap: 10px; min-inline-size: var(--pb-sb-hit); min-block-size: var(--pb-sb-hit);
    border-radius: 8px; color: var(--pb-text-primary); text-decoration: none; direction: ltr; transform: none;
}
.pb-sb-brand:hover { color: var(--pb-text-primary); background: transparent; }
.pb-sb-brand .pb-sb-logo {
    display: block; inline-size: 48px; block-size: 48px; flex: none; object-fit: contain;
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; filter: none; transform: none; clip-path: none;
}
.pb-sb-word { font-family: var(--pb-font-en); font-size: 28px; font-weight: 800; line-height: 1; white-space: nowrap; }
.pb-sb-brand--top { display: none; }
.pb-sb-brand--footer .pb-sb-logo, .pb-sb-brand--footer .pb-sb-logo--footer { inline-size: 28px; block-size: 28px; }

/* ------------------------------------------------------------------ the sidebar (fixed at the inline start, own scroll) */
.pb-sb, .pb-sb *, .pb-sb *::before, .pb-sb *::after { box-sizing: border-box; }
.pb-sb [hidden] { display: none !important; }
.pb-sb {
    position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 41;
    inline-size: var(--pb-sb-cur); block-size: 100vh; block-size: 100dvh;
    display: flex; flex-direction: column;
    background: var(--pb-shell, var(--pb-surface)); color: var(--pb-text-primary);
    border-inline-end: 1px solid var(--pb-divider);
    font-size: 15px; line-height: 20px; text-align: start;
    transition: inline-size .2s var(--pb-ease, ease);
}
.pb-sb .pb-sb-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 76px; padding-block: 14px 8px; padding-inline: 16px 12px; }
.pb-sb .pb-sb-close { display: none; }
.pb-sb .pb-sb-scroll { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; scrollbar-width: thin; }
.pb-sb .pb-sb-group { margin: 20px 8px 8px; padding: 0; color: var(--pb-text-secondary); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: normal; text-transform: none; }
.pb-sb .pb-sb-group:first-child { margin-block-start: 4px; }
.pb-sb .pb-sb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-sb .pb-sb-list > li { margin: 0; padding: 0; }
.pb-sb .pb-sb-link {
    position: relative; display: flex; align-items: center; gap: 12px; min-block-size: var(--pb-sb-hit); min-inline-size: var(--pb-sb-hit);
    padding: 8px 16px; border-radius: 8px; color: var(--pb-text-primary); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 20px;
}
.pb-sb .pb-sb-link:hover { background: var(--pb-surface-hover); color: var(--pb-text-primary); }
/* active = colour + weight + an inline-start indicator (shape, not colour alone); "page" = the destination, "location" = its section */
.pb-sb .pb-sb-link[aria-current] { background: var(--pb-surface-selected); color: var(--pb-action-soft-text); font-weight: 700; }
.pb-sb .pb-sb-link[aria-current]::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; inline-size: 3px; border-radius: 3px; background: var(--pb-action-primary); }
.pb-sb .pb-sb-text { min-inline-size: 0; overflow-wrap: anywhere; }
.pb-sb .pb-sb-foot { flex: none; padding: 12px 16px 16px; border-block-start: 1px solid var(--pb-divider); }
.pb-sb .pb-sb-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 12px; line-height: 18px; }
.pb-sb .pb-sb-legal a { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--pb-text-secondary); text-decoration: none; }
.pb-sb .pb-sb-legal a:hover { color: var(--pb-text-primary); text-decoration: underline; }
.pb-sb .pb-sb-legal a[aria-current] { color: var(--pb-text-primary); font-weight: 700; }
.pb-sb .pb-sb-util { display: none; }
/* V38.1 (V381-04): the drawer account block (Sign in / Create account for a guest, Account + Activity signed in) exists in the
   markup at every width but is shown ONLY inside the < 768 drawer (see the drawer band below); 768 and up the header account
   control is the entry. */
.pb-sb .pb-sb-acct { display: none; }
.pb-sb :is(a, button):focus-visible, .pb-sb-menu:focus-visible, .pb-sb-brand:focus-visible, .pb-sb-shortcut:focus-visible { outline: 3px solid var(--pb-focus); outline-offset: 3px; }
.pb-sb .pb-sb-link:focus-visible { outline-offset: -3px; }

/* rail tooltip (pb-sidebar.js positions it beside the hovered / focused rail item; the item's own text stays its accessible name) */
.pb-sb-tip {
    position: fixed; z-index: 60; max-inline-size: 240px; padding: 6px 10px; border-radius: 6px;
    background: var(--pb-text-primary); color: var(--pb-surface); font-size: 13px; font-weight: 600; line-height: 18px;
    white-space: nowrap; pointer-events: none; box-shadow: var(--pb-shadow-dropdown);
}
.pb-sb-tip[hidden] { display: none; }

/* ------------------------------------------------------------------ direct workspace links (V38 D13, outside the drawer) */
.pb-sb-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; }
.pb-sb-shortcut {
    display: inline-flex; align-items: center; gap: 8px; min-block-size: var(--pb-sb-hit); min-inline-size: var(--pb-sb-hit); padding: 8px 12px;
    border: 1px solid var(--pb-divider); border-radius: 8px; background: var(--pb-surface); color: var(--pb-text-primary);
    font-size: 15px; font-weight: 600; line-height: 20px; text-decoration: none;
}
.pb-sb-shortcut:hover { background: var(--pb-surface-hover); color: var(--pb-text-primary); }

/* ------------------------------------------------------------------ the 80 rail: >= 1200 by choice (per tab) ... */
@media (min-width: 1200px) {
    html[data-pb-sb="rail"] .pb-sb-root { --pb-sb-cur: var(--pb-sb-rail); }
    html[data-pb-sb="rail"] .pb-sb .pb-sb-head { flex-direction: column; justify-content: center; gap: 8px; padding-inline: 8px; }
    html[data-pb-sb="rail"] .pb-sb .pb-sb-logo { inline-size: 44px; block-size: 44px; }
    html[data-pb-sb="rail"] .pb-sb .pb-sb-word { display: none; }
    html[data-pb-sb="rail"] .pb-sb .pb-sb-scroll { padding-inline: 15px; }
    html[data-pb-sb="rail"] .pb-sb .pb-sb-link { justify-content: center; padding-inline: 0; }
    html[data-pb-sb="rail"] .pb-sb .pb-sb-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    html[data-pb-sb="rail"] .pb-sb .pb-sb-group { block-size: 1px; margin: 12px 8px; overflow: hidden; color: transparent; border-block-start: 1px solid var(--pb-divider); }
    html[data-pb-sb="rail"] .pb-sb .pb-sb-foot { display: none; }
}
/* ... and always between 768 and 1199 (no expand there) */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .pb-sb-root { --pb-sb-cur: var(--pb-sb-rail); }
    .pb-sb .pb-sb-collapse { display: none; }
    .pb-sb .pb-sb-head { flex-direction: column; justify-content: center; gap: 8px; padding-inline: 8px; }
    .pb-sb .pb-sb-logo { inline-size: 44px; block-size: 44px; }
    .pb-sb .pb-sb-word { display: none; }
    .pb-sb .pb-sb-scroll { padding-inline: 15px; }
    .pb-sb .pb-sb-link { justify-content: center; padding-inline: 0; }
    .pb-sb .pb-sb-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .pb-sb .pb-sb-group { block-size: 1px; margin: 12px 8px; overflow: hidden; color: transparent; border-block-start: 1px solid var(--pb-divider); }
    .pb-sb .pb-sb-foot { display: none; }
}

/* ------------------------------------------------------------------ < 768: no column; closed native <dialog> drawer */
.pb-sb-drawer {
    position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; margin: 0; padding: 0;
    inline-size: min(300px, calc(100vw - 48px)); max-inline-size: calc(100vw - 48px); block-size: 100vh; block-size: 100dvh; max-block-size: 100dvh;
    border: 0; border-inline-end: 1px solid var(--pb-divider); background: var(--pb-shell, var(--pb-surface)); color: var(--pb-text-primary);
    box-shadow: var(--pb-shadow-modal); overflow: hidden; overscroll-behavior: contain;
}
.pb-sb-drawer:not([open]) { display: none; }
.pb-sb-drawer::backdrop { background: var(--pb-backdrop, rgba(0, 0, 0, .45)); }
@media (max-width: 767.98px) {
    .pb-sb-root { --pb-sb-cur: 0px; }
    .pb-sb { display: none; }
    .pb-sb-drawer .pb-sb { display: flex; position: static; inline-size: 100%; block-size: 100%; border-inline-end: 0; transition: none; }
    .pb-sb .pb-sb-collapse { display: none; }
    .pb-sb .pb-sb-close { display: inline-flex; }
    .pb-sb .pb-sb-util { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; padding: 12px 16px; border-block-start: 1px solid var(--pb-divider); }
    .pb-sb .pb-sb-acct { display: block; flex: none; padding: 0 16px 8px; border-block-end: 1px solid var(--pb-divider); }
    .pb-sb-menu { display: inline-flex; }
    .pb-sb-brand--top { display: inline-flex; min-inline-size: 0; margin-inline-end: auto; }   /* pushes the header utilities to the inline end */
    .pb-sb-brand--top .pb-sb-logo, .pb-header .pb-sb-brand .pb-sb-logo { inline-size: 36px; block-size: 36px; }
    .pb-sb-brand--top .pb-sb-word { font-size: 24px; }
}
/* ------------------------------------------------------------------ V38.1 (V381-05): legal links -- the decision of record
   >= 1200: sidebar foot (expanded) + page footer; 768-1199: page footer ONLY (the 80 rail never carries a legal row or icon --
   .pb-sb-foot is hidden in the rail band above); < 768: drawer foot + page footer. /feed has no site footer, so its layout
   renders this compact legal footer (same Legal/Privacy + Legal/Terms destinations, no sign-in needed). */
.pb-sb-legalfoot { margin: 24px 0 0; padding: 16px; border-block-start: 1px solid var(--pb-divider); }
.pb-sb-legalfoot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 13px; line-height: 18px; }
.pb-sb-legalfoot a { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--pb-text-secondary); text-decoration: none; }
.pb-sb-legalfoot a:hover { color: var(--pb-text-primary); text-decoration: underline; }
.pb-sb-legalfoot a:focus-visible { outline: 3px solid var(--pb-focus); outline-offset: 3px; }
.pb-sb-legalfoot .pb-sb-legalfoot-ver { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--pb-text-secondary); }
@media (max-width: 359.98px) {
    .pb-sb-brand--top .pb-sb-word { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pb-sb, .pb-sb-root .pb-sb-page { transition: none; }
}
@media (forced-colors: active) {
    .pb-sb .pb-sb-link[aria-current] { outline: 2px solid Highlight; outline-offset: -2px; }
}