/* Page styles for base/templates/base/analytics.html.
   Moved out of the template unchanged; linked from the same point in the
   page, so these rules still resolve in exactly the order they used to. */

#plots {
  width: 100%;
  max-width: 100%;
}
#plots > div {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}
#plots > div[id^="plot_"] {
  width: 100%;
  max-width: 100%;
  position: relative;
}
.plotly {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.plotly .main-svg {
  width: 100% !important;
  max-width: 100% !important;
}

/* "Advanced Analytics" call-to-action — the prominent, on-brand step up from
   the basic charts (replaces the old floating .corner-button). */
.adv-analytics-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-radius: var(--r-md);
  background: var(--accent); color: #fff; text-decoration: none;
  box-shadow: 0 2px 8px rgba(40, 135, 177, .35);
  border: 1px solid rgba(255, 255, 255, .18);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.adv-analytics-cta:hover {
  background: var(--accent); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(40, 135, 177, .45);
}
.adv-analytics-cta:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.adv-analytics-cta__icon { width: 22px; height: 22px; flex: none; }
.adv-analytics-cta__text { display: flex; flex-direction: column; line-height: 1.15; }
.adv-analytics-cta__title { font-weight: 700; font-size: .98rem; }
.adv-analytics-cta__sub { font-size: .72rem; opacity: .85; }
.adv-analytics-cta__arrow { font-size: 1.2rem; margin-left: 2px; transition: transform .12s ease; }
.adv-analytics-cta:hover .adv-analytics-cta__arrow { transform: translateX(3px); }
@media (max-width: 640px) {
  .adv-analytics-cta { width: 100%; justify-content: center; }
  .adv-analytics-cta__sub { display: none; }
}


/* A chart with no readings is HIDDEN rather than drawn as an empty axis.
   Explicit rather than leaning on the UA's [hidden]{display:none}: the plot
   containers carry author rules of their own, and an author `display` beats
   the UA's attribute rule — the trap that has already kept "hidden" controls
   on screen elsewhere in this codebase. */
#plots > div[id^="plot_"][hidden] { display: none !important; }

/* The line naming what had no readings, so a hidden chart is accounted for
   rather than just missing. */
.plots-empty-note {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ink-3, #6b7280);
}


/* --- The finder toolbar -----------------------------------------------------

   Always on screen, above the range bar, and never collapsed (operator,
   2026-09-06: "these always have to be visible or else the page is not obvious
   to use"). It carries what chooses WHAT is drawn: the saved-page picker, the
   strip analytics_station_filter.js builds into #stationFilter (Find a site,
   Source, State, County, the recency box), the Site box and Load Data. Drawn
   as the page's one card with a brand-blue leading edge, because it is the
   first thing to use and the charts under it are the answer to it.

   `display: contents` on the script's host and on the row it builds lifts its
   fields into THIS flex row, so search, Source, State, Site and the button sit
   on one line at 1440px and wrap as one set; under 640px the station filter
   stylesheet's own phone rules already make every .stf__field full-width, and
   the two fields added here follow the same rule below. The script's status
   sentence ("12 sites", "no station matches") is ordered last and given the
   whole width so it reads as the row's caption rather than a ninth field. */
.an-finder {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-blue-deep);
  border-radius: var(--r-md);
}
body.dark-mode .an-finder { background: var(--surface-2); }
.an-finder__hint {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-1); color: var(--ink-2);
}
.an-finder__hint strong { color: var(--ink); font-weight: var(--w-med); }
.an-finder__hint-icon { width: 18px; height: 18px; flex: none; color: var(--brand-blue-deep); }
.an-finder .page-switcher { margin: 0; }
.an-finder__row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  max-width: 100%;
}
.an-finder .stf,
.an-finder .stf__row { display: contents; }
/* One height for every control on the line, so the button, the search box and
   the selects share a baseline instead of the 39/37/35px they measured apart. */
.an-finder .stf__input,
.an-finder .stf__select,
.an-finder__load {
  height: 2.375rem;
  padding-top: 0; padding-bottom: 0;
  box-sizing: border-box;
}
.an-finder .stf__status { order: 10; flex-basis: 100%; margin: 0; }
/* A <select> is as wide as its longest option: Source measured 450px on the
   deployed page, which alone pushed the Site box onto a second line as soon
   as State came up. Capped, the whole set — search, Source, State, the
   recency box, Site, Load Data — fits one 1336px row. The Site box lists
   names as long as "Putah Creek nr Winters · 11454210 · reporting", so it is
   allowed more than the others, but not the row. */
.an-finder .stf__select { max-width: 18rem; }
.an-finder__site .stf__select { min-width: 16rem; max-width: 26rem; }
.an-finder__load {
  padding-left: var(--space-4); padding-right: var(--space-4);
  border: 1px solid var(--brand-blue-deep);
  border-radius: var(--r-sm);
  background: var(--brand-blue-deep);
  color: #fff;
  font-size: var(--fs-1); font-weight: var(--w-med);
  cursor: pointer;
  align-self: flex-end;
  transition: box-shadow .12s ease, transform .12s ease;
}
.an-finder__load:hover { box-shadow: 0 4px 12px rgba(40, 135, 177, .4); transform: translateY(-1px); }
.an-finder__load:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.an-finder__load:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
@media (max-width: 640px) {
  .an-finder { padding: var(--space-3); }
  .an-finder__row { gap: var(--space-2); }
  .an-finder__site, .an-finder__load { width: 100%; }
  .an-finder .stf__select,
  .an-finder__site .stf__select { min-width: 0; max-width: 100%; }
}

/* --- The range bar ----------------------------------------------------------

   What this replaced: a 1,255px stack of form above the fold, with the first
   chart starting at y=863 on a 1440px screen. The page arrives already knowing
   which plot type and which range it is drawing, so this bar STATES that in
   one row and discloses the drawing options only when the reader wants
   something else. The site-finding controls were in the disclosure too until
   2026-09-06; they now stand in the toolbar above. See the comments in
   base/templates/base/analytics.html.

   One row, --ctl-h tall, on --surface-2 rather than a card: it is page
   furniture — the strip that says what you are looking at — and drawing it as
   another bordered white card would make it a fifth object competing with the
   charts it labels. */
.an-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-1);
}
.an-bar__ranges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.an-bar__label {
  font-size: var(--fs-0); font-weight: var(--w-med); color: var(--ink-3);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  margin-right: var(--space-1);
}

/* The six quick ranges. They were `bg-gray-200` Tailwind chips whose only hover
   state turned them blue; the pressed state that [aria-pressed="true"] carries
   is what actually matters here, so the rest becomes a --ctl-h-sm control in
   the app's own ink. */
.an-bar .time-range {
  height: var(--ctl-h-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-1);
  font-weight: var(--w-med);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.an-bar .time-range:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.an-bar .time-range[aria-pressed="true"] {
  background: var(--brand-blue-deep); border-color: var(--brand-blue-deep); color: #fff;
}
.an-bar .time-range:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

/* The drawing options, always on show (2026-09-25; they were a collapsed
   disclosure, and the date boxes behind it went unfound). A full row under the
   range buttons: its heading and the state sentence, then the panel. */
.an-controls { flex-basis: 100%; position: relative; }
.an-controls__summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3);
  min-height: var(--ctl-h-sm);
}
/* The state sentence — the thing that makes the collapsed bar worth collapsing.
   It is the only place the current site, plot type, dates and zone are written
   in words, so it takes the reading colour rather than the caption grey. */
.an-controls__state { color: var(--ink-2); }
.an-controls__state:empty { display: none; }
.an-controls__toggle {
  margin: 0; font-size: var(--fs-1); color: var(--ink); font-weight: var(--w-med);
  white-space: nowrap;
}

/* The panel: plot type (with its candlestick / histogram options), dates,
   timezone, and the rain and corrected-data overlays. */
.an-controls__panel {
  margin-top: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: var(--space-5);
}
body.dark-mode .an-controls__panel { background: var(--surface-2); }

/* Below the card breakpoint the bar stacks; the options row is already full
   width, so only the spacing tightens. */
@media (max-width: 720px) {
  .an-bar { gap: var(--space-2); }
  .an-controls__panel { padding: var(--space-4); }
}

/* Download CSV sits beside Load Data in the finder again (operator,
   2026-09-09): same height and baseline as its neighbour, full width on a
   phone like the rest of the row. Its look stays the secondary one below. */
.an-finder__actions { display: flex; gap: var(--space-2); align-self: flex-end; flex-wrap: nowrap; }
/* Scoped under the group: `.an-btn-secondary` sets its own height later in
   this file at the same specificity, and a bare `.an-finder__download` lost
   to it (the button sat 4px shorter than Load Data, 2026-09-09). */
.an-finder__actions .an-finder__download { height: 2.375rem; white-space: nowrap; }
@media (max-width: 640px) {
  .an-finder__actions { width: 100%; }
  .an-finder__actions .an-finder__load,
  .an-finder__actions .an-finder__download { flex: 1 1 0; width: auto; justify-content: center; }
}
.an-btn-secondary {
  display: inline-flex; align-items: center;
  height: var(--ctl-h); padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: none; color: var(--ink-2);
  font-size: var(--fs-1); font-weight: var(--w-med); cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.an-btn-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.an-btn-secondary:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

/* --- The chart cards --------------------------------------------------------

   Five bordered, shadowed white cards stacked vertically make five equal
   objects and no hierarchy; a chart with air beneath it is already a section.
   The ground stays --surface (Plotly draws its own paper on it), the border,
   radius and shadow go. Replaces the `rounded-md shadow bg-white p-4` the
   container was built with in analytics.js. */
.plot-card {
  background: var(--surface);
  padding: var(--space-3) 0 var(--space-6);
}
body.dark-mode .plot-card { background: var(--surface-2); }