/* The Trader scores screen, on the back office's own tokens (app.css). Goes in services/backoffice/src/static/.
   Everything is under .ts (and the trader panel, aside.ts-panel), so nothing reaches another screen. Widths and heights
   are set from trader_scores.js through data-w and data-h, never inline, because the page's Content-Security-Policy
   allows no inline style. Layout: a dense dashboard (tiles, findings, a scrolling table with a fixed header, and a
   panel for one trader), so nothing becomes a long page of stacked cards. */
.ts,aside.ts-panel{--data:#446cff;--data-soft:rgba(68,108,255,.38);--grid:rgba(209,221,255,.12);--track:rgba(209,221,255,.07);--ctx:#8e9bb0;--proxy:#00c7c5;
  --glass:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.02)),rgba(10,17,34,.62)}
.ts .card,aside.ts-panel .card{padding:1.2rem 1.35rem;border-radius:20px;margin:0}
.ts h1{margin:0}
.ts h2,aside.ts-panel h3{font:400 1.32rem/1.08 var(--austin);letter-spacing:-.01em;margin:0 0 .8rem;color:#f2f5fd}
.ts .eyebrow,aside.ts-panel .eyebrow{margin-bottom:.45rem}
.ts .note,aside.ts-panel .note{margin:.8rem 0 0}
.ts .card .note:first-child{margin-top:0}
.ts small,aside.ts-panel small{font:400 .5em var(--sans);color:var(--quiet);letter-spacing:0}
/* head, freshness, tabs */
.ts-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ts-policy{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--glass);font-size:.8rem;color:var(--lead)}
.ts-policy .st span{color:#eef2fb;font-weight:600}
.ts-age{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.8rem 0 1rem;font-size:.82rem;color:var(--muted)}
.ts-age .st span{color:#eef2fb}
.ts-tabs{display:flex;gap:.25rem;padding:.35rem;margin:0 0 1rem;border:1px solid var(--line);border-radius:999px;background:var(--glass);overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.ts-tabs button{flex:none;min-height:38px;padding:0 1.05rem;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.72);font:600 .8rem/1 var(--sans);cursor:pointer}
.ts-tabs button:hover{color:#fff;background:rgba(255,255,255,.05)}
.ts-tabs button[aria-selected=true]{color:#fff;background:rgba(50,95,255,.85)}
.ts-body{display:grid;gap:1rem}
/* tiles and grids */
.ts-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.ts-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ts-tiles.journey{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.ts .tile dt,aside.ts-panel .tile dt{font-size:.74rem;color:var(--quiet)}
.ts .tile dd,aside.ts-panel .tile dd{margin:.4rem 0 0;font:400 clamp(1.9rem,2.5vw,2.5rem)/1 var(--austin)}
.ts .tile .sub,aside.ts-panel .tile .sub{margin-top:.55rem;line-height:1.4}
aside.ts-panel .tile.reward{border-color:rgba(68,108,255,.6)}
.ts-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.ts-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.ts .ts-about .note{margin:0}
/* toolbar */
.ts .ts-tools{margin:0;gap:.5rem}
.ts .btn.sm,aside.ts-panel .btn.sm{min-height:36px;padding:0 .85rem;font-size:.74rem;white-space:nowrap}
.ts select.btn{appearance:none;width:auto;min-width:9.5rem;padding:0 2rem 0 .95rem;background-image:linear-gradient(45deg,transparent 50%,#aeb8ca 50%),linear-gradient(135deg,#aeb8ca 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat;font-weight:600}
.ts select.btn option{color:#101626}
.ts-seg{display:inline-flex;gap:.25rem;padding:.2rem;border:1px solid var(--line);border-radius:999px}
.ts-seg .btn.sm{border-color:transparent;background:transparent}
.ts-seg .btn.sm[aria-pressed=true]{background:var(--azure);border-color:var(--azure)}
.ts-search input{min-height:36px;width:10rem;padding:0 .9rem;border-radius:999px;border:1px solid rgba(209,221,255,.2);background:rgba(8,14,30,.58);color:#fff;font:400 .8rem var(--sans)}
.ts-count{margin-left:auto;font-size:.8rem;color:var(--muted)}
/* the table: a real table everywhere, scrolling inside its own box, header fixed (app.css stacks rows on a phone) */
.ts-scroll{max-height:68vh;overflow:auto;border:1px solid var(--line);border-radius:20px;background:var(--glass)}
.ts-scroll.short{max-height:none}
.ts table.ts-table{display:table;width:100%;border-collapse:collapse;font-size:.84rem}
.ts table.ts-table thead{display:table-header-group}
.ts table.ts-table tbody{display:table-row-group}
.ts table.ts-table tr{display:table-row;padding:0;border:0}
.ts table.ts-table th,.ts table.ts-table td{display:table-cell;text-align:left;white-space:nowrap;padding:.62rem .8rem;border-bottom:1px solid var(--row);vertical-align:middle;width:auto}
.ts table.ts-table td::before{content:none}
.ts table.ts-table th{position:sticky;top:0;z-index:1;background:#141c30;font:500 .72rem/1.3 var(--sans);color:var(--quiet);padding-top:.8rem;padding-bottom:.7rem}
.ts table.ts-table th .sub{font-size:.68rem}
.ts table.ts-table .n{text-align:right;font-variant-numeric:tabular-nums}
.ts table.ts-table tbody tr{cursor:pointer}
.ts table.ts-table tbody tr.plain{cursor:default}
.ts table.ts-table tbody tr:hover td,.ts table.ts-table tbody tr:focus td{background:rgba(255,255,255,.035);outline:none}
.ts table.ts-table tbody tr:last-child td{border-bottom:0}
.ts .mono{font:600 .82rem ui-monospace,SFMono-Regular,Menlo,monospace}
.ts .num.big{font-size:1.2rem}
.ts .sub.inline{display:inline;margin:0}
.ts td .tag{display:block;margin-top:.2rem}
.ts .ts-pend{display:block;max-width:19rem;white-space:normal;font-size:.76rem;line-height:1.35;color:var(--muted)}
.ts td.ts-flags,aside.ts-panel .ts-flags{white-space:normal;min-width:13rem}
.ts .ts-flags .st,aside.ts-panel .ts-flags .st{display:flex;font-size:.76rem;margin:.1rem 0}
aside.ts-panel .ts-flags{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:.6rem 0 0}
.ts .five{display:inline-grid;grid-template-columns:repeat(5,11px);gap:3px;align-items:end;height:22px;vertical-align:middle}
.ts .five i{display:block;border-radius:2px 2px 0 0;background:var(--data);min-height:2px}
.ts .five i.na{height:100%;background:transparent;border:1px dashed rgba(209,221,255,.32);border-radius:2px}
/* horizontal bars: square at the baseline, 4px rounded data end */
.ts .hbars{display:grid;grid-template-columns:max-content 1fr max-content;gap:.55rem .9rem;align-items:center;font-size:.82rem}
.ts .hbars .lab{color:#eef2fb}
.ts .hbars .trk,.ts-check .trk{display:block;height:14px;background:var(--track);border-radius:0 4px 4px 0}
.ts .hbars .bar,.ts-check .bar{display:block;height:14px;min-width:3px;border-radius:0 4px 4px 0;background:var(--data-soft)}
.ts .hbars .bar.hot,.ts-check .bar{background:var(--data)}
.ts .hbars .val{font-variant-numeric:tabular-nums;color:#eef2fb;text-align:right;white-space:pre}
.ts-reasons{list-style:none;margin:0;padding:0;max-height:22rem;overflow:auto}
.ts-reasons li{display:grid;grid-template-columns:3rem 1fr;gap:.6rem;padding:.45rem 0;border-top:1px solid var(--row);font-size:.82rem}
.ts-reasons li:first-child{border-top:0}
.ts-reasons .n{text-align:right;font-variant-numeric:tabular-nums;color:#eef2fb}
.ts-reasons .st{white-space:normal;align-items:baseline}
.ts-method p,.ts-method li{font-size:.9rem;line-height:1.55;color:var(--lead);max-width:52rem}
.ts-method b{color:#eef2fb}
/* charts: one axis, thin marks, recessive grid */
:is(.ts,aside.ts-panel) .chart svg{display:block;width:100%;overflow:visible}
:is(.ts,aside.ts-panel) .chart text{font:400 11px var(--sans);fill:var(--quiet)}
:is(.ts,aside.ts-panel) .chart text.lab{font-size:12.5px;fill:#eef2fb}
:is(.ts,aside.ts-panel) .chart text.v{fill:#eef2fb;font-weight:600;font-size:12.5px}
:is(.ts,aside.ts-panel) .chart text.note{fill:var(--muted)}
:is(.ts,aside.ts-panel) .chart line.grid{stroke:var(--grid);stroke-width:1}
:is(.ts,aside.ts-panel) .chart line.chance{stroke:var(--ctx);stroke-width:1.5}
:is(.ts,aside.ts-panel) .chart line.ci{stroke-width:2.5;stroke-linecap:round}
:is(.ts,aside.ts-panel) .chart .a{stroke:var(--data);fill:var(--data)}
:is(.ts,aside.ts-panel) .chart .b{stroke:var(--warn);fill:var(--warn)}
:is(.ts,aside.ts-panel) .chart .c{stroke:var(--ctx);fill:var(--ctx)}
:is(.ts,aside.ts-panel) .chart circle.pt{stroke:var(--ink);stroke-width:2}
:is(.ts,aside.ts-panel) .chart path.ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
:is(.ts,aside.ts-panel) .chart path.ln.strict{stroke:var(--data)}
:is(.ts,aside.ts-panel) .chart path.ln.proxy{stroke:var(--proxy)}
:is(.ts,aside.ts-panel) .chart path.ln.known{stroke:var(--ctx);stroke-width:1.5}
:is(.ts,aside.ts-panel) .chart line.ref{stroke-width:1.5;stroke-dasharray:5 4}
:is(.ts,aside.ts-panel) .chart line.ref.cap{stroke:var(--warn)}
:is(.ts,aside.ts-panel) .chart text.ref.cap{fill:var(--warn)}
:is(.ts,aside.ts-panel) .chart line.ref.ctx{stroke:var(--ctx)}
aside.ts-panel .legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.74rem;color:var(--muted);margin:-.3rem 0 .6rem}
aside.ts-panel .legend .k{display:inline-flex;align-items:center;gap:.45rem}
aside.ts-panel .legend .sw{width:14px;height:3px;border-radius:2px}
aside.ts-panel .legend .sw.strict{background:var(--data)}aside.ts-panel .legend .sw.proxy{background:var(--proxy)}aside.ts-panel .legend .sw.known{background:var(--ctx)}
/* the trader panel: over the list, from the right */
aside.ts-panel{position:fixed;inset:0 0 0 auto;z-index:20;width:min(940px,100%);overflow:auto;transform:translateX(104%);transition:transform .22s var(--ease);
  background:radial-gradient(circle at 100% 0,rgba(50,95,255,.16),transparent 40%),#0f1628;border-left:1px solid rgba(182,199,255,.24);box-shadow:-30px 0 80px rgba(2,6,20,.55)}
aside.ts-panel.open{transform:none}
.ts-panel-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.2rem 1.6rem 1rem;
  background:rgba(15,22,40,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.ts-panel-head h2{font:400 clamp(1.7rem,2.6vw,2.3rem)/1 var(--austin);margin:0}
.ts-panel-head h2 .mono{font:400 .7em ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--lead)}
.ts-panel-head .sub{margin-top:.5rem}
.ts-panel-head a{color:#9fb2ff}
.ts-panel-body{display:grid;gap:1rem;padding:1.2rem 1.6rem 3rem}
.ts-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ts-big{margin:0;font:400 clamp(2.6rem,4vw,3.4rem)/1 var(--austin)}
.ts-check{display:grid;grid-template-columns:minmax(11rem,14rem) 8.5rem 1fr;gap:1.1rem;padding:.85rem 0;border-top:1px solid var(--row);align-items:start}
.ts-check:first-of-type{margin-top:.6rem}
.ts-check b{font-weight:600}
.ts-check .num{display:block;font-size:1.35rem;margin-bottom:.4rem}
.ts-check .val{color:#eef2fb}
.ts-check .sub{margin-top:.2rem}
.ts-check .rule{color:var(--quiet);font-size:.72rem}
aside.ts-panel .subh{font:500 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin:1.2rem 0 .5rem}
@media (max-width:1100px){.ts-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ts-grid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.ts-grid2,.ts-tiles.three{grid-template-columns:minmax(0,1fr)}.ts-check{grid-template-columns:minmax(0,1fr);gap:.35rem}}
@media (max-width:560px){.ts-tiles{grid-template-columns:minmax(0,1fr)}.ts-count{margin-left:0;width:100%}.ts-panel-head,.ts-panel-body{padding-left:1rem;padding-right:1rem}
  .ts .hbars{grid-template-columns:max-content 1fr}.ts .hbars .val{grid-column:2;text-align:left;margin-top:-.35rem}}