/* Details for a clicked place (explore-place.js) and the Details pane's default state. */
.explore-page .place-details { color: #12345a; font-size: 14px; line-height: 1.45; }
.explore-page .place-details[hidden] { display: none; }
.explore-page .place-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.explore-page .place-title { margin: 0; font-size: 17px; color: #0f2c4d; }
.explore-page .place-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #0f2c4d; cursor: pointer; }
.explore-page .place-close:hover { background: #ffffff80; }
.explore-page .place-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.explore-page .place-name { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: #0f2c4d; }
.explore-page .place-unit { margin: 2px 0 0; color: #3d5876; }
.explore-page .place-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0 0; }
.explore-page .place-facts dt { color: #3d5876; }
.explore-page .place-facts dd { margin: 0; }
.explore-page .place-tiles { display: none; }
.explore-page .place-variable select { width: 100%; min-height: 38px; margin-top: 16px; padding: 0 10px; border: 1px solid #c8d3de; border-radius: 6px; background: #fff; color: #0f2c4d; font: inherit; font-size: 15px; }
.explore-page .place-label { margin: 6px 0 0; color: #3d5876; }
.explore-page .place-current { margin-top: 12px; }
.explore-page .place-when { margin: 0; font-size: 17px; color: #12345a; }
.explore-page .place-value { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; color: #0f2c4d; font-variant-numeric: tabular-nums; }
.explore-page .place-section { margin: 18px 0 6px; font-size: 15px; color: #0f2c4d; }
.explore-page .place-chart { margin: 0; padding: 8px 6px 4px; border-radius: 8px; background: #fff; box-shadow: 0 1px 4px #0f2c4d1f; }
.explore-page .place-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.explore-page .place-grid line { stroke: #e3e9ef; }
.explore-page .place-grid text, .explore-page .place-axis text { fill: #3d5876; font-size: 9px; }
.explore-page .place-axis line { stroke: #8fa2b5; }
.explore-page .place-line { fill: none; stroke: #1b6fc2; stroke-width: 1.6; stroke-linejoin: round; }
.explore-page .place-dot { fill: #1b6fc2; }
.explore-page .place-marker { stroke: #0f2c4d; stroke-width: 1; stroke-dasharray: 3 3; }
.explore-page .place-marker-dot { fill: #1b6fc2; stroke: #fff; stroke-width: 2; }
.explore-page .place-stats { margin-top: 4px; }
.explore-page .place-data-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #ffffff99; width: 100%; color: #0f4c8a; font-weight: 600; }
.explore-page .place-data-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.explore-page .place-status { margin: 10px 0 0; color: #3d5876; }

/* Default state: an invitation to click, then the active layer. */
.explore-page .details-invite { display: grid; justify-items: center; gap: 12px; padding: 36px 8px 24px; text-align: center; color: #0f2c4d; font-size: 16px; font-weight: 700; }
.explore-page .details-invite[hidden] { display: none; }
.explore-page .details-invite svg { width: 64px; height: 64px; fill: none; stroke: #1b6fc2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.explore-page .details-active { margin-top: 8px; padding-top: 16px; border-top: 1px solid #ffffff99; color: #12345a; text-shadow: none; }
.explore-page .details-active-heading { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #0f2c4d; }
.explore-page .details-active h3 { margin: 0; font-size: 22px; color: #0f2c4d; text-shadow: none; }
.explore-page .details-active p, .explore-page .details-active span { color: #12345a; text-shadow: none; }
.explore-page .details-active .layer-data-label { font-size: 16px; color: #3d5876; }
.explore-page .details-active .layer-data-row { margin-top: 6px; }
.explore-page .details-active .layer-data-row strong { display: inline-block; min-width: 64px; color: #0f2c4d; }

/* The place marker on the map. */
.explore-page .place-pin { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: #1b6fc2; box-shadow: 0 0 0 2px #1b6fc2, 0 2px 6px #0f2c4d66; }