/* layout.css — full-viewport "observatory" app shell.
   The app fills the viewport (100dvh): a sticky bar + toolbar, then a stage where
   the Willow Creek map occupies all remaining space with a scrollable detail rail
   docked beside it. Collapses to a scrollable single column on narrow screens. */

html,
body { height: 100%; }

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* ---- Top app bar ---- */
.app-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 9px var(--space-5);
  background: linear-gradient(180deg, #121a2b, #0d1320);
  border-bottom: 1px solid var(--line);
}
.app-bar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { font-size: 1.55rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(244, 183, 64, 0.4)); }
.brand-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.brand-sub { margin: 1px 0 0; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.05em; }
.app-bar__status { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

/* ---- Toolbar ---- */
.toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: 7px var(--space-5);
  background: #0e1422;
  border-bottom: 1px solid var(--line);
}
.toolbar__group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.toolbar__group > label { font-size: 0.78rem; color: var(--muted); margin-left: var(--space-2); }
.toolbar__group--end { margin-left: auto; }
.toolbar__divider { width: 1px; align-self: stretch; background: var(--line); margin: 2px 0; }
.io-status { font-size: 0.76rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Stage: map hero (fills viewport) + detail rail ---- */
.stage {
  flex: 1 1 auto;
  display: flex;
  min-height: 0; /* allow children to shrink + scroll */
  overflow: hidden;
}

.map-hero {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Observatory backdrop: glow + faint starfield */
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(34, 50, 86, 0.55), rgba(8, 12, 22, 0) 70%),
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 64%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px),
    radial-gradient(circle at 88% 30%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px),
    #080c16;
}

.rail {
  flex: 0 0 384px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #0d1320;
  border-left: 1px solid var(--line);
  overflow: hidden;
}
.rail__panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.app-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px var(--space-5);
  color: var(--muted);
  font-size: 0.78rem;
  border-top: 1px solid var(--line);
  background: #0d1320;
}
.footer-copy { letter-spacing: 0.02em; }
.footer-gh {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  transition: color 0.15s ease;
}
.footer-gh:hover,
.footer-gh:focus-visible { color: var(--accent); }
.footer-gh svg { display: block; }

/* ---- Responsive: stack + allow page scroll ---- */
@media (max-width: 1040px) {
  .app { height: auto; min-height: 100dvh; overflow: visible; }
  .stage { flex-direction: column; overflow: visible; }
  .map-hero { min-height: 58vh; }
  .rail { flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--line); }
  .rail__panels { overflow: visible; }
}
@media (max-width: 640px) {
  .app-bar, .toolbar { padding-left: var(--space-4); padding-right: var(--space-4); }
  .brand-sub { display: none; }
  .toolbar__group--end { margin-left: 0; }
}