/* viewer-only additions on top of Sequence's real CSS */
:root{ --seq-menu-bg:#fff; }

.fade-scrollbar{ scrollbar-width:thin; scrollbar-color:#d4d4d8 transparent; }
.fade-scrollbar::-webkit-scrollbar{ width:10px; }
.fade-scrollbar::-webkit-scrollbar-thumb{ background:#d4d4d8; border-radius:99px; border:3px solid transparent; background-clip:content-box; }

/* dropdown menus */
.seq-menu{
  position:fixed; z-index:70;
  background:var(--seq-menu-bg); border:1px solid var(--color-divider,#e4e4e7);
  border-radius:12px; box-shadow:0 12px 34px rgba(17,17,16,.14), 0 2px 6px rgba(17,17,16,.06);
  padding:6px; min-width:232px; max-height:min(60vh,520px); overflow:auto;
}
.seq-menu.left{ right:auto; left:0; }
.seq-menu-item{
  display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px;
  font-size:13px; font-weight:500; color:var(--color-ink-secondary,#52525b); cursor:pointer; white-space:nowrap;
}
.seq-menu-item:hover{ background:var(--color-control,#f4f4f5); color:var(--color-ink,#18181b); }
.seq-menu-item.active{ color:var(--color-ink,#18181b); font-weight:600; }
.seq-menu-item .cnt{ margin-left:auto; color:var(--color-ink-faint,#a1a1aa); font-size:12px; font-variant-numeric:tabular-nums; }
.seq-menu-item .tick{ width:14px; height:14px; opacity:0; flex-shrink:0; }
.seq-menu-item.checked .tick{ opacity:1; }
.seq-menu-label{ font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--color-ink-faint,#a1a1aa); padding:8px 9px 4px; }
.seq-menu-sep{ height:1px; background:var(--color-divider,#e4e4e7); margin:5px 2px; }

/* active filter cues */
.seq-chip-active{ border-color:var(--color-ink,#18181b) !important; color:var(--color-ink,#18181b) !important; background:#fff !important; }
.seq-chip-n{
  display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:var(--color-ink,#18181b); color:#fff; font-size:10px; font-weight:700;
}
.seq-chip-clear{
  display:inline-flex; align-items:center; gap:1.5; height:36px; flex-shrink:0; padding:0 12px; border-radius:999px;
  border:1px dashed var(--color-divider,#e4e4e7); background:transparent; color:var(--color-ink-muted,#71717a);
  font-size:13px; font-weight:500; cursor:pointer;
}
.seq-chip-clear:hover{ color:var(--color-ink,#18181b); border-color:var(--color-ink-faint,#a1a1aa); }

/* sticky sidebar column (our own layout, Sequence's CSS has no md:sticky) */
.seq-side{ width:257px; flex-shrink:0; position:sticky; top:0; height:100dvh; align-self:flex-start; }
@media (max-width:767px){ .seq-side{ width:auto; position:static; height:auto; } }

/* hook-slot chips inside the hook formula */
.seq-slot{
  display:inline-flex; align-items:center; border-radius:6px;
  background:#eaf6ec; color:#22543d; font-size:13px; font-weight:600;
  padding:1px 6px; margin:0 2px; white-space:nowrap;
}

/* library-card hover affordances */
.library-card{ transition:box-shadow .15s ease; }
.library-card:hover{ box-shadow:0 0 0 1px var(--color-divider,#e4e4e7), 0 6px 18px rgba(17,17,16,.09); }
.library-card .hover-ctl{ opacity:0; pointer-events:none; transition:opacity .2s ease; }
.library-card:hover .hover-ctl{ opacity:1; pointer-events:auto; }
.library-card .play-overlay{ opacity:1; transition:opacity .15s ease; }
.library-card.playing .play-overlay{ opacity:0 !important; pointer-events:none !important; }
.tag-pill{ white-space:nowrap; }

/* modal */
.seq-modal-backdrop{ position:fixed; inset:0; background:rgba(9,9,11,.45); backdrop-filter:blur(3px); z-index:90; }
.seq-modal-layer{ position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:16px; }
.seq-modal{ animation:seq-pop .16s ease-out; }
@keyframes seq-pop{ from{ opacity:0; transform:scale(.97) } to{ opacity:1; transform:scale(1) } }
.seq-scroll::-webkit-scrollbar{ width:8px }
.seq-scroll::-webkit-scrollbar-thumb{ background:#d4d4d8; border-radius:99px }

/* skeleton */
.seq-skel{ background:linear-gradient(90deg,#ececee 25%,#f6f6f8 37%,#ececee 63%); background-size:400% 100%; animation:seq-sh 1.2s ease infinite; border-radius:14px; }
@keyframes seq-sh{ 0%{ background-position:100% 0 } 100%{ background-position:0 0 } }

/* tooltips */
.seq-tip{ position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:#18181b; color:#fff; font-size:11px; padding:4px 8px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; z-index:80; }
.has-tip:hover .seq-tip{ opacity:1; }

/* toast */
.seq-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 12px);
  background:#18181b; color:#fff; font-size:13px; font-weight:500;
  padding:9px 14px; border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.24);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:120;
}
.seq-toast.show{ opacity:1; transform:translate(-50%, 0); }