/* ═══════════════════════════════════════════════════════════════════════
   LIQUIDITY SHIFT METER — shared frontend-only stylesheet
   ═══════════════════════════════════════════════════════════════════════
   Used by client/swing-trading.html (full-size) and client/dashboard.html
   (compact, one per widget card: XAUUSD/BTC/DJ30/UKOUSD).

   This component is PURELY VISUAL — a 0-100 proximity gauge showing how
   close the current price is to the existing Trigger Zone. It has no
   authority over any lifecycle state; see the JS helper (added to
   swing-trading.js / dashboard-levels.js) for the score calculation.

   No image assets. Every element here is real CSS/SVG, built to match
   the existing TauQuantX dark/glass/neon visual language already used
   elsewhere on these two pages (semi-circular gauge, subtle glass panel,
   cyan/violet glow, mono digits for the score).
   ═══════════════════════════════════════════════════════════════════════ */

.liquidity-meter {
  position: relative;
  margin: 10px 0 4px 0;
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(139,92,246,0.06) 0%, rgba(0,229,196,0.04) 100%);
  border: 1px solid rgba(139,92,246,0.18);
  text-align: center;
  overflow: hidden;
}

.liquidity-meter-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #a78bfa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}

/* ── Gauge ─────────────────────────────────────────────────────────── */
.liquidity-meter-gauge {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  aspect-ratio: 2 / 1.15;
}

.liquidity-meter-gauge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Background track of the arc */
.liquidity-meter-arc-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 9;
  stroke-linecap: round;
}

/* Colored proximity arc (pink -> violet -> blue -> cyan), drawn via a
   gradient stroke; length revealed with stroke-dasharray/offset, updated
   in JS to match the current score — never rebuilt, just the offset. */
.liquidity-meter-arc {
  fill: none;
  stroke: url(#lm-arc-gradient);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 3px rgba(34,211,238,0.35));
}

.liquidity-meter-tick {
  stroke: rgba(255,255,255,0.28);
  stroke-width: 1.6;
}
.liquidity-meter-tick.major {
  stroke: rgba(255,255,255,0.5);
  stroke-width: 2.2;
}

.liquidity-meter-tick-label {
  fill: var(--text-muted, #8FA3B8);
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  text-anchor: middle;
}

/* Needle — a simple SVG group, rotated via CSS transform (JS only ever
   sets the rotation angle + toggles the glow-tier class below; the arc
   path/ticks/labels are generated once and never touched again). */
.liquidity-meter-needle-group {
  transform-origin: 100px 100px;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.liquidity-meter-needle {
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(167,139,250,0.75));
}
.liquidity-meter-pivot-ring {
  fill: rgba(15,18,26,0.9);
  stroke: rgba(167,139,250,0.6);
  stroke-width: 2;
}
.liquidity-meter-pivot-dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.9));
}

/* ── Glow tiers — subtle, premium, never flashing/strobing ───────────
   Applied as a class on .liquidity-meter-gauge; each tier only nudges
   opacity/blur slightly stronger than the last. */
.liquidity-meter-gauge.lm-glow-0 .liquidity-meter-pivot-dot,
.liquidity-meter-gauge.lm-glow-1 .liquidity-meter-pivot-dot { opacity: 0.85; }
.liquidity-meter-gauge.lm-glow-2 .liquidity-meter-pivot-dot { opacity: 0.92; }
.liquidity-meter-gauge.lm-glow-3 .liquidity-meter-pivot-dot,
.liquidity-meter-gauge.lm-glow-4 .liquidity-meter-pivot-dot {
  opacity: 1;
  animation: lmPivotPulse 2.2s ease-in-out infinite;
}
.liquidity-meter-gauge.lm-glow-4 .liquidity-meter-needle {
  filter: drop-shadow(0 0 7px rgba(167,139,250,0.95));
}
@keyframes lmPivotPulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,255,255,0.85)); }
  50%      { filter: drop-shadow(0 0 7px rgba(255,255,255,1)); }
}

/* ── Score + status ────────────────────────────────────────────────── */
.liquidity-meter-score {
  margin-top: 2px;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}
.liquidity-meter-score-num {
  font-size: 30px;
  font-weight: 800;
  background: linear-gradient(90deg, #a78bfa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity 0.3s ease;
}
.liquidity-meter-score-suffix {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted, #8FA3B8);
  margin-left: 2px;
}

.liquidity-meter-status {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c4b5fd;
  border: 1px solid rgba(167,139,250,0.4);
  background: rgba(167,139,250,0.08);
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.liquidity-meter-status.lm-status-none    { color: var(--text-muted, #8FA3B8); border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); }
.liquidity-meter-status.lm-status-low     { color: #f472b6; border-color: rgba(244,114,182,0.4); background: rgba(244,114,182,0.08); }
.liquidity-meter-status.lm-status-building{ color: #a78bfa; border-color: rgba(167,139,250,0.4); background: rgba(167,139,250,0.08); }
.liquidity-meter-status.lm-status-high    { color: #60a5fa; border-color: rgba(96,165,250,0.4);  background: rgba(96,165,250,0.08); }
.liquidity-meter-status.lm-status-veryhigh{ color: #22d3ee; border-color: rgba(34,211,238,0.45); background: rgba(34,211,238,0.10); }
.liquidity-meter-status.lm-status-near    { color: #2dd4bf; border-color: rgba(45,212,191,0.55); background: rgba(45,212,191,0.14); }

/* ── No-data state ─────────────────────────────────────────────────── */
.liquidity-meter.lm-no-data .liquidity-meter-score-num { opacity: 0.35; }
.liquidity-meter.lm-no-data .liquidity-meter-gauge { opacity: 0.45; }

/* ── Compact variant — dashboard widget cards ─────────────────────────
   Same structure, smaller footprint so it fits inside the existing
   compact dlvl-card without pushing the footer/status row out of view. */
.liquidity-meter--compact {
  margin: 8px 0;
  padding: 10px 12px 12px;
  border-radius: 12px;
}
.liquidity-meter--compact .liquidity-meter-title { font-size: 9px; letter-spacing: 2px; margin-bottom: 4px; }
.liquidity-meter--compact .liquidity-meter-gauge { max-width: 148px; }
.liquidity-meter--compact .liquidity-meter-score-num { font-size: 22px; }
.liquidity-meter--compact .liquidity-meter-score-suffix { font-size: 11px; }
.liquidity-meter--compact .liquidity-meter-status { font-size: 9px; padding: 3px 10px; margin-top: 6px; }
.liquidity-meter--compact .liquidity-meter-tick-label { font-size: 8px; }

/* ── Responsive — mobile ──────────────────────────────────────────────
   No horizontal overflow, no clipped needle/labels: the gauge is an
   aspect-ratio box that scales down with its max-width, and the SVG
   viewBox (0 0 200 118, set on the element) keeps every tick/label
   inside frame at any rendered size — nothing here needs its own
   breakpoint beyond a smaller max-width on very narrow screens. */
@media (max-width: 420px) {
  .liquidity-meter-gauge { max-width: 200px; }
  .liquidity-meter--compact .liquidity-meter-gauge { max-width: 130px; }
  .liquidity-meter-score-num { font-size: 26px; }
}

/* ── Nested-in-overlay override ────────────────────────────────────────
   When the meter lives inside a terminal/waiting overlay (both pages —
   swing-trading's #tp-terminal-overlay and dashboard's
   .dlvl-terminal-overlay), it sits directly below the message box rather
   than standing alone, so its own outer margin is unnecessary and would
   just add extra gap on top of the overlay's own flex `gap`. */
#tp-terminal-overlay .liquidity-meter,
.dlvl-terminal-overlay .liquidity-meter {
  margin: 0;
}