/* T8 globe and the 3D artifact viewer. Both open in the shell's side panel with
   the registry's `wide` flag set, so the panel width comes from there. */

.panel-body.globe-host,
.panel-body.artifact-host {
  padding: 0 0 2rem;
}

/* ------------------------------------------------------------------ stage */

.globe-stage,
.artifact-stage {
  position: relative;
  width: 100%;
  height: min(58vh, 30rem);
  background:
    radial-gradient(120% 90% at 50% 8%, #1b2831 0%, #0d1418 55%, #080c0f 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.globe-canvas,
.artifact-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.globe-stage.flat {
  height: auto;
  padding: 1.4rem;
  background: var(--paper-2);
}

/* --------------------------------------------------------------- map tags */

.globe-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.globe-tag {
  position: absolute;
  top: 0;
  left: 0;
  margin: -.9rem 0 0 .8rem;
  padding: .18rem .5rem;
  font: 600 .72rem/1.2 var(--ui);
  letter-spacing: .01em;
  color: #f7ecd6;
  background: rgba(14, 22, 27, .72);
  border: 1px solid rgba(216, 169, 74, .45);
  border-radius: .4rem;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .18s var(--ease), background .18s var(--ease);
}

.globe-tag.band-disputed { border-color: rgba(207, 132, 96, .6); }
.globe-tag.band-exact { border-color: rgba(240, 205, 130, .75); }

.globe-tag:hover,
.globe-tag:focus-visible,
.globe-tag.on {
  background: rgba(216, 169, 74, .92);
  color: #17120a;
  outline: none;
}

.globe-tag.away {
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------- place card */

.globe-card {
  margin: 1.2rem 1.4rem 0;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-soft);
  border-radius: .5rem;
  font-family: var(--ui);
}

.globe-card h3 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--ink);
}

.globe-card p { margin: 0 0 .4rem; font-size: .82rem; line-height: 1.45; color: var(--ink-2); }
.globe-card .precision { display: flex; align-items: baseline; gap: .45rem; color: var(--ink); }
.globe-card .precision .dot {
  width: .55rem; height: .55rem; border-radius: 50%; flex: none; transform: translateY(-1px);
  background: #b9975f;
}
.globe-card .band-exact .dot, .globe-card .precision.band-exact .dot { background: #d8a94a; }
.globe-card .precision.band-disputed .dot { background: #cf8460; box-shadow: 0 0 0 2px rgba(207, 132, 96, .3); }
.globe-card .coords { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: .74rem; }
.globe-card .raw { font-size: .74rem; color: var(--ink-3); }

.globe-card .verse-link,
.globe-card .drill,
.globe-list .place-open {
  font: 600 .78rem/1 var(--ui);
  color: #7a5518;
  background: rgba(216, 169, 74, .16);
  border: 1px solid rgba(216, 169, 74, .4);
  border-radius: .35rem;
  padding: .3rem .5rem;
  margin: 0 .3rem .3rem 0;
  cursor: pointer;
}

.globe-card .drill { display: block; margin-top: .5rem; width: 100%; padding: .5rem; }

.globe-card .verse-link:hover,
.globe-card .drill:hover,
.globe-list .place-open:hover { background: rgba(216, 169, 74, .34); }

/* -------------------------------------------------------------- flat list */

.globe-list {
  padding: 1.3rem 1.4rem 0;
  font-family: var(--ui);
}

.globe-list h3 { margin: 0 0 .5rem; font-size: .95rem; }
.globe-list .route { margin: 0 0 .9rem; font-size: .84rem; color: var(--ink-2); line-height: 1.5; }

.globe-list .places { list-style: none; margin: 0; padding: 0; }
.globe-list .places li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.globe-list .places .band {
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.globe-list .places li.band-disputed .band { color: var(--clay); }
.globe-list .places .where { font-size: .74rem; color: var(--ink-3); margin-left: auto; }
.globe-source { margin: 1rem 0 0; font-size: .7rem; line-height: 1.5; color: var(--ink-3); }

.globe-empty, .globe-note {
  padding: 1.2rem 1.4rem;
  font: .85rem/1.55 var(--ui);
  color: var(--ink-2);
}

/* ----------------------------------------------------------- svg fallback */

.globe-svg { width: 100%; height: auto; max-height: 26rem; display: block; }
.globe-svg .tick { stroke: var(--rule); stroke-width: 1; }
.globe-svg .leg { fill: none; stroke: #b98f3e; stroke-width: 1.4; stroke-dasharray: 4 3; }
.globe-svg .pin { fill: #b9975f; stroke: var(--paper); stroke-width: 1.5; }
.globe-svg .pin.band-exact { fill: #d8a94a; }
.globe-svg .pin.band-disputed { fill: none; stroke: #cf8460; stroke-width: 2; }
.globe-svg .pin-label { font: 600 10px var(--ui); fill: var(--ink); }

/* ------------------------------------------------------------- artifacts */

.artifact-bar {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  padding: .9rem 1.4rem 0;
}

.artifact-bar button {
  font: 600 .78rem/1 var(--ui);
  padding: .45rem .7rem;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: .4rem;
  cursor: pointer;
}
.artifact-bar button[aria-pressed="true"] {
  color: #7a5518;
  background: rgba(216, 169, 74, .2);
  border-color: rgba(216, 169, 74, .5);
}

.artifact-spots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.artifact-spot {
  position: absolute;
  top: 0;
  left: 0;
  margin: -.85rem 0 0 -.85rem;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 50%;
  font: 700 .74rem/1 var(--ui);
  color: #17120a;
  background: rgba(216, 169, 74, .92);
  border: 1px solid rgba(255, 236, 197, .8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.artifact-spot.away { opacity: 0; pointer-events: none; }
.artifact-spot.on, .artifact-spot:hover, .artifact-spot:focus-visible {
  background: #fff0d0;
  outline: none;
}

.artifact-note {
  padding: 1.2rem 1.4rem 0;
  font-family: var(--ui);
}
.artifact-note h3 { margin: 0 0 .3rem; font-size: 1rem; }
.artifact-note p { margin: 0 0 .5rem; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
.artifact-note .facts { display: grid; gap: .3rem; margin: .8rem 0 0; }
.artifact-note .facts div { display: flex; gap: .6rem; font-size: .8rem; }
.artifact-note .facts dt { flex: none; width: 6.5rem; color: var(--ink-3); }
.artifact-note .facts dd { margin: 0; color: var(--ink-2); }

.artifact-list { list-style: none; margin: .9rem 0 0; padding: 0; }
.artifact-list li { border-bottom: 1px solid var(--rule-soft); padding: .5rem 0; }
.artifact-list button {
  font: 600 .82rem/1.3 var(--ui);
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.artifact-list button:hover { color: var(--gold); }
.artifact-list p { margin: .2rem 0 0; font-size: .78rem; color: var(--ink-2); line-height: 1.5; }
.artifact-list .ref {
  font: 600 .72rem/1 var(--ui);
  color: #7a5518;
  background: rgba(216, 169, 74, .16);
  border: 1px solid rgba(216, 169, 74, .4);
  border-radius: .3rem;
  padding: .25rem .45rem;
  margin-top: .35rem;
  cursor: pointer;
}

.artifact-read {
  display: inline-block;
  margin: 1rem 0 0;
  font: 600 .82rem/1 var(--ui);
  padding: .6rem .9rem;
  color: #17120a;
  background: var(--gold-soft);
  border: 0;
  border-radius: .4rem;
  cursor: pointer;
}
.artifact-read:hover { background: var(--gold); color: #fff8ea; }

.artifact-loading {
  position: absolute;
  inset: auto 0 1rem;
  text-align: center;
  font: .78rem var(--ui);
  color: #cbbfa8;
  z-index: 2;
}

/* The reader's own invitation line already has a style. This is the same
   shape, just carrying the 3D word so it is obvious what opens. */
.invite .in3d { font-weight: 600; }

@media (max-width: 640px) {
  .globe-stage, .artifact-stage { height: 48vh; }
}

@media (prefers-reduced-motion: reduce) {
  .globe-tag, .artifact-spots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.artifact-spot { transition: none; }
}