/* ── Locker shelves (Phase 1: tab structure) ────────────────────────────────
   Four-shelf tab bar (Movies · TV Shows · Franchises · Collections) for both
   My Locker and Coven Locker, plus the "coming soon" placeholder state.
   New feature CSS → @layer features (per CLAUDE.md). */
@layer features {

  .vc-locker-shelf-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 1.25rem;
    margin-bottom: 0.875rem;
  }

  /* Vertical rhythm for the shelf header stack. `--space-lg` (referenced by .locker-filters
     in main.css) is undefined site-wide, so those margins collapse to 0 — restore real gaps
     here, scoped to the locker. */
  .locker-filters { margin-bottom: 0.75rem; }

  .vc-locker-shelf-tab {
    font-family: var(--font-vhs);
    font-size: 0.5625rem;
    letter-spacing: 2px;
    color: var(--dust);
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
  }

  .vc-locker-shelf-tab:hover { color: var(--fog); }

  .vc-locker-shelf-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }

  .vc-locker-shelf-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 0.75rem;
    color: var(--dust);
  }

  .vc-locker-shelf-placeholder-icon {
    font-size: 2rem;
    opacity: 0.4;
  }

  .vc-locker-shelf-placeholder-text {
    font-family: var(--font-vhs);
    font-size: 0.5625rem;
    letter-spacing: 2px;
    color: var(--dust);
  }

  /* The locker views are wrapped at runtime in .dashboard-layout > .main-content
     (overflow-y:auto — see ensureSharedSidebars in auth.js). That `auto` makes
     .main-content a scroll container that never actually scrolls (the document
     scrolls, since .dashboard-layout is min-height), which kills the A-Z bar's
     position:sticky. Drop the scroll-container status for the locker panels so the
     bar sticks to the document (like .sidebar, which lives outside .main-content). */
  .shared-my-locker-main,
  .shared-coven-locker-main { overflow: visible; }

  /* ── A-Z jump bar (Phase 2: Movies/TV shelves, A-Z sort, by-title) ──
     Sticks below the fixed 66px nav (--vc-nav-h). Hidden by default in HTML. */
  .vc-locker-az-bar {
    position: sticky;
    top: var(--vc-nav-h, 66px);
    z-index: var(--z-sticky, 40);
    background: var(--deep);
    border-bottom: 1px solid var(--border);
    /* break out of the .history-wrap padding so the bar background spans full
       content width while the letters stay aligned with the grid below.
       calc(100% + 2.5rem) compensates for the negative margins symmetrically —
       a plain 100% would let the browser drop the negative right margin. */
    width: calc(100% + 2.5rem);
    margin: 0 -1.25rem 0.75rem;
    padding: 0 1.25rem;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
  }

  /* Each letter reads as its own small button (subtle border + fill).
     flex:1 lets the letters stretch to fill the full row width evenly. */
  .vc-az-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 26px;
    font-family: var(--font-vhs);
    font-size: 13px;
    letter-spacing: 0.5px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: none;
    padding: 0;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
  }

  .vc-az-has {
    color: var(--fog);
    cursor: pointer;
    background: color-mix(in srgb, var(--fog) 6%, transparent);
    border-color: var(--border);
  }
  .vc-az-has:hover {
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 38%, transparent);
  }
  /* Active = the section currently docked under the bar (scroll-spy). */
  .vc-az-active {
    background: color-mix(in srgb, var(--gold) 20%, transparent);
    color: var(--gold);
    border-color: var(--gold);
  }
  .vc-az-empty {
    color: var(--border);
    cursor: default;
    pointer-events: none;
    background: none;
    border-color: transparent;
  }

  /* TOP / BOTTOM edge buttons */
  .vc-az-edge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    font-family: var(--font-vhs);
    font-size: 9.5px;
    letter-spacing: 1.5px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--fog) 6%, transparent);
    color: var(--dust);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
  }
  .vc-az-edge:hover {
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 38%, transparent);
  }
  /* TOP highlights like an active letter when scrolled all the way up.
     Higher specificity than the base .vc-az-edge so the gold treatment wins. */
  .vc-az-edge.vc-az-active {
    background: color-mix(in srgb, var(--gold) 20%, transparent);
    color: var(--gold);
    border-color: var(--gold);
  }
  /* BOTTOM sits at the far right naturally now that the letters fill the row. */

  /* ── Franchises shelf (Phase 3) ── */
  .vc-locker-franchise-shelf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding: 0 0.125rem;
  }

  /* Card-grid column toggle (3 · 4 · 5) — shared by Franchises + Collections grids */
  .vc-card-cols-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }
  .vc-card-cols-label {
    font-family: var(--font-vhs);
    font-size: 0.5rem;
    letter-spacing: 1.5px;
    color: var(--dust);
    margin-right: 2px;
  }
  .vc-card-cols-btn {
    width: 24px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-vhs);
    font-size: 0.6875rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: color-mix(in srgb, var(--fog) 6%, transparent);
    color: var(--fog);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .vc-card-cols-btn:hover {
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 38%, transparent);
  }
  .vc-card-cols-btn.active {
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 18%, transparent);
    border-color: var(--gold);
  }
  /* Below the 1-column breakpoint the toggle is moot — hide it. */
  @media (max-width: 900px) { .vc-card-cols-toggle { display: none; } }
  .vc-franchise-shelf-grid {
    display: grid;
    grid-template-columns: repeat(var(--vc-card-cols, 3), 1fr);
    gap: 12px;
    padding: 0.75rem 0;
  }
  @media (max-width: 900px) { .vc-franchise-shelf-grid { grid-template-columns: 1fr; } }

  /* Franchise cards reuse .vc-event-card (main.css). The base card has no intrinsic
     height — match the Events cols3 layout so they aren't 0-height in our own grid. */
  .vc-franchise-shelf-grid .vc-event-card { aspect-ratio: 5 / 4; height: auto; }
  .vc-franchise-card { cursor: pointer; }
  .vc-franchise-card .evt-content { padding-bottom: 0.875rem; }

  /* Interior (shelf-within-shelf) */
  .vc-franchise-interior-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0 0.875rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
  }
  .vc-franchise-back-btn {
    font-family: var(--font-vhs);
    font-size: 0.5625rem;
    color: var(--dust);
    letter-spacing: 1px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0.625rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
  }
  .vc-franchise-back-btn:hover {
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 40%, transparent);
  }
  .vc-franchise-interior-title {
    font-family: var(--font-occult);
    font-size: 1rem;
    color: var(--gold);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vc-franchise-interior-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
  }

  /* ── Collections shelf (Phase 4) ── */
  .vc-collection-shelf-grid {
    display: grid;
    grid-template-columns: repeat(var(--vc-card-cols, 3), 1fr);
    gap: 12px;
    padding: 0.5rem 0;
  }
  @media (max-width: 900px) { .vc-collection-shelf-grid { grid-template-columns: 1fr; } }
  .vc-collection-shelf-grid .vc-event-card,
  .vc-collection-shelf-grid .vc-collection-card { aspect-ratio: 5 / 4; height: auto; }
  .vc-collection-card { cursor: pointer; }
  .vc-collection-card .evt-content { padding-bottom: 0.875rem; }

  .vc-coll-section-label {
    font-family: var(--font-vhs);
    font-size: 0.5rem;
    color: var(--dust);
    letter-spacing: 2px;
    padding: 0.75rem 0 0.375rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
  }

  .vc-coll-new-btn {
    border: 1px dashed var(--border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    padding: 1rem;
    color: var(--dust);
    transition: border-color 0.15s, color 0.15s;
    min-height: 140px;
    aspect-ratio: 5 / 4;
  }
  .vc-coll-new-btn:hover { border-color: var(--fog); color: var(--fog); }
  .vc-coll-new-icon  { font-size: 1.5rem; }
  .vc-coll-new-label { font-family: var(--font-vhs); font-size: 0.5625rem; letter-spacing: 1px; }

  .vc-coll-item-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-family: var(--font-vhs);
    font-size: 0.4375rem;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 3;
  }
  .vc-coll-item-badge--wishlist { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
  .vc-coll-item-badge--unowned  { background: rgba(0,0,0,.6); color: var(--dust); }

  .vc-coll-item-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,.7);
    border: 1px solid var(--border);
    color: var(--dust);
    font-size: 0.625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    z-index: 4;
  }
  .vc-collection-item-card:hover .vc-coll-item-remove { opacity: 1; }
  .vc-coll-item-remove:hover { color: var(--blood-bright); }

  .vc-vis-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-vhs);
    font-size: 0.4375rem;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    border: 1px solid;
  }
  .vc-vis-badge--coven    { color: var(--teal);   border-color: color-mix(in srgb, var(--teal) 35%, transparent);   background: color-mix(in srgb, var(--teal) 8%, transparent); }
  .vc-vis-badge--personal { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 35%, transparent); background: color-mix(in srgb, var(--violet) 8%, transparent); }
  .vc-vis-badge--shared   { color: var(--teal);   border-color: color-mix(in srgb, var(--teal) 20%, transparent);   opacity: 0.6; }

  .vc-coll-search-result {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 4px;
  }
  .vc-coll-search-result:hover { background: var(--deep); }

  /* New Collection form — bespoke panel reusing the site's form vocabulary
     (.form-group/.form-label/.form-input, .format-option, .btn-ritual, .modal-top-line). */
  .vc-coll-new-panel {
    position: relative;
    max-width: 560px;
    margin: 1.5rem auto;
    background: var(--deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.875rem 1.5rem;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5),
                0 0 0 1px color-mix(in srgb, var(--gold) 5%, transparent) inset;
    overflow: hidden;
  }
  .vc-coll-new-panel .modal-top-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: block;
  }
  .vc-coll-new-back {
    margin-bottom: 0.5rem;
  }
  .vc-coll-new-head {
    text-align: center;
    padding: 0.5rem 0 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--rim);
  }
  .vc-coll-new-sigil {
    font-size: 1.75rem;
    color: var(--gold);
    line-height: 1;
    text-shadow: 0 0 24px color-mix(in srgb, var(--gold) 35%, transparent);
    margin-bottom: 0.5rem;
  }
  .vc-coll-new-title {
    font-family: var(--font-occult);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold-pale);
    letter-spacing: 2px;
  }
  .vc-coll-new-eyebrow {
    font-family: var(--font-vhs);
    font-size: 0.5625rem;
    color: var(--dust);
    letter-spacing: 3px;
    margin-top: 0.375rem;
  }

  /* Visibility selectable cards (built on .format-option) */
  .vc-coll-vis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
  }
  .vc-coll-vis-card { gap: 0.25rem; padding: 0.875rem 0.75rem; }
  .vc-coll-vis-icon { font-size: 1.25rem; color: var(--gold); line-height: 1; }
  .vc-coll-vis-name {
    font-family: var(--font-occult);
    font-size: 0.8125rem;
    color: var(--gold-pale);
    letter-spacing: 1px;
  }
  .vc-coll-vis-desc {
    font-family: var(--font-vhs);
    font-size: 0.5rem;
    color: var(--dust);
    letter-spacing: 0.3px;
    line-height: 1.35;
  }

  .vc-coll-share-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: var(--font-vhs);
    font-size: 0.625rem;
    color: var(--fog);
    letter-spacing: 0.5px;
  }
  .vc-coll-share-label input { width: 15px; height: 15px; flex-shrink: 0; }
  .vc-coll-share-sub { color: var(--dust); }

  .vc-coll-new-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--rim);
  }

}