

.sx-ri { position: relative; }
.sx-ri:hover .sx-row { background: var(--sx-wash); }
.sx-ri:hover .sx-th { box-shadow: inset 0 0 0 1.5px var(--sx-ink); }
.sx-ri.is-sel .sx-row { background: rgba(15,20,25,.055); }
.sx-t1 { display: flex; align-items: baseline; gap: 10px; min-width: 0; }

.sx-nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--sx-ink); white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sx-t1 .sx-ar { flex: none; }
.sx-t1 .sx-ar b { font-size: 15px; }
.sx-t2 { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 13px; color: var(--sx-ink2); }
.sx-sub { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: baseline; }
.sx-sub > span { flex: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sx-sub > .sx-subsep { white-space: pre; }

.sx-sub > .pl2, .sx-sub > .ph:not(.sx-subsep) { flex: 0 1 auto; }
.sx-sub > .sx-subr { flex: 0 3 auto; }
.sx-sub .ph { display: none; }

.sx-rfit { flex: none; font-size: 12px; font-weight: 500; color: var(--sx-ink2); font-variant-numeric: tabular-nums; }
.sx-rfit2 { display: none; }

.sx-rfit[data-band="consented"], .sx-rfit[data-band="maybe"], .sx-rfit[data-band="pending"], .sx-rfit[data-band="built"], .sx-rfit[data-band="road"], .sx-rfit[data-band="strip"], .sx-rfit[data-band="shape"] { color: var(--sx-warn); }

.sx-ri .sx-tags { flex-wrap: wrap; height: 24px; overflow: hidden; row-gap: 8px; }
.sx-ri .sx-tag { height: 24px; }
.sx-ri .sx-tag, .sx-ri .sx-tag:first-child { flex: none; max-width: 100%; }
.sx-tmore { display: none; }

.sx-pick { position: absolute; left: 30px; top: 18px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px var(--sx-line2), 0 1px 2px rgba(15,20,25,.08); cursor: pointer; opacity: 0; transition: opacity var(--sx-fast) var(--sx-ease), box-shadow var(--sx-fast) var(--sx-ease); }
.sx-pick input { margin: 0; width: 14px; height: 14px; accent-color: var(--sx-ink); cursor: pointer; }
.sx-ri:hover .sx-pick, .sx-pick:focus-within, .sx-ri.is-sel .sx-pick { opacity: 1; }
.sx-pick:hover { box-shadow: 0 0 0 1px var(--sx-line3), 0 1px 2px rgba(15,20,25,.08); }
@media (hover: none) { .sx-pick { opacity: 1; } }

.sx-sortb { all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; height: 34px; padding: 0 10px 0 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font: 500 13px/1 var(--font, inherit); color: var(--sx-ink); box-shadow: inset 0 0 0 1px var(--sx-line2); transition: box-shadow var(--sx-fast) var(--sx-ease), background-color var(--sx-fast) var(--sx-ease); }
.sx-sortb:hover { box-shadow: inset 0 0 0 1px var(--sx-line3); background: var(--sx-wash); }
.sx-sortb .k { color: var(--sx-ink3); }
.sx-sortb .chev { width: 14px; height: 14px; color: var(--sx-ink3); }
.sx-sortb:active { transform: scale(.97); }

.sx-menu { display: grid; gap: 0; }
.sx-mi { all: unset; box-sizing: border-box; cursor: pointer; height: 36px; padding: 0 10px; margin: 0 -10px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--sx-ink); transition: background-color var(--sx-fast) var(--sx-ease); }
.sx-mi:hover, .sx-mi:focus-visible { background: var(--sx-wash); outline: none; }
.sx-mi[aria-checked="true"] { font-weight: 500; }
.sx-mi .ck { width: 15px; height: 15px; color: var(--sx-ink); }

.sx-mi.sx-mi2 { height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; align-items: flex-start; }
.sx-mi.sx-mi2 > span { display: grid; gap: 3px; }
.sx-mi.sx-mi2 small { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--sx-ink3); white-space: normal; }
.sx-menu .sx-opt:focus-visible { background: var(--sx-wash); outline: none; }
.sx-opt.off { cursor: default; opacity: .5; }
.sx-opt.off:hover { background: none; }
.sx-pnote { margin: -6px 0 0; font-size: 12.5px; color: var(--sx-ink3); line-height: 1.45; }

.sx-applied { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sx-rule { box-sizing: border-box; height: 26px; display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 9px; border-radius: 999px; background: rgba(15,20,25,.05); font-size: 12.5px; font-weight: 500; color: var(--sx-ink); max-width: 100%; }
.sx-rule .tt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-rule button { all: unset; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--sx-ink3); transition: background-color var(--sx-fast) var(--sx-ease), color var(--sx-fast) var(--sx-ease); }
.sx-rule button:hover { background: rgba(15,20,25,.08); color: var(--sx-ink); }
.sx-rule button .i { width: 12px; height: 12px; stroke-width: 2.2; }
button.sx-rule.more { all: unset; cursor: pointer; height: 26px; padding: 0 10px; border-radius: 999px; font: 500 12.5px/26px var(--font, inherit); color: var(--sx-ink2); box-shadow: inset 0 0 0 1px var(--sx-line2); }
button.sx-rule.more:hover { background: var(--sx-wash); color: var(--sx-ink); }

.sx-cnts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.sx-cnt { all: unset; box-sizing: border-box; display: grid; align-content: start; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--sx-line); cursor: pointer; transition: background-color var(--sx-fast) var(--sx-ease), box-shadow var(--sx-fast) var(--sx-ease); }
.sx-cnt b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--sx-ink); font-variant-numeric: tabular-nums; }
.sx-cnt span { font-size: 12.5px; line-height: 1.3; color: var(--sx-ink2); }
.sx-cnt:hover { background: var(--sx-wash); box-shadow: inset 0 0 0 1px var(--sx-line2); }
.sx-cnt:hover span { color: var(--sx-ink); }
.sx-cnt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sx-cnt.is-off { cursor: default; }
.sx-cnt.is-off:hover { background: none; box-shadow: inset 0 0 0 1px var(--sx-line); }
.sx-cnt.is-off:hover span { color: var(--sx-ink2); }

.sx-bulk { position: sticky; bottom: 16px; z-index: 4; margin: 12px auto 16px; width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 2px; padding: 5px 5px 5px 14px; border-radius: 12px; background: var(--sx-ink); color: #fff; box-shadow: 0 8px 28px rgba(15,20,25,.28); animation: sx-pop-in 160ms var(--sx-ease); }
.sx-bulk[hidden] { display: none; }
.sx-bulk .n { font-size: 13px; font-weight: 550; margin-right: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-bb { all: unset; cursor: pointer; height: 32px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--font, inherit); color: rgba(255,255,255,.88); white-space: nowrap; transition: background-color var(--sx-fast) var(--sx-ease), color var(--sx-fast) var(--sx-ease); }
.sx-bb .i { width: 14px; height: 14px; }
.sx-bb:hover { background: rgba(255,255,255,.12); color: #fff; }
.sx-bb[aria-disabled="true"] { opacity: .45; cursor: default; }
.sx-bb[aria-disabled="true"]:hover { background: none; }
.sx-bb.x { padding: 0; width: 32px; justify-content: center; }
.sx-bulk :focus-visible { outline-color: #fff; }

.sx-toast { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 1400; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px; border-radius: 12px; background: var(--sx-ink); color: #fff; font-size: 13.5px; box-shadow: 0 8px 28px rgba(15,20,25,.28); animation: sx-pop-in 160ms var(--sx-ease); max-width: calc(100vw / var(--bs-zoom, 1) - 32px); }
.sx-toast[hidden] { display: none; }
.sx-toast span { padding-right: 8px; }
.sx-toast button { all: unset; cursor: pointer; height: 30px; padding: 0 10px; border-radius: 8px; font-weight: 500; color: #fff; white-space: nowrap; }
.sx-toast button:hover { background: rgba(255,255,255,.12); }

.sx-hr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border-top: 1px solid var(--sx-line); font-size: 13.5px; }
.sx-hr:first-child { border-top: 0; }
.sx-hr .l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sx-retry { all: unset; cursor: pointer; height: 36px; padding: 0 16px; border-radius: 10px; background: var(--sx-ink); color: #fff; font: 500 14px/36px var(--font, inherit); }
.sx-retry:hover { background: #262d33; }
.sx-more:disabled { cursor: default; color: var(--sx-ink3); }

.sx-ct-h { display: grid; gap: 6px; position: relative; }
.sx-ct-tools { display: flex; gap: 2px; margin-left: -8px; }
.sx-ct-tools .sx-q .i { width: 13px; height: 13px; }
.sx-cmenu { position: absolute; top: 100%; left: -6px; z-index: 3; width: 260px; max-height: 280px; overflow-y: auto; background: #fff; border-radius: 12px; padding: 6px 16px; box-shadow: 0 0 0 .5px rgba(15,20,25,.14), 0 12px 32px rgba(15,20,25,.16); font-weight: 400; }
.sx-cmenu[hidden] { display: none; }
.sx-cmenu .sx-mi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-ct td { overflow-wrap: normal; word-break: normal; }
.sx-ct-same { margin: 12px 0 20px; }
.sx-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--sx-ink); cursor: pointer; }
.sx-sw input { margin: 0; width: 16px; height: 16px; accent-color: var(--sx-ink); }
.sx-cmp .sx-mf { gap: 12px; }
.sx-cmp .sx-mf .sx-cmp-note { margin-left: auto; }

@media (max-width: 768px) {
  .sx-pick { left: 20px; top: 16px; }
  .sx-ri .sx-tag:not(:first-child):not(.sx-tmore) { display: none; }
  .sx-tmore { display: inline-flex; }
  .sx-ri .sx-tag:first-child { max-width: calc(100% - 44px); }
  
  .sx-nm { font-size: 14.5px; }
  
  .sx-t1 .sx-rfit { display: none; }
  .sx-t2 .sx-rfit2 { display: inline; }
  
  .sx-nm .pl { display: none; }
  .sx-sub .ph { display: inline; }
  .sx-cnt { padding: 8px; }
  .sx-bulk { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .sx-bb { padding: 0 8px; }
  .sx-bb .i { display: none; }
  .sx-bb.x .i { display: block; }
  
  .sx-cmp .sx-mb { padding: 0 16px; }
  .sx-ct thead th:first-child { width: 92px; }
  .sx-ct-site .sx-th { width: 100%; height: 72px; }
  .sx-cmp { grid-template-rows: 60px auto minmax(0, 1fr) auto; }
  .sx-cmp .sx-mf { flex-wrap: wrap; height: auto; padding: 12px 16px; }
  .sx-cmp .sx-cmp-note { display: none; }
  .sx-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

.sx-how { all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--sx-ink3); transition: background-color var(--sx-fast) var(--sx-ease), color var(--sx-fast) var(--sx-ease); }
.sx-how:hover { background: var(--sx-wash); color: var(--sx-ink); }
.sx-hidl { all: unset; cursor: pointer; display: block; margin: 4px auto 24px; padding: 6px 10px; border-radius: 8px; font: 500 13px/1 var(--font, inherit); color: var(--sx-ink2); text-decoration: underline; text-decoration-color: rgba(15,20,25,.22); text-underline-offset: 3px; }
.sx-hidl:hover { background: var(--sx-wash); color: var(--sx-ink); }

.sx-rsave { all: unset; cursor: pointer; position: absolute; left: 108px; top: 18px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--sx-ink); background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px var(--sx-line2), 0 1px 2px rgba(15,20,25,.08); opacity: 0; transition: opacity var(--sx-fast) var(--sx-ease), background-color var(--sx-fast) var(--sx-ease); }
.sx-rsave .i { width: 15px; height: 15px; }
.sx-ri:hover .sx-rsave, .sx-rsave:focus-visible, .sx-rsave.on { opacity: 1; }
.sx-rsave.on .i { fill: var(--sx-ink); }
.sx-rsave:hover { background: #fff; }
.sx-rsave:active { transform: scale(.94); }
@media (hover: none) { .sx-rsave { opacity: 1; } }

.sx-pgn { display: inline-flex; align-items: center; gap: 6px; }
.sx-pgi { all: unset; box-sizing: content-box; min-width: calc(2ch * var(--bs-ch, 1)); padding: 0 6px; height: 26px; border-radius: 6px; text-align: center; color: var(--sx-ink); font: 500 13px/26px var(--font, inherit); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--sx-line2); transition: box-shadow var(--sx-fast) var(--sx-ease); }
.sx-pgi:hover { box-shadow: inset 0 0 0 1px var(--sx-line3); }
.sx-pgi:focus { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 3px rgba(13,148,136,.14); }

.sx-follow { margin-left: auto; font-size: 12.5px; color: var(--sx-ink2); white-space: nowrap; }
.sx-follow input { width: 14px; height: 14px; }

.sx-funnel .fr { grid-template-columns: minmax(0, 1fr) 90px 64px 22px; }
.sx-funnel .fx { all: unset; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--sx-ink3); }
.sx-funnel span.fx { cursor: default; }
.sx-funnel button.fx:hover { background: var(--sx-wash); color: var(--sx-ink); }
.sx-funnel .fx .i { width: 12px; height: 12px; stroke-width: 2.2; }
.sx-rh h1 { border-radius: 6px; margin-left: -4px; padding: 0 4px; }

@media (max-width: 768px) {
  .sx-rsave { left: 84px; top: 16px; }
  .sx-follow { display: none; }
}

.sx-r3w { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 2px; margin-top: 3px; min-width: 0; }
.sx-r3i { display: inline-grid; white-space: nowrap; }
.sx-r3i > span { font-size: 11.5px; line-height: 14px; color: var(--sx-ink2); }
.sx-r3i b { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--sx-ink); }
.sx-r3i[data-b="weak"] b { color: var(--sx-warn); }
.sx-r3o { flex: 1 0 100%; font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--sx-warn); }
