/**
* C3XO Astro v2 — Supplemental Styles
* Pages: About, Gallery Archive, Single Astrophoto, Gear Archive, Blog, Single Post, 404, Search
*/
/* ── Global scrollbar ──────────────────────────────────────────────────────── */
* {
scrollbar-width: thin;
scrollbar-color: rgba(0,200,255,.25) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: rgba(0,200,255,.22);
border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0,200,255,.45); }
*::-webkit-scrollbar-corner { background: transparent; }
/* =====================================================================
SECTION UTILITIES
===================================================================== */
.section-pad { padding: 80px 0; }
.section-pad-sm { padding: 48px 0; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted, #666); }
/* =====================================================================
PAGE HEADER (shared)
===================================================================== */
.page-header {
position: relative;
padding: 100px 0 60px;
background: radial-gradient(ellipse at top, rgba(0,51,255,0.18) 0%, transparent 70%),
var(--bg-deep, #000);
overflow: hidden;
border-bottom: 1px solid rgba(0,51,255,0.2);
}
.page-header::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230033ff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.page-header-inner { position: relative; z-index: 1; }
.page-title {
font-family: var(--font-display, 'Orbitron', sans-serif);
font-size: clamp(2rem, 5vw, 4rem);
color: var(--white, #fff);
margin: 8px 0 16px;
line-height: 1.1;
}
.page-subtitle {
font-size: 16px;
color: var(--text-muted, #888);
max-width: 600px;
}
.eyebrow {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 14px;
color: var(--blue, #0033ff);
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* Corner decorators */
.corner-tl, .corner-tr, .corner-bl, .corner-br {
position: absolute;
width: 20px;
height: 20px;
border-color: rgba(0,51,255,0.4);
border-style: solid;
}
.corner-tl { top: 16px; left: 16px; border-width: 2px 0 0 2px; }
.corner-tr { top: 16px; right: 16px; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 16px; left: 16px; border-width: 0 0 2px 2px; }
.corner-br { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; }
/* Breadcrumb */
.breadcrumb {
font-size: 14px;
color: var(--text-muted, #666);
margin-bottom: 24px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.breadcrumb a { color: var(--blue, #0033ff); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
/* =====================================================================
GALLERY CONTROLS / ARCHIVE — Polished Control Panel
===================================================================== */
.gallery-controls {
position: sticky; top: 60px; z-index: 80;
background: rgba(3,3,16,0.97); backdrop-filter: blur(16px) saturate(1.4);
border-bottom: 1px solid rgba(0,51,255,0.18);
padding: 14px 0 10px;
}
/* Filter tabs */
.gallery-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gallery-filter {
font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
text-transform: uppercase; padding: 5px 14px;
background: transparent; border: 1px solid rgba(0,51,255,.25);
color: rgba(255,255,255,.45); cursor: pointer;
transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.gallery-filter:hover {
background: rgba(0,51,255,.12); border-color: rgba(0,51,255,.5);
color: rgba(255,255,255,.85);
box-shadow: 0 0 10px rgba(0,51,255,.18);
}
.gallery-filter.active {
background: rgba(0,51,255,.2); border-color: var(--blue-bright);
color: #fff; box-shadow: 0 0 14px rgba(0,51,255,.35);
}
.filter-count { font-size: 11px; opacity: .6; margin-left: 4px; }
/* Search row */
.gallery-search-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.gallery-search-wrap {
position: relative; flex: 1; min-width: 200px;
display: flex; align-items: center;
background: rgba(255,255,255,.04); border: 1px solid rgba(0,51,255,.25);
transition: border-color .2s, box-shadow .2s;
}
.gallery-search-wrap:focus-within {
border-color: var(--blue-bright); box-shadow: 0 0 12px rgba(0,51,255,.25);
}
.gallery-search-icon { flex-shrink:0; margin:0 8px; color: rgba(255,255,255,.3); pointer-events:none; }
.gallery-search-input {
flex: 1; background: none; border: none; outline: none;
color: #fff; font-size: 13px; padding: 9px 10px 9px 0; font-family: inherit;
}
.gallery-search-input::placeholder { color: rgba(255,255,255,.3); }
.gallery-search-btn { display:none; }
/* Selects */
.gallery-select-wrap { position: relative; flex-shrink: 0; }
.gallery-select-wrap::after {
content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
color: rgba(0,51,255,.6); font-size: 12px; pointer-events: none;
}
.gallery-select {
appearance: none; -webkit-appearance: none;
background: rgba(0,0,12,.7); border: 1px solid rgba(0,51,255,.25);
color: rgba(255,255,255,.75); font-size: 12px; font-family: var(--font-mono);
letter-spacing: .06em; padding: 8px 28px 8px 12px; cursor: pointer;
transition: border-color .18s;
}
.gallery-select:hover { border-color: rgba(0,51,255,.5); }
.gallery-select:focus { outline: none; border-color: var(--blue-bright); }
/* Clear filters button */
.gallery-clear-btn {
font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
text-transform: uppercase; padding: 6px 12px; cursor: pointer;
background: rgba(255,80,80,.08); border: 1px solid rgba(255,80,80,.3);
color: rgba(255,100,100,.8); transition: all .18s;
}
.gallery-clear-btn:hover { background: rgba(255,80,80,.18); color: #ff6464; }
/* View toggle */
.view-toggle {
display: flex; border: 1px solid rgba(0,51,255,.25); flex-shrink: 0;
}
.view-btn {
background: transparent; border: none; color: rgba(255,255,255,.3);
padding: 7px 10px; cursor: pointer; transition: all .18s;
}
.view-btn + .view-btn { border-left: 1px solid rgba(0,51,255,.2); }
.view-btn:hover { background: rgba(0,51,255,.12); color: rgba(255,255,255,.7); }
.view-btn.active {
background: rgba(0,51,255,.25); color: var(--blue-bright);
box-shadow: inset 0 0 8px rgba(0,51,255,.2);
}
/* Showing count bar */
.gallery-showing-bar {
margin-top: 8px;
font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
color: rgba(255,255,255,.3); text-transform: uppercase;
}
/* Gallery Grids */
.gallery-archive-grid.gallery-masonry {
columns: 3; column-gap: 16px;
}
.gallery-archive-grid.gallery-grid-uniform {
display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
}
.gallery-archive-grid.gallery-list-view {
display: flex; flex-direction: column; gap: 16px;
}
.gallery-archive-grid.gallery-list-view .gallery-item {
display: flex; gap: 20px; background: rgba(255,255,255,.03);
border: 1px solid rgba(0,51,255,.12); padding: 16px; break-inside: auto;
}
.gallery-archive-grid.gallery-list-view .gallery-img { width: 200px; height: 130px; object-fit: cover; flex-shrink: 0; }
/* Gallery card */
.gallery-item {
break-inside: avoid; margin-bottom: 16px;
position: relative; overflow: hidden;
border: 1px solid rgba(0,51,255,.08);
transition: border-color .25s, box-shadow .25s;
}
.gallery-item:hover {
border-color: rgba(0,51,255,.45);
box-shadow: 0 0 28px rgba(0,51,255,.22), 0 0 60px rgba(0,51,255,.08);
}
/* Image wrap + skeleton */
.gal-img-wrap { position: relative; overflow: hidden; }
.gal-skeleton {
position: absolute; inset: 0;
background: linear-gradient(110deg, rgba(0,10,40,.8) 25%, rgba(0,30,80,.5) 50%, rgba(0,10,40,.8) 75%);
background-size: 200% 100%; animation: gal-shimmer 1.6s infinite;
z-index: 1;
}
@keyframes gal-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.gallery-img {
display: block; width: 100%; height: auto;
transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .3s;
position: relative; z-index: 2;
}
.gallery-item:hover .gallery-img { transform: scale(1.06); }
.gallery-img.gal-loaded + .gal-skeleton { display: none; }
.gal-img-placeholder {
background: rgba(0,20,60,.3); width: 100%; height: 220px;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.2); font-size: 13px;
}
/* Always-visible overlay */
.gallery-persistent {
position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
padding: 48px 14px 14px;
background: linear-gradient(transparent, rgba(0,0,10,.72) 40%, rgba(0,0,15,.96));
pointer-events: none;
}
.gal-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.gal-badge {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; padding: 2px 6px; border: 1px solid; border-radius: 1px;
}
.gal-badge--type { color: var(--teal); border-color: rgba(0,200,200,.35); background: rgba(0,200,200,.08); }
.gal-badge--const { color: #c0c8e0; border-color: rgba(192,200,224,.3); background: rgba(192,200,224,.06); }
/* Type-specific badge colours */
.gal-type--galaxy, .gal-type--galaxies { color: #7ab4ff; border-color: rgba(122,180,255,.35) !important; background: rgba(122,180,255,.08) !important; }
.gal-type--nebula, .gal-type--emission-nebula, .gal-type--nebulae { color: #ff9966; border-color: rgba(255,153,102,.35) !important; background: rgba(255,153,102,.07) !important; }
.gal-type--planetary-nebula { color: #00d4ff; border-color: rgba(0,212,255,.35) !important; background: rgba(0,212,255,.07) !important; }
.gal-type--supernova, .gal-type--supernova-remnant { color: #c084fc; border-color: rgba(192,132,252,.35) !important; background: rgba(192,132,252,.07) !important; }
.gal-type--star-cluster, .gal-type--open-cluster { color: var(--teal); border-color: rgba(0,200,200,.35) !important; background: rgba(0,200,200,.07) !important; }
.gal-type--globular-cluster { color: #ffd700; border-color: rgba(255,215,0,.35) !important; background: rgba(255,215,0,.07) !important; }
.gallery-item-title {
font-family: var(--font-orb); font-size: 14px; font-weight: 700;
color: #fff; line-height: 1.3; margin: 0 0 4px;
text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.gal-card-meta {
display: flex; gap: 8px; font-family: var(--font-mono);
font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .08em;
}
/* Hover reveal overlay */
.gallery-reveal {
position: absolute; inset: 0; z-index: 6;
display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
padding: 16px;
background: linear-gradient(transparent 0%, rgba(0,5,30,.65) 50%, rgba(0,5,30,.92) 100%);
opacity: 0; transition: opacity .28s;
}
.gallery-thumb-link:hover .gallery-reveal,
.gallery-item:hover .gallery-reveal { opacity: 1; }
.gallery-item-exif { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gallery-exif-block { display: flex; flex-direction: column; gap: 1px; }
.gallery-exif-key {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--teal); opacity: .8;
}
.gallery-exif-val { font-family: var(--font-mono); font-size: 12px; color: #fff; }
.gal-view-hint {
font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
text-transform: uppercase; color: var(--blue-bright);
background: rgba(0,51,255,.2); border: 1px solid rgba(0,51,255,.4);
padding: 4px 10px; display: inline-block;
}
/* Fade-in animation */
.gal-fade-in { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.gal-fade-in.gal-visible { opacity: 1; transform: none; }
/* Misc */
.gallery-thumb-link { display: block; text-decoration: none; }
.gallery-empty { padding: 60px; text-align: center; color: rgba(255,255,255,.3); }
.gallery-pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; }
.gallery-count { font-size: 14px; color: rgba(255,255,255,.3); }
.gallery-detail-link { display: block; font-size: 13px; padding: 6px 12px; background: rgba(0,51,255,.15); color: var(--teal); text-decoration: none; text-align: center; transition: background .2s; }
.gallery-detail-link:hover { background: rgba(0,51,255,.3); }
/* Responsive */
@media (max-width: 900px) {
.gallery-archive-grid.gallery-masonry { columns: 2; column-gap: 12px; }
.gallery-archive-grid.gallery-grid-uniform { grid-template-columns: repeat(2,1fr); gap: 12px; }
}
@media (max-width: 540px) {
.gallery-archive-grid.gallery-masonry,
.gallery-archive-grid.gallery-grid-uniform { columns: 1; grid-template-columns: 1fr; }
.gallery-controls { padding: 10px 0 8px; }
.gallery-search-row { gap: 8px; }
.gallery-select-wrap { flex: 1; }
}
/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.glb {
position: fixed; inset: 0; z-index: 9000;
display: flex; align-items: stretch; justify-content: center;
opacity: 0; transition: opacity .28s; pointer-events: none;
}
.glb--open { opacity: 1; pointer-events: auto; }
.glb[hidden] { display: none !important; }
.glb-backdrop {
position: absolute; inset: 0; background: rgba(0,0,8,.92);
backdrop-filter: blur(8px); cursor: pointer;
}
.glb-shell {
position: relative; z-index: 1; display: flex; width: 100%; max-width: 1300px;
max-height: 100vh; margin: auto;
}
.glb-close {
position: absolute; top: 12px; right: 12px; z-index: 10;
background: rgba(0,0,20,.7); border: 1px solid rgba(0,51,255,.3);
color: rgba(255,255,255,.7); width: 36px; height: 36px; cursor: pointer;
font-size: 16px; display: flex; align-items: center; justify-content: center;
transition: all .18s;
}
.glb-close:hover { background: rgba(0,51,255,.3); color: #fff; }
.glb-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
background: rgba(0,0,20,.6); border: 1px solid rgba(0,51,255,.25);
color: rgba(255,255,255,.6); width: 44px; height: 64px; cursor: pointer;
font-size: 28px; display: flex; align-items: center; justify-content: center;
transition: all .18s;
}
.glb-nav:hover { background: rgba(0,51,255,.3); color: #fff; border-color: var(--blue-bright); }
.glb-prev { left: 0; }
.glb-next { right: 380px; } /* leave room for sidebar */
.glb-img-panel {
flex: 1; position: relative; background: #000;
display: flex; align-items: center; justify-content: center; min-width: 0;
overflow: hidden;
}
.glb-img-skeleton {
position: absolute; inset: 0;
background: linear-gradient(110deg, rgba(0,10,40,.9) 25%, rgba(0,30,80,.5) 50%, rgba(0,10,40,.9) 75%);
background-size: 200% 100%; animation: gal-shimmer 1.6s infinite;
}
.glb-img {
max-width: 100%; max-height: 100vh; object-fit: contain;
display: block; position: relative; z-index: 1;
transition: opacity .3s;
}
.glb-info-panel {
width: 360px; min-width: 300px; max-width: 380px; flex-shrink: 0;
background: rgba(3,4,18,.97); border-left: 1px solid rgba(0,51,255,.2);
display: flex; flex-direction: column; overflow: hidden;
}
.glb-info-scroll {
flex: 1; overflow-y: auto; padding: 24px 20px 20px;
scrollbar-width: thin; scrollbar-color: rgba(0,51,255,.2) transparent;
}
.glb-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.glb-badge {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; padding: 2px 8px; border: 1px solid; border-radius: 1px;
}
.glb-badge--type { color: var(--teal); border-color: rgba(0,200,200,.4); background: rgba(0,200,200,.08); }
.glb-badge--const { color: #c0c8e0; border-color: rgba(192,200,224,.3); background: rgba(192,200,224,.06); }
.glb-title {
font-family: var(--font-orb); font-size: 20px; font-weight: 700;
color: #fff; line-height: 1.25; margin: 0 0 6px;
}
.glb-catalog {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.4);
letter-spacing: .12em; margin-bottom: 16px;
}
.glb-data-grid { margin: 14px 0; display: flex; flex-direction: column; gap: 0; }
.glb-data-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 6px 0; border-bottom: 1px solid rgba(0,51,255,.1);
}
.glb-data-row:first-child { border-top: 1px solid rgba(0,51,255,.1); }
.glb-data-key {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em;
text-transform: uppercase; color: rgba(255,255,255,.35); flex-shrink: 0; margin-right: 12px;
}
.glb-data-val {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.85);
text-align: right; line-height: 1.3;
}
.glb-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.glb-btn {
display: block; text-align: center; text-decoration: none;
font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
text-transform: uppercase; padding: 9px 14px; cursor: pointer;
background: rgba(0,51,255,.2); border: 1px solid rgba(0,51,255,.4);
color: #fff; transition: all .18s;
}
.glb-btn:hover { background: rgba(0,51,255,.4); border-color: var(--blue-bright); }
.glb-btn-ghost { background: transparent; border-color: rgba(0,51,255,.25); color: rgba(255,255,255,.6); }
.glb-btn-ghost:hover { background: rgba(0,51,255,.12); color: #fff; }
.glb-nav-hint {
font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.25);
letter-spacing: .1em; text-align: center; margin-top: 16px;
}
@media (max-width: 860px) {
.glb-shell { flex-direction: column; }
.glb-img-panel { min-height: 45vh; max-height: 45vh; }
.glb-info-panel { width: 100%; max-width: 100%; border-left: none; border-top: 1px solid rgba(0,51,255,.2); max-height: 55vh; }
.glb-prev { left: 8px; } .glb-next { right: 8px; }
}
/* =====================================================================
SINGLE ASTROPHOTO
===================================================================== */
.single-astrophoto { background: var(--bg-deep, #000); min-height: 100vh; }
.single-photo-hero {
position: relative;
background: #000;
max-height: 70vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.single-hero-img {
width: 100%;
max-height: 70vh;
object-fit: contain;
display: block;
}
.single-hero-link { display: block; cursor: zoom-in; }
.hero-zoom-hint {
position: absolute;
bottom: 16px;
right: 16px;
font-size: 14px;
color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.6);
padding: 6px 12px;
font-family: var(--font-mono);
}
.single-hero-placeholder {
width: 100%;
height: 400px;
background: rgba(0,51,255,0.08);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 24px;
color: var(--blue);
}
.single-photo-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 48px;
padding: 48px 0;
}
.photo-term-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.term-tag {
font-size: 13px;
padding: 4px 12px;
background: rgba(0,51,255,0.15);
border: 1px solid rgba(0,51,255,0.3);
color: var(--teal, #00c8ff);
text-decoration: none;
font-family: var(--font-mono);
}
.term-tag-const { background: rgba(0,200,255,0.1); border-color: rgba(0,200,255,0.3); }
.single-photo-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.5rem);
color: var(--white);
margin: 12px 0 8px;
}
.single-photo-catalog { font-size: 14px; color: var(--teal); margin-bottom: 8px; }
.single-photo-catalog span { font-family: var(--font-mono); }
.single-photo-byline { font-size: 14px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; }
.byline-sep { opacity: 0.4; }
/* Side-by-side Acquisition + Target Data tables */
.data-tables-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin: 40px 0;
align-items: start;
}
@media (max-width: 860px) {
.data-tables-row { grid-template-columns: 1fr; gap: 0; }
}
.acquisition-table-section { margin: 0; }
.acquisition-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.acquisition-table th,
.acquisition-table td {
padding: 10px 16px;
border-bottom: 1px solid rgba(0,51,255,0.12);
text-align: left;
vertical-align: top;
}
.acquisition-table th {
font-family: var(--font-mono);
color: var(--teal, #00c8ff);
font-weight: 500;
width: 40%;
white-space: nowrap;
}
.acquisition-table td { color: var(--white); }
.acquisition-table tr:hover td { background: rgba(0,51,255,0.05); }
.imaging-notes-section { margin: 32px 0; }
.imaging-notes {
background: rgba(0,51,255,0.06);
border-left: 3px solid var(--blue);
padding: 20px 24px;
font-size: 15px;
color: var(--text-body, #ccc);
line-height: 1.7;
}
/* Single Post Nav */
.single-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 40px 0;
}
.post-nav-link {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(0,51,255,0.15);
text-decoration: none;
transition: background 0.2s, border-color 0.2s;
}
.post-nav-link:hover { background: rgba(0,51,255,0.1); border-color: var(--blue); }
.nav-direction { font-size: 13px; color: var(--teal); font-family: var(--font-mono); }
.nav-title { font-size: 15px; color: var(--white); }
.post-nav-next { text-align: right; }
/* Sidebar */
.single-photo-sidebar { padding-top: 48px; }
.sidebar-widget {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(0,51,255,0.15);
padding: 20px;
margin-bottom: 24px;
}
.widget-title {
font-family: var(--font-mono);
font-size: 14px;
color: var(--teal);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0,51,255,0.2);
}
.qs-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14px; }
.qs-label { color: var(--text-muted); }
.qs-val { color: var(--white); font-family: var(--font-mono); }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.related-thumb-link { display: block; position: relative; text-decoration: none; overflow: hidden; }
.related-thumb-link img { width: 100%; height: 80px; object-fit: cover; display: block; }
.related-thumb-placeholder { width: 100%; height: 80px; background: rgba(0,51,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); }
.related-title { display: block; font-size: 12px; padding: 4px; color: var(--text-muted); background: rgba(0,0,0,0.6); }
.btn-full { width: 100%; text-align: center; }
.btn-sm { font-size: 13px; padding: 6px 14px; }
@media (max-width: 960px) {
.single-photo-layout { grid-template-columns: 1fr; }
.single-photo-sidebar { padding-top: 0; }
}
/* =====================================================================
GEAR ARCHIVE
===================================================================== */
.gear-rig-tabs-bar {
background: rgba(4,4,18,0.96);
border-bottom: 1px solid rgba(0,51,255,0.2);
padding: 16px 0;
position: sticky;
top: 60px;
z-index: 80;
}
.rig-tabs-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.rig-tab {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 14px;
padding: 8px 20px;
background: transparent;
border: 1px solid rgba(0,51,255,0.3);
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
}
.rig-tab:hover,
.rig-tab.active {
background: rgba(0,51,255,0.15);
border-color: var(--blue);
color: var(--white);
}
.rig-tab.active { border-color: var(--teal); color: var(--teal); }
.rig-tab-icon { font-size: 16px; }
.rig-panel { display: none; }
.rig-panel.active { display: block; }
.rig-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(0,51,255,0.2);
}
.rig-photo-wrap {
flex-shrink: 0;
width: 240px;
border: 1px solid rgba(0,51,255,0.25);
overflow: hidden;
position: relative;
}
.rig-photo-wrap::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--blue-bright), transparent);
z-index: 1;
}
.rig-photo {
width: 100%;
display: block;
object-fit: cover;
aspect-ratio: 4 / 3;
}
@media (max-width: 680px) {
.rig-panel-header { flex-direction: column; align-items: flex-start; }
.rig-photo-wrap { width: 100%; }
}
.rig-name {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3vw, 2.2rem);
color: var(--white);
margin-bottom: 8px;
}
.rig-description { font-size: 15px; color: var(--text-muted); max-width: 600px; }
.rig-meta { margin-top: 8px; }
.rig-count { font-size: 14px; color: var(--blue); font-family: var(--font-mono); }
.rig-header-graphic {
width: 80px;
height: 80px;
position: relative;
flex-shrink: 0;
}
.rig-reticle {
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid rgba(0,51,255,0.4);
position: relative;
}
.rig-reticle::before,
.rig-reticle::after {
content: '';
position: absolute;
background: rgba(0,51,255,0.4);
}
.rig-reticle::before { width: 1px; height: 100%; left: 50%; transform: translateX(-50%); }
.rig-reticle::after { height: 1px; width: 100%; top: 50%; transform: translateY(-50%); }
.rig-gear-category { margin-bottom: 48px; }
.rig-cat-title {
font-family: var(--font-mono);
font-size: 14px;
color: var(--teal);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0,200,255,0.15);
}
.gear-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
/* Gear Card */
.gear-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(0,51,255,0.2);
transition: border-color 0.3s, transform 0.3s;
display: flex;
flex-direction: column;
}
.gear-card:hover {
border-color: var(--blue);
transform: translateY(-2px);
}
.gear-card-header {
padding: 16px 16px 0;
display: flex;
align-items: center;
gap: 12px;
}
.gear-icon { font-size: 24px; }
.gear-thumb img { width: 60px; height: 60px; object-fit: contain; }
.gear-meta { flex: 1; }
.gear-category {
display: block;
font-size: 12px;
color: var(--teal);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 2px;
}
.gear-brand { font-size: 13px; color: var(--text-muted); }
.gear-card-body { padding: 16px; flex: 1; }
.gear-name {
font-family: var(--font-display);
font-size: 16px;
color: var(--white);
margin-bottom: 6px;
}
.gear-name a { color: inherit; text-decoration: none; }
.gear-name a:hover { color: var(--teal); }
.gear-ext-icon { font-size: 12px; opacity: 0.6; }
.gear-model { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.gear-description { font-size: 14px; color: var(--text-body); margin-bottom: 12px; }
.gear-specs { margin: 0; }
.gear-spec-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
font-size: 13px;
}
.gear-spec-row dt { color: var(--text-muted); }
.gear-spec-row dd { color: var(--white); font-family: var(--font-mono); font-size: 13px; }
.gear-card-footer {
padding: 12px 16px;
border-top: 1px solid rgba(0,51,255,0.15);
}
.rig-empty { padding: 48px; text-align: center; color: var(--text-muted); }
.no-gear { color: var(--text-muted); font-size: 15px; }
/* Gear archive: view toggle tabs */
.gear-view-tabs-bar {
background: rgba(0,0,8,0.6);
border-bottom: 1px solid rgba(0,51,255,0.2);
padding: 0;
}
.gear-view-tabs {
display: flex;
max-width: var(--max-width, 1200px);
margin: 0 auto;
padding: 0 2rem;
}
.gear-view-tab {
padding: 14px 24px;
font-family: var(--font-mono, monospace);
font-size: 14px;
letter-spacing: 0.15em;
text-transform: uppercase;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-muted, #888);
cursor: pointer;
transition: all 0.2s;
}
.gear-view-tab.active,
.gear-view-tab:hover {
color: #fff;
border-bottom-color: var(--teal, #00c8ff);
}
/* Gear category section headings */
.gear-category-section { margin-bottom: 56px; }
.gear-cat-heading {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.gear-cat-heading .rig-cat-title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.gear-cat-count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--blue-bright, #4af);
border: 1px solid rgba(0,51,255,0.3);
padding: 2px 7px;
letter-spacing: 0.1em;
}
.gear-cat-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.gear-cat-btn {
font-size: 14px;
padding: 6px 16px;
background: transparent;
border: 1px solid rgba(0,51,255,0.25);
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
}
.gear-cat-btn.active, .gear-cat-btn:hover {
background: var(--blue);
color: #fff;
border-color: var(--blue);
}
/* =====================================================================
ABOUT PAGE
===================================================================== */
.about-page { background: var(--bg-deep, #000); }
/* About hero shares front-page hero structure; transparent bg lets starfield canvas show */
.about-hero {
border-bottom: 1px solid var(--blue-border, rgba(0,51,255,0.28));
min-height: 55vh !important;
}
.about-hero-content {
position: relative;
z-index: 4;
text-align: center;
}
.about-hero-sub {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 14px;
color: var(--teal, #00c8ff);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 1rem;
}
.about-stats-bar {
background: rgba(0,51,255,0.06);
border-top: 1px solid rgba(0,51,255,0.2);
border-bottom: 1px solid rgba(0,51,255,0.2);
padding: 0;
}
/* Use stat-box children — inherit style.css .stat-box rules */
.about-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
max-width: var(--max-width, 1200px);
margin: 0 auto;
}
.about-stats-grid .stat-box {
border-top: none;
border-bottom: none;
border-left: none;
border-right: 1px solid rgba(0,51,255,0.15);
padding: 2.5rem 1.5rem;
}
.about-bio-grid {
display: grid;
grid-template-columns: 380px 1fr;
gap: 60px;
align-items: start;
}
.about-bio-portrait { position: relative; }
.bio-portrait-img { width: 100%; display: block; }
.bio-portrait-placeholder {
width: 100%;
aspect-ratio: 3/4;
background: rgba(0,51,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 48px;
color: var(--blue);
}
.bio-portrait-frame { position: absolute; inset: -8px; pointer-events: none; }
.portrait-corner {
position: absolute;
width: 24px;
height: 24px;
border-color: var(--blue);
border-style: solid;
}
.portrait-corner.tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.portrait-corner.tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.portrait-corner.bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.portrait-corner.br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.bio-location-tag {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
font-size: 13px;
color: var(--muted, #7a84bb);
font-family: var(--font-mono, 'Share Tech Mono', monospace);
letter-spacing: 0.08em;
padding: 8px 12px;
background: rgba(0,51,255,0.06);
border: 1px solid rgba(0,51,255,0.15);
}
.bio-loc-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--teal, #00c8ff);
box-shadow: 0 0 6px var(--teal, #00c8ff);
flex-shrink: 0;
}
.about-bio-text .about-body { font-size: 15px; line-height: 1.85; color: var(--muted-light, #aab0d8); margin-bottom: 1.2rem; }
.bio-cta-row { display: flex; gap: 16px; margin-top: 2.5rem; flex-wrap: wrap; }
.philosophy-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin-top: 0;
}
.phil-card {
padding: 2.5rem 1.75rem;
background: var(--panel, #080818);
border: 1px solid rgba(0,51,255,0.15);
position: relative;
transition: border-color 0.3s, background 0.3s;
}
.phil-card:hover {
border-color: var(--blue-bright, #0055ff);
background: rgba(0,51,255,0.06);
}
.phil-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--blue-bright, #0055ff), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.phil-card:hover::after { opacity: 1; }
.phil-index {
display: block;
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 12px;
letter-spacing: 0.3em;
color: var(--teal, #00c8ff);
text-transform: uppercase;
margin-bottom: 1.25rem;
opacity: 0.8;
}
.phil-card h3 {
font-family: var(--font-orb, 'Orbitron', sans-serif);
font-size: 15px;
color: #fff;
margin-bottom: 0.9rem;
letter-spacing: 0.04em;
}
.phil-card p { font-size: 14px; color: var(--muted-light, #aab0d8); line-height: 1.75; margin-bottom: 0; }
/* ── Timeline — alternating flags ── */
.about-timeline { overflow: visible; }
.c3xo-timeline {
position: relative;
max-width: 960px;
margin: 48px auto 0;
padding: 20px 0 60px;
}
/* Vertical spine */
.c3xo-tl-spine {
position: absolute;
left: 50%;
top: 0; bottom: 0;
width: 2px;
background: linear-gradient(to bottom,
transparent 0%,
var(--blue-bright) 8%,
var(--teal) 50%,
var(--blue-bright) 92%,
transparent 100%
);
transform: translateX(-50%);
pointer-events: none;
}
/* Row */
.c3xo-tl-row {
display: grid;
grid-template-columns: 1fr 48px 1fr;
align-items: center;
margin-bottom: 2.5rem;
position: relative;
opacity: 0;
transition: opacity 0.55s ease, transform 0.55s ease;
}
.c3xo-tl-row[data-side="left"] { transform: translateX(-28px); }
.c3xo-tl-row[data-side="right"] { transform: translateX(28px); }
.c3xo-tl-row.visible { opacity: 1; transform: translateX(0); }
/* Center node */
.c3xo-tl-node {
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
position: relative;
}
.c3xo-tl-dot {
width: 16px; height: 16px;
border-radius: 50%;
background: var(--panel, #060620);
border: 2px solid var(--blue-bright);
box-shadow: 0 0 14px rgba(0,85,255,0.7), 0 0 0 4px rgba(0,51,255,0.1);
display: block;
flex-shrink: 0;
transition: box-shadow 0.3s, transform 0.3s;
}
.c3xo-tl-row:hover .c3xo-tl-dot {
transform: scale(1.5);
box-shadow: 0 0 22px rgba(0,200,255,0.9), 0 0 0 6px rgba(0,51,255,0.18);
}
/* Half columns */
.c3xo-tl-half--card { display: flex; }
.c3xo-tl-row[data-side="left"] .c3xo-tl-half--card { justify-content: flex-end; padding-right: 18px; }
.c3xo-tl-row[data-side="right"] .c3xo-tl-half--card { justify-content: flex-start; padding-left: 18px; }
/* Card */
.c3xo-tl-card {
display: block;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(0,51,255,0.22);
padding: 20px 22px;
max-width: 360px;
width: 100%;
position: relative;
text-decoration: none;
overflow: hidden;
transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.c3xo-tl-card:hover {
border-color: var(--blue-bright);
background: rgba(0,40,120,0.12);
box-shadow: 0 4px 32px rgba(0,51,255,0.18);
}
/* Scan-line glow on hover */
.c3xo-tl-card::before {
content: '';
position: absolute;
top: 0; left: -100%; right: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--teal), transparent);
animation: none;
transition: animation 0s;
}
.c3xo-tl-card:hover::before {
animation: scanLine 2s linear infinite;
}
/* Triangle flag pointer */
.c3xo-tl-row[data-side="left"] .c3xo-tl-card::after {
content: '';
position: absolute;
right: -8px;
top: 22px;
width: 0; height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 8px solid rgba(0,51,255,0.22);
transition: border-left-color 0.3s;
}
.c3xo-tl-row[data-side="left"] .c3xo-tl-card:hover::after {
border-left-color: var(--blue-bright);
}
.c3xo-tl-row[data-side="right"] .c3xo-tl-card::after {
content: '';
position: absolute;
left: -8px;
top: 22px;
width: 0; height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 8px solid rgba(0,51,255,0.22);
transition: border-right-color 0.3s;
}
.c3xo-tl-row[data-side="right"] .c3xo-tl-card:hover::after {
border-right-color: var(--blue-bright);
}
/* Card content — cascade on hover */
.c3xo-tl-year, .c3xo-tl-title, .c3xo-tl-desc, .c3xo-tl-cta {
display: block;
transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.c3xo-tl-year {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.28em;
color: var(--teal);
text-transform: uppercase;
margin-bottom: 8px;
}
.c3xo-tl-title {
font-family: var(--font-orb, 'Orbitron', sans-serif);
font-size: 15px;
font-weight: 600;
color: #fff;
line-height: 1.3;
margin-bottom: 8px;
}
.c3xo-tl-desc {
font-size: 13px;
color: var(--muted-light, #aab0d8);
line-height: 1.7;
margin-bottom: 10px;
}
.c3xo-tl-cta {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.15em;
color: var(--blue-bright);
opacity: 0.6;
transition: opacity 0.3s 0.15s, transform 0.3s 0.15s, color 0.3s;
}
.c3xo-tl-card:hover .c3xo-tl-cta { opacity: 1; color: var(--teal); }
/* Cascade: left cards → content shifts right */
.c3xo-tl-row[data-side="left"] .c3xo-tl-card:hover .c3xo-tl-year { transform: translateX(4px); transition-delay: 0s; }
.c3xo-tl-row[data-side="left"] .c3xo-tl-card:hover .c3xo-tl-title { transform: translateX(4px); transition-delay: 0.05s; }
.c3xo-tl-row[data-side="left"] .c3xo-tl-card:hover .c3xo-tl-desc { transform: translateX(4px); transition-delay: 0.1s; }
.c3xo-tl-row[data-side="left"] .c3xo-tl-card:hover .c3xo-tl-cta { transform: translateX(4px); transition-delay: 0.15s; }
/* Cascade: right cards → content shifts left */
.c3xo-tl-row[data-side="right"] .c3xo-tl-card:hover .c3xo-tl-year { transform: translateX(-4px); transition-delay: 0s; }
.c3xo-tl-row[data-side="right"] .c3xo-tl-card:hover .c3xo-tl-title { transform: translateX(-4px); transition-delay: 0.05s; }
.c3xo-tl-row[data-side="right"] .c3xo-tl-card:hover .c3xo-tl-desc { transform: translateX(-4px); transition-delay: 0.1s; }
.c3xo-tl-row[data-side="right"] .c3xo-tl-card:hover .c3xo-tl-cta { transform: translateX(-4px); transition-delay: 0.15s; }
/* Mobile: single column */
@media (max-width: 720px) {
.c3xo-tl-spine { left: 20px; }
.c3xo-tl-row {
grid-template-columns: 48px 1fr;
grid-template-rows: auto;
}
.c3xo-tl-row[data-side="left"],
.c3xo-tl-row[data-side="right"] { transform: translateX(-20px); }
.c3xo-tl-row.visible { transform: translateX(0); }
/* Node always in col 1 */
.c3xo-tl-node { grid-column: 1; grid-row: 1; justify-content: center; }
/* Card always in col 2 */
.c3xo-tl-row[data-side="left"] .c3xo-tl-half--card,
.c3xo-tl-row[data-side="right"] .c3xo-tl-half--card {
grid-column: 2; grid-row: 1;
justify-content: flex-start;
padding-left: 16px; padding-right: 0;
}
/* Hide empty halves */
.c3xo-tl-half--empty { display: none; }
/* Triangle always on left edge */
.c3xo-tl-row[data-side="left"] .c3xo-tl-card::after,
.c3xo-tl-row[data-side="right"] .c3xo-tl-card::after {
left: -8px; right: auto;
border-right: 8px solid rgba(0,51,255,0.22); border-left: none;
}
.c3xo-tl-row[data-side="left"] .c3xo-tl-card:hover::after,
.c3xo-tl-row[data-side="right"] .c3xo-tl-card:hover::after {
border-right-color: var(--blue-bright); border-left: none;
}
.c3xo-tl-card { max-width: 100%; }
/* All cascades go left→right on mobile */
.c3xo-tl-row[data-side="left"] .c3xo-tl-card:hover .c3xo-tl-year,
.c3xo-tl-row[data-side="left"] .c3xo-tl-card:hover .c3xo-tl-title,
.c3xo-tl-row[data-side="left"] .c3xo-tl-card:hover .c3xo-tl-desc,
.c3xo-tl-row[data-side="left"] .c3xo-tl-card:hover .c3xo-tl-cta { transform: translateX(-4px); }
}
.social-links-large {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.social-link-large {
display: inline-flex;
align-items: center;
padding: 12px 28px;
background: var(--panel, #080818);
border: 1px solid rgba(0,51,255,0.28);
color: var(--muted-light, #aab0d8);
text-decoration: none;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.social-link-large::before {
content: '';
position: absolute;
inset: 0;
background: var(--blue-faint, rgba(0,51,255,0.07));
opacity: 0;
transition: opacity 0.2s;
}
.social-link-large:hover {
border-color: var(--blue-bright, #0055ff);
color: var(--teal, #00c8ff);
}
.social-link-large:hover::before { opacity: 1; }
.sll-label {
font-family: var(--font-orb, 'Orbitron', sans-serif);
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
position: relative;
}
@media (max-width: 960px) {
.about-bio-grid { grid-template-columns: 1fr; }
.about-bio-portrait { max-width: 320px; }
.philosophy-grid { grid-template-columns: repeat(2, 1fr); }
.about-stats-grid { grid-template-columns: repeat(2, 1fr); }
.about-stats-grid .stat-box:nth-child(2) { border-right: none; }
.about-stats-grid .stat-box:nth-child(3) { border-top: 1px solid rgba(0,51,255,0.15); }
.about-stats-grid .stat-box:nth-child(4) { border-top: 1px solid rgba(0,51,255,0.15); border-right: none; }
.timeline-item,
.timeline-item.right {
justify-content: flex-start;
padding: 0 0 0 48px;
transform: translateX(0);
opacity: 0;
}
.timeline-item.visible { opacity: 1; }
.timeline-line { left: 20px; }
.timeline-connector { left: 20px; }
.timeline-card { max-width: 100%; }
}
@media (max-width: 600px) {
.philosophy-grid { grid-template-columns: 1fr; }
.about-stats-grid { grid-template-columns: repeat(2, 1fr); }
.about-hero-title { font-size: 2rem; }
}
/* =====================================================================
FIELD NOTES — Magazine Blog
===================================================================== */
.fn-page { background: var(--bg-deep); min-height: 100vh; }
/* ── Filter Bar ── */
.fn-filter-bar {
position: sticky;
top: 60px;
z-index: 80;
background: rgba(3, 3, 16, 0.97);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--blue-border);
padding: 10px 0;
box-shadow: 0 4px 24px rgba(0,0,30,0.5);
}
.fn-filter-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.fn-filter-row--top { margin-bottom: 8px; }
.fn-filter-row--bottom { gap: 0; justify-content: space-between; }
/* Search */
.fn-search-wrap {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 200px;
background: rgba(0,51,255,0.07);
border: 1px solid var(--blue-border);
padding: 8px 14px;
transition: border-color 0.2s;
}
.fn-search-wrap:focus-within { border-color: var(--blue-bright); }
.fn-search-icon { color: var(--muted); flex-shrink: 0; }
.fn-search-input {
background: transparent;
border: none;
outline: none;
color: #fff;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.04em;
flex: 1;
width: 100%;
}
.fn-search-input::placeholder { color: var(--muted); }
.fn-search-clear {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: 14px;
padding: 0;
line-height: 1;
flex-shrink: 0;
}
.fn-search-clear:hover { color: #fff; }
/* Sort */
.fn-sort-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fn-sort-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.2em;
color: var(--muted);
text-transform: uppercase;
white-space: nowrap;
}
.fn-sort-select {
background: rgba(0,51,255,0.07);
border: 1px solid var(--blue-border);
color: #fff;
font-family: var(--font-mono);
font-size: 12px;
padding: 7px 10px;
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a84bb'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 28px;
}
.fn-sort-select:focus { border-color: var(--blue-bright); }
/* Category tabs */
.fn-cat-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1;
}
.fn-cat-tab {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
padding: 5px 14px;
background: transparent;
border: 1px solid var(--blue-border);
color: var(--muted);
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.fn-cat-tab.active, .fn-cat-tab:hover {
background: var(--blue-bright);
border-color: var(--blue-bright);
color: #fff;
}
.fn-cat-count {
font-size: 11px;
background: rgba(255,255,255,0.15);
border-radius: 10px;
padding: 1px 6px;
line-height: 1.4;
}
/* Date range */
.fn-date-range {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.fn-date-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.15em;
color: var(--muted);
text-transform: uppercase;
white-space: nowrap;
}
.fn-date-sep { color: var(--muted); font-size: 12px; }
.fn-date-input {
background: rgba(0,51,255,0.07);
border: 1px solid var(--blue-border);
color: #fff;
font-family: var(--font-mono);
font-size: 12px;
padding: 6px 10px;
outline: none;
width: 136px;
cursor: pointer;
}
.fn-date-input::-webkit-calendar-picker-indicator { filter: invert(0.6); cursor: pointer; }
.fn-date-input:focus { border-color: var(--blue-bright); }
.fn-clear-all {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.15em;
color: var(--muted);
background: none;
border: 1px solid rgba(255,255,255,0.1);
padding: 5px 12px;
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
white-space: nowrap;
}
.fn-clear-all:hover { border-color: #ff4444; color: #ff4444; }
/* Results area */
.fn-results { transition: opacity 0.2s; }
.fn-results--loading { opacity: 0.45; pointer-events: none; }
/* ── Headline (most recent post) ── */
.fn-headline {
background: linear-gradient(180deg, rgba(0,30,80,0.25) 0%, transparent 100%);
padding: 3rem 0 2rem;
border-bottom: 1px solid var(--blue-border);
}
.fn-headline-card {
display: grid;
grid-template-columns: 55% 1fr;
align-items: stretch;
border: 1px solid var(--blue-border);
overflow: hidden;
background: rgba(255,255,255,0.02);
transition: border-color 0.3s;
}
.fn-headline-card:hover { border-color: rgba(0,100,255,0.4); }
.fn-headline-thumb { overflow: hidden; }
.fn-headline-thumb img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; transition: transform 0.6s; }
.fn-headline-card:hover .fn-headline-thumb img { transform: scale(1.03); }
.fn-headline-content {
padding: 44px 40px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
background: rgba(0,10,40,0.3);
}
.fn-headline-eyebrow {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.fn-latest-tag {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.3em;
background: var(--blue-bright);
color: #fff;
padding: 3px 10px;
text-transform: uppercase;
}
.fn-headline-cat {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.2em;
color: var(--teal);
text-transform: uppercase;
}
.fn-headline-title {
font-family: var(--font-orb);
font-size: clamp(1.5rem, 2.8vw, 2.2rem);
font-weight: 700;
line-height: 1.2;
color: #fff;
margin: 0 0 14px;
}
.fn-headline-title a { color: inherit; text-decoration: none; }
.fn-headline-title a:hover { color: var(--teal); }
.fn-headline-meta {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.08em;
margin-bottom: 16px;
}
.fn-headline-stars { display: flex; gap: 2px; }
.fn-headline-excerpt {
font-size: 15px;
color: rgba(200,210,255,0.75);
line-height: 1.75;
margin-bottom: 28px;
}
.fn-headline-verdict {
font-family: var(--font-mono);
font-size: 13px;
color: var(--teal);
margin-bottom: 20px;
}
/* ── Secondary Row (posts 2–4) ── */
.fn-secondary {
padding: 2rem 0;
border-bottom: 1px solid var(--blue-border);
background: rgba(0,0,10,0.3);
}
.fn-secondary-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.fn-secondary-card {
border: 1px solid var(--blue-border);
background: rgba(255,255,255,0.02);
display: flex;
flex-direction: column;
transition: border-color 0.3s, transform 0.3s;
overflow: hidden;
}
.fn-secondary-card:hover { border-color: rgba(0,100,255,0.4); transform: translateY(-3px); }
.fn-secondary-thumb { overflow: hidden; }
.fn-secondary-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.4s; }
.fn-secondary-card:hover .fn-secondary-thumb img { transform: scale(1.05); }
.fn-secondary-body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.fn-secondary-cat {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.25em;
color: var(--teal);
text-transform: uppercase;
}
.fn-secondary-title {
font-family: var(--font-orb);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: #fff;
flex: 1;
}
.fn-secondary-title a { color: inherit; text-decoration: none; }
.fn-secondary-title a:hover { color: var(--teal); }
.fn-secondary-stars { display: flex; gap: 2px; }
.fn-secondary-date {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.08em;
margin-top: auto;
}
/* ── Section Divider ── */
.fn-divider {
border-top: 1px solid var(--blue-border);
padding: 0;
position: relative;
}
.fn-divider .container { position: relative; }
.fn-divider-label {
position: relative;
top: -11px;
display: inline-block;
background: var(--bg-deep);
padding: 0 16px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.3em;
color: var(--muted);
text-transform: uppercase;
}
/* ── Results header (filtered view) ── */
.fn-results-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--blue-border);
}
.fn-results-count {
font-family: var(--font-mono);
font-size: 13px;
color: var(--muted);
letter-spacing: 0.1em;
}
.fn-results-count strong { color: #fff; }
/* ── Main card grid ── */
.fn-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.fn-card {
background: rgba(255,255,255,0.025);
border: 1px solid var(--blue-border);
display: flex;
flex-direction: column;
transition: border-color 0.3s, transform 0.3s;
overflow: hidden;
}
.fn-card:hover { border-color: rgba(0,100,255,0.45); transform: translateY(-4px); }
.fn-card-thumb { position: relative; overflow: hidden; }
.fn-card-thumb img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform 0.5s; }
.fn-card:hover .fn-card-thumb img { transform: scale(1.06); }
.fn-card-badge {
position: absolute;
top: 12px;
left: 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 10px;
background: var(--blue-bright);
color: #fff;
}
.fn-card-badge--cat { background: rgba(0,200,255,0.15); border: 1px solid rgba(0,200,255,0.3); color: var(--teal); }
.fn-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.fn-card-meta {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.fn-card-meta-sep { opacity: 0.5; }
.fn-card-cat { color: var(--teal); }
.fn-card-rating { display: flex; align-items: center; gap: 4px; }
.fn-card-title {
font-family: var(--font-orb);
font-size: 17px;
font-weight: 600;
line-height: 1.3;
color: #fff;
}
.fn-card-title a { color: inherit; text-decoration: none; }
.fn-card-title a:hover { color: var(--teal); }
.fn-card-excerpt {
font-size: 14px;
color: rgba(200,210,255,0.65);
line-height: 1.65;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fn-read-more {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
color: var(--blue-bright);
text-decoration: none;
margin-top: auto;
padding-top: 8px;
}
.fn-read-more:hover { color: var(--teal); }
/* Load more */
.fn-load-more-wrap { text-align: center; margin-top: 3rem; }
.fn-no-results {
grid-column: 1 / -1;
text-align: center;
padding: 80px 20px;
color: var(--muted);
font-family: var(--font-mono);
font-size: 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
/* Keep legacy star/rating classes for compat */
.star { color: rgba(255,255,255,0.18); font-size: 15px; }
.star.filled { color: #f5a623; }
.rating-num { font-size: 12px; color: var(--muted); }
.review-badge { background: var(--blue-bright); color: #fff; font-size: 12px; padding: 3px 10px; font-family: var(--font-mono); letter-spacing: 0.08em; }
/* ══════════════════════════════════════════════════════════════════════
FIELD NOTES — NEW / ENHANCED COMPONENTS
══════════════════════════════════════════════════════════════════════ */
/* ── Hero enhancements ─────────────────────────────────────────────── */
.fn-hero {
padding: 80px 0 60px;
position: relative;
overflow: hidden;
}
.fn-hero-scan-lines {
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,51,255,.03) 2px,
rgba(0,51,255,.03) 4px
);
pointer-events: none;
}
.fn-hero-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0,51,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,51,255,.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.fn-hero-eyebrow { color: var(--teal); }
.fn-hero-title { text-shadow: 0 0 40px rgba(0,100,255,.5); }
.fn-hero-tagline {
font-size: 16px;
color: rgba(160,180,220,.8);
max-width: 640px;
line-height: 1.7;
margin-top: 6px;
margin-bottom: 28px;
}
.fn-hero-br { display: none; }
@media (min-width: 700px) { .fn-hero-br { display: inline; } }
/* Hero pills */
.fn-hero-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.fn-hero-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 6px 14px;
background: rgba(0,51,255,.07);
border: 1px solid rgba(0,51,255,.25);
color: rgba(160,180,220,.85);
text-decoration: none;
transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
white-space: nowrap;
}
.fn-hero-pill:hover {
background: rgba(0,100,255,.15);
border-color: var(--teal);
color: #fff;
box-shadow: 0 0 12px rgba(0,200,255,.15);
}
.fn-hero-pill--active {
background: rgba(0,200,255,.12);
border-color: var(--teal);
color: var(--teal);
}
.fn-hero-pill-icon { font-size: 12px; opacity: .8; }
.fn-hero-pill-count {
font-size: 11px;
background: rgba(255,255,255,.1);
border-radius: 8px;
padding: 1px 5px;
line-height: 1.5;
}
/* ── Filter bar: category chip scroll on mobile ─────────────────────── */
.fn-filter-row-end {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
@media (max-width: 680px) {
.fn-cat-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.fn-cat-tabs::-webkit-scrollbar { display: none; }
}
/* ── Body wrap: results + sidebar ───────────────────────────────────── */
.fn-body-wrap {
display: grid;
grid-template-columns: 1fr 280px;
align-items: start;
gap: 0;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@media (max-width: 1100px) {
.fn-body-wrap {
grid-template-columns: 1fr;
padding: 0;
}
.fn-sidebar { order: 99; padding: 0 20px 48px; }
}
.fn-results { min-width: 0; }
/* ── Sidebar ─────────────────────────────────────────────────────────── */
.fn-sidebar {
padding: 32px 0 48px 28px;
display: flex;
flex-direction: column;
gap: 24px;
position: sticky;
top: 120px;
}
@media (max-width: 1100px) {
.fn-sidebar { padding: 0; position: static; }
}
.fn-widget {
background: rgba(0,10,30,.5);
border: 1px solid rgba(0,51,255,.18);
padding: 16px 18px;
}
.fn-widget-hdr {
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--teal);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0,200,200,.1);
}
.fn-widget-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 7px 0;
border-bottom: 1px solid rgba(255,255,255,.04);
text-decoration: none;
transition: opacity .15s;
}
.fn-widget-item:last-child { border-bottom: none; }
.fn-widget-item:hover { opacity: .8; }
.fn-widget-item-title {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(200,210,240,.85);
line-height: 1.35;
}
.fn-widget-item-cat {
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--teal);
text-transform: uppercase;
letter-spacing: .1em;
}
.fn-widget-item--review .fn-widget-item-title { font-size: 11.5px; }
.fn-ws { color: rgba(255,255,255,.18); font-size: 12px; }
.fn-ws--filled { color: #f5a623; }
/* Stats widget */
.fn-stats-grid { display: flex; flex-direction: column; gap: 2px; }
.fn-stat-row {
display: grid;
grid-template-columns: 16px 1fr auto;
align-items: center;
gap: 7px;
padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.fn-stat-row:last-child { border-bottom: none; }
.fn-stat-row--fun { opacity: .65; }
.fn-stat-icon { font-size: 12px; color: var(--teal); text-align: center; }
.fn-stat-label { font-family: var(--font-mono); font-size: 10.5px; color: rgba(180,190,220,.7); }
.fn-stat-val { font-family: var(--font-mono); font-size: 12px; color: #fff; font-weight: 600; }
.fn-stat-val--dim { color: var(--muted); font-weight: normal; font-style: italic; }
/* ── Type badges ─────────────────────────────────────────────────────── */
.fn-card-type-badge,
.fn-type-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 3px 9px;
border: 1px solid;
white-space: nowrap;
}
.fn-card-type-badge {
position: absolute;
top: 10px;
left: 10px;
}
.fn-type--review { background: rgba(0,200,200,.1); border-color: rgba(0,200,200,.35); color: var(--teal); }
.fn-type--tutorial { background: rgba(80,180,255,.1); border-color: rgba(80,180,255,.35); color: #60aaff; }
.fn-type--imaging { background: rgba(200,160,255,.08); border-color: rgba(200,160,255,.3); color: #c080ff; }
.fn-type--process { background: rgba(255,200,0,.08); border-color: rgba(255,200,0,.3); color: #e0b820; }
.fn-type--starparty{ background: rgba(0,180,80,.1); border-color: rgba(0,180,80,.35); color: #40c870; }
.fn-type--default { background: rgba(0,51,255,.08); border-color: rgba(0,51,255,.25); color: rgba(160,180,220,.8); }
/* ── Verdict colors ──────────────────────────────────────────────────── */
.fn-verdict--highly { color: var(--teal); background: rgba(0,200,200,.1); border: 1px solid rgba(0,200,200,.3); }
.fn-verdict--rec { color: #40c870; background: rgba(0,180,80,.1); border: 1px solid rgba(0,180,80,.3); }
.fn-verdict--sit { color: #e0b820; background: rgba(255,200,0,.08); border: 1px solid rgba(255,200,0,.3); }
.fn-verdict--no { color: #e05040; background: rgba(200,50,30,.1); border: 1px solid rgba(200,50,30,.3); }
.fn-verdict--default { color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
/* Applied to card verdict badge */
.fn-card-verdict {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 10.5px;
padding: 3px 10px;
letter-spacing: .06em;
}
.fn-card-verdict-lbl { opacity: .7; }
.fn-card-best-for {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
}
.fn-card-best-for-lbl { color: rgba(160,180,220,.6); margin-right: 4px; }
/* Enhanced star styles */
.fn-star { color: rgba(255,255,255,.18); font-size: 13px; }
.fn-star--on { color: #f5a623; }
.fn-card-rating { display: flex; align-items: center; gap: 3px; }
.fn-card-rating-num { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-left: 4px; }
/* ── Card enhancements ───────────────────────────────────────────────── */
.fn-card-read-time {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
opacity: .7;
}
.fn-card-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 2px;
}
.fn-card-tag {
font-family: var(--font-mono);
font-size: 9.5px;
padding: 2px 8px;
background: rgba(0,51,255,.07);
border: 1px solid rgba(0,51,255,.2);
color: rgba(140,160,200,.7);
text-decoration: none;
letter-spacing: .06em;
transition: border-color .15s, color .15s;
}
.fn-card-tag:hover { border-color: var(--teal); color: var(--teal); }
.fn-read-more {
display: inline-flex;
align-items: center;
gap: 6px;
}
.fn-read-arrow { transition: transform .15s; }
.fn-card:hover .fn-read-arrow { transform: translateX(4px); }
.fn-card--review {
border-color: rgba(0,200,200,.18);
background: rgba(0,30,50,.04);
}
.fn-card--review:hover {
border-color: rgba(0,200,200,.5);
box-shadow: 0 6px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(0,200,200,.12) inset;
}
.fn-card:hover {
background: rgba(255,255,255,.038);
box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
/* ── Placeholder (no thumbnail) ──────────────────────────────────────── */
.fn-placeholder {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse at 30% 30%, rgba(0,51,255,.18) 0%, transparent 70%),
linear-gradient(160deg, rgba(0,10,30,.95) 0%, rgba(0,5,20,.98) 100%);
width: 100%;
position: relative;
overflow: hidden;
}
.fn-placeholder::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0,51,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,51,255,.05) 1px, transparent 1px);
background-size: 24px 24px;
}
.fn-placeholder--card { height: 210px; }
.fn-placeholder--featured { height: 100%; min-height: 360px; }
.fn-placeholder-icon {
position: relative;
font-size: 48px;
opacity: .18;
z-index: 1;
color: var(--teal);
text-shadow: 0 0 30px var(--teal);
}
/* ── Featured headline: content-left split ───────────────────────────── */
.fn-headline-card {
grid-template-columns: 1fr 45%; /* content left, image right */
}
/* image now on the right: reorder via DOM (content first, thumb second) */
.fn-headline-content { order: 1; }
.fn-headline-thumb { order: 2; }
.fn-headline-meta-sep { opacity: .4; }
.fn-headline-verdict-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.fn-headline-verdict-badge {
font-family: var(--font-mono);
font-size: 12px;
padding: 3px 12px;
letter-spacing: .08em;
}
.fn-headline-best-for {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.fn-headline-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.fn-meta-chip {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 9px;
letter-spacing: .08em;
border-radius: 2px;
}
.fn-meta-chip--cat { background: rgba(0,200,200,.1); border: 1px solid rgba(0,200,200,.25); color: var(--teal); }
.fn-meta-chip--tag { background: rgba(0,51,255,.07); border: 1px solid rgba(0,51,255,.2); color: rgba(140,160,200,.75); text-decoration: none; }
.fn-meta-chip--tag:hover { border-color: var(--teal); color: var(--teal); }
.fn-headline-cta { margin-top: 4px; }
/* type chip in headline eyebrow */
.fn-type-chip {
font-size: 11px;
padding: 2px 10px;
}
/* ── No-results microcopy ─────────────────────────────────────────────── */
.fn-no-results-icon { font-size: 32px; opacity: .3; color: var(--teal); }
.fn-no-results-msg { font-size: 14px; }
/* ── Load-more area ──────────────────────────────────────────────────── */
.fn-load-more-wrap { text-align: center; margin-top: 3rem; }
.fn-load-more-desc {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: .08em;
margin-bottom: 14px;
}
.fn-load-more-btn {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 12px 28px;
border: 1px solid rgba(0,51,255,.4);
background: rgba(0,51,255,.07);
color: rgba(160,180,220,.85);
cursor: pointer;
transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.fn-load-more-btn:hover {
background: rgba(0,100,255,.15);
border-color: var(--teal);
color: #fff;
box-shadow: 0 0 18px rgba(0,200,255,.15);
}
/* ── Featured Series section ─────────────────────────────────────────── */
.fn-series-section {
padding: 3rem 0 2.5rem;
border-top: 1px solid var(--blue-border);
background: rgba(0,0,10,.3);
}
.fn-series-hdr {
margin-bottom: 24px;
}
.fn-series-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--teal);
display: block;
margin-bottom: 6px;
}
.fn-series-title {
font-family: var(--font-display, 'Orbitron', sans-serif);
font-size: clamp(1.2rem, 2.5vw, 1.7rem);
color: #fff;
margin: 0;
}
.fn-series-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 900px) { .fn-series-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fn-series-grid { grid-template-columns: 1fr; } }
.fn-series-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 18px 16px;
background: rgba(255,255,255,.02);
border: 1px solid var(--blue-border);
text-decoration: none;
transition: border-color .2s, background .2s, transform .2s;
position: relative;
}
.fn-series-card:hover {
border-color: rgba(0,100,255,.4);
background: rgba(0,30,80,.12);
transform: translateY(-2px);
}
.fn-series--review { border-left: 3px solid rgba(0,200,200,.4); }
.fn-series--tutorial { border-left: 3px solid rgba(80,180,255,.4); }
.fn-series--process { border-left: 3px solid rgba(255,200,0,.35); }
.fn-series--starparty{ border-left: 3px solid rgba(0,180,80,.4); }
.fn-series-icon {
font-size: 20px;
flex-shrink: 0;
opacity: .6;
margin-top: 1px;
}
.fn-series-body { flex: 1; min-width: 0; }
.fn-series-name { font-family: var(--font-mono); font-size: 12.5px; color: #fff; font-weight: 600; margin-bottom: 5px; }
.fn-series-desc { font-family: var(--font-mono); font-size: 10.5px; color: rgba(160,180,220,.6); line-height: 1.55; margin-bottom: 8px; }
.fn-series-count { font-family: var(--font-mono); font-size: 9.5px; color: var(--teal); opacity: .8; }
.fn-series-arrow {
font-size: 14px;
color: var(--muted);
flex-shrink: 0;
transition: transform .18s, color .18s;
align-self: center;
}
.fn-series-card:hover .fn-series-arrow { transform: translateX(4px); color: var(--teal); }
/* Focus / accessibility */
.fn-hero-pill:focus-visible,
.fn-cat-tab:focus-visible,
.fn-load-more-btn:focus-visible,
.fn-series-card:focus-visible,
.fn-card:focus-visible,
.fn-widget-item:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
/* ── Responsive (updated) ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
.fn-body-wrap { display: block; }
}
@media (max-width: 1000px) {
.fn-headline-card { grid-template-columns: 1fr; }
.fn-headline-thumb { min-height: 280px; order: 1; }
.fn-headline-content { order: 2; }
.fn-headline-thumb img, .fn-placeholder--featured { min-height: 280px; }
.fn-secondary-row { grid-template-columns: repeat(2, 1fr); }
.fn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.fn-filter-row--bottom { flex-direction: column; align-items: stretch; gap: 8px; }
.fn-filter-row-end { justify-content: space-between; }
.fn-date-range { flex-wrap: wrap; gap: 6px; }
.fn-secondary-row { grid-template-columns: 1fr; }
.fn-grid { grid-template-columns: 1fr; }
.fn-headline-content { padding: 24px 20px; }
.fn-date-input { width: 130px; }
.fn-hero { padding: 60px 0 40px; }
.fn-hero-tagline { font-size: 14px; }
.fn-hero-pills { gap: 6px; }
.fn-hero-pill { font-size: 11px; padding: 5px 11px; }
.fn-series-section { padding: 2rem 0; }
.fn-sidebar { padding: 24px 0 36px; }
}
/* =====================================================================
SINGLE POST
===================================================================== */
.single-post-page { background: var(--bg-deep); padding: 48px 0; }
.single-post-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 48px;
align-items: start;
}
.post-header { margin-bottom: 32px; }
.post-header-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 14px; color: var(--text-muted); }
.post-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); color: var(--white); margin-bottom: 12px; line-height: 1.2; }
.post-byline { font-size: 14px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; }
.post-featured-image { margin-bottom: 32px; }
.post-featured-image img { width: 100%; max-height: 500px; object-fit: cover; display: block; }
.review-box {
border: 1px solid var(--blue);
background: rgba(0,51,255,0.06);
margin-bottom: 32px;
}
.review-box-header {
padding: 16px 24px;
border-bottom: 1px solid rgba(0,51,255,0.2);
background: rgba(0,51,255,0.1);
}
.review-box-label { font-size: 12px; font-family: var(--font-mono); color: var(--teal); letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.review-product-name { font-family: var(--font-display); font-size: 18px; color: var(--white); }
.review-box-body { padding: 24px; }
.review-score-display { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.review-stars { display: flex; gap: 4px; }
.review-score-num { display: flex; align-items: baseline; gap: 4px; }
.score-big { font-family: var(--font-display); font-size: 36px; color: var(--white); }
.score-denom { font-size: 18px; color: var(--text-muted); }
.review-verdict { background: rgba(255,255,255,0.05); padding: 16px; }
.verdict-label { display: block; font-size: 12px; font-family: var(--font-mono); color: var(--teal); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.verdict-text { font-size: 15px; color: var(--white); margin: 0; }
.post-content { font-size: 16px; line-height: 1.8; color: var(--text-body, #ccc); }
.post-content h2, .post-content h3 { font-family: var(--font-display); color: var(--white); margin: 32px 0 16px; }
.post-content p { margin-bottom: 20px; }
.post-content img { max-width: 100%; height: auto; }
.post-content a { color: var(--teal); }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.post-tags a { font-size: 13px; padding: 4px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(0,51,255,0.2); color: var(--text-muted); text-decoration: none; }
.post-footer { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(0,51,255,0.15); }
.post-share { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; font-size: 14px; color: var(--text-muted); }
.share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(0,51,255,0.25);
color: var(--white);
text-decoration: none;
font-size: 14px;
transition: all 0.2s;
}
.share-btn:hover { background: var(--blue); border-color: var(--blue); }
.post-review-header-stars { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rating-text { font-size: 14px; color: var(--text-muted); }
.recent-posts-list { list-style: none; padding: 0; margin: 0; }
.recent-posts-list li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.recent-posts-list a { font-size: 14px; color: var(--white); text-decoration: none; display: block; margin-bottom: 2px; }
.recent-posts-list a:hover { color: var(--teal); }
.recent-date { font-size: 12px; color: var(--text-muted); }
.sidebar-cats { list-style: none; padding: 0; }
.sidebar-cats li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.sidebar-cats a { font-size: 14px; color: var(--text-muted); text-decoration: none; }
.sidebar-cats a:hover { color: var(--white); }
@media (max-width: 900px) {
.single-post-layout { grid-template-columns: 1fr; }
.single-post-sidebar { order: -1; }
}
/* =====================================================================
404
===================================================================== */
.error-404-page {
min-height: 80vh;
display: flex;
align-items: center;
background: var(--bg-deep);
}
.error-404-inner { text-align: center; padding: 80px 0; }
.error-404-graphic {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 40px;
}
.error-404-reticle {
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid rgba(0,51,255,0.4);
position: absolute;
}
.error-404-reticle::before { content: ''; position: absolute; width: 1px; height: 100%; left: 50%; background: rgba(0,51,255,0.3); }
.error-404-reticle::after { content: ''; position: absolute; height: 1px; width: 100%; top: 50%; background: rgba(0,51,255,0.3); }
.error-404-num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 56px;
color: var(--blue);
text-shadow: 0 0 30px rgba(0,51,255,0.5);
}
.error-404-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); color: var(--white); margin-bottom: 16px; }
.error-404-sub { font-size: 16px; color: var(--text-muted); max-width: 500px; margin: 0 auto 32px; line-height: 1.7; }
.error-404-actions { display: flex; gap: 16px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
/* =====================================================================
SEARCH
===================================================================== */
.search-results-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.search-result-card {
display: flex;
gap: 20px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(0,51,255,0.15);
padding: 20px;
transition: border-color 0.2s;
}
.search-result-card:hover { border-color: var(--blue); }
.src-thumb img { width: 120px; height: 90px; object-fit: cover; display: block; flex-shrink: 0; }
.src-thumb-placeholder { width: 120px; height: 90px; background: rgba(0,51,255,0.1); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; color: var(--blue); flex-shrink: 0; }
.src-type { font-size: 12px; color: var(--teal); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 6px; }
.src-title { font-family: var(--font-display); font-size: 18px; color: var(--white); margin-bottom: 8px; }
.src-title a { color: inherit; text-decoration: none; }
.src-title a:hover { color: var(--teal); }
.src-excerpt { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }
.search-empty { text-align: center; padding: 60px; color: var(--text-muted); }
.search-empty-links { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
/* =====================================================================
SCROLL REVEAL
===================================================================== */
[data-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].revealed {
opacity: 1;
transform: translateY(0);
}
/* =====================================================================
BUTTONS (ensure available globally)
===================================================================== */
.btn {
display: inline-block;
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 14px;
padding: 12px 28px;
text-decoration: none;
cursor: pointer;
border: none;
letter-spacing: 0.05em;
transition: all 0.25s;
text-align: center;
}
.btn-primary {
background: var(--blue, #0033ff);
color: #fff;
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.btn-primary:hover {
background: var(--teal, #00c8ff);
color: #000;
}
.btn-ghost {
background: transparent;
border: 1px solid var(--blue, #0033ff);
color: var(--blue, #0033ff);
}
.btn-ghost:hover {
background: rgba(0,51,255,0.15);
border-color: var(--teal);
color: var(--teal, #00c8ff);
}
/* =====================================================================
WEATHER STATS PANEL (supplemental)
===================================================================== */
.ws-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 8px;
}
.ws-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ws-icon { font-size: 20px; }
.ws-num { font-family: var(--font-mono); font-size: 15px; color: var(--white); font-weight: 600; }
.ws-lbl { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ws-summary { margin-top: 16px; font-size: 13px; color: var(--text-muted); text-align: center; font-style: italic; }
.sq-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 14px;
}
.sq-label { flex: 0 0 110px; color: var(--text-muted); font-size: 13px; }
.sq-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,0.1); }
.sq-bar { display: block; height: 100%; background: var(--blue); transition: width 1s ease; }
.sq-val { flex: 0 0 80px; text-align: right; font-family: var(--font-mono); font-size: 13px; }
.sq-val.excellent { color: #4ade80; }
.sq-val.good { color: #86efac; }
.sq-val.fair { color: #fbbf24; }
.sq-val.poor { color: #f87171; }
/* =====================================================================
ADMIN NOTICE
===================================================================== */
.admin-notice {
background: rgba(0,51,255,0.1);
border: 1px dashed rgba(0,51,255,0.4);
padding: 24px;
color: var(--text-muted);
font-size: 15px;
text-align: center;
}
.admin-notice a { color: var(--blue); }
/* =====================================================================
GLOBAL MIN FONT SIZE ENFORCEMENT
===================================================================== */
* { min-height: 0; }
body, p, li, td, th, span, div, a, label, input, select, textarea, button {
font-size: max(14px, 1em);
}
small { font-size: 14px !important; }
/* =====================================================================
READING PROGRESS BAR
===================================================================== */
.reading-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 9999;
background: transparent;
pointer-events: none;
}
.reading-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--blue-bright), var(--teal));
box-shadow: 0 0 8px var(--teal);
transition: width 0.1s linear;
}
/* =====================================================================
SINGLE BLOG POST (fn-single-*)
===================================================================== */
.fn-single-page { min-height: 100vh; }
/* Hero */
.fn-single-hero {
position: relative;
min-height: 420px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.fn-single-hero--image { min-height: 520px; }
.fn-single-hero-img {
position: absolute;
inset: 0;
}
.fn-single-hero-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.fn-single-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%);
}
.fn-single-hero-content {
position: relative;
z-index: 2;
padding: 60px 24px 48px;
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
}
.fn-single-hero-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.fn-single-cat {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal);
border: 1px solid rgba(0,200,255,0.35);
padding: 3px 10px;
text-decoration: none;
transition: background 0.2s;
}
.fn-single-cat:hover { background: rgba(0,200,255,0.1); color: var(--teal); }
.fn-single-review-badge {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(0,51,255,0.25);
border: 1px solid var(--blue-border);
color: var(--blue-bright);
padding: 3px 10px;
}
.fn-single-title {
font-family: var(--font-orb);
font-size: clamp(26px, 4vw, 46px);
color: var(--white, #fff);
line-height: 1.15;
margin: 0 0 20px;
text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}
.fn-single-byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--muted-light);
font-family: var(--font-mono);
}
.fn-byline-sep { color: var(--muted); }
.fn-byline-stars .star { color: var(--muted); }
.fn-byline-stars .star.filled { color: #fbbf24; }
/* Breadcrumb */
.fn-single-breadcrumb {
background: var(--panel);
border-bottom: 1px solid var(--blue-border);
padding: 10px 0;
font-size: 12px;
font-family: var(--font-mono);
}
.fn-single-breadcrumb nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
color: var(--muted);
}
.fn-single-breadcrumb a { color: var(--muted); text-decoration: none; }
.fn-single-breadcrumb a:hover { color: var(--teal); }
.fn-single-breadcrumb [aria-current="page"] { color: var(--text); }
/* Layout */
.fn-single-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 48px;
padding: 48px 0 80px;
}
@media (max-width: 900px) {
.fn-single-layout { grid-template-columns: 1fr; gap: 32px; }
}
/* Article content */
.fn-article { min-width: 0; }
.fn-post-content {
font-size: 16px;
line-height: 1.8;
color: var(--muted-light);
}
.fn-post-content h2, .fn-post-content h3, .fn-post-content h4 {
font-family: var(--font-orb);
color: var(--text);
margin: 2em 0 0.75em;
}
.fn-post-content img {
max-width: 100%;
height: auto;
border: 1px solid var(--blue-border);
display: block;
margin: 24px auto;
}
.fn-post-content blockquote {
border-left: 3px solid var(--blue-bright);
margin: 24px 0;
padding: 12px 20px;
background: var(--panel);
font-style: italic;
}
/* Review box */
.fn-review-box {
border: 1px solid var(--blue-border);
border-top: 3px solid var(--blue-bright);
background: var(--panel);
margin-bottom: 36px;
overflow: hidden;
}
.fn-review-box-header {
padding: 20px 24px 16px;
border-bottom: 1px solid var(--blue-border);
}
.fn-review-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
display: block;
margin-bottom: 6px;
}
.fn-review-product {
font-family: var(--font-orb);
font-size: 20px;
color: var(--text);
margin: 0;
}
.fn-review-box-body {
padding: 20px 24px;
display: flex;
gap: 32px;
flex-wrap: wrap;
align-items: flex-start;
}
.fn-review-score {
display: flex;
align-items: center;
gap: 16px;
}
.fn-review-stars .star { font-size: 22px; color: var(--muted); }
.fn-review-stars .star.filled { color: #fbbf24; text-shadow: 0 0 8px rgba(251,191,36,0.5); }
.fn-review-num { display: flex; align-items: baseline; gap: 4px; }
.fn-score-big { font-family: var(--font-orb); font-size: 36px; color: var(--text); line-height: 1; }
.fn-score-denom { font-family: var(--font-mono); font-size: 14px; color: var(--muted); }
.fn-review-verdict { flex: 1; min-width: 180px; }
.fn-verdict-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
display: block;
margin-bottom: 6px;
}
.fn-verdict-text {
font-size: 15px;
color: var(--muted-light);
margin: 0;
font-style: italic;
}
/* Post footer */
.fn-post-footer {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--blue-border);
}
.fn-share {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 32px;
}
.fn-share-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.fn-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border: 1px solid var(--blue-border);
color: var(--muted-light);
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s;
}
.fn-share-btn:hover {
border-color: var(--blue-bright);
color: var(--blue-bright);
background: var(--blue-faint);
}
.fn-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.fn-post-nav-link {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
border: 1px solid var(--blue-border);
background: var(--panel);
text-decoration: none;
transition: border-color 0.2s, background 0.2s;
}
.fn-post-nav-link:hover {
border-color: var(--blue-bright);
background: var(--blue-faint);
}
.fn-post-nav-link--next { text-align: right; }
.fn-nav-dir {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
color: var(--teal);
text-transform: uppercase;
}
.fn-nav-title { font-size: 13px; color: var(--muted-light); }
/* Sidebar */
.fn-single-sidebar { min-width: 0; }
.fn-sidebar-widget {
background: var(--panel);
border: 1px solid var(--blue-border);
padding: 20px;
margin-bottom: 24px;
}
.fn-sidebar-heading {
font-family: var(--font-orb);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal);
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--blue-border);
}
.fn-sidebar-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
display: block;
margin-bottom: 4px;
}
.fn-author-card {
display: flex;
align-items: center;
gap: 16px;
}
.fn-author-avatar img {
width: 60px; height: 60px;
border-radius: 50%;
border: 2px solid var(--blue-border);
display: block;
}
.fn-author-name {
font-family: var(--font-orb);
font-size: 14px;
color: var(--text);
display: block;
}
.fn-sidebar-cats { list-style: none; margin: 0; padding: 0; }
.fn-sidebar-cats li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.fn-sidebar-cats li:last-child { border-bottom: none; }
.fn-sidebar-cats a { color: var(--muted-light); font-size: 13px; text-decoration: none; }
.fn-sidebar-cats a:hover { color: var(--teal); }
.fn-sidebar-cats .count { color: var(--muted); margin-left: 4px; }
.fn-sidebar-recent { list-style: none; margin: 0; padding: 0; }
.fn-sidebar-recent-item {
display: flex;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fn-sidebar-recent-item:last-child { border-bottom: none; }
.fn-sidebar-thumb {
flex-shrink: 0;
width: 56px; height: 56px;
overflow: hidden;
display: block;
}
.fn-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fn-sidebar-post-title {
display: block;
font-size: 13px;
color: var(--muted-light);
text-decoration: none;
line-height: 1.4;
margin-bottom: 4px;
}
.fn-sidebar-post-title:hover { color: var(--teal); }
.fn-sidebar-post-date {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
/* =====================================================================
TIMELINE SINGLE POST (tl-single-*)
===================================================================== */
.tl-single-page { min-height: 100vh; }
/* Hero */
.tl-single-hero {
position: relative;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.tl-single-hero-inner {
position: relative;
z-index: 2;
padding: 56px 24px 40px;
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
text-align: center;
}
.tl-single-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
display: block;
margin-bottom: 12px;
}
.tl-single-title {
font-family: var(--font-orb);
font-size: clamp(24px, 3.5vw, 42px);
color: var(--white, #fff);
margin: 0;
text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}
/* Breadcrumb */
.tl-single-breadcrumb {
background: var(--panel);
border-bottom: 1px solid var(--blue-border);
padding: 10px 0;
font-size: 12px;
font-family: var(--font-mono);
}
.tl-single-breadcrumb nav {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
color: var(--muted);
}
.tl-single-breadcrumb a { color: var(--muted); text-decoration: none; }
.tl-single-breadcrumb a:hover { color: var(--teal); }
.tl-single-breadcrumb [aria-current="page"] { color: var(--text); }
/* Layout */
.tl-single-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 48px;
padding: 48px 0 80px;
}
@media (max-width: 860px) {
.tl-single-layout { grid-template-columns: 1fr; gap: 32px; }
}
.tl-single-main { min-width: 0; }
.tl-single-featured {
width: 100%;
margin-bottom: 32px;
border: 1px solid var(--blue-border);
display: block;
}
.tl-single-featured img { width: 100%; height: auto; display: block; }
.tl-single-content {
font-size: 16px;
line-height: 1.8;
color: var(--muted-light);
}
.tl-single-content h2, .tl-single-content h3 {
font-family: var(--font-orb);
color: var(--text);
margin: 2em 0 0.75em;
}
/* Sidebar */
.tl-single-sidebar { min-width: 0; }
.tl-sidebar-widget {
background: var(--panel);
border: 1px solid var(--blue-border);
padding: 20px;
margin-bottom: 24px;
}
.tl-sidebar-heading {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--blue-border);
}
.tl-sidebar-year {
font-family: var(--font-orb);
font-size: 48px;
color: var(--blue-bright);
line-height: 1;
text-align: center;
display: block;
margin-bottom: 8px;
text-shadow: 0 0 24px var(--blue-glow);
}
.tl-sidebar-year-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
text-align: center;
display: block;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tl-sidebar-list { list-style: none; margin: 0; padding: 0; }
.tl-sidebar-item {
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
display: flex;
gap: 10px;
align-items: baseline;
}
.tl-sidebar-item:last-child { border-bottom: none; }
.tl-sidebar-item-year {
font-family: var(--font-mono);
font-size: 12px;
color: var(--blue-bright);
flex-shrink: 0;
}
.tl-sidebar-item a {
font-size: 13px;
color: var(--muted-light);
text-decoration: none;
}
.tl-sidebar-item a:hover { color: var(--teal); }
.tl-sidebar-item.tl-sidebar-item--current a { color: var(--text); font-weight: 600; }
/* Timeline nav (prev/next) */
.tl-single-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--blue-border);
}
.tl-nav-link {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
border: 1px solid var(--blue-border);
background: var(--panel);
text-decoration: none;
transition: border-color 0.2s, background 0.2s;
}
.tl-nav-link:hover { border-color: var(--blue-bright); background: var(--blue-faint); }
.tl-nav-link--next { text-align: right; }
.tl-nav-dir {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
color: var(--teal);
text-transform: uppercase;
}
.tl-nav-label { font-size: 13px; color: var(--muted-light); }
.tl-back-btn {
display: inline-block;
margin-top: 16px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
border: 1px solid var(--blue-border);
padding: 10px 20px;
text-decoration: none;
transition: all 0.2s;
}
.tl-back-btn:hover { color: var(--teal); border-color: var(--teal); }
/* =====================================================================
SPACE EVENTS — SHARED (se-*)
===================================================================== */
.se-page { min-height: 100vh; }
.se-past-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
color: var(--muted-light);
padding: 3px 10px;
margin-left: 8px;
vertical-align: middle;
}
/* Info strip (default layout) */
.se-info-strip {
background: var(--panel);
border-bottom: 1px solid var(--blue-border);
padding: 14px 0;
}
.se-info-strip .container {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.se-info-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.se-info-icon { color: var(--teal); font-size: 15px; }
.se-info-key {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.se-info-val { color: var(--text); }
/* Content layout */
.se-content-wrap {
display: grid;
grid-template-columns: 1fr 300px;
gap: 48px;
padding-top: 48px;
padding-bottom: 80px;
}
@media (max-width: 900px) {
.se-content-wrap { grid-template-columns: 1fr; }
}
.se-body { min-width: 0; }
.se-featured-img {
width: 100%;
margin-bottom: 28px;
position: relative;
}
.se-featured-img img {
width: 100%; height: auto;
display: block;
border: 1px solid var(--blue-border);
}
.se-content {
font-size: 16px;
line-height: 1.8;
color: var(--muted-light);
}
.se-content h2, .se-content h3 {
font-family: var(--font-orb);
color: var(--text);
margin: 2em 0 0.75em;
}
/* Sidebar card */
.se-sidebar { min-width: 0; }
.se-sidebar-card {
background: var(--panel);
border: 1px solid var(--blue-border);
border-top: 3px solid var(--blue-bright);
padding: 20px;
position: sticky;
top: calc(var(--nav-height) + 20px);
}
.se-sidebar-heading {
font-family: var(--font-orb);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--blue-border);
}
.se-sidebar-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
font-size: 13px;
}
.se-sidebar-row:last-of-type { border-bottom: none; }
.se-sidebar-key { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.se-sidebar-val { color: var(--text); text-align: right; }
.se-sidebar-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
/* =====================================================================
SPACE EVENTS — STAR PARTY (se-sp-*)
===================================================================== */
.se-sp-hero {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.se-sp-hero-bg-img {
position: absolute;
inset: 0;
}
.se-sp-hero-bg-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
opacity: 0.35;
filter: blur(2px);
}
.se-sp-hero-content {
position: relative;
z-index: 2;
padding: 60px 24px;
max-width: 700px;
}
.se-sp-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
display: block;
margin-bottom: 14px;
}
.se-sp-title {
font-family: var(--font-orb);
font-size: clamp(28px, 4.5vw, 52px);
color: #fff;
line-height: 1.1;
margin: 0 0 16px;
text-shadow: 0 2px 24px rgba(0,0,0,0.9);
}
.se-sp-location {
font-family: var(--font-mono);
font-size: 14px;
color: var(--muted-light);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 20px;
}
.se-sp-loc-dot { color: var(--teal); }
.se-sp-countdown-badge {
display: inline-flex;
align-items: baseline;
gap: 6px;
background: rgba(0,51,255,0.3);
border: 1px solid var(--blue-border);
padding: 10px 20px;
margin-top: 8px;
}
.se-sp-countdown-badge--today {
background: rgba(0,200,255,0.15);
border-color: var(--teal);
font-family: var(--font-orb);
font-size: 18px;
color: var(--teal);
}
.se-sp-countdown-num {
font-family: var(--font-orb);
font-size: 36px;
color: var(--white, #fff);
line-height: 1;
}
.se-sp-countdown-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted-light);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Date banner */
.se-sp-date-banner {
background: var(--panel);
border-bottom: 1px solid var(--blue-border);
padding: 20px 0;
}
.se-sp-date-inner {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.se-sp-date-block {
display: flex;
flex-direction: column;
align-items: center;
min-width: 80px;
}
.se-sp-date-dow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.se-sp-date-num {
font-family: var(--font-orb);
font-size: 48px;
color: var(--teal);
line-height: 1;
}
.se-sp-date-mon {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.se-sp-date-sep {
font-size: 40px;
color: var(--blue-border);
flex-shrink: 0;
}
.se-sp-date-details { flex: 1; min-width: 160px; }
.se-sp-date-row {
display: flex;
gap: 12px;
align-items: center;
padding: 4px 0;
font-size: 14px;
}
.se-sp-date-cta { margin-left: auto; }
/* Sidebar variant */
.se-sp-sidebar-card { border-top-color: var(--teal); }
.se-sp-sidebar-card .se-sidebar-heading { color: var(--teal); }
/* =====================================================================
SPACE EVENTS — IMAGING SESSION (se-img-*)
===================================================================== */
.se-img-hero {
position: relative;
min-height: 440px;
display: flex;
align-items: center;
overflow: hidden;
}
.se-img-hero-content {
position: relative;
z-index: 2;
padding: 60px 24px;
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
}
.se-img-mission-id {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.se-img-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-light);
}
.se-img-status {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 10px;
border: 1px solid currentColor;
}
.se-img-status--scheduled { color: var(--blue-bright); }
.se-img-status--tonight { color: var(--teal); animation: liveBlink 1.4s ease-in-out infinite; }
.se-img-status--complete { color: var(--muted); border-color: rgba(255,255,255,0.15); }
.se-img-title {
font-family: var(--font-orb);
font-size: clamp(26px, 4vw, 44px);
color: #fff;
margin: 0 0 20px;
text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}
.se-img-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
font-size: 14px;
}
.se-img-meta-item {
display: flex;
align-items: center;
gap: 8px;
}
.se-img-meta-key {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.se-img-meta-sep { color: var(--muted); }
/* Mission window bar */
.se-img-window-bar {
background: var(--panel);
border-bottom: 1px solid var(--blue-border);
padding: 16px 0;
}
.se-img-window-inner {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.se-img-window-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
flex-shrink: 0;
}
.se-img-window-slots {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.se-img-slot { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.se-img-slot-key {
font-family: var(--font-mono);
font-size: 12px;
color: var(--teal);
}
.se-img-slot-val { color: var(--text); }
/* Featured capture image */
.se-img-capture { position: relative; }
.se-img-capture-label {
position: absolute;
bottom: 0; left: 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
background: rgba(0,0,0,0.7);
padding: 4px 10px;
}
/* Briefing sidebar */
.se-img-briefing-card { border-top-color: var(--teal); }
.se-img-briefing-card .se-sidebar-heading { color: var(--muted-light); }
/* =====================================================================
SPACE EVENTS — DEFAULT HEADER OVERRIDES
===================================================================== */
.se-header .page-title { font-size: clamp(24px, 3.5vw, 40px); }
.se-header .eyebrow { color: var(--teal); }
/* =====================================================================
CONTACT PAGE
===================================================================== */
.contact-page { min-height: 100vh; }
/* Hero */
.contact-hero {
min-height: 360px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
position: relative;
}
.contact-hero-inner {
position: relative;
z-index: 2;
padding: 60px 24px 48px;
}
.contact-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--teal);
display: block;
margin-bottom: 16px;
}
.contact-hero-title {
font-family: var(--font-orb);
font-size: clamp(32px, 5vw, 56px);
color: #fff;
margin: 0 0 16px;
text-shadow: 0 0 40px var(--blue-glow);
}
.contact-hero-sub {
font-size: 15px;
color: var(--muted-light);
max-width: 500px;
margin: 0 auto;
line-height: 1.7;
}
/* Signal rings animation */
.contact-signal {
position: relative;
width: 80px;
height: 80px;
margin: 0 auto 28px;
}
.contact-signal-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--teal);
animation: contactRingPulse 2.4s ease-out infinite;
opacity: 0;
}
.contact-signal-ring--2 { animation-delay: 0.8s; }
.contact-signal-ring--3 { animation-delay: 1.6s; }
@keyframes contactRingPulse {
0% { transform: scale(0.3); opacity: 0.8; }
100% { transform: scale(2.2); opacity: 0; }
}
.contact-signal-core {
position: absolute;
inset: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 12px var(--teal), 0 0 24px rgba(0,200,255,0.4);
top: 50%;
left: 50%;
}
/* Body layout */
.contact-body {
padding: 56px 0 80px;
background: var(--near-black);
}
.contact-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 40px;
align-items: start;
}
@media (max-width: 860px) {
.contact-layout { grid-template-columns: 1fr; }
.contact-info-panel { display: none; }
}
/* Info panel */
.contact-info-panel {
background: var(--panel);
border: 1px solid var(--blue-border);
border-top: 2px solid var(--blue-bright);
padding: 20px;
position: sticky;
top: calc(var(--nav-height) + 20px);
font-family: var(--font-mono);
}
.contact-info-eyebrow {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
display: block;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--blue-border);
}
.contact-info-rows { margin-bottom: 20px; }
.contact-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 12px;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.contact-info-key { color: var(--muted); }
.contact-info-val { color: var(--text); }
.contact-info-val--live {
color: #00dd66;
text-shadow: 0 0 8px rgba(0,221,102,0.5);
animation: liveBlink 2s ease-in-out infinite;
}
.contact-info-divider {
height: 1px;
background: var(--blue-border);
margin: 16px 0;
}
.contact-info-type-label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}
.contact-info-type-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--muted-light);
padding: 5px 0;
}
.contact-info-type-icon { color: var(--teal); width: 14px; text-align: center; }
/* Terminal form container */
.contact-terminal {
background: var(--panel);
border: 1px solid var(--blue-border);
border-top: 2px solid var(--blue-bright);
overflow: hidden;
}
.contact-terminal-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: rgba(0,51,255,0.06);
border-bottom: 1px solid var(--blue-border);
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.1em;
}
.contact-terminal-blink {
color: var(--teal);
animation: liveBlink 1s step-end infinite;
}
.contact-form { padding: 28px; }
/* Inquiry type cards */
.contact-fieldset { border: none; margin: 0 0 28px; padding: 0; }
.contact-legend {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 14px;
display: block;
}
.contact-type-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
@media (max-width: 700px) {
.contact-type-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
.contact-type-grid { grid-template-columns: 1fr; }
}
.contact-type-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 12px;
border: 1px solid var(--blue-border);
background: var(--panel-light);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
position: relative;
}
.contact-type-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.contact-type-card:hover {
border-color: rgba(0,200,255,0.4);
background: rgba(0,200,255,0.04);
}
.contact-type-card--active {
border-color: var(--teal);
background: rgba(0,200,255,0.07);
}
.contact-type-card--active::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--teal);
}
.contact-type-icon {
font-size: 18px;
color: var(--teal);
display: block;
line-height: 1;
}
.contact-type-name {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--text);
text-transform: uppercase;
}
.contact-type-desc {
font-size: 12px;
color: var(--muted);
line-height: 1.4;
}
/* Fields */
.contact-row-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
@media (max-width: 560px) {
.contact-row-split { grid-template-columns: 1fr; }
}
.contact-field { margin-bottom: 20px; }
.contact-field:last-of-type { margin-bottom: 0; }
.contact-label {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.contact-label-key {
font-size: 11px;
color: var(--blue-bright);
opacity: 0.6;
}
.contact-required { color: var(--teal); }
.contact-input,
.contact-textarea {
width: 100%;
background: var(--near-black);
border: 1px solid var(--blue-border);
border-bottom: 1px solid rgba(0,200,255,0.25);
color: var(--text);
font-family: var(--font-body);
font-size: 15px;
padding: 11px 14px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
resize: vertical;
box-sizing: border-box;
}
.contact-input:focus,
.contact-textarea:focus {
border-color: var(--teal);
box-shadow: 0 0 0 2px rgba(0,200,255,0.12), inset 0 0 20px rgba(0,200,255,0.03);
}
.contact-input::placeholder,
.contact-textarea::placeholder { color: var(--muted); opacity: 0.6; }
.contact-textarea { min-height: 140px; }
/* Submit row */
.contact-submit-row {
display: flex;
align-items: center;
gap: 20px;
margin-top: 28px;
flex-wrap: wrap;
}
.contact-submit {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-orb);
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
background: var(--blue-bright);
border: none;
padding: 14px 28px;
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.contact-submit:hover {
background: #0044ee;
box-shadow: 0 0 20px var(--blue-glow);
}
.contact-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.contact-submit-icon {
font-size: 16px;
transition: transform 0.2s;
}
.contact-submit:hover .contact-submit-icon { transform: translateX(4px); }
.contact-required-note {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
/* Status messages */
.contact-status {
margin-top: 20px;
padding: 14px 18px;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.04em;
border-left: 3px solid transparent;
}
.contact-status--success {
color: #4ade80;
background: rgba(74,222,128,0.07);
border-left-color: #4ade80;
}
.contact-status--error {
color: #f87171;
background: rgba(248,113,113,0.07);
border-left-color: #f87171;
}
/* ============================================================
ASTRO TOOLBOX
============================================================ */
/* ── Page wrapper ─────────────────────────────────────────── */
.toolbox-page {
min-height: 100vh;
background: var(--bg, #02020f);
}
/* ── Hero ─────────────────────────────────────────────────── */
.toolbox-hero {
padding-bottom: 0;
min-height: 260px;
overflow: visible; /* allow subnav dropdown to escape hero bounds */
background:
radial-gradient(ellipse at top, rgba(0,51,255,.18) 0%, transparent 70%),
var(--bg-deep, #000);
border-bottom: 1px solid rgba(0,51,255,.2);
}
/* Dot grid pattern — mirrors .page-header::before */
.toolbox-hero::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230033ff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
}
/* Blue grid overlay — mirrors .fn-hero-grid-bg */
.toolbox-hero-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0,51,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,51,255,.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
.toolbox-hero-inner {
padding: 4.5rem 2rem 2rem;
text-align: center;
position: relative;
z-index: 1;
}
.toolbox-eyebrow {
display: block;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.3em;
color: var(--teal);
text-transform: uppercase;
margin-bottom: 1rem;
}
.toolbox-title {
font-family: var(--font-orb);
font-size: clamp(28px, 5vw, 52px);
font-weight: 700;
color: #fff;
letter-spacing: 0.06em;
margin: 0;
text-shadow: 0 0 40px rgba(0,100,255,.5);
}
/* ── Sub-nav ──────────────────────────────────────────────── */
.toolbox-subnav {
display: flex;
justify-content: center;
gap: 4px;
padding: 1.4rem 1rem 0;
flex-wrap: wrap;
overflow: visible;
position: relative;
z-index: 100;
}
.toolbox-subnav-item {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 8px 20px;
border: 1px solid var(--blue-border);
color: var(--muted);
text-decoration: none;
transition: color 0.2s, border-color 0.2s, background 0.2s;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.toolbox-subnav-item--active {
color: var(--teal);
border-color: var(--teal);
background: rgba(0,200,255,0.07);
}
.toolbox-subnav-item--soon {
opacity: 0.45;
cursor: default;
pointer-events: none;
}
.toolbox-subnav-item:not(.toolbox-subnav-item--soon):hover {
color: var(--teal);
border-color: var(--teal);
background: rgba(0,200,255,0.05);
}
/* ── Location bar ─────────────────────────────────────────── */
.toolbox-location-bar {
background: var(--panel);
border-top: 1px solid var(--blue-border);
border-bottom: 1px solid var(--blue-border);
padding: 12px 0;
position: relative;
overflow: hidden;
}
.toolbox-location-bar::before {
content: '';
position: absolute;
top: 0; left: -100%; right: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--teal), transparent);
animation: scanLine 5s linear infinite;
}
.toolbox-loc-display {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.toolbox-loc-icon {
color: var(--teal);
font-size: 12px;
}
.toolbox-loc-name {
font-family: var(--font-orb);
font-size: 13px;
color: #fff;
letter-spacing: 0.05em;
}
.toolbox-loc-coords {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.toolbox-loc-btn {
margin-left: auto;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal);
background: transparent;
border: 1px solid rgba(0,200,255,0.3);
padding: 5px 14px;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.toolbox-loc-btn:hover {
background: rgba(0,200,255,0.08);
border-color: var(--teal);
}
/* Location editor form */
/* Location editor form */
.toolbox-loc-form {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--blue-border);
}
/* Method tabs */
.toolbox-loc-tabs {
display: flex;
gap: 2px;
margin-bottom: 14px;
}
.toolbox-loc-tab {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 7px 16px;
background: transparent;
border: 1px solid var(--blue-border);
color: var(--muted);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.toolbox-loc-tab--active {
color: var(--teal);
border-color: var(--teal);
background: rgba(0,200,255,0.08);
}
.toolbox-loc-tab:not(.toolbox-loc-tab--active):hover {
color: var(--muted-light);
border-color: var(--muted);
}
/* Panel (one shown at a time) */
.toolbox-loc-panel {
margin-bottom: 10px;
}
/* City search */
.toolbox-loc-search-row {
display: flex;
gap: 8px;
}
.toolbox-loc-search-btn {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 18px;
background: var(--blue-bright);
border: none;
color: #fff;
cursor: pointer;
flex-shrink: 0;
transition: background 0.2s;
}
.toolbox-loc-search-btn:hover { background: var(--blue-dim); }
.toolbox-loc-search-btn:disabled { opacity: 0.5; cursor: default; }
.toolbox-loc-results {
margin-top: 6px;
border: 1px solid var(--blue-border);
max-height: 200px;
overflow-y: auto;
}
.toolbox-loc-result {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
width: 100%;
padding: 9px 14px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(0,51,255,0.15);
cursor: pointer;
text-align: left;
transition: background 0.15s;
}
.toolbox-loc-result:last-child { border-bottom: none; }
.toolbox-loc-result:hover { background: rgba(0,200,255,0.07); }
.toolbox-loc-result-name {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted-light);
}
.toolbox-loc-result-coords {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
flex-shrink: 0;
}
.toolbox-loc-no-results {
padding: 12px 14px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
/* GPS panel */
.toolbox-loc-gps-wrap {
display: flex;
flex-direction: column;
gap: 12px;
}
.toolbox-loc-gps-btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 22px;
background: rgba(0,200,255,0.07);
border: 1px solid var(--teal);
color: var(--teal);
cursor: pointer;
transition: background 0.2s;
align-self: flex-start;
}
.toolbox-loc-gps-btn:hover { background: rgba(0,200,255,0.14); }
.toolbox-loc-gps-btn:disabled { opacity: 0.5; cursor: default; }
.toolbox-loc-gps-icon { font-size: 16px; }
.toolbox-loc-gps-status {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
display: flex;
flex-direction: column;
gap: 10px;
}
.toolbox-loc-gps-status--error { color: #f87171; }
.toolbox-loc-geo-preview {
display: block;
color: var(--muted-light);
line-height: 1.7;
}
.toolbox-loc-geo-preview strong { color: #fff; }
/* Coordinates panel */
.toolbox-loc-coords-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.toolbox-loc-input--label { flex: 2; min-width: 200px; }
.toolbox-loc-input--short { flex: 1; min-width: 110px; }
/* Shared input style */
.toolbox-loc-input {
font-family: var(--font-mono);
font-size: 13px;
background: rgba(0,51,255,0.08);
border: 1px solid var(--blue-border);
color: #fff;
padding: 8px 12px;
outline: none;
transition: border-color 0.2s;
}
.toolbox-loc-input:focus { border-color: var(--teal); }
/* Footer row */
.toolbox-loc-form-footer {
display: flex;
gap: 10px;
padding-top: 10px;
border-top: 1px solid rgba(0,51,255,0.15);
margin-top: 4px;
}
/* Shared action buttons */
.toolbox-loc-save,
.toolbox-loc-reset,
.toolbox-loc-cancel {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 16px;
border: 1px solid;
cursor: pointer;
transition: background 0.2s;
}
.toolbox-loc-save { background: var(--blue-bright); border-color: var(--blue-bright); color: #fff; }
.toolbox-loc-save:hover { background: var(--blue-dim); }
.toolbox-loc-reset { background: transparent; border-color: var(--muted); color: var(--muted); }
.toolbox-loc-reset:hover { background: rgba(255,255,255,0.05); }
.toolbox-loc-cancel { background: transparent; border-color: transparent; color: var(--muted); }
.toolbox-loc-cancel:hover { color: #fff; }
/* ── Dashboard body ───────────────────────────────────────── */
.toolbox-body {
padding: 2.5rem 0 4rem;
}
/* ── Rows ─────────────────────────────────────────────────── */
.toolbox-row {
display: grid;
gap: var(--gap, 2px);
margin-bottom: var(--gap, 2px);
}
.toolbox-row--3 { grid-template-columns: repeat(3, 1fr); }
.toolbox-row--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
.toolbox-row--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.toolbox-row--3,
.toolbox-row--2 { grid-template-columns: 1fr; }
}
/* ── Panel base ───────────────────────────────────────────── */
.toolbox-panel {
background: var(--panel);
border: 1px solid var(--blue-border);
border-top: 2px solid var(--blue-bright);
padding: 0;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.toolbox-panel::before {
content: '';
position: absolute;
top: 0; left: -100%; right: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--teal), transparent);
animation: scanLine 6s linear infinite;
}
/* Panel header */
.toolbox-panel-hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--blue-border);
background: rgba(0,51,255,0.05);
}
.toolbox-panel-icon {
color: var(--teal);
font-size: 14px;
flex-shrink: 0;
}
.toolbox-panel-title {
font-family: var(--font-orb);
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #fff;
flex: 1;
}
.toolbox-panel-badge {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--muted);
text-transform: uppercase;
}
/* ── Spinner ──────────────────────────────────────────────── */
.toolbox-spinner {
font-size: 11px;
color: var(--muted);
opacity: 0;
transition: opacity 0.2s;
animation: liveBlink 1s ease-in-out infinite;
}
.toolbox-spinner--active {
opacity: 1;
color: var(--teal);
}
/* ── Data rows (shared) ───────────────────────────────────── */
.toolbox-data-list {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.toolbox-data-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 5px 0;
border-bottom: 1px solid rgba(0,51,255,0.1);
}
.toolbox-data-row:last-child { border-bottom: none; }
.toolbox-data-key {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
color: var(--muted);
text-transform: uppercase;
flex-shrink: 0;
}
.toolbox-data-val {
font-family: var(--font-mono);
font-size: 13px;
color: var(--muted-light);
text-align: right;
}
/* Value state colors */
.toolbox-val--good { color: #00dd66; text-shadow: 0 0 10px rgba(0,220,100,0.35); }
.toolbox-val--warn { color: #ffcc00; text-shadow: 0 0 10px rgba(255,200,0,0.3); }
.toolbox-val--danger { color: #ff4444; text-shadow: 0 0 10px rgba(255,50,50,0.3); }
.toolbox-val--notice { color: var(--teal); }
/* ── Solar panel ──────────────────────────────────────────── */
.toolbox-solar-wrap {
position: relative;
flex: 1;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 200px;
}
.toolbox-solar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.3s;
}
.toolbox-solar-overlay {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,20,0.6) 100%);
pointer-events: none;
}
.toolbox-img-error .toolbox-solar-img { opacity: 0.15; }
.toolbox-solar-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
border-top: 1px solid var(--blue-border);
background: rgba(0,51,255,0.05);
}
/* ── Lunar panel ──────────────────────────────────────────── */
.toolbox-lunar-wrap {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.toolbox-moon-img-wrap {
width: min(100%, 260px);
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--blue-border);
background: #000;
position: relative;
}
.toolbox-moon-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.toolbox-moon-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.toolbox-moon-fallback-glyph {
font-size: 80px;
color: var(--muted);
line-height: 1;
}
.toolbox-lunar-data {
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
}
.toolbox-illum-bar-wrap {
margin-top: 10px;
height: 4px;
background: rgba(255,255,255,0.1);
border-radius: 2px;
overflow: hidden;
}
.toolbox-illum-bar {
height: 100%;
background: linear-gradient(90deg, var(--blue-bright), var(--teal));
border-radius: 2px;
transition: width 0.6s ease;
}
/* No API key notice */
.toolbox-no-key {
padding: 24px 16px;
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.toolbox-no-key a { color: var(--blue-bright); }
/* Weather summary text */
.toolbox-summary {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--blue-border);
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.05em;
font-style: italic;
text-align: center;
}
/* ── Space weather panel ──────────────────────────────────── */
.toolbox-spacewx-grid {
padding: 16px;
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
flex: 1;
}
@media (max-width: 480px) {
.toolbox-spacewx-grid { grid-template-columns: 1fr; }
}
/* Kp block */
.toolbox-kp-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding-right: 16px;
border-right: 1px solid var(--blue-border);
min-width: 100px;
}
.toolbox-kp-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
.toolbox-kp-value {
font-family: var(--font-orb);
font-size: 42px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
}
.toolbox-kp--quiet { color: #00dd66; text-shadow: 0 0 20px rgba(0,220,100,0.4); }
.toolbox-kp--active { color: #ffcc00; text-shadow: 0 0 20px rgba(255,200,0,0.4); }
.toolbox-kp--storm { color: #ff8800; text-shadow: 0 0 20px rgba(255,140,0,0.4); }
.toolbox-kp--severe { color: #ff3333; text-shadow: 0 0 20px rgba(255,50,50,0.5); }
.toolbox-kp-desc {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--muted);
text-align: center;
text-transform: uppercase;
}
/* Kp bar */
.toolbox-kp-bar-track {
display: flex;
gap: 3px;
margin-top: 4px;
}
.toolbox-kp-seg {
width: 8px;
height: 20px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
transition: background 0.4s, box-shadow 0.4s;
}
.toolbox-kp-seg--color-green.toolbox-kp-seg--active { background: #00dd66; box-shadow: 0 0 6px rgba(0,220,100,0.5); }
.toolbox-kp-seg--color-yellow.toolbox-kp-seg--active { background: #ffcc00; box-shadow: 0 0 6px rgba(255,200,0,0.5); }
.toolbox-kp-seg--color-orange.toolbox-kp-seg--active { background: #ff8800; box-shadow: 0 0 6px rgba(255,140,0,0.5); }
.toolbox-kp-seg--color-red.toolbox-kp-seg--active { background: #ff3333; box-shadow: 0 0 6px rgba(255,50,50,0.5); }
/* Space weather details sidebar */
.toolbox-sw-details {
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
}
/* ── Almanac panel ────────────────────────────────────────── */
.toolbox-almanac-grid {
padding: 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
flex: 1;
}
@media (max-width: 480px) {
.toolbox-almanac-grid { grid-template-columns: 1fr; }
}
.toolbox-alm-head {
font-family: var(--font-orb);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--blue-border);
}
.toolbox-alm-col {
display: flex;
flex-direction: column;
gap: 2px;
}
.toolbox-data-row--highlight .toolbox-data-val {
color: var(--teal);
}
/* ── Subnav dropdown (Objects) ────────────────────────────── */
.toolbox-subnav-group {
position: relative;
}
.toolbox-subnav-item--has-sub {
background: transparent;
border: 1px solid var(--blue-border);
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
.toolbox-subnav-caret {
font-size: 11px;
transition: transform 0.2s;
line-height: 1;
}
.toolbox-subnav-group--open .toolbox-subnav-caret {
transform: rotate(180deg);
}
.toolbox-subnav-sub {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
min-width: 200px;
background: #0a0a20;
border: 1px solid var(--blue-border);
border-top: 2px solid var(--teal);
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 1100; /* above Leaflet controls (z-1000) and all map layers */
}
.toolbox-subnav-group--open .toolbox-subnav-sub {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.toolbox-subnav-sub-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid rgba(0,51,255,0.15);
transition: color 0.15s, background 0.15s;
}
.toolbox-subnav-sub-item:last-child { border-bottom: none; }
.toolbox-subnav-sub-item:hover,
.toolbox-subnav-sub-item--active {
color: var(--teal);
background: rgba(0,200,255,0.06);
}
.toolbox-subnav-sub-item--active {
border-left: 2px solid var(--teal);
}
.toolbox-subnav-sub-icon {
font-size: 14px;
flex-shrink: 0;
color: var(--teal);
}
/* Mobile: stack sub-menu inline */
@media (max-width: 600px) {
.toolbox-subnav-sub {
position: static;
opacity: 0;
max-height: 0;
overflow: hidden;
transform: none;
transition: opacity 0.2s, max-height 0.25s;
min-width: 0;
width: 100%;
border-top: none;
border: none;
border-left: 2px solid var(--teal);
margin-left: 16px;
}
.toolbox-subnav-group--open .toolbox-subnav-sub {
opacity: 1;
max-height: 300px;
pointer-events: auto;
transform: none;
}
}
/* ── Framework notice banner ──────────────────────────────── */
.toolbox-framework-notice {
background: rgba(0,51,255,0.07);
border-top: 1px solid var(--blue-border);
border-bottom: 1px solid var(--blue-border);
padding: 10px 0;
}
.toolbox-framework-notice .container {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--muted);
}
.toolbox-framework-dot {
color: var(--teal);
flex-shrink: 0;
}
/* ── Full-width panel modifier ────────────────────────────── */
.toolbox-panel--full {
margin-bottom: var(--gap, 2px);
}
/* ── Planet grid ──────────────────────────────────────────── */
.toolbox-planet-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap, 2px);
margin-bottom: var(--gap, 2px);
}
@media (max-width: 1100px) { .toolbox-planet-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .toolbox-planet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .toolbox-planet-grid { grid-template-columns: 1fr; } }
.toolbox-planet-card {
background: var(--panel);
border: 1px solid var(--blue-border);
border-top: 2px solid var(--blue-bright);
display: flex;
flex-direction: column;
transition: box-shadow .2s;
}
.toolbox-planet-card[data-score]:not([data-score="0"]) { box-shadow: none; }
.toolbox-planet-card-hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--blue-border);
background: rgba(0,51,255,0.05);
}
.toolbox-planet-card-hdr-info { flex: 1; min-width: 0; }
.toolbox-planet-symbol {
font-size: 26px;
line-height: 1;
flex-shrink: 0;
}
.toolbox-planet-name {
font-family: var(--font-orb);
font-size: 13px;
color: #fff;
letter-spacing: 0.08em;
}
.toolbox-planet-desc {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.toolbox-planet-data {
flex: 1;
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.toolbox-planet-footer {
display: flex;
justify-content: space-between;
padding: 7px 12px;
border-top: 1px solid var(--blue-border);
background: rgba(0,51,255,0.04);
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.06em;
}
/* ── Status + equipment badges ──────────────────────────── */
.pl-badge-row {
display: flex;
gap: 5px;
padding: 6px 12px;
border-bottom: 1px solid var(--blue-border);
flex-wrap: wrap;
}
.pl-status, .pl-equip {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.07em;
padding: 2px 7px;
border-radius: 2px;
text-transform: uppercase;
font-weight: 600;
}
/* Status colours */
.pl-st--good { background: rgba(61,202,138,.18); color: #3dca8a; border: 1px solid rgba(61,202,138,.35); }
.pl-st--fair { background: rgba(80,180,220,.15); color: #50c8dc; border: 1px solid rgba(80,180,220,.3); }
.pl-st--warn { background: rgba(230,180,50,.15); color: #e6b432; border: 1px solid rgba(230,180,50,.3); }
.pl-st--dim { background: rgba(120,120,180,.12); color: #8888cc; border: 1px solid rgba(120,120,180,.25); }
.pl-st--bad { background: rgba(220,80,60,.15); color: #e05040; border: 1px solid rgba(220,80,60,.3); }
.pl-st--off { background: rgba(100,100,100,.12); color: var(--muted); border: 1px solid rgba(100,100,100,.2); }
/* Equipment colours */
.pl-eq--naked { background: rgba(255,255,200,.1); color: #f0e868; border: 1px solid rgba(240,232,104,.25); }
.pl-eq--binos { background: rgba(80,220,200,.1); color: #40d8b8; border: 1px solid rgba(80,220,200,.25); }
.pl-eq--scope { background: rgba(160,120,220,.12);color: #b090e8; border: 1px solid rgba(160,120,220,.28); }
.pl-eq--imaging { background: rgba(180,80,180,.12); color: #cc70cc; border: 1px solid rgba(180,80,180,.28); }
/* Vis-strip score tinting */
.toolbox-vis-status.pl-st--good { color: #3dca8a; }
.toolbox-vis-status.pl-st--fair { color: #50c8dc; }
.toolbox-vis-status.pl-st--warn { color: #e6b432; }
.toolbox-vis-status.pl-st--dim { color: #8888cc; }
.toolbox-vis-status.pl-st--bad { color: #e05040; }
.toolbox-vis-status.pl-st--off { color: var(--muted); }
/* ── Score bar ───────────────────────────────────────────── */
.pl-score-row {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-bottom: 1px solid var(--blue-border);
}
.pl-score-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .1em;
flex-shrink: 0;
}
.pl-score-num {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
min-width: 22px;
text-align: right;
flex-shrink: 0;
}
.pl-scorebar {
flex: 1;
height: 4px;
background: rgba(255,255,255,.07);
border-radius: 2px;
overflow: hidden;
}
.pl-scorebar-fill {
height: 100%;
border-radius: 2px;
transition: width .4s ease;
}
.pl-score--good { background: #3dca8a; color: #3dca8a; }
.pl-score--fair { background: #e6b432; color: #e6b432; }
.pl-score--warn { background: #e08040; color: #e08040; }
.pl-score--dim { background: #5560a0; color: #8888cc; }
/* ── Alt gauge + azimuth ─────────────────────────────────── */
.pl-altaz-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid var(--blue-border);
}
.pl-altgauge {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
}
.pl-altgauge-track {
width: 6px;
height: 36px;
background: rgba(255,255,255,.06);
border: 1px solid var(--blue-border);
border-radius: 2px;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.pl-altbar-fill {
width: 100%;
transition: height .4s ease;
border-radius: 1px;
}
.pl-alt--good { background: #3dca8a; }
.pl-alt--fair { background: #e6b432; }
.pl-alt--warn { background: #e08040; }
.pl-alt--off { background: #3a3a5a; }
.pl-alt-num {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--text);
min-width: 34px;
}
.pl-altgauge-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .1em;
}
.pl-az-block {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
}
.pl-az-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .1em;
}
.pl-az-val {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
}
/* ── Educational blurb ──────────────────────────────────── */
.pl-blurb {
border-top: 1px solid var(--blue-border);
}
.pl-blurb-toggle {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 7px 12px;
background: none;
border: none;
color: var(--muted);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .06em;
cursor: pointer;
text-align: left;
transition: color .15s;
}
.pl-blurb-toggle:hover { color: var(--text); }
.pl-blurb-arrow { font-size: 11px; }
.pl-blurb-body {
padding: 8px 12px 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted-light, #8090b0);
line-height: 1.6;
border-top: 1px solid rgba(0,51,255,.08);
background: rgba(0,20,60,.12);
}
/* ── Tonight visibility strip ───────────────────────────── */
.toolbox-visibility-strip {
display: flex;
padding: 10px 14px;
gap: 0;
overflow-x: auto;
}
.toolbox-vis-item {
flex: 1;
min-width: 72px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 6px;
border-right: 1px solid var(--blue-border);
}
.toolbox-vis-item:last-child { border-right: none; }
.toolbox-vis-symbol { font-size: 20px; line-height: 1; }
.toolbox-vis-name { font-family: var(--font-orb); font-size: 11px; letter-spacing: 0.08em; color: var(--muted-light); text-transform: uppercase; }
.toolbox-vis-status { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: center; line-height: 1.3; }
.toolbox-vis-score { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.toolbox-vis-score.pl-score--good { color: #3dca8a; }
.toolbox-vis-score.pl-score--fair { color: #e6b432; }
.toolbox-vis-score.pl-score--warn { color: #e08040; }
.toolbox-vis-score.pl-score--dim { color: #5560a0; }
.toolbox-planets-updated {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.06em;
margin-left: auto;
}
/* ── Tonight's Briefing ──────────────────────────────────── */
.pl-briefing-panel .toolbox-panel-hdr { flex-wrap: wrap; }
.pl-briefing {
display: grid;
grid-template-columns: repeat(6, 1fr);
border-top: 1px solid var(--blue-border);
}
@media (max-width: 900px) { .pl-briefing { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .pl-briefing { grid-template-columns: repeat(2, 1fr); } }
.pl-brief-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 10px 12px;
border-right: 1px solid var(--blue-border);
text-align: center;
transition: opacity .3s;
}
.pl-brief-card:last-child { border-right: none; }
.pl-brief-card--skip { opacity: 0.55; }
.pl-brief-icon { font-size: 18px; line-height: 1; color: var(--muted); }
.pl-brief-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .12em;
color: var(--muted);
text-transform: uppercase;
}
.pl-brief-planet {
font-family: var(--font-orb);
font-size: 14px;
color: #fff;
letter-spacing: .06em;
}
.pl-brief-detail {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted-light, #8090b0);
}
/* ── Filter bar ──────────────────────────────────────────── */
.pl-filterbar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px 0;
margin-bottom: var(--gap, 2px);
}
.pl-filter-btn {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 5px 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(0,51,255,.2);
color: var(--muted);
cursor: pointer;
transition: all .15s;
}
.pl-filter-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.pl-filter-btn--active {
background: rgba(0,180,180,.1);
border-color: var(--teal, #00c8c8);
color: var(--teal, #00c8c8);
font-weight: 600;
}
/* ── Tonight's Timeline ──────────────────────────────────── */
.pl-timeline-panel .toolbox-panel-hdr { }
.pl-timeline {
padding: 10px 14px 14px;
}
.pl-tl-header {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 4px;
}
.pl-tl-timebar {
flex: 1;
position: relative;
height: 16px;
margin: 0 4px;
}
.pl-tl-timelabel {
position: absolute;
left: 0;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
white-space: nowrap;
}
.pl-tl-timelabel--mid { left: 50%; transform: translateX(-50%); }
.pl-tl-timelabel--right { left: auto; right: 0; }
.pl-tl-name {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
width: 62px;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: .06em;
}
.pl-tl-alt {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
width: 38px;
text-align: right;
flex-shrink: 0;
}
.pl-tl-legend {
display: flex;
gap: 14px;
margin-bottom: 8px;
padding-left: 66px;
}
.pl-tl-leg {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: .04em;
}
.pl-tl-leg.pl-tl-bar--good { color: #3dca8a; }
.pl-tl-leg.pl-tl-bar--fair { color: #e6b432; }
.pl-tl-leg.pl-tl-bar--warn { color: #e08040; }
.pl-tl-row {
display: flex;
align-items: center;
height: 22px;
margin-bottom: 3px;
}
.pl-tl-track {
flex: 1;
height: 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(0,51,255,.12);
border-radius: 2px;
position: relative;
overflow: hidden;
margin: 0 4px;
}
.pl-tl-bar {
position: absolute;
top: 0;
height: 100%;
border-radius: 1px;
border-top: 2px solid transparent;
opacity: .85;
}
.pl-tl-bar--good { background: rgba(61,202,138,.35); border-color: #3dca8a; }
.pl-tl-bar--fair { background: rgba(230,180,50,.3); border-color: #e6b432; }
.pl-tl-bar--warn { background: rgba(220,128,64,.28); border-color: #e08040; }
.pl-tl-now {
position: absolute;
top: 0;
width: 2px;
height: 100%;
background: rgba(255,255,255,.7);
z-index: 2;
}
/* ── Orbital Forecast ────────────────────────────────────── */
.pl-forecast {
padding: 10px 14px 14px;
}
.pl-fc-loading {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
padding: 8px 0;
}
.pl-fc-row {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 6px 0;
border-bottom: 1px solid rgba(0,51,255,.08);
}
.pl-fc-row:last-child { border-bottom: none; }
.pl-fc-name {
font-family: var(--font-orb);
font-size: 12px;
letter-spacing: .07em;
width: 70px;
flex-shrink: 0;
padding-top: 2px;
}
.pl-fc-events {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1;
}
.pl-fc-event {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted-light, #8090b0);
background: rgba(0,51,255,.06);
border: 1px solid rgba(0,51,255,.14);
padding: 2px 8px;
border-radius: 2px;
}
.pl-fc-event--none { background: none; border: none; color: var(--muted); }
/* ── Shared placeholder canvas ────────────────────────────── */
.toolbox-placeholder-canvas {
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 18px,
rgba(0,51,255,0.04) 18px,
rgba(0,51,255,0.04) 19px
);
border-top: 1px solid var(--blue-border);
position: relative;
}
.toolbox-placeholder-canvas--map { min-height: 200px; }
.toolbox-placeholder-canvas--tall { min-height: 340px; }
.toolbox-placeholder-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
padding: 24px;
}
.toolbox-placeholder-icon {
font-size: 28px;
color: var(--blue-border);
line-height: 1;
}
.toolbox-placeholder-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.08em;
max-width: 380px;
line-height: 1.6;
}
/* ── Tables ───────────────────────────────────────────────── */
.toolbox-table-wrap {
position: relative;
overflow-x: auto;
}
.toolbox-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 12px;
}
.toolbox-table th {
padding: 10px 14px;
text-align: left;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
border-bottom: 1px solid var(--blue-border);
background: rgba(0,51,255,0.06);
white-space: nowrap;
}
.toolbox-table td {
padding: 9px 14px;
color: var(--muted-light);
border-bottom: 1px solid rgba(0,51,255,0.1);
}
.toolbox-table-placeholder td { opacity: 0.35; }
.toolbox-table-dash { color: var(--muted); }
.toolbox-table-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(2,2,15,0.7);
backdrop-filter: blur(2px);
}
/* ── Search placeholder ───────────────────────────────────── */
.toolbox-search-placeholder {
padding: 16px;
}
.toolbox-search-input-wrap {
display: flex;
gap: 8px;
}
.toolbox-search-input {
flex: 1;
font-family: var(--font-mono);
font-size: 13px;
background: rgba(0,51,255,0.08);
border: 1px solid var(--blue-border);
color: var(--muted);
padding: 10px 14px;
outline: none;
}
.toolbox-search-btn {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 10px 18px;
background: var(--blue-bright);
border: none;
color: #fff;
cursor: pointer;
opacity: 1;
transition: background 0.2s;
}
.toolbox-search-result-placeholder {
margin-top: 12px;
padding: 12px 14px;
border: 1px dashed var(--blue-border);
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.06em;
}
/* ── Manmade: orbital category rows ──────────────────────── */
.toolbox-manmade-cats {
padding: 14px 16px 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.toolbox-manmade-cat {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border: 1px solid var(--blue-border);
background: rgba(0,51,255,0.04);
}
.toolbox-manmade-cat-icon {
font-size: 16px;
color: var(--teal);
flex-shrink: 0;
width: 20px;
text-align: center;
}
.toolbox-manmade-cat-body { flex: 1; }
.toolbox-manmade-cat-label {
font-family: var(--font-orb);
font-size: 12px;
color: #fff;
letter-spacing: 0.06em;
}
.toolbox-manmade-cat-desc {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.toolbox-manmade-cat-count {
font-family: var(--font-orb);
font-size: 18px;
color: var(--teal);
min-width: 40px;
text-align: right;
}
/* ── Mission cards ────────────────────────────────────────── */
.toolbox-mission-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap, 2px);
padding: 14px;
}
@media (max-width: 900px) { .toolbox-mission-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .toolbox-mission-grid { grid-template-columns: 1fr; } }
.toolbox-mission-card {
background: rgba(0,51,255,0.05);
border: 1px solid var(--blue-border);
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
.toolbox-mission-name {
font-family: var(--font-orb);
font-size: 13px;
color: #fff;
letter-spacing: 0.06em;
}
.toolbox-mission-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.toolbox-mission-type,
.toolbox-mission-agency,
.toolbox-mission-launch {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--muted);
padding: 2px 6px;
border: 1px solid var(--blue-border);
text-transform: uppercase;
}
.toolbox-mission-note {
font-family: var(--font-mono);
font-size: 12px;
color: var(--teal);
}
.toolbox-mission-data {
display: flex;
flex-direction: column;
gap: 2px;
}
.toolbox-mission-status {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid var(--blue-border);
}
/* ── Catalog browser tabs ─────────────────────────────────── */
.toolbox-catalog-filter { padding: 14px 16px; }
.toolbox-catalog-tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.toolbox-catalog-tab {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 7px 14px;
background: transparent;
border: 1px solid var(--blue-border);
color: var(--muted);
cursor: not-allowed;
opacity: 0.5;
display: flex;
align-items: center;
gap: 6px;
}
.toolbox-catalog-tab--active {
color: var(--teal);
border-color: var(--teal);
background: rgba(0,200,255,0.07);
opacity: 1;
}
.toolbox-catalog-tab-count {
font-size: 11px;
color: var(--muted);
}
.toolbox-catalog-placeholder {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 24px 16px;
border: 1px dashed var(--blue-border);
text-align: center;
}
/* val placeholder color */
.toolbox-val--placeholder { color: var(--muted); font-style: italic; }
/* ── Comets & Asteroids ──────────────────────────────────── */
.toolbox-val--bright { color: var(--teal); font-weight: 500; }
.toolbox-val--mono { font-family: var(--font-mono); font-size: 12px; }
.toolbox-val--dim { color: var(--muted); font-size: 12px; }
.sb-sub { font-family: var(--font-mono); font-size: 11px; }
.toolbox-table-empty { color: var(--muted); font-style: italic; padding: 24px 16px; text-align: center; }
/* ── Section subtitle / source label ──────────────────────── */
.sb-table-sub {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
padding: 5px 16px 6px;
border-bottom: 1px solid rgba(0,51,255,.08);
letter-spacing: .05em;
opacity: .8;
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
/* ── Freshness indicator ───────────────────────────────────── */
.sb-freshness {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: .65;
margin-left: auto;
letter-spacing: .05em;
}
/* ── Floating tooltip ─────────────────────────────────────── */
.sb-tooltip {
position: absolute;
z-index: 9999;
background: rgba(6,12,24,.97);
border: 1px solid var(--teal);
color: var(--text);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.55;
padding: 8px 12px;
max-width: 280px;
pointer-events: none;
box-shadow: 0 4px 20px rgba(0,0,0,.5);
border-radius: 2px;
}
.sb-tip {
font-family: var(--font-mono);
font-size: 11px;
color: var(--teal);
cursor: help;
opacity: .7;
user-select: none;
}
.sb-tip:hover { opacity: 1; }
/* ── Status / type badges ─────────────────────────────────── */
.sb-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 2px;
white-space: nowrap;
border: 1px solid transparent;
}
.sb-badge--good { background: rgba(61,202,138,.15); color: #3dca8a; border-color: rgba(61,202,138,.3); }
.sb-badge--cyan { background: rgba(80,180,220,.14); color: #50c8dc; border-color: rgba(80,180,220,.28); }
.sb-badge--teal { background: rgba(0,200,180,.13); color: #00c8b4; border-color: rgba(0,200,180,.28); }
.sb-badge--amber { background: rgba(230,180,50,.14); color: #e6b432; border-color: rgba(230,180,50,.28); }
.sb-badge--red { background: rgba(220,50,50,.14); color: #e04040; border-color: rgba(220,50,50,.3); }
.sb-badge--purple { background: rgba(160,100,220,.14);color: #b060e0; border-color: rgba(160,100,220,.28); }
.sb-badge--gray { background: rgba(100,100,120,.12);color: var(--muted); border-color: rgba(100,100,120,.2); }
/* ── Table enhancements ───────────────────────────────────── */
.sb-table-scroll {
overflow-x: auto;
}
.sb-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: rgba(6,12,24,.98);
}
.sb-table tbody tr:nth-child(even) {
background: rgba(255,255,255,.015);
}
.sb-tr--clickable { cursor: pointer; }
.sb-tr--clickable:hover {
background: rgba(0,200,200,.06) !important;
box-shadow: inset 2px 0 0 var(--teal);
}
.sb-tr--selected {
background: rgba(0,200,200,.09) !important;
box-shadow: inset 2px 0 0 var(--teal);
}
.sb-col--name { min-width: 160px; text-align: left; }
.sb-col--num { text-align: right; font-family: var(--font-mono); font-size: 12px; }
.sb-col--date { white-space: nowrap; }
.toolbox-table th .sb-tip { font-size: 11px; }
/* ── Export button ────────────────────────────────────────── */
.sb-export-btn {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 9px;
background: rgba(0,200,200,.08);
border: 1px solid rgba(0,200,200,.2);
color: var(--teal);
cursor: pointer;
letter-spacing: .07em;
transition: all .15s;
}
.sb-export-btn:hover { background: rgba(0,200,200,.16); }
/* ── Quick chips (search + NEO filters) ───────────────────── */
.sb-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
padding: 6px 16px 8px;
border-bottom: 1px solid rgba(0,51,255,.08);
}
.sb-chips--neo { padding: 8px 16px 0; border-bottom: none; }
.sb-chip-lbl {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
opacity: .7;
margin-right: 2px;
}
.sb-chip {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 9px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(0,51,255,.2);
color: var(--muted);
cursor: pointer;
border-radius: 2px;
transition: all .12s;
letter-spacing: .05em;
}
.sb-chip:hover { color: var(--text); background: rgba(255,255,255,.07); }
.sb-chip--active {
background: rgba(0,180,180,.12);
border-color: var(--teal);
color: var(--teal);
font-weight: 600;
}
/* ── Search panel body ────────────────────────────────────── */
.sb-search-body { padding: 12px 16px 4px; }
.sb-search-error { padding: 4px 0; }
.sb-search-hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; font-style: italic; }
.sb-search-result-wrap { padding: 4px 0; }
/* ── Best Targets panel ───────────────────────────────────── */
.sb-best-wrap {
display: flex;
gap: 0;
border-top: 1px solid var(--blue-border);
}
.sb-best-grid {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 0;
}
.sb-best-loading, .sb-best-none {
padding: 14px 16px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.sb-best-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border-right: 1px solid var(--blue-border);
border-bottom: 1px solid var(--blue-border);
min-width: 200px;
max-width: 280px;
flex: 1;
background: linear-gradient(135deg, rgba(0,51,255,.03) 0%, transparent 60%);
}
.sb-best-card-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-best-card-name {
font-family: var(--font-orb);
font-size: 13px;
color: var(--teal);
letter-spacing: .05em;
margin-top: 2px;
}
.sb-best-card-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted-light, #8090b0);
}
.sb-best-card-meta strong { color: var(--text); }
.sb-best-card-note {
font-size: 12px;
color: var(--muted);
line-height: 1.5;
margin-top: 2px;
font-style: italic;
}
.sb-best-card-score {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: .5;
}
.sb-best-observer {
width: 140px;
flex-shrink: 0;
border-left: 1px solid var(--blue-border);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
background: rgba(0,0,0,.15);
}
.sb-obs-lbl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.sb-obs-loc { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.sb-obs-coords { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light, #8090b0); }
@media (max-width: 700px) {
.sb-best-observer { display: none; }
.sb-best-card { min-width: 160px; }
}
/* ── Watchlist panel ──────────────────────────────────────── */
.sb-watchlist-outer .toolbox-panel-hdr { }
.sb-wl-count {
background: rgba(0,200,200,.15);
color: var(--teal);
border: 1px solid rgba(0,200,200,.25);
}
.sb-wl-clear {
font-family: var(--font-mono);
font-size: 11px;
margin-left: auto;
background: none;
border: 1px solid rgba(255,255,255,.1);
color: var(--muted);
padding: 2px 8px;
cursor: pointer;
transition: color .15s;
}
.sb-wl-clear:hover { color: #e04040; border-color: rgba(220,50,50,.3); }
.sb-wl-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 16px 12px;
}
.sb-wl-item {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(0,51,255,.06);
border: 1px solid rgba(0,51,255,.15);
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted-light, #8090b0);
}
.sb-wl-item-type { font-size: 13px; }
.sb-wl-remove {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: 11px;
padding: 0 0 0 4px;
opacity: .6;
transition: opacity .15s;
}
.sb-wl-remove:hover { opacity: 1; color: #e04040; }
.sb-wl-pin-btn {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 8px;
background: rgba(0,51,255,.06);
border: 1px solid rgba(0,51,255,.2);
color: var(--muted);
cursor: pointer;
margin-top: 4px;
align-self: flex-start;
transition: all .12s;
}
.sb-wl-pin-btn:hover { border-color: var(--teal); color: var(--teal); }
.sb-wl-pin-btn--active { background: rgba(0,200,200,.1); color: var(--teal); border-color: var(--teal); }
/* ── Expandable detail panel ──────────────────────────────── */
/* ── Inline detail drawer (opens as a immediately after clicked row) ── */
.sb-drawer-tr > .sb-drawer-cell {
padding: 0 4px 6px;
border-top: none !important;
background: transparent;
}
.sb-drawer-inner {
position: relative;
background: linear-gradient(160deg, rgba(0,14,35,.98) 0%, rgba(0,6,18,1) 100%);
border: 1px solid rgba(0,200,200,.28);
border-top: 3px solid var(--teal, #00c8c8);
border-radius: 0 0 6px 6px;
padding: 20px 56px 18px 20px;
box-shadow: 0 10px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(0,200,200,.06) inset;
animation: sb-drawer-open .14s ease-out;
}
@keyframes sb-drawer-open {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.sb-drawer-inner--empty {
padding: 16px 20px;
color: var(--muted);
font-size: 13px;
}
/* ── Close button ───────────────────────────────────────────────────────── */
.sb-drawer-close {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
color: var(--muted);
font-size: 14px;
cursor: pointer;
border-radius: 4px;
transition: background .12s, color .12s, border-color .12s;
flex-shrink: 0;
}
.sb-drawer-close:hover {
background: rgba(255,60,60,.18);
border-color: rgba(255,80,80,.45);
color: #ff7070;
}
/* ── Drawer header (icon + name + badges) ─────────────────────────────── */
.sb-drawer-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0,200,200,.12);
}
.sb-drawer-icon {
font-size: 22px;
line-height: 1;
margin-top: 1px;
flex-shrink: 0;
}
.sb-drawer-title {
font-family: var(--font-orb);
font-size: 15px;
color: var(--teal);
letter-spacing: .04em;
margin-bottom: 5px;
}
.sb-drawer-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
/* ── Two-column body ─────────────────────────────────────────────────── */
.sb-drawer-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 28px;
margin-bottom: 14px;
}
@media (max-width: 640px) {
.sb-drawer-body { grid-template-columns: 1fr; }
}
/* ── Field rows ────────────────────────────────────────────────────────── */
.sb-drawer-fields {
display: flex;
flex-direction: column;
gap: 0;
}
.sb-field-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
font-family: var(--font-mono);
font-size: 12.5px;
padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.sb-field-row:last-child { border-bottom: none; }
.sb-field-key {
color: var(--muted);
flex-shrink: 0;
min-width: 120px;
font-size: 11.5px;
}
.sb-field-val {
color: var(--text);
text-align: right;
word-break: break-word;
}
/* ── Aside (note / distance bar) ─────────────────────────────────────── */
.sb-drawer-aside {
display: flex;
flex-direction: column;
gap: 8px;
}
.sb-drawer-note-lbl {
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--teal);
margin-bottom: 2px;
}
.sb-drawer-note {
font-size: 13px;
color: var(--muted-light, #8898b8);
line-height: 1.65;
}
/* ── Actions row ──────────────────────────────────────────────────────── */
.sb-drawer-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
padding-top: 12px;
border-top: 1px solid rgba(0,200,200,.1);
}
/* kept for backward compat (search result, best-target panels) */
.sb-dp-none {
padding: 12px 16px;
font-size: 12px;
color: var(--muted);
}
.sb-dp-dist-scale {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: .5;
margin-top: 2px;
}
.sb-dp-copy,
.sb-sr-orbit,
.sb-sr-profile {
font-family: var(--font-mono);
font-size: 12px;
padding: 4px 12px;
background: rgba(0,51,255,.07);
border: 1px solid rgba(0,51,255,.2);
color: var(--muted);
cursor: pointer;
border-radius: 3px;
transition: all .12s;
}
.sb-dp-copy:hover,
.sb-sr-orbit:hover,
.sb-sr-profile:hover { color: var(--text); border-color: var(--teal); }
/* ── NEO distance bar ─────────────────────────────────────── */
.sb-miss-wrap { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.sb-dist-bar {
width: 80px;
height: 3px;
background: rgba(255,255,255,.08);
border-radius: 2px;
overflow: hidden;
}
.sb-dist-fill { height: 100%; border-radius: 2px; }
.sb-dist--vclose { background: #e04040; }
.sb-dist--close { background: #e08040; }
.sb-dist--mod { background: #50c8dc; }
.sb-dist--far { background: rgba(100,100,120,.5); }
/* ── Copy toast ───────────────────────────────────────────── */
.sb-copy-toast {
position: fixed;
bottom: 24px;
right: 24px;
background: rgba(0,200,180,.9);
color: #000;
font-family: var(--font-mono);
font-size: 12px;
padding: 8px 18px;
border-radius: 3px;
z-index: 9999;
pointer-events: none;
animation: sb-toast-in .2s ease;
}
@keyframes sb-toast-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Education panel ──────────────────────────────────────── */
.sb-edu-toggle {
cursor: pointer;
user-select: none;
}
.sb-edu-toggle:hover .toolbox-panel-title { color: var(--teal); }
.sb-edu-arrow {
margin-left: auto;
font-size: 13px;
color: var(--muted);
}
.sb-edu-body { padding: 14px 16px; }
.sb-edu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 900px) { .sb-edu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .sb-edu-grid { grid-template-columns: 1fr; } }
.sb-edu-card {
background: rgba(0,51,255,.04);
border: 1px solid rgba(0,51,255,.1);
border-radius: 2px;
padding: 10px 12px;
}
.sb-edu-card-title {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--teal);
margin-bottom: 6px;
}
.sb-edu-card p {
font-size: 12px;
color: var(--muted-light, #8090b0);
line-height: 1.6;
margin: 0;
}
/* Mission-card: individually expandable edu cards */
.sb-edu-mcard {
border-radius: 6px;
border: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.03);
padding: 10px 14px;
}
.sb-edu-mcard summary {
cursor: pointer;
list-style: none;
outline: none;
user-select: none;
}
.sb-edu-mcard summary::-webkit-details-marker { display: none; }
.sb-edu-mcard summary.sb-edu-card-title {
padding: 2px 0;
display: flex;
align-items: center;
gap: 6px;
}
.sb-edu-mcard summary.sb-edu-card-title::after {
content: '▸';
margin-left: auto;
font-size: 11px;
color: var(--muted);
transition: transform .2s;
}
.sb-edu-mcard[open] summary.sb-edu-card-title::after { transform: rotate(90deg); }
.sb-edu-mcard p { margin-top: 8px; }
/* ── Tonight's Best — unified card grid (sb-tn-*) ────────── */
.sb-tonight-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
border-top: 1px solid var(--blue-border);
}
.sb-tn-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px;
border-right: 1px solid var(--blue-border);
border-bottom: 1px solid var(--blue-border);
background: linear-gradient(135deg, rgba(0,30,120,.04) 0%, transparent 55%);
transition: background .15s;
}
.sb-tn-card:hover { background: linear-gradient(135deg, rgba(0,200,180,.05) 0%, transparent 55%); }
.sb-tn-card-top { display: flex; flex-direction: column; gap: 5px; }
.sb-tn-badges { display: flex; flex-wrap: wrap; gap: 3px; }
.sb-tn-name {
font-family: var(--font-orb);
font-size: 13px;
font-weight: 600;
color: var(--teal, #00c8b4);
letter-spacing: .04em;
line-height: 1.25;
}
/* Altitude bar */
.sb-tn-altbar {
position: relative;
height: 5px;
background: rgba(255,255,255,.07);
border-radius: 3px;
overflow: hidden;
margin-top: 2px;
}
.sb-tn-altbar-fill {
height: 100%;
background: linear-gradient(90deg, var(--teal, #00c8b4), rgba(56,189,248,.7));
border-radius: 3px;
min-width: 2px;
}
.sb-tn-altbar-lbl {
display: none; /* shown via title tooltip */
}
/* Data fields */
.sb-tn-fields {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 2px;
}
.sb-tn-field {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 6px;
font-size: 11px;
line-height: 1.4;
}
.sb-tn-fk {
color: var(--muted);
white-space: nowrap;
flex-shrink: 0;
}
.sb-tn-fv {
color: var(--muted-light, #8090b0);
font-family: var(--font-mono);
font-size: 11px;
text-align: right;
}
.sb-tn-peak { color: var(--teal, #00c8b4) !important; }
/* Observing note */
.sb-tn-note {
font-size: 11px;
color: var(--muted);
line-height: 1.55;
font-style: italic;
flex: 1;
margin-top: 2px;
}
/* Action buttons */
.sb-tn-actions {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: auto;
padding-top: 6px;
border-top: 1px solid rgba(255,255,255,.05);
}
.sb-tn-btn {
font-size: 11px;
font-family: var(--font-mono);
padding: 3px 8px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
border-radius: 4px;
color: var(--muted-light, #8090b0);
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
line-height: 1.5;
}
.sb-tn-btn:hover,
.sb-tn-btn:focus-visible {
background: rgba(0,200,180,.1);
border-color: rgba(0,200,180,.4);
color: var(--teal, #00c8b4);
outline: none;
}
/* Observer bar */
.sb-best-observer-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-top: 1px solid var(--blue-border);
font-size: 11px;
color: var(--muted);
background: rgba(0,0,0,.12);
}
.sb-best-observer-bar[hidden] { display: none; }
.sb-obs-icon { flex-shrink: 0; }
#sb-obs-loc { font-weight: 600; color: var(--muted-light, #8090b0); }
#sb-obs-coords { font-family: var(--font-mono); }
/* Empty / no-targets state */
.sb-best-empty {
padding: 24px 20px;
color: var(--muted);
}
.sb-best-empty-icon {
font-size: 28px;
opacity: .3;
margin-bottom: 8px;
}
.sb-best-empty-msg {
font-size: 13px;
margin-bottom: 12px;
}
.sb-best-alt-lbl {
font-size: 11px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted);
margin-bottom: 6px;
}
.sb-best-alt-list { display: flex; flex-direction: column; gap: 5px; }
.sb-best-alt-item {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 12px;
}
.sb-best-alt-name { color: var(--muted-light, #8090b0); font-weight: 500; }
.sb-best-alt-meta { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
/* Mobile */
@media (max-width: 600px) {
.sb-tonight-cards-grid { grid-template-columns: 1fr; }
.sb-tn-card { border-right: none; }
}
@media (min-width: 601px) and (max-width: 900px) {
.sb-tonight-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Approach timeline (sb-tl-*) ──────────────────────────── */
.sb-tl-container {
padding: 10px 16px 6px;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.sb-tl-container[hidden] { display: none; }
.sb-tl-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.sb-tl-title {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
}
.sb-tl-legend {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-left: auto;
}
.sb-tl-leg {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--muted);
}
.sb-tl-track {
position: relative;
height: 36px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 4px;
overflow: visible;
}
.sb-tl-grid-line {
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: rgba(255,255,255,.08);
}
.sb-tl-now {
position: absolute;
left: 0; top: -3px; bottom: -3px;
width: 2px;
background: var(--teal, #00c8b4);
border-radius: 2px;
}
.sb-tl-axis {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
padding: 0 1px;
}
/* Timeline dot buttons */
.sb-tl-track .sb-tl-dot {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0;
transition: transform .15s, box-shadow .15s;
z-index: 1;
}
.sb-tl-track .sb-tl-dot:hover,
.sb-tl-track .sb-tl-dot:focus-visible {
transform: translate(-50%, -50%) scale(2);
z-index: 5;
outline: none;
}
.sb-tl-dot--vclose { background: #e04040; box-shadow: 0 0 5px rgba(220,50,50,.6); }
.sb-tl-dot--close { background: #e08040; box-shadow: 0 0 4px rgba(220,128,50,.5); }
.sb-tl-dot--mod { background: #50c8dc; }
.sb-tl-dot--far { background: rgba(120,130,160,.6); }
/* PHA ring */
.sb-tl-dot.sb-tl-dot--pha {
outline: 2px solid rgba(220,50,50,.8);
outline-offset: 2px;
}
/* Standalone legend dots (not in track) */
.sb-tl-leg .sb-tl-dot {
position: static;
display: inline-block;
width: 8px; height: 8px;
transform: none !important;
}
/* Timeline row highlight when dot is clicked */
@keyframes sb-tl-flash {
0%,100% { background: transparent; }
30% { background: rgba(0,200,180,.18); }
}
.sb-tl-highlight { animation: sb-tl-flash 1.8s ease; }
/* ── Retry button ──────────────────────────────────────────── */
.sb-retry-btn {
display: inline-block;
margin: 6px 0 0 8px;
padding: 3px 10px;
font-size: 11px;
font-family: var(--font-mono);
background: rgba(0,200,180,.08);
border: 1px solid rgba(0,200,180,.3);
border-radius: 4px;
color: var(--teal, #00c8b4);
cursor: pointer;
transition: background .15s;
}
.sb-retry-btn:hover { background: rgba(0,200,180,.16); }
/* ── Best-targets altitude bar ────────────────────────────── */
.sb-best-altbar {
height: 4px;
background: rgba(255,255,255,.07);
border-radius: 2px;
margin: 5px 0;
overflow: hidden;
}
.sb-best-altbar-fill {
height: 100%;
background: linear-gradient(90deg, var(--teal, #00c8b4), rgba(56,189,248,.7));
border-radius: 2px;
transition: width .4s ease;
}
.sb-best-card-peak {
font-size: 11px;
color: var(--muted-light, #8090b0);
margin: 2px 0;
}
.sb-best-card-peak strong { color: var(--teal, #00c8b4); }
/* ── Mobile polish for NEO/comet tables ───────────────────── */
@media (max-width: 640px) {
.sb-tl-legend { gap: 6px; }
.sb-best-card { min-width: 140px; }
.sb-table-scroll { -webkit-overflow-scrolling: touch; }
.sb-table thead th { font-size: 10px; padding: 6px 8px; }
.sb-table tbody td { font-size: 11px; padding: 5px 8px; }
.toolbox-table-controls { flex-direction: column; gap: 6px; }
.toolbox-pagesize-wrap { flex-wrap: wrap; gap: 4px; }
.sb-tl-container { padding: 8px 10px 4px; }
.sb-chips--approaches { gap: 4px; padding: 8px 10px; }
}
/* ── Hero subtitle — matches .fn-hero-tagline ─────────────── */
.toolbox-hero-sub {
font-size: 15px;
color: rgba(160,180,220,.8);
max-width: 640px;
margin: 10px auto 0;
line-height: 1.7;
letter-spacing: normal;
opacity: 1;
}
/* ── Dashboard tool module cards ──────────────────────────── */
.tb-modules-section {
padding: 40px 0 60px;
}
.tb-modules-heading {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--teal);
margin: 0 0 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,51,255,.15);
}
.tb-modules-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 600px) { .tb-modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tb-modules-grid { grid-template-columns: repeat(3, 1fr); } }
.tb-mod-card {
background: rgba(0,10,40,.55);
border: 1px solid rgba(0,51,255,.18);
padding: 18px 20px 16px;
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color .2s, box-shadow .2s;
position: relative;
}
.tb-mod-card:hover {
border-color: rgba(0,200,255,.35);
box-shadow: 0 0 18px rgba(0,100,255,.08);
}
/* Clipped top-right corner — mission-control aesthetic */
.tb-mod-card::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 14px; height: 14px;
background: var(--bg-deep, #000);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.tb-mod-card-hdr {
display: flex;
align-items: flex-start;
gap: 12px;
}
.tb-mod-icon {
font-size: 20px;
line-height: 1;
color: var(--teal);
flex-shrink: 0;
margin-top: 2px;
}
.tb-mod-name {
font-family: var(--font-orb);
font-size: 15px;
font-weight: 600;
color: #fff;
letter-spacing: .04em;
line-height: 1.2;
}
.tb-mod-desc {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: .06em;
margin-top: 3px;
line-height: 1.5;
}
.tb-mod-stats {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.tb-mod-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 3px 0;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.tb-mod-row:last-child { border-bottom: none; }
.tb-mod-key {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
.tb-mod-val {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(200,215,240,.9);
text-align: right;
}
.tb-mod-val--teal { color: var(--teal); }
.tb-mod-val--warn { color: #f0a020; }
.tb-mod-val--dim { color: rgba(200,215,240,.4); font-style: italic; }
.tb-mod-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--teal);
text-decoration: none;
border: 1px solid rgba(0,200,255,.25);
padding: 6px 14px;
align-self: flex-start;
transition: background .18s, border-color .18s, color .18s;
}
.tb-mod-cta:hover {
background: rgba(0,200,255,.1);
border-color: var(--teal);
color: #fff;
}
.tb-mod-cta::after { content: ' →'; }
@media (max-width: 599px) { .tb-mod-cta { align-self: stretch; justify-content: center; } }
/* ══════════════════════════════════════════════════════════════════
TOOLBOX REVAMP — Tonight's Brief + Live Ops + Domain Stations
══════════════════════════════════════════════════════════════════ */
/* ── Tonight's Brief ─────────────────────────────────────────── */
.tb-brief {
background: rgba(0,0,0,.35);
border: 1px solid rgba(0,200,255,.18);
border-radius: 8px;
margin-bottom: 16px;
overflow: hidden;
}
.tb-brief-hdr {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 20px;
border-bottom: 1px solid rgba(0,200,255,.1);
background: rgba(0,200,255,.04);
flex-wrap: wrap;
}
.tb-brief-title {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--teal);
}
.tb-brief-icon { font-size: 14px; opacity: .7; }
.tb-brief-date { color: rgba(255,255,255,.3); font-size: 10px; margin-left: 4px; }
.tb-brief-go {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 3px;
border: 1px solid currentColor;
}
.tb-brief-go[data-status="go"] { color: #34d399; background: rgba(52,211,153,.1); }
.tb-brief-go[data-status="caution"] { color: #facc15; background: rgba(250,204,21,.1); }
.tb-brief-go[data-status="nogo"] { color: #f87171; background: rgba(248,113,113,.1); }
.tb-brief-go[data-status="loading"] { color: rgba(255,255,255,.3); border-color: rgba(255,255,255,.1); }
.tb-brief-text {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255,255,255,.6);
padding: 10px 20px 4px;
margin: 0;
line-height: 1.5;
}
.tb-brief-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.tb-brief-cell {
padding: 14px 18px;
border-right: 1px solid rgba(255,255,255,.06);
}
.tb-brief-cell:last-child { border-right: none; }
.tb-brief-cell-icon {
font-size: 18px;
opacity: .4;
margin-bottom: 2px;
}
.tb-brief-cell-label {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.tb-brief-cell-rows { display: flex; flex-direction: column; gap: 5px; }
.tb-bcr {
display: flex;
justify-content: space-between;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
}
.tb-bcr span:first-child { color: var(--muted); }
.tb-bcr span:last-child { color: var(--text); text-align: right; }
.tb-bcr--hi span:last-child { color: var(--teal); font-weight: 600; }
.tb-brief-illum-bar {
height: 3px;
background: rgba(255,255,255,.08);
border-radius: 2px;
margin-top: 10px;
overflow: hidden;
}
.tb-brief-illum-fill { height: 100%; background: var(--teal); border-radius: 2px; }
/* ── Live Operations Strip ───────────────────────────────────── */
.tb-liveops {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 20px;
}
.tb-lop {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: rgba(0,0,0,.3);
border: 1px solid rgba(255,255,255,.08);
border-radius: 6px;
text-decoration: none;
color: inherit;
transition: border-color .15s, background .15s;
cursor: pointer;
}
.tb-lop:hover { border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.04); }
.tb-lop-label {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
}
.tb-lop-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
color: var(--teal);
line-height: 1;
}
/* ── Toolbox experience mode additions ─── */
.tb-brief-intro {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(200,220,255,.6);
padding: 6px 20px 2px;
margin: 0;
line-height: 1.5;
border-left: 2px solid rgba(0,200,255,.2);
margin: 4px 20px 0;
}
.tb-lop-tip {
font-family: var(--font-mono);
font-size: 9px;
color: rgba(200,220,255,.45);
margin-top: 3px;
line-height: 1.4;
}
/* ────────────────────────────────────────── */
.tb-lop-sub {
font-family: var(--font-mono);
font-size: 9px;
color: rgba(255,255,255,.35);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tb-lop--launch .tb-lop-val { color: #a78bfa; font-size: 16px; }
.tb-lop--alert .tb-lop-val { color: #f87171; }
.tb-lop--alert-live { border-color: rgba(248,113,113,.3); }
.tb-lop--alert-live .tb-lop-val { animation: tb-pulse 2s ease-in-out infinite; }
@keyframes tb-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .tb-lop--alert-live .tb-lop-val { animation: none; } }
/* ── Domain Stations ─────────────────────────────────────────── */
.tb-stations {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.tb-station {
background: rgba(0,0,0,.28);
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
overflow: hidden;
transition: border-color .15s;
}
.tb-station:hover { border-color: rgba(0,200,255,.2); }
.tb-station-hdr {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
background: rgba(0,0,0,.2);
border-bottom: 1px solid rgba(255,255,255,.07);
flex-wrap: wrap;
}
.tb-station-identity {
display: flex;
align-items: flex-start;
gap: 12px;
}
.tb-station-icon {
font-size: 22px;
opacity: .5;
flex-shrink: 0;
padding-top: 2px;
}
.tb-station-name {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: .04em;
}
.tb-station-desc {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
margin-top: 3px;
}
.tb-station-kpis {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: flex-start;
}
.tb-skpi {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.tb-skpi-val {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
color: var(--teal);
line-height: 1;
}
.tb-skpi-val--alert { color: #f87171; }
.tb-skpi-label {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.tb-station-body {
display: flex;
gap: 0;
}
.tb-station-tools {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 14px 16px;
flex: 1;
}
.tb-tool {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 4px;
text-decoration: none;
color: inherit;
transition: border-color .12s, background .12s, color .12s;
min-width: 0;
}
.tb-tool:hover {
border-color: rgba(0,200,255,.35);
background: rgba(0,200,255,.06);
color: var(--teal);
}
.tb-tool-icon {
font-size: 13px;
opacity: .6;
flex-shrink: 0;
}
.tb-tool-name {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(200,215,240,.85);
white-space: nowrap;
}
.tb-tool:hover .tb-tool-name { color: var(--teal); }
/* Solar System station — tools + solar image side by side */
.tb-station-solar-body {
display: flex;
align-items: stretch;
min-height: 120px;
}
.tb-station-solar-body .tb-station-tools { flex: 1; }
/* Solar thumb in Solar System station */
.tb-station-solar-thumb {
width: 140px;
flex-shrink: 0;
border-left: 1px solid rgba(255,255,255,.07);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
gap: 6px;
background: rgba(0,0,0,.2);
}
.tb-station-solar-thumb img {
width: 110px;
height: 110px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(255,140,0,.25);
display: block;
}
.tb-station-solar-lbl {
font-family: var(--font-mono);
font-size: 8px;
color: rgba(255,140,0,.5);
text-align: center;
letter-spacing: .06em;
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
.tb-liveops { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
.tb-brief-grid { grid-template-columns: repeat(2, 1fr); }
.tb-brief-cell { border-bottom: 1px solid rgba(255,255,255,.06); }
.tb-liveops { grid-template-columns: repeat(2, 1fr); }
.tb-stations { grid-template-columns: 1fr; }
.tb-station-hdr { flex-direction: column; }
.tb-station-kpis { align-items: flex-start; flex-direction: row; }
.tb-skpi { align-items: flex-start; }
}
@media (max-width: 540px) {
.tb-brief-grid { grid-template-columns: 1fr; }
.tb-liveops { grid-template-columns: repeat(2, 1fr); }
.tb-lop-val { font-size: 18px; }
.tb-station-solar-thumb { display: none; }
}
/* ── Mission card additional elements ────────────────────── */
.toolbox-mission-target {
font-family: var(--font-mono);
font-size: 12px;
color: var(--teal);
}
.toolbox-mission-launch {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: 0.7;
}
/* Active search widget (replaces disabled placeholder) */
.toolbox-search-wrap { padding: 16px; }
.toolbox-search-result {
margin-top: 12px;
padding: 12px 14px;
border: 1px dashed var(--blue-border);
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.06em;
min-height: 44px;
}
.toolbox-search-result-grid { display: flex; flex-direction: column; gap: 2px; }
.toolbox-search-btn {
cursor: pointer;
opacity: 1;
}
.toolbox-search-btn:hover { background: var(--blue); }
.toolbox-search-input:focus { border-color: var(--teal); color: var(--text-light); }
/* ── NEO table controls ──────────────────────────────────── */
.toolbox-table-controls {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid var(--blue-border);
background: rgba(0,51,255,0.04);
}
.toolbox-table-filter-wrap {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.toolbox-table-filter {
font-family: var(--font-mono);
font-size: 12px;
background: rgba(0,51,255,0.1);
border: 1px solid var(--blue-border);
color: var(--muted);
padding: 7px 12px;
outline: none;
width: 220px;
transition: border-color 0.2s, color 0.2s;
}
.toolbox-table-filter:focus { border-color: var(--teal); color: var(--text-light); }
.toolbox-table-toggle {
display: flex;
align-items: center;
gap: 7px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
cursor: pointer;
user-select: none;
}
.toolbox-table-toggle input[type=checkbox] { accent-color: var(--teal); cursor: pointer; }
.toolbox-pagesize-wrap {
display: flex;
align-items: center;
gap: 4px;
}
.toolbox-pagesize-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-right: 4px;
}
.toolbox-pagesize-btn {
font-family: var(--font-mono);
font-size: 12px;
padding: 5px 10px;
background: transparent;
border: 1px solid var(--blue-border);
color: var(--muted);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.toolbox-pagesize-btn:hover { border-color: var(--teal); color: var(--teal); }
.toolbox-pagesize-btn--active {
background: var(--teal);
border-color: var(--teal);
color: #000;
}
/* Sortable column headers */
.toolbox-table--sortable th[data-col] { cursor: pointer; white-space: nowrap; user-select: none; }
.toolbox-table--sortable th[data-col]:hover { color: var(--teal); }
.toolbox-col--active { color: var(--teal) !important; }
.toolbox-sort-icon { font-size: 11px; opacity: 0.5; margin-left: 4px; }
.toolbox-col--active .toolbox-sort-icon { opacity: 1; }
/* Pagination */
.toolbox-pagination {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 10px 16px;
border-top: 1px solid var(--blue-border);
}
.toolbox-pagination-info {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.toolbox-pagination-btns {
display: flex;
align-items: center;
gap: 10px;
}
.toolbox-pagination-btn {
font-family: var(--font-mono);
font-size: 12px;
padding: 5px 12px;
background: transparent;
border: 1px solid var(--blue-border);
color: var(--muted);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.toolbox-pagination-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.toolbox-pagination-btn:disabled { opacity: 0.3; cursor: default; }
.toolbox-pagination-indicator {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
min-width: 50px;
text-align: center;
}
/* =====================================================================
DEEP SKY — Catalog tabs
===================================================================== */
.toolbox-catalog-tab {
font-family: var(--font-mono);
font-size: 12px;
padding: 5px 12px;
background: transparent;
border: 1px solid var(--blue-border);
color: var(--muted);
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.toolbox-catalog-tab:hover { border-color: var(--teal); color: var(--teal); }
.toolbox-catalog-tab--active {
border-color: var(--teal);
color: var(--teal);
background: rgba(0,200,255,0.06);
}
.toolbox-catalog-tab-count {
font-size: 11px;
opacity: 0.55;
margin-left: 5px;
}
/* Deep Sky color tokens for difficulty */
.toolbox-val--notice { color: #ffd600; }
/* ── Clear Sky Chart ──────────────────────────────────────────────────────────── */
.csc-chart-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0 0 8px;
}
.csc-table {
border-collapse: collapse;
font-size: 11px;
white-space: nowrap;
table-layout: fixed;
}
.csc-label-col {
position: sticky;
left: 0;
background: var(--panel);
z-index: 2;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 5px 12px 5px 16px;
white-space: nowrap;
color: var(--muted);
border-right: 1px solid var(--blue-border);
min-width: 130px;
width: 130px;
}
.csc-date-cell {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-align: center;
background: rgba(0,0,0,0.25);
padding: 3px 0;
border-right: 1px solid var(--blue-border);
border-bottom: 1px solid var(--blue-border);
letter-spacing: 0.06em;
}
.csc-hour-cell {
font-family: var(--font-mono);
font-size: 10px;
text-align: center;
color: var(--muted);
padding: 3px 0;
width: 14px;
min-width: 14px;
border-right: 1px solid rgba(255,255,255,0.04);
border-bottom: 1px solid var(--blue-border);
}
.csc-cell {
width: 14px;
min-width: 14px;
height: 26px;
border-right: 1px solid rgba(0,0,0,0.15);
border-bottom: 1px solid rgba(0,0,0,0.1);
cursor: default;
transition: opacity 0.1s;
}
.csc-cell:hover,
.csc-hour-cell:hover {
opacity: 0.8;
}
.csc-col--now {
border-left: 2px solid var(--teal) !important;
border-right: 2px solid var(--teal) !important;
}
.csc-section-header {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--teal);
background: rgba(0,200,255,0.04);
padding: 6px 16px;
border-top: 1px solid rgba(0,200,255,0.15);
border-bottom: 1px solid rgba(0,200,255,0.15);
}
/* Tooltip */
.csc-tooltip {
position: fixed;
background: #0a1020;
color: #e0e8f0;
border: 1px solid var(--blue-border);
padding: 4px 8px;
font-family: var(--font-mono);
font-size: 12px;
pointer-events: none;
z-index: 9999;
white-space: nowrap;
letter-spacing: 0.03em;
}
/* Legend */
.csc-legend-grid {
padding: 12px 16px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.csc-legend-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.csc-legend-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
min-width: 130px;
}
.csc-legend-swatches {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.csc-legend-swatch {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 7px;
border-radius: 2px;
letter-spacing: 0.03em;
}
/* ══════════════════════════════════════════════════════════════════════════════
MOON DASHBOARD — enhanced
══════════════════════════════════════════════════════════════════════════════ */
/* ── Mode bar ────────────────────────────────────────────────────────────────── */
.moon-mode-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 0;
max-width: 1200px;
margin: 0 auto;
}
.moon-mode-toggle {
display: flex;
border: 1px solid var(--blue-border);
border-radius: 4px;
overflow: hidden;
}
.moon-mode-btn {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
padding: 5px 14px;
background: transparent;
color: var(--muted);
border: none;
cursor: pointer;
transition: background .12s, color .12s;
}
.moon-mode-btn--active {
background: rgba(0,200,200,.12);
color: var(--teal);
}
/* mode visibility classes */
[data-moon-mode="simple"] .moon-adv-only { display: none !important; }
[data-moon-mode="advanced"] .moon-simple-only { display: none !important; }
/* ── At a Glance ─────────────────────────────────────────────────────────────── */
.moon-glance-panel { }
.moon-glance-body { padding: 4px 20px 18px; }
.moon-glance-status {
font-size: 13.5px;
line-height: 1.6;
color: var(--text);
margin-bottom: 14px;
padding: 10px 14px;
background: rgba(0,200,200,.05);
border-left: 3px solid var(--teal);
border-radius: 0 4px 4px 0;
}
.moon-glance-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
@media (max-width: 900px) { .moon-glance-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 550px) { .moon-glance-grid { grid-template-columns: repeat(2, 1fr); } }
.moon-gc {
background: rgba(0,0,0,.25);
border: 1px solid rgba(255,255,255,.06);
border-radius: 4px;
padding: 8px 12px;
}
.moon-gc--cyan { border-color: rgba(0,200,200,.2); }
.moon-gc--gold { border-color: rgba(220,180,0,.2); }
.moon-gc--cyan .moon-gc-val { color: var(--teal); }
.moon-gc--gold .moon-gc-val { color: #d0b030; }
.moon-gc-lbl {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
margin-bottom: 3px;
}
.moon-gc-val {
font-family: var(--font-orb);
font-size: 14px;
color: var(--text);
}
/* ── Moon Atlas / Image ───────────────────────────────────────────────────────── */
.moon-atlas-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 16px 6px;
gap: 6px;
width: 100%;
}
.moon-atlas-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(0,200,200,.3);
box-shadow: 0 0 32px rgba(0,100,200,.35);
flex-shrink: 0;
}
.moon-atlas-overlays {
position: absolute;
inset: 0;
pointer-events: none;
}
.moon-orient-N, .moon-orient-S, .moon-orient-E, .moon-orient-W {
position: absolute;
font-family: var(--font-mono);
font-size: 12px;
color: rgba(0,200,200,.8);
font-weight: bold;
background: rgba(0,0,0,.5);
padding: 1px 4px;
border-radius: 2px;
}
.moon-orient-N { top: 4px; left: 50%; transform: translateX(-50%); }
.moon-orient-S { bottom: 4px; left: 50%; transform: translateX(-50%); }
.moon-orient-E { right: 4px; top: 50%; transform: translateY(-50%); }
.moon-orient-W { left: 4px; top: 50%; transform: translateY(-50%); }
.moon-atlas-caption {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255,255,255,.3);
letter-spacing: .06em;
text-transform: uppercase;
}
.moon-atlas-controls {
display: flex;
gap: 6px;
padding: 2px 20px 8px;
flex-wrap: wrap;
}
.moon-ctrl-btn {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 10px;
background: rgba(0,0,0,.3);
border: 1px solid rgba(255,255,255,.1);
color: var(--muted);
cursor: pointer;
border-radius: 2px;
transition: all .12s;
}
.moon-ctrl-btn:hover,
.moon-ctrl-btn--active { background: rgba(0,200,200,.1); border-color: var(--teal); color: var(--teal); }
.moon-illum-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 20px 14px;
}
.moon-illum-lbl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); flex-shrink: 0; }
.moon-illum-track {
flex: 1;
height: 6px;
background: rgba(255,255,255,.08);
border-radius: 3px;
overflow: hidden;
}
.moon-illum-fill { height: 100%; background: linear-gradient(90deg, #306090 0%, #d0b030 100%); border-radius: 3px; transition: width .4s; }
.moon-illum-pct { font-family: var(--font-mono); font-size: 12px; color: #d0b030; flex-shrink: 0; width: 36px; text-align: right; }
/* ── Tonight's Observing Planner ─────────────────────────────────────────────── */
.moon-planner-body { padding: 10px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.moon-direction-helper {
background: rgba(0,200,200,.05);
border: 1px solid rgba(0,200,200,.18);
border-radius: 4px;
padding: 9px 14px;
text-align: center;
}
.moon-dir-text {
font-family: var(--font-orb);
font-size: 13px;
color: var(--teal);
letter-spacing: .04em;
}
.moon-rts-row {
display: flex;
gap: 8px;
}
.moon-rts-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 6px;
background: rgba(0,0,0,.25);
border: 1px solid rgba(255,255,255,.06);
border-radius: 4px;
}
.moon-rts-item--transit { border-color: rgba(220,180,0,.2); }
.moon-rts-icon { font-size: 14px; color: var(--muted); line-height: 1; }
.moon-rts-item--transit .moon-rts-icon { color: #d0b030; }
.moon-rts-lbl { font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.moon-rts-val { font-family: var(--font-orb); font-size: 12px; color: var(--text); }
.moon-best-window {
background: rgba(0,180,80,.05);
border: 1px solid rgba(0,180,80,.25);
border-radius: 4px;
padding: 10px 14px;
}
.moon-bw-lbl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(0,200,80,.7); margin-bottom: 3px; }
.moon-bw-val { font-family: var(--font-orb); font-size: 14px; color: #40e080; }
.moon-bw-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.moon-alt-chart-wrap { }
.moon-alt-chart-hdr {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
margin-bottom: 5px;
}
.moon-alt-chart-legend { display: flex; align-items: center; gap: 8px; }
.moon-alt-leg { display: inline-block; width: 16px; height: 4px; border-radius: 2px; }
.moon-alt-leg--moon { background: #6090c8; }
.moon-alt-leg--night { background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12); }
/* ── Astrophotography Impact ─────────────────────────────────────────────────── */
.moon-ap-badge--good { background: rgba(0,180,80,.12) !important; border-color: rgba(0,180,80,.4) !important; color: #40c860 !important; }
.moon-ap-badge--fair { background: rgba(200,160,0,.1) !important; border-color: rgba(200,160,0,.4) !important; color: #c8a030 !important; }
.moon-ap-badge--poor { background: rgba(200,80,0,.1) !important; border-color: rgba(200,80,0,.4) !important; color: #d06020 !important; }
.moon-ap-badge--bad { background: rgba(200,30,20,.1) !important; border-color: rgba(200,40,30,.4) !important; color: #e04040 !important; }
.moon-ap-body { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.moon-ap-summary { font-size: 13px; color: var(--text); line-height: 1.6; padding: 10px 14px; background: rgba(255,255,255,.03); border-radius: 4px; border-left: 3px solid rgba(0,200,200,.3); }
.moon-ap-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 650px) { .moon-ap-cols { grid-template-columns: 1fr; } }
.moon-ap-col { display: flex; flex-direction: column; gap: 6px; }
.moon-ap-col-hdr { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.07); }
.moon-ap-col-hdr--rec { color: #40c860; border-color: rgba(0,180,80,.25); }
.moon-ap-col-hdr--ok { color: #c8a030; border-color: rgba(200,160,0,.25); }
.moon-ap-col-hdr--avoid { color: #e04040; border-color: rgba(200,40,30,.25); }
.moon-ap-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.moon-ap-rec::before { content: '✓ '; color: #40c860; }
.moon-ap-ok::before { content: '◎ '; color: #c8a030; }
.moon-ap-avoid::before{ content: '✗ '; color: #e04040; }
.moon-ap-rec, .moon-ap-ok, .moon-ap-avoid { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
/* ── What's Visible / Features panel ─────────────────────────────────────────── */
.moon-features-body { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.moon-feat-desc { font-size: 13.5px; line-height: 1.65; color: var(--text); }
.moon-feat-section { display: flex; flex-direction: column; gap: 7px; }
.moon-feat-section-hdr {
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--teal);
padding-bottom: 4px;
border-bottom: 1px solid rgba(0,200,200,.15);
}
.moon-feat-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.moon-feature-tag { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 10px; border: 1px solid var(--blue-border); color: var(--muted); border-radius: 2px; }
.moon-feature-tag--term { border-color: var(--teal); color: var(--teal); background: rgba(0,200,255,.05); }
.moon-feat-instrument { font-family: var(--font-mono); font-size: 12px; color: var(--muted); opacity: .7; }
.moon-feat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 600px) { .moon-feat-cards { grid-template-columns: 1fr; } }
.moon-feat-card {
background: rgba(0,0,0,.2);
border: 1px solid rgba(255,255,255,.07);
border-radius: 4px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 5px;
}
.moon-feat-card-hdr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.moon-feat-card-name { font-family: var(--font-mono); font-size: 11.5px; font-weight: bold; color: var(--text); }
.moon-feat-card-type { font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding: 1px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }
.moon-feat-card-meta { display: flex; gap: 10px; align-items: center; }
.moon-feat-diff { color: #d0b030; font-size: 12px; }
.moon-feat-gear { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }
.moon-feat-card-desc { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.5); line-height: 1.55; }
/* ── Advanced Data panel ─────────────────────────────────────────────────────── */
.moon-adv-toggle { cursor: pointer; }
.moon-adv-toggle:hover .toolbox-panel-title { color: var(--teal); }
.moon-adv-arrow { margin-left: auto; color: var(--muted); font-size: 12px; }
.moon-adv-body { padding: 14px 20px 18px; }
.moon-adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
@media (max-width: 600px) { .moon-adv-grid { grid-template-columns: 1fr; } }
.moon-adv-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-family: var(--font-mono); font-size: 11.5px; }
.moon-adv-row:last-child { border-bottom: none; }
.moon-adv-key { color: var(--muted); flex-shrink: 0; }
.moon-adv-val { color: var(--text); text-align: right; }
.moon-supermoon { background: rgba(200,100,0,.2); border: 1px solid rgba(200,100,0,.5); color: #e08030; font-size: 11px; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
/* ── Next event panels ───────────────────────────────────────────────────────── */
.moon-next-content {
padding: 18px 20px 22px;
text-align: center;
}
.moon-next-date { font-family: var(--font-mono); font-size: 14px; color: var(--text); margin-bottom: 4px; letter-spacing: .04em; }
.moon-next-time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.moon-next-countdown { font-family: var(--font-orb); font-size: 22px; color: var(--teal); letter-spacing: .06em; }
/* ── Upcoming Lunar Events ───────────────────────────────────────────────────── */
.moon-events-grid { display: flex; flex-direction: column; }
.moon-event-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 20px;
border-bottom: 1px solid rgba(255,255,255,.04);
transition: background .12s;
}
.moon-event-card:hover { background: rgba(255,255,255,.02); }
.moon-event-card--gold { border-left: 3px solid #c09000; }
.moon-event-card--teal { border-left: 3px solid var(--teal); }
.moon-event-card--silver { border-left: 3px solid rgba(255,255,255,.2); }
.moon-event-card--dim { border-left: 3px solid rgba(255,255,255,.08); }
.moon-event-card--muted { border-left: 3px solid rgba(100,120,160,.4); }
.moon-event-icon { font-size: 22px; flex-shrink: 0; width: 30px; text-align: center; }
.moon-event-info { flex: 1; min-width: 0; }
.moon-event-kind { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text); margin-bottom: 2px; }
.moon-event-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.moon-event-desc { font-family: var(--font-mono); font-size: 9.5px; color: rgba(255,255,255,.3); margin-top: 2px; }
.moon-event-cd { font-family: var(--font-orb); font-size: 13px; color: var(--teal); flex-shrink: 0; min-width: 70px; text-align: right; }
/* ── Phase Calendar (enhanced) ───────────────────────────────────────────────── */
.moon-cal-controls { display: flex; gap: 5px; margin-left: auto; }
.moon-cal-btn {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 10px;
background: transparent;
border: 1px solid rgba(255,255,255,.12);
color: var(--muted);
cursor: pointer;
border-radius: 2px;
transition: all .12s;
}
.moon-cal-btn--active { background: rgba(0,200,200,.1); border-color: var(--teal); color: var(--teal); }
.moon-calendar-grid { display: flex; flex-wrap: wrap; gap: 24px; padding: 16px 20px 24px; }
.moon-cal-month { flex: 1; min-width: 260px; }
.moon-cal-month-hdr {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--teal);
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(0,200,200,.2);
}
.moon-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.moon-cal-dow { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: .45; text-align: center; padding: 3px 0; text-transform: uppercase; }
.moon-cal-day {
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 2px 2px;
border: 1px solid transparent;
cursor: default;
border-radius: 3px;
position: relative;
transition: background .12s, border-color .12s;
}
.moon-cal-day:hover { background: rgba(0,200,200,.07); border-color: var(--blue-border); }
.moon-cal-day--today {
border-color: var(--teal) !important;
background: rgba(0,200,200,.1) !important;
box-shadow: 0 0 6px rgba(0,200,200,.2);
}
.moon-cal-day--new { border-color: rgba(255,255,255,.08); }
.moon-cal-day--first { border-color: rgba(0,200,200,.2); }
.moon-cal-day--full { border-color: rgba(220,180,0,.35); background: rgba(220,180,0,.05); }
.moon-cal-day--last { border-color: rgba(100,140,200,.2); }
.moon-cal-day--blank { pointer-events: none; }
.moon-cal-emoji { font-size: 17px; line-height: 1.15; }
.moon-cal-num { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.45); line-height: 1; }
.moon-cal-day--today .moon-cal-num { color: var(--teal); font-weight: bold; }
.moon-cal-day--full .moon-cal-num { color: #d0b030; }
.moon-cal-qtip {
position: absolute;
top: 1px; right: 2px;
font-family: var(--font-mono);
font-size: 11px;
color: rgba(0,200,200,.65);
letter-spacing: .02em;
line-height: 1;
}
.moon-cal-day--full .moon-cal-qtip { color: #c09000; }
/* ── Clear Sky: chart enhancements ──────────────────────────────────────────── */
.csc-cell--night {
border-bottom-color: rgba(0,200,255,.07) !important;
}
.csc-date-cell--midnight {
border-left: 2px solid rgba(0,200,255,.35) !important;
}
.csc-section-arrow { margin-right: 6px; font-size: 11px; opacity: .7; }
.csc-section-hint { font-size: 10px; opacity: .35; margin-left: 6px; font-weight: normal; }
.csc-section-header:hover .csc-section-hint { opacity: .65; }
.csc-chart-controls { display: flex; gap: 6px; margin-left: auto; }
.csc-ctrl-btn {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 8px;
background: rgba(0,200,200,.07);
border: 1px solid rgba(0,200,200,.2);
color: var(--muted);
cursor: pointer;
border-radius: 2px;
transition: all .12s;
}
.csc-ctrl-btn:hover { color: var(--teal); border-color: var(--teal); }
.csc-legend-toggle { cursor: pointer; }
.csc-legend-toggle:hover .toolbox-panel-title { color: var(--teal); }
.csc-legend-arrow { margin-left: auto; color: var(--muted); font-size: 12px; }
/* ── Tonight at a Glance ─────────────────────────────────────────────────────── */
.csc-glance-wrap {
background: rgba(0,8,20,.5);
border: 1px solid var(--blue-border);
border-radius: 6px;
padding: 16px 20px 14px;
margin-bottom: 16px;
}
.csc-glance-hdr {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
margin-bottom: 12px;
}
.csc-glance-title {
font-family: var(--font-orb);
font-size: 12px;
letter-spacing: .1em;
color: var(--teal);
text-transform: uppercase;
}
.csc-glance-window {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
}
.csc-glance-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
@media (max-width: 900px) { .csc-glance-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .csc-glance-grid { grid-template-columns: repeat(2, 1fr); } }
.csc-glance-card {
background: rgba(0,0,0,.3);
border: 1px solid rgba(255,255,255,.06);
border-radius: 5px;
padding: 10px 12px 9px;
display: flex;
flex-direction: column;
gap: 3px;
}
.csc-glance-icon { font-size: 16px; line-height: 1; margin-bottom: 1px; }
.csc-glance-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.csc-glance-value { font-family: var(--font-orb); font-size: 14px; color: var(--text); }
.csc-glance-extra { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); line-height: 1.4; }
/* score color variants applied to glance cards */
.csc-score--excellent { border-color: rgba(0,200,80,.3) !important; }
.csc-score--excellent .csc-glance-value { color: #40e080; }
.csc-score--good { border-color: rgba(0,180,200,.25) !important; }
.csc-score--good .csc-glance-value { color: var(--teal); }
.csc-score--fair { border-color: rgba(200,160,0,.25) !important; }
.csc-score--fair .csc-glance-value { color: #c8a030; }
.csc-score--poor { border-color: rgba(200,80,0,.25) !important; }
.csc-score--poor .csc-glance-value { color: #d06020; }
.csc-score--bad { border-color: rgba(200,30,20,.3) !important; }
.csc-score--bad .csc-glance-value { color: #e04040; }
.csc-warnings {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,.06);
}
.csc-warn-badge {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 10px;
border-radius: 3px;
border: 1px solid;
}
.csc-warn-badge--red { background: rgba(200,30,20,.12); border-color: rgba(200,50,40,.4); color: #f06060; }
.csc-warn-badge--amber { background: rgba(200,140,0,.12); border-color: rgba(200,150,0,.35); color: #c8a030; }
.csc-warn-badge--green { background: rgba(0,180,80,.08); border-color: rgba(0,180,80,.3); color: #40c860; }
/* ── Observing Mode Cards ─────────────────────────────────────────────────────── */
.csc-modes-panel { }
.csc-modes-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
padding: 14px 16px 16px;
}
@media (max-width: 700px) { .csc-modes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .csc-modes-grid { grid-template-columns: repeat(2, 1fr); } }
.csc-mode-card {
background: rgba(0,0,0,.3);
border: 1px solid rgba(255,255,255,.07);
border-radius: 5px;
padding: 14px 12px 12px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.csc-mode-icon { font-size: 20px; line-height: 1; }
.csc-mode-label { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.csc-mode-score { font-family: var(--font-orb); font-size: 22px; color: var(--text); }
.csc-mode-verdict { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.csc-mode-hint { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.25); }
.csc-mode-time { font-family: var(--font-mono); font-size: 9.5px; color: rgba(0,200,255,.55); margin-top: 2px; }
.csc-modes-no-dark { font-family: var(--font-mono); font-size: 11px; color: var(--muted);
padding: 8px 20px 4px; grid-column: 1 / -1; }
/* inherit score color variants */
.csc-score--excellent.csc-mode-card { border-color: rgba(0,200,80,.3); }
.csc-score--excellent .csc-mode-score,
.csc-score--excellent .csc-mode-verdict { color: #40e080; }
.csc-score--good.csc-mode-card { border-color: rgba(0,200,200,.25); }
.csc-score--good .csc-mode-score,
.csc-score--good .csc-mode-verdict { color: var(--teal); }
.csc-score--fair.csc-mode-card { border-color: rgba(200,160,0,.25); }
.csc-score--fair .csc-mode-score,
.csc-score--fair .csc-mode-verdict { color: #c8a030; }
.csc-score--poor.csc-mode-card { border-color: rgba(200,80,0,.2); }
.csc-score--poor .csc-mode-score,
.csc-score--poor .csc-mode-verdict { color: #d06020; }
.csc-score--bad.csc-mode-card { border-color: rgba(200,30,20,.25); }
.csc-score--bad .csc-mode-score,
.csc-score--bad .csc-mode-verdict { color: #e04040; }
/* ── Recommended Windows ─────────────────────────────────────────────────────── */
.csc-windows-body {
padding: 12px 16px 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.csc-win-day { display: flex; flex-direction: column; gap: 6px; }
.csc-win-date { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
font-family: var(--font-orb); font-size: 12px; letter-spacing: .08em;
color: var(--teal); text-transform: uppercase;
padding-bottom: 4px; border-bottom: 1px solid rgba(0,200,200,.12); }
.csc-win-dark-span { font-family: var(--font-mono); font-size: 10px; color: var(--muted);
text-transform: none; letter-spacing: 0; font-weight: 400; }
.csc-win-rows { display: flex; flex-direction: column; gap: 5px; }
.csc-win-none { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding: 6px 0; }
.csc-win-row {
display: grid;
grid-template-columns: 90px 160px 130px 1fr;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 12px;
}
.csc-win-row--hazards {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 6px 10px; background: none; border: none;
}
@media (max-width: 600px) {
.csc-win-row { grid-template-columns: 80px 1fr; }
.csc-win-score { display: none; }
}
.csc-win-row--good { background: rgba(0,200,80,.06); border: 1px solid rgba(0,200,80,.2); }
.csc-win-row--blue { background: rgba(0,120,220,.07); border: 1px solid rgba(0,150,220,.2); }
.csc-win-row--bad { background: rgba(200,50,30,.06); border: 1px solid rgba(200,50,30,.2); }
.csc-win-row--info { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.csc-win-type { font-weight: bold; color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.csc-win-window { color: #d0e8f8; }
.csc-win-score { font-size: 11px; }
.csc-win-note { color: var(--muted); font-size: 11px; }
/* ── Target Recommendations ──────────────────────────────────────────────────── */
.csc-targets-body { padding: 12px 16px 16px; }
.csc-target-none { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.csc-target-filters {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.csc-tf-lbl {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .08em;
}
.csc-target-chip {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 10px;
background: rgba(0,0,0,.3);
border: 1px solid rgba(255,255,255,.1);
color: var(--muted);
cursor: pointer;
border-radius: 12px;
transition: all .12s;
}
.csc-target-chip:hover,
.csc-target-chip--active {
background: rgba(0,200,200,.1);
border-color: var(--teal);
color: var(--teal);
}
.csc-target-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) { .csc-target-grid { grid-template-columns: 1fr; } }
.csc-target-section { display: flex; flex-direction: column; gap: 8px; }
.csc-target-section-hdr {
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--teal);
padding-bottom: 5px;
border-bottom: 1px solid rgba(0,200,200,.15);
}
.csc-target-item {
padding: 9px 12px;
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 4px;
}
.csc-target-item--rec { background: rgba(0,180,80,.05); border: 1px solid rgba(0,180,80,.2); }
.csc-target-item--avoid{ background: rgba(200,50,30,.05); border: 1px solid rgba(200,50,30,.18); }
.csc-target-type { font-family: var(--font-mono); font-size: 12px; font-weight: bold; color: var(--text); }
.csc-target-reason { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.csc-target-examples { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.csc-target-ex {
font-family: var(--font-mono);
font-size: 9.5px;
padding: 1px 7px;
background: rgba(0,200,200,.06);
border: 1px solid rgba(0,200,200,.15);
color: var(--muted);
border-radius: 10px;
}
/* ── Gear Notes ──────────────────────────────────────────────────────────────── */
.csc-gear-grid {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px 16px;
}
.csc-gear-note {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px 14px;
border-radius: 5px;
border: 1px solid;
}
.csc-gear-note--critical { background: rgba(200,30,20,.08); border-color: rgba(200,50,40,.4); }
.csc-gear-note--warn { background: rgba(200,130,0,.07); border-color: rgba(200,140,0,.35); }
.csc-gear-note--info { background: rgba(0,100,200,.06); border-color: rgba(0,120,220,.25); }
.csc-gear-note--good { background: rgba(0,180,80,.05); border-color: rgba(0,180,80,.25); }
.csc-gear-note-icon { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.csc-gear-note-body { display: flex; flex-direction: column; gap: 3px; }
.csc-gear-note-title { font-family: var(--font-mono); font-size: 12px; font-weight: bold; color: var(--text); }
.csc-gear-note-text { font-family: var(--font-mono); font-size: 12px; color: var(--muted); line-height: 1.6; }
/* ── Forecast Confidence ─────────────────────────────────────────────────────── */
.csc-conf-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.csc-conf-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.csc-conf-badge {
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 12px;
border-radius: 3px;
font-weight: bold;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: .08em;
}
.csc-conf--high { background: rgba(0,180,80,.12); border: 1px solid rgba(0,180,80,.4); color: #40c860; }
.csc-conf--med { background: rgba(200,160,0,.1); border: 1px solid rgba(200,160,0,.4); color: #c8a030; }
.csc-conf--low { background: rgba(200,40,20,.1); border: 1px solid rgba(200,50,40,.4); color: #e05040; }
.csc-conf-note { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.csc-conf-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
font-family: var(--font-mono);
font-size: 9.5px;
color: rgba(255,255,255,.3);
}
/* ── Hour Detail Drawer ──────────────────────────────────────────────────────── */
.csc-hour-drawer {
position: absolute;
width: 248px;
background: linear-gradient(160deg, rgba(0,12,28,.98) 0%, rgba(0,6,18,1) 100%);
border: 1px solid rgba(0,200,200,.3);
border-top: 3px solid var(--teal);
box-shadow: 0 8px 32px rgba(0,0,0,.7);
z-index: 5000;
animation: csc-drawer-in .12s ease-out;
}
@keyframes csc-drawer-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.csc-hd-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px 6px;
border-bottom: 1px solid rgba(0,200,200,.15);
}
.csc-hd-time { font-family: var(--font-orb); font-size: 12px; color: var(--teal); letter-spacing: .06em; }
.csc-hd-close {
background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px;
padding: 2px 4px; transition: color .1s;
}
.csc-hd-close:hover { color: #f06060; }
.csc-hd-scores {
display: flex;
gap: 4px;
padding: 8px 10px;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.csc-hd-score-item {
flex: 1;
text-align: center;
padding: 5px 0;
border-radius: 3px;
background: rgba(255,255,255,.04);
}
.csc-hd-score-val { font-family: var(--font-orb); font-size: 16px; color: var(--text); }
.csc-hd-score-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; }
.csc-score--excellent .csc-hd-score-val { color: #40e080; }
.csc-score--good .csc-hd-score-val { color: var(--teal); }
.csc-score--fair .csc-hd-score-val { color: #c8a030; }
.csc-score--poor .csc-hd-score-val { color: #d06020; }
.csc-score--bad .csc-hd-score-val { color: #e04040; }
.csc-hd-fields { padding: 6px 10px 10px; max-height: 240px; overflow-y: auto; }
.csc-hd-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-family: var(--font-mono); font-size: 10.5px; }
.csc-hd-row:last-child { border-bottom: none; }
.csc-hd-key { color: var(--muted); flex-shrink: 0; }
.csc-hd-val { color: var(--text); text-align: right; }
/* ── Future Planning Cards ───────────────────────────────────────────────────── */
.csc-future-panel { opacity: .8; }
.csc-future-toggle { cursor: pointer; }
.csc-future-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 14px 16px 18px;
}
@media (max-width: 700px) { .csc-future-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .csc-future-grid { grid-template-columns: 1fr; } }
.csc-future-card {
background: rgba(0,0,0,.25);
border: 1px dashed rgba(255,255,255,.1);
border-radius: 5px;
padding: 12px 14px;
position: relative;
}
.csc-future-icon { font-size: 18px; margin-bottom: 4px; }
.csc-future-title { font-family: var(--font-orb); font-size: 12px; letter-spacing: .05em; color: rgba(255,255,255,.6); margin-bottom: 4px; }
.csc-future-desc { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.3); line-height: 1.5; }
.csc-future-badge {
position: absolute;
top: 8px; right: 8px;
font-family: var(--font-mono);
font-size: 10px;
padding: 1px 6px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.3);
border-radius: 10px;
text-transform: uppercase;
letter-spacing: .08em;
}
/* ── Attributions Page ────────────────────────────────────────────────────────── */
.attr-hero {
min-height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 2rem;
}
.attr-hero-inner {
text-align: center;
max-width: 680px;
padding: 0 1.5rem;
}
.attr-hero-sub {
margin: 0.75rem 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.attr-body {
padding: 3rem 0 5rem;
}
.attr-section {
margin-bottom: 3rem;
}
.attr-section-hdr {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--blue-border);
}
.attr-section-icon {
font-size: 16px;
color: var(--teal);
flex-shrink: 0;
}
.attr-section-title {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--teal);
margin: 0;
flex: 1;
}
.attr-section-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: 0.6;
}
.attr-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 1rem;
}
.attr-card {
background: var(--panel);
border: 1px solid var(--blue-border);
border-top: 2px solid var(--blue-bright);
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 0.2s;
}
.attr-card:hover {
border-color: var(--teal);
}
.attr-card-hdr {
display: flex;
flex-direction: column;
gap: 3px;
}
.attr-card-name {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--fg);
text-decoration: none;
letter-spacing: 0.03em;
display: flex;
align-items: center;
gap: 5px;
}
.attr-card-name:hover {
color: var(--teal);
}
.attr-ext-icon {
font-size: 11px;
color: var(--muted);
opacity: 0.7;
}
.attr-card-org {
font-size: 12px;
color: var(--muted);
opacity: 0.7;
}
.attr-card-used {
font-size: 13px;
color: var(--fg);
line-height: 1.55;
margin: 0;
opacity: 0.85;
}
.attr-card-license {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.attr-license-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
opacity: 0.6;
flex-shrink: 0;
}
.attr-license-val {
font-size: 12px;
color: var(--muted);
}
.attr-footer-note {
margin-top: 3rem;
padding: 20px 24px;
border: 1px solid var(--blue-border);
border-left: 3px solid var(--teal);
}
.attr-footer-note p {
margin: 0;
font-size: 13px;
color: var(--muted);
line-height: 1.6;
}
.attr-footer-note a {
color: var(--teal);
}
/* ── Attribution v2 enhancements ─────────────────────────────────────────────
All new .attr-* rules below extend the base styles above without modifying
any existing selectors.
─────────────────────────────────────────────────────────────────────────── */
/* Stats strip */
.attr-stats-strip {
background: var(--panel);
border-top: 1px solid var(--blue-border);
border-bottom: 1px solid var(--blue-border);
padding: 1.25rem 0;
}
.attr-stats-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
}
.attr-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 0.5rem 2rem;
}
.attr-stat-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
color: var(--teal);
letter-spacing: 0.04em;
line-height: 1;
}
.attr-stat-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
opacity: 0.7;
white-space: nowrap;
}
.attr-stat-div {
width: 1px;
height: 32px;
background: var(--blue-border);
flex-shrink: 0;
}
/* Pipeline visualization */
.attr-pipeline-wrap {
padding: 2.5rem 0 1rem;
}
.attr-pipeline {
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
padding: 0.5rem 0 1rem;
scrollbar-width: thin;
scrollbar-color: var(--blue-border) transparent;
}
.attr-pipe-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 20px;
background: var(--panel);
border: 1px solid var(--blue-border);
border-top: 2px solid var(--cat-color, var(--blue-bright));
min-width: 140px;
flex-shrink: 0;
transition: border-color 0.2s;
}
.attr-pipe-node:hover { border-color: var(--teal); }
.attr-pipe-node--source { border-top-color: var(--teal); }
.attr-pipe-node--db { border-top-color: #66bb6a; }
.attr-pipe-node--api { border-top-color: #2979ff; }
.attr-pipe-node--browser{ border-top-color: #ffd60a; }
.attr-pipe-node-icon {
font-size: 20px;
color: var(--muted);
opacity: 0.5;
}
.attr-pipe-node-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--teal);
text-align: center;
white-space: nowrap;
}
.attr-pipe-node-sub {
font-size: 11px;
color: var(--muted);
opacity: 0.6;
text-align: center;
white-space: nowrap;
}
.attr-pipe-arrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 4px;
flex-shrink: 0;
position: relative;
}
.attr-pipe-arrow-shaft {
display: block;
width: 48px;
height: 1px;
background: linear-gradient(90deg, var(--blue-border), rgba(0,200,255,0.4));
}
.attr-pipe-arrow-head {
font-size: 10px;
color: var(--teal);
opacity: 0.7;
margin-top: -4px;
}
.attr-pipe-arrow-label {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
opacity: 0.45;
text-align: center;
line-height: 1.4;
margin-top: 4px;
}
/* "How we use data" policy grid */
.attr-policy-wrap {
padding: 0.5rem 0 2rem;
}
.attr-policy-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.attr-policy-card {
background: var(--panel);
border: 1px solid var(--blue-border);
border-left: 3px solid var(--teal);
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.attr-policy-icon {
font-size: 18px;
color: var(--teal);
opacity: 0.6;
}
.attr-policy-title {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--teal);
}
.attr-policy-text {
font-size: 12px;
color: var(--muted);
line-height: 1.6;
margin: 0;
}
/* Search + filter controls */
.attr-controls {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
padding: 16px 20px;
background: var(--panel);
border: 1px solid var(--blue-border);
}
.attr-search-wrap {
position: relative;
max-width: 400px;
}
.attr-search {
width: 100%;
background: var(--near-black);
border: 1px solid var(--blue-border);
color: var(--text);
font-family: var(--font-mono);
font-size: 12px;
padding: 8px 12px 8px 32px;
outline: none;
transition: border-color 0.2s;
-webkit-appearance: none;
}
.attr-search:focus { border-color: var(--teal); }
.attr-search::placeholder { color: var(--muted); opacity: 0.5; }
.attr-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: var(--muted);
opacity: 0.4;
pointer-events: none;
}
.attr-filters {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.attr-chip {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 5px 12px;
background: transparent;
border: 1px solid var(--blue-border);
color: var(--muted);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
display: inline-flex;
align-items: center;
gap: 5px;
}
.attr-chip:hover {
border-color: var(--teal);
color: var(--teal);
}
.attr-chip--active {
background: rgba(0,200,255,0.12);
border-color: var(--teal);
color: var(--teal);
}
.attr-chip:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.attr-chip-count {
background: rgba(0,200,255,0.15);
border-radius: 2px;
padding: 1px 5px;
font-size: 9px;
color: var(--teal);
}
/* No results message */
.attr-no-results {
padding: 2rem;
text-align: center;
font-family: var(--font-mono);
font-size: 13px;
color: var(--muted);
opacity: 0.6;
border: 1px dashed var(--blue-border);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 2rem;
}
.attr-no-results-icon { font-size: 18px; opacity: 0.4; }
/* Enhanced card — extends existing .attr-card */
.attr-section { --cat-color: var(--blue-bright); }
.attr-card { border-top-color: var(--cat-color); }
.attr-card-name-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.attr-cadence-badge {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
padding: 2px 7px;
white-space: nowrap;
flex-shrink: 0;
}
.attr-card-tools {
display: flex;
align-items: baseline;
gap: 6px;
padding: 4px 0 0;
}
.attr-tools-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--teal);
opacity: 0.7;
flex-shrink: 0;
}
.attr-tools-val {
font-size: 11px;
color: var(--muted-light);
opacity: 0.75;
}
.attr-license-link {
font-size: 12px;
color: var(--teal);
text-decoration: none;
opacity: 0.8;
}
.attr-license-link:hover { opacity: 1; text-decoration: underline; }
/* Expandable details */
.attr-card-expand {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.attr-expand-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
padding: 0;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
opacity: 0.6;
transition: opacity 0.15s, color 0.15s;
}
.attr-expand-btn:hover { opacity: 1; color: var(--teal); }
.attr-expand-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.attr-expand-arrow {
font-size: 12px;
transition: transform 0.2s;
display: inline-block;
}
.attr-expand-btn[aria-expanded="true"] .attr-expand-arrow { transform: rotate(180deg); }
.attr-expand-body {
margin-top: 10px;
padding: 10px 12px;
background: rgba(0,51,255,0.05);
border-left: 2px solid rgba(0,200,255,0.2);
}
.attr-expand-text {
font-size: 12px;
color: var(--muted);
line-height: 1.65;
margin: 0;
}
/* Category-colored section top border */
.attr-section-hdr { border-bottom-color: rgba(255,255,255,0.08); }
.attr-section-icon { color: var(--cat-color, var(--teal)); }
.attr-section-title { color: var(--cat-color, var(--teal)); }
/* Responsive overrides */
@media (max-width: 600px) {
.attr-cards {
grid-template-columns: 1fr;
}
.attr-stat { padding: 0.5rem 1rem; }
.attr-stat-div { display: none; }
.attr-stats-row { gap: 0.5rem; }
.attr-pipeline { flex-direction: column; gap: 0; }
.attr-pipe-arrow { flex-direction: row; align-items: center; padding: 4px 0; }
.attr-pipe-arrow-shaft { width: 24px; height: 1px; }
.attr-pipe-arrow-label { display: none; }
.attr-pipe-node { min-width: 0; width: 100%; }
.attr-policy-grid { grid-template-columns: 1fr; }
.attr-chip { font-size: 9px; padding: 4px 9px; }
.attr-card-name-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 900px) {
.attr-pipeline { gap: 0; }
.attr-pipe-node { min-width: 110px; padding: 12px 14px; }
.attr-pipe-arrow-shaft { width: 28px; }
.attr-pipe-arrow-label { font-size: 8px; }
}
/* ── Moon Dashboard ───────────────────────────────────────────────────────────── */
/* Visuals panel (canvas + photo side by side) */
.moon-visuals {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
padding: 16px 20px 20px;
}
.moon-canvas-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
#moon-canvas {
border-radius: 50%;
background: #060c18;
display: block;
}
.moon-canvas-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.05em;
}
.moon-photo-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.moon-svs-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.moon-photo-caption {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: 0.55;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Features section */
.moon-features {
border-top: 1px solid var(--blue-border);
padding: 14px 20px 18px;
}
.moon-features-hdr {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--teal);
margin-bottom: 8px;
}
.moon-features-desc {
font-size: 13px;
line-height: 1.55;
color: var(--fg);
opacity: 0.85;
margin: 0 0 10px;
}
.moon-feature-list,
.moon-highlight-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.moon-feature-tag {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 9px;
border: 1px solid var(--blue-border);
color: var(--muted);
letter-spacing: 0.03em;
}
.moon-feature-tag--term {
border-color: var(--teal);
color: var(--teal);
background: rgba(0,200,255,0.05);
}
.moon-instrument {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
margin-top: 8px;
opacity: 0.7;
}
/* Next event panels */
.moon-next-content {
padding: 20px 20px 24px;
text-align: center;
}
.moon-next-date {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 600;
color: var(--fg);
margin-bottom: 4px;
letter-spacing: 0.04em;
}
.moon-next-time {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
margin-bottom: 14px;
}
.moon-next-countdown {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
color: var(--teal);
letter-spacing: 0.06em;
}
/* Phase calendar */
.moon-calendar-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 16px 20px 24px;
}
.moon-cal-month {
flex: 1;
min-width: 280px;
}
.moon-cal-month-hdr {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--teal);
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid var(--blue-border);
}
.moon-cal-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 2px;
}
.moon-cal-dow {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: 0.5;
text-align: center;
padding: 4px 0;
text-transform: uppercase;
}
.moon-cal-day {
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 2px;
border: 1px solid transparent;
cursor: default;
border-radius: 3px;
transition: background 0.15s, border-color 0.15s;
}
.moon-cal-day:hover {
background: rgba(0,200,255,0.07);
border-color: var(--blue-border);
}
.moon-cal-day--today {
border-color: var(--teal);
background: rgba(0,200,255,0.08);
}
.moon-cal-day--blank {
pointer-events: none;
}
.moon-cal-emoji {
font-size: 16px;
line-height: 1.2;
}
.moon-cal-num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: 0.6;
line-height: 1;
}
/* Eclipses */
.moon-eclipse-grid {
display: flex;
flex-direction: column;
gap: 0;
}
.moon-eclipse-card {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.15s;
}
.moon-eclipse-card:hover {
background: rgba(255,255,255,0.02);
}
.moon-eclipse-card--solar { border-left: 3px solid #f0a000; }
.moon-eclipse-card--lunar { border-left: 3px solid var(--teal); }
.moon-eclipse-icon {
font-size: 28px;
flex-shrink: 0;
width: 36px;
text-align: center;
opacity: 0.85;
}
.moon-eclipse-info {
flex: 1;
}
.moon-eclipse-badge {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
opacity: 0.7;
margin-bottom: 3px;
}
.moon-eclipse-date {
font-size: 15px;
font-weight: 600;
color: var(--fg);
margin-bottom: 2px;
}
.moon-eclipse-time {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.moon-eclipse-mag {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: 0.6;
margin-top: 3px;
}
.moon-eclipse-countdown {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--teal);
flex-shrink: 0;
text-align: right;
min-width: 80px;
}
@media (max-width: 600px) {
.moon-visuals { flex-direction: column; align-items: center; }
.moon-cal-month { min-width: 100%; }
.moon-eclipse-countdown { display: none; }
}
/* ── Light Pollution Page ─────────────────────────────────────────────────────── */
/* Map container */
.lp-map-panel .toolbox-panel-hdr { border-bottom: 1px solid var(--blue-border); }
.lp-map-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
padding: 10px 20px;
border-bottom: 1px solid var(--blue-border);
background: rgba(0,0,0,0.15);
}
.lp-ctrl-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-right: 6px;
}
.lp-dataset-btns,
.lp-basemap-btns,
.lp-opacity-wrap {
display: flex;
align-items: center;
gap: 4px;
}
.lp-opacity-slider {
-webkit-appearance: none;
appearance: none;
width: 100px;
height: 3px;
background: var(--blue-border);
outline: none;
border-radius: 2px;
cursor: pointer;
}
.lp-opacity-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px; height: 12px;
background: var(--teal);
border-radius: 50%;
cursor: pointer;
}
.lp-opacity-slider::-moz-range-thumb {
width: 12px; height: 12px;
background: var(--teal);
border-radius: 50%;
border: none;
cursor: pointer;
}
.lp-ctrl-val {
font-family: var(--font-mono);
font-size: 11px;
color: var(--teal);
min-width: 32px;
}
.lp-map-container {
width: 100%;
height: 520px;
background: #060c18;
isolation: isolate; /* contain Leaflet's internal z-indexes so subnav dropdown paints above */
}
.lp-map-credit {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: 0.5;
padding: 6px 20px;
text-align: right;
border-top: 1px solid var(--blue-border);
}
.lp-map-credit a { color: inherit; }
/* Location marker (Leaflet div icon) */
.lp-location-marker { background: transparent; border: none; }
.lp-marker-inner {
width: 16px; height: 16px;
border-radius: 50%;
background: var(--teal);
border: 3px solid #fff;
box-shadow: 0 0 0 2px var(--teal), 0 0 12px rgba(0,200,255,0.6);
}
/* Bortle scale list */
.lp-bortle-list {
display: flex;
flex-direction: column;
gap: 0;
}
.lp-bortle-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 16px;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.1s;
}
.lp-bortle-row:hover { background: rgba(255,255,255,0.02); }
.lp-bortle-swatch {
width: 26px;
height: 26px;
border-radius: 3px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.1);
}
.lp-bortle-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 130px;
flex-shrink: 0;
}
.lp-bortle-name {
font-size: 12px;
font-weight: 600;
color: var(--fg);
}
.lp-bortle-lm {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: 0.6;
}
.lp-bortle-desc {
font-size: 12px;
color: var(--muted);
line-height: 1.4;
}
/* Observing context panel */
.lp-section-divider {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--teal);
padding: 10px 20px 6px;
border-top: 1px solid rgba(0,200,255,0.15);
margin-top: 8px;
}
.lp-obs-tips {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 16px 12px;
}
.lp-obs-tip {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 8px 12px;
border-left: 2px solid var(--blue-border);
font-size: 12px;
line-height: 1.5;
}
.lp-obs-tip--good { border-color: #22aa44; }
.lp-obs-tip--ok { border-color: #d0c000; }
.lp-obs-tip--best { border-color: var(--teal); }
.lp-obs-tip-icon {
font-size: 14px;
flex-shrink: 0;
margin-top: 1px;
}
.lp-tips-list {
padding: 0 20px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.lp-tips-list p {
font-size: 12px;
line-height: 1.5;
color: var(--muted);
margin: 0;
padding-left: 10px;
border-left: 1px solid var(--blue-border);
}
@media (max-width: 700px) {
.lp-map-container { height: 360px; }
.lp-bortle-desc { display: none; }
.lp-map-controls { gap: 8px 14px; }
}
/* ── LP: Map header toggles ──────────────────────────────────────────────────── */
.lp-map-toggle-row {
display: flex;
gap: 14px;
margin-left: auto;
align-items: center;
}
.lp-toggle-label {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
cursor: pointer;
letter-spacing: .06em;
}
.lp-toggle-label:hover { color: var(--text); }
.lp-toggle-cb { accent-color: var(--teal); cursor: pointer; }
/* Compare bar */
.lp-compare-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 20px;
background: rgba(0,0,0,.2);
border-bottom: 1px solid var(--blue-border);
flex-wrap: wrap;
}
.lp-year-select {
background: rgba(0,51,255,.08);
border: 1px solid rgba(0,51,255,.2);
color: var(--text);
font-family: var(--font-mono);
font-size: 12px;
padding: 3px 6px;
cursor: pointer;
}
.lp-compare-note {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: .7;
font-style: italic;
}
.lp-compare-btn--active { background: rgba(0,180,180,.1) !important; border-color: var(--teal) !important; color: var(--teal) !important; }
/* ── LP: Enhanced marker ─────────────────────────────────────────────────────── */
.lp-location-marker { background: transparent; border: none; overflow: visible; }
.lp-marker-outer {
width: 44px; height: 44px;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.lp-marker-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(0,200,255,.6);
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.lp-marker-ring--1 { width: 24px; height: 24px; animation: lp-ring-pulse 2s ease-out infinite; }
.lp-marker-ring--2 { width: 40px; height: 40px; animation: lp-ring-pulse 2s ease-out .6s infinite; border-color: rgba(0,200,255,.3); }
@keyframes lp-ring-pulse {
0% { opacity: 1; transform: translate(-50%,-50%) scale(.8); }
100% { opacity: 0; transform: translate(-50%,-50%) scale(1.4); }
}
.lp-marker-cross {
position: absolute;
background: rgba(0,200,255,.8);
}
.lp-marker-cross--h { width: 32px; height: 1px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.lp-marker-cross--v { width: 1px; height: 32px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.lp-marker-dot {
width: 6px; height: 6px;
background: var(--teal);
border-radius: 50%;
box-shadow: 0 0 8px var(--teal);
position: relative; z-index: 2;
}
/* Distance ring labels */
.lp-ring-label {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(0,200,255,.8);
background: rgba(6,12,24,.7);
padding: 1px 4px;
border-radius: 2px;
white-space: nowrap;
pointer-events: none;
}
/* Map legend */
.lp-map-legend {
background: rgba(6,12,24,.92);
border: 1px solid rgba(0,51,255,.3);
padding: 8px 10px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text);
max-width: 200px;
}
.lp-ml-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--teal);
margin-bottom: 6px;
}
.lp-ml-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.lp-ml-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 1px; flex-shrink: 0; }
.lp-ml-label { color: var(--muted); font-size: 11px; }
/* Leaflet popup */
.lp-popup { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
/* ── LP: Sky Quality card ─────────────────────────────────────────────────────── */
.lp-bortle-selector {
padding: 10px 14px;
border-bottom: 1px solid var(--blue-border);
background: rgba(0,0,0,.1);
}
.lp-bortle-sel-hdr {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.lp-bortle-sel-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: .07em;
}
.lp-bortle-sel-hint {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: .6;
}
.lp-bortle-btns {
display: flex;
gap: 4px;
}
.lp-bortle-sel-btn {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
width: 32px;
height: 32px;
border: 1px solid rgba(0,51,255,.2);
background: rgba(255,255,255,.03);
color: var(--muted);
cursor: pointer;
transition: all .15s;
border-radius: 2px;
}
.lp-bortle-sel-btn:hover { background: rgba(255,255,255,.07); color: var(--text); }
.lp-bortle-sel-btn--active {
background: rgba(0,180,180,.15);
border-color: var(--teal);
color: var(--teal);
box-shadow: 0 0 8px rgba(0,200,200,.2);
}
.lp-sq-summary { padding: 12px 14px; }
.lp-sq-hero {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.lp-sq-swatch {
width: 36px;
height: 36px;
border-radius: 3px;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,.15);
}
.lp-sq-class {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 2px;
display: inline-block;
margin-bottom: 3px;
}
.lp-sq-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.lp-sq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}
.lp-sq-cell {
display: flex;
flex-direction: column;
gap: 2px;
padding: 7px 9px;
background: rgba(0,51,255,.05);
border: 1px solid rgba(0,51,255,.1);
border-radius: 2px;
}
.lp-sq-cell-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
}
.lp-sq-cell-val {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
line-height: 1.4;
}
.lp-sq-advice {
font-size: 12px;
color: var(--muted-light, #8090b0);
line-height: 1.6;
border-left: 2px solid var(--teal);
padding-left: 10px;
}
/* ── LP: Tonight panel ───────────────────────────────────────────────────────── */
.lp-tonight-score-row {
padding: 10px 14px 8px;
border-bottom: 1px solid var(--blue-border);
}
.lp-tonight-score-block {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.lp-tonight-score-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
}
.lp-tonight-score-val {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
}
.lp-tonight-score-bar {
height: 4px;
background: rgba(255,255,255,.06);
border-radius: 2px;
overflow: hidden;
}
.lp-tonight-score-fill {
height: 100%;
border-radius: 2px;
transition: width .5s ease;
}
.lp-ts--excellent { color: #3dca8a; background: #3dca8a; }
.lp-ts--good { color: #70d4a0; background: #70d4a0; }
.lp-ts--fair { color: #e6b432; background: #e6b432; }
.lp-ts--poor { color: #e08040; background: #e08040; }
.lp-ts--bad { color: #cc4444; background: #cc4444; }
/* Moon data */
.lp-moon-data { padding: 0 0 4px; }
.lp-impact--good { color: #3dca8a; }
.lp-impact--mod { color: #e6b432; }
.lp-impact--severe { color: #e05040; }
.lp-moon-impact-grid {
display: flex;
flex-direction: column;
gap: 0;
padding: 4px 14px 10px;
}
.lp-moon-impact-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,.04);
font-size: 12px;
}
.lp-moon-impact-target { color: var(--muted-light, #8090b0); }
.lp-moon-impact-status {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
}
.lp-best-move {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px 14px 12px;
}
.lp-best-move-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.5;
}
.lp-best-move-icon { font-size: 16px; flex-shrink: 0; }
/* ── LP: Guidance tabs ───────────────────────────────────────────────────────── */
.lp-tabs {
display: flex;
gap: 4px;
margin-left: auto;
}
.lp-tab {
font-family: var(--font-mono);
font-size: 12px;
padding: 4px 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(0,51,255,.18);
color: var(--muted);
cursor: pointer;
transition: all .15s;
letter-spacing: .06em;
}
.lp-tab:hover { color: var(--text); background: rgba(255,255,255,.06); }
.lp-tab--active {
background: rgba(0,180,180,.1);
border-color: var(--teal);
color: var(--teal);
font-weight: 600;
}
.lp-tab-panel { padding: 14px; }
.lp-guidance-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 700px) { .lp-guidance-grid { grid-template-columns: 1fr; } }
.lp-guidance-col {
background: rgba(0,51,255,.04);
border: 1px solid rgba(0,51,255,.1);
border-radius: 2px;
padding: 10px 12px;
}
.lp-guidance-section-title {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--teal);
margin-bottom: 7px;
}
.lp-guidance-text {
font-size: 12px;
color: var(--muted-light, #8090b0);
line-height: 1.6;
}
/* ── LP: Target ratings table ────────────────────────────────────────────────── */
.lp-ratings-wrap { overflow-x: auto; padding: 0 0 4px; }
.lp-ratings-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 12px;
min-width: 520px;
}
.lp-ratings-table th {
padding: 7px 6px;
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
border-bottom: 1px solid var(--blue-border);
background: rgba(0,0,0,.15);
}
.lp-ratings-table td {
padding: 5px 6px;
border-bottom: 1px solid rgba(255,255,255,.03);
vertical-align: middle;
}
.lp-rt-target { font-size: 12px; color: var(--text); white-space: nowrap; }
.lp-rt-icon { margin-right: 5px; }
.lp-rt-mode { font-size: 11px; color: var(--muted); white-space: nowrap; padding-left: 20px; }
.lp-rt-img-row td, .lp-rt-img-row { opacity: .75; }
.lp-rt-cell { text-align: center; }
.lp-rt-col--active { background: rgba(0,180,180,.1); }
.lp-rt-col--active.lp-rt-col { color: var(--teal); }
.lp-rdot { font-size: 14px; }
.lp-r5 { color: #3dca8a; }
.lp-r4 { color: #70d4a0; }
.lp-r3 { color: #e6b432; }
.lp-r2 { color: #e08040; }
.lp-r1 { color: #606070; }
.lp-ratings-legend {
padding: 8px 14px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
border-top: 1px solid var(--blue-border);
}
/* ── LP: Recommendations ─────────────────────────────────────────────────────── */
.lp-rec-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--blue-border);
}
@media (max-width: 700px) { .lp-rec-grid { grid-template-columns: 1fr; } }
.lp-rec-col { padding: 12px 14px; border-right: 1px solid var(--blue-border); }
.lp-rec-col:last-child { border-right: none; }
.lp-rec-col-hdr {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 2px solid var(--blue-border);
}
.lp-rec-col-hdr--good { color: #3dca8a; border-color: #3dca8a; }
.lp-rec-col-hdr--ok { color: #e6b432; border-color: #e6b432; }
.lp-rec-col-hdr--dark { color: var(--muted); }
.lp-rec-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.lp-rec-item {
font-size: 12px;
color: var(--muted-light, #8090b0);
padding-left: 10px;
border-left: 1px solid rgba(255,255,255,.08);
line-height: 1.4;
}
/* ── LP: Filter strategy ─────────────────────────────────────────────────────── */
.lp-filter-placeholder {
padding: 16px 20px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.lp-fc-tier-hdr {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--teal);
padding: 10px 14px 6px;
border-bottom: 1px solid var(--blue-border);
}
.lp-fc-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 10px 14px 14px;
}
@media (max-width: 700px) { .lp-fc-grid { grid-template-columns: 1fr; } }
.lp-fc-card {
display: flex;
gap: 10px;
padding: 9px 12px;
border: 1px solid rgba(0,51,255,.12);
border-radius: 2px;
background: rgba(0,51,255,.04);
}
.lp-fc--good { border-color: rgba(61,202,138,.25); background: rgba(61,202,138,.06); }
.lp-fc--ok { border-color: rgba(230,180,50,.2); background: rgba(230,180,50,.05); }
.lp-fc--warn { border-color: rgba(230,128,64,.2); background: rgba(230,128,64,.05); }
.lp-fc--bad { border-color: rgba(200,60,60,.2); background: rgba(200,60,60,.05); }
.lp-fc-card-icon {
font-size: 16px;
flex-shrink: 0;
width: 20px;
text-align: center;
}
.lp-fc-card-title {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
margin-bottom: 3px;
color: var(--text);
}
.lp-fc-card-text {
font-size: 12px;
color: var(--muted-light, #8090b0);
line-height: 1.55;
}
/* ── LP: Dark sky planning ───────────────────────────────────────────────────── */
.lp-darker-wrap { padding: 12px 14px; }
.lp-darker-intro {
font-size: 12px;
color: var(--muted);
margin-bottom: 10px;
}
.lp-darker-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.lp-darker-btns { display: flex; gap: 4px; }
.lp-find-btn { min-width: 32px; }
.lp-find-btn--active { background: rgba(0,180,180,.1) !important; border-color: var(--teal) !important; color: var(--teal) !important; }
.lp-darker-result { margin-bottom: 4px; }
.lp-darker-info {
background: rgba(0,51,255,.05);
border: 1px solid rgba(0,51,255,.15);
padding: 10px 12px;
border-radius: 2px;
}
.lp-darker-info--good { border-color: rgba(61,202,138,.3); background: rgba(61,202,138,.06); color: #3dca8a; font-size: 12px; }
.lp-darker-info-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
font-size: 12px;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.lp-di-label { font-family: var(--font-mono); color: var(--muted); font-size: 11px; }
.lp-di-val { font-family: var(--font-mono); color: var(--text); }
.lp-darker-tip {
font-size: 12px;
color: var(--muted-light, #8090b0);
margin-top: 7px;
line-height: 1.5;
}
.lp-saved-table-wrap { overflow-x: auto; }
.lp-saved-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 12px;
margin-top: 6px;
}
.lp-saved-table th {
padding: 5px 8px;
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted);
border-bottom: 1px solid var(--blue-border);
}
.lp-saved-table td {
padding: 5px 8px;
color: var(--muted-light, #8090b0);
border-bottom: 1px solid rgba(255,255,255,.03);
}
.lp-saved-bortle { color: var(--teal); font-weight: 600; }
/* ── LP: Trend chart ─────────────────────────────────────────────────────────── */
.lp-trend-wrap { padding: 12px 14px; }
.lp-trend-disclaimer {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: .7;
margin-bottom: 12px;
line-height: 1.5;
border-left: 2px solid rgba(0,51,255,.3);
padding-left: 8px;
}
.lp-trend-chart {
display: flex;
align-items: flex-end;
gap: 8px;
height: 80px;
margin-bottom: 8px;
}
.lp-tc-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; height: 100%; }
.lp-tc-track { flex: 1; width: 100%; display: flex; align-items: flex-end; background: rgba(255,255,255,.04); border: 1px solid rgba(0,51,255,.1); border-radius: 2px; overflow: hidden; }
.lp-tc-bar { width: 100%; background: rgba(0,180,180,.3); border-top: 2px solid var(--teal); transition: height .4s ease; }
.lp-tc-bar--active { background: rgba(0,180,180,.5); border-color: var(--teal); }
.lp-tc-year { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.lp-trend-summary {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
padding: 6px 0;
border-top: 1px solid var(--blue-border);
}
.lp-trend-label { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.lp-trend-val { color: var(--text); }
.lp-compare-years-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lp-vs-arrow { color: var(--muted); font-size: 16px; }
.lp-quick-compare { font-size: 12px; color: var(--muted-light, #8090b0); }
/* ── LP: Bortle reference cards ──────────────────────────────────────────────── */
.lp-bortle-cards {
display: flex;
flex-direction: column;
gap: 0;
}
.lp-bortle-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 9px 14px;
border: none;
border-bottom: 1px solid rgba(255,255,255,.04);
background: transparent;
text-align: left;
cursor: pointer;
width: 100%;
transition: background .12s;
}
.lp-bortle-card:hover { background: rgba(255,255,255,.02); }
.lp-bortle-card--active {
background: rgba(0,180,180,.07) !important;
box-shadow: inset 3px 0 0 var(--teal);
}
.lp-bc-swatch {
width: 28px; height: 28px;
border-radius: 3px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,.12);
}
.lp-bc-body { flex: 1; min-width: 0; }
.lp-bc-name {
font-size: 12px;
font-weight: 600;
color: var(--text);
margin-bottom: 1px;
}
.lp-bc-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
margin-bottom: 2px;
}
.lp-bc-desc {
font-size: 12px;
color: var(--muted-light, #8090b0);
line-height: 1.4;
}
@media (max-width: 600px) { .lp-bc-desc { display: none; } }
/* ── LP: Beginner help ───────────────────────────────────────────────────────── */
.lp-help-toggle {
cursor: pointer;
user-select: none;
}
.lp-help-toggle:hover .toolbox-panel-title { color: var(--teal); }
.lp-help-arrow {
margin-left: auto;
font-size: 13px;
color: var(--muted);
transition: transform .15s;
}
.lp-help-body { padding: 14px; }
.lp-help-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 900px) { .lp-help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .lp-help-grid { grid-template-columns: 1fr; } }
.lp-help-card {
background: rgba(0,51,255,.04);
border: 1px solid rgba(0,51,255,.1);
border-radius: 2px;
padding: 10px 12px;
}
.lp-help-card-title {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--teal);
margin-bottom: 6px;
}
.lp-help-card p {
font-size: 12px;
color: var(--muted-light, #8090b0);
line-height: 1.6;
margin: 0;
}
/* ── Weather Page ─────────────────────────────────────────────────────────────── */
/* Section headers */
.wx-section-hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0 8px;
margin: 24px 0 0;
border-bottom: 2px solid var(--blue-bright);
}
.wx-section-icon { font-size: 18px; }
.wx-section-title { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--fg); font-weight: 600; flex: 1; }
.wx-section-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0.6; }
/* Stats row (4 equal panels) */
.wx-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.wx-stat-panel { min-width: 0; }
.wx-stat-body { padding: 12px 16px 16px; }
.wx-big-val {
font-family: var(--font-mono);
font-size: 32px;
font-weight: 700;
color: var(--fg);
line-height: 1;
margin-bottom: 4px;
}
.wx-big-lbl {
font-size: 12px;
color: var(--muted);
margin-bottom: 12px;
}
.wx-stat-sub {
font-size: 11px;
color: var(--muted);
opacity: 0.55;
line-height: 1.4;
margin-top: 8px;
}
/* Kp bar */
.wx-kp-bar {
display: flex;
gap: 2px;
margin: 8px 0 4px;
}
.wx-kp-seg {
flex: 1;
height: 8px;
background: var(--blue-border);
border-radius: 1px;
transition: background 0.3s;
}
/* Alert strips */
.wx-alert-strip {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
font-size: 13px;
border-left: 4px solid #f0a000;
background: rgba(240,160,0,0.08);
margin-bottom: 4px;
}
.wx-alert-strip--extreme,
.wx-alert-strip--severe {
border-color: #e00000;
background: rgba(224,0,0,0.08);
}
.wx-alert-strip-icon { font-size: 16px; flex-shrink: 0; }
/* Alert lists */
.wx-alerts-list { display: flex; flex-direction: column; }
.wx-alert-item {
padding: 12px 20px;
border-bottom: 1px solid rgba(255,255,255,0.05);
border-left: 3px solid var(--blue-border);
}
.wx-alert-item--space { border-left-color: #f0a000; }
.wx-alert-item--extreme { border-left-color: #e00000; }
.wx-alert-item--severe { border-left-color: #e00000; }
.wx-alert-item--moderate{ border-left-color: #f0a000; }
.wx-alert-item--minor { border-left-color: #ffd700; }
.wx-alert-item--unknown { border-left-color: var(--muted); }
.wx-alert-badge {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 1px 6px;
display: inline-block;
margin-bottom: 4px;
}
.wx-alert-badge--extreme,.wx-alert-badge--severe { background: rgba(224,0,0,0.15); color: #e04040; }
.wx-alert-badge--moderate { background: rgba(240,160,0,0.15); color: #f0a000; }
.wx-alert-badge--minor { background: rgba(255,215,0,0.15); color: #ffd700; }
.wx-alert-title { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.wx-alert-body { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 4px; }
.wx-alert-time { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0.6; }
/* Solar imagery gallery */
.wx-solar-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
padding: 16px 20px;
}
.wx-solar-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
cursor: pointer;
min-width: 0;
}
.wx-solar-img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 6px;
object-fit: cover;
border: 2px solid var(--blue-border);
display: block;
transition: border-color 0.2s;
}
.wx-solar-card:hover .wx-solar-img { border-color: var(--teal); }
.wx-solar-label { font-family: var(--font-mono); font-size: 11px; color: var(--teal); text-align: center; }
.wx-solar-desc { font-size: 11px; color: var(--muted); opacity: 0.6; text-align: center; max-width: 100%; line-height: 1.3; }
.wx-solar-credit { padding: 6px 20px 12px; font-size: 11px; color: var(--muted); opacity: 0.5; }
.wx-solar-credit a { color: inherit; }
/* NOAA Scales */
.wx-scales-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.wx-scale-block { padding: 16px 20px; border-right: 1px solid var(--blue-border); }
.wx-scale-block:last-child { border-right: none; }
.wx-scale-hdr { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); margin-bottom: 8px; }
.wx-scale-levels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.wx-scale-level { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 2px; color: #000; }
.wx-scale-impact { font-size: 12px; color: var(--muted); line-height: 1.4; }
/* 7-day forecast strip */
.wx-forecast-strip {
display: flex;
overflow-x: auto;
gap: 0;
padding: 8px 0 12px;
-webkit-overflow-scrolling: touch;
}
.wx-fc-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 14px;
border-right: 1px solid var(--blue-border);
min-width: 90px;
text-align: center;
flex-shrink: 0;
}
.wx-fc-card:hover { background: rgba(255,255,255,0.02); }
.wx-fc-name { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.wx-fc-icon { width: 40px; height: 40px; margin: 4px 0; }
.wx-fc-temp { font-size: 18px; font-weight: 700; color: var(--fg); font-family: var(--font-mono); }
.wx-fc-desc { font-size: 11px; color: var(--muted); line-height: 1.3; margin: 3px 0; }
.wx-fc-wind { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0.6; }
/* Map controls */
.wx-map-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
padding: 10px 20px;
border-bottom: 1px solid var(--blue-border);
background: rgba(0,0,0,0.15);
}
.wx-map-layer-btns { display: flex; align-items: center; gap: 4px; }
/* SPC legend */
.wx-spc-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 8px 20px;
border-top: 1px solid var(--blue-border);
}
.wx-spc-swatch { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 2px; }
.wx-spc-src { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0.5; margin-left: auto; }
.wx-spc-src a { color: inherit; }
/* Responsive */
@media (max-width: 900px) {
.wx-stats-row { grid-template-columns: repeat(2,1fr); }
.wx-scales-grid { grid-template-columns: 1fr; }
.wx-scale-block { border-right: none; border-bottom: 1px solid var(--blue-border); }
}
@media (max-width: 600px) {
.wx-stats-row { grid-template-columns: 1fr; }
.wx-solar-gallery { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
}
/* Stat panel header info tooltip */
.wx-tip-icon {
font-size: 11px;
opacity: 0.5;
cursor: help;
margin-left: 3px;
}
.toolbox-panel-hdr[data-tip] { cursor: default; }
.wx-stat-tooltip {
position: absolute;
z-index: 9999;
background: #0a1020;
border: 1px solid var(--teal);
color: var(--fg);
font-size: 12px;
line-height: 1.55;
padding: 10px 14px;
max-width: 320px;
pointer-events: none;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
/* Solar image hover preview */
.wx-solar-card { cursor: crosshair; }
.wx-solar-card a { pointer-events: none; } /* disable click */
.wx-solar-preview {
position: absolute;
z-index: 9999;
pointer-events: none;
border: 2px solid var(--teal);
background: #060c18;
box-shadow: 0 8px 30px rgba(0,0,0,0.7);
}
.wx-solar-preview img {
display: block;
width: 360px;
height: 360px;
object-fit: cover;
}
.wx-solar-preview-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--teal);
text-align: center;
padding: 5px 10px;
background: rgba(0,0,0,0.4);
}
/* Alert expandable */
.wx-alert-summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 10px 20px;
gap: 10px;
transition: background 0.1s;
}
.wx-alert-summary:hover { background: rgba(255,255,255,0.03); }
.wx-alert-chevron { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.wx-alert-detail { padding: 0 20px 12px; border-top: 1px solid rgba(255,255,255,0.05); }
.wx-alert-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.wx-alert-body { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 8px; white-space: pre-wrap; }
.wx-alert-time { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0.6; margin-top: 6px; }
/* 7-day forecast grid */
.wx-forecast-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-top: 1px solid var(--blue-border);
}
.wx-fc-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 10px 18px;
border-right: 1px solid var(--blue-border);
text-align: center;
gap: 4px;
transition: background 0.1s;
}
.wx-fc-card:last-child { border-right: none; }
.wx-fc-card:hover { background: rgba(255,255,255,0.02); }
.wx-fc-dow { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.06em; }
.wx-fc-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0.6; }
.wx-fc-emoji { font-size: 38px; line-height: 1.1; margin: 4px 0; }
.wx-fc-temps { display: flex; align-items: baseline; gap: 4px; margin: 2px 0; }
.wx-fc-hi { font-size: 18px; font-weight: 700; color: var(--fg); font-family: var(--font-mono); }
.wx-fc-lo { font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
.wx-fc-desc { font-size: 11px; color: var(--muted); line-height: 1.3; }
.wx-fc-wind { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0.55; margin-top: 3px; }
/* Map controls redesign */
.wx-map-controls {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 14px 24px;
padding: 12px 20px;
border-bottom: 1px solid var(--blue-border);
background: rgba(0,0,0,0.15);
}
.wx-ctrl-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.wx-ctrl-check {
display: flex;
align-items: center;
gap: 7px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg);
cursor: pointer;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.wx-ctrl-check input[type=checkbox] {
accent-color: var(--teal);
width: 14px; height: 14px;
cursor: pointer;
}
.wx-ctrl-sub {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding-left: 21px;
}
.wx-ctrl-sep { display: inline-block; width: 8px; }
.wx-ctrl-group-hdr {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
opacity: .8;
}
.wx-ctrl-sub--stacked {
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding-left: 0;
}
@media (max-width: 900px) {
.wx-forecast-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
.wx-forecast-grid { grid-template-columns: repeat(2, 1fr); }
.wx-solar-preview { display: none; }
}
/* ── Weather: Imaging Outlook panel ─────────────────────────────────────────── */
.wx-io-panel .toolbox-panel-hdr { flex-wrap: wrap; }
/* Body: 3-column grid (left verdict | middle badges | right gear/target) */
.wx-io-body {
display: grid;
grid-template-columns: 200px 1fr 220px;
gap: 0;
border-top: 1px solid var(--blue-border);
min-height: 130px;
}
@media (max-width: 900px) { .wx-io-body { grid-template-columns: 1fr; } }
/* Left: verdict + guidance */
.wx-io-left {
display: flex;
flex-direction: column;
justify-content: center;
padding: 14px 16px;
border-right: 1px solid var(--blue-border);
gap: 6px;
}
.wx-io-verdict-wrap { }
/* The verdict value — populated by JS which adds wx-io--* class */
#wx-io-verdict {
font-family: var(--font-orb);
font-size: 20px;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.1;
}
.wx-io--excellent,#wx-io-verdict.wx-io--excellent { color: #3dca8a; }
.wx-io--good, #wx-io-verdict.wx-io--good { color: #70d4a0; }
.wx-io--marginal, #wx-io-verdict.wx-io--marginal { color: #e6b432; }
.wx-io--poor, #wx-io-verdict.wx-io--poor { color: #e08040; }
.wx-io--dnsu, #wx-io-verdict.wx-io--dnsu { color: #cc3333; }
.wx-io-guidance {
font-size: 12px;
color: var(--muted-light, #8090b0);
line-height: 1.5;
margin: 0;
}
.wx-io-window-row {
display: flex;
align-items: baseline;
gap: 6px;
}
.wx-io-window-lbl {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
}
.wx-io-window {
font-family: var(--font-mono);
font-size: 11px;
color: var(--teal);
}
/* Middle: condition badges grid */
.wx-io-badges {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-right: 1px solid var(--blue-border);
}
@media (max-width: 700px) { .wx-io-badges { grid-template-columns: repeat(2, 1fr); } }
.wx-io-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 10px 8px;
border-bottom: 1px solid var(--blue-border);
border-right: 1px solid rgba(0,51,255,.08);
text-align: center;
}
.wx-io-badge:nth-child(4n) { border-right: none; }
.wx-io-badge:nth-child(n+5) { border-bottom: none; }
/* PHP uses wx-io-badge-lbl / wx-io-badge-val; CSS accepts both naming conventions */
.wx-io-badge-lbl, .wx-io-b-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
}
.wx-io-badge-val, .wx-io-b-val {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
}
/* Badge severity colors — used on wx-io-badge-val and other value spans */
.wx-b--good { color: #3dca8a; }
.wx-b--ok { color: #70d4a0; }
.wx-b--info { color: #50b0d0; }
.wx-b--caution { color: #e6b432; }
.wx-b--warn { color: #e08040; }
.wx-b--danger { color: #cc3333; }
.wx-b--aurora { color: #c080ff; }
/* Right: gear + target */
.wx-io-right {
display: flex;
flex-direction: column;
}
.wx-io-gear-section, #wx-io-gear {
padding: 10px 14px;
border-bottom: 1px solid var(--blue-border);
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.wx-io-target-section {
padding: 10px 14px;
}
.wx-io-right-hdr {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
margin-bottom: 5px;
}
.wx-io-gear-text { font-size: 12px; color: var(--muted-light, #8090b0); margin: 0; }
.wx-io-gear-ok {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #3dca8a;
}
.wx-io-gear-ok-icon { font-size: 16px; }
.wx-io-risk-item {
font-family: var(--font-mono);
font-size: 12px;
padding: 3px 6px;
border-radius: 2px;
}
.wx-gr--danger { background: rgba(200,40,40,.15); color: #e04040; border-left: 2px solid #e04040; }
.wx-gr--warn { background: rgba(220,120,40,.12); color: #e08040; border-left: 2px solid #e08040; }
.wx-gr--caution { background: rgba(220,180,40,.1); color: #e6b432; border-left: 2px solid #e6b432; }
#wx-io-target {
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
}
.wx-io-target-icon { font-size: 18px; }
.wx-io-target-val {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
}
/* ── Weather: Space Weather Impact panel ─────────────────────────────────── */
/* Space Weather Impact banner */
.wx-swi-banner {
padding: 7px 18px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .06em;
border-bottom: 1px solid var(--blue-border);
color: var(--muted);
}
.wx-swi-banner--storm { color: #e04040; background: rgba(224,64,64,.07); }
.wx-swi-banner--active { color: #e6b432; background: rgba(230,180,50,.06); }
.wx-swi-banner--post { color: #a060e0; background: rgba(160,96,224,.06); }
.wx-swi-banner--unsettled { color: var(--muted-light); }
.wx-swi-panel { }
.wx-swi-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-top: 1px solid var(--blue-border);
}
@media (max-width: 1100px) { .wx-swi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .wx-swi-grid { grid-template-columns: repeat(2, 1fr); } }
.wx-swi-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 11px 13px;
border-right: 1px solid var(--blue-border);
border-bottom: 1px solid var(--blue-border);
}
/* Remove bottom border on last row */
@media (min-width: 1101px) {
.wx-swi-item:nth-child(n+1) { border-bottom: none; }
}
@media (min-width: 701px) and (max-width: 1100px) {
.wx-swi-item:nth-child(n+5) { border-bottom: none; }
}
.wx-swi-item:last-child { border-right: none; }
.wx-swi-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
}
.wx-swi-val {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
line-height: 1.3;
}
.wx-swi-detail {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
opacity: .8;
line-height: 1.3;
}
.wx-swi--aurora { color: #c080ff; }
.wx-swi--danger { color: #e04040; }
.wx-swi--warn { color: #e08040; }
.wx-swi--caution { color: #e6b432; }
.wx-swi--ok { color: #70d4a0; }
.wx-swi--good { color: #3dca8a; }
/* Aurora hint on Kp panel */
.wx-aurora--active { color: #c080ff !important; }
.wx-aurora--possible { color: #a060e0 !important; }
/* ── Weather: Regions of Interest ───────────────────────────────────────── */
#wx-regions-roi {
padding: 6px 14px;
display: flex;
flex-wrap: wrap;
gap: 6px;
border-bottom: 1px solid var(--blue-border);
background: rgba(220,120,0,.06);
}
.wx-roi-badge {
font-family: var(--font-mono);
font-size: 11px;
background: rgba(220,120,0,.12);
border: 1px solid rgba(220,120,0,.3);
color: #e09000;
padding: 2px 8px;
border-radius: 2px;
}
.wx-roi-dot { color: #e09000; font-size: 10px; }
.wx-region-row--hot td { background: rgba(220,120,0,.04); }
.wx-mag-badge { font-family: var(--font-mono); font-size: 11px; }
/* ── Weather: Astrophotography Conditions panel ─────────────���────────────── */
.wx-ac-score--excellent { color: #3dca8a !important; }
.wx-ac-score--good { color: #70d4a0 !important; }
.wx-ac-score--marginal { color: #e6b432 !important; }
.wx-ac-score--poor { color: #e08040 !important; }
.wx-ac-score--dnsu { color: #cc3333 !important; }
/* ── Weather: Gear Safety ────────────────────────────────────────────────── */
.wx-gs-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
font-size: 12px;
line-height: 1.4;
border-bottom: 1px solid var(--blue-border);
}
.wx-gs-icon { font-size: 16px; flex-shrink: 0; }
.wx-gs--safe { background: rgba(61,202,138,.06); color: #3dca8a; }
.wx-gs--monitor { background: rgba(80,160,200,.06); color: #50b0d0; }
.wx-gs--caution { background: rgba(230,180,50,.07); color: #e6b432; }
.wx-gs--warn { background: rgba(220,120,40,.08); color: #e08040; }
.wx-gs--dnsu { background: rgba(200,40,40,.1); color: #e04040; }
/* ── Weather: Alert grouping ─────────────────────────────────────────────── */
.wx-alert-group { border-bottom: 1px solid rgba(255,255,255,.03); }
.wx-alert-group:last-child { border-bottom: none; }
.wx-alert-group-hdr {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--teal);
padding: 8px 20px 4px;
border-top: 1px solid rgba(0,200,200,.1);
}
.wx-alert-group:first-child .wx-alert-group-hdr { border-top: none; }
.wx-no-alerts {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
font-size: 13px;
color: var(--muted);
}
/* ── Weather: Hourly Timeline panel ──────────────────────────────────────── */
.wx-hourly-panel { }
.wx-hl-row {
display: grid;
grid-template-columns: 80px 50px 1fr 50px 130px;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-bottom: 1px solid rgba(255,255,255,.03);
font-family: var(--font-mono);
font-size: 12px;
}
.wx-hl-header {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
background: rgba(0,0,0,.15);
padding: 5px 14px;
border-bottom: 1px solid var(--blue-border);
}
.wx-hl-time { color: var(--muted-light, #8090b0); }
.wx-hl-clouds { text-align: right; color: var(--text); }
.wx-hl-bar {
height: 6px;
background: rgba(255,255,255,.06);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.wx-hl-bar-fill {
height: 100%;
border-radius: 3px;
transition: width .3s;
}
.wx-hl-bar-fill--good { background: #3dca8a; }
.wx-hl-bar-fill--ok { background: #e6b432; }
.wx-hl-bar-fill--bad { background: #cc4444; }
.wx-hl-temp { text-align: center; color: var(--muted-light, #8090b0); }
.wx-hl-quality { font-weight: 600; }
.wx-hourly-fallback {
padding: 12px 14px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
/* ── Weather: Solar modal ─────────────────────────────────────────────────── */
/* IMPORTANT: [hidden] must be display:none — CSS display values override the
HTML hidden attribute, so we must explicitly re-apply it here. */
.wx-solar-modal[hidden],
.wx-solar-modal-backdrop[hidden] { display: none !important; }
.wx-solar-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.82);
z-index: 8000;
}
.wx-solar-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 8001;
background: #060c18;
border: 1px solid var(--teal);
box-shadow: 0 8px 40px rgba(0,0,0,.8);
display: flex;
flex-direction: column;
max-width: 600px;
width: 92vw;
max-height: 90vh;
overflow: hidden;
}
.wx-solar-modal img {
width: 100%;
display: block;
object-fit: contain;
background: #000;
max-height: 500px;
}
.wx-solar-modal-info {
padding: 10px 16px 14px;
border-top: 1px solid var(--blue-border);
}
.wx-solar-modal-title {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--teal);
margin-bottom: 3px;
}
.wx-solar-modal-desc {
font-size: 12px;
color: var(--muted-light, #8090b0);
margin-bottom: 3px;
}
.wx-solar-modal-use {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.wx-solar-modal-close {
position: absolute;
top: 10px;
right: 12px;
background: rgba(0,0,0,.6);
border: 1px solid rgba(255,255,255,.2);
color: #fff;
font-size: 16px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 2px;
z-index: 1;
}
.wx-solar-broken {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
background: rgba(255,255,255,.02);
}
.wx-solar-timestamp {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: .6;
padding: 2px 0;
text-align: center;
}
.wx-solar-card { cursor: pointer; }
/* ── Weather: Radar enhancements ─────────────────────────────────────────── */
.wx-fullscreen-btn {
font-size: 16px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(0,51,255,.2);
color: var(--muted);
padding: 2px 7px;
cursor: pointer;
margin-left: auto;
transition: all .15s;
line-height: 1.2;
}
.wx-fullscreen-btn:hover { color: var(--text); background: rgba(255,255,255,.08); }
.wx-map-fullscreen {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 7000 !important;
}
.wx-radar-timestamp {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
opacity: .65;
padding: 4px 20px;
border-bottom: 1px solid rgba(0,51,255,.08);
background: rgba(0,0,0,.08);
}
.wx-spc-summary {
font-family: var(--font-mono);
font-size: 11px;
color: #e08040;
padding: 5px 16px 0;
}
/* ── Target Planning Page ─────────────────────────────────────────────────────── */
/* Top row: score + info */
.plan-top-row { display: grid; grid-template-columns: 340px 1fr; gap: var(--gap); }
/* Session score panel */
.plan-score-body { display: flex; align-items: flex-start; gap: 20px; padding: 16px 20px 20px; }
.plan-score-gauge {
text-align: center;
flex-shrink: 0;
width: 90px;
}
.plan-score-num {
font-family: var(--font-mono);
font-size: 52px;
font-weight: 900;
line-height: 1;
letter-spacing: -2px;
}
.plan-score-label {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-top: 4px;
}
.plan-score-breakdown { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.plan-score-category { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.plan-score-category:last-of-type { border-bottom: none; padding-bottom: 0; }
.plan-score-row { display: flex; align-items: center; gap: 8px; }
.plan-score-key {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
min-width: 120px;
text-transform: uppercase;
letter-spacing: 0.06em;
display: flex;
align-items: center;
gap: 5px;
}
.plan-score-weight {
font-family: var(--font-mono);
font-size: 10px;
color: var(--teal);
opacity: 0.6;
letter-spacing: 0;
text-transform: none;
flex-shrink: 0;
}
.plan-score-bar-wrap { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.plan-score-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.plan-score-val { font-family: var(--font-mono); font-size: 11px; color: var(--muted); min-width: 80px; text-align: right; white-space: nowrap; }
.plan-score-sub { font-size: 11px; color: var(--muted); opacity: 0.55; padding-left: 0; line-height: 1.35; min-height: 13px; }
/* Weather strip */
.plan-wx-strip { display: flex; overflow-x: auto; padding: 8px 16px 12px; gap: 2px; }
.plan-wx-col { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; width: 32px; }
.plan-wx-cell { width: 28px; height: 20px; border-radius: 2px; }
.plan-wx-cell--sm { height: 10px; }
.plan-wx-time { font-family: var(--font-mono); font-size: 10px; color: var(--muted); opacity: 0.6; text-align: center; margin-top: 2px; }
/* Timeline */
.plan-timeline-wrap { padding: 10px 0 16px; overflow-x: auto; }
.plan-tl-header { position: relative; height: 20px; margin-left: 120px; margin-bottom: 4px; border-bottom: 1px solid var(--blue-border); }
.plan-tl-tick { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: 0.6; bottom: 2px; }
.plan-tl-rows { min-width: 800px; }
.plan-tl-row { display: flex; align-items: center; gap: 0; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.plan-tl-row--moon { opacity: 0.5; }
.plan-tl-label { width: 120px; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; padding: 0 10px 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-tl-track { flex: 1; height: 26px; position: relative; background: rgba(255,255,255,0.02); }
.plan-tl-bar {
position: absolute;
height: 100%;
border-radius: 2px;
display: flex;
align-items: center;
overflow: hidden;
transition: opacity 0.15s;
opacity: 0.85;
cursor: default;
min-width: 4px;
}
.plan-tl-bar:hover { opacity: 1; }
.plan-tl-bar-name { font-family: var(--font-mono); font-size: 11px; color: rgba(0,0,0,0.85); padding: 0 5px; white-space: nowrap; overflow: hidden; }
.plan-tl-bar--moon { background: rgba(200,190,140,0.3) !important; border: 1px solid rgba(200,190,140,0.4); font-family: var(--font-mono); font-size: 11px; color: #c8c08a; display: flex; align-items: center; padding-left: 5px; }
/* Weather rows inside timeline */
.plan-tl-row--wx { padding: 1px 0; border-bottom: none; }
.plan-tl-row--wx + .plan-tl-row--wx { border-top: none; }
.plan-tl-label--wx { font-size: 10px; color: var(--muted); opacity: 0.5; text-transform: uppercase; letter-spacing: 0.05em; }
.plan-tl-track--wx { height: 14px; }
.plan-wx-hour { position: absolute; height: 100%; border-radius: 0; }
.plan-tl-row--divider { height: 1px; padding: 0; background: var(--blue-border); border: none; opacity: 0.5; }
/* 30° altitude window backdrop bar */
.plan-tl-bar30 {
position: absolute;
height: 100%;
opacity: 0.25;
border-radius: 2px;
pointer-events: none;
z-index: 0;
}
.plan-tl-bar { z-index: 1; }
/* Session quality context */
.plan-score-context { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 4px; }
.plan-ctx-line { font-size: 12px; color: var(--muted); line-height: 1.4; }
/* ── Tonight's Window — redesigned panel ─────────────────────────────────── */
.plan-win-body { padding: 0; }
/* Summary strip */
.plan-win-summary {
padding: 12px 20px 10px;
border-bottom: 1px solid var(--blue-border);
background: rgba(0,200,255,0.03);
}
.plan-win-summary-top {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.plan-win-summary-range { font-family: var(--font-mono); font-size: 13px; color: var(--teal); font-weight: 600; }
.plan-win-summary-dur { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.plan-win-summary-verdict{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.plan-win-summary-rec { font-size: 12px; color: var(--muted); line-height: 1.5; font-style: italic; }
/* Night timeline */
.plan-win-tl { padding: 10px 20px 6px; }
.plan-ntl-track {
position: relative;
height: 10px;
background: rgba(255,255,255,0.06);
border-radius: 2px;
overflow: hidden;
margin: 14px 0 4px;
}
.plan-ntl-track span { position: absolute; top: 0; bottom: 0; }
.plan-ntl-day { background: rgba(255,200,100,0.18); }
.plan-ntl-civ { background: rgba(255,160,60,0.20); }
.plan-ntl-naut { background: rgba(80,100,180,0.22); }
.plan-ntl-dark { background: rgba(5,15,50,0.80); border-left: 1px solid rgba(0,80,200,0.4); border-right: 1px solid rgba(0,80,200,0.4); }
.plan-ntl-best { background: rgba(0,200,255,0.22); z-index: 2; }
.plan-ntl-moon { background: rgba(255,240,120,0.16); z-index: 1; top: 1px; bottom: 1px; }
.plan-ntl-tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(255,255,255,0.25); z-index: 3; }
.plan-ntl-lblrow {
position: relative;
height: 16px;
}
.plan-ntl-lblrow--a { height: 16px; margin-bottom: 0; }
.plan-ntl-lbl {
position: absolute;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 7.5px;
color: var(--muted);
opacity: 0.55;
white-space: nowrap;
top: 1px;
}
.plan-ntl-lblrow--a .plan-ntl-lbl { top: auto; bottom: 1px; }
/* Sections */
.plan-win-sections {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.plan-win-section {
padding: 10px 16px 10px 20px;
border-right: 1px solid var(--blue-border);
border-bottom: 1px solid var(--blue-border);
}
.plan-win-section:nth-child(even) { border-right: none; }
.plan-win-section:nth-last-child(-n+2) { border-bottom: none; }
.plan-win-shdr {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--teal);
opacity: 0.75;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 5px;
}
.plan-win-row {
display: flex;
align-items: baseline;
gap: 6px;
padding: 2px 0;
font-size: 12px;
line-height: 1.35;
min-height: 18px;
}
.plan-win-row--hl { background: rgba(0,200,255,0.04); border-left: 2px solid var(--teal); padding-left: 4px; margin-left: -4px; border-radius: 1px; }
.plan-win-key {
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--muted);
opacity: 0.65;
flex-shrink: 0;
min-width: 110px;
}
.plan-win-val { font-size: 12px; color: var(--fg); flex: 1; line-height: 1.35; }
.plan-win-badge {
font-family: var(--font-mono);
font-size: 8.5px;
padding: 1px 5px;
border-radius: 2px;
white-space: nowrap;
flex-shrink: 0;
}
.plan-win-note { font-size: 11px; color: var(--muted); opacity: 0.7; }
@media (max-width: 680px) {
.plan-win-sections { grid-template-columns: 1fr; }
.plan-win-section { border-right: none; border-bottom: 1px solid var(--blue-border); }
.plan-win-section:last-child { border-bottom: none; }
.plan-win-key { min-width: 90px; }
}
/* Tonight's window twilight rows (legacy — keep for fallback) */
.plan-twilight-row { opacity: 0.65; }
.plan-twilight--civil .toolbox-data-key { color: #e8922e; }
.plan-twilight--nautical .toolbox-data-key { color: #2a80dc; }
.plan-twilight--astro .toolbox-data-key { color: var(--muted); }
.plan-win-highlight { background: rgba(0,200,255,0.04); border-left: 2px solid var(--teal); padding-left: 4px; }
.plan-win-highlight .toolbox-data-key { color: var(--teal); }
/* Target table inline score */
.plan-score-inline { display: flex; align-items: center; gap: 6px; min-width: 80px; }
.plan-score-inline-bar { height: 4px; border-radius: 2px; flex-shrink: 0; }
.plan-score-inline span { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.plan-common-name { display: block; font-size: 11px; color: var(--muted); opacity: 0.65; }
/* Clickable target rows */
.plan-target-row { cursor: pointer; }
.plan-target-row:hover td { background: rgba(255,255,255,0.03); }
.plan-row-caret { font-size: 11px; color: var(--muted); margin-right: 5px; display: inline-block; width: 8px; }
/* Expanded detail row */
.plan-detail-row > td { padding: 0 !important; }
.plan-detail-panel {
padding: 12px 16px 14px 20px;
margin: 0;
background: rgba(0,0,0,0.25);
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
display: flex;
gap: 24px;
align-items: flex-start;
flex-wrap: wrap;
}
/* Mini timeline inside detail row */
.plan-mini-tl { flex: 1; min-width: 280px; }
.plan-mini-track {
position: relative;
height: 18px;
background: rgba(255,255,255,0.04);
border-radius: 3px;
overflow: hidden;
margin-bottom: 4px;
}
.plan-mini-bar { position: absolute; height: 100%; border-radius: 0; }
.plan-mini-bar--vis { opacity: 0.18; }
.plan-mini-bar--30 { opacity: 0.55; }
.plan-mini-transit {
position: absolute;
top: 0; bottom: 0;
width: 2px;
background: rgba(255,255,255,0.7);
transform: translateX(-50%);
}
.plan-mini-axis {
position: relative;
height: 14px;
}
.plan-mini-tick {
position: absolute;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
opacity: 0.5;
top: 1px;
white-space: nowrap;
}
.plan-mini-legend { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--muted); opacity: 0.6; }
.plan-mini-swatch { display: inline-block; width: 10px; height: 4px; border-radius: 1px; }
.plan-mini-swatch--vis { background: rgba(255,255,255,0.25); }
/* Metadata key/value grid */
.plan-detail-grid { display: flex; flex-wrap: wrap; gap: 6px 20px; align-content: flex-start; padding-top: 2px; }
.plan-detail-kv { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.plan-detail-k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); opacity: 0.6; }
.plan-detail-v { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
/* ── Tonight at a Glance card ──────────────────────────────────────────────── */
.plan-glance-panel { border-left: 3px solid var(--teal); }
.plan-glance {
display: grid;
grid-template-columns: 80px 1fr;
gap: 0;
padding: 14px 20px;
align-items: start;
}
.plan-glance-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-right: 16px;
border-right: 1px solid var(--blue-border);
padding-top: 2px;
}
.plan-glance-num {
font-family: var(--font-mono);
font-size: 38px;
font-weight: 900;
line-height: 1;
letter-spacing: -1px;
}
.plan-glance-verdict {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-top: 4px;
opacity: 0.8;
}
.plan-glance-body {
padding-left: 18px;
min-width: 0;
}
.plan-glance-facts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 24px;
margin-bottom: 10px;
}
.plan-glance-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-glance-k {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
opacity: 0.55;
}
.plan-glance-k--good { color: #22cc66; opacity: 0.9; }
.plan-glance-k--bad { color: #cc5050; opacity: 0.9; }
.plan-glance-v {
font-size: 12px;
color: var(--fg);
line-height: 1.4;
white-space: normal;
}
.plan-glance-v--good { color: #22cc66; }
.plan-glance-v--bad { color: #cc5050; }
.plan-glance-rec {
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.06);
font-size: 12px;
color: var(--muted);
font-style: italic;
line-height: 1.55;
}
@media (max-width: 640px) {
.plan-glance { grid-template-columns: 70px 1fr; }
.plan-glance-facts { grid-template-columns: 1fr; gap: 6px; }
}
.plan-sq-bars {
padding: 8px 20px 16px;
border-top: 1px solid var(--blue-border);
}
/* Filter tabs */
.plan-filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.plan-filter-btn {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 12px;
border: 1px solid var(--blue-border);
background: transparent;
color: var(--muted);
cursor: pointer;
transition: all 0.15s;
}
.plan-filter-btn:hover { border-color: var(--teal); color: var(--teal); }
.plan-filter-btn--active { border-color: var(--teal); color: var(--teal); background: rgba(0,200,255,0.06); }
/* Dark frame list */
.plan-darks-list { display: flex; flex-direction: column; gap: 0; }
.plan-dark-item { display: flex; align-items: flex-start; gap: 16px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.plan-dark-item:last-child { border-bottom: none; }
.plan-dark-time { font-family: var(--font-mono); font-size: 12px; font-weight: 600; flex-shrink: 0; min-width: 90px; display: flex; align-items: center; gap: 6px; }
.plan-dark-reason { font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) {
.plan-top-row { grid-template-columns: 1fr; }
.plan-score-body { flex-direction: column; align-items: center; }
.plan-score-gauge { width: auto; }
.plan-score-breakdown { width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ORBITAL INTERFERENCE PAGE (oi-)
═══════════════════════════════════════════════════════════════════════════ */
/* Controls panel */
.oi-controls-panel .toolbox-panel-hdr { margin-bottom: 0; }
.oi-controls-row {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
padding: 12px 20px 16px;
align-items: flex-end;
}
.oi-control-group { display: flex; flex-direction: column; gap: 4px; }
.oi-control-label {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .05em;
}
.oi-select {
background: var(--bg-panel);
color: var(--text);
border: 1px solid var(--blue-border);
border-radius: 4px;
padding: 5px 10px;
font-size: 13px;
font-family: inherit;
cursor: pointer;
min-width: 110px;
}
.oi-select:focus { outline: none; border-color: var(--teal); }
.oi-control-group--checkboxes {
flex-direction: row;
align-items: center;
gap: 12px;
padding-bottom: 2px;
}
.oi-check-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
cursor: pointer;
color: var(--text);
}
/* Summary cards */
.oi-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.oi-card {
background: var(--bg-panel);
border: 1px solid var(--blue-border);
border-radius: 6px;
padding: 12px 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
.oi-card-icon { font-size: 18px; line-height: 1; }
.oi-card-val { font-size: 22px; font-weight: 700; color: var(--teal); line-height: 1; }
.oi-card-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.oi-card--aircraft .oi-card-icon { color: #f0b030; }
.oi-card--satellite .oi-card-icon { color: #00c8ff; }
.oi-card--station .oi-card-icon { color: #ffffff; }
.oi-card--balloon .oi-card-icon { color: #ff8800; }
.oi-card--risk .oi-card-val { font-size: 16px; }
/* Sky dome */
.oi-dome-panel { min-width: 0; }
.oi-dome-wrap {
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.oi-dome-wrap .oi-dome-legend,
.oi-dome-wrap .oi-scale-key,
.oi-dome-wrap .oi-dome-controls {
padding: 0 16px;
}
.oi-dome-svg-wrap {
position: relative;
display: block;
line-height: 0;
}
.oi-dome-tooltip {
position: absolute;
z-index: 10;
pointer-events: auto;
background: rgba(6,14,28,.95);
border: 1px solid rgba(0,200,255,.3);
border-radius: 5px;
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 144px;
max-width: 220px;
box-shadow: 0 4px 18px rgba(0,0,0,.65);
font-family: var(--font-mono);
}
.oi-dome-tooltip[hidden] { display: none; }
.oi-dtip-type {
font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; line-height: 1.3;
}
.oi-dtip-name {
font-size: 12px; font-weight: 600; color: #d0e8ff; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oi-dtip-coords {
font-size: 11px; color: rgba(180,210,255,.6); line-height: 1.3;
}
.oi-dtip-link {
font-size: 10px; color: var(--teal); text-decoration: none; margin-top: 2px;
letter-spacing: .04em; line-height: 1.3;
}
.oi-dtip-link:hover { text-decoration: underline; }
.oi-dome-svg {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 50%;
background: #040810;
border: 1px solid var(--blue-border);
display: block;
overflow: visible;
position: relative;
z-index: 2;
}
.oi-dome-object { transition: opacity .15s; }
.oi-scale-key {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 8px;
font-size: 10px;
color: var(--muted);
opacity: 0.7;
padding-top: 4px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.oi-scale-key-label { font-size: 10px; color: var(--muted); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; }
.oi-scale-key-item { display: flex; align-items: center; gap: 3px; color: var(--muted); }
.oi-scale-key-sep { color: var(--muted); opacity: 0.4; font-size: 9px; }
.oi-scale-key-divider { color: var(--muted); opacity: 0.3; margin: 0 4px; }
.oi-dome-controls {
display: flex;
justify-content: center;
gap: 8px;
padding-top: 4px;
}
.oi-dome-ctrl-btn {
font-size: 10px;
padding: 3px 10px;
border-radius: 3px;
border: 1px solid var(--blue-border);
background: transparent;
color: var(--muted);
cursor: pointer;
letter-spacing: 0.04em;
transition: color .15s, border-color .15s, background .15s;
}
.oi-dome-ctrl-btn:hover { color: var(--text); border-color: var(--accent); }
.oi-dome-ctrl-btn--active { color: var(--accent); border-color: var(--accent); background: rgba(0,200,255,0.07); }
.oi-dome-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 14px;
font-size: 12px;
}
.oi-legend-item { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.oi-legend-aircraft { color: #f0b030; }
.oi-legend-satellite { color: #00c8ff; }
.oi-legend-station { color: #ffffff; }
.oi-legend-balloon { color: #ff8800; }
.oi-legend-debris { color: #666; }
/* Object table */
.oi-main-row { align-items: start; }
.oi-table-panel { min-width: 0; }
.oi-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 10px 16px 0;
}
.oi-filter-btn {
background: transparent;
border: 1px solid var(--blue-border);
color: var(--muted);
border-radius: 4px;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
transition: background .15s, color .15s;
}
.oi-filter-btn:hover { background: var(--bg-hover); color: var(--text); }
.oi-filter-btn--active { background: var(--teal); border-color: var(--teal); color: #000; font-weight: 600; }
.oi-table-wrap { max-height: 600px; overflow-y: auto; }
.oi-name-cell { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-type-badge { font-size: 12px; white-space: nowrap; }
.oi-obj-row--faded { opacity: .45; }
.oi-obj-row--stale { opacity: .6; }
/* Below-mask sub-panel */
.oi-below-mask-panel {
border-top: 1px solid rgba(0,200,255,.12);
}
.oi-below-mask-hdr {
display: flex; align-items: center; gap: 8px;
padding: 8px 16px; cursor: pointer; user-select: none;
background: rgba(0,200,255,.03);
}
.oi-below-mask-hdr:hover { background: rgba(0,200,255,.06); }
.oi-below-mask-icon {
font-size: 13px; color: rgba(0,200,255,.4);
}
.oi-below-mask-title {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
text-transform: uppercase; color: rgba(255,255,255,.4);
}
.oi-below-mask-panel.sp-card--collapsed > #oi-below-mask-wrap { display: none; }
.oi-obj-row--stale td { color: #888 !important; }
.oi-stale-tag {
font-size: 10px; font-family: var(--font-mono); letter-spacing: .05em;
color: #d4a800; border: 1px solid rgba(212,168,0,.35);
padding: 1px 5px; border-radius: 2px;
}
/* Risk badges */
.oi-risk-badge {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
}
.oi-risk-critical { background: #7a0000; color: #ff8888; }
.oi-risk-high { background: #5a2800; color: #ffaa44; }
.oi-risk-medium { background: #3a3a00; color: #dddd44; }
.oi-risk-low { background: #001a00; color: #44aa44; }
.oi-risk-none { background: var(--bg-panel); color: var(--muted); }
/* Source health */
.oi-health-grid { padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.oi-health-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.oi-health-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.oi-health-dot--ok { background: #22cc66; }
.oi-health-dot--err { background: #cc3030; }
.oi-health-name { color: var(--text); font-weight: 500; min-width: 200px; }
.oi-health-detail { color: var(--muted); font-size: 12px; }
/* Disclaimer */
.oi-disclaimer-panel .toolbox-panel-hdr { margin-bottom: 0; }
.oi-disclaimer-list {
padding: 10px 20px 16px 36px;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.oi-disclaimer-list li { font-size: 12px; color: var(--muted); line-height: 1.5; }
.oi-disclaimer-list strong { color: var(--text); }
/* Responsive */
@media (max-width: 700px) {
.oi-summary-grid { grid-template-columns: repeat(4, 1fr); }
.oi-main-row { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
.oi-summary-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Orbital Interference — modal, selection, shapes ────────────────────── */
/* Detail modal */
.oi-modal {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.65);
backdrop-filter: blur(3px);
}
.oi-modal[hidden] { display: none; }
.oi-modal-inner {
position: relative;
background: var(--bg-panel);
border: 1px solid var(--blue-border);
border-radius: 8px;
width: min(420px, 92vw);
max-height: 80vh;
overflow-y: auto;
padding: 20px 20px 16px;
box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.oi-modal-close {
position: absolute;
top: 10px;
right: 12px;
background: transparent;
border: none;
color: var(--muted);
font-size: 16px;
cursor: pointer;
line-height: 1;
padding: 2px 6px;
}
.oi-modal-close:hover { color: var(--text); }
.oi-modal-header {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 4px;
}
.oi-modal-name {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--blue-border);
}
.oi-modal-data { display: flex; flex-direction: column; gap: 6px; }
.oi-modal-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.oi-modal-key { color: var(--muted); flex-shrink: 0; }
.oi-modal-val { color: var(--text); text-align: right; font-family: var(--font-mono, monospace); word-break: break-all; }
/* Sky dome selected ring animation */
@keyframes oi-dome-ping {
0% { opacity: 1; r: 10; }
100% { opacity: 0; r: 18; }
}
.oi-dome-sel-ring {
animation: oi-dome-ping 1.2s ease-out infinite;
pointer-events: none;
}
/* Table row selected */
.oi-table-row-selected td {
background: rgba(0,140,255,.12) !important;
box-shadow: inset 2px 0 0 var(--teal);
}
/* ── Orbital Interference — inline detail drawer ────────────────────────── */
.oi-drawer-tr td { padding: 0; border-top: none !important; }
.oi-drawer-content {
background: #080f1e;
border-top: 1px solid var(--blue-border);
border-bottom: 1px solid var(--blue-border);
padding: 12px 16px 14px;
animation: oi-drawer-open .15s ease-out;
}
@keyframes oi-drawer-open {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.oi-drawer-header {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: 10px;
}
.oi-drawer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 4px 20px;
}
.oi-drawer-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.oi-drawer-key { color: var(--muted); flex-shrink: 0; }
.oi-drawer-val { color: var(--text); text-align: right; font-family: var(--font-mono, monospace); }
/* Legend SVG icon */
.oi-legend-svg {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 1px;
overflow: visible;
}
.oi-legend-rocket { color: #888; }
.oi-legend-starlink { color: #4488aa; }
/* Legend plane icon (SVG now used instead of text — kept for fallback) */
.oi-legend-plane { color: #f0b030; font-style: normal; }
.oi-legend-station { color: #ffffff; }
/* ── Full-width dome ──────────────────────────────────────────────── */
.oi-dome-panel { min-width: 0; }
.oi-dome-panel .oi-dome-svg { max-width: 100%; }
.oi-dome-panel .oi-dome-wrap { flex-direction: column; }
.oi-dome-panel .oi-dome-legend { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 6px 16px; }
/* ── Table details button + magnitude column ──────────────────────── */
.oi-details-col { width: 36px; }
.oi-details-cell { text-align: center; padding: 2px 6px !important; }
.oi-details-btn {
background: transparent;
border: 1px solid rgba(0,51,255,.18);
color: var(--muted);
cursor: pointer;
font-size: 13px;
padding: 1px 7px;
border-radius: 3px;
line-height: 1.5;
transition: background .15s, color .15s, border-color .15s;
}
.oi-details-btn:hover {
background: rgba(0,100,255,.15);
color: var(--teal);
border-color: var(--teal);
}
.oi-profile-link {
display: inline-block;
font-size: 13px;
padding: 1px 7px;
border-radius: 3px;
border: 1px solid rgba(0,51,255,.18);
color: var(--teal);
text-decoration: none;
line-height: 1.5;
transition: background .15s, border-color .15s;
}
.oi-profile-link:hover {
background: rgba(0,180,200,.15);
border-color: var(--teal);
text-decoration: none;
}
.oi-mag-cell { font-family: var(--font-mono); color: var(--muted); }
.oi-type-icon-svg { flex-shrink: 0; overflow: visible; }
/* ── "No longer visible" notice ──────────────────────────────────── */
.oi-sel-notice {
background: rgba(240,120,30,.1);
border: 1px solid rgba(240,120,30,.3);
color: #f0a060;
font-family: var(--font-mono);
font-size: 12px;
padding: 8px 16px;
margin-bottom: 12px;
border-radius: 4px;
}
.oi-sel-notice[hidden] { display: none; }
/* ── Lightbox modal ───────────────────────────────────────────────── */
.oi-detail-modal {
position: fixed;
inset: 0;
z-index: 9100;
display: flex;
align-items: center;
justify-content: center;
}
.oi-detail-modal[hidden] { display: none !important; }
.oi-detail-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.72);
backdrop-filter: blur(3px);
}
.oi-detail-modal-inner {
position: relative;
z-index: 1;
background: var(--bg-panel, #0a1020);
border: 1px solid var(--blue-border, rgba(0,51,255,.28));
border-radius: 6px;
width: min(660px, 96vw);
max-height: 88vh;
overflow-y: auto;
box-shadow: 0 12px 48px rgba(0,0,0,.65);
display: flex;
flex-direction: column;
}
.oi-detail-modal-hdr {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 14px 18px 12px;
border-bottom: 1px solid var(--blue-border);
position: sticky;
top: 0;
background: var(--bg-panel, #0a1020);
z-index: 1;
}
.oi-detail-modal-title {
font-size: 14px;
font-weight: 700;
color: #fff;
margin: 0;
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
line-height: 1.4;
}
.oi-modal-title-name {
color: var(--teal);
font-family: var(--font-mono);
font-size: 13px;
}
.oi-detail-modal-close {
background: transparent;
border: none;
color: var(--muted);
font-size: 16px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
flex-shrink: 0;
}
.oi-detail-modal-close:hover { color: #fff; }
.oi-detail-modal-body { padding: 16px 18px; flex: 1; }
.oi-detail-modal-footer {
padding: 10px 18px 14px;
border-top: 1px solid var(--blue-border);
}
.oi-modal-copy-btn { font-size: 12px; padding: 5px 14px; }
/* Modal sections */
.oi-modal-section { margin-bottom: 16px; }
.oi-modal-section:last-of-type { margin-bottom: 0; }
.oi-modal-section-hdr {
font-family: var(--font-mono);
font-size: 11px;
color: var(--teal);
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(0,51,255,.12);
}
.oi-modal-data {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 20px;
}
.oi-modal-row {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 12px;
padding: 2px 0;
}
.oi-modal-key { color: var(--muted); flex-shrink: 0; }
.oi-modal-val { color: var(--text); text-align: right; font-family: var(--font-mono); word-break: break-all; }
/* Raw JSON collapsible */
.oi-modal-raw-details {
margin-top: 14px;
border: 1px solid rgba(0,51,255,.12);
border-radius: 4px;
}
.oi-modal-raw-summary {
padding: 7px 12px;
cursor: pointer;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: .08em;
user-select: none;
list-style: none;
}
.oi-modal-raw-summary:hover { color: var(--text); }
.oi-modal-raw-pre {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(160,200,220,.7);
background: rgba(0,0,0,.25);
padding: 10px 12px;
margin: 0;
overflow-x: auto;
max-height: 280px;
overflow-y: auto;
border-top: 1px solid rgba(0,51,255,.1);
white-space: pre;
}
@media (max-width: 600px) {
.oi-modal-data { grid-template-columns: 1fr; }
.oi-detail-modal-inner { max-height: 92vh; }
.oi-detail-modal-body { padding: 12px 14px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
MANMADE OBJECTS — full redesign (mm-)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Mode classes ─────────────────────────────────────────────────────────── */
html.mm-beginner .mm-expert-only { display: none !important; }
html.mm-expert .mm-beginner-only { display: none !important; }
/* Default: beginner */
html:not(.mm-expert) .mm-expert-only { display: none !important; }
/* ── Hero summary strip ───────────────────────────────────────────────────── */
.mm-summary-strip {
display: flex;
flex-wrap: wrap;
gap: 0;
background: var(--bg-panel);
border-bottom: 1px solid var(--blue-border);
border-top: 1px solid var(--blue-border);
}
.mm-summary-item {
flex: 1;
min-width: 130px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 10px 14px;
border-right: 1px solid var(--blue-border);
text-align: center;
}
.mm-summary-item:last-child { border-right: none; }
.mm-summary-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.mm-summary-val { font-size: 13px; color: var(--text); font-weight: 600; }
.mm-summary-big { font-size: 20px; font-weight: 700; color: var(--teal); line-height: 1; }
.mm-summary-iss { border-left: 2px solid var(--teal); }
.mm-summary-mode { gap: 6px; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: center; }
/* ── LIVE indicator ───────────────────────────────────────────────────────── */
.mm-live-indicator {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 700; letter-spacing: .06em;
color: #22cc66; text-transform: uppercase;
}
.mm-live-small { font-size: 11px; }
.mm-live-pulse {
width: 7px; height: 7px; border-radius: 50%; background: #22cc66;
animation: mm-pulse 1.4s ease-in-out infinite;
}
@keyframes mm-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,204,102,.4); }
50% { opacity: .8; box-shadow: 0 0 0 5px rgba(34,204,102,0); }
}
/* ── Mode toggle buttons ──────────────────────────────────────────────────── */
.mm-mode-btn {
background: transparent; border: 1px solid var(--blue-border);
color: var(--muted); border-radius: 3px; padding: 3px 10px;
font-size: 11px; cursor: pointer; transition: all .15s;
}
.mm-mode-btn--active { background: var(--teal); border-color: var(--teal); color: #000; font-weight: 700; }
.mm-mode-btn:hover:not(.mm-mode-btn--active) { color: var(--text); }
/* ── ISS panel ─────────────────────────────────────────────────────────────── */
.mm-iss-panel { display: flex; flex-direction: column; }
.mm-iss-status-hero {
padding: 12px 20px 6px;
font-size: 15px; font-weight: 600; color: var(--teal);
border-bottom: 1px solid var(--blue-border);
min-height: 40px;
}
.mm-iss-metrics {
display: flex; gap: 0;
border-bottom: 1px solid var(--blue-border);
}
.mm-iss-metric {
flex: 1; padding: 12px 16px; text-align: center;
border-right: 1px solid var(--blue-border);
}
.mm-iss-metric:last-child { border-right: none; }
.mm-iss-metric-val { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; }
.mm-iss-metric-key { font-size: 11px; color: var(--muted); margin-top: 3px; text-transform: uppercase; }
.mm-iss-data { padding-top: 0; }
.mm-freshness { font-size: 11px; color: var(--muted); margin-left: auto; }
.mm-iss-note {
margin: 0 20px 14px;
font-size: 12px; color: var(--muted);
padding: 8px 10px;
border-left: 2px solid var(--blue-border);
background: rgba(255,255,255,.02);
}
/* ── ISS pass table panel ─────────────────────────────────────────────────── */
.mm-pass-body { padding: 10px 16px 14px; }
.mm-pass-empty { display: block; padding: 12px 0; }
.mm-pass-tle-note { font-size: 11px; margin-left: auto; }
/* Filter bar */
.mm-pass-controls { margin-bottom: 12px; }
.mm-pass-filter-bar {
display: flex; flex-wrap: wrap; gap: 6px;
}
.mm-pass-filter-btn {
padding: 4px 12px; font-size: 12px; border-radius: 3px; cursor: pointer;
border: 1px solid var(--blue-border);
background: transparent; color: var(--muted);
transition: background .15s, color .15s;
}
.mm-pass-filter-btn:hover { background: rgba(255,255,255,.05); color: var(--text); }
.mm-pass-filter-btn--active {
background: rgba(var(--teal-rgb, 0,210,200), .12);
border-color: var(--teal); color: var(--teal);
}
/* Pass table wrap */
.mm-pass-table-wrap { margin-bottom: 8px; }
/* Cell sub-content */
.mm-pt-time { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.2; }
.mm-pt-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.mm-pt-el { font-size: 16px; font-weight: 700; line-height: 1.1; }
/* Pass type badges */
.mm-pass-badge {
display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px;
font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.mm-pass-badge--daylight {
background: rgba(255,200,50,.12); color: #ffc832; border: 1px solid rgba(255,200,50,.25);
}
.mm-pass-badge--visible {
background: rgba(0,210,170,.12); color: var(--teal); border: 1px solid rgba(0,210,170,.25);
}
.mm-pass-badge--unlit {
background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid var(--blue-border);
}
/* Footer */
.mm-pass-footer { padding: 6px 0 4px; }
.mm-pass-more-btn { font-size: 12px; padding: 5px 14px; }
.mm-pass-all-shown { display: block; font-size: 11px; padding: 4px 0; }
/* Note */
.mm-pass-note {
font-size: 12px; color: var(--muted);
padding: 8px 10px; margin-top: 10px;
border-left: 2px solid var(--blue-border);
background: rgba(255,255,255,.02);
max-width: 640px;
}
/* ── Orbital counts ───────────────────────────────────────────────────────── */
.mm-counts-hero { padding: 16px 20px 10px; }
.mm-counts-hero-val { font-size: 32px; font-weight: 800; color: var(--teal); line-height: 1; }
.mm-counts-hero-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.mm-orbit-chart { padding: 0 20px 12px; }
.mm-chart-bar { height: 8px; border-radius: 4px; overflow: hidden; display: flex; background: var(--blue-border); }
.mm-chart-seg { height: 100%; transition: width .4s ease; }
.mm-chart-payload { background: #22cc66; }
.mm-chart-debris { background: #e07000; }
.mm-chart-rocket { background: #4488aa; }
.mm-chart-unknown { background: #555; }
.mm-chart-legend { font-size: 11px; color: var(--muted); margin-top: 5px; display: flex; gap: 12px; }
.mm-chart-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.mm-cat-list { padding: 0 4px; }
.mm-cat-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,.04); }
.mm-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mm-cat-dot--payload { background: #22cc66; }
.mm-cat-dot--debris { background: #e07000; }
.mm-cat-dot--rocket { background: #4488aa; }
.mm-cat-dot--unknown { background: #555; }
.mm-cat-body { flex: 1; }
.mm-cat-label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 4px; }
.mm-cat-desc { font-size: 12px; color: var(--muted); }
.mm-cat-count { font-size: 18px; font-weight: 700; color: var(--text); min-width: 60px; text-align: right; }
.mm-counts-footer { padding: 8px 20px 4px; font-size: 12px; display: flex; align-items: center; gap: 10px; }
.mm-stale-warn { color: #e07000; font-size: 12px; }
.mm-counts-note {
margin: 0 20px 14px;
font-size: 12px; color: var(--muted);
padding: 8px 10px;
border-left: 2px solid var(--blue-border);
background: rgba(255,255,255,.02);
}
/* ── Deep space missions ──────────────────────────────────────────────────── */
.mm-mission-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
padding: 14px 16px 18px;
}
.mm-mission-card {
background: rgba(255,255,255,.03);
border: 1px solid var(--blue-border);
border-radius: 6px;
padding: 14px 16px;
display: flex; flex-direction: column; gap: 6px;
transition: box-shadow .2s, transform .2s;
}
.mm-mission-card:hover {
box-shadow: 0 4px 20px rgba(0,200,255,.08);
transform: translateY(-1px);
}
/* Interstellar/deep-space purple accent */
.mm-orbit-interstellar { border-left: 3px solid #9b59b6; }
.mm-orbit-kuiper { border-left: 3px solid #8e44ad; }
.mm-orbit-l2 { border-left: 3px solid var(--teal); }
.mm-orbit-leo { border-left: 3px solid #22cc66; }
.mm-orbit-solar { border-left: 3px solid #f39c12; }
.mm-mission-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mm-mission-name { font-size: 14px; font-weight: 700; color: var(--text); }
.mm-mission-status { font-size: 11px; color: #22cc66; white-space: nowrap; }
.mm-mission-meta { font-size: 12px; color: var(--muted); }
.mm-mission-sep { margin: 0 4px; }
.mm-mission-launch { font-size: 12px; color: var(--muted); }
.mm-mission-target { margin: 2px 0; }
.mm-orbit-tag {
display: inline-block; font-size: 11px; border-radius: 2px;
padding: 2px 6px; border: 1px solid;
}
.mm-orbit-tag--interstellar, .mm-orbit-tag--kuiper { color: #9b59b6; border-color: #9b59b6; }
.mm-orbit-tag--l2 { color: var(--teal); border-color: var(--teal); }
.mm-orbit-tag--leo { color: #22cc66; border-color: #22cc66; }
.mm-orbit-tag--solar { color: #f39c12; border-color: #f39c12; }
.mm-mission-distances { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 4px; }
.mm-dist-primary .mm-dist-val { font-size: 15px; font-weight: 700; color: var(--text); display: block; }
.mm-dist-val { font-size: 13px; font-weight: 600; color: var(--teal); display: block; }
.mm-dist-val-sm { font-size: 12px; color: var(--muted); display: block; }
.mm-dist-label { font-size: 11px; color: var(--muted); }
.mm-missions-note {
margin: 0 16px 14px;
font-size: 12px; color: var(--muted);
padding: 8px 10px;
border-left: 2px solid var(--blue-border);
background: rgba(255,255,255,.02);
}
/* ── Planetary Rovers ────────────────────────────────────────────────────── */
/* Planet section */
.mm-rov-planet-section { border-bottom: 1px solid rgba(255,255,255,.06); }
.mm-rov-planet-section:last-child { border-bottom: none; }
.mm-rov-planet-hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px 10px;
border-bottom: 1px solid rgba(255,255,255,.05);
flex-wrap: wrap;
}
.mm-rov-planet-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.mm-rov-planet-name {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
}
.mm-rov-planet-count {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
padding: 1px 7px;
border-radius: 10px;
}
.mm-rov-planet-dist-wrap { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mm-rov-planet-dist { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.mm-rov-planet-light { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
/* Rover cards grid */
.mm-rov-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1px;
background: rgba(255,255,255,.04);
}
.mm-rov-card {
background: var(--bg-panel, #080818);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 5px;
}
.mm-rov-card--dormant { opacity: .85; }
.mm-rov-card--retired { opacity: .75; }
.mm-rov-card--lost { opacity: .7; }
/* Card header */
.mm-rov-card-hdr {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 2px;
}
.mm-rov-name {
font-size: 14px;
font-weight: 700;
color: var(--text);
font-family: var(--font-mono);
}
/* Status badge */
.mm-rov-status {
font-size: 9px;
font-weight: 600;
letter-spacing: .1em;
padding: 2px 6px;
border-radius: 3px;
border: 1px solid;
white-space: nowrap;
flex-shrink: 0;
}
.mm-rov-status--active { color: var(--teal); border-color: rgba(0,200,255,.4); background: rgba(0,200,255,.07); }
.mm-rov-status--dormant { color: #f0b429; border-color: rgba(240,180,41,.4); background: rgba(240,180,41,.07); }
.mm-rov-status--retired { color: var(--muted); border-color: rgba(255,255,255,.15); background: transparent; }
.mm-rov-status--lost { color: #ef5350; border-color: rgba(239,83,80,.4); background: rgba(239,83,80,.07); }
/* Card body rows */
.mm-rov-mission { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light); }
.mm-rov-operator { color: var(--muted); }
.mm-rov-timeline { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); flex-wrap: wrap; }
.mm-rov-sep { opacity: .4; }
.mm-rov-landed { }
.mm-rov-retd { }
.mm-rov-surface-count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
font-weight: 600;
}
/* Odometer */
.mm-rov-odo { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light); }
.mm-rov-odo-val { color: var(--text); font-weight: 600; }
.mm-rov-odo-lbl { }
/* Last contact */
.mm-rov-last {
font-family: var(--font-mono);
font-size: 10px;
color: #f0b429;
}
.mm-rov-last span { font-weight: 600; }
/* Fact blurb */
.mm-rov-fact {
font-size: 11px;
color: var(--muted);
line-height: 1.5;
margin-top: 3px;
padding-top: 5px;
border-top: 1px solid rgba(255,255,255,.05);
}
@media (max-width: 600px) {
.mm-rov-cards { grid-template-columns: 1fr; }
.mm-rov-planet-dist-wrap { margin-left: 0; }
}
/* ── Search: chips + bar ──────────────────────────────────────────────────── */
.mm-chips { padding: 12px 16px 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mm-chips-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mm-chip {
background: rgba(0,200,255,.07); border: 1px solid rgba(0,200,255,.2);
color: var(--teal); border-radius: 12px; padding: 3px 11px;
font-size: 12px; cursor: pointer; transition: background .15s, color .15s;
}
.mm-chip:hover { background: rgba(0,200,255,.18); color: #fff; }
.mm-search-bar { padding: 6px 16px 12px; display: flex; gap: 8px; }
.mm-search-bar .toolbox-search-input { flex: 1; }
/* ── Lookup result card ───────────────────────────────────────────────────── */
.mm-lookup-result { padding: 0 16px 16px; }
.mm-lookup-card {
background: rgba(255,255,255,.03);
border: 1px solid var(--blue-border);
border-radius: 6px;
overflow: hidden;
}
.mm-lookup-header {
padding: 12px 16px 10px;
border-bottom: 1px solid var(--blue-border);
display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.mm-lookup-name { font-size: 16px; font-weight: 700; color: var(--text); }
.mm-lookup-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-lookup-badge {
font-size: 11px; background: rgba(0,200,255,.1); border: 1px solid rgba(0,200,255,.3);
color: var(--teal); border-radius: 3px; padding: 2px 8px;
}
.mm-badge-orbit { background: rgba(34,204,102,.1); border-color: rgba(34,204,102,.3); color: #22cc66; }
.mm-lookup-grid { padding: 8px 4px; }
.mm-lookup-tle {
padding: 8px 16px 12px; background: rgba(0,0,0,.2);
border-top: 1px solid var(--blue-border);
}
.mm-tle-line {
font-family: monospace; font-size: 12px; color: var(--muted);
white-space: pre; overflow-x: auto; line-height: 1.6;
}
/* ── Risk + today panels ─────────────────────────────────────────────────── */
.mm-unavailable-block { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.mm-unavail-icon { font-size: 28px; color: var(--muted); }
.mm-unavail-text { font-size: 13px; color: var(--muted); line-height: 1.55; }
.mm-unavail-tips { display: flex; flex-direction: column; gap: 6px; }
.mm-tip { font-size: 12px; color: var(--muted); padding-left: 10px; border-left: 2px solid var(--blue-border); }
.mm-tip-head { color: var(--teal); font-weight: 600; margin-right: 6px; }
.mm-today-body { padding: 10px 16px 16px; }
.mm-today-list { display: flex; flex-direction: column; gap: 4px; }
.mm-today-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 4px;
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
font-size: 12px;
}
.mm-today-past { opacity: .6; }
.mm-today-type { font-size: 11px; color: var(--teal); text-transform: uppercase; min-width: 70px; }
.mm-today-title { flex: 1; color: var(--text); }
.mm-today-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
/* ── Tooltip popup ────────────────────────────────────────────────────────── */
.mm-tooltip {
display: inline-flex; align-items: center; justify-content: center;
width: 13px; height: 13px; border-radius: 50%;
border: 1px solid rgba(0,200,255,.4); color: rgba(0,200,255,.7);
font-family: var(--font-mono, monospace); font-size: 8px; font-weight: 700;
cursor: help; vertical-align: middle; flex-shrink: 0;
transition: border-color .12s, color .12s;
}
.mm-tooltip:hover { border-color: var(--teal); color: var(--teal); }
/* .mm-tooltip-popup is superseded by the global .c3xo-tooltip system */
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
.mm-summary-strip { flex-direction: column; }
.mm-summary-item { border-right: none; border-bottom: 1px solid var(--blue-border); }
.mm-iss-metrics { flex-direction: column; }
.mm-iss-metric { border-right: none; border-bottom: 1px solid var(--blue-border); }
.mm-mission-grid { grid-template-columns: 1fr; }
.mm-pass-filter-bar { gap: 4px; }
.mm-mission-distances { grid-template-columns: 1fr 1fr; }
.mm-counts-hero-val { font-size: 26px; }
}
/* ══════════════════════════════════════════════════════════════════════════
DEEP SKY TOOLBOX — Enhanced UI
══════════════════════════════════════════════════════════════════════════ */
/* ── Table visual polish ─────────────────────────────────────────────────── */
.toolbox-table--hoverable tbody tr { transition: background .15s; cursor: default; }
.toolbox-table--hoverable tbody tr:hover { background: rgba(0,51,255,.06); }
.toolbox-table td, .toolbox-table th { padding: 10px 12px; }
.toolbox-table th {
font-size: 12px; letter-spacing: .18em; color: var(--teal);
border-bottom: 2px solid rgba(0,200,200,.2);
}
.toolbox-table tbody tr + tr { border-top: 1px solid rgba(0,51,255,.07); }
/* ── Night window info bar ───────────────────────────────────────────────── */
.dso-night-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 8px 20px; background: rgba(0,200,200,.05);
border-bottom: 1px solid rgba(0,200,200,.15);
font-family: var(--font-mono); font-size: 12px;
}
.dso-nb-label { color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.dso-nb-val { color: var(--teal); font-weight: 600; }
.dso-nb-sep { color: var(--muted); }
.dso-nb-note { margin-left: auto; color: var(--muted); font-style: italic; letter-spacing: 0; }
.dso-nb-warn { color: #f4a030; }
/* ── Object type badges ──────────────────────────────────────────────────── */
.dso-type-badge {
display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: 600;
font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
border: 1px solid; border-radius: 2px; white-space: nowrap;
}
.dso-type--galaxy { color: #7ab4ff; border-color: rgba(122,180,255,.35); background: rgba(122,180,255,.08); }
.dso-type--ocl { color: var(--teal); border-color: rgba(0,200,200,.35); background: rgba(0,200,200,.07); }
.dso-type--gcl { color: #ffd700; border-color: rgba(255,215,0,.35); background: rgba(255,215,0,.07); }
.dso-type--pn { color: #00d4ff; border-color: rgba(0,212,255,.35); background: rgba(0,212,255,.07); }
.dso-type--hii { color: #ff6644; border-color: rgba(255,102,68,.35); background: rgba(255,102,68,.07); }
.dso-type--rfn { color: #88bbff; border-color: rgba(136,187,255,.35); background: rgba(136,187,255,.07); }
.dso-type--snr { color: #c084fc; border-color: rgba(192,132,252,.35); background: rgba(192,132,252,.07); }
.dso-type--clan { color: #f4a030; border-color: rgba(244,160,48,.35); background: rgba(244,160,48,.07); }
.dso-type--star { color: #c0c8e0; border-color: rgba(192,200,224,.3); background: rgba(192,200,224,.05); }
.dso-type--other { color: var(--muted); border-color: rgba(0,51,255,.2); background: rgba(0,51,255,.04); }
/* ── Observability badges ────────────────────────────────────────────────── */
.dso-obs-badge {
display: inline-block; padding: 2px 7px; font-family: var(--font-mono);
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
border: 1px solid; border-radius: 2px; white-space: nowrap;
}
.dso-badge--excellent { color: #ffd700; border-color: rgba(255,215,0,.4); background: rgba(255,215,0,.09); }
.dso-badge--good { color: var(--teal); border-color: rgba(0,200,200,.35); background: rgba(0,200,200,.07); }
.dso-badge--fair { color: var(--muted); border-color: rgba(0,51,255,.2); background: rgba(0,51,255,.04); }
.dso-badge--moon { color: #c0c8e0; border-color: rgba(192,200,224,.35); background: rgba(192,200,224,.07); }
.dso-badge--low { color: #f4a030; border-color: rgba(244,160,48,.3); background: rgba(244,160,48,.06); }
.dso-badge--brief { color: #f4a030; border-color: rgba(244,160,48,.3); background: rgba(244,160,48,.06); }
.dso-badge--challenge { color: #c084fc; border-color: rgba(192,132,252,.3); background: rgba(192,132,252,.06); }
/* ── Score + rank display ────────────────────────────────────────────────── */
.dso-score-small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: 4px; }
.dso-score-num { font-family: var(--font-orb); font-size: 18px; font-weight: 700; color: var(--teal); }
.dso-rank { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-right: 6px; }
.dso-common { font-size: 12px; }
.dso-peak-alt, .dso-window { font-size: 12px; }
/* ── Catalog totals mini bars ────────────────────────────────────────────── */
.dso-count-bar-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; justify-content: flex-end; }
.dso-count-bar { width: 80px; height: 4px; background: rgba(0,51,255,.12); border-radius: 2px; flex-shrink: 0; overflow: hidden; }
.dso-count-bar-fill { display: block; height: 100%; background: var(--teal); border-radius: 2px; width: 0; transition: width .5s; }
.dso-count-icon { color: var(--teal); margin-right: 8px; }
.dso-counts-list .toolbox-data-row { padding: 8px 0; }
/* ── Mode toggle ─────────────────────────────────────────────────────────── */
.dso-mode-wrap { display: flex; gap: 0; margin-left: auto; }
.dso-mode-btn { border-radius: 0; font-size: 12px; padding: 4px 10px; }
.dso-mode-btn + .dso-mode-btn { margin-left: -1px; }
/* Beginner mode: hide advanced columns */
.dso-mode-beginner .dso-window,
.dso-mode-beginner .dso-score-small,
.dso-mode-beginner thead th:nth-child(6),
.dso-mode-beginner tbody td:nth-child(6) { display: none; }
/* ── Add to list button ──────────────────────────────────────────────────── */
.dso-obs-toggle {
display: inline-block; padding: 2px 6px; font-size: 11px;
font-family: var(--font-mono); letter-spacing: .08em; cursor: pointer;
background: none; border: 1px solid rgba(0,51,255,.25); color: var(--muted);
transition: all .15s; vertical-align: middle; margin-left: 5px;
}
.dso-obs-toggle:hover { border-color: var(--teal); color: var(--teal); }
.dso-obs-toggle.dso-obs-added { border-color: var(--teal); color: var(--teal); background: rgba(0,200,200,.08); }
/* ── Observing list panel ────────────────────────────────────────────────── */
.dso-obs-panel .toolbox-panel-hdr { gap: 8px; }
.dso-obs-remove {
background: none; border: 1px solid rgba(255,80,80,.25); color: rgba(255,80,80,.6);
padding: 1px 5px; font-size: 11px; cursor: pointer; transition: all .15s;
}
.dso-obs-remove:hover { border-color: #f44; color: #f44; }
/* ── Search result cards ─────────────────────────────────────────────────── */
.dso-search-card {
padding: 10px 12px; border-bottom: 1px solid rgba(0,51,255,.1);
transition: background .15s;
}
.dso-search-card:hover { background: rgba(0,51,255,.06); }
.dso-search-card:last-child { border-bottom: none; }
.dso-search-name { font-family: var(--font-orb); font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.dso-search-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 3px; }
.dso-search-radec { font-size: 12px; }
/* ── Detail drawer ───────────────────────────────────────────────────────── */
/* ── DSO detail: centered popup modal (replaces side drawer) ─────────── */
/* Overlay and drawer are siblings in the DOM, so each is positioned independently. */
.dso-drawer-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.72);
z-index: 2000;
opacity: 0; pointer-events: none;
transition: opacity .22s ease;
}
.dso-drawer-open .dso-drawer-overlay { opacity: 1; pointer-events: auto; }
body.dso-drawer-open { overflow: hidden; }
.dso-drawer {
/* Fixed-position centered modal — sibling to overlay, not a child */
position: fixed;
top: 50%; left: 50%;
width: min(540px, calc(100vw - 32px));
max-height: min(88vh, 820px);
background: #070b1e;
border: 1px solid rgba(0,200,200,.28);
border-radius: 8px;
z-index: 2001;
display: flex; flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.85), 0 0 0 1px rgba(0,200,200,.07);
/* Default (closed): invisible, slightly scaled down */
transform: translate(-50%, -50%) scale(.95);
opacity: 0;
pointer-events: none;
transition: transform .25s cubic-bezier(.34,1.2,.64,1), opacity .22s ease;
}
.dso-drawer--open {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
pointer-events: auto;
}
.dso-drawer-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid rgba(0,200,200,.2);
background: rgba(0,200,200,.05); flex-shrink: 0;
}
.dso-drawer-heading { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }
.dso-drawer-close {
background: none; border: 1px solid rgba(0,200,200,.3); color: var(--teal);
width: 24px; height: 24px; cursor: pointer; font-size: 12px;
display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0;
}
.dso-drawer-close:hover { background: rgba(0,200,200,.1); }
.dso-drawer-content { flex: 1; overflow-y: auto; padding: 16px; scrollbar-width: thin; scrollbar-color: rgba(0,200,200,.2) transparent; }
.dso-dr-header { margin-bottom: 14px; }
.dso-dr-title { font-family: var(--font-orb); font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.dso-dr-common { display: block; font-family: var(--font-orb); font-size: 14px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.dso-dr-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dso-dr-section { margin: 14px 0; }
.dso-dr-section-title {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
text-transform: uppercase; color: var(--teal); margin-bottom: 10px;
padding-bottom: 6px; border-bottom: 1px solid rgba(0,200,200,.15);
}
.dso-dr-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
}
.dso-dr-item { display: flex; flex-direction: column; gap: 2px; }
.dso-dr-item--wide { grid-column: 1/-1; }
.dso-dr-key { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.dso-dr-val { font-size: 13px; color: #fff; }
.dso-dr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,51,255,.15); }
.dso-btn {
padding: 5px 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
text-transform: uppercase; cursor: pointer; background: none;
border: 1px solid rgba(0,51,255,.3); color: var(--muted); transition: all .15s;
}
.dso-btn:hover { border-color: var(--teal); color: var(--teal); background: rgba(0,200,200,.06); }
.dso-obs-added.dso-btn { border-color: var(--teal); color: var(--teal); background: rgba(0,200,200,.08); }
/* ── Altitude chart ──────────────────────────────────────────────────────── */
.dso-chart-wrap { margin-top: 8px; }
.dso-alt-svg { width: 100%; height: auto; display: block; }
.dso-chart-label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: center; margin-top: 2px; letter-spacing: .12em; }
/* ── Catalog tab improvements ────────────────────────────────────────────── */
.toolbox-catalog-tab {
padding: 6px 14px; font-size: 12px; background: rgba(255,255,255,.03);
border: 1px solid rgba(0,51,255,.2); color: var(--muted);
cursor: pointer; font-family: var(--font-mono); letter-spacing: .1em;
transition: all .15s; text-transform: uppercase;
}
.toolbox-catalog-tab:hover { background: rgba(255,255,255,.06); color: var(--text); }
.toolbox-catalog-tab--active {
background: rgba(0,200,200,.1); border-color: var(--teal);
color: var(--teal); font-weight: 600;
}
/* Mobile — bottom-sheet style */
@media (max-width: 600px) {
.dso-drawer {
top: auto; bottom: 0; left: 0;
width: 100%; max-height: 85vh;
border-radius: 10px 10px 0 0;
border-left: none; border-right: none; border-bottom: none;
transform: translateY(100%);
}
.dso-drawer--open { transform: translateY(0); }
.dso-night-bar { flex-direction: column; align-items: flex-start; gap: 4px; }
.dso-nb-note { margin-left: 0; }
}
}
/* ══════════════════════════════════════════════════════════════════════
DEEP SKY — Mission Planner Enhancements (Phases 1–7)
══════════════════════════════════════════════════════════════════════ */
/* Phase 1 — Hero quick-stats strip */
.dso-hero-stats {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 8px;
padding: 14px 0 6px;
}
.dso-hero-stat {
display: flex; flex-direction: column; align-items: center;
padding: 10px 16px;
background: rgba(0,0,20,.55); border: 1px solid rgba(0,200,200,.1);
border-radius: 5px; transition: border-color .2s;
}
.dso-hero-stat:hover { border-color: rgba(0,200,200,.28); }
.dso-hero-stat-label {
font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted); margin-bottom: 4px; white-space: nowrap;
}
.dso-hero-stat-val {
font-family: var(--font-orb); font-size: 18px; font-weight: 700;
color: var(--teal); line-height: 1;
}
.dso-hero-stat-sub {
font-family: var(--font-mono); font-size: 9px; color: var(--muted);
margin-top: 3px; white-space: nowrap;
}
.dso-hero-stat--best { border-color: rgba(255,215,0,.2); }
.dso-hero-stat--best .dso-hero-stat-val { color: #ffd700; }
.dso-hero-stat--live .dso-hero-stat-val { color: #34d399; }
@keyframes dso-skel { 0%,100%{opacity:.35} 50%{opacity:.7} }
.dso-hero-stat--skel { animation: dso-skel 1.4s ease infinite; pointer-events: none; }
.dso-hero-stat--skel .dso-hero-stat-val { color: rgba(0,200,200,.25); }
/* Phase 1 — Atlas overview cards (upgraded catalog totals) */
.dso-atlas-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
gap: 10px; padding: 14px 20px 20px;
}
.dso-atlas-card {
display: flex; flex-direction: column; gap: 3px;
padding: 12px 14px;
border: 1px solid rgba(0,51,255,.18); border-radius: 4px;
background: rgba(0,0,20,.4); transition: border-color .15s;
}
.dso-atlas-card:hover { border-color: rgba(0,200,200,.25); }
.dso-atlas-icon { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.dso-atlas-count { font-family: var(--font-orb); font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
.dso-atlas-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dso-atlas-track { height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; margin-top: 5px; }
.dso-atlas-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }
.dso-atlas-card--galaxy { border-color: rgba(122,180,255,.18); }
.dso-atlas-card--galaxy .dso-atlas-icon { color: #7ab4ff; }
.dso-atlas-card--galaxy .dso-atlas-fill { background: #7ab4ff; }
.dso-atlas-card--nebula { border-color: rgba(255,102,68,.18); }
.dso-atlas-card--nebula .dso-atlas-icon { color: #ff6644; }
.dso-atlas-card--nebula .dso-atlas-fill { background: #ff6644; }
.dso-atlas-card--cluster { border-color: rgba(255,215,0,.18); }
.dso-atlas-card--cluster .dso-atlas-icon { color: #ffd700; }
.dso-atlas-card--cluster .dso-atlas-fill { background: #ffd700; }
.dso-atlas-card--star { border-color: rgba(192,200,224,.15); }
.dso-atlas-card--star .dso-atlas-icon { color: #c0c8e0; }
.dso-atlas-card--star .dso-atlas-fill { background: #c0c8e0; }
.dso-atlas-card--other .dso-atlas-icon { color: var(--muted); }
.dso-atlas-card--other .dso-atlas-fill { background: rgba(0,200,200,.45); }
/* Phase 2 — Tonight card grid */
.dso-view-toggle-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 20px 8px; border-bottom: 1px solid rgba(0,51,255,.1);
}
.dso-view-toggle-lbl {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-right: auto;
}
.dso-view-btn {
font-family: var(--font-mono); font-size: 11px; padding: 4px 12px;
background: transparent; border: 1px solid rgba(0,51,255,.22);
border-radius: 3px; color: var(--muted); cursor: pointer; transition: all .15s;
}
.dso-view-btn--active { border-color: var(--teal); color: var(--teal); background: rgba(0,200,200,.06); }
.dso-view-btn:hover { border-color: rgba(0,200,200,.35); color: rgba(0,200,200,.8); }
.dso-card-grid-wrap { padding: 14px 20px 18px; }
.dso-card-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 10px;
}
.dso-obj-card {
position: relative; padding: 13px 14px;
background: rgba(0,0,20,.6); border: 1px solid rgba(0,51,255,.2);
border-radius: 5px; cursor: pointer;
transition: border-color .15s, transform .12s, background .15s;
display: flex; flex-direction: column; gap: 7px;
}
.dso-obj-card:hover { border-color: rgba(0,200,200,.4); background: rgba(0,0,30,.75); transform: translateY(-2px); }
.dso-obj-card--selected { border-color: var(--teal); background: rgba(0,200,200,.05); }
.dso-obj-card-top { display: flex; align-items: flex-start; gap: 9px; }
.dso-obj-card-icon {
width: 32px; height: 32px; flex-shrink: 0; border-radius: 3px;
display: flex; align-items: center; justify-content: center;
font-size: 15px; background: rgba(0,0,20,.6);
}
.dso-obj-card-name { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; }
.dso-obj-card-common { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dso-obj-card-badges { display: flex; flex-wrap: wrap; gap: 3px; }
.dso-obj-card-badge {
font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .05em;
text-transform: uppercase; padding: 1px 5px; border-radius: 2px; border: 1px solid;
}
.dcb--best { color: #ffd700; border-color: rgba(255,215,0,.4); background: rgba(255,215,0,.07); }
.dcb--easy { color: #34d399; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.06); }
.dcb--imaging { color: #c084fc; border-color: rgba(192,132,252,.4); background: rgba(192,132,252,.06); }
.dcb--late { color: var(--muted); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.02); }
.dcb--moon { color: #c0c8e0; border-color: rgba(192,200,224,.3); background: rgba(192,200,224,.05); }
.dcb--low { color: #f4a030; border-color: rgba(244,160,48,.3); background: rgba(244,160,48,.05); }
.dcb--beg { color: var(--teal); border-color: rgba(0,200,200,.3); background: rgba(0,200,200,.05); }
.dcb--exp { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.05); }
.dso-obj-card-stats {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
}
.dso-obj-card-stat { display: flex; flex-direction: column; gap: 1px; }
.dso-cs-val { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #fff; }
.dso-cs-key { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dso-obj-card-score {
position: absolute; top: 9px; right: 10px;
font-family: var(--font-orb); font-size: 12px; font-weight: 700;
color: var(--teal); opacity: .55;
}
/* Phase 3 — Enhanced drawer */
.dso-dr-section--hero {
display: flex; flex-direction: column; gap: 6px;
padding-bottom: 12px; margin-bottom: 12px;
border-bottom: 1px solid rgba(0,51,255,.12);
}
.dso-dr-type-line { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.dso-dr-constellation { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.dso-dr-key-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.dso-dr-kbadge {
font-family: var(--font-mono); font-size: 10px;
padding: 2px 8px; border-radius: 2px;
border: 1px solid rgba(0,200,200,.25); color: rgba(0,200,200,.7);
background: rgba(0,200,200,.04);
}
.dso-dr-beginner {
background: rgba(0,200,200,.04); border: 1px solid rgba(0,200,200,.1);
border-radius: 4px; padding: 11px 13px; margin: 8px 0;
}
.dso-dr-beginner-hdr {
font-family: var(--font-mono); font-size: 8px; letter-spacing: .16em;
text-transform: uppercase; color: var(--teal); margin-bottom: 6px;
}
.dso-dr-beginner-body {
font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.6);
line-height: 1.65;
}
.dso-dr-beginner-body strong { color: rgba(0,200,200,.8); font-weight: 600; }
.dso-dr-difficulty { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.dso-diff-dots { display: flex; gap: 3px; }
.dso-diff-dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(0,200,200,.12); border: 1px solid rgba(0,200,200,.18);
}
.dso-diff-dot--on { background: var(--teal); border-color: var(--teal); }
.dso-diff-lbl { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.65); }
.dso-diff-note { font-family: var(--font-mono); font-size: 9px; color: var(--muted); font-style: italic; }
/* Phase 5 — Session planner */
.dso-session-summary {
display: flex; flex-wrap: wrap; gap: 10px;
padding: 12px 20px; background: rgba(0,0,20,.4);
border-bottom: 1px solid rgba(0,51,255,.1);
}
.dso-sess-stat { display: flex; flex-direction: column; align-items: center; min-width: 75px; }
.dso-sess-v { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--teal); }
.dso-sess-k { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.dso-session-groups { padding: 12px 20px 4px; }
.dso-session-group { margin-bottom: 16px; }
.dso-session-group-hdr {
font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--teal);
padding-bottom: 5px; border-bottom: 1px solid rgba(0,200,200,.1);
margin-bottom: 7px; display: flex; align-items: center; gap: 8px;
}
.dso-sg-time { color: var(--muted); font-size: 9px; margin-left: auto; }
.dso-session-item {
display: flex; align-items: center; gap: 9px;
padding: 6px 0; border-bottom: 1px solid rgba(0,51,255,.06);
font-family: var(--font-mono); font-size: 11.5px;
}
.dso-session-item:last-child { border-bottom: none; }
.dso-si-num { color: var(--muted); font-size: 9.5px; min-width: 14px; text-align: right; flex-shrink: 0; }
.dso-si-name { color: #fff; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dso-si-common { color: var(--muted); font-size: 9.5px; }
.dso-si-meta { display: flex; gap: 8px; color: var(--muted); font-size: 9.5px; flex-shrink: 0; }
.dso-si-window { color: var(--teal); font-size: 9.5px; }
.dso-si-remove {
background: none; border: 1px solid rgba(255,80,80,.18);
color: rgba(255,80,80,.5); border-radius: 2px;
font-size: 8px; padding: 1px 5px; cursor: pointer; flex-shrink: 0;
}
.dso-si-remove:hover { border-color: #f44; color: #f44; }
.dso-session-table-toggle {
font-family: var(--font-mono); font-size: 9.5px; color: var(--muted);
background: none; border: none; cursor: pointer; padding: 8px 20px;
letter-spacing: .08em; display: block;
}
.dso-session-table-toggle:hover { color: var(--teal); }
/* Phase 6 — Browser filter chips */
.dso-filter-chips {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 8px 20px; border-bottom: 1px solid rgba(0,51,255,.1);
}
.dso-fchip-lbl {
font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted); align-self: center; margin-right: 2px;
}
.dso-fchip-div { width: 1px; height: 14px; background: rgba(0,51,255,.2); align-self: center; flex-shrink: 0; }
.dso-fchip {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em;
padding: 3px 10px; border-radius: 12px;
border: 1px solid rgba(0,51,255,.2); background: transparent;
color: var(--muted); cursor: pointer; transition: all .15s;
}
.dso-fchip:hover { border-color: rgba(0,200,200,.3); color: rgba(0,200,200,.8); }
.dso-fchip--active { border-color: var(--teal); background: rgba(0,200,200,.07); color: var(--teal); }
/* Catalog row hover preview */
.dso-row-preview {
position: fixed; z-index: 1000;
padding: 10px 14px; background: rgba(4,8,24,.96);
border: 1px solid rgba(0,200,200,.25); border-radius: 5px;
pointer-events: none; max-width: 260px; min-width: 180px;
font-family: var(--font-mono); font-size: 11px;
box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.dso-row-preview-name { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.dso-row-preview-grid { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.dso-row-preview-item { display: flex; flex-direction: column; }
.dso-row-preview-k { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dso-row-preview-v { color: rgba(0,200,200,.9); font-size: 11px; }
/* Mobile */
@media (max-width: 700px) {
.dso-hero-stats { gap: 5px; }
.dso-hero-stat { padding: 8px 10px; }
.dso-hero-stat-val { font-size: 15px; }
.dso-hero-stat-sub { font-size: 8px; }
.dso-card-grid { grid-template-columns: 1fr 1fr; }
.dso-atlas-grid { grid-template-columns: repeat(3,1fr); }
.dso-si-meta { display: none; }
}
@media (max-width: 440px) {
.dso-card-grid { grid-template-columns: 1fr; }
.dso-atlas-grid { grid-template-columns: repeat(2,1fr); }
}
/* ── Deep Sky Tonight filters strip ──────────────────────────────────── */
.dso-tonight-filters {
padding: 10px 20px 6px;
border-bottom: 1px solid rgba(0,200,200,.07);
}
/* ── Deep Sky Top Picks ───────────────────────────────────────────────── */
.dso-tpc-section-hdr {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
padding: 16px 20px 10px;
}
.dso-tpc-section-title { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--teal); letter-spacing: .08em; text-transform: uppercase; }
.dso-tpc-section-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.dso-tpc-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
padding: 0 20px 18px;
}
.dso-tpc {
position: relative; display: flex; flex-direction: column; gap: 8px;
padding: 14px 14px 12px;
background: rgba(0,0,20,.6); border: 1px solid rgba(0,200,200,.12);
border-radius: 6px; cursor: pointer; transition: border-color .2s, transform .15s;
}
.dso-tpc:hover { border-color: rgba(0,200,200,.38); transform: translateY(-2px); }
.dso-tpc:focus { outline: 2px solid rgba(0,200,200,.5); outline-offset: 2px; }
.dso-tpc-rank-badge { position: absolute; top: 8px; right: 10px; font-family: var(--font-mono); font-size: 9px; color: var(--muted); font-weight: 700; }
.dso-tpc-head { display: flex; align-items: flex-start; gap: 8px; }
.dso-tpc-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 50%; background: rgba(0,200,200,.08); flex-shrink: 0; }
.dso-tpc-id { flex: 1; min-width: 0; }
.dso-tpc-name { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; }
.dso-tpc-common { font-family: var(--font-mono); font-size: 9px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dso-tpc-badge { flex-shrink: 0; font-size: 9px; padding: 2px 6px; }
.dso-tpc-why { font-family: var(--font-mono); font-size: 9.5px; color: rgba(0,200,200,.75); line-height: 1.5; border-left: 2px solid rgba(0,200,200,.2); padding-left: 7px; }
.dso-tpc-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.dso-tpc-metric { display: flex; flex-direction: column; gap: 1px; }
.dso-tpc-mv { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--teal); }
.dso-tpc-mk { font-family: var(--font-mono); font-size: 8px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.dso-tpc-score-wrap { display: flex; align-items: center; gap: 10px; }
.dso-tpc-score-ring { display: flex; flex-direction: column; align-items: center; width: 38px; flex-shrink: 0; }
.dso-tpc-score-num { font-family: var(--font-orb); font-size: 18px; font-weight: 700; color: var(--teal); line-height: 1; }
.dso-tpc-score-lbl { font-family: var(--font-mono); font-size: 8px; color: var(--muted); }
.dso-tpc-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dso-tpc-bar-row { display: flex; align-items: center; gap: 4px; }
.dso-tpc-bar-lbl { font-family: var(--font-mono); font-size: 8px; color: var(--muted); width: 28px; flex-shrink: 0; }
.dso-tpc-bar-track { flex: 1; height: 5px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.dso-tpc-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.dso-tpc-bar--alt { background: var(--teal); }
.dso-tpc-bar--win { background: #60a5fa; }
.dso-tpc-bar--mag { background: #ffd700; }
.dso-tpc-bar--moon { background: #f87171; }
.dso-tpc-bar-val { font-family: var(--font-mono); font-size: 8px; color: var(--muted); width: 16px; text-align: right; flex-shrink: 0; }
.dso-tpc-window { display: flex; gap: 6px; align-items: center; }
.dso-tpc-wk { font-family: var(--font-mono); font-size: 8.5px; color: var(--muted); flex-shrink: 0; }
.dso-tpc-wv { font-family: var(--font-mono); font-size: 9px; color: var(--fg); }
.dso-tpc-footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.dso-tpc-gear { font-family: var(--font-mono); font-size: 9px; color: var(--muted); background: rgba(255,255,255,.04); padding: 2px 6px; border-radius: 3px; }
.dso-tpc-diff { font-family: var(--font-mono); font-size: 9px; padding: 2px 6px; border-radius: 3px; }
.dso-tpc-diff.dso-diff-1,.dso-tpc-diff.dso-diff-2 { color: #34d399; background: rgba(52,211,153,.1); }
.dso-tpc-diff.dso-diff-3 { color: #f59e0b; background: rgba(245,158,11,.1); }
.dso-tpc-diff.dso-diff-4,.dso-tpc-diff.dso-diff-5 { color: #f87171; background: rgba(248,113,113,.1); }
.dso-tpc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.dso-tpc-actions .dso-btn { font-size: 9.5px; padding: 4px 9px; flex: 1; text-align: center; }
@media (max-width: 1100px) { .dso-tpc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .dso-tpc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .dso-tpc-grid { grid-template-columns: 1fr; } }
/* ── Deep Sky Night Timeline ─────────────────────────────────────────── */
.dso-timeline-wrap { padding: 0 20px 18px; }
.dso-tl-hdr { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.dso-tl-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--teal); letter-spacing: .06em; text-transform: uppercase; }
.dso-tl-sub { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.dso-tl-axis { position: relative; height: 18px; margin-bottom: 2px; }
.dso-tl-al { position: absolute; font-family: var(--font-mono); font-size: 8px; color: var(--muted); transform: translateX(-50%); }
.dso-tl-al:first-child { transform: none; }
.dso-tl-al:last-child { transform: none; left: auto !important; }
.dso-tl-al--mid { color: rgba(122,132,187,.6); }
.dso-tl-rows { display: flex; flex-direction: column; gap: 3px; }
.dso-tl-row { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 0; border-radius: 3px; }
.dso-tl-row:hover { background: rgba(0,200,200,.04); }
.dso-tl-row:focus { outline: 1px solid rgba(0,200,200,.4); }
.dso-tl-label { font-family: var(--font-mono); font-size: 9px; width: 120px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dso-tl-track { flex: 1; position: relative; height: 14px; background: rgba(255,255,255,.03); border-radius: 3px; }
.dso-tl-bar { position: absolute; top: 2px; height: 10px; border-radius: 3px; border: 1px solid transparent; }
.dso-tl-peak { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 7px; height: 7px; border-radius: 50%; z-index: 1; }
.dso-tl-score { font-family: var(--font-mono); font-size: 9px; color: var(--teal); width: 22px; text-align: right; flex-shrink: 0; }
.dso-tl-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.dso-tl-legend span { display: flex; align-items: center; gap: 5px; }
.dso-tl-leg-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; opacity: .7; }
@media (max-width: 600px) { .dso-tl-label { width: 80px; font-size: 8px; } }
/* ── Deep Sky Catalog Cards ──────────────────────────────────────────── */
.dso-cat-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
padding: 12px 20px 18px;
}
.dso-cat-card {
display: flex; flex-direction: column; gap: 6px;
padding: 12px 12px 10px;
background: rgba(0,0,20,.55); border: 1px solid rgba(0,200,200,.1);
border-radius: 5px; cursor: pointer; transition: border-color .18s, transform .15s;
}
.dso-cat-card:hover { border-color: rgba(0,200,200,.35); transform: translateY(-2px); }
.dso-cat-card:focus { outline: 2px solid rgba(0,200,200,.5); outline-offset: 2px; }
.dso-cat-card-head { display: flex; align-items: center; gap: 8px; }
.dso-cat-card-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 50%; background: rgba(0,200,200,.08); flex-shrink: 0; }
.dso-cat-card-names { flex: 1; min-width: 0; }
.dso-cat-card-desg { font-family: var(--font-orb); font-size: 12px; font-weight: 700; color: #fff; }
.dso-cat-card-common { font-family: var(--font-mono); font-size: 9px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dso-cat-tn-badge { font-family: var(--font-mono); font-size: 8.5px; color: #ffd700; background: rgba(255,215,0,.08); padding: 2px 6px; border-radius: 3px; border: 1px solid rgba(255,215,0,.2); }
.dso-cat-card-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.dso-cat-stat { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.dso-cs-key { color: rgba(122,132,187,.6); }
.dso-cat-card-coords { font-family: var(--font-mono); font-size: 8.5px; color: rgba(122,132,187,.5); line-height: 1.4; }
@media (max-width: 500px) { .dso-cat-card-grid { grid-template-columns: 1fr; } }
/* ══════════════════════════════════════════════════════════════════════
SPACE CALENDAR — ec-btn--source + Source Details JSON Modal
══════════════════════════════════════════════════════════════════════ */
/* Source Details icon button (inline action bar) */
.ec-btn--source {
font-family: var(--font-mono);
font-size: 13px;
padding: 3px 7px;
background: transparent;
border: 1px solid rgba(255,255,255,.12);
color: rgba(160,180,220,.55);
cursor: pointer;
line-height: 1;
border-radius: 2px;
transition: border-color .15s, color .15s;
flex-shrink: 0;
}
.ec-btn--source:hover,
.ec-btn--source:focus-visible {
border-color: var(--teal);
color: var(--teal);
outline: none;
}
/* Full-text "Source Details ℹ" label in launch panel */
.ec-details-actions .ec-btn--source {
font-size: 12px;
padding: 4px 12px;
color: rgba(160,180,220,.7);
}
/* ── Modal backdrop ──────────────────────────────────────────────────── */
.sc-json-modal[hidden] { display: none !important; }
.sc-json-modal {
position: fixed;
inset: 0;
z-index: 9500;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.sc-json-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .82);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ── Modal inner panel ───────────────────────────────────────────────── */
.sc-json-modal-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 780px;
max-height: 90vh;
background: linear-gradient(160deg, rgba(0,6,20,.99) 0%, rgba(0,4,14,1) 100%);
border: 1px solid rgba(0,200,200,.3);
border-top: 3px solid var(--teal, #00c8c8);
box-shadow: 0 16px 64px rgba(0,0,0,.8), 0 0 0 1px rgba(0,200,200,.06) inset;
display: flex;
flex-direction: column;
animation: scJsonIn .15s ease-out;
overflow: hidden;
}
@keyframes scJsonIn {
from { opacity: 0; transform: translateY(-8px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Header ──────────────────────────────────────────────────────────── */
.sc-json-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 18px 12px;
border-bottom: 1px solid rgba(0,200,200,.15);
flex-shrink: 0;
}
.sc-json-modal-eyebrow {
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--teal);
margin-bottom: 3px;
}
.sc-json-modal-title {
font-family: var(--font-orb);
font-size: 14px;
color: #fff;
letter-spacing: .04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 480px;
}
.sc-json-modal-header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* ── Copy button ─────────────────────────────────────────────────────── */
.sc-json-copy-btn {
font-family: var(--font-mono);
font-size: 12px;
padding: 5px 12px;
background: rgba(0,200,200,.08);
border: 1px solid rgba(0,200,200,.25);
color: var(--teal);
cursor: pointer;
border-radius: 3px;
transition: background .12s, border-color .12s;
white-space: nowrap;
}
.sc-json-copy-btn:hover {
background: rgba(0,200,200,.18);
border-color: var(--teal);
}
.sc-json-copy-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* ── Close button ────────────────────────────────────────────────────── */
.sc-json-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
color: var(--muted);
font-size: 14px;
cursor: pointer;
border-radius: 3px;
transition: background .12s, color .12s, border-color .12s;
}
.sc-json-close-btn:hover {
background: rgba(255,60,60,.18);
border-color: rgba(255,80,80,.45);
color: #ff7070;
}
.sc-json-close-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* ── JSON body ───────────────────────────────────────────────────────── */
.sc-json-modal-body {
flex: 1;
overflow: hidden;
padding: 0;
min-height: 0;
}
.sc-json-pre {
margin: 0;
padding: 16px 20px;
font-family: var(--font-mono, 'Share Tech Mono', 'Courier New', monospace);
font-size: 12.5px;
line-height: 1.65;
color: rgba(180,210,230,.9);
background: rgba(0,0,0,.3);
white-space: pre; /* preserve indentation */
overflow: auto; /* both axes inside the pre */
max-height: calc(90vh - 180px);
tab-size: 2;
word-break: normal;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(0,200,200,.25) transparent;
}
.sc-json-pre::-webkit-scrollbar { width: 6px; height: 6px; }
.sc-json-pre::-webkit-scrollbar-track { background: transparent; }
.sc-json-pre::-webkit-scrollbar-thumb { background: rgba(0,200,200,.25); border-radius: 3px; }
.sc-json-pre:focus-visible { outline: 1px solid rgba(0,200,200,.3); outline-offset: -1px; }
/* ── Footer hint ─────────────────────────────────────────────────────── */
.sc-json-modal-footer {
padding: 8px 18px;
border-top: 1px solid rgba(255,255,255,.05);
flex-shrink: 0;
}
.sc-json-modal-hint {
font-family: var(--font-mono);
font-size: 9.5px;
color: rgba(255,255,255,.22);
letter-spacing: .06em;
}
/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.sc-json-modal { padding: 0; align-items: flex-end; }
.sc-json-modal-inner {
max-width: 100%;
max-height: 88vh;
border-radius: 12px 12px 0 0;
border-left: none;
border-right: none;
border-bottom: none;
animation: scJsonInMob .2s ease-out;
}
@keyframes scJsonInMob {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.sc-json-modal-title { max-width: 200px; font-size: 13px; }
.sc-json-pre { font-size: 11.5px; max-height: calc(88vh - 160px); }
}
/* ── Source Details modal: body layout for structured view ───────────────── */
.sc-json-modal-body {
overflow-y: auto;
max-height: calc(90vh - 130px);
scrollbar-width: thin;
scrollbar-color: rgba(0,200,200,.2) transparent;
}
.sc-json-modal-body::-webkit-scrollbar { width: 5px; }
.sc-json-modal-body::-webkit-scrollbar-thumb { background: rgba(0,200,200,.2); border-radius: 3px; }
/* Collapsible raw JSON */
.sc-json-raw-details {
border-top: 1px solid rgba(255,255,255,.06);
margin-top: 4px;
}
.sc-json-raw-summary {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--muted);
padding: 9px 18px;
cursor: pointer;
user-select: none;
list-style: none;
display: flex;
align-items: center;
gap: 6px;
}
.sc-json-raw-summary::-webkit-details-marker { display: none; }
.sc-json-raw-summary::before {
content: '▸';
color: var(--teal);
font-size: 11px;
transition: transform .15s;
}
details[open] > .sc-json-raw-summary::before { transform: rotate(90deg); }
.sc-json-raw-summary:hover { color: rgba(200,215,240,.8); }
.sc-json-raw-details .sc-json-pre {
max-height: 320px;
border-top: 1px solid rgba(255,255,255,.04);
}
/* ── Source Details: structured view ─────────────────────────────────────── */
/* Hero strip */
.sc-sd-hero {
position: relative;
min-height: 88px;
background: rgba(0,15,40,.7);
background-image: var(--sc-hero-img, none);
background-size: cover;
background-position: center 30%;
flex-shrink: 0;
}
.sc-sd-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(100deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.4) 100%),
linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 55%);
}
.sc-sd-hero-inner {
position: relative;
z-index: 1;
padding: 14px 18px 16px;
display: flex;
flex-direction: column;
gap: 5px;
}
.sc-sd-hero-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-sd-hero-net { display: flex; align-items: baseline; gap: 8px; }
.sc-sd-hero-net-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.sc-sd-hero-net-val { font-family: var(--font-mono); font-size: 14px; color: #fff; }
.sc-sd-hero-window { font-family: var(--font-mono); font-size: 11px; color: rgba(160,180,220,.55); }
.sc-sd-hero-status-desc { font-family: var(--font-mono); font-size: 11px; color: rgba(160,180,220,.45); line-height: 1.45; }
/* Status badges */
.sc-sd-status {
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: .12em;
padding: 2px 10px;
border: 1px solid;
border-radius: 2px;
}
.sc-sd-status--go { background: rgba(0,180,80,.12); border-color: rgba(0,200,80,.5); color: #40c870; }
.sc-sd-status--tbd { background: rgba(200,160,0,.1); border-color: rgba(220,160,0,.5); color: #e0b830; }
.sc-sd-status--fail { background: rgba(200,40,30,.1); border-color: rgba(200,50,40,.5); color: #e05040; }
.sc-sd-status--muted { background: rgba(0,51,255,.08); border-color: rgba(0,51,255,.35); color: rgba(160,180,220,.75); }
.sc-sd-precision { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: .7; }
/* Body layout */
.sc-sd-body {
padding: 14px 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.sc-sd-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 580px) { .sc-sd-grid-2 { grid-template-columns: 1fr; } }
/* Sections */
.sc-sd-section {
background: rgba(0,0,0,.2);
border: 1px solid rgba(255,255,255,.06);
border-radius: 3px;
padding: 10px 12px 12px;
}
.sc-sd-section--wide { grid-column: 1 / -1; }
.sc-sd-section-hdr {
font-family: var(--font-mono);
font-size: 8.5px;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--teal);
padding-bottom: 6px;
margin-bottom: 6px;
border-bottom: 1px solid rgba(0,200,200,.12);
}
/* Data rows */
.sc-sd-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 3px 0;
border-bottom: 1px solid rgba(255,255,255,.03);
font-family: var(--font-mono);
font-size: 12px;
}
.sc-sd-row:last-child { border-bottom: none; }
.sc-sd-key { color: rgba(120,140,190,.65); flex-shrink: 0; white-space: nowrap; }
.sc-sd-val { color: rgba(200,215,240,.88); text-align: right; word-break: break-word; }
.sc-sd-val--mono { font-family: var(--font-mono); }
/* Descriptions */
.sc-sd-desc {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(150,170,210,.45);
line-height: 1.6;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255,255,255,.04);
}
.sc-sd-desc--sm { font-size: 9.5px; }
/* Stat grids */
.sc-sd-stats-row {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,.05);
}
.sc-sd-stat { text-align: center; flex: 1; min-width: 48px; }
.sc-sd-stat-val { font-family: var(--font-orb); font-size: 17px; color: #fff; line-height: 1.1; }
.sc-sd-stat-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; line-height: 1.3; }
/* Booster sub-header */
.sc-sd-booster-hdr {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(0,200,200,.55);
padding: 4px 0 2px;
margin-top: 4px;
}
/* Map link */
.sc-sd-map-link {
display: inline-block;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--teal);
text-decoration: none;
margin-top: 6px;
}
.sc-sd-map-link:hover { text-decoration: underline; }
/* Links / streams */
.sc-sd-link {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid rgba(255,255,255,.05);
text-decoration: none;
transition: opacity .15s;
}
.sc-sd-link:last-child { border-bottom: none; }
.sc-sd-link:hover { opacity: .8; }
.sc-sd-link-icon { color: var(--teal); font-size: 12px; flex-shrink: 0; padding-top: 2px; }
.sc-sd-link--stream .sc-sd-link-icon { color: #60aaff; }
.sc-sd-link-title { display: block; font-family: var(--font-mono); font-size: 12px; color: rgba(200,215,240,.88); }
.sc-sd-link-meta { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); margin-top: 2px; }
/* Timeline */
.sc-sd-timeline {
display: flex;
flex-direction: column;
max-height: 220px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0,200,200,.2) transparent;
}
.sc-sd-timeline::-webkit-scrollbar { width: 4px; }
.sc-sd-timeline::-webkit-scrollbar-thumb { background: rgba(0,200,200,.2); }
.sc-sd-tl-item {
display: grid;
grid-template-columns: 68px 1fr;
grid-template-rows: auto auto;
column-gap: 10px;
padding: 5px 6px;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.sc-sd-tl-item:last-child { border-bottom: none; }
.sc-sd-tl-item--liftoff { background: rgba(0,200,200,.04); }
.sc-sd-tl-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--teal); grid-row: 1; white-space: nowrap; }
.sc-sd-tl-item--liftoff .sc-sd-tl-time { color: #fff; font-weight: 700; }
.sc-sd-tl-event { font-family: var(--font-mono); font-size: 12px; color: rgba(200,215,240,.85); grid-row: 1; grid-column: 2; }
.sc-sd-tl-desc { font-family: var(--font-mono); font-size: 11px; color: rgba(120,140,190,.5); grid-row: 2; grid-column: 2; line-height: 1.45; padding-bottom: 1px; }
/* Updates */
.sc-sd-update { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.sc-sd-update:last-child { border-bottom: none; }
.sc-sd-update-meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); margin-bottom: 3px; }
.sc-sd-update-body { font-family: var(--font-mono); font-size: 12px; color: rgba(200,215,240,.7); }
/* Empty state */
.sc-sd-empty { padding: 32px 20px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
/* ── Recursive value renderer ── */
.sc-rv-null { color: var(--muted); font-style: italic; }
.sc-rv-bool { color: #7ec8e3; font-family: var(--font-mono); }
.sc-rv-num { color: #b5d99c; font-family: var(--font-mono); }
.sc-rv-url { color: #6ab0f5; text-decoration: underline; word-break: break-all; font-size: 12px; }
.sc-rv-dim { color: rgba(200,215,240,.35); font-style: italic; font-size: 11px; }
.sc-rv-idx { color: rgba(200,215,240,.35); font-family: var(--font-mono); font-size: 11px; }
.sc-rv-arr { display: flex; flex-direction: column; gap: 4px; }
.sc-rv-arr-item { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; align-items: start; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.sc-rv-arr-item:last-child { border-bottom: none; }
.sc-rv-arr-lbl { font-family: var(--font-mono); font-size: 9.5px; color: rgba(200,215,240,.5); padding-top: 2px; word-break: break-word; }
.sc-rv-arr-body { font-family: var(--font-mono); font-size: 12px; color: rgba(200,215,240,.8); }
.sc-rv-obj { display: flex; flex-direction: column; gap: 2px; }
.sc-rv-obj-row { padding: 1px 0; }
.sc-rv-obj-row .sc-sd-key { min-width: 90px; color: rgba(200,215,240,.45); font-size: 9.5px; }
.sc-rv-obj-row .sc-sd-val { font-size: 12px; }
/* Mission patches */
.sc-sd-patches { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 0; }
.sc-sd-patch { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sc-sd-patch-img { width: 72px; height: 72px; object-fit: contain; border-radius: 4px; background: rgba(255,255,255,.04); }
.sc-sd-patch-name { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: center; max-width: 80px; }
/* Booster sub-headers */
.sc-sd-booster-hdr { font-family: var(--font-mono); font-size: 9.5px; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin: 10px 0 4px; }
/* Map link */
.sc-sd-map-link { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: #6ab0f5; text-decoration: none; }
.sc-sd-map-link:hover { text-decoration: underline; }
/* =====================================================================
ECLIPTIC VIEW
===================================================================== */
.ecl-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-left: auto;
}
.ecl-view-btns {
display: flex;
gap: 2px;
}
.ecl-view-btn {
background: transparent;
border: 1px solid rgba(0,180,255,0.25);
color: rgba(0,180,255,0.6);
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 11px;
padding: 3px 10px;
cursor: pointer;
transition: background .15s, color .15s;
letter-spacing: .05em;
}
.ecl-view-btn:hover { background: rgba(0,180,255,0.1); color: rgba(0,200,255,0.9); }
.ecl-view-btn--active { background: rgba(0,180,255,0.15); color: #00c8ff; border-color: rgba(0,180,255,0.55); }
.ecl-log-label {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono, monospace);
font-size: 11px;
color: rgba(0,180,255,0.55);
cursor: pointer;
white-space: nowrap;
}
.ecl-log-label input { accent-color: #00c8ff; cursor: pointer; }
.ecl-time-wrap {
display: flex;
align-items: center;
gap: 4px;
}
.ecl-time-input {
background: rgba(0,10,25,0.7);
border: 1px solid rgba(0,180,255,0.2);
color: rgba(0,180,255,0.75);
font-family: var(--font-mono, monospace);
font-size: 11px;
padding: 3px 7px;
outline: none;
color-scheme: dark;
}
.ecl-time-input:focus { border-color: rgba(0,180,255,0.55); }
.ecl-now-btn {
background: transparent;
border: 1px solid rgba(0,180,255,0.25);
color: rgba(0,180,255,0.6);
font-family: var(--font-mono, monospace);
font-size: 11px;
padding: 3px 10px;
cursor: pointer;
transition: background .15s, color .15s;
}
.ecl-now-btn:hover { background: rgba(0,180,255,0.1); color: #00c8ff; }
.ecl-canvas-wrap {
position: relative;
width: 100%;
background: #060b14;
border-top: 1px solid rgba(0,180,255,0.08);
}
#ecl-canvas {
display: block;
width: 100%;
}
.ecl-tooltip {
position: absolute;
pointer-events: none;
background: rgba(4,12,28,0.94);
border: 1px solid rgba(0,180,255,0.3);
color: rgba(200,215,240,0.9);
font-family: var(--font-mono, monospace);
font-size: 11px;
line-height: 1.65;
padding: 7px 11px;
white-space: nowrap;
z-index: 10;
box-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.ecl-footer {
padding: 7px 16px;
border-top: 1px solid rgba(0,180,255,0.07);
}
.ecl-footer-note {
font-family: var(--font-mono, monospace);
font-size: 10px;
color: rgba(0,180,255,0.3);
letter-spacing: .03em;
}
@media (max-width: 640px) {
.ecl-controls { gap: 7px; }
.ecl-time-wrap { display: none; }
.ecl-log-label { font-size: 10px; }
.ecl-view-btn { font-size: 10px; padding: 3px 8px; }
}
/* Comet table page-size buttons (scoped to avoid collision with NEO buttons) */
.ct-pagesize-btn {
background: transparent;
border: 1px solid rgba(0,180,255,0.2);
color: rgba(0,180,255,0.55);
font-family: var(--font-mono, monospace);
font-size: 11px;
padding: 3px 9px;
cursor: pointer;
transition: background .15s, color .15s;
}
.ct-pagesize-btn:hover { background: rgba(0,180,255,0.08); color: rgba(0,200,255,0.9); }
.ct-pagesize-btn--active { background: rgba(0,180,255,0.15); color: #00c8ff; border-color: rgba(0,180,255,0.5); }
/* =====================================================================
ECLIPTIC VIEW — enhanced
===================================================================== */
/* Time step + animation bar */
.ecl-time-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 8px 16px;
border-top: 1px solid rgba(0,180,255,0.07);
border-bottom: 1px solid rgba(0,180,255,0.07);
background: rgba(0,10,24,0.4);
}
.ecl-step-group { display: flex; gap: 3px; }
.ecl-step-btn {
background: transparent;
border: 1px solid rgba(0,180,255,0.2);
color: rgba(0,180,255,0.6);
font-family: var(--font-mono, monospace);
font-size: 11px;
padding: 3px 9px;
cursor: pointer;
transition: background .15s, color .15s;
}
.ecl-step-btn:hover { background: rgba(0,180,255,0.1); color: #00c8ff; }
.ecl-step-btn--play { border-color: rgba(0,200,100,0.35); color: rgba(0,200,100,0.7); }
.ecl-step-btn--play:hover { background: rgba(0,200,100,0.1); color: #00e090; }
.ecl-speed-wrap { display: flex; align-items: center; gap: 6px; }
.ecl-speed-label { font-family: var(--font-mono, monospace); font-size: 11px; color: rgba(0,180,255,0.45); }
.ecl-speed-select {
background: rgba(0,10,24,0.8);
border: 1px solid rgba(0,180,255,0.2);
color: rgba(0,180,255,0.7);
font-family: var(--font-mono, monospace);
font-size: 11px;
padding: 2px 6px;
cursor: pointer;
}
.ecl-overlay-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.ecl-tog-label {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono, monospace);
font-size: 11px;
color: rgba(0,180,255,0.45);
cursor: pointer;
white-space: nowrap;
}
.ecl-tog-label input { accent-color: #00c8ff; cursor: pointer; }
/* Canvas + detail side-by-side */
.ecl-main-wrap {
display: flex;
align-items: stretch;
min-height: 300px;
}
.ecl-main-wrap .ecl-canvas-wrap { flex: 1 1 0; min-width: 0; }
/* Detail panel */
.ecl-detail-panel {
width: 220px;
flex: 0 0 220px;
background: rgba(0,8,20,0.6);
border-left: 1px solid rgba(0,180,255,0.1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.ecl-dp-empty {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: var(--font-mono, monospace);
font-size: 11px;
color: rgba(0,180,255,0.25);
text-align: center;
padding: 24px;
}
.ecl-dp-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid rgba(0,180,255,0.08);
flex-wrap: wrap;
}
.ecl-dp-sym { font-size: 18px; line-height: 1; }
.ecl-dp-name {
font-family: var(--font-display, 'Orbitron', sans-serif);
font-size: 13px;
font-weight: 600;
color: #fff;
letter-spacing: .04em;
}
.ecl-dp-scroll { overflow-y: auto; flex: 1 1 0; padding: 4px 0; }
.ecl-dp-sec {
font-family: var(--font-mono, monospace);
font-size: 9px;
color: rgba(0,180,255,0.35);
letter-spacing: .1em;
text-transform: uppercase;
padding: 8px 12px 3px;
}
.ecl-dp-row {
display: flex;
justify-content: space-between;
gap: 6px;
padding: 3px 12px;
font-family: var(--font-mono, monospace);
font-size: 11px;
border-bottom: 1px solid rgba(0,180,255,0.04);
}
.ecl-dp-key { color: rgba(0,180,255,0.45); white-space: nowrap; }
.ecl-dp-val { color: rgba(200,215,240,0.85); text-align: right; word-break: break-all; }
/* Tooltip hint text */
.ecl-tip-hint { font-size: 9px; color: rgba(0,180,255,0.4); }
/* Planet table wrapper */
.ecl-planet-table-wrap { border-top: 1px solid rgba(0,180,255,0.08); }
.ecl-tbl-row--sel td { background: rgba(0,180,255,0.07) !important; }
/* Responsive */
@media (max-width: 768px) {
.ecl-main-wrap { flex-direction: column; }
.ecl-detail-panel { width: 100%; flex: none; min-height: 180px; border-left: none; border-top: 1px solid rgba(0,180,255,0.1); }
.ecl-time-controls { gap: 7px; }
.ecl-overlay-toggles { gap: 7px; }
.ecl-step-btn { font-size: 10px; padding: 3px 7px; }
}
/* =====================================================================
GEAR ARCHIVE — mission-control database layout
===================================================================== */
/* ── Stats row ─────────────────────────────────────────────────────── */
.gear-stats-section {
padding: 16px 0 0;
background: rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,51,255,0.1);
}
.gear-stats-row {
display: flex;
flex-wrap: wrap;
gap: 1px;
background: rgba(0,51,255,0.08);
border: 1px solid rgba(0,51,255,0.12);
}
.gear-stat {
flex: 1 1 100px;
padding: 18px 24px;
background: rgba(0,3,12,0.6);
text-align: center;
position: relative;
}
.gear-stat::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--blue-bright, #0033ff), transparent);
opacity: 0;
transition: opacity .3s;
}
.gear-stat:hover::after { opacity: 1; }
.gear-stat-val {
font-family: var(--font-display, 'Orbitron', sans-serif);
font-size: 28px;
font-weight: 700;
color: var(--blue-bright, #0055ff);
line-height: 1.1;
}
.gear-stat-label {
font-family: var(--font-mono, monospace);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted, #666);
margin-top: 4px;
}
.gear-stat--dim .gear-stat-val { color: var(--muted, #666); }
/* ── Controls: tabs + search + chips ──────────────────────────────── */
.gear-controls-section {
padding: 20px 0 0;
border-bottom: 1px solid rgba(0,51,255,0.1);
}
.gear-controls-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.gear-view-tabs {
display: flex;
gap: 2px;
}
.gear-view-tab {
background: transparent;
color: var(--muted, #666);
border: 1px solid rgba(0,51,255,0.15);
padding: 8px 22px;
font-family: var(--font-mono, monospace);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
transition: all .2s;
}
.gear-view-tab:hover { color: #fff; border-color: rgba(0,51,255,0.4); }
.gear-view-tab.active {
color: #fff;
border-color: var(--blue-bright, #0033ff);
background: rgba(0,51,255,0.1);
}
.gear-search-wrap { margin-left: auto; }
.gear-search-input {
background: rgba(0,3,18,0.7);
border: 1px solid rgba(0,51,255,0.2);
color: #ccc;
font-family: var(--font-mono, monospace);
font-size: 12px;
padding: 7px 14px;
width: 200px;
outline: none;
transition: border-color .2s;
}
.gear-search-input:focus { border-color: rgba(0,51,255,0.55); color: #fff; }
.gear-search-input::placeholder { color: var(--muted, #666); }
.gear-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding-bottom: 16px;
}
.gear-chip {
background: transparent;
border: 1px solid rgba(0,51,255,0.15);
color: var(--muted, #666);
font-family: var(--font-mono, monospace);
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 4px 12px;
cursor: pointer;
transition: all .2s;
border-radius: 2px;
}
.gear-chip:hover { color: #fff; border-color: rgba(0,51,255,0.4); }
.gear-chip--active {
color: #fff;
background: rgba(0,51,255,0.15);
border-color: rgba(0,51,255,0.55);
}
/* ── Rig sub-tabs ──────────────────────────────────────────────────── */
.gear-rig-tabs-section {
background: rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(0,51,255,0.1);
padding: 12px 0;
}
.rig-tabs-wrap {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* ── Category sections ─────────────────────────────────────────────── */
.gear-panels { padding: 48px 0; }
.gear-category-section { margin-bottom: 52px; }
.gear-cat-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0,51,255,0.12);
position: relative;
}
.gear-cat-heading::before {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 60px; height: 1px;
background: var(--blue-bright, #0033ff);
}
.gear-cat-heading-left { display: flex; flex-direction: column; gap: 3px; }
.gear-cat-title {
font-family: var(--font-display, 'Orbitron', sans-serif);
font-size: 15px;
font-weight: 700;
color: #fff;
letter-spacing: .1em;
text-transform: uppercase;
margin: 0;
}
.gear-cat-desc {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--muted, #666);
letter-spacing: .05em;
}
.gear-cat-count {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--blue-bright, #0055ff);
border: 1px solid rgba(0,51,255,0.3);
padding: 2px 9px;
flex-shrink: 0;
}
.gear-unassigned-section .gear-cat-title { color: var(--muted, #888); }
.gear-unassigned-section .gear-cat-heading::before { background: var(--muted, #888); opacity: .4; }
/* ── Gear cards grid ───────────────────────────────────────────────── */
.gear-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
@media (min-width: 1280px) {
.gear-cards-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
.gear-cards-grid { grid-template-columns: 1fr; }
}
/* ── Gear card ─────────────────────────────────────────────────────── */
.gear-card {
background: rgba(0,3,18,0.75);
border: 1px solid rgba(0,51,255,0.12);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.gear-card:hover {
border-color: rgba(0,51,255,0.45);
transform: translateY(-3px);
box-shadow: 0 6px 28px rgba(0,30,180,0.18);
}
.gear-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--blue-bright, #0033ff), var(--teal, #0099aa));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.gear-card:hover::before { transform: scaleX(1); }
/* Image / placeholder */
.gear-card-img-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: rgba(0,10,30,0.6);
flex-shrink: 0;
}
.gear-card-img {
width: 100%; height: 100%;
object-fit: contain;
padding: 8px;
display: block;
}
.gear-card-placeholder {
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at center, rgba(0,30,80,0.5), transparent);
}
.gear-card-placeholder-icon { font-size: 42px; opacity: .55; }
.gear-cat-pill {
position: absolute;
bottom: 8px; left: 8px;
font-family: var(--font-mono, monospace);
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--teal, #0099aa);
background: rgba(0,5,18,0.85);
border: 1px solid rgba(0,150,170,0.35);
padding: 2px 8px;
}
/* Body */
.gear-card-body {
padding: 16px 18px 12px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.gear-brand-name {
font-family: var(--font-mono, monospace);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted, #666);
}
.gear-card-title {
font-family: var(--font-display, 'Orbitron', sans-serif);
font-size: 14px;
font-weight: 700;
color: #fff;
line-height: 1.3;
margin: 0;
}
.gear-card-desc {
font-size: 12px;
color: var(--muted, #888);
line-height: 1.6;
}
.gear-card-desc p { margin: 0; }
/* Specs */
.gear-card-specs {
display: flex;
flex-direction: column;
gap: 0;
margin: 4px 0 0;
}
.gear-spec-row {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono, monospace);
font-size: 11px;
padding: 5px 0;
border-bottom: 1px solid rgba(0,51,255,0.07);
}
.gear-spec-row:last-child { border-bottom: none; }
.gear-spec-key { color: var(--muted, #666); }
.gear-spec-val { color: var(--blue-bright, #4488ff); font-weight: 700; text-align: right; }
/* Field notes */
.gear-field-notes {
font-family: var(--font-mono, monospace);
font-size: 10px;
color: var(--muted, #777);
font-style: italic;
padding: 6px 8px;
border-left: 2px solid rgba(0,51,255,0.2);
margin-top: 4px;
}
.gear-field-notes-icon { margin-right: 5px; color: var(--blue-bright, #4488ff); opacity: .5; }
/* Card footer: badges + link */
.gear-card-footer {
padding: 10px 18px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
border-top: 1px solid rgba(0,51,255,0.07);
}
.gear-badge-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex: 1;
}
/* Status badges */
.gear-status-badge {
font-family: var(--font-mono, monospace);
font-size: 9px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 2px 8px;
border: 1px solid;
}
.gear-status--active { color: #22cc66; border-color: rgba(34,200,100,.4); background: rgba(34,200,100,.08); }
.gear-status--backup { color: #88aaff; border-color: rgba(80,130,255,.4); background: rgba(80,130,255,.08); }
.gear-status--retired { color: var(--muted, #666); border-color: rgba(100,100,100,.3); background: rgba(80,80,80,.08); }
.gear-status--wishlist { color: #ddaa22; border-color: rgba(200,160,0,.4); background: rgba(200,160,0,.08); }
.gear-status--sold { color: var(--muted, #555); border-color: rgba(80,80,80,.3); background: rgba(50,50,50,.1); text-decoration: line-through; }
.gear-status--warn { color: #ff7722; border-color: rgba(255,100,0,.4); background: rgba(255,80,0,.08); }
/* Rig badges */
.gear-rig-badge {
font-family: var(--font-mono, monospace);
font-size: 9px;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--blue-bright, #4488ff);
border: 1px solid rgba(0,51,255,0.3);
background: rgba(0,51,255,0.08);
padding: 2px 8px;
}
.gear-rig-badge--unassigned {
color: var(--muted, #555);
border-color: rgba(100,100,100,.2);
background: transparent;
}
/* Product link */
.gear-card-link {
font-family: var(--font-mono, monospace);
font-size: 10px;
letter-spacing: .08em;
color: var(--muted, #666);
text-decoration: none;
border: 1px solid rgba(0,51,255,0.15);
padding: 3px 10px;
white-space: nowrap;
transition: color .2s, border-color .2s;
}
.gear-card-link:hover { color: var(--teal, #0099aa); border-color: var(--teal, #0099aa); }
/* ── Rig panel (By Rig view) ───────────────────────────────────────── */
.rig-panel-header {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 24px 28px;
background: rgba(0,3,18,0.65);
border: 1px solid rgba(0,51,255,0.14);
border-top: 2px solid var(--blue-bright, #0033ff);
margin-bottom: 28px;
flex-wrap: wrap;
}
.rig-header-eyebrow {
font-family: var(--font-mono, monospace);
font-size: 10px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--blue-bright, #4488ff);
margin-bottom: 6px;
opacity: .7;
}
.rig-name {
font-family: var(--font-display, 'Orbitron', sans-serif);
font-size: 22px;
font-weight: 700;
color: #fff;
margin: 0 0 8px;
}
.rig-description {
font-size: 14px;
color: var(--muted, #888);
line-height: 1.65;
margin: 0 0 12px;
max-width: 520px;
}
.rig-meta {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono, monospace);
font-size: 12px;
color: var(--muted, #777);
}
.rig-meta-val { color: #fff; font-weight: 700; }
.rig-meta-sep { color: rgba(255,255,255,.2); }
.rig-meta-link { color: var(--blue-bright, #4488ff); text-decoration: none; }
.rig-meta-link:hover { text-decoration: underline; }
/* Gallery strip */
.rig-gallery-strip {
margin-bottom: 28px;
padding: 16px 0 20px;
border-bottom: 1px solid rgba(0,51,255,0.1);
}
.rig-gallery-label {
font-family: var(--font-mono, monospace);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--blue-bright, #4488ff);
margin-bottom: 12px;
opacity: .7;
}
.rig-gallery-thumbs {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.rig-gallery-thumb {
width: 80px; height: 60px;
overflow: hidden;
border: 1px solid rgba(0,51,255,0.2);
display: block;
transition: border-color .2s;
flex-shrink: 0;
}
.rig-gallery-thumb:hover { border-color: rgba(0,51,255,0.6); }
.rig-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rig-gallery-placeholder {
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,10,30,0.6);
color: var(--muted, #666);
font-size: 18px;
}
.rig-gallery-more {
font-family: var(--font-mono, monospace);
font-size: 10px;
color: var(--blue-bright, #4488ff);
text-decoration: none;
padding: 4px 10px;
border: 1px solid rgba(0,51,255,0.2);
}
/* Category headers within rig */
.rig-gear-sections { display: flex; flex-direction: column; gap: 36px; }
.rig-gear-category {}
.rig-cat-title {
font-family: var(--font-mono, monospace);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--teal, #0099aa);
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 10px;
}
.rig-cat-count {
font-size: 10px;
color: var(--muted, #666);
border: 1px solid rgba(0,51,255,0.2);
padding: 1px 7px;
}
.rig-empty {
padding: 32px;
text-align: center;
font-size: 14px;
color: var(--muted, #666);
border: 1px dashed rgba(0,51,255,0.15);
}
.rig-empty a { color: var(--blue-bright, #4488ff); }
/* No results state */
.gear-no-results {
text-align: center;
padding: 40px 20px;
font-size: 14px;
color: var(--muted, #666);
}
.gear-clear-filter {
background: transparent;
border: 1px solid rgba(0,51,255,0.3);
color: var(--blue-bright, #4488ff);
font-family: var(--font-mono, monospace);
font-size: 12px;
padding: 4px 14px;
cursor: pointer;
margin-left: 8px;
}
/* Mobile */
@media (max-width: 768px) {
.gear-stats-row { gap: 0; }
.gear-stat { padding: 14px 16px; }
.gear-stat-val { font-size: 22px; }
.gear-controls-row { flex-direction: column; align-items: flex-start; gap: 10px; }
.gear-search-wrap { margin-left: 0; width: 100%; }
.gear-search-input { width: 100%; }
.rig-panel-header { flex-direction: column; }
.rig-photo-wrap { width: 100%; }
}
/* =====================================================================
TARGET PLANNING — editable plan, prime window, action column
===================================================================== */
/* Plan toolbar (regenerate button) */
.plan-tl-toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px 6px;
border-bottom: 1px solid rgba(0,180,255,0.08);
}
.plan-tl-toolbar-status {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: rgba(0,180,255,0.5);
flex: 1;
}
.plan-regen-btn {
background: transparent;
border: 1px solid rgba(0,180,255,0.25);
color: rgba(0,180,255,0.65);
font-family: var(--font-mono, monospace);
font-size: 11px;
padding: 3px 12px;
cursor: pointer;
transition: color .15s, border-color .15s;
}
.plan-regen-btn:hover { color: #00c8ff; border-color: rgba(0,180,255,0.55); }
/* Remove button inside a plan slot row */
.plan-slot-remove {
background: transparent;
border: none;
color: rgba(255,80,80,0.4);
font-size: 10px;
cursor: pointer;
padding: 0 0 0 6px;
line-height: 1;
transition: color .15s;
vertical-align: middle;
}
.plan-slot-remove:hover { color: #ff4444; }
/* Gap slot styling */
.plan-tl-row--gap .plan-tl-label--gap {
color: rgba(0,200,120,0.35);
font-size: 13px;
}
.plan-tl-gap {
position: absolute;
height: 100%;
display: flex;
align-items: center;
border-radius: 2px;
overflow: hidden;
}
.plan-tl-gap-lbl {
font-family: var(--font-mono, monospace);
font-size: 9px;
letter-spacing: .06em;
color: rgba(200,230,200,0.45);
padding: 0 6px;
white-space: nowrap;
}
/* Prime window bar (45° — brighter than 30° backdrop) */
.plan-tl-prime {
position: absolute;
height: 100%;
opacity: 0.32;
border-radius: 2px;
pointer-events: none;
}
/* Target detail mini timeline — 45° bar */
.plan-mini-bar--45 { opacity: 0.7; }
.plan-mini-swatch--45 { display: inline-block; width: 10px; height: 3px; border-radius: 1px; vertical-align: middle; }
/* Action column */
.plan-action-th {
width: 72px;
text-align: center;
font-size: 11px;
color: rgba(0,180,255,0.5);
letter-spacing: .05em;
}
.plan-action-cell {
text-align: center;
white-space: nowrap;
}
.plan-add-btn {
background: transparent;
border: 1px solid rgba(0,180,255,0.3);
color: rgba(0,180,255,0.7);
font-family: var(--font-mono, monospace);
font-size: 10px;
padding: 2px 8px;
cursor: pointer;
transition: background .15s, color .15s;
border-radius: 2px;
}
.plan-add-btn:hover { background: rgba(0,180,255,0.12); color: #00c8ff; }
.plan-add-btn--na {
color: rgba(100,100,120,0.4);
border-color: rgba(100,100,120,0.15);
cursor: default;
font-size: 10px;
font-family: var(--font-mono, monospace);
padding: 2px 8px;
}
.plan-in-plan-badge {
font-family: var(--font-mono, monospace);
font-size: 10px;
color: #22cc66;
letter-spacing: .04em;
}
/* Scheduled target row highlight */
.plan-target-row--scheduled {
background: rgba(34,200,100,0.05) !important;
}
.plan-target-row--scheduled td:first-child::before {
content: '✓ ';
color: #22cc66;
font-size: 10px;
}
/* Fits-slots toggle */
.plan-fits-label {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono, monospace);
font-size: 11px;
color: rgba(0,180,255,0.55);
cursor: pointer;
white-space: nowrap;
margin-left: auto;
}
.plan-fits-label input { accent-color: #00c8ff; cursor: pointer; }
/* Score breakdown in target detail */
.plan-score-breakdown--detail { margin: 12px 0 0; border-top: 1px solid rgba(0,200,255,0.12); padding-top: 12px; }
.plan-sbd-title { font-family: var(--font-mono); font-size: 10px; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); margin-bottom: 6px; }
.plan-sbd-why { font-size: 12px; color: rgba(255,255,255,.65); margin-bottom: 8px; line-height: 1.5; }
.plan-sbd-extra { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-bottom: 8px; }
.plan-score-breakdown-row { display:grid; grid-template-columns:120px 1fr 44px 1fr; align-items:center; gap:6px; margin-bottom:5px; }
.plan-sbd-label { font-family:var(--font-mono); font-size:9.5px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.05em; }
.plan-sbd-bar-wrap { height:5px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.plan-sbd-bar { height:100%; border-radius:2px; transition:width .3s; }
.plan-sbd-val { font-family:var(--font-mono); font-size:9.5px; color:rgba(255,255,255,.6); text-align:right; }
.plan-sbd-note { font-size:10px; color:rgba(255,255,255,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plan-sbd-factors { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.plan-limit-badge { font-family:var(--font-mono); font-size:9px; padding:2px 6px; border-radius:3px; background:rgba(255,100,50,.1); color:#ff7040; border:1px solid rgba(255,100,50,.2); }
.plan-pos-badge { font-family:var(--font-mono); font-size:9px; padding:2px 6px; border-radius:3px; background:rgba(0,200,80,.1); color:#00dd66; border:1px solid rgba(0,200,80,.2); }
/* Session quality confidence + limiting factor */
.plan-score-confidence { font-family:var(--font-mono); font-size:10px; padding:5px 10px; border-radius:3px; background:rgba(240,160,0,.07); border:1px solid rgba(240,160,0,.2); margin:6px 0; }
.plan-limiting-factor-badge { display:inline-block; font-family:var(--font-mono); font-size:9.5px; padding:3px 8px; border-radius:3px; background:rgba(255,80,50,.08); color:#ff7040; border:1px solid rgba(255,80,50,.2); margin:4px 0 0; }
/* What's Visible Now — inlined inside Tonight's Observing Planner */
.moon-features-inline {
margin-top: 18px;
border-top: 1px solid rgba(0,200,200,0.12);
padding-top: 14px;
}
.moon-features-inline-hdr {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 0 2px;
}
.moon-features-inline-icon {
color: rgba(0,200,200,0.6);
font-size: 13px;
}
.moon-features-inline-title {
font-family: var(--font-mono, monospace);
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.moon-features-inline-badge {
font-family: var(--font-mono, monospace);
font-size: 10px;
color: rgba(0,200,200,0.6);
border: 1px solid rgba(0,200,200,0.2);
padding: 1px 7px;
margin-left: auto;
}
/* Orbital Interference — summary card enhancements */
.oi-card--highlight .oi-card-val { font-size: 28px; color: #00c8ff; }
.oi-card--starlink .oi-card-val { color: #4488aa; }
.oi-card--debris .oi-card-val { color: #666; }
.oi-card--rocket .oi-card-val { color: #888; }
.oi-card--ca .oi-card-icon { color: #a78bfa; font-size: 18px; }
.oi-card--ca .oi-card-val { color: #a78bfa; }
.oi-card--reentry .oi-card-icon { color: #f87171; font-size: 18px; }
.oi-card--reentry .oi-card-val { color: #f87171; }
.oi-card-icon--lg { font-size: 22px; opacity: .6; }
/* ── OI Command Center enhancements ─────────────────────────────────────── */
/* Panel loading / empty states */
.oi-panel-loading {
display: flex; align-items: center; gap: 10px; padding: 28px 20px;
font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.oi-empty-state {
text-align: center; padding: 40px 20px;
}
.oi-empty-icon { font-size: 28px; color: rgba(0,200,255,.2); margin-bottom: 10px; }
.oi-empty-title { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.oi-empty-sub { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.3); margin-top: 6px; }
/* CA + Reentry side-by-side row */
/* ── Watch chip row ──────────────────────────────────────────────── */
.oi-watch-chip-row {
display: flex; gap: 12px; margin-bottom: 20px;
}
.oi-watch-chip {
flex: 1; display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(0,200,255,.18);
border-radius: 6px; padding: 12px 18px;
cursor: pointer; text-align: left;
transition: background .15s, border-color .15s;
font-family: var(--font-mono); color: var(--text);
}
.oi-watch-chip:hover {
background: rgba(0,200,255,.06); border-color: rgba(0,200,255,.4);
}
.oi-watch-chip-icon { font-size: 18px; opacity: .7; flex-shrink: 0; }
.oi-watch-chip-label { font-size: 13px; font-weight: 600; flex: 1; }
.oi-watch-chip-count {
font-family: var(--font-orb, 'Orbitron', sans-serif);
font-size: 20px; font-weight: 700; min-width: 2ch; text-align: right;
}
.oi-watch-chip--conj .oi-watch-chip-count { color: rgba(0,200,255,.9); }
.oi-watch-chip--reentry .oi-watch-chip-count { color: #f87171; }
.oi-watch-chip-cta {
font-size: 10px; letter-spacing: .08em; color: rgba(0,200,255,.5);
white-space: nowrap;
}
@media (max-width: 600px) {
.oi-watch-chip-row { flex-direction: column; }
.oi-watch-chip-count { font-size: 16px; }
}
/* ── Watch modals (CA + Reentry) ─────────────────────────────────── */
.oi-watch-modal {
position: fixed; inset: 0; z-index: 1200;
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.oi-watch-modal[hidden] { display: none !important; }
.oi-watch-modal-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,.78);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.oi-watch-modal-panel {
position: relative; z-index: 1;
background: #080c1e;
border: 1px solid rgba(0,200,255,.2);
border-radius: 8px;
box-shadow: 0 32px 100px rgba(0,0,0,.9), 0 0 0 1px rgba(0,200,255,.06);
width: min(1100px, 100%);
height: calc(100dvh - 40px); height: calc(100vh - 40px);
display: flex; flex-direction: column;
overflow: hidden;
animation: at-modal-in .2s ease;
}
.oi-watch-modal-hdr {
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
padding: 14px 20px;
background: rgba(0,0,0,.3);
border-bottom: 1px solid rgba(0,200,255,.1);
}
.oi-watch-modal-body {
flex: 1; min-height: 0;
overflow-y: auto; overflow-x: hidden;
scrollbar-width: thin; scrollbar-color: rgba(0,200,255,.25) transparent;
}
.oi-watch-modal-icon { font-size: 16px; opacity: .7; }
.oi-watch-modal-title {
font-family: var(--font-mono); font-size: 13px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: rgba(0,200,255,.85);
}
.oi-watch-modal-close {
margin-left: auto; flex-shrink: 0;
background: transparent; border: 1px solid rgba(255,255,255,.15);
border-radius: 3px; color: var(--muted); cursor: pointer;
font-size: 12px; padding: 5px 10px;
transition: color .15s, border-color .15s;
}
.oi-watch-modal-close:hover { color: #f87171; border-color: #f87171; }
.oi-watch-modal-body { padding: 0; }
/* ── Watch modal interior layout overrides ───────────────────────── */
/* KPI / filter overrides — reentry modal (CA modal has its own column-scoped rules) */
#oi-reentry-modal .oi-watch-modal-body .oi-kpi-strip { padding: 14px 24px; }
#oi-reentry-modal .oi-watch-modal-body .oi-kpi-item { padding: 6px 20px; }
#oi-reentry-modal .oi-watch-modal-body .oi-kpi-val { font-size: 22px; }
#oi-reentry-modal .oi-watch-modal-body .oi-filter-bar {
padding: 14px 24px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
#oi-reentry-modal .oi-watch-modal-body .oi-filter-group { gap: 6px; flex-wrap: wrap; }
#oi-reentry-modal .oi-watch-modal-body .oi-filter-group--sort { margin-left: 0; }
/* CC console grid — used by reentry modal left/right panels */
#oi-reentry-modal .oi-watch-modal-body .cc-console-grid {
grid-template-columns: 360px 1fr;
}
/* Event list — remove the 560px cap so the modal scrolls, not an inner box */
.oi-watch-modal-body .cc-events-list {
max-height: none;
overflow-y: visible;
gap: 6px;
padding: 0 12px 16px;
}
/* Event cards — more padding and gap */
.oi-watch-modal-body .cc-ev-card {
padding: 14px 16px;
gap: 8px;
}
.oi-watch-modal-body .cc-ev-pair { gap: 8px; }
.oi-watch-modal-body .cc-ev-footer { margin-top: 2px; }
/* Events header — slightly more presence */
.oi-watch-modal-body .cc-events-hdr { padding: 12px 16px 8px; }
/* Radar + matrix panels — a little more padding */
.oi-watch-modal-body .cc-radar-panel { padding-bottom: 12px; }
.oi-watch-modal-body .cc-matrix-panel { padding-bottom: 14px; }
/* Reentry grid: 2 columns with generous spacing */
.oi-watch-modal-body .oi-reentry-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
padding: 20px 24px;
}
.oi-watch-modal-body .oi-reentry-card { padding: 16px; gap: 10px; }
/* Let body expand — modal panel scrolls, not internal lists */
.oi-watch-modal-body .oi-ca-body,
.oi-watch-modal-body .oi-reentry-body { max-height: none; }
/* Timeline — margin to align with filter/kpi padding */
.oi-watch-modal-body .oi-rt-timeline-wrap { margin: 4px 24px 8px; }
/* Inspector — breathing room */
.oi-watch-modal-body .cc-inspector { margin: 0 16px 16px; }
/* CA modal: flex column — stats top, globe middle, filters+events bottom */
#oi-ca-modal .oi-watch-modal-body {
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Stats strip — full width, compact */
#oi-ca-modal .oi-kpi-strip {
flex-shrink: 0;
padding: 10px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
#oi-ca-modal .oi-kpi-item { padding: 4px 14px; }
#oi-ca-modal .oi-kpi-val { font-size: 20px; }
/* Globe mid — fills available space */
.oi-ca-globe-mid {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.oi-ca-globe {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
}
/* Let Three.js own the canvas dimensions — no CSS stretching */
.oi-ca-globe canvas { display: block; }
.oi-ca-globe-legend {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
gap: 3px 12px;
justify-content: center;
font-size: 10px;
color: var(--muted, #666);
letter-spacing: 0.04em;
padding: 5px 8px;
border-top: 1px solid rgba(255,255,255,0.04);
}
.oi-glg-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
vertical-align: middle;
margin-right: 3px;
}
/* Bottom section — filters then scrollable event list */
.oi-ca-bottom-section {
flex-shrink: 0;
display: flex;
flex-direction: column;
max-height: 36vh;
border-top: 1px solid rgba(255,255,255,0.07);
}
.oi-ca-bottom-section .oi-filter-bar {
flex-shrink: 0;
padding: 8px 20px;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 6px 16px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.oi-ca-bottom-section .oi-ca-body {
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0,200,255,.2) transparent;
}
/* Within the bottom section the body scroll owns the viewport — no inner cap needed */
.oi-ca-bottom-section .cc-events-list {
overflow-y: visible;
max-height: none;
}
@media (max-width: 700px) {
.oi-watch-modal-body .cc-console-grid { grid-template-columns: 1fr; }
.oi-watch-modal-body .cc-console-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
.oi-watch-modal-body .oi-reentry-grid { grid-template-columns: 1fr; padding: 12px 14px; }
.oi-watch-modal-body .oi-filter-bar,
.oi-watch-modal-body .oi-kpi-strip { padding: 12px 14px; }
.oi-watch-modal-body .oi-rt-timeline-wrap { margin: 4px 14px 8px; }
}
/* CA + Reentry panel headers */
.oi-ca-panel, .oi-reentry-panel { margin-bottom: 16px; }
.oi-ca-tabs {
display: flex; gap: 4px; margin-left: auto;
}
.oi-ca-tab {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
border: 1px solid rgba(0,200,255,.18); border-radius: 3px;
background: transparent; color: var(--muted); cursor: pointer; padding: 4px 10px;
transition: all .15s;
}
.oi-ca-tab:hover { color: var(--text); border-color: rgba(0,200,255,.4); }
.oi-ca-tab--active { color: var(--teal); border-color: var(--teal); background: rgba(0,200,255,.07); }
/* Close Approach body */
.oi-ca-body {
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
gap: 12px; padding: 16px;
}
.oi-ca-card {
background: rgba(255,255,255,.02); border: 1px solid rgba(0,200,255,.12);
border-radius: 6px; padding: 14px 16px;
transition: border-color .15s;
}
.oi-ca-card:hover { border-color: rgba(0,200,255,.3); }
.oi-ca-risk--watch { border-left: 3px solid #f59e0b; }
.oi-ca-risk--high { border-left: 3px solid #f87171; }
.oi-ca-risk--crit { border-left: 3px solid #f87171; box-shadow: 0 0 10px rgba(248,113,113,.15); }
.oi-ca-card-head {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px;
}
.oi-ca-countdown {
font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--teal); line-height: 1;
}
.oi-ca-tca { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.oi-ca-objects {
display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.oi-ca-obj {
display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 100px;
padding: 6px 10px; border-radius: 4px;
background: rgba(0,0,0,.25); border: 1px solid rgba(0,200,255,.1);
text-decoration: none; color: var(--text);
transition: border-color .12s;
}
.oi-ca-obj:hover { border-color: var(--teal); }
.oi-ca-vs { font-family: var(--font-mono); color: var(--muted); font-size: 14px; align-self: center; }
.oi-ca-obj-type { font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.oi-ca-obj-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); }
.oi-ca-obj-norad { font-family: var(--font-mono); font-size: 10px; color: var(--teal); }
.oi-ca-card-stats {
display: flex; gap: 16px; flex-wrap: wrap;
}
.oi-ca-stat { display: flex; flex-direction: column; gap: 2px; }
.oi-ca-stat-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.oi-ca-stat-v { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); }
.oi-ca-risk--watch .oi-ca-stat-v { color: #f59e0b; }
.oi-ca-risk--high .oi-ca-stat-v { color: #f87171; }
.oi-ca-risk--crit .oi-ca-stat-v { color: #f87171; }
/* Reentry body */
.oi-reentry-body { padding: 16px; }
.oi-reentry-list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
gap: 12px;
}
.oi-reentry-card {
background: rgba(255,255,255,.02); border: 1px solid rgba(0,200,255,.1);
border-radius: 6px; padding: 14px 16px;
border-left: 3px solid rgba(0,200,255,.3);
}
.oi-reentry--rocket { border-left-color: #888; }
.oi-reentry--payload { border-left-color: #60a5fa; }
.oi-reentry--debris { border-left-color: #666; }
.oi-reentry--confirmed { border-color: rgba(52,211,153,.2); border-left-color: #34d399; opacity: .7; }
.oi-reentry-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
/* Constellation membership badge on reentry/CDM objects */
.oi-constellation-badge {
font-family: var(--font-mono); font-size: 9px; padding: 1px 6px; letter-spacing: .06em;
background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.3); color: #60a5fa;
text-decoration: none; margin-left: auto; white-space: nowrap;
}
.oi-constellation-badge:hover { background: rgba(96,165,250,.2); }
/* Space-traffic profile drawer — Launch Origin section */
.mm-pd-origin { margin-top: 10px; padding: 10px 12px; background: rgba(0,200,255,.04); border: 1px solid rgba(0,200,255,.12); }
.mm-pd-origin-hdr { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.mm-pd-origin-mission { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: flex; align-items: baseline; gap: 8px; }
.mm-pd-origin-link { color: #60a5fa; text-decoration: none; }
.mm-pd-origin-link:hover { text-decoration: underline; }
.mm-pd-origin-date { font-size: 10px; color: var(--muted); font-weight: 400; }
.mm-pd-origin-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mm-pd-chip { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px;
border: 1px solid rgba(255,255,255,.12); color: var(--muted); }
a.mm-pd-chip { text-decoration: none; color: #60a5fa; border-color: rgba(96,165,250,.25); transition: background .12s; }
a.mm-pd-chip:hover { background: rgba(96,165,250,.1); }
.oi-reentry-countdown {
font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: #f87171; line-height: 1;
}
.oi-reentry-confirmed-badge {
font-family: var(--font-mono); font-size: 11px; color: #34d399;
border: 1px solid rgba(52,211,153,.3); border-radius: 3px; padding: 3px 10px;
}
.oi-reentry-type-badge {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
color: var(--muted); border: 1px solid rgba(255,255,255,.12); border-radius: 2px; padding: 2px 8px;
margin-left: auto;
}
.oi-reentry-name {
font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.oi-reentry-link { color: var(--text); text-decoration: none; }
.oi-reentry-link:hover { color: var(--teal); }
.oi-reentry-meta {
display: flex; gap: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-bottom: 8px;
}
.oi-reentry-decay { font-family: var(--font-mono); font-size: 11px; margin-bottom: 8px; }
.oi-reentry-decay-k { color: var(--muted); }
.oi-reentry-decay-v { color: var(--text); margin-left: 6px; }
.oi-reentry-uncertainty { margin-bottom: 8px; }
.oi-reentry-unc-bar {
height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; margin-bottom: 3px;
}
.oi-reentry-unc-fill { height: 100%; background: rgba(248,113,113,.5); border-radius: 2px; }
.oi-reentry-unc-label { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.oi-reentry-orbit {
display: flex; gap: 12px; flex-wrap: wrap;
font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-bottom: 6px;
}
.oi-reentry-source { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.25); }
.oi-reentry-source.oi-re-src--tip { color: #4ade80; }
.oi-reentry-source.oi-re-src--daily { color: rgba(255,255,255,.4); }
.oi-reentry-source.oi-re-src--rough { color: rgba(255,255,255,.2); }
.oi-re-next-report { font-family: var(--font-mono); font-size: 9.5px; color: #4ade80; margin-top: 3px; }
.oi-reentry-date-only { display: block; font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.3); font-style: italic; margin-top: 2px; }
/* ── OI Console Enhancements ─────────────────────────────────────────────── */
/* KPI strip */
.oi-kpi-strip {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0;
padding: 10px 20px;
border-bottom: 1px solid rgba(0,200,255,.08);
background: rgba(0,0,0,.15);
}
.oi-kpi-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 4px 16px;
min-width: 72px;
}
.oi-kpi-sep { width: 1px; background: rgba(255,255,255,.07); margin: 4px 0; }
.oi-kpi-val {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
color: var(--teal);
line-height: 1;
}
.oi-kpi-val--payload { color: #60a5fa; }
.oi-kpi-val--debris { color: #9ca3af; }
.oi-kpi-val--overdue { color: #f87171; }
.oi-kpi-val--confirmed { color: #34d399; }
.oi-kpi-val--age { color: rgba(255,255,255,.4); font-size: 13px; font-weight: 400; }
.oi-kpi-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
/* Filter bar */
.oi-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 20px;
padding: 10px 20px;
border-bottom: 1px solid rgba(0,200,255,.07);
background: rgba(0,0,0,.1);
}
.oi-filter-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.oi-filter-group--sort { margin-left: auto; }
.oi-chip {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .05em;
text-transform: uppercase;
padding: 4px 10px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 3px;
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.5);
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.oi-chip:hover { border-color: rgba(0,200,255,.4); color: var(--text); }
.oi-chip--active { color: var(--teal); border-color: var(--teal); background: rgba(0,200,255,.08); }
.oi-chip--crit { border-color: rgba(248,113,113,.3); color: rgba(248,113,113,.7); }
.oi-chip--crit.oi-chip--active { border-color: #f87171; color: #f87171; background: rgba(248,113,113,.1); }
.oi-chip--vclose { border-color: rgba(251,146,60,.3); color: rgba(251,146,60,.7); }
.oi-chip--vclose.oi-chip--active { border-color: #fb923c; color: #fb923c; background: rgba(251,146,60,.1); }
.oi-chip--watch { border-color: rgba(250,204,21,.3); color: rgba(250,204,21,.7); }
.oi-chip--watch.oi-chip--active { border-color: #facc15; color: #facc15; background: rgba(250,204,21,.1); }
.oi-chip--unk { border-color: rgba(156,163,175,.3); color: rgba(156,163,175,.7); }
.oi-chip--unk.oi-chip--active { border-color: #9ca3af; color: #9ca3af; background: rgba(156,163,175,.1); }
.oi-sort-sel {
font-family: var(--font-mono);
font-size: 11px;
background: rgba(0,0,0,.4);
border: 1px solid rgba(0,200,255,.2);
color: var(--text);
padding: 4px 10px;
border-radius: 3px;
cursor: pointer;
}
.oi-sort-sel:focus { outline: 1px solid var(--teal); outline-offset: 2px; }
/* Severity badges */
.oi-sev-badge {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 3px;
border: 1px solid currentColor;
line-height: 1;
}
.oi-sev--crit { color: #f87171; background: rgba(248,113,113,.12); }
.oi-sev--vclose { color: #fb923c; background: rgba(251,146,60,.12); }
.oi-sev--watch { color: #facc15; background: rgba(250,204,21,.12); }
.oi-sev--monitor { color: rgba(0,200,255,.7); background: rgba(0,200,255,.07); }
.oi-sev--unk { color: rgba(156,163,175,.8); background: rgba(156,163,175,.08); }
/* Type pills */
.oi-type-pill {
display: inline-block;
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 2px;
border: 1px solid currentColor;
margin-bottom: 4px;
}
.oi-type--payload { color: #60a5fa; }
.oi-type--debris { color: #9ca3af; }
.oi-type--rocket { color: #c084fc; }
.oi-type--unk { color: rgba(255,255,255,.3); }
.oi-type--analyst { color: #f59e0b; border-style: dashed; }
/* Reset old body grid — layout is now owned by .oi-ca-grid inside */
.oi-ca-body { display: block; padding: 0; gap: 0; }
/* CA card grid — 3-column */
.oi-ca-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 12px 16px;
}
/* Card: horizontal split — LHS (meta) | RHS (objects) */
.oi-ca-card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 0;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-left: 3px solid rgba(156,163,175,.2);
border-radius: 6px;
overflow: hidden;
transition: border-color .15s;
}
.oi-ca-card:focus { outline: 1px solid var(--teal); outline-offset: 2px; }
.oi-ca-card:hover { border-color: rgba(0,200,255,.25); }
.oi-ca-card--critical { border-left-color: #f87171; box-shadow: 0 0 10px rgba(248,113,113,.1); }
.oi-ca-card--vclose { border-left-color: #fb923c; }
.oi-ca-card--watch { border-left-color: #facc15; }
.oi-ca-card--monitor { border-left-color: rgba(0,200,255,.5); }
.oi-ca-card--unknown { border-left-color: rgba(156,163,175,.25); }
/* Left column: severity, miss dist, TCA, countdown, footer */
.oi-ca-card-lhs {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
border-right: 1px solid rgba(255,255,255,.06);
background: rgba(0,0,0,.12);
min-width: 0;
}
.oi-ca-card-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.oi-ca-miss-val {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 700;
color: rgba(255,255,255,.3);
}
.oi-ca-miss-val.oi-sev--crit { color: #f87171; }
.oi-ca-miss-val.oi-sev--vclose { color: #fb923c; }
.oi-ca-miss-val.oi-sev--watch { color: #facc15; }
.oi-ca-miss-val.oi-sev--monitor { color: var(--teal); }
.oi-ca-miss-val.oi-sev--unk { color: rgba(255,255,255,.25); font-style: italic; }
.oi-ca-tca-row {
display: flex;
flex-direction: column;
gap: 1px;
}
.oi-ca-tca-label {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.oi-ca-tca-val {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text);
}
.oi-ca-countdown-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.oi-ca-cdwn {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
color: var(--teal);
}
.oi-ca-extras {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 2px;
}
.oi-ca-extra {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
}
.oi-ca-footer {
font-family: var(--font-mono);
font-size: 9px;
color: rgba(255,255,255,.18);
margin-top: auto;
padding-top: 4px;
}
/* Crossing-path SVG glyph */
.oi-ca-glyph {
width: 24px;
height: 24px;
flex-shrink: 0;
opacity: .7;
}
@media (prefers-reduced-motion: reduce) { .oi-ca-glyph { display: none; } }
/* Right column: object rows */
.oi-ca-card-rhs {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px 14px;
gap: 0;
min-width: 0;
}
.oi-ca-obj-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 8px 4px;
text-decoration: none;
color: inherit;
border-radius: 4px;
transition: background .12s;
min-width: 0;
}
a.oi-ca-obj-row:hover { background: rgba(0,200,255,.05); }
.oi-ca-obj-name {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 260px;
}
.oi-ca-obj-norad {
font-family: var(--font-mono);
font-size: 10px;
color: var(--teal);
flex-shrink: 0;
}
.oi-ca-obj-meta {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
flex-shrink: 0;
}
.oi-ca-obj-sep {
height: 1px;
background: rgba(255,255,255,.06);
margin: 0 4px;
}
/* Unused legacy sat-block (kept for any remaining references) */
.oi-sat-block { display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }
.oi-sat-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); }
.oi-sat-norad { font-family: var(--font-mono); font-size: 10px; color: var(--teal); }
.oi-sat-meta { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.oi-sat-status--active { color: #34d399; }
.oi-sat-status--decayed { color: #9ca3af; }
/* Reentry grid */
.oi-reentry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 16px;
}
.oi-reentry-card {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-left: 3px solid rgba(255,255,255,.15);
border-radius: 6px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color .15s;
}
.oi-reentry-card:focus { outline: 1px solid var(--teal); outline-offset: 2px; }
.oi-reentry-card:hover { border-color: rgba(0,200,255,.25); }
.oi-reentry--overdue { border-left-color: #f87171; box-shadow: 0 0 10px rgba(248,113,113,.1); }
/* Reentry status badges */
.oi-re-status-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
border: 1px solid currentColor;
line-height: 1;
}
.oi-re-status--predicted { color: var(--teal); background: rgba(0,200,255,.07); }
.oi-re-status--confirmed { color: #34d399; background: rgba(52,211,153,.08); }
.oi-re-status--overdue { color: #f87171; background: rgba(248,113,113,.1); }
.oi-re-status--unknown { color: rgba(156,163,175,.8); background: rgba(156,163,175,.08); }
/* Reentry timing display */
.oi-re-timing {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
}
.oi-re-timing--future { color: var(--teal); font-size: 20px; }
.oi-re-timing--confirmed { color: #34d399; }
.oi-re-timing--overdue { color: #f87171; font-size: 11px; line-height: 1.4; }
.oi-re-elapsed { color: rgba(248,113,113,.6); font-size: 10px; }
/* Reentry timeline */
.oi-rt-timeline-wrap {
padding: 12px 20px 8px;
border-bottom: 1px solid rgba(0,200,255,.07);
}
.oi-tl-labels {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
margin-bottom: 4px;
}
.oi-tl-track {
position: relative;
height: 20px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 3px;
overflow: visible;
}
.oi-tl-now {
position: absolute;
top: -3px;
bottom: -3px;
width: 2px;
background: rgba(255,255,255,.4);
border-radius: 1px;
transform: translateX(-50%);
z-index: 1;
}
.oi-tl-marker {
position: absolute;
top: 3px;
bottom: 3px;
width: 6px;
border-radius: 2px;
transform: translateX(-50%);
cursor: default;
transition: transform .1s;
z-index: 2;
}
.oi-tl-marker:focus { outline: 1px solid var(--teal); outline-offset: 1px; }
.oi-tl-marker:hover { transform: translateX(-50%) scaleY(1.4); }
.oi-tl-marker--predicted { background: var(--teal); }
.oi-tl-marker--overdue { background: #f87171; }
.oi-tl-marker--confirmed { background: #34d399; opacity: .7; }
.oi-tl-legend {
display: flex;
gap: 14px;
margin-top: 6px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
align-items: center;
}
.oi-tl-leg-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
}
/* Override old reentry-list layout (now uses grid) */
.oi-reentry-list { display: contents; }
@media (max-width: 1100px) {
.oi-ca-grid, .oi-reentry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.oi-ca-body, .oi-reentry-list { grid-template-columns: 1fr; }
.oi-ca-tabs { display: none; }
.oi-ca-grid, .oi-reentry-grid { grid-template-columns: 1fr; }
/* CA card: stack LHS/RHS vertically on mobile */
.oi-ca-card { grid-template-columns: 1fr; }
.oi-ca-card-lhs { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.oi-kpi-strip { gap: 0; }
.oi-kpi-item { padding: 4px 10px; min-width: 60px; }
.oi-kpi-val { font-size: 15px; }
.oi-filter-bar { gap: 8px 12px; }
.oi-filter-group--sort { margin-left: 0; }
}
/* Filter label */
.oi-filter-label {
font-family: var(--font-mono, monospace);
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(0,180,255,0.4);
align-self: center;
padding-right: 4px;
}
/* Observer bar at the bottom of the dome card */
.oi-observer-bar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 16px;
padding: 12px 20px 14px;
border-top: 1px solid rgba(0,180,255,0.08);
background: rgba(0,0,0,0.15);
}
/* ── Config button in panel header ─────────────────────────────── */
.oi-config-btn {
margin-left: 8px;
font-size: 10px;
padding: 3px 9px;
border-radius: 3px;
border: 1px solid var(--blue-border);
background: transparent;
color: var(--muted);
cursor: pointer;
letter-spacing: 0.04em;
transition: color .15s, border-color .15s;
white-space: nowrap;
}
.oi-config-btn:hover { color: var(--accent); border-color: var(--accent); }
/* ── Config modal ───────────────────────────────────────────────── */
.oi-config-modal {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
}
.oi-config-modal[hidden] { display: none; }
.oi-config-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.65);
}
.oi-config-panel {
position: relative;
z-index: 1;
background: #080f1c;
border: 1px solid var(--blue-border);
border-radius: 8px;
width: min(520px, 96vw);
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
.oi-config-hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px 12px;
border-bottom: 1px solid var(--blue-border);
flex-shrink: 0;
}
.oi-config-title { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.05em; }
.oi-config-close {
background: none; border: none; color: var(--muted);
font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 3px;
transition: color .15s;
}
.oi-config-close:hover { color: var(--text); }
.oi-config-body {
overflow-y: auto;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 20px;
}
.oi-config-section { display: flex; flex-direction: column; gap: 8px; }
.oi-config-section-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
opacity: 0.7;
padding-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.oi-config-row {
display: flex;
align-items: center;
gap: 10px;
}
.oi-config-lbl {
font-size: 11px;
color: var(--muted);
min-width: 110px;
}
.oi-check-group { display: flex; gap: 12px; }
/* ── Icon config rows ───────────────────────────────────────────── */
.oi-icon-row {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.oi-icon-row:last-child { border-bottom: none; }
.oi-icon-row-lbl { font-size: 11px; color: var(--muted); min-width: 80px; }
.oi-color-swatch {
width: 20px; height: 20px;
border-radius: 4px;
border: 1px solid var(--blue-border);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
transition: border-color .15s;
}
.oi-color-swatch:hover { border-color: var(--accent); }
.oi-color-input { opacity: 0; position: absolute; width: 0; height: 0; pointer-events: none; }
.oi-shape-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.oi-shape-btn {
width: 24px; height: 24px;
padding: 0;
border-radius: 3px;
border: 1px solid var(--blue-border);
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color .15s, background .15s;
}
.oi-shape-btn:hover { border-color: var(--muted); background: rgba(255,255,255,0.04); }
.oi-shape-btn--active { border-color: var(--accent); background: rgba(0,200,255,0.1); }
/* ─────────────────────────────────────────────────────────────────────────────
EARTH WEATHER REDESIGN — compact charts/timelines
All selectors prefixed wx-current-, wx-next24-, wx-7day-, wx-day-
───────────────────────────────────────────────────────────────────────── */
:root {
--wx-cond-clear: rgba(255,210, 80,.15);
--wx-cond-night: rgba( 30, 50,130,.32);
--wx-cond-partly: rgba(110,155,200,.18);
--wx-cond-cloudy: rgba( 70, 80,100,.30);
--wx-cond-rain: rgba( 35,110,220,.30);
--wx-cond-snow: rgba(170,215,255,.25);
--wx-cond-storm: rgba( 90, 30,155,.38);
--wx-cond-wind: rgba( 50,170,170,.20);
--wx-cond-fog: rgba( 90, 90,115,.25);
}
/* ── Current Conditions ─────────────────────────────────────────────────── */
.wx-current-panel .toolbox-panel-hdr { border-bottom: 1px solid var(--blue-border); }
.wx-current-body {
display: grid;
grid-template-columns: 190px 1fr;
}
.wx-current-hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 14px;
border-right: 1px solid var(--blue-border);
gap: 4px;
text-align: center;
}
.wx-current-location {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--muted);
}
.wx-current-icon { font-size: 52px; line-height: 1; margin: 6px 0 4px; }
.wx-current-temp { font-family: var(--font-mono); font-size: 36px; font-weight: 700; color: var(--text); line-height: 1; }
.wx-current-feels { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.wx-current-summary { font-size: 12px; color: var(--muted-light); margin-top: 4px; max-width: 160px; line-height: 1.4; }
.wx-current-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-content: start;
}
.wx-cg-item {
display: flex;
flex-direction: column;
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,.03);
border-right: 1px solid rgba(255,255,255,.03);
gap: 3px;
}
.wx-cg-item:nth-child(3n) { border-right: none; }
.wx-cg-item--arrow { align-items: center; }
.wx-cg-lbl {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
}
.wx-cg-val { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.wx-wind-dir-txt { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.wx-wind-arrow-wrap { margin-top: 2px; color: var(--muted-light); }
.wx-current-footer {
padding: 5px 20px;
border-top: 1px solid rgba(255,255,255,.03);
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
opacity: .5;
}
@media (max-width: 700px) {
.wx-current-body { grid-template-columns: 1fr; }
.wx-current-hero { border-right: none; border-bottom: 1px solid var(--blue-border); }
.wx-current-grid { grid-template-columns: repeat(2, 1fr); }
.wx-cg-item:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.03); }
.wx-cg-item:nth-child(2n) { border-right: none; }
}
/* ── Next 24 Hours ──────────────────────────────────────────────────────── */
.wx-next24-outer {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 16px 10px;
scrollbar-width: thin;
scrollbar-color: var(--blue-border) transparent;
}
.wx-next24-outer::-webkit-scrollbar { height: 4px; }
.wx-next24-outer::-webkit-scrollbar-track { background: transparent; }
.wx-next24-outer::-webkit-scrollbar-thumb { background: var(--blue-border); border-radius: 2px; }
.wx-next24-strip { display: flex; gap: 5px; min-width: max-content; }
.wx-h-block {
display: flex;
flex-direction: column;
align-items: center;
width: 56px;
padding: 8px 4px 6px;
border-radius: 5px;
background: var(--block-bg, var(--wx-cond-cloudy));
border: 1px solid rgba(255,255,255,.06);
gap: 3px;
transition: border-color .15s;
cursor: default;
flex-shrink: 0;
}
.wx-h-block:hover { border-color: rgba(255,255,255,.2); }
.wx-hb-icon { font-size: 20px; line-height: 1; }
.wx-hb-time { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.wx-hb-temp { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); }
.wx-hb-precip-wrap {
width: 88%;
height: 3px;
background: rgba(255,255,255,.08);
border-radius: 2px;
overflow: hidden;
margin-top: 1px;
}
.wx-hb-precip-bar {
height: 100%;
width: calc(var(--pp, 0) * 1%);
background: var(--wx-cond-rain);
border-radius: 2px;
}
.wx-hb-cloud--low { opacity: 1; }
.wx-hb-cloud--mid { opacity: .82; }
.wx-hb-cloud--high { opacity: .65; }
.wx-next24-fallback { padding: 14px 20px; font-size: 12px; color: var(--muted); }
/* ── 7-Day SVG Charts ───────────────────────────────────────────────────── */
.wx-7day-charts { padding: 0 14px 14px; }
.wx-7day-charts svg { display: block; width: 100%; overflow: visible; }
.wx-7day-svg { }
.wx-chart-temp-line { stroke: #e6b432; stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.wx-chart-dew-line { stroke: #50b0d0; stroke-width: 1.5; fill: none; stroke-dasharray: 4 3; stroke-linejoin: round; stroke-linecap: round; }
.wx-chart-cloud-fill { fill: rgba(70,95,140,.28); stroke: none; }
.wx-chart-cloud-line { stroke: rgba(90,115,170,.6); stroke-width: 1; fill: none; stroke-linejoin: round; }
.wx-chart-precip-bar { fill: rgba(40,110,220,.55); }
.wx-chart-row-sep { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.wx-chart-label { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.wx-chart-dew-label { fill: #50b0d0; }
.wx-chart-day-label { fill: var(--text); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.wx-chart-overlay-col { fill: transparent; cursor: crosshair; }
.wx-chart-overlay-col:hover { fill: rgba(255,255,255,.03); }
/* ── Daily Breakdown accordion ──────────────────────────────────────────── */
.wx-daily-timelines { display: flex; flex-direction: column; }
.wx-day-panel { border-bottom: 1px solid rgba(255,255,255,.04); }
.wx-day-panel:last-child { border-bottom: none; }
.wx-day-hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 20px;
cursor: pointer;
user-select: none;
transition: background .1s;
flex-wrap: wrap;
}
.wx-day-hdr:hover { background: rgba(255,255,255,.02); }
.wx-day-hdr:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.wx-day-name { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--teal); min-width: 34px; }
.wx-day-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: .75; }
.wx-day-emoji { font-size: 18px; }
.wx-day-hilo { font-family: var(--font-mono); font-size: 13px; color: var(--text); min-width: 70px; }
.wx-day-wind { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: auto; }
.wx-day-precip { font-family: var(--font-mono); font-size: 11px; color: #50b0d0; }
.wx-day-chevron { font-size: 10px; color: var(--muted); flex-shrink: 0; }
.wx-day-body {
padding: 6px 20px 14px;
}
.wx-day-seg-bar {
display: flex;
height: 30px;
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.06);
}
.wx-day-seg {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
flex-shrink: 0;
border-right: 1px solid rgba(0,0,0,.12);
min-width: 2px;
overflow: hidden;
padding: 0 5px;
}
.wx-day-seg:last-child { border-right: none; }
.wx-day-seg-em { font-size: 14px; line-height: 1; flex-shrink: 0; }
.wx-day-seg-lbl {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Hide text label in very narrow segments (< ~15% width) — use CSS container trick */
.wx-day-seg[data-hours="1"] .wx-day-seg-lbl { display: none; }
.wx-day-seg[data-hours="1"] { padding: 0 2px; justify-content: center; }
.wx-day-ticks {
position: relative;
height: 26px;
margin-top: 3px;
}
.wx-day-tick {
position: absolute;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
white-space: nowrap;
text-align: center;
line-height: 1.3;
}
.wx-day-tick-temp {
display: block;
font-size: 10px;
color: var(--text);
font-weight: 600;
}
.wx-daily-toggle-row {
padding: 10px 20px;
border-top: 1px solid rgba(255,255,255,.04);
}
.wx-daily-show-more {
background: transparent;
border: 1px solid var(--blue-border);
color: var(--muted-light);
font-family: var(--font-mono);
font-size: 11px;
padding: 5px 14px;
cursor: pointer;
border-radius: 2px;
transition: border-color .15s, color .15s;
}
.wx-daily-show-more:hover { border-color: var(--teal); color: var(--teal); }
@media (max-width: 600px) {
.wx-day-wind { margin-left: 0; }
.wx-day-hdr { gap: 7px; padding: 10px 14px; }
.wx-day-body { padding: 6px 14px 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
MANMADE OBJECTS — enhanced panels
═══════════════════════════════════════════════════════════════════════════ */
/* ── Ingest health strip ─────────────────────────────────────────────────── */
.mm-ingest-strip {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
padding: 8px 20px;
background: rgba(0,0,0,.25);
border-bottom: 1px solid rgba(255,255,255,.05);
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
}
.mm-is-item {
display: flex;
align-items: center;
gap: 5px;
}
.mm-is-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--muted);
flex-shrink: 0;
}
.mm-is-dot.ok { background: #3ddc84; }
.mm-is-dot.warn { background: #f0b429; }
.mm-is-dot.err { background: #e05c5c; }
.mm-is-label { color: var(--muted); }
.mm-is-val { color: var(--text); }
/* ── Empty state ─────────────────────────────────────────────────────────── */
.mm-empty-state {
padding: 28px 20px;
text-align: center;
font-size: 12px;
color: var(--muted);
font-family: var(--font-mono);
letter-spacing: .05em;
}
.mm-empty-icon { font-size: 24px; margin-bottom: 8px; opacity: .4; }
/* ── Orbit class bars ────────────────────────────────────────────────────── */
.mm-orbit-classes { margin: 14px 20px 0; }
.mm-oc-bars {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 8px;
}
.mm-oc-row {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
}
.mm-oc-label {
width: 40px;
color: var(--muted);
flex-shrink: 0;
text-align: right;
}
.mm-oc-bar-wrap {
flex: 1;
height: 8px;
background: rgba(255,255,255,.07);
border-radius: 2px;
overflow: hidden;
}
.mm-oc-bar-fill {
height: 100%;
border-radius: 2px;
transition: width .6s ease;
}
.mm-oc-bar-fill.leo { background: #4fc3f7; }
.mm-oc-bar-fill.meo { background: #81c784; }
.mm-oc-bar-fill.geo { background: #ffd54f; }
.mm-oc-bar-fill.heo { background: #ba68c8; }
.mm-oc-bar-fill.unk { background: var(--muted); }
.mm-oc-count {
width: 40px;
color: var(--muted-light);
font-size: 10px;
text-align: right;
flex-shrink: 0;
}
/* ── Above-Horizon stats row ─────────────────────────────────────────────── */
.mm-horizon-stats {
display: flex;
flex-wrap: wrap;
gap: 1px;
padding: 0;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.mm-hs-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 20px;
border-right: 1px solid rgba(255,255,255,.05);
min-width: 80px;
flex: 1;
}
.mm-hs-card--wide { min-width: 140px; flex: 2; }
.mm-hs-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 600;
color: var(--text);
line-height: 1.1;
}
.mm-hs-sunlit { color: #ffe060; }
.mm-hs-visible { color: #3de0c0; }
.mm-hs-high { color: var(--muted-light); font-size: 14px !important; }
.mm-hs-fast { color: var(--muted-light); font-size: 14px !important; }
.mm-hs-stale { color: #f0b429; }
.mm-hs-lbl {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
letter-spacing: .06em;
text-align: center;
margin-top: 3px;
white-space: nowrap;
}
/* ── Above-Horizon body: skydome + table side-by-side ────────────────────── */
.mm-horizon-body {
display: flex;
align-items: flex-start;
gap: 0;
}
.mm-skydome-wrap {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 280px;
padding: 12px 8px 10px;
border-right: 1px solid rgba(255,255,255,.05);
}
.mm-skydome-filters {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 8px;
justify-content: center;
}
.mm-sd-filter {
font-family: var(--font-mono);
font-size: 9px;
padding: 2px 8px;
background: transparent;
border: 1px solid rgba(255,255,255,.13);
color: var(--muted);
cursor: pointer;
border-radius: 2px;
transition: border-color .15s, color .15s;
letter-spacing: .04em;
}
.mm-sd-filter:hover,
.mm-sd-filter.active,
.mm-sd-filter--active { border-color: var(--teal); color: var(--teal); }
.mm-skydome {
width: 240px;
height: 240px;
display: block;
flex-shrink: 0;
}
/* SVG internals */
.mm-sd-grid circle, .mm-sd-grid line, .mm-sd-grid text { pointer-events: none; }
.mm-sd-dot {
cursor: pointer;
transition: r .15s;
}
.mm-sd-dot:hover { r: 6; }
.mm-skydome-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px 12px;
margin-top: 8px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
}
.mm-sdl-item {
display: flex;
align-items: center;
gap: 4px;
}
.mm-sdl-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* Table side */
.mm-horizon-list-wrap {
flex: 1;
overflow-x: auto;
min-width: 0;
}
/* ── Best Passes panel ───────────────────────────────────────────────────── */
.mm-bestpass-body { padding: 0; }
.mm-bestpass-list {
display: flex;
flex-direction: column;
}
.mm-pass-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
border-bottom: 1px solid rgba(255,255,255,.04);
font-family: var(--font-mono);
font-size: 11px;
cursor: pointer;
transition: background .12s;
}
.mm-pass-row:hover { background: rgba(255,255,255,.03); }
.mm-pass-rank {
font-size: 10px;
color: var(--muted);
width: 18px;
flex-shrink: 0;
text-align: right;
}
.mm-pass-name {
flex: 1;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mm-pass-time { color: var(--muted-light); flex-shrink: 0; }
.mm-pass-el { color: var(--teal); flex-shrink: 0; width: 38px; text-align: right; }
.mm-pass-dir { color: var(--muted); flex-shrink: 0; font-size: 10px; }
/* ── Typeahead search ────────────────────────────────────────────────────── */
.mm-ta-wrap { position: relative; }
.mm-ta-list {
position: absolute;
top: 100%;
left: 0; right: 0;
background: #0d0f1a;
border: 1px solid rgba(255,255,255,.12);
z-index: 200;
max-height: 220px;
overflow-y: auto;
list-style: none;
margin: 0; padding: 0;
}
.mm-ta-item {
padding: 8px 12px;
font-family: var(--font-mono);
font-size: 11px;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,.05);
display: flex;
gap: 10px;
align-items: center;
}
.mm-ta-item:hover, .mm-ta-item.active { background: rgba(0,200,255,.08); }
.mm-ta-norad { color: var(--muted); flex-shrink: 0; font-size: 10px; width: 52px; }
.mm-ta-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.mm-ta-orbit { color: var(--muted); font-size: 10px; flex-shrink: 0; }
/* ── Object profile drawer ───────────────────────────────────────────────── */
.mm-profile-drawer[hidden] { display: none !important; }
.mm-drawer-backdrop[hidden] { display: none !important; }
.mm-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .55);
z-index: 8999; /* one below the drawer (9000) */
cursor: pointer;
backdrop-filter: blur(1px);
animation: mm-backdrop-in .18s ease;
}
@keyframes mm-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
.mm-profile-drawer {
position: fixed;
top: var(--nav-height); right: 0;
width: min(420px, 100vw);
height: calc(100vh - var(--nav-height));
background: #080c18;
border-left: 1px solid rgba(255,255,255,.1);
z-index: 9000;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: -6px 0 32px rgba(0,0,0,.6);
}
.mm-pd-hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
flex-shrink: 0;
}
.mm-pd-title {
flex: 1;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#mm-pd-close {
background: transparent;
border: 1px solid rgba(255,255,255,.15);
color: var(--muted);
font-size: 16px;
width: 28px; height: 28px;
cursor: pointer;
border-radius: 2px;
flex-shrink: 0;
line-height: 1;
transition: border-color .15s, color .15s;
}
#mm-pd-close:hover { border-color: var(--teal); color: var(--teal); }
.mm-pd-tabs {
display: flex;
padding: 0 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
flex-shrink: 0;
}
.mm-pd-tab {
font-family: var(--font-mono);
font-size: 10px;
padding: 9px 12px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--muted);
cursor: pointer;
letter-spacing: .06em;
transition: color .15s, border-color .15s;
margin-bottom: -1px;
}
.mm-pd-tab:hover { color: var(--text); }
.mm-pd-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.mm-pd-body { flex: 1; overflow-y: auto; padding: 16px; }
.mm-pd-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.mm-pd-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.04); }
.mm-pd-table td:first-child { color: var(--muted); width: 44%; }
.mm-pd-table td:last-child { color: var(--text); }
/* ── Reentry Watch ───────────────────────────────────────────────────────── */
.mm-reentry-body { overflow-x: auto; }
/* ── Reentry Watch header bar ────────────────────────────────────────────── */
.mm-rw-header {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px 6px;
border-bottom: 1px solid rgba(255,255,255,.06);
flex-wrap: wrap;
}
.mm-rw-counts { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.mm-rw-cnt-sep { margin: 0 4px; opacity: .4; }
.mm-rw-cnt-pending { color: #f0b429; }
.mm-rw-cnt-done { color: var(--muted); }
.mm-rw-fresh {
font-family: var(--font-mono);
font-size: 10px;
color: var(--teal);
background: rgba(0,200,255,.08);
border: 1px solid rgba(0,200,255,.2);
padding: 2px 7px;
border-radius: 3px;
letter-spacing: .05em;
}
.mm-rw-fresh--stale { color: #f0b429; background: rgba(240,180,41,.08); border-color: rgba(240,180,41,.3); }
.mm-rw-stale-warn {
font-family: var(--font-mono);
font-size: 11px;
color: #f0b429;
background: rgba(240,180,41,.07);
border-left: 3px solid #f0b429;
padding: 7px 14px;
margin: 0;
}
/* ── Section headers ─────────────────────────────────────────────────────── */
.mm-rw-section-hdr {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .12em;
color: var(--muted);
text-transform: uppercase;
padding: 10px 16px 6px;
border-bottom: 1px solid rgba(255,255,255,.05);
display: flex;
align-items: center;
gap: 6px;
}
.mm-rw-sec-count {
background: rgba(255,255,255,.06);
padding: 1px 6px;
border-radius: 10px;
font-size: 10px;
}
.mm-rw-empty-sec {
padding: 12px 16px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
}
/* ── Table wrapper ───────────────────────────────────────────────────────── */
.mm-rw-table-wrap { overflow-x: auto; }
.mm-rw-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 11px;
}
.mm-rw-table th {
padding: 7px 10px;
text-align: left;
font-size: 10px;
color: var(--muted);
border-bottom: 1px solid rgba(255,255,255,.08);
white-space: nowrap;
}
.mm-rw-table td {
padding: 8px 10px;
border-bottom: 1px solid rgba(255,255,255,.04);
color: var(--muted-light);
vertical-align: middle;
}
.mm-rw-row:hover td { background: rgba(255,255,255,.03); }
.mm-rw-row:focus-visible { outline: 2px solid rgba(0,200,255,.4); outline-offset: -2px; }
.mm-rw-row--imminent td { background: rgba(239,83,80,.04); }
.mm-rw-row--imminent:hover td { background: rgba(239,83,80,.07); }
/* ── Status badge ────────────────────────────────────────────────────────── */
.mm-rw-badge {
display: inline-block;
font-size: 9px;
letter-spacing: .1em;
padding: 2px 6px;
border-radius: 3px;
border: 1px solid;
font-weight: 600;
white-space: nowrap;
}
.mm-rw-badge--imminent { color: #ef5350; border-color: rgba(239,83,80,.5); background: rgba(239,83,80,.08); }
.mm-rw-badge--pending { color: #f0b429; border-color: rgba(240,180,41,.4); background: rgba(240,180,41,.06); }
.mm-rw-badge--reentered { color: var(--muted); border-color: rgba(255,255,255,.12); background: transparent; }
.mm-rw-badge--unknown { color: var(--muted); border-color: rgba(255,255,255,.1); background: transparent; }
/* ── Object name / sub ───────────────────────────────────────────────────── */
.mm-rw-name { color: var(--text); font-size: 12px; white-space: nowrap; }
.mm-rw-sub { color: var(--muted); font-size: 10px; margin-top: 2px; }
/* ── Type badge + country ────────────────────────────────────────────────── */
.mm-rw-type-badge {
display: inline-block;
font-size: 9px;
letter-spacing: .07em;
padding: 2px 6px;
border-radius: 3px;
border: 1px solid;
white-space: nowrap;
}
.mm-rw-country {
display: inline-block;
font-size: 10px;
color: var(--muted);
margin-left: 5px;
}
/* ── Time chip ───────────────────────────────────────────────────────────── */
.mm-rw-time {
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.mm-rw-time--imminent { color: #ef5350; }
.mm-rw-time--pending { color: #f0b429; }
.mm-rw-time--reentered { color: var(--muted); }
.mm-rw-time--unknown { color: var(--muted); }
/* ── Window chip ─────────────────────────────────────────────────────────── */
.mm-rw-win {
display: inline-block;
font-size: 10px;
color: var(--muted-light);
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
padding: 1px 6px;
border-radius: 3px;
white-space: nowrap;
}
/* Legacy selectors kept for any remaining references */
.mm-reentry-table { display: none; }
.mm-reentry-urgent td { color: var(--text) !important; }
.mm-reentry-decay-soon { color: #ef5350 !important; }
/* ── CDM / Close Approaches ──────────────────────────────────────────────── */
.mm-cdm-body { overflow-x: auto; }
.mm-cdm-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px 6px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.mm-cdm-fresh {
font-family: var(--font-mono);
font-size: 10px;
color: var(--teal);
background: rgba(0,200,255,.08);
border: 1px solid rgba(0,200,255,.2);
padding: 2px 7px;
border-radius: 3px;
letter-spacing: .05em;
}
.mm-cdm-fresh--stale { color: #f0b429; background: rgba(240,180,41,.08); border-color: rgba(240,180,41,.3); }
/* Section headers reuse .mm-rw-section-hdr */
.mm-cdm-table-wrap { overflow-x: auto; }
.mm-cdm-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 11px;
}
.mm-cdm-table th {
padding: 7px 10px;
text-align: left;
font-size: 10px;
color: var(--muted);
border-bottom: 1px solid rgba(255,255,255,.08);
white-space: nowrap;
}
.mm-cdm-table td {
padding: 9px 10px;
border-bottom: 1px solid rgba(255,255,255,.04);
color: var(--muted-light);
vertical-align: middle;
}
.mm-cdm-row:hover td { background: rgba(255,255,255,.03); }
.mm-cdm-row--hi td { background: rgba(239,83,80,.04); }
.mm-cdm-row--hi:hover td { background: rgba(239,83,80,.07); }
/* Satellite cell */
.mm-cdm-sat { display: flex; flex-direction: column; gap: 3px; min-width: 140px; max-width: 200px; }
.mm-cdm-sat-link {
color: var(--text);
font-size: 12px;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 190px;
display: block;
}
.mm-cdm-sat-link:hover { color: var(--teal); text-decoration: underline; }
.mm-cdm-sat-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mm-cdm-type { font-size: 9px; letter-spacing: .06em; }
.mm-cdm-rcs { font-size: 9px; color: var(--muted); letter-spacing: .04em; }
/* Versus separator */
.mm-cdm-vs {
color: var(--muted);
font-size: 12px;
padding: 0 4px !important;
text-align: center;
vertical-align: middle;
}
/* Miss distance */
.mm-cdm-miss {
font-size: 12px;
font-weight: 600;
white-space: nowrap;
color: var(--text);
}
/* TCA cell */
.mm-cdm-tca-cell { white-space: nowrap; }
.mm-cdm-tca-rel { font-size: 11px; font-weight: 600; margin-top: 2px; }
.mm-cdm-tca-rel--future { color: #f0b429; }
.mm-cdm-tca-rel--past { color: var(--muted); }
/* Pc bar */
.mm-cdm-pc-wrap {
display: flex;
align-items: center;
gap: 8px;
min-width: 140px;
}
.mm-cdm-pc-bar {
height: 6px;
border-radius: 3px;
min-width: 2px;
flex-shrink: 0;
}
.mm-cdm-pc-label {
font-size: 11px;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.mm-cdm-pc-na { font-size: 11px; color: var(--muted); }
/* Emergency reportable flag */
.mm-cdm-em-flag {
display: inline-block;
font-size: 9px;
color: #ef5350;
border: 1px solid rgba(239,83,80,.4);
background: rgba(239,83,80,.08);
padding: 2px 5px;
border-radius: 3px;
white-space: nowrap;
letter-spacing: .05em;
}
/* Legacy selectors for backward compat */
.mm-cdm-pc { font-variant-numeric: tabular-nums; }
.mm-pc--danger { color: #ef5350; }
.mm-pc--warn { color: #f0b429; }
.mm-pc--ok { color: #81c784; }
/* ── New Objects ─────────────────────────────────────────────────────────── */
/* ── Newly Catalogued Objects ────────────────────────────────────────────── */
/* Stats bar */
.mm-no-stats-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 9px 16px 7px;
border-bottom: 1px solid rgba(255,255,255,.06);
flex-wrap: wrap;
}
.mm-no-stat {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 11px;
}
.mm-no-stat-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
/* Launch group header */
.mm-no-group { border-bottom: 1px solid rgba(255,255,255,.05); }
.mm-no-group-hdr {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
cursor: pointer;
user-select: none;
transition: background .15s;
flex-wrap: wrap;
}
.mm-no-group-hdr:hover { background: rgba(255,255,255,.03); }
.mm-no-group-hdr:focus-visible { outline: 2px solid rgba(0,200,255,.4); outline-offset: -2px; }
.mm-no-group-chevron {
font-size: 10px;
color: var(--muted);
width: 10px;
flex-shrink: 0;
}
.mm-no-group-id {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--teal);
letter-spacing: .04em;
}
.mm-no-group-name {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text);
}
.mm-no-group-count {
font-family: var(--font-mono);
font-size: 10px;
background: rgba(0,200,255,.12);
color: var(--teal);
border: 1px solid rgba(0,200,255,.2);
padding: 1px 7px;
border-radius: 10px;
}
.mm-no-group-meta {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
margin-left: auto;
}
/* Collapsible group body */
.mm-no-group-body--collapsed { display: none; }
/* Object table */
.mm-no-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 11px;
}
.mm-no-table th {
padding: 6px 12px;
text-align: left;
font-size: 10px;
color: var(--muted);
border-bottom: 1px solid rgba(255,255,255,.07);
white-space: nowrap;
}
.mm-no-table td {
padding: 8px 12px;
border-bottom: 1px solid rgba(255,255,255,.04);
vertical-align: middle;
}
.mm-no-row:hover td { background: rgba(255,255,255,.03); }
.mm-no-row:focus-visible { outline: 2px solid rgba(0,200,255,.3); outline-offset: -2px; }
.mm-no-name { color: var(--text); font-size: 12px; }
.mm-no-sub { color: var(--muted); font-size: 10px; margin-top: 2px; }
.mm-no-type-badge {
display: inline-block;
font-size: 9px;
letter-spacing: .07em;
padding: 2px 6px;
border-radius: 3px;
border: 1px solid;
white-space: nowrap;
}
/* Legacy class kept in case referenced elsewhere */
.mm-newobj-table-wrap { overflow-x: auto; }
.mm-newobj-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
/* ── Phase 3 trail risk placeholder ─────────────────────────────────────── */
.mm-ph3-body { padding: 14px 18px; }
.mm-ph3-intro { font-size: 12px; color: var(--muted-light); margin-bottom: 14px; line-height: 1.6; }
.mm-ph3-controls {
border: 1px solid rgba(255,255,255,.08);
padding: 14px 16px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
border-radius: 2px;
margin-bottom: 14px;
}
.mm-ph3-legend { font-size: 10px; color: var(--muted); padding: 0 4px; letter-spacing: .06em; }
.mm-ph3-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.mm-ph3-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 10px; flex: 1; min-width: 140px; }
.mm-ph3-input { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--muted); padding: 5px 8px; font-family: var(--font-mono); font-size: 10px; width: 100%; opacity: .5; }
.mm-ph3-btn { margin-top: 12px; padding: 7px 14px; font-family: var(--font-mono); font-size: 10px; background: transparent; border: 1px solid rgba(255,255,255,.1); color: var(--muted); cursor: not-allowed; opacity: .5; }
.mm-unavail-tips { display: flex; flex-direction: column; gap: 8px; }
.mm-tip { font-size: 11px; color: var(--muted); padding: 8px 12px; border-left: 2px solid rgba(255,255,255,.08); }
.mm-tip-head { color: var(--text); font-weight: 600; display: inline; margin-right: 6px; }
.mm-badge-planned { color: #f0b429; border-color: rgba(240,180,41,.3); }
/* ── Live indicator ──────────────────────────────────────────────────────── */
.mm-live-indicator {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 9px;
color: #3ddc84;
letter-spacing: .08em;
}
.mm-live-small { font-size: 9px; }
.mm-live-pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: #3ddc84;
animation: mm-live-blink 1.4s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes mm-live-blink {
0%, 100% { opacity: 1; }
50% { opacity: .25; }
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.mm-horizon-body { flex-direction: column; }
.mm-skydome-wrap { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
}
@media (max-width: 600px) {
.mm-hs-val { font-size: 16px; }
.mm-hs-card { padding: 10px 12px; min-width: 60px; }
.mm-profile-drawer { width: 100vw; }
.mm-pass-dir { display: none; }
.mm-ph3-row { flex-direction: column; }
}
/* ═══════════════════════════════════════════════════════════════════════════
SPACE TRAFFIC DASHBOARD — /toolbox/space-traffic/
═══════════════════════════════════════════════════════════════════════════ */
/* ── Search panel ────────────────────────────────────────────────────────── */
.st-search-body { padding: 14px 18px 6px; }
.st-search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.st-search-input { flex: 1; }
.st-filter-row {
display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.st-filter-sel { min-width: 130px; }
.st-filter-country { max-width: 110px !important; }
.st-chip-row {
display: flex; flex-wrap: wrap; gap: 5px;
padding: 8px 18px 14px;
border-top: 1px solid rgba(255,255,255,.05);
font-size: 10px;
}
.st-chip-lbl { color: var(--muted); font-family: var(--font-mono); line-height: 24px; }
.st-chip {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
padding: 3px 10px; background: transparent;
border: 1px solid rgba(255,255,255,.12);
color: var(--muted); cursor: pointer; border-radius: 2px;
transition: border-color .15s, color .15s;
}
.st-chip:hover { border-color: var(--teal); color: var(--teal); }
/* Search results */
.st-search-results { padding: 0 0 8px; }
.st-search-result-hdr {
padding: 6px 18px; font-family: var(--font-mono);
font-size: 10px; color: var(--muted);
}
.st-result-table td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-norad-cell { font-variant-numeric: tabular-nums; }
.st-name-cell { max-width: 240px !important; }
.st-intldes { margin-left: 6px; color: var(--muted); font-size: 9px; }
.st-tag { font-family: var(--font-mono); font-size: 9px; padding: 1px 6px; border-radius: 2px; }
.st-tag-active { color: #3de0c0; border: 1px solid rgba(61,224,192,.3); }
.st-tag-decay { color: #ef5350; border: 1px solid rgba(239,83,80,.3); }
.st-stale-tle { color: #f0b429 !important; }
.st-profile-link { font-size: 10px; white-space: nowrap; }
/* ── Stats strip ─────────────────────────────────────────────────────────── */
.st-stats-strip {
display: flex; flex-wrap: wrap; gap: 1px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.st-stat-card {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 14px 20px; min-width: 90px; flex: 1;
border-right: 1px solid rgba(255,255,255,.05);
}
.st-sc-val {
font-family: var(--font-mono); font-size: 24px; font-weight: 700;
color: var(--text); line-height: 1.1;
}
.st-sc-lbl {
font-family: var(--font-mono); font-size: 9px; color: var(--muted);
letter-spacing: .06em; text-align: center; margin-top: 3px; white-space: nowrap;
}
.st-sc-payload { color: #4fc3f7; }
.st-sc-rb { color: #ffa726; }
.st-sc-debris { color: #ef5350; }
.st-sc-new { color: #3de0c0; }
.st-sc-decay { color: var(--muted-light); }
/* ── Breakdown tabs ──────────────────────────────────────────────────────── */
.st-breakdown-tabs, .st-countries-tabs {
display: flex; gap: 0;
padding: 0 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.st-btab, .st-ctab {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
padding: 8px 12px; background: transparent;
border: none; border-bottom: 2px solid transparent;
color: var(--muted); cursor: pointer; margin-bottom: -1px;
transition: color .15s, border-color .15s;
}
.st-btab:hover, .st-ctab:hover { color: var(--text); }
.st-btab.active, .st-ctab.active { color: var(--teal); border-bottom-color: var(--teal); }
.st-breakdown-panel { padding: 16px 18px; }
.st-bar-chart { display: flex; flex-direction: column; gap: 7px; }
/* ── Country chart ───────────────────────────────────────────────────────── */
.st-country-chart-wrap { position: relative; height: 300px; padding: 10px 4px; }
/* ── Countries table ─────────────────────────────────────────────────────── */
.st-country-cell { font-family: var(--font-mono); }
.st-country-code { color: var(--text); font-weight: 600; margin-right: 6px; }
.st-country-name { color: var(--muted); font-size: 10px; }
.st-num-cell { font-variant-numeric: tabular-nums; text-align: right; }
.st-country-top td { color: var(--text) !important; }
.st-country-bar-wrap {
height: 3px; background: rgba(255,255,255,.06); border-radius: 1px; margin-top: 3px;
}
.st-country-bar { height: 100%; background: #4fc3f7; border-radius: 1px; }
/* ── Tonight timeline ────────────────────────────────────────────────────── */
.st-tonight-loc {
padding: 8px 18px; font-family: var(--font-mono);
font-size: 10px; color: var(--muted);
}
.st-timeline-wrap { padding: 10px 18px 4px; }
.st-timeline-bar {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-mono); font-size: 9px; color: var(--muted);
}
.st-tl-track {
flex: 1; height: 8px; background: rgba(255,255,255,.07);
border-radius: 4px; position: relative;
}
.st-tl-night { height: 100%; background: #1a2040; border-radius: 4px; }
.st-tl-now {
position: absolute; top: -3px; bottom: -3px; width: 2px;
background: var(--teal); border-radius: 1px;
}
/* ── Launch families ─────────────────────────────────────────────────────── */
.st-family-filters {
display: flex; gap: 8px; padding: 10px 18px;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.st-family-search-input { flex: 1; max-width: 260px; }
.st-group-cell { font-family: var(--font-mono); font-weight: 600; }
.st-debris-hi { color: #f0b429 !important; }
.st-fam-stat { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-right: 14px; }
.st-fam-active { color: #3de0c0; }
.st-fam-decay { color: #ef5350; }
.sp-family-stats { padding: 12px 16px 6px; }
/* ═══════════════════════════════════════════════════════════════════════════
SATELLITE PROFILE — /satellites/{NORAD_ID}
═══════════════════════════════════════════════════════════════════════════ */
/* ── Layout ──────────────────────────────────────────────────────────────── */
.sp-body { padding-bottom: 60px; }
/* ── Back nav ────────────────────────────────────────────────────────────── */
.sp-nav {
display: flex; align-items: center; gap: 8px;
padding: 12px 20px 0;
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.sp-back-link { color: var(--muted); text-decoration: none; }
.sp-back-link:hover { color: var(--teal); }
.sp-nav-sep { color: rgba(255,255,255,.15); }
.sp-nav-norad { color: var(--text); }
.sp-nav-actions { margin-left: auto; }
.sp-mode-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
padding: 4px 10px; background: transparent;
border: 1px solid rgba(255,255,255,.12); color: var(--muted);
cursor: pointer; border-radius: 2px; transition: border-color .15s, color .15s;
}
.sp-mode-btn:hover { border-color: var(--teal); color: var(--teal); }
/* ── Hero ────────────────────────────────────────────────────────────────── */
.sp-hero {
display: flex; align-items: flex-start; gap: 16px;
padding: 20px 24px 14px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.sp-hero-icon {
font-size: 32px; color: var(--teal); opacity: .8;
flex-shrink: 0; line-height: 1; margin-top: 4px;
}
.sp-hero-info { flex: 1; min-width: 0; }
.sp-hero-name {
font-size: 22px; font-weight: 700; color: var(--text);
font-family: var(--font-mono); letter-spacing: -.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin: 0 0 6px;
}
.sp-hero-meta {
display: flex; flex-wrap: wrap; gap: 6px 14px;
font-family: var(--font-mono); font-size: 11px;
}
.sp-meta-item { color: var(--muted-light); }
.sp-oc-badge { font-weight: 600; }
.sp-hero-status { flex-shrink: 0; }
/* Badges */
.sp-badge {
font-family: var(--font-mono); font-size: 10px;
padding: 3px 8px; border-radius: 2px;
border: 1px solid; white-space: nowrap;
}
.sp-badge-ok { color: #3de0c0; border-color: rgba(61,224,192,.3); }
.sp-badge-warn { color: #f0b429; border-color: rgba(240,180,41,.3); }
.sp-badge-crit { color: #ef5350; border-color: rgba(239,83,80,.3); }
.sp-badge-decayed{ color: var(--muted); border-color: rgba(255,255,255,.1); }
/* ── Tabs ────────────────────────────────────────────────────────────────── */
.sp-tabs {
display: flex; gap: 0; padding: 0 20px;
border-bottom: 1px solid rgba(255,255,255,.08);
overflow-x: auto;
}
.sp-tab {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
padding: 10px 14px; background: transparent;
border: none; border-bottom: 2px solid transparent;
color: var(--muted); cursor: pointer; white-space: nowrap; margin-bottom: -1px;
transition: color .15s, border-color .15s;
}
.sp-tab:hover { color: var(--text); }
.sp-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
/* ── Tab panels ──────────────────────────────────────────────────────────── */
.sp-tab-panels { padding: 20px; }
.sp-panel { display: block; }
.sp-panel.active { display: block; }
.sp-2col {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px;
}
@media (max-width: 760px) { .sp-2col { grid-template-columns: 1fr; } }
/* ── Cards ───────────────────────────────────────────────────────────────── */
.sp-card {
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.07);
border-radius: 2px; margin-bottom: 18px;
}
.sp-card-hdr {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,.06);
font-family: var(--font-mono); font-size: 11px;
}
.sp-card-icon { color: var(--teal); font-size: 13px; }
.sp-card-title { color: var(--text); font-weight: 600; }
.sp-card-badge {
font-size: 9px; color: var(--muted); border: 1px solid rgba(255,255,255,.1);
padding: 1px 6px; border-radius: 1px; margin-left: 4px;
}
/* ── Data table (key-value) ──────────────────────────────────────────────── */
.sp-dt { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.sp-dt td { padding: 6px 14px; border-bottom: 1px solid rgba(255,255,255,.04); }
.sp-dt td:first-child { color: var(--muted); width: 44%; }
.sp-dt td:last-child { color: var(--text); }
/* ── Orbit summary ───────────────────────────────────────────────────────── */
.sp-orbit-summary-card .sp-orbit-sum-row {
display: flex; flex-wrap: wrap; gap: 0; padding: 0;
}
.sp-orbit-sum-stat {
flex: 1; min-width: 80px; text-align: center; padding: 16px 12px;
border-right: 1px solid rgba(255,255,255,.05);
}
.sp-oss-val { font-family: var(--font-mono); font-size: 20px; color: var(--text); font-weight: 600; }
.sp-oss-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); margin-top: 4px; letter-spacing: .05em; }
/* ── Visibility card ─────────────────────────────────────────────────────── */
.sp-vis-body { padding: 12px 14px; font-family: var(--font-mono); font-size: 11px; }
.sp-vis-row { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 10px; }
.sp-vis-lbl { color: var(--muted); }
.sp-vis-val { color: var(--text); }
.sp-vis-class { display: flex; align-items: flex-start; gap: 10px; }
.sp-vis-icon { font-size: 18px; color: var(--teal); flex-shrink: 0; }
.sp-vis-headline{ font-weight: 600; color: var(--text); }
.sp-vis-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
.sp-family-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.05); }
.sp-link { color: var(--teal); text-decoration: none; }
.sp-link:hover { text-decoration: underline; }
/* ── Satellite Profile — Launch Mission card ─────────────────────────────── */
.sp-mission-card { margin-bottom: 16px; }
.sp-mis-launch { display: flex; gap: 0; flex-direction: column; }
.sp-mis-launch-body { display: flex; align-items: stretch; gap: 0; padding: 0; }
.sp-mis-launch-content { flex: 1; min-width: 0; padding: 16px 18px; }
.sp-mis-status-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.sp-mis-status {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
text-transform: uppercase; border-radius: 3px; padding: 2px 8px;
border: 1px solid;
}
.sp-mis-status--ok { color: #34d399; border-color: rgba(52,211,153,.35); }
.sp-mis-status--fail { color: #f87171; border-color: rgba(248,113,113,.35); }
.sp-mis-status--tbd { color: var(--muted); border-color: rgba(255,255,255,.15); }
.sp-mis-orbit, .sp-mis-type {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
color: var(--teal); border: 1px solid rgba(0,200,255,.2); border-radius: 2px;
padding: 2px 7px;
}
.sp-mis-name { font-family: var(--font-orb); font-size: 18px; font-weight: 900; color: var(--text); margin: 0 0 12px; }
.sp-mis-name-link { color: var(--text); text-decoration: none; }
.sp-mis-name-link:hover { color: var(--teal); }
.sp-mis-meta-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
gap: 8px; margin-bottom: 14px;
}
.sp-mis-meta-item { display: flex; flex-direction: column; gap: 2px; }
.sp-mis-meta-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp-mis-meta-v { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.sp-mis-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-mis-img-chip {
width: 110px; flex-shrink: 0; object-fit: cover; object-position: center 30%;
border-radius: 0 4px 4px 0; display: block;
border-left: 1px solid rgba(0,200,255,.15);
}
.sp-mis-btn {
font-family: var(--font-mono); font-size: 11px; color: var(--teal);
border: 1px solid rgba(0,200,255,.25); border-radius: 4px;
padding: 7px 14px; text-decoration: none; background: transparent;
transition: background .15s;
}
.sp-mis-btn:hover { background: rgba(0,200,255,.08); }
/* Spacecraft section */
.sp-mis-spacecraft { border-top: 1px solid rgba(0,200,255,.07); padding: 16px 18px; }
.sp-mis-sc-hdr {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.sp-mis-sc-card { display: flex; gap: 14px; align-items: flex-start; }
.sp-mis-sc-img {
width: 72px; height: 56px; object-fit: cover; border-radius: 4px; flex-shrink: 0;
border: 1px solid rgba(0,200,255,.15);
}
.sp-mis-sc-img-placeholder {
width: 72px; height: 56px; flex-shrink: 0; display: flex; align-items: center;
justify-content: center; font-size: 24px; color: rgba(0,200,255,.3);
border: 1px solid rgba(0,200,255,.15); border-radius: 4px; background: rgba(0,0,0,.2);
}
.sp-mis-sc-info { flex: 1; min-width: 0; }
.sp-mis-sc-name { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--text); }
.sp-mis-sc-config { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
.sp-mis-sc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sp-mis-sc-type {
font-family: var(--font-mono); font-size: 9px; color: var(--teal);
border: 1px solid rgba(0,200,255,.2); border-radius: 2px; padding: 2px 7px;
}
.sp-mis-sc-live {
font-family: var(--font-mono); font-size: 9px; color: #34d399;
border: 1px solid rgba(52,211,153,.3); border-radius: 2px; padding: 2px 7px;
animation: at-live-blink 1.5s infinite;
}
.sp-mis-sc-stats {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
@media (max-width: 600px) {
.sp-mis-meta-grid { grid-template-columns: 1fr 1fr; }
.sp-mis-sc-card { flex-direction: column; }
.sp-mis-sc-img { width: 100%; height: 120px; }
}
/* ── Beginner card ───────────────────────────────────────────────────────── */
.sp-beginner-card {
display: flex; align-items: flex-start; gap: 14px;
background: rgba(0,200,255,.05); border: 1px solid rgba(0,200,255,.15);
padding: 16px 18px; border-radius: 2px; margin-bottom: 18px;
}
.sp-bc-icon { font-size: 24px; color: var(--teal); flex-shrink: 0; }
.sp-bc-headline { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.sp-bc-sub { font-size: 12px; color: var(--muted-light); line-height: 1.7; }
.sp-bc-sub p { margin: 4px 0 0; }
/* ── Pass table ──────────────────────────────────────────────────────────── */
.sp-pass-loc-row {
padding: 8px 16px; font-family: var(--font-mono); font-size: 10px;
color: var(--muted); border-bottom: 1px solid rgba(255,255,255,.05);
display: flex; align-items: center; gap: 10px;
}
.sp-pass-loc-lbl { color: var(--muted); }
.sp-pass-next td { background: rgba(0,200,255,.04) !important; }
.sp-pass-table-wrap { overflow-x: auto; }
.sp-load-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
padding: 3px 10px; background: transparent;
border: 1px solid rgba(255,255,255,.15); color: var(--muted-light);
cursor: pointer; border-radius: 2px; margin-left: auto;
transition: border-color .15s, color .15s;
}
.sp-load-btn:hover { border-color: var(--teal); color: var(--teal); }
/* ── Sky path ────────────────────────────────────────────────────────────── */
.sp-skydome-svg { width: 100%; max-width: 300px; height: 300px; display: block; margin: 0 auto; }
.sp-skypath-preview{ padding: 12px; }
.sp-skypath-meta { text-align: center; padding: 4px 12px 12px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* ── Beginner pass card ──────────────────────────────────────────────────── */
.sp-pass-tonight-lbl {
padding: 16px 18px; font-family: var(--font-mono); font-size: 13px;
color: var(--muted-light);
}
/* ── TLE / Raw display ───────────────────────────────────────────────────── */
.sp-tle-line { font-size: 10px; color: var(--muted-light); word-break: break-all; }
.sp-raw-json {
font-family: var(--font-mono); font-size: 10px; color: var(--muted-light);
padding: 16px; overflow-x: auto; white-space: pre-wrap; max-height: 60vh;
overflow-y: auto; background: rgba(0,0,0,.2); margin: 0; border-radius: 0 0 2px 2px;
}
/* ── History chart ───────────────────────────────────────────────────────── */
.sp-chart-wrap { position: relative; height: 220px; padding: 12px 16px 0; }
.sp-hist-chart { max-height: 200px; }
.sp-hist-select {
margin-left: auto; font-family: var(--font-mono); font-size: 10px;
background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1);
color: var(--muted); padding: 2px 6px; cursor: pointer;
}
.sp-hist-insight {
padding: 6px 16px 10px; font-family: var(--font-mono);
font-size: 10px; color: var(--muted); letter-spacing: .04em;
}
/* ── Ground track map ────────────────────────────────────────────────────── */
.sp-groundtrack-card { overflow: hidden; }
.sp-groundtrack-map { height: 320px; background: #000 !important; }
.sp-gt-note {
padding: 6px 14px; font-family: var(--font-mono);
font-size: 9px; color: var(--muted); border-top: 1px solid rgba(255,255,255,.04);
}
/* ── Risk tab ────────────────────────────────────────────────────────────── */
.sp-risk-body { padding: 12px 14px; }
/* ── Close Approach Globe card ────────────────────────────────────────────── */
.sp-cdm-globe-card { margin-bottom: 16px; }
.sp-cdm-body-vis { display: flex; flex-direction: column; }
.sp-cdm-loading { padding: 28px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
/* Event list */
.sp-cdm-event-list { border-bottom: 1px solid rgba(0,200,255,.07); }
.sp-cdm-event-row {
display: flex; flex-direction: column; gap: 6px;
padding: 11px 16px; border-bottom: 1px solid rgba(0,200,255,.05);
cursor: pointer; transition: background .1s;
font-family: var(--font-mono); font-size: 11px;
}
.sp-cdm-event-row:last-child { border-bottom: none; }
.sp-cdm-event-row:hover { background: rgba(0,200,255,.05); }
.sp-cdm-event-row--first { background: rgba(0,200,255,.06); border-left: 2px solid var(--teal); }
.sp-cdm-risk--watch { border-left: 2px solid #f59e0b !important; }
.sp-cdm-risk--high { border-left: 2px solid #f87171 !important; }
.sp-cdm-risk--crit { border-left: 2px solid #f87171 !important; box-shadow: inset 0 0 8px rgba(248,113,113,.08); }
/* Row header: partner name + countdown */
.sp-cdm-ev-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-cdm-ev-partner { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.sp-cdm-ev-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cdm-ev-type { font-size: 9px; letter-spacing: .06em; color: var(--muted); background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1); border-radius: 2px; padding: 1px 4px; flex-shrink: 0; }
.sp-cdm-ev-norad { font-size: 9px; color: var(--muted); flex-shrink: 0; }
.sp-cdm-event-cd { font-size: 14px; font-weight: 700; color: var(--teal); flex-shrink: 0; }
/* TCA line */
.sp-cdm-ev-tca { font-size: 10px; color: var(--muted); }
/* Stats row */
.sp-cdm-ev-stats { display: flex; gap: 0; flex-wrap: wrap; border-top: 1px solid rgba(0,200,255,.06); padding-top: 6px; margin-top: 2px; }
.sp-cdm-ev-stat { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 80px; padding-right: 8px; }
.sp-cdm-ev-stat-k { font-size: 9px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.sp-cdm-ev-stat-v { font-size: 11px; font-weight: 600; color: var(--fg); }
.sp-cdm-ev-pcm { font-size: 8px; font-weight: 400; color: var(--muted); letter-spacing: .04em; }
.sp-cdm-ev-age { font-weight: 400; color: var(--muted); }
.sp-cdm-miss { color: #f59e0b; }
.sp-cdm-risk-hi { color: #f87171; }
.sp-cdm-spd { color: var(--muted); font-size: 10px; }
/* Globe area */
.sp-cdm-globe-wrap { display: flex; flex-direction: column; background: #02050f; }
.sp-cdm-globe-labels {
display: flex; gap: 16px; flex-wrap: wrap;
padding: 10px 16px;
background: rgba(0,0,0,.4);
border-bottom: 1px solid rgba(0,200,255,.08);
font-family: var(--font-mono); font-size: 10px;
}
.sp-cdm-label { display: flex; align-items: center; gap: 5px; }
.sp-cdm-label--1 { color: #00c8ff; }
.sp-cdm-label--2 { color: #f59e0b; }
.sp-cdm-label--tca { color: var(--muted); margin-left: auto; }
.sp-cdm-globe {
width: 100%; height: 400px;
cursor: grab;
}
.sp-cdm-globe canvas { display: block; width: 100% !important; height: 100% !important; }
.sp-cdm-globe:active { cursor: grabbing; }
@media (max-width: 600px) {
.sp-cdm-globe { height: 280px; }
.sp-cdm-label--tca { display: none; }
}
/* ── Orbit plain text (beginner) ─────────────────────────────────────────── */
.sp-orbit-plain { padding: 14px; font-size: 12px; color: var(--muted-light); line-height: 1.8; }
.sp-plain-blurb { font-size: 13px; color: var(--text); margin-bottom: 8px; }
/* ── Mode show/hide ──────────────────────────────────────────────────────── */
.sp-expert .beginner-only,
body:not(.sp-beginner) .beginner-only { display: none !important; }
.sp-beginner .expert-only { display: none !important; }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.sp-hero-name { font-size: 16px; }
.sp-tabs { padding: 0 10px; }
.sp-tab { padding: 8px 10px; font-size: 10px; }
.st-stats-strip .st-stat-card { min-width: 70px; padding: 10px 10px; }
.st-sc-val { font-size: 18px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
SATELLITE PROFILE — hero + tabs bar overrides
═══════════════════════════════════════════════════════════════════════════ */
/* Breadcrumb row inside hero */
.sp-hero-breadcrumb {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 11px;
color: var(--muted); margin-bottom: 10px;
}
.sp-back-link { color: var(--muted); text-decoration: none; transition: color .15s; }
.sp-back-link:hover { color: var(--teal); }
.sp-nav-sep { color: rgba(255,255,255,.2); }
.sp-nav-norad { color: var(--muted-light); }
/* Hero title — reuse toolbox-title but allow JS to populate it */
.sp-hero-title { min-height: 1.2em; }
/* Meta row below title */
.sp-hero-meta-row {
display: flex; flex-wrap: wrap; align-items: center;
gap: 4px; margin-top: 8px;
font-family: var(--font-mono); font-size: 12px; color: var(--muted-light);
}
.sp-meta-item { }
.sp-meta-sep { color: rgba(255,255,255,.2); }
/* Actions row (status badge + mode toggle) */
.sp-hero-actions {
display: flex; align-items: center; gap: 12px;
margin-top: 14px; flex-wrap: wrap;
}
.sp-mode-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
padding: 5px 12px; background: transparent;
border: 1px solid rgba(255,255,255,.15); color: var(--muted);
cursor: pointer; border-radius: 2px; transition: border-color .15s, color .15s;
}
.sp-mode-btn:hover { border-color: var(--teal); color: var(--teal); }
/* Tabs bar — sits between hero and body */
.sp-tabs-bar {
background: rgba(0,0,0,.35);
border-bottom: 1px solid rgba(255,255,255,.08);
position: sticky; top: 0; z-index: 100;
backdrop-filter: blur(8px);
}
.sp-tabs-bar .sp-tabs {
display: flex; gap: 0; padding: 0; overflow-x: auto;
}
.sp-tabs-bar .sp-tab {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
padding: 13px 16px; background: transparent;
border: none; border-bottom: 2px solid transparent;
color: var(--muted); cursor: pointer; white-space: nowrap; margin-bottom: -1px;
transition: color .15s, border-color .15s;
}
.sp-tabs-bar .sp-tab:hover { color: var(--text); }
.sp-tabs-bar .sp-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
/* Profile body — panels now use toolbox-panel */
.sp-body { padding-bottom: 60px; }
.sp-body .sp-2col {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;
}
@media (max-width: 760px) { .sp-body .sp-2col { grid-template-columns: 1fr; } }
/* Beginner callout — inside a toolbox-panel */
.sp-beginner-card { margin-bottom: 20px; }
.sp-bc-inner {
display: flex; align-items: flex-start; gap: 16px;
padding: 16px 18px;
}
.sp-bc-icon { font-size: 28px; color: var(--teal); flex-shrink: 0; }
.sp-bc-headline { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.sp-bc-sub { font-size: 12px; color: var(--muted-light); line-height: 1.75; }
.sp-bc-sub p { margin: 4px 0 0; }
/* Space Traffic subnav — active state for new item */
.toolbox-subnav-sub-item--active { color: var(--teal) !important; }
/* ═══════════════════════════════════════════════════════════════════════════
SPACE JUNK BY COUNTRY — analytics dashboard
═══════════════════════════════════════════════════════════════════════════ */
/* ── KPI cards ───────────────────────────────────────────────────────────── */
.stc-kpi-row {
display: flex; flex-wrap: wrap; gap: 1px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.stc-kpi {
flex: 1; min-width: 100px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 14px 12px; text-align: center;
border-right: 1px solid rgba(255,255,255,.05);
}
.stc-kpi-val {
font-family: var(--font-mono); font-size: 20px; font-weight: 700;
color: var(--text); line-height: 1.1; white-space: nowrap;
}
.stc-kpi-lbl {
font-family: var(--font-mono); font-size: 9px; color: var(--muted);
letter-spacing: .06em; text-align: center; margin-top: 4px;
white-space: nowrap;
}
.stc-kpi--payload .stc-kpi-val { color: #4fc3f7; }
.stc-kpi--rb .stc-kpi-val { color: #ffa726; }
.stc-kpi--debris .stc-kpi-val { color: #ef5350; }
.stc-kpi--decay .stc-kpi-val { color: #78909c; }
.stc-kpi--top .stc-kpi-val { font-size: 13px; color: #a5d6a7; }
/* ── Insight callouts ────────────────────────────────────────────────────── */
.stc-insights {
display: flex; flex-wrap: wrap; gap: 0;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.stc-insight {
display: flex; align-items: flex-start; gap: 10px;
flex: 1; min-width: 220px; padding: 12px 16px;
border-right: 1px solid rgba(255,255,255,.05);
}
.stc-insight-icon {
font-size: 16px; color: var(--teal); flex-shrink: 0; margin-top: 1px;
}
.stc-insight-head {
font-family: var(--font-mono); font-size: 9px; color: var(--muted);
letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px;
}
.stc-insight-body {
font-family: var(--font-mono); font-size: 11px; color: var(--muted-light);
line-height: 1.4;
}
.stc-insight-body strong { color: var(--text); }
/* ── Controls bar ────────────────────────────────────────────────────────── */
.stc-controls-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.stc-controls-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }
.stc-search-input { flex: 1; min-width: 140px; max-width: 220px; }
.stc-select {
font-family: var(--font-mono); font-size: 10px;
background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1);
color: var(--muted-light); padding: 4px 8px; cursor: pointer;
}
.stc-filter-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted);
display: flex; align-items: center; gap: 4px; }
.stc-filter-check { font-family: var(--font-mono); font-size: 10px; color: var(--muted);
display: flex; align-items: center; gap: 4px; cursor: pointer; }
.stc-filter-check input { cursor: pointer; accent-color: var(--teal); }
/* View tabs */
.stc-view-tabs { display: flex; gap: 0; flex-shrink: 0; }
.stc-vtab {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
padding: 5px 12px; background: transparent;
border: 1px solid rgba(255,255,255,.1); border-right: none;
color: var(--muted); cursor: pointer; transition: color .15s, background .15s;
}
.stc-vtab:last-child { border-right: 1px solid rgba(255,255,255,.1); }
.stc-vtab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.stc-vtab.active { color: var(--teal); background: rgba(0,200,255,.06);
border-color: rgba(0,200,255,.3); }
/* ── Views ───────────────────────────────────────────────────────────────── */
.stc-views { padding: 0; }
.stc-view { display: none; }
.stc-view--active, .stc-view:not([hidden]) { display: block; }
/* Bars layout */
.stc-bars-layout {
display: flex; gap: 0;
align-items: flex-start;
}
.stc-bars-main { flex: 1; min-width: 0; padding: 12px 16px; }
.stc-top-lists {
width: 220px; flex-shrink: 0;
border-left: 1px solid rgba(255,255,255,.06);
padding: 10px 14px;
max-height: 600px; overflow-y: auto;
}
/* Metric tabs */
.stc-metric-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.stc-mtab {
font-family: var(--font-mono); font-size: 10px;
padding: 3px 10px; background: transparent;
border: 1px solid rgba(255,255,255,.1);
color: var(--muted); cursor: pointer; border-radius: 2px;
transition: border-color .15s, color .15s;
}
.stc-mtab:hover { border-color: var(--teal); color: var(--teal); }
.stc-mtab.active { border-color: var(--teal); color: var(--teal);
background: rgba(0,200,255,.06); }
/* Chart wrappers */
.stc-chart-wrap { position: relative; }
.stc-chart-wrap--stacked{ padding: 12px 16px; }
/* ── Treemap ──────────────────────────────────────────────────────────────── */
.stc-treemap-controls {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px; font-family: var(--font-mono); font-size: 10px; color: var(--muted);
border-bottom: 1px solid rgba(255,255,255,.05);
}
.stc-ctrl-lbl { color: var(--muted); }
.stc-treemap-wrap { padding: 10px 16px; overflow-x: auto; }
.stc-treemap-svg { width: 100%; max-width: 900px; height: 420px; display: block; }
.stc-tm-cell rect { transition: fill-opacity .15s; }
.stc-tm-cell:hover rect { fill-opacity: 1 !important; }
.stc-treemap-tt {
position: absolute; z-index: 200;
background: #0d1020; border: 1px solid rgba(255,255,255,.15);
padding: 8px 12px; font-family: var(--font-mono); font-size: 11px;
color: var(--muted-light); pointer-events: none; border-radius: 2px;
max-width: 220px;
}
/* ── Heatmap ─────────────────────────────────────────────────────────────── */
.stc-heatmap-wrap { overflow: auto; max-height: 520px; padding: 8px 16px; }
.stc-heatmap-table { border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.stc-hm-country-hdr, .stc-hm-hdr {
padding: 6px 10px; text-align: center; font-size: 9px; color: var(--muted);
letter-spacing: .06em; border-bottom: 1px solid rgba(255,255,255,.08);
position: sticky; top: 0; background: #080c18; z-index: 2;
white-space: nowrap;
}
.stc-hm-country-hdr { text-align: left; }
.stc-hm-country {
padding: 4px 10px 4px 6px; color: var(--muted-light); white-space: nowrap;
font-weight: 600; position: sticky; left: 0; background: #080c18; z-index: 1;
}
.stc-hm-cell {
padding: 4px 10px; text-align: right; border: 1px solid rgba(0,0,0,.3);
color: rgba(255,255,255,.9); font-size: 10px; min-width: 50px;
transition: background .1s;
}
.stc-heatmap-table tbody tr:hover .stc-hm-cell { filter: brightness(1.2); }
.stc-heatmap-table tbody tr:hover .stc-hm-country{ color: var(--text); }
.stc-hm-selected .stc-hm-country { color: var(--teal) !important; }
.stc-heatmap-legend {
display: flex; align-items: center; gap: 8px;
padding: 8px 16px; font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
.stc-hm-grad {
flex: 1; max-width: 140px; height: 8px; border-radius: 2px;
background: linear-gradient(to right, rgba(79,195,247,.05), rgba(79,195,247,.9));
}
/* ── 3D Globe view ───────────────────────────────────────────────────────── */
/* Globe-specific filter bar */
.stc-globe-filters {
padding: 10px 14px;
background: rgba(255,255,255,.02);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.stc-globe-filter-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.stc-globe-filter-input {
flex: 1;
min-width: 160px;
max-width: 260px;
font-size: 12px;
padding: 6px 10px;
}
.stc-globe-filter-note {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
margin-left: auto;
white-space: nowrap;
}
.stc-globe-layout {
display: grid;
grid-template-columns: 1fr 220px;
gap: 0;
min-height: 500px;
}
.stc-globe-main { position: relative; display: flex; flex-direction: column; }
.stc-globe-container {
flex: 1;
min-height: 480px;
background: #050912;
border-right: 1px solid rgba(255,255,255,.06);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.stc-globe-container canvas { display: block; width: 100% !important; height: 100% !important; }
.stc-globe-placeholder { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
/* Legend bar */
.stc-globe-legend {
display: flex;
align-items: center;
gap: 14px;
padding: 7px 14px;
background: rgba(255,255,255,.02);
border-top: 1px solid rgba(255,255,255,.05);
border-right: 1px solid rgba(255,255,255,.06);
flex-wrap: wrap;
}
.stc-gl-item {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted-light);
}
.stc-gl-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.stc-globe-hints {
padding: 5px 14px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
letter-spacing: .04em;
border-right: 1px solid rgba(255,255,255,.06);
}
/* Hover tooltip */
.stc-globe-tooltip {
position: absolute;
pointer-events: none;
background: rgba(5,9,18,.92);
border: 1px solid rgba(0,200,255,.25);
border-radius: 4px;
padding: 9px 12px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text);
min-width: 180px;
z-index: 10;
backdrop-filter: blur(4px);
}
.stc-gt-name {
font-size: 12px;
font-weight: 600;
color: var(--teal);
margin-bottom: 5px;
white-space: nowrap;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.stc-gt-row {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--muted-light);
font-size: 10px;
line-height: 1.7;
}
.stc-gt-row span:first-child { color: var(--muted); }
@media (max-width: 768px) {
.stc-globe-layout { grid-template-columns: 1fr; }
.stc-globe-container { min-height: 340px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
}
/* ── Enhanced table ──────────────────────────────────────────────────────── */
.stc-enhanced-table { font-size: 11px; }
.stc-th { padding: 8px 12px; position: sticky; top: 0; background: #080c18; z-index: 2;
text-align: right; border-bottom: 1px solid rgba(255,255,255,.08); }
.stc-th:first-child, .stc-th:nth-child(2) { text-align: left; }
.stc-th-sort { cursor: pointer; }
.stc-th-sort:hover { color: var(--teal); }
.stc-tbl-rank { color: var(--muted); font-size: 10px; text-align: center; width: 28px; }
.stc-tbl-country{ }
.stc-tbl-num { text-align: right; font-variant-numeric: tabular-nums; }
.stc-debris-col { color: #ef5350 !important; }
.stc-tbl-top td { }
.stc-tbl-top:nth-child(1) .stc-tbl-rank { color: #ffd700; }
.stc-tbl-top:nth-child(2) .stc-tbl-rank { color: #c0c0c0; }
.stc-tbl-top:nth-child(3) .stc-tbl-rank { color: #cd7f32; }
.stc-tbl-selected { background: rgba(0,200,255,.05) !important; }
.stc-tbl-selected .stc-tbl-rank { color: var(--teal) !important; }
.stc-inline-bar-wrap {
height: 3px; background: rgba(255,255,255,.06); border-radius: 1px; margin-top: 3px;
}
.stc-inline-bar { height: 100%; border-radius: 1px; }
/* ── Top lists ───────────────────────────────────────────────────────────── */
.stc-tl-block { margin-bottom: 16px; }
.stc-tl-head { font-family: var(--font-mono); font-size: 9px; color: var(--muted);
letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.stc-tl-row {
display: flex; align-items: center; gap: 5px;
padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.03);
font-family: var(--font-mono); font-size: 10px;
}
.stc-tl-row:hover { background: rgba(255,255,255,.03); }
.stc-tl-selected .stc-tl-name { color: var(--teal) !important; }
.stc-tl-rank { color: var(--muted); width: 14px; text-align: right; flex-shrink: 0; }
.stc-tl-name { color: var(--muted-light); flex-shrink: 0; width: 38px; }
.stc-tl-bar-wrap { flex: 1; height: 5px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.stc-tl-bar { height: 100%; border-radius: 2px; }
.stc-tl-val { color: var(--text); flex-shrink: 0; text-align: right; min-width: 38px; }
/* ── Country detail drawer ───────────────────────────────────────────────── */
.stc-country-drawer .mm-pd-hdr { padding: 14px 16px; }
.stc-cd-identity { display: flex; flex-direction: column; gap: 2px; }
.stc-cd-code { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text); }
.stc-cd-name { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.stc-cd-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.stc-cd-donut-wrap { display: flex; justify-content: center; }
.stc-cd-donut { max-width: 220px; max-height: 220px; }
.stc-cd-stats .sp-dt td { padding: 5px 8px; }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.stc-bars-layout { flex-direction: column; }
.stc-top-lists { width: 100%; border-left: none; border-top: 1px solid rgba(255,255,255,.06); }
.stc-kpi-val { font-size: 16px; }
.stc-kpi { padding: 10px 8px; min-width: 80px; }
}
@media (max-width: 600px) {
.stc-view-tabs { flex-wrap: wrap; }
.stc-insights { flex-direction: column; }
.stc-treemap-svg { height: 260px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ISS PASS TABLE — enhanced rows + quality chips
═══════════════════════════════════════════════════════════════════════════ */
/* ── Pass summary stats strip ────────────────────────────────────────────── */
.mm-pass-stats {
display: flex; flex-wrap: wrap; gap: 0;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.mm-ps-item {
display: flex; flex-direction: column; align-items: center;
padding: 10px 20px; border-right: 1px solid rgba(255,255,255,.05);
min-width: 110px; flex: 1;
}
.mm-ps-val { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--text); }
.mm-ps-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: .06em; margin-top: 3px; white-space: nowrap; }
/* ── ISS pass table rows (scoped to mm-iss-row to avoid conflict with flex bestpass rows) ── */
/* box-shadow:inset works on
with border-collapse:collapse; border-left does not */
.mm-iss-row { transition: background .1s; cursor: pointer; }
.mm-iss-row:hover { background: rgba(255,255,255,.04); }
.mm-iss-row--visible { box-shadow: inset 3px 0 0 #3de0c0; }
.mm-iss-row--night { box-shadow: inset 3px 0 0 rgba(255,255,255,.18); }
.mm-iss-row--selected { background: rgba(0,200,255,.07) !important; box-shadow: inset 3px 0 0 var(--teal) !important; }
.mm-iss-row--critical td { opacity: .7; }
.mm-iss-row--stale td { opacity: .85; }
/* Direction arc */
.mm-pt-dir-arc { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; letter-spacing: .04em; }
/* Elevation quality colours */
.mm-pt-el--excellent { color: #3de0c0; font-weight: 700; font-size: 16px; }
.mm-pt-el--good { color: #a5d6a7; font-weight: 700; font-size: 16px; }
.mm-pt-el--fair { color: #f0b429; font-weight: 600; }
.mm-pt-el--low { color: var(--muted); }
/* Quality chip */
.mm-pass-quality-chip {
display: inline-block;
font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
padding: 2px 7px; border-radius: 2px; border: 1px solid;
white-space: nowrap;
}
.mm-pq--excellent { color: #3de0c0; border-color: rgba(61,224,192,.4); background: rgba(61,224,192,.07); }
.mm-pq--good { color: #a5d6a7; border-color: rgba(165,214,167,.4); background: rgba(165,214,167,.07); }
.mm-pq--fair { color: #f0b429; border-color: rgba(240,180,41,.4); background: rgba(240,180,41,.07); }
.mm-pq--low { color: var(--muted); border-color: rgba(255,255,255,.15); }
/* ═══════════════════════════════════════════════════════════════════════════
ISS PASS DETAIL MODAL
═══════════════════════════════════════════════════════════════════════════ */
.mm-pass-modal[hidden] { display: none !important; }
.mm-pass-modal {
position: fixed; inset: 0; z-index: 9100;
display: flex; align-items: flex-start; justify-content: center;
padding: calc(var(--nav-height) + 16px) 16px 24px;
overflow-y: auto;
}
/* Inner card */
.mm-pm-inner {
position: relative; z-index: 1;
background: #070b16;
border: 1px solid rgba(255,255,255,.12);
border-radius: 3px;
width: 100%; max-width: 960px;
box-shadow: 0 24px 80px rgba(0,0,0,.8);
display: flex; flex-direction: column;
}
/* Header */
.mm-pm-hdr {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.3);
}
.mm-pm-hdr-left { flex: 1; min-width: 0; }
.mm-pm-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mm-pm-sat { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); }
.mm-pm-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted-light); }
.mm-pm-hdr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mm-pm-stat { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.mm-pm-stat strong { color: var(--text); }
.mm-pm-quality-badge {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
padding: 3px 10px; border-radius: 2px; border: 1px solid rgba(255,255,255,.2);
color: var(--muted-light);
}
.mm-pm-close-btn {
flex-shrink: 0; background: transparent;
border: 1px solid rgba(255,255,255,.15); color: var(--muted);
width: 30px; height: 30px; cursor: pointer; border-radius: 2px;
font-size: 14px; transition: border-color .15s, color .15s;
}
.mm-pm-close-btn:hover { border-color: var(--teal); color: var(--teal); }
/* Body 2-col */
.mm-pm-body {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.mm-pm-left, .mm-pm-right { padding: 16px 20px; display: flex; flex-direction: column; gap: 20px; }
.mm-pm-right { border-left: 1px solid rgba(255,255,255,.06); }
/* Section */
.mm-pm-section { }
.mm-pm-section-hdr {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Pass summary data table */
.mm-pm-dt td { padding: 5px 8px; }
.mm-pm-dt td:first-child { color: var(--muted); min-width: 110px; }
.mm-pm-dt td:last-child { color: var(--muted-light); }
/* Sky path */
.mm-pm-skypath-wrap { display: flex; justify-content: center; }
.mm-pm-skypath-svg { width: 260px; height: 260px; display: block; }
.mm-pm-skypath-legend {
display: flex; justify-content: center; gap: 16px;
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
margin-top: 8px;
}
.mm-pm-skypath-legend span { display: flex; align-items: center; gap: 5px; }
.mm-pm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Ground track map */
.mm-pm-groundtrack { height: 220px; background: #0a0d18; border-radius: 2px; }
/* Weather panel */
.mm-pm-wx-loading {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
padding: 8px 0;
}
.mm-pm-wx-verdict {
padding: 10px 14px; border: 1px solid rgba(255,255,255,.1);
border-radius: 2px; background: rgba(0,0,0,.2); margin-bottom: 12px;
}
.mm-pm-wx-label {
font-family: var(--font-mono); font-size: 13px; font-weight: 700;
display: block; margin-bottom: 4px;
}
.mm-pm-wx-reason { font-size: 11px; color: var(--muted-light); line-height: 1.6; }
.mm-pm-wx-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-pm-wx-item { min-width: 70px; }
.mm-pm-wx-val { font-family: var(--font-mono); font-size: 15px; color: var(--text); font-weight: 600; }
.mm-pm-wx-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: .06em; margin-top: 2px; }
.mm-pm-cloud-bar-wrap { height: 4px; background: rgba(255,255,255,.07); border-radius: 2px; margin-top: 4px; }
.mm-pm-cloud-bar { height: 100%; border-radius: 2px; transition: width .4s; }
/* Details section */
.mm-pm-details { border-top: 1px solid rgba(255,255,255,.06); }
.mm-pm-details-toggle {
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
padding: 10px 20px; cursor: pointer; letter-spacing: .06em;
list-style: none; display: flex; align-items: center; gap: 8px;
}
.mm-pm-details-toggle:hover { color: var(--text); }
.mm-pm-details-toggle::marker { display: none; }
.mm-pm-details-toggle::before { content: '▶'; font-size: 8px; }
details[open] .mm-pm-details-toggle::before { content: '▼'; }
.mm-pm-details-body { padding: 0 20px 16px; }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.mm-pm-body { grid-template-columns: 1fr; }
.mm-pm-right { border-left: none; border-top: 1px solid rgba(255,255,255,.06); }
.mm-pm-skypath-svg { width: 220px; height: 220px; }
.mm-pm-groundtrack { height: 180px; }
.mm-pass-stats { flex-wrap: wrap; }
.mm-ps-item { min-width: 90px; padding: 8px 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
SATELLITE PROFILE — enhanced layout + decay state
═══════════════════════════════════════════════════════════════════════════ */
/* ── Status banner (decay notice) ───────────────────────────────────────── */
.sp-status-banner[hidden] { display: none !important; }
.sp-status-banner {
display: flex; align-items: flex-start; gap: 14px;
padding: 12px 24px;
background: rgba(239,83,80,.08);
border-bottom: 1px solid rgba(239,83,80,.25);
}
.sp-sb-icon { font-size: 18px; color: #ef5350; flex-shrink: 0; margin-top: 1px; }
.sp-sb-head { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #ef5350; margin-bottom: 3px; }
.sp-sb-detail { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light); line-height: 1.6; }
/* ── Hero meta chips ─────────────────────────────────────────────────────── */
.sp-chip {
display: inline-block;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
padding: 3px 8px; border: 1px solid rgba(255,255,255,.12);
border-radius: 2px; color: var(--muted-light); white-space: nowrap;
margin-right: 4px; margin-bottom: 4px;
}
.sp-chip--orbit { font-weight: 600; }
.sp-chip--analyst { color: #f59e0b; border-color: rgba(245,158,11,.4); border-style: dashed; }
.sp-cdm-ev-type--analyst { color: #f59e0b; }
/* ── Decayed profile visual treatment ───────────────────────────────────── */
.sp-is-decayed .sp-orbit-sum-stat .sp-oss-val { color: var(--muted); }
.sp-is-decayed .sp-orbit-sum-stat .sp-oss-lbl { color: #78909c; font-style: italic; }
.sp-is-decayed #sp-orbit-class-badge { opacity: .7; }
/* ── Decayed pass notice ─────────────────────────────────────────────────── */
.sp-decayed-panel-notice {
display: flex; align-items: flex-start; gap: 16px;
padding: 24px 20px;
font-family: var(--font-mono);
}
.sp-dpn-icon { font-size: 24px; color: #78909c; flex-shrink: 0; }
.sp-dpn-head { font-size: 14px; color: var(--text); margin-bottom: 6px; }
.sp-dpn-body { font-size: 12px; color: var(--muted-light); line-height: 1.7; }
/* ── Visibility decayed notice ───────────────────────────────────────────── */
.sp-vis-decayed-notice {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px;
}
.sp-vis-decayed-notice .sp-vis-icon { font-size: 20px; color: #78909c; flex-shrink: 0; }
.sp-vis-decayed-notice .sp-vis-headline { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.sp-vis-decayed-notice .sp-vis-sub { font-size: 11px; color: var(--muted); }
/* ── TLE staleness warnings ──────────────────────────────────────────────── */
.sp-tle-warn {
padding: 7px 12px; margin-bottom: 10px;
background: rgba(240,180,41,.08);
border-left: 2px solid rgba(240,180,41,.5);
font-family: var(--font-mono); font-size: 11px; color: #f0b429;
}
.sp-tle-warn--crit {
background: rgba(239,83,80,.08);
border-left-color: rgba(239,83,80,.5);
color: #ef5350;
}
.sp-tle-stale { color: #f0b429 !important; }
/* ── Launch & ownership table ────────────────────────────────────────────── */
#sp-launch-table td:first-child { min-width: 110px; }
/* ── Pass table next-row highlight ──────────────────────────────────────── */
.sp-pass-next td { background: rgba(0,200,255,.04) !important; }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.sp-status-banner { padding: 10px 14px; }
.sp-sb-detail { font-size: 10px; }
.sp-chip { font-size: 9px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
SATELLITE PROFILE — orbit summary grid, pass viz row, map placeholder, buttons
═══════════════════════════════════════════════════════════════════════════ */
/* ── Orbit summary grid (replaces flex row) ──────────────────────────────── */
.sp-orbit-sum-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 0;
padding: 0;
}
.sp-oss-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 14px 10px; text-align: center;
border-right: 1px solid rgba(255,255,255,.05);
border-bottom: 1px solid rgba(255,255,255,.05);
}
.sp-oss-item--highlight { background: rgba(255,255,255,.02); }
.sp-oss-item--wide { grid-column: span 2; }
.sp-oss-item--epoch { grid-column: 1 / -1; background: rgba(0,0,0,.2); }
.sp-oss-val {
font-family: var(--font-mono); font-size: 20px; font-weight: 700;
color: var(--text); line-height: 1.1;
}
.sp-oss-lbl {
font-family: var(--font-mono); font-size: 9px; color: var(--muted);
letter-spacing: .06em; margin-top: 4px; white-space: nowrap;
}
/* ── Sky Path + Ground Track side-by-side (passes tab) ───────────────────── */
.sp-pass-viz-row[hidden] { display: none !important; }
.sp-pass-viz-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
@media (max-width: 760px) {
.sp-pass-viz-row { grid-template-columns: 1fr; }
}
.sp-skypath-preview { display: flex; justify-content: center; padding: 10px; }
.sp-skypath-legend {
display: flex; justify-content: center; gap: 16px;
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
padding: 4px 12px 12px;
}
.sp-skypath-legend span { display: flex; align-items: center; gap: 5px; }
/* ── Ground track map states ─────────────────────────────────────────────── */
/* Leaflet adds .leaflet-container to the map div itself, so override must be !important */
.sp-groundtrack-map { height: 280px; background: #000 !important; border-radius: 2px; overflow: hidden; }
.sp-groundtrack-map--empty { display: flex; align-items: center; justify-content: center; }
.sp-map-placeholder {
display: flex; flex-direction: column; align-items: center; gap: 10px;
color: var(--muted); font-family: var(--font-mono); font-size: 11px;
opacity: .5;
}
.sp-map-ph-icon { font-size: 28px; }
/* Override Leaflet popup background for dark theme */
.leaflet-popup-content-wrapper {
background: #0d1020 !important;
color: #e8eeff !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 2px !important;
box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
font-family: var(--font-mono) !important;
font-size: 11px !important;
}
.leaflet-popup-tip { background: #0d1020 !important; }
.leaflet-container a { color: var(--teal) !important; }
/* ── CTA / prominent buttons ─────────────────────────────────────────────── */
.sp-gt-cta-row {
display: flex; align-items: center; gap: 14px;
padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.sp-gt-load-btn, .sp-pass-refresh-btn {
font-size: 12px; padding: 7px 16px; white-space: nowrap; flex-shrink: 0;
}
.sp-gt-note {
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
line-height: 1.5;
}
/* Pass location row (recompute button) */
.sp-pass-loc-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,.05);
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
.sp-pass-loc-lbl { color: var(--muted); }
#sp-pass-loc-val { color: var(--muted-light); flex: 1; }
/* ── Ground track window selector + square map ───────────────────────────── */
.sp-gt-controls {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.sp-gt-window-btns {
display: flex; gap: 0;
}
.sp-gt-win {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
padding: 5px 14px; background: transparent;
border: 1px solid rgba(255,255,255,.12); border-right: none;
color: var(--muted); cursor: pointer; transition: color .15s, background .15s;
}
.sp-gt-win:last-child { border-right: 1px solid rgba(255,255,255,.12); }
.sp-gt-win:hover { color: var(--text); background: rgba(255,255,255,.04); }
.sp-gt-win.active { color: var(--teal); background: rgba(0,200,255,.06);
border-color: rgba(0,200,255,.3); }
/* Ground track card: fills live-row height, map fills all remaining space */
#sp-groundtrack-card {
display: flex;
flex-direction: column;
}
#sp-groundtrack-card .sp-gt-controls { flex-shrink: 0; }
#sp-groundtrack-card .sp-groundtrack-map {
flex: none !important;
height: auto !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.sp-groundtrack-map--square {
height: auto !important;
aspect-ratio: 16 / 9;
max-height: 60vh;
}
/* ── Pass row selection (satellite profile passes tab) ───────────────────── */
.sp-pass-row { transition: background .1s; }
.sp-pass-row:hover { background: rgba(255,255,255,.04); }
.sp-pass-row.sp-pass-selected {
background: rgba(0,200,255,.07) !important;
box-shadow: inset 3px 0 0 var(--teal);
}
/* ── ISS Globe card ──────────────────────────────────────────────────────── */
.mm-iss-globe-container {
width: 100%;
height: 420px;
position: relative;
background: #030810;
border-radius: 0 0 4px 4px;
}
.mm-iss-globe-container canvas { display: block; }
.mm-iss-globe-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
padding: 10px 18px 14px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: .06em;
}
.mm-iss-gl-item { display: flex; align-items: center; gap: 6px; }
.mm-iss-gl-dot {
display: inline-block;
width: 9px; height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.mm-iss-gl-line {
display: inline-block;
width: 18px; height: 2px;
border-radius: 1px;
flex-shrink: 0;
}
@media (max-width: 767px) {
.mm-iss-globe-container { height: 320px; }
}
/* ── ISS Live Position — enhanced 3-band card ────────────────────────────── */
/* Band 1: Status */
.mm-iss-b1 {
padding: 12px 18px 10px;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.mm-iss-b1-pill {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.mm-iss-b1-dot {
width: 9px; height: 9px;
border-radius: 50%;
flex-shrink: 0;
background: #334466;
transition: background .3s, box-shadow .3s;
}
.mm-iss-b1-dot--visible { background: var(--teal); box-shadow: 0 0 7px var(--teal); }
.mm-iss-b1-dot--near { background: #ffa726; box-shadow: 0 0 5px #ffa726; }
.mm-iss-b1-dot--below { background: #334466; }
.mm-iss-b1-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .08em;
color: var(--text);
}
.mm-iss-b1-summary {
font-size: 13px;
color: var(--text);
margin-bottom: 4px;
line-height: 1.4;
}
.mm-iss-b1-meta {
font-size: 11px;
font-family: var(--font-mono);
color: var(--muted);
line-height: 1.5;
}
.mm-iss-tle-warn {
margin-top: 6px;
font-size: 11px;
font-family: var(--font-mono);
padding: 4px 8px;
border-radius: 3px;
}
.mm-iss-tle-stale { color: #ffa726; background: rgba(255,167,38,.08); }
.mm-iss-tle-critical { color: #ef5350; background: rgba(239,83,80,.1); }
/* Band 2: Sky Position */
.mm-iss-b2 {
display: flex;
gap: 12px;
padding: 12px 18px 8px;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.mm-iss-b2-left {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.mm-iss-el-arc-wrap { width: 100px; height: 58px; }
.mm-iss-el-svg { width: 100%; height: 100%; }
.mm-iss-b2-arc-footer {
display: flex;
align-items: baseline;
gap: 4px;
margin-top: 3px;
}
.mm-iss-b2-el {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
color: var(--muted);
transition: color .3s;
}
.mm-iss-b2-el.toolbox-val--good { color: var(--teal); }
.mm-iss-b2-el.toolbox-val--warn { color: #ffa726; }
.mm-iss-b2-el-lbl {
font-size: 9px;
font-family: var(--font-mono);
color: var(--muted);
letter-spacing: .06em;
}
.mm-iss-b2-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.mm-iss-b2-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.mm-iss-b2-key {
font-size: 11px;
font-family: var(--font-mono);
color: var(--muted);
letter-spacing: .05em;
white-space: nowrap;
}
.mm-iss-b2-val {
font-size: 12px;
font-family: var(--font-mono);
color: var(--text);
text-align: right;
}
.mm-iss-b2-timing {
padding: 6px 18px 8px;
font-size: 11px;
font-family: var(--font-mono);
color: var(--teal);
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.mm-iss-timing-sep { color: var(--muted); }
.mm-iss-timing-item strong { color: var(--teal); }
/* Band 3: Orbital data — reuses existing .mm-iss-metrics / .mm-iss-metric */
.mm-iss-b3 { border-top: 1px solid rgba(255,255,255,.05); }
/* Mini timeline */
.mm-iss-tl {
padding: 10px 16px 12px;
border-top: 1px solid rgba(255,255,255,.05);
}
.mm-iss-tl-empty {
font-size: 10px;
font-family: var(--font-mono);
color: var(--muted);
text-align: center;
padding: 4px 0;
}
.mm-iss-tl-row {
display: flex;
align-items: flex-start;
}
.mm-iss-tl-seg {
flex: 1;
height: 2px;
background: rgba(255,255,255,.08);
margin-top: 6px;
border-radius: 1px;
transition: background .4s;
}
.mm-iss-tl-seg.tl-done { background: rgba(0,200,255,.3); }
.mm-iss-tl-seg.tl-live { background: var(--teal); box-shadow: 0 0 4px var(--teal); }
.mm-iss-tl-mark {
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 auto;
min-width: 0;
}
.mm-iss-tl-hide { opacity: .35; }
.mm-iss-tl-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,.15);
margin-bottom: 4px;
transition: background .3s, box-shadow .3s;
}
.mm-iss-tl-now .mm-iss-tl-dot { background: var(--muted); }
.tl-active .mm-iss-tl-dot { background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.tl-next .mm-iss-tl-dot { background: var(--teal); }
.tl-done .mm-iss-tl-dot { background: rgba(0,200,255,.35); }
.tl-warn .mm-iss-tl-dot { background: #ffa726; }
.mm-iss-tl-lbl {
font-size: 9px;
font-family: var(--font-mono);
color: var(--muted);
letter-spacing: .05em;
white-space: nowrap;
}
.mm-iss-tl-time {
font-size: 9px;
font-family: var(--font-mono);
color: var(--muted-light);
white-space: nowrap;
}
.mm-iss-tl-cd {
font-size: 9px;
font-family: var(--font-mono);
color: var(--teal);
white-space: nowrap;
}
/* ── ISS Passes — enhanced table & filter bar ────────────────────────────── */
/* 7-button filter bar */
.mm-pf-bar {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 10px 0 4px;
}
.mm-pf-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .05em;
color: var(--muted);
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 3px;
padding: 4px 9px;
cursor: pointer;
transition: color .2s, border-color .2s, background .2s;
white-space: nowrap;
}
.mm-pf-btn:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.mm-pf-btn--active {
color: var(--teal);
border-color: rgba(0,200,255,.45);
background: rgba(0,200,255,.07);
}
.mm-pf-cnt {
font-size: 10px;
color: var(--muted);
background: rgba(255,255,255,.06);
border-radius: 2px;
padding: 0 4px;
min-width: 16px;
text-align: center;
}
.mm-pf-btn--active .mm-pf-cnt { color: var(--teal); background: rgba(0,200,255,.1); }
/* "Best Only" header toggle */
.mm-pass-best-btn {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .05em;
color: var(--muted);
background: transparent;
border: 1px solid rgba(255,255,255,.1);
border-radius: 3px;
padding: 3px 8px;
cursor: pointer;
transition: color .2s, border-color .2s, background .2s;
}
.mm-pass-best-btn:hover { color: var(--teal); border-color: rgba(0,200,255,.3); }
.mm-pass-best-btn[data-active="true"] {
color: var(--teal);
border-color: rgba(0,200,255,.5);
background: rgba(0,200,255,.08);
}
/* Table column: hide directions on narrow screens */
.mm-col-dirs { white-space: nowrap; }
@media (max-width: 640px) { .mm-col-dirs { display: none; } }
/* Date/time column */
.mm-pt-times {
font-size: 11px;
color: var(--muted);
white-space: nowrap;
}
.mm-pt-dir-full, .mm-pt-dir-short { font-size: 11px; }
/* Conditions column */
.mm-pt-cond {
font-size: 10px;
font-family: var(--font-mono);
color: var(--muted);
display: flex;
flex-wrap: wrap;
gap: 0 6px;
margin-top: 2px;
}
.mm-pt-illum { color: var(--muted-light); }
.mm-pt-moon { color: var(--muted); }
.mm-pt-cloud { color: var(--muted); }
/* Verdict column */
.mm-pv-text {
font-size: 10px;
font-family: var(--font-mono);
margin-top: 2px;
line-height: 1.3;
}
.mm-pv-text.mm-pv--excellent { color: var(--teal); }
.mm-pv-text.mm-pv--good { color: #a5d6a7; }
.mm-pv-text.mm-pv--fair { color: #f0b429; }
.mm-pv-text.mm-pv--poor { color: var(--muted); }
.mm-pv-score {
font-size: 10px;
font-family: var(--font-mono);
color: var(--muted);
margin-left: 4px;
}
/* Row visual emphasis */
.mm-iss-row--excellent {
box-shadow: inset 3px 0 0 var(--teal);
background: rgba(0,200,255,.03);
}
.mm-iss-row--good {
box-shadow: inset 3px 0 0 rgba(0,200,255,.4);
}
/* ── ISS Facts & Mission Status section ─────────────────────────────────── */
/* Section divider */
.mm-iss-facts-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,200,255,.18) 30%, rgba(0,200,255,.18) 70%, transparent);
margin: 32px 0 28px;
}
/* 3-column responsive grid */
.toolbox-row--3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: start;
}
@media (max-width: 900px) { .toolbox-row--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .toolbox-row--3 { grid-template-columns: 1fr; } }
/* Facts card inner grid: 2 columns of stat blocks */
.mm-iss-facts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 12px;
padding: 14px 16px 16px;
}
/* Individual fact item */
.mm-iss-fact-item { min-width: 0; }
.mm-iss-fact-item--wide { grid-column: 1 / -1; }
.mm-iss-fact-val {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
margin-bottom: 2px;
}
.mm-iss-fact-live { color: var(--teal); }
.mm-iss-fact-lbl {
font-size: 10px;
font-family: var(--font-mono);
color: var(--muted);
letter-spacing: .05em;
line-height: 1.4;
}
/* Agency chips */
.mm-iss-agency-chip {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted-light);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 2px;
padding: 1px 5px;
margin: 0 2px 2px 0;
}
/* Crew name chips */
.mm-iss-crew-wrap, .mm-iss-docked-wrap {
margin-top: 4px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.mm-iss-crew-chip {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text);
background: rgba(0,200,255,.07);
border: 1px solid rgba(0,200,255,.2);
border-radius: 2px;
padding: 2px 6px;
}
.mm-iss-docked-chip {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted-light);
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 2px;
padding: 2px 6px;
}
/* Mission card footer */
.mm-iss-mission-footer {
padding: 8px 16px 12px;
border-top: 1px solid rgba(255,255,255,.05);
font-size: 10px;
font-family: var(--font-mono);
}
/* ── ISS Live & Media section ────────────────────────────────────────────── */
/* 2-column row: video (wider) + side column (narrower) */
.mm-iss-media-row {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 16px;
margin-top: 16px;
}
@media (max-width: 900px) { .mm-iss-media-row { grid-template-columns: 1fr; } }
.mm-iss-side-col {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Live stream pill badge */
.mm-iss-stream-pill {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .1em;
padding: 2px 7px;
border-radius: 3px;
border: 1px solid transparent;
}
.mm-iss-stream-pill--live {
color: #3de0c0;
border-color: rgba(0,200,255,.4);
background: rgba(0,200,255,.07);
}
.mm-iss-stream-pill--off {
color: var(--muted);
border-color: rgba(255,255,255,.12);
}
/* Stream external link */
.mm-iss-stream-ext {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
text-decoration: none;
transition: color .2s;
}
.mm-iss-stream-ext:hover { color: var(--teal); }
/* Two-feed side-by-side grid */
.mm-iss-feeds-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 12px 16px 16px;
}
.mm-iss-feed-col { display: flex; flex-direction: column; gap: 6px; }
.mm-iss-feed-label {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 11px;
font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted);
}
.mm-iss-stream-footer {
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
padding: 4px 0;
}
@media (max-width: 640px) {
.mm-iss-feeds-grid { grid-template-columns: 1fr; }
}
/* 16:9 iframe container — padding trick prevents layout shift */
.mm-iss-stream-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #030810;
overflow: hidden;
}
.mm-iss-stream-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
/* Stream fallback overlay */
.mm-iss-stream-fallback {
position: absolute;
inset: 0;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(3,8,16,.92);
text-align: center;
padding: 20px;
}
.mm-iss-stream-fallback:not([hidden]) { display: flex; }
.mm-iss-stream-fallback-icon {
font-size: 32px;
color: var(--muted);
line-height: 1;
}
.mm-iss-stream-fallback-text {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
line-height: 1.6;
}
.mm-iss-stream-fallback-text a { color: var(--teal); }
/* NASA image gallery */
.mm-iss-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
padding: 10px 14px 12px;
min-height: 80px;
}
@media (max-width: 640px) { .mm-iss-gallery { grid-template-columns: repeat(3, 1fr); } }
.mm-iss-gallery-item {
display: block;
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: 3px;
background: rgba(255,255,255,.04);
text-decoration: none;
}
.mm-iss-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s;
}
.mm-iss-gallery-item:hover img { transform: scale(1.06); }
.mm-iss-gallery-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,.75));
padding: 12px 5px 4px;
font-size: 9px;
font-family: var(--font-mono);
color: rgba(255,255,255,.75);
opacity: 0;
transition: opacity .2s;
}
.mm-iss-gallery-item:hover .mm-iss-gallery-caption { opacity: 1; }
.mm-iss-gallery-title, .mm-iss-gallery-date { line-height: 1.3; }
.mm-iss-gallery-footer {
padding: 5px 14px 10px;
font-size: 10px;
font-family: var(--font-mono);
border-top: 1px solid rgba(255,255,255,.05);
}
.mm-iss-gallery-footer a { color: var(--teal); }
.mm-iss-gallery-loading { padding: 20px 14px; }
/* Current Mission card: expedition thumbnail */
.mm-iss-media-thumb-wrap {
width: 100%;
aspect-ratio: 16 / 7;
overflow: hidden;
background: #030d1e;
}
.mm-iss-media-thumb-link { display: block; width: 100%; height: 100%; }
.mm-iss-media-thumb-img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .3s;
}
.mm-iss-media-thumb-link:hover .mm-iss-media-thumb-img { transform: scale(1.04); }
/* Related posts list */
.mm-iss-posts-list {
display: flex;
flex-direction: column;
gap: 0;
}
.mm-iss-post-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.05);
transition: background .15s;
}
.mm-iss-post-item:last-child { border-bottom: none; }
.mm-iss-post-item:hover { background: rgba(255,255,255,.03); }
.mm-iss-post-thumb {
flex: 0 0 44px;
width: 44px;
height: 44px;
overflow: hidden;
border-radius: 3px;
background: rgba(255,255,255,.05);
}
.mm-iss-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-iss-post-body { flex: 1; min-width: 0; }
.mm-iss-post-title {
font-size: 12px;
color: var(--text);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mm-iss-post-date {
font-size: 10px;
font-family: var(--font-mono);
margin-top: 2px;
}
.mm-iss-posts-empty { padding: 16px 14px; font-size: 12px; }
/* ── ISS Current Mission — Space Devs crew rows ──────────────────────────── */
.mm-iss-crew-list {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.mm-iss-crew-loading { padding: 12px 16px; font-size: 11px; }
.mm-iss-crew-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-bottom: 1px solid rgba(255,255,255,.04);
transition: background .15s;
}
.mm-iss-crew-row:last-child { border-bottom: none; }
.mm-iss-crew-row:hover { background: rgba(255,255,255,.02); }
a.mm-iss-crew-row, .mm-iss-crew-row--link { text-decoration: none; color: inherit; transition: background .12s; }
a.mm-iss-crew-row:hover, .mm-iss-crew-row--link:hover { background: rgba(0,200,255,.06); }
.mm-iss-crew-avatar-wrap { flex: 0 0 32px; }
.mm-iss-crew-avatar {
width: 32px; height: 32px;
border-radius: 50%;
object-fit: cover;
display: block;
background: rgba(255,255,255,.07);
}
.mm-iss-crew-avatar--placeholder {
width: 32px; height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--muted);
background: rgba(255,255,255,.06);
}
.mm-iss-crew-info { flex: 1; min-width: 0; }
.mm-iss-crew-name { font-size: 12px; color: var(--text); line-height: 1.3; }
.mm-iss-crew-meta { display: flex; gap: 6px; align-items: center; margin-top: 1px; }
.mm-iss-crew-role {
font-size: 9px;
font-family: var(--font-mono);
letter-spacing: .05em;
padding: 1px 5px;
border-radius: 2px;
}
.mm-iss-role--cmd { color: #ffe060; background: rgba(255,224,96,.1); border: 1px solid rgba(255,224,96,.25); }
.mm-iss-role--fe { color: var(--muted-light); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.mm-iss-crew-agency {
font-size: 9px;
font-family: var(--font-mono);
color: var(--muted);
letter-spacing: .05em;
}
/* Mission patch image (replaces NASA expedition photo in card header) */
.mm-iss-mission-patch-img {
width: 100%;
height: 100%;
object-fit: contain;
background: #03080e;
display: block;
padding: 8px;
}
/* ── ISS Master Strip (live status + orbit + mission + station overview) ─── */
.mm-iss-master-strip {
border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Left border separator between strip groups */
.mm-strip-sep { border-left: 1px solid rgba(255,255,255,.08); }
/* Teal colour for live-updated values in the strip */
.mm-strip-live { color: var(--teal) !important; }
/* ── Facts bar (second row of the master strip) ─────────────────────────── */
.mm-iss-facts-bar {
display: flex;
align-items: center;
gap: 0;
background: rgba(0,0,0,.18);
border-top: 1px solid rgba(255,255,255,.04);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
-webkit-overflow-scrolling: touch;
white-space: nowrap;
padding: 0 2px;
}
.mm-iss-facts-bar::-webkit-scrollbar { display: none; }
.mm-iss-fbar-grp {
display: inline-flex;
flex-direction: column;
padding: 5px 14px;
border-right: 1px solid rgba(255,255,255,.05);
flex-shrink: 0;
}
.mm-iss-fbar-grp--header {
flex-direction: row;
align-items: center;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .12em;
color: var(--teal);
opacity: .7;
padding: 5px 12px;
border-right: none;
text-transform: uppercase;
}
.mm-iss-fbar-div {
width: 1px;
height: 28px;
background: rgba(0,200,255,.18);
flex-shrink: 0;
margin: 0 4px;
align-self: center;
}
.mm-iss-fbar-lbl {
font-size: 9px;
font-family: var(--font-mono);
color: var(--muted);
letter-spacing: .05em;
line-height: 1.2;
margin-bottom: 1px;
}
.mm-iss-fbar-val {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text);
line-height: 1.3;
}
/* ── Docked vehicles bar (master strip, between summary and facts) ─────────── */
.mm-iss-docked-bar {
display: flex;
align-items: center;
gap: 10px;
background: rgba(0,0,0,.22);
border-top: 1px solid rgba(255,255,255,.04);
padding: 5px 16px;
overflow-x: auto;
overflow-y: visible;
scrollbar-width: none;
white-space: nowrap;
}
.mm-iss-docked-bar::-webkit-scrollbar { display: none; }
.mm-iss-docked-hdr {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--teal);
opacity: .7;
flex-shrink: 0;
}
.mm-iss-docked-chips {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
position: relative;
}
/* Individual vehicle chip — acts as popover trigger */
.mm-docked-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 10px;
padding: 3px 8px 3px 6px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
color: var(--muted-light);
cursor: pointer;
transition: border-color .2s, background .2s, color .2s;
white-space: nowrap;
}
.mm-docked-chip:hover,
.mm-docked-chip[aria-expanded="true"] {
border-color: rgba(0,200,255,.35);
background: rgba(0,200,255,.07);
color: var(--text);
}
.mm-docked-chip--crew {
border-color: rgba(100,200,255,.2);
}
.mm-docked-chip--cargo {
border-color: rgba(200,180,100,.18);
}
.mm-docked-chip-icon { font-size: 9px; opacity: .7; }
.mm-docked-chip-name { font-weight: 600; }
.mm-docked-chip-port {
font-size: 9px;
color: var(--muted);
padding-left: 2px;
}
.mm-docked-chip-port::before { content: '·'; margin-right: 3px; opacity: .5; }
/* Popover panel */
.mm-docked-popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 120;
min-width: 210px;
background: rgba(8,10,24,.97);
border: 1px solid rgba(0,200,255,.25);
border-radius: 4px;
padding: 12px 14px 10px;
box-shadow: 0 6px 24px rgba(0,0,0,.6);
pointer-events: auto;
}
.mm-docked-pop-title {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.07);
padding-bottom: 5px;
}
.mm-docked-pop-dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 3px 10px;
font-family: var(--font-mono);
font-size: 10px;
margin: 0;
}
.mm-docked-pop-dl dt {
color: var(--muted);
white-space: nowrap;
}
.mm-docked-pop-dl dd {
color: var(--text);
margin: 0;
}
.mm-docked-pop-link {
display: inline-block;
margin-top: 8px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--teal);
text-decoration: none;
opacity: .8;
}
.mm-docked-pop-link:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 767px) {
.mm-iss-docked-bar { padding: 4px 10px; gap: 8px; }
.mm-docked-chip-port { display: none; }
.mm-docked-popover { min-width: 180px; }
}
/* ── 3-column media row: Video | Current Mission | Gallery+Posts ─────────── */
.mm-iss-media-row--3col {
grid-template-columns: 5fr 3fr 3fr;
}
@media (max-width: 1100px) { .mm-iss-media-row--3col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .mm-iss-media-row--3col { grid-template-columns: 1fr; } }
/* Current Mission column: constrain the mission patch to a reasonable height */
.mm-iss-mission-col .mm-iss-media-thumb-wrap {
aspect-ratio: 3 / 1;
max-height: 90px;
}
.mm-iss-mission-col .mm-iss-mission-patch-img { object-fit: contain; padding: 6px; }
/* ��─ Header location control ─────────────────────────────────────────────── */
/* Wrapper: position:relative so the dropdown can absolute-position from it */
.nav-loc-wrap { position: relative; }
/* Compact button in the nav bar — mirrors .nav-dark-sky-btn style */
.nav-loc-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .07em;
color: var(--muted);
background: transparent;
border: 1px solid transparent;
padding: 6px 8px;
cursor: pointer;
transition: color .2s, border-color .2s;
white-space: nowrap;
max-width: 240px;
}
.nav-loc-btn:hover,
.nav-loc-btn[aria-expanded="true"] {
color: var(--teal);
border-color: rgba(0,200,255,.3);
}
.nav-loc-btn:focus-visible {
outline: 2px solid rgba(0,200,255,.6);
outline-offset: 2px;
}
.nav-loc-icon { font-size: 11px; color: var(--teal); flex-shrink: 0; }
.nav-loc-btn .nav-loc-name {
/* override .toolbox-loc-name's Orbitron font for the compact header button */
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px;
}
.nav-loc-btn .nav-loc-coords {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-loc-caret {
font-size: 8px;
color: var(--muted);
flex-shrink: 0;
transition: transform .2s;
margin-left: 1px;
}
.nav-loc-btn[aria-expanded="true"] .nav-loc-caret { transform: rotate(180deg); }
/* Dropdown panel — drops below the fixed header */
.nav-loc-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: min(480px, 95vw);
background: rgba(2, 4, 20, 0.98);
border: 1px solid var(--blue-border);
border-top: 2px solid var(--teal);
backdrop-filter: blur(20px) saturate(180%);
z-index: 1100; /* above header (z-index:1000) */
padding: 16px 18px;
box-shadow: 0 8px 40px rgba(0,0,0,.7);
/* Inherit form layout from .toolbox-loc-form */
margin-top: 0;
border-radius: 0 0 3px 3px;
}
/* When the dropdown would overflow right edge on small viewports, pin to left */
@media (max-width: 520px) {
.nav-loc-dropdown { right: auto; left: 0; }
}
/* Responsive: hide coords badge to save space; hide city label on tiny screens */
@media (max-width: 800px) { .nav-loc-btn .nav-loc-coords { display: none; } }
@media (max-width: 500px) { .nav-loc-btn .nav-loc-name { max-width: 70px; } }
@media (max-width: 380px) { .nav-loc-btn .nav-loc-name { display: none; } }
/* ── Site-branding location widget ──────────────────────────────────────── */
.site-loc-wrap {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
}
.site-loc-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .07em;
color: var(--muted);
background: transparent;
border: 1px solid transparent;
padding: 5px 8px;
cursor: pointer;
transition: color .2s, border-color .2s;
white-space: nowrap;
}
.site-loc-btn:hover,
.site-loc-btn[aria-expanded="true"] {
color: var(--teal);
border-color: rgba(0,200,255,.3);
}
.site-loc-btn:focus-visible {
outline: 2px solid rgba(0,200,255,.6);
outline-offset: 2px;
}
.site-loc-icon {
font-size: 11px;
color: var(--teal);
flex-shrink: 0;
}
.site-loc-btn .nav-loc-name {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.site-loc-caret {
font-size: 8px;
color: var(--muted);
flex-shrink: 0;
transition: transform .2s;
}
.site-loc-btn[aria-expanded="true"] .site-loc-caret { transform: rotate(180deg); }
.site-loc-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: min(360px, 96vw);
background: rgba(2, 4, 20, 0.98);
border: 1px solid var(--blue-border);
border-top: 2px solid var(--teal);
backdrop-filter: blur(20px) saturate(180%);
z-index: 1100;
box-shadow: 0 10px 40px rgba(0,0,0,.75);
border-radius: 0 0 3px 3px;
overflow: hidden;
}
@media (max-width: 600px) {
.site-loc-panel {
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
width: 100%;
border-radius: 0;
max-height: calc(100dvh - var(--nav-height));
overflow-y: auto;
}
.site-loc-btn .nav-loc-name { max-width: 90px; }
}
@media (max-width: 420px) {
.site-loc-btn .nav-loc-name { display: none; }
}
/* ── Config dropdown (replaces separate loc/dark-sky/accessible buttons) ─── */
.nav-cfg-wrap { position: relative; }
/* Trigger button — mirrors .nav-dark-sky-btn pattern */
.nav-cfg-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .07em;
color: var(--muted);
background: transparent;
border: 1px solid transparent;
padding: 6px 10px;
cursor: pointer;
transition: color .2s, border-color .2s;
white-space: nowrap;
max-width: 240px;
}
.nav-cfg-btn:hover,
.nav-cfg-btn[aria-expanded="true"] {
color: var(--teal);
border-color: rgba(0,200,255,.3);
}
.nav-cfg-btn:focus-visible {
outline: 2px solid rgba(0,200,255,.6);
outline-offset: 2px;
}
.nav-cfg-icon { font-size: 12px; color: var(--teal); flex-shrink: 0; }
.nav-cfg-btn .nav-loc-name {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.nav-cfg-caret {
font-size: 8px;
color: var(--muted);
flex-shrink: 0;
transition: transform .2s;
}
.nav-cfg-btn[aria-expanded="true"] .nav-cfg-caret { transform: rotate(180deg); }
/* Dropdown panel */
.nav-cfg-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: min(360px, 96vw);
background: rgba(2, 4, 20, 0.98);
border: 1px solid var(--blue-border);
border-top: 2px solid var(--teal);
backdrop-filter: blur(20px) saturate(180%);
z-index: 1100;
box-shadow: 0 10px 40px rgba(0,0,0,.75);
border-radius: 0 0 3px 3px;
overflow: hidden;
}
@media (max-width: 600px) {
/* On mobile, anchor the config panel to the viewport, not the button.
position:absolute + left:0 was relative to the container, not the screen,
causing the panel to render past the right viewport edge on narrow phones. */
.nav-cfg-panel {
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
width: 100%;
border-radius: 0;
max-height: calc(100dvh - var(--nav-height));
overflow-y: auto;
}
/* Location search row: let the input shrink so the button stays on-screen */
.toolbox-loc-search-row { flex-wrap: wrap; }
.toolbox-loc-search-row .toolbox-loc-input { flex: 1; min-width: 0; }
/* Coord inputs: allow smaller min-width on narrow viewports */
.toolbox-loc-input--label { min-width: 140px; }
.toolbox-loc-input--short { min-width: 80px; }
/* Loc tab buttons: allow them to shrink text if needed */
.toolbox-loc-tab { font-size: 11px; padding: 6px 8px; letter-spacing: 0.04em; }
}
/* Section layout */
.nav-cfg-section { padding: 14px 16px; }
.nav-cfg-section-hdr {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--teal);
opacity: .75;
margin-bottom: 10px;
}
.nav-cfg-divider {
height: 1px;
background: var(--blue-border);
margin: 0;
}
/* Location display row inside panel */
.nav-cfg-loc-display {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.nav-cfg-loc-display .nav-loc-coords {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
flex: 1;
}
.nav-cfg-loc-edit-btn {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .06em;
color: var(--teal);
background: transparent;
border: 1px solid rgba(0,200,255,.25);
padding: 3px 9px;
cursor: pointer;
flex-shrink: 0;
transition: background .15s, border-color .15s;
}
.nav-cfg-loc-edit-btn:hover { background: rgba(0,200,255,.08); border-color: var(--teal); }
.nav-cfg-loc-edit-btn[aria-expanded="true"] { color: var(--teal); border-color: var(--teal); }
/* Location form — inline inside panel (NOT a floating dropdown) */
.nav-cfg-loc-form {
position: static !important;
width: 100% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
padding: 12px 0 0 !important;
margin-top: 10px;
border-top: 1px solid var(--blue-border) !important;
border-radius: 0 !important;
}
/* Display-mode toggle rows */
.nav-cfg-toggle-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 10px;
font-family: var(--font-mono);
font-size: 12px;
background: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: background .15s, border-color .15s;
text-align: left;
border-radius: 2px;
margin-bottom: 3px;
}
.nav-cfg-toggle-row:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.nav-cfg-toggle-icon { font-size: 13px; flex-shrink: 0; }
.nav-cfg-toggle-label { flex: 1; color: var(--muted); letter-spacing: .05em; }
.nav-cfg-toggle-state {
font-size: 10px;
letter-spacing: .1em;
color: var(--muted);
border: 1px solid rgba(255,255,255,.12);
padding: 1px 6px;
border-radius: 2px;
flex-shrink: 0;
transition: color .2s, border-color .2s, background .2s;
}
/* Dark sky active state */
.dark-sky-mode .nav-cfg-toggle-row.nav-dark-sky-btn .nav-cfg-toggle-state {
color: #ff3300; border-color: rgba(200,40,0,.4); background: rgba(200,40,0,.08);
}
.dark-sky-mode .nav-cfg-toggle-row.nav-dark-sky-btn .nav-cfg-toggle-label { color: #ff3300; }
/* Ray Mode active state */
.ray-mode .nav-cfg-toggle-row.nav-ray-btn .nav-cfg-toggle-state {
color: var(--teal); border-color: rgba(0,200,255,.4); background: rgba(0,200,255,.06);
}
.ray-mode .nav-cfg-toggle-row.nav-ray-btn .nav-cfg-toggle-label { color: var(--teal); }
/* Responsive: hide city name at small sizes */
@media (max-width: 800px) { .nav-cfg-btn .nav-loc-name { max-width: 100px; } }
@media (max-width: 500px) { .nav-cfg-btn .nav-loc-name { display: none; } }
/* ── ISS Master Strip — crew bar (third band) ────────────────────────────── */
.mm-iss-crew-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 16px;
border-top: 1px solid rgba(255,255,255,.05);
background: rgba(0,0,0,.12);
overflow-x: hidden;
}
/* Expedition patch — square, compact */
.mm-iss-crew-bar-patch {
flex-shrink: 0;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
}
.mm-iss-crew-patch-img {
width: 52px;
height: 52px;
object-fit: contain;
display: block;
filter: drop-shadow(0 0 4px rgba(0,200,255,.2));
}
/* Roster row — horizontal, scrollable */
.mm-iss-crew-bar-roster {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
flex: 1;
min-width: 0;
}
/* Override vertical .mm-iss-crew-row to compact horizontal chip inside bar */
.mm-iss-crew-bar .mm-iss-crew-row {
flex-direction: row;
align-items: center;
gap: 7px;
padding: 5px 10px 5px 5px;
border: 1px solid rgba(255,255,255,.05);
background: rgba(255,255,255,.02);
border-radius: 2px;
flex-shrink: 0;
border-bottom: none;
transition: background .15s, border-color .15s;
}
.mm-iss-crew-bar .mm-iss-crew-row:hover {
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.1);
}
.mm-iss-crew-bar .mm-iss-crew-avatar-wrap { flex-shrink: 0; }
.mm-iss-crew-bar .mm-iss-crew-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
}
.mm-iss-crew-bar .mm-iss-crew-avatar--placeholder {
width: 28px;
height: 28px;
font-size: 12px;
}
.mm-iss-crew-bar .mm-iss-crew-info {
min-width: 0;
gap: 2px;
}
.mm-iss-crew-bar .mm-iss-crew-name { font-size: 11px; white-space: nowrap; }
.mm-iss-crew-bar .mm-iss-crew-meta { gap: 4px; flex-wrap: nowrap; }
.mm-iss-crew-bar .mm-iss-crew-role { font-size: 8px; padding: 1px 4px; }
.mm-iss-crew-bar .mm-iss-crew-agency { font-size: 8px; }
/* Meta (spinner + freshness) */
.mm-iss-crew-bar-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
font-size: 9px;
font-family: var(--font-mono);
color: var(--muted);
margin-left: auto;
}
@media (max-width: 600px) {
.mm-iss-crew-bar { gap: 8px; padding: 8px 12px; }
.mm-iss-crew-bar-patch { width: 36px; height: 36px; }
.mm-iss-crew-patch-img { width: 36px; height: 36px; }
.mm-iss-crew-bar-meta { display: none; }
}
/* ── ISS Ham / Radio section ─────────────────────────────────────────────── */
.mm-iss-ham-panel { margin-top: 0; }
.mm-iss-ham-body {
padding: 16px 20px 14px;
}
.mm-iss-ham-loading, .mm-iss-ham-na {
display: block;
padding: 12px 0;
font-family: var(--font-mono);
font-size: 11px;
}
/* Beginner layout: two flex rows */
.mm-iss-ham-bx { display: flex; flex-direction: column; gap: 10px; }
.mm-iss-ham-row {
display: flex;
flex-wrap: wrap;
gap: 6px 24px;
align-items: flex-start;
}
.mm-iss-ham-row--scores { margin-top: 2px; }
.mm-iss-ham-kv {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 160px;
}
.mm-iss-ham-k {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .07em;
color: var(--muted);
text-transform: uppercase;
}
.mm-iss-ham-v {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.mm-iss-ham-freq {
color: var(--teal);
font-size: 14px;
font-weight: 600;
}
/* Doppler */
.mm-iss-ham-doppler { display: flex; align-items: center; gap: 6px; }
.mm-iss-ham-doppler-val { color: var(--teal); font-size: 13px; }
/* Pass time label */
.mm-iss-ham-pass-time {
font-size: 10px;
color: var(--muted);
font-family: var(--font-mono);
}
/* Radio pass score badges */
.mm-ham-score {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
padding: 2px 7px;
border-radius: 3px;
font-weight: 600;
}
.mm-ham-score--ex { background: rgba(0,200,100,.15); color: #3de09c; border: 1px solid rgba(0,200,100,.3); }
.mm-ham-score--good { background: rgba(0,200,255,.12); color: var(--teal); border: 1px solid rgba(0,200,255,.25); }
.mm-ham-score--low { background: rgba(255,180,0,.10); color: #f0c040; border: 1px solid rgba(255,180,0,.2); }
.mm-ham-score--none { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.1); }
/* Expert frequency table */
.mm-iss-ham-expert { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.05); padding-top: 12px; }
.mm-iss-ham-table td, .mm-iss-ham-table th {
font-size: 11px;
padding: 7px 12px;
white-space: nowrap;
}
.mm-iss-ham-table th { font-size: 9px; }
.mm-iss-ham-tr--inactive td { opacity: .45; }
.mm-iss-ham-active { color: #3de09c; }
.mm-iss-ham-inactive { color: var(--muted); }
.mm-iss-ham-meta {
font-size: 9px;
padding: 8px 0 2px;
font-family: var(--font-mono);
}
@media (max-width: 600px) {
.mm-iss-ham-body { padding: 12px 14px; }
.mm-iss-ham-row { gap: 10px 16px; }
.mm-iss-ham-kv { min-width: 130px; }
.mm-iss-ham-v { font-size: 12px; }
.mm-iss-ham-freq { font-size: 13px; }
.mm-iss-ham-table { font-size: 10px; }
.mm-iss-ham-table td, .mm-iss-ham-table th { padding: 6px 8px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Ham Radio via Satellite page (/toolbox/ham/)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Beginner / Expert visibility ─────────────────────────────────────────── */
/* Default: beginner mode. Expert-only content hidden until .ham-expert is set
on by ham.js applyMode(). */
.ham-expert-only { display: none; }
html.ham-expert .ham-expert-only { display: revert; }
html.ham-expert .ham-beginner-only { display: none; }
/* ── Mode toggle buttons ────────────────────────────────────────────────── */
.ham-mode-row {
display: flex;
gap: 6px;
margin-top: 14px;
}
.ham-mode-btn {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .08em;
padding: 5px 14px;
background: transparent;
border: 1px solid rgba(255,255,255,.15);
color: var(--muted);
cursor: pointer;
border-radius: 3px;
transition: border-color .2s, color .2s;
}
.ham-mode-btn:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.ham-mode-btn--active {
color: var(--teal);
border-color: rgba(0,200,255,.4);
background: rgba(0,200,255,.06);
}
/* ── In-page section tabs ───────────────────────────────────────────────── */
.ham-tabs {
display: flex;
gap: 0;
border-top: 1px solid rgba(255,255,255,.07);
background: rgba(0,0,0,.25);
overflow-x: auto;
scrollbar-width: none;
}
.ham-tabs::-webkit-scrollbar { display: none; }
.ham-tab {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .07em;
color: var(--muted);
text-decoration: none;
padding: 10px 18px;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color .2s, border-color .2s;
}
.ham-tab:hover { color: var(--text); }
.ham-tab--active { color: var(--teal); border-bottom-color: var(--teal); }
/* ── Master strip ───────────────────────────────────────────────────────── */
.ham-strip {
display: flex;
align-items: center;
gap: 0;
background: rgba(0,0,0,.22);
border-bottom: 1px solid rgba(255,255,255,.05);
padding: 0 20px;
overflow-x: auto;
scrollbar-width: none;
white-space: nowrap;
}
.ham-strip::-webkit-scrollbar { display: none; }
.ham-strip-item {
display: flex;
flex-direction: column;
padding: 7px 16px 7px 0;
margin-right: 12px;
}
.ham-strip-sep {
width: 1px;
height: 28px;
background: rgba(255,255,255,.08);
margin: 0 12px;
flex-shrink: 0;
align-self: center;
}
.ham-strip-lbl {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .07em;
color: var(--muted);
text-transform: uppercase;
line-height: 1.2;
}
.ham-strip-val {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
line-height: 1.4;
}
.ham-monospace { font-family: var(--font-mono); letter-spacing: .08em; }
/* ── Stats chips row ────────────────────────────────────────────────────── */
.ham-stats-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 14px 20px;
background: rgba(0,0,0,.12);
border-bottom: 1px solid rgba(255,255,255,.05);
}
.ham-stat-chip {
display: flex;
flex-direction: column;
align-items: center;
min-width: 80px;
padding: 8px 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 4px;
cursor: default;
}
.ham-stat-chip--active {
border-color: rgba(0,200,255,.3);
background: rgba(0,200,255,.07);
}
.ham-stat-chip--warn { border-color: rgba(255,180,0,.3); background: rgba(255,180,0,.06); }
.ham-stat-chip--ok { border-color: rgba(0,200,100,.3); background: rgba(0,200,100,.06); }
.ham-stat-val {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.ham-stat-chip--active .ham-stat-val { color: var(--teal); }
.ham-stat-chip--warn .ham-stat-val { color: #f0c040; }
.ham-stat-chip--ok .ham-stat-val { color: #3de09c; }
.ham-stat-lbl {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .06em;
color: var(--muted);
text-transform: uppercase;
text-align: center;
margin-top: 3px;
}
/* ── Section headers ────────────────────────────────────────────────────── */
.ham-section { margin-bottom: 32px; }
.ham-section-hdr {
display: flex;
align-items: baseline;
gap: 10px;
margin: 28px 0 14px;
border-bottom: 1px solid rgba(255,255,255,.06);
padding-bottom: 10px;
}
.ham-section-icon {
font-size: 14px;
color: var(--teal);
flex-shrink: 0;
}
.ham-section-title {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text);
margin: 0;
}
.ham-section-sub {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
letter-spacing: .05em;
}
/* ── Search panel ───────────────────────────────────────────────────────── */
.ham-search-body { padding: 14px 20px 16px; }
.ham-search-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ham-search-input {
flex: 1;
min-width: 200px;
font-family: var(--font-mono);
font-size: 13px;
padding: 9px 14px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.15);
border-radius: 3px;
color: var(--text);
outline: none;
transition: border-color .2s;
}
.ham-search-input:focus { border-color: rgba(0,200,255,.5); }
.ham-search-input::placeholder { color: var(--muted); }
.ham-search-filter {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
cursor: pointer;
white-space: nowrap;
}
.ham-search-filter input[type="checkbox"] { accent-color: var(--teal); }
.ham-search-hint {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
margin-top: 8px;
}
.ham-search-results {
margin-top: 10px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 3px;
overflow: hidden;
}
.ham-search-empty {
padding: 14px 16px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
}
.ham-result-row {
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,.05);
transition: background .15s;
}
.ham-result-row:last-child { border-bottom: none; }
.ham-result-row:hover { background: rgba(255,255,255,.04); }
.ham-result-main {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 3px;
}
.ham-result-name {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.ham-result-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
}
.ham-result-radio {
font-family: var(--font-mono);
font-size: 9px;
padding: 2px 6px;
border-radius: 3px;
font-weight: 600;
text-transform: uppercase;
}
.ham-status--active { background: rgba(0,200,100,.12); color: #3de09c; }
.ham-status--alive { background: rgba(0,200,255,.10); color: var(--teal); }
.ham-status--inactive { background: rgba(255,255,255,.06); color: var(--muted); }
.ham-status--re-entered { background: rgba(255,80,80,.10); color: #f07070; }
.ham-status--future { background: rgba(200,180,100,.10); color: #d4c060; }
.ham-status--unknown { background: rgba(255,255,255,.05); color: var(--muted); }
.ham-result-norad, .ham-result-freqs, .ham-result-callsign {
color: var(--muted);
font-size: 10px;
}
.ham-result-norad { color: var(--teal); }
.ham-result-decayed {
font-size: 9px;
padding: 1px 5px;
background: rgba(255,80,80,.12);
color: #f07070;
border-radius: 2px;
}
.ham-result-stale { color: #f0c040; font-size: 11px; }
.ham-result-alt { color: var(--muted); font-size: 9px; }
.ham-result-profile {
color: var(--teal);
font-size: 10px;
text-decoration: none;
margin-left: auto;
flex-shrink: 0;
}
.ham-result-profile:hover { text-decoration: underline; }
/* ── Placeholder panels ─────────────────────────────────────────────────── */
.ham-placeholder-panel { opacity: .7; }
.ham-placeholder-body {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 20px 22px;
}
.ham-placeholder-icon {
font-size: 28px;
color: var(--muted);
flex-shrink: 0;
margin-top: 2px;
opacity: .4;
}
.ham-placeholder-text {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
line-height: 1.7;
}
.ham-placeholder-mini {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 14px;
padding: 12px 14px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
}
.ham-placeholder-mini-icon { font-size: 16px; opacity: .4; flex-shrink: 0; }
/* ── ISS quick panel ────────────────────────────────────────────────────── */
.ham-iss-callsign {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
margin-bottom: 8px;
padding: 0 20px;
padding-top: 14px;
}
.ham-iss-freq-body { padding: 0 20px 16px; }
.ham-iss-freq-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.ham-iss-freq-table th {
font-size: 9px;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--muted);
padding: 4px 0 6px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.ham-iss-freq-table td { padding: 6px 12px 6px 0; vertical-align: middle; }
.ham-freq-val { font-size: 13px; font-weight: 600; color: var(--teal); }
.ham-freq-mode { font-size: 11px; color: var(--text); }
.ham-freq-call { font-size: 10px; color: var(--muted); }
.ham-iss-aprs-note {
margin-top: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
padding: 10px 14px;
background: rgba(0,200,255,.06);
border: 1px solid rgba(0,200,255,.2);
border-radius: 3px;
}
.ham-iss-link-body {
padding: 14px 20px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ham-iss-link-desc {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
line-height: 1.7;
margin: 0;
}
.ham-iss-link-btn {
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
padding: 9px 18px;
background: rgba(0,200,255,.08);
border: 1px solid rgba(0,200,255,.3);
border-radius: 3px;
color: var(--teal);
text-decoration: none;
align-self: flex-start;
transition: background .2s, border-color .2s;
}
.ham-iss-link-btn:hover { background: rgba(0,200,255,.15); border-color: rgba(0,200,255,.5); }
/* ── Beginner Guide ──────────────────────────────────────────────────────── */
.ham-guide-body { padding: 14px 20px 18px; }
.ham-guide-h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--teal); margin: 14px 0 6px; }
.ham-guide-body p { font-size: 12px; line-height: 1.75; color: var(--muted); margin: 0 0 10px; }
.ham-guide-dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.ham-guide-dl dt { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text); padding-top: 2px; }
.ham-guide-dl dd { font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 1.6; margin: 0; }
.ham-guide-ul { margin: 0 0 10px; padding-left: 18px; }
.ham-guide-ul li { font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 1.7; }
/* ── Data Health ─────────────────────────────────────────────────────────── */
.ham-health-body { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 16px; }
.ham-health-sources { display: flex; flex-direction: column; gap: 8px; }
.ham-health-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 11px;
padding: 8px 12px;
background: rgba(255,255,255,.03);
border-radius: 3px;
}
.ham-health-source { font-weight: 600; color: var(--text); flex-shrink: 0; }
.ham-health-age { color: var(--muted); font-size: 10px; }
.ham-health-counts { color: var(--muted); font-size: 10px; flex: 1; }
.ham-health-badge {
font-size: 9px;
padding: 2px 7px;
border-radius: 3px;
font-weight: 600;
text-transform: uppercase;
flex-shrink: 0;
}
.ham-health-ok { background: rgba(0,200,100,.12); color: #3de09c; }
.ham-health-skip { background: rgba(255,180,0,.10); color: #d4c060; }
.ham-health-err { background: rgba(255,80,80,.12); color: #f07070; }
.ham-health-totals {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 6px;
}
.ham-health-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 10px;
padding: 5px 10px;
background: rgba(255,255,255,.03);
border-radius: 2px;
}
.ham-health-total-row span { color: var(--muted); }
.ham-health-total-row strong { color: var(--text); }
/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.ham-stats-row { padding: 10px 12px; gap: 6px; }
.ham-stat-chip { min-width: 64px; padding: 6px 10px; }
.ham-stat-val { font-size: 16px; }
.ham-stat-lbl { font-size: 8px; }
.ham-tabs { padding: 0 8px; }
.ham-tab { padding: 8px 12px; font-size: 10px; }
.ham-section-hdr { flex-wrap: wrap; }
.ham-search-row { gap: 6px; }
.ham-search-input { font-size: 12px; padding: 8px 12px; }
.ham-iss-freq-table th, .ham-iss-freq-table td { font-size: 10px; }
.ham-placeholder-body { flex-direction: column; gap: 8px; }
}
/* ── Phase 5: Directory tables, filter controls, satellite drawer ─────────── */
/* ── Directory panel header ────────────────────────────────────────────── */
.ham-dir-hdr { flex-wrap: wrap; gap: 8px; }
.ham-dir-tabs { display: flex; gap: 0; }
.ham-dir-tab {
font-family: var(--font-mono);
font-size: 11px;
padding: 6px 14px;
background: transparent;
border: 1px solid rgba(255,255,255,.1);
color: var(--muted);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.ham-dir-tab:first-child { border-radius: 3px 0 0 3px; }
.ham-dir-tab:last-child { border-radius: 0 3px 3px 0; border-left: none; }
.ham-dir-tab--active { background: rgba(0,200,255,.1); color: var(--teal); border-color: rgba(0,200,255,.3); }
.ham-dir-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-left: auto; }
/* ── Filter bar ─────────────────────────────────────────────────────────── */
.ham-filter-bar {
padding: 10px 16px 12px;
background: rgba(0,0,0,.15);
border-bottom: 1px solid rgba(255,255,255,.06);
display: flex;
flex-direction: column;
gap: 8px;
}
.ham-filter-search-row { display: flex; }
.ham-filter-search {
width: 100%;
max-width: 480px;
font-family: var(--font-mono);
font-size: 12px;
padding: 7px 12px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 3px;
color: var(--text);
outline: none;
transition: border-color .2s;
}
.ham-filter-search:focus { border-color: rgba(0,200,255,.45); }
.ham-filter-search::placeholder { color: var(--muted); }
.ham-filter-groups { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.ham-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ham-filter-group-lbl {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
min-width: 44px;
}
.ham-filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }
/* Filter pills */
.ham-fpill {
font-family: var(--font-mono);
font-size: 10px;
padding: 3px 9px;
background: transparent;
border: 1px solid rgba(255,255,255,.1);
border-radius: 3px;
color: var(--muted);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
white-space: nowrap;
}
.ham-fpill:hover { border-color: rgba(0,200,255,.3); color: var(--text); }
.ham-fpill--active {
background: rgba(0,200,255,.1);
border-color: rgba(0,200,255,.4);
color: var(--teal);
}
/* ── Directory table ───────────────────────────────────────────────────── */
.ham-dir-table-wrap { overflow-x: auto; }
.ham-dir-loading {
display: flex;
align-items: center;
gap: 10px;
padding: 24px 20px;
font-family: var(--font-mono);
font-size: 11px;
}
.ham-dir-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
font-family: var(--font-mono);
}
.ham-dir-th {
font-size: 9px;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--muted);
padding: 8px 12px;
text-align: left;
background: rgba(0,0,0,.2);
border-bottom: 1px solid rgba(255,255,255,.07);
white-space: nowrap;
position: sticky;
top: 0;
z-index: 2;
}
.ham-sortable { cursor: pointer; user-select: none; }
.ham-sortable:hover { color: var(--text); }
.ham-sort-asc::after { content: ' ▴'; }
.ham-sort-desc::after { content: ' ▾'; }
.ham-dir-td {
padding: 7px 12px;
border-bottom: 1px solid rgba(255,255,255,.04);
vertical-align: middle;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ham-dir-row {
cursor: pointer;
transition: background .12s;
}
.ham-dir-row:hover { background: rgba(255,255,255,.04); }
.ham-dir-row:last-child .ham-dir-td { border-bottom: none; }
.ham-row-stale { opacity: .75; }
/* Name cell — styled as a button but looks like text */
.ham-dir-name { font-weight: 600; color: var(--text); }
.ham-row-btn {
background: none;
border: none;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
cursor: pointer;
padding: 0;
text-align: left;
}
.ham-row-btn:hover { color: var(--teal); text-decoration: underline; }
/* Frequency cells */
.ham-freq-cell { font-variant-numeric: tabular-nums; }
.ham-freq-exact { color: var(--teal); }
.ham-freq-multi { color: #d4c060; }
.ham-freq-range { color: #d4c060; }
.ham-freq-multi-marker, .ham-freq-range-marker { font-size: 9px; opacity: .6; }
.ham-mode-cell { color: var(--text); }
/* TLE age badges */
.ham-tle-ok { color: #3de09c; }
.ham-tle-stale { color: #f0c040; }
.ham-tle-crit { color: #f07070; font-weight: 600; }
.ham-tle-none { color: var(--muted); font-size: 9px; }
/* Warning icons */
.ham-warn-icons { font-size: 10px; cursor: default; }
.ham-profile-link { color: var(--teal); font-size: 11px; text-decoration: none; }
.ham-profile-link:hover { text-decoration: underline; }
/* Footer */
.ham-dir-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-top: 1px solid rgba(255,255,255,.06);
}
.ham-dir-footer-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.ham-dir-more-btn {
font-family: var(--font-mono);
font-size: 10px;
padding: 4px 12px;
background: rgba(0,200,255,.08);
border: 1px solid rgba(0,200,255,.25);
border-radius: 3px;
color: var(--teal);
cursor: pointer;
transition: background .15s;
}
.ham-dir-more-btn:hover { background: rgba(0,200,255,.16); }
/* ── Satellite detail drawer ────────────────────────────────────────────── */
/* [hidden] beats display:flex in user-agent sheet only when specificity matches;
explicit !important ensures the attribute always wins over our author rule. */
.ham-drawer-overlay[hidden] { display: none !important; }
.ham-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
z-index: 900;
display: flex;
justify-content: flex-end;
}
.ham-drawer {
width: min(560px, 100vw);
height: 100vh;
background: rgba(5,7,20,.97);
border-left: 1px solid rgba(0,200,255,.2);
display: flex;
flex-direction: column;
overflow: hidden;
}
.ham-drawer-hdr {
padding: 16px 20px 12px;
border-bottom: 1px solid rgba(255,255,255,.08);
flex-shrink: 0;
}
.ham-drawer-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.ham-drawer-name {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.ham-drawer-norad { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
.ham-drawer-close {
background: none;
border: none;
color: var(--muted);
font-size: 14px;
cursor: pointer;
padding: 2px 6px;
border-radius: 2px;
transition: color .15s;
flex-shrink: 0;
}
.ham-drawer-close:hover { color: var(--text); }
.ham-drawer-badges {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ham-drawer-chip {
font-family: var(--font-mono);
font-size: 9px;
padding: 2px 7px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 2px;
color: var(--muted);
}
.ham-drawer-body {
flex: 1;
overflow-y: auto;
padding: 0 0 20px;
}
.ham-drawer-loading {
display: flex;
align-items: center;
gap: 10px;
padding: 24px 20px;
font-family: var(--font-mono);
font-size: 11px;
}
.ham-drawer-err { padding: 16px 20px; font-family: var(--font-mono); font-size: 11px; }
/* Drawer sections */
.ham-drawer-section {
padding: 12px 20px;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.ham-drawer-section:last-child { border-bottom: none; }
.ham-drawer-section-hdr {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--teal);
opacity: .8;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.ham-drawer-section-sub { font-size: 10px; opacity: .7; text-transform: none; letter-spacing: 0; }
.ham-drawer-warns { background: rgba(255,180,0,.04); border-color: rgba(255,180,0,.12); }
.ham-drawer-warn-row {
display: flex;
gap: 8px;
font-family: var(--font-mono);
font-size: 10px;
color: #d4a040;
margin-bottom: 4px;
}
.ham-drawer-warn-row:last-child { margin-bottom: 0; }
.ham-drawer-warn-icon { flex-shrink: 0; }
/* kv grid */
.ham-drawer-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.ham-kv-row { display: flex; flex-direction: column; gap: 1px; }
.ham-kv-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ham-kv-value { font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.ham-kv-link { color: var(--teal); font-size: 10px; text-decoration: none; }
.ham-kv-link:hover { text-decoration: underline; }
/* Frequency table in drawer */
.ham-drawer-freq-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 10px; }
.ham-drawer-freq-table th {
font-size: 8px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
padding: 4px 8px 5px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.ham-drawer-freq-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.03); }
.ham-freq-active-row { }
.ham-freq-inactive-row { opacity: .45; }
.ham-freq-norm-active { color: #3de09c; }
.ham-freq-norm-inactive { color: var(--muted); }
.ham-freq-norm-re-entered { color: #f07070; }
.ham-freq-norm-unknown { color: var(--muted); }
/* ── How-to-work chip ────────────────────────────────────────────────── */
.ham-how-to-chip {
margin: 10px 0 0;
padding: 10px 12px 8px;
background: rgba(0,200,255,.04);
border: 1px solid rgba(0,200,255,.12);
border-left: 3px solid var(--teal);
}
.ham-how-to-hdr {
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
color: var(--teal); letter-spacing: .06em; text-transform: uppercase;
margin-bottom: 8px;
}
.ham-how-to-col { margin-bottom: 6px; }
.ham-how-to-label {
font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted); margin-bottom: 3px;
}
.ham-how-to-list {
margin: 0; padding: 0 0 0 14px; list-style: disc;
}
.ham-how-to-list li {
font-size: 11px; color: var(--fg); margin-bottom: 3px; line-height: 1.5;
}
.ham-how-to-set li { color: var(--muted); }
.ham-how-to-notes { margin-top: 6px; }
.ham-how-to-note {
font-size: 10px; color: var(--muted); margin: 0 0 3px; line-height: 1.5; font-style: italic;
}
/* TLE display */
.ham-tle-lines { background: rgba(255,255,255,.03); border-radius: 3px; padding: 8px 10px; }
.ham-tle-line { font-family: var(--font-mono); font-size: 9px; color: var(--text); word-break: break-all; letter-spacing: .02em; line-height: 1.6; }
.ham-tle-meta { font-family: var(--font-mono); font-size: 9px; margin-top: 4px; }
/* Links bar */
.ham-drawer-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ham-drawer-link-btn {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
padding: 7px 14px;
background: rgba(0,200,255,.08);
border: 1px solid rgba(0,200,255,.3);
border-radius: 3px;
color: var(--teal);
text-decoration: none;
transition: background .15s;
}
.ham-drawer-link-btn:hover { background: rgba(0,200,255,.16); }
.ham-drawer-link-btn--secondary {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.12);
color: var(--muted);
}
.ham-drawer-link-btn--secondary:hover { background: rgba(255,255,255,.08); color: var(--text); }
@media (max-width: 600px) {
.ham-drawer { width: 100vw; }
.ham-drawer-kv-grid { grid-template-columns: 1fr; }
.ham-filter-groups { flex-direction: column; }
.ham-filter-group { flex-wrap: wrap; }
.ham-dir-table { font-size: 10px; }
.ham-dir-td, .ham-dir-th { padding: 5px 8px; }
}
/* ── Satellite Profile: Radio / Frequencies card (Phase 6) ──────────────── */
.sp-radio-card {}
.sp-radio-hdr { cursor: pointer; user-select: none; }
.sp-radio-hdr:hover .toolbox-panel-title { color: var(--teal); }
.sp-radio-toggle {
margin-left: auto;
font-size: 13px;
color: var(--muted);
transition: transform .2s;
flex-shrink: 0;
}
.sp-radio-body { padding: 0 0 4px; }
/* SatNOGS header row */
.sp-radio-sn-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px 6px;
border-bottom: 1px solid rgba(255,255,255,.05);
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 11px;
}
.sp-radio-sn-status {
font-size: 10px;
padding: 2px 8px;
border-radius: 3px;
font-weight: 600;
flex-shrink: 0;
}
.sp-radio-alive { background: rgba(0,200,100,.1); color: #3de09c; border: 1px solid rgba(0,200,100,.25); }
.sp-radio-muted { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.1); }
.sp-radio-altnames { color: var(--muted); font-size: 10px; }
.sp-radio-decoder { color: var(--muted); font-size: 10px; }
.sp-radio-link { color: var(--teal); font-size: 10px; text-decoration: none; margin-left: auto; }
.sp-radio-link:hover { text-decoration: underline; }
/* Frequency table */
.sp-radio-table-wrap { overflow-x: auto; }
.sp-radio-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.sp-radio-table th {
font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
color: var(--muted); padding: 6px 12px; text-align: left;
border-bottom: 1px solid rgba(255,255,255,.07);
background: rgba(0,0,0,.12);
}
.sp-radio-table td { padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.sp-radio-freq-inactive { opacity: .45; }
.sp-radio-freq { color: var(--teal); font-weight: 600; }
.sp-radio-mode { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Status labels */
.sp-radio-ns-active { color: #3de09c; font-size: 10px; }
.sp-radio-ns-inactive { color: var(--muted); font-size: 10px; }
.sp-radio-ns-re-entered { color: #f07070; font-size: 10px; }
.sp-radio-ns-failure { color: #f0c040; font-size: 10px; }
.sp-radio-ns-unknown { color: var(--muted); font-size: 10px; }
/* Per-cell Doppler (beginner table column) */
.sp-radio-doppler { font-size: 10px; color: #d4c060; white-space: nowrap; }
/* Doppler summary row */
.sp-radio-doppler-row {
display: flex;
align-items: baseline;
gap: 8px;
padding: 8px 16px 6px;
border-top: 1px solid rgba(255,255,255,.05);
font-family: var(--font-mono);
flex-wrap: wrap;
}
.sp-radio-doppler-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); flex-shrink: 0; }
.sp-radio-doppler-val { font-size: 14px; font-weight: 700; color: #d4c060; }
.sp-radio-doppler-note { font-size: 10px; color: var(--muted); }
/* Warnings */
.sp-radio-warns { padding: 8px 16px 6px; border-top: 1px solid rgba(255,180,0,.1); }
.sp-radio-warn {
display: flex;
gap: 6px;
font-family: var(--font-mono);
font-size: 10px;
color: #d4a040;
margin-bottom: 3px;
}
/* Empty/no-data state */
.sp-radio-nodata {
padding: 12px 16px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
}
/* ── Phase 7: Visible Ham Satellites / Pass Planner ─────────────────────── */
/* ── Controls bar ───────────────────────────────────────────────────────── */
.ham-vis-controls {
padding: 10px 16px 12px;
background: rgba(0,0,0,.15);
border-bottom: 1px solid rgba(255,255,255,.06);
display: flex;
flex-direction: column;
gap: 8px;
}
.ham-vis-ctrl-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ham-vis-ctrl-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .06em;
white-space: nowrap;
}
.ham-vis-select {
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 8px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 3px;
color: var(--text);
cursor: pointer;
}
.ham-vis-pill-row { padding-top: 2px; }
/* ── Best-pass highlight cards ──────────────────────────────────────────── */
.ham-vis-highlights {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.ham-hl-card {
padding: 12px 14px;
background: rgba(0,0,0,.2);
display: flex;
flex-direction: column;
gap: 3px;
transition: background .15s;
}
.ham-hl-card:not(.ham-hl-card--empty):hover { background: rgba(255,255,255,.04); }
.ham-hl-card--empty { opacity: .4; }
.ham-hl-icon { font-size: 14px; color: var(--teal); margin-bottom: 2px; }
.ham-hl-title { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ham-hl-note { font-family: var(--font-mono); font-size: 9px; color: var(--muted); opacity: .7; }
.ham-hl-name { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text); margin-top: 4px; }
.ham-hl-time { font-family: var(--font-mono); font-size: 11px; color: var(--teal); }
.ham-hl-el { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.ham-hl-dl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* Radio score badges (shared by profile + pass table + highlights) */
.ham-ham-score {
display: inline-block;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
padding: 2px 6px;
border-radius: 3px;
margin-top: 4px;
align-self: flex-start;
}
.ham-score--ex { background: rgba(0,200,100,.12); color: #3de09c; border: 1px solid rgba(0,200,100,.25); }
.ham-score--good { background: rgba(0,200,255,.10); color: var(--teal); border: 1px solid rgba(0,200,255,.2); }
.ham-score--fair { background: rgba(255,180,0,.10); color: #f0c040; border: 1px solid rgba(255,180,0,.2); }
.ham-score--low { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.1); }
/* ── Status / progress area ─────────────────────────────────────────────── */
.ham-vis-status {
padding: 10px 16px;
font-family: var(--font-mono);
font-size: 11px;
min-height: 36px;
}
/* ── Pass table ─────────────────────────────────────────────────────────── */
.ham-vis-table-wrap { overflow-x: auto; }
.ham-vis-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.ham-vth {
font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
color: var(--muted); padding: 7px 10px; text-align: left;
background: rgba(0,0,0,.18); border-bottom: 1px solid rgba(255,255,255,.07);
white-space: nowrap;
}
.ham-vtd { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; white-space: nowrap; }
.ham-vis-row { cursor: pointer; transition: background .12s; }
.ham-vis-row:hover { background: rgba(255,255,255,.04); }
.ham-vis-row-stale { opacity: .7; }
.ham-vtd-name { font-weight: 600; color: var(--text); }
.ham-vtd-time { color: var(--teal); font-variant-numeric: tabular-nums; }
.ham-vis-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px; border-top: 1px solid rgba(255,255,255,.06);
}
.ham-vis-footer span { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
@media (max-width: 900px) {
.ham-vis-highlights { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.ham-vis-highlights { grid-template-columns: 1fr 1fr; }
.ham-vis-ctrl-row { gap: 6px; }
.ham-vis-select { font-size: 10px; }
.ham-vtd, .ham-vth { padding: 5px 7px; font-size: 10px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
HAM PHASE 8 — Sky dome, pass timeline, pass detail, Doppler planner
═══════════════════════════════════════════════════════════════════════════ */
/* ── Outer panel layout ──────────────────────────────────────────────────── */
.ham-viz-outer {}
/* Warning block */
.ham-viz-warns {
padding: 10px 16px;
border-bottom: 1px solid rgba(255, 180, 0, .2);
background: rgba(255, 180, 0, .04);
}
.ham-viz-warn-msg {
font-family: var(--font-mono);
font-size: 11px;
color: #f0c040;
}
/* ── Main layout: sky dome left, timeline right ──────────────────────────── */
.ham-viz-main {
display: flex;
gap: 0;
align-items: stretch;
min-height: 200px;
}
/* ── Sky dome column ─────────────────────────────────────────────────────── */
.ham-sky-wrap {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 14px 12px 10px;
border-right: 1px solid rgba(255, 255, 255, .06);
gap: 10px;
}
.ham-sky-canvas {
display: block;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .1);
background: rgba(0, 0, 0, .35);
cursor: crosshair;
width: 200px;
height: 200px;
touch-action: none;
}
@media (min-width: 900px) {
.ham-sky-canvas { width: 260px; height: 260px; }
}
@media (min-width: 1200px) {
.ham-sky-canvas { width: 320px; height: 320px; }
}
/* Sky dome legend */
.ham-sky-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
justify-content: center;
}
.ham-sky-leg-item {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .05em;
}
.ham-sky-swatch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* Sky dome tooltip */
.ham-sky-tip {
position: fixed;
z-index: 9000;
pointer-events: none;
background: rgba(8, 10, 30, .92);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 4px;
padding: 7px 10px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text);
white-space: nowrap;
box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
max-width: 240px;
}
.ham-sky-tip-name {
font-weight: 700;
color: var(--teal);
display: block;
margin-bottom: 3px;
}
.ham-sky-tip-row {
display: flex;
gap: 8px;
color: var(--muted);
font-size: 10px;
}
/* ── Timeline column ─────────────────────────────────────────────────────── */
.ham-timeline-wrap {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
padding: 14px 16px 10px;
gap: 8px;
overflow: hidden;
}
.ham-timeline-hdr {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted);
}
.ham-timeline-canvas {
display: block;
width: 100%;
height: auto;
min-height: 80px;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, .06);
border-radius: 3px;
background: rgba(0, 0, 0, .2);
}
.ham-timeline-hint {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
opacity: .7;
}
/* ── Pass detail panel ───────────────────────────────────────────────────── */
.ham-passdetail {}
.ham-passdetail .toolbox-panel-hdr {
position: relative;
}
.ham-pd-close {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 3px;
color: var(--muted);
font-size: 11px;
padding: 3px 7px;
cursor: pointer;
transition: color .2s, border-color .2s;
line-height: 1;
}
.ham-pd-close:hover {
color: var(--text);
border-color: rgba(255, 255, 255, .3);
}
/* Elevation chart container */
.ham-pd-elev-wrap {
padding: 16px 16px 8px;
height: 220px;
position: relative;
}
.ham-pd-elev-wrap canvas {
max-height: 100%;
}
/* Doppler section */
.ham-pd-dopp-section {
border-top: 1px solid rgba(255, 255, 255, .07);
padding: 14px 16px 16px;
}
.ham-pd-dopp-hdr {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 14px;
margin-bottom: 12px;
}
.ham-pd-dopp-freqs {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1 1 auto;
}
.ham-pd-freq-chip {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 3px;
background: rgba(0, 200, 255, .08);
border: 1px solid rgba(0, 200, 255, .2);
color: var(--teal);
white-space: nowrap;
}
.ham-pd-dopp-btns {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.ham-pd-btn {
font-family: var(--font-mono);
font-size: 11px;
padding: 5px 10px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 3px;
color: var(--muted);
cursor: pointer;
transition: color .2s, border-color .2s, background .2s;
white-space: nowrap;
}
.ham-pd-btn:hover {
color: var(--text);
border-color: rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .08);
}
/* Doppler table */
.ham-pd-dopp-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ham-pd-dopp-table {
min-width: 640px;
}
/* Doppler row colouring */
.ham-dopp-approach {
color: #3de09c;
}
.ham-dopp-recede {
color: #f0c040;
}
/* ── Mobile breakpoints ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
.ham-viz-main {
flex-direction: column;
}
.ham-sky-wrap {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, .06);
padding: 12px 12px 8px;
}
.ham-sky-canvas {
width: 240px;
height: 240px;
}
.ham-timeline-wrap {
padding: 10px 12px 8px;
}
.ham-pd-elev-wrap {
height: 180px;
padding: 10px 12px 6px;
}
.ham-pd-dopp-section {
padding: 10px 12px 12px;
}
.ham-pd-dopp-hdr {
flex-direction: column;
align-items: flex-start;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
NAV REDESIGN — v4.3 overrides
Replaces clip-path card style with clean pill/tab treatment.
Adds tool launcher panel for Tools group.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Subnav wrapper ──────────────────────────────────────────────────────── */
.tnav-wrap {
position: relative;
z-index: 200;
}
/* ── Subnav tab row — override old clip-path treatment ───────────────────── */
.toolbox-subnav {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
padding: 0.75rem 1rem 0;
flex-wrap: wrap;
overflow: visible;
}
.toolbox-subnav-item {
font-family: var(--font-orb);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 4px;
border: 1px solid transparent;
color: var(--muted);
text-decoration: none;
background: transparent;
cursor: pointer;
clip-path: none !important;
transition: color 0.2s, background 0.2s, border-color 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.toolbox-subnav-item:not(.toolbox-subnav-item--soon):hover {
color: var(--text);
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.07);
}
.toolbox-subnav-item--active {
color: var(--teal) !important;
background: rgba(0, 200, 255, 0.07) !important;
border-color: rgba(0, 200, 255, 0.2) !important;
}
.toolbox-subnav-item--soon {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
.toolbox-subnav-caret {
font-size: 10px;
transition: transform 0.2s;
line-height: 1;
}
.toolbox-subnav-group--open .toolbox-subnav-caret { transform: rotate(180deg); }
/* ── Objects sub — keep existing simple list, just refine appearance ──────── */
.toolbox-subnav-sub {
z-index: 1200;
}
/* ── Tool Launcher — Tools group dropdown ────────────────────────────────── */
/* Uses the same opacity/transform animation as .toolbox-subnav-sub.
Do NOT set display:none here — that breaks the transition. */
.tnav-tools-launcher {
min-width: 340px;
max-width: 360px;
padding: 6px 0 10px;
/* Keep it from clipping off the left edge on narrower viewports */
left: auto !important;
right: 0;
transform: translateY(-6px) !important;
}
.toolbox-subnav-group--open .tnav-tools-launcher {
transform: translateY(0) !important;
}
/* Group label */
.tnav-group {
padding: 0;
}
.tnav-group + .tnav-group {
border-top: 1px solid rgba(0, 51, 255, 0.15);
margin-top: 2px;
padding-top: 2px;
}
.tnav-group-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(122, 132, 187, 0.5);
padding: 8px 16px 4px;
}
/* Tool item */
.tnav-tool-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
text-decoration: none;
border-left: 2px solid transparent;
transition: background 0.15s, border-color 0.15s;
position: relative;
}
.tnav-tool-item:hover {
background: rgba(0, 200, 255, 0.05);
border-left-color: rgba(0, 200, 255, 0.3);
}
.tnav-tool-item--active {
background: rgba(0, 200, 255, 0.07) !important;
border-left-color: var(--teal) !important;
}
.tnav-tool-icon {
font-size: 15px;
color: var(--muted);
flex-shrink: 0;
width: 18px;
text-align: center;
transition: color 0.15s;
}
.tnav-tool-item:hover .tnav-tool-icon,
.tnav-tool-item--active .tnav-tool-icon {
color: var(--teal);
}
.tnav-tool-text {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.tnav-tool-title {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--text);
transition: color 0.15s;
}
.tnav-tool-item--active .tnav-tool-title {
color: var(--teal);
}
.tnav-tool-desc {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
opacity: 0.7;
letter-spacing: 0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tnav-tool-badge {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal);
background: rgba(0, 200, 255, 0.1);
border: 1px solid rgba(0, 200, 255, 0.25);
border-radius: 3px;
padding: 2px 5px;
flex-shrink: 0;
}
/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.tnav-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 1.5rem 0;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: rgba(122, 132, 187, 0.5);
}
.tnav-bc-seg {
color: rgba(122, 132, 187, 0.5);
text-decoration: none;
}
.tnav-bc-seg--link:hover {
color: var(--muted);
text-decoration: underline;
}
.tnav-bc-sep {
color: rgba(122, 132, 187, 0.3);
}
.tnav-bc-current {
color: var(--muted);
font-weight: 600;
}
/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.toolbox-subnav {
gap: 2px;
padding: 0.5rem 0.5rem 0;
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.toolbox-subnav-item {
font-size: 10px;
padding: 6px 11px;
white-space: nowrap;
flex-shrink: 0;
}
.tnav-tools-launcher {
min-width: 0;
max-width: 100%;
width: 100%;
}
.tnav-breadcrumb {
padding: 4px 0.75rem 0;
font-size: 9px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
/* ── Ham satellite name-source note (drawer + profile) ──────────────────── */
.ham-drawer-name-note {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
opacity: 0.75;
letter-spacing: 0.06em;
margin-top: 2px;
}
.sp-radio-name-note {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0 8px;
border-bottom: 1px solid rgba(0,51,255,0.12);
margin-bottom: 8px;
flex-wrap: wrap;
}
.sp-radio-name-note-lbl {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
flex-shrink: 0;
}
.sp-radio-name-note-val {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text);
font-weight: 600;
}
.sp-radio-name-note-src {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
opacity: 0.65;
}
/* ── Satellite Profile — dashboard layout (v4.5+) ───────────────────────── */
/* Hidden data containers */
.sp-hidden-data { display: none !important; }
/* Hero RCS + reentry chips */
.sp-hero-rcs-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp-chip-rcs { background: rgba(255,255,255,.07); color: var(--muted); border-color: rgba(255,255,255,.12); }
.sp-chip-reentry { background: rgba(240,180,41,.08); color: #f0b429; border-color: rgba(240,180,41,.2); }
/* Status strip */
.sp-status-strip {
background: rgba(0,0,10,.4);
border-top: 1px solid rgba(0,51,255,.15);
border-bottom: 1px solid rgba(0,51,255,.15);
}
.sp-si-row {
display: flex;
flex-wrap: wrap;
gap: 0;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.sp-si {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 20px;
border-right: 1px solid rgba(0,51,255,.12);
flex: 1 1 160px;
min-width: 0;
transition: background .15s;
}
.sp-si:last-child { border-right: none; }
.sp-si--warn { background: rgba(240,180,41,.04); }
.sp-si-icon { font-size: 16px; color: var(--teal); flex-shrink: 0; margin-top: 1px; }
.sp-si-body { min-width: 0; }
.sp-si-lbl { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 3px; }
.sp-si-val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-si-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); opacity: .7; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Live viz row */
.sp-live-row, .sp-pos-row { margin-bottom: 0; }
/* Both live-row cards: flex columns, match height via grid stretch */
.sp-live-row > .sp-card {
display: flex;
flex-direction: column;
}
/* Live Globe map — fills all space below the card header */
.sp-live-globe-map {
flex: 1;
height: 0;
min-height: 0;
position: relative;
border-radius: 0;
background: rgba(0,0,0,.3);
overflow: hidden;
}
/* Three.js canvas fills the container */
.sp-live-globe-map canvas {
position: absolute;
top: 0; left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
/* Stats bar overlaid at the bottom of the canvas */
.sp-lg-stats {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 6px 14px;
background: rgba(2,4,16,.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-top: 1px solid rgba(0,51,255,.18);
z-index: 2;
}
.sp-lg-stat-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--font-mono); font-size: 10px; }
.sp-lg-stat { color: var(--muted); }
.sp-lg-stat strong { color: var(--text); }
.sp-lg-ts { color: rgba(122,132,187,.5); margin-left: auto; }
/* Live Position body */
.sp-livepos-body { padding: 12px 14px; font-family: var(--font-mono); font-size: 11px; }
.sp-lp-vis { font-size: 12px; font-weight: 600; margin-bottom: 12px; padding: 6px 10px; border-radius: 3px; }
.sp-lp-vis--above { background: rgba(0,200,255,.06); border: 1px solid rgba(0,200,255,.15); }
.sp-lp-vis--below { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); color: var(--muted); }
.sp-lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px 16px; margin-bottom: 10px; }
.sp-lp-item {}
.sp-lp-val { font-size: 14px; font-weight: 600; color: var(--text); }
.sp-lp-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 2px; }
.sp-lp-obs { font-size: 9px; color: rgba(122,132,187,.5); border-top: 1px solid rgba(0,51,255,.1); padding-top: 8px; }
/* Source record collapsible */
.sp-source-wrap { margin-bottom: 1.5rem; }
.sp-source-summary {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
background: rgba(5,5,20,.85);
border: 1px solid rgba(0,51,255,.2);
border-radius: 3px;
cursor: pointer;
list-style: none;
}
.sp-source-summary::-webkit-details-marker { display: none; }
.sp-source-summary::before { content: '▶'; font-size: 10px; transition: transform .2s; }
details[open] .sp-source-summary::before { transform: rotate(90deg); }
.sp-source-badge { font-size: 9px; color: rgba(122,132,187,.6); margin-left: 4px; }
.sp-raw-copy-btn { margin-left: auto; }
.sp-source-wrap .sp-raw-json { border-top: none; border-radius: 0 0 3px 3px; }
/* Responsive */
@media (max-width: 900px) {
.sp-si { flex: 1 1 130px; padding: 10px 14px; }
.sp-si-val { font-size: 12px; }
.sp-live-row > .sp-card { min-height: 400px; }
.sp-live-globe-map { min-height: 0; }
}
@media (max-width: 600px) {
.sp-si-row { gap: 0; padding: 0; }
.sp-si { flex: 1 1 140px; border-right: none; border-bottom: 1px solid rgba(0,51,255,.1); }
.sp-si:last-child { border-bottom: none; }
.sp-lg-stat-row { gap: 4px 10px; font-size: 9px; }
.sp-lp-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Astronauts lookup ───────────────────────────────────────────────────────── */
.at-body { padding-top: 2rem; }
.at-search-panel { padding: 18px 20px 14px; }
.at-search-row { display: flex; gap: 10px; margin-bottom: 14px; }
.at-search-input { flex: 1; }
/* Status filter pills */
.at-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.at-filter-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; padding: 5px 14px; border-radius: 2px;
border: 1px solid rgba(0,51,255,.25); background: transparent;
color: var(--muted); cursor: pointer; transition: all .2s; white-space: nowrap; }
.at-filter-btn:hover { border-color: var(--teal); color: var(--teal); }
.at-filter-btn--active { border-color: var(--teal); color: var(--teal);
background: rgba(0,200,255,.08); }
.at-result-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* Status badges */
.at-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; padding: 2px 8px; border-radius: 2px;
border: 1px solid transparent; display: inline-block; }
.at-status--active { color: var(--teal); border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.07); }
.at-status--training { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.07); }
.at-status--retired { color: var(--muted); border-color: rgba(255,255,255,.15); }
.at-status--occasional{ color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.06); }
.at-status--deceased { color: rgba(255,255,255,.35); border-color: rgba(255,255,255,.1); }
.at-status--lost { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.06); }
.at-status--other { color: var(--muted); }
/* Card grid */
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px; margin-bottom: 24px; }
.at-grid-loading { grid-column: 1/-1; display: flex; align-items: center; gap: 10px;
color: var(--muted); font-family: var(--font-mono); font-size: 12px;
padding: 40px 0; justify-content: center; }
.at-empty { grid-column: 1/-1; text-align: center; padding: 60px 20px;
color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.at-empty-icon { font-size: 28px; color: rgba(0,200,255,.2); margin-bottom: 10px; }
/* Astronaut card */
.at-card { background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.15);
border-radius: 3px; cursor: pointer; transition: background .18s, border-color .18s;
overflow: hidden; display: flex; flex-direction: column; }
.at-card:hover { background: rgba(255,255,255,.045); border-color: rgba(0,200,255,.3); }
.at-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.at-card-photo { width: 100%; aspect-ratio: 1/1; overflow: hidden;
background: rgba(0,51,255,.1); display: flex; align-items: center; justify-content: center; }
.at-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.at-card-initials { font-family: var(--font-orb); font-size: 32px; color: rgba(0,200,255,.4); }
.at-card-body { padding: 12px 12px 10px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.at-card-name { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.at-card-meta { display: flex; flex-wrap: wrap; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.at-card-agency { color: var(--teal); }
.at-card-nat::before { content: '· '; }
.at-card-footer { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.at-card-age { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* Load more */
.at-load-more-wrap { text-align: center; margin-bottom: 2rem; }
.at-load-more-btn { min-width: 160px; }
/* ── Astronaut profile modal ──────────────────────────────────────────────── */
.at-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.7);
z-index: 1099; cursor: pointer;
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.at-modal-backdrop[hidden] { display: none !important; }
body.at-modal-open { overflow: hidden; }
.at-modal { position: fixed; inset: 0; z-index: 1100;
display: flex; align-items: center; justify-content: center;
padding: 20px; pointer-events: none; }
.at-modal[hidden] { display: none !important; }
.at-modal:not([hidden]) { pointer-events: auto; }
.at-modal-body { position: relative; background: #080c1e;
border: 1px solid rgba(0,51,255,.3);
border-radius: 4px;
box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(0,200,255,.06);
width: min(580px, 100%);
max-height: 90vh; overflow-y: auto;
animation: at-modal-in .2s ease; }
@keyframes at-modal-in { from { opacity:0; transform:scale(.97) translateY(8px); } to { opacity:1; transform:none; } }
.at-modal-close { position: sticky; top: 0; float: right; z-index: 5;
background: rgba(8,12,30,.9); border: none;
color: var(--muted); font-size: 18px; padding: 14px 16px;
cursor: pointer; line-height: 1; border-radius: 0 4px 0 0; }
.at-modal-close:hover { color: var(--text); }
.at-modal-loading { display: flex; align-items: center; gap: 10px; padding: 60px 24px;
justify-content: center; color: var(--muted);
font-family: var(--font-mono); font-size: 12px; }
/* Modal inner layout */
.at-modal-inner { padding-bottom: 28px; }
.at-modal-head { display: flex; gap: 20px; padding: 24px 24px 20px; align-items: flex-start; }
.at-modal-photo { width: 110px; height: 110px; border-radius: 3px;
object-fit: cover; object-position: top center;
border: 1px solid rgba(0,51,255,.25); flex-shrink: 0; }
.at-modal-photo--initials { background: rgba(0,51,255,.1); display: flex;
align-items: center; justify-content: center;
font-family: var(--font-orb); font-size: 32px;
color: rgba(0,200,255,.4); }
.at-modal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.at-modal-name { font-family: var(--font-orb); font-size: 20px; font-weight: 700;
color: var(--text); margin: 0 0 4px; line-height: 1.2; }
.at-modal-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.at-dr-badge--live { background: rgba(0,200,255,.1); border: 1px solid rgba(0,200,255,.3);
color: var(--teal); font-family: var(--font-mono); font-size: 10px;
letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px;
border-radius: 2px; }
/* Stat tiles */
.at-modal-stats { display: grid; grid-template-columns: repeat(4,1fr);
border-top: 1px solid rgba(0,51,255,.15);
border-bottom: 1px solid rgba(0,51,255,.15); }
.at-modal-stat { padding: 16px 12px; text-align: center;
border-right: 1px solid rgba(0,51,255,.12); }
.at-modal-stat:last-child { border-right: none; }
.at-modal-stat-val { font-family: var(--font-orb); font-size: 22px; font-weight: 700;
color: var(--text); line-height: 1; margin-bottom: 5px; }
.at-modal-stat-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); }
/* Data rows */
.at-modal-data { padding: 4px 24px 0; }
/* Bio */
.at-modal-bio { padding: 16px 24px; font-size: 13px; line-height: 1.75;
color: var(--muted-light);
border-top: 1px solid rgba(0,51,255,.1); }
/* Links */
.at-modal-links { padding: 14px 24px 0; display: flex; gap: 10px; flex-wrap: wrap; }
/* Responsive */
@media (max-width: 600px) {
.at-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.at-modal { padding: 10px; align-items: flex-end; }
.at-modal-body { width: 100%; max-height: 85vh; border-radius: 4px 4px 0 0; }
.at-modal-head { flex-direction: column; align-items: center; text-align: center; }
.at-modal-chips { justify-content: center; }
.at-modal-stats { grid-template-columns: repeat(2,1fr); }
.at-modal-stat:nth-child(2) { border-right: none; }
.at-modal-stat-val { font-size: 18px; }
}
/* ── Command Center upgrades ──────────────────────────────────────────────────── */
/* Command stats strip in hero */
.at-cmd-stats {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 24px; padding-top: 20px;
border-top: 1px solid rgba(0,51,255,.2);
}
.at-cmd-stat {
display: flex; flex-direction: column; align-items: center; gap: 3px;
flex: 1; min-width: 90px; max-width: 140px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(0,51,255,.15);
border-radius: 3px; padding: 12px 10px;
}
.at-cmd-stat--live { border-color: rgba(0,200,255,.25); background: rgba(0,200,255,.04); }
.at-cmd-stat--skel { min-height: 64px; animation: at-skel-pulse 1.4s ease-in-out infinite; }
@keyframes at-skel-pulse { 0%,100%{opacity:.3} 50%{opacity:.07} }
.at-cmd-icon { font-size: 14px; color: rgba(0,200,255,.4); margin-bottom: 2px; }
.at-cmd-val { font-family: var(--font-orb); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.at-cmd-val--sm { font-size: 12px; font-family: var(--font-mono); text-align: center; line-height: 1.4; }
.at-cmd-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.at-cmd-stat--live .at-cmd-val { color: var(--teal); }
.at-cmd-stat--live .at-cmd-icon { color: var(--teal); }
/* Section headings */
.at-section { margin-bottom: 40px; }
.at-section-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
padding-bottom: 10px; border-bottom: 1px solid rgba(0,51,255,.15); }
.at-section-icon { font-size: 14px; color: rgba(0,200,255,.5); }
.at-section-title { font-family: var(--font-orb); font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.at-section-live { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: var(--teal);
background: rgba(0,200,255,.08); border: 1px solid rgba(0,200,255,.25);
padding: 2px 7px; border-radius: 2px; animation: at-live-blink 2s ease-in-out infinite; }
@keyframes at-live-blink { 0%,100%{opacity:1} 50%{opacity:.55} }
.at-section-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: auto; }
.at-result-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-left: auto; }
/* Enhanced card grid */
.at-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* Skeleton card */
.at-card--skel {
min-height: 260px; pointer-events: none; border-color: rgba(0,51,255,.08);
background: linear-gradient(135deg, rgba(255,255,255,.02) 0%, rgba(0,51,255,.04) 100%);
animation: at-skel-pulse 1.4s ease-in-out infinite;
}
/* Live / in-space card */
.at-card-photo-wrap { position: relative; }
.at-card-live-ring {
position: absolute; inset: -3px;
border-radius: 0;
border: 2px solid rgba(0,200,255,.6);
animation: at-glow-pulse 2s ease-in-out infinite;
pointer-events: none; z-index: 1;
}
@keyframes at-glow-pulse {
0%,100% { box-shadow: 0 0 6px rgba(0,200,255,.3); border-color: rgba(0,200,255,.5); }
50% { box-shadow: 0 0 18px rgba(0,200,255,.55); border-color: rgba(0,200,255,.9); }
}
.at-card-live-dot {
position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
text-transform: uppercase; color: var(--teal);
background: rgba(8,12,30,.85); padding: 2px 6px; white-space: nowrap;
border: 1px solid rgba(0,200,255,.3); border-radius: 2px; z-index: 2;
}
.at-card--live { border-color: rgba(0,200,255,.25); }
.at-card--live:hover { border-color: rgba(0,200,255,.5); }
.at-card--selected { border-color: var(--teal) !important; box-shadow: 0 0 0 2px rgba(0,200,255,.2); }
/* Card mini stats */
.at-card-stats {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
margin-top: 6px; padding-top: 8px;
border-top: 1px solid rgba(0,51,255,.12);
}
.at-card-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.at-card-sval { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--text); line-height: 1; }
.at-card-skey { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* Filter bar */
.at-filter-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-top: 10px; }
.at-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.at-filter-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.at-filter-group--right { margin-left: auto; }
.at-filter-group--sort { gap: 8px; }
.at-toggle-btn { background: rgba(0,200,255,.04); }
.at-toggle-btn.at-filter-btn--active { background: rgba(0,200,255,.1); }
.at-sort-select {
font-family: var(--font-mono); font-size: 11px;
background: rgba(255,255,255,.04); border: 1px solid rgba(0,51,255,.25);
color: var(--muted); padding: 5px 10px; border-radius: 2px; cursor: pointer;
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 8px center;
padding-right: 26px;
}
.at-sort-select:focus { outline: 1px solid rgba(0,200,255,.4); }
/* ── Currently In Space Board ────────────────────────────────────────────── */
.at-inspace-loading { color: var(--muted); font-family: var(--font-mono); font-size: 12px;
display: flex; align-items: center; gap: 10px; padding: 30px 0; }
.at-inspace-board { display: flex; flex-direction: column; gap: 24px; }
.at-is-station { background: rgba(255,255,255,.02); border: 1px solid rgba(0,51,255,.15);
border-radius: 4px; padding: 16px 20px 20px; }
.at-is-station--iss { border-color: rgba(0,200,255,.2); background: rgba(0,200,255,.02); }
.at-is-stn-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.at-is-stn-live { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
letter-spacing: .1em; color: var(--teal); animation: at-live-blink 2s infinite; }
.at-is-stn-name { font-family: var(--font-orb); font-size: 15px; font-weight: 700; color: var(--text); }
.at-is-stn-count{ font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-left: auto; }
.at-is-vessels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.at-is-vessel { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
padding: 3px 10px; border-radius: 2px; border: 1px solid; }
.at-is-vessel--crew { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.06); }
.at-is-vessel--cargo { color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.05); }
.at-is-crew-strip { display: flex; flex-wrap: wrap; gap: 14px; }
.at-is-crew { display: flex; flex-direction: column; align-items: center; gap: 5px;
width: 80px; cursor: pointer; transition: opacity .18s; }
.at-is-crew:hover { opacity: .8; }
.at-is-crew:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
.at-is-photo { position: relative; width: 62px; height: 62px; }
.at-is-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: top center;
border-radius: 50%; display: block; }
.at-is-initials { width: 62px; height: 62px; border-radius: 50%;
background: rgba(0,51,255,.1); display: flex; align-items: center;
justify-content: center; font-family: var(--font-orb); font-size: 18px;
color: rgba(0,200,255,.4); }
.at-is-ring { position: absolute; inset: -3px; border-radius: 50%;
border: 2px solid var(--agency-color, rgba(0,200,255,.5));
animation: at-glow-pulse 2s ease-in-out infinite; }
.at-is-name { font-family: var(--font-mono); font-size: 9px; text-align: center;
color: var(--text); line-height: 1.3; word-break: break-word; }
.at-is-agency { font-family: var(--font-mono); font-size: 9px; text-align: center; font-weight: 700; }
.at-is-tis { font-family: var(--font-mono); font-size: 8.5px; color: var(--muted);
text-align: center; }
/* ── Hall of Records ─────────────────────────────────────────────────────── */
.at-records-loading { color: var(--muted); font-family: var(--font-mono); font-size: 12px;
display: flex; align-items: center; gap: 10px; padding: 30px 0; }
.at-records-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.at-rec-card {
background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.15);
border-radius: 4px; overflow: hidden;
border-top: 2px solid var(--rec-color, rgba(0,200,255,.4));
transition: background .2s, border-color .2s;
}
.at-rec-card:hover { background: rgba(255,255,255,.04); }
.at-rec-award { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px;
border-bottom: 1px solid rgba(0,51,255,.12); }
.at-rec-icon { font-size: 22px; color: var(--rec-color, var(--teal)); flex-shrink: 0; }
.at-rec-title { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--text); }
.at-rec-desc { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 1px; }
.at-rec-winner { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
cursor: pointer; transition: background .15s; }
.at-rec-winner:hover { background: rgba(255,255,255,.025); }
.at-rec-photo { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.at-rec-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
border-radius: 50%; display: block; }
.at-rec-initials { width: 56px; height: 56px; border-radius: 50%;
background: rgba(0,51,255,.1); display: flex; align-items: center;
justify-content: center; font-family: var(--font-orb); font-size: 18px; color: rgba(0,200,255,.4); }
.at-rec-gold-ring { position: absolute; inset: -3px; border-radius: 50%;
border: 2px solid var(--rec-color, rgba(0,200,255,.5)); }
.at-rec-name { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--text); }
.at-rec-agency { font-family: var(--font-mono); font-size: 10px; font-weight: 700; margin-top: 2px; }
.at-rec-stat { font-family: var(--font-orb); font-size: 16px; font-weight: 700; margin-top: 4px; }
.at-rec-runners { border-top: 1px solid rgba(0,51,255,.1); padding: 6px 0 4px; }
.at-rec-runner { display: flex; align-items: center; gap: 10px; padding: 6px 16px;
cursor: pointer; transition: background .15s; }
.at-rec-runner:hover { background: rgba(255,255,255,.02); }
.at-rec-runner-rank { font-family: var(--font-orb); font-size: 13px; font-weight: 700;
color: var(--muted); min-width: 18px; }
.at-rec-runner-name { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light); flex: 1; }
.at-rec-runner-val { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: right; }
/* ── Astronaut Profile Panel ─────────────────────────────────────────────── */
/* Modal overlay */
.at-modal-overlay {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(0, 0, 8, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
padding: 48px 16px 32px;
animation: at-modal-in .2s ease;
}
.at-modal-overlay[hidden] { display: none !important; }
@keyframes at-modal-in { from { opacity: 0; } to { opacity: 1; } }
/* Modal box */
.at-modal-box {
width: 100%;
max-width: 900px;
animation: at-modal-slide .22s ease;
}
@keyframes at-modal-slide { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Body scroll lock when modal is open */
body.at-modal-open { overflow: hidden; }
.at-prof-loading { display: flex; align-items: center; gap: 10px; padding: 60px 0;
color: var(--muted); font-family: var(--font-mono); font-size: 12px; justify-content: center; }
.at-profile {
background: rgba(6,10,28,.94);
border: 1px solid rgba(0,51,255,.2);
border-radius: 4px; overflow: hidden;
}
/* Close button — fixed at top-right of modal */
.at-prof-close {
position: sticky;
top: -48px;
float: right;
margin-left: auto;
background: rgba(5, 5, 20, 0.95);
border: 1px solid rgba(0, 200, 255, .25);
color: var(--muted);
font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
padding: 9px 18px;
cursor: pointer;
transition: color .2s, background .2s, border-color .2s;
border-radius: 0 4px 0 4px;
z-index: 10;
}
.at-prof-close:hover { color: var(--teal); background: rgba(0,200,255,.07); border-color: var(--teal); }
/* Status strip */
.at-prof-strip {
display: flex; flex-wrap: wrap; gap: 0;
border-bottom: 1px solid rgba(0,51,255,.15);
background: rgba(0,0,20,.3);
}
.at-prof-strip-item {
display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
border-right: 1px solid rgba(0,51,255,.1);
min-width: 80px;
}
.at-prof-strip-item:last-child { border-right: none; }
.at-prof-strip-key { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); }
.at-prof-strip-val { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; }
/* Main dossier layout */
.at-prof-main {
display: grid; grid-template-columns: 200px 1fr; gap: 28px;
padding: 24px 24px 20px;
}
.at-prof-photo-wrap {
position: relative; flex-shrink: 0;
}
.at-prof-photo-img {
width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center;
border-radius: 3px; display: block;
border: 1px solid rgba(0,51,255,.2);
box-shadow: 0 0 0 3px rgba(var(--agency-color, 0,200,255), .15);
}
.at-prof-photo-placeholder {
width: 100%; aspect-ratio: 3/4; background: rgba(0,51,255,.1); border-radius: 3px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-orb); font-size: 48px; color: rgba(0,200,255,.3);
}
.at-prof-live-badge {
position: absolute; bottom: 8px; left: 8px;
font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
color: var(--teal); background: rgba(8,12,30,.9); border: 1px solid rgba(0,200,255,.35);
padding: 3px 8px; border-radius: 2px; animation: at-live-blink 2s infinite;
}
.at-prof-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.at-prof-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.at-prof-inspace-chip {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
color: var(--teal); border: 1px solid rgba(0,200,255,.3); background: rgba(0,200,255,.07);
padding: 2px 8px; border-radius: 2px; animation: at-live-blink 2s infinite;
}
.at-prof-type-chip {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted); border: 1px solid rgba(255,255,255,.12); padding: 2px 8px; border-radius: 2px;
}
.at-prof-name { font-family: var(--font-orb); font-size: 28px; font-weight: 700; color: var(--text);
line-height: 1.1; margin: 0; }
.at-prof-sub { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
/* Time-in-space bar */
.at-prof-tis { }
.at-prof-tis-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.at-prof-tis-label { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--text); }
.at-prof-tis-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.at-prof-tis-bar-wrap { height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.at-prof-tis-bar { height: 100%; border-radius: 2px; transition: width .5s ease; }
/* Career timeline */
.at-prof-timeline { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.at-prof-tl-item { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; }
.at-prof-tl-item--live .at-prof-tl-date { animation: at-live-blink 2s infinite; }
.at-prof-tl-icon { font-size: 13px; color: var(--muted); flex-shrink: 0; width: 18px; text-align: center; }
.at-prof-tl-label { color: var(--muted); min-width: 140px; }
.at-prof-tl-date { color: var(--text); }
/* Bio */
.at-prof-bio {
font-size: 13px; line-height: 1.75; color: rgba(255,255,255,.6);
padding: 12px 0; border-top: 1px solid rgba(0,51,255,.1);
display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
/* Links */
.at-prof-links { display: flex; flex-wrap: wrap; gap: 8px; }
.at-prof-link { font-family: var(--font-mono); font-size: 11px; color: var(--teal);
border: 1px solid rgba(0,200,255,.25); padding: 4px 12px; border-radius: 2px;
text-decoration: none; transition: background .18s; }
.at-prof-link:hover { background: rgba(0,200,255,.08); }
/* Connected records placeholders */
.at-prof-connected { padding: 16px 24px 20px; border-top: 1px solid rgba(0,51,255,.15); }
.at-prof-conn-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.at-prof-conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.at-prof-conn-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
border-radius: 3px; border: 1px solid rgba(0,51,255,.12);
background: rgba(255,255,255,.015); }
.at-prof-conn-card--soon { border-style: dashed; opacity: .65; }
.at-prof-conn-icon { font-size: 16px; color: rgba(0,200,255,.3); }
.at-prof-conn-label { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light); }
.at-prof-conn-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* ── Astronaut flight manifest ───────────────────────────────────────────── */
.at-prof-manifest { margin-bottom: 12px; }
.at-prof-manifest-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 0 0 8px; border-bottom: 1px solid rgba(0,51,255,.2); margin-bottom: 8px;
}
.at-prof-manifest-title {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: var(--teal); opacity: .8;
}
.at-prof-manifest-count {
font-family: var(--font-mono); font-size: 10px; color: var(--muted); opacity: .6;
}
.at-prof-manifest-list {
display: flex; flex-direction: column; gap: 2px;
max-height: 320px; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--blue-border) transparent;
}
.at-prof-mf-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px;
background: rgba(255,255,255,.02);
border-left: 2px solid transparent;
transition: background .15s, border-color .15s;
}
.at-prof-mf-row:hover { background: rgba(0,51,255,.08); border-left-color: var(--teal); }
.at-mf-num {
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
opacity: .4; flex-shrink: 0; width: 18px; text-align: right;
}
.at-mf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.at-mf-name {
font-family: var(--font-mono); font-size: 11px; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.at-mf-meta { font-size: 10px; color: var(--muted); opacity: .6; }
.at-mf-status {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
padding: 2px 6px; border: 1px solid; flex-shrink: 0;
}
.at-mf-status--ok { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); }
.at-mf-status--fail { color: #ef4444; border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); }
.at-mf-status--tbd { color: var(--muted); border-color: rgba(255,255,255,.1); }
/* ── Space Race Era Heroes ───────────────────────────────────────────────── */
.at-era-loading { color: var(--muted); font-family: var(--font-mono); font-size: 12px;
display: flex; align-items: center; gap: 10px; padding: 30px 0; }
.at-era-wrap { display: flex; flex-direction: column; gap: 28px; }
.at-era-group {
background: rgba(255,255,255,.02);
border: 1px solid rgba(0,51,255,.15);
border-left: 3px solid var(--era-color, rgba(0,200,255,.5));
border-radius: 0 4px 4px 0;
padding: 18px 20px 22px;
}
.at-era-group-hdr {
display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.at-era-group-icon { font-size: 18px; color: var(--era-color); flex-shrink: 0; }
.at-era-group-name { font-family: var(--font-orb); font-size: 16px; font-weight: 700; }
.at-era-group-years { font-family: var(--font-mono); font-size: 10px; color: var(--muted);
letter-spacing: .06em; margin-top: 2px; }
.at-era-group-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted);
margin-left: auto; background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1); padding: 2px 8px; border-radius: 2px; }
.at-era-group-desc { font-family: var(--font-mono); font-size: 11px; color: var(--muted);
margin: 0 0 16px; line-height: 1.5; }
/* Scrollable crew strip */
.at-era-crew-strip {
display: flex; gap: 12px;
overflow-x: auto; padding-bottom: 6px;
scrollbar-width: thin; scrollbar-color: rgba(0,200,255,.2) transparent;
}
.at-era-crew-strip::-webkit-scrollbar { height: 4px; }
.at-era-crew-strip::-webkit-scrollbar-track { background: transparent; }
.at-era-crew-strip::-webkit-scrollbar-thumb { background: rgba(0,200,255,.2); border-radius: 2px; }
/* Individual era astronaut card */
.at-era-card {
display: flex; flex-direction: column; align-items: center; gap: 5px;
flex-shrink: 0; width: 78px; cursor: pointer;
padding: 8px 6px 10px; border-radius: 3px;
border: 1px solid transparent;
transition: background .18s, border-color .18s;
}
.at-era-card:hover { background: rgba(255,255,255,.04); border-color: var(--era-color); }
.at-era-card:focus-visible { outline: 2px solid var(--era-color); outline-offset: 2px; }
.at-era-card--deceased { opacity: .65; }
.at-era-card--deceased:hover{ opacity: .85; }
.at-era-photo {
width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
border: 2px solid var(--era-color, rgba(0,200,255,.4));
background: rgba(0,51,255,.1);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.at-era-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.at-era-initials { font-family: var(--font-orb); font-size: 18px; color: rgba(0,200,255,.4); }
.at-era-name { font-family: var(--font-mono); font-size: 9px; color: var(--text);
text-align: center; line-height: 1.3; word-break: break-word; }
.at-era-tis { font-family: var(--font-mono); font-size: 8.5px; color: var(--muted); text-align: center; }
.at-era-ff { font-family: var(--font-mono); font-size: 8px; color: var(--muted); text-align: center; }
.at-era-deceased { font-size: 10px; color: rgba(255,255,255,.25); }
/* New record card variant (no runners) */
.at-rec-card--single .at-rec-winner { border-bottom: none; }
/* ── Command Center mobile ───────────────────────────────────────────────── */
@media (max-width: 900px) {
.at-prof-main { grid-template-columns: 140px 1fr; gap: 18px; }
.at-prof-name { font-size: 22px; }
.at-records-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.at-cmd-stats { gap: 6px; }
.at-cmd-stat { min-width: 70px; padding: 8px 6px; }
.at-cmd-val { font-size: 18px; }
.at-filter-bar { flex-direction: column; align-items: flex-start; }
.at-filter-group--right { margin-left: 0; }
.at-prof-main { grid-template-columns: 1fr; }
.at-prof-photo-wrap { max-width: 180px; margin: 0 auto; }
.at-prof-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.at-prof-strip-item { border-right: 1px solid rgba(0,51,255,.1); }
.at-is-crew { width: 68px; }
.at-is-photo { width: 52px; height: 52px; }
.at-is-initials { width: 52px; height: 52px; font-size: 15px; }
.at-era-card { width: 66px; }
.at-era-photo { width: 50px; height: 50px; }
}
/* ── Astronaut Command Center — Phase 1–10 additions ─────────────────────────── */
/* Phase 1 — Quality badges */
.at-qa-dot { position: absolute; top: 6px; right: 6px; font-size: 10px; color: var(--muted); cursor: help; }
.at-qa-dot.qa-miss { color: #f87171; }
.at-qa-dot.qa-warn { color: #fbbf24; }
.at-qa-dot.qa-info { color: #60a5fa; }
.at-qa-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
padding: 2px 7px; border-radius: 2px; border: 1px solid; display: inline-block; margin-bottom: 2px; }
.at-qa-badge.qa-miss { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.05); }
.at-qa-badge.qa-warn { color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.04); }
.at-qa-badge.qa-info { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.04); }
.at-prof-quality { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
/* Phase 2 — Archetype badges */
.at-arch-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
padding: 2px 7px; border-radius: 2px; border: 1px solid rgba(255,255,255,.15);
color: var(--muted); display: inline-block; }
.at-arch-badge--lg { font-size: 10px; padding: 3px 9px; }
.arch-live { color: var(--teal); border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.08); animation: at-live-blink 2s infinite; }
.arch-never { color: #6b7280; border-color: rgba(107,114,128,.3); }
.arch-first { color: #fb923c; border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.05); }
.arch-eva { color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.04); }
.arch-shuttle { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.06); }
.arch-record { color: #f59e0b; border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.05); }
.arch-private { color: #c084fc; border-color: rgba(192,132,252,.3); background: rgba(192,132,252,.05); }
.at-prof-archs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
/* Phase 3 — Dossier card enhancements */
.at-dossier-card { position: relative; border-top: 2px solid var(--agency-color, rgba(0,200,255,.3)); }
.at-card-agency-corner {
position: absolute; top: 6px; left: 6px; z-index: 2;
font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em;
background: rgba(8,12,30,.8); padding: 2px 6px; border-radius: 2px;
border: 1px solid currentColor; opacity: .85;
}
.at-card-archs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.at-card-hover-overlay {
position: absolute; inset: 0; background: rgba(8,12,30,.92);
display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
padding: 12px 12px 10px; opacity: 0; transition: opacity .2s;
pointer-events: none;
}
.at-card:hover .at-card-hover-overlay,
.at-card:focus-within .at-card-hover-overlay { opacity: 1; pointer-events: auto; }
.at-card-hover-bio { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.65); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.at-card-hover-flights { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }
.at-card-hover-actions { display: flex; gap: 6px; }
.at-card-open-btn, .at-card-compare-btn {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
padding: 5px 10px; border-radius: 2px; cursor: pointer; border: 1px solid;
background: transparent; transition: background .15s;
}
.at-card-open-btn { color: var(--teal); border-color: rgba(0,200,255,.35); flex: 1; }
.at-card-open-btn:hover { background: rgba(0,200,255,.12); }
.at-card-compare-btn { color: var(--muted); border-color: rgba(255,255,255,.15); }
.at-card-compare-btn:hover { color: #fbbf24; border-color: rgba(251,191,36,.3); }
.at-card-compare-btn--active { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.06); }
.at-card--in-compare { border-color: #fbbf24 !important; box-shadow: 0 0 0 2px rgba(251,191,36,.2); }
/* Phase 4 — Archetype chip filters */
.at-archetype-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; border-top: 1px solid rgba(0,51,255,.12); margin-bottom: 4px; }
.at-arch-chip {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
padding: 4px 12px; border-radius: 12px; border: 1px solid rgba(0,51,255,.25);
background: transparent; color: var(--muted); cursor: pointer; transition: all .18s;
}
.at-arch-chip:hover { border-color: var(--teal); color: var(--teal); }
.at-arch-chip--active { border-color: var(--teal); color: var(--teal); background: rgba(0,200,255,.08); }
/* Phase 5 — Era timeline presets */
/* Roster collapse toggle */
.at-roster-toggle-btn {
margin-left: auto; font-family: var(--font-mono); font-size: 10px;
letter-spacing: .06em; color: var(--muted); background: transparent;
border: 1px solid rgba(0,200,255,.18); border-radius: 2px;
padding: 4px 12px; cursor: pointer; transition: color .15s, border-color .15s;
flex-shrink: 0;
}
.at-roster-toggle-btn:hover { color: var(--teal); border-color: var(--teal); }
/* Agency filter row */
.at-filter-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 8px 0 4px;
border-top: 1px solid rgba(0,200,255,.07);
}
.at-agency-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
padding: 5px 12px; border-radius: 2px; border: 1px solid rgba(0,51,255,.2);
background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; transition: all .18s;
}
.at-agency-btn:hover { border-color: var(--teal); color: var(--teal); }
.at-agency-btn--active { border-color: var(--teal) !important; color: var(--teal) !important; background: rgba(0,200,255,.07) !important; }
/* Era explorer placeholder */
.at-era-placeholder {
padding: 32px 20px; text-align: center;
font-family: var(--font-mono); font-size: 12px; color: var(--muted);
letter-spacing: .05em;
}
.at-era-timeline {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 10px 0 4px;
border-top: 1px solid rgba(0,200,255,.07);
margin-bottom: 0;
}
.at-era-sep { color: rgba(0,200,255,.3); font-size: 12px; }
.at-era-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
padding: 6px 14px; border-radius: 2px; border: 1px solid rgba(0,51,255,.2);
background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; transition: all .18s;
display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.at-era-btn span { font-size: 8.5px; color: rgba(255,255,255,.25); letter-spacing: .04em; }
.at-era-btn:hover { border-color: var(--teal); color: var(--teal); }
.at-era-btn.at-era-btn--active { border-color: var(--teal); color: var(--teal); background: rgba(0,200,255,.07); }
.at-era-btn.at-era-btn--active span { color: rgba(0,200,255,.5); }
.at-era-reset-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: #f87171;
background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.3); padding: 4px 10px;
border-radius: 2px; cursor: pointer; transition: background .15s;
}
.at-era-reset-btn:hover { background: rgba(248,113,113,.12); }
/* Phase 6 — Records Museum additions */
.at-rec-card--live .at-rec-award { animation: at-live-blink 2s infinite; }
.at-rec-live-dot { position: absolute; top: -2px; right: -2px; font-size: 10px; color: var(--teal); animation: at-live-blink 2s infinite; }
/* Phase 7 — Orbit Crew Board */
.at-ocb-station { background: rgba(255,255,255,.02); border: 1px solid rgba(0,51,255,.15);
border-radius: 4px; padding: 16px 20px 20px; margin-bottom: 20px; }
.at-ocb-station--iss { border-color: rgba(0,200,255,.2); background: rgba(0,200,255,.02); }
.at-ocb-stn-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.at-ocb-live { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
color: var(--teal); animation: at-live-blink 2s infinite; }
.at-ocb-stn-name { font-family: var(--font-orb); font-size: 15px; font-weight: 700; color: var(--text); }
.at-ocb-crew-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-left: auto; }
.at-ocb-vessels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.at-ocb-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.at-ocb-crew { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 80px; cursor: pointer; transition: opacity .18s; }
.at-ocb-crew:hover { opacity: .8; }
.at-ocb-crew:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.at-ocb-photo { position: relative; width: 64px; height: 64px; }
.at-ocb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 50%; display: block; }
.at-ocb-initials { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,51,255,.1); display: flex;
align-items: center; justify-content: center; font-family: var(--font-orb); font-size: 18px; color: rgba(0,200,255,.4); }
.at-ocb-ring { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--agency-color, rgba(0,200,255,.5)); animation: at-glow-pulse 2s ease-in-out infinite; }
.at-ocb-cmd-star { position: absolute; top: -4px; right: -4px; font-size: 12px; color: #f59e0b; }
.at-ocb-name { font-family: var(--font-mono); font-size: 9px; text-align: center; color: var(--text); line-height: 1.3; word-break: break-word; }
.at-ocb-agency { font-family: var(--font-mono); font-size: 9px; text-align: center; font-weight: 700; }
.at-ocb-role { font-family: var(--font-mono); font-size: 8.5px; color: var(--muted); text-align: center; }
.at-ocb-tis { font-family: var(--font-mono); font-size: 8.5px; color: var(--muted); text-align: center; }
/* Phase 8 — On This Day */
.at-otd-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.at-otd-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 3px;
border: 1px solid rgba(0,51,255,.15); background: rgba(255,255,255,.025); cursor: pointer;
transition: background .15s; min-width: 200px; }
.at-otd-card:hover { background: rgba(255,255,255,.04); }
.at-otd-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.at-otd-card--born { border-left: 3px solid #34d399; }
.at-otd-card--flight { border-left: 3px solid #60a5fa; }
.at-otd-card--died { border-left: 3px solid rgba(255,255,255,.2); opacity: .8; }
.at-otd-photo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
background: rgba(0,51,255,.1); display: flex; align-items: center; justify-content: center; }
.at-otd-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.at-otd-initials { font-family: var(--font-orb); font-size: 14px; color: rgba(0,200,255,.4); }
.at-otd-name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); }
.at-otd-agency { font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.at-otd-note { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
/* Phase 9 — Astronaut of the Night */
.at-aotn-card {
display: grid; grid-template-columns: 100px 1fr 160px; gap: 20px;
background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.2);
border-left: 3px solid rgba(245,158,11,.5); border-radius: 4px; padding: 18px 20px; align-items: center;
}
.at-aotn-photo-wrap { position: relative; width: 100px; height: 100px; }
.at-aotn-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid var(--agency-color,rgba(0,200,255,.4)); }
.at-aotn-initials { width: 100%; height: 100%; border-radius: 50%; background: rgba(0,51,255,.1); display: flex; align-items: center; justify-content: center; font-family: var(--font-orb); font-size: 28px; color: rgba(0,200,255,.4); }
.at-aotn-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--agency-color,rgba(245,158,11,.4)); animation: at-glow-pulse 2.5s ease-in-out infinite; }
.at-aotn-live { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; color: var(--teal); white-space: nowrap; animation: at-live-blink 2s infinite; }
.at-aotn-reason { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: #f59e0b; margin-bottom: 6px; }
.at-aotn-name { font-family: var(--font-orb); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.at-aotn-agency { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.at-aotn-stat { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.at-aotn-open { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
padding: 6px 14px; border: 1px solid rgba(245,158,11,.4); border-radius: 2px;
background: rgba(245,158,11,.06); color: #f59e0b; cursor: pointer; transition: background .18s; display: block; margin-top: 10px; }
.at-aotn-open:hover { background: rgba(245,158,11,.12); }
.at-aotn-iss-teaser { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: rgba(0,51,255,.06);
border: 1px solid rgba(0,51,255,.15); border-radius: 3px; align-self: stretch; justify-content: center; }
.at-aotn-tease-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.at-aotn-tease-link { font-family: var(--font-mono); font-size: 10px; color: var(--teal); text-decoration: none; }
/* Phase 10 — Compare tray & panel */
.at-compare-tray {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
background: rgba(8,12,30,.96); border-top: 1px solid rgba(251,191,36,.3);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
padding: 10px 20px; transform: translateY(100%); animation: at-tray-in .25s ease forwards;
}
.at-compare-tray[hidden] { display: none !important; }
@keyframes at-tray-in { to { transform: translateY(0); } }
.at-compare-tray-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.at-compare-tray-slots { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.at-compare-slot { display: flex; align-items: center; gap: 6px; background: rgba(251,191,36,.08);
border: 1px solid rgba(251,191,36,.3); border-radius: 2px; padding: 4px 10px; }
.at-compare-slot-name { font-family: var(--font-mono); font-size: 11px; color: #fbbf24; }
.at-compare-slot-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px; }
.at-compare-slot-remove:hover { color: #f87171; }
.at-compare-go-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
padding: 7px 18px; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.4);
color: #fbbf24; border-radius: 2px; cursor: pointer; transition: background .15s; white-space: nowrap; }
.at-compare-go-btn:disabled { opacity: .4; cursor: default; }
.at-compare-go-btn:not(:disabled):hover { background: rgba(251,191,36,.18); }
.at-compare-clear-btn { font-size: 16px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 4px; }
.at-compare-clear-btn:hover { color: var(--text); }
/* Compare panel */
.at-compare-panel { padding: 20px 22px; }
.at-cmp-hdr { padding-bottom: 12px; border-bottom: 1px solid rgba(0,51,255,.15); margin-bottom: 16px; }
.at-cmp-title { font-family: var(--font-orb); font-size: 16px; font-weight: 700; color: var(--text); }
.at-cmp-table { display: flex; gap: 0; overflow-x: auto; }
.at-cmp-labels { display: flex; flex-direction: column; flex-shrink: 0; min-width: 110px; }
.at-cmp-label-header { height: 110px; flex-shrink: 0; }
.at-cmp-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted); padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(0,51,255,.08);
white-space: nowrap; display: flex; align-items: center; }
.at-cmp-col { display: flex; flex-direction: column; flex: 1; min-width: 140px; border-left: 1px solid rgba(0,51,255,.1); }
.at-cmp-portrait { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin: 12px auto 8px;
border: 2px solid rgba(0,51,255,.2); background: rgba(0,51,255,.08); flex-shrink: 0; }
.at-cmp-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.at-cmp-portrait span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-orb); font-size: 20px; color: rgba(0,200,255,.4); }
.at-cmp-name { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--text); text-align: center; padding: 0 8px 4px; }
.at-cmp-agency { font-family: var(--font-mono); font-size: 10px; text-align: center; padding: 0 8px 8px; }
.at-cmp-archs { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 8px 10px; justify-content: center; }
.at-cmp-cell { padding: 10px 12px; border-bottom: 1px solid rgba(0,51,255,.08); font-family: var(--font-mono); font-size: 11px; color: var(--text); text-align: center; }
/* Phase 13 — Global spaceflight */
.at-global-note { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-bottom: 14px; }
.at-nat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 10px; margin-bottom: 20px; }
.at-nat-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 3px;
border: 1px solid rgba(0,51,255,.15); background: rgba(255,255,255,.025); }
.at-nat-flag { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--teal);
min-width: 28px; text-align: center; letter-spacing: .08em; }
.at-nat-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.at-nat-stats { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.at-nat-stat { }
.at-nat-stat--live { color: var(--teal); }
.at-nat-bar-wrap { height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; margin: 4px 0 2px; width: 100%; }
.at-nat-bar { height: 100%; background: var(--teal); border-radius: 2px; transition: width .5s ease; }
.at-nat-days { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.at-global-placeholder { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
border: 1px dashed rgba(0,51,255,.2); border-radius: 4px; background: rgba(0,0,0,.15); }
.at-global-ph-icon { font-size: 20px; color: rgba(0,200,255,.25); }
.at-global-ph-text { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.at-global-loading { color: var(--muted); font-family: var(--font-mono); font-size: 12px; display: flex; align-items: center; gap: 10px; padding: 24px 0; }
/* ── Global Human Spaceflight Atlas ─────────────────────────────────────────── */
.at-atlas-subtitle { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin: -10px 0 18px; letter-spacing: .04em; }
.at-atlas-wrap { display: flex; flex-direction: column; gap: 20px; }
.at-atlas-loading { display: flex; align-items: center; gap: 12px; padding: 48px 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
/* Stat chips */
.at-atlas-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.at-atlas-chip {
display: flex; flex-direction: column; align-items: center;
background: rgba(0,200,255,.04); border: 1px solid rgba(0,200,255,.12);
border-radius: 6px; padding: 10px 16px; min-width: 80px; text-align: center; gap: 2px;
}
.at-atlas-chip--live { border-color: rgba(0,200,255,.35); background: rgba(0,200,255,.08); }
.at-atlas-chip-icon { font-size: 16px; color: var(--teal); }
.at-atlas-chip-val { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.at-atlas-chip-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
/* Main layout: map left, leaderboard right */
.at-atlas-main { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
.at-atlas-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.at-atlas-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Map */
.at-atlas-map-wrap { position: relative; }
.at-atlas-map { width: 100%; border-radius: 6px; border: 1px solid rgba(0,200,255,.1); display: block; }
.at-atlas-dot { cursor: pointer; transition: opacity .15s, r .15s; }
.at-atlas-dot:hover { opacity: 1 !important; }
.at-atlas-tooltip {
position: absolute; pointer-events: none; z-index: 10;
background: rgba(4,8,24,.95); border: 1px solid rgba(0,200,255,.25);
border-radius: 4px; padding: 8px 12px; font-family: var(--font-mono);
font-size: 11px; color: var(--text); line-height: 1.5;
transform: translate(-50%,-100%); white-space: nowrap;
}
.at-atlas-map-legend { display: flex; gap: 16px; padding: 6px 4px 0; flex-wrap: wrap; }
.at-atlas-leg { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; }
.at-atlas-leg--live { color: #00c8ff; }
.at-atlas-leg--active { color: #3de0c0; }
.at-atlas-leg--hist { color: #1a4a7a; }
.at-atlas-leg-note { font-family: var(--font-mono); font-size: 9px; color: var(--muted); margin-left: auto; }
/* Country detail */
.at-atlas-detail { background: rgba(0,200,255,.04); border: 1px solid rgba(0,200,255,.18); border-radius: 6px; padding: 14px 16px; }
.at-atlas-detail-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.at-atlas-detail-flag { font-size: 24px; }
.at-atlas-detail-name { font-size: 16px; font-weight: 600; color: var(--text); flex: 1; }
.at-atlas-detail-close { background: transparent; border: 1px solid rgba(0,200,255,.2); color: var(--muted); font-size: 11px; padding: 2px 8px; border-radius: 2px; cursor: pointer; }
.at-atlas-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.at-atlas-detail-stat { display: flex; flex-direction: column; gap: 1px; }
.at-atlas-detail-k { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.at-atlas-detail-v { font-size: 14px; font-weight: 600; color: var(--text); }
.at-atlas-filter-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
background: rgba(0,200,255,.06); border: 1px solid rgba(0,200,255,.25);
color: var(--teal); padding: 6px 14px; border-radius: 3px; cursor: pointer;
transition: background .15s; width: 100%;
}
.at-atlas-filter-btn:hover { background: rgba(0,200,255,.12); }
/* Leaderboard */
.at-atlas-leaderboard { background: rgba(0,0,0,.3); border: 1px solid rgba(0,200,255,.1); border-radius: 6px; overflow: hidden; }
.at-atlas-lb-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(0,200,255,.1); }
.at-atlas-lb-tab {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
padding: 7px 10px; background: transparent; border: none; color: var(--muted); cursor: pointer;
border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.at-atlas-lb-tab--active { color: var(--teal); border-bottom-color: var(--teal); }
.at-atlas-lb-rows { padding: 4px 0; max-height: 380px; overflow-y: auto; }
.at-atlas-lb-row {
display: flex; align-items: center; gap: 6px; padding: 5px 12px;
cursor: pointer; transition: background .1s; font-family: var(--font-mono); font-size: 11px;
}
.at-atlas-lb-row:hover, .at-atlas-lb-row--sel { background: rgba(0,200,255,.06); }
.at-atlas-lb-rank { width: 16px; color: var(--muted); font-size: 9px; }
.at-atlas-lb-flag { font-size: 14px; flex-shrink: 0; }
.at-atlas-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-atlas-lb-live { color: var(--teal); font-size: 10px; flex-shrink: 0; }
.at-atlas-lb-bar-wrap { width: 60px; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; flex-shrink: 0; }
.at-atlas-lb-bar { height: 100%; background: var(--teal); border-radius: 2px; transition: width .4s ease; }
.at-atlas-lb-val { width: 48px; text-align: right; color: var(--text); font-weight: 600; font-size: 11px; flex-shrink: 0; }
.at-atlas-cmp-btn {
background: transparent; border: 1px solid rgba(0,200,255,.18); color: var(--muted);
font-size: 11px; padding: 1px 5px; border-radius: 2px; cursor: pointer; flex-shrink: 0;
transition: all .15s;
}
.at-atlas-cmp-btn--on { border-color: var(--teal); color: var(--teal); background: rgba(0,200,255,.1); }
/* Lower sections */
.at-atlas-lower { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.at-atlas-sub-hdr {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
border-bottom: 1px solid rgba(0,200,255,.08); padding-bottom: 6px;
display: flex; align-items: center; gap: 8px;
}
/* Agencies */
.at-atlas-agencies { background: rgba(0,0,0,.25); border: 1px solid rgba(0,200,255,.1); border-radius: 6px; padding: 14px; }
.at-atlas-ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.at-atlas-ag-chip {
display: flex; align-items: center; gap: 5px;
background: rgba(0,200,255,.05); border: 1px solid rgba(0,200,255,.15);
border-radius: 4px; padding: 4px 10px; cursor: default; transition: background .15s;
font-family: var(--font-mono); font-size: 11px;
}
.at-atlas-ag-chip--live { border-color: rgba(0,200,255,.4); background: rgba(0,200,255,.1); }
.at-atlas-ag-abbr { font-weight: 700; color: var(--text); }
.at-atlas-ag-count { color: var(--muted); font-size: 10px; }
.at-atlas-ag-live { color: var(--teal); font-size: 9px; }
/* Firsts */
.at-atlas-firsts { background: rgba(0,0,0,.25); border: 1px solid rgba(0,200,255,.1); border-radius: 6px; padding: 14px; }
.at-atlas-firsts-strip { display: flex; flex-direction: column; gap: 10px; }
.at-atlas-first {
display: flex; align-items: flex-start; gap: 10px;
border-bottom: 1px solid rgba(0,200,255,.06); padding-bottom: 10px; cursor: pointer;
border-radius: 3px; padding: 6px 4px; transition: background .1s;
}
.at-atlas-first:last-child { border-bottom: none; }
.at-atlas-first:hover { background: rgba(0,200,255,.05); }
.at-atlas-first-icon { font-size: 18px; color: var(--teal); flex-shrink: 0; margin-top: 1px; }
.at-atlas-first-note { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.at-atlas-first-name { font-size: 13px; font-weight: 600; color: var(--text); }
.at-atlas-first-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* Decades */
.at-atlas-decades { background: rgba(0,0,0,.25); border: 1px solid rgba(0,200,255,.1); border-radius: 6px; padding: 14px; }
.at-atlas-dec-bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; padding-top: 12px; }
.at-atlas-dec-col { display: flex; flex-direction: column; align-items: center; flex: 1; }
.at-atlas-dec-bar {
width: 100%; background: rgba(0,200,255,.25); border-radius: 2px 2px 0 0;
border-top: 2px solid rgba(0,200,255,.6); position: relative;
transition: background .15s;
}
.at-atlas-dec-bar:hover { background: rgba(0,200,255,.4); }
.at-atlas-dec-val { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; color: var(--muted); white-space: nowrap; }
.at-atlas-dec-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); margin-top: 4px; }
/* Compare panel */
.at-atlas-compare { background: rgba(0,0,0,.3); border: 1px solid rgba(0,200,255,.15); border-radius: 6px; padding: 14px; }
.at-atlas-cmp-clear { background: transparent; border: 1px solid rgba(248,113,113,.3); color: #f87171; font-size: 9px; padding: 2px 8px; border-radius: 2px; cursor: pointer; margin-left: auto; font-family: var(--font-mono); }
.at-atlas-cmp-hdr { display: flex; gap: 8px; margin-bottom: 8px; }
.at-atlas-cmp-col-hdr { flex: 1; font-weight: 600; font-size: 12px; text-align: center; }
.at-atlas-cmp-row { display: flex; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(0,200,255,.06); }
.at-atlas-cmp-metric { width: 120px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); flex-shrink: 0; }
.at-atlas-cmp-cell { flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: var(--text); }
/* Mobile */
@media (max-width: 900px) {
.at-atlas-main { grid-template-columns: 1fr; }
.at-atlas-lower { grid-template-columns: 1fr; }
.at-atlas-lb-rows { max-height: 260px; }
}
@media (max-width: 500px) {
.at-atlas-chips { gap: 6px; }
.at-atlas-chip { min-width: 60px; padding: 8px 10px; }
.at-atlas-chip-val { font-size: 18px; }
}
/* Phase 1–10 mobile */
@media (max-width: 700px) {
.at-aotn-card { grid-template-columns: 70px 1fr; }
.at-aotn-photo-wrap { width: 70px; height: 70px; }
.at-aotn-iss-teaser { display: none; }
.at-ocb-crew { width: 68px; }
.at-ocb-photo { width: 54px; height: 54px; }
.at-compare-tray-slots { display: none; }
.at-cmp-table { flex-direction: column; }
.at-cmp-labels { display: none; }
.at-nat-grid { grid-template-columns: 1fr 1fr; }
.at-era-timeline { gap: 4px; }
.at-era-btn { padding: 5px 8px; font-size: 9px; }
}
/* ── Agency Command Center ────────────────────────────────────────────────────── */
/* Hero command stats strip */
.ag-cmd-stats {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 24px; padding-top: 20px;
border-top: 1px solid rgba(0,51,255,.2);
}
.ag-cmd-stat {
display: flex; flex-direction: column; align-items: center; gap: 3px;
flex: 1; min-width: 90px; max-width: 130px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(0,51,255,.15);
border-radius: 3px; padding: 12px 10px;
}
.ag-cmd-stat--skel { min-height: 64px; animation: at-skel-pulse 1.4s ease-in-out infinite; }
.ag-cmd-icon { font-size: 13px; color: rgba(0,200,255,.4); margin-bottom: 2px; }
.ag-cmd-val { font-family: var(--font-orb); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.ag-cmd-val--sm { font-size: 12px; font-family: var(--font-mono); text-align: center; line-height: 1.4; }
.ag-cmd-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
/* Dossier card upgrades */
.ag-card { border-top: 2px solid var(--ag-color, rgba(0,200,255,.3)); }
.ag-card--skel { min-height: 200px; animation: at-skel-pulse 1.4s ease-in-out infinite;
border-color: rgba(0,51,255,.08); }
.ag-card-logo-wrap { position: relative; padding: 0; }
.ag-card-logo { display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.03); padding: 8px; height: 80px; }
.ag-card-logo img { max-width: 100%; max-height: 60px; width: auto; height: auto;
object-fit: contain; filter: brightness(.95); }
.ag-card-initials { font-family: var(--font-mono); font-size: 13px; font-weight: 700;
letter-spacing: .1em; color: var(--teal); text-transform: uppercase; }
.ag-card-logo-wrap .ag-type {
position: absolute; bottom: 6px; right: 6px; font-size: 9px; padding: 1px 6px;
}
.ag-card-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px;
margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(0,51,255,.1); }
.ag-card-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ag-card-sval { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--text); }
.ag-card-skey { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; color: var(--muted); }
/* Leaderboard */
.ag-leaderboard-loading { color: var(--muted); font-family: var(--font-mono); font-size: 12px;
display: flex; align-items: center; gap: 10px; padding: 24px 0; }
.ag-lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }
.ag-lb-card { background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.15);
border-top: 2px solid var(--lb-color,rgba(0,200,255,.4)); border-radius: 4px; overflow: hidden; }
.ag-lb-hdr { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px;
border-bottom: 1px solid rgba(0,51,255,.1); }
.ag-lb-icon { font-size: 18px; color: var(--lb-color); flex-shrink: 0; }
.ag-lb-title { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--text); }
.ag-lb-desc { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 1px; }
.ag-lb-rows { }
.ag-lb-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px;
cursor: pointer; transition: background .15s; border-bottom: 1px solid rgba(0,51,255,.06); }
.ag-lb-row:last-child { border-bottom: none; }
.ag-lb-row:hover { background: rgba(255,255,255,.03); }
.ag-lb-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.ag-lb-rank { font-family: var(--font-orb); font-size: 14px; font-weight: 700; min-width: 18px; }
.ag-lb-logo { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.04); border-radius: 2px; flex-shrink: 0; overflow: hidden; }
.ag-lb-logo img { width: 100%; height: 100%; object-fit: contain; }
.ag-lb-initials { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--teal);
text-transform: uppercase; }
.ag-lb-name { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light); flex: 1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-lb-val { font-family: var(--font-orb); font-size: 14px; font-weight: 700; flex-shrink: 0; }
/* Profile panel */
.ag-profile-wrap[hidden] { display: none !important; }
#ag-profile-inner.at-modal-box { background: #080c1e; border: 1px solid rgba(0,51,255,.2); border-radius: 8px; overflow: hidden; }
#lse-modal-body.at-modal-box { background: #080c1e; border: 1px solid rgba(0,51,255,.2); border-radius: 8px; overflow: hidden; }
.lse-minimap { height: 520px; border-radius: 0; border-top: 1px solid rgba(0,51,255,.15); margin: 16px 0 0; position: relative; }
.lse-minimap-sat-btn { position: absolute; top: 10px; left: 10px; z-index: 10; background: rgba(5,10,30,.85); border: 1px solid rgba(0,200,255,.3); color: #cbd5e1; font-family: var(--font-mono); font-size: 11px; padding: 5px 10px; border-radius: 4px; cursor: pointer; backdrop-filter: blur(4px); }
.lse-minimap-sat-btn:hover { background: rgba(0,200,255,.12); color: #fff; }
.lse-pad-drawer { max-height: 0; overflow: hidden; transition: max-height .3s ease; border-bottom: 1px solid rgba(0,51,255,.15); }
.lse-pad-drawer--open { max-height: 600px; }
.lse-pad-drawer-inner { padding: 16px 22px 18px; position: relative; background: rgba(0,8,30,.95); }
.lse-pad-drawer-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 4px 8px; }
.lse-pad-drawer-close:hover { color: var(--text); }
.lse-pad-drawer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.lse-pad-drawer-name { font-family: var(--font-orb); font-size: 16px; font-weight: 700; color: var(--text); margin: 0; width: 100%; }
.lse-pad-drawer-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lse-pad-drawer-desc { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 12px; }
.lse-pad-drawer-launch { background: rgba(0,200,255,.04); border: 1px solid rgba(0,200,255,.12); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.ag-prof-loading { display: flex; align-items: center; gap: 10px; padding: 60px 0;
color: var(--muted); font-family: var(--font-mono); font-size: 12px; justify-content: center; }
.ag-profile { background: rgba(255,255,255,.02); border: 1px solid rgba(0,51,255,.2);
border-top: 3px solid var(--ag-color,rgba(0,200,255,.5)); border-radius: 4px; overflow: hidden; }
.ag-prof-banner { height: 160px; overflow: hidden; }
.ag-prof-banner img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
/* Status strip */
.ag-prof-strip { display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(0,51,255,.15);
background: rgba(0,0,20,.3); }
.ag-prof-strip-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
border-right: 1px solid rgba(0,51,255,.1); min-width: 80px; }
.ag-prof-strip-item:last-child { border-right: none; }
.ag-prof-strip-key { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); }
.ag-prof-strip-val { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; }
/* Main profile header */
.ag-prof-main { display: grid; grid-template-columns: 100px 1fr; gap: 22px; padding: 20px 22px; align-items: start; }
.ag-prof-logo-wrap { }
.ag-prof-logo-img {
width: 100%; aspect-ratio: 1/1; object-fit: contain; border-radius: 4px;
background: rgba(255,255,255,.04); padding: 6px; border: 1px solid rgba(255,255,255,.1);
}
.ag-prof-logo-placeholder {
width: 100%; aspect-ratio: 1/1; background: rgba(0,51,255,.1); border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--teal);
text-transform: uppercase; letter-spacing: .08em;
}
.ag-prof-info { }
.ag-prof-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ag-prof-country { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
color: var(--muted); border: 1px solid rgba(255,255,255,.12);
padding: 2px 8px; border-radius: 2px; }
.ag-prof-name { font-family: var(--font-orb); font-size: 22px; font-weight: 700; color: var(--text);
line-height: 1.2; margin: 0 0 4px; }
.ag-prof-abbrev { font-family: var(--font-mono); font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.ag-prof-bio { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.6); margin-bottom: 10px;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ag-prof-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-prof-link { font-family: var(--font-mono); font-size: 11px; color: var(--teal);
border: 1px solid rgba(0,200,255,.25); padding: 4px 12px; border-radius: 2px;
text-decoration: none; transition: background .18s; }
.ag-prof-link:hover { background: rgba(0,200,255,.08); }
/* Sections */
.ag-prof-sections { border-top: 1px solid rgba(0,51,255,.12); }
.ag-prof-section { padding: 16px 22px; border-bottom: 1px solid rgba(0,51,255,.1); }
.ag-prof-section:last-child { border-bottom: none; }
.ag-prof-section-title {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.ag-prof-section-cta {
font-family: var(--font-mono); font-size: 10px; color: var(--teal);
text-decoration: none; margin-left: auto;
border: 1px solid rgba(0,200,255,.25); padding: 2px 10px; border-radius: 2px;
}
.ag-prof-section-cta:hover { background: rgba(0,200,255,.08); }
/* Launch timeline */
.ag-prof-timeline { display: flex; flex-direction: column; gap: 0; }
.ag-tl-item { display: flex; align-items: center; gap: 10px; padding: 8px 0;
border-bottom: 1px solid rgba(0,51,255,.07); font-family: var(--font-mono); font-size: 11px; }
.ag-tl-item:last-child { border-bottom: none; }
.ag-tl-item--upcoming { background: rgba(0,200,255,.02); }
.ag-tl-item--link { text-decoration: none; color: inherit; cursor: pointer; transition: background .12s; }
.ag-tl-item--link:hover { background: rgba(0,200,255,.05); }
.ag-tl-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2);
flex-shrink: 0; }
.ag-tl-dot--up { background: var(--teal); box-shadow: 0 0 6px rgba(0,200,255,.5); }
.ag-tl-date { color: var(--muted); min-width: 90px; flex-shrink: 0; }
.ag-tl-name { color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-tl-vehicle { color: var(--muted); min-width: 80px; flex-shrink: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.ag-tl-status { font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
padding: 1px 6px; border-radius: 2px; border: 1px solid; flex-shrink: 0; }
.ag-tl-status--upcoming { color: var(--teal); border-color: rgba(0,200,255,.3); }
.ag-tl-status--success { color: #34d399; border-color: rgba(52,211,153,.3); }
.ag-tl-status--other { color: var(--muted); border-color: rgba(255,255,255,.1); }
/* Launch footprint */
.ag-footprint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 8px; }
.ag-footprint-pad { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px;
background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.15);
border-radius: 3px; text-decoration: none; transition: background .15s, border-color .15s; }
.ag-footprint-pad:hover { background: rgba(0,200,255,.05); border-color: rgba(0,200,255,.3); }
.ag-fp-icon { font-size: 14px; color: rgba(0,200,255,.4); }
.ag-fp-pad { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; }
.ag-fp-loc { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.ag-fp-count { font-family: var(--font-mono); font-size: 10px; color: var(--teal); margin-top: 2px; }
/* Vehicles chip cloud */
.ag-chip-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chip { font-family: var(--font-mono); font-size: 10px; padding: 3px 10px; border-radius: 2px;
border: 1px solid rgba(255,255,255,.12); color: var(--muted); }
.ag-chip--active { border-color: rgba(52,211,153,.3); color: #34d399; background: rgba(52,211,153,.05); }
/* Programs */
.ag-programs-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-program-card { background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.12);
border-radius: 3px; padding: 10px 12px; max-width: 200px; display: flex;
flex-direction: column; gap: 4px; }
.ag-program-card--link { text-decoration: none; transition: border-color .15s, background .15s; }
.ag-program-card--link:hover { border-color: rgba(96,165,250,.4); background: rgba(96,165,250,.06); }
.ag-prog-img { width: 36px; height: 36px; object-fit: contain; border-radius: 50%; border: 1px solid rgba(0,51,255,.2); }
.ag-prog-name { font-family: var(--font-mono); font-size: 11px; color: var(--text); font-weight: 600; }
.ag-prog-desc { font-family: var(--font-mono); font-size: 10px; color: var(--muted); line-height: 1.4; }
/* Astronauts */
.ag-astro-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-astro-chip { display: flex; flex-direction: column; align-items: center; gap: 4px;
width: 64px; }
a.ag-astro-chip { text-decoration: none; color: inherit; transition: opacity .15s; }
a.ag-astro-chip:hover { opacity: .85; }
.ag-astro-chip--live .ag-astro-photo { box-shadow: 0 0 8px rgba(0,200,255,.5); }
.ag-astro-photo { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
border: 2px solid rgba(0,51,255,.2); background: rgba(0,51,255,.1);
display: flex; align-items: center; justify-content: center; }
.ag-astro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ag-astro-initials { font-family: var(--font-orb); font-size: 14px; color: rgba(0,200,255,.4); }
.ag-astro-live-dot { position: absolute; bottom: 0; right: 0; font-size: 9px; color: var(--teal);
background: rgba(8,12,30,.9); border-radius: 50%; width: 14px; height: 14px;
display: flex; align-items: center; justify-content: center; }
.ag-astro-name { font-family: var(--font-mono); font-size: 9px; color: var(--text); text-align: center; }
.ag-astro-status { font-family: var(--font-mono); font-size: 8px; color: var(--muted); text-align: center; }
/* Mobile */
@media (max-width: 900px) {
.ag-lb-grid { grid-template-columns: 1fr; }
.ag-prof-main { grid-template-columns: 80px 1fr; gap: 14px; }
}
@media (max-width: 600px) {
.ag-cmd-stats { gap: 6px; }
.ag-cmd-stat { min-width: 70px; padding: 8px 6px; }
.ag-cmd-val { font-size: 18px; }
.ag-prof-main { grid-template-columns: 1fr; }
.ag-prof-logo-wrap { max-width: 80px; }
.ag-prof-strip { display: grid; grid-template-columns: repeat(3,1fr); }
.ag-tl-vehicle { display: none; }
.ag-footprint-grid { grid-template-columns: 1fr; }
}
/* ── Agencies lookup ─────────────────────────────────────────────────────────── */
/* Type badge — inherits .at-status base shape via shared class */
.ag-type {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,.15);
color: var(--muted);
}
.ag-type--government { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.07); }
.ag-type--commercial { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.06); }
.ag-type--private { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.07); }
.ag-type--multinational{ color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.06); }
.ag-type--educational { color: #f472b6; border-color: rgba(244,114,182,.3); background: rgba(244,114,182,.06); }
.ag-type--other { color: var(--muted); }
/* Agency card logo area — constrain logo images (which can be wide/tall) */
.ag-card .at-card-photo,
.ag-card-logo {
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.03);
padding: 8px;
height: 80px;
}
.ag-card-logo img {
max-width: 100%;
max-height: 64px;
width: auto;
height: auto;
object-fit: contain;
filter: brightness(.95);
}
.ag-card-initials {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: .1em;
color: var(--teal);
text-transform: uppercase;
}
/* Modal — agency banner image */
.ag-modal-banner {
margin: -24px -24px 20px;
height: 140px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.ag-modal-banner img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .7;
}
/* Modal — agency logo in header */
.ag-modal-logo {
flex-shrink: 0;
width: 80px;
height: 80px;
object-fit: contain;
border-radius: 4px;
background: rgba(255,255,255,.04);
padding: 6px;
border: 1px solid rgba(255,255,255,.1);
}
.ag-modal-logo--initials {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
letter-spacing: .1em;
color: var(--teal);
text-transform: uppercase;
}
/* Modal header when there's a banner — reduce top padding */
.ag-modal-head { gap: 16px; }
@media (max-width: 600px) {
.ag-modal-banner { height: 90px; margin: -16px -16px 14px; }
.ag-modal-logo { width: 60px; height: 60px; }
}
/* ── Locations & Pads lookup ─────────────────────────────────────────────────── */
/* Tab switcher */
.lp-tabs {
display: flex;
gap: 4px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(255,255,255,.1);
padding-bottom: 0;
}
.lp-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--muted);
cursor: pointer;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .08em;
padding: 10px 18px 12px;
text-transform: uppercase;
transition: color .15s, border-color .15s;
margin-bottom: -1px;
}
.lp-tab:hover { color: var(--text); }
.lp-tab--active { color: var(--teal); border-bottom-color: var(--teal); }
.lp-tab-count { opacity: .55; margin-left: 4px; }
/* Card image area — map images tend to be landscape */
.lp-card .at-card-photo,
.lp-card-img {
height: 90px;
overflow: hidden;
padding: 0;
background: rgba(255,255,255,.03);
}
.lp-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .85;
transition: opacity .2s;
}
.lp-card:hover .lp-card-img img { opacity: 1; }
.lp-card-initials {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: .1em;
color: var(--teal);
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* Pad location subtitle — smaller than name */
.lp-card-site {
font-size: 10px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Launch count badge */
.lp-launch-badge {
font-family: var(--font-mono);
font-size: 10px;
color: var(--teal);
border: 1px solid rgba(0,200,255,.25);
background: rgba(0,200,255,.06);
border-radius: 3px;
padding: 1px 6px;
letter-spacing: .06em;
}
/* Inactive badge */
/* Next launch section in pad modal */
.lp-next-launch { margin: .75rem 0; padding: .65rem .85rem; background: rgba(0,200,255,.04); border: 1px solid rgba(0,200,255,.15); }
.lp-next-launch-label { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .3rem; }
.lp-next-launch-name { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; text-decoration: none; display: block; }
a.lp-next-launch-name:hover { color: #60a5fa; }
.lp-next-launch-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: .2rem; }
.lp-launch-status { color: #4ade80; }
.lp-inactive-badge {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
border: 1px solid rgba(255,255,255,.12);
border-radius: 3px;
padding: 1px 6px;
letter-spacing: .06em;
}
.lp-card--inactive { opacity: .65; }
.lp-card--inactive:hover { opacity: .85; }
/* Pads section inside location modal */
.lp-pads-section { border-top: 1px solid rgba(0,51,255,.15); margin-top: 4px; padding: 16px 24px 8px; }
.lp-pads-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.lp-pads-count { opacity: .6; }
.lp-pads-list { display: flex; flex-direction: column; gap: 12px; }
.lp-pad-item { display: flex; gap: 12px; padding: 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(0,51,255,.12); border-radius: 4px; }
.lp-pad-item--inactive { opacity: .6; }
.lp-pad-img { width: 80px; height: 60px; object-fit: cover; border-radius: 3px; flex-shrink: 0; opacity: .75; }
.lp-pad-info { flex: 1; min-width: 0; }
.lp-pad-name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.lp-pad-meta { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-bottom: 4px; }
.lp-pad-meta b { color: rgba(255,255,255,.4); font-weight: 500; }
.lp-pad-desc { font-size: 11.5px; color: rgba(255,255,255,.5); line-height: 1.6; margin-top: 5px; }
.lp-pad-links { display: flex; gap: 6px; margin-top: 6px; }
.lp-pad-link { font-size: 10px !important; padding: 2px 7px !important; }
.lp-pad-next { margin: 5px 0 2px; padding: 6px 8px; background: rgba(0,200,255,.04); border: 1px solid rgba(0,200,255,.12); border-radius: 3px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lp-pad-next-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lp-pad-next-name { font-family: var(--font-mono); font-size: 11px; color: var(--teal); font-weight: 600; text-decoration: none; }
a.lp-pad-next-name:hover { text-decoration: underline; }
.lp-pad-next-date { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
@media (max-width: 600px) {
.lp-tab { padding: 8px 12px 10px; font-size: 11px; }
.lp-card-img { height: 70px; }
}
/* ── Program Mission Control ─────────────────────────────────────────────────── */
/* Hero command stats */
.pr-cmd-stats {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 24px; padding-top: 20px;
border-top: 1px solid rgba(0,51,255,.2);
}
.pr-cmd-stat {
display: flex; flex-direction: column; align-items: center; gap: 3px;
flex: 1; min-width: 90px; max-width: 130px;
background: rgba(255,255,255,.03); border: 1px solid rgba(0,51,255,.15);
border-radius: 3px; padding: 12px 10px;
}
.pr-cmd-stat--skel { min-height: 64px; animation: at-skel-pulse 1.4s ease-in-out infinite; }
.pr-cmd-stat--live { border-color: rgba(52,211,153,.25); background: rgba(52,211,153,.04); }
.pr-cmd-icon { font-size: 13px; color: rgba(0,200,255,.4); margin-bottom: 2px; }
.pr-cmd-val { font-family: var(--font-orb); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.pr-cmd-val--sm { font-size: 12px; font-family: var(--font-mono); text-align: center; line-height: 1.4; }
.pr-cmd-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.pr-cmd-stat--live .pr-cmd-val { color: #34d399; }
/* CTA buttons row */
.pr-cta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pr-cta-btn {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
padding: 7px 16px; border: 1px solid rgba(0,51,255,.3); border-radius: 2px;
color: var(--muted); text-decoration: none; background: rgba(255,255,255,.03);
transition: background .18s, border-color .18s, color .18s;
}
.pr-cta-btn:hover { background: rgba(0,200,255,.07); border-color: rgba(0,200,255,.35); color: var(--teal); }
/* Status badge */
.pr-status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
padding: 2px 7px; border-radius: 2px; border: 1px solid; display: inline-block; }
.pr-status--active { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.06); }
.pr-status--retired { color: var(--muted); border-color: rgba(255,255,255,.12); }
.pr-status--planned { color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.05); }
.pr-status--unknown { color: var(--muted); border-color: rgba(255,255,255,.1); }
.pr-type--tech { color: #f97316; border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.06); }
/* Leaderboard */
.pr-leaderboard-loading { color: var(--muted); font-family: var(--font-mono); font-size: 12px;
display: flex; align-items: center; gap: 10px; padding: 24px 0; }
.pr-lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; margin-bottom: 8px; }
.pr-lb-card { background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.15);
border-top: 2px solid var(--lb-color,rgba(0,200,255,.4)); border-radius: 4px; overflow: hidden; }
.pr-lb-hdr { display: flex; align-items: center; gap: 10px; padding: 11px 14px 9px;
border-bottom: 1px solid rgba(0,51,255,.1); }
.pr-lb-icon { font-size: 18px; color: var(--lb-color); flex-shrink: 0; }
.pr-lb-title { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--text); }
.pr-lb-desc { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 1px; }
.pr-lb-row { display: flex; align-items: center; gap: 8px; padding: 7px 14px;
cursor: pointer; transition: background .15s; border-bottom: 1px solid rgba(0,51,255,.06); }
.pr-lb-row:last-child { border-bottom: none; }
.pr-lb-row:hover { background: rgba(255,255,255,.03); }
.pr-lb-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.pr-lb-rank { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--muted); min-width: 18px; }
.pr-lb-img { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.03); border-radius: 2px; flex-shrink: 0; overflow: hidden; }
.pr-lb-img img { width: 100%; height: 100%; object-fit: contain; }
.pr-lb-initials { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--teal);
text-transform: uppercase; }
.pr-lb-name { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light); flex: 1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-lb-val { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--lb-color); flex-shrink: 0; }
/* Dossier card enhancements */
.pr-card { border-top: 2px solid var(--pr-color, rgba(0,200,255,.3)); }
.pr-card-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pr-card-agency-more { font-family: var(--font-mono); font-size: 9px; color: var(--muted); padding: 1px 5px;
border: 1px solid rgba(255,255,255,.1); border-radius: 2px; }
/* Profile panel */
.pr-profile-wrap[hidden] { display: none !important; }
#pr-profile-inner.at-modal-box { background: #080c1e; border: 1px solid rgba(0,51,255,.2); border-radius: 8px; overflow: hidden; }
.pr-prof-loading { display: flex; align-items: center; gap: 10px; padding: 60px 0;
color: var(--muted); font-family: var(--font-mono); font-size: 12px; justify-content: center; }
.pr-profile { background: rgba(255,255,255,.02); border: 1px solid rgba(0,51,255,.2);
border-top: 3px solid var(--pr-color,rgba(0,200,255,.5)); border-radius: 4px; overflow: hidden; }
.pr-prof-banner { height: 160px; overflow: hidden; }
.pr-prof-banner img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.pr-prof-strip { display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(0,51,255,.15);
background: rgba(0,0,20,.3); }
.pr-prof-strip-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
border-right: 1px solid rgba(0,51,255,.1); min-width: 80px; }
.pr-prof-strip-item:last-child { border-right: none; }
.pr-prof-strip-key { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); }
.pr-prof-strip-val { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; }
.pr-prof-main { padding: 20px 22px; }
.pr-prof-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pr-prof-name { font-family: var(--font-orb); font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.pr-prof-dates { font-family: var(--font-mono); font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.pr-prof-bio { font-size: 13px; line-height: 1.75; color: rgba(255,255,255,.65); margin-bottom: 10px; }
.pr-prof-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-prof-link { font-family: var(--font-mono); font-size: 11px; color: var(--teal);
border: 1px solid rgba(0,200,255,.25); padding: 4px 12px; border-radius: 2px;
text-decoration: none; transition: background .18s; }
.pr-prof-link:hover { background: rgba(0,200,255,.08); }
/* Lifecycle bar */
.pr-lifecycle { display: flex; align-items: center; padding: 12px 22px;
border-bottom: 1px solid rgba(0,51,255,.1); overflow-x: auto;
background: rgba(0,0,0,.2); gap: 0; }
.pr-lifecycle-phase { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.pr-lifecycle-dot { width: 10px; height: 10px; border-radius: 50%;
border: 2px solid rgba(255,255,255,.2); background: transparent; transition: all .2s; }
.pr-lifecycle-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted); white-space: nowrap; }
.pr-lifecycle-line { flex: 1; height: 2px; background: rgba(255,255,255,.1); min-width: 30px; margin-top: -14px; align-self: flex-start; margin-left: 0; }
.pr-lifecycle-phase--done .pr-lifecycle-dot { background: var(--teal); border-color: var(--teal); }
.pr-lifecycle-phase--done .pr-lifecycle-label { color: var(--muted-light); }
.pr-lifecycle-phase--active .pr-lifecycle-dot { background: #34d399; border-color: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.6); }
.pr-lifecycle-phase--active .pr-lifecycle-label { color: #34d399; font-weight: 700; }
.pr-lifecycle-line--done { background: var(--teal); }
/* Sections */
.pr-prof-sections { border-top: 1px solid rgba(0,51,255,.1); }
.pr-prof-section { padding: 14px 22px; border-bottom: 1px solid rgba(0,51,255,.08); }
.pr-prof-section:last-child { border-bottom: none; }
.pr-prof-section-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
display: flex; align-items: center; gap: 10px; }
.pr-prof-section-cta { font-family: var(--font-mono); font-size: 10px; color: var(--teal);
text-decoration: none; margin-left: auto; border: 1px solid rgba(0,200,255,.25);
padding: 2px 10px; border-radius: 2px; }
.pr-prof-section-cta:hover { background: rgba(0,200,255,.08); }
.pr-no-data { font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding: 10px 0; }
/* Launch timeline */
.pr-tl { display: flex; flex-direction: column; }
.pr-tl-item { display: flex; align-items: center; gap: 10px; padding: 7px 0;
border-bottom: 1px solid rgba(0,51,255,.06); font-family: var(--font-mono); font-size: 11px; }
.pr-tl-item:last-child { border-bottom: none; }
.pr-tl-item--up { background: rgba(0,200,255,.02); }
.pr-tl-item--link { text-decoration: none; color: inherit; cursor: pointer; transition: background .12s; }
.pr-tl-item--link:hover { background: rgba(0,200,255,.05); }
.pr-tl-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); flex-shrink: 0; }
.pr-tl-dot--up { background: var(--teal); box-shadow: 0 0 6px rgba(0,200,255,.5); }
.pr-tl-date { color: var(--muted); min-width: 95px; flex-shrink: 0; }
.pr-tl-name { color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-tl-vehicle { color: var(--muted); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.pr-tl-status { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px;
border-radius: 2px; border: 1px solid; flex-shrink: 0; }
.pr-tl-status--up { color: var(--teal); border-color: rgba(0,200,255,.3); }
.pr-tl-status--ok { color: #34d399; border-color: rgba(52,211,153,.3); }
.pr-tl-status--other { color: var(--muted); border-color: rgba(255,255,255,.1); }
/* Launch footprint */
.pr-footprint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 8px; }
.pr-fp-pad { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px;
background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.15); border-radius: 3px;
text-decoration: none; transition: background .15s, border-color .15s; }
.pr-fp-pad:hover { background: rgba(0,200,255,.05); border-color: rgba(0,200,255,.3); }
.pr-fp-icon { font-size: 13px; color: rgba(0,200,255,.35); }
.pr-fp-pad-name { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; }
.pr-fp-loc { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.pr-fp-count { font-family: var(--font-mono); font-size: 10px; color: var(--teal); margin-top: 2px; }
/* Agencies strip */
.pr-agencies-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-agency-chip {
display: flex; flex-direction: column; gap: 2px; padding: 8px 14px;
background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.15); border-radius: 3px;
text-decoration: none; transition: background .15s; min-width: 100px;
border-left: 3px solid var(--ag-color, rgba(0,200,255,.4));
}
.pr-agency-chip:hover { background: rgba(255,255,255,.04); }
.pr-agency-abbrev { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text); }
.pr-agency-name { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.pr-agency-type { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
/* Patches gallery */
.pr-patches-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-patch { width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
border: 2px solid rgba(0,51,255,.2); background: rgba(0,51,255,.08);
display: flex; align-items: center; justify-content: center; }
.pr-patch img { width: 100%; height: 100%; object-fit: contain; }
/* Mobile */
@media (max-width: 900px) {
.pr-lb-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
.pr-cmd-stats { gap: 6px; }
.pr-cmd-stat { min-width: 70px; padding: 8px 6px; }
.pr-cmd-val { font-size: 18px; }
.pr-cta-row { gap: 6px; }
.pr-cta-btn { font-size: 10px; padding: 6px 10px; }
.pr-lb-grid { grid-template-columns: 1fr; }
.pr-prof-strip { display: grid; grid-template-columns: repeat(3,1fr); }
.pr-tl-vehicle { display: none; }
.pr-footprint-grid { grid-template-columns: 1fr; }
}
/* ── Programs lookup ─────────────────────────────────────────────────────────── */
/* Wide card grid — 2 columns, each card is horizontal */
.pr-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 4px;
}
.pr-card {
display: flex;
gap: 0;
background: var(--panel-bg, rgba(255,255,255,.03));
border: 1px solid rgba(255,255,255,.07);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
transition: border-color .15s, transform .1s;
}
.pr-card:hover { border-color: rgba(0,200,255,.3); transform: translateY(-2px); }
.pr-card:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Image panel */
.pr-card-img {
flex-shrink: 0;
width: 120px;
background: rgba(255,255,255,.04);
overflow: hidden;
position: relative;
}
.pr-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .85;
transition: opacity .2s;
}
.pr-card:hover .pr-card-img img { opacity: 1; }
.pr-card-initials {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 80px;
font-family: var(--font-mono);
font-size: 15px;
font-weight: 700;
letter-spacing: .1em;
color: var(--teal);
}
/* Text body */
.pr-card-body {
flex: 1;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.pr-card-header {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pr-card-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.pr-card-agencies {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.pr-card-agency {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
border: 1px solid rgba(255,255,255,.1);
border-radius: 3px;
padding: 1px 6px;
}
.pr-card-desc {
font-size: 11px;
color: var(--muted);
line-height: 1.5;
margin: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.pr-card-date {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
letter-spacing: .06em;
}
/* Type badge */
.pr-type {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .07em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,.15);
color: var(--muted);
white-space: nowrap;
}
.pr-type--human { color: #34d399; border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.07); }
.pr-type--exploration { color: #60a5fa; border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.06); }
.pr-type--comms { color: #fbbf24; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.06); }
.pr-type--nav { color: #a78bfa; border-color: rgba(167,139,250,.35); background: rgba(167,139,250,.07); }
.pr-type--earth { color: #4ade80; border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); }
.pr-type--other { color: var(--muted); }
/* Modal banner */
.pr-modal-banner {
margin: -24px -24px 20px;
height: 180px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.pr-modal-banner img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .65;
}
/* Mission patches strip */
.pr-modal-patches {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.08);
}
.pr-patch {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
flex-shrink: 0;
}
.pr-patch img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Wider modal for programs (more text) */
.pr-modal-body.at-modal-body { max-width: 640px; }
@media (max-width: 860px) {
.pr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.pr-card-img { width: 90px; }
.pr-card-body { padding: 10px 12px; }
.pr-modal-banner { height: 110px; margin: -16px -16px 14px; }
.pr-patch { width: 50px; height: 50px; }
}
/* ── Vehicles lookup ─────────────────────────────────────────────────────────── */
/* Vehicle card image — tall portrait crop for rockets */
.veh-card .at-card-photo,
.veh-card-img {
height: 100px;
overflow: hidden;
padding: 0;
background: rgba(255,255,255,.03);
}
.veh-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
opacity: .85;
transition: opacity .2s;
}
.veh-card:hover .veh-card-img img { opacity: 1; }
.veh-card-initials {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
color: var(--teal);
text-transform: uppercase;
}
.veh-card-silhouette {
display: block;
width: auto;
height: 92px;
margin: 4px auto 0;
opacity: .7;
transition: opacity .2s;
filter: drop-shadow(0 0 6px rgba(0,200,255,.25));
}
.veh-card:hover .veh-card-silhouette { opacity: .95; filter: drop-shadow(0 0 10px rgba(0,200,255,.45)); }
.veh-card--retired { opacity: .6; }
.veh-card--retired:hover { opacity: .85; }
/* Status / reusable badges */
.veh-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .07em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,.12);
color: var(--muted);
margin-right: 3px;
}
.veh-badge--active { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.06); }
.veh-badge--retired { color: var(--muted); }
.veh-badge--reusable { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.06); }
/* Reusable filter button accent */
.at-filter-btn--reusable.at-filter-btn--active {
color: #60a5fa;
border-color: rgba(96,165,250,.4);
background: rgba(96,165,250,.08);
}
/* Vehicle modal: top-aligned so tall profiles never bleed above the viewport */
#veh-modal { align-items: flex-start; }
#veh-modal .at-modal-body { width: min(900px, 100%); }
.veh-modal-banner {
height: 220px;
}
.veh-modal-banner img {
object-position: center top;
}
@media (max-width: 600px) {
.veh-card-img { height: 80px; }
.veh-modal-banner { height: 140px; }
}
/* ── Vehicle profile: launch history, booster fleet, crew alumni ────────────── */
.veh-section {
padding: 14px 20px;
border-top: 1px solid rgba(0,51,255,.1);
}
.veh-section-title {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: var(--teal); opacity: .8;
margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.veh-section-cta {
font-size: 10px; color: var(--teal); text-decoration: none;
margin-left: auto; opacity: .7;
}
.veh-section-cta:hover { opacity: 1; }
.veh-section-count {
font-size: 10px; color: var(--muted); opacity: .5; margin-left: 4px;
}
/* Launch history table (paginated) */
.veh-lh-tr { border-bottom: 1px solid rgba(255,255,255,.04); }
.veh-lh-tr:hover { background: rgba(0,51,255,.07); }
.veh-lh-tr--upcoming { border-left: 2px solid rgba(0,200,255,.3); }
.veh-lh-td { padding: 6px 10px; vertical-align: middle; }
.veh-lh-date { font-family: var(--font-mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.veh-lh-booster { font-family: var(--font-mono); font-size: 10px; color: var(--teal); white-space: nowrap; opacity: .85; }
.veh-lh-name { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-lh-name-link { font-family: var(--font-mono); font-size: 11px; color: var(--text); text-decoration: none; }
.veh-lh-name-link:hover { color: #60a5fa; text-decoration: underline; }
.veh-lh-loc { font-size: 10px; color: var(--muted); opacity: .55; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-lh-status { display: inline-block; font-family: var(--font-mono); font-size: 9px; padding: 2px 5px; border: 1px solid; white-space: nowrap; }
.veh-lh-status--ok { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.07); }
.veh-lh-status--fail { color: #ef4444; border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.07); }
.veh-lh-status--tbd { color: var(--muted); border-color: rgba(255,255,255,.1); }
.veh-lh-status--upcoming { color: var(--teal); border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.07); }
.veh-lh-loading { padding: 20px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
/* Booster table */
.veh-booster-table-wrap { overflow-x: auto; }
.veh-booster-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.veh-booster-table thead th {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
color: var(--muted); padding: 6px 10px; text-align: left; white-space: nowrap;
border-bottom: 1px solid rgba(0,200,255,.1);
}
.veh-booster-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); }
.veh-booster-table tbody tr:hover { background: rgba(0,200,255,.04); }
.veh-bs-serial { font-family: var(--font-mono); font-weight: 700; color: var(--teal); padding: 7px 10px; white-space: nowrap; }
.veh-bs-status { display: inline-block; font-family: var(--font-mono); font-size: 9px;
text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 2px; }
.veh-bs-status.veh-bs--active { color: #4ade80; background: rgba(74,222,128,.1); }
.veh-bs-status.veh-bs--lost { color: #f87171; background: rgba(248,113,113,.1); }
.veh-bs-status.veh-bs--other { color: var(--muted); background: rgba(255,255,255,.05); }
.veh-booster-table td { padding: 7px 10px; vertical-align: middle; }
.veh-bs-num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.veh-bs-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.veh-booster-pager { display: flex; align-items: center; gap: 12px; padding: 10px 0 2px;
font-family: var(--font-mono); font-size: 11px; }
.veh-booster-pager-btn { background: transparent; border: 1px solid rgba(0,200,255,.2);
color: var(--muted); font-family: var(--font-mono); font-size: 11px;
padding: 4px 10px; border-radius: 2px; cursor: pointer; }
.veh-booster-pager-btn:hover:not(:disabled) { border-color: rgba(0,200,255,.5); color: var(--text); }
.veh-booster-pager-btn:disabled { opacity: .3; cursor: default; }
.veh-booster-pager-info { color: var(--muted); }
/* ── Vehicles Command Center — new enhancements ────────────────────────────── */
/* Stats strip */
.veh-stats-strip { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.veh-stat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.veh-stat-chip { display: flex; flex-direction: column; align-items: center; gap: 2px;
background: rgba(0,200,255,.04); border: 1px solid rgba(0,200,255,.12); border-radius: 6px;
padding: 10px 16px; min-width: 100px; text-align: center; }
.veh-stat--active { border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.07); }
.veh-stat--reusable { border-color: rgba(61,224,192,.25); background: rgba(61,224,192,.05); }
.veh-stat-icon { font-size: 14px; color: var(--teal); }
.veh-stat-val { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.veh-stat-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
/* Hero cards */
.veh-hero-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.veh-hero-card { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px;
background: rgba(0,0,0,.35); border: 1px solid rgba(0,200,255,.12); border-radius: 6px;
padding: 10px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.veh-hero-card:hover{ border-color: rgba(0,200,255,.35); background: rgba(0,200,255,.06); }
.veh-hero-card-img { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.veh-hero-card-img--blank { width:52px; height:52px; background:rgba(0,200,255,.08); border-radius:4px; flex-shrink:0; }
.veh-hero-card-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.veh-hero-card-name { font-size: 14px; font-weight: 600; color: var(--text); }
.veh-hero-card-sub { font-family: var(--font-mono); font-size: 10px; color: var(--teal); }
/* Card enhancements */
.veh-card-launch-stats { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.veh-card-launches { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.veh-card-rate { font-family: var(--font-mono); font-size: 10px; font-weight: 600; }
.veh-card-rate--hi { color: #4ade80; }
.veh-card-rate--ok { color: #f59e0b; }
.veh-card-rate--lo { color: #f87171; }
.veh-card-dates { font-family: var(--font-mono); font-size: 9px; color: var(--muted); margin-top: 3px; }
.veh-card-spark { margin-top: 6px; }
.veh-sparkline { display: block; width: 72px; height: 22px; }
.veh-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.veh-cmp-btn { background: transparent; border: 1px solid rgba(0,200,255,.2); color: var(--muted);
font-size: 12px; padding: 2px 6px; border-radius: 2px; cursor: pointer; transition: all .15s; }
.veh-cmp-btn--on { border-color: var(--teal); color: var(--teal); background: rgba(0,200,255,.1); }
.veh-card--active { border-color: rgba(0,200,255,.45) !important; box-shadow: 0 0 0 1px rgba(0,200,255,.2); }
/* Filter meta row */
.veh-filter-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.veh-dropdown-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 8px 0 4px; }
.veh-sel-wrap { display: flex; align-items: center; gap: 6px; }
.veh-sel-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.veh-sel { font-family: var(--font-mono); font-size: 11px; background: rgba(0,0,0,.45); border: 1px solid rgba(0,200,255,.2); color: var(--text); padding: 4px 8px; border-radius: 3px; cursor: pointer; max-width: 220px; }
.veh-sel:focus { outline: 1px solid var(--teal); outline-offset: 2px; }
.veh-sel option { background: #080c1e; }
.veh-compare-toggle-btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
background: rgba(0,200,255,.06); border: 1px solid rgba(0,200,255,.25); color: var(--teal);
padding: 5px 12px; border-radius: 3px; cursor: pointer; transition: background .15s; }
.veh-compare-toggle-btn:hover { background: rgba(0,200,255,.12); }
/* Profile panel */
.veh-profile-panel { margin-bottom: 20px; background: rgba(4,8,24,.9);
border: 1px solid rgba(0,200,255,.18); border-radius: 8px; overflow: hidden;
animation: at-modal-in .2s ease; }
.veh-prof-loading { display: flex; align-items: center; gap: 12px; padding: 40px 24px;
font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.veh-profile { display: flex; flex-direction: column; }
/* Profile hero strip */
.veh-prof-hero { display: flex; align-items: stretch; gap: 20px; padding: 0 24px 0 0;
border-bottom: 1px solid rgba(0,200,255,.08); background: rgba(0,0,0,.3); flex-wrap: wrap; }
.veh-prof-hero-img { width: 120px; object-fit: cover; flex-shrink: 0; border-radius: 4px 0 0 0; }
.veh-prof-hero-body { flex: 1; min-width: 0; padding: 20px 0; }
.veh-prof-badges { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.veh-prof-name { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.veh-prof-mfr { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.veh-prof-mfr-link { color: #60a5fa; text-decoration: none; }
.veh-prof-mfr-link:hover { text-decoration: underline; }
.veh-prof-desc { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.6; margin: 0 0 8px;
max-height: 80px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.veh-prof-links { display: flex; gap: 10px; flex-wrap: wrap; }
.veh-prof-close { background: transparent; border: 1px solid rgba(0,200,255,.2); color: var(--muted);
font-size: 11px; padding: 5px 10px; border-radius: 3px; cursor: pointer; flex-shrink: 0; margin-left: auto; align-self: flex-start; }
/* Profile grid */
.veh-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(0,200,255,.06); }
.veh-prof-card { background: rgba(4,8,24,.95); padding: 16px 20px; }
.veh-prof-card--full{ grid-column: 1 / -1; }
.veh-prof-card-title{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
border-bottom: 1px solid rgba(0,200,255,.07); padding-bottom: 6px;
display: flex; align-items: center; gap: 8px; }
.veh-section-cta { margin-left: auto; font-size: 9px; color: var(--teal); text-decoration: none; }
.veh-section-cta:hover { text-decoration: underline; }
.veh-section-count { color: var(--muted); font-size: 9px; }
/* Flight record */
.veh-prof-stats-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.veh-prof-stats-row-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
color: var(--muted); text-transform: uppercase;
border-top: 1px solid rgba(0,200,255,.08); padding-top: 12px; margin-bottom: 8px; }
.veh-prof-stat { display: flex; flex-direction: column; gap: 2px; }
.veh-prof-stat-val { font-size: 22px; font-weight: 700; color: var(--text); }
.veh-prof-stat-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: .05em; }
.veh-prof-rate-bar-wrap { height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; margin: 8px 0; }
.veh-prof-rate-bar { height: 100%; border-radius: 2px; transition: width .4s ease; }
.veh-prof-dates { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* Cadence chart */
.veh-cadence { display: flex; flex-direction: column; gap: 6px; }
.veh-cadence-bars { display: flex; align-items: flex-end; gap: 4px; height: 100px; padding-top: 8px; overflow: hidden; }
.veh-cadence-col { display: flex; flex-direction: column; align-items: center; flex: 1; cursor: default; }
.veh-cadence-bar { width: 100%; background: rgba(248,113,113,.25); border-radius: 2px 2px 0 0; position: relative; }
.veh-cadence-success{ position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,200,255,.5); border-radius: 2px 2px 0 0; }
.veh-cadence-yr { font-family: var(--font-mono); font-size: 8px; color: var(--muted); margin-top: 3px; }
.veh-cadence-legend { display: flex; gap: 12px; }
.veh-cadence-leg { font-family: var(--font-mono); font-size: 9px; }
.veh-cadence-leg--s { color: rgba(0,200,255,.7); }
.veh-cadence-leg--f { color: rgba(248,113,113,.7); }
/* Vehicle DNA */
.veh-dna { display: flex; flex-direction: column; gap: 8px; }
.veh-dna-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; }
.veh-dna-row--unknown { opacity: .4; }
.veh-dna-label { width: 100px; color: var(--muted); flex-shrink: 0; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.veh-dna-track { flex: 1; height: 5px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.veh-dna-fill { height: 100%; background: linear-gradient(90deg, rgba(0,200,255,.6), rgba(0,200,255,.9)); border-radius: 3px; transition: width .4s ease; }
.veh-dna-fill--unknown { width: 100% !important; background: rgba(255,255,255,.1) !important; }
.veh-dna-val { width: 80px; text-align: right; color: var(--text); font-weight: 600; }
.veh-dna-val--unknown { color: var(--muted); font-weight: 400; font-style: italic; }
/* Pad locations */
.veh-prof-pads { display: flex; flex-wrap: wrap; gap: 6px; }
.veh-prof-pads-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
border-top: 1px solid rgba(0,200,255,.08); padding-top: 10px; }
.veh-prof-pad--link { text-decoration: none; color: inherit; cursor: pointer; }
.veh-prof-pad--link:hover { border-color: rgba(0,200,255,.6); color: var(--accent,#0cf); }
.veh-prof-pad { font-family: var(--font-mono); font-size: 10px; color: var(--muted);
background: rgba(0,200,255,.05); border: 1px solid rgba(0,200,255,.12); border-radius: 3px; padding: 3px 8px; }
/* Family variants */
.veh-prof-variants { display: flex; flex-wrap: wrap; gap: 10px; }
.veh-prof-variant { display: flex; flex-direction: column; align-items: center; gap: 6px;
cursor: pointer; padding: 8px; border-radius: 4px; border: 1px solid rgba(0,200,255,.1);
width: 90px; text-align: center; transition: border-color .15s, background .15s; }
.veh-prof-variant:hover { border-color: rgba(0,200,255,.35); background: rgba(0,200,255,.05); }
.veh-prof-variant img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.veh-prof-variant-blank { width: 60px; height: 60px; background: rgba(0,200,255,.06); border-radius: 4px; }
.veh-prof-variant-name { font-size: 10px; color: var(--text); font-weight: 600; line-height: 1.3; word-break: break-word; }
.veh-prof-variant-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.veh-prof-variant-launches { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
/* Compare drawer */
.veh-compare-drawer { margin-bottom: 20px; }
.veh-compare { background: rgba(4,8,24,.95); border: 1px solid rgba(0,200,255,.18); border-radius: 8px; overflow: hidden; }
.veh-compare-hdr { display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid rgba(0,200,255,.08); background: rgba(0,0,0,.3); }
.veh-compare-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); }
.veh-cmp-clear { margin-left: auto; font-family: var(--font-mono); font-size: 10px; background: transparent;
border: 1px solid rgba(248,113,113,.3); color: #f87171; padding: 4px 12px; border-radius: 3px; cursor: pointer; }
.veh-cmp-header { display: flex; border-bottom: 1px solid rgba(0,200,255,.08); overflow-x: auto; }
.veh-cmp-metric-col { width: 130px; flex-shrink: 0; padding: 12px 16px; }
.veh-cmp-col-hdr { flex: 1; min-width: 120px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; border-left: 1px solid rgba(0,200,255,.06); }
.veh-cmp-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.veh-cmp-col-name { font-size: 12px; font-weight: 600; color: var(--text); }
.veh-cmp-col-mfr { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.veh-cmp-row { display: flex; border-bottom: 1px solid rgba(0,200,255,.05); overflow-x: auto; }
.veh-cmp-row:last-child { border-bottom: none; }
.veh-cmp-metric { width: 130px; flex-shrink: 0; padding: 8px 16px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: .04em; display: flex; align-items: center; }
.veh-cmp-cell { flex: 1; min-width: 120px; padding: 8px 16px; display: flex; flex-direction: column; gap: 3px; justify-content: center; border-left: 1px solid rgba(0,200,255,.04); font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.veh-cmp-bar-wrap { height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; }
.veh-cmp-bar { height: 100%; background: rgba(0,200,255,.55); border-radius: 2px; }
/* Mobile */
@media (max-width: 700px) {
.veh-prof-grid { grid-template-columns: 1fr; }
.veh-hero-cards { flex-direction: column; }
.veh-stat-chip { min-width: 70px; padding: 8px 10px; }
.veh-stat-val { font-size: 18px; }
}
/* ── Vehicles: experience-mode elements ──────────────────────────────────────── */
.veh-hero-beginner-intro {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55);
line-height: 1.65; margin-top: 10px; max-width: 560px;
}
.veh-card-hint {
font-family: var(--font-mono); font-size: 9px; color: rgba(0,200,255,.4);
letter-spacing: .04em; margin-top: 4px; padding-top: 4px;
border-top: 1px solid rgba(0,200,255,.06);
}
.veh-card-spark-lbl {
font-family: var(--font-mono); font-size: 8px; color: var(--muted);
display: block; margin-top: 2px;
}
.veh-card-id {
font-family: var(--font-mono); font-size: 8.5px; color: rgba(255,255,255,.2);
padding-left: 4px;
}
.veh-card-id::before { content: '· '; }
.veh-prof-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 0 10px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.veh-prof-src-id {
font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.2);
}
.veh-prof-variant-id {
font-family: var(--font-mono); font-size: 8px; color: rgba(255,255,255,.2);
margin-top: 2px;
}
.veh-cmp-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.4);
line-height: 1.6; margin: 0; padding: 8px 20px 0;
}
.veh-lh-legend {
font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.4);
padding: 6px 0 8px; display: flex; flex-wrap: wrap; gap: 6px 16px;
}
/* ── Launches: experience-mode elements ──────────────────────────────────────── */
.lb-hero-beginner-intro {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55);
line-height: 1.65; margin-top: 10px; max-width: 560px;
}
.lb-card-hint {
font-family: var(--font-mono); font-size: 9px; color: rgba(0,200,255,.35);
letter-spacing: .04em; margin-top: 4px; padding-top: 4px;
border-top: 1px solid rgba(0,200,255,.06);
}
.lb-prof-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 0 10px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.dos-launch-src-id {
font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.2);
margin-left: auto; padding: 0 4px; align-self: center;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px;
}
.lb-cr-id {
font-family: var(--font-mono); font-size: 8.5px; color: rgba(255,255,255,.2);
}
/* ── ISS page: experience-mode elements ──────────────────────────────────────── */
.iss-hero-beginner-intro {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55);
line-height: 1.65; margin-top: 10px; max-width: 600px;
}
.iss-globe-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.4);
line-height: 1.6; margin: 8px 16px 4px; padding: 7px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.18);
border-radius: 0 3px 3px 0;
}
.iss-ham-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 20px 12px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.iss-pass-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 0 10px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.iss-modal-beginner-note {
font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.4);
line-height: 1.55;
}
/* ── Moon page: experience-mode elements ─────────────────────────────────────── */
.moon-hero-beginner-intro {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55);
line-height: 1.65; margin-top: 10px; max-width: 600px;
}
.moon-ap-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 20px 12px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.moon-cal-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 20px 12px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
/* ── Clear Sky page: experience-mode elements ────────────────────────────────── */
.csc-hero-beginner-intro {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55);
line-height: 1.65; margin-top: 10px; max-width: 600px;
}
.csc-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 20px 12px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.csc-beginner-only-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 8px 0 0; padding: 7px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.18);
border-radius: 0 3px 3px 0;
}
/* ── Programs page: experience-mode elements ─────────────────────────────────── */
.pr-hero-beginner-intro {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55);
line-height: 1.65; margin-top: 10px; max-width: 580px;
}
.pr-card-beginner-hint {
font-family: var(--font-mono); font-size: 9px; color: rgba(0,200,255,.4);
letter-spacing: .04em; margin-top: 5px; padding-top: 5px;
border-top: 1px solid rgba(0,200,255,.06); line-height: 1.5;
}
.pr-prof-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 0 10px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.pr-prof-src-id {
display: inline-block;
font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.2);
margin-top: 2px;
}
/* ── Astronauts page: experience-mode elements ───────────────────────────────── */
.at-hero-beginner-intro {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55);
line-height: 1.65; margin-top: 10px; max-width: 600px;
}
.at-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 0 14px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.at-prof-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 0 10px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.at-prof-src-id {
font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.2);
margin-left: auto; padding: 0 4px; align-self: center;
}
/* ── Light Pollution page: experience-mode elements ──────────────────────────── */
.lp-hero-beginner-intro {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55);
line-height: 1.65; margin-top: 10px; max-width: 600px;
}
.lp-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 0 12px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
/* ── In Space page: experience-mode elements ─────────────────────────────────── */
.is-hero-beginner-intro {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55);
line-height: 1.65; margin-top: 10px; max-width: 580px;
}
.is-station-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 0 12px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.is-crew-beginner-note {
font-family: var(--font-mono); font-size: 9.5px; color: rgba(255,255,255,.38);
line-height: 1.55; margin: 3px 0 0; padding: 0;
}
/* ── Spacecraft page: experience-mode elements ───────────────────────────────── */
.sc-hero-beginner-intro {
font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55);
line-height: 1.65; margin-top: 10px; max-width: 580px;
}
.sc-card-hint {
font-family: var(--font-mono); font-size: 9px; color: rgba(0,200,255,.4);
letter-spacing: .04em; margin-top: 4px; padding-top: 4px;
border-top: 1px solid rgba(0,200,255,.06);
}
.sc-card-id {
font-family: var(--font-mono); font-size: 8.5px; color: rgba(255,255,255,.2);
}
.sc-prof-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 0 10px; padding: 8px 10px;
background: rgba(0,200,255,.04); border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 3px 3px 0;
}
.sc-prof-src-id {
font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.2);
}
.sc-prof-meta-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.sc-cmp-beginner-note {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.4);
line-height: 1.6; margin: 0; padding: 8px 20px 0;
}
/* ── Launch profile: patch strip + payload card ──────────────────────────────── */
.lb-prof-banner { position: relative; }
.lb-prof-patch-row {
display: flex; gap: 8px; flex-wrap: wrap;
padding: 10px 16px;
background: rgba(0,51,255,.04);
border-bottom: 1px solid rgba(0,51,255,.1);
}
.lb-prof-banner .lb-prof-patch-row {
position: absolute; bottom: 8px; right: 10px;
background: transparent; padding: 0; border: none;
}
.lb-prof-banner--patch-only { background: rgba(0,51,255,.04); border-bottom: 1px solid rgba(0,51,255,.1); }
.lb-prof-payload-card {
padding: 8px 12px; background: rgba(0,51,255,.04);
border: 1px solid var(--blue-border);
display: flex; flex-direction: column; gap: 3px;
}
.lb-prof-payload-name { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; }
.lb-prof-payload-meta { font-size: 11px; color: var(--muted); opacity: .7; }
.lb-prof-payload-desc { font-size: 11px; color: var(--muted); opacity: .6; line-height: 1.5; margin-top: 2px; }
/* Satellite delivery summary on launch profile */
.lb-sat-summary {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.lb-sat-chip {
display: flex; flex-direction: column; align-items: center;
padding: 8px 14px; border: 1px solid var(--blue-border);
background: rgba(0,51,255,.04); min-width: 80px;
}
.lb-sat-chip-val { font-family: var(--font-mono); font-size: 18px; font-weight: 700; line-height: 1; }
.lb-sat-chip-key { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); opacity: .7; margin-top: 3px; }
.sat-type--payload .lb-sat-chip-val { color: #34d399; }
.sat-type--rocket .lb-sat-chip-val { color: #60a5fa; }
.sat-type--debris .lb-sat-chip-val { color: #f87171; }
.sat-type--total .lb-sat-chip-val { color: var(--teal); }
.sat-type--total { border-color: rgba(0,200,255,.2); background: rgba(0,200,255,.05); }
.lb-sat-chip--link { text-decoration: none; cursor: pointer; transition: filter .15s, border-color .15s; }
.lb-sat-chip--link:hover { filter: brightness(1.25); border-color: rgba(0,200,255,.4); }
.lb-sat-chip--btn {
border: none; cursor: pointer;
transition: filter .15s, border-color .15s, outline .1s;
outline: 2px solid transparent;
}
.lb-sat-chip--btn:hover { filter: brightness(1.2); }
.lb-sat-chip--btn.lb-sat-chip--active {
outline: 2px solid rgba(0,200,255,.5);
filter: brightness(1.3);
}
/* Satellite manifest */
.dos-sat-manifest {
margin-top: 10px;
border: 1px solid rgba(0,200,255,.1);
border-radius: 6px;
overflow: hidden;
animation: at-modal-in .18s ease;
}
.dos-sat-manifest-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px;
background: rgba(0,200,255,.05);
border-bottom: 1px solid rgba(0,200,255,.1);
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.dos-sat-count { color: var(--muted); font-size: 10px; }
.dos-sat-row {
display: grid;
grid-template-columns: 60px 1fr 95px 55px 65px;
align-items: center; gap: 8px;
padding: 7px 14px;
border-bottom: 1px solid rgba(0,200,255,.04);
text-decoration: none; color: var(--text);
transition: background .1s;
font-family: var(--font-mono); font-size: 11px;
}
.dos-sat-row:last-of-type { border-bottom: none; }
.dos-sat-row:hover { background: rgba(0,200,255,.06); }
.dos-sat-norad { color: var(--teal); font-size: 10px; }
.dos-sat-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dos-sat-intl { color: var(--muted); font-size: 10px; }
.dos-sat-orbit { color: var(--muted); font-size: 10px; }
.dos-sat-status { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.dos-sat-status--active { color: #34d399; }
.dos-sat-status--inactive { color: #6b7280; }
.dos-sat-status--dead { color: #f87171; }
.dos-sat-more {
padding: 8px 14px;
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
border-top: 1px solid rgba(0,200,255,.06);
background: rgba(0,0,0,.2);
}
.dos-sat-more a { color: var(--teal); text-decoration: none; }
.dos-sat-more a:hover { text-decoration: underline; }
.dos-sat-loading, .dos-sat-empty {
padding: 20px 14px;
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
display: flex; align-items: center; gap: 8px;
}
@media (max-width: 600px) {
.dos-sat-row { grid-template-columns: 55px 1fr 55px; }
.dos-sat-intl, .dos-sat-orbit { display: none; }
}
/* Spacecraft card on launch profile */
.lb-prof-sc-card {
display: flex; align-items: flex-start; gap: 12px;
padding: 8px; background: rgba(0,51,255,.04);
border: 1px solid var(--blue-border);
}
.lb-prof-sc-img {
width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; border-radius: 2px;
}
.lb-prof-sc-placeholder {
width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
background: rgba(0,51,255,.1); font-size: 20px; color: var(--teal); opacity: .4; flex-shrink: 0;
}
.lb-prof-sc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lb-prof-sc-name { font-family: var(--font-mono); font-size: 13px; color: var(--text); font-weight: 600; }
.lb-prof-sc-meta { font-size: 11px; color: var(--muted); opacity: .7; }
.lb-prof-sc-dest { font-size: 10px; color: var(--teal); opacity: .75; }
/* ── Astronaut profile: program chip links ───────────────────────────────────── */
.at-prof-prog-chip {
display: inline-block; font-size: 11px; color: var(--teal);
text-decoration: none; margin-right: 4px;
}
.at-prof-prog-chip:hover { text-decoration: underline; }
/* ── Astronaut EVA log in connected section ─────────────────────────────────── */
.at-prof-conn-card--wide { grid-column: 1 / -1; }
.at-prof-eva-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.at-prof-eva-row {
display: flex; align-items: center; gap: 8px;
padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.at-prof-eva-role {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
color: #60a5fa; background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.25);
padding: 1px 5px; flex-shrink: 0;
}
.at-prof-eva-name { font-size: 11px; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-prof-eva-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); opacity: .6; flex-shrink: 0; }
/* ══════════════════════════════════════════════════════════════════════════════
EVA Operations Console — eva-* prefix
══════════════════════════════════════════════════════════════════════════════ */
/* Canvas hero */
#eva-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; z-index: 0; }
/* Stat strip */
.eva-stat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.4rem 0 .8rem; }
.eva-stat-card {
flex: 1 1 120px; display: flex; flex-direction: column; gap: 4px;
background: rgba(96,165,250,.07); border: 1px solid rgba(96,165,250,.2);
padding: 12px 14px; min-width: 100px;
}
.eva-stat-val { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: #60a5fa; line-height: 1; }
.eva-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.eva-freshness-badge { font-size: 10px; color: var(--muted); opacity: .7; font-family: var(--font-mono); margin-top: .25rem; }
.eva-freshness-badge.stale { color: #f59e0b; opacity: 1; }
/* Airlock strip */
.eva-airlock-strip {
position: sticky; top: 0; z-index: 40; width: 100%;
background: rgba(8,12,24,.88); border-bottom: 1px solid rgba(96,165,250,.15);
backdrop-filter: blur(10px); padding: 7px 0;
}
.eva-airlock-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eva-airlock-icon { font-size: 14px; color: rgba(96,165,250,.5); flex-shrink: 0; }
.eva-strip-count { font-family: var(--font-mono); font-size: 12px; color: #60a5fa; flex-shrink: 0; }
.eva-active-filters{ display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }
.eva-filter-chip { background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.25); padding: 2px 8px; font-size: 10px; color: #60a5fa; font-family: var(--font-mono); border-radius: 2px; }
.eva-strip-reset { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #f87171; padding: 3px 9px; font-size: 11px; cursor: pointer; }
.eva-strip-reset:hover { background: rgba(239,68,68,.2); }
.eva-airlock-spacer{ flex: 1; }
.eva-strip-sort { font-family: var(--font-mono); font-size: 10px; color: var(--muted); opacity: .6; flex-shrink: 0; }
/* Filter panel */
.eva-filter-panel { margin-bottom: 1rem; }
.eva-filter-toggle {
display: none; width: 100%; background: rgba(96,165,250,.06); border: 1px solid rgba(96,165,250,.18);
color: var(--text); padding: 9px 14px; font-size: 12px; font-family: var(--font-mono);
cursor: pointer; text-align: left; justify-content: space-between; align-items: center;
}
.eva-filter-toggle:hover { background: rgba(96,165,250,.12); }
.eva-filter-body { padding: 0; }
.eva-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.eva-filter-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; }
.eva-filter-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.eva-search, .eva-select {
background: var(--panel); border: 1px solid var(--blue-border); color: var(--text);
padding: 7px 10px; font-size: 12px; font-family: var(--font-mono); width: 100%;
}
.eva-search:focus, .eva-select:focus { border-color: #60a5fa; outline: none; box-shadow: 0 0 0 2px rgba(96,165,250,.2); }
/* View tabs */
.eva-view-tabs { display: flex; gap: 6px; margin: 1rem 0; flex-wrap: wrap; border-bottom: 1px solid rgba(96,165,250,.15); padding-bottom: 0; }
.eva-tab {
background: transparent; border: none; border-bottom: 2px solid transparent;
color: var(--muted); padding: 8px 14px; font-size: 12px; font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
transition: color .15s, border-color .15s; margin-bottom: -1px;
}
.eva-tab:hover { color: #60a5fa; }
.eva-tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }
/* Views */
.eva-view { margin-top: 1rem; }
/* Operations board grid */
.eva-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.eva-card {
background: var(--panel); border: 1px solid var(--blue-border);
display: flex; flex-direction: column; gap: 0;
transition: border-color .18s, box-shadow .18s; cursor: default;
}
.eva-card:hover { border-color: rgba(96,165,250,.5); box-shadow: 0 0 14px rgba(96,165,250,.15); }
.eva-card-hdr { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid rgba(96,165,250,.1); }
.eva-card-name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; }
.eva-card-badges{ display: flex; gap: 4px; flex-wrap: wrap; }
.eva-card-body { padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.eva-card-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.eva-card-date { font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.eva-card-exp { font-size: 10px; color: var(--muted); opacity: .7; }
.eva-card-loc { font-size: 10px; color: var(--muted); opacity: .6; }
.eva-card-crew { padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 5px; border-top: 1px solid rgba(96,165,250,.08); }
.eva-card-view {
margin: 0 14px 12px; padding: 7px; background: rgba(96,165,250,.07);
border: 1px solid rgba(96,165,250,.2); color: #60a5fa; font-size: 11px;
font-family: var(--font-mono); cursor: pointer; transition: background .15s;
}
.eva-card-view:hover { background: rgba(96,165,250,.15); }
/* Duration ring */
.eva-dur-ring { width: 70px; height: 70px; flex-shrink: 0; }
.eva-ring-bg { fill: none; stroke: rgba(96,165,250,.12); stroke-width: 7; }
.eva-ring-fg { fill: none; stroke: #60a5fa; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.eva-ring-lbl { font-family: var(--font-mono); font-size: 9px; fill: #60a5fa; }
/* Crew chips */
.eva-crew-chip {
display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
background: rgba(96,165,250,.07); border: 1px solid rgba(96,165,250,.18);
padding: 2px 6px 2px 2px; font-size: 10px; color: var(--text); transition: background .15s;
}
.eva-crew-chip:hover { background: rgba(96,165,250,.16); border-color: #60a5fa; }
.eva-crew-thumb { width: 20px; height: 20px; object-fit: cover; flex-shrink: 0; }
.eva-crew-init { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: rgba(96,165,250,.15); font-size: 8px; font-family: var(--font-mono); color: #60a5fa; flex-shrink: 0; }
.eva-crew-chip-name { font-family: var(--font-mono); font-size: 9px; }
.eva-crew-role { font-size: 8px; color: #60a5fa; font-family: var(--font-mono); letter-spacing: .05em; border-left: 1px solid rgba(96,165,250,.25); padding-left: 4px; }
.eva-no-crew { font-size: 10px; color: var(--muted); opacity: .5; }
/* Station / program badges */
.eva-station-badge { font-size: 9px; font-family: var(--font-mono); padding: 2px 6px; letter-spacing: .04em; }
.eva-station-badge-wrap { text-decoration: none; }
.eva-station-badge-wrap:hover .eva-station-badge { opacity: .8; }
.eva-stn-iss { background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.3); color: #60a5fa; }
.eva-stn-mir { background: rgba(251,146,60,.08); border: 1px solid rgba(251,146,60,.25); color: #fb923c; }
.eva-stn-salyut { background: rgba(167,243,208,.08); border: 1px solid rgba(167,243,208,.2); color: #6ee7b7; }
.eva-stn-other { background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.2); color: #94a3b8; }
.eva-prog-badge { font-size: 9px; font-family: var(--font-mono); padding: 2px 6px; background: rgba(167,243,208,.06); border: 1px solid rgba(167,243,208,.15); color: #6ee7b7; }
/* Load more */
.eva-load-more-wrap { text-align: center; margin: 1.5rem 0; }
.eva-load-more { background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.25); color: #60a5fa; padding: 9px 28px; font-size: 12px; font-family: var(--font-mono); cursor: pointer; }
.eva-load-more:hover { background: rgba(96,165,250,.16); }
/* Empty / error states */
.eva-empty-state { text-align: center; padding: 2rem; color: var(--muted); opacity: .6; }
.eva-empty-icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.eva-empty { color: var(--muted); opacity: .6; font-size: 12px; text-align: center; padding: 1rem; }
.eva-error { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem; color: #f87171; opacity: .8; }
/* ── Timeline ─────────────────────────────────────────────────────────────── */
.eva-tl-track { display: flex; flex-direction: column; gap: 2rem; }
.eva-tl-era { display: flex; gap: 1.5rem; }
.eva-tl-era-lbl { width: 50px; flex-shrink: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: rgba(96,165,250,.6); text-align: right; padding-top: 6px; }
.eva-tl-nodes { flex: 1; display: flex; flex-direction: column; gap: 8px; border-left: 2px solid rgba(96,165,250,.15); padding-left: 1.2rem; position: relative; }
.eva-tl-node { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.eva-tl-node:hover .eva-tl-card { border-color: rgba(96,165,250,.5); box-shadow: 0 0 10px rgba(96,165,250,.15); }
.eva-tl-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(96,165,250,.4); border: 2px solid rgba(96,165,250,.6); flex-shrink: 0; margin-top: 6px; margin-left: -1.55rem; transition: background .15s; }
.eva-tl-node:hover .eva-tl-dot { background: #60a5fa; }
.eva-tl-card { flex: 1; background: var(--panel); border: 1px solid rgba(96,165,250,.12); padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; transition: border-color .15s, box-shadow .15s; }
.eva-tl-card-hdr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eva-tl-name { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text); flex: 1; }
.eva-tl-meta { display: flex; gap: 10px; font-size: 10px; color: var(--muted); opacity: .7; }
.eva-tl-crew { display: flex; flex-wrap: wrap; gap: 4px; }
.eva-tl-loading { color: var(--muted); opacity: .6; padding: 2rem; text-align: center; }
/* ── Analytics ────────────────────────────────────────────────────────────── */
.eva-analytics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.eva-ac { background: var(--panel); border: 1px solid var(--blue-border); padding: 16px 18px; }
.eva-ac--wide { grid-column: 1 / -1; }
.eva-ac-title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #60a5fa; margin: 0 0 .8rem; }
.eva-bar-chart { display: flex; flex-direction: column; gap: 7px; }
.eva-bar-row { display: flex; align-items: center; gap: 8px; }
.eva-bar-row--astro { gap: 7px; }
.eva-bar-lbl { font-size: 11px; color: var(--text); width: 150px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.eva-bar-lbl:hover { color: #60a5fa; }
.eva-bar-track { flex: 1; height: 6px; background: rgba(96,165,250,.1); }
.eva-bar-fill { height: 100%; background: #60a5fa; transition: width .4s ease; }
.eva-bar-cnt { font-family: var(--font-mono); font-size: 10px; color: var(--muted); width: 55px; text-align: right; flex-shrink: 0; }
.eva-bar-agency { font-size: 9px; color: var(--muted); opacity: .6; width: 36px; flex-shrink: 0; font-family: var(--font-mono); }
.eva-a-thumb { width: 24px; height: 24px; object-fit: cover; flex-shrink: 0; border-radius: 50%; }
.eva-a-init { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: rgba(96,165,250,.15); display: flex; align-items: center; justify-content: center; font-size: 8px; color: #60a5fa; font-family: var(--font-mono); }
.eva-bar-chart--astro .eva-bar-lbl { width: 130px; }
/* ── Records wall ─────────────────────────────────────────────────────────── */
.eva-records-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.eva-rc { background: var(--panel); border: 1px solid rgba(96,165,250,.15); padding: 16px; display: flex; flex-direction: column; gap: 5px; }
.eva-rc-icon { font-size: 1.6rem; }
.eva-rc-title { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); }
.eva-rc-val { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: #60a5fa; }
.eva-rc-val-link { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: #60a5fa; text-decoration: none; }
.eva-rc-val-link:hover { text-decoration: underline; }
.eva-rc-sub { font-size: 10px; color: var(--muted); opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Profile panel ────────────────────────────────────────────────────────── */
.eva-profile { background: var(--panel); border-top: 1px solid rgba(96,165,250,.25); margin-top: 2rem; }
.eva-profile-inner { padding: 1.5rem 0 2rem; }
.eva-profile-loading{ color: var(--muted); opacity: .6; padding: 2rem; text-align: center; font-size: 13px; }
.eva-p-banner { display: flex; gap: 1.5rem; align-items: flex-start; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(96,165,250,.12); margin-bottom: 1.2rem; flex-wrap: wrap; }
.eva-p-banner-main { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.eva-p-title { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 0; }
.eva-p-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.eva-p-ring { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.eva-p-ring .eva-dur-ring { width: 90px; height: 90px; }
.eva-p-ring-lbl { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.eva-p-close { background: transparent; border: 1px solid rgba(148,163,184,.25); color: var(--muted); width: 32px; height: 32px; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.eva-p-close:hover { border-color: #f87171; color: #f87171; }
.eva-p-kv { display: flex; gap: 0; flex-wrap: wrap; margin-bottom: 1.2rem; border: 1px solid rgba(96,165,250,.12); }
.eva-pkv { flex: 1 1 160px; padding: 8px 14px; border-right: 1px solid rgba(96,165,250,.1); display: flex; flex-direction: column; gap: 2px; }
.eva-pkv:last-child { border-right: none; }
.eva-pkv-l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.eva-pkv-v { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.eva-ps { margin-bottom: 1.2rem; }
.eva-ps-title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: rgba(96,165,250,.7); margin: 0 0 .6rem; }
/* Crew cards in profile */
.eva-pc-list { display: flex; gap: 10px; flex-wrap: wrap; }
.eva-pc-card { display: flex; align-items: center; gap: 10px; background: rgba(96,165,250,.05); border: 1px solid rgba(96,165,250,.15); padding: 10px 14px; text-decoration: none; flex: 1 1 200px; transition: border-color .15s; }
.eva-pc-card:hover { border-color: rgba(96,165,250,.4); }
.eva-pc-img { width: 48px; height: 48px; object-fit: cover; flex-shrink: 0; }
.eva-pc-init { width: 48px; height: 48px; flex-shrink: 0; background: rgba(96,165,250,.12); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 14px; color: #60a5fa; }
.eva-pc-info { display: flex; flex-direction: column; gap: 2px; }
.eva-pc-role { font-size: 10px; color: #60a5fa; font-family: var(--font-mono); font-weight: 700; }
.eva-pc-name { font-size: 13px; color: var(--text); font-weight: 600; }
.eva-pc-agency { font-size: 10px; color: var(--muted); opacity: .7; }
.eva-pc-evatime { font-size: 10px; color: #60a5fa; font-family: var(--font-mono); opacity: .8; }
/* Profile connected cards */
.eva-ps-conn { display: flex; flex-direction: column; gap: 3px; background: rgba(96,165,250,.05); border: 1px solid rgba(96,165,250,.15); padding: 10px 14px; text-decoration: none; max-width: 360px; transition: border-color .15s; }
.eva-ps-conn:hover { border-color: rgba(96,165,250,.4); }
.eva-ps-conn-name { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; }
.eva-ps-conn-meta { font-size: 10px; color: var(--muted); opacity: .7; }
.eva-ps-progs { display: flex; gap: 6px; flex-wrap: wrap; }
.eva-ps-prog { background: rgba(167,243,208,.07); border: 1px solid rgba(167,243,208,.2); color: #6ee7b7; padding: 5px 12px; font-size: 11px; text-decoration: none; font-family: var(--font-mono); }
.eva-ps-prog:hover { background: rgba(167,243,208,.14); }
.eva-ps-webcast { display: inline-flex; align-items: center; gap: 6px; background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.25); color: #60a5fa; padding: 8px 16px; font-size: 12px; text-decoration: none; }
.eva-ps-webcast:hover { background: rgba(96,165,250,.15); }
/* Related EVAs */
.eva-related { display: flex; flex-direction: column; gap: 4px; }
.eva-rel-btn { background: rgba(96,165,250,.05); border: 1px solid rgba(96,165,250,.12); padding: 7px 12px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s; }
.eva-rel-btn:hover { border-color: rgba(96,165,250,.35); }
.eva-rel-name { font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.eva-rel-meta { font-size: 10px; color: var(--muted); opacity: .65; }
/* Expert rows */
.eva-exp-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(96,165,250,.07); align-items: baseline; }
.eva-exp-lbl { font-size: 10px; color: var(--muted); width: 80px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .05em; }
.eva-exp-val { font-family: var(--font-mono); font-size: 10px; color: var(--text); word-break: break-all; }
/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.eva-stat-strip { gap: 6px; }
.eva-stat-card { flex: 1 1 100px; padding: 9px 10px; }
.eva-stat-val { font-size: 1.1rem; }
.eva-filter-toggle { display: flex; }
.eva-filter-body { display: none; padding-top: 10px; }
.eva-filter-body.open { display: block; }
.eva-filter-row { flex-direction: column; gap: 8px; }
.eva-filter-field { flex: unset; }
.eva-grid { grid-template-columns: 1fr; }
.eva-analytics-grid{ grid-template-columns: 1fr; }
.eva-ac--wide { grid-column: auto; }
.eva-records-wall { grid-template-columns: repeat(2, 1fr); }
.eva-tl-era { gap: .8rem; }
.eva-tl-era-lbl { width: 36px; font-size: 11px; }
.eva-bar-lbl { width: 90px; font-size: 10px; }
.eva-bar-chart--astro .eva-bar-lbl { width: 80px; }
.eva-p-ring .eva-dur-ring { width: 70px; height: 70px; }
.eva-pc-list { flex-direction: column; }
}
/* ── Expeditions page ────────────────────────────────────────────────────────── */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.exp-card {
background: var(--panel); border: 1px solid var(--blue-border);
border-top: 2px solid var(--blue-border); padding: 14px 16px;
display: flex; flex-direction: column; gap: 5px;
transition: border-color .2s;
}
.exp-card--active { border-top-color: #34d399; }
.exp-card:hover { border-color: var(--teal); }
.exp-card-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.exp-card-name { font-family: var(--font-mono); font-size: 13px; color: var(--text); font-weight: 600; }
.exp-active-badge {
font-family: var(--font-mono); font-size: 9px; color: #34d399;
border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.08); padding: 2px 6px;
}
.exp-card-meta { font-size: 11px; color: var(--muted); opacity: .7; }
.exp-card-station { font-family: var(--font-mono); font-size: 10px; color: var(--teal); opacity: .8; margin-top: 2px; }
/* ── Placeholder "coming soon" panels ───────────────────────────────────────── */
.ph-coming-soon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 80px 24px;
text-align: center;
}
.ph-icon {
font-size: 48px;
line-height: 1;
opacity: .35;
}
.ph-heading {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text);
}
.ph-desc {
font-size: 14px;
color: var(--muted);
max-width: 480px;
line-height: 1.6;
margin: 0;
}
.ph-badge {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--teal);
border: 1px solid rgba(0,200,255,.3);
background: rgba(0,200,255,.06);
border-radius: 3px;
padding: 4px 12px;
}
/* ── Space Stations ──────────────────────────────────────────────────────────── */
.ss-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 4px;
}
.ss-card {
display: flex; gap: 0; background: var(--panel-bg, rgba(255,255,255,.03));
border: 1px solid rgba(255,255,255,.07); border-radius: 6px; overflow: hidden;
cursor: pointer; transition: border-color .15s, transform .1s;
}
.ss-card:hover { border-color: rgba(0,200,255,.3); transform: translateY(-2px); }
.ss-card:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.ss-card--inactive { opacity: .6; }
.ss-card--inactive:hover { opacity: .85; }
.ss-card-img { flex-shrink: 0; width: 140px; overflow: hidden; }
.ss-card-img img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.ss-card:hover .ss-card-img img { opacity: 1; }
.ss-card-body { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ss-card-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-card-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.ss-card-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ss-status {
display: inline-block; font-family: var(--font-mono); font-size: 10px;
letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px;
border-radius: 3px; border: 1px solid rgba(255,255,255,.15); color: var(--muted);
}
.ss-status--active { color: #34d399; border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.07); }
.ss-status--deorbited { color: var(--muted); }
.ss-status--decom { color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.05); }
/* ── Launch Mission Control ──────────────────────────────────────────────────── */
/* Hero command stats */
.lb-cmd-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 18px;
border-top: 1px solid rgba(0,51,255,.2); }
.lb-cmd-stat { display: flex; flex-direction: column; align-items: center; gap: 3px;
flex: 1; min-width: 80px; max-width: 120px;
background: rgba(255,255,255,.03); border: 1px solid rgba(0,51,255,.15);
border-radius: 3px; padding: 10px 8px; }
.lb-cmd-stat--skel { min-height: 58px; animation: at-skel-pulse 1.4s ease-in-out infinite; }
.lb-cmd-stat--ok { border-color: rgba(52,211,153,.2); }
.lb-cmd-icon { font-size: 12px; color: rgba(0,200,255,.4); }
.lb-cmd-val { font-family: var(--font-orb); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1; }
.lb-cmd-val--sm { font-size: 11px; font-family: var(--font-mono); text-align: center; line-height: 1.4; }
.lb-cmd-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: center; }
.lb-cmd-stat--ok .lb-cmd-val { color: #34d399; }
/* Next launch countdown card */
.lb-next-wrap { margin-top: 18px; }
.lb-next-loading { color: var(--muted); font-family: var(--font-mono); font-size: 12px;
display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.lb-next-card {
display: flex; align-items: stretch; gap: 0;
background: rgba(255,255,255,.025);
border: 1px solid var(--next-color, rgba(0,200,255,.3));
border-left: 3px solid var(--next-color, rgba(0,200,255,.5));
border-radius: 4px; overflow: hidden;
}
.lb-next-left { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.lb-next-right { flex-shrink: 0; padding: 14px 18px; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 8px;
border-left: 1px solid rgba(0,51,255,.15); min-width: 130px; background: rgba(0,0,0,.2); }
.lb-next-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--teal); animation: at-live-blink 2s infinite; }
.lb-next-status{ display: flex; align-items: center; gap: 8px; }
.lb-next-orbit { font-family: var(--font-mono); font-size: 10px; color: var(--muted);
border: 1px solid rgba(255,255,255,.12); padding: 1px 7px; border-radius: 2px; }
.lb-next-name { font-family: var(--font-orb); font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.2; }
.lb-next-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-next-chip { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border-radius: 2px;
background: rgba(255,255,255,.04); border: 1px solid rgba(0,51,255,.2); color: var(--muted); }
.lb-next-link { color: var(--teal); border-color: rgba(0,200,255,.25); text-decoration: none; transition: background .15s; }
.lb-next-link:hover { background: rgba(0,200,255,.08); }
.lb-next-net { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.lb-countdown { font-family: var(--font-orb); font-size: 22px; font-weight: 700;
color: var(--next-color, var(--teal)); letter-spacing: .04em; text-align: center; }
.lb-next-open { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
background: rgba(0,200,255,.08); border: 1px solid rgba(0,200,255,.3);
color: var(--teal); padding: 6px 14px; border-radius: 2px; cursor: pointer; transition: background .18s;
white-space: nowrap; }
.lb-next-open:hover { background: rgba(0,200,255,.15); }
.lb-next-live { font-family: var(--font-mono); font-size: 10px; color: #f87171; text-decoration: none;
border: 1px solid rgba(248,113,113,.3); padding: 4px 10px; border-radius: 2px;
animation: at-live-blink 2s infinite; }
/* Enhanced launch cards */
.lb-card { border-left: 2px solid var(--status-color, rgba(0,51,255,.2)); }
.lb-card:hover { border-color: var(--status-color, rgba(0,200,255,.4)); }
.lb-card-badges { display: flex; gap: 4px; margin-left: auto; }
.lb-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
padding: 1px 6px; border-radius: 2px; border: 1px solid; }
.lb-badge--live { color: var(--teal); border-color: rgba(0,200,255,.3); animation: at-live-blink 2s infinite; }
.lb-badge--prog { color: var(--muted); border-color: rgba(255,255,255,.12); }
.lb-card-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.lb-chip { font-family: var(--font-mono); font-size: 10px; padding: 1px 7px; border-radius: 2px;
border: 1px solid rgba(0,51,255,.15); color: var(--muted); }
.lb-chip--loc { color: rgba(0,200,255,.6); border-color: rgba(0,200,255,.2); }
.lb-chip--orbit { color: rgba(167,139,250,.7); border-color: rgba(167,139,250,.2); }
/* Profile panel */
.lb-profile-wrap { margin-top: 24px; margin-bottom: 40px; animation: at-prof-in .25s ease; }
.lb-profile-wrap[hidden] { display: none !important; }
.lb-prof-loading { display: flex; align-items: center; gap: 10px; padding: 60px 0;
color: var(--muted); font-family: var(--font-mono); font-size: 12px; justify-content: center; }
.lb-profile { background: rgba(255,255,255,.02); border: 1px solid rgba(0,51,255,.2);
border-top: 3px solid var(--next-color, rgba(0,200,255,.5)); border-radius: 4px; overflow: hidden; }
.lb-prof-banner { height: 150px; overflow: hidden; }
.lb-prof-banner img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.lb-prof-strip { display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(0,51,255,.15);
background: rgba(0,0,20,.3); }
.lb-prof-strip-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
border-right: 1px solid rgba(0,51,255,.1); min-width: 90px; }
.lb-prof-strip-item:last-child { border-right: none; }
.lb-prof-strip-key { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); }
.lb-prof-strip-val { font-family: var(--font-mono); font-size: 11px; color: var(--text); font-weight: 600; }
.lb-prof-main { padding: 18px 22px; }
.lb-prof-chips { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.lb-prof-name { font-family: var(--font-orb); font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.lb-prof-sub { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.lb-prof-countdown { font-family: var(--font-orb); font-size: 24px; font-weight: 700;
color: var(--next-color, var(--teal)); margin-top: 4px; }
.lb-prof-sections { border-top: 1px solid rgba(0,51,255,.1); }
.lb-prof-section { padding: 14px 22px; border-bottom: 1px solid rgba(0,51,255,.08); }
.lb-prof-section:last-child { border-bottom: none; }
/* Crew grid */
.lb-prof-crew-grid {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
}
.lb-crew-card {
display: flex; flex-direction: column; align-items: center; gap: 5px;
width: 80px; text-decoration: none;
padding: 8px 6px;
background: rgba(0,51,255,.06);
border: 1px solid var(--blue-border);
transition: background .15s, border-color .15s;
}
.lb-crew-card:hover { background: rgba(0,200,255,.1); border-color: var(--teal); }
.lb-crew-photo-wrap { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.lb-crew-photo { width: 100%; height: 100%; object-fit: cover; }
.lb-crew-initials {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
background: rgba(0,51,255,.2); font-family: var(--font-mono); font-size: 14px;
font-weight: 700; color: var(--teal);
}
.lb-crew-name {
font-family: var(--font-mono); font-size: 9px; text-align: center;
color: var(--text); line-height: 1.3;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lb-crew-meta {
font-family: var(--font-mono); font-size: 9px; color: var(--muted);
opacity: .6; text-align: center;
}
.lb-prof-section-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
display: flex; align-items: center; gap: 10px; }
.lb-prof-bio { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.65); }
.lb-prof-bio--warn { color: #fbbf24; margin-top: 8px; font-size: 12px; font-family: var(--font-mono); }
.lb-prof-bio--fail { color: #f87171; margin-top: 8px; font-size: 12px; font-family: var(--font-mono); }
.lb-prof-nodata { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.lb-prof-site-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px;
background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.15); border-radius: 3px;
max-width: 360px; }
.lb-prof-site-loc { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--text); }
.lb-prof-site-pad { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.lb-prof-site-country { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.lb-prof-site-map { font-family: var(--font-mono); font-size: 10px; color: var(--teal); text-decoration: none; }
.lb-prof-agency-card { display: flex; align-items: center; gap: 14px; padding: 10px 14px;
background: rgba(255,255,255,.025); border: 1px solid rgba(0,51,255,.15); border-radius: 3px;
max-width: 360px; }
.lb-prof-agency-abbrev { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--teal);
min-width: 50px; }
.lb-prof-agency-name { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.lb-prof-agency-country{ font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.lb-prof-vehicle-card { padding: 10px 14px; background: rgba(255,255,255,.025);
border: 1px solid rgba(0,51,255,.15); border-radius: 3px; max-width: 360px; }
.lb-prof-vehicle-name { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--text); }
.lb-prof-vehicle-family{ font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.lb-prof-prog-card { padding: 10px 14px; background: rgba(255,255,255,.025);
border: 1px solid rgba(0,51,255,.15); border-radius: 3px; max-width: 360px; }
.lb-prof-prog-name { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); }
.lb-prof-link { font-family: var(--font-mono); font-size: 11px; color: var(--teal);
border: 1px solid rgba(0,200,255,.25); padding: 4px 12px; border-radius: 2px;
text-decoration: none; transition: background .18s; display: inline-block; }
.lb-prof-link:hover { background: rgba(0,200,255,.08); }
.lb-prof-link--live { color: var(--teal); animation: at-live-blink 2s infinite; }
/* Mobile */
@media (max-width: 700px) {
.lb-next-card { flex-direction: column; }
.lb-next-right { border-left: none; border-top: 1px solid rgba(0,51,255,.15); flex-direction: row; min-width: 0; }
.lb-cmd-stats { gap: 6px; }
.lb-cmd-stat { min-width: 65px; padding: 8px 6px; }
.lb-cmd-val { font-size: 17px; }
.lb-prof-strip { display: grid; grid-template-columns: repeat(3,1fr); }
.lb-prof-strip-item { border-right: 1px solid rgba(0,51,255,.08); }
}
/* ── Launch Browser ──────────────────────────────────────────────────────────── */
.lb-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.lb-card {
display: flex; gap: 0; background: var(--panel-bg, rgba(255,255,255,.03));
border: 1px solid rgba(255,255,255,.07); border-radius: 6px; overflow: hidden;
cursor: pointer; transition: border-color .15s;
}
.lb-card:hover { border-color: rgba(0,200,255,.25); }
.lb-card:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.lb-card-img {
flex-shrink: 0; width: 100px; overflow: hidden; background: rgba(255,255,255,.03);
display: flex; align-items: center; justify-content: center;
}
.lb-card-img img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.lb-card-initials {
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: .1em; color: var(--teal); padding: 6px; text-align: center;
}
.lb-card-body { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lb-card-top { display: flex; align-items: center; gap: 8px; }
.lb-card-net { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: auto; }
.lb-card-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-card-pad { font-size: 11px; color: var(--muted); }
.lb-status {
display: inline-block; font-family: var(--font-mono); font-size: 10px;
letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px;
border-radius: 3px; border: 1px solid rgba(255,255,255,.15); color: var(--muted);
}
.lb-status--go { color: #34d399; border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.07); }
.lb-status--success { color: var(--teal); border-color: rgba(0,200,255,.25); background: rgba(0,200,255,.05); }
.lb-status--failure { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.05); }
.lb-status--tbd { color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.05); }
.lb-status--tbc { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.05); }
/* ── Mission Patches ─────────────────────────────────────────────────────────── */
.mp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px; margin-top: 4px;
}
.mp-card {
aspect-ratio: 1; border-radius: 50%; overflow: hidden;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
cursor: pointer; transition: transform .15s, border-color .15s;
}
.mp-card:hover { transform: scale(1.06); border-color: rgba(0,200,255,.3); }
.mp-card:focus { outline: 2px solid var(--teal); outline-offset: 3px; }
.mp-card img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.mp-lightbox { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px; }
.mp-lightbox-img { max-width: 300px; max-height: 300px; object-fit: contain; border-radius: 50%; }
.mp-lightbox-name { font-size: 15px; font-weight: 600; color: var(--text); text-align: center; }
.mp-lightbox-agency { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: center; }
.mp-modal-body.at-modal-body { max-width: 400px; }
/* ── Currently in Space ──────────────────────────────────────────────────────── */
.is-body .container { display: flex; flex-direction: column; gap: 32px; }
.is-station {
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08);
border-radius: 8px; overflow: hidden;
}
.is-station--active { border-color: rgba(52,211,153,.25); }
.is-station-banner { height: 160px; overflow: hidden; }
.is-station-banner img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.is-station-header {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px 16px; gap: 12px;
}
.is-station-info { display: flex; flex-direction: column; gap: 4px; }
.is-station-name { font-size: 20px; font-weight: 700; color: var(--text); margin: 0; }
a.is-station-name { text-decoration: none; transition: color .15s; }
a.is-station-name:hover { color: #60a5fa; }
.is-station-orbit { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.is-station-count { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--teal); line-height: 1; text-align: right; }
.is-station-count span { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.is-crew-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px; padding: 0 24px 24px;
}
.is-crew-card {
display: flex; align-items: center; gap: 12px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
border-radius: 6px; padding: 12px;
}
/* Link variant — clickable crew card */
a.is-crew-card, .is-crew-card--link {
text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
a.is-crew-card:hover, .is-crew-card--link:hover { border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.04); }
.is-crew-photo {
flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
overflow: hidden; background: rgba(255,255,255,.05);
display: flex; align-items: center; justify-content: center;
}
.is-crew-photo img { width: 100%; height: 100%; object-fit: cover; }
.is-crew-initials {
font-family: var(--font-mono); font-size: 13px; font-weight: 700;
color: var(--teal); letter-spacing: .08em;
}
.is-crew-info { flex: 1; min-width: 0; }
.is-crew-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.is-crew-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.is-crew-role { font-size: 10px; color: var(--muted); }
.is-crew-duration { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 4px; }
.is-agency-badge {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
text-transform: uppercase; padding: 1px 5px; border-radius: 2px;
border: 1px solid rgba(255,255,255,.15); color: var(--muted);
}
.is-agency--nasa { color: #60a5fa; border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.06); }
.is-agency--esa { color: #fbbf24; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.06); }
.is-agency--roscosmos { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.05); }
.is-agency--cnsa { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.05); }
.is-agency--jaxa { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.05); }
@media (max-width: 860px) {
.ss-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.ss-card-img { width: 100px; }
.lb-card-img { width: 72px; }
.mp-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 7px; }
.is-station-banner { height: 100px; }
.is-station-header { padding: 14px 16px 12px; }
.is-station-name { font-size: 16px; }
.is-crew-grid { grid-template-columns: 1fr; padding: 0 16px 16px; }
}
/* ── Launch Site Explorer ─────────────────────────────────────────────────── */
/* Hero — standard height, clear visual close */
.lse-hero .toolbox-hero-inner { padding-bottom: 16px; }
.lse-hero .toolbox-title { font-size: clamp(28px, 4vw, 48px); }
/* Explorer body — full-width, no container constraint */
.lse-body { display: flex; flex-direction: column; background: var(--bg-deep, #000); }
/* Workspace — sits below hero as its own section, constrained to page width */
.lse-workspace {
padding: 28px 24px 0;
max-width: var(--container-width, 1200px);
margin-left: auto;
margin-right: auto;
background: var(--bg-deep, #000);
border-top: 1px solid rgba(0,51,255,.15);
}
/* Map frame — dark glass border with space-themed glow */
.lse-map-wrap {
position: relative;
overflow: hidden;
background: #000814;
height: clamp(380px, 55vh, 640px);
border-radius: 8px;
border: 1px solid rgba(0,200,255,.22);
box-shadow:
0 0 0 1px rgba(0,200,255,.06),
0 0 40px rgba(0,200,255,.07),
0 4px 32px rgba(0,0,0,.6),
inset 0 0 0 1px rgba(255,255,255,.03);
}
#lse-map { position: absolute; inset: 0; border-radius: 7px; }
/* MapLibre popup override */
.maplibregl-popup-content { padding: 0; background: transparent; box-shadow: none; }
.maplibregl-popup-tip { display: none; }
.lse-popup .maplibregl-popup-content { background: rgba(5,10,30,0.92); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; }
/* Tooltip */
.lse-tip { padding: 10px 12px; min-width: 140px; }
.lse-tip-name { font-size: 12px; font-weight: 600; color: #e2e8f0; margin-bottom: 5px; }
.lse-tip-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
.lse-tip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lse-tip-row { font-size: 10px; color: #64748b; }
.lse-tip-next { font-size: 10px; color: var(--teal); margin-top: 4px; }
.lse-tip-mission { font-size: 10px; color: #94a3b8; }
/* Map loading overlay */
.lse-map-loading {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; background: rgba(0,0,16,0.85);
font-family: var(--font-mono); font-size: 12px; color: #64748b;
z-index: 10; pointer-events: none;
}
/* Map controls overlay */
.lse-map-controls {
position: absolute; top: 12px; left: 12px;
display: flex; flex-direction: column; gap: 6px;
z-index: 100; pointer-events: auto;
}
.lse-ctrl-btn {
width: 34px; height: 34px; border-radius: 4px;
background: rgba(5,15,40,0.85); border: 1px solid rgba(255,255,255,.15);
color: #94a3b8; font-size: 15px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.lse-ctrl-btn:hover { background: rgba(0,200,255,.15); color: var(--teal); border-color: rgba(0,200,255,.3); }
/* MapLibre attribution — move to not collide */
.maplibregl-ctrl-attrib { font-size: 9px !important; opacity: .5; }
.maplibregl-ctrl-bottom-right { bottom: 24px !important; }
/* Status legend */
.lse-legend {
position: absolute; bottom: 12px; left: 12px; z-index: 100;
background: rgba(5,10,30,0.82); border: 1px solid rgba(255,255,255,.1);
border-radius: 5px; padding: 8px 10px;
display: flex; flex-direction: column; gap: 4px;
}
.lse-legend-item {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 9px;
letter-spacing: .06em; text-transform: uppercase; color: #64748b;
}
.lse-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.lse-dot[data-status="go_imminent"] { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.lse-dot[data-status="go"] { background: #4ade80; }
.lse-dot[data-status="upcoming"] { background: #60a5fa; }
.lse-dot[data-status="tbc_tbd"] { background: #a78bfa; }
.lse-dot[data-status="active"] { background: #6b7280; }
.lse-dot[data-status="inactive"] { background: #374151; }
/* ── Detail panel ────────────────────────────────────────────────────────── */
.lse-panel {
width: 340px; flex-shrink: 0;
background: rgba(4,8,20,0.97);
border-left: 1px solid rgba(255,255,255,.08);
display: flex; flex-direction: column;
overflow: hidden;
transform: translateX(100%);
transition: transform .25s ease;
}
.lse-panel:not([hidden]) { transform: translateX(0); }
.lse-panel--open { transform: translateX(0) !important; }
.lse-panel[hidden] { display: none !important; }
.lse-panel-header {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.06);
min-height: 44px; flex-shrink: 0;
}
.lse-panel-close {
background: none; border: none; color: #64748b; font-size: 14px;
cursor: pointer; padding: 4px; border-radius: 3px;
transition: color .15s; flex-shrink: 0;
}
.lse-panel-close:hover { color: #e2e8f0; }
.lse-panel-breadcrumb { font-family: var(--font-mono); font-size: 10px; color: #475569; letter-spacing: .06em; text-transform: uppercase; }
.lse-bc-btn {
background: none; border: none; color: var(--teal); cursor: pointer; font-family: var(--font-mono); font-size: 10px; padding: 0;
}
.lse-bc-btn:hover { text-decoration: underline; }
.lse-bc-sep { color: #334155; margin: 0 4px; }
.lse-panel-body { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.lse-panel-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px; color: #475569; font-size: 13px; }
.lse-panel-empty { padding: 32px 16px; color: #475569; text-align: center; font-size: 13px; }
.lse-panel-banner { height: 140px; overflow: hidden; }
.lse-panel-banner img { width: 100%; height: 100%; object-fit: cover; opacity: .65; }
.lse-pad-banner { height: 100px; }
.lse-panel-section { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.05); }
.lse-panel-title { font-size: 15px; font-weight: 700; color: #e2e8f0; margin-bottom: 6px; line-height: 1.3; }
.lse-panel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.lse-pad-location { font-size: 11px; color: #64748b; margin-top: 2px; }
.lse-desc { font-size: 12px; color: #64748b; line-height: 1.6; }
/* Status badge */
.lse-status-badge {
display: inline-block; font-family: var(--font-mono); font-size: 9px;
letter-spacing: .08em; text-transform: uppercase;
padding: 3px 8px; border-radius: 3px; color: #000; font-weight: 600;
opacity: .9;
}
/* Info grid */
.lse-info-grid { display: flex; flex-direction: column; gap: 4px; }
.lse-info-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.lse-info-key { color: #475569; flex-shrink: 0; min-width: 90px; }
.lse-info-val { color: #94a3b8; text-align: right; }
/* Override note */
.lse-override-note { font-family: var(--font-mono); font-size: 10px; color: #fbbf24; margin-top: 6px; }
/* Launch section in pad panel */
.lse-launch-section {
padding: 12px 16px; background: rgba(0,200,255,.03);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.lse-live-badge {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
color: #22c55e; margin-bottom: 6px; animation: lse-pulse 2s infinite;
}
@keyframes lse-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.lse-launch-name { font-size: 13px; font-weight: 600; color: #e2e8f0; margin-bottom: 6px; line-height: 1.3; }
.lse-launch-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.lse-launch-net { font-family: var(--font-mono); font-size: 11px; color: var(--teal); }
.lse-drill-link { color: var(--teal); text-decoration: none; font-size: 11px; }
.lse-drill-link:hover { text-decoration: underline; }
.lse-webcast-btn {
display: inline-block; margin-top: 8px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
color: #22c55e; border: 1px solid rgba(34,197,94,.3);
background: rgba(34,197,94,.06); border-radius: 3px; padding: 4px 10px;
cursor: pointer; text-decoration: none;
}
.lse-webcast-btn:hover { background: rgba(34,197,94,.12); }
/* Pads list in location panel */
.lse-pads-title { padding: 10px 16px 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #475569; }
.lse-pads-list { display: flex; flex-direction: column; }
.lse-pad-row {
display: flex; align-items: center; gap: 10px;
padding: 9px 16px; background: none; border: none;
border-bottom: 1px solid rgba(255,255,255,.04);
cursor: pointer; text-align: left; transition: background .12s; width: 100%;
}
.lse-pad-row:hover { background: rgba(0,200,255,.05); }
.lse-pad-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lse-pad-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lse-pad-name { font-size: 12px; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lse-pad-net { font-family: var(--font-mono); font-size: 10px; color: var(--teal); }
.lse-pad-vehicle{ font-size: 10px; color: #64748b; }
.lse-pad-arrow { color: #334155; font-size: 14px; flex-shrink: 0; }
/* Link row */
.lse-link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lse-link-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
color: #94a3b8; border: 1px solid rgba(255,255,255,.1);
border-radius: 3px; padding: 4px 10px; text-decoration: none;
transition: color .15s, border-color .15s;
}
.lse-link-btn:hover { color: var(--teal); border-color: rgba(0,200,255,.3); }
/* ── List toggle section ──────────────────────────────────────────────────── */
.lse-list-section { background: rgba(0,0,0,.6); }
.lse-list-toggle {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 14px 24px; background: none; border: none;
border-top: 1px solid rgba(255,255,255,.07);
color: #475569; font-family: var(--font-mono); font-size: 11px;
letter-spacing: .08em; text-transform: uppercase;
cursor: pointer; transition: color .15s;
}
.lse-list-toggle:hover { color: #94a3b8; }
.lse-list-toggle-caret { font-size: 12px; }
.lse-list-body { padding-bottom: 40px; }
/* ── Dark sky mode ────────────────────────────────────────────────────────── */
body.dark-sky-mode .lse-map-controls,
body.dark-sky-mode .lse-legend,
body.dark-sky-mode .lse-panel { filter: sepia(80%) hue-rotate(310deg) brightness(0.75) saturate(0.6); }
body.dark-sky-mode .maplibregl-ctrl-bottom-right { filter: sepia(80%) hue-rotate(310deg); }
/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.lse-workspace { padding: 12px 12px 0; }
.lse-map-wrap { height: 55vw; min-height: 300px; max-height: 460px; }
.lse-legend { display: none; } /* too cramped on mobile */
/* Panel as bottom sheet */
.lse-panel {
position: fixed; bottom: 0; left: 0; right: 0; width: 100% !important;
max-height: 65vh; border-left: none; border-top: 1px solid rgba(255,255,255,.12);
border-radius: 12px 12px 0 0; z-index: 50;
transform: translateY(100%);
box-shadow: 0 -8px 32px rgba(0,0,0,.6);
}
.lse-panel:not([hidden]) { transform: translateY(0); }
.lse-panel-body { max-height: calc(65vh - 48px); overflow-y: auto; }
.lse-list-toggle { padding: 12px 16px; }
}
@media (max-width: 480px) {
.lse-map-wrap { min-height: 280px; }
.lse-ctrl-btn { width: 30px; height: 30px; font-size: 13px; }
}
/* ── LSE: Status Strip ───────────────────────────────────────────────────────── */
.lse-strip-wrap {
background: rgba(2,5,20,0.95);
border-top: 1px solid rgba(0,200,255,.18);
border-bottom: 1px solid rgba(255,255,255,.05);
overflow: hidden;
}
.lse-strip {
display: flex;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
gap: 0;
max-width: var(--container-width, 1200px);
margin-left: auto;
margin-right: auto;
}
.lse-strip::-webkit-scrollbar { display: none; }
.lse-chip {
display: flex; flex-direction: column; justify-content: center;
padding: 9px 16px; gap: 2px; flex-shrink: 0;
border-right: 1px solid rgba(255,255,255,.06);
min-width: 72px; cursor: default;
transition: background .12s;
}
.lse-chip--title {
background: rgba(0,200,255,.05);
border-right: 2px solid rgba(0,200,255,.25);
min-width: 0; max-width: 200px;
}
.lse-chip--warn { background: rgba(248,113,113,.06); }
.lse-chip--loading { font-size: 11px; color: #475569; padding: 10px 20px; }
.lse-chip-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #475569; white-space: nowrap; }
.lse-chip-value { font-size: 13px; font-weight: 600; color: #e2e8f0; white-space: nowrap; line-height: 1.2; }
.lse-chip-note { font-size: 10px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
/* ── LSE: Profile Section ────────────────────────────────────────────────────── */
.lse-profile-section {
background: var(--bg-deep, #000);
padding: 24px 0 40px;
min-height: 200px;
}
.lse-profile-loading {
display: flex; align-items: center; justify-content: center;
padding: 60px 0; color: #475569; gap: 12px;
}
/* ── Default profile ──────────────────────────────────────────────────────── */
.lse-profile--default { display: flex; flex-direction: column; gap: 28px; }
.lse-default-intro {
display: flex; align-items: center; gap: 16px;
padding: 20px 24px;
background: rgba(0,200,255,.04);
border: 1px solid rgba(0,200,255,.12); border-radius: 6px;
}
.lse-intro-icon { font-size: 32px; opacity: .5; flex-shrink: 0; }
.lse-intro-title { font-size: 16px; font-weight: 700; color: #e2e8f0; margin-bottom: 4px; }
.lse-intro-desc { font-size: 13px; color: #64748b; line-height: 1.5; }
.lse-section-head {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: #475569; margin-bottom: 10px;
}
.lse-section-count { color: #334155; margin-left: 6px; }
.lse-upcoming-chips {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
margin-bottom: 4px;
}
.lse-upcoming-chip {
display: flex; cursor: pointer;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.07);
border-radius: 6px; overflow: hidden;
transition: border-color .15s, background .15s;
}
.lse-upcoming-chip:hover, .lse-upcoming-chip:focus {
border-color: var(--uc-color, rgba(0,200,255,.4));
background: rgba(255,255,255,.04); outline: none;
}
.lse-uc-accent { width: 4px; flex-shrink: 0; background: var(--uc-color, #334155); }
.lse-uc-body { padding: 10px 12px; flex: 1; min-width: 0; }
.lse-uc-date { font-family: var(--font-mono); font-size: 10px; color: var(--uc-color, var(--teal));
letter-spacing: .04em; margin-bottom: 4px; }
.lse-uc-name { font-size: 12px; font-weight: 700; color: #e2e8f0; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.lse-uc-meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.lse-uc-loc { font-size: 10.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lse-uc-veh { font-family: var(--font-mono); font-size: 9.5px; color: #475569;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lse-uc-status { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.lse-top-sites {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.lse-top-site {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
border-radius: 6px; overflow: hidden; cursor: pointer;
transition: border-color .15s, background .15s;
}
.lse-top-site:hover, .lse-top-site:focus { border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.05); outline: none; }
.lse-top-site-img { width: 64px; height: 48px; object-fit: cover; flex-shrink: 0; opacity: .75; }
.lse-top-site-img--blank { width: 64px; height: 48px; background: rgba(255,255,255,.04); flex-shrink: 0; }
.lse-top-site-info { padding: 6px 10px 6px 0; min-width: 0; }
.lse-top-site-name { font-size: 12px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lse-top-site-meta { font-size: 10px; color: #64748b; }
/* ── Shared profile hero ─────────────────────────────────────────────────── */
.lse-profile-hero {
display: flex; align-items: flex-start; gap: 20px;
margin-bottom: 20px;
}
.lse-profile-hero--has-img .lse-hero-img { flex-shrink: 0; }
.lse-hero-img { width: 200px; height: 130px; border-radius: 6px; overflow: hidden; }
.lse-hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.lse-hero-img--pad { height: 110px; }
.lse-hero-info { flex: 1; min-width: 0; }
.lse-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lse-hero-name { font-size: 22px; font-weight: 700; color: #f1f5f9; line-height: 1.2; margin: 0 0 4px; }
.lse-hero-sub { font-size: 12px; color: #64748b; }
.lse-badge-active { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; padding: 2px 8px; border-radius: 3px; border: 1px solid rgba(255,255,255,.12); color: #475569; }
.lse-badge-active--yes { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.06); }
.lse-override-badge { font-family: var(--font-mono); font-size: 10px; color: #fbbf24; border: 1px solid rgba(251,191,36,.3); background: rgba(251,191,36,.05); padding: 2px 8px; border-radius: 3px; }
/* ── Profile stats row ───────────────────────────────────────────────────── */
.lse-profile-stats {
display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
}
.lse-stat-chip {
display: flex; flex-direction: column; gap: 3px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
border-radius: 5px; padding: 10px 14px; min-width: 80px;
}
.lse-stat-chip--wide { min-width: 160px; }
.lse-stat-val { font-size: 18px; font-weight: 700; color: #e2e8f0; line-height: 1; }
.lse-stat-val--mono { font-family: var(--font-mono); font-size: 12px; }
.lse-stat-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #475569; }
.lse-profile-desc { font-size: 13px; color: #64748b; line-height: 1.65; margin-bottom: 24px; }
/* ── Pad grid ────────────────────────────────────────────────────────────── */
/* Legacy pad card (main map profile) */
.lse-pad-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px; margin-bottom: 28px;
}
.lse-pad-card {
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
border-radius: 6px; padding: 12px; cursor: pointer;
transition: border-color .15s, background .15s;
}
.lse-pad-card:hover, .lse-pad-card:focus { border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.04); outline: none; }
.lse-pad-card--selected { border-color: rgba(0,200,255,.55) !important; background: rgba(0,200,255,.08) !important; box-shadow: 0 0 0 1px rgba(0,200,255,.25); }
.lse-pad-card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.lse-pad-card-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lse-pad-card-name { font-size: 12px; font-weight: 600; color: #e2e8f0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lse-pad-card-inactive { font-family: var(--font-mono); font-size: 8px; color: #475569; border: 1px solid rgba(255,255,255,.1); border-radius: 2px; padding: 1px 4px; flex-shrink: 0; }
.lse-pad-card-status { font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: #475569; margin-bottom: 4px; }
.lse-pad-card-net { font-family: var(--font-mono); font-size: 10px; color: var(--teal); margin-bottom: 3px; }
.lse-pad-card-launch { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lse-pad-card-veh { font-size: 10px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pad list — modal location profile */
.lse-pad-list { display: flex; flex-direction: column; margin-bottom: 24px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; overflow-y: auto; max-height: 440px; scrollbar-width: thin; scrollbar-color: rgba(0,200,255,.2) transparent; }
.lse-pad-list::-webkit-scrollbar { width: 4px; }
.lse-pad-list::-webkit-scrollbar-thumb { background: rgba(0,200,255,.2); border-radius: 2px; }
.lse-pad-row {
display: grid;
grid-template-columns: 14px 1fr auto auto auto;
align-items: center;
gap: 10px;
padding: 20px 14px;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,.05);
transition: background .12s;
}
.lse-pad-row:last-child { border-bottom: none; }
.lse-pad-row:hover, .lse-pad-row:focus { background: rgba(0,200,255,.05); outline: none; }
.lse-pad-row--inactive { opacity: .55; }
.lse-pad-row-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lse-pad-row-name { font-size: 12px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lse-pad-row-status { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.lse-pad-row-launch { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; overflow: hidden; }
.lse-pad-row-mission { font-size: 10.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.lse-pad-row-net { font-family: var(--font-mono); font-size: 9.5px; color: #64748b; }
.lse-pad-row-net--up { color: var(--teal); }
.lse-pad-row-none { font-size: 10px; color: #334155; }
.lse-pad-row-count { font-family: var(--font-mono); font-size: 10px; color: #475569; white-space: nowrap; }
/* ── Launch table (location view) ────────────────────────────────────────── */
.lse-launch-table { display: flex; flex-direction: column; gap: 3px; margin-bottom: 20px; }
.lse-launch-row {
display: flex; align-items: center; gap: 10px; padding: 7px 12px;
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.04);
border-radius: 4px; flex-wrap: wrap;
}
.lse-lr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lse-lr-net { font-family: var(--font-mono); font-size: 11px; color: var(--teal); min-width: 70px; }
.lse-lr-name { font-size: 12px; font-weight: 600; color: #e2e8f0; flex: 1; min-width: 100px; }
.lse-lr-pad { font-size: 11px; color: #64748b; }
.lse-lr-veh { font-size: 10px; color: #475569; font-family: var(--font-mono); }
/* ── Launch card (pad view) ──────────────────────────────────────────────── */
.lse-launch-card {
background: rgba(0,200,255,.04); border: 1px solid rgba(0,200,255,.15);
border-radius: 6px; padding: 16px; margin-bottom: 20px;
}
.lse-launch-card--failure { background: rgba(248,113,113,.04); border-color: rgba(248,113,113,.2); }
.lse-launch-card--imminent { background: rgba(34,197,94,.05); border-color: rgba(34,197,94,.3); animation: lse-pulse-border 2s infinite; }
@keyframes lse-pulse-border { 0%,100%{border-color:rgba(34,197,94,.3)} 50%{border-color:rgba(34,197,94,.7)} }
.lse-launch-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lse-launch-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.lse-launch-card-name { font-size: 15px; font-weight: 700; color: #f1f5f9; margin-bottom: 8px; line-height: 1.3; }
.lse-launch-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.lse-launch-net { font-family: var(--font-mono); font-size: 12px; color: var(--teal); }
.lse-launch-card-rows { display: flex; flex-direction: column; gap: 4px; }
.lse-lr-item { display: flex; gap: 8px; font-size: 12px; align-items: baseline; flex-wrap: wrap; }
.lse-lr-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: #475569; min-width: 90px; flex-shrink: 0; }
.lse-lr-val { color: #94a3b8; flex: 1; }
.lse-drill-link { color: var(--teal); text-decoration: none; font-size: 12px; }
.lse-drill-link:hover { text-decoration: underline; }
.lse-webcast-btn { font-family: var(--font-mono); font-size: 10px; color: #22c55e; border: 1px solid rgba(34,197,94,.3); background: rgba(34,197,94,.06); border-radius: 3px; padding: 3px 8px; text-decoration: none; }
/* ── Back button + link row ──────────────────────────────────────────────── */
.lse-back-btn {
background: none; border: none; color: var(--teal); cursor: pointer;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
padding: 0; margin-bottom: 16px; display: block;
transition: opacity .15s;
}
.lse-back-btn:hover { opacity: .7; }
.lse-link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lse-link-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
color: #94a3b8; border: 1px solid rgba(255,255,255,.1);
border-radius: 3px; padding: 4px 10px; text-decoration: none;
transition: color .15s, border-color .15s;
}
.lse-link-btn:hover { color: var(--teal); border-color: rgba(0,200,255,.3); }
/* ── Dark sky mode ────────────────────────────────────────────────────────── */
body.dark-sky-mode .lse-strip-wrap,
body.dark-sky-mode .lse-profile-section { filter: sepia(70%) hue-rotate(310deg) brightness(0.75) saturate(0.6); }
/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.lse-pad-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.lse-hero-img { width: 120px; height: 90px; }
.lse-hero-name { font-size: 17px; }
.lse-top-sites { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.lse-profile-hero { flex-direction: column; }
.lse-hero-img { width: 100%; height: 140px; }
.lse-pad-grid { grid-template-columns: 1fr 1fr; }
.lse-upcoming-row { gap: 6px; }
.lse-launch-row { gap: 6px; }
}
/* ── Currently in Space — enriched layout ───────────────────────────────────── */
/* Global stats strip */
.is-stats-strip {
display: flex; flex-wrap: wrap; gap: 1px;
background: rgba(0,200,255,.08);
border: 1px solid rgba(0,200,255,.15);
border-radius: 6px; margin-bottom: 28px; overflow: hidden;
}
.is-global-stat {
flex: 1; min-width: 100px;
display: flex; flex-direction: column; align-items: center;
padding: 14px 12px; gap: 4px;
background: rgba(2,6,20,.85);
}
.is-global-val { font-size: 28px; font-weight: 700; color: #f1f5f9; line-height: 1; }
.is-global-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #475569; }
/* Station block */
.is-station {
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.07);
border-radius: 8px; overflow: hidden; margin-bottom: 24px;
}
.is-station--active { border-color: rgba(0,200,255,.18); }
.is-station-banner { height: 180px; overflow: hidden; position: relative; }
.is-station-banner img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.is-station-banner::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(0,5,20,.9) 100%);
}
.is-station-header {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 18px 20px 14px; gap: 12px;
}
.is-station-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.is-station-name { font-size: 20px; font-weight: 700; color: #f1f5f9; margin: 0 0 3px; }
.is-station-orbit { font-family: var(--font-mono); font-size: 10px; color: #475569; }
.is-live-badge {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
color: #22c55e; border: 1px solid rgba(34,197,94,.3); background: rgba(34,197,94,.06);
border-radius: 3px; padding: 2px 7px;
animation: is-live-pulse 2.5s infinite;
}
@keyframes is-live-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
/* Expedition badge */
.is-expedition { display: flex; align-items: center; gap: 6px; }
.is-expedition--link { text-decoration: none; transition: opacity .15s; }
.is-expedition--link:hover { opacity: .85; }
.is-exp-patch { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.is-exp-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; color: #94a3b8; text-transform: uppercase; }
/* Crew/vessel counts */
.is-station-counts { display: flex; gap: 16px; flex-shrink: 0; text-align: center; }
.is-count-item { display: flex; flex-direction: column; gap: 2px; }
.is-count-val { font-size: 24px; font-weight: 700; color: #e2e8f0; line-height: 1; }
.is-count-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #475569; }
/* Section labels */
.is-section-label {
display: flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: #334155; padding: 0 20px 8px; margin-top: 4px;
}
.is-section-icon { color: rgba(0,200,255,.5); }
.is-section-count { background: rgba(255,255,255,.05); border-radius: 10px; padding: 1px 7px; font-size: 10px; color: #475569; }
/* Docked vehicles strip */
.is-vehicles-strip {
display: flex; gap: 8px; overflow-x: auto;
padding: 0 20px 16px; scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.is-vehicles-strip::-webkit-scrollbar { display: none; }
.is-vehicle-card {
flex-shrink: 0; min-width: 150px; max-width: 190px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
border-radius: 6px; padding: 11px 13px;
display: flex; flex-direction: column; gap: 5px;
}
.is-vehicle-card--crew { border-color: rgba(96,165,250,.2); background: rgba(96,165,250,.03); }
.is-vehicle-card--cargo { border-color: rgba(251,191,36,.15); background: rgba(251,191,36,.02); }
.is-vehicle-type { display: flex; align-items: center; gap: 5px; }
.is-vehicle-icon { font-size: 11px; }
.is-vehicle-type-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: #475569; }
.is-vehicle-name { font-size: 12px; font-weight: 600; color: #e2e8f0; line-height: 1.3; }
.is-vehicle-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.is-vehicle-days { font-family: var(--font-mono); font-size: 10px; color: #64748b; }
.is-vehicle-port { font-size: 10px; color: #475569; }
/* Crew grid */
.is-crew-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px; padding: 0 20px 20px;
}
/* Enhanced crew card */
.is-crew-card {
display: flex; gap: 14px; align-items: flex-start;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
border-radius: 6px; padding: 14px;
transition: border-color .15s;
}
.is-crew-card:hover { border-color: rgba(255,255,255,.14); }
/* Link variant hover wins over base hover via explicit selector */
a.is-crew-card:hover, a.is-crew-card--link:hover { border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.04); }
.is-crew-photo-wrap {
position: relative; flex-shrink: 0;
width: 56px; height: 56px;
}
.is-crew-photo {
width: 54px; height: 54px; border-radius: 50%;
overflow: hidden; background: rgba(255,255,255,.06);
display: flex; align-items: center; justify-content: center;
position: relative; z-index: 1;
}
.is-crew-photo img { width: 100%; height: 100%; object-fit: cover; }
.is-crew-agency-ring {
position: absolute; inset: -2px; border-radius: 50%;
border: 2px solid var(--agency-color, #6b7280);
opacity: .6;
}
.is-crew-initials { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #94a3b8; }
.is-crew-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.is-crew-name { font-size: 13px; font-weight: 600; color: #e2e8f0; line-height: 1.3; }
.is-crew-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.is-crew-role { font-size: 10px; color: #64748b; }
/* Time bar */
.is-crew-time { display: flex; flex-direction: column; gap: 3px; }
.is-time-bar-wrap {
height: 3px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden;
}
.is-time-bar { height: 100%; border-radius: 2px; transition: width .6s ease; opacity: .7; }
.is-time-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }
/* Crew stat chips */
.is-crew-stats {
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px;
}
.is-crew-stat {
display: flex; flex-direction: column; gap: 1px; min-width: 36px;
}
.is-stat-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #e2e8f0; line-height: 1; }
.is-stat-key { font-family: var(--font-mono); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; color: #475569; }
/* Agency badges — add SpX */
.is-agency--spx { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.06); }
/* Dark sky */
body.dark-sky-mode .is-body { filter: sepia(70%) hue-rotate(310deg) brightness(0.75) saturate(0.6); }
/* Mobile */
@media (max-width: 700px) {
.is-crew-grid { grid-template-columns: 1fr; padding: 0 14px 16px; }
.is-station-banner { height: 120px; }
.is-station-header { padding: 14px 14px 10px; }
.is-station-name { font-size: 16px; }
.is-global-val { font-size: 22px; }
.is-vehicles-strip { padding: 0 14px 14px; }
.is-vehicle-card { min-width: 130px; }
}
/* ── ISS Station Card (ISS tracker page) ─────────────────────────────────────── */
/* Card sits inside .toolbox-page, full-width above the body panels */
.iss-station-card {
max-width: var(--container-width, 1200px);
margin: 0 auto 0;
border-radius: 0;
border-left: none;
border-right: none;
}
/* Live orbit strip */
.iss-live-strip {
display: flex; flex-wrap: wrap; align-items: center; gap: 0;
border-top: 1px solid rgba(0,51,255,.12);
border-bottom: 1px solid rgba(0,51,255,.12);
background: rgba(0,0,0,.25);
padding: 0 20px;
}
.iss-live-item {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px 10px 0;
border-right: 1px solid rgba(0,51,255,.12);
margin-right: 16px;
white-space: nowrap;
}
.iss-live-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.iss-live-pill { margin-right: 4px; }
.iss-live-key { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
letter-spacing: .07em; color: #475569; }
.iss-live-val { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #e2e8f0; }
.iss-live-item--pass .iss-live-val { color: var(--teal); }
.iss-live-item--mode { margin-left: auto; border-right: none; gap: 4px; }
/* Docked section */
.iss-docked-section { padding: 14px 20px 6px; }
.iss-docked-chips-wrap {
display: flex; flex-wrap: wrap; gap: 6px;
padding-bottom: 4px;
}
/* Crew grid in card */
.iss-crew-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1px;
background: rgba(0,51,255,.08);
border-top: 1px solid rgba(0,51,255,.1);
margin-top: 0;
}
.iss-crew-grid .mm-iss-crew-loading {
grid-column: 1/-1; padding: 24px 20px;
font-family: var(--font-mono); font-size: 12px;
}
.iss-crew-grid .mm-iss-crew-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 20px;
background: rgba(8,12,30,.6);
transition: background .15s;
}
.iss-crew-grid .mm-iss-crew-row:hover { background: rgba(255,255,255,.03); }
.iss-crew-grid .mm-iss-crew-avatar-wrap { flex-shrink: 0; }
.iss-crew-grid .mm-iss-crew-avatar {
width: 52px; height: 52px; border-radius: 50%;
object-fit: cover; object-position: top center;
border: 2px solid rgba(0,200,255,.25); display: block;
}
.iss-crew-grid .mm-iss-crew-avatar--placeholder {
width: 52px; height: 52px; border-radius: 50%;
background: rgba(0,51,255,.12); display: flex; align-items: center;
justify-content: center; font-size: 20px; color: rgba(0,200,255,.35);
border: 2px solid rgba(0,51,255,.2);
}
.iss-crew-grid .mm-iss-crew-name {
font-family: var(--font-orb); font-size: 14px; font-weight: 600; color: #f1f5f9;
}
.iss-crew-grid .mm-iss-crew-meta {
display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap;
}
.iss-crew-grid .mm-iss-crew-role {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
text-transform: uppercase; padding: 2px 7px; border-radius: 2px;
border: 1px solid rgba(0,51,255,.25); color: #64748b;
}
.iss-crew-grid .mm-iss-role--cmd {
color: var(--teal); border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.06);
}
.iss-crew-grid .mm-iss-crew-agency {
font-family: var(--font-mono); font-size: 10px; color: #475569;
}
/* Mission patch inside expedition badge */
.iss-station-card .mm-iss-crew-patch-img {
width: 28px; height: 28px; object-fit: contain; vertical-align: middle;
border-radius: 50%; border: 1px solid rgba(0,200,255,.2);
}
/* Footer */
.iss-card-footer {
padding: 8px 20px; border-top: 1px solid rgba(0,51,255,.1);
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 10px; color: #475569;
}
/* Docked chips — keep existing style, just adjust spacing */
.iss-docked-chips-wrap .mm-docked-chip {
font-size: 11px;
}
/* Mobile */
@media (max-width: 700px) {
.iss-live-strip { padding: 0 14px; overflow-x: auto; flex-wrap: nowrap; }
.iss-live-item { flex-shrink: 0; }
.iss-live-item--mode { margin-left: 0; }
.iss-docked-section { padding: 12px 14px 4px; }
.iss-crew-grid { grid-template-columns: 1fr; }
}
/* ── Toolbox Mega-Menu Dropdown ──────────────────────────────────────────── */
#primary-menu > li:has(> a[href*="/toolbox"]) { display: none; }
.nav-tb-wrap { position: relative; }
/* Trigger button */
.nav-tb-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-orb);
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
background: transparent;
border: 1px solid transparent;
padding: 6px 13px;
border-radius: 4px;
cursor: pointer;
transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
white-space: nowrap;
}
.nav-tb-btn:hover,
.nav-tb-btn[aria-expanded="true"] {
color: var(--teal);
background: rgba(0,200,255,.06);
border-color: rgba(0,200,255,.3);
box-shadow: 0 0 12px rgba(0,200,255,.12);
}
.nav-tb-btn:focus-visible { outline: 2px solid rgba(0,200,255,.6); outline-offset: 2px; }
.nav-tb-caret {
font-size: 8px;
color: var(--muted);
flex-shrink: 0;
transition: transform .25s;
}
.nav-tb-btn[aria-expanded="true"] .nav-tb-caret { transform: rotate(180deg); }
/* Panel */
.nav-tb-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: min(700px, 96vw);
background: rgba(2, 4, 22, 0.97);
/* dot-grid tech pattern */
background-image:
radial-gradient(circle, rgba(0,200,255,.06) 1px, transparent 1px);
background-size: 22px 22px;
border: 1px solid rgba(0,200,255,.2);
border-top: none;
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
z-index: 1100;
box-shadow:
0 0 0 1px rgba(0,200,255,.08),
0 16px 60px rgba(0,0,0,.9),
0 0 40px rgba(0,200,255,.06) inset;
border-radius: 0 0 4px 4px;
padding: 0 0 14px;
gap: 0;
overflow: hidden;
}
.nav-tb-panel:not([hidden]) {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
/* Animated teal top bar with travelling glow */
.nav-tb-panel::before {
content: '';
display: block;
grid-column: 1 / -1;
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(0,200,255,.4) 20%,
var(--teal) 50%,
rgba(0,200,255,.4) 80%,
transparent 100%);
background-size: 200% 100%;
animation: navTbSweep 3s ease-in-out infinite;
}
@keyframes navTbSweep {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Subtle scan line */
.nav-tb-panel::after {
content: '';
position: absolute;
top: 0; left: -100%; right: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,200,255,.25), transparent);
animation: scanLine 5s linear infinite;
pointer-events: none;
}
/* Columns */
.nav-tb-col {
padding: 18px 14px 8px;
border-right: 1px solid rgba(0,200,255,.07);
position: relative;
transition: background .2s;
}
.nav-tb-col:last-child { border-right: none; }
.nav-tb-col:hover { background: rgba(0,200,255,.025); }
/* Column accent — thin left glow on hover */
.nav-tb-col::before {
content: '';
position: absolute;
top: 18px; bottom: 8px; left: 0;
width: 0;
background: var(--teal);
opacity: 0;
transition: width .2s, opacity .2s;
}
.nav-tb-col:hover::before { width: 1px; opacity: .6; }
/* Column header */
.nav-tb-col-hdr {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0,200,255,.15);
position: relative;
}
/* Glowing underline that extends on col hover */
.nav-tb-col-hdr::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
height: 1px;
width: 0;
background: var(--teal);
box-shadow: 0 0 8px var(--teal);
transition: width .35s ease;
}
.nav-tb-col:hover .nav-tb-col-hdr::after { width: 100%; }
.nav-tb-col-icon {
font-size: 11px;
color: var(--teal);
opacity: .85;
flex-shrink: 0;
}
/* Links */
.nav-tb-link {
display: flex;
align-items: center;
gap: 0;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--muted);
padding: 5px 6px;
border-radius: 3px;
letter-spacing: .04em;
transition: color .15s, background .15s, gap .15s, padding-left .15s;
position: relative;
overflow: hidden;
}
/* Hover reveal: sliding left accent */
.nav-tb-link::before {
content: '›';
font-size: 14px;
color: var(--teal);
line-height: 1;
width: 0;
overflow: hidden;
transition: width .15s;
flex-shrink: 0;
}
.nav-tb-link:hover {
color: var(--teal);
background: rgba(0,200,255,.07);
padding-left: 4px;
gap: 5px;
}
.nav-tb-link:hover::before { width: 10px; }
.nav-tb-link.nav-tb-link--active {
color: var(--teal);
background: rgba(0,200,255,.09);
border-left: 2px solid var(--teal);
padding-left: 8px;
}
.nav-tb-link.nav-tb-link--active::before { display: none; }
/* Footer */
.nav-tb-footer {
grid-column: 1 / -1;
padding: 10px 16px 2px;
margin-top: 4px;
border-top: 1px solid rgba(0,200,255,.1);
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-tb-footer-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(0,200,255,.3);
}
.nav-tb-footer-link {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .08em;
color: var(--muted);
padding: 4px 12px;
border: 1px solid rgba(0,200,255,.2);
border-radius: 3px;
transition: color .15s, border-color .15s, box-shadow .15s, background .15s;
}
.nav-tb-footer-link:hover {
color: var(--teal);
border-color: var(--teal);
background: rgba(0,200,255,.06);
box-shadow: 0 0 10px rgba(0,200,255,.15);
}
/* Responsive */
@media (max-width: 900px) { .nav-tb-wrap { display: none; } }
@media (max-width: 1100px) {
.nav-tb-panel { width: min(520px, 96vw); }
.nav-tb-panel:not([hidden]) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.nav-tb-panel { width: min(300px, 96vw); }
.nav-tb-panel:not([hidden]) { grid-template-columns: 1fr; }
.nav-tb-col { border-right: none; border-bottom: 1px solid rgba(0,200,255,.07); }
.nav-tb-col:last-child { border-bottom: none; }
}
/* ── Astronaut Command Center Enhancements ───────────────────────────────── */
/* Humanity-in-Orbit strip (hero sub-bar) */
.at-orbit-strip {
display: flex;
align-items: center;
gap: 0;
border-top: 1px solid rgba(0,200,255,.12);
border-bottom: 1px solid rgba(0,200,255,.12);
background: rgba(0,0,0,.3);
overflow: hidden;
position: relative;
}
.at-os-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 12px;
gap: 2px;
border-right: 1px solid rgba(0,200,255,.1);
transition: background .2s;
}
.at-os-item:last-child { border-right: none; }
.at-os-item--live { background: rgba(0,200,255,.04); }
.at-os-item--skel {
height: 52px;
background: linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);
background-size: 200% 100%;
animation: gal-shimmer 1.6s infinite;
}
.at-os-icon { font-size: 12px; color: var(--teal); }
.at-os-val { font-family: var(--font-orb); font-size: 18px; font-weight: 900; color: var(--text); }
.at-os-label{ font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 600px) { .at-orbit-strip { flex-wrap: wrap; } .at-os-item { flex: 1 1 33%; } }
/* Private archetype badge */
.arch-private { background: rgba(232,121,249,.12); color: #e879f9; border-color: rgba(232,121,249,.3); }
/* Days-in-orbit pill on crew board */
.at-ocb-orbit {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
color: #fbbf24;
background: rgba(251,191,36,.1);
border: 1px solid rgba(251,191,36,.25);
border-radius: 999px;
padding: 2px 6px;
margin-top: 3px;
}
/* Era group skeleton */
.at-era-group--skel {
height: 220px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(0,200,255,.07);
border-radius: 4px;
margin-bottom: 20px;
animation: gal-shimmer 1.8s infinite;
background-size: 200% 100%;
background-image: linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 75%);
}
/* Large era groups (ISS / New Space) get a lighter card strip */
.at-era-group--large .at-era-crew-strip { max-height: 260px; overflow-y: auto; flex-wrap: wrap; }
.at-era-group--large .at-era-card { width: 80px; }
/* Nationality flag emoji */
.at-nat-flag {
font-size: 28px;
line-height: 1;
min-width: 36px;
text-align: center;
}
.at-nat-card--live { border-color: rgba(0,200,255,.3); }
.at-nat-first {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
margin-top: 2px;
letter-spacing: .05em;
}
/* ── Mission Patch Wall ───────────────────────────────────────────────────── */
.at-pw-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.at-pw-filter {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
background: transparent;
border: 1px solid var(--blue-border);
padding: 5px 14px;
border-radius: 3px;
cursor: pointer;
transition: color .2s, border-color .2s, background .2s;
}
.at-pw-filter:hover,
.at-pw-filter--active {
color: var(--teal);
border-color: var(--teal);
background: rgba(0,200,255,.07);
}
.at-pw-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.at-pw-card {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(0,200,255,.1);
background: rgba(0,0,12,.6);
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.at-pw-card:hover {
transform: scale(1.06);
box-shadow: 0 0 20px rgba(0,200,255,.2), 0 8px 30px rgba(0,0,0,.6);
border-color: rgba(0,200,255,.4);
z-index: 2;
}
.at-pw-card:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.at-pw-img-wrap {
width: 100%; height: 100%;
}
.at-pw-img-wrap img {
width: 100%; height: 100%;
object-fit: contain;
padding: 6px;
transition: opacity .2s;
}
.at-pw-card:hover .at-pw-img-wrap img { opacity: .2; }
.at-pw-hover {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px;
opacity: 0;
transition: opacity .2s;
text-align: center;
}
.at-pw-card:hover .at-pw-hover { opacity: 1; }
.at-pw-hover-name {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .08em;
color: var(--text);
line-height: 1.3;
margin-bottom: 4px;
}
.at-pw-hover-meta {
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--teal);
letter-spacing: .06em;
}
.at-pw-card--skel {
background: linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);
background-size: 200% 100%;
animation: gal-shimmer 1.6s infinite;
border-color: transparent;
cursor: default;
}
@media (max-width: 700px) {
.at-pw-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
}
@media (max-width: 480px) {
.at-pw-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
}
/* ── Enhanced Astronaut Profile ──────────────────────────────────────────── */
/* Stats grid */
.at-prof-stats-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0;
}
.at-prof-stat-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: rgba(0,200,255,.05);
border: 1px solid rgba(0,200,255,.12);
border-radius: 4px;
padding: 8px 14px;
min-width: 70px;
}
.at-prof-stat-icon { font-size: 11px; color: var(--teal); opacity: .7; }
.at-prof-stat-val { font-family: var(--font-orb); font-size: 15px; font-weight: 700; color: var(--text); }
.at-prof-stat-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* Section blocks inside profile */
.at-prof-sections { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.at-prof-section {
border-top: 1px solid rgba(0,200,255,.1);
padding: 18px 0 4px;
}
.at-prof-section-hdr {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.at-prof-section-icon { font-size: 13px; color: var(--teal); flex-shrink: 0; }
.at-prof-section-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.at-prof-section-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-left: auto; }
/* Mission patches strip */
.at-prof-patches {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.at-prof-patch {
position: relative;
width: 72px;
height: 72px;
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(0,200,255,.1);
background: rgba(0,0,12,.5);
transition: transform .2s, box-shadow .2s;
}
.at-prof-patch:hover {
transform: scale(1.1);
box-shadow: 0 0 14px rgba(0,200,255,.25);
z-index: 2;
}
.at-prof-patch img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.at-prof-patch-year {
position: absolute;
bottom: 0; left: 0; right: 0;
font-family: var(--font-mono);
font-size: 8px;
text-align: center;
background: rgba(0,0,0,.7);
color: var(--teal);
padding: 1px 0;
letter-spacing: .06em;
}
/* Flight manifest */
.at-prof-manifest-list { display: flex; flex-direction: column; gap: 10px; }
.at-prof-mf-row {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 10px;
align-items: start;
padding: 10px 0;
border-bottom: 1px solid rgba(0,200,255,.06);
}
.at-prof-mf-row:last-child { border-bottom: none; }
.at-prof-mf-row--img { grid-template-columns: 48px 28px 1fr auto; }
.at-mf-thumb { grid-row: 1; }
.at-mf-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 3px; opacity: .7; }
.at-mf-thumb--patch img { object-fit: contain; background: rgba(0,0,12,.5); padding: 3px; border-radius: 4px; opacity: 1; }
.at-mf-num { font-family: var(--font-mono); font-size: 10px; color: rgba(0,200,255,.4); letter-spacing: .1em; padding-top: 2px; }
.at-mf-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.at-mf-name { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.at-mf-link { color: var(--text); text-decoration: none; }
.at-mf-link:hover { color: var(--teal); }
.at-mf-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
letter-spacing: .05em;
}
.at-mf-sc { color: var(--teal); }
.at-mf-loc { color: rgba(255,255,255,.35); }
.at-mf-desc {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255,255,255,.4);
line-height: 1.5;
margin-top: 4px;
}
.at-mf-more {
background: none; border: none; color: var(--teal); font-size: 11px;
cursor: pointer; padding: 0; font-family: var(--font-mono);
}
.at-mf-status {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
text-transform: uppercase; padding: 3px 7px; border-radius: 3px;
white-space: nowrap; align-self: start; margin-top: 2px;
}
.at-mf-status--ok { color: #34d399; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.25); }
.at-mf-status--fail { color: #f87171; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); }
.at-mf-status--tbd { color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
/* Crew mates grid */
.at-prof-crew-grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.at-prof-cm {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 68px;
cursor: pointer;
}
.at-prof-cm:hover .at-prof-cm-photo { box-shadow: 0 0 12px var(--agency-color, var(--teal)); }
.at-prof-cm-photo {
position: relative;
width: 52px; height: 52px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(0,200,255,.2);
transition: box-shadow .2s;
background: rgba(0,0,12,.6);
}
.at-prof-cm-photo img { width: 100%; height: 100%; object-fit: cover; }
.at-prof-cm-init {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--teal);
}
.at-prof-cm-ring {
position: absolute; inset: -2px;
border-radius: 50%;
border: 1px solid var(--agency-color, rgba(0,200,255,.3));
pointer-events: none;
}
.at-prof-cm-name { font-family: var(--font-mono); font-size: 10px; color: var(--text); text-align: center; }
.at-prof-cm-agency { font-family: var(--font-mono); font-size: 9px; text-align: center; }
.at-prof-cm-shared { font-family: var(--font-mono); font-size: 9px; color: rgba(0,200,255,.5); text-align: center; }
/* EVA log table */
.at-prof-eva-table { display: flex; flex-direction: column; gap: 8px; }
.at-prof-eva-card {
background: rgba(0,200,255,.03);
border: 1px solid rgba(0,200,255,.08);
border-radius: 4px;
padding: 10px 12px;
font-family: var(--font-mono);
font-size: 11px;
display: flex; flex-direction: column; gap: 5px;
transition: border-color .15s;
}
.at-prof-eva-card:hover { border-color: rgba(0,200,255,.2); }
.at-prof-eva-card-hdr { display: flex; align-items: center; gap: 8px; }
.at-prof-eva-num { color: rgba(0,200,255,.4); font-size: 10px; letter-spacing: .1em; flex-shrink: 0; }
.at-prof-eva-name { color: var(--text); font-weight: 600; flex: 1; min-width: 0; }
.at-prof-eva-role {
color: #60a5fa; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.25);
border-radius: 2px; padding: 1px 6px; flex-shrink: 0;
}
.at-prof-eva-card-meta { display: flex; gap: 16px; }
.at-prof-eva-date { color: var(--muted); }
.at-prof-eva-dur { color: var(--teal); }
.at-prof-eva-partners {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding-top: 4px; border-top: 1px solid rgba(0,200,255,.06);
}
.at-prof-eva-partners-lbl { color: var(--muted); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; flex-shrink: 0; }
.at-prof-eva-partner { color: var(--text); display: flex; align-items: center; gap: 4px; }
.at-prof-eva-partner-role { color: var(--muted); font-size: 9px; }
/* Programs grid */
.at-prof-prog-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.at-prof-prog-card {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 8px;
background: rgba(0,200,255,.04);
border: 1px solid rgba(0,200,255,.12);
border-radius: 4px;
transition: border-color .2s, background .2s;
text-decoration: none;
}
.at-prof-prog-card:hover { border-color: var(--teal); background: rgba(0,200,255,.08); }
.at-prof-prog-img img { width: 36px; height: 36px; object-fit: contain; border-radius: 3px; }
.at-prof-prog-name { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.at-prof-prog-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
/* Soon/placeholder text */
.at-prof-conn-soon {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255,255,255,.3);
padding: 8px 0;
font-style: italic;
}
/* Sub dividers in at-prof-sub */
.at-prof-sub span + span::before { content: ' · '; color: rgba(255,255,255,.2); }
/* Mobile adjustments */
@media (max-width: 600px) {
.at-prof-stats-grid { gap: 6px; }
.at-prof-stat-box { padding: 6px 10px; min-width: 58px; }
.at-prof-stat-val { font-size: 13px; }
.at-prof-crew-grid { gap: 10px; }
.at-prof-cm { width: 56px; }
.at-prof-cm-photo { width: 44px; height: 44px; }
.at-prof-mf-row { grid-template-columns: 20px 1fr auto; gap: 6px; }
.at-prof-mf-row--img{ grid-template-columns: 36px 20px 1fr auto; }
.at-mf-thumb img { width: 36px; height: 36px; }
.at-prof-eva-card { padding: 8px 10px; }
}
/* =====================================================================
ASTRONAUT PROFILE — Rich dossier (Phase 3 rewrite)
===================================================================== */
/* ── Header row (close + copy link) ──────────────────────────────────── */
.at-prof-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 0 14px;
border-bottom: 1px solid rgba(0,200,255,.1);
margin-bottom: 20px;
flex-wrap: wrap;
}
.at-prof-copy-btn {
background: transparent;
border: 1px solid rgba(0,200,255,.25);
color: rgba(255,255,255,.55);
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 11px;
letter-spacing: .05em;
padding: 5px 12px;
cursor: pointer;
border-radius: 3px;
transition: border-color .18s, color .18s, background .18s;
}
.at-prof-copy-btn:hover {
border-color: var(--teal, #00c8ff);
color: var(--teal, #00c8ff);
background: rgba(0,200,255,.06);
}
/* ── Hero: two-column grid ────────────────────────────────────────────── */
.at-prof-hero {
display: grid;
grid-template-columns: 180px 1fr;
gap: 24px;
align-items: start;
margin-bottom: 24px;
}
@media (max-width: 600px) {
.at-prof-hero { grid-template-columns: 1fr; }
}
/* ── Photo column ─────────────────────────────────────────────────────── */
.at-prof-photo-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
/* Live glow ring on photo wrap */
.at-prof-photo-wrap--live {
box-shadow: 0 0 0 3px var(--agency-color, var(--teal, #00c8ff)),
0 0 24px 4px rgba(0,200,255,.3);
animation: at-live-pulse 2s ease-in-out infinite;
}
@keyframes at-live-pulse {
0%,100% { box-shadow: 0 0 0 3px var(--agency-color,var(--teal,#00c8ff)), 0 0 24px 4px rgba(0,200,255,.3); }
50% { box-shadow: 0 0 0 3px var(--agency-color,var(--teal,#00c8ff)), 0 0 40px 8px rgba(0,200,255,.5); }
}
@media (prefers-reduced-motion: reduce) {
.at-prof-photo-wrap--live { animation: none; }
}
/* ── Auto-generated badge strip ──────────────────────────────────────── */
.at-prof-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
max-width: 180px;
}
.at-prof-badge {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 9px;
letter-spacing: .06em;
padding: 3px 8px;
border-radius: 20px;
border: 1px solid rgba(0,200,255,.2);
color: rgba(255,255,255,.65);
background: rgba(0,200,255,.06);
white-space: nowrap;
transition: border-color .18s, color .18s;
}
.at-prof-badge--moonwalker { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.at-prof-badge--spacewalker { color: #60a5fa; border-color: rgba(96,165,250,.4); background: rgba(96,165,250,.08); }
.at-prof-badge--commander { color: #f97316; border-color: rgba(249,115,22,.4); background: rgba(249,115,22,.08); }
.at-prof-badge--shuttle-vet { color: #a78bfa; border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.08); }
.at-prof-badge--soyuz-vet { color: #f87171; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); }
.at-prof-badge--dragon-vet { color: #34d399; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.at-prof-badge--commercial { color: #c084fc; border-color: rgba(192,132,252,.4); background: rgba(192,132,252,.08); }
.at-prof-badge--first-timer { color: #f472b6; border-color: rgba(244,114,182,.4); background: rgba(244,114,182,.08); }
.at-prof-badge--in-space { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08);
animation: at-badge-pulse 2s ease-in-out infinite; }
.at-prof-badge--long-duration{ color: #38bdf8; border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.08); }
.at-prof-badge--record { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
@keyframes at-badge-pulse { 0%,100%{opacity:1} 50%{opacity:.65} }
@media (prefers-reduced-motion: reduce) { .at-prof-badge--in-space { animation: none; } }
/* ── Identity column ──────────────────────────────────────────────────── */
.at-prof-identity {
display: flex;
flex-direction: column;
gap: 10px;
}
.at-prof-subline {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 12px;
color: rgba(255,255,255,.55);
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.at-prof-subline span + span::before { content: ' · '; color: rgba(255,255,255,.2); }
/* ── Quick stats compact row ──────────────────────────────────────────── */
.at-prof-quick-stats {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.at-prof-qs-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 48px;
background: rgba(0,200,255,.05);
border: 1px solid rgba(0,200,255,.12);
border-radius: 4px;
padding: 6px 10px;
gap: 2px;
}
.at-prof-qs-icon { font-size: 12px; color: var(--teal, #00c8ff); }
.at-prof-qs-val { font-family: var(--font-orb, 'Orbitron', sans-serif); font-size: 13px; color: var(--text, #e8e8e8); font-weight: 700; }
.at-prof-qs-lbl { font-family: var(--font-mono, 'Share Tech Mono', monospace); font-size: 9px; color: var(--muted, #888); letter-spacing: .06em; text-align: center; }
/* ── Bio block ────────────────────────────────────────────────────────── */
.at-prof-bio-block {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 12px;
color: rgba(255,255,255,.55);
line-height: 1.65;
padding: 14px 16px;
background: rgba(0,200,255,.03);
border-left: 2px solid rgba(0,200,255,.2);
border-radius: 0 4px 4px 0;
margin-bottom: 20px;
}
/* ── Career timeline (vertical left-border line) ─────────────────────── */
.at-prof-timeline-wrap {
margin-bottom: 20px;
}
.at-prof-career-line {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
padding-left: 32px;
margin-top: 12px;
}
.at-prof-career-line::before {
content: '';
position: absolute;
left: 10px;
top: 8px;
bottom: 8px;
width: 2px;
background: linear-gradient(to bottom, rgba(0,200,255,.4), rgba(0,200,255,.08));
border-radius: 2px;
}
.at-prof-tl-item {
position: relative;
display: flex;
align-items: baseline;
gap: 10px;
padding: 6px 0;
border-bottom: 1px solid rgba(0,200,255,.04);
}
.at-prof-tl-item:last-child { border-bottom: none; }
.at-prof-tl-item--live .at-prof-tl-content { color: #fbbf24; }
.at-prof-tl-dot {
position: absolute;
left: -28px;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(0,200,255,.15);
border: 2px solid rgba(0,200,255,.35);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
top: 4px;
}
.at-prof-tl-icon {
font-size: 9px;
line-height: 1;
}
.at-prof-tl-content {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
align-items: baseline;
flex: 1;
}
.at-prof-tl-label {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 11px;
color: var(--text, #e8e8e8);
font-weight: 600;
}
.at-prof-tl-date {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 10px;
color: var(--muted, #888);
}
.at-prof-tl-sub {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 9px;
color: rgba(255,255,255,.3);
width: 100%;
margin-top: 1px;
}
.at-prof-tl-first {
display: inline-block;
font-size: 8px; font-weight: 600; letter-spacing: .07em;
text-transform: uppercase; vertical-align: middle;
background: rgba(96,165,250,.15); color: #60a5fa;
border: 1px solid rgba(96,165,250,.3); border-radius: 2px;
padding: 1px 5px; margin-left: 6px; line-height: 1.4;
}
/* ── Mission Passport grid ───────────────────────────────────────────── */
.at-prof-mission-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
@media (max-width: 600px) {
.at-prof-mission-grid { grid-template-columns: 1fr; }
}
.at-prof-mission-tile {
display: flex;
flex-direction: column;
gap: 8px;
background: rgba(0,200,255,.04);
border: 1px solid rgba(0,200,255,.1);
border-radius: 5px;
padding: 10px;
transition: border-color .18s, background .18s;
position: relative;
}
.at-prof-mission-tile:hover { border-color: rgba(0,200,255,.28); background: rgba(0,200,255,.07); }
.at-mission-tile-img img {
width: 100%; max-height: 120px; object-fit: contain;
border-radius: 3px; background: rgba(0,0,0,.3);
}
.at-mission-tile-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.at-mission-tile-name {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 12px;
color: var(--text, #e8e8e8);
font-weight: 600;
line-height: 1.4;
}
.at-mission-tile-role {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 10px;
color: #60a5fa;
letter-spacing: .06em;
text-transform: uppercase;
}
/* ── Crew Constellation SVG ──────────────────────────────────────────── */
.at-prof-constellation {
display: flex;
justify-content: center;
padding: 8px 0;
}
.at-prof-constellation-svg {
width: 100%;
max-width: 320px;
height: auto;
overflow: visible;
}
.at-const-node:hover circle { opacity: .85; }
.at-const-node:focus { outline: none; }
.at-const-node:focus circle { stroke-width: 3; }
/* ── EVA summary row ──────────────────────────────────────────────────── */
.at-prof-eva-summary {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
}
/* ── EVA circular gauge ───────────────────────────────────────────────── */
.at-eva-gauge {
display: block;
width: 100px;
height: 100px;
margin: 0 auto 14px;
}
/* ── EVA partners ─────────────────────────────────────────────────────── */
.at-prof-eva-partners {
grid-column: 2 / -1;
display: flex;
flex-wrap: wrap;
gap: 4px;
padding-top: 2px;
}
/* ── Station chips ────────────────────────────────────────────────────── */
.at-prof-station-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.at-prof-station-chip {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 11px;
padding: 5px 14px;
background: rgba(0,200,255,.06);
border: 1px solid rgba(0,200,255,.2);
border-radius: 20px;
color: var(--teal, #00c8ff);
text-decoration: none;
transition: background .18s, border-color .18s, color .18s;
}
.at-prof-station-chip:hover {
background: rgba(0,200,255,.14);
border-color: var(--teal, #00c8ff);
color: #fff;
}
/* ── Error / loading states ───────────────────────────────────────────── */
.at-prof-error {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 40px 20px;
text-align: center;
}
.at-prof-error-icon { font-size: 32px; color: rgba(255,255,255,.25); }
.at-prof-error-title { font-family: var(--font-orb,'Orbitron',sans-serif); font-size: 16px; color: var(--text,#e8e8e8); }
.at-prof-error-msg { font-family: var(--font-mono,'Share Tech Mono',monospace); font-size: 12px; color: var(--muted,#888); }
.at-prof-retry-btn {
background: transparent;
border: 1px solid rgba(0,200,255,.3);
color: var(--teal,#00c8ff);
font-family: var(--font-mono,'Share Tech Mono',monospace);
font-size: 12px;
padding: 7px 18px;
cursor: pointer;
border-radius: 3px;
transition: background .18s, border-color .18s;
}
.at-prof-retry-btn:hover { background: rgba(0,200,255,.1); border-color: var(--teal,#00c8ff); }
/* ── Mobile tweaks for new profile ───────────────────────────────────── */
@media (max-width: 600px) {
.at-prof-header { padding-bottom: 10px; margin-bottom: 14px; }
.at-prof-hero { gap: 16px; }
.at-prof-badges { max-width: 100%; justify-content: flex-start; }
.at-prof-mission-grid { grid-template-columns: 1fr; }
.at-prof-career-line { padding-left: 26px; }
.at-prof-tl-dot { left: -23px; width: 14px; height: 14px; }
.at-prof-quick-stats { gap: 6px; }
.at-prof-qs-item { padding: 5px 8px; min-width: 40px; }
.at-prof-qs-val { font-size: 11px; }
.at-prof-constellation-svg { max-width: 260px; }
.at-eva-gauge { width: 80px; height: 80px; }
}
/* ── Crew Network (replaces constellation) ───────────────────────────────── */
.at-cn-list { display: flex; flex-direction: column; gap: 2px; }
.at-cn-row {
display: grid;
grid-template-columns: 48px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
border-radius: 4px;
border: 1px solid rgba(0,200,255,.07);
cursor: pointer;
transition: background .15s, border-color .15s;
}
.at-cn-row:hover { background: rgba(0,200,255,.05); border-color: rgba(0,200,255,.2); }
.at-cn-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.at-cn-photo {
position: relative;
width: 44px; height: 44px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: rgba(0,0,12,.6);
border: 2px solid rgba(0,200,255,.15);
}
.at-cn-photo img { width: 100%; height: 100%; object-fit: cover; }
.at-cn-init {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--teal);
}
.at-cn-ring {
position: absolute; inset: -2px; border-radius: 50%;
border: 1px solid var(--agency-color, rgba(0,200,255,.3));
pointer-events: none;
}
.at-cn-body { min-width: 0; }
.at-cn-name { font-family: var(--font-mono); font-size: 13px; color: var(--text); margin-bottom: 2px; }
.at-cn-agency { font-family: var(--font-mono); font-size: 10px; margin-bottom: 5px; letter-spacing: .04em; }
.at-cn-flights {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.at-cn-flight {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
background: rgba(0,200,255,.06);
border: 1px solid rgba(0,200,255,.15);
border-radius: 3px;
padding: 2px 7px;
text-decoration: none;
transition: color .15s, border-color .15s;
}
a.at-cn-flight:hover { color: var(--teal); border-color: var(--teal); }
.at-cn-flight-date {
color: rgba(0,200,255,.45);
font-size: 9px;
letter-spacing: .04em;
}
.at-cn-flight-unknown {
font-family: var(--font-mono);
font-size: 10px;
color: rgba(255,255,255,.25);
font-style: italic;
}
.at-cn-count {
font-family: var(--font-orb);
font-size: 11px;
font-weight: 700;
color: var(--teal);
opacity: .6;
white-space: nowrap;
}
@media (max-width: 500px) {
.at-cn-row { grid-template-columns: 40px 1fr; }
.at-cn-count { display: none; }
.at-cn-photo { width: 38px; height: 38px; }
}
/* ══════════════════════════════════════════════════════════════════════════
PHASE 5 — Human Spaceflight Time Machine
══════════════════════════════════════════════════════════════════════════ */
/* Timeline bar */
.at-etm-bar { position: relative; padding: 28px 0 16px; overflow-x: auto; }
.at-etm-bar-skel { height: 80px; background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%); background-size: 200% 100%; animation: gal-shimmer 1.6s infinite; border-radius: 4px; }
.at-etm-track { position: relative; display: flex; align-items: flex-start; justify-content: space-between; min-width: 600px; padding: 0 24px; gap: 0; }
.at-etm-line { position: absolute; top: 20px; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, rgba(0,200,255,.2), rgba(0,200,255,.4), rgba(0,200,255,.2)); }
.at-etm-node { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; cursor: pointer; padding-top: 0; position: relative; }
.at-etm-node-dot { width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,12,.8); border: 2px solid var(--era-color, rgba(0,200,255,.4)); transition: all .2s; position: relative; z-index: 1; margin-top: 12px; }
.at-etm-node:hover .at-etm-node-dot,
.at-etm-node--active .at-etm-node-dot { width: 20px; height: 20px; margin-top: 10px; background: var(--era-color); box-shadow: 0 0 16px var(--era-color); }
.at-etm-node-label { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.at-etm-node-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.at-etm-node-years { font-family: var(--font-mono); font-size: 8px; color: rgba(255,255,255,.2); letter-spacing: .05em; }
.at-etm-node-count { font-family: var(--font-orb); font-size: 11px; font-weight: 700; color: var(--era-color, var(--teal)); opacity: .7; }
.at-etm-node:hover .at-etm-node-name,
.at-etm-node--active .at-etm-node-name { color: var(--era-color); }
.at-etm-node--active .at-etm-node-count { opacity: 1; }
.at-etm-all-btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--muted); background: transparent; border: 1px solid rgba(0,200,255,.2); padding: 4px 12px; border-radius: 3px; cursor: pointer; margin-left: auto; transition: color .15s, border-color .15s; }
.at-etm-all-btn:hover { color: var(--teal); border-color: var(--teal); }
/* Dossier panel */
.at-etm-dossier { margin-top: 16px; border: 1px solid rgba(0,200,255,.15); border-top: 3px solid var(--etm-color, var(--teal)); border-radius: 0 0 4px 4px; background: rgba(2,4,20,.95); overflow: hidden; animation: at-modal-slide .22s ease; }
/* Era theming via --etm-color */
.at-etm-dos[data-era="mercury"] { --etm-color: #60a5fa; }
.at-etm-dos[data-era="gemini"] { --etm-color: #fbbf24; }
.at-etm-dos[data-era="apollo"] { --etm-color: #a78bfa; }
.at-etm-dos[data-era="shuttle"] { --etm-color: #f97316; }
.at-etm-dos[data-era="iss"] { --etm-color: #34d399; }
.at-etm-dos[data-era="new_era"] { --etm-color: #c084fc; }
/* Dossier inner layout */
.at-etm-dos-hd { display: flex; align-items: center; gap: 14px; padding: 20px 20px 14px; border-bottom: 1px solid rgba(0,200,255,.08); }
.at-etm-dos-icon { font-size: 24px; color: var(--etm-color); flex-shrink: 0; line-height: 1; }
.at-etm-dos-title { flex: 1; }
.at-etm-dos-name { font-family: var(--font-orb); font-size: 18px; font-weight: 900; color: var(--text); }
.at-etm-dos-years { font-family: var(--font-mono); font-size: 11px; color: var(--etm-color); letter-spacing: .1em; margin-top: 2px; }
.at-etm-dos-badge { font-family: var(--font-orb); font-size: 20px; font-weight: 900; color: var(--etm-color); opacity: .6; flex-shrink: 0; }
.at-etm-dos-desc { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .05em; margin: 10px 20px 0; line-height: 1.5; }
.at-etm-dos-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
/* Stat grid */
.at-etm-stat-grid { display: flex; flex-wrap: wrap; gap: 0; padding: 16px 20px; border-right: 1px solid rgba(0,200,255,.08); border-bottom: 1px solid rgba(0,200,255,.08); }
.at-etm-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 14px; min-width: 80px; flex: 1; }
.at-etm-stat-val { font-family: var(--font-orb); font-size: 20px; font-weight: 900; color: var(--text); }
.at-etm-stat-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
/* DNA bars */
.at-etm-dna { padding: 16px 20px; border-bottom: 1px solid rgba(0,200,255,.08); }
.at-etm-dna-hdr { font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--etm-color); opacity: .7; margin-bottom: 12px; }
.at-etm-dna-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.at-etm-dna-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); width: 120px; flex-shrink: 0; letter-spacing: .04em; }
.at-etm-dna-track { flex: 1; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.at-etm-dna-fill { height: 100%; background: var(--etm-color); border-radius: 2px; transition: width .6s ease; }
.at-etm-dna-val { font-family: var(--font-mono); font-size: 9px; color: var(--etm-color); width: 60px; text-align: right; flex-shrink: 0; }
/* Meta row */
.at-etm-meta-row { display: flex; padding: 14px 20px; border-bottom: 1px solid rgba(0,200,255,.08); flex-wrap: wrap; gap: 16px; grid-column: 1 / -1; }
.at-etm-meta-group { display: flex; flex-direction: column; gap: 6px; }
.at-etm-meta-hdr { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--etm-color); opacity: .7; }
.at-etm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.at-etm-chip { font-family: var(--font-mono); font-size: 10px; color: var(--muted); background: rgba(0,200,255,.05); border: 1px solid rgba(0,200,255,.12); border-radius: 3px; padding: 3px 8px; letter-spacing: .04em; }
.at-etm-chip--em { color: var(--etm-color); border-color: rgba(0,200,255,.25); }
/* Legacy card */
.at-etm-legacy { padding: 16px 20px; background: rgba(0,200,255,.03); border-top: 1px solid rgba(0,200,255,.08); grid-column: 1 / -1; }
.at-etm-legacy-hd { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--etm-color); margin-bottom: 6px; }
.at-etm-legacy-body { font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 1.6; letter-spacing: .03em; }
.at-etm-legacy-dates { display: flex; gap: 16px; margin-top: 8px; font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.3); letter-spacing: .08em; }
/* Mission strip */
.at-etm-mission-strip { padding: 16px 20px; border-top: 1px solid rgba(0,200,255,.08); }
.at-etm-ms-hdr { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--etm-color); opacity: .7; margin-bottom: 10px; }
.at-etm-ms-track { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.at-etm-ms-patch { position: relative; width: 60px; height: 60px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: rgba(0,0,12,.5); border: 1px solid rgba(0,200,255,.1); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.at-etm-ms-patch:hover { transform: scale(1.08); box-shadow: 0 0 12px var(--etm-color,rgba(0,200,255,.4)); }
.at-etm-ms-patch img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.at-etm-ms-none { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.2); font-style: italic; }
/* Cohort preview */
.at-etm-cohort { padding: 16px 20px; border-top: 1px solid rgba(0,200,255,.08); }
.at-etm-cohort-hdr { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--etm-color); opacity: .7; margin-bottom: 12px; }
/* Responsive */
@media (max-width: 800px) {
.at-etm-dos-body { grid-template-columns: 1fr; }
.at-etm-stat-grid { border-right: none; }
}
@media (max-width: 600px) {
.at-etm-dos-hd { flex-wrap: wrap; }
.at-etm-dos-badge { display: none; }
.at-etm-dna-label { width: 90px; font-size: 9px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.at-etm-dna-fill { transition: none; }
.at-etm-node-dot { transition: none; }
}
/* Era cohort wrap */
.at-era-cohort-wrap { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.at-era-cohort-wrap .at-era-group[hidden] { display: none; }
/* ── Space Event Command Center ──────────────────────────────────────────── */
/* Hero */
.scc-hero {
position: relative;
overflow: hidden;
padding: 48px 0 32px;
background:
radial-gradient(ellipse at top, rgba(0,51,255,.18) 0%, transparent 70%),
var(--bg-deep, #000008);
border-bottom: 1px solid rgba(0,200,255,.1);
}
/* All direct children of scc-hero need z-index to clear the abs background layers */
.scc-hero > .container { position: relative; z-index: 1; }
.scc-hero-inner { text-align: center; margin-bottom: 28px; position: relative; }
.scc-quick-strip { position: relative; }
.scc-hero-sub {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
margin-top: 8px;
}
/* Hero quick-card strip */
.scc-quick-strip {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
}
.scc-qcard {
flex: 0 0 200px;
background: rgba(0,200,255,.04);
border: 1px solid rgba(0,200,255,.12);
border-radius: 6px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
transition: border-color .2s;
min-height: 120px;
}
.scc-qcard:hover { border-color: rgba(0,200,255,.3); }
.scc-qcard--launch { border-top: 2px solid var(--blue-bright); }
.scc-qcard--moon { border-top: 2px solid #c0c8e0; }
.scc-qcard--meteor { border-top: 2px solid #f4a030; }
.scc-qcard--meteor.scc-qcard--active { border-top-color: #ff6b35; background: rgba(255,107,53,.06); }
.scc-qcard--spaceevent { border-top: 2px solid #c084fc; }
.scc-qcard--live { border-top: 2px solid #22c55e; background: rgba(34,197,94,.04); }
.scc-qcard--glance { border-top: 2px solid var(--teal); }
.scc-qcard-eyebrow { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.scc-qcard-title { font-family: var(--font-mono); font-size: 13px; color: var(--text); line-height: 1.3; }
.scc-qcard-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.scc-qcard-sub { font-family: var(--font-mono); font-size: 10px; color: var(--teal); }
.scc-qcard-countdown{ font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--blue-bright); margin-top: 4px; }
.scc-qcard-btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: #22c55e; border: 1px solid rgba(34,197,94,.3); border-radius: 3px; padding: 3px 10px; margin-top: 6px; text-decoration: none; width: fit-content; transition: background .15s; }
.scc-qcard-btn:hover { background: rgba(34,197,94,.1); }
.scc-qcard-live-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: #ff6b35; background: rgba(255,107,53,.1); border: 1px solid rgba(255,107,53,.3); border-radius: 3px; padding: 2px 6px; width: fit-content; margin-top: 4px; }
.scc-status { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; width: fit-content; margin-top: 4px; }
.scc-status--go { color: #34d399; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.25); }
.scc-status--tbd,.scc-status--tbc { color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.scc-status--hold { color: #fbbf24; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25); }
.scc-tbd { font-family: var(--font-mono); font-size: 10px; color: var(--muted); font-style: italic; }
.scc-live-dot { display: inline-block; width: 7px; height: 7px; background: #22c55e; border-radius: 50%; animation: liveBlink 1.2s ease-in-out infinite; margin-right: 4px; }
/* Glance counts */
.scc-glance-counts { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.scc-glance-row { display: flex; align-items: center; gap: 6px; }
.scc-glance-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.scc-glance-val { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--text); min-width: 20px; }
.scc-glance-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: .04em; }
/* Event Horizon Rail */
.scc-horizon {
background: rgba(0,0,6,.95);
border-bottom: 1px solid rgba(0,200,255,.1);
position: sticky;
top: var(--nav-height);
z-index: 100;
backdrop-filter: blur(12px);
}
.scc-horizon-rail {
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.scc-horizon-rail::-webkit-scrollbar { display: none; }
.scc-hz-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 12px 20px 10px;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
cursor: pointer;
color: var(--muted);
transition: color .2s, border-color .2s;
white-space: nowrap;
flex-shrink: 0;
}
.scc-hz-tab:hover { color: var(--text); }
.scc-hz-tab--active { color: var(--teal); border-bottom-color: var(--teal); }
.scc-hz-icon { font-size: 14px; }
.scc-hz-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.scc-hz-count { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: inherit; }
.scc-hz-tab--active .scc-hz-count { color: var(--teal); }
/* Tonight from location */
.scc-tonight {
padding: 28px 0;
background: rgba(0,0,8,.5);
border-top: 1px solid rgba(0,200,255,.08);
border-bottom: 1px solid rgba(0,200,255,.08);
}
.scc-tonight-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.scc-tonight-icon { font-size: 16px; color: var(--teal); }
.scc-tonight-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.scc-tonight-loc { font-family: var(--font-mono); font-size: 11px; color: var(--teal); opacity: .7; margin-left: auto; }
.scc-tonight-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.scc-tonight-card {
background: rgba(0,200,255,.04);
border: 1px solid rgba(0,200,255,.1);
border-radius: 6px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.scc-tonight-card--skel {
min-height: 100px;
background: linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 75%);
background-size: 200% 100%;
animation: gal-shimmer 1.6s infinite;
border-color: transparent;
}
.scc-tonight-card--active { border-color: rgba(255,107,53,.3); background: rgba(255,107,53,.05); }
.scc-tc-icon { font-size: 20px; }
.scc-tc-title { font-family: var(--font-mono); font-size: 12px; color: var(--text); line-height: 1.3; }
.scc-tc-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.scc-tc-sub { font-family: var(--font-mono); font-size: 10px; color: var(--teal); opacity: .8; }
.scc-tc-link { font-family: var(--font-mono); font-size: 10px; color: var(--teal); text-decoration: none; margin-top: 4px; }
.scc-tc-link:hover { text-decoration: underline; }
.scc-tonight-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.scc-tl-link {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .08em;
color: var(--muted);
border: 1px solid rgba(0,200,255,.15);
border-radius: 3px;
padding: 4px 10px;
text-decoration: none;
transition: color .15s, border-color .15s;
}
.scc-tl-link:hover { color: var(--teal); border-color: var(--teal); }
/* Archive section */
.scc-archive-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 0 20px;
flex-wrap: wrap;
}
.scc-archive-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.scc-archive-select {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text);
background: rgba(0,0,12,.8);
border: 1px solid rgba(0,200,255,.2);
border-radius: 4px;
padding: 6px 12px;
cursor: pointer;
}
.scc-archive-load-btn {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .08em;
color: var(--teal);
background: transparent;
border: 1px solid rgba(0,200,255,.3);
border-radius: 4px;
padding: 6px 16px;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.scc-archive-load-btn:hover { background: rgba(0,200,255,.07); border-color: var(--teal); }
.scc-archive-month { margin-bottom: 20px; }
.scc-archive-events { display: flex; flex-direction: column; gap: 4px; }
.scc-arc-row {
display: grid;
grid-template-columns: 90px 1fr 60px 80px;
gap: 10px;
align-items: center;
padding: 7px 10px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(0,51,255,.08);
border-radius: 3px;
font-family: var(--font-mono);
font-size: 11px;
}
.scc-arc-date { color: var(--muted); flex-shrink: 0; }
.scc-arc-title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scc-arc-src { color: rgba(0,200,255,.4); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; text-align: right; }
/* Attribution footer */
.scc-attribution {
padding: 20px 0;
text-align: center;
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255,255,255,.25);
letter-spacing: .06em;
line-height: 1.7;
}
.scc-attribution a { color: var(--teal); text-decoration: none; }
.scc-attribution a:hover { text-decoration: underline; }
/* Mobile */
@media (max-width: 700px) {
.scc-quick-strip { gap: 8px; }
.scc-qcard { flex: 0 0 160px; padding: 12px; min-height: 100px; }
.scc-tonight-grid { grid-template-columns: 1fr 1fr; }
.scc-arc-row { grid-template-columns: 80px 1fr 50px; }
.scc-arc-src { display: none; }
}
@media (max-width: 480px) {
.scc-tonight-grid { grid-template-columns: 1fr; }
.scc-hz-tab { padding: 10px 14px 8px; }
.scc-hz-label { font-size: 9px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.scc-live-dot { animation: none; }
.scc-tonight-card--skel { animation: none; }
}
/* Archive controls additions */
.scc-archive-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scc-archive-type-filters { display: flex; gap: 4px; }
.scc-arc-type {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
color: var(--muted); background: transparent;
border: 1px solid rgba(0,200,255,.15); border-radius: 3px;
padding: 4px 10px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.scc-arc-type:hover, .scc-arc-type--active {
color: var(--teal); border-color: var(--teal); background: rgba(0,200,255,.07);
}
.scc-archive-search-input {
font-family: var(--font-mono); font-size: 12px;
color: var(--text); background: rgba(0,0,12,.7);
border: 1px solid rgba(0,200,255,.2); border-radius: 4px;
padding: 6px 12px; width: 200px; margin-left: auto;
transition: border-color .2s;
}
.scc-archive-search-input:focus { outline: none; border-color: var(--teal); }
.scc-archive-loading {
display: flex; align-items: center; gap: 10px; padding: 24px 0;
font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.scc-archive-stats {
display: flex; gap: 12px; flex-wrap: wrap;
padding: 10px 0; border-top: 1px solid rgba(0,200,255,.08); margin-top: 8px;
}
.scc-arc-stat {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
color: var(--muted); background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08); border-radius: 3px; padding: 3px 8px;
}
.scc-arc-stat--ok { color: #34d399; border-color: rgba(52,211,153,.25); background: rgba(52,211,153,.07); }
.scc-arc-stat--fail { color: #f87171; border-color: rgba(248,113,113,.25); background: rgba(248,113,113,.07); }
.scc-arc-mo-count {
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
background: rgba(255,255,255,.06); border-radius: 3px; padding: 1px 6px; margin-left: 6px;
}
/* Wider archive row for time column */
.scc-archive-events .scc-arc-row {
grid-template-columns: 90px 60px 1fr 120px 60px;
}
.scc-arc-time { color: rgba(0,200,255,.45); font-size: 10px; }
.scc-arc-agency { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
.scc-archive-search-input { width: 100%; margin-left: 0; margin-top: 8px; }
.scc-archive-controls { width: 100%; }
.scc-archive-events .scc-arc-row { grid-template-columns: 80px 1fr 50px; }
.scc-arc-time, .scc-arc-agency { display: none; }
}
/* ── Time display: local primary, UTC secondary ──────────────────────────── */
.scc-local-time-primary {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
font-weight: 600;
display: block;
}
.scc-utc-secondary {
font-family: var(--font-mono);
font-size: 10px;
color: rgba(255,255,255,.35);
letter-spacing: .04em;
}
/* In "both" mode, ensure local appears before UTC in the event card time row */
.ec-time-row { flex-direction: row; }
.ec-local-time { order: 1; }
.ec-utc { order: 2; }
/* ── Launch Manifest Command Board ──────────────────────────────────────── */
/* Card skeleton */
.lb-card--skel {
background: linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);
background-size: 200% 100%;
animation: gal-shimmer 1.6s infinite;
height: 200px; border-radius: 4px; pointer-events: none;
}
/* Card status ribbon (colored left border) */
.lb-card { position: relative; border-left: 3px solid var(--status-color, rgba(0,200,255,.3)); }
.lb-card-ribbon { display: none; } /* placeholder — border-left does the ribbon */
/* Card probability bar */
.lb-card-prob {
height: 3px; background: rgba(255,255,255,.08); border-radius: 2px;
overflow: hidden; margin-top: 8px;
}
.lb-card-prob span { display: block; height: 100%; background: var(--status-color,var(--teal)); border-radius: 2px; }
/* Card countdown pill */
.lb-card-cd {
font-family: var(--font-orb); font-size: 11px; font-weight: 700;
color: var(--blue-bright); letter-spacing: .06em; margin-top: 6px;
}
/* Smart mission badges */
.lb-card-smb { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lb-smb {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
padding: 2px 6px; border-radius: 3px; border: 1px solid currentColor; opacity: .85;
}
.lb-smb--crew { color: #c084fc; border-color: rgba(192,132,252,.35); background: rgba(192,132,252,.08); }
.lb-smb--iss { color: #60a5fa; border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.08); }
.lb-smb--lunar { color: #fbbf24; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); }
.lb-smb--starship { color: #34d399; border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.08); }
.lb-smb--deep { color: #a78bfa; border-color: rgba(167,139,250,.35); background: rgba(167,139,250,.08); }
.lb-smb--natsec { color: #f87171; border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08); }
.lb-smb--rideshare { color: var(--muted); border-color: rgba(255,255,255,.12); }
.lb-smb--live { color: #22c55e; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); animation: liveBlink 1.4s ease-in-out infinite; }
/* Special card treatments */
.lb-card--crew { border-left-color: #c084fc; }
.lb-card--iss { border-left-color: #60a5fa; }
.lb-card--lunar { border-left-color: #fbbf24; }
.lb-card--starship { border-left-color: #34d399; }
.lb-card--deep { border-left-color: #a78bfa; }
.lb-card--failure { border-left-color: #f87171; opacity: .85; }
.lb-card--success { border-left-color: #34d399; }
/* Status filter chip rail */
.lb-status-rail {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 10px 0 4px;
border-top: 1px solid rgba(0,200,255,.07);
}
.lb-sc-chip {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted); background: transparent;
border: 1px solid rgba(0,200,255,.15); border-radius: 3px;
padding: 4px 10px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
display: flex; align-items: center; gap: 5px;
}
.lb-sc-chip span { font-family: var(--font-orb); font-size: 11px; font-weight: 700; color: var(--teal); }
.lb-sc-chip:hover { color: var(--text); border-color: rgba(0,200,255,.35); }
.lb-sc-chip--active { color: var(--teal); border-color: var(--teal); background: rgba(0,200,255,.08); }
/* View mode toggle */
.lb-view-modes { display: flex; gap: 2px; margin-left: auto; }
.lb-vm-btn {
font-size: 16px; color: var(--muted); background: transparent;
border: 1px solid rgba(0,200,255,.12); border-radius: 3px;
padding: 5px 9px; cursor: pointer; line-height: 1;
transition: color .15s, border-color .15s, background .15s;
}
.lb-vm-btn:hover { color: var(--text); border-color: rgba(0,200,255,.3); }
.lb-vm-btn--active { color: var(--teal); border-color: var(--teal); background: rgba(0,200,255,.07); }
/* Date group headers */
.lb-date-group { margin-bottom: 24px; }
.lb-date-group-hdr {
display: flex; align-items: center; gap: 10px;
padding: 8px 0 10px; margin-bottom: 12px;
border-bottom: 1px solid rgba(0,200,255,.1);
}
.lb-date-group-label {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
color: var(--teal);
}
.lb-date-group-count {
font-family: var(--font-orb); font-size: 12px; font-weight: 700;
color: rgba(0,200,255,.4);
}
.lb-date-group-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; }
/* ── Timeline view ──────────────────────────────────────────────────────── */
.lb-grid--timeline { display: flex; flex-direction: column; gap: 0; }
.lb-tl-item {
display: grid; grid-template-columns: auto 1fr auto;
gap: 14px; align-items: start;
padding: 14px 0; border-bottom: 1px solid rgba(0,200,255,.06);
cursor: pointer; position: relative;
transition: background .15s;
}
.lb-tl-item:hover { background: rgba(0,200,255,.03); border-radius: 4px; }
.lb-tl-dot {
width: 10px; height: 10px; border-radius: 50%; margin-top: 5px;
background: var(--status-color, rgba(0,200,255,.5));
box-shadow: 0 0 8px var(--status-color, rgba(0,200,255,.3));
flex-shrink: 0;
}
.lb-tl-body { min-width: 0; }
.lb-tl-time { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: .08em; margin-bottom: 3px; }
.lb-tl-name { font-family: var(--font-mono); font-size: 14px; color: var(--text); margin-bottom: 3px; }
.lb-tl-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-tl-row2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.lb-tl-thumb { width: 64px; height: 64px; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.lb-tl-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
/* Vertical connector line */
.lb-grid--timeline .lb-tl-item:not(:last-child) .lb-tl-dot::after {
content: ''; position: absolute; left: 4px; top: 24px;
width: 2px; height: calc(100% - 14px);
background: rgba(0,200,255,.1);
}
/* ── Compact Manifest view ──────────────────────────────────────────────── */
.lb-grid--compact { display: flex; flex-direction: column; gap: 2px; }
.lb-compact-hdr {
display: grid;
grid-template-columns: 60px 80px 1fr 130px 60px 140px 80px;
gap: 10px; padding: 6px 10px;
font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
color: rgba(0,200,255,.4);
border-bottom: 1px solid rgba(0,200,255,.1);
}
.lb-compact-row {
display: grid;
grid-template-columns: 60px 80px 1fr 130px 60px 140px 80px;
gap: 10px; align-items: center;
padding: 7px 10px; border-radius: 3px;
border: 1px solid rgba(0,200,255,.05);
cursor: pointer; font-family: var(--font-mono); font-size: 12px;
transition: background .12s, border-color .12s;
}
.lb-compact-row:hover { background: rgba(0,200,255,.04); border-color: rgba(0,200,255,.15); }
.lb-compact-row:focus-visible { outline: 1px solid var(--teal); }
.lb-cr-net { color: var(--muted); font-size: 11px; white-space: nowrap; }
.lb-cr-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-cr-vehicle{ color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.lb-cr-agency { color: rgba(0,200,255,.6); font-size: 11px; }
.lb-cr-loc { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-cr-badges { display: flex; gap: 3px; }
/* Profile copy-link + header */
.lb-prof-header {
display: flex; align-items: center; gap: 8px; padding-bottom: 12px; flex-wrap: wrap;
}
.lb-prof-copylink {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
color: var(--muted); background: transparent;
border: 1px solid rgba(0,200,255,.2); border-radius: 3px;
padding: 5px 12px; cursor: pointer; margin-left: auto;
transition: color .15s, border-color .15s;
}
.lb-prof-copylink:hover { color: var(--teal); border-color: var(--teal); }
/* Mobile */
@media (max-width: 700px) {
.lb-date-group-cards { grid-template-columns: 1fr; }
.lb-compact-hdr, .lb-compact-row {
grid-template-columns: 55px 1fr 50px 55px;
}
.lb-cr-vehicle, .lb-cr-agency, .lb-cr-loc { display: none; }
.lb-tl-thumb { display: none; }
.lb-view-modes { display: none; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.lb-smb--live { animation: none; }
.lb-card--skel { animation: none; }
}
/* ── Astronaut Quick-Profile Modal (from launch dossier) ──────────────────────── */
.dos-astro-overlay {
position: fixed; inset: 0; z-index: 1400;
background: rgba(0,0,0,.6);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.dos-astro-overlay[hidden] { display: none !important; }
.dos-astro-box {
background: #080c1e;
border: 1px solid rgba(0,200,255,.2);
border-radius: 8px;
box-shadow: 0 40px 100px rgba(0,0,0,.9), 0 0 0 1px rgba(0,200,255,.06);
width: min(480px, 100%);
max-height: 88vh; overflow-y: auto;
animation: at-modal-in .2s ease;
}
.dos-astro-card { padding: 0 0 20px; }
.dos-astro-close {
position: absolute; top: 12px; right: 14px;
background: transparent; border: none;
font-size: 16px; color: var(--muted); cursor: pointer; line-height: 1;
padding: 4px 8px;
}
.dos-astro-close:hover { color: var(--text); }
.dos-astro-box { position: relative; }
.dos-astro-head {
display: flex; gap: 16px; align-items: flex-start;
padding: 24px 20px 16px;
border-bottom: 1px solid rgba(0,200,255,.07);
}
.dos-astro-photo-wrap {
width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;
overflow: hidden; border: 2px solid rgba(0,200,255,.25);
background: rgba(0,200,255,.05);
}
.dos-astro-photo { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dos-astro-initials {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--teal);
}
.dos-astro-role {
display: inline-block;
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
text-transform: uppercase; font-weight: 700;
border: 1px solid; border-radius: 3px;
padding: 2px 8px; margin-bottom: 6px;
}
.dos-astro-name {
font-family: var(--font-orb); font-size: 18px; font-weight: 900;
color: var(--text); line-height: 1.2;
}
.dos-astro-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }
.dos-astro-status { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 4px; }
.dos-astro-status--inspace { color: #34d399; }
.dos-astro-stats {
display: flex; gap: 0;
border-bottom: 1px solid rgba(0,200,255,.07);
margin: 0;
}
.dos-astro-stat {
flex: 1; display: flex; flex-direction: column; align-items: center;
padding: 12px 8px;
border-right: 1px solid rgba(0,200,255,.07);
}
.dos-astro-stat:last-child { border-right: none; }
.dos-astro-stat-val {
font-family: var(--font-mono); font-size: 20px; font-weight: 700;
color: var(--teal); line-height: 1;
}
.dos-astro-stat-key {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
color: var(--muted); text-transform: uppercase; margin-top: 3px;
}
.dos-astro-bio {
font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
color: rgba(255,255,255,.55); padding: 14px 20px 0; margin: 0;
}
.dos-astro-actions {
display: flex; gap: 10px; flex-wrap: wrap;
padding: 16px 20px 0;
}
.dos-astro-btn {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
border: 1px solid rgba(0,200,255,.25); border-radius: 4px;
padding: 8px 16px; text-decoration: none; color: var(--teal);
background: transparent; transition: background .15s, border-color .15s;
}
.dos-astro-btn:hover { background: rgba(0,200,255,.08); border-color: var(--teal); }
.dos-astro-btn--primary {
background: rgba(0,200,255,.1); border-color: rgba(0,200,255,.4);
}
/* ── Mission Dossier Modal ───────────────────────────────────────────────────── */
.dos-modal-overlay {
position: fixed; inset: 0; z-index: 1200;
background: rgba(0,0,0,.75);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
display: flex; align-items: flex-start; justify-content: center;
padding: 20px;
overflow-y: auto; /* overlay scrolls when dossier content is very long */
}
.dos-modal-overlay[hidden] { display: none !important; }
.dos-modal-box {
position: relative;
background: #080c1e;
border: 1px solid rgba(0,200,255,.18);
border-radius: 8px;
box-shadow: 0 32px 100px rgba(0,0,0,.9), 0 0 0 1px rgba(0,200,255,.06);
width: min(900px, 100%);
/* dvh accounts for mobile browser chrome; overlay padding (40px) subtracted so
the box never extends beyond the visible area. Falls back to vh on older browsers. */
max-height: calc(100dvh - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
overflow-x: hidden;
animation: at-modal-in .22s ease;
scrollbar-width: thin;
scrollbar-color: rgba(0,200,255,.25) transparent;
}
.dos-modal-box::-webkit-scrollbar { width: 5px; }
.dos-modal-box::-webkit-scrollbar-track { background: transparent; }
.dos-modal-box::-webkit-scrollbar-thumb {
background: rgba(0,200,255,.22);
border-radius: 99px;
}
.dos-modal-box::-webkit-scrollbar-thumb:hover { background: rgba(0,200,255,.45); }
.dos-modal-loading {
display: flex; align-items: center; gap: 10px;
padding: 80px 24px; justify-content: center;
color: var(--muted); font-family: var(--font-mono); font-size: 12px;
}
/* ── Mission Dossier ────────────────────────────────────────────────────────── */
.dos-page {
--dos-color: #60a5fa;
background: var(--surface);
border-radius: 8px;
overflow: hidden;
}
/* Toolbar */
.dos-toolbar {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: rgba(0,0,0,.35);
border-bottom: 1px solid rgba(0,200,255,.08);
}
.dos-close-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
color: var(--muted); background: transparent;
border: 1px solid rgba(0,200,255,.15); border-radius: 3px;
padding: 5px 12px; cursor: pointer;
transition: color .15s, border-color .15s;
}
.dos-close-btn:hover { color: #f87171; border-color: #f87171; }
.dos-copy-btn {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
color: var(--muted); background: transparent;
border: 1px solid rgba(0,200,255,.15); border-radius: 3px;
padding: 5px 12px; cursor: pointer; margin-left: auto;
transition: color .15s, border-color .15s;
}
.dos-copy-btn:hover { color: var(--teal); border-color: var(--teal); }
/* Hero */
.dos-hero {
position: relative; overflow: hidden;
min-height: 280px;
display: flex; flex-direction: column; justify-content: flex-end;
background: #080c18;
}
.dos-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center top;
filter: blur(2px) brightness(.45);
transform: scale(1.04);
}
.dos-hero-bg--none { background: linear-gradient(135deg, #0a0e1f 0%, #0d1530 100%); filter: none; }
.dos-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(6,10,28,.92) 0%, rgba(6,10,28,.5) 60%, transparent 100%);
}
.dos-hero-content {
position: relative; z-index: 1;
display: flex; align-items: flex-end; gap: 20px;
padding: 24px 24px 20px;
}
.dos-hero-patch {
flex-shrink: 0;
width: 88px; height: 88px;
border-radius: 50%; overflow: hidden;
border: 2px solid rgba(0,200,255,.3);
box-shadow: 0 0 20px rgba(0,200,255,.2);
background: rgba(0,0,0,.4);
}
.dos-hero-patch img { width: 100%; height: 100%; object-fit: cover; }
.dos-hero-main { flex: 1; min-width: 0; }
.dos-hero-eyebrow {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px; flex-wrap: wrap;
}
.dos-live-pill {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
color: #f87171; border: 1px solid #f87171; border-radius: 2px;
padding: 2px 7px;
animation: at-live-blink 1.5s infinite;
}
.dos-orbit-chip {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
color: var(--teal); border: 1px solid rgba(0,200,255,.25); border-radius: 2px;
padding: 2px 7px;
}
.dos-hero-name {
font-family: var(--font-orb); font-size: clamp(18px, 3vw, 28px);
font-weight: 900; color: #fff; line-height: 1.15; margin: 0 0 6px;
}
.dos-hero-sub {
display: flex; flex-wrap: wrap; gap: 12px;
font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.55);
margin-bottom: 10px;
}
.dos-hero-sub span + span::before { content: '·'; margin-right: 12px; }
.dos-countdown {
font-family: var(--font-mono); font-size: 22px; font-weight: 700;
color: var(--dos-color); letter-spacing: .06em;
margin-bottom: 8px;
}
.dos-elapsed {
font-family: var(--font-mono); font-size: 13px;
color: rgba(255,255,255,.45); margin-bottom: 8px;
}
.dos-hero-times {
display: flex; flex-direction: column; gap: 2px;
font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.4);
}
.dos-time-local { color: rgba(255,255,255,.6); }
.dos-hero-badges {
display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
}
.dos-webcast-btn {
display: inline-block; margin-top: 10px;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
color: #f87171; border: 1px solid #f87171; border-radius: 4px;
padding: 6px 14px; text-decoration: none;
transition: background .15s;
animation: at-live-blink 1.5s infinite;
}
.dos-webcast-btn:hover { background: rgba(248,113,113,.15); }
.dos-hero-img-side {
flex-shrink: 0; width: 100px; height: 110px;
border-radius: 4px; overflow: hidden;
border: 1px solid rgba(0,200,255,.15);
}
.dos-hero-img-side img { width: 100%; height: 100%; object-fit: cover; }
/* Status theme tints */
.dos-hero--go { --dos-color: #34d399; }
.dos-hero--success { --dos-color: #34d399; }
.dos-hero--failure { --dos-color: #f87171; }
.dos-hero--tbd { --dos-color: #6b7280; }
.dos-hero--tbc { --dos-color: #60a5fa; }
/* Readiness strip */
.dos-strip {
display: flex; flex-wrap: wrap; gap: 0;
border-bottom: 1px solid rgba(0,200,255,.07);
background: rgba(0,0,0,.25);
}
.dos-strip-item {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 16px;
border-right: 1px solid rgba(0,200,255,.06);
min-width: 100px;
}
.dos-strip-icon { font-size: 10px; color: var(--dos-color); margin-bottom: 1px; }
.dos-strip-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.dos-strip-val { font-family: var(--font-mono); font-size: 11px; color: var(--text); font-weight: 600; }
/* Two-column body */
.dos-body {
display: grid;
grid-template-columns: 1fr 320px;
gap: 0;
align-items: start;
}
.dos-col-main {
border-right: 1px solid rgba(0,200,255,.06);
padding: 0;
}
.dos-col-side {
padding: 0;
}
/* Section */
.dos-section {
padding: 18px 20px;
border-bottom: 1px solid rgba(0,200,255,.06);
}
.dos-section:last-child { border-bottom: none; }
.dos-section-hdr {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
color: var(--muted); text-transform: uppercase; margin-bottom: 12px;
}
.dos-section-icon { color: var(--dos-color); font-size: 12px; }
.dos-section-cta {
margin-left: auto; font-family: var(--font-mono); font-size: 10px;
color: var(--teal); text-decoration: none;
}
.dos-section-cta:hover { text-decoration: underline; }
.dos-section-count {
margin-left: auto; font-family: var(--font-mono); font-size: 10px;
color: var(--muted);
}
/* Mission brief */
.dos-brief-text { font-family: var(--font-mono); font-size: 12px; line-height: 1.75; color: rgba(255,255,255,.65); margin: 0; }
.dos-alert { font-family: var(--font-mono); font-size: 11px; border-radius: 4px; padding: 8px 12px; margin-top: 8px; }
.dos-alert--warn { color: #fbbf24; border: 1px solid rgba(251,191,36,.2); background: rgba(251,191,36,.05); }
.dos-alert--fail { color: #f87171; border: 1px solid rgba(248,113,113,.2); background: rgba(248,113,113,.05); }
/* Vehicle */
.dos-vehicle-card {
display: flex; align-items: center; gap: 16px;
background: rgba(0,200,255,.03); border: 1px solid rgba(0,200,255,.1);
border-radius: 6px; padding: 14px 14px;
overflow: hidden;
}
.dos-rocket-svg {
flex-shrink: 0;
display: flex; align-items: flex-end; justify-content: center;
min-width: 40px;
}
.dos-rocket-svg svg { display: block; }
.dos-vehicle-info { flex: 1; min-width: 0; }
.dos-vehicle-name { font-family: var(--font-orb); font-size: 15px; font-weight: 700; color: var(--text); }
.dos-vehicle-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
/* Pad */
.dos-pad-card {
background: rgba(0,0,0,.25); border: 1px solid rgba(0,200,255,.08);
border-radius: 6px; padding: 12px 14px;
display: flex; flex-direction: column; gap: 4px;
}
.dos-pad-name { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--text); }
.dos-pad-loc { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.6); }
.dos-pad-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.dos-pad-coords { font-family: var(--font-mono); font-size: 10px; color: var(--teal); }
.dos-pad-maps { font-family: var(--font-mono); font-size: 10px; color: var(--teal); text-decoration: none; margin-top: 4px; }
.dos-pad-maps:hover { text-decoration: underline; }
/* Timeline */
.dos-timeline { display: flex; flex-direction: column; gap: 0; }
.dos-tl-event {
display: flex; align-items: baseline; gap: 8px;
padding: 7px 0;
border-bottom: 1px solid rgba(0,200,255,.05);
font-family: var(--font-mono); font-size: 11px;
}
.dos-tl-event:last-child { border-bottom: none; }
.dos-tl-event--main .dos-tl-label { color: var(--dos-color); font-weight: 700; }
.dos-tl-event--note { opacity: .6; }
.dos-tl-icon { color: var(--dos-color); font-size: 10px; flex-shrink: 0; }
.dos-tl-label { color: rgba(255,255,255,.7); flex: 1; }
.dos-tl-time { color: var(--muted); font-size: 10px; }
/* Agency section */
.dos-agency-card {
display: flex; align-items: center; gap: 12px;
background: rgba(0,0,0,.2); border: 1px solid rgba(0,200,255,.08);
border-radius: 6px; padding: 10px 14px;
}
.dos-agency-abbrev { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--dos-color); }
.dos-agency-name { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.dos-agency-country { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
/* Media rail */
.dos-media-rail {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.dos-media-btn {
font-family: var(--font-mono); font-size: 11px;
color: var(--teal); border: 1px solid rgba(0,200,255,.2); border-radius: 4px;
padding: 7px 14px; text-decoration: none; background: transparent;
transition: background .15s, border-color .15s;
}
.dos-media-btn:hover { background: rgba(0,200,255,.07); border-color: var(--teal); }
.dos-media-btn--live { color: #f87171; border-color: rgba(248,113,113,.35); animation: at-live-blink 1.5s infinite; }
.dos-media-btn--live:hover { background: rgba(248,113,113,.08); }
.dos-attribution { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 8px; }
.dos-attribution a { color: var(--muted); text-decoration: none; }
.dos-attribution a:hover { color: var(--teal); }
/* Related missions */
.dos-related-row {
display: grid; grid-template-columns: 85px 1fr auto auto;
align-items: center; gap: 10px; width: 100%;
padding: 8px 0; border-bottom: 1px solid rgba(0,200,255,.05);
background: transparent; border-left: none; border-right: none; border-top: none;
color: var(--text); cursor: pointer; text-align: left;
transition: background .1s;
}
.dos-related-row:last-child { border-bottom: none; }
.dos-related-row:hover { background: rgba(0,200,255,.06); }
.dos-rel-date { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.dos-rel-name { font-family: var(--font-mono); font-size: 12px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dos-rel-veh { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.dos-more-note { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 8px; }
/* Crew role badge (old vertical grid — kept for other pages) */
.lb-crew-role {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
color: var(--teal); text-transform: uppercase;
margin-bottom: 1px;
}
/* ── Dossier crew row layout ─────────────────────────────────────────────── */
.dos-crew-list {
display: flex; flex-direction: column;
border: 1px solid rgba(0,200,255,.08);
border-radius: 6px; overflow: hidden;
}
.dos-crew-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid rgba(0,200,255,.06);
text-decoration: none; color: var(--text);
transition: background .12s;
}
.dos-crew-row:last-child { border-bottom: none; }
.dos-crew-row:hover { background: rgba(0,200,255,.06); }
.dos-crew-avatar {
width: 44px; height: 44px; border-radius: 50%;
overflow: hidden; flex-shrink: 0;
border: 1px solid rgba(0,200,255,.2);
background: rgba(0,200,255,.05);
}
.dos-crew-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dos-crew-initials {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 14px; font-weight: 700;
color: var(--teal);
}
.dos-crew-info { flex: 1; min-width: 0; }
.dos-crew-name {
font-family: var(--font-mono); font-size: 13px; font-weight: 600;
color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dos-crew-sub {
font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px;
}
.dos-crew-role-badge {
flex-shrink: 0;
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
color: var(--rc, var(--teal));
border: 1px solid var(--rc, var(--teal));
border-radius: 3px; padding: 3px 8px;
opacity: .85;
}
.dos-crew-arrow {
flex-shrink: 0; font-size: 11px; color: var(--muted);
opacity: 0; transition: opacity .12s;
}
.dos-crew-row:hover .dos-crew-arrow { opacity: 1; }
/* Relationship web */
.dos-web-layout { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dos-web-svg { flex-shrink: 0; opacity: .75; }
.dos-web-nodes { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; }
.dos-web-node {
display: flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 11px; color: var(--teal);
text-decoration: none; padding: 5px 10px;
border: 1px solid rgba(0,200,255,.15); border-radius: 4px;
background: rgba(0,200,255,.03);
transition: background .12s;
}
.dos-web-node:hover { background: rgba(0,200,255,.08); }
.dos-web-node--static { color: rgba(255,255,255,.5); cursor: default; }
.dos-web-node span:first-child { color: var(--dos-color); font-size: 12px; }
/* Responsive */
@media (max-width: 860px) {
.dos-body { grid-template-columns: 1fr; }
.dos-col-main { border-right: none; border-bottom: 1px solid rgba(0,200,255,.06); }
.dos-hero-content { flex-direction: column; align-items: flex-start; }
.dos-hero-img-side { display: none; }
.dos-hero-patch { width: 68px; height: 68px; }
}
@media (max-width: 600px) {
.dos-strip-item { min-width: 0; padding: 8px 12px; }
.dos-strip-val { font-size: 10px; }
.dos-related-row { grid-template-columns: 70px 1fr auto; }
.dos-rel-veh { display: none; }
.dos-web-svg { display: none; }
.dos-modal-overlay { padding: 8px; }
.dos-modal-box { max-height: calc(100dvh - 16px); max-height: calc(100vh - 16px); border-radius: 6px; }
}
/* ── Spacecraft Command Center ───────────────────────────────────────────────── */
/* Hero */
.sc-hero { position: relative; overflow: hidden; }
.sc-hero-orbit-ring {
position: absolute; border-radius: 50%;
border: 1px solid rgba(0,200,255,.08);
width: 600px; height: 600px;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
animation: sc-orbit-spin 40s linear infinite;
pointer-events: none;
}
.sc-hero-orbit-ring--2 { width: 900px; height: 900px; border-color: rgba(0,200,255,.04); animation-duration: 65s; animation-direction: reverse; }
@keyframes sc-orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
/* Hero stat chips */
.sc-hero-stats {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 24px;
}
.sc-stat-chip {
display: flex; flex-direction: column; align-items: center;
padding: 10px 16px; min-width: 90px;
background: rgba(0,0,0,.35);
border: 1px solid rgba(0,200,255,.15);
border-radius: 6px;
}
.sc-stat-chip--live { border-color: rgba(52,211,153,.3); }
.sc-stat-chip--skel { height: 60px; background: rgba(255,255,255,.04); animation: at-skel-pulse 1.4s infinite; }
.sc-stat-icon { font-size: 12px; color: var(--teal); margin-bottom: 4px; }
.sc-stat-val { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; }
.sc-stat-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
/* Filter pills */
.sc-filter-rail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.sc-filter-pill {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
padding: 6px 14px; border-radius: 20px;
border: 1px solid rgba(0,200,255,.2);
background: transparent; color: var(--muted); cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.sc-filter-pill:hover { color: var(--text); border-color: rgba(0,200,255,.4); }
.sc-filter-pill--active { color: var(--teal); border-color: var(--teal); background: rgba(0,200,255,.08); }
/* Currently in space banner */
.sc-inspace-banner {
background: rgba(52,211,153,.06); border: 1px solid rgba(52,211,153,.2);
border-radius: 8px; padding: 14px 20px; margin-bottom: 24px;
}
.sc-inspace-label {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: #34d399; margin-bottom: 10px;
display: flex; align-items: center; gap: 8px;
}
.sc-live-dot {
width: 8px; height: 8px; border-radius: 50%; background: #34d399;
animation: at-live-blink 1.5s infinite;
}
.sc-inspace-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-inspace-chip {
display: flex; align-items: center; gap: 8px;
background: rgba(0,0,0,.3); border: 1px solid rgba(52,211,153,.15);
border-radius: 6px; padding: 8px 12px;
}
.sc-inspace-img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; }
.sc-inspace-placeholder { font-size: 20px; color: #34d399; }
.sc-inspace-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); }
.sc-inspace-config { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 1px; }
/* Section headers */
.sc-section-hdr {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted);
display: flex; align-items: center; gap: 8px;
padding: 20px 0 12px; border-bottom: 1px solid rgba(0,200,255,.07);
margin-bottom: 16px;
}
.sc-section-icon { color: var(--teal); font-size: 13px; }
.sc-section-sub { margin-left: auto; font-size: 10px; }
/* Search panel */
.sc-search-panel { margin-bottom: 20px; }
/* Fleet Hangar grid */
.sc-hangar {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px; margin-bottom: 24px;
}
/* Spacecraft card */
.sc-card {
background: rgba(255,255,255,.02);
border: 1px solid rgba(0,200,255,.12);
border-radius: 8px; overflow: hidden;
cursor: pointer; transition: border-color .2s, transform .15s, box-shadow .2s;
position: relative;
}
.sc-card:hover { border-color: rgba(0,200,255,.35); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.sc-card--active { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(0,200,255,.25); }
.sc-card--skel { height: 220px; animation: at-skel-pulse 1.4s infinite; }
/* Type color accents */
.sc-type--capsule { --sc-color: #60a5fa; }
.sc-type--cargo { --sc-color: #a78bfa; }
.sc-type--spaceplane{ --sc-color: #34d399; }
.sc-type--lander { --sc-color: #f59e0b; }
.sc-type--upper { --sc-color: #f87171; }
.sc-type--other { --sc-color: rgba(0,200,255,.7); }
.sc-card.sc-type--capsule { border-color: rgba(96,165,250,.2); }
.sc-card.sc-type--capsule:hover { border-color: rgba(96,165,250,.5); }
.sc-card.sc-type--spaceplane { border-color: rgba(52,211,153,.2); }
.sc-card.sc-type--lander { border-color: rgba(245,158,11,.2); }
.sc-card-img {
position: relative; height: 140px;
background: rgba(0,0,0,.4); overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.sc-card-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sc-card-silhouette { display: flex; align-items: center; justify-content: center; opacity: .5; }
.sc-card-type-icon {
position: absolute; top: 8px; right: 8px;
font-size: 14px; color: var(--sc-color, var(--teal));
background: rgba(0,0,0,.6); border-radius: 50%; width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
}
.sc-card-body { padding: 12px 14px; }
.sc-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.sc-card-name {
font-family: var(--font-orb); font-size: 15px; font-weight: 700;
color: var(--text); margin: 0 0 4px;
}
.sc-card-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.sc-card-maiden { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
.sc-card-stats {
display: flex; gap: 12px; margin-top: 8px;
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
/* Badges */
.sc-hr-badge {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
color: #34d399; border: 1px solid rgba(52,211,153,.35); border-radius: 3px;
padding: 2px 7px;
}
.sc-active-badge {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
color: #60a5fa; border: 1px solid rgba(96,165,250,.3); border-radius: 3px;
padding: 2px 7px;
}
.sc-retired-badge {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
color: var(--muted); border: 1px solid rgba(255,255,255,.1); border-radius: 3px;
padding: 2px 7px;
}
/* Profile panel */
/* sc-profile-wrap is now a modal overlay — uses at-modal-overlay base styles */
.sc-profile-wrap {
position: fixed; inset: 0; z-index: 1100;
display: flex; align-items: center; justify-content: center;
padding: 16px;
background: rgba(0,0,0,.65);
animation: at-modal-in .2s ease;
}
.sc-profile-wrap[hidden] { display: none !important; }
.sc-modal-backdrop {
position: fixed; inset: 0; z-index: 1099;
background: transparent;
}
.sc-modal-backdrop[hidden] { display: none !important; }
/* Inner box: scrollable, capped width */
.sc-profile-inner.at-modal-box {
position: relative;
background: #080c1e;
border: 1px solid rgba(0,200,255,.18);
border-radius: 8px;
width: min(860px, 100%);
max-height: 90vh;
overflow-y: auto;
animation: at-modal-in .2s ease;
}
.sc-profile { background: transparent; border: none; border-radius: 0; overflow: visible; }
.sc-prof-close {
position: sticky; top: 0; float: right; z-index: 5;
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
background: rgba(8,12,30,.9); border: 1px solid rgba(0,200,255,.2); border-radius: 3px;
padding: 5px 12px; cursor: pointer; margin: 10px 10px 0 0;
}
.sc-prof-close:hover { color: #f87171; border-color: #f87171; }
.sc-profile { position: relative; }
.sc-prof-banner { height: 200px; overflow: hidden; }
.sc-prof-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.sc-prof-identity { padding: 20px 20px 16px; border-bottom: 1px solid rgba(0,200,255,.07); }
.sc-prof-type {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: var(--sc-color, var(--teal)); margin-bottom: 6px;
}
.sc-prof-name { font-family: var(--font-orb); font-size: 24px; font-weight: 900; color: var(--text); margin: 0 0 6px; }
.sc-prof-agency { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.sc-prof-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-prof-link { color: var(--teal); text-decoration: none; }
.sc-prof-link:hover { text-decoration: underline; }
.sc-prof-stats {
display: flex; flex-wrap: wrap;
border-bottom: 1px solid rgba(0,200,255,.07);
}
.sc-prof-stat {
display: flex; flex-direction: column; align-items: center;
padding: 12px 16px; min-width: 80px;
border-right: 1px solid rgba(0,200,255,.05);
}
.sc-prof-stat:last-child { border-right: none; }
.sc-prof-stat--live .sc-prof-stat-val { color: #34d399; }
.sc-prof-stat-val { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--teal); line-height: 1; }
.sc-prof-stat-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.sc-prof-section { padding: 18px 20px; border-bottom: 1px solid rgba(0,200,255,.06); }
.sc-prof-section:last-child { border-bottom: none; }
.sc-prof-section-hdr {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
display: flex; align-items: center; gap: 8px;
}
.sc-prof-section-count { margin-left: auto; font-size: 10px; }
.sc-prof-text { font-family: var(--font-mono); font-size: 12px; line-height: 1.75; color: rgba(255,255,255,.6); margin: 0 0 8px; }
.sc-prof-nodata { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.sc-prof-loading { padding: 40px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.sc-prof-specs { display: flex; flex-direction: column; gap: 6px; }
.sc-prof-spec { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 12px; }
.sc-prof-spec-k { color: var(--muted); min-width: 100px; }
.sc-prof-spec-v { color: var(--text); }
.sc-prof-links { padding: 14px 20px; display: flex; gap: 10px; flex-wrap: wrap; }
/* Spacecraft programs strip */
.sc-prof-prog-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-prof-prog-chip { display: flex; align-items: center; gap: 6px; text-decoration: none;
font-family: var(--font-mono); font-size: 11px; color: var(--text);
background: rgba(255,255,255,.03); border: 1px solid rgba(96,165,250,.2);
padding: 4px 10px; transition: border-color .15s, background .15s; }
.sc-prof-prog-chip:hover { border-color: rgba(96,165,250,.5); background: rgba(96,165,250,.08); }
.sc-prof-prog-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
/* Space station owner chips */
.ss-owner-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ss-owner-chip { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px;
border: 1px solid rgba(255,255,255,.12); }
a.ss-owner-chip { text-decoration: none; color: #60a5fa; border-color: rgba(96,165,250,.3);
transition: background .12s; }
a.ss-owner-chip:hover { background: rgba(96,165,250,.08); }
/* ISS ham section links */
.mm-iss-ham-links { display: flex; gap: 10px; padding: 10px 14px 4px; flex-wrap: wrap; }
.sc-prof-ext-link {
font-family: var(--font-mono); font-size: 11px; color: var(--teal);
border: 1px solid rgba(0,200,255,.2); border-radius: 4px;
padding: 6px 14px; text-decoration: none;
transition: background .15s;
}
.sc-prof-ext-link:hover { background: rgba(0,200,255,.08); }
/* ── Profile hero ─────────────────────────────────────────────────────────── */
.sc-prof-hero {
position: relative; height: 200px; overflow: hidden;
border-radius: 8px 8px 0 0;
}
.sc-prof-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center 30%;
filter: blur(4px) brightness(.45) saturate(1.2);
transform: scale(1.06);
}
.sc-prof-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(120deg, rgba(8,12,30,.82) 50%, transparent 100%);
}
.sc-prof-hero-content {
position: relative; height: 100%;
display: flex; align-items: flex-end; justify-content: space-between;
padding: 20px 24px;
}
.sc-prof-hero-left { display: flex; flex-direction: column; gap: 6px; max-width: 72%; }
.sc-prof-hero-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.sc-prof-chip {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
text-transform: uppercase; padding: 2px 8px;
border: 1px solid rgba(0,200,255,.25); border-radius: 3px;
color: rgba(255,255,255,.55); background: rgba(0,0,0,.3);
text-decoration: none; transition: border-color .15s, color .15s;
}
.sc-prof-chip--family { color: var(--teal); border-color: rgba(0,200,255,.35); }
.sc-prof-chip--agency { color: #60a5fa; border-color: rgba(96,165,250,.35); }
.sc-prof-chip--agency:hover { border-color: #60a5fa; color: #93c5fd; }
.sc-prof-hero-svg { flex-shrink: 0; opacity: .55; }
.sc-prof-inspace-badge {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
color: #34d399; border: 1px solid rgba(52,211,153,.4); border-radius: 3px;
padding: 2px 8px; animation: at-live-blink 1.5s infinite;
}
/* ── Outcome bar ──────────────────────────────────────────────────────────── */
.sc-prof-outcome-wrap { padding: 14px 20px; border-bottom: 1px solid rgba(0,200,255,.06); }
.sc-prof-outcome-track {
height: 8px; border-radius: 4px; overflow: hidden;
display: flex; background: rgba(255,255,255,.06);
}
.sc-prof-outcome-fill { height: 100%; transition: width .4s ease; }
.sc-prof-outcome-fill--success { background: #34d399; }
.sc-prof-outcome-fill--fail { background: #f87171; opacity: .6; }
.sc-prof-outcome-legend {
display: flex; align-items: center; gap: 6px; margin-top: 7px;
font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.5);
}
.sc-prof-outcome-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sc-prof-outcome-dot--success { background: #34d399; }
.sc-prof-outcome-dot--fail { background: #f87171; }
/* ── Specs grid ───────────────────────────────────────────────────────────── */
.sc-prof-specs-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
.sc-prof-spec-block { display: flex; flex-direction: column; gap: 5px; }
.sc-prof-spec-block--full { grid-column: 1 / -1; }
.sc-prof-spec-k {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
text-transform: uppercase; color: var(--muted);
}
.sc-prof-spec-v {
font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text);
}
.sc-prof-seats { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0; }
.sc-seat { font-size: 14px; line-height: 1; }
.sc-seat--filled { color: var(--sc-accent, var(--teal)); }
.sc-seat--more {
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
align-self: center;
}
.sc-prof-bar-wrap {
height: 6px; background: rgba(255,255,255,.07); border-radius: 3px;
overflow: hidden;
}
.sc-prof-bar {
height: 100%; border-radius: 3px;
background: var(--sc-accent, var(--teal)); transition: width .5s ease;
}
.sc-prof-bar--cargo { background: #34d399; }
.sc-prof-expand-btn {
font-family: var(--font-mono); font-size: 10px; color: var(--teal);
background: none; border: none; cursor: pointer; padding: 0;
letter-spacing: .05em;
}
.sc-prof-expand-btn:hover { text-decoration: underline; }
/* ── Vehicle flight-count bar ─────────────────────────────────────────────── */
.sc-veh-flights-bar {
height: 3px; border-radius: 2px; margin-top: 3px;
background: rgba(0,200,255,.12); overflow: hidden;
}
.sc-veh-flights-bar-fill {
height: 100%; border-radius: 2px;
background: var(--teal); transition: width .4s ease;
}
/* ── Flight year group header ─────────────────────────────────────────────── */
.sc-flight-year-hdr {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
text-transform: uppercase; color: rgba(0,200,255,.4);
padding: 10px 0 4px; margin-top: 4px;
}
/* Vehicles list */
.sc-prof-vehicle-list { display: flex; flex-direction: column; gap: 0; }
.sc-veh-row {
display: flex; align-items: center; gap: 12px;
padding: 8px 0; border-bottom: 1px solid rgba(0,200,255,.05);
font-family: var(--font-mono); font-size: 12px;
}
.sc-veh-row:last-child { border-bottom: none; }
.sc-veh-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.sc-veh-thumb-placeholder { width: 40px; height: 40px; background: rgba(0,200,255,.05); border: 1px solid rgba(0,200,255,.15); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--teal); font-size: 16px; flex-shrink: 0; }
.sc-veh-info { flex: 1; min-width: 0; }
.sc-veh-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-veh-serial { font-size: 10px; color: var(--muted); margin-top: 1px; }
.sc-veh-meta { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--muted); text-align: right; }
.sc-veh-stat { white-space: nowrap; }
.sc-veh-status { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; text-align: right; white-space: nowrap; }
.sc-veh-inspace-dot { width: 7px; height: 7px; background: #34d399; border-radius: 50%; animation: at-live-blink 1.5s infinite; flex-shrink: 0; }
.sc-status--active { color: #34d399; }
.sc-status--retired { color: var(--muted); }
.sc-status--lost { color: #f87171; }
.sc-status--other { color: rgba(255,255,255,.4); }
/* Flight ribbons */
.sc-prof-flights { display: flex; flex-direction: column; gap: 0; }
.sc-flight-ribbon {
display: flex; gap: 12px; align-items: flex-start;
padding: 12px 0; border-bottom: 1px solid rgba(0,200,255,.05);
}
.sc-flight-ribbon:last-child { border-bottom: none; }
.sc-ribbon--success { border-left: 3px solid #34d399; padding-left: 10px; }
.sc-ribbon--fail { border-left: 3px solid #f87171; padding-left: 10px; }
.sc-ribbon-left { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sc-ribbon-outcome { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-family: var(--font-mono); background: rgba(0,200,255,.08); color: var(--teal); }
.sc-ribbon--success .sc-ribbon-outcome { background: rgba(52,211,153,.12); color: #34d399; }
.sc-ribbon--fail .sc-ribbon-outcome { background: rgba(248,113,113,.12); color: #f87171; }
.sc-ribbon-patch { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; }
.sc-ribbon-body { flex: 1; min-width: 0; }
.sc-ribbon-name { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); }
.sc-ribbon-link { color: var(--text); text-decoration: none; }
.sc-ribbon-link:hover { color: var(--teal); }
.sc-ribbon-meta { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 3px; }
.sc-ribbon-vehicle { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
.sc-ribbon-landing { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.4); margin-top: 1px; }
.sc-ribbon-right { flex-shrink: 0; text-align: right; }
.sc-ribbon-sc { font-family: var(--font-mono); font-size: 11px; color: var(--teal); }
.sc-ribbon-end { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 3px; }
.sc-prof-more-btn { margin-top: 12px; }
/* Records */
.sc-records {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px; margin-bottom: 40px;
}
.sc-record-card {
background: rgba(255,255,255,.02); border: 1px solid rgba(0,200,255,.1);
border-radius: 8px; padding: 16px 18px;
}
.sc-record-card--skel { height: 180px; animation: at-skel-pulse 1.4s infinite; }
.sc-record-hdr {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: var(--teal); margin-bottom: 12px;
}
.sc-record-list { display: flex; flex-direction: column; gap: 0; }
.sc-record-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 0; border-bottom: 1px solid rgba(0,200,255,.04);
font-family: var(--font-mono); font-size: 11px;
}
.sc-record-row:last-child { border-bottom: none; }
.sc-record-rank { color: var(--teal); font-weight: 700; min-width: 16px; }
.sc-record-name { flex: 1; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-record-val { color: var(--muted); font-size: 10px; white-space: nowrap; }
/* Responsive */
@media (max-width: 860px) {
.sc-hangar { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sc-hero-stats { gap: 6px; }
.sc-stat-chip { min-width: 70px; padding: 8px 10px; }
.sc-stat-val { font-size: 15px; }
}
@media (max-width: 600px) {
.sc-hangar { grid-template-columns: 1fr 1fr; }
.sc-hero-orbit-ring { display: none; }
.sc-prof-stats { flex-wrap: wrap; }
.sc-prof-stat { min-width: 80px; }
.sc-records { grid-template-columns: 1fr; }
.sc-veh-meta { display: none; }
}
/* ── Spacecraft Command Center — Enhancement CSS ────────────────────────────── */
/* Hero sync badge */
.sc-hero-sync-badge {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
color: rgba(255,255,255,.45);
border: 1px solid rgba(0,200,255,.1); border-radius: 12px;
padding: 4px 12px; margin-top: 10px;
}
.sc-sync-dot {
width: 6px; height: 6px; border-radius: 50%; background: #34d399;
animation: at-live-blink 2s infinite;
}
.sc-hero-starfield {
position: absolute; inset: 0; pointer-events: none;
background-image:
radial-gradient(1px 1px at 20% 30%, rgba(0,200,255,.3), transparent),
radial-gradient(1px 1px at 60% 70%, rgba(0,200,255,.2), transparent),
radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.15), transparent),
radial-gradient(1px 1px at 10% 80%, rgba(0,200,255,.2), transparent),
radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,.1), transparent);
}
/* Sort control */
.sc-sort-sort-row {
display: flex; align-items: center; gap: 10px;
margin-top: 10px; flex-wrap: wrap;
}
.sc-sort-label {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
color: var(--muted); text-transform: uppercase;
}
.sc-sort-select {
font-family: var(--font-mono); font-size: 11px;
background: rgba(0,0,0,.35); border: 1px solid rgba(0,200,255,.2);
color: var(--text); border-radius: 4px; padding: 5px 10px;
}
/* Card enhancements */
.sc-card-family {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
color: var(--teal); text-transform: uppercase; margin-bottom: 3px;
}
.sc-card-live-dot {
position: absolute; top: 8px; left: 8px;
width: 8px; height: 8px; border-radius: 50%; background: #34d399;
animation: at-live-blink 1.5s infinite;
}
.sc-card--compare { border-color: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245,158,11,.2) !important; }
.sc-card-compare-btn {
width: 100%; margin-top: 8px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
border: 1px solid rgba(0,200,255,.2); border-radius: 4px;
background: transparent; color: var(--muted); cursor: pointer;
padding: 5px 0; transition: all .15s;
}
.sc-card-compare-btn:hover { border-color: var(--teal); color: var(--teal); background: rgba(0,200,255,.06); }
.sc-card-compare-btn--active { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.07); }
.sc-inspace-badge {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
color: #34d399; border: 1px solid rgba(52,211,153,.35); border-radius: 3px; padding: 2px 7px;
}
/* In-space banner enhancements */
.sc-inspace-info { display: flex; flex-direction: column; gap: 1px; }
.sc-inspace-tis { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
/* Compare bar */
.sc-compare-bar {
position: sticky; bottom: 16px; z-index: 200;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin: 16px 0;
background: rgba(6,10,28,.95);
border: 1px solid rgba(245,158,11,.4);
border-radius: 8px; padding: 12px 18px;
box-shadow: 0 8px 32px rgba(0,0,0,.7);
backdrop-filter: blur(8px);
}
.sc-compare-bar--flash { animation: sc-bar-flash .5s ease; }
@keyframes sc-bar-flash { 0%,100% { border-color: rgba(245,158,11,.4); } 50% { border-color: #f59e0b; } }
.sc-compare-bar-info {
font-family: var(--font-mono); font-size: 12px; color: var(--muted);
display: flex; align-items: center; gap: 8px;
}
.sc-compare-bar-icon { color: #f59e0b; font-size: 14px; }
.sc-compare-bar-actions { display: flex; gap: 8px; }
.sc-compare-run-btn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #f59e0b; }
.sc-compare-run-btn:hover { background: rgba(245,158,11,.2); }
.sc-compare-clear-btn {
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
background: transparent; border: 1px solid rgba(255,255,255,.1);
border-radius: 4px; padding: 6px 14px; cursor: pointer;
}
.sc-compare-clear-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
/* Compare drawer */
.sc-compare-wrap { margin-top: 32px; margin-bottom: 32px; animation: at-prof-in .2s ease; }
.sc-compare-wrap[hidden] { display: none !important; }
.sc-compare-close-btn {
margin-left: auto;
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
background: transparent; border: 1px solid rgba(0,200,255,.2);
border-radius: 3px; padding: 4px 12px; cursor: pointer;
}
.sc-compare-close-btn:hover { color: #f87171; border-color: #f87171; }
.sc-cmp-table-wrap { overflow-x: auto; }
.sc-cmp-table {
width: 100%; border-collapse: collapse;
font-family: var(--font-mono); font-size: 11px;
}
.sc-cmp-th {
padding: 12px 14px; text-align: left;
border-bottom: 2px solid rgba(0,200,255,.15);
color: var(--muted); font-weight: 400;
background: rgba(0,0,0,.2);
}
.sc-cmp-th--label { min-width: 130px; color: rgba(255,255,255,.4); font-size: 10px; text-transform: uppercase; }
.sc-cmp-img { width: 48px; height: 36px; object-fit: cover; border-radius: 4px; display: block; margin: 0 auto 6px; }
.sc-cmp-name { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--text); text-align: center; }
.sc-cmp-agency { font-size: 10px; color: var(--muted); text-align: center; margin-top: 2px; }
.sc-cmp-td {
padding: 9px 14px; border-bottom: 1px solid rgba(0,200,255,.05);
color: rgba(255,255,255,.6);
}
.sc-cmp-td--label { color: var(--muted); font-size: 10px; }
.sc-cmp-td--best { color: #34d399; font-weight: 700; }
.sc-cmp-table tr:hover .sc-cmp-td { background: rgba(0,200,255,.03); }
/* Profile panel enhancements */
.sc-prof-sub-row {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px;
}
.sc-prof-family { color: var(--teal); }
.sc-prof-text--muted { opacity: .7; font-size: 11px; }
/* Variant Lineage */
.sc-prof-lineage { overflow-x: auto; padding-bottom: 8px; }
.sc-lin-family { margin-bottom: 14px; }
.sc-lin-family-label {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.sc-lin-rail {
display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
overflow-x: auto; padding: 4px 0;
}
.sc-lin-arrow { color: rgba(0,200,255,.3); font-size: 12px; flex-shrink: 0; }
.sc-lin-node {
display: flex; flex-direction: column; align-items: center;
padding: 8px 12px; border-radius: 6px; flex-shrink: 0;
border: 1px solid transparent; font-family: var(--font-mono); font-size: 11px;
min-width: 90px; text-align: center;
}
.sc-lin-node--btn {
cursor: pointer; background: rgba(0,0,0,.2);
border-color: rgba(0,200,255,.15);
transition: border-color .15s, background .15s;
}
.sc-lin-node--btn:hover { border-color: var(--teal); background: rgba(0,200,255,.08); }
.sc-lin-node--current { background: rgba(0,200,255,.1); border-color: var(--teal); }
.sc-lin--active { color: #34d399; }
.sc-lin--retired { color: var(--muted); }
.sc-lin--human { color: #f59e0b; }
.sc-lin-name { font-size: 11px; font-weight: 600; }
.sc-lin-year { font-size: 9px; color: var(--muted); margin-top: 2px; }
.sc-lin-hr { font-size: 9px; color: #f59e0b; }
.sc-lin-solo { display: flex; align-items: center; gap: 10px; }
/* Who Flew This */
.sc-crew-missing {
text-align: center; padding: 24px;
font-family: var(--font-mono); color: var(--muted);
}
.sc-crew-missing-icon { font-size: 24px; color: rgba(0,200,255,.3); margin-bottom: 8px; }
.sc-crew-missing-text { font-size: 12px; margin-bottom: 6px; }
.sc-crew-missing-sub { font-size: 10px; opacity: .6; }
.sc-crew-frequent {
background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.15);
border-radius: 6px; padding: 10px 14px; margin-bottom: 12px;
}
.sc-crew-frequent-label {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
text-transform: uppercase; color: #f59e0b; margin-bottom: 8px;
}
.sc-crew-freq-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-crew-freq-chip {
font-family: var(--font-mono); font-size: 10px; color: #f59e0b;
border: 1px solid rgba(245,158,11,.25); border-radius: 12px; padding: 3px 10px;
}
.sc-crew-group-label {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.sc-crew-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(80px,1fr));
gap: 10px; margin-bottom: 16px;
}
.sc-crew-card {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px 4px; border-radius: 6px; text-decoration: none; color: var(--text);
border: 1px solid rgba(0,200,255,.1);
transition: border-color .15s, background .15s;
}
.sc-crew-card:hover { border-color: var(--teal); background: rgba(0,200,255,.05); }
.sc-crew-avatar {
position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
background: rgba(0,200,255,.06); border: 1px solid rgba(0,200,255,.2);
}
.sc-crew-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sc-crew-flight-badge {
position: absolute; bottom: 2px; right: 2px;
font-family: var(--font-mono); font-size: 8px; font-weight: 700;
color: #fff; background: rgba(0,200,255,.75); border-radius: 3px;
padding: 1px 3px; line-height: 1;
}
.sc-crew-initials {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--teal);
}
.sc-crew-name { font-family: var(--font-mono); font-size: 10px; color: var(--text); text-align: center; }
.sc-crew-role { font-family: var(--font-mono); font-size: 9px; color: var(--teal); text-align: center; }
.sc-crew-nat { font-family: var(--font-mono); font-size: 9px; color: var(--muted); text-align: center; }
/* Connected Universe */
.sc-universe-toggle {
margin-left: auto; font-family: var(--font-mono); font-size: 10px;
color: var(--muted); background: transparent;
border: 1px solid rgba(0,200,255,.15); border-radius: 4px; padding: 4px 12px;
cursor: pointer; transition: color .15s;
}
.sc-universe-toggle:hover { color: var(--teal); }
.sc-universe-wrap { animation: at-prof-in .2s ease; }
.sc-universe-layout { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sc-universe-svg { flex-shrink: 0; width: 100%; max-width: 400px; opacity: .8; }
.sc-universe-links { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; }
.sc-universe-link {
display: block; font-family: var(--font-mono); font-size: 11px;
border: 1px solid; border-radius: 4px; padding: 6px 12px;
text-decoration: none; transition: opacity .15s;
background: rgba(0,0,0,.2);
}
.sc-universe-link:hover { opacity: .8; }
/* Records enhancements */
.sc-record-card--live { border-color: rgba(52,211,153,.2); }
.sc-record-card--live .sc-record-hdr { color: #34d399; }
.sc-record-row--btn { cursor: pointer; transition: background .1s; border-radius: 4px; }
.sc-record-row--btn:hover { background: rgba(0,200,255,.08); }
/* Data Health */
.sc-health-details {
margin-top: 32px; margin-bottom: 24px;
border: 1px solid rgba(0,200,255,.08); border-radius: 6px;
}
.sc-health-summary {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px; cursor: pointer;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em;
text-transform: uppercase; color: var(--muted);
list-style: none;
}
.sc-health-summary::-webkit-details-marker { display: none; }
.sc-health-summary::before { content: '▶'; font-size: 9px; transition: transform .2s; }
details[open] .sc-health-summary::before { transform: rotate(90deg); }
.sc-health-icon { color: var(--teal); }
.sc-health-panel { padding: 16px; border-top: 1px solid rgba(0,200,255,.06); }
.sc-health-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px;
}
.sc-health-item {
display: flex; flex-direction: column; gap: 3px;
padding: 10px 14px; border-radius: 4px;
background: rgba(0,0,0,.2); border: 1px solid rgba(0,200,255,.07);
}
.sc-health-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-health-v { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.sc-health-v--ok { color: #34d399; }
.sc-health-v--warn { color: #f59e0b; }
.sc-health-v--live { color: #34d399; animation: at-live-blink 2s infinite; }
.sc-health-loading { padding: 20px; text-align: center; }
.sc-health-note {
margin-top: 10px; padding: 8px 14px;
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
border-top: 1px solid rgba(0,200,255,.06);
}
/* Responsive additions */
@media (max-width: 860px) {
.sc-cmp-table { font-size: 10px; }
.sc-cmp-td, .sc-cmp-th { padding: 7px 8px; }
.sc-lin-rail { flex-wrap: wrap; }
.sc-compare-bar { position: relative; bottom: auto; }
}
@media (max-width: 600px) {
.sc-crew-grid { grid-template-columns: repeat(auto-fill, minmax(64px,1fr)); }
.sc-compare-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
.sc-health-grid { grid-template-columns: 1fr; }
.sc-universe-svg { max-width: 100%; }
}
/* ── Comet Catalog card ─────────────────────────────────────────────────────── */
.sb-catalog-controls {
display: flex;
flex-wrap: wrap;
gap: .5rem;
padding: .75rem 1rem;
border-bottom: 1px solid var(--border);
align-items: center;
}
.sb-catalog-input {
flex: 1 1 180px;
min-width: 140px;
padding: .35rem .65rem;
background: var(--card-bg, #1a1a2e);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-size: .82rem;
}
.sb-catalog-input:focus { outline: none; border-color: var(--teal, #38bdf8); }
.sb-catalog-select {
padding: .35rem .55rem;
background: var(--card-bg, #1a1a2e);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-size: .82rem;
cursor: pointer;
}
.sb-catalog-dir-btn {
padding: .35rem .65rem;
background: var(--card-bg, #1a1a2e);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--teal, #38bdf8);
font-size: .9rem;
cursor: pointer;
transition: background .15s;
}
.sb-catalog-dir-btn:hover { background: var(--border); }
.sb-catalog-table { font-size: .82rem; }
.sb-catalog-name { font-weight: 500; max-width: 260px; }
@media (max-width: 700px) {
.sb-catalog-controls { gap: .4rem; }
.sb-catalog-table th:nth-child(n+6),
.sb-catalog-table td:nth-child(n+6) { display: none; }
}
/* ══ Small-Body Mission Control — Phase 4+ styles ═══════════════════════════ */
/* ── Hero ───────────────────────────────────────────────────────────────────── */
.sb-hero {
position: relative;
overflow: hidden;
min-height: 280px;
background: var(--bg, #0a0a1a);
}
#sb-streak-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: .35;
}
.sb-hero-content {
position: relative;
z-index: 1;
}
.sb-hero-inner { padding-bottom: 1.25rem; }
.sb-hero-sub {
color: var(--text-muted, #94a3b8);
font-size: .95rem;
margin: .4rem 0 1rem;
}
/* Stat strip */
.sb-stat-strip {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: .75rem;
}
.sb-stat-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: .15rem;
background: rgba(56,189,248,.08);
border: 1px solid rgba(56,189,248,.2);
border-radius: 10px;
padding: .45rem .85rem;
min-width: 90px;
}
.sb-stat-chip--skeleton {
background: var(--card-bg, #1a1a2e);
border-color: var(--border);
color: var(--text-muted);
font-size: .78rem;
padding: .5rem 1rem;
border-radius: 10px;
}
.sb-stat-chip-icon { font-size: 1rem; }
.sb-stat-chip-val { font-size: 1.05rem; font-weight: 700; color: var(--teal, #38bdf8); }
.sb-stat-chip-lbl { font-size: .68rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: .04em; }
/* ── Section nav ────────────────────────────────────────────────────────────── */
.sb-section-nav {
position: sticky;
top: var(--nav-height, 60px);
z-index: 90;
background: var(--bg, #0a0a1a);
border-bottom: 1px solid var(--border, #1e2a3a);
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.sb-section-nav::-webkit-scrollbar { display: none; }
.sb-snav-link {
padding: .65rem 1.1rem;
font-size: .8rem;
text-decoration: none;
color: var(--text-muted, #94a3b8);
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color .15s, border-color .15s;
}
.sb-snav-link:hover { color: var(--text, #e2e8f0); }
.sb-snav-link--active {
color: var(--teal, #38bdf8);
border-bottom-color: var(--teal, #38bdf8);
}
/* ── Tonight card view ──────────────────────────────────────────────────────── */
.sb-tonight-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
padding: 1rem;
}
.sb-tonight-card {
background: var(--card-bg, #1a1a2e);
border: 1px solid var(--border, #1e2a3a);
border-radius: 10px;
padding: 1rem;
display: flex;
flex-direction: column;
gap: .5rem;
transition: border-color .2s;
}
.sb-tonight-card:hover { border-color: var(--teal, #38bdf8); }
.sb-tonight-card-hdr {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
}
.sb-tonight-card-name {
font-weight: 600;
font-size: .92rem;
color: var(--text, #e2e8f0);
flex: 1;
}
.sb-tonight-card-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .35rem;
font-size: .8rem;
color: var(--text-muted, #94a3b8);
}
.sb-tonight-card-altaz { font-size: .8rem; color: var(--text-muted); }
.sb-tonight-card-actions {
display: flex;
gap: .4rem;
margin-top: .25rem;
flex-wrap: wrap;
}
.sb-card-btn {
padding: .28rem .6rem;
font-size: .75rem;
border-radius: 6px;
border: 1px solid var(--border, #1e2a3a);
background: transparent;
color: var(--text-muted, #94a3b8);
cursor: pointer;
transition: all .15s;
}
.sb-card-btn:hover {
border-color: var(--teal, #38bdf8);
color: var(--teal, #38bdf8);
}
/* Magnitude pill */
.sb-mag-pill {
display: inline-flex;
align-items: center;
padding: .18rem .5rem;
border-radius: 12px;
font-size: .72rem;
font-weight: 600;
}
.sb-mag-pill--naked { background: rgba(52,211,153,.15); color: #34d399; border: 1px solid rgba(52,211,153,.3); }
.sb-mag-pill--bino { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.sb-mag-pill--scope { background: rgba(129,140,248,.12); color: #818cf8; border: 1px solid rgba(129,140,248,.3); }
.sb-mag-pill--unknown { background: var(--card-bg); color: var(--text-muted); border: 1px solid var(--border); }
/* Difficulty dots */
.sb-tonight-card-diff { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--text-muted); }
.sb-difficulty-lbl { text-transform: uppercase; letter-spacing: .04em; }
.sb-difficulty { display: flex; gap: 3px; align-items: center; }
.sb-difficulty-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--border, #1e2a3a);
}
.sb-difficulty-dot--lit { background: var(--teal, #38bdf8); }
/* Compass label */
.sb-compass { font-weight: 600; color: var(--teal, #38bdf8); font-size: .78rem; }
/* View toggle */
.sb-view-toggle { display: flex; gap: .3rem; margin-left: auto; }
.sb-view-btn {
padding: .3rem .55rem;
font-size: .8rem;
border-radius: 6px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: all .15s;
}
.sb-view-btn--active {
border-color: var(--teal, #38bdf8);
color: var(--teal, #38bdf8);
background: rgba(56,189,248,.08);
}
/* ── Orbit theater ──────────────────────────────────────────────────────────── */
.sb-orbit-panel .toolbox-panel-hdr { flex-wrap: wrap; gap: .5rem; }
.sb-orbit-controls {
display: flex;
gap: .4rem;
margin-left: auto;
flex-wrap: wrap;
}
.sb-orbit-btn {
padding: .3rem .7rem;
font-size: .75rem;
border-radius: 20px;
border: 1px solid var(--border, #1e2a3a);
background: transparent;
color: var(--text-muted, #94a3b8);
cursor: pointer;
transition: all .15s;
}
.sb-orbit-btn:hover { border-color: var(--teal, #38bdf8); color: var(--teal, #38bdf8); }
.sb-orbit-btn--active {
border-color: var(--teal, #38bdf8);
color: var(--teal, #38bdf8);
background: rgba(56,189,248,.08);
}
.sb-orbit-wrap {
position: relative;
width: 100%;
aspect-ratio: 16/9;
max-height: 500px;
background: #060614;
border-radius: 8px;
overflow: hidden;
margin: .75rem 0 .5rem;
}
#sb-orbit-canvas { width: 100%; height: 100%; display: block; }
.sb-orbit-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.sb-orbit-placeholder.hidden { display: none; }
.sb-data-missing {
color: var(--text-muted, #94a3b8);
font-size: .85rem;
padding: .5rem 1rem;
background: rgba(10,10,26,.7);
border-radius: 8px;
border: 1px solid var(--border);
}
.sb-orbit-legend { display: none; } /* rendered on canvas */
/* ── Profile panel ──────────────────────────────────────────────────────────── */
.sb-profile-section.hidden { display: none; }
.sb-profile-inner { padding: 1rem; }
.sb-profile-name {
font-size: 1.15rem;
font-weight: 700;
color: var(--text, #e2e8f0);
}
.sb-profile-id { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.sb-profile-section-lbl {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-muted, #94a3b8);
margin-bottom: .4rem;
border-bottom: 1px solid var(--border);
padding-bottom: .25rem;
}
.sb-profile-live {
margin-top: .75rem;
padding: .75rem;
background: rgba(56,189,248,.04);
border: 1px solid rgba(56,189,248,.15);
border-radius: 8px;
}
.sb-orbit-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: .75rem;
}
.sb-orbit-stat {
background: var(--card-bg, #1a1a2e);
border: 1px solid var(--border, #1e2a3a);
border-radius: 8px;
padding: .6rem .9rem;
}
.sb-orbit-stat-label {
font-size: .7rem;
color: var(--text-muted, #94a3b8);
text-transform: uppercase;
letter-spacing: .05em;
}
.sb-orbit-stat-value {
font-size: 1rem;
font-weight: 600;
color: var(--teal, #38bdf8);
margin-top: .15rem;
font-family: var(--font-mono, monospace);
}
.sb-plain-english {
background: rgba(56,189,248,.06);
border: 1px solid rgba(56,189,248,.2);
border-radius: 8px;
padding: .85rem 1rem;
font-size: .85rem;
line-height: 1.55;
color: var(--text, #e2e8f0);
}
.sb-profile-skeleton {
padding: 2rem;
color: var(--text-muted);
text-align: center;
font-size: .9rem;
}
/* ── Close approach cards ───────────────────────────────────────────────────── */
.sb-chips--approaches { padding: .5rem 1rem; }
.sb-approach-grid {
display: flex;
flex-direction: column;
gap: .5rem;
padding: 1rem;
}
.sb-approach-card {
background: var(--card-bg, #1a1a2e);
border: 1px solid var(--border, #1e2a3a);
border-radius: 8px;
padding: .75rem 1rem;
display: grid;
grid-template-columns: 1fr auto;
gap: .5rem;
cursor: pointer;
transition: border-color .2s;
}
.sb-approach-card:hover { border-color: var(--teal, #38bdf8); }
.sb-ld-bar {
height: 4px;
background: var(--border, #1e2a3a);
border-radius: 2px;
position: relative;
margin-top: .3rem;
}
.sb-ld-bar-fill {
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, var(--teal, #38bdf8), #818cf8);
}
.sb-hazard-badge-red { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); border-radius: 12px; padding: .15rem .5rem; font-size: .72rem; }
.sb-hazard-badge-safe { background: rgba(100,116,139,.1); color: var(--text-muted); border: 1px solid var(--border); border-radius: 12px; padding: .15rem .5rem; font-size: .72rem; }
/* ── Data health strip ──────────────────────────────────────────────────────── */
.sb-health-strip {
display: flex;
flex-wrap: wrap;
gap: .4rem;
padding: .6rem 1rem;
border-top: 1px solid var(--border);
margin-top: .5rem;
}
.sb-health-chip {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: .73rem;
padding: .2rem .5rem;
border-radius: 12px;
}
.sb-health-chip--fresh { background: rgba(52,211,153,.12); color: #34d399; }
.sb-health-chip--stale { background: rgba(245,158,11,.12); color: #f59e0b; }
.sb-health-chip--error { background: rgba(239,68,68,.12); color: #f87171; }
/* ── Dark-sky mode overrides ────────────────────────────────────────────────── */
.dark-sky-mode .sb-hero { filter: saturate(.15) sepia(.8) hue-rotate(340deg) brightness(.8); }
.dark-sky-mode #sb-orbit-canvas { filter: saturate(.2) sepia(.6) hue-rotate(340deg); }
.dark-sky-mode .sb-stat-chip { border-color: rgba(180,60,60,.3); background: rgba(180,60,60,.06); }
.dark-sky-mode .sb-stat-chip-val { color: #c87070; }
.dark-sky-mode .sb-snav-link--active { color: #c87070; border-bottom-color: #c87070; }
.dark-sky-mode .sb-mag-pill--naked { background: rgba(150,60,60,.2); color: #c87070; }
.dark-sky-mode .sb-tonight-card:hover { border-color: rgba(180,60,60,.4); }
/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
.sb-section-nav { font-size: .75rem; }
.sb-tonight-grid { grid-template-columns: 1fr; }
.sb-orbit-controls { flex-wrap: wrap; gap: .3rem; }
.sb-orbit-wrap { aspect-ratio: 4/3; }
.sb-orbit-stats { grid-template-columns: repeat(2, 1fr); }
.sb-stat-strip { gap: .4rem; }
.sb-stat-chip { min-width: 72px; padding: .35rem .6rem; }
}
/* ── Planet Comparative Visuals ─────────────────────────────────────────────── */
.pl-compare-panel { margin-top: 1rem; }
.pl-compare-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.pl-compare-col { display: flex; flex-direction: column; gap: .5rem; }
.pl-compare-col--full { width: 100%; }
.pl-compare-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pl-compare-section-lbl { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .35rem; }
.pl-compare-note { font-size: .65rem; color: var(--text-muted); opacity: .65; }
.pl-compare-loading { color: var(--text-muted); font-size: .8rem; padding: .4rem 0; }
.pl-cmp-size-strip { display: flex; align-items: flex-end; gap: 1rem; padding: .5rem 0; flex-wrap: wrap; }
.pl-cmp-size-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.pl-cmp-size-disk { min-width: 6px; min-height: 6px; }
.pl-cmp-size-label { font-size: .75rem; font-family: 'Share Tech Mono',monospace; }
.pl-cmp-size-km { font-size: .65rem; color: var(--text-muted); }
.pl-cmp-dist-row { display: grid; grid-template-columns: 7rem 1fr 6rem 5rem 6rem; gap: .4rem; align-items: center; padding: .15rem 0; }
.pl-cmp-dist-track { height: 5px; background: rgba(0,180,255,.08); border-radius: 3px; }
.pl-cmp-dist-bar { height: 100%; border-radius: 3px; }
.pl-cmp-dist-val { font-size: .72rem; color: var(--text-muted); text-align: right; }
.pl-cmp-dist-light { font-size: .68rem; color: rgba(0,180,255,.5); text-align: right; }
.pl-cmp-dist-now { font-size: .68rem; color: #38bdf8; text-align: right; }
.pl-cmp-dist-name { font-size: .75rem; font-family: 'Share Tech Mono',monospace; }
.pl-cmp-bright-row { display: grid; grid-template-columns: 7rem 1fr 4.5rem; gap: .4rem; align-items: center; padding: .15rem 0; }
.pl-cmp-bright-track{ height: 5px; background: rgba(0,180,255,.08); border-radius: 3px; }
.pl-cmp-bright-bar { height: 100%; border-radius: 3px; }
.pl-cmp-bright-val { font-size: .72rem; color: var(--text-muted); text-align: right; }
.pl-cmp-bright-name { font-size: .75rem; font-family: 'Share Tech Mono',monospace; }
.pl-cmp-diff-row { display: grid; grid-template-columns: 7rem auto 1fr; gap: .5rem 1rem; align-items: center; padding: .2rem 0; }
.pl-diff-dots { display: flex; gap: 4px; }
.pl-diff-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0,180,255,.12); border: 1px solid rgba(0,180,255,.2); }
.pl-diff-dot--lit { border-color: transparent; }
.pl-cmp-diff-reason{ font-size: .72rem; color: var(--text-muted); }
/* ── Planet Extra Data Panels ────────────────────────────────────────────────── */
.pl-extra-panel { margin-top: 1rem; }
.pl-extra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; padding: 1rem; }
.pl-extra-cell { background: var(--card-bg, #0d1117); border: 1px solid var(--border, rgba(0,180,255,.12)); border-radius: 8px; padding: .85rem; }
.pl-extra-cell-hdr { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; padding-bottom: .45rem; border-bottom: 1px solid rgba(0,180,255,.08); padding-left: .5rem; }
.pl-extra-cell-name{ font-size: .85rem; font-weight: 600; color: var(--text); }
.pl-extra-content { font-size: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.pl-extra-note { font-size: .74rem; color: var(--text-muted); line-height: 1.5; }
.pl-extra-stat-row { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; font-size: .78rem; }
.pl-extra-stat-row span { color: var(--text-muted); }
.pl-extra-placeholder { color: rgba(0,180,255,.4); font-style: italic; font-size: .72rem; }
.pl-extra-challenge-badge { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #f59e0b; border-radius: 6px; padding: .3rem .65rem; font-size: .75rem; text-align: center; }
.pl-extra-meter-wrap { display: flex; flex-direction: column; gap: .25rem; }
.pl-extra-meter-label { font-size: .7rem; color: var(--text-muted); }
.pl-extra-meter-track { height: 5px; background: rgba(0,180,255,.1); border-radius: 3px; }
.pl-extra-meter-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.pl-extra-meter--ok { background: #34d399; }
.pl-extra-meter--warn { background: #f59e0b; }
.pl-extra-meter--bad { background: #f87171; }
.pl-extra-meter-val { font-size: .7rem; color: var(--text-muted); }
.pl-extra-phase-row { display: flex; gap: 1rem; align-items: center; }
.pl-extra-phase-info { display: flex; flex-direction: column; gap: .3rem; }
/* ── Jupiter System ───────────────────────────────────────────────────────────── */
.jup-panel { margin-top: 1rem; }
.jup-controls { display: flex; flex-wrap: wrap; gap: .4rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(0,180,255,.08); align-items: center; }
.jup-ctrl-btn { padding: .3rem .65rem; font-size: .75rem; font-family: 'Share Tech Mono',monospace; background: rgba(0,180,255,.06); border: 1px solid rgba(0,180,255,.2); border-radius: 4px; color: rgba(0,180,255,.8); cursor: pointer; transition: all .15s; }
.jup-ctrl-btn:hover { background: rgba(0,180,255,.15); border-color: rgba(0,180,255,.5); }
.jup-ctrl-btn--now { border-color: #38bdf8; color: #38bdf8; }
.jup-ctrl-btn--flip { margin-left: auto; }
.jup-time-input { padding: .25rem .5rem; font-size: .75rem; background: rgba(0,180,255,.06); border: 1px solid rgba(0,180,255,.2); border-radius: 4px; color: var(--text); font-family: 'Share Tech Mono',monospace; }
.jup-canvas-wrap{ padding: .5rem 1rem; }
#jup-canvas { display: block; border-radius: 6px; }
.jup-moon-table-wrap { padding: 0 1rem .75rem; }
.jup-moon-table { font-size: .8rem; }
.jup-note { font-size: .7rem; color: var(--text-muted); padding: 0 1rem .75rem; line-height: 1.5; }
/* dark sky mode overrides */
.dark-sky-mode .jup-ctrl-btn { color: rgba(200,80,80,.7); border-color: rgba(180,60,60,.3); }
.dark-sky-mode .jup-ctrl-btn--now { color: #c07070; border-color: #c07070; }
.dark-sky-mode .pl-extra-meter--ok { background: #a05050; }
.dark-sky-mode .pl-extra-meter--warn { background: #906040; }
/* Mobile */
@media (max-width: 700px) {
.pl-compare-2col { grid-template-columns: 1fr; }
.pl-cmp-dist-row { grid-template-columns: 6rem 1fr 4rem; }
.pl-cmp-dist-row > *:nth-child(n+4) { display: none; }
.pl-cmp-diff-row { grid-template-columns: 6rem auto; }
.pl-cmp-diff-reason { display: none; }
.pl-extra-grid { grid-template-columns: 1fr; }
.jup-controls { gap: .3rem; }
.jup-ctrl-btn--flip { margin-left: 0; }
}
/* ── Reentry Track Globe ─────────────────────────────────────────────────────── */
.sp-reentry-globe-card { margin-top: 1rem; }
.sp-reentry-globe-body { display: flex; flex-direction: column; }
.sp-reentry-globe {
width: 100%;
min-height: 300px;
background: #040810;
border-radius: 0 0 4px 4px;
overflow: hidden;
position: relative;
cursor: grab;
}
.sp-reentry-globe:active { cursor: grabbing; }
.sp-reentry-globe canvas { display: block; width: 100% !important; }
.sp-reentry-globe-meta {
background: rgba(0,0,0,0.6);
border-top: 1px solid rgba(239,83,80,0.2);
padding: .65rem 1rem;
display: flex;
flex-direction: column;
gap: .3rem;
}
.sp-rg-meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .75rem;
font-size: .78rem;
}
.sp-rg-meta-lbl { color: var(--muted, rgba(255,255,255,.45)); flex-shrink: 0; }
.sp-rg-meta-val { color: var(--text, #e8eaf6); font-family: 'Share Tech Mono', monospace; text-align: right; }
.sp-rg-meta-row--user { padding-top: .2rem; border-top: 1px solid rgba(255,255,255,.06); margin-top: .1rem; font-size: .75rem; }
.sp-rg-meta-note { font-size: .68rem; color: rgba(255,255,255,.3); line-height: 1.5; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.06); }
@media (max-width: 600px) {
.sp-rg-meta-row { flex-direction: column; gap: .1rem; }
.sp-rg-meta-val { text-align: left; }
}
/* ── Risk row — CDM + Reentry side by side ───────────────────────────────────── */
.sp-risk-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.sp-risk-empty {
padding: .25rem 0 .25rem;
}
.sp-risk-row .sp-cdm-globe-card,
.sp-risk-row .sp-reentry-globe-card {
margin-bottom: 0;
}
@media (max-width: 700px) {
.sp-risk-row { grid-template-columns: 1fr; }
}
/* Reentry watch — prediction info block above globe */
.sp-reentry-info { padding: .5rem .75rem .25rem; border-bottom: 1px solid rgba(239,83,80,.15); }
.sp-reentry-info table { width: 100%; }
/* ── Collapsible risk cards (Close Approach + Reentry Watch) ──────────── */
.sp-card--collapsed > *:not(.toolbox-panel-hdr) { display: none; }
.sp-collapse-hdr { cursor: pointer; user-select: none; }
.sp-collapse-chevron {
margin-left: auto; color: var(--muted); font-size: 14px;
transition: transform .2s; display: inline-block; flex-shrink: 0; line-height: 1;
}
.sp-card--collapsed .sp-collapse-chevron { transform: rotate(-90deg); }
/* ── Sun page — experience mode additions ──────────────────────────────── */
.sun-beginner-intro {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(200,220,255,.6);
line-height: 1.6;
margin: 0 0 12px;
padding: 8px 14px;
border-left: 2px solid rgba(0,200,255,.25);
}
.sun-swi-intro { margin: 4px 20px 0; padding: 6px 14px; }
.sun-region-intro,
.sun-alert-intro { margin: 0 20px 8px; }
.sun-gallery-intro { margin: 0 20px 12px; }
/* Plain-English Kp note */
.sun-beginner-note {
margin-top: 8px;
font-family: var(--font-mono);
font-size: 10px;
color: rgba(200,220,255,.55);
line-height: 1.5;
font-style: italic;
border-top: 1px solid rgba(255,255,255,.06);
padding-top: 7px;
}
/* Per-image beginner caption */
.sun-img-beginner-desc {
font-family: var(--font-mono);
font-size: 9px;
color: rgba(200,220,255,.5);
line-height: 1.5;
text-align: left;
padding: 6px 10px 4px;
border-top: 1px solid rgba(255,255,255,.06);
margin-top: 4px;
}
/* ── Weather page — experience mode additions ──────────────────────────── */
.wx-beginner-intro {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(200,220,255,.6);
line-height: 1.6;
margin: 0 20px 10px;
padding: 7px 14px;
border-left: 2px solid rgba(0,200,255,.22);
}
html.dark-sky-mode .wx-beginner-intro { color: rgba(255,160,160,.55); border-left-color: rgba(200,50,50,.3); }
/* ══════════════════════════════════════════════════════════════════════════════
SATELLITE CONSTELLATION COMMAND CENTER (/toolbox/constellations/)
All classes prefixed csf- (constellation fleet)
══════════════════════════════════════════════════════════════════════════════ */
/* ── Hero ──────────────────────────────────────────────────────────────────── */
.csf-hero { position: relative; overflow: hidden; }
.csf-swarm-canvas {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; opacity: .45;
}
/* ── Constellation selector pills ──────────────────────────────────────────── */
.csf-selector-row { padding: 16px 0 6px; }
.csf-selector-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.csf-pill {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
text-transform: uppercase; padding: 5px 14px;
background: rgba(0,0,20,.5); border: 1px solid rgba(0,200,255,.2);
border-radius: 3px; color: var(--muted); cursor: pointer;
transition: all .15s; display: flex; align-items: center; gap: 6px;
}
.csf-pill:hover { border-color: rgba(0,200,255,.45); color: var(--text); }
.csf-pill--active {
border-color: var(--teal); color: var(--teal);
background: rgba(0,200,255,.07);
}
.csf-pill-count {
font-size: 9px; background: rgba(0,200,255,.12); border-radius: 10px;
padding: 1px 5px; color: rgba(0,200,255,.7);
}
.csf-pill-skel {
width: 90px; height: 30px; border-radius: 3px;
background: rgba(0,200,255,.05); animation: at-grid-skel 1.2s ease infinite;
}
/* ── Stat strip ────────────────────────────────────────────────────────────── */
.csf-stat-strip {
display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 20px;
}
.csf-stat {
display: flex; flex-direction: column; align-items: center;
min-width: 80px; padding: 10px 14px;
background: rgba(0,0,20,.55); border: 1px solid rgba(0,200,255,.1);
border-radius: 5px; flex: 1;
}
.csf-stat--live .csf-stat-val { color: #34d399; }
.csf-stat--warn .csf-stat-val { color: #f59e0b; }
.csf-stat-icon { font-size: 12px; color: rgba(0,200,255,.5); margin-bottom: 3px; }
.csf-stat-val {
font-family: var(--font-orb); font-size: 17px; font-weight: 700;
color: var(--teal); line-height: 1;
}
.csf-stat-key {
font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-top: 3px;
}
.csf-stat--skel {
min-width: 75px; height: 65px; border-radius: 5px;
background: rgba(0,200,255,.04); animation: at-grid-skel 1.2s ease infinite;
}
/* ── View controls ──────────────────────────────────────────────────────────── */
.csf-controls {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 0 14px;
}
.csf-view-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.csf-view-tab {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
padding: 6px 14px; background: transparent;
border: 1px solid rgba(0,200,255,.18); border-radius: 3px;
color: var(--muted); cursor: pointer; transition: all .15s;
}
.csf-view-tab:hover { border-color: rgba(0,200,255,.35); color: var(--text); }
.csf-view-tab--active {
border-color: var(--teal); background: rgba(0,200,255,.07); color: var(--teal);
}
.csf-search-wrap { flex: 1; max-width: 320px; }
.csf-search-input { width: 100%; }
/* ── Family filter chips ────────────────────────────────────────────────────── */
.csf-family-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.csf-fchip {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em;
padding: 3px 10px; border-radius: 12px;
border: 1px solid rgba(0,200,255,.2); background: transparent;
color: var(--muted); cursor: pointer; transition: all .14s;
}
.csf-fchip:hover { border-color: rgba(0,200,255,.35); color: rgba(0,200,255,.8); }
.csf-fchip--active { border-color: var(--teal); background: rgba(0,200,255,.07); color: var(--teal); }
/* ── Family card grid ───────────────────────────────────────────────────────── */
.csf-family-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px; margin-bottom: 24px;
}
.csf-family-card {
padding: 14px; background: rgba(0,0,20,.6);
border: 1px solid rgba(0,200,255,.15); border-radius: 6px;
cursor: pointer; transition: border-color .15s, transform .12s, background .15s;
display: flex; flex-direction: column; gap: 8px;
}
.csf-family-card:hover {
border-color: rgba(0,200,255,.4); transform: translateY(-2px);
background: rgba(0,0,30,.7);
}
.csf-family-card--active { border-color: var(--teal); background: rgba(0,200,255,.05); }
.csf-family-card--skel {
height: 140px; border-radius: 6px;
background: rgba(0,200,255,.04); animation: at-grid-skel 1.2s ease infinite;
}
.csf-fc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.csf-fc-name { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: #fff; }
.csf-fc-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.csf-fc-date, .csf-fc-vehicle { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.csf-fc-counts { display: flex; gap: 12px; }
.csf-fc-count { display: flex; flex-direction: column; align-items: center; }
.csf-fc-count-val { font-family: var(--font-orb); font-size: 16px; font-weight: 700; color: #fff; line-height: 1; }
.csf-fc-count-key { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 2px; }
.csf-fc-orbit { display: flex; gap: 8px; align-items: center; }
.csf-fc-alt { font-family: var(--font-mono); font-size: 11px; color: var(--teal); }
.csf-fc-spread { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.csf-fc-inc { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-left: auto; }
/* Train phase badge */
.csf-phase-badge {
font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em;
text-transform: uppercase; padding: 2px 7px; border-radius: 2px; border: 1px solid; flex-shrink: 0;
}
.csf-phase--raising { color: #f59e0b; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.07); }
.csf-phase--train { color: #34d399; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.07); }
.csf-phase--spreading{ color: #60a5fa; border-color: rgba(96,165,250,.4); background: rgba(96,165,250,.07); }
.csf-phase--dispersing{color: var(--muted); border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.03); }
.csf-phase--ops { color: #a78bfa; border-color: rgba(167,139,250,.35); background: rgba(167,139,250,.06); }
.csf-phase--unknown { color: var(--muted); border-color: rgba(0,200,255,.12); background: transparent; }
/* Train density bar */
.csf-density-bar-wrap {
height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden;
}
.csf-density-bar { height: 100%; border-radius: 2px; transition: width .5s ease; }
.csf-density-na { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
/* ── Family profile section ─────────────────────────────────────────────────── */
.csf-family-profile {
margin-top: 6px; padding: 20px;
background: rgba(0,0,20,.7); border: 1px solid rgba(0,200,255,.2); border-radius: 8px;
animation: at-prof-in .2s ease;
}
.csf-family-loading { padding: 40px; text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.csf-prof-header {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(0,200,255,.1);
}
.csf-prof-name {
font-family: var(--font-orb); font-size: 20px; font-weight: 700; color: #fff;
}
.csf-prof-mission { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.csf-prof-strip {
display: flex; flex-wrap: wrap; gap: 0;
border: 1px solid rgba(0,200,255,.1); border-radius: 4px; margin-bottom: 14px; overflow: hidden;
}
.csf-prof-strip-item {
display: flex; flex-direction: column; align-items: center;
padding: 10px 16px; border-right: 1px solid rgba(0,200,255,.08); flex: 1; min-width: 80px;
}
.csf-prof-strip-item:last-child { border-right: none; }
.csf-prof-strip-key { font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 3px; }
.csf-prof-strip-val { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--teal); }
/* Altitude spread bar */
.csf-alt-spread {
display: flex; align-items: center; gap: 8px; margin: 10px 0;
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
.csf-alt-spread-track {
flex: 1; height: 8px; background: rgba(0,200,255,.08);
border-radius: 4px; position: relative; overflow: visible;
}
.csf-alt-spread-fill { height: 100%; background: rgba(0,200,255,.2); border-radius: 4px; }
.csf-alt-spread-avg {
position: absolute; top: -3px; width: 3px; height: 14px;
background: var(--teal); border-radius: 2px; transform: translateX(-50%);
}
.csf-alt-spread-avg-label {
font-family: var(--font-mono); font-size: 9px; color: var(--teal); white-space: nowrap;
}
.csf-alt-spread-label { white-space: nowrap; }
.csf-prof-meta-row {
display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
margin: 10px 0; font-family: var(--font-mono); font-size: 11px;
}
.csf-prof-meta-item { display: flex; gap: 5px; }
.csf-prof-meta-k { color: var(--muted); }
.csf-prof-section { margin-top: 16px; }
.csf-prof-section-hdr {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.csf-prof-more-note {
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
padding: 8px 0; text-align: center;
}
.csf-family-member-table { font-size: 12px; }
/* ── Satellite roster ───────────────────────────────────────────────────────── */
.csf-roster-controls {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 12px;
}
.csf-roster-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.csf-sort-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.csf-sort-select { font-size: 11px; padding: 4px 8px; }
.csf-roster-table { font-size: 11.5px; }
.csf-roster-table th { font-size: 9.5px; }
.csf-roster-row { cursor: default; }
/* Status badge */
.csf-status-badge {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em;
padding: 2px 6px; border-radius: 2px; border: 1px solid; white-space: nowrap;
}
.csf-status--active { color: #34d399; border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.06); }
.csf-status--reentered { color: var(--muted); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.02); }
.csf-status--decaying { color: #f59e0b; border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.06); }
.csf-age--warn { color: #f59e0b; }
.csf-norad-link { color: var(--teal); text-decoration: none; font-size: 11px; }
.csf-norad-link:hover { text-decoration: underline; }
.csf-profile-link {
color: var(--teal); text-decoration: none; font-size: 12px;
padding: 2px 6px; border: 1px solid rgba(0,200,255,.25); border-radius: 3px;
}
.csf-profile-link:hover { background: rgba(0,200,255,.08); }
.csf-family-link {
background: none; border: none; color: var(--teal); cursor: pointer;
font-family: var(--font-mono); font-size: 10px; padding: 0; text-decoration: underline;
}
/* ── Data health panel ──────────────────────────────────────────────────────── */
.csf-health-panel { padding: 14px 0; }
.csf-health-loading { padding: 40px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.csf-health-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px; margin-bottom: 14px;
}
.csf-health-item {
display: flex; flex-direction: column; gap: 3px;
padding: 10px 14px; background: rgba(0,0,20,.5);
border: 1px solid rgba(0,200,255,.1); border-radius: 4px;
}
.csf-health-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.csf-health-v { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--teal); }
.csf-health-v--warn { color: #f59e0b; }
.csf-health-warn {
font-family: var(--font-mono); font-size: 11px; color: #f59e0b;
padding: 6px 10px; background: rgba(245,158,11,.06); border-left: 2px solid #f59e0b;
border-radius: 0 3px 3px 0; margin-bottom: 6px;
}
/* Setup callout (shown when no data) */
.csf-setup-callout {
display: flex; gap: 14px; padding: 18px;
background: rgba(0,200,255,.04); border: 1px solid rgba(0,200,255,.15);
border-radius: 6px; margin-top: 10px;
}
.csf-setup-icon { font-size: 22px; color: var(--teal); flex-shrink: 0; }
.csf-setup-text { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.65; }
.csf-setup-text strong { color: rgba(255,255,255,.8); }
.csf-setup-cmd {
background: rgba(0,0,0,.4); border: 1px solid rgba(0,200,255,.2); border-radius: 3px;
padding: 8px 12px; margin-top: 8px; font-size: 11px; color: var(--teal);
white-space: pre-wrap; overflow-x: auto;
}
/* Mobile responsive */
@media (max-width: 700px) {
.csf-family-grid { grid-template-columns: 1fr 1fr; }
.csf-stat-strip { gap: 5px; }
.csf-stat { min-width: 65px; padding: 8px 8px; }
.csf-stat-val { font-size: 14px; }
.csf-prof-strip-item { padding: 8px 10px; min-width: 70px; }
.csf-roster-table { font-size: 10px; }
}
@media (max-width: 440px) {
.csf-family-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════════════════════
ORBITAL EXPEDITION CONTROL (/toolbox/expeditions/)
All classes prefixed oec- (orbital expedition control)
══════════════════════════════════════════════════════════════════════════════ */
/* ── Page + Hero ─────────────────────────────────────────────────────────────── */
.oec-hero { position: relative; overflow: hidden; }
.oec-arc-canvas {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; opacity: .4;
}
/* Stat strip */
.oec-stat-strip {
display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 20px;
}
.oec-stat {
display: flex; flex-direction: column; align-items: center;
min-width: 90px; flex: 1; padding: 11px 14px;
background: rgba(0,0,20,.55); border: 1px solid rgba(0,200,200,.1);
border-radius: 5px; transition: border-color .2s;
}
.oec-stat--live .oec-stat-val { color: #34d399; }
.oec-stat-icon { font-size: 12px; color: rgba(0,200,200,.45); margin-bottom: 3px; }
.oec-stat-val { font-family: var(--font-orb); font-size: 18px; font-weight: 700; color: var(--teal); line-height: 1; }
.oec-stat-key { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
@keyframes oec-skel { 0%,100%{opacity:.35} 50%{opacity:.7} }
.oec-stat--skel {
min-width: 80px; height: 65px; border-radius: 5px;
background: rgba(0,200,200,.04); animation: oec-skel 1.4s ease infinite;
}
/* ── Sections ────────────────────────────────────────────────────────────────── */
.oec-section { margin-bottom: 28px; }
.oec-section-hdr {
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px;
}
.oec-section-icon { color: var(--teal); font-size: 14px; flex-shrink: 0; }
.oec-section-title {
font-family: var(--font-orb); font-size: 16px; font-weight: 700; color: #fff; margin: 0;
}
.oec-section-badge {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-left: auto;
}
.oec-live-pulse {
width: 8px; height: 8px; border-radius: 50%; background: #34d399;
animation: at-live-blink 1.5s infinite; flex-shrink: 0;
}
/* ── Live badge ──────────────────────────────────────────────────────────────── */
.oec-live-badge {
font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .07em;
text-transform: uppercase; color: #34d399;
border: 1px solid rgba(52,211,153,.4); border-radius: 3px;
padding: 2px 7px; background: rgba(52,211,153,.07);
animation: at-live-blink 1.5s infinite;
}
/* ── Active Command Deck ─────────────────────────────────────────────────────── */
.oec-active-deck {
display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
scrollbar-width: thin; scrollbar-color: rgba(0,200,200,.2) transparent;
}
.oec-active-card {
position: relative; min-width: 260px; max-width: 300px;
height: 170px; flex-shrink: 0;
border: 1px solid var(--oec-color, rgba(0,200,200,.3));
border-radius: 8px; overflow: hidden; cursor: pointer;
transition: transform .15s, border-color .15s;
}
.oec-active-card:hover { transform: translateY(-3px); border-color: var(--oec-color, var(--teal)); }
.oec-active-card--selected { box-shadow: 0 0 0 2px var(--oec-color, var(--teal)); }
.oec-active-card-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: blur(2px) brightness(.35) saturate(1.3);
transform: scale(1.05);
}
.oec-active-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(160deg, rgba(0,0,20,.7) 40%, transparent);
}
.oec-active-card-body {
position: relative; height: 100%;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 14px;
}
.oec-active-card-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.oec-elapsed {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
color: var(--oec-color, var(--teal)); margin-left: auto;
}
.oec-active-card-name {
font-family: var(--font-orb); font-size: 16px; font-weight: 700; color: #fff;
line-height: 1.2; margin-bottom: 3px;
}
.oec-active-card-station {
font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.55); margin-bottom: 7px;
}
.oec-active-card-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.oec-meta-chip {
font-family: var(--font-mono); font-size: 9px; padding: 2px 7px;
border: 1px solid rgba(255,255,255,.18); border-radius: 3px;
color: rgba(255,255,255,.6); background: rgba(0,0,0,.25);
}
/* ── Filter bar ──────────────────────────────────────────────────────────────── */
.oec-filter-bar {
background: rgba(0,0,20,.5); border: 1px solid rgba(0,200,200,.1);
border-radius: 6px; padding: 14px 16px; margin-bottom: 20px;
display: flex; flex-direction: column; gap: 12px;
}
.oec-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.oec-pill {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em;
padding: 4px 12px; border-radius: 12px;
border: 1px solid rgba(0,200,200,.18); background: transparent;
color: var(--muted); cursor: pointer; transition: all .14s;
}
.oec-pill:hover { border-color: rgba(0,200,200,.4); color: rgba(0,200,200,.9); }
.oec-pill--active { border-color: var(--teal); background: rgba(0,200,200,.08); color: var(--teal); }
.oec-search-sort-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.oec-search-wrap { flex: 1; min-width: 200px; }
.oec-search-input { width: 100%; }
.oec-sort-wrap { display: flex; align-items: center; gap: 6px; }
.oec-sort-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.oec-sort-select { font-size: 11px; }
/* ── Mission tile grid ────────────────────────────────────────────────────────── */
.oec-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
/* Card */
.oec-card {
position: relative;
background: rgba(0,0,20,.65); border: 1px solid rgba(0,200,200,.12);
border-radius: 7px; overflow: hidden; cursor: pointer;
transition: border-color .15s, transform .12s, background .15s;
display: flex; flex-direction: column;
}
.oec-card:hover { border-color: rgba(0,200,200,.38); transform: translateY(-2px); background: rgba(0,0,30,.75); }
.oec-card--active { border-color: rgba(52,211,153,.3); }
.oec-card--selected { border-color: var(--oec-color, var(--teal)); background: rgba(0,200,200,.04); }
.oec-card--skel {
height: 180px; border-radius: 7px;
background: rgba(0,200,200,.04); animation: oec-skel 1.4s ease infinite;
}
.oec-card-img {
position: relative; height: 90px; flex-shrink: 0; overflow: hidden;
background: rgba(0,0,20,.8);
}
.oec-card-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.oec-card-img-placeholder {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
font-family: var(--font-orb); font-size: 28px; font-weight: 700;
color: rgba(0,200,200,.25);
}
.oec-card-station-slug {
position: absolute; top: 8px; left: 8px;
font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em;
padding: 2px 6px; border-radius: 2px; border: 1px solid;
}
.oec-slug--iss { color: #60a5fa; border-color: rgba(96,165,250,.4); background: rgba(96,165,250,.1); }
.oec-slug--tiangong { color: #f97316; border-color: rgba(249,115,22,.4); background: rgba(249,115,22,.1); }
.oec-slug--mir { color: #a78bfa; border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.1); }
.oec-slug--skylab { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); }
.oec-slug--salyut { color: #34d399; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); }
.oec-slug--other { color: var(--muted); border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04); }
.oec-card-live-dot {
position: absolute; top: 8px; right: 8px;
width: 8px; height: 8px; border-radius: 50%; background: #34d399;
animation: at-live-blink 1.5s infinite;
}
.oec-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.oec-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.oec-card-name { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; }
.oec-status-badge {
font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em;
text-transform: uppercase; padding: 2px 6px; border-radius: 2px; border: 1px solid; flex-shrink: 0;
}
.oec-status--active { color: #34d399; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.07); }
.oec-status--completed { color: var(--muted); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.oec-card-station-name { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.oec-card-dates {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.55);
}
.oec-card-arrow { color: rgba(0,200,200,.4); }
.oec-card-dur { display: flex; gap: 6px; flex-wrap: wrap; }
.oec-dur-chip {
font-family: var(--font-mono); font-size: 9px; padding: 2px 7px;
border: 1px solid rgba(0,200,200,.2); border-radius: 3px; color: var(--teal);
}
.oec-eva-chip {
font-family: var(--font-mono); font-size: 9px; padding: 2px 7px;
border: 1px solid rgba(167,139,250,.25); border-radius: 3px; color: #a78bfa;
}
/* ── Load more ────────────────────────────────────────────────────────────────── */
.oec-more-wrap { text-align: center; margin: 16px 0 24px; }
.oec-more-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; padding: 10px 24px;
background: rgba(0,200,200,.06); border: 1px solid rgba(0,200,200,.3);
border-radius: 4px; color: var(--teal); cursor: pointer;
transition: all .15s;
}
.oec-more-btn:hover { background: rgba(0,200,200,.12); border-color: var(--teal); }
.oec-more-btn:disabled { opacity: .4; cursor: default; }
.oec-more-icon { font-size: 14px; }
/* ── Profile section ──────────────────────────────────────────────────────────── */
.oec-profile-wrap {
margin: 4px 0 28px; padding: 20px;
background: rgba(0,0,20,.75); border: 1px solid rgba(0,200,200,.2);
border-radius: 8px; animation: at-prof-in .2s ease;
}
.oec-prof-loading {
padding: 40px; text-align: center;
font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.oec-prof-close {
position: sticky; top: 0; float: right; z-index: 5;
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
background: rgba(0,12,30,.9); border: 1px solid rgba(0,200,200,.2);
border-radius: 3px; padding: 5px 12px; cursor: pointer; margin: 0 0 10px 10px;
}
.oec-prof-close:hover { color: #f87171; border-color: #f87171; }
.oec-prof-header {
position: relative; margin-bottom: 16px;
border-radius: 6px; overflow: hidden;
}
.oec-prof-banner { height: 140px; overflow: hidden; }
.oec-prof-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.oec-prof-title-wrap {
padding: 12px 16px;
background: rgba(0,0,20,.7);
}
.oec-prof-chip-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.oec-prof-station-chip {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
text-transform: uppercase; padding: 2px 8px; border-radius: 3px; border: 1px solid;
}
.oec-prof-done-chip {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em;
text-transform: uppercase; padding: 2px 8px; border-radius: 3px;
color: var(--muted); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
}
.oec-prof-name {
font-family: var(--font-orb); font-size: 22px; font-weight: 700; color: #fff;
margin: 0 0 4px;
}
.oec-prof-elapsed {
font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
/* Mission summary strip */
.oec-prof-strip {
display: flex; flex-wrap: wrap; gap: 0;
border: 1px solid rgba(0,200,200,.1); border-radius: 4px;
overflow: hidden; margin-bottom: 18px;
}
.oec-prof-strip-item {
display: flex; flex-direction: column; align-items: center;
padding: 10px 14px; border-right: 1px solid rgba(0,200,200,.08);
flex: 1; min-width: 80px;
}
.oec-prof-strip-item:last-child { border-right: none; }
.oec-prof-strip-key { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.oec-prof-strip-val { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--teal); }
/* Profile sections */
.oec-prof-sections { display: flex; flex-direction: column; gap: 18px; }
.oec-prof-section {}
.oec-prof-section-hdr {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
/* EVA list */
.oec-eva-list { display: flex; flex-direction: column; gap: 0; }
.oec-eva-row {
display: flex; align-items: center; gap: 10px;
padding: 7px 0; border-bottom: 1px solid rgba(0,200,200,.06);
font-family: var(--font-mono); font-size: 11.5px;
}
.oec-eva-row:last-child { border-bottom: none; }
.oec-eva-dot { color: #a78bfa; flex-shrink: 0; }
.oec-eva-name { color: #fff; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oec-eva-date { color: var(--muted); font-size: 10px; flex-shrink: 0; }
.oec-eva-dur { color: #a78bfa; font-size: 10px; flex-shrink: 0; }
.oec-eva-loc { color: var(--muted); font-size: 10px; flex-shrink: 0; }
/* Station card */
.oec-station-card {
display: flex; gap: 14px;
padding: 14px; background: rgba(0,0,20,.5);
border: 1px solid var(--oec-color, rgba(0,200,200,.15)); border-radius: 5px;
}
.oec-station-img-wrap { flex-shrink: 0; width: 100px; height: 75px; border-radius: 4px; overflow: hidden; }
.oec-station-img { width: 100%; height: 100%; object-fit: cover; }
.oec-station-body { flex: 1; min-width: 0; }
.oec-station-name { font-family: var(--font-orb); font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.oec-station-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.oec-station-dates { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.oec-station-desc {
font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.6; margin: 0 0 8px;
}
/* Crew grid */
.oec-crew-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 10px;
}
.oec-crew-card {
display: flex; flex-direction: column; align-items: center; gap: 4px;
text-align: center;
}
.oec-crew-photo {
width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
border: 2px solid rgba(0,200,200,.2);
}
.oec-crew-initials {
width: 56px; height: 56px; border-radius: 50%;
background: rgba(0,200,200,.1); border: 1px solid rgba(0,200,200,.2);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-orb); font-size: 20px; color: rgba(0,200,200,.5);
}
.oec-crew-name { font-family: var(--font-mono); font-size: 9.5px; color: rgba(255,255,255,.7); }
.oec-crew-role { font-family: var(--font-mono); font-size: 8.5px; color: var(--teal); }
.oec-crew-note {
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
padding: 12px; background: rgba(0,200,200,.04);
border: 1px solid rgba(0,200,200,.1); border-radius: 4px;
}
/* Connected links */
.oec-connected-links { display: flex; flex-wrap: wrap; gap: 8px; }
.oec-prof-ext-link, .oec-prof-link {
font-family: var(--font-mono); font-size: 11px; color: var(--teal);
border: 1px solid rgba(0,200,200,.25); border-radius: 3px;
padding: 5px 12px; text-decoration: none; transition: background .14s;
}
.oec-prof-ext-link:hover, .oec-prof-link:hover { background: rgba(0,200,200,.08); }
/* Expert only */
.oec-prof-expert { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0,200,200,.07); }
.oec-prof-src-id { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.2); }
/* ── Timeline ──────────────────────────────────────────────────────────────────── */
.oec-timeline-section { margin-top: 32px; }
.oec-timeline-scroll {
overflow-x: auto; overflow-y: hidden;
padding-bottom: 10px;
scrollbar-width: thin; scrollbar-color: rgba(0,200,200,.2) transparent;
}
.oec-timeline {
position: relative; min-width: 600px; min-height: 50px;
}
.oec-tl-block {
position: absolute; border-radius: 3px; cursor: pointer;
transition: filter .12s, opacity .12s;
overflow: hidden; display: flex; align-items: center;
}
.oec-tl-block:hover { filter: brightness(1.3); z-index: 2; }
.oec-tl-block--active { animation: at-live-blink 1.5s infinite; }
.oec-tl-label {
font-family: var(--font-mono); font-size: 8px; letter-spacing: .04em;
color: rgba(255,255,255,.75); padding: 0 5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
pointer-events: none;
}
.oec-timeline-legend {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
}
.oec-tl-legend-item {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 9.5px; color: var(--muted);
}
.oec-tl-legend-dot {
width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}
/* ── Compare section ─────────────────────────────────────────────────────────── */
.oec-compare-hint {
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
margin-bottom: 12px;
}
.oec-compare-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.oec-compare-slot {
padding: 16px; background: rgba(0,0,20,.5);
border: 1px dashed rgba(0,200,200,.2); border-radius: 5px;
}
.oec-compare-slot-label {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
text-transform: uppercase; color: var(--teal); margin-bottom: 6px;
}
.oec-compare-slot-inner { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.oec-compare-table { font-size: 12px; margin-top: 14px; }
/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
.oec-grid { grid-template-columns: 1fr 1fr; }
.oec-stat-strip { gap: 5px; }
.oec-stat { min-width: 65px; padding: 8px 8px; }
.oec-stat-val { font-size: 15px; }
.oec-filter-pills { gap: 5px; }
.oec-pill { font-size: 8.5px; padding: 3px 8px; }
.oec-prof-strip-item { padding: 8px 10px; min-width: 70px; }
.oec-prof-banner { height: 100px; }
.oec-prof-name { font-size: 18px; }
.oec-compare-slots { grid-template-columns: 1fr; }
.oec-station-card { flex-direction: column; }
.oec-station-img-wrap { width: 100%; height: 120px; }
}
@media (max-width: 440px) {
.oec-grid { grid-template-columns: 1fr; }
.oec-active-deck { flex-direction: column; }
.oec-active-card { min-width: 100%; max-width: 100%; }
.oec-crew-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}
.oec-crew-agency { font-family: var(--font-mono); font-size: 8px; color: var(--muted); }
.oec-crew-card { text-decoration: none; }
/* ── Under-construction modal ─────────────────────────────────────────────── */
.ucm-backdrop {
position: fixed; inset: 0; z-index: 9000;
background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ucm-backdrop[hidden] { display: none; }
.ucm-box {
background: var(--panel); border: 1px solid rgba(96,165,250,.3);
max-width: 380px; width: 100%; padding: 2rem 2rem 1.5rem;
display: flex; flex-direction: column; align-items: center; gap: .75rem;
text-align: center;
}
.ucm-icon { font-size: 2.2rem; line-height: 1; }
.ucm-title { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0; letter-spacing: .04em; }
.ucm-body { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }
.ucm-btn {
margin-top: .5rem; padding: 8px 28px;
background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.35);
color: #60a5fa; font-family: var(--font-mono); font-size: 12px; cursor: pointer;
transition: background .15s;
}
.ucm-btn:hover { background: rgba(96,165,250,.2); }
/* ── Pipeline Freshness Widget ────────────────────────────────────────────── */
.tb-freshness {
margin-top: 2rem;
border: 1px solid rgba(96,165,250,.12);
background: rgba(14,20,31,.45);
padding: .9rem 1.1rem 1rem;
}
.fr-hdr {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: .65rem;
}
.fr-title {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
color: var(--muted); text-transform: uppercase;
}
.fr-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.fr-grid { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; align-items: flex-start; }
.fr-group { display: flex; flex-direction: column; gap: .25rem; }
.fr-group-lbl {
font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .09em;
color: var(--muted); text-transform: uppercase; margin-bottom: .15rem;
border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: .15rem;
}
.fr-job {
display: flex; align-items: center; gap: .3rem;
font-family: var(--font-mono); font-size: 10.5px; color: var(--text);
white-space: nowrap;
}
.fr-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
transition: box-shadow .2s;
}
.fr-dot--ok { background: #4ade80; }
.fr-dot--warn { background: #fbbf24; }
.fr-dot--stale { background: #f87171; }
.fr-dot--failed { background: #f87171; box-shadow: 0 0 5px #f87171; }
.fr-dot--unknown { background: #4b5563; }
.fr-age { color: var(--muted); font-size: 9.5px; margin-left: .1rem; }
.fr-next { color: #60a5fa; font-size: 9.5px; margin-left: .25rem; font-family: var(--font-mono); }
.fr-next--late { color: #fbbf24; }
.fr-loading { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
@media (max-width: 640px) {
.fr-grid { gap: .5rem 1.1rem; }
.fr-job { font-size: 10px; }
}
/* ── System Status Page (/toolbox/system-status/) ─────────────────────────── */
/* Overall badge + header row */
.ss-overall-row {
display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap;
}
.ss-overall-badge {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: .06em; padding: 5px 14px; border: 1px solid transparent;
}
.ss-generated-at { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.ss-refresh-btn {
font-family: var(--font-mono); font-size: 10px; padding: 4px 12px;
background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.25);
color: #60a5fa; cursor: pointer; transition: background .15s;
}
.ss-refresh-btn:hover:not(:disabled) { background: rgba(96,165,250,.18); }
.ss-refresh-btn:disabled { opacity: .5; cursor: default; }
/* Summary strip */
.ss-summary-strip {
display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem;
}
.ss-stat {
display: flex; flex-direction: column; align-items: center;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
padding: .65rem 1.25rem; min-width: 80px;
}
.ss-stat-val { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.ss-stat-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: .3rem; }
.ss-stat--ok .ss-stat-val { color: #4ade80; }
.ss-stat--warn .ss-stat-val { color: #fbbf24; }
.ss-stat--stale .ss-stat-val { color: #f87171; }
.ss-stat--unknown .ss-stat-val { color: #4b5563; }
/* Status badges */
.ss-badge {
font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
letter-spacing: .08em; padding: 2px 8px; border: 1px solid;
}
.ss-badge--ok { color: #4ade80; border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.07); }
.ss-badge--warn { color: #fbbf24; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.07); }
.ss-badge--stale { color: #fb923c; border-color: rgba(251,146,60,.35); background: rgba(251,146,60,.07); }
.ss-badge--failed { color: #f87171; border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.1); box-shadow: 0 0 6px rgba(248,113,113,.2); }
.ss-badge--unknown { color: #6b7280; border-color: rgba(107,114,128,.3); background: transparent; }
/* Overall badge variants */
.ss-overall-badge.ss-badge--ok { font-size: 13px; }
.ss-overall-badge.ss-badge--failed { font-size: 13px; animation: ss-pulse 2s ease-in-out infinite; }
@keyframes ss-pulse { 0%,100%{opacity:1} 50%{opacity:.65} }
/* Status dots */
.ss-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
.ss-dot--ok { background: #4ade80; }
.ss-dot--warn { background: #fbbf24; }
.ss-dot--stale { background: #fb923c; }
.ss-dot--failed { background: #f87171; box-shadow: 0 0 5px rgba(248,113,113,.6); }
.ss-dot--unknown { background: #4b5563; }
/* Sections */
.ss-section { margin-top: 2.5rem; }
.ss-section-hdr { margin-bottom: 1rem; }
.ss-section-title {
font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text);
text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .35rem;
}
.ss-section-title::before { content: '◈ '; color: #60a5fa; }
.ss-section-sub { font-size: 12px; color: var(--muted); margin: 0; }
.ss-placeholder { font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding: 1rem 0; }
/* Source grid */
.ss-source-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
gap: 1rem;
}
.ss-source-card {
border: 1px solid rgba(96,165,250,.12);
background: rgba(14,20,31,.5);
overflow: hidden;
}
.ss-source-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: .55rem .85rem;
background: rgba(255,255,255,.03);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.ss-source-name {
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: .06em; color: var(--text); text-transform: uppercase;
}
/* Job table inside source card */
.ss-job-table {
width: 100%; border-collapse: collapse;
font-size: 11.5px;
}
.ss-job-table thead th {
font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted); text-align: left;
padding: .35rem .7rem; border-bottom: 1px solid rgba(255,255,255,.06);
white-space: nowrap;
}
.ss-job-table tbody td {
padding: .4rem .7rem;
border-bottom: 1px solid rgba(255,255,255,.04);
vertical-align: middle;
}
.ss-job-row:last-child td { border-bottom: none; }
.ss-job-row:hover td { background: rgba(255,255,255,.025); }
.ss-job-row--failed td { background: rgba(248,113,113,.04); }
.ss-job-row--stale td { background: rgba(251,146,60,.03); }
.ss-job-name { font-family: var(--font-mono); white-space: nowrap; }
.ss-endpoint-key { font-family: var(--font-mono); font-size: 11px; color: var(--teal); white-space: nowrap; }
.ss-status-lbl { font-family: var(--font-mono); font-size: 10px; }
.ss-error-row td { background: rgba(248,113,113,.06) !important; }
.ss-error-msg {
font-family: var(--font-mono); font-size: 10px; color: #f87171;
padding: .3rem .7rem !important; white-space: pre-wrap; word-break: break-all;
}
/* Next update formatting */
.ss-overdue { color: #fbbf24; font-size: 10.5px; }
.ss-next-ok { color: #60a5fa; font-size: 10.5px; }
.ss-next-in { color: var(--muted); font-size: 10px; }
/* Table inventory */
.ss-table-wrap { overflow-x: auto; }
.ss-inv-table {
width: 100%; border-collapse: collapse; font-size: 12px;
border: 1px solid rgba(96,165,250,.1);
}
.ss-inv-table thead th {
font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted); text-align: left;
padding: .5rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.02); white-space: nowrap;
}
.ss-inv-table tbody td {
padding: .5rem .9rem; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle;
}
.ss-inv-table tbody tr:last-child td { border-bottom: none; }
.ss-inv-table tbody tr:hover td { background: rgba(255,255,255,.02); }
/* Run history */
.ss-filter-bar {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
margin-bottom: .75rem;
}
.ss-select {
font-family: var(--font-mono); font-size: 11px;
background: rgba(14,20,31,.8); border: 1px solid rgba(96,165,250,.2);
color: var(--text); padding: 5px 10px; cursor: pointer;
}
.ss-select:focus { outline: 1px solid #60a5fa; }
.ss-run-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.ss-runs-wrap { overflow-x: auto; max-height: 600px; overflow-y: auto; }
.ss-run-table {
width: 100%; border-collapse: collapse; font-size: 11px;
border: 1px solid rgba(96,165,250,.1);
}
.ss-run-table thead th {
font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted); text-align: left;
padding: .45rem .75rem; border-bottom: 1px solid rgba(255,255,255,.08);
background: rgba(14,20,31,.9); position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
.ss-run-table tbody td {
padding: .35rem .75rem; border-bottom: 1px solid rgba(255,255,255,.03); vertical-align: middle;
}
.ss-run-row:hover td { background: rgba(255,255,255,.02); }
.ss-run--failed td { background: rgba(248,113,113,.04); }
.ss-run-status {
font-family: var(--font-mono); font-size: 9.5px; padding: 1px 6px; border: 1px solid;
}
.ss-run-status--ok { color: #4ade80; border-color: rgba(74,222,128,.35); }
.ss-run-status--warn { color: #fbbf24; border-color: rgba(251,191,36,.35); }
.ss-run-status--failed { color: #f87171; border-color: rgba(248,113,113,.4); }
.ss-run-status--unknown { color: #6b7280; border-color: rgba(107,114,128,.3); }
.ss-err-flag { color: #f87171; cursor: help; }
.ss-error-cell { cursor: help; }
/* Shared utility */
.ss-mono { font-family: var(--font-mono); white-space: nowrap; }
.ss-muted { color: var(--muted); }
.ss-dt { font-size: 10.5px; }
.ss-age { font-size: 10.5px; }
.ss-rows { font-size: 11px; text-align: right; }
/* Mobile */
@media (max-width: 768px) {
.ss-source-grid { grid-template-columns: 1fr; }
.ss-summary-strip { gap: .5rem; }
.ss-stat { padding: .5rem .8rem; min-width: 65px; }
.ss-stat-val { font-size: 1.3rem; }
.ss-job-table thead { display: none; }
.ss-job-table td { display: block; padding: .2rem .7rem; }
.ss-job-table td::before { content: attr(data-label) ': '; color: var(--muted); font-size: 9px; }
}
/* ── Segment 8 — Connected-Data Polish ────────────────────────────────────── */
/* Launch-origin section: mobile stack + prevent chip overflow */
@media (max-width: 480px) {
.mm-pd-origin-chips { gap: 3px; }
.mm-pd-chip { font-size: 9.5px; padding: 2px 5px; }
.mm-pd-origin-mission { flex-direction: column; gap: 2px; }
}
/* Constellation badge: don't push off card header at narrow widths */
@media (max-width: 440px) {
.oi-reentry-head { flex-wrap: wrap; gap: 6px; }
.oi-constellation-badge { margin-left: 0; }
}
/* Programs chip strip in spacecraft profile: wrap cleanly on narrow modals */
@media (max-width: 500px) {
.sc-prof-prog-strip { gap: 6px; }
.sc-prof-prog-chip { font-size: 10.5px; padding: 3px 8px; }
}
/* Station owner chips: ensure 44px min tap target height on mobile */
@media (max-width: 480px) {
.ss-owner-chips { gap: 6px; }
.ss-owner-chip { padding: 4px 10px; font-size: 11px; }
}
/* Locations next-launch: compact at narrow widths */
@media (max-width: 380px) {
.lp-next-launch { padding: .5rem .65rem; }
.lp-next-launch-name { font-size: 11px; }
}
/* Timeline link rows: ensure full-width clickable area on mobile */
@media (max-width: 600px) {
.pr-tl-item, .ag-tl-item { flex-wrap: wrap; gap: 4px 8px; padding: 8px 0; }
.pr-tl-item--link:hover, .ag-tl-item--link:hover { background: transparent; }
}
/* Spacecraft profile programs section: hide in compare mode where space is tight */
.veh-cmp-col .sc-prof-prog-strip { display: none; }
/* fr-grid (dashboard pipeline widget): single column below 380px */
@media (max-width: 380px) {
.fr-grid { gap: .4rem .8rem; }
.fr-job { font-size: 10px; }
.fr-next { display: none; } /* hide next-time on very narrow — age is enough */
}
/* ── Robotic Explorers page ─────────────────────────────────────────────────── */
/* Hero orbit rings */
.re-hero-orbit-ring {
position: absolute; border-radius: 50%;
border: 1px solid rgba(0,200,255,.08);
width: 600px; height: 600px;
top: 50%; left: 50%; transform: translate(-50%,-50%);
pointer-events: none;
animation: re-orbit-spin 60s linear infinite;
}
.re-hero-orbit-ring--2 {
width: 900px; height: 900px; border-color: rgba(0,51,255,.06);
animation-duration: 90s; animation-direction: reverse;
}
@keyframes re-orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
/* Hero stats */
.re-hero-stats {
display: flex; flex-wrap: wrap; gap: 10px;
margin: 20px 0 0; padding: 0;
}
.re-stat-chip {
display: flex; flex-direction: column; align-items: center;
background: rgba(0,0,20,.6); border: 1px solid rgba(0,51,255,.25);
border-radius: 8px; padding: 10px 20px; min-width: 110px;
cursor: pointer; transition: border-color .2s, background .2s;
}
.re-stat-chip:hover { border-color: rgba(0,200,255,.5); background: rgba(0,51,255,.12); }
.re-stat-chip--skel {
height: 56px; background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.06);
animation: re-skel-pulse 1.4s ease-in-out infinite;
}
.re-stat-num {
font-family: var(--font-display, 'Orbitron', sans-serif);
font-size: 1.6rem; font-weight: 700; color: var(--teal, #00c8ff); line-height: 1;
}
.re-stat-num--blue { color: var(--blue-bright, #4466ff); }
.re-stat-num--gold { color: #fbbf24; }
.re-stat-lbl {
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: .68rem; color: rgba(255,255,255,.45);
letter-spacing: .08em; text-transform: uppercase; margin-top: 4px;
}
.re-stat-dest-row {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.re-stat-dest-chip {
font-size: .72rem; font-family: var(--font-mono, monospace);
padding: 3px 10px; border-radius: 20px; cursor: pointer;
border: 1px solid rgba(0,200,255,.2); color: rgba(255,255,255,.55);
background: rgba(0,0,20,.5); transition: all .15s;
white-space: nowrap;
}
.re-stat-dest-chip:hover { border-color: var(--teal, #00c8ff); color: var(--teal, #00c8ff); }
/* Filter rail */
.re-filter-rail {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px;
}
.re-filter-pill {
background: rgba(0,0,20,.5); border: 1px solid rgba(0,51,255,.2);
color: rgba(255,255,255,.55); padding: 5px 14px; border-radius: 20px;
font-family: var(--font-mono, monospace); font-size: .75rem; cursor: pointer;
letter-spacing: .05em; transition: all .15s; white-space: nowrap;
}
.re-filter-pill:hover { border-color: rgba(0,200,255,.5); color: rgba(255,255,255,.8); }
.re-filter-pill--active {
background: rgba(0,51,255,.2); border-color: rgba(0,200,255,.6);
color: var(--teal, #00c8ff);
}
/* Section headers */
.re-section-hdr {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono, monospace); font-size: .8rem;
letter-spacing: .12em; text-transform: uppercase;
color: rgba(255,255,255,.5); margin: 0 0 14px;
}
.re-section-icon { color: var(--teal, #00c8ff); }
.re-section-sub { color: rgba(255,255,255,.3); font-size: .72rem; margin-left: 4px; }
/* Sort row */
.re-sort-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.re-sort-label { font-family: var(--font-mono, monospace); font-size: .75rem; color: rgba(255,255,255,.35); }
/* Destination grid */
.re-dest-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;
margin-bottom: 8px;
}
.re-dest-card {
background: rgba(0,0,20,.6); border: 1px solid rgba(0,51,255,.2);
border-radius: 10px; overflow: hidden; cursor: pointer;
transition: border-color .2s, transform .15s;
display: flex; flex-direction: column;
}
.re-dest-card:hover, .re-dest-card:focus-visible {
border-color: rgba(0,200,255,.5); transform: translateY(-2px); outline: none;
}
.re-dest-card--active { border-color: var(--teal, #00c8ff); background: rgba(0,51,255,.12); }
.re-dest-card--skel {
height: 100px; background: rgba(255,255,255,.03);
animation: re-skel-pulse 1.4s ease-in-out infinite;
}
.re-dest-img-wrap { height: 60px; overflow: hidden; }
.re-dest-img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.re-dest-card:hover .re-dest-img { transform: scale(1.06); }
.re-dest-no-img {
height: 60px; display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; background: rgba(0,0,20,.4);
}
.re-dest-card-body { padding: 6px 8px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.re-dest-name { font-family: var(--font-mono, monospace); font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.8); }
.re-dest-stats { font-size: .68rem; display: flex; gap: 4px; align-items: center; }
.re-dest-total { color: rgba(255,255,255,.6); }
.re-dest-active{ color: #4ade80; }
.re-dest-since { font-size: .65rem; color: rgba(255,255,255,.3); }
/* Gallery */
.re-gallery {
display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px;
}
.re-gallery-empty, .re-gallery-error {
grid-column: 1/-1; text-align: center; padding: 40px;
color: rgba(255,255,255,.35); display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.re-empty-icon { font-size: 2rem; opacity: .4; }
/* Explorer card */
.re-card {
background: rgba(0,0,20,.7); border: 1px solid rgba(0,51,255,.2);
border-radius: 10px; overflow: hidden; cursor: pointer;
transition: border-color .2s, transform .15s;
display: flex; flex-direction: column;
}
.re-card:hover, .re-card:focus-visible {
border-color: rgba(0,200,255,.5); transform: translateY(-2px); outline: none;
box-shadow: 0 4px 20px rgba(0,51,255,.15);
}
.re-card--skel {
height: 220px; background: rgba(255,255,255,.03);
animation: re-skel-pulse 1.4s ease-in-out infinite;
}
.re-card-img-wrap {
height: 130px; overflow: hidden; background: rgba(0,0,20,.5);
display: flex; align-items: center; justify-content: center;
}
.re-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.re-card:hover .re-card-img { transform: scale(1.04); }
.re-card-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.re-card-dest-icon { font-size: 2.5rem; opacity: .2; }
.re-card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.re-card-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 2px; }
.re-card-name { font-family: var(--font-display, 'Orbitron', sans-serif); font-size: .85rem; font-weight: 700; color: #e8eeff; margin: 0; }
.re-card-dest { font-family: var(--font-mono, monospace); font-size: .72rem; color: rgba(255,255,255,.4); }
.re-card-date { font-family: var(--font-mono, monospace); font-size: .72rem; color: rgba(255,255,255,.3); }
.re-card-desc {
font-size: .78rem; color: rgba(255,255,255,.45); margin: 4px 0 0; flex: 1;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.re-card-actions { margin-top: 8px; }
.re-card-profile-btn {
width: 100%; background: rgba(0,51,255,.12); border: 1px solid rgba(0,51,255,.3);
color: var(--teal, #00c8ff); padding: 5px; border-radius: 5px; cursor: pointer;
font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .06em;
transition: background .15s, border-color .15s;
}
.re-card-profile-btn:hover { background: rgba(0,51,255,.25); border-color: rgba(0,200,255,.5); }
/* Badges */
.re-badge {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px; border-radius: 10px;
font-family: var(--font-mono, monospace); font-size: .65rem;
letter-spacing: .05em; white-space: nowrap; border: 1px solid;
}
.re-badge--status-active { color: #4ade80; border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.08); }
.re-badge--status-completed { color: rgba(0,200,255,.8); border-color: rgba(0,200,255,.25); background: rgba(0,200,255,.06); }
.re-badge--status-failed { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.07); }
.re-badge--status-lost_contact { color: #fb923c; border-color: rgba(251,146,60,.3); background: rgba(251,146,60,.07); }
.re-badge--status-planned { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.07); }
.re-badge--class { color: rgba(0,200,255,.75); border-color: rgba(0,200,255,.2); background: rgba(0,200,255,.06); }
.re-badge--first { color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.07); }
.re-flag { font-size: 1rem; }
/* Buttons */
.re-retry-btn, .re-clear-btn {
background: rgba(0,51,255,.15); border: 1px solid rgba(0,51,255,.4);
color: var(--teal, #00c8ff); padding: 6px 16px; border-radius: 6px;
cursor: pointer; font-family: var(--font-mono, monospace); font-size: .78rem;
transition: background .15s;
}
.re-retry-btn:hover, .re-clear-btn:hover { background: rgba(0,51,255,.3); }
/* ── Timeline ─────────────────────────────────────────────────────────────── */
.re-timeline-scroll { overflow-x: auto; padding: 4px 0 8px; }
.re-timeline-track { display: flex; min-width: max-content; }
.re-tl-loading { padding: 16px 4px; }
.re-tl-decade {
display: flex; flex-direction: column;
border-left: 1px solid rgba(0,51,255,.2); padding: 0 12px; min-width: 90px;
}
.re-tl-decade-label {
font-family: var(--font-mono, monospace); font-size: .65rem;
color: rgba(255,255,255,.3); letter-spacing: .1em; margin-bottom: 6px;
}
.re-tl-dots { display: flex; flex-wrap: wrap; gap: 4px; max-width: 200px; }
.re-tl-dot {
width: 14px; height: 14px; border-radius: 50%; border: none; cursor: pointer;
background: var(--re-tl-color, #00c8ff); position: relative; padding: 0;
transition: transform .15s, box-shadow .15s;
}
.re-tl-dot:hover {
transform: scale(1.5);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--re-tl-color, #00c8ff) 30%, transparent);
}
.re-tl-dot-star {
position: absolute; top: -5px; right: -5px; font-size: 7px; color: #fbbf24; line-height: 1;
}
.re-timeline-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.re-tl-legend-item {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-mono, monospace); font-size: .68rem; color: rgba(255,255,255,.4);
}
.re-tl-legend-item::before {
content: ''; display: inline-block; width: 9px; height: 9px;
border-radius: 50%; background: var(--re-tl-color, #00c8ff);
}
/* ── Beginner guide cards ─────────────────────────────────────────────────── */
.re-guide-card {
background: rgba(0,0,20,.5); border: 1px solid rgba(0,51,255,.2);
border-radius: 8px; margin-bottom: 8px; overflow: hidden;
}
.re-guide-title {
cursor: pointer; list-style: none; padding: 12px 16px;
font-family: var(--font-mono, monospace); font-size: .82rem; letter-spacing: .06em;
color: rgba(255,255,255,.7); display: flex; justify-content: space-between; align-items: center;
user-select: none;
}
.re-guide-title::after { content: '+'; color: rgba(255,255,255,.3); }
.re-guide-card[open] .re-guide-title::after { content: '−'; }
.re-guide-body { padding: 4px 16px 14px; }
.re-guide-body p { font-size: .84rem; color: rgba(255,255,255,.6); line-height: 1.65; margin: 6px 0; }
.re-guide-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0; font-size: .82rem; }
.re-guide-dl dt { color: var(--teal, #00c8ff); font-weight: 600; }
.re-guide-dl dd { color: rgba(255,255,255,.6); margin: 0; }
/* ── Profile modal ────────────────────────────────────────────────────────── */
.re-modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,8,.75);
z-index: 1000; backdrop-filter: blur(2px);
}
.re-profile-wrap {
position: fixed; inset: 0; z-index: 1001;
display: flex; align-items: flex-start; justify-content: center;
padding: 40px 16px 16px; overflow-y: auto;
}
.re-profile-inner {
background: rgba(3,3,18,.97); border: 1px solid rgba(0,51,255,.3);
border-radius: 12px; width: 100%; max-width: 720px;
box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,200,255,.06);
position: relative; overflow: hidden;
}
.re-modal-close {
position: absolute; top: 12px; right: 14px; z-index: 2;
background: rgba(0,0,20,.6); border: 1px solid rgba(0,51,255,.25);
color: rgba(255,255,255,.6); width: 28px; height: 28px; border-radius: 50%;
cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.re-modal-close:hover { background: rgba(0,51,255,.3); color: #fff; }
.re-modal-loading {
display: flex; align-items: center; gap: 10px; padding: 32px 24px;
font-family: var(--font-mono, monospace); font-size: .8rem; color: rgba(255,255,255,.4);
}
.re-modal-error { padding: 32px 24px; text-align: center; color: rgba(255,255,255,.4); }
/* Profile hero strip */
.re-prof-hero {
display: flex; gap: 16px; padding: 20px 22px 16px;
border-bottom: 1px solid rgba(0,51,255,.15);
background: linear-gradient(135deg, rgba(0,0,20,.9), rgba(0,4,30,.8));
}
.re-prof-hero-img {
width: 90px; height: 90px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
border: 1px solid rgba(0,51,255,.25);
}
.re-prof-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.re-prof-hero-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.re-prof-name {
font-family: var(--font-display, 'Orbitron', sans-serif);
font-size: 1.1rem; font-weight: 700; color: #e8eeff; margin: 0;
}
.re-prof-aliases { font-family: var(--font-mono, monospace); font-size: .7rem; color: rgba(255,255,255,.35); }
.re-prof-dest {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono, monospace); font-size: .78rem; color: rgba(255,255,255,.55);
}
.re-prof-dest-target { color: rgba(255,255,255,.3); }
.re-prof-agency { font-family: var(--font-mono, monospace); font-size: .72rem; color: rgba(255,255,255,.35); }
/* Profile sections */
.re-prof-section { padding: 14px 22px; border-bottom: 1px solid rgba(0,51,255,.1); }
.re-prof-section-lbl {
font-family: var(--font-mono, monospace); font-size: .65rem;
text-transform: uppercase; letter-spacing: .1em;
color: rgba(255,255,255,.3); margin: 0 0 8px;
}
.re-prof-desc { font-size: .86rem; color: rgba(255,255,255,.75); line-height: 1.65; margin: 0 0 6px; }
.re-prof-significance {
font-size: .82rem; color: var(--teal, #00c8ff); background: rgba(0,200,255,.06);
border-left: 2px solid rgba(0,200,255,.4); padding: 8px 12px;
border-radius: 0 4px 4px 0; margin-top: 8px;
}
.re-prof-long-desc { font-size: .8rem; color: rgba(255,255,255,.45); line-height: 1.6; margin: 6px 0 0; }
.re-prof-launch-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px;
}
.re-prof-launch-item { display: flex; flex-direction: column; gap: 2px; }
.re-prof-launch-lbl {
font-family: var(--font-mono, monospace); font-size: .62rem;
text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.3);
}
.re-prof-launch-item > span:last-child { font-family: var(--font-mono, monospace); font-size: .8rem; color: rgba(255,255,255,.7); }
.re-prof-link {
display: inline-block; margin-top: 6px; font-family: var(--font-mono, monospace);
font-size: .75rem; color: var(--teal, #00c8ff); text-decoration: none;
}
.re-prof-link:hover { text-decoration: underline; }
.re-prof-id-row {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(0,0,20,.5); border: 1px solid rgba(0,51,255,.15);
padding: 3px 10px; border-radius: 4px; margin: 2px; font-size: .75rem;
}
.re-prof-id-row span { color: rgba(255,255,255,.35); font-family: var(--font-mono, monospace); }
.re-prof-id-row code { color: #a5b4fc; font-family: var(--font-mono, monospace); }
.re-prof-related-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.re-prof-related-chip {
background: rgba(0,51,255,.1); border: 1px solid rgba(0,51,255,.25);
color: var(--teal, #00c8ff); padding: 3px 10px; border-radius: 20px;
font-family: var(--font-mono, monospace); font-size: .72rem; cursor: pointer;
transition: background .15s;
}
.re-prof-related-chip:hover { background: rgba(0,51,255,.25); }
.re-prof-list {
margin: 0; padding-left: 18px;
font-size: .82rem; color: rgba(255,255,255,.6); line-height: 1.8;
}
.re-prof-spec-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: .8rem; }
.re-prof-spec-dl dt { color: rgba(255,255,255,.35); font-family: var(--font-mono, monospace); }
.re-prof-spec-dl dd { color: rgba(255,255,255,.7); margin: 0; }
.re-prof-extlinks { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 22px; border-bottom: 1px solid rgba(0,51,255,.1); }
.re-prof-extlink {
background: rgba(0,0,20,.5); border: 1px solid rgba(0,51,255,.2);
color: var(--teal, #00c8ff); padding: 4px 12px; border-radius: 5px;
font-family: var(--font-mono, monospace); font-size: .75rem;
text-decoration: none; transition: background .15s;
}
.re-prof-extlink:hover { background: rgba(0,51,255,.2); }
.re-prof-src-note { font-family: var(--font-mono, monospace); font-size: .7rem; color: rgba(255,255,255,.3); padding: 8px 22px; }
/* Skeleton pulse */
@keyframes re-skel-pulse {
0%, 100% { opacity: .6; }
50% { opacity: .3; }
}
/* Mobile */
@media (max-width: 640px) {
.re-gallery { grid-template-columns: 1fr; }
.re-dest-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); }
.re-prof-hero { flex-direction: column; }
.re-prof-hero-img { width: 100%; height: 160px; }
.re-filter-rail { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
.re-hero-stats { gap: 6px; }
.re-stat-chip { padding: 8px 14px; min-width: 90px; }
}
/* =====================================================================
NASA MISSION ENRICHMENT COMPONENTS
Used by: nasa-missions.js
Scope: mission browser, enrichment overlay panels, detail panels
===================================================================== */
/* ── Shared badges ──────────────────────────────────────────────────── */
.nasa-badge {
display: inline-block;
font-family: var(--font-mono, 'Share Tech Mono', monospace);
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.6);
white-space: nowrap;
}
.nasa-badge--status-active { color: #4ade80; border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.07); }
.nasa-badge--status-planned { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.07); }
.nasa-badge--status-completed { color: rgba(0,200,255,.8); border-color: rgba(0,200,255,.25); background: rgba(0,200,255,.06); }
.nasa-badge--status-failed { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.07); }
.nasa-badge--status-cancelled { color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.12); }
.nasa-badge--status-unknown { color: rgba(255,255,255,.35); border-color: rgba(255,255,255,.1); }
.nasa-badge--type { color: rgba(0,200,255,.75); border-color: rgba(0,200,255,.2); background: rgba(0,200,255,.06); }
.nasa-badge--source { color: #fff; background: rgba(11,61,145,.6); border-color: rgba(11,61,145,.8); letter-spacing: .12em; }
/* ── Chips ──────────────────────────────────────────────────────────── */
.nasa-chip {
display: inline-block;
font-family: var(--font-mono, monospace);
font-size: 10px;
padding: 2px 6px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.5);
white-space: nowrap;
}
.nasa-chip--target { color: rgba(251,191,36,.8); border-color: rgba(251,191,36,.2); background: rgba(251,191,36,.05); }
.nasa-chip--program { color: rgba(167,139,250,.8); border-color: rgba(167,139,250,.2); background: rgba(167,139,250,.05); }
.nasa-chip--agency { color: rgba(0,200,255,.7); border-color: rgba(0,200,255,.15); background: rgba(0,200,255,.04); }
/* ── Attribution ────────────────────────────────────────────────────── */
.nasa-attribution {
font-family: var(--font-mono, monospace);
font-size: 10px;
color: rgba(255,255,255,.35);
margin-top: 4px;
display: block;
}
.nasa-attribution a { color: rgba(0,200,255,.5); text-decoration: none; }
.nasa-attribution a:hover { color: rgba(0,200,255,.8); text-decoration: underline; }
.nasa-attribution-block {
padding: 8px 0 4px;
font-family: var(--font-mono, monospace);
font-size: 11px;
color: rgba(255,255,255,.4);
border-top: 1px solid rgba(255,255,255,.06);
margin-top: 12px;
}
.nasa-attribution-label { color: rgba(255,255,255,.3); margin-right: 6px; }
.nasa-attribution-link { color: rgba(0,200,255,.6); text-decoration: none; }
.nasa-attribution-link:hover { color: rgba(0,200,255,.9); text-decoration: underline; }
/* ── Mission browser — card grid ────────────────────────────────────── */
#nasa-mission-browser { padding: 0; }
.nasa-card {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
transition: border-color .18s, background .18s;
display: flex;
flex-direction: column;
}
.nasa-card:hover, .nasa-card:focus {
border-color: rgba(0,200,255,.3);
background: rgba(0,200,255,.04);
outline: none;
}
.nasa-card-img-wrap { height: 120px; overflow: hidden; background: rgba(0,0,0,.3); }
.nasa-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nasa-card-no-img {
height: 80px; display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono, monospace); font-size: 11px;
color: rgba(255,255,255,.2); letter-spacing: .1em;
}
.nasa-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.nasa-card-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.nasa-card-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.3; }
.nasa-card-acronym{ font-family: var(--font-mono, monospace); font-size: 10px; color: rgba(0,200,255,.6); letter-spacing: .1em; }
.nasa-card-summary{ font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.5; flex: 1; }
.nasa-card-meta { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.nasa-card-date { font-family: var(--font-mono, monospace); font-size: 10px; color: rgba(255,255,255,.3); }
/* ── Detail panel (full mission view inside modal) ──────────────────── */
.nasa-detail-panel { padding: 4px 0; }
.nasa-detail-header { margin-bottom: 12px; }
.nasa-detail-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.nasa-detail-name { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.92); margin: 0 0 4px; }
.nasa-detail-acronym { font-family: var(--font-mono, monospace); font-size: 11px; color: rgba(0,200,255,.7); letter-spacing: .12em; margin-bottom: 6px; }
.nasa-detail-dates { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 8px; }
.nasa-detail-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.nasa-detail-summary { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.65; margin: 10px 0; }
.nasa-detail-more { margin: 8px 0; }
.nasa-detail-more summary{ font-size: 12px; color: rgba(0,200,255,.6); cursor: pointer; }
.nasa-detail-long { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.65; margin-top: 8px; }
.nasa-detail-section-head{ font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); margin: 14px 0 6px; }
.nasa-detail-facts-wrap,
.nasa-detail-instr-wrap { margin: 10px 0; }
.nasa-detail-facts { width: 100%; border-collapse: collapse; font-size: 12px; }
.nasa-detail-facts th { text-align: left; color: rgba(255,255,255,.4); font-weight: 400; padding: 3px 10px 3px 0; width: 40%; font-family: var(--font-mono, monospace); font-size: 11px; }
.nasa-detail-facts td { color: rgba(255,255,255,.75); padding: 3px 0; }
.nasa-detail-facts tr { border-bottom: 1px solid rgba(255,255,255,.04); }
.nasa-detail-instruments { margin: 4px 0 0; padding-left: 16px; }
.nasa-detail-instrument { font-size: 12px; color: rgba(255,255,255,.65); padding: 2px 0; }
.nasa-detail-footer { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.nasa-detail-source-link { display: inline-block; margin-top: 8px; font-size: 12px; color: rgba(0,200,255,.6); text-decoration: none; }
.nasa-detail-source-link:hover { color: rgba(0,200,255,.9); text-decoration: underline; }
/* ── Media gallery inside detail panel ─────────────────────────────── */
.nasa-gallery { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0; padding-bottom: 4px; }
.nasa-gallery-fig { flex: 0 0 auto; width: 160px; }
.nasa-gallery-img { width: 160px; height: 100px; object-fit: cover; border-radius: 4px; display: block;
border: 1px solid rgba(255,255,255,.08); }
.nasa-gallery-credit{ font-size: 9px; color: rgba(255,255,255,.3); margin-top: 3px; font-family: var(--font-mono, monospace); }
/* ── Inline NASA enrichment inside Mission Summary section ──────────────────── */
/* Sits at the end of .re-prof-section, no separate border or panel */
.re-prof-nasa-inline { margin-top: 10px; }
.re-prof-nasa-desc { color: rgba(255,255,255,.65) !important; font-style: italic; }
.re-prof-nasa-source {
display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap;
}
.re-prof-nasa-link {
font-family: var(--font-mono, monospace); font-size: 11px;
color: rgba(0,200,255,.55); text-decoration: none;
transition: color .15s;
}
.re-prof-nasa-link:hover { color: rgba(0,200,255,.9); text-decoration: underline; }
.re-prof-nasa-name {
font-family: var(--font-mono, monospace); font-size: 11px;
color: rgba(255,255,255,.3);
}
.re-prof-nasa-local-link {
font-weight: 600;
color: rgba(0,200,255,.75) !important;
}
.re-prof-nasa-local-link:hover { color: rgba(0,200,255,1) !important; }
/* ── Launch payload NORAD direct links ──────────────────────────────── */
.lb-payload-norad-links {
display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px;
}
.lb-payload-norad-link {
font-family: var(--font-mono, monospace); font-size: 11px;
color: rgba(0,200,255,.6); text-decoration: none;
border: 1px solid rgba(0,200,255,.2); border-radius: 3px;
padding: 2px 7px; transition: border-color .15s, color .15s;
}
.lb-payload-norad-link:hover {
color: rgba(0,200,255,.95); border-color: rgba(0,200,255,.5);
}
.lb-payload-norad-more {
font-family: var(--font-mono, monospace); font-size: 10px;
color: rgba(255,255,255,.3); align-self: center;
}
/* ── Browser-mode modal ─────────────────────────────────────────────── */
.nasa-modal-body { padding: 20px 24px; }
/* ── States ─────────────────────────────────────────────────────────── */
.nasa-loading { padding: 24px; text-align: center; color: rgba(255,255,255,.4); font-size: 13px; }
.nasa-loading-sm { font-size: 11px; color: rgba(255,255,255,.35); }
.nasa-error { padding: 16px; color: #f87171; font-size: 13px; }
.nasa-error-sm { font-size: 11px; color: #f87171; }
.nasa-empty { padding: 24px; text-align: center; color: rgba(255,255,255,.3); font-size: 13px; }
/* ── Ray Mode & Dark Sky Mode pass-through ──────────────────────────── */
.ray-mode .nasa-badge--source { background: rgba(255,140,0,.15); border-color: rgba(255,140,0,.4); color: #ffb347; }
.ray-mode .re-prof-nasa-link { color: rgba(255,140,0,.6); }
.ray-mode .re-prof-nasa-link:hover { color: rgba(255,140,0,.9); }
.dark-sky-mode .nasa-badge--source { opacity: .6; }
@media (max-width: 600px) {
.nasa-gallery-fig { width: 120px; }
.nasa-gallery-img { width: 120px; height: 78px; }
.nasa-enrichment-panel { padding: 12px 14px; }
.nasa-enrich-thumb { width: 40px; height: 28px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
INTERFERENCE COMMAND CONSOLE
Replaces the legacy object table under the skydome.
All variables fall back to existing site tokens.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Outer container ───────────────────────────────────────────────────── */
.oi-console {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ── 1. Threat Ribbon ─────────────────────────────────────────────────── */
.oi-threat-ribbon {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 18px !important;
flex-wrap: wrap;
/* toolbox-panel provides border/bg; we add flex layout */
}
.oi-risk-state {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 10px;
border-radius: 4px;
border: 1px solid rgba(255,255,255,.1);
min-width: 160px;
transition: background .25s, border-color .25s, box-shadow .25s;
}
.oi-risk-state-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.oi-risk-state-label {
font-family: var(--font-orb);
font-size: 12px;
letter-spacing: .15em;
text-transform: uppercase;
font-weight: 700;
}
.oi-risk-state--clear { background: rgba(34,204,102,.08); border-color: rgba(34,204,102,.3); color: #22cc66; }
.oi-risk-state--watch { background: rgba(250,204,21,.08); border-color: rgba(250,204,21,.35); color: #facc15; }
.oi-risk-state--busy { background: rgba(251,146,60,.1); border-color: rgba(251,146,60,.4); color: #fb923c; }
.oi-risk-state--danger { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.45);color: #f87171;
animation: oiRibbonPulse 2s ease-in-out infinite; }
@keyframes oiRibbonPulse {
0%, 100% { box-shadow: none; }
50% { box-shadow: 0 0 12px rgba(248,113,113,.3); }
}
@media (prefers-reduced-motion: reduce) {
.oi-risk-state--danger { animation: none; }
}
/* Ribbon stat counters */
.oi-ribbon-stats { display: flex; align-items: center; gap: 0; flex-wrap: wrap; flex: 1; }
.oi-ribbon-stat { display: flex; flex-direction: column; align-items: center; padding: 0 14px; gap: 2px; min-width: 52px; }
.oi-ribbon-val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--teal, #00c8ff); line-height: 1; }
.oi-ribbon-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #666); }
.oi-ribbon-sep { width: 1px; height: 28px; background: rgba(255,255,255,.08); flex-shrink: 0; }
.oi-ribbon-stat--aircraft .oi-ribbon-val { color: #f0b030; }
.oi-ribbon-stat--critical .oi-ribbon-val { color: #f87171; }
.oi-ribbon-stat--warn .oi-ribbon-val { color: #facc15; }
/* ── Console toolbar: sort + search ──────────────────────────────────── */
.oi-console-toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
background: rgba(0,0,0,.2);
border: 1px solid var(--blue-border, rgba(0,51,255,.35));
border-top: 2px solid var(--blue-bright, #0033ff);
flex-wrap: wrap;
}
.oi-sort-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.oi-sort-btn {
padding: 4px 10px;
border: 1px solid var(--blue-border, rgba(0,51,255,.35));
background: transparent;
color: var(--muted, #666);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .06em;
border-radius: 3px;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.oi-sort-btn:hover { background: var(--bg-hover, rgba(255,255,255,.04)); color: var(--text, #fff); }
.oi-sort-btn--active { background: rgba(0,200,255,.1); border-color: var(--teal, #00c8ff); color: var(--teal, #00c8ff); font-weight: 600; }
.oi-search-wrap { flex: 1; min-width: 160px; }
.oi-search-input {
width: 100%;
padding: 5px 10px;
background: rgba(0,0,0,.4);
border: 1px solid var(--blue-border, rgba(0,51,255,.35));
border-radius: 3px;
color: var(--text, #fff);
font-family: var(--font-mono);
font-size: 12px;
outline: none;
box-sizing: border-box;
transition: border-color .15s;
}
.oi-search-input:focus { border-color: var(--teal, #00c8ff); }
.oi-search-input::placeholder { color: var(--muted, #666); }
/* ── Console body: 2-column layout ──────────────────────────────────── */
.oi-console-body {
display: grid;
grid-template-columns: 1fr 320px;
gap: 12px;
align-items: start;
}
.oi-console-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.oi-console-side { display: flex; flex-direction: column; gap: 12px; }
/* ── 2. Sky Sector Matrix ─────────────────────────────────────────────── */
.oi-matrix-wrap {
overflow-x: auto;
padding: 10px 12px;
-webkit-overflow-scrolling: touch;
}
.oi-matrix-loading { padding: 20px; color: var(--muted, #666); font-size: 13px; font-family: var(--font-mono); }
.oi-matrix-empty { padding: 24px; color: var(--muted, #666); font-size: 13px; font-family: var(--font-mono); text-align: center; }
.oi-mx-grid {
display: flex;
gap: 0;
min-width: 560px; /* enforce horizontal scroll on narrow screens */
}
/* Band label column */
.oi-mx-bcol {
width: 94px;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.oi-mx-bcol::before { /* spacer matching sector-label header row height */
content: '';
height: 22px;
display: block;
}
.oi-mx-blabel {
display: flex;
flex-direction: column;
justify-content: center;
padding: 4px 8px;
min-height: 64px;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.oi-mx-bname { font-size: 10px; color: var(--teal, #00c8ff); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); }
.oi-mx-bel { font-size: 9px; color: var(--muted, #666); font-family: var(--font-mono); margin-top: 2px; }
/* Sector columns */
.oi-mx-col {
flex: 1;
min-width: 60px;
display: flex;
flex-direction: column;
border-left: 1px solid rgba(255,255,255,.04);
}
.oi-mx-slabel {
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
color: rgba(255,255,255,.45);
border-bottom: 1px solid rgba(255,255,255,.08);
background: rgba(0,51,255,.04);
flex-shrink: 0;
}
/* Matrix cells */
.oi-mx-cell {
min-height: 64px;
padding: 4px;
display: flex;
flex-direction: column;
gap: 3px;
border-bottom: 1px solid rgba(255,255,255,.03);
}
.oi-mx-cell--empty { background: transparent; }
.oi-mx-cell--low { background: rgba(34,204,102,.03); }
.oi-mx-cell--medium { background: rgba(250,204,21,.04); }
.oi-mx-cell--high { background: rgba(251,146,60,.05); }
.oi-mx-cell--critical { background: rgba(248,113,113,.07); }
.oi-mx-more {
font-size: 9px;
color: var(--muted, #666);
padding: 1px 3px;
font-family: var(--font-mono);
}
/* ── Object chip cards ────────────────────────────────────────────────── */
.oi-chip-card {
display: flex;
flex-direction: column;
gap: 3px;
padding: 4px 6px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
border-radius: 4px;
cursor: pointer;
text-align: left;
transition: border-color .15s, background .15s, box-shadow .15s;
font-family: var(--font-mono);
}
.oi-chip-card:hover {
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.2);
}
.oi-chip-card--selected {
border-color: var(--chip-color, #00c8ff) !important;
box-shadow: 0 0 0 1px var(--chip-color, #00c8ff),
inset 0 0 6px rgba(0,200,255,.06) !important;
}
.oi-chip-card--pulse { animation: oiChipPulse 2s ease-in-out infinite; }
@keyframes oiChipPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
50% { box-shadow: 0 0 0 4px rgba(248,113,113,.3); }
}
@media (prefers-reduced-motion: reduce) { .oi-chip-card--pulse { animation: none; } }
/* Compact chip (matrix cells) */
.oi-chip-card--compact {
flex-direction: row;
align-items: center;
gap: 4px;
padding: 3px 4px;
}
.oi-chip-card--compact .oi-chip-icon { flex-shrink: 0; font-size: 10px; line-height: 1; }
.oi-chip-card--compact .oi-chip-name { font-size: 9px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.8); }
.oi-chip-card--compact .oi-chip-el { font-size: 9px; color: var(--teal, #00c8ff); flex-shrink: 0; }
.oi-chip-rdot {
width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.oi-chip-rdot--critical { background: #f87171; }
.oi-chip-rdot--high { background: #fb923c; }
.oi-chip-rdot--medium { background: #facc15; }
.oi-chip-rdot--low, .oi-chip-rdot--none { display: none; }
/* Full chip (type lanes) */
.oi-chip-top, .oi-chip-bottom { display: flex; align-items: center; gap: 4px; }
.oi-chip-icon { flex-shrink: 0; line-height: 1; }
.oi-chip-name { font-size: 11px; flex: 1; color: rgba(255,255,255,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-chip-rbadge {
font-size: 8px; font-weight: 700; padding: 0 3px; border-radius: 2px; letter-spacing: .03em; flex-shrink: 0;
}
.oi-chip-rbadge--critical { background: rgba(248,113,113,.2); color: #f87171; }
.oi-chip-rbadge--high { background: rgba(251,146,60,.2); color: #fb923c; }
.oi-chip-rbadge--medium { background: rgba(250,204,21,.15); color: #facc15; }
.oi-chip-rbadge--low, .oi-chip-rbadge--none { display: none; }
.oi-chip-pos { font-size: 9px; color: var(--muted, #666); flex: 1; }
.oi-chip-age { font-size: 9px; color: var(--muted, #666); padding: 0 3px; border-radius: 2px; background: rgba(255,255,255,.06); flex-shrink: 0; }
.oi-chip-age--warn { color: #facc15; background: rgba(250,204,21,.1); }
/* ── 3. Priority Objects ─────────────────────────────────────────────── */
.oi-risk-stack-wrap { display: flex; flex-direction: column; gap: 2px; padding: 8px; max-height: 480px; overflow-y: auto; }
.oi-risk-stack-empty { padding: 24px 16px; color: var(--muted, #666); font-size: 13px; font-family: var(--font-mono); text-align: center; }
.oi-pri-card {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid rgba(255,255,255,.05);
border-left: 3px solid var(--chip-color, rgba(255,255,255,.15));
border-radius: 3px;
background: rgba(0,0,0,.2);
cursor: pointer;
transition: background .15s, border-color .15s;
}
.oi-pri-card:hover { background: rgba(255,255,255,.04); }
.oi-pri-card--selected { background: rgba(0,200,255,.05); border-color: rgba(255,255,255,.1); }
.oi-pri-card--pulse { animation: oiChipPulse 2s ease-in-out infinite; }
.oi-pri-rank { font-family: var(--font-orb); font-size: 11px; color: var(--muted, #666); width: 18px; flex-shrink: 0; text-align: right; }
.oi-pri-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oi-pri-top { display: flex; align-items: center; gap: 5px; }
.oi-pri-icon { flex-shrink: 0; line-height: 1; }
.oi-pri-name { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.9); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-pri-sub { display: flex; align-items: center; gap: 8px; }
.oi-pri-pos { font-family: var(--font-mono); font-size: 10px; color: var(--teal, #00c8ff); flex-shrink: 0; }
.oi-pri-reason { font-family: var(--font-mono); font-size: 10px; color: var(--muted, #666); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-pri-acts { display: flex; gap: 3px; flex-shrink: 0; }
.oi-pri-act {
width: 26px; height: 26px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
border-radius: 3px;
color: var(--muted, #666);
font-size: 12px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .1s, color .1s, border-color .1s;
}
.oi-pri-act:hover { background: rgba(0,200,255,.1); color: var(--teal, #00c8ff); border-color: var(--teal, #00c8ff); }
.oi-pri-act--sel { font-size: 14px; }
/* ── 4. Object Type Lanes ─────────────────────────────────────────────── */
.oi-lanes-wrap { display: flex; flex-direction: column; }
.oi-lane { border-bottom: 1px solid rgba(255,255,255,.04); }
.oi-lane:last-child { border-bottom: none; }
.oi-lane-hdr {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: rgba(0,0,0,.15);
border-left: 3px solid var(--lane-color, rgba(255,255,255,.12));
}
.oi-lane-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--lane-color, var(--teal, #00c8ff)); letter-spacing: .06em; text-transform: uppercase; }
.oi-lane-count { font-family: var(--font-orb); font-size: 13px; font-weight: 700; color: var(--teal, #00c8ff); min-width: 20px; }
.oi-lane-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted, #666); flex: 1; }
.oi-lane-none { font-family: var(--font-mono); font-size: 10px; color: var(--muted, #666); opacity: .5; flex: 1; }
.oi-lane-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 14px 10px; }
.oi-lane-overflow { font-family: var(--font-mono); font-size: 10px; color: var(--muted, #666); padding: 4px 6px; }
.oi-lane--empty .oi-lane-hdr { opacity: .5; }
/* ── 6. Imaging Impact ───────────────────────────────────────────────── */
.oi-impact-wrap { padding: 12px 14px; }
.oi-impact-panel.sp-card--collapsed > .oi-impact-wrap { display: none; }
.oi-den-chart { margin-bottom: 12px; }
.oi-den-bars {
display: flex;
align-items: flex-end;
gap: 4px;
height: 54px;
padding: 0 2px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.oi-den-col { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 3px; height: 100%; justify-content: flex-end; }
.oi-den-bar { width: 100%; border-radius: 2px 2px 0 0; transition: height .3s; min-height: 4px; }
.oi-den-bar--clear { background: rgba(34,204,102,.3); }
.oi-den-bar--watch { background: rgba(250,204,21,.4); }
.oi-den-bar--busy { background: rgba(248,113,113,.4); }
.oi-den-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted, #666); }
.oi-impact-items { display: flex; flex-direction: column; gap: 5px; }
.oi-impact-item {
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 12px;
color: rgba(255,255,255,.75);
padding: 5px 8px;
border-radius: 3px;
line-height: 1.45;
}
.oi-impact-icon { flex-shrink: 0; font-size: 13px; margin-top: 1px; }
.oi-impact-item--ok { background: rgba(34,204,102,.05); }
.oi-impact-item--warn { background: rgba(250,204,21,.05); }
.oi-impact-item--busy { background: rgba(248,113,113,.05); }
.oi-impact-item strong { color: rgba(255,255,255,.9); }
/* ── 5. Selected Object Inspector ─────────────────────────────────────── */
.oi-inspector-empty {
padding: 28px 16px;
color: var(--muted, #666);
font-size: 12px;
font-family: var(--font-mono);
text-align: center;
}
.oi-insp-card { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.oi-insp-hdr { display: flex; align-items: flex-start; gap: 8px; }
.oi-insp-icon { flex-shrink: 0; line-height: 1; margin-top: 2px; }
.oi-insp-title { flex: 1; min-width: 0; }
.oi-insp-name {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--text, #fff);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.oi-insp-type { font-size: 10px; color: var(--muted, #666); text-transform: uppercase; letter-spacing: .07em; margin-top: 2px; }
.oi-insp-coords {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: rgba(0,51,255,.07);
border: 1px solid var(--blue-border, rgba(0,51,255,.35));
border-radius: 4px;
}
.oi-insp-num { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.oi-insp-numval { font-family: var(--font-orb); font-size: 20px; font-weight: 700; color: var(--teal, #00c8ff); line-height: 1; }
.oi-insp-numlbl { font-size: 10px; color: var(--muted, #666); text-transform: uppercase; letter-spacing: .05em; }
.oi-insp-minimap-wrap { flex-shrink: 0; }
.oi-minimap { display: block; }
.oi-insp-data { display: flex; flex-direction: column; }
.oi-insp-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 5px 0;
border-bottom: 1px solid rgba(0,51,255,.07);
}
.oi-insp-row:last-child { border-bottom: none; }
.oi-insp-k { font-family: var(--font-mono); font-size: 11px; color: var(--muted, #666); flex-shrink: 0; }
.oi-insp-v {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text, #fff);
text-align: right;
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
}
.oi-insp-v--warn { color: #facc15; }
.oi-insp-na { font-style: italic; opacity: .55; font-size: 11px; }
.oi-insp-acts { display: flex; gap: 6px; }
.oi-insp-btn {
flex: 1;
padding: 6px 10px;
border: 1px solid var(--blue-border, rgba(0,51,255,.35));
background: rgba(0,51,255,.08);
color: var(--muted, #666);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .04em;
border-radius: 3px;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.oi-insp-btn:hover { background: rgba(0,200,255,.1); color: var(--teal, #00c8ff); border-color: var(--teal, #00c8ff); }
.oi-insp-profile-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--teal, #00c8ff);
border-color: var(--teal, #00c8ff);
background: rgba(0,200,255,.06);
}
.oi-insp-profile-link:hover {
background: rgba(0,200,255,.18);
text-decoration: none;
color: var(--teal, #00c8ff);
}
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.oi-console-body { grid-template-columns: 1fr; }
.oi-console-side { flex-direction: row; flex-wrap: wrap; }
.oi-console-side > .toolbox-panel { flex: 1 1 280px; }
.oi-risk-stack-wrap { max-height: 320px; }
}
@media (max-width: 600px) {
.oi-threat-ribbon { gap: 10px; padding: 8px 12px !important; }
.oi-ribbon-stat { padding: 0 8px; min-width: 42px; }
.oi-ribbon-val { font-size: 16px; }
.oi-console-toolbar { gap: 8px; padding: 6px 10px; }
.oi-sort-btn { padding: 3px 7px; font-size: 10px; }
.oi-console-side { flex-direction: column; }
.oi-insp-numval { font-size: 16px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CONJUNCTION THREAT CONSOLE (.cc-*)
ATMOSPHERIC REENTRY CONSOLE (.rc-*)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Data age badge (shared) ─────────────────────────────────────────────── */
.oi-age-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px; border-radius: 3px;
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
letter-spacing: .04em; text-transform: uppercase;
}
.oi-age--fresh { background: rgba(34,204,102,.1); color: #22cc66; border: 1px solid rgba(34,204,102,.3); }
.oi-age--aging { background: rgba(250,204,21,.1); color: #facc15; border: 1px solid rgba(250,204,21,.3); }
.oi-age--stale { background: rgba(248,113,113,.1); color: #f87171; border: 1px solid rgba(248,113,113,.3); }
.oi-age--unknown { background: rgba(156,163,175,.1); color: #9ca3af; border: 1px solid rgba(156,163,175,.2); }
/* ── Empty states ─────────────────────────────────────────────────────────── */
.cc-empty-state, .rc-empty-state {
display: flex; flex-direction: column; align-items: center;
gap: 8px; padding: 40px 20px; text-align: center;
}
.cc-empty-icon, .rc-empty-icon {
font-size: 28px; opacity: .4; color: var(--teal, #00c8ff);
}
.cc-empty-title, .rc-empty-title {
font-family: var(--font-orb); font-size: 13px; letter-spacing: .1em;
color: rgba(255,255,255,.5); text-transform: uppercase;
}
.cc-empty-sub, .rc-empty-sub {
font-family: var(--font-mono); font-size: 12px; color: var(--muted, #666);
max-width: 380px; line-height: 1.5;
}
/* ── Severity command strip ────────────────────────────────────────────────── */
.cc-sev-strip {
display: flex; align-items: center; gap: 0; flex-wrap: wrap;
padding: 10px 16px; background: rgba(0,0,0,.25);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.cc-sev-total {
display: flex; flex-direction: column; align-items: center;
padding: 0 14px 0 0; gap: 2px; flex-shrink: 0;
}
.cc-sev-total-n { font-family: var(--font-orb); font-size: 22px; font-weight: 700; color: var(--teal, #00c8ff); line-height: 1; }
.cc-sev-total-l { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #666); }
.cc-sev-sep { width: 1px; height: 28px; background: rgba(255,255,255,.07); flex-shrink: 0; margin: 0 10px; }
.cc-sev-spacer { flex: 1; }
.cc-sev-item {
display: flex; flex-direction: column; align-items: center;
padding: 0 10px; gap: 2px; min-width: 46px;
}
.cc-sev-n { font-family: var(--font-mono); font-size: 17px; font-weight: 700; line-height: 1; color: var(--teal, #00c8ff); }
.cc-sev-l { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #666); }
.cc-sev-item--critical .cc-sev-n { color: #f87171; }
.cc-sev-item--vclose .cc-sev-n { color: #fb923c; }
.cc-sev-item--watch .cc-sev-n { color: #facc15; }
.cc-sev-item--monitor .cc-sev-n { color: #4ade80; }
.cc-sev-item--payload .cc-sev-n { color: #a78bfa; }
.cc-sev-item--debris .cc-sev-n { color: #9ca3af; }
/* ── Console main grid ─────────────────────────────────────────────────────── */
.cc-console-grid {
display: grid; grid-template-columns: 320px 1fr; gap: 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.cc-console-left { display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.05); }
.cc-console-right { display: flex; flex-direction: column; min-width: 0; }
/* ── Shared panel title ───────────────────────────────────────────────────── */
.cc-panel-title {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .1em; color: var(--teal, #00c8ff);
padding: 10px 14px 6px; opacity: .8;
}
.cc-panel-hint { font-weight: 400; opacity: .5; font-size: 9px; margin-left: 6px; }
/* ── Risk radar ────────────────────────────────────────────────────────────── */
.cc-radar-panel { padding: 0 0 8px; border-bottom: 1px solid rgba(255,255,255,.05); }
.cc-radar-svg { display: block; overflow: visible; }
.cc-rdot--pulse { animation: ccDotPulse 2s ease-in-out infinite; }
@keyframes ccDotPulse { 0%,100%{opacity:.85} 50%{opacity:1; filter:drop-shadow(0 0 4px rgba(248,113,113,.7));} }
@media (prefers-reduced-motion:reduce) { .cc-rdot--pulse { animation: none; } }
/* ── Object pair type matrix ─────────────────────────────────────────────── */
.cc-matrix-panel { padding: 0 0 10px; }
.cc-mx-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px; padding: 0 12px 4px; background: rgba(255,255,255,.04);
margin: 0 12px;
}
.cc-mx-cell {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 6px 4px; background: rgba(0,0,0,.3);
transition: background .15s;
}
.cc-mx-cell--has { background: rgba(0,51,255,.08); }
.cc-mx-cell--has:hover { background: rgba(0,200,255,.1); }
.cc-mx-pair { font-family: var(--font-mono); font-size: 8px; color: var(--muted, #666); text-align: center; line-height: 1.2; }
.cc-mx-x { color: rgba(255,255,255,.3); margin: 0 2px; }
.cc-mx-n { font-family: var(--font-orb); font-size: 13px; font-weight: 700;
color: var(--teal, #00c8ff); line-height: 1; }
.cc-mx-cell:not(.cc-mx-cell--has) .cc-mx-n { color: var(--muted, #666); opacity: .4; }
/* ── Events list ──────────────────────────────────────────────────────────── */
.cc-events-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px 6px;
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .1em; color: var(--teal, #00c8ff); opacity: .7;
}
.cc-events-count {
font-family: var(--font-orb); font-size: 14px; font-weight: 700;
color: var(--teal, #00c8ff); opacity: 1;
}
.cc-events-list { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 10px; overflow-y: auto; max-height: 560px; }
/* ── Event cards ──────────────────────────────────────────────────────────── */
.cc-ev-card {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px; border-radius: 4px;
border: 1px solid rgba(255,255,255,.06);
border-left: 3px solid rgba(255,255,255,.15);
background: rgba(0,0,0,.2); cursor: pointer;
transition: background .15s, border-color .15s;
}
.cc-ev-card:hover { background: rgba(255,255,255,.04); }
.cc-ev-card--sel { background: rgba(0,200,255,.05); border-left-color: var(--teal, #00c8ff); border-color: rgba(255,255,255,.1); }
.cc-ev-card--critical { border-left-color: #f87171; }
.cc-ev-card--vclose { border-left-color: #fb923c; }
.cc-ev-card--watch { border-left-color: #facc15; }
.cc-ev-card--monitor { border-left-color: #4ade80; }
.cc-ev-card--pulse { animation: ccCardPulse 2.5s ease-in-out infinite; }
@keyframes ccCardPulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 3px rgba(248,113,113,.2);} }
@media (prefers-reduced-motion:reduce) { .cc-ev-card--pulse { animation: none; } }
.cc-ev-hdr { display: flex; align-items: center; gap: 8px; }
.cc-ev-miss { font-family: var(--font-orb); font-size: 16px; font-weight: 700; line-height: 1; }
.cc-ev-tmin { font-family: var(--font-mono); font-size: 12px; color: var(--teal, #00c8ff); margin-left: auto; }
.cc-ev-pair {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 11px;
}
.cc-ev-obj { flex: 1; color: rgba(255,255,255,.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ev-x { color: rgba(255,255,255,.3); font-size: 10px; flex-shrink: 0; }
.cc-ev-tdots { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }
.cc-type-dot { width: 6px; height: 6px; border-radius: 50%; }
.cc-tdot--payload { background: #a78bfa; }
.cc-tdot--debris { background: #9ca3af; }
.cc-tdot--rocket { background: #888; }
.cc-tdot--unk { background: rgba(255,255,255,.2); }
.cc-ev-reasons { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-ev-reason {
font-family: var(--font-mono); font-size: 9px; padding: 1px 6px;
border-radius: 3px; background: rgba(255,255,255,.05);
color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.06);
}
.cc-ev-footer {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 9px; color: var(--muted, #666);
}
.cc-ev-tca { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Conjunction inspector ────────────────────────────────────────────────── */
.cc-inspector { border-top: 1px solid rgba(255,255,255,.07); }
.cc-insp-panel { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.cc-insp-hdr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-insp-miss { font-family: var(--font-orb); font-size: 20px; font-weight: 700; line-height: 1; }
.cc-insp-cdwn { font-family: var(--font-mono); font-size: 14px; color: var(--teal, #00c8ff); }
.cc-insp-close { margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 3px; color: var(--muted, #666); font-size: 13px; padding: 3px 8px; cursor: pointer; }
.cc-insp-close:hover { background: rgba(255,255,255,.05); color: var(--text, #fff); }
.cc-insp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-approach-svg { display: block; width: 100%; max-width: 200px; }
.cc-insp-left { display: flex; flex-direction: column; gap: 4px; }
.cc-insp-right { display: flex; flex-direction: column; gap: 10px; }
.cc-insp-obj { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: rgba(0,0,0,.2); border-radius: 3px; border: 1px solid rgba(255,255,255,.06); }
.cc-insp-obj-label { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted, #666); }
.cc-insp-obj-name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); }
.cc-insp-obj-norad { font-family: var(--font-mono); font-size: 10px; color: var(--teal, #00c8ff); }
.cc-insp-obj-type { font-size: 9px; color: var(--muted, #666); text-transform: uppercase; }
.cc-insp-obj-meta { font-family: var(--font-mono); font-size: 9px; color: var(--muted, #666); }
.cc-insp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(0,51,255,.07); }
.cc-insp-row:last-child { border-bottom: none; }
.cc-insp-k { font-family: var(--font-mono); font-size: 10px; color: var(--muted, #666); flex-shrink: 0; }
.cc-insp-v { font-family: var(--font-mono); font-size: 11px; color: var(--text, #fff); text-align: right; }
.cc-insp-actions { display: flex; gap: 8px; }
.cc-insp-copy { padding: 6px 14px; border: 1px solid var(--blue-border, rgba(0,51,255,.35)); background: rgba(0,51,255,.08); border-radius: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--muted, #666); cursor: pointer; transition: background .15s, color .15s; }
.cc-insp-copy:hover { background: rgba(0,200,255,.1); color: var(--teal, #00c8ff); border-color: var(--teal, #00c8ff); }
/* ═══════════════════════════════════════════════════════════════════════════
REENTRY WATCH CONSOLE
═══════════════════════════════════════════════════════════════════════════ */
/* ── Reentry console container ─────────────────────────────────────────────── */
.rc-console { display: flex; flex-direction: column; }
/* ── Lanes ────────────────────────────────────────────────────────────────── */
.rc-lanes { display: flex; flex-direction: column; gap: 0; }
.rc-lane { border-bottom: 1px solid rgba(255,255,255,.05); }
.rc-lane:last-child { border-bottom: none; }
.rc-lane--empty { opacity: .45; }
.rc-lane-hdr {
display: flex; align-items: center; gap: 8px;
padding: 8px 16px; cursor: default;
border-left: 4px solid rgba(255,255,255,.12);
}
.rc-lane--imminent .rc-lane-hdr { border-left-color: #f87171; background: rgba(248,113,113,.05); }
.rc-lane--soon .rc-lane-hdr { border-left-color: #fb923c; background: rgba(251,146,60,.04); }
.rc-lane--later .rc-lane-hdr { border-left-color: rgba(255,255,255,.2); }
.rc-lane--overdue .rc-lane-hdr { border-left-color: #facc15; background: rgba(250,204,21,.04); }
.rc-lane--confirmed .rc-lane-hdr { border-left-color: #22cc66; background: rgba(34,204,102,.04); }
.rc-lane-icon { font-size: 14px; flex-shrink: 0; }
.rc-lane-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; flex: 1; }
.rc-lane--imminent .rc-lane-label { color: #f87171; }
.rc-lane--soon .rc-lane-label { color: #fb923c; }
.rc-lane--overdue .rc-lane-label { color: #facc15; }
.rc-lane--confirmed .rc-lane-label { color: #22cc66; }
.rc-lane-count { font-family: var(--font-orb); font-size: 14px; font-weight: 700; color: var(--teal, #00c8ff); }
.rc-lane-empty-badge { font-family: var(--font-mono); font-size: 10px; color: var(--muted, #666); }
.rc-lane-cards {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 8px 14px 12px;
}
/* ── Reentry cards ────────────────────────────────────────────────────────── */
.rc-card {
flex: 0 0 auto; width: 220px;
display: flex; flex-direction: column; gap: 5px;
padding: 10px 12px; border-radius: 4px;
border: 1px solid rgba(255,255,255,.07);
background: rgba(0,0,0,.3); cursor: pointer;
transition: background .15s, border-color .15s;
}
.rc-card:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.rc-card--sel { background: rgba(0,200,255,.05); border-color: var(--teal, #00c8ff); }
.rc-card--pulse { animation: rcCardPulse 2.5s ease-in-out infinite; }
@keyframes rcCardPulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 3px rgba(248,113,113,.2);} }
@media (prefers-reduced-motion:reduce) { .rc-card--pulse { animation: none; } }
.rc-card-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rc-card-timing { font-family: var(--font-orb); font-size: 15px; font-weight: 700; color: var(--teal, #00c8ff); line-height: 1; }
.rc-card-timing--imminent { color: #f87171; }
.rc-card-timing--overdue { color: #facc15; }
.rc-card-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-card-link { color: var(--teal, #00c8ff); text-decoration: none; }
.rc-card-link:hover { text-decoration: underline; }
.rc-card-meta { font-family: var(--font-mono); font-size: 9px; color: var(--muted, #666); }
.rc-card-when { font-family: var(--font-mono); font-size: 10px; color: var(--muted, #666); }
.rc-card-when-k { color: rgba(255,255,255,.35); margin-right: 3px; }
.rc-card-when-v { color: rgba(255,255,255,.7); }
.rc-card-unc { display: flex; align-items: center; gap: 6px; }
.rc-unc-label { font-family: var(--font-mono); font-size: 9px; color: var(--muted, #666); white-space: nowrap; }
.rc-card-reasons { display: flex; flex-wrap: wrap; gap: 3px; }
.rc-reason { font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; border-radius: 2px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.45); }
.rc-card-age { }
.rc-card-src { font-family: var(--font-mono); font-size: 9px; color: var(--muted, #666); opacity: .7; }
/* ── Reentry inspector ────────────────────────────────────────────────────── */
.rc-inspector { border-top: 1px solid rgba(255,255,255,.07); }
.rc-insp-panel { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.rc-insp-hdr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-insp-name { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text, #fff); flex: 1; }
.rc-insp-timing { font-family: var(--font-orb); font-size: 16px; font-weight: 700; color: var(--teal, #00c8ff); }
.rc-insp-timing--overdue { color: #facc15; }
.rc-insp-close { background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 3px; color: var(--muted, #666); font-size: 13px; padding: 3px 8px; cursor: pointer; }
.rc-insp-close:hover { background: rgba(255,255,255,.05); color: var(--text, #fff); }
.rc-insp-body { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: start; }
.rc-descent-svg { display: block; width: 100%; border-radius: 4px; border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.rc-descent-note { font-family: var(--font-mono); font-size: 8px; color: var(--muted, #666); margin-top: 4px; text-align: center; opacity: .6; }
.rc-insp-visual { display: flex; flex-direction: column; }
.rc-insp-data { display: flex; flex-direction: column; }
.rc-insp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(0,51,255,.06); }
.rc-insp-row:last-child { border-bottom: none; }
.rc-insp-row--note { font-family: var(--font-mono); font-size: 9px; color: var(--muted, #666); opacity: .7; justify-content: flex-start; white-space: normal; line-height: 1.4; margin-top: 4px; }
.rc-insp-k { font-family: var(--font-mono); font-size: 10px; color: var(--muted, #666); flex-shrink: 0; }
.rc-insp-v { font-family: var(--font-mono); font-size: 11px; color: var(--text, #fff); text-align: right; }
.rc-insp-actions { display: flex; gap: 8px; align-items: center; }
.rc-insp-copy { padding: 6px 14px; border: 1px solid var(--blue-border, rgba(0,51,255,.35)); background: rgba(0,51,255,.08); border-radius: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--muted, #666); cursor: pointer; transition: background .15s, color .15s; }
.rc-insp-copy:hover { background: rgba(0,200,255,.1); color: var(--teal, #00c8ff); border-color: var(--teal, #00c8ff); }
.rc-insp-profile { padding: 6px 14px; border: 1px solid var(--blue-border, rgba(0,51,255,.35)); background: rgba(0,51,255,.08); border-radius: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--teal, #00c8ff); text-decoration: none; transition: background .15s; }
.rc-insp-profile:hover { background: rgba(0,200,255,.1); }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.cc-console-grid { grid-template-columns: 1fr; }
.cc-console-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
.cc-insp-body { grid-template-columns: 1fr; }
.rc-insp-body { grid-template-columns: 1fr; }
.rc-card { width: 200px; }
}
@media (max-width: 600px) {
.cc-sev-strip { gap: 6px; padding: 8px 10px; }
.cc-sev-item { padding: 0 6px; min-width: 38px; }
.cc-sev-n { font-size: 14px; }
.rc-card { width: 100%; flex: 0 0 100%; }
.rc-lane-cards { padding: 6px 10px 10px; }
}