/* Header v2. Tools (logo, search, menu) top-right, actions ([+ Seguir] Compartilhar) right-aligned below them, stats always
   visible (normal and compact). Mobile: the M sits after the name ("vbrosso · M"); desktop: the M sits in the tools. */
.mh-namelogo { display: none; }
html.mh { overflow-anchor: none; }   /* header height changes must never move scrollY (see the spacer in profile.js/app.js) */
html.mh .hdr-right, html.mh #share-btn { display: none !important; }        /* replaced by .mh-actions */
html.mh .profile > .lang { display: none !important; }                       /* languages live in the drawer */
html.mh .name-row .follow { display: none !important; }                      /* Spotify pill: drawer "Abrir no Spotify" */
html.mh .profile:not(.shrunk) #hdr-play { display: none !important; }        /* the hero has the play button */
html.mh .mh-tools { display: flex; align-items: center; gap: 8px; }
html.mh .mh-logo { display: flex; align-items: center; color: #fff; width: 30px; margin-right: 2px; }
html.mh .mh-logo svg, html.mh .mh-namelogo svg { width: 100%; height: auto; display: block; }
html.mh .mh-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: #14120f; color: var(--text); display: grid; place-items: center; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s, background .2s; }
html.mh .mh-btn svg { width: 19px; height: 19px; }
html.mh .mh-btn:hover { border-color: rgba(236,228,214,.22); } html.mh .mh-btn:active { background: #1d1a17; }
html.mh .mh-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
html.mh .mh-actions .follow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px; font: 600 13px/1 var(--sans); white-space: nowrap; }
html.mh .mh-actions .follow-btn[hidden] { display: none; }
html.mh .mh-actions svg { width: 15px; height: 15px; flex: none; }
html.mh #follow-btn[aria-pressed="false"] { background: var(--amber); color: #15120d; border-color: var(--amber); }
html.mh .mh-share { border: 1px solid rgba(201,160,99,.55); color: var(--amber); background: transparent; }
html.mh .mh-share:hover { background: var(--amber-soft); }
html.mh .profile.shrunk button.play.hdr { width: 28px; height: 28px; }

@media (max-width: 719px) {
  html.mh .profile { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 0 12px; padding-top: calc(env(safe-area-inset-top) + 14px); padding-bottom: 12px; align-items: center; }
  html.mh .profile > .avatar, html.mh .profile > .avatar-wrap { grid-column: 1; grid-row: 1; }
  html.mh .profile .avatar { width: 60px; height: 60px; box-shadow: 0 0 0 1px var(--line), 0 0 0 3px rgba(201,160,99,.25); }
  html.mh .profile-meta { grid-column: 2; grid-row: 1; min-width: 0; }
  html.mh .username { font-size: 28px; line-height: 1.05; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.mh .mh-namelogo { display: inline-flex; align-items: center; gap: 7px; flex: none; color: #fff; width: auto; }
  html.mh .mh-namelogo svg { width: 24px; }
  html.mh .mh-dot { color: var(--faint); font-size: 18px; line-height: 1; }
  html.mh .mh-tools { grid-column: 3; grid-row: 1; align-self: start; gap: 7px; }
  html.mh .mh-tools .mh-logo { display: none; }
  /* Mobile: the share/follow row sits below the stats (above "Ouvindo agora"), full width and prominent, as in d92390f;
     not in the compact header. Desktop keeps it under the tools. */
  html.mh .mh-actions { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: stretch; gap: 10px; margin-top: 12px; }
  html.mh .mh-actions .follow-btn { flex: 1 1 0; height: 38px; padding: 0 12px; gap: 8px; font-size: 14px; }
  html.mh .mh-actions .mh-share svg { width: 16px; height: 16px; }
  html.mh .mh-actions:not(.with-follow) .mh-share { background: var(--amber); border-color: var(--amber); color: #15120d; }
  html.mh .mh-actions:not(.with-follow) .mh-share svg { display: none; }
  html.mh .profile.shrunk .mh-actions { display: none; }
  html.mh .stats { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  html.mh .stats > div { flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-left: 1px solid var(--line); min-width: 0; }
  html.mh .stats > div:first-child { padding-left: 4px; border-left: 0; }
  html.mh .stats dt { order: 2; font-size: 9.5px; letter-spacing: .12em; }
  html.mh .stats dd { font-size: 19px; line-height: 1.1; }
  /* compact (scrolled) header: same pieces, smaller */
  html.mh .profile.shrunk { padding-top: calc(env(safe-area-inset-top) + 7px); padding-bottom: 7px; }
  html.mh .profile.shrunk .avatar { width: 34px; height: 34px; }
  html.mh .profile.shrunk .username { font-size: 19px; }
  html.mh .profile.shrunk .mh-namelogo svg { width: 19px; }
  html.mh .profile.shrunk .mh-tools { align-self: center; }
  html.mh .profile.shrunk .mh-btn { width: 32px; height: 32px; border-radius: 10px; }
  html.mh .profile.shrunk .mh-btn svg { width: 16px; height: 16px; }
  html.mh .profile.shrunk .stats { margin-top: 6px; border-radius: 11px; }
  html.mh .profile.shrunk .stats > div { padding: 4px; flex-direction: row; justify-content: center; align-items: baseline; gap: 4px; }
  html.mh .profile.shrunk .stats dd { font-size: 14px; }
  html.mh .profile.shrunk .stats dt { font-size: 8px; letter-spacing: .08em; }
}
@media (max-width: 359px) { html.mh .profile .avatar { width: 48px; height: 48px; } html.mh .username { font-size: 24px; } html.mh .mh-btn { width: 36px; height: 36px; } }
/* desktop: right column = tools above actions; avatar, name and stats span both rows */
@media (min-width: 720px) {
  html.mh .profile { grid-template-columns: auto 1fr auto auto; grid-template-rows: auto auto; row-gap: 6px; }
  html.mh .profile > .avatar, html.mh .profile > .avatar-wrap, html.mh .profile-meta { grid-row: 1 / span 2; }
  html.mh .profile .stats { grid-row: 1 / span 2; grid-column: 3; align-self: center; }
  html.mh .stats > div { padding: 0 14px; }
  html.mh .mh-tools { grid-column: 4; grid-row: 1; justify-self: end; gap: 8px; }
  html.mh .mh-actions { grid-column: 4; grid-row: 2; justify-self: end; }
  html.mh .mh-actions .follow-btn { height: 26px; padding: 0 11px; font-size: 12.5px; }
  html.mh .mh-actions.with-follow .mh-share { width: 26px; padding: 0; }      /* icon-only next to "+ Seguir" so the name keeps its room */
  html.mh .mh-actions.with-follow .mh-share span { display: none; }
  html.mh .mh-btn { width: 36px; height: 36px; border-radius: 11px; }
  html.mh .mh-btn svg { width: 18px; height: 18px; }
  html.mh .profile.shrunk { row-gap: 3px; }
  html.mh .profile.shrunk .mh-btn { width: 30px; height: 30px; border-radius: 9px; }
  html.mh .profile.shrunk .mh-btn svg { width: 16px; height: 16px; }
  html.mh .profile.shrunk .mh-logo { width: 26px; }
  html.mh .profile.shrunk .mh-actions .follow-btn { height: 22px; font-size: 12px; }
  html.mh .profile.shrunk .mh-actions.with-follow .mh-share { width: 22px; }
}

/* drawer */
.mh-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(5,5,4,0); transition: background .2s; }
.mh-scrim[hidden] { display: none; }
.mh-scrim.on { background: rgba(5,5,4,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mh-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 82%; max-width: 330px; background: #14120f; border-left: 1px solid var(--line); padding: calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 16px);
  display: flex; flex-direction: column; overflow-y: auto; box-shadow: -30px 0 60px -20px #000; transform: translateX(100%); transition: transform .22s ease; }
.mh-scrim.on .mh-drawer { transform: none; }
.mh-dlogo { display: flex; align-items: center; width: 34px; flex: none; color: #fff; } .mh-dlogo svg { width: 100%; height: auto; display: block; }
.mh-dh { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mh-dav { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--bg-3); box-shadow: 0 0 0 1px var(--line); flex: none; }
.mh-dav img { width: 100%; height: 100%; object-fit: cover; }
.mh-dh b { font: 400 19px/1.15 var(--serif); display: block; } .mh-dh small { display: block; color: var(--faint); font-size: 12px; }
.mh-x { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; }
.mh-x svg { width: 18px; height: 18px; }
.mh-sec { margin-top: 14px; }
.mh-sec.mh-flat { margin-top: 0; }
.mh-dh + .mh-sec { margin-top: 0; }   /* first section (Amigos do Last.fm) sits right under the user row */
.mh-sec h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.mh-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.mh-seg button { appearance: none; border: 0; background: transparent; padding: 8px 0; border-radius: 7px; font: 500 13px var(--sans); color: var(--muted); cursor: pointer; }
.mh-seg button[aria-pressed="true"] { background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.mh-item { appearance: none; width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 4px; font: 400 15px var(--sans); color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; text-decoration: none; }
.mh-item svg { width: 19px; height: 19px; color: var(--amber); flex: none; }
.mh-item[data-danger], .mh-item[data-danger] svg { color: #d98b7a; }
.mh-item:disabled { opacity: .45; cursor: default; }
.mh-item em { margin-left: auto; font-style: normal; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); }
.mh-item:focus-visible, .mh-seg button:focus-visible, .mh-x:focus-visible, .mh-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mh-foot { margin-top: auto; padding-top: 18px; font-size: 11px; color: var(--faint); } .mh-foot a { color: inherit; }
.mh-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translate(-50%, 20px); opacity: 0; z-index: 1100; padding: 9px 14px; border-radius: 999px; background: #2a251f; color: var(--text); font-size: 13px; pointer-events: none; transition: opacity .2s, transform .2s; }
.mh-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* people modals (search / Last.fm friends) on top of the follows-modal styles */
.pp .fm-av { position: relative; } .pp .fm-av img { position: absolute; inset: 0; }
.pp .fm-av .fm-fb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font: 500 17px var(--serif); color: rgba(236,228,214,.8); }
.pp .pp-all { display: block; margin: 6px auto 8px; }
.pp .pp-all[hidden] { display: none; }
.pp .fm-invite { background: transparent; color: var(--amber); border-color: rgba(201,160,99,.55); min-width: 0; }
.pp .pp-sentinel { height: 1px; }
/* search modal source tabs (same pill look as Semana/Mês/Ano) */
.pp .pp-src { display: flex; gap: 4px; margin: 12px 16px 2px; padding: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; }
.pp .pp-src[hidden] { display: none; }
.pp .pp-src button { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; appearance: none; border: 0; background: transparent; color: var(--muted);
  font: 500 13px/1 var(--sans); height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer; transition: color .2s, background .2s; white-space: nowrap; }
.pp .pp-src button span { overflow: hidden; text-overflow: ellipsis; }
.pp .pp-src button svg { width: 22px; height: auto; flex: none; }
.pp .pp-src button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.pp .pp-src button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.pp-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1101; padding: 9px 14px; border-radius: 999px; background: #2a251f; color: var(--text); font-size: 13px; }
.pp-toast[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mh-drawer, .mh-scrim { transition: none; } }