/* Public Precinct Explorer — see organizing/templates/organizing/precinct_explorer.html */

.pp-explorer { width: 100%; }
.pp-explorer__intro { max-width: 760px; margin: 0 auto 1rem; padding: 0 1rem; }
.pp-explorer__intro h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
.pp-explorer__intro p { color: #444; line-height: 1.5; margin: 0; }

/* "Rotate your phone" hint — only on touch devices held in portrait at phone
   widths; auto-hides the moment they rotate to landscape. */
.pp-explorer__rotate-hint {
    display: none;
    margin: 0 auto .75rem; max-width: 760px;
    background: #fff3cd; color: #664d03; border: 1px solid #ffe69a;
    border-radius: 8px; padding: 8px 12px; font-size: 13px;
    text-align: center; line-height: 1.35;
}
@media (max-width: 820px) and (orientation: portrait) and (pointer: coarse) {
    .pp-explorer__rotate-hint { display: block; }
}

.pp-explorer__stage { position: relative; }
.pp-explorer__map {
    width: 100%;
    height: 70vh;
    min-height: 420px;
}
/* Embedded copy: fill the iframe, no page chrome around it. */
.pp-explorer--embed .pp-explorer__map { height: 100vh; min-height: 0; }

/* Legend */
.pp-explorer__legend {
    /* lower-right (more room there); raised to clear Mapbox's attribution line */
    position: absolute; right: 12px; bottom: 28px; z-index: 2;
    background: rgba(255,255,255,.94); border-radius: 8px; padding: 8px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.25); font-size: 12px; color: #222;
}
.pp-explorer__legend-title { font-weight: 600; margin-bottom: 4px; }
.pp-explorer__legend-scale { display: flex; gap: 0; }
.pp-explorer__legend-scale .sw { width: 26px; height: 12px; display: inline-block; }
.pp-explorer__legend-ends { display: flex; justify-content: space-between; color: #666; margin-top: 2px; }

/* Geocoder placement */
.pp-explorer__stage .mapboxgl-ctrl-geocoder { min-width: 260px; }

/* Info / analytics panel */
.pp-explorer__panel {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 320px; max-width: calc(100% - 24px); max-height: calc(100% - 24px);
    overflow-y: auto;
    background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.2);
    padding: 14px 16px; font-size: 14px; color: #1f2937;
}
.pp-explorer__panel-close {
    position: absolute; top: 6px; right: 10px; border: 0; background: none;
    font-size: 22px; line-height: 1; color: #9ca3af; cursor: pointer;
}
.pp-explorer__panel-close:hover { color: #374151; }
.pp-explorer__panel h2 { font-size: 1rem; margin: 0 0 .5rem; padding-right: 18px; }
.pp-explorer__panel h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
    color: #6b7280; margin: 1rem 0 .35rem; }
.pp-explorer__panel ul { list-style: none; margin: 0; padding: 0; }
.pp-explorer__panel li { padding: 3px 0; border-bottom: 1px solid #f1f1f1; }
.pp-explorer__panel .pct-link { background: none; border: 0; color: #2b6cb0; cursor: pointer;
    padding: 0; font: inherit; text-align: left; }
.pp-explorer__panel .pct-link:hover { text-decoration: underline; }
.pp-explorer__stat { font-size: 1.4rem; font-weight: 700; }
.pp-explorer__muted { color: #6b7280; }
.pp-explorer__bar { display: inline-block; height: 8px; background: #2b8cbe; border-radius: 4px;
    vertical-align: middle; margin-right: 6px; min-width: 2px; }

.pp-explorer__attribution { max-width: 760px; margin: .6rem auto 0; padding: 0 1rem;
    font-size: 12px; color: #6b7280; }