/* Small shared stylesheet: responsive helpers + a skip link + reduced-motion.
   Views layer their own design on top. Keep this tiny. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  min-height: 100vh;
}

/* Skip-to-content link for keyboard users */
.viewer-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #0d47a1;
  color: #fff;
  padding: .5rem 1rem;
  z-index: 10000;
  text-decoration: none;
}
.viewer-skip:focus {
  left: 1rem;
  top: 1rem;
}

/* Consistent focus ring across views */
:focus-visible {
  outline: 2px solid #0d47a1;
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Back-to-viewer-index anchor, positioned consistently */
.viewer-back {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
  background: rgba(13, 71, 161, 0.88);
  border-radius: 4px;
  text-decoration: none;
  backdrop-filter: blur(4px);
}
.viewer-back:hover {
  background: rgba(13, 71, 161, 1);
}

/* The migration wraps each view's content in `<div id="main" tabindex="-1">` so
   the skip link has a target. display:contents lets that wrapper be invisible
   to the parent's flex/grid layout — important for views whose body uses
   display:flex expecting their poster/app div as the direct flex child.

   IMPORTANT: this must target ONLY the migration's wrapper (body > div#main).
   Some views (e.g. Observatory) already had their own `<main id="main">` as a
   grid cell; collapsing that would break their layout. */
body > div#main {
  display: contents;
}

/* Loading state (shown until graph-ready fires) */
.viewer-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  z-index: 9998;
  font: 500 14px/1.4 -apple-system, system-ui, sans-serif;
  color: #4b5563;
}
.viewer-loading.dark { background: rgba(10,10,10,0.92); color: #d1d5db; }