.map-role-comparison { margin-block: 2rem; padding: clamp(1rem,2.5vw,1.5rem); background: #0e171b; border: 1px solid #29434d; border-radius: 16px; }
.map-stage-controls { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1rem; }
.map-stage-controls button { font: inherit; padding: .7rem .85rem; border: 1px solid #698089; border-radius: 8px; color: #eff5f7; background: #111c21; cursor: pointer; }
.map-stage-controls button[aria-pressed="true"] { color: #061014; background: #79e4f2; border-color: #79e4f2; }
.map-stage-controls button:focus-visible { outline: 2px solid #79e4f2; outline-offset: 4px; }
.map-stage-controls button:disabled { cursor: default; }
.map-role-comparison figure { margin: 1rem 0 0; }
.map-role-comparison figure[hidden] { display: none; }
.map-role-comparison img { display: block; width: 100%; height: auto; border-radius: 8px; }
.map-role-comparison figcaption { font-size: .875rem; line-height: 1.7; color: #b7c8cf; padding-top: .6rem; }
.map-stage-status { min-height: 3em; color: #b7c8cf; font-size: .875rem; line-height: 1.6; }
.map-connection-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.map-connection-table th,.map-connection-table td { padding: .75rem .5rem; text-align: left; border-bottom: 1px solid #29434d; }
.map-connection-table code { white-space: normal; overflow-wrap: anywhere; }
.map-connection-table th { color: #b7c8cf; }
.map-guide-table { overflow-x: auto; }
[data-map-guide] a:not(.btn) { color: #79e4f2; text-decoration: underline; text-underline-offset: .18em; }
[data-map-guide] a:focus-visible { outline: 2px solid #79e4f2; outline-offset: 4px; border-radius: 3px; }
.map-role-comparison .btn { white-space: normal; text-align: center; max-width: 100%; box-sizing: border-box; }