/* ============================================================
   ANEW · E2X INTRO WHEEL — styles
   Loaded alongside the app bundle's own stylesheet; every rule is
   namespaced .aw-* so it can never collide with the app's classes.
   ============================================================ */

.aw-wrap { margin: 2px 0 14px; }

/* ---- stage: a square that the canvas and the ring nodes share ---- */
/* Not square: the ring's minor axis is only ~0.22 of its major, so a 1:1 box
   leaves a third of the height empty above and below the artwork. 1:0.66 is
   the tightest crop that still clears the globe's atmosphere glow (1.34 R). */
.aw-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.66;
  margin: 0 auto;
  touch-action: pan-y;          /* vertical scroll still works; horizontal = spin */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.aw-stage:active { cursor: grabbing; }

.aw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; }

.aw-nodes { position: absolute; inset: 0; z-index: 6; }

/* ---- one disc per product, positioned by the render loop ---- */
.aw-node {
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}

.aw-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #22392c 0%, #14231b 62%, #0b140f 100%);
  border: 1.5px solid color-mix(in srgb, var(--hs, #4ba84b) 55%, transparent);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
  transition: border-color .25s, box-shadow .25s;
}
.aw-disc img {
  width: 30px; height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}

/* the symbol currently parked at the detent */
.aw-node.hot .aw-disc {
  border-color: var(--hs, #4ba84b);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hs, #4ba84b) 26%, transparent),
              0 0 20px color-mix(in srgb, var(--hs, #4ba84b) 55%, transparent),
              0 4px 16px rgba(0, 0, 0, .55);
}
.aw-node.hot .aw-disc img { transform: scale(1.06); }

/* ---- caption under the wheel: layer · name · one line of why ---- */
.aw-caption {
  min-height: 74px;             /* reserved so the language grid never jumps */
  text-align: center;
  padding: 0 6px;
  margin-top: 2px;
}
.aw-layer {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .95;
}
.aw-name {
  font-family: var(--font-display, sans-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  margin-top: 3px;
  color: var(--ink, #eaf6ee);
}
.aw-tag {
  font-size: 12px;
  line-height: 1.35;
  margin-top: 3px;
  color: var(--ink-dim, #9fc4ad);
}

/* ---- progress dots: 14 products, tappable ---- */
.aw-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 0;
}
.aw-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--navy-line, #2b4032);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.aw-dots i.on {
  background: var(--amber, #f5c518);
  transform: scale(1.5);
}

/* ---- inert mode: the marketing banner on Customer / Storefront / Portal.
       Nothing here is a control, so nothing should invite a tap. ---- */
.aw-inert .aw-stage { cursor: default; touch-action: auto; }
.aw-inert .aw-node,
.aw-inert .aw-dots,
.aw-inert .aw-dots i { pointer-events: none; cursor: default; }

/* ---- banner placement: tighter than the intro, with a closing rule so the
       page's own content reads as a separate section below it ---- */
.aw-banner {
  margin: -4px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--navy-line, #2b4032);
}
.aw-banner .aw-stage { width: 86%; }        /* a touch smaller than the intro */
.aw-banner .aw-caption { min-height: 62px; }
.aw-banner .aw-name { font-size: 17px; }
.aw-banner .aw-tag  { font-size: 11.5px; }
.aw-banner .aw-dots { margin-top: 7px; }

/* ---- compact language grid (replaces 17 full-width cards) ---- */
.aw-langs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 10px 0 16px;
}
.aw-lang {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px 8px;
  border-radius: 12px;
  border: 1px solid var(--navy-line, #2b4032);
  background: var(--navy-panel, #1c2e24);
  color: var(--ink, #eaf6ee);
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s, background .18s, transform .12s;
}
.aw-lang:active { transform: scale(.97); }
.aw-lang .f  { font-size: 19px; line-height: 1.1; }
.aw-lang .n  { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: 11.5px; line-height: 1.25; }
.aw-lang .s  { font-size: 9px; color: var(--ink-faint, #6e8a79); line-height: 1.2; }
.aw-lang.sel {
  border-color: var(--orange, #f39019);
  background: color-mix(in srgb, var(--orange, #f39019) 12%, var(--navy-panel, #1c2e24));
}

/* RTL: Arabic and Urdu read right-to-left. The app has no dir support of its
   own, so the picker at least sets it on <html> — see setDir() in the bundle. */
html[dir="rtl"] .aw-caption,
html[dir="rtl"] .aw-lang { direction: rtl; }

/* Urdu Nastaliq descends steeply; give it room or the tails clip. */
html[lang="ur"] .aw-name { line-height: 1.7; }
html[lang="ur"] .aw-tag  { line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  .aw-node, .aw-disc, .aw-dots i { transition: none !important; }
}

/* ============================================================
   FULL-SCREEN ON MOBILE + THE LEGAL FOOTER

   The two floating pills ("Invest · anewenergy.co", "Meet your Project
   Manager") were removed outright on 2026-08-06 at Pat's request. They
   overlapped on a phone, and their labels were baked into each HTML entry
   point — so a visitor who landed on /es/ but ran the app in English saw
   Spanish pills over an English app. /pm/ is still reachable from inside
   the journey's own "Meet your PM" button.
   ============================================================ */

/* The legal strip is no longer position:fixed — it is an ordinary footer
   under the app, so it covers nothing. It also makes the document a little
   taller than the viewport, which is what finally lets mobile Safari
   collapse its own top and bottom toolbars on scroll. */
#anew-legal-disclaimer {
  display: block;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font: 400 9px/1.45 -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: rgba(234, 246, 238, .4);
  background: #050b07;
}

/* ---- phone-sized screens: drop the phone mock ------------------------
   The bezel is a lovely desktop conceit and pure waste on a real handset —
   it costs 48px of height, 20px of border and four rounded corners on the
   exact device with the least room. Below 560px the app goes edge to edge.

   100svh, not 100dvh: dvh changes as Safari's toolbars collapse, and with a
   scrollable document that resize feeds back into the scroll and jitters.
   svh pins the app to the *smallest* viewport, so collapsing the toolbars
   only ever reveals more. */
@media (max-width: 560px) {
  .stage {
    min-height: 100svh;
    align-items: stretch;
    padding: 0;
  }
  .phone {
    max-width: none;
    width: 100%;
    height: 100svh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* No fixed bar to clear any more — just enough room to breathe. */
.scroller { padding-bottom: 28px; }