/* cityplanner-attention-metrics-v3 */
.attention-scoregrid{display:grid;gap:10px;margin-top:10px}
.attention-score{position:relative;padding:12px;border-radius:8px;background:rgba(255,255,255,.88);border:1px solid rgba(10,12,20,.08);box-shadow:var(--shadow2)}
.attention-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:950;margin-bottom:7px}
.attention-badge{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid rgba(10,12,20,.10);background:rgba(11,18,32,.03);white-space:nowrap;font-weight:900}
.attention-meter{display:block;appearance:none;-webkit-appearance:none;inline-size:100%;block-size:10px;border:0;border-radius:999px;overflow:hidden;background:rgba(11,18,32,.08)}
.attention-meter::-webkit-progress-bar{border-radius:999px;background:rgba(11,18,32,.08)}
.attention-meter::-webkit-progress-value{border-radius:999px;background:var(--attention-bar-colour)}
.attention-meter::-moz-progress-bar{border-radius:999px;background:var(--attention-bar-colour)}
.attention-band-high-complete{--attention-bar-colour:#07884f}
.attention-band-material-gaps,.attention-band-moderate-impact{--attention-bar-colour:#b56a00}
.attention-band-critical-unresolved,.attention-band-high-impact,.attention-band-impact-unresolved{--attention-bar-colour:#bd2c2c}
.attention-band-low-impact{--attention-bar-colour:#1769aa}
.attention-band-not-applicable{--attention-bar-colour:#777b80}
.attention-explanation{position:relative;display:inline-block;margin-top:7px;font-size:12px;color:var(--muted2)}
.attention-tooltip-trigger{appearance:none;border:0;padding:0;background:transparent;color:rgba(11,18,32,.88);cursor:pointer;font:inherit;font-weight:900;letter-spacing:0;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.attention-tooltip-trigger:focus-visible{outline:2px solid #1769aa;outline-offset:3px;border-radius:2px}
.attention-tooltip{position:absolute;z-index:20;display:none;inset-inline-start:0;inset-block-start:calc(100% + 7px);inline-size:min(360px,calc(100vw - 48px));padding:10px 12px;border:1px solid rgba(10,12,20,.16);border-radius:6px;background:#fff;color:#252b33;box-shadow:0 8px 24px rgba(10,12,20,.16)}
.attention-tooltip::before{content:"";position:absolute;inset-inline-start:18px;inset-block-start:-5px;inline-size:8px;block-size:8px;border-inline-start:1px solid rgba(10,12,20,.16);border-block-start:1px solid rgba(10,12,20,.16);background:#fff;transform:rotate(45deg)}
.attention-tooltip ul{margin:0;padding-inline-start:18px}
.attention-tooltip li+li{margin-top:5px}
.attention-explanation:hover>.attention-tooltip,.attention-explanation:focus-within>.attention-tooltip{display:block}
@media(max-width:520px){.attention-title{align-items:flex-start;flex-direction:column;gap:5px}.attention-badge{white-space:normal}.attention-tooltip{inline-size:min(320px,calc(100vw - 48px))}}
@media print{.attention-explanation{display:none}.attention-score{break-inside:avoid}.attention-meter{-webkit-print-color-adjust:exact;print-color-adjust:exact}}