/* 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;
  line-height: 1.8;
  /* 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; the global chip
   grammar (verse-bands.css) applies — only sizing is local. */
.explore-rrow.explore-vrow .explore-vrow-hb--live {
  /* verse-block's .pf-verse-hb sizes itself via --sv-hb-size
     (default 36px — the profile hero scale). The row wants
     halfway between the reader's 30px Hebrew and the row's 13px
     English (Scott, 2026-09-13); the word gap scales with it.
     Everything else keeps verse-block's own rhythm. */
  --sv-hb-size: 21px;
  /* the spacing knobs are ABSOLUTE px tuned for the 36px hero —
     scale them with the type or the words float apart at 21px
     (Scott, 2026-09-13: "spacing … same as when it was large") */
  --sv-word-gap: 5px;
  --sv-cluster-pad: 0;
  cursor: default;
}
.explore-vrow-hb--live .wb-profile-token { padding: 1px 2px; }
.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) ── */
.explore-vrow-transs { grid-column: 1 / -1; flex: 1 0 100%; display: flex; flex-direction: column; gap: 2px; padding: 2px 0 2px 0; }
.explore-vrow-trans { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--wb-ink-2); }
.explore-vrow-trans[dir="rtl"] { flex-direction: row-reverse; text-align: right; }
.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; }
/* 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); }