/* Shared Zamar control geometry and motion. Never target logos or data charts. */
:root{--z-icon-small:16px;--z-icon:18px;--z-icon-nav:20px;--z-motion-fast:140ms;--z-motion-panel:240ms;--z-ease:cubic-bezier(.2,.7,.2,1);--z-focus:#438eff}
html body :is(.icon,.icon-button,.icon-btn,.shelf-arrow,.song-menu-trigger,.appearance-trigger,.install-app-button,.release-play,.pill,.btn,.button)>svg,
html body :is(.icon,.icon-button,.icon-btn)>span>svg{width:var(--z-icon);height:var(--z-icon);flex:0 0 var(--z-icon);vertical-align:middle}
html body :is(.sidebar nav,.primary-nav,.mobile-nav) :is(a,button) svg{width:var(--z-icon-nav);height:var(--z-icon-nav);flex:0 0 var(--z-icon-nav)}
html body :is(.track-actions,.artist-song-actions,.release-track,.release-tools,.queue-row,.panel-head) .icon svg{width:var(--z-icon-small);height:var(--z-icon-small);flex-basis:var(--z-icon-small)}
html body #player .icon svg{width:18px;height:18px;flex-basis:18px}
html body #player .primary svg{width:23px;height:23px;flex-basis:23px}
html body #immersive-player .immersive-transport .icon svg{width:22px;height:22px;flex-basis:22px}
html body #immersive-player [data-action=toggle] svg{width:30px;height:30px;flex-basis:30px}
html body :is(.icon,.icon-button,.icon-btn,.shelf-arrow){display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
html body :is(button,a,summary):focus:not(:focus-visible){outline:none}
html body :is(button,a,summary):focus-visible{outline:2px solid var(--z-focus);outline-offset:3px}
/* Main is a skip-link/scroll target, not a control: avoid a viewport-sized ring. */
html body :is(#main,#content,#right-panel):focus{outline:none}
html body .lyrics-scroll:focus{outline:none}
html[data-zamar-focus=keyboard] body .lyrics-scroll:focus-visible{box-shadow:inset 2px 0 0 var(--z-focus)}
html body :is(.track-actions,.release-track,.artist-song-actions) :is([data-save],.song-menu-trigger,.icon):hover{background-color:transparent}
html body :is(.icon,.icon-button,.icon-btn,.shelf-arrow,button.pill,button.btn,.appearance-trigger){transition:color var(--z-motion-fast) var(--z-ease),background-color var(--z-motion-fast) var(--z-ease),border-color var(--z-motion-fast) var(--z-ease),opacity var(--z-motion-fast) var(--z-ease)}
html body :is(.sidebar nav,.primary-nav,.mobile-nav) a{transition:color var(--z-motion-fast) var(--z-ease),background-color var(--z-motion-fast) var(--z-ease)}
@media(prefers-reduced-motion:no-preference){
 html body #main.enter{animation:zamar-page-arrive 220ms var(--z-ease) both}
 html body dialog[open]:not(.is-closing):not(#immersive-player){animation:zamar-sheet-arrive var(--z-motion-panel) var(--z-ease) both}
 html body dialog[open]::backdrop{animation:zamar-backdrop-arrive 180ms ease-out both}
 html body :is(#song-menu,#profile-menu,#country-menu):not([hidden]){animation:zamar-menu-arrive 160ms var(--z-ease) both}
 html body :is(.art-wrap .play-float,.card .play-float,.song-play>span){transition:opacity 160ms var(--z-ease),transform 180ms var(--z-ease)}
 html body :is(.icon,.icon-button,.icon-btn,.shelf-arrow):active:not(:disabled){scale:.94}
 html body :is(.icon,.icon-button,.icon-btn,.shelf-arrow){transition:scale 140ms var(--z-ease),color 140ms var(--z-ease),background-color 140ms var(--z-ease),opacity 140ms var(--z-ease)}
 @keyframes zamar-page-arrive{from{opacity:.92;translate:0 5px}to{opacity:1;translate:none}}
 @keyframes zamar-sheet-arrive{from{opacity:.8;translate:0 8px;scale:.992}to{opacity:1;translate:none;scale:none}}
 @keyframes zamar-menu-arrive{from{opacity:.5;translate:0 4px}to{opacity:1;translate:none}}
 @keyframes zamar-backdrop-arrive{from{opacity:0}to{opacity:1}}
}
@media(prefers-reduced-motion:reduce){
 html body :is(#main,.lyrics-scroll,[data-shelf]){scroll-behavior:auto!important}
 html body :is(dialog,dialog::backdrop,#main.enter,#right-panel,#song-menu,#profile-menu,#country-menu,.icon,.icon-button,.icon-btn,.shelf-arrow,.play-float,.lyrics-backdrop,.lyrics-track-label>span,.zamar-atmosphere i,.welcome-atmosphere i){animation:none!important;transition:none!important}
}

html body .hero-follow svg{width:20px;height:20px}
html body .hero-main-play svg{width:26px;height:26px}
html body .text-action svg{width:14px;height:14px;vertical-align:middle}
@media(prefers-reduced-motion:reduce){html body dialog::backdrop{animation:none!important;transition:none!important}}