/* Figure: a contrastive pair applied to the whole map.
   Behaviour lives in static/js/steer-landscape.js; markup is
   <d-figure id="steer-landscape" class="l-page"> in src/index.html.
   The tab buttons reuse .fig-tab / .fig-tab-strip from css/figure-tabs.css.
   The plot is a white panel in either theme; the chrome follows the page. */
.sl {
  --sl-muted: var(--vx-muted, #6b6a63);
  --sl-rule: var(--vx-rule, #d8d7cf);
  margin: 1rem 0 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  font-size: 12px;
}
/* the dataset switch (data-datasets) sits above each dataset's own pair tabs */
.sl-datasets {
  margin-bottom: 4px;
}
/* One page-wide plot; d3-zoom takes the wheel and the drag, so the cursor says so. */
.sl-map {
  position: relative;
  margin-top: 6px;
  background: var(--vx-panel, #fff);
  border: 1px solid var(--sl-rule);
  border-radius: 3px;
  overflow: hidden;
}
.sl-map canvas.sl-plot {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
}
.sl-map canvas.sl-plot:active {
  cursor: grabbing;
}
.sl-reset {
  font: inherit;
  line-height: 1;
  padding: 6px 10px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--sl-rule);
  border-radius: 4px;
  cursor: pointer;
}
.sl-reset:hover { border-color: var(--vx-active-outline, var(--sl-muted)); }

.sl-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.sl-slider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  color: var(--sl-muted);
}
.sl-slider input {
  flex: 1;
}
.sl-value {
  min-width: 5.5em;
  font-variant-numeric: tabular-nums;
}
.sl-play {
  font: inherit;
  line-height: 1;
  padding: 6px 12px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--sl-rule);
  border-radius: 4px;
  cursor: pointer;
}
.sl-play:hover { border-color: var(--sl-muted); }
.sl-play.is-on {
  color: var(--vx-active-ink, #16160f);
  background: var(--vx-active-bg, #ffa69e);
  border-color: var(--vx-active-border, #da3b2d);
}

/* The hovered tile's preview, over the map's top-right corner, with the alpha slider under it.
   A panel of its own over the tiles, so it carries the panel's backing and a rule. */
.sl-preview {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  padding: 6px;
  box-sizing: content-box;
  background: var(--vx-panel, #fff);
  color: var(--vx-panel-ink, #16160f);
  border: 1px solid var(--vx-panel-rule, #d8d7cf);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.sl-preview-img {
  display: block;
  border-radius: 2px;
}
/* the slider runs the card's full width, straight under the picture it steers */
.sl-preview .sl-alpha {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 6px 0 0;
}
.sl-preview .sl-controls {
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
  color: var(--vx-panel-muted, #6b6a63);
  font-variant-numeric: tabular-nums;
}
.sl-preview .sl-slider {
  flex: 1;
  min-width: 0;
  color: inherit;
}
.sl-preview .sl-value {
  min-width: 0;
  color: var(--vx-panel-ink, #16160f);
}
.sl-preview .sl-play {
  padding: 4px 7px;
}
.sl-preview .sl-play:not(.is-on) {
  border-color: var(--vx-panel-rule, #d8d7cf);
}
.sl-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.sl-note {
  min-height: 1em;
  color: var(--sl-muted);
}