/* ----------------------------------------------------------------------
   Compact row — the phone layout for a list of screened stocks.

   Its own file because THREE surfaces need it and no two of them share a
   stylesheet: the paid dashboard (assets/css/dashboard.css), the paywalled
   preview (an inline <style> in dashboard_locked.html) and the public landing
   page (an inline <style> built in handler.py). Copying forty lines of layout
   into three places is how the filter_spec duplicate drifted.

   Those three also name their colour tokens differently — the dashboard says
   --text/--muted/--border-soft where the other two say --body/--mut/--border.
   Rather than force an alias into each palette, every colour here is a nested
   var() fallback that resolves to whichever name the host page defines. That
   is the only reason these declarations look indirect.
   ---------------------------------------------------------------------- */

/* ------------------------------------------------------------------
   Compact row (phone). Emitted by renderers.js instead of a <table> below
   720px — the JS picks, so there is no media query here and no second DOM
   tree built to be hidden. Line one is the triage read (who, what state,
   how it ranks), line two the screen's own numbers, and everything else
   is behind the chevron.
   ------------------------------------------------------------------ */
.cx-list { list-style: none; margin: 0; padding: 0; }
.cx-row { border-bottom: 1px solid var(--border-soft, var(--border, currentColor)); }
.cx-row:last-child { border-bottom: 0; }
.cx-main { padding: 9px 2px; cursor: pointer; }
.cx-main:hover { background: var(--overlay-weak, transparent); }
.cx-l1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cx-l2 {
  color: var(--muted, var(--mut, inherit)); font-size: 12px; margin-top: 3px;
  font-variant-numeric: tabular-nums; padding-left: 2px;
}
/* The number the list is ranked by. Pushed to the right edge so the eye
   runs down one column of values instead of hunting per row. */
.cx-lead {
  margin-left: auto; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cx-lead i {
  font-style: normal; font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted, var(--mut, inherit)); margin-right: 5px;
}
.cx-more {
  flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
  color: var(--muted, var(--mut, inherit)); font-size: 13px; line-height: 1; padding: 4px 2px 4px 4px;
  font-family: inherit;
}
.cx-more[aria-expanded="true"] { transform: rotate(180deg); }
.cx-failed { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; padding-left: 2px; }
.cx-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px;
  padding: 2px 4px 12px; font-size: 12px;
}
.cx-kv { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.cx-kv .k { color: var(--muted, var(--mut, inherit)); white-space: nowrap; }
.cx-kv .v { font-variant-numeric: tabular-nums; text-align: right; min-width: 0; }
/* One column is unreadable as two on the narrowest phones. */
@media (max-width: 400px) { .cx-detail { grid-template-columns: 1fr; } }

/* Paywalled filler rows in the teaser. The table variant of this lives with
   each preview surface's own CSS and targets `tr.locked td`, which cannot
   reach a list item — same treatment, restated for the compact shape. */
.cx-row.locked .cx-main { filter: blur(4.5px); user-select: none; opacity: 0.7; }
.cx-row.locked { pointer-events: none; }