/* ══════════════════════════════════════════════════════════════════
   events.css — Event interior (detail-as-page), hero banner, planning
   list view, expandable WT-scoped episode chunks, draft mode.
   @layer features (outranks the component-layer event rules in main.css).
   Member/user colour → inline --m-accent (data); system colour → tokens.
   ══════════════════════════════════════════════════════════════════ */
@layer features {

  /* ── Interior shell ─────────────────────────────────────────────── */
  .evt-interior { display:flex; flex-direction:column; }

  .evt-interior-header {
    display:flex; align-items:center; gap:0.75rem;
    padding:0.25rem 0 0.875rem; margin-bottom:0.875rem;
    border-bottom:1px solid rgba(var(--evt-accent-rgb,201,151,58),.25);
  }
  .evt-interior-back {
    flex-shrink:0;
    font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--dust); background:transparent;
    border:1px solid var(--border); border-radius:6px;
    padding:0.375rem 0.75rem; cursor:pointer; transition:border-color .15s, color .15s;
  }
  .evt-interior-back:hover { border-color:rgba(var(--evt-accent-rgb,201,151,58),.6); color:var(--static); }
  .evt-interior-title {
    flex:1; min-width:0;
    font-size:1.375rem; font-weight:900; text-transform:uppercase; letter-spacing:.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .evt-interior-edit {
    flex-shrink:0;
    font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--gold-pale); background:rgba(var(--evt-accent-rgb,201,151,58),.08);
    border:1px solid rgba(var(--evt-accent-rgb,201,151,58),.35); border-radius:6px;
    padding:0.375rem 0.75rem; cursor:pointer; transition:background .15s, border-color .15s;
  }
  .evt-interior-edit:hover { background:rgba(var(--evt-accent-rgb,201,151,58),.18); border-color:rgba(var(--evt-accent-rgb,201,151,58),.6); }

  /* ── Hero banner (wide Ken Burns) ───────────────────────────────── */
  .vc-event-card.evt-hero {
    aspect-ratio:auto; height:clamp(13rem, 30vw, 20rem);
    width:100%; margin-bottom:1.125rem; cursor:default;
    border-radius:16px;
  }
  .vc-event-card.evt-hero:hover { transform:none; }
  .evt-hero-content { padding:1.5rem 1.75rem; }
  .evt-hero-name { font-size:clamp(1.75rem, 4vw, 3rem); margin-bottom:0.625rem; }
  .evt-hero-desc {
    font-family:var(--font-grimoire); font-style:italic; font-size:0.8125rem;
    color:rgba(255,255,255,.6); margin:0.25rem 0 0.625rem; max-width:46rem;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .evt-hero-progress { max-width:24rem; }

  /* ── List (planning) view ───────────────────────────────────────── */
  .evt-llist { display:flex; flex-direction:column; gap:0.375rem; }
  .evt-lrow-wrap { display:flex; flex-direction:column; }

  /* Fixed columns so caret / poster / title / right-info line up across every row. */
  .evt-lrow {
    position:relative; display:grid;
    grid-template-columns: 1.75rem 2.25rem minmax(0,1fr) 9.5rem;
    align-items:center; gap:0.625rem;
    min-height:3.1rem; padding:0.3125rem 0.875rem 0.3125rem 0.9375rem;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--m-accent, var(--picker-default)) 9%, transparent), transparent 38%),
      rgba(18,12,28,.55);
    border:1px solid var(--border); border-radius:8px;
    overflow:hidden; cursor:pointer; transition:border-color .14s, background .14s;
  }
  .evt-lrow:hover { border-color:color-mix(in srgb, var(--m-accent, var(--gold)) 45%, var(--border)); }
  .evt-lrow.is-locked { box-shadow:inset 3px 0 0 0 color-mix(in srgb, var(--evt-accent, #c9973a) 60%, transparent); }
  .evt-lrow--drag { cursor:grab; }
  .evt-lrow--drag:active { cursor:grabbing; }
  .evt-lrow.evt-dragging { opacity:.5; transform:scale(.99); }

  .evt-lrow-rail {
    position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--m-accent, var(--picker-default));
    box-shadow:0 0 10px color-mix(in srgb, var(--m-accent, var(--picker-default)) 45%, transparent);
  }
  .evt-lrow-caret {
    width:1.75rem; height:1.75rem; display:flex; align-items:center; justify-content:center;
    background:rgba(var(--evt-accent-rgb,201,151,58),.08); border:1px solid rgba(var(--evt-accent-rgb,201,151,58),.28);
    border-radius:6px; color:var(--gold-pale); cursor:pointer;
    font-size:0.9375rem; line-height:1; transition:transform .15s, color .15s, background .15s, border-color .15s;
  }
  .evt-lrow-caret:hover { color:var(--static); background:rgba(var(--evt-accent-rgb,201,151,58),.2); border-color:rgba(var(--evt-accent-rgb,201,151,58),.5); }
  .evt-lrow-caret.open { transform:rotate(90deg); }
  /* Placeholder keeps the caret COLUMN width so every row's poster/title align. */
  .evt-lrow-caret--none { background:transparent; border:none; cursor:default; visibility:hidden; }

  .evt-lrow-thumb { width:2.25rem; height:3.375rem; object-fit:cover; border-radius:4px; background:var(--chamber); }
  .evt-lrow-thumb--ph { display:flex; align-items:center; justify-content:center; color:var(--dust); font-size:0.875rem; }

  .evt-lrow-main { min-width:0; }
  .evt-lrow-title {
    font-family:var(--font-literary); font-weight:600; font-size:0.9375rem; color:#e8dcc8;
    line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .evt-lrow-meta {
    font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:.5px; color:var(--dust);
    margin-top:0.0625rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .evt-lrow-prog { color:var(--gold-pale); margin-left:0.25rem; }
  .evt-lrow-lock { margin-left:0.4375rem; font-size:0.75rem; }

  /* Right column — watch date + picker, right-aligned in a fixed band. */
  .evt-lrow-right {
    display:flex; flex-direction:column; align-items:flex-end; gap:0.1875rem;
    min-width:0; text-align:right;
  }
  .evt-lrow-date {
    font-family:var(--font-vhs); font-size:0.5625rem; letter-spacing:.5px; color:var(--fog);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }
  .evt-lrow-picker {
    font-family:var(--font-vhs); font-size:0.5625rem; letter-spacing:.5px; text-transform:uppercase;
    color:var(--m-accent, var(--gold-pale));
    border:1px solid color-mix(in srgb, var(--m-accent, var(--gold)) 32%, transparent);
    background:color-mix(in srgb, var(--m-accent, var(--gold)) 9%, transparent);
    border-radius:999px; padding:0.0625rem 0.4375rem; white-space:nowrap;
    max-width:100%; overflow:hidden; text-overflow:ellipsis;
  }

  /* Actions overlay the right column on hover (so columns never shift). */
  .evt-lrow-acts {
    position:absolute; top:50%; right:0.875rem; transform:translateY(-50%);
    display:flex; gap:0.25rem; opacity:0; pointer-events:none; transition:opacity .14s;
    padding-left:1.25rem;
    background:linear-gradient(90deg, transparent, rgba(18,12,28,.96) 30%);
  }
  .evt-lrow:hover .evt-lrow-acts { opacity:1; pointer-events:auto; }
  .evt-lrow-act {
    width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-vhs); font-size:0.75rem; line-height:1;
    border-radius:5px; border:1px solid; cursor:pointer; transition:background .12s, transform .1s;
  }
  .evt-lrow-act:hover { transform:translateY(-1px); }

  /* ── Episode sub-panel (expanded chunk) ─────────────────────────── */
  .evt-eplist {
    display:flex; flex-direction:column; gap:0.1875rem;
    margin:0.1875rem 0 0.375rem 1.75rem;
    padding:0.375rem; border-left:2px solid rgba(var(--evt-accent-rgb,201,151,58),.35);
    background:rgba(8,5,16,.5); border-radius:0 8px 8px 0;
  }
  .evt-eplist-loading, .evt-eplist-empty {
    font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:1px; color:var(--dust); padding:0.375rem 0.5rem;
  }
  .evt-eprow {
    display:flex; align-items:center; gap:0.5rem;
    padding:0.25rem 0.4375rem; border-radius:6px; transition:background .12s;
  }
  .evt-eprow:hover { background:rgba(255,255,255,.04); }
  .evt-eprow.is-unaired { opacity:.5; }
  /* Right-side action button (replaces the old left dot marker). */
  .evt-epbtn {
    flex-shrink:0;
    font-family:var(--font-vhs); font-size:0.5625rem; letter-spacing:1px; text-transform:uppercase;
    padding:0.25rem 0.625rem; border-radius:6px; cursor:pointer; line-height:1;
    border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    background:color-mix(in srgb, var(--gold) 10%, transparent); color:var(--gold-pale);
    transition:background .12s, color .12s, border-color .12s;
  }
  .evt-epbtn:hover:not(:disabled) { background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--gold); border-color:color-mix(in srgb, var(--gold) 60%, transparent); }
  .evt-epbtn:disabled { cursor:not-allowed; opacity:.45; }
  .evt-epbtn.is-watched {
    background:color-mix(in srgb, var(--gold) 20%, transparent);
    border-color:color-mix(in srgb, var(--gold) 55%, transparent); color:var(--gold);
  }
  .evt-epbtn.is-watched:hover:not(:disabled) { background:color-mix(in srgb, var(--blood) 20%, transparent); border-color:color-mix(in srgb, var(--blood) 50%, transparent); color:var(--blood-bright); }
  .evt-epstill { flex-shrink:0; width:3rem; height:1.6875rem; object-fit:cover; border-radius:3px; background:var(--chamber); }
  .evt-epstill--ph { display:inline-block; }
  .evt-epmain { flex:1; min-width:0; font-size:0.8125rem; color:var(--static); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .evt-epnum { font-family:var(--font-vhs); font-size:0.625rem; letter-spacing:.5px; color:var(--gold-pale); margin-right:0.25rem; }
  .evt-epname { font-family:var(--font-literary); }
  .evt-eprow.is-watched .evt-epname { color:var(--gold-pale); }
  .evt-eppicker {
    flex-shrink:0; font-family:var(--font-vhs); font-size:0.5rem; letter-spacing:.5px; text-transform:uppercase;
    color:var(--m-accent, var(--gold-pale));
    border:1px solid color-mix(in srgb, var(--m-accent, var(--gold)) 32%, transparent);
    background:color-mix(in srgb, var(--m-accent, var(--gold)) 9%, transparent);
    border-radius:999px; padding:0.0625rem 0.4375rem; white-space:nowrap; max-width:8rem; overflow:hidden; text-overflow:ellipsis;
  }
  .evt-epunaired {
    flex-shrink:0; font-family:var(--font-vhs); font-size:0.5rem; letter-spacing:1px; text-transform:uppercase;
    color:var(--dust); border:1px solid var(--border); border-radius:4px; padding:0.0625rem 0.3125rem;
  }

  /* ── Drill-in: focused container for a single group's episodes ──── */
  .evt-drill { display:flex; flex-direction:column; }
  .evt-drill-head {
    display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;
    padding-bottom:0.625rem; margin-bottom:0.625rem;
    border-bottom:1px solid rgba(var(--evt-accent-rgb,201,151,58),.2);
  }
  .evt-drill-title {
    font-family:var(--font-literary); font-weight:600; font-size:1.0625rem; color:var(--bone, #e8e3d9);
  }
  .evt-drill-scope { font-family:var(--font-vhs); font-size:0.6875rem; letter-spacing:1px; color:var(--gold-pale); }
  .evt-eplist--drill { margin:0; border-left:none; border-radius:10px; padding:0.5rem; background:rgba(8,5,16,.4); }
  .evt-eplist--drill .evt-eprow { padding:0.375rem 0.5rem; }
  .evt-eplist--drill .evt-epstill { width:4rem; height:2.25rem; }
  .evt-eplist--drill .evt-epmain { font-size:0.875rem; }

  /* Draft mode — de-emphasise the running order rows for fast organizing */
  .evt-llist.is-draft .evt-lrow { background:rgba(18,12,28,.42); }
  .evt-llist.is-draft .evt-lrow-thumb { opacity:.65; }

}