/* Preferences modal — a clone of #filtersPanel shown above the top nav when the tab's "Preferences"
   chip is tapped. Transform-scroll (no inner scrollbar), names frozen, over-scroll dismisses — same
   model as the nav menu. The clone lives OUTSIDE .namebar, so the panel box + a couple of id-scoped
   control styles are re-declared here (scoped to .pm-overlay). The top panel's own CSS is untouched. */
/* NB: sized with dvh (dynamic viewport height = the CURRENTLY VISIBLE height), not vh. On phones vh
   counts the area behind the address bar, which pushed the centered modal up under the bar (top) and
   below the fold (bottom). dvh tracks the visible area and fixes it; vh is the fallback for old UAs. */
.pm-overlay { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 200; display: none; }
/* Center the modal in the viewport (height + width). When the panel fits it sits centered; when it's
   taller than the screen the clip fills the available height (so it's pinned as high as it can go) and
   the contents translate inside it (JS). One rule handles both cases. */
.pm-overlay.pm-show { display: flex; align-items: center; justify-content: center; padding: 8px 20px; box-sizing: border-box; background: rgba(4, 7, 12, .72); }
/* The glow lives HERE, not on the panel: the panel's own shadow would be clipped by this element's
   overflow:hidden, but an element's own box-shadow is not clipped by its own overflow. Rounded to
   match the panel so the halo follows the modal's corners. */
.pm-clip { width: 100%; max-width: 680px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: hidden; border-radius: var(--r-container); box-shadow: 0 0 20px 0 rgba(123, 208, 193, .28); }
.pm-scroll { will-change: transform; }
/* "Done" — the modal's only close. Preferences-chip treatment (panel2 + 1.5px teal border + light
   text). Scoped to .pm-overlay for higher specificity than the late-loading .clearfilters-btn rule,
   so it can't be dragged back to the plain Reset look. */
.pm-overlay .pm-done { margin-left: 8px; background: var(--panel2); border: 1.5px solid var(--accent2); color: var(--ink); font-weight: 600; }
.pm-overlay .pm-done:hover { border-color: var(--accent2); color: var(--ink); filter: brightness(1.1); }
/* Re-declare the .namebar-scoped panel box so the clone matches the top exactly. */
/* Teal border makes the modal read as lifted against the dark scrim; the glow is on .pm-clip. */
.pm-overlay .filters-panel { max-width: 680px; margin: 0 auto; border: 1.5px solid var(--accent2); border-radius: var(--r-container); background: var(--panel2); padding: 15px 16px; }
/* Inputs: full width in the grid + the shared 34px control height (id-scoped on the top panel). */
.pm-overlay .ff-field input { width: 100%; min-width: 0; max-width: none; box-sizing: border-box; height: 34px; padding-top: 0; padding-bottom: 0; font-size: 1rem; }
.pm-overlay .ff-field input::placeholder { font-style: italic; }
/* Gender segmented control fills its field (id-scoped on the top panel). */
.pm-overlay .ff-seg { width: 100%; }
.pm-overlay .ff-seg button { flex: 1; }
/* Modal dropdowns are drawn as FLOATING LAYERS: JS portals each open .ms-panel out to .pm-overlay and
   pins it (position:fixed) just under its control. So the control columns never change width, the modal
   layout doesn't shift when one opens, and nothing is clipped by .pm-clip. Widths mirror the top panel
   (Starts-With grid 264 / lists 236); the long Culture list keeps a compact 4-row scroll window. */
.pm-overlay .ms-panel { width: 264px; max-width: calc(100vw - 16px); z-index: 210; }
.pm-overlay .ms-panel.ms-list { width: 236px; }
.pm-overlay .ms-scroll { max-height: none; overflow: visible; }
.pm-overlay .ms-scroll.pm-listscroll { max-height: 152px; overflow-y: auto; -webkit-overflow-scrolling: touch; }  /* 4 full rows */