/* ════════════════════════════════════════════════
   AstroE TrendBoard — Trend Galaxy
   Layers per planet (each animates one thing, transform/opacity only):
     .ring      rotates (70s / 100s / 140s / 190s)
     .p-pos     fixed point on the ring
     .p-rot     counter-rotates so labels stay upright
     .p-fly     fly-in from the sun on load
     .planet    hover scale; size via --k
   ════════════════════════════════════════════════ */

.titlebar .tag { flex-shrink: 0; }
.titlebar .gx-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.content.gx { display: flex; flex-direction: column; }
.gx-hero, .gx-crumb, .gx-legend-m, .gx-report-m, .stage-count { display: none; }

.gx-panel { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 640px; overflow: hidden; border-radius: var(--r-3xl); }
.gx-bar { display: flex; align-items: center; gap: 10px; height: 58px; flex-shrink: 0; padding: 0 16px; border-bottom: 1px solid var(--line); }
.gx-bar > span { font-size: 12px; color: var(--muted); }
.gx-bar .shown { font-family: var(--font-mono); font-size: 11px; margin-left: 8px; }
.gx-bar .grow { flex-grow: 1; }
.gx-bar .btn { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }
.gx-bar .btn svg { width: 13px; height: 13px; }
.btn .i-play { display: none; }
.is-paused-btn .i-play { display: block; }
.is-paused-btn .i-pause { display: none; }

/* ── Stage ── */
.stage {
  position: relative; flex: 1; overflow: hidden;
  background-color: var(--space);
  background-image:
    radial-gradient(circle at 50% 50%, var(--g1), transparent 42%),
    radial-gradient(ellipse 60% 40% at 80% 20%, var(--g2), transparent 70%),
    radial-gradient(1px 1px at 30px 40px, var(--star), transparent),
    radial-gradient(1px 1px at 110px 160px, var(--star2), transparent),
    radial-gradient(1.5px 1.5px at 190px 70px, var(--star), transparent),
    radial-gradient(1px 1px at 250px 210px, var(--star2), transparent),
    radial-gradient(1px 1px at 70px 250px, var(--star), transparent);
  background-size: 100% 100%, 100% 100%, 280px 280px, 280px 280px, 280px 280px, 280px 280px, 280px 280px;
}
.orbits {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: translateX(var(--shift, 0px));
  transition: transform 600ms var(--ease-out);
}
.gx-panel.has-sel .orbits { --shift: calc(var(--panel-w, 356px) / -2); }

.ring {
  position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1);
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  border-radius: 50%; border: 1px dashed var(--orbit);
  animation: spin var(--dur) linear infinite;
  transition: border-color var(--base);
  pointer-events: none;   /* rings are squares: they'd cover the sun and inner planets */
}
.planet { pointer-events: auto; }
.ring.has-sel { border-color: var(--accent-text); }
.p-pos { position: absolute; width: 0; height: 0; }
.p-rot { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: spin var(--dur) linear infinite reverse; }
.p-fly { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.p-fly.fly { animation: fly-in 900ms var(--ease-out) both; animation-delay: var(--delay, 0ms); }
@keyframes fly-in {
  from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.15); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
.stage.paused .ring, .stage.paused .p-rot { animation-play-state: paused; }

.planet {
  position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #06140F;
  transform: scale(var(--k, .6));
  transition: transform var(--base) var(--ease-out);
}
.planet::before { content: ""; position: absolute; inset: calc(var(--hit, 10px) * -1); border-radius: 50%; }   /* ≥44px hit area */
.planet::after {  /* glow layer: brighter on hover */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 32px var(--glow); opacity: .75; transition: opacity var(--base);
}
.planet--up   { --glow: rgba(79, 209, 165, .55); background: radial-gradient(circle at 32% 28%, #E6FFF5, #4FD1A5 45%, #0E5A44); }
.planet--down { --glow: rgba(255, 107, 90, .5);  background: radial-gradient(circle at 32% 28%, #FFEAE5, #FF6B5A 45%, #7A2A18); }
.planet--flat { --glow: rgba(139, 143, 163, .45); background: radial-gradient(circle at 32% 28%, #FFFFFF, #A7ABBD 45%, #3E4256); }
.planet:hover, .planet:focus-visible { transform: scale(calc(var(--k, .6) * 1.18)); }
.planet:hover::after, .planet:focus-visible::after, .planet.is-sel::after { opacity: 1; box-shadow: 0 0 44px var(--glow); }
.planet:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.planet.is-sel { box-shadow: 0 0 0 5px var(--space), 0 0 0 8px var(--accent-text); }

.p-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  padding: 3px 8px; border-radius: var(--r-pill); background: var(--frame); border: 1px solid var(--line2);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text);
  transform: translate(-50%, var(--ly, 30px));
  opacity: .72; transition: opacity var(--base), transform var(--base) var(--ease-out), border-color var(--base);
}
.p-label b { font-weight: 600; }
.p-label.is-top, .p-fly:hover .p-label, .p-label.is-sel { opacity: 1; }
.p-fly:hover .p-label, .p-label.is-sel { border-color: var(--accent); }

/* Sun: mascot badge + two expanding halos */
.sun { position: absolute; left: 0; top: 0; }
.sun .halo {
  position: absolute; left: calc(var(--sun) / -2); top: calc(var(--sun) / -2);
  width: var(--sun); height: var(--sun); border-radius: 50%; border: 2px solid var(--accent-text);
  animation: halo 3.6s ease-out infinite; pointer-events: none;
}
.sun .halo + .halo { border-color: #F472B6; animation-delay: 1.8s; }
.sun .badge {
  --size: var(--sun); --ring: 4px;
  position: absolute; left: calc(var(--sun) / -2); top: calc(var(--sun) / -2); padding: 0; cursor: pointer;
}
.sun .badge::before { box-shadow: 0 0 0 6px rgba(236, 72, 153, .14), 0 0 60px rgba(236, 72, 153, .55), 0 0 120px var(--g2); }
.sun-label {
  position: absolute; left: -100px; width: 200px; top: calc(var(--sun) / 2 + 12px); text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--muted);
}

/* Legend + hint */
.gx-legend {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--frame); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted);
}
.gx-legend .eyebrow { font-size: 9.5px; }
.gx-legend > span:not(.eyebrow), .gx-legend-m > span { display: flex; align-items: center; gap: 8px; }
.gx-legend svg { width: 16px; height: 16px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot--up { background: var(--up); }
.dot--down { background: var(--down); margin-left: 6px; }
.gx-hint {
  position: absolute; right: 20px; top: 20px; z-index: 2;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--frame); border: 1px solid var(--line2); font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}
.gx-hint .live-dot, .gx-hint .live-dot::after { background: var(--accent-text); width: 6px; height: 6px; }
.gx-panel.has-sel .gx-hint { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* ── Details panel: slides in from the right ── */
.gx-detail {
  position: absolute; right: 14px; top: 72px; bottom: 14px; z-index: 3; width: 356px;
  display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow-y: auto;
  border-radius: var(--r-2xl); background: var(--frame); border: 1px solid var(--line2);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .4);
  background-image: radial-gradient(ellipse 300px 180px at 100% 0%, var(--accent-soft), transparent 70%);
  opacity: 0; transform: translateX(40px); visibility: hidden;
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out), visibility 0s linear var(--slow);
}
.gx-panel.has-sel .gx-detail { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.gd-head { display: flex; align-items: center; gap: 12px; }
.gd-orb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #06140F; box-shadow: 0 0 24px var(--glow); }
.gd-id { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.gd-id strong { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.gd-id span { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.gd-close { width: 36px; height: 36px; border-radius: 10px; }
.gd-heat { display: flex; align-items: baseline; gap: 8px; }
.gd-heat b { font-family: var(--font-mono); font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.gd-heat small { font-size: 12px; color: var(--muted); }
.gd-chart { position: relative; border-radius: 12px; background: var(--chart); border: 1px solid var(--line); padding: 8px 0 6px 8px; }
.gd-chart svg { display: block; width: 100%; height: auto; }
.gd-chart .grid { stroke: var(--grid); }
.gd-chart .w-up { stroke: var(--up); } .gd-chart .w-down { stroke: var(--down); }
.gd-chart .b-up { fill: var(--up); } .gd-chart .b-down { fill: var(--down); }
.gd-chart .last { stroke: var(--up); stroke-dasharray: 3 3; }
.gd-chart .pill { fill: var(--up); }
.gd-chart text { font-family: var(--font-mono); font-size: 9px; font-weight: 600; fill: #06140F; }
.gd-chart .wait { display: grid; place-items: center; height: 96px; padding: 10px; text-align: center; font-size: 12px; color: var(--muted); }
.gd-chart .wait strong { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--text); }
.gd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gd-stats .stat > span:first-child { letter-spacing: .12em; }
.gd-stats .stat > span:last-child { font-size: 14px; }
.gd-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gd-actions .btn { height: 40px; width: 100%; }
.gd-sep { height: 1px; background: var(--line2); flex-shrink: 0; }

/* Orbit report */
.report { display: flex; flex-direction: column; gap: 8px; }
.report-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px;
  border-radius: 12px; border: 1px solid var(--line); background: transparent; text-align: left;
  transition: border-color var(--fast), background-color var(--fast), transform var(--fast) var(--ease-out);
}
.report-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.report-item:active { transform: scale(.98); }
.report-item i { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 14px var(--glow); }
.report-item .lbl { flex-grow: 1; font-size: 11.5px; color: var(--muted); }
.report-item .sym { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.report-item .val { width: 62px; text-align: right; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; }

.gx-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; color: var(--muted); font-size: 13px; }
.gx-empty[hidden] { display: none; }

/* ════════ Reduced motion: no orbit, halo or fly-in ════════ */
@media (prefers-reduced-motion: reduce) {
  .ring, .p-rot, .sun .halo { animation: none !important; }
  .sun .halo { display: none; }
  .p-fly.fly { animation: fade-in 1ms both !important; }
  .orbits { transition: none; }
  .gx-detail { transform: none; transition: opacity var(--base) linear, visibility 0s linear var(--base); }
}

/* ════════ <1024px: mobile galaxy ════════ */
@media (max-width: 1023.98px) {
  .content.gx { gap: 16px; }
  .gx-crumb { display: flex; align-items: center; gap: 8px; padding-top: 14px; font-size: 13px; color: var(--muted); }
  .gx-crumb a { color: var(--muted); display: inline-flex; align-items: center; min-height: var(--tap); }
  .gx-crumb .sep { color: var(--faint-text); }
  .gx-crumb strong { font-weight: 400; color: var(--text); }
  .gx-hero { display: flex; flex-direction: column; gap: 10px; }
  .gx-hero .eyebrow { color: var(--accent-text); }
  .gx-hero h1 { font-family: var(--font-display); font-size: 34px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; }
  .gx-hero p { font-size: 15px; line-height: 1.5; color: var(--muted); }

  .gx-panel { min-height: 0; overflow: visible; border-radius: 0; background: none; border: 0; gap: 10px; }
  .gx-bar { height: auto; padding: 0; border: 0; gap: 8px; }
  .gx-bar > span:first-child, .gx-bar .shown { display: none; }
  .gx-bar .seg button { height: 32px; font-size: 12px; }
  .gx-bar .btn { width: var(--tap); height: var(--tap); padding: 0; border-radius: 12px; }
  .gx-bar .btn .l { display: none; }
  .gx-bar .btn svg { width: 14px; height: 14px; }

  .stage { flex: none; height: 400px; border-radius: var(--r-3xl); border: 1px solid var(--line2); }
  .gx-panel.has-sel .orbits { --shift: 0px; }
  .gx-legend, .gx-hint { display: none; }
  .stage-count { display: block; position: absolute; left: 12px; top: 12px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); }
  .sun-label { display: none; }
  .p-label { font-size: 9.5px; padding: 2px 6px; opacity: 0; }
  .p-label.is-top, .p-label.is-sel { opacity: 1; }

  .gx-legend-m { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 0 4px; font-size: 11.5px; color: var(--muted); }
  .gx-legend-m .dot { width: 7px; height: 7px; margin: 0; }

  /* details become a card under the stage */
  .gx-detail {
    position: static; width: auto; overflow: visible; display: none;
    border-color: var(--accent); border-radius: var(--r-3xl); box-shadow: none;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    background-color: var(--panel); scroll-margin-top: 80px;
  }
  .gx-panel.has-sel .gx-detail { display: flex; animation: rise-in 400ms var(--ease-out) both; }
  .gd-close { width: 40px; height: 40px; border-radius: 12px; }
  .gd-heat b { font-size: 32px; }
  .gd-actions { display: flex; gap: 10px; }
  .gd-actions .btn { flex: 1; height: 46px; border-radius: 12px; font-size: 14px; }
  .gx-detail .gd-sep, .gx-detail .report-title, .gx-detail .report { display: none; }

  .gx-report-m { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
  .gx-report-m .report { gap: 10px; }
  .gx-report-m .report-item { padding: 12px 14px; border-radius: var(--r-xl); background: var(--panel); min-height: 56px; }
  .gx-report-m .report-item i { width: 28px; height: 28px; }
  .gx-report-m .lbl { display: flex; flex-direction: column; gap: 2px; }
  .gx-report-m .lbl .sym { font-size: 14px; color: var(--text); }
  .gx-report-m .val { width: auto; font-size: 13px; }
}
/* report symbol placement: inline on desktop, under the label on mobile */
.report-item .m-sym { display: none; }
@media (max-width: 1023.98px) {
  .gx-report-m .m-sym { display: block; }
  .gx-report-m .d-sym { display: none; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .gx-panel.has-sel .gx-detail { animation: fade-in var(--base) linear both; }
}