/* Правки по отчёту «Spoy в Safari» (2026-11-07), код — static/qafix.js, подключение — .claude/patches/safari_qa_patch.py */

/* F04: кнопки вида лежали на нотах и ловили нажатия. Теперь над лентой своя тонкая полоска для них */
.dock:not(.min-roll) .roll-wrap:has(> .roll) { padding-top: 40px; }
.dock:not(.min-roll) .roll-wrap > :is(.nt-toggle, .nw-toggle, .roll-view, .stow) { top: 2px; opacity: 1 !important; }
.dock:not(.min-roll) .roll-wrap > .phase { top: 6px !important; }
.dock:not(.min-roll) .roll-wrap > .gap-count { top: 46px; }
@media (max-width: 700px) {
  .dock:not(.min-roll) .roll-wrap:has(> .roll) { padding-top: 34px; }
  .dock:not(.min-roll) .roll-wrap > :is(.nt-toggle, .nw-toggle, .stow) { width: 30px; height: 30px; }
}

/* F06: лента нот выше на больших экранах — от высоты окна, а не 95–150 px */
@media (min-width: 701px) and (min-height: 640px) {
  .dock:not(.fall) .roll { height: clamp(180px, 27vh, 400px); }
}

/* F19: подсказка «Потяните вверх» — внутри ленты под ручкой, а не на строке песни */
.roll-grip-tip { bottom: auto; top: calc(100% + 14px); }
.roll-grip-tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--accent); }
.roll-wrap > .roll-grip-tip { top: 54px; }

/* F07: карта частей — без «×N» (видно при наведении), узкие части — «К1», совсем узкие — цветом */
.map .map-part { container-type: inline-size; }
.map .map-count { display: none; }
.map .map-part:hover .map-count { display: inline; }
@container (max-width: 64px) {
  .map-part > span[data-short] { font-size: 0; }
  .map-part > span[data-short]::before { content: attr(data-short); font-size: 11px; }
}
@container (max-width: 18px) { .map-part > span { display: none; } }

/* F08: дефис сразу за слогом, а не у края его места под нотой */
.syl.cont .tx { position: relative; }
.syl.cont .tx::after { right: auto; left: 100%; }

/* F09: выученная строка */
.line { position: relative; }
.line > .qa-learned {
  position: absolute; right: 58px; bottom: 4px; font-size: 11px; color: var(--muted); pointer-events: auto;
  padding: 1px 8px; border-radius: 999px; background: var(--glass); cursor: help;
}
@media (max-width: 700px) { .line > .qa-learned { right: 10px; bottom: -2px; font-size: 10px; } }

/* F10: «Пой со мной» включён, а песня стоит — ▶ зовёт */
.play-main.qa-call { animation: qa-call 1.2s ease-in-out infinite; }
@keyframes qa-call { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
.qa-call-tip {
  position: fixed; z-index: 60; transform: translate(-50%, -100%); padding: 7px 12px; border-radius: 10px; white-space: nowrap;
  background: var(--accent); color: #1a0d09; font-weight: 600; font-size: 13px; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.qa-call-tip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .play-main.qa-call { animation: none; outline: 2px solid var(--accent); } }

/* F02: меню на телефоне — кнопка «Меню» и список, а не полоса с прокруткой вбок */
.qa-menu-btn { display: none; }
@media (max-width: 700px) {
  .qa-menu-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
    background: var(--glass); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; flex: none;
  }
  .qa-menu-btn svg { width: 16px; height: 16px; }
  .sidebar nav { display: none; }
  .sidebar.qa-menu-open nav {
    display: flex; flex-direction: column; position: absolute; top: calc(100% + 6px); left: 8px; right: 8px; z-index: 50;
    gap: 2px; padding: 8px; overflow: visible; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
  }
  .sidebar.qa-menu-open nav a { height: 44px; padding: 0 14px; justify-content: flex-start; gap: 12px; font-size: 15px; }
  .sidebar.qa-menu-open nav a svg { display: block; }
  .sidebar .brand { margin-right: auto; }
  .side-account .side-offer { display: none; }
}

/* F14: подсказка у кнопок полки и на узких экранах — текст песни не уходит под полку */
@media (min-width: 701px) and (max-width: 1100px) {
  body.rail-on main { margin-right: calc(var(--rail-w, 56px) + 24px); }
}

/* F15: на телефоне полка окон — строкой в пульте */
.rail.qa-in-dock {
  position: static; display: flex; flex-direction: row; justify-content: center; gap: 6px; margin: 0 0 6px; padding: 0;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
}
body:not(.rail-on) .rail.qa-in-dock { display: none; }
.rail.qa-in-dock .rail-tab { width: 36px; height: 36px; }
.rail.qa-in-dock .rail-all { width: 36px; height: 36px; }

/* F16 */
.qa-gone { color: var(--faint); }

/* F17: цена в плашке меню не рвётся посередине */
.side-offer b { white-space: nowrap; }

/* F21 */
.fb-btn.qa-calm:hover { background: none; color: var(--muted); }

/* I01: на широком мониторе текст песни шире */
@media (min-width: 1600px) {
  main:has(#lyrics) { padding-left: max(32px, calc((100vw - var(--side) - 24px - 1400px) / 2)); padding-right: max(32px, calc((100vw - var(--side) - 24px - 1400px) / 2)); }
  .dock-inner { max-width: 1440px; }
}

/* I02: закрытые «Песенники» у гостя — как это выглядит */
.qa-locked-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; width: 100%; max-width: 860px; }
.qa-locked-shots figure { margin: 0; display: grid; gap: 8px; }
.qa-locked-shots img { width: 100%; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.qa-locked-shots figcaption { font-size: 13px; color: var(--muted); text-align: center; }

/* телефон: ручка растягивания ленты не ложится на кнопки вида — слева в полоске, а при полке окон — справа в её строке */
@media (max-width: 700px) {
  .dock:not(.min-roll) .roll-wrap > .roll-grip { left: 30px; }
  body.rail-on .dock-inner:has(> .rail.qa-in-dock) .roll-wrap > .roll-grip { top: -44px; left: auto; right: 4px; transform: none; }
  body.rail-on .dock-inner:has(> .rail.qa-in-dock) .roll-wrap > .roll-grip:hover { transform: none; }
  .rail.qa-in-dock { justify-content: flex-start; padding-left: 4px; }
}