.report-page { overflow: hidden; }
#report-map { position: fixed; inset: 0; width: 100%; height: 100dvh; }
.surface { background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.report-tools { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 1; min-width: 0; }
.heat-toggle { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 6px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.heat-toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.shape-switch { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--canvas); }
.shape-switch button { min-height: 38px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; }
.shape-switch button[aria-pressed=true] { background: #e0efef; color: var(--accent); }
.report-reset { display: inline-flex; align-items: center; justify-content: center; }
.map-status { position: fixed; z-index: 21; top: 92px; left: 50%; transform: translateX(-50%); max-width: min(580px,calc(100% - 32px)); padding: 12px 20px; font-size: 13px; text-align: center; }
.map-status:empty { display: none; }
.map-status[data-error=true] { color: #a2402b; }
.retry-button { position: fixed; z-index: 22; top: 170px; left: 50%; transform: translateX(-50%); padding: 11px 18px; color: var(--accent); font-size: 13px; }
.bottom-panels { display: contents; }
.map-legend { display: none; }
.map-controls-panel .map-legend { display: block; width: 100%; padding: 2px 14px 4px; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.legend-heading { display: flex; gap: 7px; align-items: center; }
.legend-heading h2 { font-size: 12px; font-weight: 400; letter-spacing: 0; margin: 0; }
.legend-heading strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
#legend-toggle { margin-left: auto; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; width: 44px; height: 40px; }
#legend-toggle:hover { background: var(--canvas); color: var(--accent); }
#legend-body { max-height: min(290px,35dvh); overflow-y: auto; padding: 0 1px 8px; }
.size-legend { height: 82px; display: flex; gap: 27px; align-items: flex-end; padding: 12px 7px 0; }
.size-key { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; min-width: 32px; }
.size-key i { display: block; border: 1.5px solid #2386ae; background: #6ac1d634; border-radius: 50%; }
.size-key.bars i { border-radius: 3px 3px 0 0; background: linear-gradient(#249bd0,#58cbbb); }
.size-key span { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); }
#scale-description { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 12px 0; }
.heat-ramp { height: 5px; border-radius: 3px; background: linear-gradient(90deg,#3b85c927,#3a9ed0,#42c7b8,#f1d371,#fa863e,#e75235); }
.heat-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 5px; }
.methodology { border-top: 1px solid var(--line); margin-top: 13px; padding-top: 10px; font-size: 11px; color: var(--muted); }
.methodology summary { cursor: pointer; }
.methodology p { font-size: 12px; line-height: 1.6; margin: 9px 0 0; }
.map-hint { position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 11px; color: var(--muted); background: #ffffffd9; padding: 6px 12px; border-radius: 20px; pointer-events: none; white-space: nowrap; z-index: 1; }
.zone-detail { position: fixed; right: 16px; top: 92px; width: 240px; padding: 22px; z-index: 11; }
.close-detail { position: absolute; top: 4px; right: 4px; border: 0; border-radius: 8px; background: transparent; font-size: 24px; color: var(--muted); width: 40px; height: 40px; }
.eyebrow { font-size: 10px; letter-spacing: 1px; color: var(--muted); margin: 0 0 15px; }
.zone-detail strong { font-size: 42px; font-weight: 650; letter-spacing: -1.5px; display: block; color: var(--accent); line-height: 1.1; }
.zone-unit { font-size: 13px; color: var(--muted); }
.zone-detail p:not(.eyebrow) { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 14px 0; }
.zoom-zone { border: 0; border-radius: 8px; background: #e0efef; color: var(--accent); min-height: 44px; padding: 10px 12px; font-size: 12px; width: 100%; }
.report-overlay{position:absolute;pointer-events:none;overflow:visible}.heat-canvas,.quantity-layer{position:absolute;inset:0;pointer-events:none}.quantity-mark{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;background:transparent;pointer-events:auto;display:flex;align-items:center;justify-content:center;color:#164d6b;isolation:isolate}.quantity-mark::before{content:'';position:absolute;width:var(--diameter);height:var(--diameter);border-radius:50%;background:#28a5cb32;border:1.5px solid #1987b6;box-shadow:0 1px 6px #ffffff80;z-index:-1;box-sizing:border-box}.quantity-mark:hover::before,.quantity-mark:focus-visible::before,.quantity-mark[aria-pressed=true]::before{border-color:#084e7e;background:#278bbc66;box-shadow:0 0 0 4px #ffffffa6}.quantity-label{font-size:12px;line-height:1;font-weight:750;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #fff,0 0 6px #fff}.quantity-mark.small .quantity-label{position:absolute;left:calc(50% + var(--diameter)/2 + 3px);background:#ffffffdf;padding:3px 4px;border-radius:4px;font-size:10px;white-space:nowrap}.quantity-mark.bar{height:110px!important;transform:translate(-50%,-100%);align-items:flex-end}.quantity-mark.bar::before{bottom:0;width:22px;height:var(--bar-height);border-radius:3px 3px 0 0;background:linear-gradient(#147ebb,#48c5bf);border:1px solid #1773a1;box-shadow:2px 2px 0 #125d7b29}.quantity-mark.bar .quantity-label{position:absolute;bottom:calc(var(--bar-height) + 5px);font-size:11px;background:#ffffffdd;padding:3px 5px;border-radius:4px}.quantity-mark.bar::after{content:'';position:absolute;bottom:-3px;width:30px;border-bottom:2px solid #315e7b55}
.quantity-mark.bar { width: 34px!important; }
@media(max-width:1100px) { .map-hint { display: none; } }
@media(max-width:600px) {
    .report-tools { order: -1; flex: none; }
    .report-tools .toolbar-button { flex: 0 0 44px; }
    .shape-switch button { padding: 0 9px; }
    .map-status { top: 138px; padding: 10px 14px; }
    .retry-button { top: 214px; }
    .zone-detail { top: 138px; right: 12px; width: 210px; padding: 18px; }
    .zone-detail strong { font-size: 34px; }
    .quantity-label { font-size: 11px; }
}
@media(prefers-reduced-motion:no-preference) {
    .quantity-mark::before { transition: background .16s,box-shadow .16s; }
    .zone-detail { animation: reveal .15s ease-out; }
    @keyframes reveal { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
}

.dashboard-toggle { min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.dashboard-toggle:hover { background: #e0efef; }