/* V26 W2 -- browse shell (items 04/A4), mobile filter sheet (05) and results landing (06).
   Colours/radii/shadows come ONLY from pb-tokens.css. No hard-coded colour. */

/* ---- 04: browse sidebar -- physically LEFT at >=1200 in HE-RTL and EN-LTR (direction:ltr grid wrapper) ---- */
.pb-browse-layout { min-width: 0; }
.pb-browse-content { min-width: 0; }
.pb-browse-sidebar { min-width: 0; }
.pb-browse-title { font-size: var(--pb-text-h, 1.125rem); margin: 0 0 8px; }
.pb-browse-subtitle { font-size: .875rem; font-weight: 600; color: var(--pb-text-secondary); margin: 16px 0 6px; }
.pb-browse-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-browse-link { display: flex; align-items: center; gap: 10px; min-height: var(--pb-touch-target, 48px); padding: 0 12px; border-radius: var(--pb-radius-control, 8px); color: var(--pb-text-primary); text-decoration: none; font-weight: 500; }
.pb-browse-link svg { width: 20px; height: 20px; flex: 0 0 auto; }
.pb-browse-link:hover { background: var(--pb-surface-hover); }
.pb-browse-link:focus-visible { outline: 3px solid var(--pb-focus); outline-offset: 2px; }
.pb-browse-link-active { background: var(--pb-surface-selected); font-weight: 700; }

@media (min-width: 1200px) {
    .pb-main--browse.pb-container { max-width: 1440px; }
    .pb-browse-layout { display: grid; grid-template-columns: var(--pb-sidebar-expanded, 192px) minmax(0, 1fr); grid-template-areas: "side main"; column-gap: 32px; align-items: start; direction: ltr; }
    html[dir="rtl"] .pb-browse-layout > * { direction: rtl; }
    .pb-browse-sidebar { grid-area: side; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding-inline-end: 16px; border-inline-end: 1px solid var(--pb-divider); }
    html[dir="rtl"] .pb-browse-sidebar { padding-inline-end: 0; padding-inline-start: 16px; border-inline-end: 0; border-inline-start: 1px solid var(--pb-divider); }
    .pb-browse-content { grid-area: main; }
    .pb-browse-toggle { display: none !important; }
    /* no duplicated navigation: the sidebar replaces the category strip / chip row while it is visible */
    .pb-main--browse #pbHomeCategoryStrip, .pb-main--browse #pbDiscCategories { display: none; }
}
@media (max-width: 1199.98px) {
    .pb-browse-layout { display: flex; flex-direction: column; }
    .pb-browse-toggle { order: 0; align-self: flex-start; margin-bottom: 12px; min-height: var(--pb-touch-target, 48px); }
    .pb-browse-sidebar { order: 1; display: none; margin-bottom: 16px; padding: 12px; border: 1px solid var(--pb-divider); border-radius: var(--pb-radius-card, 16px); background: var(--pb-surface); }
    .pb-browse-layout.pb-browse-open .pb-browse-sidebar { display: block; }
    .pb-browse-content { order: 2; }
}

/* ---- 05: mobile filter sheet (<768). >=768 the wrapper is display:contents -> the inline panel is unchanged ---- */
.pb-filter-sheet-open, .pb-filter-sheet-head, .pb-filter-sheet-actions, .pb-filter-sheet-backdrop { display: none; }
@media (min-width: 768px) {
    .pb-filter-sheet { display: contents; }
}
@media (max-width: 767.98px) {
    .pb-filter-sheet-open { display: inline-flex; align-items: center; gap: 8px; min-height: var(--pb-touch-target, 48px); }
    .pb-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--pb-radius-pill, 999px); background: var(--pb-brand); color: var(--pb-color-text-on-action); font-size: .8125rem; font-weight: 700; }
    .pb-filter-count[data-count="0"] { display: none; }
    .pb-filter-sheet { display: none; }
    .pb-filter-sheet.pb-sheet-is-open { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 1200; max-height: 88vh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--pb-surface); border-radius: var(--pb-radius-modal, 16px) var(--pb-radius-modal, 16px) 0 0; box-shadow: var(--pb-shadow-modal); }
    .pb-filter-sheet.pb-sheet-is-open .pb-filter-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    .pb-filter-sheet.pb-sheet-is-open .pb-filter-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
    .pb-filter-sheet.pb-sheet-is-open .pb-filter-sheet-actions .pb-btn { flex: 1 1 140px; min-height: var(--pb-h-button-primary, 52px); }
    .pb-filter-sheet.pb-sheet-is-open .pb-disc-field { margin-bottom: 12px; }
    .pb-filter-sheet-backdrop.pb-sheet-is-open { display: block; position: fixed; inset: 0; z-index: 1190; background: var(--pb-backdrop); }
    .pb-filter-sheet-title { margin: 0; font-size: 1.125rem; }
    .pb-filter-sheet-close { min-width: var(--pb-touch-target, 48px); min-height: var(--pb-touch-target, 48px); }
    body.pb-sheet-lock { overflow: hidden; }
}

/* ---- 06: the results heading / status receives focus on landing; it stays visibly marked ---- */
[data-pb-results-anchor]:focus { outline: none; }
[data-pb-results-anchor]:focus-visible { outline: 3px solid var(--pb-focus); outline-offset: 4px; border-radius: var(--pb-radius-small, 4px); }
[data-pb-results-anchor] { scroll-margin-top: 16px; }