/* ═══════════════════════════════════════════════════════════════════════════
   COVEN PAGE — class vocabulary (coven-page-redesign-prompt.md)

   The group stats / social hub. This file holds everything that used to be
   inline-styled string concatenation in coven.js. Follows codex-cards.css
   conventions: @layer features, color-mix alpha derivation, three type voices.

   Per-row dynamic colors flow through CSS custom properties set inline on the
   row root — never repeated inline style blocks:
     --m-tier   : a member's arcana tier color  (rank → glyph/label/avatar ring)
     --m-accent : a member's sigil accent color  (who → reserved for P3 rails)
     --row-tier : a single standings/guide row's tier color

   Layout map (top → bottom of #view-coven):
     stat strip (.dash-grid, styled by main.css)
     members card:
       .coven-member-summary-grid   — Top Curator / Picker / Rater / Discoverer
       .coven-members-layout        — [ list column | side column ]
         .coven-members-listcol     — .vc-member-card rows (draggable)
         .coven-side                — pick stats / totals / tier guide
     feed card: Arcana standings (.coven-arcana-row) + queue preview
   ═══════════════════════════════════════════════════════════════════════════ */
@layer features {

/* 10px floor (P2.5): the shared .pill base is 9px — lift every pill on the
   coven page to the floor in one place rather than per-call inline overrides. */
#view-coven .pill { font-size:0.625rem; }

/* ── Compact stat strip (2026-06 redesign) — replaces the four big stat cards.
   One tight row of value/label badges with thin dividers (V3 StatBadge voice). */
.coven-statstrip {
  display:flex; flex-wrap:wrap; align-items:stretch;
  border:1px solid var(--border); border-radius:10px;
  background:rgba(13,10,20,0.6); overflow:hidden; margin-bottom:1rem;
}
.coven-stat {
  flex:1 1 0; min-width:5rem; text-align:center;
  padding:0.625rem 0.5rem;
  border-left:1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.coven-stat:first-child { border-left:0; }
.coven-stat-v {
  font-family:var(--font-occult); font-weight:700; font-size:1.25rem;
  color:var(--gold-pale); line-height:1.05; letter-spacing:0.5px;
}
.coven-stat-l {
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--dust); margin-top:0.25rem;
}
@media (max-width:720px){ .coven-stat { flex-basis:33%; } }

/* ── Tier guide folded into Arcana Standings (collapsible legend) ── */
.coven-tierguide-toggle {
  display:block; width:100%; margin-top:0.625rem; padding:0.4375rem 0.5rem;
  background:transparent; border:1px dashed color-mix(in srgb, var(--gold) 25%, transparent);
  border-radius:7px; cursor:pointer;
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--dust); transition:border-color .14s, color .14s;
}
.coven-tierguide-toggle:hover { border-color:color-mix(in srgb, var(--gold) 50%, transparent); color:var(--gold-pale); }
/* Expanded legend floats as a dropdown over the content below — it must not
   reflow Insights / Recent Activity. The card is its positioning context. */
.coven-standings-card { position:relative; }
.coven-tierguide-legend {
  position:absolute; left:0; right:0; top:100%; margin-top:0.375rem;
  z-index:var(--z-float);
  background:var(--deep); border:1px solid var(--border-bright); border-radius:10px;
  padding:0.75rem; box-shadow:0 16px 40px rgba(0,0,0,.6);
  max-height:60vh; overflow-y:auto;
}

/* Insights sits alone in a .dash-row (1fr 21.25rem) → first column only,
   matching the Members card / Recent Activity width. min-width:0 is the key:
   without it the card's wide content (charts row, records scroller, taste grid)
   forces the 1fr track to expand past its share, so Insights ran wider than the
   text-only rows above/below. min-width:0 pins it to the column; inner grids/
   scrollers reflow within. */
.coven-insights-card { grid-column: 1; min-width: 0; }
.coven-insights-card .coven-ins-grid,
.coven-insights-card .coven-records,
.coven-insights-card .coven-records-scroll { min-width: 0; }

/* ── Insights section header + sub-navigation (Records · Taste · Charts) ── */
.coven-insights-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:0.75rem; flex-wrap:wrap; margin-bottom:0.875rem;
}
.coven-insights-controls { display:flex; align-items:center; gap:0.625rem; flex-wrap:wrap; }
.coven-ins-subnav { display:flex; gap:0.375rem; }
.coven-ins-tab {
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--dust);
  background:transparent; border:1px solid var(--border); border-radius:999px;
  padding:0.3125rem 0.75rem; cursor:pointer; transition:all .15s;
}
.coven-ins-tab:hover { border-color:var(--border-bright); color:var(--fog); }
.coven-ins-tab.active {
  color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent);
  background:color-mix(in srgb, var(--gold) 8%, transparent);
}
.coven-ins-timeframe {
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1px;
  color:var(--fog); background:var(--deep);
  border:1px solid var(--border); border-radius:7px; padding:0.3125rem 0.5rem;
  cursor:pointer; outline:none;
}

/* ── Top-four summary cards (accent = who: name carries the member's pigment) ── */
.coven-member-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(10.625rem,1fr)); gap:0.625rem; margin-bottom:0.75rem; }
.coven-member-summary-card { position:relative; overflow:hidden; background:rgba(13,10,20,0.7); border:1px solid var(--border); border-radius:10px; padding:0.6875rem 0.6875rem 0.6875rem 0.875rem; }
.coven-member-summary-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--m-accent, var(--picker-default)); }
.coven-member-summary-label { font-family:var(--font-vhs); font-size:0.625rem; color:var(--fog); letter-spacing:1.2px; text-transform:uppercase; }
.coven-member-summary-name { font-family:var(--font-occult); font-weight:700; font-size:0.9375rem; color:var(--m-accent, var(--gold-pale)); margin-top:0.25rem; line-height:1.2; }
.coven-member-summary-meta { font-family:var(--font-vhs); font-size:0.625rem; color:var(--mist); letter-spacing:0.5px; margin-top:0.3125rem; line-height:1.35; }

/* ── Two-column body ── */
.coven-members-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(15rem,.65fr); gap:0.625rem; align-items:start; }
.coven-members-listcol { display:grid; gap:0.5rem; }

/* ── Member card (P3): accent rail + flat avatar + single column.
   Root keeps .vc-member-card for the drag handlers; --m-accent = who (rail,
   avatar ring), --m-tier = rank (tier glyph/label). Never both on one element. */
.vc-member-card { position:relative; overflow:hidden; background:rgba(18,12,28,0.78); border:1px solid var(--border); border-radius:10px; cursor:grab; user-select:none; transition:border-color .14s, opacity .14s; }
.vc-member-card:hover { border-color:var(--border-bright); }
.vc-member-card[draggable]:active { cursor:grabbing; }
.coven-member-rail { position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--m-accent, var(--picker-default)); }
.coven-member-grid { display:grid; grid-template-columns:auto minmax(0,1fr); gap:0.6875rem; align-items:start; padding:0.6875rem 0.6875rem 0.6875rem 0.9375rem; }
.coven-member-avatar { width:36px; height:36px; border-radius:8px; background:var(--surface); border:1px solid color-mix(in srgb, var(--m-accent, var(--border)) 50%, transparent); display:flex; align-items:center; justify-content:center; font-size:0.9375rem; color:var(--static); flex-shrink:0; }
.coven-member-main { min-width:0; }
.coven-member-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:0.25rem 0.5rem; }
.coven-member-name { font-family:var(--font-occult); font-weight:700; font-size:0.9375rem; color:var(--static); line-height:1.15; letter-spacing:0.3px; }
.coven-member-name.is-link { cursor:pointer; }
.coven-member-name.is-link:hover { color:var(--gold-pale); }
.coven-member-you, .coven-member-name-mark { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); }
.coven-member-name-mark.arrow { opacity:0.55; }
.coven-member-tier { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px; color:var(--m-tier, var(--dust)); white-space:nowrap; }
.coven-member-arcana { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px; color:var(--fog); white-space:nowrap; }
.coven-member-rank { margin-left:auto; font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); opacity:0.7; }
.coven-member-stat { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px; color:var(--mist); margin-top:0.4375rem; line-height:1.5; }

/* metric bars — shared chassis, flat semantic-token fills (no gradients) */
.coven-bar { display:grid; grid-template-columns:76px 1fr 36px; gap:0.4375rem; align-items:center; margin-top:0.375rem; }
.coven-bar:first-of-type { margin-top:0.5rem; }
.coven-bar-label, .coven-bar-val { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); }
.coven-bar-val { text-align:right; }
.coven-bar-track { height:5px; border-radius:999px; background:rgba(255,255,255,0.05); overflow:hidden; }
.coven-bar-fill { height:100%; }
.coven-bar.discovery .coven-bar-fill { background:var(--bar-discovery); }
.coven-bar.picks .coven-bar-fill     { background:var(--bar-picks); }
.coven-bar.rating .coven-bar-fill    { background:var(--bar-rating); }

/* ── Side column ── */
.coven-side { display:flex; flex-direction:column; gap:0.625rem; }
.coven-sidebox { padding:0.625rem; border:1px solid var(--border); border-radius:10px; background:rgba(12,10,20,0.65); }
.coven-sidebox.pad-lg { padding:0.75rem; }
.coven-sidebox-title { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); letter-spacing:1px; margin-bottom:0.5rem; }
.coven-sidebox-title.static { color:var(--static); margin-bottom:0.625rem; }

.coven-pickstat { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.4375rem 0.5rem; border:1px solid color-mix(in srgb, var(--gold) 12%, transparent); border-radius:8px; background:rgba(16,12,24,0.55); margin-bottom:0.375rem; }
.coven-pickstat-id { min-width:0; }
.coven-pickstat-rank { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); }
.coven-pickstat-name { font-family:var(--font-occult); font-size:0.75rem; color:var(--gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


.coven-tierguide { display:flex; flex-direction:column; gap:0.3125rem; margin-bottom:0.625rem; }
.coven-tierguide-row { display:flex; align-items:center; gap:0.5625rem; padding:0.4375rem 0.5625rem; border-radius:7px; border:1px solid color-mix(in srgb, var(--row-tier) 30%, transparent); background:color-mix(in srgb, var(--row-tier) 8%, transparent); }
.coven-tierguide-glyph { font-size:0.875rem; width:18px; text-align:center; flex-shrink:0; }
.coven-tierguide-main { min-width:0; flex:1; }
.coven-tierguide-head { display:flex; align-items:baseline; gap:0.375rem; }
.coven-tierguide-label { font-family:var(--font-occult); font-size:0.75rem; color:var(--row-tier); }
.coven-tierguide-range { font-family:var(--font-vhs); font-size:0.625rem; color:var(--fog); }
.coven-tierguide-desc { font-family:var(--font-literary); font-style:italic; font-size:0.75rem; color:var(--fog); margin-top:0.125rem; line-height:1.4; }
.coven-formula { font-family:var(--font-vhs); font-size:0.625rem; color:var(--fog); border-top:1px solid var(--border); padding-top:0.5rem; line-height:1.7; }

/* ── Arcana standings (feed card) ── */
.coven-arcana-row { display:grid; grid-template-columns:18px 1fr auto auto; align-items:center; gap:0.625rem; padding:0.5rem 0.625rem; border:1px solid color-mix(in srgb, var(--row-tier) 18%, transparent); background:color-mix(in srgb, var(--row-tier) 4%, transparent); border-radius:8px; margin-bottom:0.375rem; }
.coven-arcana-rank { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); text-align:center; }
.coven-arcana-id { display:flex; align-items:center; gap:0.4375rem; min-width:0; }
.coven-arcana-glyph { font-size:0.8125rem; flex-shrink:0; }
.coven-arcana-main { min-width:0; }
.coven-arcana-name { font-family:var(--font-occult); font-size:0.75rem; color:var(--static); text-transform:uppercase; letter-spacing:0.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.coven-arcana-prog { display:flex; align-items:center; gap:0.375rem; margin-top:0.1875rem; }
.coven-arcana-track { flex:1; height:3px; border-radius:999px; background:rgba(255,255,255,0.06); overflow:hidden; min-width:40px; }
.coven-arcana-fill { height:100%; background:var(--row-tier); opacity:0.75; transition:width .4s ease; }
.coven-arcana-tonext { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); white-space:nowrap; flex-shrink:0; }
.coven-arcana-score { font-family:var(--font-vhs); font-size:0.625rem; color:var(--row-tier); text-align:right; flex-shrink:0; }
.coven-arcana-pts { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); text-align:right; flex-shrink:0; }

/* ── Queue preview (feed card) ── */
.coven-queue-preview { display:flex; flex-direction:column; gap:0.3125rem; }
.coven-queue-row { display:flex; align-items:center; gap:0.5rem; padding:0.3125rem 0.375rem; background:rgba(18,12,28,0.6); border:1px solid var(--border); border-radius:7px; cursor:pointer; transition:border-color .14s; }
.coven-queue-row:hover { border-color:var(--border-bright); }
.coven-queue-poster { width:26px; height:38px; object-fit:cover; border-radius:3px; flex-shrink:0; }
.coven-queue-poster-ph { width:26px; height:38px; background:var(--chamber); border-radius:3px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.75rem; color:var(--dust); }
.coven-queue-info { flex:1; min-width:0; }
.coven-queue-title { font-family:var(--font-literary); font-weight:600; font-size:0.8125rem; color:var(--static); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coven-queue-meta { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); letter-spacing:.5px; margin-top:0.0625rem; }
.coven-queue-more { text-align:center; padding:0.375rem 0; font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); letter-spacing:1px; cursor:pointer; }

@media (max-width: 980px){
  .coven-members-layout { grid-template-columns:1fr; }
}

/* ── Settings → pigment picker (member accent palette, Part 1) ──────────────
   Lives here so the whole member-accent feature is in one file. Selected ring
   and preview chip derive from --pig (the swatch's hex) via color-mix, matching
   the codex picker-chip formula: text = accent, border = accent @30%. */
.vc-pigment-rowlabel { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:2px; color:var(--dust); text-transform:uppercase; margin:0.75rem 0 0.5rem; }
.vc-pigment-rowlabel:first-child { margin-top:0; }
.vc-pigment-rowhint { letter-spacing:1px; color:var(--fog); opacity:0.7; }
.vc-pigment-row { display:flex; flex-wrap:wrap; gap:0.5rem; }
.vc-pigment { position:relative; display:flex; flex-direction:column; align-items:center; gap:0.3125rem; width:4.5rem; padding:0.375rem 0.25rem; background:transparent; border:1px solid transparent; border-radius:8px; cursor:pointer; transition:border-color .14s, background .14s; }
.vc-pigment:hover { background:rgba(255,255,255,0.03); }
.vc-pigment-chip { width:2rem; height:2rem; border-radius:7px; background:var(--pig); border:1px solid rgba(255,255,255,0.14); box-shadow:0 2px 8px rgba(0,0,0,.4); }
.vc-pigment-name { font-family:var(--font-occult); font-size:0.6875rem; color:var(--mist); line-height:1; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vc-pigment.selected { border-color:var(--pig); background:color-mix(in srgb, var(--pig) 10%, transparent); }
.vc-pigment.selected .vc-pigment-chip { box-shadow:0 0 0 2px var(--pig), 0 2px 8px rgba(0,0,0,.4); border-color:transparent; }
.vc-pigment.selected .vc-pigment-name { color:var(--static); }

/* remove × on saved custom swatches (appears on hover/focus of the tile) */
.vc-pigment-remove { position:absolute; top:0.125rem; right:0.125rem; width:1rem; height:1rem; display:flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(8,6,12,0.9); border:1px solid var(--border); color:var(--fog); font-family:var(--font-vhs); font-size:0.75rem; line-height:1; opacity:0; transition:opacity .12s, color .12s, border-color .12s; }
.vc-pigment:hover .vc-pigment-remove, .vc-pigment:focus-within .vc-pigment-remove { opacity:1; }
.vc-pigment-remove:hover { color:var(--blood-bright); border-color:color-mix(in srgb, var(--blood-bright) 50%, transparent); }

/* add-a-custom-color tile — dashed, wraps a transparent native color input */
.vc-pigment-add { border:1px dashed color-mix(in srgb, var(--gold) 30%, transparent); }
.vc-pigment-add:hover { border-color:color-mix(in srgb, var(--gold) 60%, transparent); }
.vc-pigment-add.is-full { cursor:default; border-style:solid; opacity:0.5; }
.vc-pigment-chip-add { display:flex; align-items:center; justify-content:center; background:transparent; border-style:dashed; border-color:color-mix(in srgb, var(--gold) 35%, transparent); box-shadow:none; color:var(--gold-pale); font-family:var(--font-vhs); font-size:0.875rem; }
.vc-pigment-add-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }

.vc-pigment-preview { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; padding:0.625rem 0.75rem; border:1px solid var(--border); border-radius:8px; background:rgba(12,10,20,.5); }
.vc-pigment-preview-chip { display:inline-flex; align-items:center; gap:0.25rem; font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1px; padding:0.1875rem 0.5rem; border-radius:999px; color:var(--pig); border:1px solid color-mix(in srgb, var(--pig) 30%, transparent); background:transparent; white-space:nowrap; }
.vc-pigment-preview-stripe { width:5rem; height:4px; border-radius:2px; background:var(--pig); }
.vc-pigment-preview-name { font-family:var(--font-occult); font-size:0.8125rem; color:var(--static); }

/* ── Activity feed → VCR log (P5) ──────────────────────────────────────────
   Each row: fixed-width mono verb column (so timestamps align down the feed) ·
   codex-style timestamp · Spectral sentence with the member name in their accent
   color (--m-accent set inline per row). Hairline separators, single-line. */
.vcr-log { display:flex; flex-direction:column; }
.vcr-row { display:grid; grid-template-columns:4.625rem auto minmax(0,1fr); gap:0.5rem; align-items:baseline; padding:0.4375rem 0.25rem; border-top:1px solid color-mix(in srgb, var(--bronze) 10%, transparent); }
.vcr-row:first-child { border-top:0; }
.vcr-verb { font-family:var(--font-vhs); font-size:0.625rem; font-weight:700; letter-spacing:1px; color:var(--vcr, var(--dust)); white-space:nowrap; }
.vcr-time { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px; color:var(--fog); white-space:nowrap; }
.vcr-line { font-family:var(--font-literary); font-size:0.8125rem; color:var(--mist); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vcr-who { font-weight:600; color:var(--m-accent, var(--gold-pale)); }
.vcr-title { color:var(--static); }
.vcr-meta { color:var(--fog); }
@media (max-width:1100px){
  .vcr-row { grid-template-columns:4.25rem 1fr; }
  .vcr-time { grid-column:2; text-align:right; }
  .vcr-line { grid-column:1 / -1; white-space:normal; }
}

/* ── Bespoke sigil color picker popover (accepts hex; replaces native input) ── */
.vc-cpick-pop { position:fixed; z-index:var(--z-float-high); width:15rem; padding:0.75rem; background:var(--deep); border:1px solid var(--border-bright); border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,.6); }
.vc-cpick-sv { position:relative; width:100%; height:7.5rem; border-radius:7px; overflow:hidden; cursor:crosshair; touch-action:none; background:#f80; }
.vc-cpick-sv::before, .vc-cpick-sv::after { content:''; position:absolute; inset:0; pointer-events:none; }
.vc-cpick-sv::before { background:linear-gradient(to right,#fff,rgba(255,255,255,0)); }
.vc-cpick-sv::after  { background:linear-gradient(to top,#000,rgba(0,0,0,0)); }
.vc-cpick-sv-thumb { position:absolute; width:14px; height:14px; border-radius:999px; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.5); transform:translate(-50%,-50%); pointer-events:none; z-index:2; }
.vc-cpick-hue { -webkit-appearance:none; appearance:none; width:100%; height:0.75rem; border-radius:999px; margin:0.625rem 0; background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); cursor:pointer; }
.vc-cpick-hue::-webkit-slider-thumb { -webkit-appearance:none; width:1rem; height:1rem; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.4); box-shadow:0 1px 3px rgba(0,0,0,.5); cursor:pointer; }
.vc-cpick-hue::-moz-range-thumb { width:1rem; height:1rem; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.4); cursor:pointer; }
.vc-cpick-foot { display:flex; align-items:center; gap:0.375rem; margin-top:0.125rem; }
.vc-cpick-preview { width:1.75rem; height:1.75rem; border-radius:6px; border:1px solid rgba(255,255,255,.15); flex-shrink:0; background:#000; }
.vc-cpick-hash { font-family:var(--font-vhs); font-size:0.875rem; color:var(--dust); }
.vc-cpick-hex { flex:1; min-width:0; background:var(--chamber); border:1px solid var(--border); border-radius:6px; padding:0.375rem 0.5rem; color:var(--static); font-family:var(--font-vhs); font-size:0.75rem; letter-spacing:1px; text-transform:lowercase; outline:none; }
.vc-cpick-hex:focus { border-color:color-mix(in srgb, var(--gold) 45%, transparent); }
.vc-cpick-hex.invalid { border-color:color-mix(in srgb, var(--blood-bright) 55%, transparent); }

/* ════════════════════════════════════════════════════════════════════════
   Insights redesign (Records · Taste · Charts) — newer translucent-card voice
   matching queue.css / Recent Activity. Member-accent coloring via --m-accent.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Records: a labeled single-row horizontal scroller of superlative chips ── */
.coven-records {
  margin-bottom:0.875rem; padding-bottom:0.875rem;
  border-bottom:1px solid color-mix(in srgb, var(--gold) 14%, transparent);
}
.coven-records-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:0.75rem; margin-bottom:0.5rem;
}
.coven-records-title {
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--dust);
}
.coven-records-nav { display:flex; gap:0.375rem; }
.coven-records-arrow {
  font-family:var(--font-vhs); font-size:0.75rem; line-height:1;
  width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center;
  color:var(--dust); background:transparent;
  border:1px solid var(--border); border-radius:999px;
  cursor:pointer; transition:all .15s;
}
.coven-records-arrow:hover { border-color:var(--border-bright); color:var(--fog); }
.coven-records-scroll {
  display:flex; flex-wrap:nowrap; gap:0.5rem;
  overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity;
  padding-bottom:0.25rem;
  -webkit-mask-image:linear-gradient(90deg, #000 92%, transparent);
          mask-image:linear-gradient(90deg, #000 92%, transparent);
}
.coven-records-scroll::-webkit-scrollbar { height:6px; }
.coven-records-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:999px; }
.coven-records-scroll::-webkit-scrollbar-track { background:transparent; }
.coven-record-chip {
  position:relative; display:flex; align-items:flex-start; gap:0.5rem;
  flex:0 0 auto; width:11rem; scroll-snap-align:start;
  padding:0.375rem 0.625rem 0.375rem 0.5rem; border-radius:8px; overflow:hidden;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--m-accent, var(--gold)) 12%, transparent), transparent 70%),
    rgba(18,12,28,0.55);
  border:1px solid var(--border);
}
.coven-record-chip::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--m-accent, var(--gold-pale)); }
.coven-record-chip-glyph { font-size:1rem; color:var(--m-accent, var(--gold-pale)); flex-shrink:0; }
.coven-record-chip-body { min-width:0; display:flex; flex-direction:column; line-height:1.1; }
.coven-record-chip-label { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1px; text-transform:uppercase; color:var(--dust); }
.coven-record-chip-name { font-family:var(--font-occult); font-weight:700; font-size:0.8125rem; color:var(--m-accent, var(--gold-pale)); margin-top:0.125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coven-record-chip-val { font-family:var(--font-vhs); font-weight:400; font-size:0.625rem; letter-spacing:0.5px; color:var(--fog); margin-top:0.125rem; line-height:1.2; white-space:normal; }

/* ── Taste / generic insight cards ── */
.coven-ins-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:0.75rem;
}
.coven-ins-card {
  background:rgba(18,12,28,0.55); border:1px solid var(--border); border-radius:10px; padding:0.75rem 0.875rem;
}
.coven-ins-card-title {
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-pale); margin-bottom:0.625rem; padding-bottom:0.4375rem;
  border-bottom:1px solid color-mix(in srgb, var(--gold) 14%, transparent);
}
.coven-ins-list { display:flex; flex-direction:column; }
.coven-ins-row {
  display:flex; align-items:center; gap:0.5rem; padding:0.375rem 0;
  border-top:1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.coven-ins-row:first-child { border-top:0; }
.coven-ins-row[onclick]:hover .coven-ins-row-name { color:var(--gold-pale); }
.coven-ins-row-main { flex:1; min-width:0; }
.coven-ins-row-name { font-family:var(--font-literary); font-weight:600; font-size:0.8125rem; color:#e8dcc8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .14s; }
.coven-ins-row-sub { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px; color:var(--dust); margin-top:0.0625rem; }
.coven-ins-row-val { font-family:var(--font-vhs); font-size:0.6875rem; letter-spacing:0.5px; color:var(--gold); flex-shrink:0; }

/* ── Charts (hand-rolled CSS/SVG — interactive) ── */
.coven-ins-grid.charts { grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr)); }

/* chart card header + toggles */
.coven-chart-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin-bottom:0.75rem; }
.coven-chart-title { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold-pale); }
.coven-chart-toggles { display:flex; align-items:center; gap:0.25rem; flex-shrink:0; }
.coven-chart-tg {
  font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px; color:var(--dust);
  background:transparent; border:1px solid var(--border); border-radius:5px;
  padding:0.125rem 0.375rem; cursor:pointer; transition:all .14s; min-width:1.5rem;
}
.coven-chart-tg:hover { border-color:var(--border-bright); color:var(--fog); }
.coven-chart-tg.on { color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent); background:color-mix(in srgb, var(--gold) 10%, transparent); }
.coven-chart-tg-sep { width:1px; height:0.875rem; background:var(--border); margin:0 0.125rem; }

/* pie + legend */
.coven-chart-pie-wrap { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.coven-chart-pie { width:9.5rem; height:9.5rem; flex-shrink:0; }
.coven-pie-slice { cursor:pointer; transition:opacity .12s; }
.coven-pie-slice:hover { opacity:0.82; }
.coven-chart-legend { display:flex; flex-direction:column; gap:0.3125rem; flex:1; min-width:8rem; }
.coven-chart-leg { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px; color:var(--fog); display:flex; align-items:center; gap:0.4375rem; cursor:pointer; padding:0.0625rem 0; border-radius:4px; transition:color .12s; }
.coven-chart-leg:hover, .coven-chart-leg.active { color:var(--gold-pale); }
.coven-chart-leg.active { font-weight:700; }
.coven-chart-leg b { color:var(--static); margin-left:auto; }
.coven-chart-dot { width:9px; height:9px; border-radius:2px; flex-shrink:0; }

/* clickable bars */
.coven-chart-bars { display:flex; flex-direction:column; gap:0.3125rem; }
.coven-chart-bar { display:grid; grid-template-columns:6rem 1fr 2.25rem; gap:0.4375rem; align-items:center; }
.coven-chart-clk { cursor:pointer; border-radius:5px; padding:0.0625rem 0.125rem; transition:background .12s; }
.coven-chart-clk:hover, .coven-chart-bar.active { background:color-mix(in srgb, var(--gold) 7%, transparent); }
.coven-chart-bar-label { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px; color:var(--fog); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coven-chart-bar-track { height:7px; border-radius:999px; background:rgba(255,255,255,0.05); overflow:hidden; }
.coven-chart-bar-fill { height:100%; background:var(--gold); opacity:0.9; border-radius:999px; }
.coven-chart-bar-val { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); text-align:right; }

/* drill-down panel */
.coven-chart-drill { margin-top:0.75rem; border-top:1px solid color-mix(in srgb, var(--gold) 14%, transparent); padding-top:0.5rem; max-height:13rem; overflow-y:auto; }
.coven-chart-drill-head { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1px; text-transform:uppercase; color:var(--gold-pale); margin-bottom:0.375rem; }
.coven-chart-drill-row { font-family:var(--font-literary); font-weight:600; font-size:0.8125rem; color:#e8dcc8; padding:0.25rem 0; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .12s; }
.coven-chart-drill-row:hover { color:var(--gold-pale); }

/* ratings histogram (columns) */
.coven-hist { display:flex; align-items:flex-end; gap:0.25rem; height:6rem; }
.coven-hist-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.coven-hist-bar { width:100%; background:linear-gradient(180deg, var(--gold-pale), color-mix(in srgb, var(--gold) 55%, transparent)); border-radius:2px 2px 0 0; min-height:2px; }
.coven-hist-x { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); margin-top:0.25rem; }

/* Coven Night — day-of-week bars */
.coven-dow { display:flex; align-items:flex-end; gap:0.375rem; height:5rem; }
.coven-dow-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.coven-dow-bar { width:100%; background:color-mix(in srgb, var(--gold) 45%, transparent); border-radius:3px 3px 0 0; min-height:3px; }
.coven-dow-col.top .coven-dow-bar { background:var(--gold); box-shadow:0 0 8px color-mix(in srgb, var(--gold) 45%, transparent); }
.coven-dow-x { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); margin-top:0.25rem; }
.coven-dow-note { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px; color:var(--fog); margin-top:0.5rem; text-align:center; }
.coven-dow-note b { color:var(--gold-pale); }

/* watch-night calendar heatmap (column-major: weeks across, 7 days down) */
.coven-heat-wrap { display:flex; flex-direction:column; gap:0.5rem; }
.coven-heat-body { display:flex; gap:0.375rem; }
.coven-heat-wds { display:grid; grid-template-rows:repeat(7, 1fr); gap:2px; }
.coven-heat-wd { font-family:var(--font-vhs); font-size:0.625rem; color:var(--dust); display:flex; align-items:center; }
.coven-heat { flex:1; display:grid; grid-auto-flow:column; grid-template-rows:repeat(7, 1fr); gap:2px; }
.coven-heat-cell { width:100%; aspect-ratio:1; border-radius:2px; background:rgba(255,255,255,0.04); }
.coven-heat-cell.lvl1 { background:color-mix(in srgb, var(--gold) 25%, transparent); }
.coven-heat-cell.lvl2 { background:color-mix(in srgb, var(--gold) 45%, transparent); }
.coven-heat-cell.lvl3 { background:color-mix(in srgb, var(--gold) 70%, transparent); }
.coven-heat-cell.lvl4 { background:var(--gold); }
.coven-heat-legend { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:0.5px; color:var(--dust); }
.coven-heat-scale { display:inline-flex; align-items:center; gap:2px; }
.coven-heat-scale i { width:0.625rem; height:0.625rem; border-radius:2px; display:inline-block; }

} /* end @layer features */