/* 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;
  height: min(82vh, 860px);
  min-height: 520px;
  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; } }

/* 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; it still reads that
   way here, just anchored to the stage. */
#tool-root .sm-stage #site-nav { z-index: 40; }

/* 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; }

/* A short note under the stage, in this site's voice rather than ezseed's. */
#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); }