/* The gopher sites' shared listings page (gopher/listings.html, js/table/table.js): its filter panel
   (gopher/filters.html, js/table/panel.js) and what sits above the table, after LabGopher's
   (app/static/css/labgopher.css): loaded by the listings pages after the site's own sheet. The table's
   own rules are in table.css, which every site's listings page loads (gopher/layout.html). Plain and
   data-dense: no pills, chips, accent bars, gradients, glow or tiny uppercase labels; the one solid 2px
   focus outline (--lg-focus-color, shell.css). Built on Bootstrap's variables, so both color modes work.

   #filters-panel is .offcanvas-lg: a drawer below lg, inline above the table from lg up. */

:root {
  --lg-handle: 1.5rem;                       /* slider handle diameter: a 24px target */
}
@media (pointer: coarse) {
  :root { --lg-handle: 1.75rem; }            /* finger-sized handles */
}

/* ---- The panel -------------------------------------------------------------------------------- */

#filters-panel { --bs-offcanvas-width: 22rem; }
.lg-filters { display: flex; flex-direction: column; gap: 1rem; width: 100%; font-size: .875rem; }

/* Two plain blocks with no headings, as LabGopher's panel: the sliders, then the choices. Filters
   are controls, not listing content, so they carry no shading. */
.lg-filter-block { min-width: 0; }

.lg-fields { display: flex; flex-direction: column; gap: 1rem; }
.lg-field { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.lg-field[hidden], .lg-filter-block[hidden] { display: none; }
.lg-label { display: inline-block; margin-bottom: .25rem; font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); }
/* A lone toggle needs no label line in the drawer (its button names it); from lg up the empty line
   keeps it level with its labeled neighbors. */
.lg-label-spacer { display: none; }
.lg-field-toggle .btn { align-self: flex-start; }

/* Toggle groups fill the drawer's width; tighter padding so five speeds fit on a 360px phone. */
.lg-field .btn-group > .btn { flex: 1 1 0; --bs-btn-padding-x: .375rem; white-space: nowrap; }
/* Two pressed toggles side by side would read as one solid button: draw a divider. */
.lg-field .btn-group > .btn.active + .btn.active:not(:focus-visible) { box-shadow: inset 1px 0 0 var(--bs-body-bg); }

/* Toggles and #filters-open: Bootstrap's outline-primary text is only ~3:1 on the dark background,
   so they use the theme's primary text-emphasis color (AA in both modes). Hover is a light tint,
   not the pressed fill, so a toggle just switched off with the pointer on it looks off. */
.lg-filters .btn-outline-primary,
#filters-open { --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-bg: var(--bs-body-bg); }
.lg-filters .btn-outline-primary {
  --bs-btn-hover-color: var(--bs-primary-text-emphasis);
  --bs-btn-hover-bg: var(--bs-primary-bg-subtle);
  --bs-btn-hover-border-color: var(--bs-primary);
}
@media (hover: none) {
  .lg-filters .btn-outline-primary {
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
  }
}

/* Secondary actions (Reset, Share): body-colored text, unlike btn-outline-secondary (~3:1). */
.lg-btn-quiet {
  --bs-btn-color: var(--bs-body-color);             --bs-btn-bg: var(--bs-body-bg);
  --bs-btn-border-color: var(--bs-border-color);    --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-emphasis-color);   --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-active-color: var(--bs-emphasis-color);  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-border-color: var(--bs-border-color);
}
.lg-btn-quiet:focus-visible { outline: 2px solid var(--lg-focus-color); outline-offset: 2px; }

/* Reset filters and Share these filters side by side, then what the share did ("Link copied."); where the browser
   won't copy, the link below them, selected, on its own line. */
.lg-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.lg-share-status { color: var(--bs-secondary-color); font-size: .8125rem; }
.lg-share-url { flex: 1 1 100%; max-width: 32rem; }
.lg-share-url[hidden] { display: none; }

/* ---- Sliders ----------------------------------------------------------------------------------- */

.lg-slider-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 .5rem; }
.lg-slider-head .lg-label { line-height: 1.3125rem; }
.lg-slider-values { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Every slider's values below its label where one slider's wouldn't fit beside it (panel.js
   fitSliderHeads): all on one line or all below, never a mix. */
.lg-sliders-stacked .lg-slider-head { flex-direction: column; align-items: flex-start; }

/* noUiSlider restyle (LabGopher's): thin track, round handles, Bootstrap colors. One class more
   specific than noUiSlider's own, so no !important. */
.lg-slider { margin: .625rem calc(var(--lg-handle) / 2) .5rem; }
.lg-slider.noUi-target {
  height: .375rem;
  background: var(--bs-secondary-bg);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--bs-border-color);
}
.lg-slider .noUi-connects { border-radius: 999px; }
.lg-slider .noUi-connect { background: var(--bs-primary); }
.lg-slider .noUi-handle {
  top: calc((.375rem - var(--lg-handle)) / 2);
  right: calc(var(--lg-handle) / -2);
  width: var(--lg-handle);
  height: var(--lg-handle);
  background: var(--bs-body-bg);
  border: 2px solid var(--bs-primary);
  border-radius: 50%;
  box-shadow: none;
  cursor: grab;
}
.lg-slider .noUi-handle::before,
.lg-slider .noUi-handle::after { display: none; }
.lg-slider .noUi-handle.noUi-active { cursor: grabbing; }
.lg-slider .noUi-handle.noUi-active,
.lg-slider .noUi-handle:focus-visible { outline: 2px solid var(--lg-focus-color); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .lg-slider .noUi-origin,
  .lg-slider .noUi-connect { transition: none; }   /* noUiSlider animates taps on the track */
}

/* ---- The drawer's footer (below lg) ----------------------------------------------------------- */

/* The count ("Show 29 listings") and why none match stay in view at the bottom of the drawer while
   the filters above them scroll, below a rule. */
.lg-drawer-footer {
  flex-shrink: 0;
  padding: .75rem var(--bs-offcanvas-padding-x) calc(.75rem + env(safe-area-inset-bottom, 0px));
  border-top: var(--bs-border-width) solid var(--bs-border-color);
}
.lg-drawer-status { margin: 0; font-size: .875rem; }
.lg-drawer-status:not(:empty) { margin-bottom: .625rem; }
/* A phone held sideways: a tighter footer, so the filters keep most of the drawer. */
@media (max-height: 30rem) {
  .lg-drawer-footer { padding-block: .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .lg-drawer-status { font-size: .8125rem; line-height: 1.35; }
  .lg-drawer-status:not(:empty) { margin-bottom: .375rem; }
  .lg-drawer-footer .btn { --bs-btn-padding-y: .25rem; }
}

/* ---- From lg up: inline above the table -------------------------------------------------------- */

@media (min-width: 992px) {
  /* The sliders' block above the choices', .75rem apart; each block's fields in a wrapping row. */
  .lg-filters {
    gap: .75rem;
    margin-bottom: .75rem;
    padding: .625rem .75rem .75rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
  }
  .lg-fields { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1.25rem; }
  .lg-field .btn-group > .btn { flex: 0 0 auto; --bs-btn-padding-x: .5rem; }
  .lg-field-range { flex: 0 1 17rem; min-width: 13rem; }
  .lg-label-spacer { display: inline-block; }
}

/* A group's plain note above its fields (filters.html `note`). */
.lg-filter-note { margin: 0 0 .5rem; }

/* ==== Above the listings table (gopher/listings.html; the table itself: table.css) ============== */

.lg-heading-note { font-size: .875rem; font-weight: 400; }
/* The head's lines, in the design language's order: the stale warning, the status line, the credit line (muted), the
   paid-link line (body color). The views are in the navbar menus, not here. */
.lg-page-head { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .5rem; }
.lg-page-head > p { margin: 0; }

.lg-head-actions { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.lg-head-actions .form-select { width: auto; max-width: 15rem; }
.lg-table-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem 1rem; margin-bottom: .25rem; }
.lg-table-status p { margin: 0; }
#listing-count:focus { outline: none; }      /* focused by "Reset filters" in the empty table */
#listing-count:focus-visible { outline: 2px solid var(--lg-focus-color); outline-offset: 2px; }

/* A view with no listings at all: the filters and the count would do nothing. */
.lg-no-data #filters-panel,
.lg-no-data .lg-head-actions,
.lg-no-data .lg-table-status { display: none; }