/* Browse: filters sit in a sidebar on desktop and a slide-in drawer on phones and tablets (js/responsive-layer.js). */

#filterScrim, .fs-head, #btnOpenFilters { display: none; }
#browseMain, #filterSidebar { min-width: 0; }

/* the filter card is one column wherever it sits */
#filterSidebar .si-foryou { margin-bottom: 14px; }
#filterCard .grid { grid-template-columns: minmax(0, 1fr) !important; }
#filterCard .grid > div { grid-column: auto !important; }
#filterCard > div:last-child { flex-direction: column !important; align-items: stretch !important; }
#filterCard > div:last-child > div { width: 100%; }
#filterCard > div:last-child > div > select { flex: 1; min-width: 0; }

#filterCard > div:first-child > div:last-child { flex-wrap: wrap; }
#filterCard button { white-space: nowrap; }

/* folder path: just where you are */
#pathBar {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 8px 12px;
  background-color: var(--surface); border: var(--border); border-radius: var(--r-tile); box-shadow: var(--shadow);
}
#pathBar .ic { margin-right: 0; color: var(--text-dim); }
#pathBar #liveDrivePath {
  background: none; border: 0; padding: 0; min-width: 0;
  font: 600 12px/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); white-space: normal; overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  #browseLayout { display: grid; grid-template-columns: 304px minmax(0, 1fr); gap: 20px; align-items: start; }
  #filterSidebar {
    position: sticky; top: calc(var(--hdr-h, 0px) + 12px);
    max-height: calc(100vh - var(--hdr-h, 0px) - 24px); overflow-y: auto; scrollbar-width: thin;
  }
}

@media (max-width: 1023.98px) {
  #filterSidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; box-sizing: border-box;
    width: min(88vw, 380px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background-color: var(--surface-solid); border-right: var(--border);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-104%); visibility: hidden;
    transition: transform 320ms var(--ease), visibility 0s linear 320ms;
  }
  #browseLayout.fs-open #filterSidebar { transform: none; visibility: visible; transition-delay: 0s; }
  #filterScrim {
    display: block; position: fixed; inset: 0; z-index: 65; background-color: var(--overlay);
    opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease);
  }
  #browseLayout.fs-open #filterScrim { opacity: 1; pointer-events: auto; }
  /* main is its own stacking context; lift it above the header and tab bar while the drawer is open */
  html body.fs-open main { z-index: 80; }
  body.fs-open { overflow: hidden; }
  .fs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .fs-title { font: 700 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow); }
  .fs-done, #btnOpenFilters {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    background-color: var(--primary-soft); color: var(--link); border: 1px solid var(--primary-line);
    font: 700 11.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  }
  #btnOpenFilters { display: inline-flex; flex: none; order: 3; margin-left: auto; }
  #btnOpenFilters .fx-count { padding: 2px 6px; border-radius: var(--r-pill); background-color: var(--surface-solid); color: var(--text); letter-spacing: 0.04em; }
  #btnOpenFilters .fx-count:empty { display: none; }
  html[data-theme="matinee"] .fs-done, html[data-theme="matinee"] #btnOpenFilters { border: 2px solid #111315; box-shadow: 2px 2px 0 #111315; }
  html[data-theme="matinee"] #filterSidebar { border-right-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  #filterSidebar, #filterScrim { transition: none; }
}