/* Screen Builder (the custom-screen tool on /screener, js/custom-screen.js). Loaded after css/screener-workspace.css, whose tokens
   (--ws-*) and control styles it builds on: one canvas, one surface, one typeface. Prefix: sb-. */

.sb{ display:flex; flex-direction:column; gap: clamp(14px, 2vw, 20px); }

/* ---------------- starting points ---------------- */
.sb-presets{ display:flex; flex-wrap:wrap; gap:8px; }
.sb-chip, .sb-opt, .sb-btn{
  appearance:none; cursor:pointer; font-family: var(--ws-ui, inherit); font-weight:600; letter-spacing:-0.005em; color: var(--ws-text-2, rgba(245,245,247,.7));
  border:1px solid var(--ws-line, rgba(255,255,255,.1)); background: var(--ws-surface, rgba(255,255,255,.05));
  transition: background .18s var(--ws-ease, ease), color .18s var(--ws-ease, ease), border-color .18s var(--ws-ease, ease);
}
.sb-chip{ min-height:40px; padding:0 16px; border-radius:999px; font-size:14px; }
.sb-btn{ min-height:42px; padding:0 18px; border-radius:999px; font-size:14px; color: var(--ws-text, #F5F5F7); }
.sb-btn:disabled{ opacity:.4; cursor:not-allowed; }
.sb-chip:hover, .sb-opt:hover, .sb-btn:hover:not(:disabled){ background: var(--ws-surface-2, rgba(255,255,255,.09)); border-color: rgba(255,255,255,0.22); color: var(--ws-text, #F5F5F7); }
.sb-chip[aria-pressed="true"], .sb-opt[aria-pressed="true"]{ background:#F5F5F7; border-color:#F5F5F7; color:#11161A; }
.sb-preset-desc{ margin:-4px 0 0; max-width:74ch; min-height:3.1em; font-size:14px; line-height:1.55; color: var(--ws-text-3, rgba(245,245,247,.48)); text-wrap:pretty; }

/* ---------------- filters ---------------- */
.sb-panel{ border:1px solid var(--ws-line, rgba(255,255,255,.1)); border-radius: var(--ws-radius, 20px); background: var(--ws-surface, rgba(255,255,255,.05)); padding: clamp(14px, 2vw, 20px); }
.sb-filters{ display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.sb-nofilters{ grid-column:1 / -1; margin:0; padding:10px 4px; font-size:14px; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.sb-filter{ display:flex; flex-direction:column; gap:10px; padding:14px 14px 12px; border:1px solid var(--ws-line, rgba(255,255,255,.1)); border-radius:16px; background: rgba(255,255,255,0.03); min-width:0; }
.sb-filter-head{ display:flex; align-items:center; gap:8px; }
.sb-filter-name{ font-size:14.5px; font-weight:700; letter-spacing:-0.01em; color: var(--ws-text, #F5F5F7); cursor:help; }
.sb-unit{ font-size:12px; font-weight:600; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.sb-x{
  appearance:none; margin-left:auto; flex:none; width:36px; height:36px; margin-top:-6px; margin-right:-6px; border:0; border-radius:50%; background:transparent; cursor:pointer;
  font-size:22px; line-height:1; color: var(--ws-text-3, rgba(245,245,247,.48)); transition: background .18s ease, color .18s ease;
}
.sb-x:hover{ background: var(--ws-surface-2, rgba(255,255,255,.09)); color: var(--ws-text, #F5F5F7); }
.sb-range{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sb-range label{ display:flex; flex-direction:column; gap:4px; min-width:0; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.sb-range input{ width:100%; min-width:0; }
.sb-opts{ display:flex; flex-wrap:wrap; gap:6px; }
.sb-opt{ min-height:36px; padding:0 13px; border-radius:999px; font-size:13px; }
.sb-impact{ margin:0; min-height:1.3em; font-size:12.5px; line-height:1.4; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.sb-impact b{ color: var(--ws-text-2, rgba(245,245,247,.7)); font-weight:700; }
.sb-filterbox > summary{ display:none; }
.sb-add{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
.sb-add select{ min-width:min(100%, 260px); }

/* ---------------- result bar ---------------- */
.sb-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 16px; }
.sb-meta{ font-size:17px; letter-spacing:-0.015em; color: var(--ws-text, #F5F5F7); }
.sb-meta strong{ font-size:clamp(26px, 3.4vw, 34px); font-weight:700; letter-spacing:-0.03em; font-variant-numeric: tabular-nums; }
.sb-meta small{ display:block; max-width:64ch; margin-top:4px; font-size:13px; line-height:1.45; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.sb-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.sb-note{ margin:-8px 0 0; min-height:1.3em; font-size:13px; color: var(--ws-accent, #8B7FFF); }
.sb-saved{ display:flex; flex-direction:column; gap:10px; }
.sb-saveform{ display:flex; flex-wrap:wrap; gap:8px; }
.sb-saveform[hidden]{ display:none; }
.sb-saveform input{ flex:1 1 220px; max-width:360px; }
.sb-saved-list{ display:flex; flex-wrap:wrap; gap:8px; }
.sb-saved-item{ display:inline-flex; align-items:center; gap:2px; }
.sb-saved-item .sb-x{ margin:0; }

/* ---------------- column picker ---------------- */
.sb-cols summary{
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 18px; border-radius:999px; cursor:pointer; list-style:none;
  border:1px solid var(--ws-line, rgba(255,255,255,.1)); background: var(--ws-surface, rgba(255,255,255,.05)); font-size:14px; font-weight:600; color: var(--ws-text, #F5F5F7);
}
.sb-cols summary::-webkit-details-marker{ display:none; }
.sb-cols summary::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition: transform .2s ease, margin .2s ease; }
.sb-cols[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
.sb-colcount{ font-size:12px; font-weight:700; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.sb-colpicker{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:14px 20px; margin-top:12px; padding:16px; border:1px solid var(--ws-line, rgba(255,255,255,.1)); border-radius:16px; background: rgba(255,255,255,0.03); }
.sb-colgroup{ border:0; margin:0; padding:0; min-width:0; }
.sb-colgroup legend{ padding:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.sb-col{ display:flex; align-items:center; gap:10px; min-height:34px; font-size:13.5px; color: var(--ws-text-2, rgba(245,245,247,.7)); cursor:pointer; }
.sb-col.is-locked{ cursor:default; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.sb-col.is-locked input{ opacity:.55; cursor:default; }

/* ---------------- the table ---------------- */
.sb-tablewrap[hidden]{ display:none; }
.ws-main .sb-tablewrap{ border-radius: var(--ws-radius, 20px); }
.sb-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:560px; }
.sb-table th, .sb-table td{ padding:0 14px; white-space:nowrap; font-variant-numeric: tabular-nums; }
.sb-table thead th{ height:48px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ws-text-3, rgba(245,245,247,.48)); background:#1d1d30; border-bottom:1px solid var(--ws-line, rgba(255,255,255,.1)); }
.sb-table .sb-num{ text-align:right; }
.sb-idh{ text-align:left; }
.sb-sort{
  appearance:none; display:inline-flex; align-items:center; justify-content:flex-end; gap:4px; min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;
}
.sb-sort:hover, th[aria-sort="ascending"] .sb-sort, th[aria-sort="descending"] .sb-sort{ color: var(--ws-text, #F5F5F7); }
.sb-sort i{ display:inline-block; min-width:1ch; font-style:normal; }
.sb-table tbody tr{ cursor:pointer; }
.sb-table tbody th, .sb-table tbody td{ height:64px; border-bottom:1px solid rgba(255,255,255,0.06); background:#1a1a2b; transition: background .15s ease; }
.sb-table tbody tr:last-child th, .sb-table tbody tr:last-child td{ border-bottom:0; }
.sb-table tbody tr:hover th, .sb-table tbody tr:hover td, .sb-table tbody tr:focus-visible th, .sb-table tbody tr:focus-visible td{ background:#232338; }
.sb-table tbody tr:focus-visible{ outline:2px solid var(--ws-accent, #8B7FFF); outline-offset:-2px; }
.sb-table td{ font-size:14.5px; font-weight:600; color: var(--ws-text, #F5F5F7); }
.sb-table td.sb-na{ font-weight:500; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.sb-table .sb-id, .sb-table .sb-idh{ position:sticky; left:0; z-index:2; text-align:left; box-shadow: 1px 0 0 rgba(255,255,255,0.06); }
.sb-table thead .sb-idh{ background:#1d1d30; padding-left:16px; }
.sb-table tbody .sb-id{ min-width:200px; padding-left:16px; font-weight:400; }
.sb-id{ vertical-align:middle; }
.sb-tkr{ display:flex; align-items:center; gap:4px; font-size:15.5px; font-weight:700; letter-spacing:-0.01em; color: var(--ws-text, #F5F5F7); }
.sb-co{ display:block; max-width:210px; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.sb-more{ align-self:center; }

.sb-footnote{ max-width:72ch; margin:clamp(16px, 2.4vw, 26px) 0 0; font-size:12.5px; line-height:1.65; color: var(--ws-text-3, rgba(245,245,247,.48)); }

@media (max-width: 720px){
  /* the starting points are one scrolling row, not five rows of chips; the filters fold behind a button */
  .sb-presets{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-left:20px; margin:0 -20px; padding:2px 20px 6px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .sb-presets::-webkit-scrollbar{ height:4px; }
  .sb-presets::-webkit-scrollbar-track{ background:transparent; }
  .sb-presets::-webkit-scrollbar-thumb{ background:transparent; }
  .sb-presets .sb-chip{ flex:none; scroll-snap-align:start; }
  .sb-filterbox > summary{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px; cursor:pointer; list-style:none; border:1px solid var(--ws-line, rgba(255,255,255,.1)); background: var(--ws-surface, rgba(255,255,255,.05)); font-size:14px; font-weight:600; color: var(--ws-text, #F5F5F7); }
  .sb-filterbox > summary::-webkit-details-marker{ display:none; }
  .sb-filterbox > summary::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition: transform .2s ease, margin .2s ease; }
  .sb-filterbox[open] > summary::after{ transform:rotate(-135deg); margin-top:4px; }
  .sb-filterbox[open] > summary{ margin-bottom:12px; }
  .sb-filters{ grid-template-columns:minmax(0, 1fr); }
  .sb-chip{ min-height:44px; }
  .sb-opt{ min-height:44px; }
  .sb-btn, .sb-cols summary{ min-height:44px; }
  .sb-actions{ width:100%; }
  .sb-actions .sb-btn{ flex:1 1 auto; }
  .sb-x{ width:44px; height:44px; margin-top:-10px; margin-right:-10px; }
  .sb-colpicker{ grid-template-columns:minmax(0, 1fr); }
  .sb-col{ min-height:44px; }
  .sb-table .sb-id, .sb-table .sb-idh{ box-shadow: 2px 0 8px rgba(0,0,0,0.25); }
  .sb-table tbody .sb-id{ min-width:150px; }
  .sb-co{ max-width:140px; }
  .sb-preset-desc{ min-height:0; }
}
@media (prefers-reduced-motion: reduce){
  .sb-chip, .sb-opt, .sb-btn, .sb-x, .sb-table tbody th, .sb-table tbody td, .sb-cols summary::after{ transition:none; }
}

/* Firefox only: the thin scrollbar properties live here, behind a test that only Firefox fails (see css/style.css) */
@supports not selector(::-webkit-scrollbar){
  .sb-presets{ scrollbar-width: thin; scrollbar-color: var(--ws-line, rgba(255,255,255,.1)) transparent; }
}