/* system-view.css - the system view console (1.11.9.114). See galaxy.js,
   SYSTEM VIEW CONSOLE.

   The orbits are the one thing this file leaves alone apart from the ring
   colour. Around them: the same moulded housing as the Nav Console and the
   Colony File for the top plate, a phosphor body index on the left, and the
   surface terminal on the right. --sx-acc is the holding faction's colour,
   set per system, and only tints the name plate rule and the target bracket.
   Loaded after eod-timer.css, which holds the older system view rules. */

#spSystemView{--ph:#7cf0a4;--ph-glow:rgba(66,255,126,.35);--amb:#f5c26a;--sx-acc:#7cf0a4;
  font-family:'Share Tech Mono',ui-monospace,monospace;background:#010403}

/* ── plate ── */
#spSysBar{position:relative;z-index:30;display:flex;align-items:center;gap:14px;padding:9px 16px 10px;border:0;flex-shrink:0;
  background:
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) 6px 6px/9px 9px no-repeat,
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) calc(100% - 6px) 6px/9px 9px no-repeat,
    linear-gradient(180deg,#1b201b,#0a0c0a);
  box-shadow:0 1px 0 #000,0 6px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 #262c26}
.sx-plate{flex:1;min-width:0;display:flex;align-items:baseline;gap:16px;padding:6px 14px;border-radius:4px;overflow:hidden;
  background:#050805;box-shadow:inset 0 1px 3px #000,0 0 0 1px #223a28;position:relative}
.sx-plate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sx-acc);opacity:.75;box-shadow:0 0 10px var(--sx-acc)}
#spSysBarTitle{font-size:17px;letter-spacing:.2em;color:var(--sx-acc);text-shadow:0 0 10px color-mix(in srgb,var(--sx-acc) 45%,transparent);white-space:nowrap}
#spSysBarSub{margin:0;font-size:11px;letter-spacing:.16em;color:#8fb89a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-k{flex:0 0 auto;height:32px;padding:0 14px;border:0;border-radius:5px;cursor:pointer;font-family:inherit;font-size:11px;letter-spacing:.16em;white-space:nowrap;
  background:linear-gradient(#262b26,#171a17);color:var(--amb);
  box-shadow:0 4px 0 #060706,0 6px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.sx-k:hover{color:#ffd88a}
.sx-k:active{transform:translateY(3px);box-shadow:0 1px 0 #060706,0 2px 3px rgba(0,0,0,.5)}

/* ── body: index + stage ── */
#spSysMain{flex:1;min-height:0;display:flex;position:relative;z-index:1}
#spSolarStage{flex:1;min-width:0}
#spSolarStage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:200;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
#spSolarStage svg ellipse{stroke:rgba(124,240,164,.2)!important;stroke-dasharray:2 5}
.sp-zone-cards{display:none!important}

#spSysIndex{flex:0 0 250px;box-sizing:border-box;overflow-y:auto;padding:12px 10px 14px 12px;position:relative;z-index:25;
  background:linear-gradient(90deg,rgba(4,10,6,.94),rgba(4,10,6,.82));box-shadow:inset -1px 0 0 #1e2a20,6px 0 18px rgba(0,0,0,.45)}
#spSysIndex::-webkit-scrollbar{width:6px}#spSysIndex::-webkit-scrollbar-thumb{background:rgba(124,240,164,.25);border-radius:3px}
.sx-ih{font-size:11px;letter-spacing:.24em;color:#c79a4a;padding:2px 2px 6px;margin-bottom:8px;border-bottom:1px dashed rgba(199,154,74,.35)}
.sx-row{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;padding:8px;margin-bottom:6px;border:0;border-radius:5px;cursor:pointer;font-family:inherit;
  background:#060c08;box-shadow:inset 0 0 0 1px #1b2a1e;color:var(--ph);transition:background .12s,box-shadow .12s}
.sx-row:hover{background:#0a160d;box-shadow:inset 0 0 0 1px #2f5a3a}
.sx-row.on{background:linear-gradient(90deg,rgba(124,240,164,.16),rgba(124,240,164,.04));box-shadow:inset 0 0 0 1px var(--ph),0 0 14px rgba(66,255,126,.15)}
.sx-n{font-size:10px;color:#5f9a72;letter-spacing:.1em;padding-top:2px;flex:0 0 auto}
.sx-row img{width:16px;height:16px;image-rendering:pixelated;flex:0 0 auto;margin-top:1px}
.sx-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sx-t b{font-weight:400;font-size:13px;color:#dfe9df;letter-spacing:.04em}
.sx-row.on .sx-t b{color:#b8ffd0;text-shadow:0 0 6px var(--ph-glow)}
.sx-t em{font-style:normal;font-size:10px;letter-spacing:.12em;color:#c79a4a}
.sx-t small{font-size:10px;color:#7fa88a;line-height:1.4}
.sx-hint{font-size:10px;letter-spacing:.08em;color:#4f7a5c;margin-top:10px;padding:0 2px;line-height:1.5}

/* ── orbit bodies: hover link from the index, target bracket on the open one ── */
#spSystemView .sp-orbit-arm .sp-planet-btn::before,
#spSystemView .sp-orbit-arm .sp-planet-btn::after{content:"";position:absolute;inset:-6px;border-radius:2px;pointer-events:none;opacity:0;transition:opacity .15s}
#spSystemView .sp-orbit-arm .sp-planet-btn::before{
  background:
    linear-gradient(var(--sx-acc),var(--sx-acc)) 0 0/10px 2px no-repeat,linear-gradient(var(--sx-acc),var(--sx-acc)) 0 0/2px 10px no-repeat,
    linear-gradient(var(--sx-acc),var(--sx-acc)) 100% 0/10px 2px no-repeat,linear-gradient(var(--sx-acc),var(--sx-acc)) 100% 0/2px 10px no-repeat,
    linear-gradient(var(--sx-acc),var(--sx-acc)) 0 100%/10px 2px no-repeat,linear-gradient(var(--sx-acc),var(--sx-acc)) 0 100%/2px 10px no-repeat,
    linear-gradient(var(--sx-acc),var(--sx-acc)) 100% 100%/10px 2px no-repeat,linear-gradient(var(--sx-acc),var(--sx-acc)) 100% 100%/2px 10px no-repeat;
  filter:drop-shadow(0 0 4px var(--sx-acc))}
#spSystemView .sp-orbit-arm.sp-hov .sp-planet-btn::before{opacity:.55}
#spSystemView .sp-orbit-arm.sp-sel .sp-planet-btn::before{opacity:1;animation:sxLock 1.6s ease-in-out infinite}
#spSystemView .sp-orbit-arm.sp-sel .sp-planet-btn::after{opacity:1;inset:-14px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--sx-acc) 60%,transparent);animation:sxSpin 9s linear infinite}
@keyframes sxLock{0%,100%{inset:-6px}50%{inset:-10px}}
@keyframes sxSpin{to{transform:rotate(360deg)}}
#spSystemView .sp-orbit-arm > div{font-family:'Share Tech Mono',ui-monospace,monospace!important;font-weight:400!important;letter-spacing:.12em!important}
#spSystemView .sp-orbit-arm.sp-sel > div{color:#b8ffd0!important;text-shadow:0 0 8px var(--ph-glow)!important}

/* ── surface terminal ── */
#spSysHUD{position:absolute;top:0;right:0;bottom:0;width:300px;z-index:40;display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);transition:transform .25s ease;box-sizing:border-box;padding:0 0 12px;
  background:linear-gradient(180deg,#141914,#090b09);box-shadow:-1px 0 0 #000,-8px 0 24px rgba(0,0,0,.6),inset 1px 0 0 #262c26;color:var(--ph)}
#spSysHUD::-webkit-scrollbar{width:6px}#spSysHUD::-webkit-scrollbar-thumb{background:rgba(124,240,164,.25);border-radius:3px}
.sx-hud-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 14px 10px;border-bottom:1px solid #1e241e}
#spHUDPlanetName{font-size:15px;letter-spacing:.16em;color:var(--amb);font-weight:400}
#spHUDColony{font-size:10px;letter-spacing:.18em;color:#6f8a74;margin-top:3px}
#spHUDSector{margin-top:4px;font-size:11px}
.sx-x{background:#121512;border:1px solid #2a302a;color:#8a6a34;border-radius:3px;width:24px;height:20px;padding:0;font-size:11px;line-height:1;cursor:pointer;font-family:inherit}
.sx-x:hover{color:#f0b454}
#spHUDZoneTabs{gap:4px;padding:8px 10px 0;border:0!important}
#spHUDZoneTabs button{border-radius:4px 4px 0 0!important;font-family:inherit!important;letter-spacing:.1em!important}

#spSysHUD .sp-hud-section{margin:10px 10px 0;padding:10px 12px;border:0;border-radius:8px/10px;position:relative;
  background:radial-gradient(ellipse at 50% 45%,#0a1a0e 0%,#05100a 65%,#020805 100%);
  box-shadow:inset 0 0 24px rgba(0,0,0,.9),inset 0 0 8px rgba(66,255,126,.07),0 0 0 2px #000,0 0 0 5px #121612,0 0 0 6px #2c332c}
#spSysHUD .sp-hud-section:empty{display:none}
#spSysHUD .sp-hud-label{font-size:10px;letter-spacing:.24em;color:#c79a4a;margin-bottom:8px;text-transform:uppercase}
.sx-bonus{font-size:12px;line-height:1.5;color:var(--ph);text-shadow:0 0 6px var(--ph-glow)}
.sx-bonus.warn{color:#f0b454;text-shadow:none;margin-top:4px}
.sx-bonus.dim{color:#5f7a66;text-shadow:none}
#spSysHUD .sp-price-row{border-bottom:1px dotted rgba(124,240,164,.16);padding:5px 0}
#spSysHUD .sp-price-row:hover{background:rgba(124,240,164,.06)!important}
#spSysHUD .sp-price-sym{color:#dfe9df;font-size:12px}
#spSysHUD .sp-price-name{color:#6f8a74;font-size:10px}
#spSysHUD .sp-price-val{color:var(--ph);font-family:inherit;text-shadow:0 0 6px var(--ph-glow)}
#spSysHUD .sp-ctrl-label{font-size:11px;letter-spacing:.08em}
#spSysHUD .sp-ctrl-bar{background:#0b110c;height:5px;box-shadow:inset 0 0 0 1px #1b261d;border-radius:0}
#spSysHUD .sp-ctrl-fill{border-radius:0}
#spSysHUD .sp-fund-btn{height:30px;border:0!important;border-radius:5px;font-family:inherit;font-size:11px;letter-spacing:.12em;
  background:linear-gradient(#262b26,#171a17);box-shadow:0 3px 0 #060706,0 4px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
#spSysHUD .sp-fund-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #060706}
#spSysHUD .sp-fund-row{margin:0 0 7px}
#spSysHUD input{background:#050805!important;border:1px solid #2c4a34!important;color:var(--ph)!important;font-family:inherit!important;border-radius:3px!important}

/* ── narrow ── */
@media (max-width:760px){
  #spSysBar{gap:8px;padding:8px 10px}
  .sx-k{padding:0 10px;font-size:10px;letter-spacing:.1em}
  .sx-plate{flex-direction:column;gap:2px;padding:4px 10px}
  #spSysBarTitle{font-size:14px}
  #spSysBarSub{font-size:9px;letter-spacing:.1em}
  #spSysMain{flex-direction:column-reverse}
  #spSysIndex{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:8px;box-shadow:inset 0 1px 0 #1e2a20}
  .sx-ih,.sx-hint{display:none}
  .sx-row{flex:0 0 auto;width:auto;max-width:200px;margin:0}
  .sx-t small{display:none}
  #spSysHUD{top:auto;left:0;width:auto;height:58%;transform:translateY(100%);border-radius:10px 10px 0 0}
}

/* Phones: the app's top bar and bottom nav sit at 9990-9996 and covered the
   system view's own plate, so on a phone there was no way back to the galaxy
   but the browser. The system view is a full-screen mode with its own GALAXY
   key, so it goes over them. Toasts (10001) and the Colony File stay above. */
body.fm-mobile #spSystemView{z-index:9997}