/* Station filter + live gauge picker on the analytics page.
   Markup is built by static/js/analytics_station_filter.js. */
.stf { margin-bottom: 1rem; }
.stf__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.stf__field { display: flex; flex-direction: column; }
/* An author `display` outranks the UA's [hidden]{display:none}, so without this
   `stateField.hidden = true` hides nothing and the gauge-only controls sit on
   every analytics page. The same trap is documented in map.css, folder_filter.css
   and main.css. */
.stf__field[hidden] { display: none; }
.stf__field--check {
  flex-direction: row;
  align-items: center;
  gap: .4rem;
  padding-bottom: .5rem;
}
.stf__label { font-weight: 600; font-size: .875rem; margin-bottom: .25rem; }
.stf__field--check .stf__label { margin-bottom: 0; font-weight: 400; }
.stf__input, .stf__select {
  padding: .5rem;
  border: 1px solid #d1d5db;
  border-radius: .375rem;
  background: #fff;
  color: inherit;
  min-width: 12rem;
}
.stf__status { font-size: .875rem; color: #6b7280; margin: .5rem 0 0; }
/* The sentence that stands where the "Reporting in the last 3 days" box would
   be for a catalogue that publishes no last-reading time. Same slot, same
   baseline, quieter: it is an explanation, not a control. `max-width` keeps a
   two-clause sentence from stretching the flex row across the page. */
.stf__cannot {
  font-size: .8125rem;
  color: #6b7280;
  margin: 0 0 .5rem;
  max-width: 24rem;
  align-self: flex-end;
}
.stf--adv .stf__cannot { max-width: 100%; }
.stf__results {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: .375rem;
}
.stf__result + .stf__result { border-top: 1px solid #f3f4f6; }
.stf__pick {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
  padding: .5rem .75rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.stf__pick:hover, .stf__pick:focus { background: #f3f4f6; }
.stf__pick-name { flex: 1 1 auto; }
.stf__pick-id { color: #6b7280; font-size: .8125rem; white-space: nowrap; }
.stf__badge {
  font-size: .75rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #e5e7eb;
  color: #4b5563;
  white-space: nowrap;
}
.stf__badge--live { background: #d1fae5; color: #065f46; }
/* THE PLACE HALF OF "FIND A SITE" (2026-09-06). Stations answer in the site
   list above; a city, a ZIP, a creek or a pasted coordinate pair answers in
   this group, under the strip, so nothing about the station results moves.
   Built by makePlaceSearch in analytics_station_filter.js. */
.stf__places { margin-top: .5rem; max-width: 32rem; }
.stf__places[hidden] { display: none; }
.stf__places-head {
  font-size: .8125rem;
  font-weight: 600;
  color: #4b5563;
  margin: 0 0 .25rem;
}
/* Attribution is a LICENCE CONDITION of the place data (OpenStreetMap via
   Nominatim) and it may not be buried: quiet, but always under the results and
   beside the chosen place. Same rule as the open map's own search panel. */
.stf__attrib { font-size: .75rem; color: #6b7280; margin: .25rem 0 0; }
/* The chosen place: what it is, how far around it to look, and the way out. */
.stf__chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0 0;
  padding: .4rem .6rem;
  font-size: .875rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: .375rem;
}
.stf__chip[hidden] { display: none; }
.stf__chip .stf__attrib { margin: 0; }
.stf__select--radius { min-width: 0; width: auto; padding: .25rem .4rem; }
.stf__chip-clear {
  background: none;
  border: 0;
  padding: 0;
  color: #1d4ed8;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
/* THE ADVANCED PANEL'S COLUMN IS ~200px. A place row is a name and a kind, and
   the shared `.stf__pick` lays them side by side with the kind on one line —
   which in that column wrapped "Winters, Yolo County, California" over four
   lines and pushed "Place · administrative" out of the panel (measured on the
   live page, 2026-09-06). Inside `.stf--adv` the two stack. */
.stf--adv .stf__places { max-width: 100%; }
.stf--adv .stf__pick { flex-direction: column; align-items: flex-start; gap: .15rem; }
.stf--adv .stf__pick-id { white-space: normal; }

body.dark-mode .stf__places-head { color: #d1d5db; }
body.dark-mode .stf__attrib { color: #9ca3af; }
body.dark-mode .stf__chip { background: #1e3a5f; border-color: #1e40af; }
body.dark-mode .stf__chip-clear { color: #93c5fd; }

.stf__plot { margin-top: 1rem; }
.stf__chart { width: 100%; min-height: 320px; }

/* The shell flips a body class rather than relying on the media query, so the
   dark rules follow it — same pattern as the other page stylesheets here. */
body.dark-mode .stf__input,
body.dark-mode .stf__select { background: #1f2937; border-color: #374151; }
body.dark-mode .stf__results { border-color: #374151; }
body.dark-mode .stf__result + .stf__result { border-top-color: #374151; }
body.dark-mode .stf__pick:hover, body.dark-mode .stf__pick:focus { background: #374151; }
body.dark-mode .stf__badge { background: #374151; color: #d1d5db; }
body.dark-mode .stf__badge--live { background: #064e3b; color: #a7f3d0; }
body.dark-mode .stf__cannot { color: #9ca3af; }

/* Hides the page's own sensor charts/stats/notes while a live gauge is on
   screen. A class with !important rather than [hidden], because these elements
   carry author display rules that would outrank the UA's [hidden] default. */
.stf-off { display: none !important; }

/* THE ADVANCED PAGE'S COLUMN IS NARROW. `min-width: 12rem` on the controls is
   right on the wide basic page and overflows the Creek Sites column here, where
   the whole strip is about 200px (operator, 2026-08-31: "some of the new ui/ux
   drop downs extend over too far"). Inside .stf--adv they stack and take the
   column's width instead of forcing it open. */
.stf--adv .stf__row { flex-direction: column; align-items: stretch; gap: .5rem; }
.stf--adv .stf__field { width: 100%; }
.stf--adv .stf__input,
.stf--adv .stf__select {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* And nothing in the strip may push the column wider than it is. */
.stf--adv { max-width: 100%; overflow-x: hidden; }

/* A PHONE IS A NARROW COLUMN TOO (2026-09-04). The `.stf--adv` treatment above
   was written for the advanced page's 200px sidebar and applies at every width;
   the BASIC page keeps `min-width: 12rem` and lets a <select> take its intrinsic
   width, which is as wide as its longest option. Measured on the deployed
   /analytics/ at 360x780: #stationFilterSource was 450px inside a 336px column
   and the page scrolled sideways by 130px — the whole of that page's overflow.
   /advanced-analytics/ measured 360/360 with the same component, so this is the
   same fix arriving at the second of the two pages that mount it rather than a
   third approach. */
@media (max-width: 640px) {
  .stf__row { flex-direction: column; align-items: stretch; gap: .5rem; }
  .stf__field { width: 100%; }
  .stf__input,
  .stf__select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .stf__cannot { max-width: 100%; }
  /* And nothing in the strip may push the page wider than the screen. */
  .stf { max-width: 100%; overflow-x: hidden; }
  /* The fixed dark-mode button (48px at right:20px) rides over the right
     edge of full-width result rows on a phone (sweep L3, 2026-09-08); keep
     the id column clear. In THIS block, not a second 640px block: the phone
     layout test reads the last such block in the file. */
  .stf__stations, .stf__places { padding-right: 4.5rem; }
}

/* The advanced panel's Source box takes several at once (2026-09-02), so it is
   a list rather than a dropdown and needs a height that shows more than one
   row without pushing the controls beside it out of line. */
.stf__select--multi {
  min-height: 5.2em;
  padding: 2px 4px;
}

/* THE STATION GROUPS UNDER THE FIND-A-SITE BOX (2026-09-08) — the open
   map's grouped answer, on this page: one heading per catalogue in the
   map's order, six rows each, and Places (the box that follows this one)
   last. Its OWN class names, deliberately: the places box is found by
   `.stf__places`, and a station group wearing that class was found first. */
.stf__stations { margin-top: .5rem; max-width: 32rem; }
.stf__stations[hidden] { display: none; }
.stf__stations-head {
  font-size: .8125rem;
  font-weight: 600;
  color: #4b5563;
  margin: .5rem 0 .25rem;
}
.stf__stations-head:first-child { margin-top: 0; }
.stf__stations-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* NO max-height: six rows is already the cap (renderGroups slices to
     FAN_GROUP_MAX, the map's SEARCH_SOURCE_MAX) and the "+N more" row says
     what was cut. A 14rem box under six ~2.6rem rows sliced the sixth
     mid-glyph behind a nested scrollbar (sweep M1, 2026-09-08). */
  border: 1px solid #e5e7eb;
  border-radius: .375rem;
}
/* The finder host is `display: contents` (pages/analytics.css), so these
   two groups are flex ITEMS of the finder row: without a full-width basis
   the Places group sat beside the last station group instead of after it
   (sweep L4). Full rows, in DOM order — stations, then Places last. */
.an-finder .stf__stations,
.an-finder .stf__places {
  flex-basis: 100%;
  /* …and the 32rem cap both groups carry (above) must yield here, or two
     512px items still fit one wrapped row side by side (re-check L4,
     2026-09-08). Full width of the finder; the rows are single lines. */
  max-width: 100%;
}

.stf__stations-row + .stf__stations-row { border-top: 1px solid #f3f4f6; }
.stf__stations-pick {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
  padding: .5rem .75rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.stf__stations-pick:hover, .stf__stations-pick:focus { background: #f3f4f6; }
.stf__stations-more { font-size: .75rem; color: #6b7280; margin: .25rem 0 0; }
.stf--adv .stf__stations { max-width: 100%; }

/* The Places group's own "+N more" row (sweep M2) — the map's moreRow, same
   words, same quiet style as the station groups' row above. */
.stf__places-more { font-size: .75rem; color: #6b7280; margin: .25rem 0 0; }