/* ===================================================================
   shared/list-facets.css — the filter and sort popovers
   ===================================================================
   Goes with shared/list-facets.js. Lifted out of the creature creator's
   own stylesheet when the creature library and the campaign editor
   started using the same two controls, so there is one look for them
   rather than three that drift.

   Everything in a popover is now a DROPDOWN ROW: a label, a closed line
   saying what that facet is set to, and a list that unrolls under it
   when opened. The campaign editor's own popovers use the same rows.

   The icons themselves belong to whichever toolbar they sit in — a
   search box on one page, a grid bar on another — and are styled there.
   =================================================================== */

.list-filter-pop {
  position: fixed; z-index: 100003; width: 250px; overflow-y: auto;
  background: var(--bark); border: 1px solid var(--crimson); border-radius: 9px;
  padding: 10px 12px 12px; box-shadow: 0 12px 34px rgba(var(--shade-rgb), .55);
  font-family: 'Crimson Text', Georgia, serif;
}
.lf-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-strong); margin-bottom: 8px;
}
.lf-clear {
  background: none; border: none; color: var(--gold-dim); font-size: 11px; cursor: pointer;
  text-decoration: underline; font-family: 'Crimson Text', serif; text-transform: none; letter-spacing: 0;
}
.lf-clear:hover { color: var(--crimson); }

/* Why the list is short. */
.lf-note { font-size: 11px; color: var(--gold-dim); font-style: italic; padding: 2px 2px 6px; }
.lf-note-clear {
  background: none; border: none; color: var(--crimson); font-size: 11px; cursor: pointer;
  text-decoration: underline; font-family: inherit; font-style: normal; padding: 0 0 0 4px;
}

/* ── A dropdown row ──
   Closed, a facet is one line whatever it holds: Size with six values and
   CR with thirty are the same height, and eight of them still fit without
   the popover running off the screen. */
.lf-rows { display: flex; flex-direction: column; gap: 7px; }
.lf-row { display: block; }
.lf-row-label {
  font-family: 'Cinzel', serif; font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 3px;
}
.lf-select {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 9px;
  background: var(--bark-dark); border: 1px solid var(--border); border-radius: 7px;
  color: var(--ink); font-family: 'Crimson Text', serif; font-size: 13px; text-align: left;
  cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.lf-select:hover { border-color: var(--crimson); }
.lf-select:disabled { opacity: .45; cursor: default; }
.lf-select:disabled:hover { border-color: var(--border); }
/* Set to something: the row says so on its own, so a narrowed library
   never looks like an empty one. */
.lf-select.is-set { border-color: var(--crimson); color: var(--crimson); background: rgba(var(--accent-rgb), .08); }
.lf-select-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-caret {
  width: 10px; height: 6px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: .75; transition: transform .15s;
}
.lf-row.is-open .lf-caret { transform: rotate(180deg); }

/* ── The unrolled list ──
   Scrolls inside itself rather than stretching the popover, so thirty
   challenge ratings and six sizes both leave the rest of the rows where
   they were. */
.lf-menu {
  margin-top: 4px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bark-deep, var(--bark-dark)); padding: 4px;
}
.lf-menu[hidden] { display: none; }
.lf-menu-list { display: flex; flex-direction: column; gap: 1px; max-height: 186px; overflow-y: auto; }
.lf-menu-search {
  display: block; width: 100%; margin-bottom: 4px; padding: 5px 8px;
  background: var(--bark); border: 1px solid var(--border); border-radius: 5px;
  color: var(--ink); font-family: 'Crimson Text', serif; font-size: 12px;
}
.lf-menu-search:focus { outline: none; border-color: var(--crimson); }
.lf-menu-none { font-size: 11px; font-style: italic; color: var(--gold-dim); padding: 5px 8px; }
.lf-item {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px;
  border: none; border-radius: 5px; background: transparent; color: var(--ink);
  font-family: 'Crimson Text', serif; font-size: 13px; text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.lf-item:hover { background: rgba(var(--sheen-rgb), .07); }
.lf-item.is-on { color: var(--crimson); }
.lf-item-mark { width: 11px; flex: none; font-size: 11px; }
.lf-item-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }