/* ============ SPACE FREIGHTER (themes/freighter.js) ============ */
.skin-freighter { --fr-bg: #070A1C; --fr-panel: #0A0E22; --fr-line: #33416F; --fr-text: #F2F5FC; --fr-mut: #9AA3C8; --fr-amber: #FFB43A; --fr-cyan: #47E3FF; --fr-yellow: #FFC02E; --fr-red: #FF5A4A;
  --fr-mono: "DejaVu Sans Mono", Menlo, monospace;
  background: var(--fr-bg); color: var(--fr-text); font-family: var(--fr-mono);
  display: grid; grid-template-columns: 600px minmax(0, 1fr); grid-template-rows: 46px minmax(0, 1fr); }
.fr-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px; border-bottom: 2px solid var(--fr-line); min-width: 0; background: #080C20; }
.fr-stripes { width: 30px; height: 14px; flex: none; background: linear-gradient(var(--fr-cyan) 0 3px, transparent 3px 5.5px, var(--fr-cyan) 5.5px 8.5px, transparent 8.5px 11px, var(--fr-cyan) 11px 14px);
  clip-path: polygon(0 0, 100% 0, 100% 3px, 8px 3px, 8px 5.5px, 100% 5.5px, 100% 8.5px, 14px 8.5px, 14px 11px, 100% 11px, 100% 100%, 14px 100%, 14px 11px, 8px 11px, 8px 5.5px, 0 5.5px);
  transform: skewX(-14deg); }
.fr-stripes.r { transform: skewX(-14deg) scaleX(-1); }
.fr-title { font-family: "Inter Tight", Inter, sans-serif; font-size: 25px; font-weight: 800; white-space: nowrap; transform: skewX(-12deg); letter-spacing: 2.5px; line-height: 1; }
.fr-vr { width: 2px; height: 26px; background: var(--fr-line); flex: none; margin: 0 4px; }
.fr-state { display: flex; align-items: center; gap: 9px; font-size: 17px; white-space: nowrap; overflow: hidden; min-width: 0; --dot: #5A6080; }
.fr-state::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--dot); flex: none; }
.fr-state.ok { --dot: #2EE85C; } .fr-state.warn { --dot: var(--fr-amber); color: var(--fr-amber); } .fr-state.bad { --dot: var(--fr-red); color: var(--fr-red); }
.fr-sp { flex: 1; }
.fr-btn { height: 48px; padding: 0 3px; margin: 0 5px; font-size: 14px; white-space: nowrap; display: flex; align-items: center; position: relative; }
.fr-btn::before { content: ""; position: absolute; inset: 9px -6px; border: 2px solid #8FA0D8; border-radius: 6px; }
.fr-btn:active::before { background: rgba(143,160,216,.18); }

.fr-scene { position: relative; overflow: hidden; background: #02031A; }   /* plate's own sky colour behind the image */
.fr-plate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; user-select: none; pointer-events: none;
  image-rendering: pixelated; image-rendering: crisp-edges; }
.fr-cv { position: absolute; left: 0; top: 0; display: block; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.fr-tags { position: absolute; inset: 0; pointer-events: none; }
.fr-tag { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
/* short leader: a diagonal from the raider, then a stub under the start of the label */
.fr-tag::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 2px; background: #E4E9F8; transform-origin: 0 50%; transform: rotate(-50deg); }
.fr-tag::after { content: ""; position: absolute; left: 14px; top: -18px; width: 34px; height: 2px; background: #E4E9F8; }
.fr-tag .b { position: absolute; left: 18px; bottom: 21px; display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: 220px;
  font-size: 13px; line-height: 1.15; white-space: nowrap; pointer-events: auto; text-shadow: 0 1px 0 #05060F, 1px 0 0 #05060F, -1px 0 0 #05060F, 0 -1px 0 #05060F; }
.fr-tag .b::after { content: ""; position: absolute; inset: -8px -6px -10px; }   /* bigger tap target */
.fr-tag .d { overflow: hidden; text-overflow: ellipsis; max-width: 100%; order: 1; }
.fr-tag .t { color: #B7BEDB; position: absolute; left: 24px; top: 100%; margin-top: 7px; }
.fr-tag.l::before { transform: rotate(-130deg); }
.fr-tag.l::after { left: auto; right: 14px; }
.fr-tag.l .b { left: auto; right: 18px; align-items: flex-end; }
.fr-tag.l .t { left: auto; right: 24px; }
.fr-tag .b:active { color: var(--fr-cyan); }
.fr-alarm { position: absolute; left: 50%; top: 59%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  background: #1A0E06; border: 2px solid var(--fr-amber); color: var(--fr-amber); white-space: nowrap; box-shadow: inset 0 0 0 2px #1A0E06, inset 0 0 0 4px rgba(255,180,58,.35); }
.fr-alarm b { font-family: PiPixel, var(--fr-mono); font-size: 16px; font-weight: 400; -webkit-font-smoothing: none; animation: fr-blink 1s steps(1) infinite; }
.fr-alarm span { font-size: 24px; font-weight: 700; }
.fr-alarm[hidden] { display: none; }
@keyframes fr-blink { 50% { opacity: .3; } }

.fr-panel { border-left: 2px solid var(--fr-line); background: var(--fr-panel); display: flex; flex-direction: column; padding: 2px 12px 6px; min-width: 0;
  background-image: linear-gradient(rgba(255,255,255,.02) 50%, transparent 50%); background-size: 100% 4px; }
.fr-cell { padding: 10px 0 9px; border-bottom: 2px solid var(--fr-line); display: flex; flex-direction: column; align-items: center; min-width: 0; }
.fr-k { font-size: 13px; color: var(--fr-text); white-space: nowrap; line-height: 1; margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fr-k.alert { color: var(--fr-amber); }
.fr-v { font-size: 34px; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; width: 100%; text-align: center; letter-spacing: -0.03em; }
.fr-v.amber { color: var(--fr-amber); }
.fr-v.cyan { color: var(--fr-cyan); font-size: 30px; }
.fr-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 0 6px; }
.fr-half { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.fr-radar { width: 58px; height: 58px; flex: none; image-rendering: pixelated; border-radius: 50%; box-shadow: 0 0 0 2px #1E2A4E; }
.fr-log { flex: 1; min-height: 0; padding: 8px 0 2px; display: flex; flex-direction: column; overflow: hidden; }
.fr-h { font-family: PiPixel, var(--fr-mono); font-size: 8px; -webkit-font-smoothing: none; color: var(--fr-amber); letter-spacing: 1px; line-height: 1; margin-bottom: 4px; transform: scale(1.5); transform-origin: 0 50%; align-self: flex-start; }
.fr-log ol { font-size: 11.5px; color: #E2B266; display: flex; flex-direction: column; }
.fr-log li { display: flex; gap: 6px; align-items: center; min-height: 22px; border-bottom: 1px dashed #2A3156; }
.fr-log li::before { content: ">"; color: var(--fr-amber); flex: none; }
.fr-log .d { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-log .t { flex: none; color: #8B7550; }
.fr-log li:active { background: #18204A; }
.fr-log .empty { color: var(--fr-mut); }
.fr-pause { height: 50px; flex: none; border-radius: 8px; background: var(--fr-yellow); color: #1A1406; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden;
  box-shadow: inset 0 -4px 0 #C48A0C, inset 0 2px 0 #FFE38A, 0 0 0 2px #3A2A06; margin-top: 4px; }
.fr-pause.resume { background: var(--fr-cyan); font-size: 16px; box-shadow: inset 0 -4px 0 #1888A2, inset 0 2px 0 #B8F6FF, 0 0 0 2px #06323E; }
.fr-pause:active { transform: translateY(2px); }
.fr-meta { font-size: 12px; color: var(--fr-mut); text-align: center; white-space: nowrap; overflow: hidden; padding-top: 7px; }