/* RapHaven skin for the MusicHaven component system.
   Loads AFTER styles.css. Behavior/geometry kept; identity retokened to the
   approved red/black/white. Fonts: PROVISIONAL neutral stack (Open Item 1) —
   never Playfair, and the hand-lettered wordmark is never set in any font. */
:root{
--mh-bg:#FFFFFF;--mh-surface:#FFFFFF;--mh-surface-2:#FAF3F1;
--mh-ink:#0E1216;--mh-ink-soft:#25313A;--mh-muted:#59636D;
--mh-line:rgba(14,18,22,.16);--mh-line-soft:rgba(14,18,22,.08);
--mh-gold:#E32219;--mh-gold-bright:#F65045;--mh-gold-ink:#9A1C13;
--mh-violet:#C82318;--mh-violet-ink:#9A1C13;
--mh-plum:#0E1216;--mh-plum-2:#090C0F;--mh-grape:#152028;
--mh-night:#0E1216;--mh-night-2:#152028;
--mh-night-text:#FBF5F3;--mh-night-muted:#BDA69F;
--mh-pulsebar:linear-gradient(100deg,#0E1216 0%,#10161B 52%,#3A0F0B 100%);
--mh-serif:'Helvetica Neue',Helvetica,Arial,sans-serif;
--mh-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
--mh-shadow:0 16px 44px rgba(58,10,8,.16);--mh-shadow-soft:0 8px 22px rgba(58,10,8,.12);
--mh-grad-gold:linear-gradient(135deg,#F65045,#E32219);
--mh-grad-violet:linear-gradient(135deg,#C82318,#F65045);
}
:root,.mh-skin-default{
--sk-bg:#FFFFFF;--sk-panel:#FAF3F1;--sk-accent:#E32219;--sk-accent-2:#C82318;
--sk-text:#0E1216;--sk-muted:#59636D;--sk-chip-bg:#E32219;--sk-chip-text:#FFFFFF;
--sk-glow:rgba(227,34,25,.26);--sk-grad:linear-gradient(135deg,#F65045,#E32219);
}
h1,h2,h3,h4{font-weight:900;letter-spacing:-0.015em;line-height:1.16}
/* Blue fills carry white text (MusicHaven's gold carried dark) */
.mh-btn--gold,.mh-btn--gold:hover,.mh-btn--gold:focus{color:#fff}
.mh-btn--gold{box-shadow:0 3px 0 #9A1C13,0 10px 22px rgba(154,28,19,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.mh-btn--gold:hover{box-shadow:0 10px 26px rgba(217,42,32,.42)}
.mh-btn--gold:active{box-shadow:0 1px 0 #9A1C13,0 5px 12px rgba(154,28,19,.3),inset 0 1px 0 rgba(255,255,255,.35)}
:focus-visible{outline-color:#E32219}
.mh-on-dark :focus-visible,.mh-skinned :focus-visible{outline-color:#F65045}
.is-success::before{color:#9A1C13}
.mh-on-dark .is-success::before,.mh-skinned .is-success::before{color:#F65045}
/* Hardcoded plum/gold hexes in components.css that tokens can't reach — re-anchored to ink/brand red */
.mh-appbar{background:linear-gradient(180deg,#152028 0%,#0E1216 100%);border-top:1.5px solid rgba(246,80,69,.5);box-shadow:0 -10px 30px rgba(14,4,4,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.mh-genrepill{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%),linear-gradient(135deg,#3A0F0B,#66150E);border:2px solid rgba(246,80,69,.9);color:#fff;box-shadow:0 20px 42px rgba(58,10,8,.3),0 4px 0 rgba(122,21,14,.6),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 20px rgba(0,0,0,.18)}
.mh-genrepill.is-focus .mh-genrepill__icon{color:#F7A69F}
.mh-genrepill.is-focus{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%),linear-gradient(135deg,#9A1C13,#E32219);border:2px solid rgba(246,80,69,.9);color:#fff;box-shadow:0 20px 42px rgba(58,10,8,.3),0 4px 0 rgba(122,21,14,.6),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 20px rgba(0,0,0,.18)}
.mh-genrepill.is-focus .mh-genrepill__label,.mh-genrepill .mh-genrepill__label{color:inherit}
body{background:#FFFFFF}
.mh-genrepill--more{background:transparent;border-style:dashed;box-shadow:none;color:var(--mh-muted)}
.mh-wingpill--primary,.mh-utilpill--primary{background:linear-gradient(135deg,#3A0F0B,#66150E);color:#fff;border-color:rgba(246,80,69,.85)}
.mh-wingpill--primary:hover,.mh-utilpill--primary:hover{color:#fff}
.mh-wingpill--primary .mh-wingpill__icon,.mh-utilpill--primary .mh-utilpill__icon{color:#F7A69F}
.mh-utilpill--login{background:linear-gradient(180deg,#FFFFFF,#FCEEEA);border-color:rgba(154,28,19,.3)}
.mh-pulsebar{border-color:rgba(246,80,69,.55);box-shadow:0 16px 34px rgba(20,6,6,.34),0 3px 0 rgba(154,28,19,.4),inset 0 1px 0 rgba(255,255,255,.14)}
.mh-pulsebar::before{background:radial-gradient(42% 220% at 0% 50%,rgba(246,80,69,.18),transparent 55%)}
.mh-pulsebar__label{box-shadow:0 6px 16px rgba(217,42,32,.45),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(154,28,19,.3)}
.mh-pulsebar__eq span{background:#0E1216}
.mh-sticker{box-shadow:0 4px 14px rgba(217,42,32,.32)}
.mh-sticker__dot{background:#0E1216}
/* Musical Timeline — note-glyph node doubled, then 1x larger again (RapHaven) */
.mh-mtl{padding-left:170px}
.mh-mtl::before{left:42px}
.mh-mtl__era::before{left:-170px;width:150px;height:150px;font-size:4.2rem;border-width:4px}
@media (max-width:599px){.mh-mtl{padding-left:124px}.mh-mtl::before{left:26px}.mh-mtl__era::before{left:-124px;width:108px;height:108px;font-size:3rem}}
.mh-chip--mood{border-color:rgba(200,35,24,.35)}
.mh-edge-gold{border-color:rgba(246,80,69,.6)}
.mh-skinned.mh-card{border-color:rgba(217,42,32,.5)}
.mh-card:not(.mh-skinned):hover{border-color:rgba(217,42,32,.55);box-shadow:0 16px 38px rgba(58,10,8,.16)}
.mh-brandband{background:radial-gradient(46% 130% at 50% 46%,rgba(246,80,69,.12),transparent 62%),var(--mh-bg)}
.mh-genrebar{background:var(--mh-bg)}
.mh-services-band{background:var(--mh-surface)}
.mh-posterband{border-color:rgba(246,80,69,.6);box-shadow:0 24px 50px rgba(58,10,8,.16),0 4px 0 rgba(217,42,32,.28),inset 0 1px 0 rgba(255,255,255,.6);background:linear-gradient(180deg,#FFFFFF,#FCEEEA)}
.mh-poster-tile .mh-bubble__ring{box-shadow:0 6px 16px rgba(217,42,32,.3)}
.mh-join{background:radial-gradient(110% 160% at 85% -20%,rgba(246,80,69,.14),transparent 55%),radial-gradient(90% 140% at 5% 120%,rgba(200,35,24,.2),transparent 55%),var(--mh-night)}
.mh-zonebar{border-color:rgba(246,80,69,.5);box-shadow:0 16px 32px rgba(58,10,8,.22),0 3px 0 rgba(154,28,19,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.mh-zonebar--plum{background:linear-gradient(100deg,#0E1216 0%,#152028 100%)}
.mh-zonebar--grape{background:linear-gradient(100deg,#3A0F0B 0%,#0E1216 100%)}
.mh-zonebar--gold{background:linear-gradient(100deg,#9A1C13 0%,#E32219 100%)}
.mh-zonebar__icon{border-color:rgba(246,80,69,.6)}
.mh-slide{border-color:rgba(246,80,69,.55);box-shadow:0 28px 60px rgba(58,10,8,.3),0 5px 0 rgba(154,28,19,.4),inset 0 1px 0 rgba(255,255,255,.14)}
@media (hover:hover){.mh-heroslider__slide:hover .mh-slide{box-shadow:0 36px 72px rgba(58,10,8,.34),0 6px 0 rgba(154,28,19,.45)}}
@keyframes mh-pulse{0%{box-shadow:0 0 0 0 rgba(246,80,69,.6)}70%{box-shadow:0 0 0 12px rgba(246,80,69,0)}100%{box-shadow:0 0 0 0 rgba(246,80,69,0)}}
.mh-sticker{color:#fff}
/* Hardcoded gold rims/underlines from the Edge system re-anchor to brand red/ink */
.mh-card,.mh-flipcard__face{border-color:rgba(217,42,32,.38)}

.mh-flipcard__u{color:#F65045;font-weight:900}
.mh-appbar button{min-height:76px}.mh-appbar__glyph{font-size:1.6em}.mh-appbar__label{font-size:1.05rem;font-weight:800}
.mh-card__title{font-size:1.34rem}.mh-card__dek{font-size:1.08rem}.mh-card__meta{font-size:1rem}.mh-flipcard__title{font-size:1.45rem}.mh-flipcard__meta{font-size:1.02rem}
.mh-slide__title,.mh-hero__title,.mh-zone-head__title,.mh-zonebar__title{line-height:1.18;padding-bottom:.04em}
/* Naming law: headlines never cut off */
.mh-card__title,.mh-card__dek,.mh-slide__title,.mh-heroslider__title,.mh-zone-head__title,.mh-zone-head__dek,.mh-zonebar__title,.mh-zonebar__subtitle,.mh-flipcard__title{display:block;-webkit-line-clamp:initial;-webkit-box-orient:initial;overflow:visible;max-height:none;text-overflow:clip;white-space:normal}

/* DECORATION IS NOT A HIT TARGET: the Premium Feature's glow/line layers sit above the action area
   in paint order; without this they intercept the pill's clicks. */
.mh-pfh__still-glow,.mh-pfh__glow,.mh-pfh__lines,.mh-pfh__sheen,.mh-pfh__scrim{pointer-events:none}
.mh-pfh__cta,.mh-pfh__cta .mh-btn{position:relative;z-index:5}