/* ════════════════════════════════════════════════════════════════════════
   profile.css — Acolyte page (2026-06 redesign)
   Pick-centric, brought into cohesion with the Codex / Queue / Coven card
   vocabulary. Profile-specific layout only; insight cards, records scroller,
   metric bars, charts, and the stat strip are reused from coven.css.
   @layer features. Accent = who (--m-accent), tier = rank (--m-tier).
   ════════════════════════════════════════════════════════════════════════ */
@layer features {

  /* ── Dossier banner (accent rail + glow, tier-ring avatar, embedded stats) ── */
  .vc-prof-banner {
    position: relative; overflow: hidden;
    border: 1px solid var(--border); border-radius: 12px;
    padding: 1.125rem 1.25rem 0.875rem 1.375rem;
    margin-bottom: 1.125rem;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--m-accent, var(--gold)) 11%, transparent), transparent 46%),
      linear-gradient(180deg, rgba(21,15,34,0.92), rgba(8,6,16,0.95));
  }
  .vc-prof-banner::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--m-accent, var(--picker-default));
    box-shadow: 0 0 12px color-mix(in srgb, var(--m-accent, var(--picker-default)) 45%, transparent);
  }
  .vc-prof-id-row { display: flex; align-items: center; gap: 0.875rem; }
  .vc-prof-avatar {
    width: 4rem; height: 4rem; flex-shrink: 0; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--chamber);
    border: 2px solid color-mix(in srgb, var(--m-tier, var(--gold)) 60%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--m-tier, var(--gold)) 22%, transparent);
    font-family: var(--font-occult); font-weight: 700; font-size: 1.5rem; color: var(--gold-pale);
  }
  .vc-prof-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .vc-prof-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
  .vc-prof-name {
    font-family: var(--font-occult); font-weight: 700; font-size: 1.375rem; line-height: 1.05;
    color: var(--m-accent, var(--gold-pale));
  }
  .vc-prof-tierline { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
  .vc-prof-tier {
    font-family: var(--font-vhs); font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase;
    color: var(--m-tier, var(--gold)); display: inline-flex; align-items: center; gap: 0.3125rem;
  }
  .vc-prof-arcana { font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 0.5px; color: var(--dust); }
  .vc-prof-arcana b { color: var(--fog); font-weight: 700; }
  .vc-prof-bio {
    font-family: var(--font-literary); font-style: italic; font-size: 0.8125rem;
    color: var(--fog); margin-top: 0.0625rem; line-height: 1.4;
  }
  .vc-prof-banner-actions { flex-shrink: 0; align-self: flex-start; }

  /* Stat strip embedded along the banner's bottom edge (strip its own framing,
     keep only a top divider so it reads as part of the dossier). */
  .vc-prof-banner .coven-statstrip {
    margin: 0.875rem 0 0; padding-top: 0.875rem;
    border: 0; border-top: 1px solid color-mix(in srgb, var(--gold) 14%, transparent);
    border-radius: 0; background: transparent; overflow: visible;
  }
  .vc-prof-banner .coven-stat { cursor: help; }
  /* Stack value over label with breathing room (the spans are inline by default) */
  .vc-prof-banner .coven-stat-v { display: block; }
  .vc-prof-banner .coven-stat-l { display: block; margin-top: 0.3125rem; }

  /* ── Locker snapshot ── */
  .vc-prof-locker-counts {
    display: flex; gap: 1.25rem; margin-bottom: 0.625rem;
    font-family: var(--font-vhs); font-size: 0.6875rem; letter-spacing: 0.5px; color: var(--dust);
  }
  .vc-prof-locker-counts b { font-family: var(--font-occult); font-weight: 700; font-size: 1rem; color: var(--gold-pale); margin-right: 0.25rem; }
  /* Recent Arrivals — 2 rows of 3, larger thumbnails */
  .vc-prof-locker-recent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.375rem; }
  .vc-prof-locker-poster {
    width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 4px; object-fit: cover;
    border: 1px solid var(--border);
  }

  /* ── Weighted tags (reuses .coven-bar; this is just the optional chip fallback) ── */
  .vc-prof-tagrow { display: flex; flex-wrap: wrap; gap: 0.375rem; }

  /* ── Charts row: let reused chart cards size sensibly on the profile ── */
  /* align-items:start so the short rating-curve card doesn't stretch to match
     the taller decades card (that was the big empty void under the bars) */
  .vc-prof-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.875rem; align-items: start; }
  /* Rating-curve histogram: fill the (already half-width) card and stand taller
     so it doesn't read tiny. No max-width cap — the half-card constrains it. */
  .vc-prof-charts .coven-hist { height: 13rem; margin: 0.5rem 0 0; gap: 0.4375rem; }

  /* ── New/Old palette toggle (in-line with Your Genres / Across the Decades) ── */
  .vc-pal-toggle { display: inline-flex; flex-shrink: 0; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
  .vc-pal-opt {
    font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--dust); background: transparent; border: 0; padding: 0.1875rem 0.5rem; cursor: pointer; transition: all .14s;
  }
  .vc-pal-opt:hover { color: var(--fog); }
  .vc-pal-opt.active { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }

  /* Decades chart header (title + toggle on one ruled row) */
  .vc-prof-chart-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin-bottom: 0.625rem; padding-bottom: 0.4375rem;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 14%, transparent);
  }
  .vc-prof-chart-title { font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-pale); }

  /* ── Weighted bars (Your Genres / Across the Decades) — label above track,
     brighter than .coven-bar; per-bar fill via --bar. ── */
  .vc-prof-bar { margin-bottom: 0.625rem; }
  .vc-prof-bar:last-child { margin-bottom: 0; }
  .vc-prof-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
  .vc-prof-bar-name { font-family: var(--font-occult); font-weight: 700; font-size: 0.8125rem; color: #e8dcc8; line-height: 1.1; }
  .vc-prof-bar-count { font-family: var(--font-vhs); font-size: 0.6875rem; letter-spacing: 0.5px; color: var(--gold-pale); flex-shrink: 0; }
  .vc-prof-bar-track { height: 6px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
  .vc-prof-bar-fill { height: 100%; border-radius: 999px; background: var(--bar, var(--gold)); }

  /* ── Obsessions 2×4 grid ── */
  .vc-prof-obs-section { margin-bottom: 1.125rem; }
  .vc-prof-obsessions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
  @media (max-width: 700px) { .vc-prof-obsessions-grid { grid-template-columns: repeat(2, 1fr); } }
  .vc-prof-obs-card {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px;
    padding: 0.625rem 0.75rem 0.625rem 0.875rem;
  }
  .vc-prof-obs-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--rail, var(--border));
  }
  .vc-prof-obs-label {
    font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--dust); display: flex; align-items: center; gap: 0.3125rem;
  }
  .vc-prof-obs-glyph { font-size: 0.75rem; }
  .vc-prof-obs-card.tier-1 .vc-prof-obs-glyph { color: var(--rail); }
  .vc-prof-obs-card.tier-2 .vc-prof-obs-glyph { color: var(--gold-pale); }
  .vc-prof-obs-card.tier-3 .vc-prof-obs-glyph { color: var(--dust); }
  .vc-prof-obs-name {
    font-family: var(--font-occult); font-weight: 700; font-size: 0.8125rem; line-height: 1.15;
    color: #e8dcc8; margin-top: 0.3125rem;
  }
  .vc-prof-obs-card.tier-3 .vc-prof-obs-name { color: var(--fog); }
  .vc-prof-obs-name.empty { color: var(--dust); font-style: italic; }
  .vc-prof-obs-val { font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 0.5px; color: var(--dust); margin-top: 0.125rem; }

  /* ── Lower 4-column row ── */
  .vc-prof-lower-row { display: grid; grid-template-columns: 1fr 1fr 2fr 1fr; gap: 0.875rem; margin-bottom: 1.125rem; }
  /* keep the Ratings/Genres row on the same rhythm */
  #view-profile .vc-two-col { margin-bottom: 1.125rem; }
  @media (max-width: 1000px) { .vc-prof-lower-row { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px)  { .vc-prof-lower-row { grid-template-columns: 1fr; } }

  /* What You Brought — flag glyphs */
  .vc-prof-brought-flag.best { color: var(--gold); }
  .vc-prof-brought-flag.divisive { color: var(--dust); }

  /* ── Locker Snapshot ── */
  .vc-prof-locker-head { display: flex; justify-content: flex-end; margin-top: -0.25rem; }
  .vc-prof-locker-seeall {
    font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 1px; text-transform: uppercase;
    color: var(--dust); cursor: pointer; transition: color .14s;
  }
  .vc-prof-locker-seeall:hover { color: var(--gold-pale); }
  .vc-prof-locker-count-hero { display: flex; gap: 1.5rem; margin: 0.25rem 0 0.75rem; }
  .vc-prof-locker-stat { display: flex; flex-direction: column; }
  .vc-prof-locker-num { font-family: var(--font-occult); font-weight: 700; font-size: 1.125rem; color: var(--gold); line-height: 1; }
  .vc-prof-locker-lbl { font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 1px; text-transform: uppercase; color: var(--dust); margin-top: 0.1875rem; }
  .vc-prof-locker-recent-label { font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dust); margin: 0.75rem 0 0.375rem; }

  /* ── Grimoire empty state (centered in the wide column) ── */
  .vc-prof-grimoire-empty { display: flex; align-items: center; justify-content: center; min-height: 140px; text-align: center; }

  /* ── Coven roster ── */
  .vc-prof-coven-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
  .vc-prof-coven-title { font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-pale); }
  .vc-prof-coven-sub { font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 1px; text-transform: uppercase; color: var(--dust); }
  .vc-prof-coven-roster { display: flex; flex-direction: column; }
  .vc-prof-coven-member-row {
    position: relative; display: flex; align-items: center; gap: 0.875rem;
    padding: 0.9375rem 0.625rem 0.9375rem 1rem; cursor: pointer; transition: background .14s;
  }
  /* per-member accent rail + glow */
  .vc-prof-coven-member-row::before {
    content: ''; position: absolute; left: 0; top: 0.4375rem; bottom: 0.4375rem; width: 3px;
    border-radius: 2px; background: var(--m-accent, var(--border));
    box-shadow: 0 0 8px color-mix(in srgb, var(--m-accent, transparent) 40%, transparent);
  }
  /* faint divider between members */
  .vc-prof-coven-member-row + .vc-prof-coven-member-row { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
  .vc-prof-coven-member-row:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
  .vc-prof-coven-member-row.is-me { cursor: default; }
  .vc-prof-coven-member-row.is-me:hover { background: transparent; }
  .vc-prof-coven-avatar {
    width: 2.5rem; height: 2.5rem; border-radius: 8px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-occult); font-weight: 700; font-size: 1rem; color: var(--gold-pale);
    border: 1.5px solid var(--m-accent, var(--border));
    background: color-mix(in srgb, var(--m-accent, var(--gold)) 10%, transparent);
  }
  .vc-prof-coven-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .vc-prof-coven-member-name {
    flex: 1; min-width: 0; font-family: var(--font-occult); font-weight: 700; font-size: 1rem;
    color: var(--m-accent, var(--gold-pale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .vc-prof-coven-member-tier { font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 0.5px; color: var(--dust); flex-shrink: 0; white-space: nowrap; }

}