/*  VOLURR PRO CHART styles  —  pairs with chart.js  */
/* ════════════ VOLURR PRO CHART (beats TradingView) ════════════ */
.pcwrap{max-width:1340px;margin:0 auto}
.pcbar{display:flex;gap:10px;overflow-x:auto;padding-bottom:12px;margin-bottom:12px;scrollbar-width:thin}
.pcw{display:flex;flex-direction:column;gap:6px;padding:10px 13px;min-width:134px;background:var(--cardgrad);border:1px solid var(--line);border-radius:14px;cursor:pointer;flex-shrink:0;transition:.14s;position:relative;overflow:hidden}
.pcw:hover{border-color:rgba(232,163,61,.4);transform:translateY(-1px)}
/* symbol search filter (sticky at strip start) */
.pcw-search{display:flex;align-items:stretch;flex-shrink:0;position:sticky;left:0;z-index:3;background:var(--bg,var(--card))}
.pcw-search input{width:104px;background:var(--cardgrad);border:1px solid var(--line);border-radius:12px;color:var(--txt);font:inherit;font-size:12px;font-weight:600;padding:0 12px;outline:none;transition:.14s}
.pcw-search input:focus{border-color:var(--pcac,#e8a33d);width:130px}
.pcw-search input::placeholder{color:var(--muted)}
.pcw.on{border-color:var(--pcac,#e8a33d);background:linear-gradient(135deg,rgba(232,163,61,.14),rgba(232,163,61,.03))}
.pcw::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:transparent;transition:.2s}
.pcw.cup::before{background:var(--up)} .pcw.cdn::before{background:var(--down)}
.pcw-top{display:flex;align-items:center;gap:6px}
.pcw-ic{font-size:14px;line-height:1}
.pcw-s{font-size:12px;font-weight:800;letter-spacing:.2px}
.pcw-dir{margin-inline-start:auto;font-size:9.5px}
.pcw-dir.up{color:var(--up)} .pcw-dir.down{color:var(--down)}
.pcw-px{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.pcw-px[data-fl=u]{animation:pcflashu .55s ease-out} .pcw-px[data-fl=d]{animation:pcflashd .55s ease-out}
@keyframes pcflashu{0%{color:var(--up)}100%{color:var(--txt)}}
@keyframes pcflashd{0%{color:var(--down)}100%{color:var(--txt)}}
.pcw-row{display:flex;align-items:center;gap:7px;justify-content:space-between}
.pcw-spark{width:70px;height:22px;flex-shrink:0;opacity:.92}
.pcw-ch{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pcw-ch.up{color:var(--up)} .pcw-ch.down{color:var(--down)}
/* ── pro header info ── */
.pcnm2{font-size:9.5px;color:var(--txt2);font-weight:600;letter-spacing:.2px}
/* STABLE header: never wrap — when daystats filled H/L the wrapping block broke the whole header row; the row scrolls (pchead overflow-x) instead */
.pchstats{display:flex;align-items:center;gap:12px;margin-inline-start:10px;flex-wrap:nowrap;white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden}
/* header-width-aware compact tiers (toggled by the ResizeObserver in page.js — NOT viewport @media, which a sidebar makes wrong) */
.pchead.pcnar .pchohlc{display:none}                                   /* tier 1: drop the O/H/L/C legend (still available on hover via the data window) */
.pchead.pcnar2 .pchs.pchl,.pchead.pcnar2 .pchs.pcsess{display:none}    /* tier 2: also drop day H/L + session chip — keep price/change/spread/countdown */
.pchs{font-size:11px;color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px;flex-shrink:0}
.pchs b{font-size:8.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.pchs i{font-style:normal;color:var(--muted);font-size:9px}
.pchs.pcsess{padding:3px 9px;border-radius:20px;background:rgba(120,130,150,.12);align-items:center}
.pchs.pcsess .pcsdot{width:6px;height:6px;border-radius:50%;background:var(--muted);display:inline-block}
.pchs.pcsess.on{color:var(--up)} .pchs.pcsess.on .pcsdot{background:var(--up);box-shadow:0 0 0 3px rgba(38,208,124,.18);animation:pcpulse 2s infinite}
.pchs.pccd{padding:3px 9px;border-radius:20px;background:rgba(120,130,150,.12);font-variant-numeric:tabular-nums}
.pchs.pccd b{font-size:10px;color:var(--muted);font-weight:700}
.pchs.pccd.soon{background:rgba(240,180,41,.18);color:#f0b429;animation:pcpulse 1s infinite}
.pchs.pccd.soon b{color:#f0b429}
.pckbd{padding:6px 4px 2px}
.pckbd h3{margin:0 0 12px;font-size:15px;font-weight:800;color:var(--txt)}
.pckbd-row{display:flex;align-items:center;gap:12px;padding:7px 2px;border-bottom:1px solid rgba(120,130,150,.12)}
.pckbd-row kbd{min-width:56px;text-align:center;font-family:ui-monospace,monospace;font-size:12px;font-weight:800;color:var(--txt);background:rgba(120,130,150,.14);border:1px solid rgba(120,130,150,.25);border-radius:6px;padding:4px 8px}
.pckbd-row span{font-size:13px;color:var(--txt)}
.pckbd-note{margin-top:12px;font-size:11px;color:var(--muted);text-align:center}
.pcsrc2{font-size:9px;font-weight:800;color:var(--up);opacity:.85;letter-spacing:.3px}
.pcsrc-dly{color:var(--pcac,#e8a33d);font-weight:800;font-size:8.5px;letter-spacing:.2px;margin-inline-start:5px;padding:0 4px;border:1px solid color-mix(in srgb,var(--pcac,#e8a33d) 40%,transparent);border-radius:5px;white-space:nowrap}   /* Yahoo ~15m-delayed honesty badge (amber status, not price-green) */
@keyframes pcpulse{0%,100%{opacity:1}50%{opacity:.45}}
.pccard{padding:0;overflow:hidden;display:flex;flex-direction:column;position:relative}   /* position:relative → the detached floating terminal anchors to the card without resizing the chart */
.pchead{display:flex;align-items:center;gap:12px;padding:9px 16px 4px;flex-wrap:nowrap;overflow:hidden}   /* STABLE: never wraps — secondary blocks hide by the .pcnar tiers (header-width-aware, set in page.js); anything still over-wide clips instead of breaking into a chaotic 2nd row */
.pchead::-webkit-scrollbar{display:none}
.pcic{font-size:18px}
.pcst{display:flex;flex-direction:column;line-height:1.14}
.pcpair{font-size:15px;font-weight:800}
.pcnm{font-size:10px;color:var(--txt2);font-weight:700}
.pcq{display:flex;align-items:baseline;gap:10px;margin-inline-start:8px;flex-shrink:0;white-space:nowrap}   /* the live price + change is the ONE thing that must never shrink or wrap */
.pcq-p{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.pcq-c{font-size:12.5px;font-weight:800}
.pcq-p.up,.pcq-c.up{color:var(--up)} .pcq-p.down,.pcq-c.down{color:var(--down)}
.pcgrow{flex:1}
.pctf,.pcseg{display:flex;gap:2px;background:var(--bg2,rgba(0,0,0,.16));border:1px solid var(--line);border-radius:9px;padding:2px}
.pctf button{background:none;border:0;color:var(--txt2);font:inherit;font-size:11.5px;font-weight:700;padding:5px 7px;border-radius:7px;cursor:pointer}
.pctf button.on{background:var(--pcac,#e8a33d);color:#06101d}
.pctfwrap{display:flex;align-items:center;gap:6px}
.pctfdrop{position:relative}
.pctfbtn{display:flex;align-items:center;gap:4px;background:var(--cardgrad);border:1px solid var(--line);color:var(--txt2);font:inherit;font-size:12px;font-weight:800;padding:6px 9px;border-radius:8px;cursor:pointer}
.pctfbtn:hover{border-color:var(--pcac,#e8a33d);color:var(--pcac,#e8a33d)}
.pctfbtn.on{background:var(--pcac,#e8a33d);color:#06101d;border-color:var(--pcac,#e8a33d)}
.pctfbtn .caret{font-size:9px;opacity:.7}
.pctfmenu{position:absolute;top:38px;right:0;left:auto;width:212px;max-width:calc(100vw - 24px);max-height:min(74vh,500px);overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.45);padding:6px;z-index:42;display:none;scrollbar-width:thin}
.pctfmenu.on{display:block}
/* Simple / Pro chart mode — Simple HIDES the pro chrome; default (no data-cmode) = Pro, byte-identical to before */
.pccard[data-cmode="simple"] .pcpro,.pccard[data-cmode="simple"] .pctools{display:none}
.pccard[data-cmode="simple"] .pcmode{background:var(--pcac-bg,rgba(232,163,61,.15));border-color:color-mix(in srgb,var(--pcac,#e8a33d) 42%,transparent);color:var(--pcac,#e8a33d)}
.pctf-cat{font-size:9.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding:8px 9px 3px}
.pctf-row{display:flex;align-items:center;justify-content:space-between;padding:6px 9px;border-radius:7px;cursor:pointer;font-size:12.5px;font-weight:600}
.pctf-row:hover{background:rgba(232,163,61,.08)}
.pctf-row.on{background:rgba(232,163,61,.16);color:var(--pcac,#e8a33d);font-weight:800}
.pctf-star{font-size:13px;color:var(--muted);opacity:.5;transition:.12s;padding:0 2px}
.pctf-star:hover{opacity:1;transform:scale(1.18)}
.pctf-star.on{color:var(--pcac,#e8a33d);opacity:1}
.pctf-add{display:flex;gap:5px;padding:3px 4px 7px;border-bottom:1px solid var(--line);margin-bottom:4px}
.pctf-add input{flex:1;min-width:0;background:var(--bg2,rgba(0,0,0,.18));border:1px solid var(--line);border-radius:7px;color:var(--txt);font:inherit;font-size:12px;padding:5px 8px}
.pctf-add button{background:var(--pcac,#e8a33d);border:0;color:#fff;font-weight:800;width:30px;border-radius:7px;cursor:pointer}
.pcseg button{background:none;border:0;color:var(--txt2);font-size:13px;padding:5px 8px;border-radius:7px;cursor:pointer;line-height:1}
.pcseg button.on{background:rgba(232,163,61,.16);color:var(--pcac,#e8a33d)}
.pcbtn{background:var(--cardgrad);border:1px solid var(--line);color:var(--txt2);font:inherit;font-size:12px;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer}
.pcbtn:hover{border-color:var(--pcac,#e8a33d);color:var(--pcac,#e8a33d)}
.pcbtn.on{background:rgba(232,163,61,.14);color:var(--pcac,#e8a33d);border-color:var(--pcac,#e8a33d)}
.pcbtn.pcreset{color:var(--down,#ff5667);border-color:rgba(255,86,103,.32)}
.pcbtn.pcreset:hover{background:rgba(255,86,103,.12);border-color:var(--down,#ff5667);color:var(--down,#ff5667)}
.pcbtn.pcpub{width:100%;margin-top:9px;justify-content:center;color:var(--pcac,#e8a33d);border-color:rgba(232,163,61,.38);font-weight:800}
.pcbtn.pcpub:hover{background:rgba(232,163,61,.12);border-color:var(--pcac,#e8a33d);color:var(--pcac,#e8a33d)}
.pcbtn.pcpubh{color:var(--pcac,#e8a33d);border-color:rgba(232,163,61,.38);font-weight:800}
.pcbtn.pcpubh:hover{background:rgba(232,163,61,.12);border-color:var(--pcac,#e8a33d);color:var(--pcac,#e8a33d)}
.pcdrop{position:relative}

/* tabular numerals EVERYWHERE numbers appear in the chart card + terminal — prices must never jitter on tick (DESIGN.md rule, consolidated at the container level) */
.pccard,.pcwrap,.term,.pcstage{font-variant-numeric:tabular-nums}