/* Stocks and Markets screener pages */
.sx{max-width:var(--container,1280px);margin:0 auto;padding:clamp(48px,7vw,96px) var(--gutter,24px) var(--space-12);}
.sx-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-2);}
.sx-head h1{font-size:clamp(44px,5.6vw,80px);font-weight:500;font-family:var(--font);letter-spacing:-0.045em;line-height:0.95;}
.sx-head p{font-size:12px;letter-spacing:var(--track-caps,0.12em);text-transform:uppercase;color:var(--text-muted);margin-top:var(--space-2);}
.sx-live{font-size:11.5px;letter-spacing:var(--track-caps,0.12em);text-transform:uppercase;color:var(--text-muted);display:inline-flex;align-items:center;gap:8px;}
.sx-live i{width:7px;height:7px;border-radius:1px;background:var(--success);animation:sxblink 2s ease-in-out infinite;}
@keyframes sxblink{0%,100%{opacity:1}50%{opacity:0.3}}
.sx-views{display:flex;gap:var(--space-3);margin-top:var(--space-6);border-bottom:1px solid var(--hairline,var(--border-default));overflow-x:auto;scrollbar-width:none;}
.sx-views button{position:relative;background:none;border:0;padding:12px 0;font:inherit;font-size:12px;font-weight:500;letter-spacing:var(--track-caps,0.12em);text-transform:uppercase;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:color 0.2s ease;}
.sx-views button .c{font-family:var(--mono);font-weight:500;font-size:12px;margin-left:6px;}
.sx-views button:hover,.sx-views button.on{color:var(--text-primary);}
.sx-views button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);}
.sx-views .sep{flex:0 0 1px;align-self:center;height:16px;background:var(--border-strong);}
.sx-classes{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--space-2);}
.sx-classes button{height:32px;padding:0 12px;border:1px solid var(--border-default);border-radius:999px;background:transparent;color:var(--text-secondary);font:inherit;font-size:13px;cursor:pointer;}
.sx-classes button.on{background:var(--surface-3);border-color:var(--border-strong);color:var(--text-primary);}
.sx-bar{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center;margin-top:var(--space-3);}
.sx-bar input{flex:1 1 260px;width:auto;height:44px;padding:0 16px;font:inherit;font-size:14px;border-radius:999px;}
.sx-bar select{flex:0 1 210px;width:auto;min-width:0;height:44px;padding:0 14px;font:inherit;font-size:13px;border-radius:999px;cursor:pointer;}
.sx-bar .only-value{display:none;}
.view-value .sx-bar .only-value{display:block;}
.view-value .sx-bar .not-value{display:none;}
.sx-idea{font-size:13px;color:var(--text-secondary);margin-top:var(--space-1);line-height:1.5;min-height:1em;}
.sx-idea b{color:var(--text-primary);}
.sx-table-wrap{margin-top:var(--space-3);border:1px solid var(--hairline,var(--border-default));border-radius:var(--radius-lg,20px);overflow:hidden;overflow:clip;background:var(--surface);}
.sx-table{width:100%;border-collapse:collapse;font-size:14px;}
.sx-table th{position:sticky;top:var(--nav-h);background:var(--surface-2);text-align:left;font-size:10.5px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:14px 16px;border-bottom:1px solid var(--border-default);cursor:pointer;user-select:none;white-space:nowrap;}
.sx-table th:hover{color:var(--text-primary);}
.sx-table th .ar{font-family:var(--mono);margin-left:4px;color:var(--accent);}
.sx-table td{padding:14px 16px;border-bottom:1px solid var(--border-default);color:var(--text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums;}
.sx-table th.r,.sx-table td.r{text-align:right;}
.sx-table td.r{font-family:var(--mono);color:var(--text-primary);font-size:13px;}
.sx-table td b{color:var(--text-primary);}
.sx-table tr:last-child td{border-bottom:0;}
.sx-table tbody tr{cursor:pointer;}
.sx-table tbody tr:hover{background:var(--surface-2);}
.sx-table .nm{display:block;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:inherit;}
.sx-table .tk{font-family:var(--mono);font-weight:600;color:var(--text-primary);}
/* The name column takes the room the other columns leave and truncates the company name. */
.sx-table td:first-child:not(.empty){width:100%;max-width:0;}
.sx-table .n{color:var(--text-secondary);}
.sx-table .small{font-size:12px;}
.sx-table .mo{display:none;}
.sx-table .sx-face{display:inline-block;width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 20%;vertical-align:middle;margin:-4px 8px -2px 0;filter:grayscale(1);background:var(--surface-3);}
.sx-table .mo .sx-face{width:18px;height:18px;margin:-3px 6px -1px 0;}
.sx-table .thin{color:var(--text-muted);text-decoration:underline dotted;text-underline-offset:3px;cursor:help;}
/* Today's calls: thin-record calls sit under a divider, a little quieter; old signals get a dotted date. */
.sx-table tr.sx-split{cursor:default;}
.sx-table tr.sx-split:hover{background:none;}
.sx-table tr.sx-split td:first-child{width:auto;max-width:none;white-space:normal;padding:22px 16px 10px;font-size:12px;color:var(--text-muted);}
.sx-table tr.dim td{opacity:0.72;}
.sx-table .old{text-decoration:underline dotted;text-underline-offset:3px;cursor:help;}
.sx-table .empty{text-align:center;color:var(--text-muted);padding:var(--space-6);white-space:normal;}
.sx-table svg{display:block;}
.sx-table .flash-up{color:var(--success);} .sx-table .flash-down{color:var(--danger);}
.up{color:var(--success);} .down{color:var(--danger);} .muted{color:var(--text-muted);}
.sx-more{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-2);font-size:13px;color:var(--text-muted);}
.sx-note{margin-top:var(--space-3);font-size:12px;color:var(--text-muted);line-height:1.6;max-width:900px;}
/* Columns give way to the room the table really has, which the docked watchlist (336px on wide
   screens) makes narrower than the viewport: first the Avg and Today columns go, then the rest of .hm
   (their key facts move to .mo lines), then ticker and name stack. */
.sx-table-wrap{container-type:inline-size;}
@container (max-width:1180px){
  .sx-table th,.sx-table td{padding-left:12px;padding-right:12px;}
  .sx-table .hl{display:none;}
}
@container (max-width:840px){
  .sx-table .hm{display:none;}
  .sx-table .mo{display:block;margin-top:6px;}
}
@container (max-width:480px){
  .sx-table .nm .tk,.sx-table .nm .n{display:block;overflow:hidden;text-overflow:ellipsis;}
}
@media (max-width:860px){
  .sx-bar select{flex:1 1 calc(50% - 8px);}
  .sx{padding:var(--space-2) var(--space-2) var(--space-6);}
  .sx-table th,.sx-table td{padding:10px 8px;}
  /* shared.css makes tables swipeable here, so the header sticks inside the table, not under the nav */
  .sx-table th{top:0;}
  .sx-classes{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .sx-classes button{flex:0 0 auto;}
}
/* Stocks and the other markets are one category: a switch above the screener. */
.sx-switch{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;margin-bottom:var(--space-3);border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid var(--hairline-strong);}
.sx-switch a{padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--text-secondary);text-decoration:none;}
.sx-switch a.on{background:rgba(255,255,255,0.12);color:var(--text-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);}
.sx-switch a:hover{color:var(--text-primary);}