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

[hidden] { display: none !important; }

#mainWrapper { overflow: hidden; }

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

#uniBar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;        /* never a second line: js/bar.js drops the button labels, then the meta line, instead */
    gap: 18px;
    padding: 8px 14px;
    background-color: var(--backgroundColor);
    border-bottom: 1px solid var(--borderColor31);
    flex-shrink: 0;
    position: relative;
    z-index: 15;
}

#uniTitle {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif;
    font-size: 1.3571em;
    color: var(--themeColor);
    letter-spacing: 3px;
    white-space: nowrap;
}

/* the meta line yields first when the bar gets crowded (ellipsis, then hidden) */
#uniMeta { font-size: 0.9286em; color: var(--textColor); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
#uniBar.nometa #uniMeta, #uniBar.nometa #uniLive { display: none; }
#uniLive { font-size: 0.8214em; color: var(--textColor2); white-space: nowrap; }
#uniLive:empty { display: none; }

.barGroup { display: flex; gap: 3px; margin-left: 14px; align-items: stretch; 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;
}

#uniFilter {
    background: none;
    border: 1px solid var(--borderColor31);
    outline: none;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 0.8929em;
    color: var(--themeColor);
    width: 200px;
    min-width: 100px;
    flex: 0 1 200px;          /* the search box is what shrinks when the bar gets tight */
}
#viewGroup { flex-shrink: 1; min-width: 0; }
#uniFilter:focus { border-color: var(--themeColor); }

.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; }
#uniBar.compact .barBtn .bl { display: none; }   /* icons only, the name stays in the tooltip */
#periodGroup .barBtn { padding: 5px 10px; }
#periodGroup .barBtn span { font-size: 0.7857em; letter-spacing: 0.4px; }
.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 ---------------- */

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

#uniCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    outline: none;
    cursor: grab;
    display: block;
}
#uniCanvas:active { cursor: grabbing; }

#uniTooltip {
    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;
}
#uniTooltip b { color: var(--themeColor); font-size: 0.9286em; }
#uniTooltip .tt { color: var(--textColor2); }

#uniNotice {
    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;
    pointer-events: none;
}

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

@media (max-width: 1400px) {
    #uniMeta { display: none; }
}
@media (max-width: 900px) {
    #uniBar { flex-wrap: wrap; gap: 8px; }
    #uniFilter { width: 140px; }
    #legnot { display: none; }
}