/* World Mining Atlas v2 — the embed shell only.
   The atlas's own styling lives inside the iframe (atlas-v2/src/css/) and is
   deliberately not reachable from here: the frame boundary is what makes the
   vendored snapshot safe to drop in and re-sync without a CSS collision pass.
   Everything below styles the page AROUND the frame. */

.atlas-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- intro ---- */

.atlas-intro h1 {
  margin: 0 0 .35rem;
}

.atlas-beta {
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
  padding: .1rem .5rem;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  font-size: .62em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

.atlas-lede {
  margin: 0 0 .75rem;
  max-width: 62ch;
  font-size: 1.05rem;
}

/* The honest-quantifier line. It is small, but it is not decoration: it is the
   page stating what is actually loaded, which is the same obligation the atlas
   carries on its own surfaces. */
.atlas-scope {
  margin: 0;
  max-width: 78ch;
  font-size: .9rem;
  line-height: 1.55;
  opacity: .85;
}

.atlas-host {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em;
}

/* ---- the frame ---- */

.atlas-stage {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.atlas-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.atlas-stage-title {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

/* "3 of your claims are on the map". Sits between the title and the full-screen
   button, so the stage bar's space-between still puts the button at the right
   edge. Quiet by design: it is a receipt for something that already happened,
   not an announcement. */
.atlas-mine {
  margin-right: auto;
  font-size: .8rem;
  opacity: .75;
}

/* Sized by the host, per the embedding audit: the atlas is `position: absolute;
   inset: 0` inside its own document, so it fills exactly what it is given.
   Height is viewport-derived with a floor, so it stays usable on a laptop and
   does not collapse on a phone. */
.atlas-frame-wrap {
  position: relative;
  width: 100%;
  height: clamp(420px, calc(100vh - 260px), 900px);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #0f0d09;
}

.atlas-frame-wrap:fullscreen {
  height: 100%;
  border: 0;
  border-radius: 0;
}

/* js/atlas-embed.js applies this class the instant full screen is requested
   and removes it the instant it ends — regardless of whether the Fullscreen
   API itself succeeded. That is what makes the map actually fill the screen
   inside the Capacitor WebView, where requestFullscreen() can silently do
   nothing: the visual comes from this class, not from :fullscreen alone. In a
   real browser both apply at once, which is redundant and harmless. */
.atlas-frame-wrap.atlas-fs-open {
  position: fixed;
  inset: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

/* The reachable way out (2026-09-04 — the parent's chrome-bar toggle lives
   OUTSIDE this wrap, so the instant real full screen engages, the browser's
   top layer shows only this element's own subtree and the chrome-bar button
   vanishes with everything else on the page: no way back. This button is a
   child of the wrap, so it stays part of what full screen renders. Sits in
   the corner, above the frame and above the GPS "Where am I" position overlay
   (z-index: 2) so neither can cover it. */
.atlas-fs-exit {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 5;
  min-width: 44px;
  min-height: 44px;
  padding: .5rem 1.1rem;
}

.atlas-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Sits under the frame until the frame's load event hides it. */
.atlas-booting {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: .9rem;
  opacity: .6;
}

.atlas-foot {
  margin: 0;
  max-width: 90ch;
  font-size: .8rem;
  line-height: 1.5;
  opacity: .72;
}

@media (max-width: 720px) {
  .atlas-frame-wrap {
    height: clamp(380px, calc(100vh - 220px), 700px);
  }
}

/* The stage bar's one control. .btn is sized for page-level actions; this is a
   chrome-level affordance sitting on a label row, so it steps down. */
.atlas-fs-btn {
  padding: .3rem .75rem;
  font-size: .8rem;
}

/* The map is the product on this page, so the framing above it is deliberately
   short: a title, one line, then the map. Everything that qualifies what is on
   screen sits below it, where it is read after looking rather than instead. */
.atlas-intro h1 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
}

.atlas-intro .atlas-lede {
  margin-bottom: 0;
  font-size: 1rem;
}

.atlas-main {
  gap: .85rem;
}

/* The honest failure state (js/atlas-embed.js showUnavailable): same box as
   the booting line, readable rather than dimmed. */
.atlas-unavailable {
  opacity: .9;
  padding: 0 1.5rem;
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
}

/* ---- off-grid + "Where am I" (2026-09-04) ----
   Both controls live on the stage bar beside "Full screen". They are chrome,
   not page-level actions, so they take the same stepped-down .atlas-fs-btn
   sizing — and the bar wraps on a phone rather than pushing the title out. */

.atlas-stage-bar {
  flex-wrap: wrap;
  row-gap: .4rem;
}

.atlas-gps-btn {
  padding: .3rem .75rem;
  font-size: .8rem;
}

.atlas-offline-link {
  text-decoration: none;
}

/* The honest status line for the position feed: permission refused, no fix
   yet, or the accuracy of the fix that is on screen. It sits above the map so
   it is read with the dot, and it is never a spinner. */
.atlas-gps-status {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  opacity: .85;
}

/* The position overlay sits OVER the iframe. atlas-v2/ is a vendored snapshot
   and is never edited here, so until the upstream layer lands this is what
   puts the member on the map. It is decoration over a live map: no pointer
   events, so every pan, zoom and click still belongs to the atlas. */
.atlas-gps-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.atlas-gps-dot,
.atlas-gps-ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  will-change: transform;
}

.atlas-gps-dot {
  width: 12px;
  height: 12px;
  background: var(--gold-hi, #f0c869);
  border: 2px solid #0f0d09;
  box-shadow: 0 0 0 1px rgba(224, 166, 60, .9);
}

/* The ring is the accuracy, drawn to scale from the atlas's own projection —
   a 300 m fix has to look like 300 m of doubt, not like a pin. */
.atlas-gps-ring {
  background: rgba(224, 166, 60, .12);
  border: 1px solid rgba(224, 166, 60, .55);
}