/**
 * MagnusPrime — 03. Shared Components
 * Loads site-wide. Everything here was previously duplicated, near-identically,
 * across single-song.php, archive-song.php, taxonomy-carrier.php, front-page.php,
 * and single-project.php — five separate copies of the same ~120 lines.
 *
 * Standardization notes (where source files disagreed with each other):
 *   .mp-label    — alpha was .45 on two pages, .68 on three. Standardized to .68.
 *   .mp-panel    — border-radius was 1.25rem on two pages, 1.5rem on three. Standardized to 1.5rem.
 *   .mp-chip     — padding/font-size varied slightly across pages. Standardized to the
 *                  most common values below.
 */

.mp-wrap{
  background:
    radial-gradient(1200px 600px at 60% 0%, rgba(120,200,255,.12), transparent 55%),
    radial-gradient(900px 500px at 30% 70%, rgba(190,160,255,.10), transparent 60%),
    var(--mp-bg);
  color: var(--mp-fg);
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mp-label{
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .75rem;
  color: var(--mp-dim);
}

.mp-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mp-cyan-dim), transparent);
}

.mp-panel{
  background: var(--mp-panel);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-panel);
}

.mp-status{
  display: flex;
  gap: .75rem;
  align-items: baseline;
  padding: .9rem 1rem;
  border-radius: 1rem;
  background: var(--mp-panel-deep);
  border: 1px solid var(--mp-line);
  color: var(--mp-dim);
}

/* ── Chips ─────────────────────────────────────────────────────────────── */
.mp-chip{
  border: 1px solid var(--mp-line);
  color: var(--mp-dim);
  border-radius: var(--mp-radius-pill);
  padding: .3rem .75rem;
  font-size: .78rem;
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  background: var(--mp-panel-deep);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--mp-ease), border-color var(--mp-ease), color var(--mp-ease);
}
.mp-chip--carrier{
  background: var(--mp-violet-dim);
  border-color: var(--mp-focus);
  color: var(--mp-cyan);
  font-weight: 600;
  transition: border-color var(--mp-ease), background var(--mp-ease);
}
a.mp-chip--carrier:hover{
  border-color: rgba(140,220,255,.6);
  background: rgba(140,220,255,.18);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.mp-btn{
  border-radius: var(--mp-radius-pill);
  padding: .75rem 1.15rem;
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  transition: transform var(--mp-ease), background var(--mp-ease), border-color var(--mp-ease);
  will-change: transform;
}
.mp-btn:hover{ transform: translateY(-1px); }

.mp-btn-primary{
  background: var(--mp-fg);
  color: var(--mp-bg);
  border: none;
}
.mp-btn-ghost{
  border: 1px solid var(--mp-line);
  color: var(--mp-fg);
  background: var(--mp-panel-deep);
}
.mp-btn-ghost:hover{
  background: rgba(10,12,18,.40);
  border-color: var(--mp-focus);
}