/* perfhist.css (22 Oct 2026 18:13): Performance history card on Highlights (static/perfhist.js). Same card system as the Highlights list cards. */
#hlPH.ph-c{position:relative;margin:20px 0 0;padding:24px 26px 20px;border-radius:16px;border:1px solid rgba(255,255,255,.07);
 background:linear-gradient(180deg,rgba(162,89,255,.07),rgba(162,89,255,0) 70%),var(--ci-surface,#120f1c);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -16px rgba(0,0,0,.6);
 font-size:14px;font-weight:500;line-height:1.4;letter-spacing:0;white-space:normal;color:var(--ci-text,#f1f2f4)}
#hlPH[hidden]{display:none}
#hlPH .ph-hd{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 20px}
#hlPH .ph-e{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ci-accent-hi,#c69bff);margin-bottom:6px}
#hlPH .ph-h{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--ci-text,#f1f2f4);text-transform:none;border:0;padding:0}
#hlPH .ph-ctl{display:flex;flex-wrap:wrap;gap:10px}
#hlPH .ph-seg{display:inline-flex;padding:3px;border-radius:12px;background:rgba(10,8,18,.55);border:1px solid rgba(255,255,255,.07)}
#hlPH .ph-seg button{font:inherit;font-size:13px;font-weight:700;color:var(--ci-muted,#958fa8);background:transparent;border:0;border-radius:9px;padding:7px 13px;cursor:pointer;white-space:nowrap}
#hlPH .ph-seg button:hover{color:var(--ci-text,#f1f2f4)}
#hlPH .ph-seg button.on{color:#fff;background:rgba(162,89,255,.22);box-shadow:inset 0 0 0 1px rgba(162,89,255,.6)}
#hlPH .ph-sum{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
#hlPH .ph-s{display:flex;flex-direction:column;gap:4px;min-width:104px;padding:12px 16px;border-radius:14px;background:rgba(10,8,18,.55);border:1px solid rgba(255,255,255,.07);cursor:help}
#hlPH .ph-s span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ci-muted,#958fa8);white-space:nowrap}
#hlPH .ph-s b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
#hlPH .ph-s.ph-gp.up{border-color:rgba(120,240,89,.4);background:rgba(120,240,89,.08)}#hlPH .ph-s.ph-gp.dn{border-color:rgba(255,77,109,.4);background:rgba(255,77,109,.08)}
#hlPH .up{color:#78F059}#hlPH .dn{color:#ff4d6d}
#hlPH .ph-x{margin-top:14px;font-size:13px;font-weight:600;color:var(--ci-muted,#958fa8)}#hlPH .ph-x>span{cursor:help}
#hlPH .ph-i{font-weight:700;color:var(--ci-accent-hi,#c69bff);margin-left:2px}
#hlPH .ph-cv{position:relative;margin-top:14px}
#hlPH{min-width:0;box-sizing:border-box}#hlPH .ph-ch{width:100%;min-width:0;min-height:230px}#hlPH .ph-ch svg{max-width:100%;height:auto}#hlPH .ph-ch svg{display:block;overflow:visible;touch-action:pan-y}
#hlPH .ph-e0{display:flex;align-items:center;justify-content:center;min-height:230px;color:var(--ci-muted,#958fa8);border:1px dashed rgba(255,255,255,.09);border-radius:12px}
#hlPH .ph-gl{stroke:rgba(255,255,255,.06);stroke-width:1}#hlPH .ph-z{stroke:rgba(255,255,255,.22);stroke-width:1}
#hlPH .ph-ax{fill:var(--ci-muted,#958fa8);font-size:11px;font-weight:600;font-family:inherit;font-variant-numeric:tabular-nums}
#hlPH .ph-vb{fill:rgba(162,89,255,.22)}
#hlPH .ph-up{fill:rgba(120,240,89,.18)}#hlPH .ph-dn{fill:rgba(255,77,109,.18)}
#hlPH .ph-lc{fill:none;stroke:#f1ecff;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
#hlPH .ph-lb2{fill:none;stroke:#a259ff;stroke-width:1.8;stroke-dasharray:5 4;stroke-linejoin:round}
#hlPH .ph-dc{fill:#f1ecff}#hlPH .ph-db{fill:#a259ff}
#hlPH .ph-live{fill:#78F059;stroke:rgba(120,240,89,.35);stroke-width:6}
#hlPH .ph-hl{stroke:rgba(255,255,255,.35);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
#hlPH .ph-tip{position:absolute;top:6px;z-index:5;min-width:170px;padding:10px 12px;border-radius:12px;background:rgba(14,10,24,.96);border:1px solid rgba(162,89,255,.45);box-shadow:0 12px 30px rgba(0,0,0,.5);pointer-events:none;font-size:13px}
#hlPH .ph-tip[hidden]{display:none}
#hlPH .ph-tip div{display:flex;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums}#hlPH .ph-tip span{color:var(--ci-muted,#958fa8)}
#hlPH .ph-tip .ph-td{font-weight:800;margin-bottom:6px;color:#fff}#hlPH .ph-tip .ph-tn{display:block;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);color:var(--ci-muted,#958fa8);font-size:12px}
#hlPH .ph-lg{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--ci-muted,#958fa8)}#hlPH .ph-lg>span{display:inline-flex;align-items:center;gap:6px;cursor:help}
#hlPH .ph-k{display:inline-block;width:16px;height:3px;border-radius:2px;vertical-align:middle}
#hlPH .ph-k.c{background:#f1ecff}#hlPH .ph-k.b{background:repeating-linear-gradient(90deg,#a259ff 0 5px,transparent 5px 8px)}
#hlPH .ph-k.g{height:10px;width:12px;background:rgba(120,240,89,.35)}#hlPH .ph-k.r{height:10px;width:12px;background:rgba(255,77,109,.35);margin-left:6px}
#hlPH .ph-k.v{height:10px;width:6px;background:rgba(162,89,255,.4)}
@media(max-width:640px){#hlPH.ph-c{margin-top:16px;padding:18px 16px 16px}#hlPH .ph-h{font-size:17px}#hlPH .ph-ctl{width:100%}#hlPH .ph-seg button{padding:7px 11px}
 #hlPH .ph-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px}#hlPH .ph-s{min-width:0;padding:10px 12px}#hlPH .ph-s b{font-size:18px}#hlPH .ph-lg{gap:6px 14px;font-size:12px}}

/* 19:40 hlfix: logged-out log-in prompt in place of the live performance + history (perfhist.js lockHtml) */
#hlPH.ph-lk{border-color:rgba(162,89,255,.38);background:linear-gradient(180deg,rgba(162,89,255,.14),rgba(162,89,255,.03)),var(--ci-surface,#120f1c)}
#hlPH .ph-lkp{margin:8px 0 0;max-width:640px;color:var(--ci-muted,#b7b0c8);font-size:14px;line-height:1.5}
#hlPH .ph-lka{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
#hlPH .ph-lka a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:11px;font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
#hlPH .ph-lb1{background:#78F059;color:#0d0a14}
#hlPH .ph-lb2{border:1px solid rgba(162,89,255,.55);color:#f1f2f4;background:rgba(162,89,255,.12)}
@media (max-width:560px){#hlPH.ph-lk{padding:20px 18px}#hlPH .ph-lka a{flex:1 1 140px}}
/* 23 Oct 2026: one timeframe control (24h · 72h · 7 days · 30 days · All) */
@media(max-width:640px){#hlPH .ph-tf{display:flex;width:100%}#hlPH .ph-tf button{flex:1;padding:7px 4px;font-size:12.5px}}
/* 23 Oct 2026 01:50: merged LIVE + history panel. Members: this panel replaces the LIVE hero (#hlHero stays for logged-out visitors). */
#sxHL.ph-merged>#hlHero{display:none!important}
#sxHL.ph-merged>#hlPH.ph-c{margin:-6px 0 20px}
#hlPH .ph-sum:empty{display:none}
#hlPH .ph-hx{margin-top:14px}
#hlPH .ph-ht{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
#hlPH .ph-hv{font-size:15px;font-weight:700;color:var(--ci-muted,#958fa8);cursor:help}
#hlPH .ph-hv b{font-size:30px;font-weight:800;letter-spacing:-.015em;line-height:1.1;font-variant-numeric:tabular-nums;margin-right:4px}
#hlPH .ph-xv{display:inline-flex;align-items:baseline;gap:8px;padding:5px 12px;border-radius:12px;font-size:15px;font-weight:700;color:var(--ci-muted,#958fa8);cursor:help}
#hlPH .ph-xv b{font-size:26px;font-weight:800;letter-spacing:-.015em;line-height:1.15;font-variant-numeric:tabular-nums}
#hlPH .ph-xv.up{background:rgba(120,240,89,.08);box-shadow:inset 0 0 0 1px rgba(120,240,89,.35)}#hlPH .ph-xv.up b{color:#78F059}
#hlPH .ph-xv.dn{background:rgba(255,77,109,.08);box-shadow:inset 0 0 0 1px rgba(255,77,109,.35)}#hlPH .ph-xv.dn b{color:#ff4d6d}
#hlPH .ph-hn{margin-top:6px;font-size:13px;font-weight:600;color:var(--ci-muted,#958fa8)}#hlPH .ph-h72{cursor:help}
#hlPH .ph-g{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;column-gap:30px;row-gap:12px;margin-top:14px}
#hlPH .lh-i{display:flex;flex-direction:column;gap:3px;cursor:help}
#hlPH .lh-l{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ci-muted,#958fa8);white-space:nowrap}
#hlPH .lh-v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
#hlPH .ph-chw{margin-top:16px;padding-top:4px;border-top:1px solid rgba(255,255,255,.06)}
@media(max-width:900px){#hlPH .ph-g{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto}}
@media(max-width:640px){#sxHL.ph-merged>#hlPH.ph-c{margin:-4px 0 16px}#hlPH .ph-hv b{font-size:26px}#hlPH .ph-xv b{font-size:21px}#hlPH .ph-xv{font-size:13.5px}
 #hlPH .ph-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}#hlPH .lh-l{white-space:normal}#hlPH .lh-v{font-size:17px}}
/* 23 Oct 2026 02:50 (Chris): Highlights order is small boxes, then this panel, then Latest calls. One 20 px gap above and below (16 px on phones). */
#hlBody+#sxHL{margin-top:20px!important;margin-bottom:0!important}#sxHL.ph-merged>#hlPH.ph-c{margin-top:0!important;margin-bottom:0!important}#hlTail>.hl-lt:first-child{margin-top:20px!important}
@media(max-width:640px){#hlBody+#sxHL{margin-top:16px!important}#hlTail>.hl-lt:first-child{margin-top:16px!important}}
#hlBody:has(>.hl-e:only-child)+#sxHL{display:none!important}   /* no jump: the panel shows once the boxes above it have loaded */