/* ===================================================================
   Living Verdict Card (vcard-) 2026-06-09. One reusable card unit,
   three surfaces: the homepage proof slot (yb.css tokens), the
   /research/:ticker verdict hero (yb-editorial.css tokens), and the
   /verdicts row expand (yb.css tokens). Every value resolves through a
   token fallback chain so the SAME component renders correctly on both
   design systems and flips with each page's light and dark themes.
   Continuity tokens consumed first, their locked literal values as the
   last fallback: 14px card radius, 1px white 6 percent border, hover
   lift, gold focus ring. Single gold accent, no gradients, no glass,
   no dash glyphs anywhere in this file.
   =================================================================== */

.vcard {
  position: relative;
  background: var(--bg-elev, var(--surface-raised, #131c31));
  border: var(--border-card, 1px solid var(--line, rgba(255, 255, 255, 0.06)));
  border-radius: var(--radius-card, 14px);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--transition-card, 180ms cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--transition-card, 180ms cubic-bezier(0.2, 0, 0, 1)),
              background var(--transition-card, 180ms cubic-bezier(0.2, 0, 0, 1));
}
.vcard:hover {
  transform: var(--hover-lift, translateY(-2px));
  border-color: var(--gold-line, var(--brass-line, rgba(212, 168, 67, 0.35)));
  background: var(--bg-hover, var(--surface-hover, #18233a));
}

/* head row: quiet eyebrow left, freshness pulse right */
.vcard-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.vcard-eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.vcard-fresh {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.05em; color: var(--ink-mute);
  white-space: nowrap;
}
.vcard-fresh-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint); display: inline-block; flex: none;
}
/* the dot only earns gold + pulse when the score is under 30 minutes old */
.vcard-fresh.is-fresh { color: var(--gold, var(--brass-bright, #d4a843)); }
.vcard-fresh.is-fresh .vcard-fresh-dot {
  background: var(--gold, var(--brass-bright, #d4a843));
  animation: vcardPulse 1.8s var(--ease) infinite;
}
@keyframes vcardPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .vcard-fresh.is-fresh .vcard-fresh-dot { animation: none; }
}

/* body: gauge left, facts right. Collapses to a single column narrow. */
.vcard-body {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px 16px; align-items: center;
}
.vcard-gauge { position: relative; width: 124px; flex: none; }
.vcard-compact .vcard-gauge { width: 104px; }
.vcard-gauge-svg { display: block; width: 100%; height: auto; }
.vcard-arc { fill: none; stroke-width: 9; stroke-linecap: round; }
.vcard-arc-track { stroke: var(--line-strong, #2a2e36); }
.vcard-arc-value {
  stroke: var(--gold, var(--brass-bright, #d4a843));
  transition: stroke-dashoffset 600ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
@media (prefers-reduced-motion: reduce) {
  .vcard-arc-value { transition: none; }
}
/* the big number sits inside the arc, mono with tabular figures */
.vcard-readout {
  position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-22%);
  text-align: center; line-height: 1;
  white-space: nowrap;
}
.vcard-num {
  font-family: var(--mono); font-weight: 600;
  font-size: 30px; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.vcard-compact .vcard-num { font-size: 25px; }
.vcard-num.is-pending { font-size: 14px; color: var(--ink-mute); font-weight: 500; }
.vcard-den {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-mute); margin-left: 2px;
}
.vcard-gauge-sub {
  margin-top: 2px; text-align: center;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* facts column */
.vcard-facts { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vcard-tk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vcard-tk {
  font-family: var(--mono); font-size: 19px; font-weight: 600;
  letter-spacing: 0.05em; color: var(--ink); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
a.vcard-tk:hover { color: var(--gold, var(--brass-bright, #d4a843)); }
.vcard-band {
  display: inline-block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong, #2a2e36); color: var(--ink-mute);
  white-space: nowrap;
}
.vcard-band-bull         { color: var(--gain); border-color: var(--gain); }
.vcard-band-constructive { color: var(--gain); border-color: var(--gain); opacity: 0.72; }
.vcard-band-bear         { color: var(--loss); border-color: var(--loss); }
.vcard-band-cautious     { color: var(--loss); border-color: var(--loss); opacity: 0.72; }
.vcard-band-neutral      { color: var(--ink-mute); }
.vcard-band-nodata       { color: var(--ink-mute); opacity: 0.6; }

/* the committee's one-line read, clamped to two lines */
.vcard-stance {
  margin: 0;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
  color: var(--ink-body, var(--ink-dim, #c8cbd0));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* desk split row: the same five-segment bar the verdict grid ships.
   The vg-split rules are scoped under .vcard here (same values as the
   styles/yb.css originals) so the card carries its own split styling
   onto the editorial page, which never loads yb.css. */
.vcard-split-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 14px;
}
.vcard .vg-split {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.vcard .vg-split-bar {
  display: inline-flex; gap: 2px;
  width: 70px; flex: none;
}
.vcard .vg-split-seg {
  flex: 1 1 0; height: 9px; border-radius: 2px;
  background: var(--line-strong, #2a2e36);
}
.vcard .vg-split-seg-bull    { background: var(--gain); }
.vcard .vg-split-seg-bear    { background: var(--loss); }
.vcard .vg-split-seg-neutral { background: var(--ink-mute); opacity: 0.5; }
.vcard .vg-split-label {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink-body, var(--ink-dim, #c8cbd0));
}
.vcard .vg-split-queued {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--ink-mute);
}
.vcard-split-words {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--ink-mute);
}

/* the since-you-opened delta note, painted only on a real move */
.vcard-delta {
  margin: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; color: var(--gold, var(--brass-bright, #d4a843));
}

/* foot: guided-mode link left, research link right */
.vcard-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft, #1b2438);
  padding-top: 11px; margin-top: 2px;
}
.vcard-walk {
  appearance: none; background: none; border: 0; padding: 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.05em; color: var(--ink-mute);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-strong, #2a2e36);
  cursor: pointer;
}
.vcard-walk:hover {
  color: var(--gold, var(--brass-bright, #d4a843));
  text-decoration-color: var(--gold-line, var(--brass-line, rgba(212, 168, 67, 0.35)));
}
.vcard-open {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gold, var(--brass-bright, #d4a843)); text-decoration: none;
  white-space: nowrap;
}
.vcard-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.vcard-walk:focus-visible, .vcard-open:focus-visible, a.vcard-tk:focus-visible {
  outline: var(--focus-ring, 2px solid var(--gold, var(--brass-bright, #d4a843)));
  outline-offset: 2px; border-radius: 2px;
}

/* honest empty state: the desks have not scored yet */
.vcard-empty {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 2px 4px;
}
.vcard-empty-title {
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  color: var(--ink); margin: 0;
}
.vcard-empty-sub {
  font-family: var(--sans); font-size: 13px; line-height: 1.55;
  color: var(--ink-mute); margin: 0; max-width: 44ch;
}

@media (max-width: 560px) {
  .vcard-body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .vcard-facts { align-items: center; }
  .vcard-tk-row, .vcard-split-row { justify-content: center; }
}

/* ─── vcard guided mode (walk me through this) ──────────────────────
   A step-through overlay for first-touch readers. Scrim + fixed panel,
   the active card element earns the gold focus ring. Panel body is
   16px minimum for the older readers this exists for. Fade is killed
   under prefers-reduced-motion. */

.vcard-walk.is-new {
  color: var(--gold, var(--brass-bright, #d4a843));
  text-decoration-color: var(--gold-line, var(--brass-line, rgba(212, 168, 67, 0.35)));
}

.vcard-walk-scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1390;
}
.vcard.is-walking {
  z-index: 1395;
  transform: none;
}
.vcard-hl {
  outline: var(--focus-ring, 2px solid var(--gold, var(--brass-bright, #d4a843)));
  outline-offset: 3px;
  border-radius: 4px;
}

.vcard-walk-panel {
  position: fixed; left: 50%; bottom: 20px;
  transform: translateX(-50%);
  width: min(460px, calc(100vw - 28px));
  background: var(--bg-elev, var(--surface-raised, #131c31));
  border: var(--border-card, 1px solid var(--line, rgba(255, 255, 255, 0.06)));
  border-radius: var(--radius-card, 14px);
  box-shadow: var(--shadow-card, 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.45));
  padding: 16px 18px 14px;
  z-index: 1400;
  opacity: 1;
  transition: opacity var(--t-fast, 160ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.vcard-walk-panel[data-entering] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .vcard-walk-panel { transition: none; }
}

.vcard-walk-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.vcard-walk-count {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold, var(--brass-bright, #d4a843));
}
.vcard-walk-close {
  appearance: none; background: none; border: 0;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-mute); cursor: pointer;
  padding: 8px 10px; margin: -8px -10px -8px 0;
}
.vcard-walk-close:hover { color: var(--ink); }

.vcard-walk-title {
  font-family: var(--sans); font-weight: 600; font-size: 17px;
  color: var(--ink); margin: 0 0 6px;
}
/* 16px floor, locked by the spec for the guided copy. */
.vcard-walk-body {
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  color: var(--ink-body, var(--ink-dim, #c8cbd0)); margin: 0 0 14px;
}
.vcard-walk-link {
  display: inline-block;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold, var(--brass-bright, #d4a843)); text-decoration: none;
  margin-bottom: 14px;
}
.vcard-walk-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.vcard-walk-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.vcard-walk-back, .vcard-walk-next {
  appearance: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 6px; padding: 11px 18px;
  transition: background var(--t-fast, 160ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color var(--t-fast, 160ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              color var(--t-fast, 160ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.vcard-walk-back {
  background: none; border: 1px solid var(--line-strong, #2a2e36);
  color: var(--ink-body, var(--ink-dim, #c8cbd0));
}
.vcard-walk-back:hover {
  border-color: var(--gold-line, var(--brass-line, rgba(212, 168, 67, 0.35)));
  color: var(--gold, var(--brass-bright, #d4a843));
}
.vcard-walk-back[disabled] { opacity: 0.35; cursor: default; }
.vcard-walk-back[disabled]:hover {
  border-color: var(--line-strong, #2a2e36);
  color: var(--ink-body, var(--ink-dim, #c8cbd0));
}
.vcard-walk-next {
  background: var(--gold, var(--brass-bright, #d4a843));
  border: 1px solid var(--gold, var(--brass-bright, #d4a843));
  color: var(--bg, #0e1420);
}
.vcard-walk-next:hover { background: var(--gold-bright, var(--brass, #e0b54e)); }
.vcard-walk-close:focus-visible,
.vcard-walk-back:focus-visible,
.vcard-walk-next:focus-visible,
.vcard-walk-link:focus-visible {
  outline: var(--focus-ring, 2px solid var(--gold, var(--brass-bright, #d4a843)));
  outline-offset: 2px;
}