/* Значки ромбов в гроздях и подпись при наведении (см. menu-icons.js). v1.
   Длинная цепочка #mi — чтобы перебить правила страниц с !important и многими id. */
:is(html,#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi) .mi-btn{-webkit-user-select:none!important;user-select:none!important;font-size:0!important;text-shadow:none!important;letter-spacing:0!important}
:is(html,#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi) .mi-btn > :not(input){visibility:hidden!important}
:is(html,#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi) .mi-btn::after{content:""!important;display:block!important;position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:20px!important;height:20px!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;opacity:1!important;transform:translate(-50%,-50%)!important;background:currentColor!important;-webkit-mask:var(--mi-icon) center/contain no-repeat!important;mask:var(--mi-icon) center/contain no-repeat!important;pointer-events:none!important;z-index:2!important}
:is(html,#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi) .mi-btn:disabled::after{opacity:.35!important}

.mi-pop{position:fixed;left:0;top:0;z-index:2147483647;pointer-events:none;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--mi-edge)}
.mi-pop[hidden]{display:none}
/* v6: длинная подсказка рядом с кнопкой — на уровне её оси, в цветах кнопки */
.mi-tip{position:fixed;left:0;top:0;z-index:2147483647;pointer-events:none;box-sizing:border-box;max-width:min(320px,calc(100vw - 8px));padding:5px 9px;background:var(--mi-fill);color:var(--mi-ink);font:500 12px/1.35 system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere}
.mi-tip[hidden]{display:none}
.mi-pop-fill{position:absolute;inset:2px 3px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--mi-fill);display:flex;align-items:center;justify-content:center}
.mi-pop-box{width:100%;box-sizing:border-box;padding:0 4px;overflow:hidden;white-space:nowrap;text-align:center;font:700 11px/1.25 system-ui,sans-serif;color:var(--mi-ink)}
.mi-pop-box:has(> .mi-run){text-align:left}
.mi-pop-run{display:inline-block;white-space:nowrap}
.mi-pop-run.mi-run{animation:mi-run var(--mi-time,4s) linear infinite alternate}
@keyframes mi-run{0%,20%{transform:translateX(0)}80%,100%{transform:translateX(var(--mi-to))}}
@media (prefers-reduced-motion:reduce){.mi-pop-run.mi-run{animation-duration:calc(var(--mi-time,4s) * 2)}}
/* v10, «когда включены подсказки — расширять каждый ромб, чтобы там поместился короткий текст кнопки»: html.mi-wide (горит ?) — ромб шестиугольником
   вширь (концы — те же углы 24 px, при ширине 48 это прежний ромб), значок у левого угла, короткое имя посередине. Ширину задаёт раскладка страницы. */
.mi-name{display:none}
:is(html,#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi).mi-wide :is(.mi-btn,.sfz-grape-item:not(.sfz-grape-editor,.sfz-grape-range)){clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,24px 100%,0 50%)!important}
:is(html,#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi).mi-wide .mi-btn.mi-roomy::after{left:22px!important;width:16px!important;height:16px!important}
:is(html,#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi#mi).mi-wide .mi-btn.mi-roomy > .mi-name{display:block!important;visibility:visible!important;position:absolute!important;left:32px!important;right:16px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;padding:0!important;font:600 10px/1.15 "Segoe UI",system-ui,sans-serif!important;letter-spacing:0!important;color:inherit;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;clip-path:none!important;background:none!important}
.mi-name::before{content:attr(data-n)}