/* atlas.css — the ATLAS scene (docs/atlas-spec.md v2). Loaded only on
   src/pages/atlas.html via {{extraCss}}. Palette and type tokens
   (--oxblood, --gold, --green, --paper, --ink, --disp, --body, --mono...)
   come from site.css; only ATLAS-specific geometry and component
   styles live here. */
:root {
  /* ---- approved geometry (spec §8) ---- */
  --persp: 1250px;
  --tileW: 784px; --tileTop: 219px; --tileX: 0px; --tileShift: 0.314;
  --plateW: 560px; --plateTop: 316px; --plateX: 0px;
  --planeK: 0.34; /* deliberate: NOT the tile's true 0.2616 — spec §3.2, do not "fix" */
  --graphH: 331px; --graphTop: 0px;
}

/* ---- static fallback list: always rendered, ATLAS mounts over it ---- */
.atlas-fallback { margin: 2rem 0; }
.atlas-fallback ul { padding-left: 1.2rem; }
.atlas-fallback-tag { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); margin-left: 0.4rem; }

.atlas-stage { position: relative; margin: 0 auto 2rem; max-width: 1180px; }
.atlas-scene { position: relative; height: calc(660px + var(--graphTop)); perspective: var(--persp); perspective-origin: 50% 12%; }

/* ---- ground: the Cascadia logo diamond, used verbatim ---- */
.atlas-ground { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.atlas-ground .atlas-tile { position: absolute; left: 50%;
  top: calc(var(--tileTop) + var(--graphTop) - var(--tileW) * var(--tileShift));
  width: var(--tileW); margin-left: calc(var(--tileW) / -2); transform: translateX(var(--tileX)); }
.atlas-ground .atlas-tile svg { width: 100%; height: auto; display: block; overflow: visible; }
.atlas-ground .atlas-glow { position: absolute; left: 0; right: 0; top: calc(var(--tileTop) + var(--graphTop) - 70px);
  height: 250px; background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--green) 16%, transparent), transparent 72%); }

/* ---- geo plate: square, lying on the diamond's plane ---- */
.atlas-floorWrap { position: absolute; left: 50%; top: var(--plateTop);
  filter: drop-shadow(0 10px 14px rgba(34, 28, 25, .22));
  width: var(--plateW); height: var(--plateW); margin-left: calc(var(--plateW) / -2);
  transform: translateX(var(--plateX)) scaleY(var(--planeK)) rotate(45deg);
  transform-origin: 50% 50%; z-index: 2; transition: transform .6s cubic-bezier(.35, .9, .3, 1); }
.atlas-floor { position: absolute; inset: 0; background: #E3EADF; overflow: hidden; border: 1px solid var(--green);
  box-shadow: inset 0 0 60px rgba(95, 138, 112, .16), 0 10px 26px rgba(34, 28, 25, .20); }
.atlas-chartInner { position: absolute; inset: 0; }
.atlas-pl { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.atlas-pl.on { opacity: 1; }
.atlas-pl svg { width: 100%; height: 100%; display: block; }
.atlas-floor::after { content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--green) 60%, transparent); opacity: .6; }
.atlas-emptyMsg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .28em; color: var(--green);
  text-align: center; pointer-events: none; transition: opacity .35s; }
.atlas-chartTitle { position: absolute; left: 20px; bottom: 14px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .2em; color: var(--green); opacity: .85; pointer-events: none; }

/* ---- upright overlays: never inside the transformed plate ---- */
.atlas-mapLabels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.atlas-mapLabels span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--mono); letter-spacing: .14em; opacity: 0; transition: opacity .45s .2s; }
.atlas-mapLabels span.on { opacity: 1; }
.atlas-mapLabels .atlas-ct { font-size: 11px; letter-spacing: .34em; color: #4E6B57; font-weight: 500; }
.atlas-mapLabels .atlas-ct.on { opacity: .55; }
.atlas-mapLabels .atlas-rg { font-size: 9.5px; letter-spacing: .22em; color: #54755F; }
.atlas-mapLabels .atlas-rg.on { opacity: .9; }
.atlas-mapLabels .atlas-tw { font-size: 9.5px; letter-spacing: .08em; color: #3F5A48; transform: translate(0, -50%); }
.atlas-mapLabels .atlas-tw.on { opacity: .95; }
.atlas-mapLabels .atlas-tw b { display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--green); margin: 0 5px 1px -9px; vertical-align: middle; }

.atlas-pin { position: absolute; z-index: 4; transform: translate(-50%, -100%); pointer-events: none;
  opacity: 0; transition: opacity .35s .45s; }
.atlas-pin.on { opacity: 1; }
.atlas-pin .atlas-stem { width: 2px; height: 30px; background: var(--oxblood); margin: 0 auto; }
.atlas-pin .atlas-head { width: 10px; height: 10px; border-radius: 50%; background: var(--oxblood);
  border: 2px solid var(--green); margin: 0 auto -2px; }
.atlas-pin .atlas-pinPlate { font-family: var(--mono); font-size: 9px; letter-spacing: .13em; white-space: nowrap;
  background: var(--paper); border: 1px solid var(--green); padding: 3px 7px 2px; margin-bottom: 4px;
  box-shadow: 0 2px 5px rgba(34, 28, 25, .18); }

/* ---- graph ---- */
.atlas-graph { position: absolute; top: var(--graphTop); left: 0; right: 0; height: var(--graphH);
  pointer-events: none; z-index: 3; }
.atlas-graph svg { width: 100%; height: 100%; }
.atlas-graph .atlas-hit { pointer-events: all; cursor: pointer; }
.atlas-lbl { font-family: var(--disp); font-weight: 600; letter-spacing: .04em; fill: var(--ink);
  paint-order: stroke; stroke: var(--paper); stroke-width: 3.2px; }
.atlas-nodelink { cursor: pointer; }
.atlas-nodelink:hover .atlas-lbl { fill: var(--oxblood); text-decoration: underline; }
.atlas-code { font-family: var(--mono); letter-spacing: .06em; fill: var(--ink-soft);
  paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.atlas-edge { fill: none; transition: opacity .18s; }
.atlas-edge.builds { stroke: var(--oxblood); stroke-width: 1.7; }
.atlas-edge.feeds { stroke: var(--gold-dim); stroke-width: 1.5; stroke-dasharray: 6 3; }
.atlas-edge.related { stroke: var(--hammertone); stroke-width: 1; stroke-dasharray: 2 4; }
.atlas-edge.dim { opacity: .12; }
.atlas-edge.hot { opacity: 1; stroke-width: 2.4; }
.atlas-tierLane { fill: none; stroke: var(--gold-dim); stroke-width: 1; stroke-dasharray: 2 6; opacity: .5; }
.atlas-tierLbl { font-family: var(--disp); font-weight: 600; font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; fill: var(--oxblood); opacity: .75; }

.atlas-legend { position: absolute; top: 10px; right: 20px; background: var(--paper); border: 1px solid var(--gold-dim);
  padding: .6rem .8rem .55rem; z-index: 5; box-shadow: 0 3px 10px rgba(34, 28, 25, .10); }
.atlas-legend h2 { font-family: var(--disp); font-weight: 600; font-size: .74rem; letter-spacing: .26em;
  text-transform: uppercase; margin: 0 0 .45rem; color: var(--oxblood);
  border-bottom: 1px solid var(--gold-dim); padding-bottom: .28rem; }
.atlas-legend div { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .09em; margin: .24rem 0; color: var(--ink-soft); }
.atlas-legend .atlas-sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.atlas-legend .atlas-rule { height: 0; border-top: 1px solid var(--gold-dim); margin: .45rem 0 .35rem; }
.atlas-legend .atlas-ln { width: 22px; height: 0; flex: none; }

.atlas-tip { position: fixed; pointer-events: none; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; line-height: 1.75;
  padding: .45rem .65rem; opacity: 0; transition: opacity .15s; z-index: 20; max-width: 280px; }
.atlas-tip b { color: var(--gold); font-weight: 500; }

.atlas-err { margin: 1rem 0; padding: .7rem .9rem; border-left: 3px solid var(--oxblood);
  background: var(--paper-panel); font-family: var(--mono); font-size: .7rem; line-height: 1.8; display: none; }

.atlas-footnote { font-family: var(--mono); font-size: .68rem; color: var(--ink-soft);
  letter-spacing: .05em; line-height: 1.9; margin: 1rem 0 2rem; }

@media (prefers-reduced-motion: reduce) {
  .atlas-floorWrap, .atlas-pl, .atlas-mapLabels span { transition: none !important; }
}

/* M6 builds the real mobile mode; this just keeps the page from breaking. */
@media (max-width: 640px) {
  .atlas-scene { height: 420px; }
  .atlas-legend { display: none; }
}