/* ═══════════════════════════════════════════════════════════════
   clanchart.css — Clanmate Trades on a chart (js/clanchart.js): the markers
   on the candles, the card a marker opens, the panel in the chart's corner,
   and its switch in the chart bar. A clanmate's colour is their monogram's
   hue (--mh); everything else is the terminal's own tokens.
   ═══════════════════════════════════════════════════════════════ */
.cct{position:absolute;inset:0;z-index:3;pointer-events:none;font-family:var(--sans)}
.cct-clip{position:absolute;left:0;top:0;overflow:hidden}

/* ── markers: a stack of monograms per spot, under the candles (buys, longs) or over them (sales, shorts, closes, calls) ── */
.cct-g{position:absolute;left:0;top:0;width:20px;will-change:transform;transition:opacity .2s}
.cct-st{position:relative;display:flex;flex-direction:column;gap:3px}
.cct-g.dn .cct-st{flex-direction:column-reverse}
.cct-a{position:relative;display:block;width:20px;height:20px;border-radius:7px;box-shadow:0 0 0 1.5px hsl(var(--mh) 58% 64%),0 1px 4px rgba(0,0,0,.6)}
.cct-a .mono-av{display:grid}
.cct-a.on{box-shadow:0 0 0 2px #fff,0 0 0 4px hsl(var(--mh) 58% 64% / .55),0 1px 4px rgba(0,0,0,.6)}
.cct-a.paper{box-shadow:0 1px 4px rgba(0,0,0,.6);outline:1.5px dashed hsl(var(--mh) 58% 64%);outline-offset:1px}
.cct-a.chk::after{content:"";position:absolute;left:-3px;bottom:-3px;width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 1.5px var(--card)}
/* what they did: ▲ bought / long, ▼ sold / short, ■ closed, ◎ called */
.cct-s{position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;width:12px;height:12px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line-2)}
.cct-g.dn .cct-s{bottom:auto;top:-4px}
.cct-s::before{content:"";width:7px;height:6px;background:var(--up);clip-path:polygon(50% 0,100% 100%,0 100%)}
.cct-s.dn::before{background:var(--down);clip-path:polygon(0 0,100% 0,50% 100%)}
.cct-s.close::before{width:5px;height:5px;border-radius:1px;background:var(--text-2);clip-path:none}
.cct-s.call::before{width:6px;height:6px;border-radius:50%;background:none;box-shadow:inset 0 0 0 1.6px var(--brand-text),0 0 0 .5px var(--brand-text);clip-path:none}
.cct-a em{position:absolute;left:-6px;top:-6px;min-width:13px;height:13px;padding:0 3px;border-radius:7px;background:var(--text);color:#0b0c0f;font:700 8.5px/13px var(--sans);font-style:normal;text-align:center;box-shadow:0 0 0 1.5px var(--card)}
.cct-g.dn .cct-a em{top:auto;bottom:-6px}
.cct-more{display:block;width:20px;height:14px;border-radius:5px;background:var(--card-2);color:var(--text-2);font:700 9px/14px var(--sans);text-align:center;box-shadow:0 0 0 1px var(--line-2)}
/* the price it filled at, on the candle, and the hairline to its stack */
.cct-d{position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:hsl(var(--mh) 62% 70%);box-shadow:0 0 0 1.5px var(--card);will-change:transform}
.cct-d.call{background:var(--card);box-shadow:0 0 0 1.5px var(--brand-text),0 0 0 3px var(--card)}
.cct-ln{position:absolute;left:9.5px;top:0;width:1px;background:hsl(var(--mh) 62% 70% / .5)}
.cct-g.dim,.cct-d.dim{opacity:.16}
/* a trade that just happened pops in, and rings twice */
.cct-a.new{animation:cct-pop .5s cubic-bezier(.2,1.5,.4,1)}
.cct-a.new::before{content:"";position:absolute;inset:-2px;border-radius:9px;box-shadow:0 0 0 2px hsl(var(--mh) 62% 70%);opacity:0;animation:cct-ring 1.3s ease-out .2s 2}
@keyframes cct-pop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes cct-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
body.motion-reduced .cct-a.new,body.motion-reduced .cct-a.new::before{animation:none}
@media (prefers-reduced-motion:reduce){.cct-a.new,.cct-a.new::before{animation:none}.cct-g{transition:none}}

/* ── the card a marker opens ── */
.cct-card{position:absolute;left:0;top:0;z-index:2;width:276px;max-width:calc(100% - 12px);pointer-events:auto;padding:8px 10px 9px;background:var(--card);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.5);font-size:12px;color:var(--text-2)}
.cct-card.hide{display:none}
.cct-cx{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:18px;margin-bottom:6px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.cct-cx .ctag{font-size:10.5px;letter-spacing:0}
.cct-cp+.cct-cp{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.cct-ch{display:flex;align-items:center;gap:7px;margin-bottom:5px;min-width:0}
.cct-ch b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650;color:var(--text)}
.cct-ch .cct-ape{margin-left:auto}
.cct-li{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;align-items:center;gap:6px;padding:2px 0;font-size:12px}
.cct-li .cct-s,.cct-now .cct-s{position:static;box-shadow:none}
.cct-li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cct-li b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.cct-li em{min-width:24px;text-align:right;font-style:normal;font-size:11px;color:var(--faint)}
.cct-cn{margin-top:5px;padding-top:5px;border-top:1px dashed var(--line)}
.cct-now{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;padding:1px 0;font-size:12px}
.cct-now b{font-weight:650;font-variant-numeric:tabular-nums}
.cct-now em{margin-left:auto;font-style:normal;font-size:11px;color:var(--faint)}
.cct-t{display:inline-block;margin-left:5px;padding:0 5px;height:15px;line-height:15px;border-radius:4px;background:var(--card-2);color:var(--mute);font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;vertical-align:1px}
.cct-t.chk{background:var(--warn-soft);color:var(--warn)}
.cct-cm{padding-top:4px;font-size:11px;color:var(--faint)}

/* where someone stands: in (long, short, holding), out, called it */
.cct-pill{display:inline-block;height:17px;padding:0 6px;border-radius:5px;font-size:10px;font-weight:700;line-height:17px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.cct-pill.long,.cct-pill.hold{background:var(--up-soft);color:var(--up)}
.cct-pill.short{background:var(--down-soft);color:var(--down)}
.cct-pill.out{background:var(--card-2);color:var(--mute)}
.cct-pill.call{background:var(--brand-soft);color:var(--brand-text)}

/* ── the panel, under the chart's legend (top left): the newest candles, on the right, stay clear ── */
.cct-pw{position:absolute;top:var(--cct-t,44px);left:var(--cct-l,10px);display:flex;flex-direction:column;align-items:flex-start;max-width:calc(100% - var(--cct-r,64px) - var(--cct-l,10px) - 10px);pointer-events:none}
.cct-pw>*{pointer-events:auto}
.cct-panel{display:flex;flex-direction:column;width:288px;max-width:100%;max-height:min(380px,calc(var(--cct-h,400px) - var(--cct-t,44px) - 10px));overflow:hidden;background:var(--card);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.42)}
.cct-ph{display:flex;align-items:center;gap:7px;padding:7px 6px 5px 10px}
.cct-ph b{font-size:12.5px;font-weight:650;color:var(--text);white-space:nowrap}
.cct-ph .ctag{font-size:11.5px}
.cct-ph .cct-ib{margin-left:auto}
.cct-ib{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--mute);cursor:pointer}
.cct-ib:hover{background:var(--hover);color:var(--text)}
.cct-sum{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 7px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--mute)}
.cct-sum b{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.cct-rows{min-height:0;overflow:auto;padding:3px 0;overscroll-behavior:contain}
.cct-r{display:flex;align-items:center;gap:4px;padding-right:7px}
.cct-r.on{background:var(--brand-soft)}
.cct-rb{display:flex;flex:1;align-items:center;gap:8px;min-width:0;padding:6px 4px 6px 10px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cct-rb:hover{background:var(--hover)}
.cct-r.on .cct-rb:hover{background:transparent}
.cct-rb:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.cct-who{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0}
.cct-nm{display:flex;align-items:center;gap:4px;min-width:0}
.cct-nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--text)}
.cct-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--faint)}
.cct-pos{display:flex;flex:none;flex-direction:column;align-items:flex-end;gap:2px}
.cct-vv{display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.cct-v{font-size:12px;font-weight:650;color:var(--text)}
.cct-v.up{color:var(--up)}.cct-v.down{color:var(--down)}
.cct-vv em{font-style:normal;font-size:11.5px;font-weight:600}
.btn.cct-ape{flex:none;height:22px;padding:0 7px;font-size:11px}
.btn.cct-ape.sm{height:20px;padding:0 6px;font-size:10.5px}
.cct-pf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px 7px;border-top:1px solid var(--line);font-size:11px;color:var(--faint)}
.cct-pf a{display:inline-flex;align-items:center;gap:4px;color:var(--brand-text);text-decoration:none}
.cct-pf a:hover{text-decoration:underline}
.cct-pf span{display:inline-flex;align-items:center;gap:4px;cursor:help}

/* the panel folded, and the one-line notes (no clan yet, sign in, nobody traded it yet) */
.cct-pill-w{display:inline-flex;align-items:center;gap:7px;max-width:100%;height:28px;padding:0 9px 0 6px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--text-2);font:inherit;font-size:11.5px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
button.cct-pill-w{cursor:pointer}
button.cct-pill-w:hover,.cct-pill-w a.cct-pl:hover{border-color:var(--brand-line);color:var(--text)}
.cct-pill-w b{font-weight:700;color:var(--text)}
.cct-pl{display:inline-flex;align-items:center;gap:7px;min-width:0;color:inherit;text-decoration:none}
.cct-pl>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cct-pill-w.teaser{padding-right:3px}
.cct-pill-w.teaser .ic{color:var(--brand-text);flex:none}
.cct-pill-w.quiet{background:rgba(16,17,20,.88);color:var(--mute)}
.cct-in{color:var(--mute);white-space:nowrap}
.cct-in i{font-style:normal;font-weight:650}
.cct-call{display:inline-flex;flex:none;align-items:center;gap:4px;height:20px;padding:0 8px;border:0;border-radius:999px;background:var(--brand-soft);color:var(--brand-text);font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.cct-call:hover{background:rgba(var(--brand-rgb),.2)}
.cct.cell .cct-panel{width:252px}
@media (max-width:640px){.cct-panel{width:260px}.cct-pill-w{font-size:11px}}

/* ── its switch in the chart bar, and its place in the Indicators menu ── */
.tk-cct.on .ic{color:var(--brand-text)}
.tk-indm .item.own{background:rgba(var(--brand-rgb),.06)}
.tk-indm .item.own:hover{background:rgba(var(--brand-rgb),.1)}
.tk-indm .item i.ic-own{width:auto;height:auto;margin-top:1px;border-radius:0;background:none;color:var(--brand-text)}
.tk-only{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;background:var(--brand-soft);color:var(--brand-text);font-size:9.5px;font-style:normal;font-weight:700;letter-spacing:.04em;line-height:15px;text-transform:uppercase;vertical-align:1px}