/* ════════════════════════════════════════════════
   AstroE TrendBoard — Layout
   ≥1024px: floating glass app window with sidebar (desktop mockups)
   <1024px: mobile website — sticky header, ☰ menu, footer (mobile mockups)
   ════════════════════════════════════════════════ */

/* flow-root: stops the window's top margin collapsing through <body>,
   which would push absolutely-positioned beacons/skip-link down with it. */
body { position: relative; display: flow-root; overflow-x: hidden; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: var(--z-toast);
  padding: 10px 16px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font-weight: 600;
  transition: transform var(--fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(76px); }

/* ── Background glows: fixed layers that breathe (opacity/scale only) ── */
.bg { position: fixed; inset: 0; z-index: var(--z-glow); pointer-events: none; overflow: hidden; }
.glow {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent 70%);
  animation: breathe var(--dur, 10s) var(--ease-in-out) infinite;
  animation-delay: var(--delay, 0s);
}
.glow--top    { --c: var(--g1); width: 1800px; height: 760px;  left: 50%;  top: -8%;  margin: -380px 0 0 -900px; }
.glow--bottom { --c: var(--g2); width: 2200px; height: 720px;  left: 50%;  top: 108%; margin: -360px 0 0 -1100px; --dur: 12s; --delay: -4s; }
.glow--side   { --c: var(--g2); width: 600px;  height: 1000px; left: -4%;  top: 60%;  margin: -500px 0 0 -300px;  --dur: 9s;  --delay: -7s; }

/* ── Beacon lights above the window ── */
.beacons { position: absolute; top: 0; left: 50%; width: min(1440px, 100%); height: 64px; transform: translateX(-50%); pointer-events: none; z-index: var(--z-glow); }
.beam { position: absolute; top: var(--top, 0); left: var(--x); width: 1px; height: var(--h, 62px); background: linear-gradient(180deg, transparent, var(--beam)); }
.beacon {
  position: absolute; top: var(--top); left: calc(var(--x) - var(--s, 9px) / 2 + .5px);
  width: var(--s, 9px); height: var(--s, 9px); border-radius: 50%;
  background: var(--dot); box-shadow: 0 0 14px 4px var(--g1);
  animation: twinkle 3s ease-in-out infinite; animation-delay: var(--delay, 0s);
}

/* ── App: full page. The background glows blend behind everything;
   panels stay translucent so the gradient shows through. ── */
.beacons { display: none; }
.app {
  position: relative; z-index: var(--z-window);
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px 18px 20px;
  border-right: 1px solid var(--line);
  /* stays in view while long pages scroll */
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: none;
}
.sidebar .spacer { flex-grow: 1; }
.sidebar-note { padding: 0 6px; font-size: 11px; line-height: 1.5; color: var(--faint-text); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.titlebar { height: 68px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.titlebar h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.titlebar .grow { flex-grow: 1; }

.content { flex: 1; min-height: 0; padding: 0 20px 20px; }

/* ── Mobile header, menu, footer: hidden on desktop ── */
.m-header, .site-footer { display: none; }

/* ════════════ <1024px: mobile website ════════════ */
@media (max-width: 1023.98px) {
  .beacons, .sidebar, .titlebar { display: none; }

  .glow--top    { --c: var(--g1); width: 840px; height: 600px; left: 50%;  top: -6%;  margin: -300px 0 0 -420px; }
  .glow--side   { --c: var(--g2); width: 800px; height: 600px; left: 110%; top: 55%;  margin: -300px 0 0 -400px; }
  .glow--bottom { --c: var(--g1); width: 800px; height: 520px; left: 50%;  top: 104%; margin: -260px 0 0 -400px; }

  .app {
    display: block; width: 100%; min-height: 0; margin: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow: visible;
  }
  .content { padding: 0 16px; }

  .m-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    display: flex; align-items: center; gap: 10px;
    height: 64px; padding: 0 16px;
    background: var(--frame);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
  }
  /* Stronger glass after scrolling: an overlay fades in (opacity only). */
  .m-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--frame); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    opacity: 0; transition: opacity var(--base) var(--ease-out);
  }
  .m-header.is-scrolled::before { opacity: 1; }
  .m-header .brand { flex-grow: 1; }

  .site-footer { display: flex; }
}

/* ── Narrow desktop (1024–1279px): title bar sheds lower-priority stats ── */
.titlebar .search { width: clamp(180px, 22vw, 280px); }
@media (max-width: 1279.98px) { .titlebar .opt-lg { display: none; } }
@media (max-width: 1179.98px) { .titlebar .opt-md { display: none; } }