/* ============================================================
   Alpha Finance v2: Long/Short Ratio screener
   Loaded after funding.css, whose hero, stats, bar and table it reuses.
   Only the ratio bars, sparklines and the detail chart live here.
   ============================================================ */

/* a bar of the long share against the short share, the figure beside it */
.frates td.lsr-acc { min-width: 126px; }
.lsr-bar {
  display: inline-block;
  vertical-align: middle;
  width: 56px;
  height: 6px;
  margin-right: 9px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--neg) 55%, transparent);
  overflow: hidden;
}
.lsr-bar i { display: block; height: 100%; background: var(--pos); border-radius: 3px 0 0 3px; }
.frates td.lsr-acc b { font-weight: 600; font-variant-numeric: tabular-nums; }
.frates td .up { color: var(--pos-text); }
.frates td .down { color: var(--neg-text); }
.frates td.up { color: var(--pos-text); font-weight: 600; }
.frates td.down { color: var(--neg-text); font-weight: 600; }
.frates td.lsr-none, .lsr-none { color: var(--faint); }
.frates td.px small { display: block; margin-top: 2px; font-size: 10px; }
.frates td.lsr-trend { min-width: 104px; }
body.lsr .frates th, body.lsr .frates td { padding-left: 11px; padding-right: 11px; }
.lsr-spark { display: inline-block; vertical-align: middle; margin-right: 8px; }
.frates td.lsr-trend small { font-size: 10px; }
.frates tbody tr[data-sym] { cursor: pointer; }
.frates tbody tr.is-sel td { background: color-mix(in srgb, var(--lime) 6%, transparent); }
.frates tbody tr.is-sel td.co b { color: var(--lime); }
.fr-cic.is-mono {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--muted);
}

/* the detail panel: one symbol, accounts against top traders */
.lsr-detail { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.lsr-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.lsr-detail-head h2 { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.lsr-detail-head h2 small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lsr-detail-head .note { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--muted); }
.lsr-detail-body { position: relative; height: 260px; }
.lsr-detail-body canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lsr-detail .chart-legend { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.lsr-detail .cl { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.lsr-detail .cl small { font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.lsr-detail .cl-line { width: 18px; height: 3px; border-radius: 2px; background: var(--c); }
.lsr-detail .cl-band { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--c) 28%, transparent); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); }
.lsr-detail-foot { padding: 9px 16px 10px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) { .lsr-detail-body { height: 220px; } }

/* ---------- overview: flow card and the two venue cards ---------- */

.lsr-ov { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.lsr-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.lsr-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
/* the venue and the asset are a phrase, so the column gap is one word space
   (3.8px in Space Grotesk at 15px), not the 8px the dek line below wants */
.lsr-card-head h2 { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; column-gap: 4px; font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.lsr-card-head h2 small { flex-basis: 100%; margin-top: 1px; font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lsr-card-head .pick { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lsr-card-body { flex: 1; padding: 14px 16px; }
.lsr-card-foot { padding: 9px 16px 10px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; line-height: 1.5; color: var(--muted); }

/* the flow card: two figures, one bar, two short lists */
.fl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fl-side { padding: 12px 14px; border-radius: 6px; }
.fl-long { background: color-mix(in srgb, var(--pos) 12%, transparent); }
.fl-short { background: color-mix(in srgb, var(--neg) 12%, transparent); text-align: right; }
.fl-k { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fl-side b { display: block; margin-top: 6px; font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.fl-long b { color: var(--pos-text); }
.fl-short b { color: var(--neg-text); }
.fl-p { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.fl-track { margin-top: 12px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--neg) 55%, transparent); overflow: hidden; }
.fl-track i { display: block; height: 100%; width: 50%; background: var(--pos); transition: width 0.4s; }
.fl-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 14px; }
.fl-lists ul { list-style: none; margin: 6px 0 0; padding: 0; }
.fl-lists li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.fl-lists li b { font-family: var(--display); font-weight: 600; color: var(--text); }
.fl-lists li span { font-family: var(--mono); font-size: 11px; }

/* the venue cards: three rows of group, ratio, lean */
.vc { padding: 4px 16px 6px; }
.vc-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 118px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.vc-row:first-child { border-top: 0; }
.vc-k { font-size: 13px; font-weight: 500; color: var(--text); }
.vc-k small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.03em; color: var(--muted); }
.vc-v { font-family: var(--mono); font-size: 13px; font-weight: 600; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.vc-sum { border-top: 1px solid var(--line-2); }
.vc-sum .vc-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.vc-none { padding: 18px 0; font-size: 13px; color: var(--muted); }

/* the lean label: a word in the colour of its direction, never a chip */
.lean { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; text-align: right; white-space: nowrap; }
.lean.l2 { color: var(--pos-text); font-weight: 600; }
.lean.l1 { color: var(--pos-text); }
.lean.l0 { color: var(--muted); }
.lean.s1 { color: var(--neg-text); }
.lean.s2 { color: var(--neg-text); font-weight: 600; }
.frates td.lsr-lean { text-align: right; }

/* the table's long/short cell: ratio, bar, split */
.frates th.rk, .frates td.rk { width: 28px; padding-right: 0; color: var(--faint); font-size: 10px; }
.frates th.l[data-k] { text-align: left; }
.frates td.lsr-acc { text-align: left; min-width: 190px; }
.ls-cell { display: inline-grid; grid-template-columns: 40px 90px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 3px; align-items: center; vertical-align: middle; }
.ls-cell > b { grid-row: 1 / 3; font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--text); }
.ls-cell .lsr-bar { width: 90px; margin: 0; }
.ls-pct { display: flex; justify-content: space-between; font-size: 10px; }
.ls-pct em { font-style: normal; }

@media (max-width: 1080px) { .lsr-ov { grid-template-columns: minmax(0, 1fr); } }