/* ============================================================================
   exotic — XSlider · styles (shared)
   ----------------------------------------------------------------------------
   The full-bleed slider surface. Linked by every page that hosts a slider:
   the trade widget (web), the phone trade flow, and the trading terminal.
   Resolves its palette from whatever token sheet the host loads — the widget's
   --w-* set, the app's bare tokens, or hard fallbacks — same trick as
   css/kit/trade-widget.css, so it renders anywhere.
   ========================================================================== */
.xsld{
  /* hard fallbacks are the current tokens' hexes (BL11) — keep them in step
     with css/tokens/colors.css when those move */
  --xs-ink:   var(--w-ink,   var(--ink,   #0f1319));
  --xs-ink-2: var(--w-ink-2, var(--ink-2, #43484f));
  --xs-muted: var(--w-muted, var(--muted, #6f737a));
  --xs-down:  var(--w-down,  var(--down,  #dd4d57));
  --xs-num:   var(--w-num,   var(--font-num, 'Geist Mono', ui-monospace, monospace));
  --xs-disp:  var(--w-disp,  var(--font-sans, 'Schibsted Grotesk', system-ui, sans-serif));
  --xs-fill:  color-mix(in oklab, var(--xs-ink) 8%, transparent);
  --xs-fill-hot: color-mix(in oklab, var(--xs-ink) 12%, transparent);
  /* the luminous end of the charge — shared by the fill's trail and the
     handle bar, so both warm together as the value grows */
  --xs-heat-edge:color-mix(in oklab, #fff 28%, var(--xs-heat, var(--xs-ink)));
  position:relative; cursor:pointer;
  touch-action:none; overscroll-behavior:contain;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.xsld[data-size="web"]{ height:32px; }
.xsld[data-size="phone"]{ height:52px; }

/* the band — the surface itself; the rubber band stretches this element */
.xsld-band{
  position:absolute; inset:0; border-radius:12px; overflow:hidden;
  background:color-mix(in oklab, var(--xs-ink) 5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--xs-ink) 7%, transparent);
  will-change:transform;
  transition:background .18s ease, box-shadow .18s ease;
}
.xsld:hover .xsld-band, .xsld.drag .xsld-band{
  background:color-mix(in oklab, var(--xs-ink) 7%, transparent);
}
.xsld.focus .xsld-band{
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--xs-ink) 30%, transparent),
             0 0 0 3px color-mix(in oklab, var(--xs-ink) 9%, transparent);
}

/* fill — an ink wash that CHARGES as it grows (nitro): heat pools toward
   the leading edge, scaled by the value itself (--xs-v, set per frame by
   x-slider.js). Hosts retint via --xs-fill / --xs-heat / --xs-heat-gain.
   The leading edge is a light-line: the fill edge IS the cursor. */
.xsld-fill{
  --xs-wash:var(--xs-fill);
  position:absolute; top:0; left:0; bottom:0; width:0;
  /* the charge trail, tuned to the chart's under-line wash: a rose body
     easing into amber at the leading edge, whisper-alpha, scaled by value.
     The last stop is LIFTED toward white — luminous at the right, so on a
     dark card it glows instead of going brown. */
  background:
    linear-gradient(90deg, transparent 22%,
      color-mix(in oklab, var(--xs-heat-lo, var(--xs-heat, var(--xs-ink))) calc(var(--xs-v, 0) * var(--xs-heat-gain, 24%) * 0.5), transparent) 60%,
      color-mix(in oklab, var(--xs-heat-edge) calc(var(--xs-v, 0) * var(--xs-heat-gain, 24%) * 1.3), transparent) 100%),
    linear-gradient(var(--xs-wash), var(--xs-wash));
  transition:opacity .18s ease;
}
.xsld:hover .xsld-fill, .xsld.drag .xsld-fill{ --xs-wash:var(--xs-fill-hot); }
/* the Max moment — one shimmer sweeps down the light when you reach the top */
.xsld-fill::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 32%, rgba(255,255,255,.8) 50%, transparent 68%);
  transform:translateX(-130%);
}
.xsld.maxed .xsld-fill::before{ animation:xsShimmer .7s ease-out; }
@keyframes xsShimmer{ to{ transform:translateX(130%); } }

/* hash marks — a ratchet: each decile ignites as the light passes it and
   stays lit as progress memory; unlit marks whisper in on approach */
.xsld-ticks{ position:absolute; inset:0; pointer-events:none; }
.xsld-ticks i{
  position:absolute; top:50%; width:1px; height:8px; border-radius:999px;
  transform:translate(-50%,-50%);
  background:color-mix(in oklab, var(--xs-ink) 16%, transparent);
  opacity:0; transition:opacity .2s ease, background .2s ease;
}
.xsld:hover .xsld-ticks i, .xsld.drag .xsld-ticks i{ opacity:1; }
.xsld-ticks i.txt{ opacity:0 !important; }   /* never cross the words */
.xsld-ticks i.lit{
  opacity:1; height:9px; width:1.5px;
  background:color-mix(in oklab, var(--xs-ink) 52%, transparent);
}
.xsld-ticks i.pop{ animation:xsTickPop .3s ease-out; }
@keyframes xsTickPop{
  35%{ transform:translate(-50%,-50%) scale(1.5, 1.9); }
  100%{ transform:translate(-50%,-50%); }
}

/* the handle — the cursor, un-retired per the reference's "Refining the
   Handle": it rides INSET behind the fill's leading edge (flush at the
   boundary reads harsh), scales in on its x-axis rather than fading,
   clamps just inside the track ends so it never vanishes at 0, and yields
   to words by shrinking. x-slider.js sets its left (inset + clamped);
   the bar warms with the charge like the retired edge-line did. */
.xsld-handle{
  position:absolute; top:50%; left:0; height:56%;
  transform:translate(-50%,-50%); pointer-events:none;
}
.xsld-handle i{
  display:block; width:2px; height:100%; border-radius:999px;
  /* ink at 0, luminous heat at 100 — the same charge the fill carries */
  background:color-mix(in oklab, var(--xs-heat-edge, var(--xs-ink)) calc(var(--xs-v, 0) * 70%), var(--xs-edge, var(--xs-ink)));
  box-shadow:0 0 5px 0 color-mix(in oklab, var(--xs-edge, var(--xs-ink)) 28%, transparent);
  opacity:0; transform:scaleX(.25);
  /* scale-in per the reference (spring, bounce ≈ .15): a whisper of overshoot */
  transition:opacity .15s ease, transform .25s cubic-bezier(.3,1.16,.5,1);
}
.xsld[data-size="phone"] .xsld-handle i{ width:2.5px; }
.xsld:hover .xsld-handle i, .xsld.focus .xsld-handle i{ opacity:.7; transform:scaleX(1); }
.xsld.drag .xsld-handle i{ opacity:1; transform:scaleX(1); }
/* dodge: yield to the text rather than run it over — fade AND shrink,
   springing back on the same curve once it clears */
.xsld:hover .xsld-handle.dodge i, .xsld.drag .xsld-handle.dodge i,
.xsld.focus .xsld-handle.dodge i{
  opacity:.15; transform:scale(.72); }

/* the flip notch — a hard target with a generous hit area */
.xsld-detent{
  position:absolute; top:50%; width:4px; height:18px; margin:0; padding:0;
  transform:translate(-50%,-50%); border:0; border-radius:3px;
  background:var(--xs-down); cursor:pointer; z-index:2;
  transition:transform .16s ease;
}
.xsld[data-size="phone"] .xsld-detent{ width:5px; height:22px; }
.xsld-detent::before{ content:""; position:absolute; inset:-10px -12px; }
.xsld-detent:hover{ transform:translate(-50%,-50%) scaleY(1.25); }
.xsld-detent.hit{ transform:translate(-50%,-50%) scaleY(1.35) scaleX(1.4); }

/* floating text — label left, value right, inside the surface. The label
   speaks the house instrument voice: mono microcaps, quiet. */
.xsld-label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-family:var(--xs-num); font-size:9.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--xs-muted); pointer-events:none; white-space:nowrap;
  transition:color .18s ease; z-index:1;
}
.xsld[data-size="phone"] .xsld-label{ font-size:10.5px; left:16px; }
.xsld:hover .xsld-label, .xsld.drag .xsld-label{ color:var(--xs-ink-2); }
/* text yields when the flip notch parks on top of it */
.xsld-label.under, .xsld-value.under{ opacity:.22; }
.xsld-label, .xsld-value{ transition:opacity .2s ease, color .18s ease, background .18s ease; }
.xsld-value{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:inline-flex; border-radius:7px; padding:3px 4px;
  pointer-events:none; z-index:1;
  transition:background .18s ease;
}
.xsld[data-size="phone"] .xsld-value{ right:12px; }
.xsld-value input{
  font-family:var(--xs-num); font-variant-numeric:tabular-nums;
  font-size:12.5px; font-weight:600; color:var(--xs-ink-2);
  background:transparent; border:0; outline:none; padding:0;
  text-align:right; line-height:1.2; cursor:inherit;
  border-bottom:1px solid transparent;
  caret-color:var(--xs-ink);
  transition:color .18s ease, border-color .15s ease, transform .25s ease-out;
  transform-origin:100% 50%;
}
/* the number swells under your finger and pops as each decile catches —
   the pop itself runs via WAAPI in js/kit/x-slider.js (BL02): translateY(-50%)
   scale(1.09) at 35%, back at 100%, 260ms ease-out */
.xsld.drag .xsld-value input{ transform:scale(1.12); color:var(--xs-ink); }
.xsld[data-size="phone"] .xsld-value input{ font-size:13px; }
.xsld:hover .xsld-value input, .xsld.drag .xsld-value input{ color:var(--xs-ink); }
.xsld.edit .xsld-value{ background:color-mix(in oklab, var(--xs-ink) 6%, transparent); }
.xsld.edit .xsld-value input{
  color:var(--xs-ink); cursor:text;
  border-bottom-color:color-mix(in oklab, var(--xs-ink) 35%, transparent);
}

/* the native range input carries keyboard + assistive tech, invisibly */
.xsld-rng{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; pointer-events:none;
  -webkit-appearance:none; appearance:none;
}

/* phones never hover: give the resting surface a whisper of its mechanics —
   faint ticks say "this is a scale you can drag" before the first touch */
@media (pointer:coarse){
  .xsld .xsld-ticks i{ opacity:.45; }
  .xsld .xsld-ticks i.lit{ opacity:1; }
  /* no hover to summon the handle — it rests visible, quiet */
  .xsld .xsld-handle i{ opacity:.55; transform:scaleX(1); }
  .xsld .xsld-handle.dodge i{ opacity:.15; transform:scale(.72); }
}

@media (prefers-reduced-motion: reduce){
  .xsld *, .xsld-band{ transition:none !important; animation:none !important; }
}