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

[hidden] { display: none !important; }

#mainWrapper { overflow-y: auto; }

/* ---------------- shared buttons ---------------- */
.barGroup { display: flex; gap: 3px; }
.barBtn {
    background: none;
    border: 1px solid var(--borderColor31);
    padding: 6px 13px;
    font-family: inherit;
    font-size: 0.8929em;
    color: var(--textColor2);
    cursor: pointer;
    text-decoration: none;
}
.barBtn:hover { color: var(--textColor); }
.sysLink { color: var(--themeColor); text-decoration: none; }
.sysLink:hover { text-decoration: underline; }
.dim { color: var(--textColor2); font-size: 0.8571em; }

/* activity tiles */
#actGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.actTile { min-width: 0; }
.actLabel { font-size: 0.7857em; letter-spacing: 1.5px; color: var(--textColor2); text-transform: uppercase; }
.actNums { display: flex; gap: 14px; margin: 4px 0 8px; font-size: 0.8571em; color: var(--textColor2); flex-wrap: wrap; }
.actNums b { font-weight: normal; color: var(--themeColor); font-size: 1.1667em; font-variant-numeric: tabular-nums; }
.actBars { display: flex; align-items: flex-end; gap: 2px; height: 46px; border-bottom: 1px solid var(--borderColor31); }
.actBars .bar { flex: 1 1 0; min-width: 2px; opacity: 0.85; }
.actBars .bar:hover { opacity: 1; }

/* holder (sov / FW / NPC) */
.holderHead { display: flex; align-items: center; gap: 12px; }
.holderName { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.1429em; color: var(--fc, var(--themeColor)); display: flex; flex-direction: column; min-width: 0; }
.holderSub { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: 0.75em; color: var(--textColor2); }
.chip { width: 12px; height: 12px; margin-left: auto; flex-shrink: 0; }
.holderHead .tag { margin-left: auto; }
.holderLine { margin-top: 10px; color: var(--textColor2); font-size: 0.8571em; }
.holderLine a { color: var(--textColor); text-decoration: none; }
.holderLine a:hover { color: var(--themeColor); }
#panelHolder .score { margin-top: 10px; }
.structs, .camps { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.struct, .camp { display: flex; align-items: center; gap: 12px; font-size: 0.9286em; padding: 4px 0; border-top: 1px solid #d2d2d20a; }
.struct .stType { color: var(--textColor); }
.struct .stAdm { color: var(--textColor2); }
.struct .stAdm b { font-weight: normal; color: var(--themeColor); }
.struct .stVuln { margin-left: auto; }
.camp .timer { margin-left: auto; }
.incursion { margin-top: 10px; padding: 6px 10px; border: 1px solid #6a3a3a; color: #f0a0a0; font-size: 0.8571em; }
.st-stable     { color: var(--textColor2); }
.st-uncontested { color: var(--textColor2); }
.st-contested  { border-color: #7d6b3c; color: #e0b040; }
.st-vulnerable { border-color: #8a3a2a; color: #f06000; }
.st-captured   { border-color: #4a7d8a; color: #7ec3d8; }

/* history */
.hRow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid #d2d2d20a; font-size: 0.9286em; }
.hRow:first-child { border-top: 0; }
.hRow .when { width: 64px; flex-shrink: 0; text-align: left; }
.hRow .hFrom, .hRow .hTo { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hRow .hFrom { color: var(--textColor2); }
.hRow .arrow { color: var(--textColor2); }
.hRow .hKind { margin-left: auto; font-size: 0.7857em; letter-spacing: 1px; color: var(--textColor2); }


/* ---------------- summary strip ---------------- */

#sysWrap { padding: 16px 18px 26px; font-size: 1em; }

/* ---------------- two-column layout: action left, reference right -------- */

.panel {
    background-color: var(--backgroundColor);
    border: 1px solid var(--borderColor31);
    padding: 12px 14px 14px;
    min-width: 0;
}
.panelTitle {
    margin: 0 0 10px;
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif;
    font-size: 0.8571em;
    letter-spacing: 2px;
    color: var(--themeColor);
    font-weight: normal;
}
.panelList { display: flex; flex-direction: column; font-size: 1em; }
.panelEmpty { color: var(--textColor2); font-size: 0.8929em; padding: 8px 0; }

/* ---------------- aligned rows (grid per panel) ---------------- */

.thead, .trow {
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}
.trow { border-top: 1px solid #d2d2d20a; }
.thead {
    font-size: 0.7143em;
    letter-spacing: 1.5px;
    color: var(--textColor2);
    padding-bottom: 4px;
}


/* entity = logo + label as one unit */
.ent { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ent .entName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--textColor); }
.elogo { flex-shrink: 0; border-radius: 2px; background-color: #d2d2d208; }

/* sov transfer: from → to */
.transfer { display: flex; align-items: center; gap: 7px; min-width: 0; }
.transfer .arrow { color: var(--textColor2); flex-shrink: 0; }

.when { color: var(--textColor2); font-size: 0.8571em; white-space: nowrap; text-align: right; }
.timer { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; color: var(--textColor); }
.adm { text-align: right; font-variant-numeric: tabular-nums; }

.hot  { color: #f06000; }
.warm { color: #e0b040; }

.tag {
    font-size: 0.7143em;
    letter-spacing: 1px;
    padding: 2px 0;
    border: 1px solid var(--borderColor31);
    color: var(--textColor);
    text-align: center;
    text-transform: uppercase;
}
.tag-ihub { border-color: #7d6b3c; color: #c0a060; }
.tag-tcu  { border-color: #4a7d8a; color: #7ec3d8; }

/* defender score */
.score { display: flex; align-items: center; gap: 6px; }
.scoreWrap { flex: 1 1 auto; height: 7px; background-color: #d2d2d20d; }
.scoreBar { display: block; height: 100%; background-color: #48f0c0; }
.scorePct { font-size: 0.7857em; color: var(--textColor2); width: 32px; text-align: right; font-variant-numeric: tabular-nums; }


#sysWrap { display: flex; flex-direction: column; gap: 14px; }
#sysTabs { margin-top: 2px; }
.pane { display: flex; flex-direction: column; gap: 14px; }
.panelHead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.panelHead .panelTitle { margin: 0; }
.panelNote { margin-top: 10px; color: var(--textColor2); font-size: 0.8571em; }

/* 1. information tile: hero band (emblem · name · holder · place) then three content-sized sections */
#infoHead { display: block; }
.hero { display: flex; align-items: center; gap: 18px; padding: 8px 0 12px; border-bottom: 1px solid var(--borderColor31); }
.hero .whoImg { flex: 0 0 auto; }
.whoImg { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.whoImg .elogo { border-radius: 4px; }
/* occupied system: original owner's emblem faded behind, occupier's in front */
.whoPair { position: relative; display: block; width: 64px; height: 64px; }
.whoPair .elogo { position: absolute; top: 0; left: 0; }
.whoPair .elogo:first-child { transform: translate(-16px, -10px) scale(0.75); opacity: 0.45; filter: grayscale(0.6); }
.whoPair .elogo:last-child { transform: translate(8px, -2px); box-shadow: 0 0 0 2px #1a1a1a; }
.heroText { flex: 1 1 auto; min-width: 0; }
.heroName { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.2857em; color: var(--themeColor); letter-spacing: 1px; display: flex; align-items: baseline; gap: 10px; }
.heroName a { color: inherit; text-decoration: none; }
.heroName a:hover { text-decoration: underline; }
.heroUni { display: inline-flex; align-self: center; margin-right: 2px; color: var(--textColor2); }
.heroUni:hover { color: var(--themeColor); text-decoration: none !important; }
.heroUni svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.heroSec { font-size: 0.8889em; }
.heroTrue { font-size: 0.7222em; color: var(--textColor2); letter-spacing: 0; font-family: 'Shentox Regular', 'Segoe UI', sans-serif; }
.heroSub { margin-top: 4px; }
.heroWho { color: var(--fc, var(--themeColor)); }
.heroPlace { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: var(--textColor); white-space: nowrap; }
.heroLinks .barBtn { padding: 4px 11px; }
.hubJ { color: var(--textColor); text-decoration: none; }
.hubJ b { font-weight: normal; color: var(--themeColor); }
.hubJ:hover b { text-decoration: underline; }
.heroCrumb { display: flex; align-items: center; }
.heroCrumb a { color: var(--themeColor); text-decoration: none; }
.heroCrumb a:hover { text-decoration: underline; }
.heroCrumb .sep { color: var(--textColor2); margin: 0 6px; }
.heroCrumb .tag-occ { margin-left: 12px; }
.tag-occ { margin-left: 8px; border-color: #7d6b3c; color: #e0b040; }
#infoHead .tag { padding: 2px 7px; }
/* three equal sections (a third each). When the tile shrinks they give way in order: the holder section
   first (down to 220px of content), then the activity boxes, and the system list last — none of them
   ever goes below its content. The rule between two sections has 32px of air on each side. */
.heroBody { display: flex; align-items: stretch; padding-top: 4px; }
.iCol { min-width: 0; flex: 1 1 33.333%; }
.heroBody .facts { flex-shrink: 0.001; min-width: max-content; padding-right: 32px; }
.heroBody .kpis  { flex-shrink: 1;     min-width: max-content; padding: 0 32px; border-left: 1px solid var(--borderColor31); }
.heroBody .extra { flex-shrink: 1000;  min-width: 252px;       padding-left: 32px; border-left: 1px solid var(--borderColor31); }
/* fact rows: key · dotted leader · right-aligned value, no borders */
.iRow, .iHead { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.iHead { justify-content: space-between; padding-top: 6px; font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--themeColor); }
.iRow .iL { color: var(--textColor2); flex: 0 0 auto; white-space: nowrap; }
.iRow .iDots { flex: 1 1 18px; min-width: 18px; height: 3px; margin: 0 2px; background: radial-gradient(circle, #d2d2d259 0.9px, transparent 1.3px) left center / 5px 3px repeat-x; }
.iRow .iV { color: var(--textColor); white-space: nowrap; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: flex-end; gap: 4px; text-align: right; }
.iRow .iV b { font-weight: normal; color: var(--themeColor); }
.iRow .iV a { color: var(--themeColor); text-decoration: none; }
.iRow .iV a:hover { text-decoration: underline; }
.iRow .ent { display: inline-flex; align-items: center; gap: 5px; }
/* activity boxes: 2 × 2, every box as wide as the widest; 1 h strongest → 7 d faded */
.kpiGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; padding-top: 6px; }   /* 2 × 2, every box as wide as the widest */
.kpi { padding: 6px 10px 7px; border: 1px solid var(--borderColor31); background-color: #d2d2d204; white-space: nowrap; }
.kpiL { font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--textColor2); }
.kpiMain { margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpiMain .a1 { font-family: 'Shentox Bold', 'Segoe UI', sans-serif; color: var(--themeColor); }
.kpiU { font-size: 0.7857em; color: var(--textColor2); margin-left: 5px; letter-spacing: 0.5px; }
.kpiRest { display: flex; gap: 14px; margin-top: 2px; color: var(--textColor); font-variant-numeric: tabular-nums; }
.kpiRest .a7 { opacity: 0.75; }
.icoLink { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--textColor); }
.icoLink:hover { color: var(--themeColor); }
.icoLink .ico { display: block; }
.extra .score { margin: 8px 0 6px; }
.extra .chip { width: 12px; height: 12px; }
.struct, .camp { display: flex; align-items: center; gap: 10px; font-size: 0.9286em; padding: 4px 0; border-top: 1px solid #d2d2d20a; }
.struct .stType { color: var(--textColor); }
.struct .stAdm { color: var(--textColor2); }
.struct .stAdm b { font-weight: normal; color: var(--themeColor); }
.struct .stVuln, .camp .timer { margin-left: auto; white-space: nowrap; }
.holderLine { margin-top: 8px; color: var(--textColor2); font-size: 0.8571em; }
.holderLine a { color: var(--textColor); text-decoration: none; }
.holderLine a:hover { color: var(--themeColor); }
.incursion { margin-top: 8px; padding: 6px 10px; border: 1px solid #6a3a3a; color: #f0a0a0; font-size: 0.8571em; }
.st-uncontested { color: var(--textColor2); }
.st-contested  { border-color: #7d6b3c; color: #e0b040; }
.st-vulnerable { border-color: #8a3a2a; color: #f06000; }
.st-captured   { border-color: #4a7d8a; color: #7ec3d8; }

/* 2. the two maps */
#twoMaps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#miniWrap, #sysMapWrap { border: 1px solid var(--borderColor31); background-color: #151515; overflow: hidden; min-height: 320px; }
#miniMap, #sysMap { display: block; width: 100%; }
#miniMap text, #sysMap text { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; pointer-events: none; }
.mEdge { stroke: #494949; stroke-width: 1; }
.mEdge-region { stroke: #393939; stroke-dasharray: 8 4; }
.mEdge-far { stroke: #353535; }
.mFar text { fill: #7a7a7a; font-size: 8.5px; }
.mFar.ext text { font-style: italic; }
.mNode rect { fill: #151515; stroke-width: 0.5; }
.mNode text.mn { fill: #d2d2d2; font-size: 10.5px; }
.mNode text.ms { font-size: 9.5px; }
.mNode.ext rect { fill: #212121; stroke: #464646; stroke-dasharray: 2 2; }
.mNode.ext text.mn { fill: #999999; }
.mNode.hop0 rect { stroke-width: 1.4; }
.mNode:hover rect { stroke-width: 1.2; fill: #1c1c1c; }
.mRing { fill: none; stroke: #ffffff; stroke-width: 1.2; }
#gateChips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.gate { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--borderColor31); color: var(--textColor); text-decoration: none; font-size: 0.8929em; }
.gate:hover { color: var(--themeColor); border-color: var(--textColor2); }
.gate .gRegion { color: var(--textColor2); font-style: italic; font-size: 0.8571em; }
/* system map marks */
.orbit { fill: none; stroke: #2e2e2e; stroke-width: 0.8; stroke-dasharray: 3 3; }
.oSun { fill: #f4e28a; }
.oPlanet text { fill: #b9b9b9; font-size: 9px; }
.oMoon { fill: #6a6a6a; }
.oBelt path { fill: none; stroke: #9fc3e8; stroke-width: 1; }
.oStation rect { fill: #151515; stroke: #d2d2d2; stroke-width: 1; }
.oStation:hover rect { fill: #d2d2d2; }
.oGate circle { fill: #151515; stroke: #d2d2d2; stroke-width: 1.2; }
.oGate .gateTri { fill: #d2d2d2; stroke: none; }
.oGate:hover circle { fill: #2a2a2a; }
.oGate text { fill: #999999; font-size: 8.5px; }
#sysMapWrap { position: relative; overflow: visible; }
.mapTip { position: absolute; z-index: 5; pointer-events: none; background-color: #0d0d0df2; border: 1px solid #3a3a3a; padding: 6px 10px; font-size: 0.8571em; color: var(--textColor); max-width: 320px; line-height: 1.4; }
.mapTip div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapTip .tg { width: 14px; height: 14px; vertical-align: -3px; margin-right: 6px; }
#sysMapLegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 0.8214em; color: var(--textColor2); align-items: center; }
#sysMapLegend span { display: inline-flex; align-items: center; gap: 5px; }
.lg { display: inline-block; width: 8px; height: 8px; }
.lg.sun { border-radius: 50%; background: #f4e28a; }
.lg.planet { border-radius: 50%; background: #5ccf6a; }
.lg.moon { border-radius: 50%; background: #6a6a6a; width: 4px; height: 4px; }
.lg.belt { transform: rotate(45deg); border: 1px solid #9fc3e8; width: 6px; height: 6px; }
.lg.station { border: 1px solid #d2d2d2; }
.lg.sgate { width: 8px; height: 8px; border: 1px solid #d2d2d2; border-radius: 50%; position: relative; box-sizing: border-box; }
.lg.sgate::after { content: ''; position: absolute; left: -1px; top: 1px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 3px solid #d2d2d2; }

/* 3. tabs content */
.thead.st, .trow.st { grid-template-columns: 36px minmax(220px, 1.3fr) minmax(160px, 1fr) minmax(240px, 2fr); }
.stImg { display: flex; align-items: center; }
.pimg { border-radius: 50%; flex-shrink: 0; }
.stName { color: var(--textColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stSvc { display: flex; flex-wrap: wrap; gap: 4px; }
.svc { font-size: 0.7143em; letter-spacing: 0.5px; padding: 1px 6px; border: 1px solid var(--borderColor31); color: var(--textColor2); }
.svc.key { color: var(--textColor); border-color: #464646; }
.thead.cel, .trow.cel { grid-template-columns: minmax(160px, 1.2fr) minmax(90px, 1fr) 60px 60px 70px 100px; }
.celName { display: flex; align-items: center; gap: 10px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.celFoot { padding-top: 8px; color: var(--textColor2); font-size: 0.8571em; }
.graphRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.graph { min-width: 0; }
.gTitle { font-size: 0.7857em; letter-spacing: 1.5px; color: var(--textColor2); text-transform: uppercase; margin-bottom: 4px; }
.chart { width: 100%; height: auto; display: block; background-color: #151515; border: 1px solid var(--borderColor31); }
.chart .area { fill-opacity: 0.22; }
.chart .line { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.chart .grid { stroke: #2a2a2a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .tick { fill: #797979; font-size: 9px; font-family: 'Shentox Regular', 'Segoe UI', sans-serif; }
.chart .pt { fill: transparent; }
.chart .pt:hover { fill: #ffffff; }
.barGroup { display: flex; gap: 3px; }
/* victim and final blow are capped so the two mirrored parties stay close; the ship column takes the slack */
.thead.kl, .trow.kl { grid-template-columns: minmax(150px, 1fr) minmax(170px, 230px) minmax(170px, 230px) 70px 90px 90px 70px; }
.trow.kl .drop { color: #7ec3d8; }
.thead.kl span:nth-child(3) { text-align: right; }
.trow.kl { cursor: pointer; }
.trow.kl:hover { background-color: #d2d2d206; }
.trow.kl.npc { opacity: 0.8; }
.party { display: flex; align-items: center; gap: 8px; min-width: 0; }
.party .pImg { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.party .pImg img { border-radius: 2px; }
.party .pText { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.party .pName { color: var(--textColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party .pOrg { display: flex; align-items: center; gap: 5px; color: var(--textColor2); font-size: 0.8571em; min-width: 0; }
.party .pOrg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party.rev { flex-direction: row-reverse; text-align: right; }
.party.rev .pText { align-items: flex-end; }
.party.rev .pOrg { flex-direction: row-reverse; }
.ticon { flex-shrink: 0; border-radius: 2px; }
.isk { color: var(--themeColor); }
.trow.kl .when { text-align: right; cursor: help; }
.tag-solo { margin-left: 6px; border-color: #7d6b3c; color: #e0b040; }
.tag-loc { margin-left: 6px; border-color: #4a7d8a; color: #7ec3d8; }
.thead.ag, .trow.ag { grid-template-columns: minmax(160px, 1.3fr) 70px minmax(110px, 1fr) minmax(150px, 1.2fr) minmax(160px, 1.4fr); }
.agName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agSt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8571em; }
.hRow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid #d2d2d20a; font-size: 0.9286em; }
.hRow:first-child { border-top: 0; }
.hRow .when { width: 64px; flex-shrink: 0; text-align: left; }
.hRow .hFrom, .hRow .hTo { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hRow .hFrom { color: var(--textColor2); }
.hRow .arrow { color: var(--textColor2); }
.hRow .hKind { margin-left: auto; font-size: 0.7857em; letter-spacing: 1px; color: var(--textColor2); }

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

@media (max-width: 1100px) {
    .heroBody { flex-wrap: wrap; }
    .heroBody .facts, .heroBody .kpis { flex-basis: 50%; }
    .heroBody .kpis { padding-right: 0; }
    .heroBody .extra { flex-basis: 100%; border-left: 0; padding-left: 0; padding-top: 10px; }
    #twoMaps { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .heroBody .iCol { flex-basis: 100%; min-width: 0; padding: 0; border-left: 0; }
    .heroBody .kpis, .heroBody .extra { padding-top: 10px; }
    .hero { flex-wrap: wrap; }
    .heroPlace { align-items: flex-start; }
    .graphRow { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    #legnot { display: none; }
}

/* entity links: holder emblem / name, faction rows, pirates, station owners, agents' corporations, kill parties */
a.ent, .ent a.entName, a.heroWho { color: inherit; text-decoration: none; }
a.ent:hover, .ent a.entName:hover, a.heroWho:hover { text-decoration: underline; }
.whoImg a { display: block; line-height: 0; }
.party .pOrg a { color: inherit; text-decoration: none; }
.party .pOrg a:hover { color: var(--themeColor); text-decoration: underline; }

/* ---------------- embedded in the region map's overlay (?embed=1) ---------------- */
.embed #mainTop, .embed #LegalNotice { display: none; }
.embed #mainWrapperWrapper { background: none; }
.embed #sysWrap { padding-top: 12px; }