/* Selah workbench — Explore tab
   Three-column lens browser, faceted counts, root drill, pagination.
   Split from resources/public/css/workbench.css on 2026-07-01 —
   run git log --follow to trace history through the pre-split file. */

/* ─── Explore tab (#151) ─────────────────────────────────────
   Three-column lens browser using the wb-* visual vocabulary.
   Full-bleed canvas. Vertical rules between panels. No cards,
   no rounded boxes — bands flow open to the canvas like the
   other profiles. */

.wb-profile.explore-tab {
  /* IN THE FRAMEWORK (2026-09-15): pf-frame owns the page layout
     (nav · rail · main+sidebar); this wrapper just fills the tab.
     The old three-column grid is retired. */
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  height: 100%;
}
.wb-profile.explore-tab > .pf-frame { flex: 1 1 auto; min-height: 0; }
/* main column = filters | results */
.explore-tab .explore-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
/* Bare scroller (the verse-profile precedent): the frame's main
   cell drops its 20px/24px padding so the results column reaches
   the panel divider — otherwise the results scrollbar floats
   ~24px inboard of the gripper. Columns own their own padding. */
.explore-tab .pf-frame-main {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}
/* the framed drill: panel-chrome scrolls (rd-panel-body). Two
   classes on purpose — the base .explore-drill rule sits LATER in
   this file and wins a one-class tie (the search-input lesson);
   without the bump its border-left paints a second divider a few
   px inside the panel's own seam. */
.explore-drill.explore-drill--framed {
  padding: 0;
  overflow: visible;
  border-left: none;
}

.explore-results--single {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
  height: 100%;
}
.explore-single-body {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ─── Header band (full-width, like wb-profile-hero) ─── */
.explore-header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
  /* No padding — the tab strip sits flush in the band (word-profile
     FI-tabs parity); the band's bottom rule IS the strip's rule. */
  padding: 0;
  background: var(--wb-bg);
  border-bottom: 1px solid var(--wb-rule);
}
.explore-title {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--wb-ink);
  letter-spacing: -0.005em;
}
.explore-subtitle {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 12px;
  margin: 4px 0 0 0;
  color: var(--wb-ink-3);
  font-style: italic;
}
.explore-header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-family: var(--rd-mono);
  font-size: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.explore-lens-label { color: var(--wb-ink-3); }

/* ─── Help button + popover (slim header) ─── */
.explore-help-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  justify-self: end;
}
.explore-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--wb-rule);
  border-radius: 50%;
  background: transparent;
  color: var(--wb-ink-3);
  font-family: var(--rd-mono);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.explore-help-btn:hover {
  color: var(--wb-ink);
  border-color: var(--wb-ink-2);
}
.explore-help-btn--on,
.explore-help-btn--on:hover {
  color: var(--wb-bg);
  background: var(--wb-warm);
  border-color: var(--wb-warm);
}
.explore-help-popover {
  position: absolute;
  top: calc(100% + 8px);
  /* Right-anchored: the ? sits at the band's far right edge, so a
     left-anchored popover ran off-screen (Scott, 2026-09-12). */
  right: 0;
  left: auto;
  width: 420px;
  padding: 14px 16px;
  background: var(--wb-bg-2, var(--wb-bg));
  border: 1px solid var(--wb-rule);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 50;
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wb-ink-2);
}
.explore-help-para { margin: 0 0 8px 0; }
.explore-help-para:last-child { margin-bottom: 0; }
.explore-help-link {
  color: var(--wb-warm);
  text-decoration: none;
}
.explore-help-link:hover { text-decoration: underline; }

/* ─── Three columns separated by vertical rules ─── */

.explore-body {
  display: contents;
}

/* LEFT — filter pane */
.explore-filters {
  border-right: 1px solid var(--wb-rule);
  /* the ledger grammar (the designer's panel, 2026-09-13,
     round 2 — match the design's proportions): a 10px outer
     gutter; hairlines inset to the content; taller row rhythm */
  padding: 10px 10px 16px;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--wb-bg);
}
/* Mobile disclosure wrapper — on desktop the toggle bar is hidden
   and the body is layout-transparent (display: contents) so the
   aside's flex column sees the sections directly. The ≤700px
   media block flips both. */
.explore-filters-toggle { display: none; }
.explore-filters-body { display: contents; }
.explore-filters-toggle-label {
  font-family: var(--rd-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.explore-filters-toggle-chevron {
  color: var(--wb-warm);
  font-size: 11px;
}
.explore-fsec {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 4px;
}
.explore-fsec-label {
  font-family: var(--rd-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--wb-ink-3);
  padding: 8px 2px 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.explore-fsec-clear {
  font: inherit;
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: var(--wb-warm);
  cursor: pointer;
  padding: 0;
}
.explore-fsec-clear:hover { color: var(--wb-ink); }
.explore-fsec-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.explore-fsec-scroll {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.explore-frow {
  /* Control chrome — mono like the rest of the workbench chrome.
     The design's row scale: 13px type, ~30px rows. */
  font-family: var(--rd-mono);
  font-size: 13px;
  background: transparent;
  border: none;
  padding: 6px 4px 6px 8px;
  cursor: pointer;
  color: var(--wb-ink-2);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-left: 2px solid transparent;
  transition: color 0.1s ease, border-color 0.1s ease, background 80ms ease;
  line-height: 1.4;
}
.explore-frow:hover {
  color: var(--wb-ink);
  border-left-color: var(--wb-ink-3);
}

/* Histogram bar — set as the button's background via a hard-
   stop linear-gradient. --explore-bar-pct is an inline custom
   property the cljs sets per row (e.g. "62%"). No DOM wrapper
   needed; the row's flex content stays in normal flow on top
   of the gradient. */
.explore-frow--has-bar {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--wb-ink-3) 14%, transparent) 0,
    color-mix(in srgb, var(--wb-ink-3) 14%, transparent) var(--explore-bar-pct),
    transparent var(--explore-bar-pct),
    transparent 100%);
  background-repeat: no-repeat;
}
.explore-frow--has-bar:hover {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--wb-warm) 14%, transparent) 0,
    color-mix(in srgb, var(--wb-warm) 14%, transparent) var(--explore-bar-pct),
    transparent var(--explore-bar-pct),
    transparent 100%);
}
.explore-frow--has-bar.explore-frow--active,
.explore-frow--has-bar.explore-frow--active:hover {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--wb-warm) 26%, transparent) 0,
    color-mix(in srgb, var(--wb-warm) 26%, transparent) var(--explore-bar-pct),
    color-mix(in srgb, var(--wb-warm) 8%, transparent) var(--explore-bar-pct),
    color-mix(in srgb, var(--wb-warm) 8%, transparent) 100%);
}
/* Active state must beat :hover (higher specificity via :hover
   pseudo). Without this the warm tint only appears once the
   cursor leaves the row. */
.explore-frow--active,
.explore-frow--active:hover {
  color: var(--wb-warm);
  border-left-color: var(--wb-warm);
  font-weight: 500;
  background: color-mix(in srgb, var(--wb-warm) 8%, transparent);
}

/* Op-modifier styling (#155) — three set-algebra modes per
   scope chip. Each op gets its own glyph + tint so the
   active operation reads at a glance:
     union  +   warm   (the default "add")
     ∩      ∩   mint   (narrowing)
     diff   −   rose   (subtracting; struck-through label) */
.explore-frow-op {
  display: inline-block;
  width: 12px;
  text-align: center;
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}
.explore-frow--op-union,
.explore-frow--op-union:hover {
  color: var(--wb-warm);
  border-left-color: var(--wb-warm);
  background: color-mix(in srgb, var(--wb-warm) 8%, transparent);
  font-weight: 500;
}
.explore-frow--op-intersect,
.explore-frow--op-intersect:hover {
  color: var(--wb-mint, var(--wb-warm));
  border-left-color: var(--wb-mint, var(--wb-warm));
  background: color-mix(in srgb, var(--wb-mint, var(--wb-warm)) 10%, transparent);
  font-weight: 500;
}
.explore-frow--op-diff,
.explore-frow--op-diff:hover {
  color: var(--wb-rose, var(--wb-warm));
  border-left-color: var(--wb-rose, var(--wb-warm));
  background: color-mix(in srgb, var(--wb-rose, var(--wb-warm)) 8%, transparent);
}
.explore-frow--op-diff .explore-frow-label {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--wb-rose, var(--wb-warm)) 50%, transparent);
}
.explore-frow-label { flex: 1; }
.explore-frow-right {
  font-family: var(--rd-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--wb-ink-3);
}

/* CENTER — results panel */
.explore-results {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--wb-bg);
}
/* Lens chip rail — sits above the summary line, tile horizontal */
.explore-lens-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px 6px;
  border-bottom: 1px solid var(--wb-rule);
}
.explore-lens-rail-label {
  font-family: var(--rd-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--wb-ink-3);
  margin-right: 8px;
}
.explore-lens-chip {
  font-family: var(--rd-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  border: 1px solid var(--wb-rule);
  padding: 2px 6px;
  color: var(--wb-ink-3);
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.1s ease;
}
.explore-lens-chip:hover {
  color: var(--wb-ink);
  border-color: var(--wb-ink-3);
}
.explore-lens-chip--on,
.explore-lens-chip--on:hover {
  color: var(--wb-warm);
  border-color: var(--wb-warm);
  background: color-mix(in srgb, var(--wb-warm) 10%, transparent);
}
/* Divider between additive (vowels) and exclusive (split) dimensions */
.explore-lens-rail-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--wb-rule);
  margin: 0 6px;
  vertical-align: middle;
}

/* Top lens-rail (above the header subtitle) — picks the active lens
   family (vocab / roots / future). Larger + more prominent than the
   per-row display lens chips. */
/* The rail reuses the word profile's .wb-fi-tabs/.wb-fi-tab cell
   idiom (verse-bands.css) — one tab language across the service.
   Local additions: uppercase the i18n labels, no bottom rule of
   its own (the header band's rule serves), and the ? help anchor
   floats to the far right. */
/* The section head is ONE control row: split chips on the left
   (vocab lens), the pager filling the rest — per-page sizes next,
   page stepper on the right. No identity line (the top tabs name
   the lens; the pager total names the size). */
.explore-head-lenses {
  display: inline-flex;
  gap: 5px;
  align-self: center;
}
.explore-rsec .explore-pagination {
  flex: 1 1 auto;
  justify-content: space-between;
  margin-left: 0;
  padding: 0;
  border-top: none;
}
/* two-class selector: the base .search-section-head's padding
   shorthand loads AFTER this file in the bundle and was zeroing
   the inline padding (the flush-left pager, 2026-09-13) */
.search-section-head.explore-shead {
  display: flex;
  align-items: center;
  margin-inline: -14px;
  /* the SAME band token as the lens rail — symmetric at rest and
     pinned (the scroller no longer owns top padding, so no sticky
     counter-offset is needed) */
  padding: var(--explore-band-pad, 8px) 14px;
  border-bottom: 1px solid var(--wb-rule);
  /* Pinned to the top of the results scroller (Scott, 2026-07-22):
     the lens chips + per-page + pager stay reachable however deep
     the row walk goes. top:-12px counters the scroller's top
     padding so the band sits flush; negative inline margins span
     its side gutters so rows scroll cleanly under, not beside. */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--wb-bg);
  /* No negative-margin full-bleed stunt: the ±28px pair assumed the
     scroller's gutter and overshot on tabs where it differs, jamming
     the chips against the left rule and clipping "1 OF N" off the
     right (Scott, 2026-08-14). The band now shares the rows' own
     column — same edges as the content it governs. */
}

.explore-toplens-rail {
  margin: 0;
  border-bottom: none;   /* the header band's rule serves */
  flex: 1;
  min-width: 0;
  align-items: stretch;
}
/* The titles block spans the header so the ? can float to the
   page's right edge, not just the tabs'. */
.explore-header-titles { flex: 1; min-width: 0; display: flex; }
.explore-toplens-rail .wb-fi-tab-l { text-transform: uppercase; }
.explore-toplens-rail .wb-fi-tab { padding: 9px 16px; }
.explore-toplens-rail .explore-help-anchor {
  margin-left: auto;
  align-self: center;
  padding-right: 12px;
}

/* Roots-table cells — minor differences from vocab cells */
.explore-cell-lemma-count {
  text-align: right;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  width: 56px;
}
.explore-cell-top-lemma {
  text-align: right;
  font-family: var(--font-hebrew);
  font-size: 15px;
  direction: rtl;
  padding-right: 8px !important;
  color: var(--wb-ink-2);
}

/* ─── Root drill: sibling lemma list ─── */

.explore-drill-lemma-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 10px;
  border-top: 1px solid var(--wb-rule);
}
.explore-drill-lemma-list .explore-drill-flabel {
  padding-bottom: 6px;
}
.explore-drill-lemma-row {
  font: inherit;
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: baseline;
  gap: 8px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--wb-ink-2);
  text-align: left;
  transition: color 0.1s ease, border-color 0.1s ease, background 0.1s ease;
}
.explore-drill-lemma-row:hover {
  color: var(--wb-ink);
  border-left-color: var(--wb-ink-3);
}
.explore-drill-lemma-row--on,
.explore-drill-lemma-row--on:hover {
  background: color-mix(in srgb, var(--wb-warm) 12%, transparent);
  border-left-color: var(--wb-warm);
  color: var(--wb-warm);
}
.explore-drill-lemma-rank {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-3);
  text-align: right;
}
.explore-drill-lemma-hebrew {
  font-family: var(--font-hebrew);
  font-size: 16px;
  direction: rtl;
  text-align: right;
}
.explore-drill-lemma-gloss {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 12px;
  font-style: italic;
  color: var(--wb-ink-3);
}
.explore-drill-lemma-freq {
  font-family: var(--rd-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--wb-warm);
  min-width: 40px;
  text-align: right;
}

/* ─── Root drill: selected lemma detail (synthesis + verses) ─── */

.explore-drill-lemma-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--wb-rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.explore-drill-lemma-detail-hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Hebrew morpheme/syllable separator — quiet so the letters
   dominate, not the join character */
.explore-hb-sep {
  color: var(--wb-ink-3);
  margin: 0 2px;
  font-weight: 400;
}

/* Reader-class tinting in the Explore (profile) context.
   The reader's `.rd-morph.shade.rd-morph--prefix` and
   `.rd-syl.shade.rd-syl--pos-1` rules use `--rd-ink-3` and
   `--rd-hot`, which are scoped to `.wb-stage--reader`. Re-
   declare here under `.explore-tab` using the wb-* fallbacks
   so the same visual idiom carries to Explore without
   polluting the reader rules. */
.explore-tab .rd-morph.shade.rd-morph--prefix {
  color: var(--wb-ink-3);
  opacity: 0.7;
}
.explore-tab .rd-morph.shade.rd-morph--root {
  color: inherit;
}
.explore-tab .rd-morph + .rd-morph::before {
  /* visual gap between morphemes — quieter than the reader's
     forward-slash separator which lives in the corpus text;
     here a thin nbsp lets the tint do the work */
  content: "\00a0";
}
.explore-tab .rd-syl.shade.rd-syl--pos-0 { opacity: 1.00; }
.explore-tab .rd-syl.shade.rd-syl--pos-1 { opacity: 0.55; }
.explore-tab .rd-syl + .rd-syl::before {
  content: "\00a0";
}

/* Drill: in-scope verse strip (lazy via panel/mw-in-book-viewer).
   Inherits the .rd-mw-vw-* styling that already exists for the
   word mini's viewer — no extra CSS needed; just give it some
   top spacing to separate from the synthesis. */
.explore-drill-verses {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--wb-rule);
}
.explore-drill-verses .explore-drill-flabel {
  margin-bottom: 8px;
}

/* Results — search-row idiom (classes shared with the Search tab:
   .search-section / .search-section-head / .search-row / badges).
   The old <table> + learned-checkbox rendering was retired
   2026-07-14; Explore adds only a rank column, a selected state
   (drives the drill pane), and a small secondary-Hebrew slot for
   the roots lens' top-lemma. */
.explore-results-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  min-height: 0;
  --explore-band-pad: 8px;
  padding: 0 14px 20px;
}
.explore-rrow-rank {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-3);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}
.explore-rrow--on,
.explore-rrow--on:hover {
  border-left-color: var(--wb-warm);
  background: color-mix(in srgb, var(--wb-warm) 8%, transparent);
  color: var(--wb-ink);
}
.explore-rrow--on .explore-rrow-rank { color: var(--wb-warm); }
.explore-rrow-hb2 {
  font-size: 14px;
  min-width: 0;
  color: var(--wb-ink-2);
}

/* RIGHT — drill pane in the mini-panel position */

.explore-drill {
  border-left: 1px solid var(--wb-rule);
  padding: 18px 22px;
  overflow-y: auto;
  scrollbar-width: thin;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--wb-bg);
}
.explore-drill--empty {
  align-items: center;
  justify-content: center;
}
.explore-drill-prompt {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  text-align: center;
  font-style: italic;
  color: var(--wb-ink-3);
  font-size: 13px;
  max-width: 200px;
  line-height: 1.5;
}
.explore-drill-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--rd-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wb-ink-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--wb-rule);
}
.explore-drill-close {
  font: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--wb-ink-3);
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
}
.explore-drill-close:hover { color: var(--wb-warm); }
.explore-drill-hebrew {
  font-family: var(--font-hebrew);
  font-size: 42px;
  text-align: right;
  direction: rtl;
  line-height: 1.1;
  color: var(--wb-warm);
  padding: 8px 0 4px;
}
.explore-drill-translit {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-style: italic;
  font-size: 15px;
  color: var(--wb-ink);
}
.explore-drill-pron {
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-3);
  letter-spacing: 0.05em;
}
.explore-drill-gloss {
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  font-size: 15px;
  color: var(--wb-ink-2);
  padding: 10px 0;
  border-top: 1px solid var(--wb-rule);
  border-bottom: 1px solid var(--wb-rule);
  line-height: 1.4;
}
.explore-drill-pos,
.explore-drill-stat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.explore-drill-stats { display: flex; flex-direction: column; gap: 6px; }
.explore-drill-flabel {
  font-family: var(--rd-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9px;
  color: var(--wb-ink-3);
}
.explore-drill-fvalue {
  font-family: var(--rd-mono);
  font-variant-numeric: tabular-nums;
  color: var(--wb-warm);
  font-size: 12px;
}
.explore-drill-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--wb-rule);
}
.explore-drill-open {
  font-family: var(--rd-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: transparent;
  border: none;
  border-top: 1px solid var(--wb-rule);
  color: var(--wb-warm);
  padding: 10px 0 0;
  cursor: pointer;
  text-align: left;
}
.explore-drill-open:hover { color: var(--wb-ink); }

/* ─── States ─── */
.explore-state {
  padding: 36px;
  text-align: center;
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
  color: var(--wb-ink-3);
  font-style: italic;
  font-size: 13px;
}

/* ─── Narrow viewport: 2 columns (drill hides) ─── */
@media (max-width: 1024px) {
  .explore-tab .explore-body {
    grid-template-columns: 200px 1fr;
  }
  /* the drill stacks UNDER the results (the reader's 2fr/1fr
     stack precedent) instead of vanishing — browse-in-the-mini
     survives on tablet */
  .explore-drill {
    border-left: none;
    border-top: 1px solid var(--wb-rule);
    max-height: 45vh;
  }
  .explore-drill--empty { display: none; }
}

/* Explore drill: per-canon distribution bars (#158) — three
   small horizontal bars showing how the lemma's occurrences
   are split across Torah / Neviim / Ketuvim. Same canon-tinted
   stripe vocabulary as the word mini's frequency layer. */
.explore-drill-distribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--wb-rule);
}
.explore-drill-dist-row {
  display: grid;
  grid-template-columns: 56px 1fr 40px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.explore-drill-dist-label {
  font-family: var(--rd-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
  color: var(--wb-ink-3);
}
.explore-drill-dist-bar {
  position: relative;
  height: 6px;
  background: color-mix(in srgb, var(--wb-ink-3) 18%, transparent);
  border-radius: 1px;
  overflow: hidden;
}
.explore-drill-dist-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 1px;
  transition: width 0.15s ease;
}
.explore-drill-dist-row--torah   .explore-drill-dist-bar-fill { background: var(--wb-warm); }
.explore-drill-dist-row--neviim  .explore-drill-dist-bar-fill { background: var(--wb-mint, var(--wb-warm)); }
.explore-drill-dist-row--ketuvim .explore-drill-dist-bar-fill { background: var(--wb-cyan, var(--wb-warm)); }
.explore-drill-dist-count {
  font-family: var(--rd-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  text-align: right;
  color: var(--wb-ink-2);
}

/* ─── Pagination — < 1 ... 7 *8* 9 ... 15 > ─── */
.explore-results-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.explore-results-wrap .explore-results { flex: 1 1 auto; min-height: 0; }

.explore-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--wb-rule);
  background: var(--wb-bg);
  flex: 0 0 auto;
}

.explore-pgsize {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--rd-mono);
  font-size: 10px;
  color: var(--wb-ink-3);
}
.explore-pgsize-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.explore-pgsize-btn {
  padding: 2px 5px;
  border: 1px solid var(--wb-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--wb-ink-2);
  font: inherit;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.explore-pgsize-btn:hover {
  color: var(--wb-ink);
  border-color: var(--wb-ink-2);
}
.explore-pgsize-btn--on,
.explore-pgsize-btn--on:hover {
  color: var(--wb-bg);
  background: var(--wb-warm);
  border-color: var(--wb-warm);
}

.explore-pages {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--rd-mono);
  font-size: 10px;
}
.explore-page-btn {
  min-width: 20px;
  padding: 2px 4px;
  border: 1px solid var(--wb-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--wb-ink-2);
  font: inherit;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.explore-page-btn:hover:not(.explore-page-btn--disabled):not(.explore-page-btn--on) {
  color: var(--wb-ink);
  border-color: var(--wb-ink-2);
}
.explore-page-btn--on,
.explore-page-btn--on:hover {
  color: var(--wb-bg);
  background: var(--wb-warm);
  border-color: var(--wb-warm);
}
.explore-page-btn--disabled,
.explore-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.explore-page-gap {
  padding: 0 4px;
  color: var(--wb-ink-3);
  user-select: none;
}
.explore-page-total {
  margin-left: 10px;
  color: var(--wb-ink-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ─── Mobile (≤700): single column · collapsing side panels ───
   KEEP THIS BLOCK LAST IN THE FILE — it overrides base rules of
   equal specificity (pagination, lens rail, drill) and cascade
   order is what makes it win.
   Filter rail folds behind the FILTERS disclosure bar (closed by
   default — results first). The drill returns as a bottom sheet
   when a row is selected; its existing × clears the selection and
   dismisses the sheet. Applies to the Search tab too (it shares
   the explore-tab grid + filter rail). */
@media (max-width: 700px) {
  .explore-tab .explore-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }
  .explore-header { padding: 0; }
  /* spine wraps: search takes the full first line; the grain
     ladder + help share the second */
  .explore-toplens-rail {
    grid-template-columns: 1fr auto;
    grid-template-areas: "search search" "center help";
    row-gap: 2px;
  }
  .explore-toplens-rail .explore-search-band { grid-area: search; }
  .explore-toplens-center { grid-area: center; justify-content: flex-start; }
  .explore-toplens-rail .explore-help-anchor { grid-area: help; }
  /* the drill becomes a bottom sheet under the results */
  .explore-drill {
    border-left: none;
    border-top: 1px solid var(--wb-rule);
    max-height: 50vh;
  }
  .explore-drill--empty { display: none; }

  /* Filter rail → disclosure strip */
  .explore-filters {
    border-right: none;
    border-bottom: 1px solid var(--wb-rule);
    padding: 0;
    gap: 0;
    overflow: visible;
  }
  .explore-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    color: var(--wb-ink-2);
    cursor: pointer;
  }
  .explore-filters-body { display: none; }
  .explore-filters--open .explore-filters-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: 55vh;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0 14px 16px;
  }
  /* Results gutters tighten */
  .explore-results-scroll { padding: 10px 14px 20px; }
  .search-tab .explore-results { padding: 12px 14px 20px; }
  .search-section-head { flex-wrap: wrap; row-gap: 4px; }
  .search-section-count {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Rows: one scannable line — rank · hebrew · gloss · count.
     Translit + POS live in the drill sheet, one tap away. */
  .explore-rrow {
    flex-wrap: nowrap;
    gap: 8px;
    align-items: baseline;
  }
  .explore-rrow .search-row-translit,
  .explore-rrow .search-row-sub,
  .explore-rrow .explore-rrow-hb2,
  .explore-rrow .search-row-pos { display: none; }
  .explore-rrow .search-row-hb {
    min-width: 0;
    flex-shrink: 0;
  }
  .explore-rrow .search-row-gloss {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .explore-rrow-rank { min-width: 26px; }
  /* Pager: drop the per-page selector; ‹ pages › is enough */
  .explore-pgsize { display: none; }
  .explore-pages { gap: 2px; }
  .explore-lens-rail {
    padding: 10px 14px 6px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .explore-lens-rail-label { display: none; }
  .explore-single-body { padding: 20px 16px; }
  /* Drill → bottom sheet (overrides the ≤1024 display:none) */
  .explore-drill {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 62vh;
    z-index: 60;
    border-left: none;
    border-top: 1px solid var(--wb-rule);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  }
  .explore-drill--empty { display: none; }
}


/* ── Verse explorer rows (2026-09-12: the verses grain) ───────
   PARALLEL format: the address flush left with the frame chips
   (or the ★, in favorites) on the right, then the rendering and
   the Hebrew side by side, each wrapping in its own column. */
.explore-rrow.explore-vrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "ref frames"
    "hb  gloss";
  column-gap: 18px;
  row-gap: 4px;
  align-items: start;
}
/* narrow: the row stacks — ref, Hebrew, then the rendering
   (placed AFTER the base rule; same specificity, later wins) */
@media (max-width: 700px) {
  .explore-rrow.explore-vrow {
    grid-template-columns: 1fr;
    grid-template-areas:
      "ref"
      "frames"
      "hb"
      "gloss";
  }
}
.explore-vrow-ref {
  grid-area: ref;
  justify-self: start;
  white-space: nowrap;
}
.explore-rrow.explore-vrow .explore-vrow-hb {
  grid-area: hb;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
  min-width: 0;
  /* Right-aligned like the parallel reader — the search-row base
     left-aligns the block even under dir=rtl (Scott, 2026-09-12). */
  text-align: right;
}
.explore-rrow.explore-vrow .explore-vrow-gloss {
  grid-area: gloss;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
  min-width: 0;
  line-height: 1.6;
}
.explore-vrow-frames {
  grid-area: frames;
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: center;
}
.explore-vframe-chip {
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border: 1px solid var(--wb-rule);
  border-radius: 8px;
  color: var(--wb-ink-3);
  white-space: nowrap;
}
.explore-rrow--on .explore-vframe-chip { color: var(--wb-warm); }
.explore-drill-vhebrew {
  font-size: 17px;
  line-height: 1.9;
  padding: 10px 2px;
}
.explore-drill-vrendering {
  font-size: 12px;
  line-height: 1.7;
  color: var(--wb-ink-2);
  padding: 2px 2px 10px;
}

/* ── Grain tabs in the rail (2026-09-12: the top band is
   reserved for the coming search) ─────────────────────────── */
.explore-grain-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  margin: 0 0 8px;
  overflow: hidden;
  /* NEVER shrink. The rail is a flex column; when its sections outgrow
     the viewport (2026-09-23: FRAMES went 12 → 22) flexbox squeezes the
     only shrinkable child — this one, whose overflow:hidden makes its
     min-height 0 — and the two tabs vanished at 1.6px. */
  flex: 0 0 auto;
}
.explore-grain-tab {
  flex: 1 1 0;
  font-family: var(--rd-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  background: transparent;
  border: none;
  color: var(--wb-ink-3);
  padding: 6px 4px;
  cursor: pointer;
  text-align: center;
  transition: color 0.12s, border-color 0.12s;
}
.explore-grain-tab:hover { color: var(--wb-ink); }
.explore-grain-tab--on {
  color: var(--wb-warm);
  box-shadow: inset 0 0 0 1px var(--wb-warm);
  border-radius: 3px;
  background: color-mix(in srgb, var(--wb-warm) 8%, transparent);
}

/* The verse mini rides inside the drill wrapped in .rd-panel for
   its typography context — but .rd-panel's border-left is the
   READER panel's divider, and the drill aside already draws its
   own edge rule. One seam, not two. */
.explore-drill .rd-panel { border-left: none; }

/* Tighter verse-mini seat in the drill (Scott, 2026-09-12):
   the ref hero is the head; the yalkut-star row between hero
   and Hebrew squeezes to a sliver. */
.explore-drill .rd-rack-hero { padding-bottom: 2px; }
/* The drill is a column flexbox and .rd-panel ships overflow:hidden
   — as a flex child it gets squeezed to the aside's height and
   CLIPS instead of letting the aside scroll. Natural height here;
   the aside is the scroller. */
.explore-drill .rd-panel {
  flex: 0 0 auto;
  overflow: visible;
}
.explore-drill .rd-panel-verse-text { margin-top: 2px; }

/* ── The search band (2026-09-12) ─────────────────────────────
   The reserved header band. Borrows the Search tab's input +
   toggle chrome; positions the keyboard popover beneath. */
.explore-toplens-rail {
  /* TRUE-CENTER grid (Scott, 2026-09-15): equal 1fr flanks put
     the grain ladder at the window's midline — the search fills
     the left track without pushing it; help pins right. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  flex: 1 1 auto;
  /* the lens rail's own band spacing (.pf-frame-rail) — tight and
     consistent above and below (Scott, 2026-09-24) */
  padding: 6px 14px;
  gap: 8px;
}
/* spine-scale search controls — the input and the ab/⌨ toggles
   shrink so the row matches the other pages' spines */
.explore-toplens-rail .search-translit-toggle,
.explore-toplens-rail .search-kbd-toggle {
  height: 20px;
  min-width: 24px;
  padding: 0 6px;
  font-size: 10px;
}
/* the keyboard is just the glyph — no box (Scott, 2026-09-14);
   same 20px height as ab, glyph sized to read; warm when open */
.explore-toplens-rail .search-kbd-toggle {
  border: none;
  background: transparent;
  min-width: 20px;
  padding: 0 2px;
  font-size: 34px;
  overflow: visible;
}
.explore-toplens-rail .search-kbd-toggle--on {
  background: transparent;
  color: var(--wb-warm);
}
.explore-search-band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  /* fills the left track; the grid's center column is immovable */
  width: 100%;
  min-width: 0;
}
/* the grain selector holds the spine's center (reader-spine
   grammar): glyph ladder + the active grain's NAME */
.explore-toplens-center {
  display: flex;
  justify-content: center;
}
.explore-grain-center {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.explore-grain-center .rd-unit-label {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
}
/* two-class selector — search.css loads after explore.css, so
   the bare .search-input (17px Cardo, 6px pad → the 43px row)
   outranks a single class here (the pager cascade lesson) */
.search-input.explore-search-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
  padding: 4px 8px;
}
.explore-search-clear {
  background: transparent;
  border: none;
  color: var(--wb-ink-3);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
}
.explore-search-clear:hover { color: var(--wb-ink); }
.explore-search-loading {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
  white-space: nowrap;
}
.explore-state--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.explore-empty-query {
  color: var(--wb-ink-2);
}
.explore-empty-clear {
  border: 1px solid var(--wb-line);
  background: transparent;
  color: var(--wb-accent);
  font: inherit;
  cursor: pointer;
  padding: 3px 8px;
}
.explore-empty-clear:hover {
  border-color: var(--wb-accent);
}
.explore-search-band .search-kbd {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
}

/* ── rung 1: the LIVING verse row (the ONE renderer in-row) ── */
/* Hydrated rows carry wb-profile-token chips and the reader-scale
   contract; Hebrew, annex rows, and phrase floors use one geometry. */
.explore-rrow.explore-vrow .explore-vrow-hb--live {
  cursor: default;
}
.explore-vrow-hb--live .wb-profile-token { cursor: pointer; }

/* The drill's word crumb — the way back to the verse mini. */
.explore-drill-wordcrumb {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.03em;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--wb-ink-3);
  padding: 2px 4px 6px;
  text-align: left;
}
.explore-drill-wordcrumb:hover { color: var(--wb-warm); }

/* ── The grain strip + lens rail atop the results ── */
.explore-rails {
  display: flex;
  align-items: center;
  gap: 10px;
  /* full-bleed hairline: span the scroller's 14px gutters
     (explore-scoped — the 2026-08-14 overshoot lesson applied:
     these margins mirror .explore-results-scroll's own padding).
     ONE band token everywhere — no margin zoo (Scott, 2026-09-13). */
  margin: 0 -14px;
  padding: var(--explore-band-pad, 8px) 14px;
  border-bottom: 1px solid var(--wb-rule);
}
.explore-rails .sv-rail {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0;
  margin: 0;
  row-gap: 3px;
}
.explore-grain-strip {
  flex: none;
  display: inline-flex;
  gap: 2px;
  align-self: center;
}

/* ── The grain strip + lens rail atop the results ── */
.explore-rails {
  display: flex;
  align-items: center;
  gap: 10px;
  /* full-bleed hairline: span the scroller's 14px gutters
     (explore-scoped — the 2026-08-14 overshoot lesson applied:
     these margins mirror .explore-results-scroll's own padding).
     ONE band token everywhere — no margin zoo (Scott, 2026-09-13). */
  margin: 0 -14px;
  padding: var(--explore-band-pad, 8px) 14px;
  border-bottom: 1px solid var(--wb-rule);
}
.explore-rails .sv-rail {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0;
  margin: 0;
  row-gap: 3px;
}
.explore-grain-strip {
  flex: none;
  display: inline-flex;
  gap: 2px;
  align-self: center;
}

/* the clicked word's gloss, lit in the rendering line — the same
   warm the selected token chip wears */
.explore-gloss-sel {
  background: color-mix(in srgb, var(--wb-warm) 26%, transparent);
  color: var(--wb-ink);
  border-radius: 2px;
  padding: 0 2px;
}

/* ── The QUERY LINE — the active set as an equation ── */
.explore-rails-stack { display: flex; flex-direction: column; }
.explore-qline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--wb-rule);
  font-size: 11px;
}
.explore-qgroup { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.explore-qline-join { color: var(--wb-ink-3); padding: 0 2px; }
.explore-qline-spacer { flex: 1; }
.explore-qline-clear {
  font: inherit; background: transparent; border: none;
  cursor: pointer; color: var(--wb-ink-3);
}
.explore-qline-clear:hover { color: var(--wb-warm); }
.explore-qchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 4px 1px 6px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  color: var(--wb-ink-2);
  background: color-mix(in srgb, var(--wb-warm) 7%, transparent);
}
.explore-qchip--diff { border-style: dashed; }
.explore-qchip-op { color: var(--wb-warm); font-weight: 600; }
.explore-qchip--q .explore-qchip-label { font-style: italic; }
.explore-qchip-x {
  font: inherit; background: transparent; border: none;
  cursor: pointer; color: var(--wb-ink-3); padding: 0 1px;
  line-height: 1;
}
.explore-qchip-x:hover { color: var(--wb-warm); }

/* ── Collapsible rail sections ── */
.explore-fsec-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
  min-width: 0;
  padding: 8px 2px 6px;
  border-bottom: 1px solid var(--wb-rule);
  margin-bottom: 4px;
}
.explore-fsec-head:hover .explore-fsec-label { color: var(--wb-ink-2); }
.explore-fsec-head .explore-fsec-label { padding: 0; }
.explore-fsec-chevron {
  color: var(--wb-ink-3);
  font-size: 9px;
  flex: none;
}
.explore-fsec-head .explore-fsec-label { flex: none; }
.explore-fsec-value {
  color: var(--wb-warm);
  font-family: var(--rd-mono);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  text-align: right;
}
.explore-fsec-head .explore-fsec-clear { margin-left: auto; flex: none; }
.explore-fsec--closed { padding-bottom: 2px; }

/* grain selection in the search rail (right of the field) */
.explore-band-grain {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  flex: none;
}

/* the rail filter row (⌕ … /) */
.explore-rail-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  padding: 4px 8px;
  margin: 0 0 8px;
  font-family: var(--rd-mono);
  font-size: 12px;
}
.explore-rail-filter-glyph { color: var(--wb-ink-3); }
.explore-rail-filter-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--wb-ink);
  font: inherit;
}
.explore-rail-filter-input::placeholder { color: var(--wb-ink-3); }
.explore-rail-filter-key {
  border: 1px solid var(--wb-rule);
  border-radius: 2px;
  padding: 0 5px;
  font-size: 10px;
  color: var(--wb-ink-3);
}
.explore-rail-filter-clear {
  font: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--wb-ink-3);
  padding: 0 2px;
}
.explore-rail-filter-clear:hover { color: var(--wb-warm); }

/* ── Form grain — measure columns (Scott, 2026-09-17) ──────────
   Rows stay the search-row flex; the gloss is the flexible cell so
   the fixed-width measure cells line up as columns under the head. */
/* two classes — search.css loads after explore.css, and its .search-row
   flex-wrap: wrap won the tie (the form grain's fifth cell wrapped) */
.explore-rrow.explore-mrow { flex-wrap: nowrap; }
.explore-mrow .search-row-gloss {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.explore-mcell {
  flex: 0 0 76px;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.explore-mhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 10px 4px 10px;
  border-bottom: 1px solid var(--wb-rule);
  font-family: var(--rd-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wb-ink-3);
  position: relative;
}
.explore-mhead-word { min-width: 64px; }
.explore-mhead-gloss { flex: 1; min-width: 0; }
.explore-mhead-col {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit;
  overflow: hidden; text-overflow: ellipsis;
}
.explore-mhead-col:hover,
.explore-mhead-col--on { color: var(--wb-warm); }
.explore-mhead-add { position: relative; flex: 0 0 auto; }
.explore-mhead-plus {
  background: none; border: 1px solid var(--wb-rule); border-radius: 3px;
  color: var(--wb-ink-3); cursor: pointer;
  font-family: var(--rd-mono); font-size: 11px; line-height: 1;
  padding: 1px 5px;
}
.explore-mhead-plus:hover,
.explore-mhead-plus--on { color: var(--wb-warm); border-color: var(--wb-warm); }
.explore-mmenu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  display: flex; flex-direction: column;
  min-width: 140px; padding: 4px;
  background: var(--wb-bg, var(--wb-paper));
  border: 1px solid var(--wb-rule); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.explore-mmenu-item {
  display: flex; gap: 6px; align-items: baseline;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 4px 6px;
  font-family: var(--rd-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wb-ink-3);
}
.explore-mmenu-item:hover { color: var(--wb-warm); }
.explore-mmenu-item--on { color: var(--wb-ink); }
.explore-mmenu-check { width: 10px; color: var(--wb-warm); }
/* phone width: measures stay, translit yields */
@media (max-width: 640px) {
  .explore-mcell { flex-basis: 48px; }
}

/* ── THE SORT bar — an ordered juxt, numbered (2026-09-23) ─────────
   The order of the keys is the interpretation, so the rank is loud,
   the direction is a real button, and "then" reads between keys. */
.explore-sortbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--wb-rule);
  font-family: var(--rd-mono);
  font-size: 12px;
  color: var(--wb-ink-2);
}
.explore-sortbar-label {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--wb-ink-3);
}
.explore-sortkey {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 4px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  background: color-mix(in srgb, var(--wb-warm) 6%, transparent);
}
.explore-sortkey-rank {
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  background: var(--wb-warm);
  color: var(--wb-bg);
  font-size: 10px;
  font-weight: 600;
}
.explore-sortkey-name { color: var(--wb-ink); }
.explore-sortkey-dir,
.explore-sortkey-move,
.explore-sortkey-x {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 2px 6px;
  border: 1px solid var(--wb-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--wb-ink-2);
  cursor: pointer;
}
.explore-sortkey-dir {
  color: var(--wb-warm);
  border-color: var(--wb-warm);
  font-weight: 700;
}
.explore-sortkey-dir:hover,
.explore-sortkey-move:hover,
.explore-sortkey-x:hover {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-warm) 12%, transparent);
}
.explore-sortbar-then {
  margin-left: 4px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--wb-ink-3);
}
.explore-sortbar-add {
  font: inherit;
  font-size: 11px;
  padding: 3px 6px;
  border: 1px dashed var(--wb-rule);
  border-radius: 3px;
  background: transparent;
  color: var(--wb-ink-2);
}
.explore-sortbar-reset {
  font: inherit;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 3px 8px;
  border: 1px solid var(--wb-rule);
  border-radius: 3px;
  background: transparent;
  color: var(--wb-ink-3);
  cursor: pointer;
  margin-left: auto;
}

/* ── Stale-while-revalidate (2026-09-23) — a marginal or sort changed
   and the LAST set stays on screen, dimmed, until the new one lands.
   Never a blank, never a spinner in between. */
.explore-results--stale .explore-results-scroll {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.explore-results .explore-results-scroll {
  transition: opacity 0.15s ease;
}

/* THE SORT gets its own rail (Scott, 2026-09-23: "can we have it on
   its own rail?") — a second, full-width row of the PINNED head band,
   so it stays reachable with the pager however deep the scroll. */
.search-section-head.explore-shead { flex-wrap: wrap; }
.explore-shead .explore-sortbar {
  flex: 1 0 100%;
  margin: var(--explore-band-pad, 8px) -14px calc(-1 * var(--explore-band-pad, 8px));
  padding: 7px 14px;
  border-top: 1px solid var(--wb-rule);
  border-bottom: none;
}

/* ── TOPICS rail window (2026-09-24) ── */
.explore-fsec-hint { font-size: 10px; letter-spacing: .06em; color: var(--wb-ink-3); padding: 2px 10px 4px; }
.explore-fsec-foot { display: flex; gap: 6px; padding: 4px 10px 6px; }
.explore-fsec-more { font: inherit; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--wb-warm); background: none; border: 1px solid var(--wb-line); border-radius: 3px; padding: 2px 8px; cursor: pointer; }
.explore-fsec-more:hover { border-color: var(--wb-warm); }
/* ── per-section filters (2026-09-24) ── */
.explore-fsec-filter { display: flex; align-items: center; gap: 6px; padding: 2px 10px 4px; }
.explore-fsec-filter-glyph { font-size: 10px; color: var(--wb-ink-3); }
.explore-fsec-filter-input { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid var(--wb-line); outline: none; color: var(--wb-ink); font: inherit; font-size: 11.5px; padding: 1px 0; }
.explore-fsec-filter-input:focus { border-bottom-color: var(--wb-warm); }
.explore-fsec-filter-clear { font: inherit; font-size: 11px; color: var(--wb-ink-3); background: none; border: none; cursor: pointer; padding: 0 2px; }
.explore-fsec-scroll--topics { max-height: 520px; }
.explore-fsec-more-hint { color: var(--wb-ink-3); font-size: 12px; padding: 0 10px; }
/* ── THE SET rail (2026-09-24) — the query's expression, in the sort rail's grammar ── */
.explore-shead .explore-setbar, .explore-shead .explore-filterbar {
  flex: 1 0 100%;
  margin: 0 -14px;
  padding: 7px 14px;
  border-top: none;
  border-bottom: 1px solid var(--wb-rule);
}
.explore-shead .explore-sortbar { border-top: none; border-bottom: 1px solid var(--wb-rule); margin-top: 0; margin-bottom: 0; }
.explore-shead-pager { display: flex; align-items: center; gap: 12px; flex: 1 0 100%; padding-top: var(--explore-band-pad, 8px); }
.explore-setgroup, .explore-setunion { display: inline-flex; align-items: center; gap: 6px; }
.explore-setterm {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 4px; border: 1px solid var(--wb-rule); border-radius: 3px;
  background: color-mix(in srgb, var(--wb-warm) 6%, transparent);
}
.explore-setterm--diff { background: color-mix(in srgb, var(--wb-ink-3) 10%, transparent); }
.explore-setterm--base { border-style: dashed; }
.explore-setterm--q .explore-sortkey-name { font-style: italic; }
.explore-setterm-op {
  font: inherit; font-size: 13px; line-height: 1; padding: 2px 7px;
  border: 1px solid var(--wb-warm); border-radius: 2px; background: transparent;
  color: var(--wb-warm); font-weight: 700; cursor: pointer;
}
.explore-setterm--diff .explore-setterm-op { color: var(--wb-ink-2); border-color: var(--wb-ink-3); }
.explore-setterm-op:hover { background: color-mix(in srgb, var(--wb-warm) 12%, transparent); }
.explore-setjoin { font-size: 14px; color: var(--wb-ink-3); padding: 0 2px; }
.explore-setparen { font-size: 15px; color: var(--wb-ink-3); }
/* the native select's popup follows the theme (Scott, 2026-09-24: "needs to go with the theme so it is readable") */
.explore-sortbar-add { color-scheme: dark; background: var(--wb-bg); color: var(--wb-ink); }
.explore-sortbar-add option { background: var(--wb-bg); color: var(--wb-ink); font-family: var(--rd-mono); }
.explore-sortbar-add option:checked, .explore-sortbar-add option:hover { background: var(--wb-warm); color: var(--wb-bg); }
/* two bars (2026-09-24): the faint TOTAL under the scope behind the solid count under the whole set */
.explore-frow--has-total {
  background-image:
    linear-gradient(to right,
      color-mix(in srgb, var(--wb-warm) 30%, transparent) 0,
      color-mix(in srgb, var(--wb-warm) 30%, transparent) var(--explore-bar-pct),
      transparent var(--explore-bar-pct), transparent 100%),
    linear-gradient(to right,
      color-mix(in srgb, var(--wb-ink-3) 7%, transparent) 0,
      color-mix(in srgb, var(--wb-ink-3) 7%, transparent) var(--explore-bar-total-pct),
      transparent var(--explore-bar-total-pct), transparent 100%);
}
.explore-frow--has-total:hover {
  background-image:
    linear-gradient(to right,
      color-mix(in srgb, var(--wb-warm) 22%, transparent) 0,
      color-mix(in srgb, var(--wb-warm) 22%, transparent) var(--explore-bar-pct),
      transparent var(--explore-bar-pct), transparent 100%),
    linear-gradient(to right,
      color-mix(in srgb, var(--wb-warm) 7%, transparent) 0,
      color-mix(in srgb, var(--wb-warm) 7%, transparent) var(--explore-bar-total-pct),
      transparent var(--explore-bar-total-pct), transparent 100%);
}
/* two rails on the left (2026-09-24): the head fixed, the body scrolls */
.explore-filters { overflow: hidden; padding-bottom: 0; }
.explore-filters-body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.explore-rail-head { flex: 0 0 auto; padding-bottom: 2px; border-bottom: 1px solid var(--wb-rule); margin-bottom: 6px; }
.explore-rail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-bottom: 16px; }
/* the rail's scrollbar sits against the panel's own rule, not inside the gutter (Scott, 2026-09-24: "tight. it is cramping the data") */
.explore-rail-scroll {
  margin-right: -10px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--wb-ink-3) 45%, transparent) transparent;
}
.explore-rail-scroll::-webkit-scrollbar { width: 6px; }
.explore-rail-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--wb-ink-3) 45%, transparent); border-radius: 3px; }
/* section headers that stand out (Scott, 2026-09-24): a larger, brighter label and a real chevron */
.explore-fsec-head { padding: 10px 2px 6px; gap: 8px; }
.explore-fsec-head .explore-fsec-label { font-size: 11px; letter-spacing: .2em; color: var(--wb-ink-2); font-weight: 600; }
.explore-fsec-chevron { font-size: 12px; color: var(--wb-warm); width: 12px; text-align: center; }
.explore-fsec-head:hover .explore-fsec-label { color: var(--wb-ink); }
/* TOPICS paged, ten a page, no scrollbar (2026-09-24) */
.explore-fsec-page { display: flex; flex-direction: column; }
.explore-fsec-pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 4px 10px 6px; font-family: var(--rd-mono); font-size: 10.5px; color: var(--wb-ink-3); }
.explore-fsec-pager .explore-page-btn { padding: 1px 7px; font-size: 12px; }
.explore-fsec-pager-n { letter-spacing: .06em; }

/* ── THE GRAIN rail (2026-09-24) — its own band above the lens rail:
   the cursor spine on the left flank, the ladder at the midline, help
   right. The search rail moved into the center head, above SET. */
.explore-grain-center .rd-unit-label { color: var(--wb-warm); }
.explore-shead .explore-searchbar {
  flex: 1 0 100%;
  /* the head band's own top pad would sit above the first row — pull
     the search up onto the band's edge (Scott, 2026-09-24) */
  margin: calc(-1 * var(--explore-band-pad, 8px)) -14px 0;
  padding: 5px 14px;
  border-top: none;
  border-bottom: 1px solid var(--wb-rule);
}
.explore-searchbar .search-translit-toggle,
.explore-searchbar .search-kbd-toggle { height: 20px; min-width: 24px; padding: 0 6px; font-size: 10px; }
.explore-searchbar .search-kbd-toggle { border: none; background: transparent; min-width: 20px; padding: 0 2px; font-size: 34px; overflow: visible; }
.explore-searchbar .search-kbd-toggle--on { background: transparent; color: var(--wb-warm); }
.explore-spine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink-2);
  white-space: nowrap;
}
.explore-spine-sep { color: var(--wb-ink-3); }
.explore-spine-ref { color: var(--wb-ink); }
.explore-spine-unit { color: var(--wb-ink-3); letter-spacing: .06em; }
.explore-spine-text { font-family: var(--rd-hebrew, inherit); font-size: 14px; color: var(--wb-warm); }

/* ── The unit rows (2026-09-24) — rank · hebrew (fixed) · text (flex) ·
   measure cells (fixed), the head in the same columns ── */
/* HEBREW sizes to its content between a floor and a ceiling. A fixed
   84px crushed every multi-word proper noun — עַטְרוֹת בֵּית יוֹאָב and
   מַהֵר שָׁלָל חָשׁ בַּז each wrapped onto a second line while the gloss
   beside them sat empty (Scott, 2026-09-26: "words are not given enough
   room, in other places they are given too much"). */
.explore-rrow.explore-mrow .search-row-hb {
  flex: 0 1 auto; min-width: 84px; max-width: 208px; min-inline-size: 0;
}
.explore-mhead-word { flex: 0 1 auto; min-width: 84px; max-width: 208px; }
.explore-utext {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: baseline; gap: 8px;
  overflow: hidden; white-space: nowrap;
}
/* THE GLOSS STILL GETS THE ROOM, BUT ONLY THE ROOM IT USES (Scott,
   2026-09-24: "give ample space to gloss"; refined 2026-09-26).
   `flex: 1 1 0` made the gloss claim the whole remainder EVEN WHEN
   EMPTY — and on a page of proper nouns most glosses are empty, so the
   space went to nothing while the Hebrew and the translit were crushed
   beside it. `flex: 1 1 auto` starts from the content: a gloss that has
   text still takes the remainder, a gloss that has none yields it. */
.explore-utext .search-row-translit {
  flex: 0 1 auto; min-width: 96px; max-width: 208px;
  overflow: hidden; text-overflow: ellipsis;
}
.explore-utext .search-row-gloss { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.explore-utext .search-row-pos { flex: 0 0 auto; }
/* the measure cells hold one to five characters — 60px was two digits
   of slack apiece, and there are four of them */
.explore-rrow.explore-mrow .explore-mcell { flex: 0 0 52px; }
.explore-mhead .explore-mcell { flex: 0 0 52px; }
/* the reader's token chip in the cell — inline, no verse-block gutters */
.explore-rrow.explore-mrow .search-row-hb .wb-profile-token { display: inline-block; }
/* the gloss may take a second line rather than an ellipsis at the
   first — the room is the point (Scott, 2026-09-24) */
.explore-utext { white-space: normal; }
.explore-utext .search-row-gloss {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25;
}
.explore-utext .search-row-translit, .explore-utext .search-row-pos { white-space: nowrap; }
/* the head wraps its bands as flex rows — the inherited row-gap stacked
   on each band's own top padding (Scott, 2026-09-24: "top margins …
   too big"); the bands space themselves */
.search-section-head.explore-shead { row-gap: 0; }
/* tighter bands — the lens rail's 6px, not the sort rail's 7px+gap */
.explore-shead .explore-searchbar, .explore-shead .explore-setbar,
.explore-shead .explore-filterbar, .explore-shead .explore-sortbar { padding-top: 4px; padding-bottom: 4px; }
.explore-shead-pager { padding-top: 4px; }
.search-section-head.explore-shead { padding-bottom: 4px; }
/* one LABEL COLUMN for the head's bands — search · set · filter · sort ·
   per page right-align on the same edge, the same gap after each
   (Scott, 2026-09-24) */
.explore-shead .explore-sortbar-label, .explore-shead .explore-pgsize-label {
  flex: 0 0 64px; min-width: 64px; text-align: right;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wb-ink-3); margin-inline-end: 6px;
}
.explore-shead .explore-pgsize { gap: 8px; }
.explore-shead .explore-searchbar .explore-search-band { flex: 1 1 0; min-width: 0; width: auto; }
/* the cursor stands right above the chips' left edge — no inset on the
   field's inline start (Scott, 2026-09-24) */
.explore-shead .search-input.explore-search-input { padding-inline-start: 0; }
/* VIEW · verses · words on the grain rail's left flank; the spine and
   help share the right flank (Scott, 2026-09-24) */
.explore-view-toggle { display: inline-flex; align-items: center; gap: 6px; }
.explore-view-label {
  font-family: var(--rd-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--wb-ink-3); margin-inline-end: 2px;
}
.explore-view-chip { font-size: 10px; padding: 2px 8px; border-radius: 3px; }
.explore-toplens-right { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.explore-toplens-right .explore-help-anchor { margin-left: 0; padding-right: 0; }
.explore-toplens-right .explore-spine { overflow: hidden; }
/* ── The left rail's grip (2026-09-24) — the right panel's chrome,
   mirrored: seam and handle on the rail's RIGHT edge; collapsed, the
   column narrows to the seam ── */
.rd-panel--left { border-left: none; border-right: 1px solid var(--rd-rule, var(--wb-rule)); }
.rd-panel--left .rd-panel-collapse { inset-inline-start: auto; inset-inline-end: -1px; }
.explore-filters.rd-panel { display: flex; flex-direction: column; }
.explore-filters.rd-panel .rd-panel-body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.explore-filters.rd-panel--collapsed { padding: 0; }
.explore-tab .explore-body:has(.explore-filters.rd-panel--collapsed) { grid-template-columns: 12px 1fr; }
/* the rail keeps its own ledger gutters — not the panel body's 16/18px */
.explore-filters.rd-panel .rd-panel-body { padding: 0; height: auto; overflow: hidden; }
/* collapsed: the body goes (the rail's own display rule outranked the
   shared chrome's), the column is the seam and its grip */
.explore-filters.rd-panel--collapsed .rd-panel-body { display: none; }
.explore-filters.rd-panel--collapsed { width: 12px; min-width: 0; overflow: visible; }
/* the WORD grain (2026-09-24): token instances — the verse ref before
   the word, the head keeps the column */
.explore-uref, .explore-mhead-ref {
  flex: 0 0 112px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--rd-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--wb-ink-3);
}
/* the left rail's grip: the rail is viewport-tall and does not scroll, so
   the shared sticky-at-50vh rail has nothing to stick to inside it — pin
   the handle at the panel's own midline on its right edge, above the rows
   (Scott, 2026-09-24: "get that gripper into the left side panel to match
   the right") */
.explore-filters.rd-panel--left { position: relative; overflow: visible; }
.explore-filters.rd-panel--left .rd-panel-collapse-rail {
  position: absolute; top: 50%; right: 0; left: auto; height: 0; z-index: 5;
}
.explore-filters.rd-panel--left .rd-panel-collapse {
  position: absolute; top: -22px; inset-inline-start: auto; inset-inline-end: -5px;
  color: var(--wb-ink-3);
}
.explore-filters.rd-panel--left .rd-panel-collapse:hover,
.explore-filters.rd-panel--left.rd-panel--collapsed .rd-panel-collapse { color: var(--wb-warm); }
.explore-filters.rd-panel--left .rd-panel-body { overflow: hidden; }
/* ── the reader's translation set under a verse row (2026-09-24) ──
   Same physical arrangement as the parallel reader: RTL languages on
   the left, LTR languages on the right, reading away from the gutter. */
.explore-vrow-transs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 18px;
  padding: 2px 0;
}
.explore-vrow-trans-col { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.explore-vrow-trans-col--rtl { grid-column: 1; direction: rtl; text-align: right; }
.explore-vrow-trans-col--ltr { grid-column: 2; direction: ltr; text-align: left; }
.explore-vrow-trans {
  width: 100%;
  display: grid;
  align-items: baseline;
  gap: 8px;
  direction: ltr;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--wb-ink-2);
}
/* Keep the language codes on the OUTER edges. The actual readings meet
   at the centre seam beneath their matching Hebrew/default columns. */
.explore-vrow-trans[dir="rtl"] { grid-template-columns: auto minmax(0, 1fr); }
.explore-vrow-trans[dir="ltr"] { grid-template-columns: minmax(0, 1fr) auto; }
.explore-vrow-trans[dir="rtl"] .explore-vrow-trans-src { grid-column: 1; }
.explore-vrow-trans[dir="rtl"] .explore-vrow-trans-text { grid-column: 2; direction: rtl; text-align: right; }
.explore-vrow-trans[dir="ltr"] .explore-vrow-trans-src { grid-column: 2; }
.explore-vrow-trans[dir="ltr"] .explore-vrow-trans-text { grid-column: 1; grid-row: 1; direction: ltr; text-align: left; }
.explore-vrow-trans-src { flex: 0 0 auto; font-family: var(--rd-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--wb-ink-3); }
.explore-vrow-trans-text { font-style: italic; min-width: 0; }
.explore-vrow-trans-text .pf-trans-text--ours { line-height: inherit; }
@media (max-width: 700px) {
  .explore-vrow-transs { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .explore-vrow-trans-col--rtl,
  .explore-vrow-trans-col--ltr { grid-column: 1; }
}
/* the reader's tray docks under the results — its own band */
.explore-results > .rd-lang-tray { flex: 0 0 auto; border-top: 1px solid var(--wb-rule); }

/* ── Mobile rail contract ─────────────────────────────────────
   Keep this at the physical end of the file. Desktop rail rules are
   intentionally appended late above, but must not reopen the filter body
   or preserve the 12px collapsed grid column on a phone. Mobile has one
   control for this job: the FILTERS disclosure strip. */
@media (max-width: 700px) {
  .explore-tab .explore-body,
  .explore-tab .explore-body:has(.explore-filters.rd-panel--collapsed) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .explore-filters.rd-panel,
  .explore-filters.rd-panel--collapsed {
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--wb-rule);
  }

  .explore-filters.rd-panel .rd-panel-collapse-rail {
    display: none;
  }

  .explore-filters.rd-panel .rd-panel-body,
  .explore-filters.rd-panel--collapsed .rd-panel-body {
    display: flex;
    min-width: 0;
    overflow: visible;
  }

  .explore-filters .explore-filters-body {
    display: none;
  }

  .explore-filters.explore-filters--open .explore-filters-body {
    display: flex;
    max-height: 55vh;
    overflow-y: auto;
    padding: 0 14px 16px;
  }

  .explore-results,
  .explore-results-wrap,
  .explore-results-scroll {
    min-width: 0;
  }
}