/* TABS_1016 (Bill 2026-10-16): Values & Sales grade table + sale rows, Trend tab chart. gpk_cardtabs_1016.py adds this file. */
:root{--gt-ink:#e5e7eb;--gt-ink2:#cbd5e1;--gt-mute:#94a3b8;--gt-faint:#64748b;--gt-line:rgba(51,65,85,.55);--gt-line2:rgba(51,65,85,.32);
  --gt-panel:rgba(15,23,42,.55);--gt-panel2:rgba(15,23,42,.82);--gt-acc:#22a7e6;--gt-up:#34d399;--gt-dn:#fb7185;--gt-surface:#0f172a;
  --gt-auction:#3d8bfd;--gt-bin:#c2820a;--gt-offer:#a970f5;--gt-other:#7c8aa0;--gt-value:#e5e7eb}
#tcxFamPanel .gvs,#gtcRoot{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- Values & Sales */
.gvs{border:1px solid rgba(34,167,230,.28);border-radius:14px;padding:16px 16px 10px;background:rgba(17,24,39,.45);max-width:860px;margin:0 auto}
.gvsHead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:10px}
.gvsTitle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gt-acc);font-weight:800}
.gvsSub{font-size:11.5px;color:var(--gt-mute)}
.gvsPars{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.gvsChip{appearance:none;margin:0;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.2;cursor:pointer;white-space:nowrap;
  background:rgba(216,201,255,.08);color:#c9b7ff;border:1px solid rgba(216,201,255,.28)}
.gvsChip:hover{border-color:rgba(216,201,255,.6)}
.gvsChip.on{background:rgba(216,201,255,.26);color:#fff;border-color:rgba(216,201,255,.75)}
.gvsChip:focus-visible,.gvsG:focus-visible,.gvsSort:focus-visible,#gtcRoot button:focus-visible{outline:2px solid var(--gt-acc);outline-offset:2px}
.gvsT{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:13.5px}
.gvsT td,.gvsT th{overflow:hidden;text-overflow:ellipsis}
.gvsT td.x{overflow:visible}
.gvsCh{display:inline-block;width:7px;height:7px;border-right:2px solid #7c8aa0;border-bottom:2px solid #7c8aa0;transform:rotate(-45deg);transition:transform .12s;vertical-align:2px}
.gvsCh.open{transform:rotate(45deg);vertical-align:4px}
.gvsG:hover .gvsCh{border-color:#cbd5e1}
.gvsT col.c-g{width:auto}.gvsT col.c-v{width:22%}.gvsT col.c-p{width:16%}.gvsT col.c-s{width:16%}.gvsT col.c-x{width:34px}
.gvsT thead th{background:#111a2c;color:var(--gt-faint);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;padding:8px 12px;border-bottom:1px solid var(--gt-line);text-align:left}
.gvsT th.n,.gvsT td.n{text-align:right}
.gvsG{cursor:pointer}
.gvsG td{padding:10px 12px;border-top:1px solid var(--gt-line2);white-space:nowrap}
.gvsG:first-child td{border-top:0}
.gvsG:hover td{background:rgba(34,167,230,.06)}
.gvsG.on td{background:rgba(34,167,230,.13)}
.gvsG .g{font-weight:800;color:var(--gt-ink)}
.gvsG.on .g{color:var(--gt-acc)}
.gvsG .v{font-weight:800}
.gvsG .p,.gvsG .s{color:var(--gt-mute)}
.gvsG .x{color:#7c8aa0;font-size:11px;text-align:center;padding-left:0;padding-right:8px}
.gvsG.nos{cursor:default}
.gvsTag{display:inline-block;margin-left:5px;font-size:9px;font-weight:800;letter-spacing:.06em;vertical-align:1px}
.gvsC>td{padding:0 0 12px;border-top:0}
.gvsBox{margin:2px 8px 4px 12px;border-left:2px solid rgba(34,167,230,.38);background:var(--gt-panel);border-radius:0 12px 12px 0;padding:10px 10px 6px 12px}
.gvsAcc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 10px;padding:8px 12px;border-radius:10px;
  background:rgba(34,167,230,.08);border:1px solid rgba(34,167,230,.25);font-size:12px;color:var(--gt-ink2)}
.gvsAcc .k{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gt-acc)}
.gvsAcc .w{flex:1 1 220px;min-width:0}
.gvsAcc .w b{color:#fff}
.gvsDots{display:inline-flex;gap:3px;flex:0 0 auto}
.gvsDots i{width:8px;height:8px;border-radius:50%;background:rgba(148,163,184,.25);display:block}
.gvsDots i.hit{background:var(--gt-up)}
.gvsBar{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.gvsBar input{flex:1 1 auto;min-width:0;max-width:260px;padding:6px 10px;font-size:12.5px;border-radius:8px;background:#0b1220;color:var(--gt-ink);border:1px solid rgba(51,65,85,.8)}
.gvsBar .cnt{margin-left:auto;font-size:11px;color:var(--gt-mute);white-space:nowrap}
.gvsSL{max-height:440px;overflow:auto;border-radius:8px;border:1px solid var(--gt-line2);background:rgba(2,6,23,.25)}
.gvsSR{display:grid;grid-template-columns:minmax(104px,1.15fr) minmax(86px,1fr) minmax(96px,1fr) minmax(78px,.8fr) minmax(108px,1fr);
  align-items:center;column-gap:12px;padding:8px 12px;border-top:1px solid var(--gt-line2);font-size:12.5px;color:var(--gt-ink2)}
.gvsSR:first-child{border-top:0}
.gvsSR>*{min-width:0}
.gvsSR .d{color:var(--gt-mute);white-space:nowrap}
.gvsSR .pr{font-weight:800;color:#4ade80;text-align:right;white-space:nowrap}
.gvsSR .cv{text-align:right;white-space:nowrap;color:var(--gt-ink2)}
.gvsSR .cv.nc{color:var(--gt-faint);font-size:11px;white-space:normal;line-height:1.25}
.gvsSR .cv sup{color:var(--gt-mute);font-size:9px;margin-left:1px}
.gvsSR .vc{text-align:right;font-weight:800;white-space:nowrap}
.gvsSR .vc.up{color:var(--gt-up)}.gvsSR .vc.dn{color:var(--gt-dn)}.gvsSR .vc.eq{color:var(--gt-ink2)}.gvsSR .vc.na{color:var(--gt-faint);font-weight:600}
.gvsSR .ct{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gvsSR .ct a{font-size:12px;font-weight:700;color:#7dd3fc;text-decoration:none}
.gvsSR .ct a:hover{text-decoration:underline}
.gvsSR .ct .no{color:var(--gt-faint);font-size:11px}
.gvsSH{position:sticky;top:0;z-index:1;background:#0f1729;padding-top:7px;padding-bottom:7px;border-top:0;border-bottom:1px solid var(--gt-line)}
.gvsSort{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gt-faint);cursor:pointer;white-space:nowrap}
.gvsSort.on{color:var(--gt-ink2)}
.gvsSH .r{text-align:right}
.gvsMore{padding:8px 12px;color:var(--gt-mute);font-size:11.5px}
.gvsNote{margin:6px 2px 0;font-size:10.5px;color:var(--gt-faint)}
@media (max-width:640px){
  #tabsBox>.p-6{padding:14px 10px}
  #tcxFamPanel,.gvs{max-width:100%;box-sizing:border-box;min-width:0}
  .gvs{padding:12px 10px 8px;border-radius:12px}
  .gvsPars{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -10px 10px;padding:0 10px 2px}
  .gvsPars::-webkit-scrollbar{display:none}
  .gvsChip{padding:8px 13px;font-size:12.5px}
  .gvsT{font-size:13.5px}
  .gvsT col.c-g{width:27%}.gvsT col.c-v{width:28%}.gvsT col.c-p{width:19%}.gvsT col.c-s{width:19%}.gvsT col.c-x{width:20px}
  .gvsT thead th{padding:8px 4px;letter-spacing:.04em}
  .gvsG td{padding:12px 4px}
  .gvsG td.g{padding-left:8px}.gvsT thead th:first-child{padding-left:8px}
  .gvsG .x{padding-right:4px}
  .gvsBox{margin:2px 0 4px 4px;padding:8px 8px 4px 10px}
  .gvsSH{display:none}
  .gvsSR{grid-template-columns:1fr auto;grid-template-areas:"d pr" "cv ct";row-gap:3px;column-gap:10px;padding:9px 10px}
  .gvsSR .d{grid-area:d}.gvsSR .pr{grid-area:pr;font-size:13.5px}
  .gvsSR .cv{grid-area:cv;text-align:left;font-size:11.5px;display:flex;gap:8px;align-items:baseline}
  .gvsSR .vc{display:none}
  .gvsSR .cv .vcm{display:inline;font-weight:800}
  .gvsSR .ct{grid-area:ct;font-size:11.5px}
  .gvsSL{max-height:520px}
  .gvsBar input{max-width:none}
}
@media (min-width:641px){.gvsSR .cv .vcm{display:none}}
.gvsSR .cv .vcm.up{color:var(--gt-up)}.gvsSR .cv .vcm.dn{color:var(--gt-dn)}.gvsSR .cv .vcm.eq{color:var(--gt-ink2)}

/* the long sales table under the panel: same figures, aligned */
#tab-sales table{font-variant-numeric:tabular-nums}
#tab-sales table thead th{position:sticky;top:0;z-index:1;background:#111a2c}

/* ---------------------------------------------------------------- Trend tab */
#tabsBox .tab-btn[data-tab="flipper"],#tab-flipper{display:none !important}
.gtc{border:1px solid rgba(34,167,230,.28);border-radius:14px;padding:16px;background:rgba(17,24,39,.45)}
.gtcHead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:12px}
.gtcTitle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gt-acc);font-weight:800}
.gtcScope{font-size:12px;color:var(--gt-mute);min-height:16px}
.gtcCtl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:10px}
.gtcGradeL{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gt-faint)}
.gtcGradeL select{min-width:120px;height:34px;padding:0 10px;border-radius:9px;background:#0b1220;color:var(--gt-ink);border:1px solid rgba(51,65,85,.9);font-size:13px;font-weight:700;text-transform:none;letter-spacing:0}
.gtcWin{display:inline-flex;border:1px solid rgba(51,65,85,.9);border-radius:10px;overflow:hidden;background:#0b1220}
.gtcWin button,.gtcLog{appearance:none;border:0;background:none;color:var(--gt-ink2);font-size:12.5px;font-weight:700;height:34px;min-width:52px;padding:0 12px;cursor:pointer}
.gtcWin button+button{border-left:1px solid rgba(51,65,85,.9)}
.gtcWin button.on{background:rgba(34,167,230,.22);color:#fff}
.gtcWin button:disabled{color:#475569;cursor:default}
.gtcLog{border:1px solid rgba(51,65,85,.9);border-radius:10px;background:#0b1220;margin-left:auto}
.gtcLog[aria-pressed="true"]{background:rgba(34,167,230,.22);color:#fff}
.gtcLegend{display:flex;flex-wrap:wrap;gap:6px 16px;min-height:20px;margin:2px 0 8px;font-size:12px;color:var(--gt-ink2)}
.gtcLegend button{appearance:none;background:none;border:0;padding:2px 0;margin:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.gtcLegend button.off{opacity:.38}
.gtcLegend button b{font-weight:600;color:var(--gt-mute)}
.gtcSw{display:inline-block;width:10px;height:10px;flex:0 0 auto}
.gtcSw.auction{border-radius:50%;background:var(--gt-auction)}
.gtcSw.bin{border-radius:2px;background:var(--gt-bin)}
.gtcSw.offer{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid var(--gt-offer)}
.gtcSw.other{border-radius:50%;border:2px solid var(--gt-other);box-sizing:border-box}
.gtcSw.value{width:18px;height:0;border-top:2px solid var(--gt-value)}
.gtcSw.valest{width:18px;height:0;border-top:2px dashed var(--gt-value)}
.gtcPlot{position:relative;height:340px;touch-action:pan-y}
.gtcPlot canvas{display:block;width:100% !important;height:100% !important}
.gtcEmpty{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px;font-size:13px;color:var(--gt-mute)}
.gtcEmpty[hidden]{display:none}
.gtcTip{position:absolute;z-index:5;pointer-events:none;min-width:150px;max-width:230px;padding:9px 11px;border-radius:10px;background:rgba(2,6,23,.96);
  border:1px solid rgba(148,163,184,.35);box-shadow:0 8px 24px rgba(0,0,0,.45);font-size:12px;line-height:1.45;color:var(--gt-ink2);opacity:0;transition:opacity .08s;font-variant-numeric:tabular-nums}
.gtcTip.on{opacity:1}
.gtcTip .h{font-size:11px;color:var(--gt-mute)}
.gtcTip .p{font-size:15px;font-weight:800;color:#fff}
.gtcTip .t{display:flex;align-items:center;gap:6px}
.gtcTip .up{color:var(--gt-up)}.gtcTip .dn{color:var(--gt-dn)}
.gtcTiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.gtcT{border:1px solid var(--gt-line);border-radius:11px;padding:10px 12px;background:var(--gt-panel);min-height:74px;box-sizing:border-box;min-width:0}
.gtcT b{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gt-faint)}
.gtcT span{display:block;margin-top:3px;font-size:18px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtcT span.up{color:var(--gt-up)}.gtcT span.dn{color:var(--gt-dn)}.gtcT span.na{color:var(--gt-mute);font-size:15px}
.gtcT i{display:block;margin-top:2px;font-style:normal;font-size:11px;color:var(--gt-mute);line-height:1.3}
.gtcFoot{margin-top:10px;font-size:11px;line-height:1.45;color:var(--gt-faint)}
.gtcXg{margin-top:16px;border:1px solid var(--gt-line2);border-radius:12px;padding:0 14px;background:rgba(15,23,42,.35)}
.gtcXg>summary{cursor:pointer;padding:12px 0;font-size:13px;font-weight:700;color:var(--gt-ink2)}
.gtcXg[open]>summary{border-bottom:1px solid var(--gt-line2);margin-bottom:6px}
.gtcXg>div{margin-top:0 !important;border-top:0 !important;padding-top:4px !important;padding-bottom:12px}
@media (max-width:640px){
  .gtc{padding:12px 10px;border-radius:12px}
  .gtcCtl{gap:8px}
  .gtcGradeL{flex:1 1 100%}
  .gtcGradeL select{flex:1 1 auto;height:44px}
  .gtcWin{flex:1 1 auto}
  .gtcWin button{flex:1 1 0;min-width:0;height:44px;padding:0 4px}
  .gtcLog{height:44px;margin-left:0}
  .gtcPlot{height:270px}
  .gtcTiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gtcT:first-child{grid-column:1/-1}
  .gtcT span{font-size:16px}
}