/* THE PIVOT · Values Compass — page-local styles. Leans on design-system + /pivot/pivot.css */

.vc-compare { margin-top:32px; }
.vc-prompt { font-family:var(--font-body); font-weight:700; font-size:16px; text-align:center; color:var(--mut); margin-bottom:24px; }
.vc-pair { display:grid; grid-template-columns:1fr 60px 1fr; gap:0; align-items:stretch; }
.vc-card { border:1px solid var(--hair); background:var(--paper); text-align:left; cursor:pointer; padding:30px 28px; transition:.15s; display:flex; flex-direction:column; gap:10px; color:inherit; }
.vc-card:hover, .vc-card:focus-visible { border-color:var(--ink); background:var(--paper2); }
.vc-card:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.vc-card .vc-name { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.02em; }
.vc-card:hover .vc-name, .vc-card:focus-visible .vc-name { color:var(--red); }
.vc-card .vc-desc { font-size:15px; color:var(--ink2); line-height:1.5; }
.vc-or { display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.vc-progress-wrap { margin-top:28px; }
.vc-progress-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-bottom:8px; text-align:center; }
.vc-progress-track { height:4px; background:var(--track); }
.vc-progress-fill { height:100%; background:var(--red); transition:width .25s; }

/* results */
.vc-results { margin-top:28px; }
.vc-toplist { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.vc-toprow { display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--hair2); }
.vc-rank { font-family:var(--font-display); font-weight:700; font-size:28px; color:var(--red); font-variant-numeric:tabular-nums; }
.vc-toprow .vc-vname { font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.01em; }
.vc-toprow .vc-vdesc { font-size:14.5px; color:var(--ink2); margin-top:4px; line-height:1.5; }

@media (max-width:640px){
  .vc-pair { grid-template-columns:1fr; gap:12px; }
  .vc-or { padding:2px 0; }
  .vc-card .vc-name { font-size:20px; }
}