.structure-map-panel { min-width: 0; }
.structure-map-content, .structure-map-view { display: grid; min-width: 0; gap: 1rem; }
.structure-map-content { padding-top: .4rem; }
.structure-map-load-status { margin: 0; color: #9eb0c5; font-size: .83rem; }
.structure-map-load-status[role="alert"] { color: #ffb2ad; }
.structure-map-refresh { justify-self: start; }
.structure-map-result { min-width: 0; }
.structure-map-view :is(p, code, dd, strong, button, h3) { overflow-wrap: anywhere; }
.structure-map-view code, .structure-map-view dd { user-select: text; }
.structure-map-metadata { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; color: #91a4ba; font-size: .76rem; }
.structure-map-metadata p { margin: 0; }
.structure-map-metadata code { flex-basis: 100%; color: #b9d7ff; }
.structure-map-note { margin: 0; max-width: 70rem; color: #9eb0c5; font-size: .85rem; line-height: 1.5; }
.structure-map-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1.5rem; }
.structure-map-toolbar label { min-width: 0; flex: 1 1 14rem; max-width: 25rem; }
.structure-map-legend { display: flex; flex-wrap: wrap; gap: .35rem; }
.structure-map-status { display: inline-flex; width: fit-content; padding: .22rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 750; color: #a7b4c4; background: #263241; }
.structure-map-status[data-status="live"] { color: #79e1b7; background: #173c33; }
.structure-map-status[data-status="prepared"] { color: #b9d7ff; background: #17304d; }
.structure-map-status[data-status="blocked"] { color: #ffc37b; background: #47331c; }
.structure-map-graph { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2rem; padding: .75rem; border: 1px solid #263a54; border-radius: .9rem; background: #0b1727; }
.structure-map-group { display: grid; align-content: start; min-width: 0; gap: .8rem; }
.structure-map-group h3 { margin: 0; color: #dceaff; font-size: .95rem; }
.structure-map-group-summary { margin: 0; color: #91a4ba; font-size: .76rem; line-height: 1.45; }
.structure-map-node { position: relative; z-index: 1; display: grid; min-width: 0; width: 100%; gap: .45rem; padding: .85rem; text-align: left; color: #dbe8f6; background: linear-gradient(115deg, #132942, #0e1b2c 54%); border-color: #344b67; }
.structure-map-node strong { font-size: .93rem; }
.structure-map-node-summary { font-size: .76rem; font-weight: 450; line-height: 1.45; color: #9eb0c5; }
.structure-map-node[aria-pressed="true"] { border-color: #8ab9ff; box-shadow: 0 0 0 2px #8ab9ff55; }
.structure-map-node[data-related="true"]:not([aria-pressed="true"]) { border-color: #58708d; }
.structure-map-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.structure-map-arrows marker path { fill: #8ab9ff; }
.structure-map-edge { fill: none; stroke: #8ab9ff80; stroke-width: 1.8; }
.structure-map-relations { min-width: 0; }
.structure-map-relations h3, .structure-map-detail h3 { margin: 0 0 .6rem; font-size: 1rem; }
.structure-map-relations ul { display: grid; gap: .55rem; padding: 0; margin: 0; list-style: none; }
.structure-map-relations li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .6rem; border: 1px solid #273d58; border-radius: .75rem; }
.structure-map-relations button { max-width: 100%; min-width: 0; padding: .45rem .65rem; font-size: .76rem; }
.structure-map-direction { min-width: 0; color: #91a4ba; font-size: .75rem; overflow-wrap: anywhere; }
.structure-map-detail { display: grid; min-width: 0; gap: .7rem; padding: 1rem; border: 1px solid #35506d; border-radius: .9rem; background: #101f32; }
.structure-map-detail:focus-visible, .structure-map-view a:focus-visible, .structure-map-references summary:focus-visible { outline: 3px solid #6aa9ff55; outline-offset: 3px; }
.structure-map-detail :is(h3, p) { margin: 0; }
.structure-map-detail p { line-height: 1.5; color: #bdcad9; }
.structure-map-detail dl, .structure-map-references dl { display: grid; grid-template-columns: minmax(6rem, .6fr) minmax(0, 2fr); gap: .4rem .8rem; margin: 0; }
.structure-map-view dt { min-width: 0; font-size: .77rem; color: #91a4ba; overflow-wrap: anywhere; }
.structure-map-view dd { min-width: 0; margin: 0; font-size: .81rem; color: #dbe8f6; white-space: pre-wrap; }
.structure-map-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.structure-map-links a { display: inline-flex; min-height: 2.75rem; align-items: center; padding: .35rem .6rem; border: 1px solid #344b67; border-radius: .65rem; }
.structure-map-detail > button { justify-self: start; }
.structure-map-references { color: #91a4ba; font-size: .8rem; }
.structure-map-references summary { cursor: pointer; padding: .65rem 0; color: #b9d7ff; }
.structure-map-references code { display: block; margin-top: .8rem; }
@media (max-width: 620px) {
  .structure-map-graph { grid-template-columns: minmax(0, 1fr); padding: .65rem; }
  .structure-map-detail dl, .structure-map-references dl { grid-template-columns: minmax(0, 1fr); }
  .structure-map-view dd + dt { margin-top: .6rem; }
  .structure-map-refresh { width: 100%; }
}