/* ===========================================================================
   ntd-explorer.css -- the button row, summary line, and bars of chapter 05's
   Puget Sound transit explorer (assets/js/ntd-explorer.js).

   The container carries `dx cx nx`: the buttons come from the .dx-tab rules
   in dist-explorer.css, the frame, text, and axes from the .cx rules in
   calc-explorer.css. Defined here: the row that holds the three button groups
   (measure, year, agency; wrapping in a narrow column), the one-line summary
   above the bars, and the bars and labels. The buttons stay UW purple,
   like every control in the book; the bars take the chapter's palette
   preset, set by the script, and the agencies not selected fade.

   Nothing here is needed by the PDF build; the LaTeX format never loads css.
   =========================================================================== */

.nx .nx-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-bottom: 0.45rem;
}
.nx .nx-row .dx-tabs { margin-bottom: 0; }

.nx .nx-readout {
  min-height: 1.4em;
  margin: 0 0 0.3rem;
  font-size: 0.9em;
  color: #000;
}

/* fallback only: ntd-explorer.js sets the bar colors from the chapter's palette */
.nx svg .nx-bar      { fill: #0072b2; }
.nx svg .nx-bar.nx-dim { fill: #c6dfee; }
.nx svg .nx-ag       { font-size: 10px; fill: #666666; }
.nx svg .nx-se       { font-size: 11px; }
.nx svg .nx-val      { font-size: 10.5px; }
.nx svg text.nx-dimt { fill: #bdbdbd; }

/* ---- the table of actions (tbl-vis-actions, assets/js/action-picker.js) ----
   Every cell with a bold name is a button; the picked one in each column
   takes a very light grey. The !important beats Bootstrap's table rules,
   which paint cells through high-specificity selectors. */
.ax-table .ax-cell { cursor: pointer; }
.ax-table .ax-cell:hover { background-color: #f8f8f8 !important; }
.ax-table .ax-cell.ax-on { background-color: #efefef !important; }
.ax-table .ax-cell:focus-visible { outline: 2px solid #c9b6e6; outline-offset: -2px; }
.ax-readout { margin: 0.4rem 0 0; min-height: 3.2em; color: #000; }

/* ---- the labelled rent chart (fig-vis-elements, assets/js/elements-explorer.js) ----
   A transparent svg over the image, the same size; its .el-hit rects catch
   the pointer and the element's .el-show rects are outlined in UW purple. */
.el { margin: 0.6rem 0; text-align: left; }   /* the figure environment centres its content */
.el .el-readout { min-height: 2.8em; margin: 0.4rem 0 0; font-size: 0.9em; color: #000; }   /* below the chart, so it never moves; two lines kept, so the text after it holds still too */
.el .el-stage { position: relative; }
.el .el-stage img { display: block; width: 100%; height: auto; margin: 0; }
.el .el-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.el svg rect { fill: none; stroke: none; }
.el svg rect.el-hit { fill: transparent; pointer-events: all; cursor: help; }
.el svg rect:not(.el-hit) { pointer-events: none; }
.el svg g { outline: none; }
.el svg g.el-on rect.el-show {
  fill: rgba(50, 0, 110, 0.06);
  stroke: #32006e; stroke-width: 2.5; vector-effect: non-scaling-stroke;
}