/* Atlas — region map page (builds on ../styles.css for the shared chrome). */

[hidden] { display: none !important; }

#mainWrapper { overflow: hidden; }

/* ---------------- map toolbar ---------------- */

#mapBar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;        /* never a second line: js/bar.js drops the button labels, then the facts line, instead */
    gap: 6px 14px;
    padding: 8px 14px;
    background-color: var(--backgroundColor);
    border-bottom: 1px solid var(--borderColor31);
    flex-shrink: 0;
    position: relative;
    z-index: 30;              /* the bar (and its region dropdown) stacks above the map's legend / tooltip */
}

#regionPickerWrap { position: relative; }

#regionPickerBtn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 1px solid var(--borderColor31);
    padding: 6px 14px;
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif;
    font-size: 1.3571em;
    color: var(--themeColor);
    cursor: pointer;
    letter-spacing: 1px;
    min-width: 220px;
    justify-content: space-between;
}
#regionPickerBtn:hover { border-color: var(--themeColor); }
#regionPickerBtn .caret {
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--textColor);
}

#regionPicker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 340px;
    max-height: 60vh;
    background-color: #0d0d0df7;
    border: 1px solid var(--borderColor31);
    z-index: 40;
    display: flex;
    flex-direction: column;
}
#regionFilter {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--borderColor31);
    outline: none;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 1em;
    color: var(--themeColor);
}
#regionList { overflow-y: auto; padding: 4px 0; }
.rp-group { padding: 7px 14px 3px; font-size: 0.75em; letter-spacing: 1.5px; color: var(--textColor2); }
.rp-item {
    display: flex;
    align-items: center;
    padding: 5px 14px 5px 20px;
    font-size: 1em;
    color: var(--textColor);
    cursor: pointer;
}
.rp-item:hover, .rp-item.sel { background-color: #d2d2d20f; color: var(--themeColor); }
.rp-item.rp-current { background-color: #d2d2d208; color: var(--themeColor); box-shadow: inset 3px 0 0 #d2d2d2; }   /* the region on screen */
.rp-item .n { margin-left: auto; font-size: 0.7857em; color: var(--textColor2); }

#regionMeta { font-size: 0.9286em; color: var(--textColor); display: flex; gap: 14px; flex-wrap: wrap; min-width: 11em; flex: 1 1 300px; overflow: hidden; }
#regionMeta > span { white-space: nowrap; }
#regionMeta .gates { flex: 0 0 100%; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* always its own line, cut with an ellipsis when squeezed */
#mapBar.nometa #regionMeta { display: none; }
#regionMeta .sep { color: var(--textColor2); }
#regionMeta a { color: var(--textColor); text-decoration: none; }
#regionMeta a:hover { color: var(--themeColor); }

.barGroup { display: flex; gap: 3px; margin-left: 8px; flex-shrink: 0; }
#liveGroup { margin-left: auto; }
.barLabel {
    font-size: 0.7143em;
    letter-spacing: 1.5px;
    color: var(--textColor2);
    align-self: center;
    padding-right: 7px;
}
.barBtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--borderColor31);   /* constant — selection never touches the frame */
    padding: 5px 8px;
    font-family: inherit;
    font-size: 0.8929em;
    color: var(--textColor2);
    cursor: pointer;
}
.barBtn svg { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.barBtn .bl { font-size: 0.7857em; letter-spacing: 0.4px; white-space: nowrap; }
#mapBar.compact .barBtn .bl { display: none; }   /* icons only, the name stays in the tooltip */
.barBtn:hover { color: var(--textColor); }
.barBtn-active {
    background-color: #d2d2d208;
    color: var(--themeColor);
    box-shadow: inset 3px 0 0 #d2d2d2;        /* the leading tick marks the active option */
}

/* ---------------- map ---------------- */

#mapArea { position: relative; flex: 1 1 auto; min-height: 0; }

#map {
    position: absolute;
    inset: 0;
    outline: none;
    cursor: grab;
    overflow: hidden;
}
#map:active { cursor: grabbing; }
#map svg { width: 100%; height: 100%; display: block; }
#map svg text { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; user-select: none; pointer-events: none; }

.sys-node { cursor: pointer; }
.sys-node rect.box { fill: #151515; stroke-width: 0.5; }   /* stroke colour = security status, set per system */
.sys-node:hover rect.box { stroke-width: 1.2; }
.sys-node text.nm { fill: #d2d2d2; font-size: 10.5px; }
.sys-node text.sc { font-size: 9.5px; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; }
.sys-node.hl rect.box { stroke-width: 1.4; }

.edge { stroke: #494949; stroke-width: 1; fill: none; }               /* same constellation: solid */
.edge-const { stroke-dasharray: 4 2; }                                 /* between constellations: tight dash */
.edge-region { stroke: #393939; stroke-dasharray: 8 4; }               /* to another region: wide dash */

.ext-node { cursor: pointer; }
.ext-node rect { fill: #212121; stroke: #464646; stroke-dasharray: 2 2; }
.ext-node text { fill: #999999; font-size: 9.5px; }
.ext-node text.rg { fill: #797979; font-size: 8.5px; font-style: italic; }
.ext-node:hover text { fill: #d2d2d2; }

.landing-ring  { fill: none; stroke: #ffffff; stroke-width: 1.5; }
/* navigation route (./?route=…) */
.route-leg  { stroke: #ffffff; stroke-width: 2.4; stroke-opacity: 0.85; stroke-linecap: round; }
.route-hop  { fill: #d2d2d2; font-size: 10px; letter-spacing: 0.5px; paint-order: stroke; stroke: #151515; stroke-width: 3px; }
.route-hop.route-end { fill: #ffffff; font-size: 11px; }
.route-ring { fill: none; stroke: #ffffff; stroke-width: 1.5; }
.landing-pulse { fill: none; stroke: #ffffff; stroke-width: 1.2; opacity: 0; }

.const-hull { fill: #d2d2d206; stroke: #d2d2d224; stroke-width: 0.5; stroke-dasharray: 16 8; }
.const-label { fill: #6a6a6a; font-size: 11.5px; letter-spacing: 1.5px; }
/* landing on a constellation (./?r=…&c=id): brighter hull + label, flashing in */
.const.hl .const-hull { fill: #d2d2d216; stroke: #d2d2d280; stroke-width: 1; stroke-dasharray: none; animation: hullFlash 1.8s ease-out; }
.const.hl .const-label { fill: #d2d2d2; }
@keyframes hullFlash { from { fill: #d2d2d248; stroke: #ffffff; } to { fill: #d2d2d216; stroke: #d2d2d280; } }

.no-labels text { display: none; }
svg[data-k="xs"] .sys-node text.sc { display: none; }

#mapTooltip {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    background-color: #0d0d0df2;
    border: 1px solid #3a3a3a;
    padding: 7px 11px;
    font-size: 0.8929em;
    color: var(--textColor);
    max-width: 260px;
}
#mapTooltip b { color: var(--themeColor); font-size: 0.9286em; }
#mapTooltip .tt { color: var(--textColor2); }

#mapNotice {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--textColor2);
    font-size: 1.0714em;
    text-align: center;
    padding: 0 30px;
}

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
    #mapBar { flex-wrap: wrap; gap: 8px; }
    #regionMeta { display: none; }
    .barGroup { margin-left: 0; }
    #regionPickerBtn { min-width: 0; font-size: 1.1429em; }
    #legnot { display: none; }
}

/* pre-launch editor: which regions have a hand-edited layout (tick) and which are still to do (dot) */
.rp-item.rp-edited::after { content: '✓'; margin-left: 8px; color: #48f0c0; font-size: 0.8571em; }
.rp-item.rp-todo::after { content: '○'; margin-left: 8px; color: #e0b040; font-size: 0.7143em; }

/* legend panel for the live overlay (top-left, like the universe map's panels) */
#mapLegend {
    position: absolute; z-index: 15; left: 12px; top: 12px;
    width: 23em; max-width: calc(100% - 24px); max-height: calc(100% - 24px); overflow-y: auto;
    background-color: #0d0d0deb; border: 1px solid var(--borderColor31);
    padding: 8px 0 6px; font-size: 1em; color: var(--textColor);
}
#mapLegend .lgTitle { padding: 2px 10px 6px; font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--textColor2); display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; }
#mapLegend .lgRow { display: flex; align-items: center; gap: 8px; padding: 4px 10px; min-height: 1.9em; }
#mapLegend .lgRow.click { cursor: pointer; }
#mapLegend .lgRow.click:hover { background-color: #d2d2d214; color: #ffffff; }
#mapLegend .lgRow .lgN { margin-left: auto; color: var(--textColor2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#mapLegend .lgRow.click:hover .lgN { color: var(--textColor); }
#mapLegend .lgRow .lgName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#mapLegend .lgRow .lgSub { color: var(--textColor2); font-size: 0.8571em; white-space: nowrap; }
#mapLegend .lgSw { width: 10px; height: 10px; flex-shrink: 0; border: 1px solid #00000080; }
#mapLegend .lgRing { width: 12px; height: 12px; flex-shrink: 0; border-radius: 3px; border: 1px solid; }
#mapLegend .lgLogo { width: 1.55em; height: 1.55em; flex-shrink: 0; border-radius: 2px; background-color: #d2d2d208; }
#mapLegend .lgBar { margin: 4px 10px 2px; height: 8px; background: linear-gradient(90deg, #8a2a2a, #d07800, #c8c020, #48f0c0); }
#mapLegend .lgScale { display: flex; justify-content: space-between; padding: 0 10px 4px; font-size: 0.7857em; color: var(--textColor2); }
#mapLegend .lgEmpty { padding: 4px 10px 6px; color: var(--textColor2); font-size: 0.8929em; }
@media (max-width: 700px) { #mapLegend { width: 15em; font-size: 0.8571em; } }
#mapLegend .lgN.cool { color: #3a8fb0; }
#mapLegend .lgPeriod { display: flex; gap: 3px; padding: 0 10px 6px; }
#mapLegend .lgP { background: none; border: 1px solid var(--borderColor31); padding: 3px 9px; font-family: inherit; font-size: 0.7857em; color: var(--textColor2); cursor: pointer; }
#mapLegend .lgP:hover { color: var(--textColor); }
#mapLegend .lgP-active { background-color: #d2d2d208; color: var(--themeColor); box-shadow: inset 3px 0 0 #d2d2d2; }
#mapLegend .lgNote { margin-top: 4px; padding: 6px 10px 4px; border-top: 1px solid #d2d2d20a; font-size: 0.7857em; color: var(--textColor2); }

/* right side panel: stations directory / activity charts (same tile idiom as the legend) */
#mapSide {
    position: absolute; z-index: 16; right: 12px; top: 12px;
    width: 27em; max-width: calc(100% - 24px); max-height: calc(100% - 24px);
    display: flex; flex-direction: column;
    background-color: #0d0d0deb; border: 1px solid var(--borderColor31);
    font-size: 1em; color: var(--textColor);
}
#mapSide .sdHead { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px; border-bottom: 1px solid var(--borderColor31); }
#mapSide .sdHead .sdTitle { font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--themeColor); flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mapSide .sdHead .sdNote { font-size: 0.7857em; color: var(--textColor2); white-space: nowrap; }
#mapSide .sdClose { background: none; border: 0; color: var(--textColor2); font-size: 1.1em; cursor: pointer; padding: 0 2px; line-height: 1; }
#mapSide .sdClose:hover { color: var(--themeColor); }
#mapSide .sdBody { overflow-y: auto; min-height: 0; padding: 6px 0 8px; }
#mapSide .sdTools { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px 8px; align-items: center; }
#mapSide .sdTools input {
    flex: 1 1 100%; background: none; border: 1px solid var(--borderColor31); outline: none; padding: 5px 10px;
    font-family: inherit; font-size: 0.9286em; color: var(--themeColor); margin-bottom: 4px;
}
#mapSide .sdTools input:focus { border-color: var(--themeColor); }
#mapSide .fchip { font-size: 0.7857em; letter-spacing: 0.5px; padding: 3px 8px; border: 1px solid var(--borderColor31); color: var(--textColor2); cursor: pointer; background: none; font-family: inherit; }
#mapSide .fchip:hover { color: var(--textColor); }
#mapSide .fchip.on { color: var(--themeColor); background-color: #d2d2d208; box-shadow: inset 3px 0 0 #d2d2d2; }
#mapSide .sysHead { display: flex; align-items: center; gap: 8px; padding: 6px 10px 3px; cursor: pointer; }
#mapSide .sysHead:hover { background-color: #d2d2d214; }
#mapSide .sysHead .sn { color: var(--themeColor); }
#mapSide .sysHead .cnt { margin-left: auto; color: var(--textColor2); font-size: 0.8571em; }
#mapSide .stRow { display: flex; flex-direction: column; gap: 3px; padding: 3px 10px 5px 24px; border-top: 1px solid #d2d2d20a; cursor: pointer; }
#mapSide .stRow:hover { background-color: #d2d2d214; }
#mapSide .stRow .stName { color: var(--textColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mapSide .stRow:hover .stName { color: var(--themeColor); }
#mapSide .stRow .stOwner { color: var(--textColor2); font-size: 0.8571em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mapSide .stRow .stSvc { display: flex; flex-wrap: wrap; gap: 3px; }
#mapSide .svc { font-size: 0.7143em; letter-spacing: 0.5px; padding: 1px 5px; border: 1px solid var(--borderColor31); color: var(--textColor2); }
#mapSide .svc.hit { color: var(--themeColor); border-color: #464646; }
#mapSide .sdEmpty { padding: 6px 10px; color: var(--textColor2); font-size: 0.8929em; }
#mapSide .sdSum { display: flex; gap: 14px; padding: 2px 10px 8px; color: var(--textColor2); font-size: 0.8571em; flex-wrap: wrap; }
#mapSide .sdSum b { font-weight: normal; color: var(--themeColor); }
#mapSide .graph { padding: 4px 10px 6px; }
#mapSide .gTitle { font-size: 0.7857em; letter-spacing: 1.5px; color: var(--textColor2); text-transform: uppercase; margin-bottom: 4px; display: flex; justify-content: space-between; }
#mapSide .chart { width: 100%; height: auto; display: block; background-color: #151515; border: 1px solid var(--borderColor31); }
#mapSide .chart .area { fill-opacity: 0.22; }
#mapSide .chart .line { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
#mapSide .chart .grid { stroke: #2a2a2a; stroke-width: 1; vector-effect: non-scaling-stroke; }
#mapSide .chart .tick { fill: #797979; font-size: 9px; font-family: 'Shentox Regular', 'Segoe UI', sans-serif; }
#mapSide .chart .pt { fill: transparent; }
#mapSide .chart .pt:hover { fill: #ffffff; }
#mapSide .secBadge { display: inline-block; min-width: 34px; text-align: center; font-size: 0.7143em; color: #151515; flex-shrink: 0; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; padding: 1px 7px; }
#mapSide.wide { width: 38em; }
#mapSide .sdSel { background: #151515; border: 1px solid var(--borderColor31); color: var(--textColor); font-family: inherit; font-size: 0.8571em; padding: 3px 6px; outline: none; }
#mapSide .sdSel:focus { border-color: var(--themeColor); }
#mapSide .sdGap { flex: 1 1 auto; }
#mapSide .tbl { display: flex; flex-direction: column; font-size: 0.9286em; }
#mapSide .thead, #mapSide .trow { display: grid; grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1fr) 28px 40px 46px 42px 52px 54px; gap: 6px; align-items: center; padding: 3px 10px; }
#mapSide .thead { font-size: 0.7143em; letter-spacing: 1.2px; color: var(--textColor2); position: sticky; top: 0; background-color: #0d0d0d; padding-bottom: 5px; border-bottom: 1px solid var(--borderColor31); }
#mapSide .thead span { cursor: pointer; white-space: nowrap; }
#mapSide .thead span:hover { color: var(--textColor); }
#mapSide .thead span.sorted { color: var(--themeColor); }
#mapSide .thead span.sorted::after { content: ' ▾'; }
#mapSide .thead span.sorted.asc::after { content: ' ▴'; }
#mapSide .thead .num, #mapSide .trow .num { text-align: right; }
#mapSide .trow { border-top: 1px solid #d2d2d20a; cursor: pointer; }
#mapSide .trow:hover { background-color: #d2d2d214; }
#mapSide .trow .c-n { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
#mapSide .trow .c-n b { font-weight: normal; color: var(--themeColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mapSide .trow .c-n small { font-size: 0.7857em; color: var(--textColor2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mapSide .trow .c-sov { color: var(--textColor); font-size: 0.8571em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
#mapSide .trow .sw { width: 8px; height: 8px; flex-shrink: 0; border: 1px solid #00000080; }
#mapSide .trow .num { font-variant-numeric: tabular-nums; color: var(--textColor); }
#mapSide .trow .num.hot { color: #ff7a5c; }
#mapSide .trow .dim { color: #4f4f4f; }
#mapSide .trow .ice { display: inline-block; width: 7px; height: 7px; border-radius: 2px; border: 1px solid #4aa8ff; margin-left: 4px; vertical-align: middle; }
#mapSide .sdFoot { padding: 5px 10px 6px; border-top: 1px solid var(--borderColor31); font-size: 0.7857em; color: var(--textColor2); }
@media (max-width: 900px) { #mapSide, #mapSide.wide { width: 18em; font-size: 0.8571em; } }

/* ---------------- system overlay ---------------- */
/* A middle panel: it takes the map with the same 12px margins as the other panels, and gives way to the
   legend on the left and the side panel on the right when they are open (js sets --soLeft / --soRight). */
#sysOverlay { position: absolute; inset: 0; z-index: 18; pointer-events: none; }
#sysSheet {
    position: absolute; top: 12px; bottom: 12px;
    left: var(--soLeft, 12px); right: var(--soRight, 12px);
    display: flex; flex-direction: column;
    pointer-events: auto;
    background-color: #0d0d0df2; border: 1px solid var(--borderColor31);
    animation: soIn 0.2s ease-out;
    transition: left 0.2s ease-out, right 0.2s ease-out;
}
@keyframes soIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
#sysSheet .soHead { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--borderColor31); flex-shrink: 0; }
#sysSheet .soLabel { font-size: 0.7143em; letter-spacing: 1.5px; color: var(--textColor2); }
#sysSheet .soName { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.0714em; color: var(--themeColor); letter-spacing: 1px; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sysSheet .soLink { font-size: 0.8571em; color: var(--textColor2); text-decoration: none; border: 1px solid var(--borderColor31); padding: 4px 10px; white-space: nowrap; }
#sysSheet .soLink:hover { color: var(--themeColor); border-color: var(--textColor2); }
#sysSheet .soClose { background: none; border: 1px solid var(--borderColor31); color: var(--textColor2); font-size: 1em; cursor: pointer; padding: 3px 9px; line-height: 1.2; font-family: inherit; }
#sysSheet .soClose:hover { color: var(--themeColor); border-color: var(--textColor2); }
#sysSheet .soBody { position: relative; flex: 1 1 auto; min-height: 0; }
#sysSheet iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
#sysSheet .soLoading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--textColor2); pointer-events: none; }
@media (max-width: 900px) { #sysSheet { left: 6px !important; right: 6px !important; top: 6px; bottom: 6px; } }