/* "Kde a co měříme" (R-31) - the screen's styles (docs/UI_UX.md §2.5), moved here from the gallery's
   mockup by build step 6e with `git mv`. Tokens only (frontend/tokens.css); no token added. */
.page--where { container: col / inline-size; }
@container zl (min-width: 900px) {
  .page--where { grid-template-columns: minmax(0, 720px); justify-content: center; }
}
.where-lede { margin-block-start: 0; }

/* the map and its card: under the map on phones, beside it from 680 px of column */
.where-explore { display: grid; gap: var(--space-4); align-items: start; }
@container col (min-width: 680px) { .where-explore { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.where-figure { gap: var(--space-2); }
/* the border is the box's, not the drawing's: the pins' percentages then measure the drawing itself */
.where-mapbox { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: clip; container: where-map / inline-size; }
.where-mapbox .drawing { max-inline-size: none; background: var(--color-surface); }
/* stroke widths in px whatever the frame's zoom: the frame is about 2.9 px per unit on a phone */
.where-line { vector-effect: non-scaling-stroke; }
.where-map .jf-catchment { stroke-width: 1.2px; }
.where-map .jf-stream { stroke-width: 2.5px; }
.where-map .where-stream--on { stroke: var(--color-water-deep); stroke-width: 5px; }
.where-stream-label { font-size: 4.2px; font-style: italic; fill: var(--color-water-text); paint-order: stroke; stroke: var(--color-surface); stroke-width: 1.2px; stroke-linejoin: round; }
.where-leader { stroke: var(--color-text-2); stroke-width: 1.5px; }
.where-true { fill: var(--color-water-deep); }
.where-frame { fill: none; stroke: var(--color-text); stroke-width: 1.5px; }
.where-dot { fill: var(--color-water-deep); }
/* the reservoirs' water (ZABAGED 'Vodní plocha'), under the streams; the water hue, never a status colour */
.where-water { fill: var(--color-water); fill-opacity: 0.55; stroke: var(--color-water-deep); stroke-width: 1px; }

/* a pin: a native button, a 44 px circle centred on its place, the name beside it (UI_UX §2.5) */
.pin { position: absolute; inline-size: 44px; block-size: 44px; margin-inline-start: -22px; margin-block-start: -22px; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text); font: inherit; cursor: pointer; display: grid; place-items: center; }
.pin-disc { inline-size: 26px; block-size: 26px; display: grid; place-items: center; background: var(--color-surface); border: 2px solid var(--color-water-deep); border-radius: var(--radius-full); transition: background-color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out; }
.pin--dam .pin-disc { border-radius: var(--radius-sm); }
.pin-name { position: absolute; inset-block-start: 50%; translate: 0 -50%; inset-inline-start: calc(100% - 8px); white-space: nowrap; font-size: var(--text-sm); font-weight: var(--weight-strong); line-height: 1.2; padding: 1px 4px; border-radius: var(--radius-sm); background: var(--color-surface); }
.pin--left .pin-name { inset-inline-start: auto; inset-inline-end: calc(100% - 8px); }
/* a name moved off the river: up or down by half a line beside its pin, or centred above or below it;
   which one each place takes is where.js SIDE, chosen so no name covers a stream or the water (owner) */
.pin-disc { position: relative; }   /* painted over a dam's tie, which is positioned */
.pin--up .pin-name { translate: 0 calc(-50% - 12px); }
.pin--down .pin-name { translate: 0 calc(-50% + 12px); }
.pin--above .pin-name, .pin--below .pin-name { inset-inline-start: 50%; inset-inline-end: auto; }
.pin--above .pin-name { inset-block-start: auto; inset-block-end: calc(100% - 8px); translate: -50% 0; }
.pin--below .pin-name { inset-block-start: calc(100% - 8px); translate: -50% 0; }
/* a dam's name, off the river at a measured offset from the pin's centre in drawing units (where.js NAME_AT, as
   cqi of the map box, the query container above, so it scales with the drawing; set through the
   CSSOM), and the short tie from the pin to it - the leader line's ink and width, under the disc and the tag */
.pin--off .pin-name { inset-inline-start: 50%; inset-inline-end: auto; translate: calc(-50% + var(--name-dx)) calc(-50% + var(--name-dy)); }
.pin-tie { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: var(--tie-len); block-size: 1.5px; margin-block-start: -0.75px; background: var(--color-text-2); transform-origin: 0 50%; rotate: var(--tie-turn); pointer-events: none; }
.pin:hover .pin-disc { background: var(--color-sunk); }
.pin:active .pin-disc { border-color: var(--color-text-2); }
.pin:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.pin[aria-pressed="true"] .pin-disc { border-width: 3px; border-color: var(--color-text); background: var(--color-sunk); }
.pin[aria-pressed="true"] .pin-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pin-disc { transition: none; } }

.where-foot { display: flex; align-items: center; gap: var(--space-3); }
.where-inset { inline-size: 96px; block-size: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.where-inset .jf-catchment { stroke-width: 1px; }
.where-inset .jf-stream { stroke-width: 1px; }

.where-card { scroll-margin-block-start: var(--space-4); }
.where-card .card-title:focus { outline: none; }
.where-card .card-title:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.where-facts { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.where-facts dt { color: var(--color-text-2); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.where-facts dd { margin: 0 0 var(--space-2); }
.where-decides { font-size: var(--text-sm); font-weight: var(--weight-strong); }
.where-more { font-size: var(--text-sm); }
.where-close { justify-self: start; }
.where-hint { padding-block: var(--space-2); }

.where-list { display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.where-row .jf-row-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.where-row-chip .chip { font-size: var(--text-xs); }
/* the pin's chip word for assistive technology only: page.css .vh (shared with the header bar since build step 6f) */