/* dc-lens report — SaaS-pro variant (spec P5, design/VARIANT-SPEC.md).
   Same class vocabulary as report.css; cool product-surface register. */
:root{ --bg:#f6f7f9; --ink:#101828; --muted:#667085; --accent:#1d5c45;
  --border:#e4e7eb; --rule:#eef1f4; --shadow:0 1px 2px rgba(16,24,40,.05);
  --good:#067647; --good-bg:#ecfdf3; --warn:#b54708; --warn-bg:#fffaeb;
  --bad:#b42318; --bad-bg:#fef3f2; }
*{box-sizing:border-box}
html{background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.55; margin:0; padding:0 24px 64px;
  font-size:15px; -webkit-font-smoothing:antialiased}
.wrap{max-width:1040px; margin:0 auto}
a{color:inherit}
header{margin:0 -24px; padding:0 24px; background:#fff; border-bottom:1px solid var(--border)}
header .bar{display:flex; justify-content:space-between; align-items:center; max-width:1040px;
  margin:0 auto; padding:14px 0}
.wordmark{font-size:17px; font-weight:650; letter-spacing:-0.01em; text-transform:none; text-decoration:none}
header .lbl{font-size:12px; font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0}
h1{font-size:28px; font-weight:650; letter-spacing:-0.015em; line-height:1.15; margin:0}
p.lead{font-size:15px; color:var(--muted); margin:8px 0 0; max-width:720px}
.hero{padding:32px 0 8px}
section{padding:32px 0 0}
section > .lbl{display:block; font-size:13px; font-weight:600; color:var(--muted);
  text-transform:none; letter-spacing:0; margin-bottom:12px}
p{margin:10px 0; max-width:720px}
.mk{font-size:12.5px; color:var(--muted)}
.src{font-size:12.5px; color:var(--muted)}
.lbl{font-size:12px; font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0}

/* stat tiles — each cell its own card */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:20px 0 0}
.stats > div{background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:16px 18px 14px; border-right:1px solid var(--border)}
.stats .k{font-size:12px; font-weight:500; color:var(--muted); margin-top:6px; text-transform:none; letter-spacing:0}
.stats .n{font-size:28px; font-weight:650; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.stats .n b{font-weight:650; color:var(--accent)}
.rag-green{color:var(--good)} .rag-amber{color:var(--warn)} .rag-red{color:var(--bad)}

/* maps */
.map{height:62vh; min-height:420px; border:1px solid var(--border); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow); margin:14px 0 6px; background:#eceef1}
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--muted); margin:10px 0 0}
.legend span{display:inline-flex; align-items:center; gap:6px}
.sw{width:12px; height:12px; display:inline-block; border:1px solid var(--border); border-radius:3px}
.leaflet-container{font:inherit}
.leaflet-popup-content{font-size:13px; line-height:1.45}

/* card grid */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.card{background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:20px 24px}
.card > .lbl{display:block; font-size:15px; font-weight:600; color:var(--ink); text-transform:none;
  letter-spacing:0; padding-bottom:12px; border-bottom:1px solid var(--rule); margin-bottom:14px}
.card.full{grid-column:1/-1}

/* tables */
table{border-collapse:collapse; width:100%; font-size:13.5px}
.data th{font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--muted);
  text-align:left; padding:7px 12px 7px 0; border-bottom:1px solid var(--border)}
.data td{padding:9px 12px 9px 0; border-bottom:1px solid var(--rule); vertical-align:top}
.data tr:last-child td{border-bottom:none}
.data td.num,.data th.num{text-align:right; font-variant-numeric:tabular-nums}
.hl td{background:#f9fafb}
.data td.rag-green::before,.data td.rag-amber::before,.data td.rag-red::before{
  content:''; display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:6px}
.data td.rag-green::before{background:var(--good)}
.data td.rag-amber::before{background:var(--warn)}
.data td.rag-red::before{background:var(--bad)}
.flag{display:inline-block; font-size:11px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--bad); background:var(--bad-bg); border:none; padding:2px 10px; margin:1px 2px 1px 0; border-radius:999px}

/* checklist */
.check{list-style:none; padding:0; margin:0; font-size:13.5px}
.check li{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--rule); align-items:baseline}
.check li:last-child{border-bottom:none}
.check .tick{font-weight:700; width:16px; flex:none}
.check .ok{color:var(--good)} .check .warn{color:var(--warn)} .check .bad{color:var(--bad)}

ul.plain{padding-left:18px; margin:8px 0; max-width:720px}
ul.plain li{margin:8px 0; font-size:13.5px}
ul.plain li::marker{color:var(--accent)}

footer{margin-top:48px; border-top:1px solid var(--border); padding-top:18px}
footer .fine{font-size:12.5px; color:var(--muted); max-width:760px}

/* full-bleed map + floating panel */
.bleed{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); position:relative}
.mapfull{height:78vh; min-height:520px; position:relative; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border); background:#eceef1}
.mapfull .gl{position:absolute; inset:0}
.mappanel{position:absolute; top:16px; left:max(16px, calc(50vw - 520px)); z-index:5;
  background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  padding:16px 18px; max-width:270px}
.mappanel h2{font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; margin:0 0 2px; color:var(--muted)}
.mappanel .count{font-size:24px; font-weight:650; margin:4px 0 0; letter-spacing:-0.01em; font-variant-numeric:tabular-nums}
.mappanel .count b{color:var(--accent); font-weight:650}
.mappanel .sub{font-size:12px; color:var(--muted); margin:2px 0 10px}
.mappanel .toggles{display:flex; flex-direction:column; gap:5px; font-size:12.5px}
.mappanel .toggles button{display:flex; align-items:center; gap:8px; font:inherit; font-size:12.5px;
  padding:5px 10px; border:1px solid var(--rule); border-radius:8px; background:#fff; cursor:pointer;
  text-align:left; color:var(--ink)}
.mappanel .toggles button .dot{width:10px; height:10px; flex:none; border:1px solid var(--border); border-radius:999px}
.mappanel .toggles button.off{opacity:.38}
.mappanel .foot{margin-top:10px; font-size:11px; color:var(--muted); line-height:1.45}
.maplibregl-popup-content{font-family:inherit; font-size:12.5px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--border); box-shadow:var(--shadow); background:#fff}
.maplibregl-ctrl-group{border-radius:8px}
@media(max-width:700px){.mappanel{position:static; max-width:none; border-radius:0; border-left:none; border-right:none; box-shadow:none}}