/* NEXUS /network: a full-screen interactive map. Panels float over the graph (no backdrop-filter). Uses site.css tokens + sheet.css. */
:root { --zm: 1 }
@media (min-width: 1100px) { :root { --zm: 1.08 } }
@media (min-width: 1700px) { :root { --zm: 1.15 } }
.foot { margin-top: 0 }

.nw { position: relative; height: calc(100vh / var(--zm)); min-height: 620px; overflow: hidden; --pad: 28px }
.nw-map { position: absolute; inset: 0; background-image: radial-gradient(rgba(160, 200, 255, .1) 1px, transparent 1.6px); background-size: 38px 38px; background-position: 10px 10px }
.nw-map::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .95; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' fill='none' stroke='%23BFDCFF' stroke-width='1'%3E%3Cellipse cx='800' cy='470' rx='640' ry='300' transform='rotate(-14 800 470)' stroke-opacity='.14'/%3E%3Cellipse cx='800' cy='470' rx='860' ry='410' transform='rotate(-14 800 470)' stroke-opacity='.08'/%3E%3Cellipse cx='800' cy='470' rx='430' ry='190' transform='rotate(-14 800 470)' stroke-opacity='.1' stroke-dasharray='2 7'/%3E%3C/svg%3E") center / cover no-repeat }
.nw-map .ng-box, .nw-map .ng { position: absolute; inset: 0; touch-action: none; cursor: grab } .nw-map .ng.grab { cursor: grabbing }
.nw-map .ng-box { height: 100% }
.nw-map .ng-name { font-size: 13px }

.nw-ui { position: absolute; inset: 0; z-index: 6; pointer-events: none } .nw-ui > * { pointer-events: auto }

.nw.is-empty .nw-tools, .nw.is-empty .nw-legend, .nw.is-empty .nw-zoom { display: none }
/* title block (top left) */
.nw-title { position: absolute; left: var(--pad); top: 88px; display: grid; justify-items: start; gap: 10px; max-width: 360px; pointer-events: none }
.nw-title > * { pointer-events: auto }
.nw-title h1 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1; letter-spacing: -.04em; color: #fff; max-width: 13ch }
.nw-stats { font-size: 14.5px } .nw-stats b { color: var(--ink); font-family: var(--mf) }
.nw-hint { color: var(--mut2); font-size: 13px; margin-top: 2px }

/* tools (top right): search + size */
.nw-tools { position: absolute; right: var(--pad); top: 88px; display: flex; align-items: center; gap: 14px; transition: right .35s var(--ease) }
.nw-search { position: relative; width: 290px }
.nw-search > .ic { position: absolute; left: 15px; top: 24px; width: 18px; height: 18px; margin-top: -9px; color: var(--mut2); pointer-events: none }
.nw-search input { padding-left: 42px; padding-right: 44px; min-height: 48px; border-radius: 16px; font-size: 15.5px; background: #04103A }
.nw-search input::-webkit-search-cancel-button, .nw-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none }
.nw-clear { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--mut) }
.nw-clear:hover { background: rgba(91, 155, 255, .14); color: var(--ink) } .nw-clear .ic { width: 16px; height: 16px }
.nw-sugg { position: absolute; z-index: 9; top: 54px; left: 0; right: 0; display: grid; gap: 2px; padding: 6px; background: #07154A; border: 1px solid transparent; border-radius: 16px; box-shadow: 0 30px 60px -24px #000 }
.nw-sugg button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: 14.5px; font-weight: 600 }
.nw-sugg button:hover, .nw-sugg button[aria-selected=true] { background: rgba(91, 155, 255, .16) } .nw-sugg .tk { color: var(--c); font: 500 12.5px var(--mf) } .nw-sugg .none { padding: 12px 10px; color: var(--mut); font-size: 14px }
.nw-size { display: flex; align-items: center; gap: 10px } .nw-size .seg { background: #04103A }

/* legend = the edge filter (bottom) */
.nw-legend { position: absolute; left: var(--pad); right: 92px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; transition: right .35s var(--ease) }
.nw-lg { --c: var(--b3); display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 38px; padding: 0 14px; border-radius: var(--r3); border: 1px solid transparent; background: #051040; color: var(--mut); font-weight: 650; font-size: 13.5px; white-space: nowrap; transition: border-color .2s, background .2s, color .2s, opacity .2s }
.nw-lg:hover { border-color: var(--b3); color: var(--ink) }
.nw-lg b { font: 700 12px var(--mf); color: var(--mut2) }
.nw-lg[aria-pressed=true] { color: #fff; border-color: var(--c); background: #061448; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) } .nw-lg[aria-pressed=true] b { color: var(--mut) }
.nw-lg[aria-pressed=false] .lgd { opacity: .35 } .nw-lg[aria-pressed=false] { opacity: .8 }
.nw-lg.tog { --c: var(--b3); border-style: dashed } .nw-lg.tog[aria-pressed=true] { border-style: solid }
.nw-lg .lgd { width: 28px }

/* zoom + share (bottom right) */
.nw-zoom { position: absolute; right: var(--pad); bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transition: right .35s var(--ease) }
.nw-zoom .btn.icon { background: #051040 } .nw-zoom .btn.icon:hover { background: #0A1A55 }
.nw-share { min-height: 44px } .nw-share-d { margin-top: 10px } .nw-share-m { display: none }

.nw .sheet.dock { top: 148px } .nw.has-sheet .nw-zoom { right: 436px } .nw.has-sheet .nw-legend { right: 520px }

/* states over the map */
.nw-state { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; pointer-events: none; padding: 0 20px }
.nw-state > * { pointer-events: auto }
.nw-state:empty { display: none }
.nw-state .empty { background: #061244; max-width: 460px; width: 100% }
.nw-loading { position: relative; width: min(520px, 90%); height: 260px; display: grid; place-items: center; text-align: center; pointer-events: none }
.nw-loading .orbit { inset: 0; -webkit-mask-image: none; mask-image: none } .nw-loading p { position: relative; color: var(--mut); font-weight: 600 }
.nw-soft { padding: 16px 20px; border-radius: 16px; border: 1px solid transparent; background: #061244; color: var(--mut); font-size: 14.5px; text-align: center; max-width: 380px }
.nw-soft b { color: var(--ink) }

/* node ring styles added for the map */
.ng.mt .ng-n:not(.match) { opacity: .16 } .ng-n.match .ng-halo { stroke: var(--warn); stroke-width: 3 } .ng-name.dim { opacity: .22 }
.ng-n.sel .ng-halo { stroke-width: 3 }

/* project sheet content */
.nw-conn { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.nw-conn li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, .03); font-size: 14px; line-height: 1.35 }
.nw-conn li .lgd { flex: none; width: 26px } .nw-conn li > span { min-width: 0; flex: 1; overflow-wrap: anywhere } .nw-conn li.dimmed { opacity: .5 }
.nw-conn .jump { display: inline; padding: 0; border: 0; background: none; color: var(--b3); font-weight: 700; text-align: left; text-decoration: underline; text-decoration-color: rgba(91, 155, 255, .45); text-underline-offset: 3px } .nw-conn .jump:hover { color: var(--c) }
.nw-conn small { color: var(--mut2); font-size: 12.5px; white-space: nowrap }
.nw-desc { color: var(--mut); font-size: 14.5px; line-height: 1.5 }

@media (max-width: 1299px) { .nw-size .exlab { display: none } .nw-search { width: 220px } }
@media (max-width: 900px) {
  .nw { height: calc(100dvh - 76px); min-height: 520px; --pad: 16px }
  .nw-title { top: 78px; max-width: none; right: var(--pad); gap: 4px }
  .nw-title .eyebrow, .nw-hint { display: none }
  .nw-title h1 { font-size: 22px; max-width: none; letter-spacing: -.035em }
  .nw-stats { font-size: 13px }
  .nw-tools { left: var(--pad); right: var(--pad); top: 136px; flex-direction: column; align-items: stretch; gap: 8px }
  .nw-search { width: 100% } .nw-size { width: 100% } .nw-size .seg { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr } .nw-size .seg button { padding: 0 6px; min-height: 40px }
  .nw-legend { left: 0; right: 0; bottom: 12px; padding: 2px var(--pad); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent) }
  .nw-legend::-webkit-scrollbar { display: none } .nw-lg { flex: none }
  .nw-zoom { right: 12px; bottom: 66px; gap: 6px } .nw-zoom .btn.icon { width: 42px; min-height: 42px }
  .nw-share-d { display: none } .nw-share-m { display: inline-flex; width: 42px; min-height: 42px; padding: 0 } .nw-share-m span { display: none }
  .nw .sheet.dock { top: auto; max-height: 52dvh }
  .nw.has-sheet .nw-zoom { right: 12px } .nw.has-sheet .nw-legend { right: 0 }
}
@media (pointer: coarse) { .nw-hint { display: none } }