/* earthmoonsky — instrument.js companion styling.
   Crosshair, tooltip, zoom-band, pin, range toggles, and the live gauge.
   Palette inherits the site tokens (brass / blue / green / yellow / red on dark). */

/* the chart wrapper becomes the positioning context for the tooltip */
.chartwrap.insp-host { position: relative; }
.chartwrap.insp-host svg { cursor: crosshair; touch-action: none; display: block; width: 100%; height: auto; }
.chartwrap.insp-dragging svg { cursor: ew-resize; }

/* overlay primitives (pointer-transparent except the hit rect) */
.insp-overlay .insp-hair { stroke: var(--ink, #e9edf5); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; pointer-events: none; }
.insp-overlay .insp-dot  { stroke: #04060c; stroke-width: 1.4; pointer-events: none; }
.insp-overlay .insp-band { fill: rgba(127,180,232,.16); stroke: rgba(127,180,232,.6); stroke-width: 1; pointer-events: none; }
.insp-overlay .insp-hit  { cursor: crosshair; }

/* tooltip */
.insp-tip {
  position: absolute; top: 8px; left: 0; z-index: 6;
  min-width: 150px; max-width: 240px;
  background: rgba(8, 12, 22, .96);
  border: 1px solid var(--panel-edge, #243150);
  border-radius: 9px;
  padding: 9px 11px 10px;
  font: 12px/1.45 Inter, system-ui, sans-serif;
  color: var(--ink, #e9edf5);
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  pointer-events: none;
  backdrop-filter: blur(3px);
}
.insp-tip.is-pinned { border-color: var(--blue, #7fb4e8); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(127,180,232,.35); }
.insp-tip .tt-time { font-size: 11px; letter-spacing: .02em; color: var(--dim, #8b96ad); margin-bottom: 3px; }
.insp-tip .tt-time .tt-local { color: #6c7790; }
.insp-tip .tt-big { font: 600 19px/1.1 "Source Serif 4", Georgia, serif; margin: 2px 0 1px; }
.insp-tip .tt-scale { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.insp-tip .tt-meta { font-size: 11px; color: var(--dim, #8b96ad); }
.insp-tip .tt-pin { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue, #7fb4e8); }

/* range + reset toolbar */
.insp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.insp-toolbar .insp-toolbar-label { font: 600 10px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--dim, #8b96ad); margin-right: 2px; }
.insp-ranges { display: inline-flex; gap: 4px; }
.insp-range {
  font: 600 12px Inter, system-ui, sans-serif;
  color: var(--dim, #8b96ad);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--panel-edge, #243150);
  border-radius: 999px;
  padding: 5px 13px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.insp-range:hover { color: var(--ink, #e9edf5); border-color: var(--blue, #7fb4e8); }
.insp-range.is-on { color: #04060c; background: var(--brass, #d4af6e); border-color: var(--brass, #d4af6e); }
.insp-reset {
  font: 500 12px Inter, system-ui, sans-serif; color: var(--dim, #8b96ad);
  background: none; border: none; cursor: pointer; padding: 5px 6px; margin-left: auto;
}
.insp-reset:hover { color: var(--ink, #e9edf5); }
.insp-hint { font: 400 11.5px/1.4 Inter, sans-serif; color: #6c7790; margin: 9px 2px 0; }

/* ===== live gauge ===== */
.gauge-row { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.gauge {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--panel-edge, #243150);
  border-left-width: 3px;
  border-radius: 12px; padding: 14px 18px; min-width: 230px; flex: 1;
}
.gauge .g-dial { position: relative; width: 58px; height: 58px; flex: none; }
.gauge .g-dial svg { display: block; width: 58px; height: 58px; }
.gauge .g-dial .g-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 20px "Source Serif 4", Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink, #e9edf5); }
.gauge .g-body { min-width: 0; }
.gauge .g-label { font: 600 10px/1 Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--dim, #8b96ad); margin-bottom: 4px; }
.gauge .g-state { font: 600 16px/1.15 "Source Serif 4", Georgia, serif; color: var(--ink, #e9edf5); }
.gauge .g-state .g-trend { font-size: 13px; margin-left: 6px; }
.g-trend.up { color: var(--red, #e06c75); }
.g-trend.down { color: var(--green, #5fce8a); }
.g-trend.flat { color: var(--dim, #8b96ad); }
.gauge .g-sub { font: 400 11.5px/1.4 Inter, sans-serif; color: var(--dim, #8b96ad); margin-top: 3px; }
.gauge .g-sub .g-live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green, #5fce8a); margin-right: 5px; vertical-align: middle; animation: g-pulse 2.4s ease-in-out infinite; }
@keyframes g-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

@media (max-width: 560px) {
  .insp-reset { margin-left: 0; }
  .gauge { min-width: 100%; }
}

/* ===== canvas-readout (map cursor read-out) ===== */
.mapwrap.cr-host { position: relative; }
.mapwrap.cr-host canvas { cursor: crosshair; }
.cr-tip {
  position: absolute; z-index: 6; min-width: 120px; max-width: 210px;
  background: rgba(8, 12, 22, .96); border: 1px solid var(--panel-edge, #243150);
  border-radius: 9px; padding: 8px 10px;
  font: 12px/1.4 Inter, system-ui, sans-serif; color: var(--ink, #e9edf5);
  box-shadow: 0 8px 22px rgba(0,0,0,.5); pointer-events: none;
}
.cr-tip.cr-pinned { border-color: var(--blue, #7fb4e8); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(127,180,232,.35); }
.cr-tip .cr-coord { font-size: 11px; color: var(--dim, #8b96ad); margin-bottom: 3px; }
.cr-tip .cr-val { font: 600 15px "Source Serif 4", Georgia, serif; }
.cr-tip .cr-note { font-size: 11px; color: var(--dim, #8b96ad); margin-top: 3px; }
.cr-mark {
  position: absolute; width: 11px; height: 11px; margin: -6px 0 0 -6px;
  border: 1.5px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6); pointer-events: none; z-index: 5;
}