/* Memecoinx1000 ($X1000) — THE CHART's paper bits. Loaded after style.css (the shared paper base) and frame.css. Only the CHART
   owner edits this file; chart.js owns every .ch-* element. Ink on paper: paper tabs, a rubber stamp, an ink dot. Colours are
   the page's tokens only, so the paper at night (dark mode) needs nothing extra. No glow, no glass, no gradients. */

/* the chart's own element: no text selection or phone callout while you press and hold a line */
.ch-host { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.ch-grab .ch-host, .ch-grab .ch-host * { cursor: ns-resize !important; }
.ch-dragging .ch-host, .ch-dragging .ch-host *, .ch-dragging .ch-tab { cursor: grabbing !important; }
.ch-dragging .ch-host { touch-action: none; }

/* ---------------------------------------------------------------- the legend (O H L C, the move, V or CVD, what you'd get here) */
.ch-legend .up { color: var(--blue); }
.ch-legend .down { color: var(--red); }
.ch-legend .ch-chg { font-weight: 700; }
.ch-legend .ch-lm { font: 400 12px/1 var(--head); letter-spacing: 1px; background: var(--ink); color: var(--paper); padding: 2px 5px 1px; align-self: center; }
.ch-legend .ch-lv i { font-style: normal; }
.ch-legend .ch-pnl { color: var(--ink); padding: 0 3px; box-shadow: inset 0 -.55em 0 var(--hi-a55, rgba(247,227,90,.55)); }   /* a highlighter swipe */
.ch-legend .ch-pnl.up { color: var(--blue); }
.ch-legend .ch-pnl.down { color: var(--red); }

/* ---------------------------------------------------------------- NOW ▸ (back to the live candle) */
.ch-now {
  position: absolute; z-index: 6; border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  font: 700 11px/1 var(--mono); letter-spacing: 1px; padding: 7px 9px 6px; box-shadow: 3px 3px 0 var(--blue); cursor: pointer;
}
.ch-now b { font-weight: 700; }
.ch-now::before { content: ""; position: absolute; inset: -8px -4px; }           /* a finger-sized target */
.ch-now:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--blue); }
.ch-now:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--blue); }

/* ---------------------------------------------------------------- the last trade: an ink dot that rings once per tick */
.ch-pulse {
  position: absolute; left: -3.5px; top: -3.5px; z-index: 5; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 1.5px var(--sheet); pointer-events: none; will-change: transform;
}
.ch-pulse::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; opacity: 0; }
.ch-pulse.up::after { border-color: var(--blue); }
.ch-pulse.down::after { border-color: var(--red); }
.ch-pulse.up[data-k="0"]::after, .ch-pulse.down[data-k="0"]::after { animation: ch-ring-a .4s ease-out; }
.ch-pulse.up[data-k="1"]::after, .ch-pulse.down[data-k="1"]::after { animation: ch-ring-b .4s ease-out; }
@keyframes ch-ring-a { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes ch-ring-b { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }
body.lite .ch-pulse::after { display: none; }

/* ---------------------------------------------------------------- +TP / +SL: paper tabs on your entry line. Pull one out. */
/* they sit at the LEFT end of the entry line: the right end carries the line's own title (ENTRY LONG 500x) */
.ch-tabs { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.ch-tg { position: absolute; display: flex; gap: 4px; transform: translateY(-50%); pointer-events: auto; }
.ch-tab {
  position: relative; height: 20px; padding: 0 6px; border: 1.5px solid currentColor; background: var(--sheet);
  font: 700 10px/17px var(--mono); letter-spacing: .5px; white-space: nowrap; cursor: ns-resize; touch-action: none;
  box-shadow: 2px 2px 0 var(--shade, var(--ink));
}
.ch-tab::before { content: ""; position: absolute; inset: -9px -3px; }          /* 36 px tall grip for a thumb */
.ch-tab.tp { color: var(--blue); }
.ch-tab.sl { color: var(--red); }
.ch-tab:hover { background: var(--white); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shade, var(--ink)); }
.ch-tab:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shade, var(--ink)); }
.ch-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------------------------------------------------------------- CVD (net buying since …) */
.ch-cvd {
  position: absolute; left: 8px; z-index: 5; pointer-events: none; font: 700 10px/1 var(--mono); color: var(--ink2);
  background: var(--sheet-a85, var(--sheet)); padding: 3px 6px 2px 5px; border-left: 3px solid var(--ink);
}
.ch-cvd b { font-weight: 700; }
.ch-cvd b.up { color: var(--blue); }
.ch-cvd b.down { color: var(--red); }
.ch-cvd span { color: var(--ink3); }

/* ---------------------------------------------------------------- an empty chart says what it is doing */
.ch-load {
  position: absolute; left: 50%; top: 44%; z-index: 5; transform: translate(-50%, -50%) rotate(-2deg); pointer-events: none;
  font: 700 13px var(--mono); color: var(--ink2); background: var(--sheet); border: 2px dashed var(--ink3); padding: 8px 14px; white-space: nowrap;
}

/* ---------------------------------------------------------------- WHALE BUY $8.2k: a rubber stamp slams on the corner */
.ch-whale {
  position: absolute; left: 12px; top: 46px; z-index: 7; pointer-events: none; white-space: nowrap; overflow: hidden;
  /* it slams in at 1.35x from its left edge: even then it ends before the price axis (--ch-sw = the axis width, set by chart.js) */
  max-width: calc((100% - var(--ch-sw, 72px) - 18px) / 1.35); transform-origin: left center;
  font: 400 22px/1 var(--head); letter-spacing: 1px; padding: 5px 10px 3px; border: 3px solid currentColor; outline: 1.5px solid currentColor; outline-offset: 2px;
  background: var(--sheet-a85, transparent); mix-blend-mode: var(--blend, multiply); transform: rotate(-6deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2 2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2 2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.ch-whale b { font-weight: 400; }
.ch-whale.buy { color: var(--blue); }
.ch-whale.sell { color: var(--red); }
.ch-whale[data-k="0"] { animation: ch-slam-a 1.5s cubic-bezier(.2, .9, .3, 1.25) both; }
.ch-whale[data-k="1"] { animation: ch-slam-b 1.5s cubic-bezier(.2, .9, .3, 1.25) both; }
.ch-whale.still { animation: none; }
@keyframes ch-slam-a { 0% { opacity: 0; transform: rotate(-10deg) scale(1.35); } 9% { opacity: 1; transform: rotate(-6deg) scale(.94); } 15% { transform: rotate(-6deg) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: rotate(-6deg) scale(1); } }
@keyframes ch-slam-b { 0% { opacity: 0; transform: rotate(-10deg) scale(1.35); } 9% { opacity: 1; transform: rotate(-6deg) scale(.94); } 15% { transform: rotate(-6deg) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: rotate(-6deg) scale(1); } }

/* ---------------------------------------------------------------- hold the price scale: an ink ring closes in for 0.6 s, then the alert */
.ch-hold {
  position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; z-index: 7; pointer-events: none;   /* left/top = the finger */
  border: 2px dashed var(--ink); border-radius: 50%; animation: ch-hold .6s linear both;
}
.ch-hold::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink); }
@keyframes ch-hold { 0% { scale: 1.8; opacity: .35; rotate: 0deg; } 100% { scale: .8; opacity: 1; rotate: 90deg; } }

/* ---------------------------------------------------------------- an alert set by a hold / Alt+click: one ink ring */
.ch-press {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 7; pointer-events: none;   /* left/top = the click */
  border: 2px solid var(--ink); border-radius: 50%; animation: ch-press .5s ease-out both;
}
@keyframes ch-press { 0% { scale: .3; opacity: 1; } 100% { scale: 1.7; opacity: 0; } }

/* ---------------------------------------------------------------- phones (the axis keeps its room: overlays sit left of it) */
@media (max-width: 760px) {
  .ch-legend > span:nth-child(2), .ch-legend > span:nth-child(3), .ch-legend > span:nth-child(4) { display: none; }   /* O H L: the close, the move and V stay */
  .ch-whale { font-size: 17px; left: 8px; top: 54px; }
  .ch-tab { height: 22px; line-height: 19px; padding: 0 7px; }
  .ch-now { padding: 8px 10px 7px; }
  .ch-load { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-pulse::after, .ch-whale, .ch-press, .ch-hold { animation: none !important; }
  .ch-tab:hover, .ch-now:hover { transform: none; }
}