/* MagnusPrime Project */

/* =========================================================
   MAGNUSPRIME • PROJECT NODE (DROP-IN)
   - Desktop: right column height matches left column (JS measured)
     Tracklist natural height, Now Playing fills remainder,
     Lyrics fills remainder + scrolls (desktop only).
   - Mobile/tablet: no internal lyrics scroll (page scrolls)
   - Mobile controls order: Prev + Next row, Open Node full, All Songs full
   - Now Playing art: uses sigil video if available; fallback image.
   ========================================================= */

/* Shared tokens/components (:root variables, .mp-wrap, .mp-label, .mp-divider,
   .mp-panel, .mp-btn) now load via 00-magnusprime-tokens.css and
   03-magnusprime-components.css — enqueued site-wide in functions.php.
   The mobile viewport-height improvement (svh/dvh) originally added here
   has been promoted to the global .mp-wrap rule so every page benefits.
   Everything below is unique to the Node page. */

*,*::before,*::after{ box-sizing:border-box; }

/* room for fixed mini player */
.mp-has-miniplayer{
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

.mp-label{
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.75rem;
  color: rgba(245,248,255,.68);
}

/* ── Coloured section headers ─────────────────────────────────────────────── */
/* Page-level eyebrow */
.mp-eyebrow{
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(140,220,255,.75);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.mp-eyebrow::before{
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: rgba(140,220,255,.5);
  flex-shrink: 0;
}

/* Panel header labels — cyan with left accent bar */
.mp-section-label{
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(140,220,255,.82);
  font-weight: 600;
}
.mp-section-label::before{
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(140,220,255,.9), rgba(190,160,255,.6));
  flex-shrink: 0;
}

/* Manifesto gets a warmer purple tint */
.mp-manifesto-label{
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(190,160,255,.82);
  font-weight: 600;
}
.mp-manifesto-label::before{
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(190,160,255,.9), rgba(140,220,255,.5));
  flex-shrink: 0;
}

/* grid */
.mp-grid{
  display:grid;
  gap: 1.25rem;
  grid-template-columns: 1.15fr .85fr;
  align-items:stretch;
}
@media (max-width: 992px){
  .mp-grid{ grid-template-columns: 1fr; align-items:start; }
}
.mp-grid > div{ min-width:0; }

/* Desktop: right column stretches to match left column's natural height
   (cover + manifesto). Track panel keeps its natural size; Now Playing
   panel absorbs the remaining space; lyrics scroll inside it. Replaces
   the old JS pixel-measuring height-sync — this just falls out of flexbox. */
@media (min-width: 993px){
  #mpRightCol{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  #mpTrackPanel{ flex: 0 0 auto; }
  #mpNowPanel{
    flex: 1 1 auto;
    min-height: 0;
    display:flex;
    flex-direction:column;
  }
  #mpNowPanel > *{ flex-shrink:0; }
  #mpLyricsWrap{
    flex: 1 1 auto;
    min-height: 140px;
    overflow:auto;
  }
}

/* cover */
.mp-cover{
  overflow:hidden;
  border-radius: 1.5rem;
  border:1px solid rgba(120,200,255,.16);
  background: rgba(10,12,18,.35);
}
.mp-cover img{ width:100%; height:auto; display:block; }

/* manifesto */
.mp-manifesto, .mp-manifesto *{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* tracklist */
.mp-tracklist{ padding: 1rem; }
.mp-track-item{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.9rem;
  padding: .85rem .9rem;
  border-radius: 1rem;
  border: 1px solid rgba(120,200,255,.12);
  background: rgba(10,12,18,.22);
  color: var(--mp-fg);
  cursor:pointer;
  text-align:left;
  min-width:0;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.mp-track-item:hover{
  transform: translateY(-1px);
  border-color: rgba(140,220,255,.25);
  background: rgba(10,12,18,.32);
}
.mp-track-item.is-current{
  border-color: rgba(140,220,255,.32);
  background: rgba(10,12,18,.40);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}
.mp-track-left{ min-width:0; }
.mp-track-title{
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.2;
  margin: 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-track-sub{
  margin:.25rem 0 0;
  font-size:.84rem;
  color: rgba(245,248,255,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-track-carrier{
  color: var(--mp-cyan);
  font-weight: 600;
}
.mp-track-sub-dot{
  color: rgba(245,248,255,.3);
}
.mp-track-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.6rem;
  color: rgba(245,248,255,.70);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space:nowrap;
}
.mp-track-pill{
  border:1px solid rgba(120,200,255,.16);
  background: rgba(10,12,18,.25);
  color: var(--mp-cyan);
  border-radius:999px;
  padding:.22rem .6rem;
  font-size:.72rem;
  letter-spacing:.14em;
}
.mp-track-playing{ display:none; }
.mp-track-item.is-playing .mp-track-playing{ display:inline-flex; }

/* now playing */
.mp-now{
  padding: 1rem;
  overflow: visible; /* do not clip lyrics scroller */
  display:flex;
  flex-direction:column;
  min-height:0;
}
.mp-now-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: .65rem;
  min-width:0;
}
.mp-now-meta{ min-width:0; }

.mp-now-progress{
  display:flex; align-items:center; gap:.65rem;
  margin-top:.75rem;
}
.mp-now-play{
  border: 1px solid rgba(120,200,255,.2);
  background: rgba(10,12,18,.35);
  color: rgba(190,160,255,.9);
  width:38px; height:38px; flex:0 0 auto;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease;
}
.mp-now-play:hover{ background: rgba(10,12,18,.55); border-color: rgba(140,220,255,.4); }
.mp-now-time{
  font-size:.78rem; color: rgba(245,248,255,.55);
  flex:0 0 auto; min-width:34px;
  font-variant-numeric: tabular-nums;
}
.mp-now-seek{
  -webkit-appearance:none; appearance:none;
  flex:1 1 auto;
  height:3px; border-radius:999px;
  background: rgba(120,200,255,.18);
  outline:none; cursor:pointer;
  accent-color: rgba(140,220,255,.78);
}
.mp-now-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:999px;
  background: rgba(140,220,255,.85); border:none;
  box-shadow: 0 0 6px rgba(140,220,255,.35);
  cursor:pointer;
}
.mp-now-seek::-moz-range-thumb{
  width:12px; height:12px; border-radius:999px;
  background: rgba(140,220,255,.85); border:none;
  box-shadow: 0 0 6px rgba(140,220,255,.35);
  cursor:pointer;
}
.mp-now-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:.5rem;
}
.mp-now-chip{
  font-size:.68rem; padding:.22rem .6rem;
  border-radius:999px;
  border:1px solid rgba(120,200,255,.2);
  color: rgba(245,248,255,.7);
  background: rgba(10,12,18,.3);
  white-space:nowrap;
}
.mp-now-chip--movement{
  border-color: rgba(140,220,255,.32);
  color: rgba(140,220,255,.9);
  background: rgba(140,220,255,.08);
  font-weight:600;
}
.mp-now-meta h3{ margin:0; font-size: 1rem; }
.mp-now-meta p{
  margin:.35rem 0 0;
  color: rgba(245,248,255,.65);
  font-size:.9rem;
  line-height: 1.35;
}

/* Animated "sigil" square (video or image fallback) */
.mp-now-art{
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1 / 1;
  border-radius: 1.25rem;
  overflow:hidden;
  background:#05070b;
  border:1px solid rgba(120,200,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  transform: translateZ(0);
}
.mp-now-art video,
.mp-now-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}
.mp-now-art video{ position:absolute; inset:0; z-index:1; }
.mp-now-art img{ position:absolute; inset:0; z-index:0; }

/* glow + shimmer */
.mp-now-art::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:
    radial-gradient(120px 120px at 20% 20%, rgba(140,220,255,.55), transparent 55%),
    radial-gradient(140px 140px at 80% 80%, rgba(190,160,255,.35), transparent 60%);
  filter: blur(10px);
  opacity:.75;
  pointer-events:none;
  animation: mpGlow 5.6s ease-in-out infinite;
  z-index:2;
}
.mp-now-art::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(140,220,255,.18) 45%,
    rgba(245,248,255,.10) 50%,
    rgba(190,160,255,.12) 55%,
    transparent 70%);
  transform: translateX(-45%) rotate(12deg);
  animation: mpShimmer 4.8s linear infinite;
  mix-blend-mode: screen;
  opacity:.55;
  pointer-events:none;
  z-index:2;
}
@keyframes mpGlow{
  0%,100%{ opacity:.6; transform: scale(1); }
  50%{ opacity:.9; transform: scale(1.06); }
}
@keyframes mpShimmer{
  0%{ transform: translateX(-45%) rotate(12deg); }
  100%{ transform: translateX(45%) rotate(12deg); }
}
@media (min-width: 993px){
  .mp-now-art{ animation: mpFloat 6.5s ease-in-out infinite; will-change: transform; }
  @keyframes mpFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-4px); }
  }
}
@media (prefers-reduced-motion: reduce){
  .mp-now-art, .mp-now-art::before, .mp-now-art::after{ animation:none !important; }
}

/* audio */
audio{ width:100% !important; max-width:100%; display:block; }

/* controls */
.mp-now-controls{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top: .9rem;
  justify-content:center;
}
.mp-btn{
  border-radius: 999px;
  padding: .65rem 1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  text-decoration:none;
  font-weight:700;
  border: 1px solid rgba(120,200,255,.18);
  background: rgba(10,12,18,.22);
  color: rgba(245,248,255,.92);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mp-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(140,220,255,.32);
  background: rgba(10,12,18,.36);
}
.mp-btn.primary{
  background: rgba(245,248,255,.92);
  color:#05070b;
  border-color: transparent;
}

/* lyrics box */
.mp-lyrics{
  margin-top: .5rem;
  padding: 1rem 1rem .9rem;
  border: 1px solid rgba(120,200,255,.12);
  border-radius: 1rem;
  background: rgba(10,12,18,.22);
  white-space: pre-wrap;
  line-height: 1.85;
  color: rgba(245,248,255,.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95rem;
  letter-spacing: .01em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Section labels generated by lyricsToHtml() — displayed as blocks */
.mp-lyrics strong.mp-lyric-section{
  display:block;
  margin-top:1.25rem;
  margin-bottom:.35rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(140,220,255,.75);
  font-size:.78rem;
}
/* Inline bold from WYSIWYG lyrics — stays inline, gets cyan */
.mp-lyrics strong{
  color: rgba(140,220,255,.9);
  font-weight: 700;
  display: inline;
}

/* Synced LRC lines (only used when a track has lyrics_src) */
.mp-lyric-line{
  padding: .35rem 0;
  color: rgba(245,248,255,.45);
  transition: color .2s ease, opacity .2s ease;
  line-height: 1.7;
}
.mp-lyric-line.is-section{
  margin-top: 1rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(140,220,255,.6);
  font-size:.75rem;
  font-weight:700;
}
.mp-lyric-line.is-near{
  color: rgba(245,248,255,.65);
}
.mp-lyric-line.is-active{
  color: rgba(245,248,255,.96);
  font-weight: 600;
}

/* Bold text anywhere on the page gets cyan accent */
strong,
b,
.mp-manifesto strong,
.mp-manifesto b,
.mp-now-meta strong,
.mp-now-meta b {
  color: rgba(140,220,255,.9);
  font-weight: 700;
}

/* Exception: section label pseudo-elements and buttons shouldn't inherit */
.mp-section-label strong,
.mp-eyebrow strong,
.mp-btn strong { color: inherit; }

/* Desktop: JS locks column heights; lyrics is only scroller */
@media (min-width: 993px){
  #mpRightCol{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    min-height:0;
    overflow:hidden;
  }
  .mp-tracklist{ flex:0 0 auto; }
  .mp-now{ flex:1 1 auto; min-height:0; }
  #mpLyricsWrap{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }
}

/* Mobile/tablet: page scroll only */
@media (max-width: 992px){
  #mpRightCol{ height:auto !important; max-height:none !important; overflow:visible !important; }
  .mp-now{ height:auto !important; }
  #mpLyricsWrap{ height:auto !important; max-height:none !important; overflow:visible !important; }
}

/* Mobile: correct button order */
@media (max-width: 560px){
  .mp-now-art{ width: min(100%, 280px); border-radius: 1.15rem; }

  .mp-now-controls{ gap:.6rem; }
  #mpPrevBtn{ order:1; flex:1 1 calc(50% - .6rem); }
  #mpNextBtn{ order:1; flex:1 1 calc(50% - .6rem); }
  #mpOpenBtn{ order:2; flex:1 1 100%; }
  .mp-now-controls a.mp-btn{ order:3; flex:1 1 100%; }
}

/* =========================================================
   Sticky Mini Player (BOTTOM)
   ========================================================= */
.mp-miniplayer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid rgba(120,200,255,.12);
  background: rgba(5,7,11,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mp-mini-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: .65rem 1rem;
  display:flex;
  align-items:center;
  gap: .9rem;
  min-width:0;
}
.mp-mini-art{
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid rgba(120,200,255,.16);
  background:#05070b;
  flex: 0 0 46px;
}
.mp-mini-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.mp-mini-text{ min-width:0; }
.mp-mini-title{
  font-weight: 800;
  font-size: .92rem;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: rgba(245,248,255,.98);
}
.mp-mini-sub{
  margin:.15rem 0 0;
  color: rgba(245,248,255,.62);
  font-size:.8rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-mini-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex: 0 0 auto;
}
.mp-mini-actions button{
  border-radius: 999px;
  padding: .55rem .8rem;
  border: 1px solid rgba(120,200,255,.18);
  background: rgba(10,12,18,.22);
  color: rgba(245,248,255,.92);
  cursor:pointer;
}
.mp-mini-actions button:hover{
  border-color: rgba(140,220,255,.32);
  background: rgba(10,12,18,.36);
}
.mp-mini-play{
  background: rgba(10,12,18,.35) !important;
  color: rgba(190,160,255,.85) !important;
  border-color: rgba(140,220,255,.28) !important;
  font-weight: 700;
  font-family: sans-serif;
  font-variant-emoji: text;
}
.mp-mini-play:hover{
  background: rgba(10,12,18,.50) !important;
  border-color: rgba(140,220,255,.45) !important;
}
.mp-mini-open{
  text-decoration:none;
  padding:.55rem .85rem;
  border-radius:999px;
  border: 1px solid rgba(120,200,255,.18);
  background: rgba(10,12,18,.22);
  color: rgba(245,248,255,.92);
  font-weight: 800;
}
.mp-mini-open:hover{
  border-color: rgba(140,220,255,.32);
  background: rgba(10,12,18,.36);
}
.mp-mini-volume{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.mp-mini-vol-icon{
  color: rgba(245,248,255,.45);
  font-size:.75rem;
  flex-shrink:0;
}
#mpMiniVolume{
  -webkit-appearance:none;
  appearance:none;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: rgba(120,200,255,.18);
  outline: none;
  cursor: pointer;
  accent-color: rgba(140,220,255,.78);
}
#mpMiniVolume::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(140,220,255,.85);
  border: none;
  box-shadow: 0 0 6px rgba(140,220,255,.35);
  cursor: pointer;
}
#mpMiniVolume::-moz-range-thumb{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(140,220,255,.85);
  border: none;
  box-shadow: 0 0 6px rgba(140,220,255,.35);
  cursor: pointer;
}
@media (max-width: 768px){
  /* Match the reflow technique already used by the shared sticky player
     (mp-sticky-player.php) on every other page: art+text stay on one row,
     controls drop to their own row below instead of cramming into one
     flex row and truncating the title. Row-gap kept larger than
     column-gap so the two rows get real breathing room without pushing
     the artwork too far from the title text. */
  .mp-mini-inner{
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .75rem;
    row-gap: 1rem;
    padding: .85rem 1rem 1rem;
  }
  .mp-mini-actions{
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-left: 0;
  }
}
@media (max-width: 560px){
  .mp-mini-sub{ display:none; }
  .mp-mini-volume{ display:none; }
}