.ship-schematic, .planet-schematic { margin: 0; overflow: hidden; border-top: 1px solid var(--line); background: radial-gradient(circle at 55% 45%, rgba(129, 210, 138, .08), transparent 58%), rgba(20, 23, 21, .58); }
.ship-schematic { margin-bottom: 14px; }
.ship-schematic svg, .planet-schematic svg { display: block; width: 100%; height: auto; }
.ship-schematic svg { max-height: 350px; }
.ship-png-mask { mask-type: alpha; }
.ship-mask-ink { fill: currentColor; stroke: none; }
.ship-hull-layer, .ship-part-layer, .part-preview-layer { color: var(--primary); }
.ship-hull-layer { pointer-events: none; filter: drop-shadow(0 0 7px rgba(129, 210, 138, .28)); }
.ship-part-back { opacity: 0; pointer-events: none; transition: opacity .2s; }
.ship-part-front { cursor: pointer; outline: none; transition: filter .2s; }
.ship-part-front:hover, .ship-part-front:focus-visible, .ship-part-front.is-selected { filter: drop-shadow(0 0 6px var(--primary)); }
.ship-part-front.is-danger { animation: schematic-warning 1.2s steps(2, end) infinite; }
.ship-part-back.is-selected,
.ship-graphic-canvas:has(.ship-part-front[data-graphic-slot="engine"]:is(:hover, :focus-visible)) .ship-part-back[data-graphic-back="engine"],
.ship-graphic-canvas:has(.ship-part-front[data-graphic-slot="fuel_tank"]:is(:hover, :focus-visible)) .ship-part-back[data-graphic-back="fuel_tank"],
.ship-schematic:has(+ .ship-slots .ship-slot[data-slot="engine"]:is(:hover, :focus-within)) .ship-part-back[data-graphic-back="engine"],
.ship-schematic:has(+ .ship-slots .ship-slot[data-slot="fuel_tank"]:is(:hover, :focus-within)) .ship-part-back[data-graphic-back="fuel_tank"] { opacity: 1; }
.ship-schematic:has([data-graphic-slot="engine"]:is(:hover, :focus-visible, .is-selected)) + .ship-slots .ship-slot[data-slot="engine"],
.ship-schematic:has([data-graphic-slot="fuel_tank"]:is(:hover, :focus-visible, .is-selected)) + .ship-slots .ship-slot[data-slot="fuel_tank"],
.ship-slot.is-selected { border-top-color: var(--highlight); background: rgba(210, 201, 129, .14); box-shadow: inset 0 0 28px rgba(210, 201, 129, .08); }

.planet-heading { align-items: center; }
.planet-heading .planet-schematic { flex: 0 0 min(360px, 39vw); width: min(360px, 39vw); border: 0; background: transparent; }
.planet-schematic { color: var(--primary); }
.planet-schematic :where(circle, ellipse, path, rect, line, polyline, polygon) { vector-effect: non-scaling-stroke; }
.planet-schematic :where(circle, ellipse, path, rect, line, polyline, polygon):not([fill]) { fill: none; }
.planet-schematic :where(circle, ellipse, path, rect, line, polyline, polygon):not([stroke]) { stroke: currentColor; }
.planet-schematic :where(circle, ellipse, path, rect, line, polyline, polygon):not([stroke-width]) { stroke-width: 1.25; }
.planet-schematic .planet-atmosphere { filter: drop-shadow(0 0 6px currentColor); }
.planet-schematic .planet-body { fill: rgba(18, 25, 20, .84); stroke-width: 2; }
.planet-schematic .planet-surface { opacity: .72; }
.planet-schematic .planet-surface circle { fill: rgba(129, 210, 138, .08); }
.planet-schematic .planet-terminator { fill: rgba(0, 0, 0, .43); stroke: none; }
.planet-schematic .planet-ring { opacity: .32; stroke-dasharray: 2 5; }
.planet-schematic .planet-axis { opacity: .65; }
.planet-schematic.is-compact { width: 138px; border: 0; background: transparent; }

.part-schematic-mini { display: grid; flex: 0 0 auto; width: 82px; height: 68px; place-items: center; color: var(--primary); }
.part-schematic-mini svg { display: block; width: 100%; height: 100%; overflow: visible; }

.planet-good-name { display: flex; align-items: center; gap: 10px; }
.cargo-glyph { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--primary); }
.cargo-glyph svg { width: 56px; height: 56px; overflow: visible; }
.cargo-glyph svg :where(path, rect, circle, ellipse, line, polyline, polygon) { vector-effect: non-scaling-stroke; }
.cargo-glyph svg :where(path, rect, circle, ellipse, line, polyline, polygon):not([fill]) { fill: none; }
.cargo-glyph svg :where(path, rect, circle, ellipse, line, polyline, polygon):not([stroke]) { stroke: currentColor; }
.cargo-glyph svg :where(path, rect, circle, ellipse, line, polyline, polygon):not([stroke-width]) { stroke-width: 1.4; }
.cargo-glyph .cargo-glyph-case { fill: rgba(129, 210, 138, .025); stroke-dasharray: 11 3; }
.cargo-glyph .cargo-glyph-code { fill: var(--muted); font: 5px var(--font-mono); letter-spacing: .04em; }
.cargo-glyph small { color: var(--muted); font: 9px var(--font-mono); letter-spacing: .08em; }
.cargo-glyph.is-compact svg { width: 34px; height: 34px; }
.cargo-item .cargo-glyph { position: absolute; right: 5px; bottom: 4px; opacity: .42; pointer-events: none; }

@keyframes schematic-flow { to { stroke-dashoffset: -24; } }
@keyframes schematic-warning { 50% { opacity: .38; } }

@media (prefers-reduced-motion: reduce) {
  .ship-schematic .ship-part-front.is-danger { animation: none; }
}

@media (max-width: 700px) {
  .planet-heading .planet-schematic { width: min(100%, 360px); flex-basis: auto; }
}