/* css/gen6-punch-maps.css (2026-10-22 owner punch C1, C3). Scoped to g6p- classes and the home address story. */
/* C1: real map behind the route */
.g6-live-trace-wrap.has-map > .g6-live-trace, .g6-live-trace-wrap.has-map > .g6-live-trace-cap { display: none; }
.g6p-routemap { position: relative; width: 100%; height: 240px; border-radius: 16px; overflow: hidden; background: #e9eff4; box-shadow: 0 10px 28px rgba(0,40,70,.28); z-index: 0; }
.g6p-routemap .leaflet-container { font: 600 12px/1.3 Manrope, sans-serif; }
.g6p-routemap .leaflet-control-attribution { font-size: 9px; max-width: 70%; background: rgba(255,255,255,.8); }
.g6p-routemap .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; font-size: 20px; color: #095e93; }
.g6p-tip.leaflet-tooltip { background: #fff; color: #095e93; border: 0; border-radius: 999px; padding: 3px 9px; font: 700 11px/1.2 Manrope, sans-serif; box-shadow: 0 3px 10px rgba(0,40,70,.25); }
.g6p-tip.leaflet-tooltip-top:before { border-top-color: #fff; }
.home.gen6 .g6-live-trace-wrap.has-map { max-width: none; }
@media (min-width: 760px) { .g6p-routemap { height: 280px; } }
/* C1: utilities rows read as one tidy card */
.g6-live-rows .g6-live-row--util dd { font-weight: 700; }
/* C1: next step card buttons */
.g6-story-card--value .g6-story-value-act { display: grid; gap: 10px; }
.g6-story-card--value .g6p-book { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; text-align: center; }
.g6-story-card--value .g6-value-form .g6p-report { background: transparent; color: inherit; box-shadow: none; border: 1.5px solid currentColor; }

/* C3: area guides picker. The original county tree stays in the DOM (crawlable links, no-JS) and is hidden when the picker mounts. */
.g6p-tree-src { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g6p-pick { display: grid; gap: 14px; margin-top: 8px; }
.g6p-chiprow { display: flex; flex-wrap: wrap; gap: 10px; }
.g6p-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 18px 0 14px; border-radius: 999px; border: 1.5px solid #cfe0ee; background: #fff; color: #095e93; font: 700 15px/1 Manrope, sans-serif; text-decoration: none; cursor: pointer; transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .12s; box-shadow: 0 2px 8px rgba(9,94,147,.07); }
.g6p-chip i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b4cde0; flex: none; position: relative; transition: background .16s, border-color .16s; }
.g6p-chip:hover { border-color: #2b80bb; }
.g6p-chip:active { transform: scale(.97); }
.g6p-chip.is-on { background: #095e93; border-color: #095e93; color: #fff; box-shadow: 0 6px 16px rgba(9,94,147,.28); }
.g6p-chip.is-on i { background: #60c3ef; border-color: #60c3ef; }
.g6p-chip.is-on i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #095e93; border-width: 0 2.4px 2.4px 0; transform: rotate(40deg); }
.g6p-chip:focus-visible, .g6p-btn:focus-visible, .g6p-clear:focus-visible { outline: 3px solid #60c3ef; outline-offset: 2px; }
.g6p-actionbar { border-radius: 18px; background: #eef5fb; border: 1px solid #d5e5f2; padding: 12px 14px; display: grid; gap: 10px; }
.g6p-actionbar:not(.is-active) { background: transparent; border-style: dashed; }
.g6p-hint { margin: 0; color: #51647a; font: 500 14px/1.45 Manrope, sans-serif; }
.g6p-count { display: flex; align-items: baseline; gap: 4px; color: #095e93; font: 600 14px/1 Manrope, sans-serif; }
.g6p-count b { font: 800 22px/1 Manrope, sans-serif; }
.g6p-clear { margin-left: auto; min-height: 36px; padding: 0 12px; border: 0; background: transparent; color: #2b80bb; font: 700 13px/1 Manrope, sans-serif; cursor: pointer; text-decoration: underline; }
.g6p-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.g6p-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid #095e93; background: #fff; color: #095e93; font: 700 14px/1 Manrope, sans-serif; text-decoration: none; cursor: pointer; }
.g6p-btn--primary { background: #095e93; color: #fff; }
.g6p-btn:hover { box-shadow: 0 6px 16px rgba(9,94,147,.2); }
.g6p-cmp { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.g6p-cmp li { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid #d5e5f2; }
.g6p-cmp b { flex: 1; color: #095e93; font: 600 18px/1.1 "Cormorant Garamond", Georgia, serif; }
.g6p-cmp a { color: #2b80bb; font: 700 13px/1 Manrope, sans-serif; min-height: 36px; display: inline-flex; align-items: center; }
@media (max-width: 600px) { .g6p-chip { font-size: 14.5px; } .g6p-btn { flex: 1 1 100%; } }

/* C2: obvious Reset map pill on the county places map */
.g6-county-explorer .g6-county-reset[data-g6p] { top: auto; bottom: 16px; right: auto; left: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 0 18px 0 14px; border: 1.5px solid #2b80bb; background: #fff; color: #095e93; font: 700 13px/1 Manrope, sans-serif; box-shadow: 0 8px 24px rgba(9,94,147,.22); cursor: pointer; }
.g6-county-explorer .g6-county-reset[data-g6p] svg { color: #2b80bb; flex: none; }
.g6-county-explorer .g6-county-reset[data-g6p]:hover { background: #095e93; color: #fff; border-color: #095e93; }
.g6-county-explorer .g6-county-reset[data-g6p]:hover svg { color: #fff; }

/* C2: reference chips for Rotonda, Englewood, Cleveland, North Port on the Charlotte places map */
.g6p-lchip-wrap { pointer-events: none; }
.g6p-lchip { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px dashed rgba(9,94,147,.45); box-shadow: 0 3px 10px rgba(9,94,147,.14); white-space: nowrap; }
.g6p-lchip b { font: 700 11.5px/1 Manrope, sans-serif; color: #095e93; }
.g6p-lchip small { font: 600 9px/1 Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #51647a; }
@media (max-width: 700px) { .g6p-lchip small { display: none; } .g6p-lchip b { font-size: 10.5px; } }