/* Charts and maps: the text bench (src/text/text.css) with a picture for a
   result. Loaded only on /chart-tools/ and /map-tools/ pages. */

/* The same two-column page as the text tools: Browse, then the bench. */
body:is([data-scope="chart"], [data-scope="map"]) main { grid-template-columns: 232px minmax(0, 1fr); align-items: stretch; }
body:is([data-scope="chart"], [data-scope="map"]) main > .sidenav { align-self: start; }
@media (max-width: 1200px) { body:is([data-scope="chart"], [data-scope="map"]) main { grid-template-columns: 208px minmax(0, 1fr); } }
@media (max-width: 860px) { body:is([data-scope="chart"], [data-scope="map"]) main { grid-template-columns: 1fr; } }

body[data-scope="chart"] .tb-dot { background: var(--kind-chart); box-shadow: 0 0 0 4px var(--kind-chart-soft); }
body[data-scope="map"] .tb-dot { background: var(--kind-map); box-shadow: 0 0 0 4px var(--kind-map-soft); }

/* The data is narrow, the picture is wide. */
.tb[data-layout="side"] .tb-panes:has(.tb-in) { grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.6fr); }
.tb[data-layout="stack-map"] .tb-panes:has(.tb-in) { grid-template-columns: minmax(220px, 0.5fr) minmax(0, 2fr); }
@media (max-width: 1000px) {
  .tb[data-layout="side"] .tb-panes:has(.tb-in),
  .tb[data-layout="stack-map"] .tb-panes:has(.tb-in) { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the picture comes first: it is what the page is for. */
  body:is([data-scope="chart"], [data-scope="map"]) .tb-out { order: -1; }
}

.viz-stage { border-radius: 10px; background:
  repeating-conic-gradient(#f2efe8 0% 25%, #fbf9f4 0% 50%) 0 0 / 16px 16px; overflow: hidden; }
.viz-stage svg { display: block; width: 100%; height: auto; }
body:is([data-scope="chart"], [data-scope="map"]) .tb-custom-out { min-height: 0; max-height: none; }
body:is([data-scope="chart"], [data-scope="map"]) .tb-text { min-height: 240px; }

/* Clickable maps: a hand over places, and a lift on hover. */
.pm-clickable { cursor: crosshair; }
.pm-clickable .pm-area { cursor: pointer; transition: filter .12s; }
.pm-clickable .pm-area:hover { filter: brightness(0.9) saturate(1.15); }
.pm-pin { cursor: default; }

/* A bench with no input box (blank maps) gives the whole width to the map. */
.tb-panes:not(:has(.tb-in)) .viz-stage { max-width: 1280px; margin-inline: auto; }