/* =====================================================================
   Immersive layer, loads AFTER emoto-c.v2.css (reuses scheme vars, nav,
   .reveal, .count, .disp, .mono). Full-bleed, box-free, interactive.
   ===================================================================== */

/* full-bleed section scaffold */
.imm{width:100%;position:relative}
.imm-pad{max-width:1280px;margin:0 auto;padding:0 clamp(28px, 5vw, 72px)}
.imm-kick{font-family:var(--font-mono), monospace;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.imm-title{font-family:var(--font-disp), sans-serif;font-weight:900;letter-spacing:-.03em;text-transform:uppercase;line-height:.86;color:var(--ink);margin:0;font-size:clamp(44px, 7vw, 104px)}
.imm-sub{font-size:clamp(16px, 1.6vw, 21px);color:var(--mut);max-width:620px;margin:22px 0 0}

/* intro band */
.imm-intro{padding:clamp(90px, 16vh, 200px) 0 clamp(60px, 9vh, 120px)}
.imm-intro .imm-title .ac{color:var(--accent)}

/* ===================== RANGE REALITY (full-bleed map) ===================== */
.range{position:relative;height:100vh;min-height:680px;width:100%;overflow:hidden;background:#0a0d10}
#rangemap{position:absolute;inset:0;z-index:0}
.leaflet-container{background:#0a0d10!important;font-family:var(--font-mono), monospace}
.rm-pin{display:grid;place-items:center}
.rm-pin span{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 18px var(--accent);display:block;cursor:grab}
.rm-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(5, 6, 8, .92) 0%, rgba(5, 6, 8, .5) 34%, transparent 56%),
             linear-gradient(0deg, rgba(5, 6, 8, .85), transparent 30%)}
.rm-hud{position:absolute;z-index:2;top:0;left:0;height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(28px, 5vw, 72px);max-width:600px;pointer-events:none}
.rm-hud .imm-kick{margin-bottom:14px}
.rm-claimrow{font-family:var(--font-mono), monospace;font-size:15px;color:var(--mut)}
.rm-claimrow s{color:var(--faint)}
.rm-bignum{font-family:var(--font-disp), sans-serif;font-weight:900;letter-spacing:-.05em;line-height:.8;
  font-size:clamp(120px, 20vw, 260px);color:var(--accent);margin:4px 0 0}
.rm-bignum small{font-family:var(--font-body), sans-serif;font-weight:400;font-size:clamp(18px, 2vw, 28px);color:var(--ink);letter-spacing:0;margin-left:14px}
.rm-gapline{font-family:var(--font-mono), monospace;font-size:15px;color:var(--warn);margin-top:10px}
.rm-gapline b{color:var(--ink)}
.rm-model{font-family:var(--font-mono), monospace;font-size:13px;color:var(--mut);margin-top:22px}
.rm-model b{color:var(--ink)}

/* floating controls (glass, the only "panel", and it's translucent, edge-anchored) */
.rm-controls{position:absolute;z-index:3;right:clamp(20px, 3vw, 40px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:18px;width:min(320px, 42vw)}
.rm-grp .lab{font-family:var(--font-mono), monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.rm-pills{display:flex;flex-wrap:wrap;gap:7px}
.rm-pill{font-family:var(--font-mono), monospace;font-size:12px;letter-spacing:.02em;color:var(--ink);
  background:color-mix(in srgb, var(--bg) 55%, transparent);border:1px solid var(--line);backdrop-filter:blur(10px);
  padding:8px 13px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap}
.rm-pill:hover{border-color:var(--accent)}
.rm-pill.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.rm-cap{position:absolute;z-index:2;bottom:clamp(18px, 3vh, 32px);left:clamp(28px, 5vw, 72px);right:clamp(28px, 5vw, 72px);
  font-family:var(--font-mono), monospace;font-size:11.5px;color:var(--mut);max-width:560px;pointer-events:none}
.rm-legend{position:absolute;z-index:2;bottom:clamp(18px, 3vh, 32px);right:clamp(28px, 5vw, 72px);display:flex;gap:18px;font-family:var(--font-mono), monospace;font-size:11px;color:var(--mut)}
.rm-legend span{display:flex;align-items:center;gap:7px}
.rm-legend i{width:18px;height:0;border-top-width:2px;border-top-style:solid}
.rm-legend i.claim{border-top-style:dashed;border-color:#8b93a3}
.rm-legend i.real{border-color:var(--accent)}

/* ===================== GLANCE (claimed vs real, up front) ===================== */
.glance{padding:clamp(70px, 10vh, 130px) 0}
.glance-tldr{font-family:var(--font-body), sans-serif;font-size:clamp(20px, 2.4vw, 31px);line-height:1.45;color:var(--ink);max-width:1000px;margin:24px 0 0;font-weight:400}
.glance-tldr b{color:var(--accent);font-weight:600}
.glance-grid{display:grid;grid-template-columns:repeat(4, 1fr);margin-top:58px;border-top:1px solid var(--line)}
.gcell{padding:34px 30px 34px;border-left:1px solid var(--line)}
.gcell:first-child{border-left:none;padding-left:0}
.gcell .lab{font-family:var(--font-mono), monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.gcell .claim{font-family:var(--font-mono), monospace;font-size:13px;color:var(--faint);margin-top:14px}
.gcell .claim s{opacity:.7}
.gcell .real{font-family:var(--font-disp), sans-serif;font-weight:900;letter-spacing:-.04em;font-size:clamp(54px, 7vw, 104px);line-height:.82;margin-top:6px;color:var(--ink)}
.gcell .real small{display:block;font-family:var(--font-body), sans-serif;font-weight:400;font-size:13px;color:var(--mut);letter-spacing:0;margin-top:10px}
.gcell .delta{font-family:var(--font-mono), monospace;font-size:12px;margin-top:14px;color:var(--warn)}
.gcell .delta.ok{color:var(--real)}

/* ===================== COST (immersive 5-year) ===================== */
.cost{padding:clamp(80px, 12vh, 150px) 0}
.cost-big{font-family:var(--font-disp), sans-serif;font-weight:900;letter-spacing:-.05em;font-size:clamp(86px, 15vw, 210px);line-height:.8;color:var(--accent);margin:28px 0 0}
.cost-big small{font-family:var(--font-body), sans-serif;font-weight:400;font-size:clamp(16px, 1.8vw, 24px);color:var(--ink);letter-spacing:0;margin-left:16px}
.cost-sub{font-size:clamp(15px, 1.5vw, 19px);color:var(--mut);max-width:660px;margin:22px 0 0}
.cost-stack{display:flex;height:58px;border-radius:12px;overflow:hidden;margin-top:50px;border:1px solid var(--line)}
.cost-stack div{display:flex;align-items:center;padding-left:14px;font-family:var(--font-mono), monospace;font-size:11.5px;font-weight:600;color:#08130b;white-space:nowrap;overflow:hidden;width:0;transition:width 1.1s cubic-bezier(.2, .7, .3, 1)}
.cost-legend{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--font-mono), monospace;font-size:12px;color:var(--mut);margin-top:16px}
.cost-legend span{display:inline-flex;align-items:center;gap:8px}.cost-legend i{width:11px;height:11px;border-radius:3px}

/* ===================== FIT / SIZING (side-view · apples-to-apples) ===================== */
.fit{padding:clamp(80px, 12vh, 150px) 0;position:relative;overflow:hidden}
.fit-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:36px}
#fit-stage{position:relative;height:64vh;min-height:470px;width:100%;--pxin:6;--seat-in:31;
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px, 4vw, 60px);
  padding:0 clamp(16px, 3vw, 48px) 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(0deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 42%)}
#fit-stage::after{content:'';position:absolute;left:0;right:0;bottom:30px;height:1px;background:var(--line)}
.fit-seatline{position:absolute;left:0;right:0;bottom:calc(30px + var(--seat-in) * var(--pxin) * 1px);
  border-top:1.5px dashed var(--accent);z-index:3;pointer-events:none}
.fit-seatline span{position:absolute;right:clamp(16px, 3vw, 48px);top:-22px;font-family:var(--font-mono), monospace;font-size:11px;color:var(--accent);letter-spacing:.06em}
#fit-figs{display:flex;align-items:flex-end;gap:clamp(14px, 3vw, 48px)}
.fig{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;aspect-ratio:26 / 100;transition:height .18s cubic-bezier(.2, .7, .3, 1)}
.fig .head{width:46%;aspect-ratio:1;border-radius:50%}
.fig .body{width:100%;flex:1;margin-top:3%;border-radius:48% 48% 30% 30% / 14% 14% 5% 5%}
.fig.ref{cursor:pointer}
.fig.ref .head, .fig.ref .body{background:transparent;border:1.5px solid var(--mut)}
.fig.ref:hover .head, .fig.ref:hover .body{border-color:var(--ink)}
.fig.ref.v-flat .head, .fig.ref.v-flat .body, .fig.ref.v-balls .head, .fig.ref.v-balls .body{border-color:var(--real)}
.fig.ref.v-toes .head, .fig.ref.v-toes .body{border-color:var(--gold)}
.fig.ref.v-reach .head, .fig.ref.v-reach .body{border-color:var(--warn)}
.fig.you .head, .fig.you .body{background:var(--accent)}
.fig.you.v-toes .head, .fig.you.v-toes .body{background:var(--gold)}
.fig.you.v-reach .head, .fig.you.v-reach .body{background:var(--warn)}
.fig-tag{position:absolute;bottom:100%;margin-bottom:9px;text-align:center;white-space:nowrap;font-family:var(--font-mono), monospace}
.fig-tag b{display:block;font-size:12px;color:var(--ink);font-weight:600}
.fig-tag span{font-size:10px;color:var(--mut)}
.fig.you .fig-tag b{color:var(--accent)}
.fit-bike{position:relative;flex:0 0 auto;height:calc(43 * var(--pxin) * 1px);width:calc(74 * var(--pxin) * 1px)}
.fit-bike .tag{position:absolute;bottom:100%;margin-bottom:9px;left:0;font-family:var(--font-mono), monospace;font-size:12px;color:var(--ink);font-weight:600;white-space:nowrap}
.fit-bike .tag span{color:var(--mut);font-weight:400}
.fit-bike .wheel{position:absolute;bottom:0;width:calc(19 * var(--pxin) * 1px);height:calc(19 * var(--pxin) * 1px);border:2.5px solid var(--ink);opacity:.5;border-radius:50%}
.fit-bike .wheel::after{content:'';position:absolute;inset:34%;border-radius:50%;border:1.5px solid var(--ink);opacity:.6}
.fit-bike .wheel.rear{left:calc(2.5 * var(--pxin) * 1px)}
.fit-bike .wheel.front{left:calc(52.5 * var(--pxin) * 1px)}
.fit-bike .slab{position:absolute;left:calc(17 * var(--pxin) * 1px);bottom:calc(10 * var(--pxin) * 1px);width:calc(40 * var(--pxin) * 1px);height:calc(16 * var(--pxin) * 1px);border:2px solid var(--ink);opacity:.5;border-radius:7px;transform:skewX(-9deg)}
.fit-bike .seat{position:absolute;left:calc(20 * var(--pxin) * 1px);bottom:calc(29 * var(--pxin) * 1px);width:calc(16 * var(--pxin) * 1px);height:calc(3 * var(--pxin) * 1px);background:var(--ink);opacity:.55;border-radius:4px 8px 3px 3px}
.fit-bike .fork{position:absolute;left:calc(52 * var(--pxin) * 1px);bottom:calc(9 * var(--pxin) * 1px);width:2px;height:calc(34 * var(--pxin) * 1px);background:var(--ink);opacity:.45;transform-origin:bottom;transform:rotate(11deg)}
.fit-bike .bar{position:absolute;left:calc(53 * var(--pxin) * 1px);bottom:calc(42 * var(--pxin) * 1px);width:calc(9 * var(--pxin) * 1px);height:3px;background:var(--ink);opacity:.6;border-radius:3px}
.fit-control{display:flex;align-items:center;gap:28px;margin-top:38px;flex-wrap:wrap}
.fit-readout{font-family:var(--font-disp), sans-serif;font-weight:900;letter-spacing:-.03em;font-size:clamp(36px, 4.6vw, 60px);color:var(--ink);line-height:.9}
.fit-readout small{display:block;font-family:var(--font-mono), monospace;font-weight:400;font-size:13px;color:var(--mut);letter-spacing:.02em;margin-top:8px}
.fit-slider{flex:1;min-width:260px}
.fit-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:var(--line);outline:none}
.fit-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--accent);cursor:grab;border:3px solid var(--bg);box-shadow:0 0 0 1.5px var(--accent)}
.fit-slider input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--accent);cursor:grab;border:3px solid var(--bg)}
.fit-slider .ends{display:flex;justify-content:space-between;font-family:var(--font-mono), monospace;font-size:11px;color:var(--faint);margin-top:8px}
.fit-hint{font-family:var(--font-mono), monospace;font-size:11.5px;color:var(--faint);margin-top:8px}
.fit-verdict{font-family:var(--font-disp), sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(22px, 2.6vw, 36px);margin-top:30px}
.fit-gapbadge{font-family:var(--font-mono), monospace;font-size:13px;color:var(--mut);margin-top:4px}
.fit-dims{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;margin-top:50px;border-top:1px solid var(--line);padding-top:30px}
.fit-dim .v{font-family:var(--font-disp), sans-serif;font-weight:900;letter-spacing:-.03em;font-size:clamp(30px, 4vw, 52px);color:var(--ink);line-height:1}
.fit-dim .v small{font-family:var(--font-body), sans-serif;font-weight:400;font-size:15px;color:var(--mut)}
.fit-dim .l{font-family:var(--font-mono), monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:8px}

@media(max-width:820px){
  .rm-controls{right:14px;top:auto;bottom:64px;transform:none;width:min(280px, 70vw)}
  .rm-hud{max-width:none}
  .glance-grid, .fit-dims{grid-template-columns:repeat(2, 1fr)}
  .gcell{border-left:none;border-top:1px solid var(--line);padding-left:0}
  #fit-stage{gap:12px;overflow-x:auto;justify-content:flex-start}
}

/* fit tool: real side-profile photo replaces the placeholder drawing when available */
.fit-bike.has-img > .wheel, .fit-bike.has-img > .slab, .fit-bike.has-img > .seat,
.fit-bike.has-img > .fork, .fit-bike.has-img > .bar{display:none}
.fit-bike.has-img{overflow:visible}
.fit-bike-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}

/* range: "Can I make it?" address-to-address route checker */
.rm-route{border-top:1px solid var(--line);padding-top:14px}
.rmr-in{width:100%;box-sizing:border-box;margin-bottom:7px;background:color-mix(in srgb, var(--bg) 55%, transparent);
  border:1px solid var(--line);backdrop-filter:blur(10px);border-radius:8px;padding:8px 11px;color:var(--ink);
  font-family:var(--font-mono), monospace;font-size:12px;outline:none}
.rmr-in::placeholder{color:var(--mut)}
.rmr-in:focus{border-color:var(--accent)}
.rmr-row{display:flex;align-items:center;gap:12px}
.rmr-btn{background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;padding:8px 16px;
  font-family:var(--font-mono), monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.rmr-btn:hover{filter:brightness(1.08)}
.rmr-rt{display:flex;align-items:center;gap:5px;color:var(--mut);font-family:var(--font-mono), monospace;font-size:11px;cursor:pointer;user-select:none}
.rmr-out{margin-top:10px}
.rmr-load,.rmr-warn{font-family:var(--font-mono), monospace;font-size:12px;color:var(--mut)}
.rmr-warn{color:var(--warn)}
.rmr-verdict{font-family:var(--font-disp), sans-serif;font-weight:900;font-size:30px;line-height:1}
.rmr-verdict.yes{color:var(--real)}
.rmr-verdict.no{color:var(--warn)}
.rmr-detail{font-family:var(--font-mono), monospace;font-size:12px;color:var(--ink);margin-top:5px;line-height:1.55}
.rmr-fine{font-family:var(--font-mono), monospace;font-size:10px;color:var(--mut);opacity:.8;margin-top:6px;line-height:1.4}
.rmr-pin span{display:block;width:14px;height:14px;border-radius:50%;border:2px solid #0a0d10;box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.rmr-pin.a span{background:var(--accent)}
.rmr-pin.b span{background:var(--warn)}

/* route checker: address autosuggest dropdown */
.rmr-field{position:relative}
.rmr-sug{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:20;display:none;
  background:color-mix(in srgb, var(--bg) 92%, #000);border:1px solid var(--line);border-radius:8px;
  max-height:220px;overflow-y:auto;box-shadow:0 12px 32px rgba(0,0,0,.55)}
.rmr-sug.open{display:block}
.rmr-sug-item{padding:8px 10px;font-family:var(--font-mono), monospace;font-size:11px;color:var(--ink);cursor:pointer;
  line-height:1.35;border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmr-sug-item:last-child{border-bottom:none}
.rmr-sug-item:hover,.rmr-sug-item.hi{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent)}

/* route checker: make it a prominent, glowing card */
.rm-route{border-top:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);border-radius:14px;padding:15px 15px 14px;
  animation:rmrPulse 2.8s ease-in-out infinite}
.rmr-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.rmr-ico{width:30px;height:30px;color:var(--accent);flex:0 0 auto;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent))}
.rmr-title{font-family:var(--font-disp), sans-serif;font-weight:800;font-size:22px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.rmr-sub{font-family:var(--font-mono), monospace;font-size:10px;letter-spacing:.07em;color:var(--accent);margin-top:5px;text-transform:uppercase}
.rm-route .rmr-btn{flex:1;text-align:center;padding:10px 16px;font-size:12.5px}
@keyframes rmrPulse{
  0%,100%{box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 20px -8px color-mix(in srgb, var(--accent) 45%, transparent)}
  50%{box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent), 0 0 34px -5px color-mix(in srgb, var(--accent) 65%, transparent)}}
@media (prefers-reduced-motion: reduce){.rm-route{animation:none}}