/* WEBSITEDeploy1.0 / inline spacecraft viewers. Never move the grid with the craft. */
#panel-exploration .ship-layout {
  grid-template-columns: minmax(0, 1.72fr) minmax(250px, .78fr);
  align-items: stretch;
  gap: 18px;
  margin: 24px 0 24px;
}
#panel-exploration > p:not(.kicker) { max-width: 87ch; }
#panel-exploration .ship-facts {
  background: linear-gradient(145deg, #111c32, #0b1427 72%);
  border-color: #45627a;
  display: flex;
  flex-direction: column;
}
#panel-exploration .ship-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
#panel-exploration .ship-stats strong { font-size: 14px; }
#panel-exploration .ship-aside-note { color:#a9bcd4; font-size:12px; margin-top:auto; padding-top:20px; }
#panel-exploration .ship-reference-heading { margin: 30px 0 14px; }
#panel-exploration .ship-reference-heading h4 { font-size:clamp(21px,2.6vw,27px); }
#panel-exploration .ship-viewer {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0a1628;
  border-color: #395673;
  box-shadow: 0 12px 42px #0005;
}
#panel-exploration .viewer-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 11px 13px;
  min-height: 55px;
  border-bottom:1px solid #38516c;
  background:linear-gradient(90deg,#111c32,#0c182a);
}
#panel-exploration .viewer-group {
  color: #77d8f4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
}
#panel-exploration .viewer-actions { display:flex; align-items:center; gap:7px; }
#panel-exploration .viewer-actions button {
  color:#d6eafb;
  background:#192c45;
  border:1px solid #48647d;
  cursor:pointer;
  border-radius:5px;
  font-weight:500;
  height:30px;
  min-width:31px;
  padding: 2px 9px;
  line-height:1;
}
#panel-exploration .viewer-actions button:hover:not(:disabled) { background:#2a486a; border-color:#78c9ec; }
#panel-exploration .viewer-actions button:focus-visible,
#panel-exploration .ship-viewport:focus-visible,
#panel-exploration .ship-thumbnail:focus-visible { outline: 2px solid #b4e9ff; outline-offset: -2px; }
#panel-exploration .viewer-actions button:disabled { opacity:.35; cursor:default; }
#panel-exploration .viewer-scale {
  display:inline-block;
  width:42px;
  text-align:center;
  font: 12px/1.1 ui-monospace,Consolas,monospace;
  color:#b9d5ed;
}
#panel-exploration .ship-viewport {
  position:relative;
  height:clamp(320px,34vw,480px);
  min-height:320px;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  touch-action:pan-y;
  cursor:zoom-in;
  background-color:#0a172a;
  background-image:
    linear-gradient(#48708e28 1px,transparent 1px),
    linear-gradient(90deg,#48708e28 1px,transparent 1px),
    linear-gradient(#5786a02a 1px,transparent 1px),
    linear-gradient(90deg,#5786a02a 1px,transparent 1px),
    radial-gradient(ellipse at center,#192b45 0%,#0a1426 76%);
  background-size:22px 22px,22px 22px,110px 110px,110px 110px,100% 100%;
  background-position:center center;
}
#panel-exploration .ship-viewport.can-pan { cursor:grab; touch-action:none; }
#panel-exploration .ship-viewport.is-dragging { cursor:grabbing; }
#panel-exploration .ship-viewport > img {
  display:block;
  position:absolute;
  z-index:1;
  left:50%;top:50%;
  width:90%; height:86%;
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  will-change:transform;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  background:transparent;
  cursor:inherit;
}
#panel-exploration .viewport-crosshair {
  pointer-events:none;
  position:absolute;
  z-index:2;
  inset:0;
  opacity:.43;
  background:linear-gradient(to right,transparent calc(50% - .5px),#8cc4de38 50%,transparent calc(50% + .5px)),
             linear-gradient(to bottom,transparent calc(50% - .5px),#8cc4de38 50%,transparent calc(50% + .5px));
}
#panel-exploration .viewport-scale-key,
#panel-exploration .viewport-zoom-hint {
  z-index:3;
  position:absolute;
  bottom:12px;
  font:10px/1.3 ui-monospace,Consolas,monospace;
  letter-spacing:.07em;
  pointer-events:none;
  color:#9dbbd1;
  text-shadow: 0 1px 4px #0b1727;
}
#panel-exploration .viewport-scale-key { left:14px; }
#panel-exploration .viewport-zoom-hint { right:14px; }
#panel-exploration .ship-viewer figcaption {
  padding: 11px 15px;
  font-size: 12px;
  color:#c9e4f7;
  background:#0e1a2d;
  border-top:1px solid #38516c;
}
#panel-exploration .orthographic-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
#panel-exploration .aev-thumbnail-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
#panel-exploration .orthographic-grid figure,
#panel-exploration .orthographic-grid figure:nth-child(-n+2) { grid-column:auto; }
#panel-exploration .gallery-tile { min-width:0; background:#101b2d; }
#panel-exploration .gallery-tile figcaption {
  text-align:center;
  font-size:11px;
  line-height:1.5;
  padding:9px 5px;
  letter-spacing:.085em;
  color:#abbcd4;
  text-transform:uppercase;
}
#panel-exploration .ship-thumbnail {
  width:100%;
  height:135px;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:4px;
  background-color:#0b172a;
  background-image:
    linear-gradient(#52759220 1px,transparent 1px),
    linear-gradient(90deg,#52759220 1px,transparent 1px);
  background-size:19px 19px;
  cursor:pointer;
}
#panel-exploration .ship-thumbnail img {
  width:100%;height:100%;
  display:block;
  object-fit:contain;
  background:transparent;
  transition:filter .18s,transform .18s;
  pointer-events:none;
}
#panel-exploration .ship-thumbnail:hover img { transform:scale(1.035);filter:brightness(1.12); }
#panel-exploration .gallery-tile:has(.ship-thumbnail[aria-pressed="true"]) {
  border-color:#66c7ed;
  box-shadow:0 0 0 1px #66c7ed55,0 0 17px #478fb43d;
}
#panel-exploration .gallery-tile:has(.ship-thumbnail[aria-pressed="true"]) figcaption{color:#8ae2ff;}
#panel-exploration .aev-section-heading { margin-top:62px; padding-top:32px; border-top:1px solid #34516b; }
#panel-exploration .aev-section-heading h3 { font-size:clamp(26px,3vw,34px); }
#panel-exploration .aev-section-heading > p:last-child { color:#b9c9e0;max-width:82ch; }
#panel-exploration .aev-layout { grid-template-columns:minmax(0,1.72fr) minmax(250px,.78fr); }
#panel-exploration .docking-note {
  display:grid;
  grid-template-columns:minmax(135px,.23fr) 1fr;
  gap:24px;
  margin:35px 0 22px;
  padding:22px 25px;
  background:linear-gradient(110deg,#14253a,#101a2d);
  border:1px solid #35536c;
  border-left:3px solid #4ac3eb;
  border-radius:10px;
}
#panel-exploration .docking-note-tag {color:#74d8f8; font-size:10px;letter-spacing:.15em;font-weight:700;}
#panel-exploration .docking-note strong { font-weight:600;color:#e0f2ff; }
#panel-exploration .docking-note p {color:#b6c9df;margin:7px 0 0;font-size:13px;}
@media(max-width:980px) {
  #panel-exploration .ship-layout,#panel-exploration .aev-layout { grid-template-columns:1fr; }
  #panel-exploration .ship-facts { display:block; }
  #panel-exploration .ship-aside-note { margin:15px 0 0; }
  #panel-exploration .orthographic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:620px) {
  #panel-exploration .viewer-topline { flex-wrap:wrap; }
  #panel-exploration .viewer-group {font-size:9px;}
  #panel-exploration .viewer-actions {margin-left:auto;}
  #panel-exploration .ship-viewport {height:320px;}
  #panel-exploration .viewport-scale-key {font-size:9px;}
  #panel-exploration .viewport-zoom-hint {display:none;}
  #panel-exploration .orthographic-grid,#panel-exploration .aev-thumbnail-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  #panel-exploration .ship-thumbnail {height:108px;}
  #panel-exploration .docking-note {grid-template-columns:1fr;gap:8px;padding:18px;}
}
