/* Map view: system lanes, dependency arrows, live work across repos. Tokens from app.css. */
.mapwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 18px; align-items: start; }
.mapcard { padding: 18px 18px 8px; min-width: 0; }
.maphead { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; align-items: flex-end; padding: 0 4px 10px; }
.maphead h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1; }
.maphead p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; max-width: 60ch; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 22px; height: 0; border-top: 1.5px solid var(--line-strong); }
.lg.dashed { border-top-style: dashed; }
.lg.live { border-top: 3px solid var(--accent-2); }
.lg.dot { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--bad); }
.mapscroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px 6px; }
svg.map { display: block; width: 100%; min-width: 880px; height: auto; font-family: var(--font-body); }
.lane rect { fill: var(--surface-2); stroke: var(--line); stroke-dasharray: 2 4; }
.lane text { fill: var(--muted); font-size: 10.5px; letter-spacing: .24em; font-weight: 500; }
.medge .hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; }
.medge .line { fill: none; stroke: var(--line-strong); stroke-width: 1.5; transition: opacity var(--fast) var(--ease-out); pointer-events: none; }
.medge.planned .line { stroke-dasharray: 5 5; }
.medge.adhoc .line { stroke-dasharray: 2 4; }
.medge.live .line { stroke: var(--accent-2); stroke-width: 2.6; }
.ah { fill: var(--line-strong); }
.ah.live { fill: var(--accent-2); }
.medge .count { cursor: pointer; }
.medge .count circle { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.medge .count text { fill: var(--on-accent); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
svg.map.focus .medge { opacity: .14; }
svg.map.focus .medge.on { opacity: 1; }
svg.map.focus .mnode { opacity: .32; }
svg.map.focus .mnode.near { opacity: 1; }
.mnode { cursor: pointer; transition: opacity var(--fast) var(--ease-out); outline: none; }
.mnode .body { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; transition: stroke var(--fast); }
.mnode:hover .body, .mnode:focus-visible .body, .mnode.near .body { stroke: var(--accent-2); }
.mnode:focus-visible .body { stroke-width: 2; }
.mnode .stripe { fill: var(--ok); }
.mnode.h-warn .stripe { fill: #d9a62b; }
.mnode.h-bad .stripe { fill: var(--bad); }
.mnode.h-idle .stripe, .mnode.h-missing .stripe { fill: var(--line-strong); }
.mnode.h-missing .body { stroke-dasharray: 5 4; fill: var(--surface-2); }
.mnode .t-name { fill: var(--text); font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.mnode .t-meta { fill: var(--muted); font-size: 11.5px; }
.mnode .t-state { fill: var(--sub); font-size: 11px; font-weight: 500; letter-spacing: .04em; }
.mnode.h-bad .t-state { fill: var(--bad); }
.mnode.h-warn .t-state { fill: var(--warn); }
.mnode .mbars rect { fill: var(--bar-empty); }
.mnode .mbars rect.on { fill: var(--bar); }
.mnode.sys rect { fill: var(--chip); stroke: var(--line-strong); stroke-dasharray: 3 3; }
.mnode.sys .t-sys { fill: var(--sub); font-size: 13.5px; font-weight: 600; }
.mnode.faded { opacity: .25; }

.mappanel { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 14px); max-height: calc(100vh - 28px); overflow: auto; }
.mappanel .ph { display: flex; justify-content: space-between; align-items: center; }
.mappanel .eyebrow { color: var(--muted); font-size: 10.5px; letter-spacing: .24em; }
.pclose { border: 1px solid var(--line); background: var(--chip); border-radius: 999px; width: 32px; height: 32px; font-size: 16px; line-height: 1; color: var(--sub); }
.pclose:hover { color: var(--text); border-color: var(--accent-2); }
.mappanel h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1.1; overflow-wrap: anywhere; }
.mappanel h3 a { text-decoration: none; }
.mappanel h3 a:hover { color: var(--accent-2); }
.mappanel .arrow { color: var(--accent-2); font-family: var(--font-body); font-size: 18px; }
.prole { margin: 0; color: var(--sub); font-size: 13px; }
.pfocus { margin: 0; color: var(--muted); font-size: 12.5px; border-left: 2px solid var(--line-strong); padding-left: 10px; }
.pempty { margin: 0; color: var(--muted); font-size: 13px; }
.mappanel .label { margin: 6px 0 0; }
.links, .wlist, .plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.links button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius-md); padding: 9px 12px; min-height: 44px; font-size: 13px; transition: border-color var(--fast); }
.links button:hover { border-color: var(--accent-2); }
.links button > span { min-width: 0; }
.links button > span.two { display: flex; flex-direction: column; }
.links button small { color: var(--muted); font-size: 11.5px; }
.links button > b { flex: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11.5px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.witem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 12.5px; align-items: start; }
.witem:first-child { border-top: 0; }
.witem .badge { margin-top: 1px; }
.witem .wt a { text-decoration: none; }
.witem .wt a:hover { color: var(--accent-2); text-decoration: underline; }
.witem small { grid-column: 2; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.plist li { font-size: 12.5px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--accent-2); }
.plist li.pl-bad { border-left-color: var(--bad); }
.plist li.pl-warn { border-left-color: #d9a62b; }
.plist a { text-decoration: none; }
.plist a:hover { text-decoration: underline; }
.pipe { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: start; }
.stage { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line); min-height: 64px; }
.stage .st { display: flex; justify-content: space-between; gap: 4px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.stage .st b { color: var(--text); }
.stage .chip { display: block; font-size: 11px; padding: 3px 7px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage a.chip:hover { border-color: var(--accent-2); }
.pipe-arrow { color: var(--muted); align-self: center; font-size: 13px; }
.olist { list-style: none; margin: 0; padding: 0; }
.olist li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 12.5px; }
.olist li:first-child { border-top: 0; }
.olist a { text-decoration: none; } .olist a:hover { color: var(--accent-2); }
.olist span { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.pgo { margin-top: 4px; border: 1px solid var(--line-strong); background: transparent; border-radius: 999px; min-height: 40px; font-size: 13px; font-weight: 500; color: var(--text); }
.pgo:hover { border-color: var(--accent-2); background: var(--tint-purple); }
@media (max-width: 1080px) { .mapwrap { grid-template-columns: 1fr; } .mappanel { position: static; max-height: none; } }