/* Signal Dark — results screen styles (P4, epic #1525)
 *
 * Lifted VERBATIM from tests/parity/mockups/pwa-redesign.html <style>.
 * Shared atoms live in signal-dark.css. .fbody, .mast, .hdr live in home.css.
 * This file owns the results-specific modules: count header, tabs, listing rows.
 */

/* result count masthead */
.count { padding: 8px 18px 0; }
/* Title row: big count on the left, "Show old listings" slider on the right
   (#1678) — fills the empty header space without crowding the title. */
.count .ctop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* Title takes the remaining width and wraps; min-width:0 lets it shrink so the
   fixed-width toggle on the right is never overlapped by a long title (#1678). */
.count h2 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 900; font-size: 34px; letter-spacing: -.04em; line-height: .96; }
.count h2 em { font-style: normal; color: var(--accT); }
.count .meta { font-size: 11px; color: var(--mut); margin-top: 5px; }
.count .meta b { color: var(--text); font-weight: 700; }

/* "Old Listings" slider toggle — fixed width, never shrinks (flex:0 0 auto). */
.oldsw { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; -webkit-user-select: none; user-select: none; padding-top: 7px; flex: 0 0 auto; }
.oldsw .lbl { font-family: "JetBrains Mono", monospace; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut2); white-space: nowrap; }
.oldsw input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.oldsw .track { position: relative; width: 30px; height: 16px; border-radius: 999px; background: var(--line2); transition: background .18s; flex: 0 0 auto; }
.oldsw .knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--mut); transition: transform .18s, background .18s; }
.oldsw input:checked + .track { background: color-mix(in srgb, var(--accT) 60%, var(--card2)); }
.oldsw input:checked + .track .knob { transform: translateX(14px); background: var(--accT); }
.oldsw input:focus-visible + .track { outline: 2px solid var(--accT); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .oldsw .track, .oldsw .knob { transition: none; } }

/* sort tabs
 * position:sticky keeps the sort bar pinned to the top of the #sd-content
 * scroll host while the rows scroll beneath it. background:var(--bg) matches
 * the frame/content-host surface (the token painted behind .tabs in both
 * themes — signal-dark.css), so rows never show through. z-index sits above
 * rows but below the .sort-more-menu (z-index:30). Sticky keeps the same
 * positioning context relative had, so the .on::after underline and the
 * absolutely-positioned .sort-more-menu still anchor correctly.
 *
 * Even single-line distribution (#1525 QA round 3): the 4 sort tabs + the
 * "More" wrapper are flex:1 equal cells (`.tabs > direct-children`) with
 * centered, white-space:nowrap labels, so the row never wraps ("BEST VALUE"
 * stayed on one line) and the inter-tab spacing is uniform instead of a fixed
 * 20px gap + margin-left:auto leaving a ragged gulf before "More". Font/gap
 * are shrunk so all 5 cells fit one row on the narrowest frame. The child
 * combinator (`.tabs > div`) is deliberate: it must NOT reach the left-aligned
 * `.sort-more-menu div` dropdown items (they keep display:block, text-align
 * left — see their own rule below). */
.tabs { display: flex; gap: 4px; margin: 12px 18px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; background: var(--bg); }
.tabs > div { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; font-weight: 800; font-size: 9px; letter-spacing: .06em; padding: 8px 0 10px; color: var(--mut2); text-transform: uppercase; cursor: pointer; }
.tabs > div.on { color: var(--text); position: relative; }
.tabs > div.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; background: var(--acc); }

/* masthead back button (results is reached from search / filters) */
.mast .mast-l { display: inline-flex; align-items: center; gap: 11px; }
/* back button styled identically to the .hdr .hb on every other screen */
.mast .mast-l .mb { width: 32px; height: 32px; background: var(--card2); outline: 1px solid var(--line2); display: inline-flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; flex-shrink: 0; }
.mast .mast-l .mb:focus-visible { outline: 2px solid var(--accT); outline-offset: 2px; }

/* "More" sort dropdown — extra sorts beyond the 4 visible tabs.
 * `.sort-more` is now one of the flex:1 equal cells (it matches `.tabs > div`),
 * so margin-left:auto is gone — even distribution handles spacing. It keeps
 * position:relative so the absolutely-positioned `.sort-more-menu` (right:0)
 * still anchors under the "More" cell. The button centers within its cell via
 * inherited text-align:center + justify-content:center, and nowrap keeps the
 * active long labels (e.g. "Mileage: low to high") from breaking the row. */
.tabs .sort-more { position: relative; padding: 0; }
/* Switching `.tabs div` -> `.tabs > div` above means the button and the
 * dropdown items (neither a direct child of .tabs) no longer inherit the tab
 * base from that selector — so the base type (weight/size/spacing/colour/
 * uppercase/cursor) is restated here for the button, and below for the items. */
.tabs .sort-more-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 8px 0 10px; white-space: nowrap; font-weight: 800; font-size: 9px; letter-spacing: .06em; color: var(--mut2); text-transform: uppercase; cursor: pointer; }
.tabs .sort-more-btn.on { color: var(--text); }
/* active-More underline parity with .tabs > div.on::after (anchored to the
 * button, not the full cell, so it sits under the chosen label + chevron) */
.tabs .sort-more-btn.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; background: var(--acc); }
.tabs .sort-more-menu { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 170px; background: var(--card); border: 1px solid var(--line2); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.tabs .sort-more-menu[hidden] { display: none; }
.tabs .sort-more-menu div { display: block; text-align: left; white-space: normal; padding: 10px 13px; font-weight: 800; font-size: 9.5px; letter-spacing: .05em; text-transform: none; color: var(--mut); cursor: pointer; }
.tabs .sort-more-menu div.on, .tabs .sort-more-menu div:hover { background: var(--card2); color: var(--accT); }
.tabs .sort-more-menu div.on::after { display: none; }

/* listing rows
 * Plain flow content (no flex:1 / overflow:hidden) so the list grows to its
 * full height and the #sd-content scroll host absorbs the overflow — same as
 * the detail screen. A flex:1 + overflow:hidden wrapper here capped .rows to
 * the viewport and clipped everything below the fold, so the scroll host never
 * saw overflow and the list "couldn't scroll past the first screenful" (#1525 QA). */
.rows { padding-top: 2px; }
.row { display: flex; gap: 13px; padding: 13px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
/* Photo box: a sized container that reserves layout (no CLS) and shows a
 * neutral fill while the lazy <img> loads or if it errors out. The <img>
 * (loading=lazy decoding=async) fills it with object-fit:cover — equivalent
 * framing to the old background-size:cover but with native lazy-loading. */
.row .ph { position: relative; width: 112px; height: 88px; flex-shrink: 0; border-radius: 3px; overflow: hidden; background: var(--card2); background-size: cover; background-position: center; }
.row .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* SOLD / removed listings (include_delisted=1) — muted, distinct from active */
.sold-badge { position: absolute; top: 4px; left: 4px; z-index: 2; padding: 2px 6px; background: rgba(10,11,13,.78); border: 1px solid rgba(239,68,68,.45); border-radius: 4px; font-family: "JetBrains Mono", monospace; font-size: 8px; font-weight: 800; letter-spacing: .12em; color: #f87171; text-transform: uppercase; pointer-events: none; }
.row.sold .ph img { filter: grayscale(1); opacity: .55; }
.row.sold h3, .row.sold .price { color: var(--mut); }
.row.sold .est { color: var(--mut2); }
.row .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row h3 { font-weight: 800; font-size: 15px; letter-spacing: -.01em; line-height: 1.05; }
.row .specs { font-size: 10px; color: var(--mut); margin-top: 4px; }

/* signal row: deal score chip + verdict label */
.sig { display: flex; align-items: center; gap: 7px; margin-top: auto; }
.ix { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 11.5px; padding: 2px 7px; color: var(--acc-ink); }
.ix.g { background: var(--goodFill); }
.ix.f { background: var(--fair); }
.ix.h { background: var(--high); }
.sig .st { font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.sig .st.g { color: var(--good); }
.sig .st.f { color: var(--fair); }
.sig .st.h { color: var(--high); }

/* price + mini market band */
.row .right { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; }
.row .price { font-weight: 900; font-size: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.row .est { font-size: 9px; color: var(--mut2); margin-top: 2px; }

/* mini market band bar (position bar): green→amber→red gradient mirroring the
 * detail screen's .band. The marker (.m) shows where THIS car sits — left =
 * cheap/good value, right = expensive/over market. An overpriced listing lands
 * the marker over the red segments. Colours follow the verdict palette so the
 * bar agrees with the deal-score chip instead of always reading green. */
.mb { display: flex; gap: 1.5px; margin-top: auto; width: 78px; margin-left: auto; position: relative; }
.mb i { height: 4px; flex: 1; }
.mb i:nth-child(1) { background: var(--good); }
.mb i:nth-child(2) { background: color-mix(in srgb, var(--good) 60%, var(--fair)); }
.mb i:nth-child(3) { background: var(--fair); }
.mb i:nth-child(4) { background: color-mix(in srgb, var(--fair) 50%, var(--high)); }
.mb i:nth-child(5) { background: color-mix(in srgb, var(--high) 75%, var(--fair)); }
.mb i:nth-child(6) { background: var(--high); }
.mb .m { position: absolute; top: -3px; width: 2.5px; height: 10px; background: var(--text); }

/* empty / loading states */
.rows-empty { padding: 32px 18px; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--mut2); letter-spacing: .1em; text-transform: uppercase; }
.rows-loading { padding: 32px 18px; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--mut2); letter-spacing: .1em; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }