/* ── Locked "demo" card ────────────────────────────────────────────────────
   The SoT for how paid content is teased anywhere in the product.

   Owner call 2026-07-23, made on the Intelligence board and extended to the
   wallet Signals tab 2026-08-10: a locked surface shows REAL redacted rows -
   the coin, when it happened, and a way in - with ONE unlock bar underneath.
   It never blurs invented data behind a stack of overlay panels. Three of
   those stacked on one wallet tab was the defect this replaces.

   Every rule is scoped under .sig-locked so it cannot reach an unlocked
   .sig-card, and so the base shell travels to pages that never loaded
   intelligence.css. Markup comes from js/locked-card.js - the only place that
   builds this card. */

/* The shell is written as .sig-card.sig-locked, not .sig-locked. On the
   Intelligence board the same element also carries .sig-card, whose own
   `border: 1px solid` lives in intelligence.css at EQUAL specificity - so
   whichever stylesheet loaded last won, and the dashed placeholder border
   silently went solid. Two classes settle it from either load order. */
.sig-card.sig-locked,
.sig-locked {
  position: relative; display: block; overflow: hidden;
  padding: 13px 14px 11px;
  border: 1px dashed var(--accent-border, #2b2340);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent, #7b5cff) 6%, var(--bg-card, #0b0c14));
  font-family: var(--font);
  color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
a.sig-locked { text-decoration: none; color: inherit; }
/* intelligence.css repaints every .sig-card in light mode (its base surface is
   a hardcoded dark), and that rule is theme-scoped - so it outranks the plain
   shell above and flattened the accent tint back to a bare card. Same tokens,
   one class more specific. */
[data-theme="light"] .sig-card.sig-locked {
  background: color-mix(in srgb, var(--accent, #7b5cff) 6%, var(--bg-card));
  border-color: var(--accent-border);
}
[data-theme="light"] .sig-card.sig-locked:hover {
  background: color-mix(in srgb, var(--accent, #7b5cff) 11%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent, #7b5cff) 60%, transparent);
}
.sig-card.sig-locked:hover,
.sig-locked:hover {
  border-color: color-mix(in srgb, var(--accent, #7b5cff) 60%, transparent);
  background: color-mix(in srgb, var(--accent, #7b5cff) 11%, var(--bg-card, #0b0c14));
  transform: translateY(-1px);
}
.sig-locked .sig-strip {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: color-mix(in srgb, var(--accent, #7b5cff) 55%, transparent);
}
.sig-locked .sig-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 5px; }
.sig-locked .sig-id { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.sig-locked .sig-id-txt { min-width: 0; }
.sig-locked .sig-ava { flex: none; width: 33px; height: 33px; display: grid; place-items: center; }
.sig-locked .sig-ava img { width: 33px; height: 33px; border-radius: 50%; object-fit: cover; }
.sig-locked .sig-ava-fb {
  width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #0a0b12;
}
/* Wraps rather than truncates. A ticker never needs the second line, but a
   counted title ("4 shared clusters") does at 232px, and it was being cut
   mid-word into "3 shared clus". Grid rows stretch, so the taller card does
   not leave a ragged row. */
.sig-locked .sig-sym {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  overflow-wrap: anywhere;
  font-size: 16px; font-weight: 700; line-height: 1.15; color: var(--text-hi, #e9ebf2);
}
.sig-locked .sig-hero { display: flex; align-items: center; gap: 4px; flex: none; }
.sig-locked .sig-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }

.sig-locked .sig-lock-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px; color: var(--accent-2, #a78bff);
}
.sig-locked .sig-lock-tag .material-symbols-outlined,
.sig-locked .sig-lock-tag .mat-ic { font-size: 13px; }
.sig-locked .sig-lock-when { font-size: 11px; color: var(--text-mid, var(--text-lo, #7e8294)); white-space: nowrap; }
.sig-locked .sig-lock-go { font-size: 18px; color: var(--text-mid, var(--text-lo, #7e8294)); }
.sig-locked:hover .sig-lock-go { color: var(--accent-2, #a78bff); }
.sig-locked .sig-lock-copy { margin: 11px 0 9px; display: grid; gap: 3px; }
.sig-locked .sig-lock-copy b { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text-hi, #e9ebf2); }
.sig-locked .sig-lock-copy span { font-size: 11.5px; line-height: 1.45; color: var(--text-mid, var(--text-lo, #9396a4)); }
.sig-locked .sig-lock-cta {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--accent-border, #2b2340); background: var(--accent-dim, rgba(123, 92, 255, .12));
  color: var(--accent-2, #a78bff); font-size: 11px; font-weight: 600;
}
.sig-locked:hover .sig-lock-cta { border-color: color-mix(in srgb, var(--accent, #7b5cff) 60%, transparent); }

/* The single unlock bar per locked surface, below the cards (never over them). */
.intel-unlock-bar { margin-top: 16px; }
/* A locked group inside an existing card body. Auto-fill rather than a fixed
   column count: this group sits inside cards of very different widths (the
   wallet Signals tab is full-bleed on desktop and a single column at 390px),
   and one full-width card per row left a 1400px-wide box holding two words. */
.lock-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.lock-rows .intel-unlock-bar { margin-top: 12px; }
@media (max-width: 560px) { .lock-rows { grid-template-columns: 1fr; } }