/* Track title + kicker (kept conservative; relies on existing typography) */
.track-h1{ margin: 18px 0 6px; }
.track-kicker{
  margin: 0 0 14px;
  color: #666;
  font-size: 0.98rem;
}
.track-kicker a{ color: inherit; text-decoration: none; }
.track-kicker a:hover{ text-decoration: underline; }
.track-kicker .sep{ margin: 0 8px; color: #bbb; }

/* Top section: SEO paragraph left, facts right */
.track-top{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
  margin-bottom: 14px;
}

.track-facts{
  background: #e4e8ec;
  border: 1px solid #c9d0d7;
  border-radius: 14px;
  padding: 8px;
}

.fact-row{
  display: grid;
  grid-template-columns: 64px 1fr 40px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: transparent;
}
.fact-row:first-child{ border-top: none; }

.fact-k{
  color: #555;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fact-v{
  color: #111;
  font-size: 0.92rem;
  font-weight: 650;
}
.fact-spacer{ height: 1px; }

/* Excel-style filter button */
.facet-btn{
  border: 1px solid #0f3a22;
  background: #124b2b;
  border-radius: 10px;
  height: 32px;
  width: 40px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.facet-icon{ display: grid; gap: 3px; }
.facet-icon span{
  display: block;
  height: 2px;
  background: #fff3a6;
  border-radius: 2px;
}
.facet-icon span:nth-child(1){ width: 16px; }
.facet-icon span:nth-child(2){ width: 12px; }
.facet-icon span:nth-child(3){ width: 8px;  }

.facet-btn.is-active{
  background: #16c24a;
  border-color: #0b7c2a;
}
.facet-btn.is-active .facet-icon span{ background: #ffe600; }
.facet-btn:hover{ border-color: #f08a00; }

/* ================================
   Shortlist / comparison colour role
   ================================ */
:root{
  --shortlist-bg:      #1b2533;
  --shortlist-border:  #2b3a52;
  --shortlist-accent:  #7fa6d6;
  --shortlist-accent-strong: #9fc2f0;
}

/* Unified filter look (muted idle): instruments + perfect-for */
.inst-synths .inst-btn,
.inst-other  .inst-btn,
.chips-filters .chip-btn{
  background: #1b2f26;
  border: 1px solid #243a31;
  color: #cfd8b6;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  white-space: nowrap;
}
.inst-synths .inst-btn:hover,
.inst-other  .inst-btn:hover,
.chips-filters .chip-btn:hover{ border-color: #f08a00; }

.inst-synths .inst-btn.is-active,
.inst-other  .inst-btn.is-active,
.chips-filters .chip-btn.is-active{
  background: #16c24a;
  border-color: #0b7c2a;
  color: #ffe600;
}
.inst-synths .inst-btn-all{ letter-spacing: 0.02em; }

/* Query bar */
.querybar{
  margin: 8px 0 18px;
  padding: 10px;
  border-top: 6px solid #f08a00;
  border-radius: 10px;
  background: #fff;
}
.querybar.is-hidden{ display: none; }

.querybar-inner{
  display: flex;
  gap: 10px;
  align-items: center;
}
.querybar-label{
  font-weight: 800;
  white-space: nowrap;
  font-size: 0.95rem;
}
#queryInput{
  flex: 1;
  font-size: 1.0rem;
  padding: 9px 11px;
}
.querybar-go{
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  background: #111;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.querybar-clear{
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  cursor: pointer;
}
.querybar-header{ margin-bottom: 6px; }
.querybar-beta{ font-weight: normal; color: #888; }
.querybar-helper{ font-size: 0.9em; color: #777; margin-top: 2px; }

/* Search progress */
.search-progress{
  margin: 8px 0 10px;
  padding: 10px;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  background: #fff;
}
.search-progress.is-hidden{ display:none; }

.sp-labels, .sp-values{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  font-size: 0.78rem;
}
.sp-labels .sp-l{
  font-weight: 800;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sp-labels .sp-l,
.sp-values .sp-v{ text-align: center; }
.sp-values .sp-v{ font-weight: 900; color: #111; }

.sp-bar{
  margin: 8px 0 6px;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #f3f3f3;
  position: relative;
  display: flex;
}
.sp-seg{ height: 100%; }
.sp-pages{
  background: linear-gradient(180deg,#2fe36c 0%,#16c24a 100%);
}
.sp-live{ background: #00c8ff; }
.sp-scheduled{ background: #d9b873; opacity: 0.85; }
.sp-remaining{ background: #6a4b2a; }

.sp-note{
  margin-top: 4px;
  font-size: 0.85em;
  color: #777;
  font-style: italic;
}

/* Chips layout */
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.h-mini{
  margin: 14px 0 10px;
  font-size: 1.1rem;
  font-weight: 800;
}
.chips-compact{ gap: 8px; margin-bottom: 0; }

/* Cubase screenshot */
.cubase-wrap{
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.cubase-wrap img{ width: 100%; display: block; }

/* Preview emphasis */
.preview-primary{
  background: linear-gradient(180deg, #0e0f10, #15171a);
  border: 1px solid #2a2d33;
  border-radius: 16px;
  padding: 8px 10px;   /* was 12px */
  margin: 6px 0 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 18px rgba(0,0,0,0.35);
}
.preview-primary audio{ width: 100%; filter: saturate(1.15); }

/* Instruments */
.inst-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 18px;
}

/* Defensive: if your grid is fixed-columns elsewhere, force full span */
.inst-grid.inst-single .inst-card {
  grid-column: 1 / -1;
}
.inst-grid.inst-single .inst-actions {
  flex-wrap: wrap;        /* keep wrap available */
  gap: 8px;               /* whatever you already use */
}

.inst-synths{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* If only one synth is present, force single column for synth grid */
.inst-grid.inst-synths.inst-single{
  grid-template-columns: 1fr !important;
}


@media (max-width: 900px){ .inst-synths{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .inst-synths{ grid-template-columns: 1fr; } }

.inst-card{
  border: 1px solid #e7e7e7;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
}
.inst-title{
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.inst-maker{
  font-weight: 700;
  font-size: 0.75rem;
  color: #666;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #e7e7e7;
  background: #fafafa;
}
.inst-actions{ display: flex; flex-wrap: wrap; gap: 8px; }

.inst-other{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px){ .inst-other{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .inst-other{ grid-template-columns: 1fr; } }

.inst-role{
  margin-left: 8px;
  color: rgba(207, 216, 182, 0.95);
  font-weight: 700;
}

/* Scrollrow rule */
.inst-scrollrow{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.inst-scrollrow .inst-card{
  flex: 0 0 auto;
  min-width: 320px;
}

/* ================================
   Similar tracks grid
   ================================ */
.sim-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 18px;
}
@media (max-width: 900px){ .sim-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .sim-grid{ grid-template-columns: 1fr; } }

.sim-item{
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.sim-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sim-title{
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-actions{ display: flex; gap: 6px; flex: 0 0 auto; }

.sim-btn{
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #0f3a22;
  background: #124b2b;
  color: #fff3a6;
  text-decoration: none;
  font-weight: 900;
  cursor: pointer;
}
.sim-btn:hover{ border-color: #f08a00; }

.sim-btn.is-disabled{
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  border-color: #999;
  background: #555;
  color: #ccc;
}

.sim-audio{
  width: 100%;
  height: 32px;
}

/* ================================
   Reorderable panels (session-only)
   ================================ */
.panel{
  margin: 0 0 16px;
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #f6f7f8;
  border-bottom: 1px solid #e7e7e7;
}
.panel-title{
  font-weight: 900;
  font-size: 0.95rem;
  color: #111;
}
.panel-body{ padding: 12px; }

.panel-move{
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.panel-btn{
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #0f3a22;
  background: #124b2b;
  color: #fff3a6;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}
.panel-btn:hover{ border-color: #f08a00; }
.panel-btn:disabled{
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  border-color: #999;
  background: #555;
  color: #ccc;
}

/* Move-to-top button: secondary emphasis */
.panel-btn.panel-top{
  opacity: 0.75;
}

.panel-btn.panel-top:hover{
  opacity: 1;
}


/* ================================
   Shortlist panel UI
   ================================ */
.shortlist-count{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  background: #eef2f7;
  border: 1px solid #d6dde7;
  color: #111;
}
.shortlist-empty{
  font-size: 0.92rem;
  color: #666;
  padding: 8px 0;
}
.shortlist-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px){ .shortlist-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .shortlist-grid{ grid-template-columns: 1fr; } }

.short-item{
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}
.short-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.short-title{
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.short-actions{ display: flex; gap: 6px; flex: 0 0 auto; }
.short-audio{ width: 100%; height: 32px; }

/* =========================================================
   Shortlist star (Similar Tracks) — RADICAL, AUTHORITATIVE
   Dark blue button, light-blue star when idle.
   Hover: lighter blue background.
   Selected: bright blue background + bright yellow star.
   ========================================================= */

/* IDLE */
#similarTracks .sim-actions .sim-btn.sim-bookmark{
  background: #0b1f3a;        /* dark blue */
  border-color: #163a63;
  color: #7fb6ff;             /* light blue star */
}

/* HOVER (idle) */
#similarTracks .sim-actions .sim-btn.sim-bookmark:hover{
  background: #12305a;        /* lighter blue background */
  border-color: #2a66a6;
  color: #b8dcff;             /* lighter star */
}

/* SELECTED */
#similarTracks .sim-actions .sim-btn.sim-bookmark.is-shortlisted{
  background: #1e6bff;        /* nice bright blue */
  border-color: #0b3fa8;
  color: #ffe600;             /* bright yellow star */
  box-shadow:
    0 0 0 1px rgba(30,107,255,0.65),
    0 0 14px rgba(30,107,255,0.50);
}

/* HOVER (selected) */
#similarTracks .sim-actions .sim-btn.sim-bookmark.is-shortlisted:hover{
  background: #3b82ff;        /* slightly brighter on hover */
  border-color: #1e6bff;
  color: #fff1a8;             /* warm pale yellow */
}



/* =========================================================
   Shortlist panel — force BLUE semantics (never green)
   ========================================================= */

#shortlistPanel .sim-btn{
  background: #0b1f3a;        /* dark blue */
  border-color: #163a63;
  color: #7fb6ff;             /* light blue star */
}

/* Hover in shortlist */
#shortlistPanel .sim-btn:hover{
  background: #12305a;
  border-color: #2a66a6;
  color: #b8dcff;
}

/* Selected (shortlisted is always "selected" here) */
#shortlistPanel .sim-btn.is-shortlisted{
  background: #1e6bff;        /* bright blue */
  border-color: #0b3fa8;
  color: #ffe600;             /* bright yellow star */
  box-shadow:
    0 0 0 1px rgba(30,107,255,0.65),
    0 0 14px rgba(30,107,255,0.50);
}


.preview-bottom{
  display:flex;
  align-items:flex-start;
  gap:40px;
  margin-top:10px;
}

.preview-actions{
  margin-bottom:6px;
  display:flex;
  align-items:flex-start;
  padding-top:6px;
}

.preview-actions a{
  display:inline-block;
  margin-top:8px;
}

.preview-licensing{
  display:flex;
  align-items:flex-start;
  gap:20px;
}


.licensing-box{
  width:200px;
  flex-shrink:0;
  align-self:flex-start; /* 👈 force it to top */
  transform:translateY(-10px);
}
.licensing-box h3,
.licensing-box .licensing-title{
  margin-top:0;
}

.licensing-area{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-top:12px;
  width:100%;
}

.licensing-form-wrap{
  margin-top:0;
  flex:1;
  min-width:0; /* 👈 IMPORTANT */
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  padding:10px;
  border-radius:8px;
}

.licensing-form-wrap textarea{
  width:100%;
  box-sizing:border-box;
}

/* === Preview split layout === */

.preview-flex {
  display: flex;
  gap: 20px;
  align-items: flex-start;   /* instead of stretch */
}

.preview-left {
  flex: 2;
  display: flex;
  flex-direction: column;
  padding-left: 0;
}

.preview-right {
  flex: 0 0 210px; /* or 200px to match your box */
}

.preview-right .licensing-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* spacing tweak */
.preview-actions {
  margin-top: 8px;
}

/* responsive fallback */
@media (max-width: 768px) {
  .preview-flex {
    flex-direction: column;
  }
}

.preview-audio {
  display: block;
  width: 100%;
  max-width: none;
  margin-left: 0;
}

.preview-label {
  display: block;
  margin-bottom: 10px;
}

.skip-hint {
  font-size: 0.75rem;
  color: #888;
  margin-top: 6px;
  text-align: left;
}

.scan-btn {
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #1b2f26;
  border: 1px solid #243a31;
  color: #ffe600;
  font-weight: 800;
  font-size: 0.75rem;
  cursor: pointer;
}

.scan-btn:hover {
  border-color: #f08a00;
}



/* Mobile */
@media (max-width: 820px){
  .track-top{ grid-template-columns: 1fr; }
  .inst-grid{ grid-template-columns: 1fr; }
}