/* SPDX-License-Identifier: Apache-2.0 */
/* The map page, on top of ../explain/explain.css. Local-only: no web fonts, no external assets. */
.wrap.wide{max-width:1360px}
.lede a{color:var(--accent)}

.mapgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:1100px){
  .mapgrid{grid-template-columns:minmax(0,1fr) 320px}
  .panel{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
}
.mapfig{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 12px 10px}
.mapscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mapscroll svg{display:block;width:100%;min-width:760px;height:auto}
.mapfig figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted);padding-top:8px;border-top:1px solid var(--line);margin-top:8px}
.mapfig .cap{flex:1;min-width:220px;min-height:2.6em}
.mapfig button{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--paper-2);border-radius:6px;padding:4px 10px;cursor:pointer;color:var(--ink)}
.mapfig button:hover{border-color:var(--accent)}
.mapfig button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.legend{list-style:none;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.legend li{margin:0}

/* SVG */
#mapsvg text{font-family:var(--sans);fill:var(--ink)}
#mapsvg .mono{font-family:var(--mono)}
#mapsvg .axis{font-size:10.5px;letter-spacing:.08em;fill:var(--muted)}
#mapsvg .box{fill:#fff;stroke:var(--line);stroke-width:1.2;transition:fill .3s ease,stroke .3s ease}
#mapsvg .node{cursor:pointer;text-decoration:none}
#mapsvg .node:hover .box{stroke:var(--accent)}
#mapsvg .node:focus{outline:none}
#mapsvg .node:focus-visible .box{stroke:var(--accent);stroke-width:2.5}
#mapsvg .node.sel .box{stroke:var(--accent);stroke-width:2}
#mapsvg .node.hot .box{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
#mapsvg .num{font-size:12px;fill:var(--accent)}
#mapsvg .ttl{font-size:15px;font-weight:650}
#mapsvg .lab{font-size:13px;fill:var(--muted)}
#mapsvg .chipt{font-size:10px;fill:var(--ink)}
#mapsvg .chip{stroke-width:1}
#mapsvg .chip.id{fill:var(--accent-soft);stroke:#C9D3F6}
#mapsvg .chip.rfc{fill:var(--verify-soft);stroke:#BBDCCB}
#mapsvg .chip.other{fill:var(--paper-2);stroke:var(--line)}
#mapsvg .sct{font-size:9.5px;font-family:var(--mono)}
#mapsvg .sc{stroke-width:1}
#mapsvg .sc.rfc,#mapsvg .sc.rel{fill:var(--verify-soft);stroke:#BBDCCB}
#mapsvg .sct.rfc,#mapsvg .sct.rel{fill:var(--verify)}
#mapsvg .sc.id{fill:var(--accent-soft);stroke:#C9D3F6}
#mapsvg .sct.id{fill:var(--accent)}
#mapsvg .sc.bnl{fill:var(--warn-soft);stroke:#E9CF9F}
#mapsvg .sct.bnl{fill:var(--warn)}
#mapsvg .sc.des,#mapsvg .sc.prep{fill:var(--paper-2);stroke:var(--line)}
#mapsvg .sct.des,#mapsvg .sct.prep{fill:var(--muted)}
#mapsvg .flow{fill:none;stroke:#9AA3B2;stroke-width:1.4}
#mapsvg .flow.side,#mapsvg .flow.loop{stroke-dasharray:4 4}
#mapsvg .ahp{fill:#9AA3B2}
#mapsvg .fl{font-size:10.5px;fill:var(--muted)}
#mapsvg .track{stroke:var(--line);stroke-width:2;stroke-dasharray:2 5}
#mapsvg .base{stroke:var(--ink);stroke-width:1.5}
#mapsvg .bracket{fill:none;stroke:var(--line);stroke-width:2}
#mapsvg .dot{opacity:0;transition:transform .7s ease,opacity .3s ease}
#mapsvg .dot.on{opacity:1}
#mapsvg .dot circle{fill:var(--accent);fill-opacity:.25;stroke:var(--accent);stroke-width:1.5}
#mapsvg .dot circle.core{fill:var(--accent);fill-opacity:1;stroke:none}
@media (prefers-reduced-motion: reduce){
  #mapsvg .dot,#mapsvg .box{transition:none}
}

/* Status chips in HTML */
.stc{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;border:1px solid var(--line);border-radius:999px;padding:0 8px;background:var(--paper-2);color:var(--muted);white-space:nowrap}
.stc.rfc,.stc.rel{background:var(--verify-soft);border-color:#BBDCCB;color:var(--verify)}
.stc.id{background:var(--accent-soft);border-color:#C9D3F6;color:var(--accent)}
.stc.bnl{background:var(--warn-soft);border-color:#E9CF9F;color:var(--warn)}

/* Side panel and the per-layer list */
.panel{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:#fff;padding:14px 16px;font-size:14.5px}
.panel:focus{outline:none}
.panel .hint{color:var(--muted);margin:0}
.panel h3{margin-top:0}
.layers{display:grid;gap:12px;max-width:900px}
.layer{border:1px solid var(--line);border-radius:10px;padding:12px 16px;background:#fff;scroll-margin-top:16px}
.layer:target{border-color:var(--accent)}
.layer h3,.panel h3{font-size:16px;margin:0 0 6px}
.layer h3 .n,.panel h3 .n{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:500}
.layer p,.panel p{margin-bottom:8px}
.stl{display:flex;flex-wrap:wrap;gap:6px}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px !important}
ul.pl{margin:0 0 6px 18px}
ul.pl li{margin-bottom:3px}
.layer ul.specs li,.panel ul.specs li{padding:4px 0;font-size:13.5px;overflow-wrap:anywhere}
.layer ul.specs .kind,.panel ul.specs .kind{min-width:110px}
.layer .src,.panel .src{margin:8px 0 0}

@media (max-width:720px){
  .mapfig{padding:8px}
}