/* ============================================================
   syw-profile.css — Profile page redesign (Phase 1+)
   Loaded globally via head.html after syw-header.css.
   All rules are scoped to body.msl-black .profile-page so they
   are a no-op on every other page/theme.

   Hybrid type system (Phase 1 — intentional, approved):
     Orbitron → display moments: name, section headers, stat numbers, rank.
                Wide/angular synthwave character; reads great big.
     Exo      → working text: field labels, values, body copy.
                Readable at small sizes; already the de-facto heading font.

   This resolves the "Orbitron loaded but unused" finding from the
   console-health-report (F-2). Orbitron was imported site-wide in
   head.html but fell back to Exo on every heading because typography.css
   sets body h1–h6 to Roboto (which isn't loaded), falling through to Exo.
   ============================================================ */


/* ── 1. CSS tokens ─────────────────────────────────────────── */

body.msl-black .profile-page {
  --profile-orbitron: 'Orbitron', sans-serif;
  --profile-exo:      'Exo', 'Exo 2', sans-serif;
  --profile-gap:       24px;
  --profile-radius:    8px;
  --profile-muted:     rgba(255, 255, 255, 0.45);
  --profile-empty:     rgba(255, 255, 255, 0.35);   /* friendly empty-state colour */
  --profile-accent:    #00c8ff;                      /* SYW cyan accent */
  --profile-card-bg:   #171e22;                      /* same panel colour as the Sign In box (black-style.css .ms_width_off50) */
  --profile-border:    rgba(255, 255, 255, 0.10);   /* separadores internos, anillo del avatar, inputs */
  /* Contorno exterior de los paneles. Con el fondo translucido anterior la
     linea al 10% era lo unico que los separaba de la pagina; ahora el relleno
     opaco ya contrasta solo, igual que la caja de Sign In, que no lleva borde.
     Se deja el `border` declarado en transparent para no mover las metricas. */
  --profile-panel-edge: transparent;
  --profile-rank-bg:   rgba(0, 200, 255, 0.12);
  --profile-rank-fg:   #00c8ff;
}


/* ── 2. Orbitron — display selectors ───────────────────────── */

/* Profile name (h1 in the identity header) */
body.msl-black .profile-page .profile-name {
  font-family: var(--profile-orbitron);
  letter-spacing: 1.5px;
  font-weight: 700;
  line-height: 1.15;
}

/* "About" / "Badges" panel headings */
body.msl-black .profile-page .profile-panel__title {
  font-family: var(--profile-orbitron);
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 1.5rem;
  text-transform: uppercase;
}

/* Stat card numeric values (XP, rank level, badges earned) */
body.msl-black .profile-page .stat-card__value {
  font-family: var(--profile-orbitron);
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* Rank name (pill and standalone display) */
body.msl-black .profile-page .profile-rank-name {
  font-family: var(--profile-orbitron);
  letter-spacing: 0.75px;
  font-weight: 600;
}


/* ── 3. Exo — working text selectors ───────────────────────── */

/* Field labels (Status Quote:, Bio:, etc.) */
body.msl-black .profile-page .profile-field__label {
  font-family: var(--profile-exo);
  font-weight: 500;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--profile-muted);
}

/* Field values */
body.msl-black .profile-page .profile-field__value {
  font-family: var(--profile-exo);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* Stat card labels ("Total XP", "Rank", etc.) */
body.msl-black .profile-page .stat-card__label {
  font-family: var(--profile-exo);
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--profile-muted);
}


/* ── 4. Identity header ─────────────────────────────────────── */

body.msl-black .profile-page .profile-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--profile-gap);
  padding: 28px 32px;
  background: var(--profile-card-bg);
  border: 1px solid var(--profile-panel-edge);
  border-radius: var(--profile-radius);
  margin-bottom: var(--profile-gap);
  position: relative;
}

body.msl-black .profile-page .profile-hero__avatar {
  flex-shrink: 0;
}

body.msl-black .profile-page .profile-hero__avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--profile-border);
  display: block;
}

body.msl-black .profile-page .profile-hero__body {
  flex: 1;
  min-width: 0;
}

body.msl-black .profile-page .profile-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

body.msl-black .profile-page .profile-name {
  margin: 0;
  font-size: 2.0rem;
  color: #ffffff;
}

body.msl-black .profile-page .profile-rank-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--profile-rank-bg);
  border: 1px solid rgba(0, 200, 255, 0.3);
  color: var(--profile-rank-fg);
  font-size: 1.3rem;
  white-space: nowrap;
}

body.msl-black .profile-page .profile-hero__since {
  font-family: var(--profile-exo);
  font-size: 1.1rem;
  color: var(--profile-muted);
  margin-bottom: 12px;
}

/* Edit button — top-right of hero */
body.msl-black .profile-page .profile-hero__edit {
  position: absolute;
  top: 20px;
  right: 24px;
}

body.msl-black .profile-page .profile-hero__edit .btn {
  font-family: var(--profile-exo);
  font-size: 1.1rem;
  padding: 4px 14px;
  border-radius: 4px;
}


/* ── 5. XP progress bar ────────────────────────────────────── */

body.msl-black .profile-page .xp-bar {
  margin-top: 4px;
}

body.msl-black .profile-page .xp-bar__track {
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

body.msl-black .profile-page .xp-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #0099cc, #00c8ff);
  border-radius: 3px;
  transition: width 0.4s ease;
}

body.msl-black .profile-page .xp-bar__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--profile-exo);
  font-size: 1.3rem;
  color: var(--profile-muted);
}


/* ── 6. Stats row ───────────────────────────────────────────── */

body.msl-black .profile-page .profile-stats {
  display: flex;
  gap: 16px;
  margin-bottom: var(--profile-gap);
  flex-wrap: wrap;
}

body.msl-black .profile-page .stat-card {
  flex: 1;
  min-width: 120px;
  padding: 16px 20px;
  background: var(--profile-card-bg);
  border: 1px solid var(--profile-panel-edge);
  border-radius: var(--profile-radius);
  text-align: center;
}

body.msl-black .profile-page .stat-card__value {
  display: block;
  font-size: 2.1rem;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 4px;
}

body.msl-black .profile-page .stat-card__label {
  display: block;
}


/* ── 7. Two-panel row (About + Badges) ─────────────────────── */

body.msl-black .profile-page .profile-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--profile-gap);
}

body.msl-black .profile-page .profile-panel {
  padding: 24px 28px;
  background: var(--profile-card-bg);
  border: 1px solid var(--profile-panel-edge);
  border-radius: var(--profile-radius);
}

body.msl-black .profile-page .profile-panel__title {
  color: var(--profile-accent);
  margin: 0 0 18px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--profile-border);
}


/* ── 8. About panel — field table ──────────────────────────── */

body.msl-black .profile-page .profile-fields {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.msl-black .profile-page .profile-fields li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--profile-border);
}

body.msl-black .profile-page .profile-fields li:last-child {
  border-bottom: none;
}

/* Gear rows (plugins / DAWs / synth brands) */
body.msl-black .profile-page .profile-gear-row {
  margin-top: 16px;
}

body.msl-black .profile-page .profile-gear-tags {
  margin-top: 6px;
}

/* Gear tags — shared by plugin / daw / synth brand rows */
body.msl-black .profile-page .plugin-tag {
  display: inline-block;
  font-family: var(--profile-exo);
  font-size: 1.1rem;
  padding: 2px 10px;
  margin: 2px 3px 2px 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--profile-border);
  color: rgba(255, 255, 255, 0.75);
}


/* ── 9. Friendly empty state (replaces red error) ──────────── */

body.msl-black .profile-page .profile-empty {
  font-family: var(--profile-exo);
  font-style: italic;
  color: var(--profile-empty);
  font-size: 1.5rem;
}

body.msl-black .profile-page .profile-empty__edit {
  font-style: normal;
  font-size: 1.4rem;
  color: var(--profile-accent);
  opacity: 0.7;
  margin-left: 6px;
  text-decoration: none;
}

body.msl-black .profile-page .profile-empty__edit:hover {
  opacity: 1;
}


/* ── 10. Badges panel ──────────────────────────────────────── */

body.msl-black .profile-page .badge-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}

body.msl-black .profile-page .badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

body.msl-black .profile-page .badge-item__icon {
  font-size: 2.4rem;
  line-height: 1;
}

body.msl-black .profile-page .badge-item__name {
  font-family: var(--profile-exo);
  font-size: 1.25rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.8);
}

/* Locked badges — dimmed with overlay */
body.msl-black .profile-page .badge-item--locked .badge-item__icon {
  opacity: 0.2;
  filter: grayscale(1);
  position: relative;
}

body.msl-black .profile-page .badge-item--locked .badge-item__name {
  color: var(--profile-muted);
}

body.msl-black .profile-page .badge-item--locked .badge-item__lock {
  font-size: 1.6rem;
  opacity: 0.4;
}

/* Earned badge — subtle glow */
body.msl-black .profile-page .badge-item--earned .badge-item__icon {
  filter: drop-shadow(0 0 4px rgba(0, 200, 255, 0.4));
}


/* ── 11. Spacing ────────────────────────────────────────────── */

body.msl-black .profile-page {
  padding-bottom: 60px;
  margin-top: -55px;
}


/* ── 12. Responsive — stack <992px ─────────────────────────── */

@media (max-width: 991px) {
  body.msl-black .profile-page .profile-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px;
  }

  body.msl-black .profile-page .profile-hero__meta {
    justify-content: center;
  }

  body.msl-black .profile-page .profile-hero__edit {
    position: static;
    margin-top: 12px;
  }

  body.msl-black .profile-page .profile-panels {
    grid-template-columns: 1fr;
  }

  body.msl-black .profile-page .profile-stats {
    gap: 10px;
  }

  body.msl-black .profile-page .stat-card {
    min-width: calc(50% - 10px);
  }
}

@media (max-width: 575px) {
  body.msl-black .profile-page .stat-card {
    min-width: 100%;
  }

  body.msl-black .profile-page .badge-ladder {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }
}


/* ══════════════════════════════════════════════════════════════
   13. Profile UPDATE form  (.profile-update)
   Scoped to body.msl-black .profile-page .profile-update so
   these rules are a no-op on every other page.
   ══════════════════════════════════════════════════════════════ */

/* ── 13a. Section spacing ───────────────────────────────────── */

body.msl-black .profile-page .profile-update__section {
  margin-bottom: var(--profile-gap);
}

body.msl-black .profile-page .profile-update__section-title {
  /* inherits .profile-panel__title Orbitron styling */
}

body.msl-black .profile-page .profile-update__section-hint {
  font-family: var(--profile-exo);
  font-size: 1.1rem;
  color: var(--profile-muted);
  margin: -10px 0 14px;
}

/* ── 13b. Layout helpers ────────────────────────────────────── */

/* Two equal columns — Account, About, Music sub-panels */
body.msl-black .profile-page .profile-update__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Stacked column of fields */
body.msl-black .profile-page .profile-update__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* first_name / last_name side-by-side within a column */
body.msl-black .profile-page .profile-update__half-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Inner sub-panel inside Music section */
body.msl-black .profile-page .profile-update__inner-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.msl-black .profile-page .profile-update__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

body.msl-black .profile-page .profile-update__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.msl-black .profile-page .profile-update__field--full {
  grid-column: 1 / -1;
}

/* ── 13c. Labels ────────────────────────────────────────────── */

body.msl-black .profile-page .profile-update__label {
  font-family: var(--profile-exo);
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
}

/* ── 13d. Dark form controls (the core fix) ─────────────────── */

body.msl-black .profile-page .profile-update input[type="text"],
body.msl-black .profile-page .profile-update input[type="email"],
body.msl-black .profile-page .profile-update input[type="date"],
body.msl-black .profile-page .profile-update input[type="url"],
body.msl-black .profile-page .profile-update input[type="password"],
body.msl-black .profile-page .profile-update select,
body.msl-black .profile-page .profile-update textarea {
  font-family: var(--profile-exo);
  font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.06);
  color: #eef3f8;
  border: 1px solid var(--profile-border);
  border-radius: var(--profile-radius);
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  /* dark calendar/time picker chrome */
  color-scheme: dark;
}

body.msl-black .profile-page .profile-update input::placeholder,
body.msl-black .profile-page .profile-update textarea::placeholder {
  color: var(--profile-muted);
}

body.msl-black .profile-page .profile-update input:focus,
body.msl-black .profile-page .profile-update select:focus,
body.msl-black .profile-page .profile-update textarea:focus {
  outline: none;
  border-color: var(--profile-accent);
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.18);
}

/* disabled email — reads as read-only, not broken */
body.msl-black .profile-page .profile-update input:disabled {
  background: rgba(255, 255, 255, 0.02);
  color: var(--profile-muted);
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.05);
}

body.msl-black .profile-page .profile-update textarea {
  min-height: 90px;
  resize: vertical;
}

/* ── 13e. Help / error text ─────────────────────────────────── */

body.msl-black .profile-page .profile-update__help {
  font-family: var(--profile-exo);
  font-size: 1.1rem;
  color: var(--profile-muted);
  margin: 0;
}

body.msl-black .profile-page .profile-update__help--error {
  color: #ff6b6b;
}

/* ── 13f. Chosen widget — dark skin ─────────────────────────── */

/* Chosen container inherits full width from the field */
body.msl-black .profile-page .profile-update .chosen-container {
  width: 100% !important;
  font-family: var(--profile-exo);
  font-size: 1.25rem;
}

body.msl-black .profile-page .profile-update .chosen-container-multi .chosen-choices {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--profile-border);
  border-radius: var(--profile-radius);
  padding: 6px 8px;
  box-shadow: none;
}

body.msl-black .profile-page .profile-update .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  background: transparent;
  color: #eef3f8;
  border: none;
  box-shadow: none;
  padding: 4px 6px;
  font-size: 1.2rem;
  height: auto;
  width: auto !important;
}

body.msl-black .profile-page .profile-update .chosen-container-multi .chosen-choices li.search-choice {
  background: rgba(0, 200, 255, 0.12);
  border: 1px solid rgba(0, 200, 255, 0.3);
  border-radius: 4px;
  color: var(--profile-accent);
  font-size: 1.15rem;
  padding: 3px 22px 3px 8px;
  margin: 2px 4px 2px 0;
}

body.msl-black .profile-page .profile-update .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  top: 5px;
  right: 4px;
}

body.msl-black .profile-page .profile-update .chosen-drop {
  background: #1a2030;
  border: 1px solid var(--profile-border);
  border-top: none;
  border-radius: 0 0 var(--profile-radius) var(--profile-radius);
}

body.msl-black .profile-page .profile-update .chosen-results li {
  color: #cdd6e0;
  font-size: 1.2rem;
  padding: 7px 12px;
}

body.msl-black .profile-page .profile-update .chosen-results li.highlighted {
  background: rgba(0, 200, 255, 0.15);
  color: #ffffff;
}

body.msl-black .profile-page .profile-update .chosen-results li.disabled-result {
  color: var(--profile-muted);
}

body.msl-black .profile-page .profile-update .chosen-container-active .chosen-choices {
  border-color: var(--profile-accent);
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.18);
}

/* ── 13g. Action row ────────────────────────────────────────── */

body.msl-black .profile-page .profile-update__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0 60px;
}

body.msl-black .profile-page .profile-update__submit {
  font-family: var(--profile-exo);
  font-size: 1.3rem;
  font-weight: 600;
  background: var(--profile-accent);
  color: #000;
  border: none;
  border-radius: var(--profile-radius);
  padding: 10px 28px;
  margin: 10px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

body.msl-black .profile-page .profile-update__submit:hover {
  opacity: 0.85;
}

body.msl-black .profile-page .profile-update__cancel {
  font-family: var(--profile-exo);
  font-size: 1.2rem;
  color: var(--profile-muted);
  text-decoration: none;
}

body.msl-black .profile-page .profile-update__cancel:hover {
  color: #ffffff;
}

/* ── 13h. Responsive — stack <992px ────────────────────────── */

@media (max-width: 991px) {
  body.msl-black .profile-page .profile-update__two-col,
  body.msl-black .profile-page .profile-update__half-row,
  body.msl-black .profile-page .profile-update__grid {
    grid-template-columns: 1fr;
  }

  body.msl-black .profile-page .profile-update__field--full {
    grid-column: 1;
  }
}