/* ═══════════════════════════════════════════════════════════════════════════ CHIP & BADGE SYSTEM v2 — five functional categories (P2-A) Active only when has .vc-chips-v2 (Settings → Display → Chip Style). Without it, the legacy per-class designs in main.css apply untouched — this file is the rollback valve. Once the coven approves v2, the legacy definitions can be deleted and these rules unscoped. The grammar (deliberate, learnable signals): PERSON round pill + sigil/avatar → "who did this" STATUS 4px rect + semantic color → "what state is this in" META round pill, muted → "a fact about this entry" CONTROL 3px rect + hover/active → "click me" (these are tiny buttons) COUNT tiny round numeric pill v2 normalizes GEOMETRY (size, padding, radius, casing, 10px text floor). Colors are intentionally NOT overridden — each chip's intent color (picker purple, occasion magenta, event accent, ritual greens/reds) still comes from its legacy rules or inline accent styles. ═══════════════════════════════════════════════════════════════════════════ */ @layer features { /* ── Codex event badges — base metrics (ALWAYS on; geometry moved here from inline styles in codex.js so v2 can restyle them; the per-event accent color/border stays inline because it is data, not design). ── */ .vc-event-badge { display:inline-flex; align-items:center; gap:0.1875rem; padding:0.125rem 0.4375rem; border-radius:999px; border:1px solid; font-family:var(--font-vhs); font-size:0.5rem; letter-spacing:1px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vc-event-badge--grid { position:absolute; bottom:6px; right:6px; z-index:4; background:rgba(4,3,9,0.82); max-width:calc(100% - 12px); } .vc-event-badge--list { margin:0.125rem 0; } /* ── .vc-mini-badge (codex collection/source decorations) — had NO styling at all; inherited the meta line's text look. Always on. ── */ .vc-mini-badge { display:inline-flex; align-items:center; gap:0.1875rem; margin-left:0.375rem; padding:0.125rem 0.4375rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--fog); font-family:var(--font-vhs); font-size:0.5625rem; letter-spacing:0.8px; line-height:1; white-space:nowrap; } /* ════════ v2 design (gated) ════════ */ /* Shared base — all five categories */ body.vc-chips-v2 .vc-chip-picker, body.vc-chips-v2 .member-chip, body.vc-chips-v2 .voter-chip, body.vc-chips-v2 .s-member-role, body.vc-chips-v2 .codex-member-chip, body.vc-chips-v2 .vc-chip-1st, body.vc-chips-v2 .vc-chip-wt, body.vc-chips-v2 .watch-history-badge, body.vc-chips-v2 .vc-ep-seen-badge, body.vc-chips-v2 .queue-auto-badge, body.vc-chips-v2 .codex-progress-badge, body.vc-chips-v2 .vc-showcase-badge, body.vc-chips-v2 .ritual-status-badge, body.vc-chips-v2 .ritual-occasion-badge, body.vc-chips-v2 .vc-chip-time, body.vc-chips-v2 .vc-chip-occasion, body.vc-chips-v2 .vc-franchise-badge, body.vc-chips-v2 .locker-version-badge, body.vc-chips-v2 .vc-streaming-chip, body.vc-chips-v2 .vc-event-badge { display:inline-flex; align-items:center; gap:0.25rem; font-family:var(--font-vhs); text-transform:uppercase; letter-spacing:0.8px; line-height:1; white-space:nowrap; font-size:0.625rem; /* 10px floor — readability */ padding:0.1875rem 0.5625rem; /* 3px 9px */ } /* PERSON — fully round; the shape that means "a who" */ body.vc-chips-v2 .vc-chip-picker, body.vc-chips-v2 .member-chip, body.vc-chips-v2 .voter-chip, body.vc-chips-v2 .s-member-role, body.vc-chips-v2 .codex-member-chip { border-radius:999px; } /* STATUS — squared; system state, not clickable, color = the signal */ body.vc-chips-v2 .vc-chip-1st, body.vc-chips-v2 .vc-chip-wt, body.vc-chips-v2 .watch-history-badge, body.vc-chips-v2 .vc-ep-seen-badge, body.vc-chips-v2 .queue-auto-badge, body.vc-chips-v2 .codex-progress-badge, body.vc-chips-v2 .vc-showcase-badge, body.vc-chips-v2 .ritual-status-badge, body.vc-chips-v2 .ritual-occasion-badge { border-radius:4px; } /* META — round + quiet; footnotes, never bold */ body.vc-chips-v2 .vc-chip-time, body.vc-chips-v2 .vc-chip-occasion, body.vc-chips-v2 .vc-franchise-badge, body.vc-chips-v2 .locker-version-badge, body.vc-chips-v2 .vc-streaming-chip, body.vc-chips-v2 .vc-event-badge { border-radius:999px; font-weight:400; } /* CONTROL — small buttons: 3px corners, roomier hit area, pointer. Hover/active colors stay per-class (codex-chip.active gold etc.). */ body.vc-chips-v2 .codex-chip, body.vc-chips-v2 .filter-chip, body.vc-chips-v2 .vc-mini-chip, body.vc-chips-v2 .vc-wt-chip, body.vc-chips-v2 .vc-theme-recent-chip, body.vc-chips-v2 .watch-date-precision-btn { display:inline-flex; align-items:center; gap:0.25rem; font-family:var(--font-vhs); text-transform:uppercase; letter-spacing:0.8px; line-height:1; white-space:nowrap; font-size:0.625rem; padding:0.375rem 0.75rem; border-radius:3px; cursor:pointer; } /* COUNT — tiny round numerics */ body.vc-chips-v2 .evt-filter-count, body.vc-chips-v2 .vc-history-count { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-vhs); line-height:1; font-size:0.5625rem; padding:0.125rem 0.375rem; border-radius:999px; } /* Overlay-positioned status badges keep their absolute placement (set by legacy rules) — only geometry above changes. Codex poster-overlay picker pill needs its compact padding back: */ body.vc-chips-v2 .codex-card-overlay-picker .codex-card-picker { padding:0.125rem 0.4375rem; font-size:0.5625rem; } } /* end @layer features */