/* Zoom & roam landing map — cradl.css tokens only (no new color literals). */

/* ── Signed-out landing: split rail (hero) + full-height roam map ──
   Left rail carries the wordmark, headline, one quiet proof line, and sign-in;
   the map is a full-height canvas bleeding off the right edge. On <=820px it
   stacks: hero on top, full-width map below.
   The negative inline margin cancels base.html's `.container-fluid.px-4` padding
   (exposed by cradl.css as `--page-gutter`, 1.5rem → .75rem on <=576px) so the
   section reaches the viewport edges at every breakpoint without a 100vw
   scrollbar hack. A hardcoded -1.5rem overshot the .75rem mobile gutter by 12px
   per side: 12px of map clipped on the left, 12px of horizontal scroll on the right. */
.lax-landing--split {
  margin-inline: calc(-1 * var(--page-gutter, 1.5rem)); margin-top: -1.25rem;
  display: grid; grid-template-columns: minmax(320px, 34%) 1fr; align-items: stretch;
  min-height: calc(100vh - 92px);
}
.lax-landing-rail {
  position: relative; align-self: center; z-index: 1;
  padding: 2rem clamp(1.25rem, 3vw, 3.25rem); max-width: 34rem;
}
/* Ambient mint glow — the "Betting Terminal" radial-glow motif, kept faint. */
.lax-landing-rail::before {
  content: ""; position: absolute; left: 4%; top: 0;
  width: 420px; height: 420px; max-width: 92%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
}
.lax-landing-brand { display: block; height: 40px; width: auto; margin: 0 0 1.15rem; }
.lax-landing h1 {
  margin: 0 0 .8rem; color: var(--text-1, #eceeed);
  font-family: var(--font-display, system-ui); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.0; text-wrap: balance;
  font-size: clamp(2.1rem, 3.4vw, 3.35rem);
}
.lax-landing-sub {
  margin: 0 0 1.5rem; max-width: 40ch; color: var(--text-2, rgba(255,255,255,.72));
  font: 400 clamp(1rem, 1.35vw, 1.15rem)/1.55 var(--font-sans, system-ui);
}
.lax-landing-signin { margin: 0; color: var(--text-3, rgba(255,255,255,.58)); font: 500 .9rem var(--font-sans, system-ui); }
.lax-landing-signin a { color: var(--accent, #26ffa5); }

/* Map = full-height panel bleeding off the right edge. */
.lax-landing--split .lax-roam { height: 100%; --chip-px: 40; }
.lax-landing--split .lax-roam-stage {
  height: 100%; border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0;
  border-left: 1px solid var(--line, rgba(255,255,255,.10));
}
/* Soft fade of the map's left edge into the rail; kept below the map controls. */
.lax-landing--split .lax-roam-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink-900) 82%, transparent) 0, transparent 15%);
}
.lax-landing--split .lax-roam-minimap,
.lax-landing--split .lax-roam-ctrls { z-index: 5; }

/* Mobile: stack — hero on top, full-width map below. */
@media (max-width: 820px) {
  .lax-landing--split { grid-template-columns: 1fr; min-height: 0; margin-top: -.5rem; }
  .lax-landing-rail { text-align: center; max-width: none; padding: 1.5rem 1rem .5rem; }
  .lax-landing-rail::before { left: 50%; transform: translateX(-50%); }
  .lax-landing-brand { margin-inline: auto; }
  .lax-landing-sub { margin-inline: auto; }
  .lax-landing--split .lax-roam { --chip-px: 30; }
  .lax-landing--split .lax-roam-stage {
    height: min(70vh, 620px); border-left: 0; border-top: 1px solid var(--line, rgba(255,255,255,.10));
  }
  .lax-landing--split .lax-roam-stage::after { display: none; }
}

.lax-roam { --chip-inv: 1; --chip-px: 34; margin: 0; position: relative; z-index: 1; }
.lax-roam-stage {
  position: relative; width: 100%; height: min(72vh, 720px);
  border: 1px solid var(--line, rgba(255,255,255,.10));
  border-radius: var(--radius-lg, 12px);
  background: var(--ink-900, #0f1113); overflow: hidden;
}
.lax-roam-svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.lax-roam-svg:active { cursor: grabbing; }
.lax-roam-viewport { will-change: transform; }

/* Flat base landmass: a single soft ground shadow lifts the whole silhouette a
   touch off the water. The per-state EXTRUSION (.lax-raised) now carries the 3D;
   this group stays flat (and remains the minimap's clone source). */
.lax-states { filter: drop-shadow(0 5px 12px rgba(0,0,0,.38)); }
.lax-state {
  fill: url(#lax-roam-land);
  stroke: var(--line-strong, rgba(255,255,255,.14));
  stroke-width: 0.9; vector-effect: non-scaling-stroke;
}
/* Graphite gradient around --ink-800 (lighter top, darker bottom). */
.lax-roam-land-top { stop-color: #23262a; }
.lax-roam-land-bot { stop-color: #141619; }
.lax-roam-grid-line { stroke: color-mix(in srgb, var(--accent, #26ffa5) 8%, transparent); stroke-width: 0.6; }
.lax-roam-grid-minor { stroke: color-mix(in srgb, var(--accent, #26ffa5) 3.5%, transparent); stroke-width: 0.4; }

/* ── Raised team-states (the "3D lift") ──
   Face palette is one flippable set of tokens on .lax-roam: graphite by default,
   .lax-roam--faces-mint swaps to the bolder mint faces in one class — no markup change.

   Screen-px → SVG-unit conversion: the roam JS keeps chips at a fixed on-screen
   size via --chip-inv = --chip-px / (--chip-size * svgScale * z), so
   --px-u = --chip-inv * --chip-size / --chip-px = 1 / (svgScale * z) is "user
   units per screen pixel" at the current zoom. Everything that must stay a
   constant SCREEN distance derives from it:
   • --rise-u — the extrusion height (--rise-px). Faces, walls AND the logos all
     translate by it, so a logo sits on its state's top face at any zoom with at
     most --rise-px of ambiguity against the base coastline. (The previous 14
     frame-unit lift was 44px at the opening view and ~130px at 3x, and the
     logos did not ride it — Yale in Long Island Sound, Navy in the Chesapeake.)
   • --fan-u — the radius same-city programs are spread along their --fx/--fy
     direction, sized off the chip so members just clear each other. (A
     frame-unit radius was ~34 km: Brown in Massachusetts, BU by the NH line.)
   Without JS --chip-inv stays 1, which degrades to similar modest offsets. */
.lax-roam {
  --px-u: calc(var(--chip-inv) * var(--chip-size, 56) / var(--chip-px));
  --rise-px: 14;
  --rise-u: calc(var(--px-u) * var(--rise-px));
  --fan-px: calc(var(--chip-px) * 0.6);  /* 3-chip ring chord = 1.04 × chip: touching, not stacked */
  --fan-u: calc(var(--px-u) * var(--fan-px));
  --rise-top-fill: #2b3035;
  --rise-top-edge: color-mix(in srgb, var(--accent, #26ffa5) 75%, transparent);
  /* Soft-mint side wall (user's pick over the near-black #10141a, which vanished
     against the dark water so the lift read only from the edge line). Faces
     stay graphite; the wall + edge carry the 3D as one lit mint bevel. */
  --rise-wall: color-mix(in srgb, var(--accent, #26ffa5) 38%, #0b1611);
}
.lax-roam--faces-mint {
  --rise-top-fill: color-mix(in srgb, var(--accent, #26ffa5) 60%, var(--ink-900, #0f1113));
  --rise-top-edge: color-mix(in srgb, var(--accent, #26ffa5) 90%, transparent);
  --rise-wall: color-mix(in srgb, var(--accent, #26ffa5) 26%, #08150f);
}
/* Cast shadow grounds the raised mass onto the flat base. */
.lax-raised { filter: drop-shadow(5px 11px 9px rgba(0,0,0,.5)); }
/* Wall = stacked offset copies; semi-transparent so overlaps darken toward the
   base, reading as a shaded side wall with a faint mint. */
.lax-rise-wall {
  fill: var(--rise-wall); fill-opacity: .55;
  transform: translateY(calc(var(--rise-u) * var(--k, 0) * -1px));  /* --k = 0..1 step fraction */
}
.lax-rise-top {
  fill: var(--rise-top-fill);
  stroke: var(--rise-top-edge); stroke-width: 1; vector-effect: non-scaling-stroke;
  transform: translateY(calc(var(--rise-u) * -1px));
}

/* Water features — Great Lakes (dark fill + faint mint shore) and major rivers
   (thin mint threads). A recessive water layer that echoes the mint grid. */
.lax-lake {
  fill: var(--ink-900, #0f1113);
  stroke: color-mix(in srgb, var(--accent, #26ffa5) 24%, transparent);
  stroke-width: 0.8; vector-effect: non-scaling-stroke;
}
.lax-river {
  fill: none; stroke: color-mix(in srgb, var(--accent, #26ffa5) 20%, transparent);
  stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}

.lax-chip { cursor: pointer; }
/* Offset onto the state's top face (--rise-u) and, for same-city programs,
   along the --fx/--fy fan direction (--fan-u); then scaled to the constant
   on-screen chip size. Both offsets live on this inner group, not the <a>, so
   the <a>'s translate stays the true campus coord (the roam JS reads it). */
.lax-chip-fx {
  transform:
    translate(calc(var(--fx, 0) * var(--fan-u) * 1px),
              calc((var(--fy, 0) * var(--fan-u) - var(--rise-u)) * 1px))
    scale(var(--chip-inv));
  transform-box: fill-box; transform-origin: center;
}
.lax-chip-bg {
  fill: var(--surface-raised, #202325);
  stroke: var(--line, rgba(255,255,255,.10)); stroke-width: 1;
  transition: stroke .15s ease, filter .15s ease;
}
.lax-chip:hover .lax-chip-bg,
.lax-chip:focus-visible .lax-chip-bg {
  stroke: var(--accent, #26ffa5);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent));
}
.lax-chip:focus { outline: none; }
.lax-chip:focus-visible .lax-chip-bg { stroke-width: 2; }
.lax-chip-initials { fill: var(--text-2, rgba(255,255,255,.7)); font: 700 11px var(--font-mono, monospace); }

/* Controls */
.lax-roam-ctrls { position: absolute; right: .6rem; bottom: .6rem; display: flex; flex-direction: column; gap: .35rem; }
.lax-roam-ctrls button {
  min-width: 44px; min-height: 44px; padding: 0 .6rem;
  font: 700 15px var(--font-sans, system-ui); color: var(--text-1, #e8efec);
  background: var(--ink-800, #191b1d); border: 1px solid var(--line-strong, rgba(255,255,255,.14));
  border-radius: var(--radius-md, 8px); cursor: pointer;
}
.lax-roam-ctrls button[data-zoom="reset"] { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.lax-roam-ctrls button:hover { border-color: var(--accent, #26ffa5); color: var(--accent, #26ffa5); }

/* Minimap */
.lax-roam-minimap {
  position: absolute; left: .6rem; top: .6rem; width: 168px; max-width: 34%;
  background: var(--ink-900, #0f1113); border: 1px solid var(--line, rgba(255,255,255,.10));
  border-radius: var(--radius-md, 8px); padding: .3rem; cursor: pointer;
}
.lax-roam-minimap svg { width: 100%; height: auto; display: block; }
.lax-roam-minimap .lax-state { stroke-width: 0.5; }
.lax-mini-vp { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: var(--accent, #26ffa5); stroke-width: 6; vector-effect: non-scaling-stroke; }

/* Team card */
.lax-roam-card {
  position: absolute; z-index: 6; width: 240px;
  background: var(--ink-800, #191b1d); border: 1px solid var(--line-strong, rgba(255,255,255,.14));
  border-radius: var(--radius-md, 8px); padding: .8rem .85rem;
  box-shadow: var(--shadow-pop, 0 18px 50px rgba(0,0,0,.55)); color: var(--text-1, #e8efec);
}
.lax-roam-card-close { position: absolute; top: .3rem; right: .45rem; background: none; border: 0; color: var(--text-3, rgba(255,255,255,.58)); font-size: 18px; line-height: 1; cursor: pointer; }
.lax-roam-card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.lax-roam-card-logo { width: 40px; height: 40px; object-fit: contain; }
.lax-roam-card-name { margin: 0; font: 700 14px var(--font-sans, system-ui); }
.lax-roam-card-conf { margin: 0; font: 500 11px var(--font-sans, system-ui); color: var(--text-3, rgba(255,255,255,.58)); }
.lax-roam-card-meta { margin: 0 0 .6rem; display: grid; gap: .25rem; }
.lax-roam-card-meta > div { display: flex; justify-content: space-between; gap: .5rem; }
.lax-roam-card-meta dt { margin: 0; font: 500 11px var(--font-sans, system-ui); color: var(--text-3, rgba(255,255,255,.58)); }
.lax-roam-card-meta dd { margin: 0; font: 600 12px var(--font-mono, monospace); color: var(--text-1, #e8efec); }
.lax-roam-card-cta {
  display: inline-block; font: 700 12px var(--font-sans, system-ui); letter-spacing: .02em;
  color: var(--accent, #26ffa5); text-decoration: none;
}
.lax-roam-card-cta:hover { text-decoration: underline; }

/* Mobile: card becomes a bottom sheet; smaller stage + minimap. */
@media (max-width: 680px) {
  .lax-roam { --chip-px: 26; }
  .lax-roam-stage { height: min(64vh, 560px); }
  .lax-roam-minimap { width: 116px; }
  .lax-roam-card { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; }
}

/* Opening motion — enhancement only; reduced motion renders the final state. */
@media (prefers-reduced-motion: no-preference) {
  .lax-roam.is-animate .lax-chip { opacity: 0; }
  .lax-roam.is-animate.is-in .lax-chip { opacity: 1; transition: opacity .5s ease; }
}