/* The seed map is a full-viewport application. Everything here is about making it live
   inside a page that already has a header, a sidebar and a footer.

   The important line is `contain: layout paint` on the stage. The app positions its map,
   its panels and all of its modals with `position: fixed`, which is resolved against the
   browser viewport — dropped in as-is it covers this site's chrome, and scoping the CSS
   does nothing about it because the problem is layout, not specificity. `contain` makes
   the stage the containing block for fixed descendants, so the whole app is confined to
   the box below and its modals centre on the map instead of on the page. (`transform` or
   `filter` would do the same thing; `contain` says why.) */

#tool-root .sm-stage {
  contain: layout paint;
  position: relative;
  /* The upstream app reserves 100px above and 180px below #map for its chrome. At the
     previous 82vh stage a 1593x891 desktop viewport left only 449px for the world itself.
     A full viewport stage raises that to 609px while the page can still scroll normally. */
  height: min(100vh, 1040px);
  min-height: 680px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
@media (max-width: 900px) { #tool-root .sm-stage { height: 78vh; min-height: 440px; } }

/* Fullscreen is the deliberate exception to the containment above. The upstream toggle
   moves #map-viewport to position:fixed; inset:0, so keeping this containing block would
   trap the supposedly-fullscreen map inside the normal stage. */
body.fullscreen #tool-root .sm-stage { contain: none; }

/* The app's own root fills the stage rather than the window. */
#tool-root .sm-stage #map-viewport { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Its nav is a floating pill designed to sit over a full-bleed map. seed-map.js moves it out
   of the stage and above it, so the reader gets the map's top-right corner back and the
   switcher reads as this page's control rather than as something dropped on the world.

   Everything the float needed has to be undone explicitly. The rule that matters is
   `position: static`: the app sets `position: absolute`, and outside the stage that resolves
   against whatever positioned ancestor it finds next — the pill would leave the flow and
   land somewhere else on the page rather than simply not moving. */
#tool-root #site-nav {
  position: static;
  inset: auto;
  transform: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: none;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}

/* #mobile-view-toggle is the same control's phone twin and STAYS in the stage, floating over
   the map — it exists precisely because #site-nav is display:none under 721px upstream. Now
   that #site-nav is a normal bar it works at every width, so the twin is a second copy of the
   same two buttons sitting on the map. */
#tool-root .sm-stage #mobile-view-toggle { display: none; }
@media (max-width: 720px) { #tool-root #site-nav { display: flex; } }

/* Link out to the sibling 3D page. The app styles these as a segmented control, so the
   anchor has to look like the button it replaced. */
#tool-root .sm-stage a.view-mode-btn { text-decoration: none; display: inline-flex; align-items: center; }


#tool-root .sm-note {
  margin-top: 10px;
  color: var(--fg-muted);
  font-size: 0.82rem;
  line-height: 1.65;
}
#tool-root .sm-note a { color: var(--grass); }