/*
 * signals.css — extracted from inline <style> in signals.html on 2026-05-31
 * Tier 2 / P2 of docs/plans/HIGH_PERFORMANCE_CLEANUP_PROGRAM.md.
 *
 * Maintain this file directly; it is no longer regenerated from HTML.
 */

/* === inline block 1/1 from signals.html === */
/* ── Reset/base scoped to v2 prototype ─────────────────────────── */
  .signals-v2 {
    --sv2-side-width: 240px;
    --sv2-detail-width: minmax(360px, 1.2fr);
    font-family: var(--ll-font-family, "DM Sans"), system-ui, sans-serif;
    color: var(--ll-text);
    max-width: 1480px;
    margin: 0 auto;
    /* Top padding clears the sticky LL site nav (~6rem tall). The original
       1rem put the hero under the nav, so the user could only see a sliver
       of it. Matches the .page class convention in styles-dataviz.css. */
    padding: 6rem 1.25rem 3rem;
  }
  @media (max-width: 720px) {
    .signals-v2 { padding: 5rem 1rem 2rem; }
  }
  .signals-v2 * { box-sizing: border-box; }

  /* ── Scrollbar treatment ───────────────────────────────────────
     Only the two columns that genuinely need to scroll their own
     content (listings, detail pane) get internal scroll. Everything
     else flows with the page. Scrollbars here are subtle native-
     feeling thumbs: 8px wide, no track, gray that darkens slightly
     on hover. No accent-color, no chunky overlay — they should
     read as plumbing, not UI. */
  .signals-v2 .sv2-main,
  .signals-v2 .sv2-detail-col,
  .signals-v2 .sv2-side-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.14) transparent;
  }
  .signals-v2 .sv2-main::-webkit-scrollbar,
  .signals-v2 .sv2-detail-col::-webkit-scrollbar,
  .signals-v2 .sv2-side-list::-webkit-scrollbar { width: 8px; height: 8px; }
  .signals-v2 .sv2-main::-webkit-scrollbar-track,
  .signals-v2 .sv2-detail-col::-webkit-scrollbar-track,
  .signals-v2 .sv2-side-list::-webkit-scrollbar-track { background: transparent; }
  .signals-v2 .sv2-main::-webkit-scrollbar-thumb,
  .signals-v2 .sv2-detail-col::-webkit-scrollbar-thumb,
  .signals-v2 .sv2-side-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    background-clip: content-box;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: background-color 0.15s;
  }
  .signals-v2 .sv2-main::-webkit-scrollbar-thumb:hover,
  .signals-v2 .sv2-detail-col::-webkit-scrollbar-thumb:hover,
  .signals-v2 .sv2-side-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.24);
    background-clip: content-box;
  }
  [data-theme="app"] .signals-v2 .sv2-main,
  [data-theme="app"] .signals-v2 .sv2-detail-col,
  [data-theme="app"] .signals-v2 .sv2-side-list { scrollbar-color: rgba(0,0,0,0.18) transparent; }
  [data-theme="app"] .signals-v2 .sv2-main::-webkit-scrollbar-thumb,
  [data-theme="app"] .signals-v2 .sv2-detail-col::-webkit-scrollbar-thumb,
  [data-theme="app"] .signals-v2 .sv2-side-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    background-clip: content-box;
  }
  [data-theme="app"] .signals-v2 .sv2-main::-webkit-scrollbar-thumb:hover,
  [data-theme="app"] .signals-v2 .sv2-detail-col::-webkit-scrollbar-thumb:hover,
  [data-theme="app"] .signals-v2 .sv2-side-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.32);
    background-clip: content-box;
  }

  /* ── Search bar (top of page) ──────────────────────────────────
     No hero/banner above. The search input IS the page entry point —
     this is a tool, not a landing page. Stats live inside the
     "Active communities" sidebar where they're actionable. */
  .sv2-search {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1rem;
  }
  .sv2-search__input-wrap {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--ll-bg-soft);
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-md);
    padding: 0 1.15rem;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .sv2-search__input-wrap:focus-within {
    border-color: var(--ll-accent);
    box-shadow: 0 0 0 3px rgba(var(--ll-accent-rgb), 0.18);
  }
  .sv2-search__input-wrap:focus-within .sv2-search__icon { color: var(--ll-accent); opacity: 1; }
  [data-theme="app"] .sv2-search__input-wrap { background: #fff; border-color: rgba(0,0,0,0.1); }
  .sv2-search__icon { color: var(--ll-text-muted); opacity: 0.7; flex-shrink: 0; }
  .sv2-search__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 1.1rem;
    color: var(--ll-text);
    padding: 1.1rem 0.1rem;
    font-family: inherit;
    min-width: 0;
    letter-spacing: -0.005em;
  }
  .sv2-search__input::placeholder { color: var(--ll-text-muted); opacity: 0.55; }
  /* type="search" draws a native cancel ✕ next to the custom #sv2-clear —
     two X's (native grey + accent blue). Suppress the native one. */
  .sv2-search__input::-webkit-search-cancel-button,
  .sv2-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }
  .sv2-search__clear {
    background: none; border: none; color: var(--ll-text-muted);
    cursor: pointer; font-size: 1rem; padding: 0.25rem; line-height: 1;
    opacity: 0.6; transition: opacity 0.1s;
  }
  .sv2-search__clear:hover { opacity: 1; }
  .sv2-search__status {
    font-size: 0.74rem;
    color: var(--ll-text-muted);
    white-space: nowrap;
    padding-left: 0.3rem;
  }

  /* Quick-filter chip row */
  .sv2-filters {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
  }
  .sv2-chip {
    background: var(--ll-bg-soft);
    border: 1px solid var(--ll-border-subtle);
    color: var(--ll-text);
    font: inherit;
    font-family: inherit;
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--ll-radius-pill);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
  }
  .sv2-chip:hover {
    border-color: rgba(var(--ll-accent-rgb), 0.45);
    color: var(--ll-accent);
  }
  .sv2-chip.is-active {
    background: rgba(var(--ll-accent-rgb), 0.12);
    border-color: var(--ll-accent);
    color: var(--ll-accent);
    font-weight: 600;
  }
  .sv2-filters__divider {
    width: 1px;
    align-self: stretch;
    background: var(--ll-border-subtle);
    margin: 0.1rem 0.25rem;
  }
  .sv2-filter-input,
  .sv2-filter-select {
    font: inherit;
    font-family: inherit;
    font-size: 0.82rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-sm);
    background: var(--ll-bg-soft);
    color: var(--ll-text);
    cursor: pointer;
  }
  .sv2-filter-input { cursor: text; width: 10rem; }
  .sv2-filter-input::placeholder { color: var(--ll-text-muted); opacity: 0.55; }
  .sv2-filter-input:focus, .sv2-filter-select:focus {
    outline: none;
    border-color: var(--ll-accent);
    box-shadow: 0 0 0 2px rgba(var(--ll-accent-rgb), 0.18);
  }
  [data-theme="app"] .sv2-chip { background: #fff; }
  [data-theme="app"] .sv2-filter-input,
  [data-theme="app"] .sv2-filter-select { background: #fff; border-color: rgba(0,0,0,0.1); }

  /* ── Three-column workspace (daisy-chain: communities → listings → profile) ──
     PAGE-SCROLL ARCHITECTURE: the workspace does NOT bound its own
     height. The page scrolls naturally. The sidebar grows as tall
     as its content (no scroll on individual blocks). The two
     workspace columns (.sv2-main, .sv2-detail-col) are position:
     sticky to the viewport — they stay visible as you scroll past
     a long sidebar to reach Recently Viewed or Report. This is the
     Linear/GitHub/Reddit pattern: one page scrollbar, plus internal
     scrolls only on the columns that truly need them. */
  .sv2-workspace {
    display: grid;
    grid-template-columns: 260px minmax(320px, 1.3fr) minmax(360px, 1.4fr);
    gap: 0.85rem;
    align-items: start;
  }
  @media (max-width: 1100px) {
    .sv2-workspace {
      grid-template-columns: 240px minmax(0, 1fr);
    }
    .sv2-detail-col {
      grid-column: 1 / -1;
      margin-top: 0.85rem;
    }
  }
  @media (max-width: 760px) {
    .sv2-workspace {
      grid-template-columns: 1fr;
    }
    .sv2-sidebar { order: 2; }
    .sv2-main { order: 1; }
    .sv2-detail-col { order: 3; margin-top: 0.85rem; }
  }

  /* ── Left column (communities + recently viewed + report) ───────
     Sidebar flows with the page. No internal scroll — every block
     shows at natural height. Communities can list 50+ subreddits
     and the page just gets taller. The sticky middle/right columns
     keep your listing + profile in view while you scroll past. */
  .sv2-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .sv2-side-block {
    background: var(--ll-bg-soft);
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-md);
    overflow: hidden;
  }
  /* Briefly draw the eye to the Report-a-default box when a signal's Report
     button jumps the lender here. Subtle accent ring + title tint, then JS
     removes the class so it reverts. Mirrors the search input's focus ring. */
  @keyframes sv2-attention-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ll-accent-rgb), 0); }
    35%      { box-shadow: 0 0 0 4px rgba(var(--ll-accent-rgb), 0.30); }
  }
  .sv2-side-block--attention {
    animation: sv2-attention-ring 0.85s ease-out 2;
    border-color: var(--ll-accent);
  }
  .sv2-side-block--attention .sv2-side-block__title { color: var(--ll-accent); }
  @media (prefers-reduced-motion: reduce) {
    .sv2-side-block--attention { animation: none; }
  }
  .sv2-side-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem 0.5rem;
    border-bottom: 1px solid var(--ll-border-subtle);
  }
  .sv2-side-block__title {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ll-text-muted);
  }
  .sv2-side-block__count {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ll-accent);
    background: rgba(var(--ll-accent-rgb), 0.1);
    border: 1px solid rgba(var(--ll-accent-rgb), 0.22);
    padding: 0.08rem 0.5rem;
    border-radius: var(--ll-radius-pill);
    font-variant-numeric: tabular-nums;
  }

  /* Community list — the master filter */
  .sv2-comms { list-style: none; margin: 0; padding: 0; }
  .sv2-comm-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ll-border-subtle);
    padding: 0.65rem 0.85rem 0.65rem 1rem;
    text-align: left;
    cursor: pointer;
    color: var(--ll-text);
    font: inherit;
    font-family: inherit;
    transition: background 0.1s;
  }
  .sv2-comm-item:last-child { border-bottom: none; }
  .sv2-comm-item:hover { background: rgba(var(--ll-accent-rgb), 0.05); }
  .sv2-comm-item.is-active { background: rgba(var(--ll-accent-rgb), 0.1); }
  .sv2-comm-item.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ll-accent);
  }

  /* Multi-select row wrapper: checkbox + clickable community button.
     Plain click on the button = single-select (replace). Ctrl/Cmd+click
     = toggle. Checkbox always toggles. Active state applies to the
     whole row so the checkbox area highlights too. */
  .sv2-comm-row {
    position: relative;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--ll-border-subtle);
    transition: background 0.1s;
  }
  .sv2-comm-row:last-child { border-bottom: none; }
  .sv2-comm-row:hover { background: rgba(var(--ll-accent-rgb), 0.04); }
  .sv2-comm-row.is-active { background: rgba(var(--ll-accent-rgb), 0.1); }
  .sv2-comm-row.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ll-accent);
    z-index: 1;
  }
  .sv2-comm-row .sv2-comm-item {
    border-bottom: none;
    padding-left: 0.45rem;
    flex: 1;
    min-width: 0;
  }
  .sv2-comm-row .sv2-comm-item:hover { background: transparent; }
  .sv2-comm-row .sv2-comm-item.is-active { background: transparent; }
  .sv2-comm-row .sv2-comm-item.is-active::before { display: none; }

  .sv2-comm-check {
    display: flex;
    align-items: center;
    padding: 0 0.5rem 0 1rem;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
  }
  .sv2-comm-check__input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
  }
  .sv2-comm-check__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--ll-border-subtle);
    border-radius: 3px;
    background: var(--ll-bg);
    color: var(--ll-btn-on-accent, #0d1117);
    transition: border-color 0.12s, background 0.12s;
  }
  [data-theme="app"] .sv2-comm-check__box { background: #fff; }
  .sv2-comm-check__box svg { opacity: 0; transition: opacity 0.1s; }
  .sv2-comm-check__input:checked + .sv2-comm-check__box {
    background: var(--ll-accent);
    border-color: var(--ll-accent);
  }
  .sv2-comm-check__input:checked + .sv2-comm-check__box svg { opacity: 1; }
  .sv2-comm-row:hover .sv2-comm-check__box { border-color: var(--ll-accent); }

  /* Multi-select scope pill (shown next to title when 2+ selected) */
  .sv2-list-scope__multi {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ll-accent);
    background: rgba(var(--ll-accent-rgb), 0.1);
    border: 1px solid rgba(var(--ll-accent-rgb), 0.25);
    padding: 0.1rem 0.5rem;
    border-radius: var(--ll-radius-pill);
    margin-left: 0.4rem;
    font-variant-numeric: tabular-nums;
  }
  .sv2-comm-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
  }
  .sv2-comm-item__name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ll-text);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sv2-comm-item__meta {
    font-size: 0.7rem;
    color: var(--ll-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .sv2-comm-item__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.18rem;
    flex-shrink: 0;
  }
  .sv2-comm-item__count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ll-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .sv2-comm-item__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.66rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 0.05rem 0.35rem;
    border-radius: var(--ll-radius-pill);
    line-height: 1;
  }
  .sv2-comm-item__trend--up   { color: #ef6c6c; background: rgba(239,108,108,0.13); }
  .sv2-comm-item__trend--down { color: #4ade80; background: rgba(74,222,128,0.13); }
  .sv2-comm-item__trend--flat { color: var(--ll-text-muted); background: rgba(255,255,255,0.04); }
  [data-theme="app"] .sv2-comm-item__trend--flat { background: rgba(0,0,0,0.04); }

  /* Sparkline — 30-day signal-count shape, smooth Bezier curve with a
     subtle gradient area fill. The colored stroke is driven by the
     trend class (up=red, down=green, flat=muted). */
  .sv2-comm-item__spark {
    width: 96px;
    height: 26px;
    display: block;
    margin-top: 0.3rem;
    color: var(--ll-text-muted);
  }
  .sv2-comm-item__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .sv2-comm-item__spark--up   { color: #ef6c6c; }
  .sv2-comm-item__spark--down { color: #4ade80; }
  .sv2-comm-item__spark--flat { color: var(--ll-text-muted); opacity: 0.55; }
  .sv2-comm-item--all {
    background: linear-gradient(180deg, rgba(var(--ll-accent-rgb), 0.06), transparent);
  }
  .sv2-comm-item--all .sv2-comm-item__name {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* Compact recently-viewed list (below communities) */
  .sv2-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
  }
  .sv2-side-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ll-border-subtle);
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    color: var(--ll-text);
    font: inherit;
    font-family: inherit;
    transition: background 0.1s;
  }
  .sv2-side-item:last-child { border-bottom: none; }
  .sv2-side-item:hover { background: rgba(var(--ll-accent-rgb), 0.06); }
  .sv2-side-item__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ll-text);
    font-family: ui-monospace, 'Cascadia Code', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
  }
  .sv2-side-empty {
    padding: 1rem 0.85rem;
    text-align: center;
    color: var(--ll-text-muted);
    font-size: 0.78rem;
    font-style: italic;
  }
  [data-theme="app"] .sv2-side-block { background: #fff; }

  /* Quick report at the bottom of the sidebar */
  .sv2-report {
    padding: 0.85rem 0.95rem 1rem;
  }
  .sv2-report__hint {
    font-size: 0.76rem;
    color: var(--ll-text-muted);
    margin: 0 0 0.65rem;
    line-height: 1.5;
  }
  .sv2-report__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--ll-bg);
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-sm);
    padding: 0 0.65rem;
    transition: border-color 0.12s, box-shadow 0.12s;
  }
  [data-theme="app"] .sv2-report__input-wrap { background: #fff; }
  .sv2-report__input-wrap:focus-within {
    border-color: var(--ll-accent);
    box-shadow: 0 0 0 2px rgba(var(--ll-accent-rgb), 0.15);
  }
  .sv2-report__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font: inherit;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--ll-text);
    padding: 0.7rem 0.1rem;
    min-width: 0;
  }
  .sv2-report__input::placeholder { color: var(--ll-text-muted); opacity: 0.55; }
  .sv2-report__paste-icon { color: var(--ll-text-muted); opacity: 0.6; flex-shrink: 0; }
  .sv2-report__preview {
    margin-top: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: rgba(var(--ll-accent-rgb), 0.06);
    border: 1px solid rgba(var(--ll-accent-rgb), 0.25);
    border-radius: var(--ll-radius-sm);
  }
  .sv2-report__preview-label {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ll-accent);
    margin: 0 0 0.4rem;
  }
  .sv2-report__preview-handle {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ll-text);
    font-family: ui-monospace, 'Cascadia Code', monospace;
    margin: 0;
    word-break: break-all;
  }
  .sv2-report__preview-meta {
    font-size: 0.78rem;
    color: var(--ll-text-muted);
    margin: 0.25rem 0 0;
    line-height: 1.45;
  }
  .sv2-report__preview-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.65rem;
  }
  .sv2-report__error {
    font-size: 0.78rem;
    color: #ef6c6c;
    margin: 0.5rem 0 0;
  }

  .sv2-btn {
    font: inherit;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    border-radius: var(--ll-radius-sm);
    border: 1px solid var(--ll-border-subtle);
    background: var(--ll-bg);
    color: var(--ll-text);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
  }
  .sv2-btn:hover { border-color: var(--ll-accent); color: var(--ll-accent); }
  .sv2-btn--primary {
    background: var(--ll-accent);
    border-color: var(--ll-accent);
    color: var(--ll-btn-on-accent, #0d1117);
    font-weight: 600;
  }
  .sv2-btn--primary:hover {
    background: var(--ll-accent);
    color: var(--ll-btn-on-accent, #0d1117);
    filter: brightness(1.1);
  }
  .sv2-btn--ghost { background: transparent; }
  .sv2-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* ── Middle: spotlight (idle) or results (searching) ──────────── */
  /* This column is THE single scroll container for the listings — the
     list-head is sticky inside it (top: 0), so the scope strip stays
     visible no matter how far the user scrolls the borrower list. */
  .sv2-main {
    display: flex;
    flex-direction: column;
    background: var(--ll-bg-soft);
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-md);
    min-width: 0;
    /* Sticky to viewport. As page scrolls past a long sidebar,
       the listings stay in view. Internal scroll only kicks in
       if results exceed viewport height. */
    position: sticky;
    top: 6.5rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
  @media (max-width: 1100px) {
    .sv2-main {
      position: static;
      max-height: none;
      overflow-y: visible;
    }
  }
  [data-theme="app"] .sv2-main { background: #fff; }
  .sv2-main__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.85rem 1rem 0.65rem;
    border-bottom: 1px solid var(--ll-border-subtle);
    gap: 0.6rem;
  }
  .sv2-main__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ll-text);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .sv2-main__sub {
    font-size: 0.76rem;
    color: var(--ll-text-muted);
  }

  /* Middle: listings header (scope + sort chips).
     Sticky to the top of .sv2-main's scroll context so the user always
     sees what scope they're looking at while scrolling 50 rows of
     borrowers. Now works correctly because .sv2-main is the single
     scroll container (see the .sv2-main rule above). */
  .sv2-list-head {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.85rem 1rem 0.7rem;
    border-bottom: 1px solid var(--ll-border-subtle);
    background: var(--ll-bg-soft);
  }
  [data-theme="app"] .sv2-list-head { background: #fff; }
  .sv2-list-scope {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
  }
  .sv2-list-scope__title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ll-text);
    letter-spacing: -0.01em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .sv2-list-scope__community {
    color: var(--ll-accent);
    font-family: ui-monospace, 'Cascadia Code', monospace;
  }
  .sv2-list-scope__meta {
    font-size: 0.76rem;
    color: var(--ll-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .sv2-list-scope__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: var(--ll-radius-pill);
    margin-left: 0.4rem;
    vertical-align: middle;
  }
  .sv2-list-scope__trend--up   { color: #ef6c6c; background: rgba(239,108,108,0.13); }
  .sv2-list-scope__trend--down { color: #4ade80; background: rgba(74,222,128,0.13); }
  .sv2-list-scope__rate {
    color: var(--ll-text-muted);
    font-size: 0.78rem;
    font-weight: 400;
    margin-left: 0.5rem;
    font-variant-numeric: tabular-nums;
  }

  /* Inline "clear filters" — only visible when a community OR query is active */
  .sv2-clear-filters {
    background: transparent;
    border: 1px solid var(--ll-border-subtle);
    color: var(--ll-text-muted);
    font: inherit;
    font-family: inherit;
    font-size: 0.74rem;
    padding: 0.32rem 0.7rem;
    border-radius: var(--ll-radius-pill);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    flex-shrink: 0;
    align-self: center;
  }
  .sv2-clear-filters:hover {
    color: #ef6c6c;
    border-color: rgba(239,108,108,0.45);
    background: rgba(239,108,108,0.06);
  }
  .sv2-clear-filters[hidden] { display: none !important; }

  /* Results list — no internal scroll; .sv2-main is the scroll container,
     so the list-head can sticky-pin to top:0 of that container. */
  .sv2-results {
    flex: 1;
    padding: 0;
  }
  .sv2-result {
    position: relative;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--ll-border-subtle);
    cursor: pointer;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    color: var(--ll-text);
    font: inherit;
    font-family: inherit;
    transition: background 0.1s;
  }
  .sv2-result:hover { background: rgba(var(--ll-accent-rgb), 0.05); }
  .sv2-result.is-active { background: rgba(var(--ll-accent-rgb), 0.1); }
  .sv2-result.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ll-accent);
  }
  /* Severity dot — driven by unpaid capital × recency × repeat count.
     The dot conveys "should I look at this borrower?" at a glance. */
  .sv2-result__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
    transition: box-shadow 0.15s;
  }
  .sv2-result__dot--hot    { background: #ef6c6c; box-shadow: 0 0 0 3px rgba(239,108,108,0.18), 0 0 8px rgba(239,108,108,0.45); }
  .sv2-result__dot--warm   { background: #fb923c; box-shadow: 0 0 0 3px rgba(251,146,60,0.15); }
  .sv2-result__dot--mild   { background: #facc15; box-shadow: 0 0 0 3px rgba(250,204,21,0.12); }
  .sv2-result__dot--cool   { background: #94a3b8; opacity: 0.55; }
  .sv2-result__dot--clean  { background: transparent; border: 2px solid var(--ll-text-muted); opacity: 0.4; box-sizing: border-box; }

  .sv2-result__body { min-width: 0; }
  .sv2-result__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ll-text);
    font-family: ui-monospace, 'Cascadia Code', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
    line-height: 1.25;
  }
  .sv2-result__stats {
    font-size: 0.76rem;
    color: var(--ll-text-muted);
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    line-height: 1.4;
  }
  .sv2-result__stats-tag { font-variant-numeric: tabular-nums; }
  .sv2-result__stats-tag--unpaid { color: var(--ll-text); font-weight: 500; }
  .sv2-result__stats-tag--repeat { color: #ef6c6c; font-weight: 600; }

  /* Right-side amount badge: the dominant element when there's real money */
  .sv2-result__amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex-shrink: 0;
    text-align: right;
  }
  .sv2-result__amount-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ll-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .sv2-result__amount-val--high   { color: #ef6c6c; }
  .sv2-result__amount-val--medium { color: #fb923c; }
  .sv2-result__amount-label {
    font-size: 0.66rem;
    color: var(--ll-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 500;
  }
  .sv2-result__amount--none .sv2-result__amount-val {
    color: var(--ll-text-muted);
    opacity: 0.6;
    font-weight: 500;
  }

  .sv2-main__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ll-text-muted);
    padding: 3rem 1.5rem;
    text-align: center;
    gap: 0.5rem;
  }
  .sv2-main__empty svg { opacity: 0.35; color: var(--ll-accent); }

  /* ── Detail panel (right) ─────────────────────────────────────── */
  .sv2-detail-col {
    background: var(--ll-bg-soft);
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-md);
    display: flex;
    flex-direction: column;
    /* Sticky to viewport — borrower profile stays in view as you
       scroll the page. Internal scroll only when profile content
       exceeds viewport height. */
    position: sticky;
    top: 6.5rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
  @media (max-width: 1100px) {
    .sv2-detail-col {
      position: static;
      max-height: none;
      overflow: hidden;
    }
  }
  [data-theme="app"] .sv2-detail-col { background: #fff; }
  /* Empty state ("network pulse") — actionable instead of decorative.
     Shows the lender's watchlist (if any), trending communities, and
     a brief how-to. Each item is clickable. */
  .sv2-detail__placeholder {
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1.25rem 1.5rem;
    gap: 1.2rem;
  }
  .sv2-detail__pulse-head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ll-border-subtle);
  }
  .sv2-detail__pulse-head svg {
    opacity: 0.5;
    color: var(--ll-accent);
    flex-shrink: 0;
    margin-top: 0.1rem;
  }
  .sv2-detail__pulse-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
  .sv2-detail__placeholder-title {
    font-size: 0.95rem;
    color: var(--ll-text);
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
  }
  .sv2-detail__placeholder-hint {
    font-size: 0.8rem;
    color: var(--ll-text-muted);
    margin: 0;
    line-height: 1.5;
  }
  .sv2-detail__pulse-section { display: flex; flex-direction: column; gap: 0.5rem; }
  .sv2-detail__pulse-title {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ll-text-muted);
    margin: 0;
  }
  .sv2-detail__pulse-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .sv2-detail__pulse-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    background: var(--ll-bg);
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-sm);
    padding: 0.55rem 0.75rem;
    color: var(--ll-text);
    font: inherit;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
  }
  [data-theme="app"] .sv2-detail__pulse-item { background: #fff; }
  .sv2-detail__pulse-item:hover {
    border-color: var(--ll-accent);
    background: rgba(var(--ll-accent-rgb), 0.05);
  }
  .sv2-detail__pulse-handle {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.85rem;
    color: var(--ll-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .sv2-detail__pulse-meta {
    font-size: 0.72rem;
    color: var(--ll-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .sv2-detail__pulse-tips {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sv2-detail__pulse-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: var(--ll-text-muted);
    line-height: 1.5;
  }
  .sv2-detail__pulse-tip-icon {
    flex-shrink: 0;
    color: var(--ll-accent);
    opacity: 0.7;
    margin-top: 0.1rem;
  }

  /* Detail content */
  .sv2-detail-content { padding: 0; }
  .sv2-detail-header {
    padding: 1rem 1.1rem 0.8rem;
    border-bottom: 1px solid var(--ll-border-subtle);
  }
  .sv2-detail-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.8rem;
    flex-wrap: wrap;
  }
  .sv2-detail-actions__spacer {
    flex: 1;
    min-width: 0.5rem;
  }
  .sv2-detail-actions__link {
    margin-left: auto;
    font-size: 0.76rem;
    color: var(--ll-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.4rem;
    border-radius: var(--ll-radius-sm);
    transition: color 0.12s;
  }
  .sv2-detail-actions__link:hover { color: var(--ll-accent); }
  .sv2-detail-actions__btn svg { flex-shrink: 0; opacity: 0.85; }
  .sv2-detail-actions__btn {
    background: transparent;
    border: 1px solid var(--ll-border-subtle);
    color: var(--ll-text);
    font: inherit;
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--ll-radius-sm);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
  }
  .sv2-detail-actions__btn:hover {
    border-color: var(--ll-accent);
    color: var(--ll-accent);
  }
  .sv2-detail-actions__btn--watch {
    /* No background change on hover when active; the filled state itself signals "watching." */
  }
  .sv2-detail-actions__btn--watch.is-watching {
    background: rgba(var(--ll-accent-rgb), 0.12);
    border-color: var(--ll-accent);
    color: var(--ll-accent);
  }
  .sv2-detail-actions__btn--watch.is-watching:hover {
    background: rgba(var(--ll-accent-rgb), 0.18);
  }
  .sv2-detail-actions__pro {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ll-accent-alt, #f59e0b);
    background: rgba(245,158,11,0.12);
    padding: 0.08rem 0.4rem;
    border-radius: var(--ll-radius-pill);
    text-transform: uppercase;
    margin-left: 0.1rem;
  }
  .sv2-detail-username {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ll-text);
    font-family: ui-monospace, 'Cascadia Code', monospace;
    margin: 0;
    letter-spacing: -0.01em;
    word-break: break-all;
  }
  /* KPI summary strip — 4 stat blocks below the username. Dashboard
     readout instead of caption text. Unpaid gets danger color so it
     pops as the most-actionable number. */
  .sv2-detail-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.75rem;
  }
  @media (max-width: 1280px) {
    .sv2-detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .sv2-detail-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.5rem 0.6rem;
    background: var(--ll-bg);
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-sm);
    min-width: 0;
  }
  [data-theme="app"] .sv2-detail-kpi { background: #fff; }
  .sv2-detail-kpi__num {
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    color: var(--ll-text);
    line-height: 1.05;
  }
  .sv2-detail-kpi__label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ll-text-muted);
  }
  .sv2-detail-kpi--danger .sv2-detail-kpi__num { color: #ef6c6c; }
  .sv2-detail-kpi--danger { border-color: rgba(239,108,108,0.25); }

  .sv2-detail-timeline {
    margin: 0.65rem 0 0;
    font-size: 0.73rem;
    color: var(--ll-text-muted);
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.55rem;
  }
  .sv2-detail-timeline strong { color: var(--ll-text); font-weight: 500; }

  /* Detail tabs */
  .sv2-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--ll-border-subtle);
  }
  .sv2-detail-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ll-text-muted);
    font: inherit;
    font-family: inherit;
    font-size: 0.82rem;
    padding: 0.55rem 0.55rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
    margin-bottom: -1px;
  }
  .sv2-detail-tab:hover {
    color: var(--ll-text);
    background: rgba(var(--ll-accent-rgb), 0.04);
    border-bottom-color: rgba(var(--ll-accent-rgb), 0.35);
  }
  .sv2-detail-tab.is-active {
    color: var(--ll-text);
    background: rgba(var(--ll-accent-rgb), 0.07);
    border-bottom-color: var(--ll-accent);
    font-weight: 600;
  }
  .sv2-detail-pane { padding: 0.95rem 1.1rem 1.3rem; }
  .sv2-detail-section { margin-top: 0; }
  .sv2-detail-section + .sv2-detail-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ll-border-subtle); }
  .sv2-detail-section__title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ll-text-muted);
    margin: 0 0 0.55rem;
  }
  .sv2-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
  }
  .sv2-detail-table th, .sv2-detail-table td {
    padding: 0.45rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--ll-border-subtle);
  }
  .sv2-detail-table th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ll-text-muted);
    font-weight: 600;
  }
  .sv2-detail-table tr:last-child td { border-bottom: none; }
  /* Amount is red ONLY for unpaid rows; repaid/open/partial read neutral. */
  .sv2-detail-table td.amount { color: var(--ll-text); font-weight: 600; font-variant-numeric: tabular-nums; }
  .sv2-detail-table td.amount--unpaid { color: #ef6c6c; }
  .sv2-detail-link { color: var(--ll-accent); text-decoration: none; }
  .sv2-detail-link:hover { text-decoration: underline; }

  .sv2-pill-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .sv2-pill {
    font-size: 0.76rem;
    padding: 0.22rem 0.6rem;
    border-radius: var(--ll-radius-pill);
    background: var(--ll-bg);
    border: 1px solid var(--ll-border-subtle);
    color: var(--ll-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .sv2-pill strong { color: var(--ll-text); font-weight: 600; margin-left: 0.25rem; }

  /* ── Signed-out teaser ────────────────────────────────────────────
     Signed-out visitors see a faithful preview of the workspace: a
     real KPI strip from /signal/teaser, the real top-community list,
     5-6 sample borrower rows with masked usernames, a value-prop
     card in the detail pane, and a sticky CTA chip. Search + report
     inputs are visually disabled with an "unlock with a free account"
     affordance. See docs/plans/SIGNALS_SIGNED_OUT_TEASER_PLAN.md. */

  /* Hero conversion block — replaces the prior tiny chip + flat KPI
     strip. Combines a confident headline, live network proof, and a
     dimensional multi-line CTA. Only rendered for signed-out users. */
  .sv2-teaser-hero { display: none; }
  body[data-sv2-auth="no"] .sv2-teaser-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-column-gap: 2.2rem;
    grid-row-gap: 1rem;
    align-items: center;
    padding: 1.6rem 1.7rem;
    margin: 0 0 1.1rem;
    background:
      radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--ll-accent) 18%, transparent) 0%, transparent 55%),
      linear-gradient(135deg, color-mix(in srgb, var(--ll-accent) 10%, var(--ll-bg-soft)) 0%, var(--ll-bg-soft) 70%);
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-md);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ll-accent) 6%, transparent) inset;
  }
  .sv2-teaser-hero__copy { min-width: 0; }
  .sv2-teaser-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ll-accent);
    font-weight: 600;
    margin: 0 0 0.55rem;
  }
  .sv2-teaser-hero__kicker::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ll-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--ll-accent) 55%, transparent);
    animation: sv2TeaserPulse 2.4s ease-in-out infinite;
  }
  @keyframes sv2TeaserPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
  }
  .sv2-teaser-hero__title {
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--ll-text);
    margin: 0 0 0.65rem;
  }
  .sv2-teaser-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem;
    font-size: 0.83rem;
    color: var(--ll-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .sv2-teaser-hero__stats strong {
    color: var(--ll-text);
    font-weight: 600;
    margin-right: 0.2rem;
    font-variant-numeric: tabular-nums;
  }
  .sv2-teaser-hero__updated {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    font-size: 0.72rem;
    color: var(--ll-text-muted);
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0.55rem 0.15rem 0.5rem;
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-pill);
    background: color-mix(in srgb, var(--ll-accent) 6%, transparent);
  }
  .sv2-teaser-hero__updated::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ll-accent);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ll-accent) 60%, transparent);
    animation: sv2-teaser-pulse 2.6s ease-in-out infinite;
  }
  @keyframes sv2-teaser-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ll-accent) 0%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ll-accent) 18%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sv2-teaser-hero__updated::before { animation: none; }
  }
  .sv2-teaser-hero__actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: stretch;
    min-width: 14.5rem;
  }

  /* Multi-line hero CTA with arrow + hover shimmer sweep.
     Color uses --ll-btn-on-accent so it adapts per theme — dark navy bg in
     light theme needs white text; bright cyan bg in dark theme needs near-
     black text. The hardcoded #07232a previously broke contrast on light. */
  .sv2-teaser-btn-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    padding: 1rem 1.6rem;
    background: linear-gradient(135deg, var(--ll-accent) 0%, color-mix(in srgb, var(--ll-accent) 78%, #6366f1) 100%);
    color: var(--ll-btn-on-accent);
    border: none;
    border-radius: var(--ll-radius-md);
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.005em;
    box-shadow:
      0 10px 24px color-mix(in srgb, var(--ll-accent) 38%, transparent),
      0 1px 0 color-mix(in srgb, #ffffff 38%, transparent) inset,
      0 0 0 1px color-mix(in srgb, var(--ll-accent) 60%, transparent);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.22s ease;
  }
  .sv2-teaser-btn-hero:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--ll-accent) 55%, transparent),
      0 10px 24px color-mix(in srgb, var(--ll-accent) 38%, transparent),
      0 1px 0 color-mix(in srgb, #ffffff 38%, transparent) inset;
  }
  .sv2-teaser-btn-hero__main {
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .sv2-teaser-btn-hero__arrow {
    display: inline-block;
    transition: transform 0.22s ease;
    font-weight: 600;
    font-size: 1.1em;
  }
  .sv2-teaser-btn-hero__sub {
    font-size: 0.76rem;
    font-weight: 500;
    opacity: 0.92;
    letter-spacing: 0.012em;
  }
  .sv2-teaser-btn-hero::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -85%;
    width: 60%;
    background: linear-gradient(110deg, transparent 0%, color-mix(in srgb, #ffffff 50%, transparent) 50%, transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 0.6s ease;
  }
  .sv2-teaser-btn-hero:hover {
    transform: translateY(-1px);
    box-shadow:
      0 12px 26px color-mix(in srgb, var(--ll-accent) 42%, transparent),
      0 1px 0 color-mix(in srgb, #ffffff 45%, transparent) inset;
  }
  .sv2-teaser-btn-hero:hover .sv2-teaser-btn-hero__arrow { transform: translateX(3px); }
  .sv2-teaser-btn-hero:hover::before { left: 130%; }
  .sv2-teaser-btn-hero:active { transform: translateY(0); }

  /* Secondary "Sign in" link on the hero. */
  .sv2-teaser-btn-secondary {
    display: block;
    text-align: center;
    padding: 0.45rem;
    color: var(--ll-text-muted);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.12s;
  }
  .sv2-teaser-btn-secondary:hover { color: var(--ll-accent); text-decoration: underline; }

  @media (max-width: 760px) {
    body[data-sv2-auth="no"] .sv2-teaser-hero {
      grid-template-columns: minmax(0, 1fr);
      padding: 1.3rem 1.2rem;
    }
    .sv2-teaser-hero__title { font-size: 1.3rem; }
    .sv2-teaser-hero__stats { gap: 0.85rem; }
    .sv2-teaser-hero__actions { min-width: 0; }
  }

  /* Disabled state for search + filters when signed-out. The chrome
     stays but inputs read as locked + clicking them shows the CTA. */
  body[data-sv2-auth="no"] .sv2-search__input,
  body[data-sv2-auth="no"] .sv2-filter-input,
  body[data-sv2-auth="no"] .sv2-filter-select {
    background: var(--ll-bg);
    color: var(--ll-text-muted);
    cursor: not-allowed;
  }
  /* Signed-out: only dim chips that actually need sign-up (none today —
     every chip is a [data-sort] sort which works on the teaser preview).
     The previous blanket rule dimmed the sort chips to 0.75 opacity,
     making them read as disabled even though clicking them works. */
  body[data-sv2-auth="no"] .sv2-chip:not([data-sort]) { cursor: not-allowed; opacity: 0.75; }
  body[data-sv2-auth="no"] .sv2-chip:not([data-sort]):hover { transform: none; }
  /* Hide the "Report a default" sidebar block — signed-out users can't submit. */
  body[data-sv2-auth="no"] .sv2-side-block:nth-of-type(3) { display: none; }

  /* Sample teaser rows — masked username is enough lock affordance.
     A row-end lock emoji used to live here too, but it overlapped the
     $amount + UNPAID badge on the right. Removed — the masked name, the
     search-bar "Create a free account to search" copy, and the pricing
     cards already convey the gated state. */
  .sv2-result.is-sample { position: relative; cursor: pointer; }
  .sv2-result.is-sample .sv2-result__name {
    font-family: var(--ll-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.06em;
    color: var(--ll-text-muted);
  }
  .sv2-result.is-sample:hover { background: var(--ll-bg-soft); }

  /* Value-prop card in the detail pane (signed-out only). */
  .sv2-detail-valueprop { display: none; padding: 1.4rem 1.25rem; }
  body[data-sv2-auth="no"] .sv2-detail-valueprop { display: block; }
  body[data-sv2-auth="no"] .sv2-detail__placeholder,
  body[data-sv2-auth="no"] .sv2-detail-content { display: none !important; }
  .sv2-detail-valueprop__kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ll-accent);
    font-weight: 600;
    margin: 0 0 0.4rem;
  }
  .sv2-detail-valueprop__title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ll-text);
    margin: 0 0 0.85rem;
    letter-spacing: -0.01em;
  }
  .sv2-detail-valueprop__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  .sv2-detail-valueprop__list li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.86rem;
    color: var(--ll-text);
    line-height: 1.45;
  }
  .sv2-detail-valueprop__check {
    color: var(--ll-accent);
    font-weight: 700;
    flex-shrink: 0;
  }
  /* Two-card pricing block inside the value-prop pane. Side-by-side
     Free + Pro cards with "Most popular" highlight on Pro. */
  .sv2-pricing-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
    margin: 0 0 0.85rem;
  }
  .sv2-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.85rem 0.7rem;
    background: var(--ll-bg-soft);
    border: 1px solid var(--ll-border-subtle);
    border-radius: var(--ll-radius-sm);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .sv2-pricing-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ll-accent) 35%, var(--ll-border-subtle));
  }
  .sv2-pricing-card--pro {
    border-color: color-mix(in srgb, var(--ll-accent) 55%, var(--ll-border-subtle));
    background: linear-gradient(160deg, color-mix(in srgb, var(--ll-accent) 8%, var(--ll-bg-soft)) 0%, var(--ll-bg-soft) 70%);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ll-accent) 14%, transparent);
  }
  .sv2-pricing-card__badge {
    position: absolute;
    top: -0.55rem;
    right: 0.5rem;
    padding: 0.15rem 0.55rem;
    background: var(--ll-accent);
    color: var(--ll-btn-on-accent);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--ll-radius-pill);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--ll-accent) 35%, transparent);
  }
  .sv2-pricing-card__name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ll-text);
    letter-spacing: 0.01em;
    margin: 0;
  }
  .sv2-pricing-card__price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ll-text);
    line-height: 1;
    margin: 0.25rem 0 0.55rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .sv2-pricing-card__price-period {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ll-text-muted);
    letter-spacing: 0.01em;
  }
  .sv2-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 0.7rem;
    font-size: 0.74rem;
    color: var(--ll-text-muted);
    line-height: 1.5;
    flex: 1;
  }
  .sv2-pricing-card__features li {
    display: flex;
    gap: 0.3rem;
    align-items: flex-start;
  }
  .sv2-pricing-card__features li::before {
    content: '✓';
    color: var(--ll-accent);
    font-weight: 700;
    flex-shrink: 0;
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .sv2-pricing-card__btn {
    display: block;
    padding: 0.55rem 0.6rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--ll-radius-sm);
    border: 1px solid var(--ll-border);
    background: var(--ll-bg);
    color: var(--ll-text);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
  }
  .sv2-pricing-card__btn:hover {
    background: var(--ll-bg-soft);
    border-color: var(--ll-accent);
    transform: translateY(-1px);
  }
  .sv2-pricing-card__btn--pro {
    background: var(--ll-accent);
    color: var(--ll-btn-on-accent);
    border-color: var(--ll-accent);
  }
  .sv2-pricing-card__btn--pro:hover {
    background: color-mix(in srgb, var(--ll-accent) 88%, #ffffff);
    border-color: color-mix(in srgb, var(--ll-accent) 88%, #ffffff);
    color: var(--ll-btn-on-accent);
  }
  @media (max-width: 1100px) {
    .sv2-pricing-cards { grid-template-columns: minmax(0, 1fr); }
  }

  .sv2-detail-valueprop__signin {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--ll-text-muted);
    text-align: center;
  }
  .sv2-detail-valueprop__signin a { color: var(--ll-accent); }

  /* Inline locked-tooltip for clicked disabled inputs / sample rows. */
  .sv2-teaser-tooltip {
    position: fixed;
    z-index: 200;
    padding: 0.55rem 0.85rem;
    background: var(--ll-text);
    color: var(--ll-bg);
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: var(--ll-radius-sm);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
    max-width: 240px;
  }
  .sv2-teaser-tooltip.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .sv2-teaser-tooltip a { color: var(--ll-accent); text-decoration: underline; }

/* ---- SIG-SPLIT: warnings vs loan-record research (2026-06-11) ---- */

/* Mode segment sits left of the sort chips. */
.sv2-mode {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.15rem;
  border: 1px solid var(--ll-border-subtle);
  border-radius: 999px;
}

.sv2-mode__btn.is-active {
  background: rgba(var(--ll-accent-rgb), 0.16);
  border-color: var(--ll-accent);
}

/* Repaid history reads green - red is reserved for money that never came back. */
.sv2-result__stats-tag--repaid {
  color: #4ade80;
  border-color: color-mix(in srgb, #4ade80 45%, transparent);
}

.sv2-clean-chip {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid color-mix(in srgb, #4ade80 50%, transparent);
  border-radius: 999px;
  color: #4ade80;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Event-type badges: the type itself carries the color semantics. */
.sv2-type {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--ll-border-subtle);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ll-text-muted);
}

.sv2-type--unpaid,
.sv2-type--default,
.sv2-type--collections {
  color: #f87171;
  border-color: color-mix(in srgb, #f87171 50%, transparent);
  background: color-mix(in srgb, #f87171 8%, transparent);
}

.sv2-type--repaid,
.sv2-type--recovered {
  color: #4ade80;
  border-color: color-mix(in srgb, #4ade80 45%, transparent);
  background: color-mix(in srgb, #4ade80 7%, transparent);
}

.sv2-type--partial {
  color: #fbbf24;
  border-color: color-mix(in srgb, #fbbf24 45%, transparent);
}

/* SR-2: lifetime lifecycle line on result rows + the profile header */
.sv2-result__lifecycle {
  margin-top: 0.28rem;
  font-size: 0.72rem;
  color: var(--ll-text-muted);
  letter-spacing: 0.01em;
}

.sv2-detail-lifecycle {
  margin: 0.15rem 0 0.4rem;
  font-size: 0.8rem;
  color: var(--ll-text-muted);
}

/* SR-5: honest context on warning rows — repaid-since softens, never hides */
.sv2-result__context {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--ll-text-muted);
}
.sv2-result__context strong {
  color: #3cb36e;
  font-weight: 600;
}

/* RECORDS-DISTINCT: research mode is blue/neutral, never danger-red.
   loan (open) gets an explicit chip color so it can never inherit an
   ambient red from a warning context. */
.sv2-type--loan,
.sv2-type--open,
.sv2-type--active {
  color: #60a5fa;
  border-color: color-mix(in srgb, #60a5fa 45%, transparent);
  background: color-mix(in srgb, #60a5fa 7%, transparent);
}

.sv2-mode-caption {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  color: var(--ll-text-muted);
}

.sv2-mode__btn.is-active[data-mode="warnings"] {
  border-color: color-mix(in srgb, #fbbf24 55%, transparent);
}

.sv2-records-active .sv2-mode__btn.is-active[data-mode="records"] {
  border-color: color-mix(in srgb, #60a5fa 60%, transparent);
  background: color-mix(in srgb, #60a5fa 10%, transparent);
}

.sv2-result__amount--repaid .sv2-result__amount-val {
  color: #4ade80;
}

/* SR-3 timeline cells + SR-4 exposure */
.sv2-evlife {
  font-size: 0.74rem;
  color: var(--ll-text-muted);
  white-space: nowrap;
}
.sv2-evlife--stale {
  color: #fbbf24;
  font-weight: 600;
}
.sv2-evlife--recovered {
  color: #4ade80;
  font-weight: 600;
}
.sv2-evsrc {
  font-size: 0.74rem;
  color: var(--ll-text-muted);
}

.sv2-detail-exposure {
  margin: 0.1rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fbbf24;
}

.sv2-chip--open-now.is-active {
  border-color: color-mix(in srgb, #60a5fa 60%, transparent);
  background: color-mix(in srgb, #60a5fa 12%, transparent);
}

/* SR-6: stale-small warnings de-emphasized, never removed */
.sv2-result--stale {
  opacity: 0.6;
}
.sv2-result--stale:hover {
  opacity: 1;
}

/* Mode-caption stability: reserved height + crossfade so warnings/records
   toggling never reflows the page; the network strip is its own chip. */
.sv2-mode-caption {
  min-height: 1.1em;
  transition: opacity 0.18s ease;
}
.sv2-mode-caption.is-swapping {
  opacity: 0.25;
}
.sv2-open-strip {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #60a5fa;
  border: 1px solid color-mix(in srgb, #60a5fa 45%, transparent);
  background: color-mix(in srgb, #60a5fa 7%, transparent);
  white-space: nowrap;
}

.sv2-mode-caption-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.3rem 0 0;
  min-height: 1.5em;
}
.sv2-mode-caption-row .sv2-mode-caption {
  margin: 0;
}
.sv2-mode-caption-row .sv2-open-strip {
  margin-left: 0;
}
.sv2-chip--ghost {
  visibility: hidden;
  pointer-events: none;
}

/* The caption row always owns a full line so its width never re-wraps the
   sibling filter chips when the mode text/strip changes. */
.sv2-mode-caption-row {
  flex-basis: 100%;
  width: 100%;
  min-height: 1.7em;
}