/* ==========================================================================
   RANKED CAPPERS — RC Verified public surfaces (/c/<slug>, /directory).
   Layers on top of site.css; reuses its tokens (--panel, --ink, --pos …).
   CSP-safe: no inline styles anywhere; classes only.
   ========================================================================== */

.v-main{ padding:clamp(28px,6vw,72px) 0 64px; }

/* hero */
.v-hero{ margin-bottom:28px; }
.v-hero-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.v-title{ font-family:var(--serif); font-size:clamp(28px,5vw,44px); line-height:1.05; margin:.1em 0 .2em; }
.v-sub{ color:var(--ink-2); max-width:64ch; font-size:1.02rem; }
.v-since{ color:var(--mut); font-family:var(--mono); font-size:.82rem; }

.v-badge-chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:.74rem; letter-spacing:.08em; font-weight:700; color:var(--pos);
  border:1px solid color-mix(in srgb, var(--pos) 40%, var(--line)); border-radius:999px;
  padding:5px 11px; background:var(--glow); }
.v-badge-chip.sm{ font-size:.66rem; padding:3px 9px; }
.v-badge-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--pos);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pos) 22%, transparent); }

/* stat tiles */
.v-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:8px 0 12px; }
.v-tiles .stat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.v-tiles .stat .v{ font-family:var(--mono); font-size:1.5rem; font-weight:700; letter-spacing:-.01em; }
.v-tiles .stat .k{ color:var(--mut); font-size:.78rem; margin-top:4px; }
.v-tiles .stat .v.pos, .dir-stats .v.pos{ color:var(--pos); }
.v-tiles .stat .v.neg, .dir-stats .v.neg{ color:var(--neg); }
.v-range{ color:var(--mut); font-size:.85rem; max-width:80ch; margin:0 0 26px; }

/* panels */
.panel.v-record, .panel.v-integrity, .panel.v-badge, .panel.v-legal{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 24px; margin-bottom:20px; }
.v-h{ font-family:var(--serif); font-size:1.28rem; margin:0 0 14px; }
.v-record-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.v-record-head .append{ color:var(--mut); font-family:var(--mono); font-size:.76rem; display:inline-flex; gap:6px; align-items:center; }
.v-record-head .append .lock{ color:var(--pos); }

/* record table (reuses .ledger from site.css; ensure overflow on small screens) */
.panel.v-record{ overflow-x:auto; }
.v-record .ledger{ width:100%; }
.v-record .ledger small{ color:var(--mut); font-family:var(--mono); }

/* integrity */
.v-int-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.v-int-grid .kv{ border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px; background:var(--panel-2); }
.v-int-grid .kv .k{ color:var(--mut); font-size:.76rem; }
.v-int-grid .kv .v{ font-family:var(--mono); font-size:1.15rem; font-weight:700; margin-top:3px; }
.v-flags{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.v-flags li{ font-size:.8rem; color:var(--ink-2); border:1px solid var(--line); background:var(--panel-2);
  border-radius:999px; padding:5px 11px; }

/* badge preview */
.v-badge-preview{ display:flex; }
.v-badge-preview svg{ max-width:100%; height:auto; }

/* legal block */
.v-def{ color:var(--ink-2); max-width:78ch; }
.v-links{ margin:12px 0; font-size:.9rem; }
.v-links a{ color:var(--pos); }
.v-disc{ color:var(--mut); font-size:.8rem; max-width:82ch; margin-top:10px; }
.v-empty{ color:var(--mut); }

/* directory */
.dir-sortnote{ color:var(--mut); font-size:.85rem; margin:0 0 20px; }
.dir-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:26px; }
.dir-card{ display:block; text-decoration:none; color:inherit; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:18px; transition:border-color .15s ease, transform .15s ease; }
.dir-card:hover{ border-color:color-mix(in srgb, var(--pos) 45%, var(--line)); transform:translateY(-2px); }
.dir-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.dir-slug{ font-family:var(--mono); color:var(--mut); font-size:.8rem; }
.dir-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dir-stats .stat .v{ font-family:var(--mono); font-size:1.05rem; font-weight:700; }
.dir-stats .stat .k{ color:var(--mut); font-size:.68rem; margin-top:2px; }