/* The interactive SVG chart (tape/chart.js): plot, axes, hover read-out. Colours are the
   design variables of css/tape.css. */
.v2t-seg { display: flex; padding: 4px; gap: 4px; background: var(--block-bg); border: 1px solid var(--border-input); border-radius: 11px; }
.v2t-seg button {
  cursor: pointer; padding: 9px 16px; border: 0; border-radius: 8px; white-space: nowrap;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  background: transparent; color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.v2t-seg button:hover { color: var(--text); }
.v2t-seg button.on { background: var(--accent); color: var(--btn-text); }
.v2t-hint { font-family: var(--mono); font-size: 11px; color: var(--muted-4); }
.v2t-chartbox { background: var(--block-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 12px 8px; }
.v2t-chartbox[hidden] { display: none; }
.v2t-plot { position: relative; height: 280px; margin: 22px 0 44px; }
.v2t-static, .v2t-hover { position: absolute; inset: 0; }
.v2t-hover { pointer-events: none; z-index: 4; }
.v2t-overlay { position: absolute; inset: 0; z-index: 3; cursor: crosshair; }
.v2t-svg { width: 100%; height: 280px; display: block; overflow: visible; }
.v2t-grid { stroke: var(--border-row); stroke-width: 1; }
.v2t-area { fill: var(--accent); fill-opacity: 0.07; }
.v2t-future { fill: none; stroke: var(--accent); stroke-opacity: 0.35; stroke-width: 1.6; stroke-dasharray: 5 5; }
.v2t-past { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; }
.v2t-burnline { fill: none; stroke: var(--burn); stroke-width: 2.2; stroke-linejoin: round; }
.v2t-mark { stroke: var(--border-block-hot); stroke-width: 1; stroke-dasharray: 4 5; }
.v2t-mark.rec { stroke: var(--line2); }
.v2t-nowline { stroke: var(--arrow); stroke-width: 1; }
.v2t-ytitle, .v2t-xtitle, .v2t-ay, .v2t-ax, .v2t-marklabel, .v2t-nowlabel {
  position: absolute; font-family: var(--mono); font-size: 11px; white-space: nowrap; pointer-events: none;
}
.v2t-ytitle { left: 0; top: -22px; color: var(--text-3); }
.v2t-ytitle2 { position: absolute; right: 0; top: -22px; font-family: var(--mono); font-size: 11px; white-space: nowrap; pointer-events: none; color: var(--burn); }
.v2t-ay2 { position: absolute; left: 93%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; white-space: nowrap; pointer-events: none; color: var(--burn); }
.v2t-xtitle { left: 52%; top: calc(100% + 24px); transform: translateX(-50%); color: var(--text-3); }
.v2t-ay { right: 93.8%; transform: translateY(-50%); color: var(--muted-4); }
.v2t-ax { top: 100%; transform: translateX(-50%); color: var(--muted-4); padding-top: 4px; }
.v2t-marklabel { top: 2%; transform: translateX(-50%); color: var(--accent-2); }
.v2t-marklabel.l { transform: translateX(8px); }
.v2t-marklabel.r { transform: translateX(calc(-100% - 8px)); }
.v2t-marklabel.rec { top: auto; bottom: 6%; color: var(--muted-4); transform: translateX(6px); }
.v2t-marklabel.lft { transform: translateX(calc(-100% - 6px)); }
.v2t-nowlabel { transform: translate(8px, -26px); color: var(--accent); }
.v2t-nowlabel.left { transform: translate(calc(-100% - 8px), -26px); }
.v2t-now { position: absolute; width: 0; height: 0; pointer-events: none; }
.v2t-now i {
  position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
}
.v2t-now::after {
  content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .35); animation: noidPulse 1.6s infinite;
}
.v2t-guide { position: absolute; top: 5%; height: 91%; width: 1px; background: var(--line2); }
.v2t-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg);
  box-sizing: border-box; transform: translate(-50%, -50%); z-index: 5;
}
.v2t-box {
  position: absolute; top: 4%; transform: translateX(16px); min-width: 200px; z-index: 6;
  background: var(--card); border: 1px solid var(--acc); border-radius: 10px;
  padding: 11px 13px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.95); pointer-events: none;
}
.v2t-box.flip { transform: translateX(calc(-100% - 16px)); }
.v2t-box.pinned { border-color: var(--accent); pointer-events: auto; }
.v2t-boxhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 20px; }
.v2t-boxhead > span { font-family: var(--mono); font-size: 11.5px; color: var(--accent); white-space: nowrap; }
.v2t-unpin {
  width: 20px; height: 20px; border-radius: 5px; border: 0; padding: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1;
}
.v2t-unpin:hover { color: var(--text); background: var(--border); }
.v2t-row { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 11.5px; }
.v2t-row > span:first-child { color: var(--muted-2); white-space: nowrap; }
.v2t-row > span:last-child { color: var(--text); white-space: nowrap; }
@media (max-width: 700px) {
  .v2t-plot { height: 240px; margin: 22px 0 40px; }
  .v2t-svg { height: 240px; }
  .v2t-ay { right: 92%; font-size: 10px; }
  .v2t-ax { font-size: 10px; }
  .v2t-ax.odd { display: none; }
  .v2t-xtitle { white-space: normal; text-align: center; width: 92%; font-size: 10.5px; }
  .v2t-ytitle, .v2t-ytitle2 { font-size: 10.5px; }
  .v2t-ay2 { font-size: 10px; left: 92%; }
  .v2t-box { min-width: 170px; padding: 9px 11px; }
  .v2t-row { font-size: 10.5px; gap: 10px; }
  .v2t-seg button { padding: 8px 11px; font-size: 12.5px; }
}