/* ЛИЧНАЯ БИБЛИОТЕКА ПЕСЕН (09.10.2026, правка Сармата №2). Логика и разбор решений —
   в шапке public/library.js. Здесь три места: звезда на экране песни (learn.html),
   блок «Избранное / Недавние» в каталоге (learn.html), квадрат в гримёрке (index.html).

   ЦВЕТ ЗВЕЗДЫ — ЗОЛОТО, А НЕ НОВЫЙ АКЦЕНТ. На экране песни уже три цветовых кода
   (золото, нейтраль, циан) при потолке в четыре; звезда берёт золото повтора строки
   (#8A5620 / #F3D9AC — те же значения, что у .ls-dk.loop в learn.html), то есть
   читается частью пульта, а не чужой наклейкой. Контур в светлой теме 5.6:1 к фону
   дорожки, метка в строке каталога 3.8:1 к белой карточке — выше 3:1 для значков. */
:root{
  --lib-star:#8A5620;            /* контур — бронза, как у «повтора строки» */
  --lib-fill:#D99A62;            /* заливка */
  --lib-edge:#8A5620;            /* кромка залитой звезды: на светлом без неё золото тонет */
  --lib-mk:#B8742F;              /* метка «в избранном» в строке каталога */
  --lib-glow:194,134,90;         /* вспышка «← ♪», когда звезда долетела (RGB) */
  --lib-tab-ink:#8A5620;
  --lib-tab-line:rgba(194,134,90,.55);
}
html[data-theme="dark"]{
  --lib-star:#F3D9AC;
  --lib-fill:#F3D9AC;
  --lib-edge:#F3D9AC;
  --lib-mk:#F3D9AC;
  --lib-glow:243,217,172;
  --lib-tab-ink:#E9C48E;
  --lib-tab-line:rgba(233,196,142,.42);
}

/* ------------------------------ ЗНАК ЗВЕЗДЫ ------------------------------ */
.lib-s{display:block;width:24px;height:24px;overflow:visible}
.lib-s-l{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
/* Заливка вырастает из центра с перелётом — звезда «загорается». */
.lib-s-f{fill:var(--lib-fill);stroke:var(--lib-fill);stroke-width:1.8;stroke-linejoin:round;
  transform-box:fill-box;transform-origin:50% 50%;transform:scale(.2);opacity:0;
  transition:transform 320ms cubic-bezier(.34,1.56,.64,1),opacity 120ms linear}
.lib-star.on .lib-s-f,.lib-s.is-on .lib-s-f,.lib-cab.on .lib-s-f,.lib-fly .lib-s-f{transform:none;opacity:1}
.lib-star.on .lib-s-l,.lib-fly .lib-s-l{stroke:var(--lib-edge)}
/* На тёмном залитая звезда чуть светится — «горит», а не просто закрашена. */
html[data-theme="dark"] .lib-star.on .lib-s{filter:drop-shadow(0 0 6px rgba(243,217,172,.42))}
.lib-c{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------ ЭКРАН ПЕСНИ: РЯД ДОРОЖКИ ------------------------ */
/* Дорожка и звезда — один ряд: дорожка тянется, звезда — ячейка справа за тонкой
   чертой, как капсулы «танец | песня» в строке каталога. Высота ряда 44px — норма
   пальца; шире 400px дорожка и раньше была 46px, там шапка не выросла вовсе. */
.lib-wrow{display:flex;align-items:stretch;background:var(--bg-1);border-bottom:1px solid var(--line)}
.lib-wrow>.ls-wave{flex:1 1 auto;min-width:0;height:auto;min-height:44px;border-bottom:0}
/* Шире 400px дорожка была 46px вместе с чертой снизу: ряд 45+1 — ровно та же высота. */
@media (min-width:401px){.lib-wrow>.ls-wave{min-height:45px}.lib-star{min-height:45px}}
.lib-star{position:relative;flex:0 0 52px;width:52px;min-height:44px;margin:0;padding:0;
  border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;
  color:var(--lib-star);display:grid;place-items:center;cursor:pointer;font:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.lib-star:hover{background:rgba(var(--lib-glow),.08)}
.lib-star:focus-visible{outline:2px solid var(--lib-star);outline-offset:-5px}
/* Кольцо-вспышка вокруг звезды при сохранении. */
.lib-star::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;border:2px solid var(--lib-fill);opacity:0;pointer-events:none}
/* Анимации на ЗНАКЕ и кольце, не на самой кнопке: кнопку жмёт пружина spring.js
   (transform той же кнопки), и две анимации одного свойства на одном элементе
   перебивали бы друг друга. */
.lib-star.pop .lib-s{animation:lib-pop 560ms cubic-bezier(.22,.9,.3,1)}
.lib-star.pop::after{animation:lib-ring 620ms ease-out}
.lib-star.unpop .lib-s{animation:lib-unpop 300ms ease-out}
@keyframes lib-pop{0%{transform:scale(1)}28%{transform:scale(1.34) rotate(-10deg)}62%{transform:scale(.92) rotate(3deg)}100%{transform:none}}
@keyframes lib-ring{0%{opacity:.9;transform:scale(.45)}100%{opacity:0;transform:scale(1.75)}}
@keyframes lib-unpop{0%{transform:scale(1)}40%{transform:scale(.78)}100%{transform:none}}

/* Полёт: копия звезды поверх всего, путь считает library.js (дуга до нотки «← ♪»). */
.lib-fly{position:fixed;left:0;top:0;z-index:90;width:24px;height:24px;pointer-events:none;
  color:var(--lib-fill);will-change:transform,opacity}
.lib-fly .lib-s{filter:drop-shadow(0 4px 10px rgba(0,0,0,.32))}
/* «← ♪» ловит звезду: кольцо золота по кромке и нотка подпрыгивает. Тень пульта
   (--пульт-тень, объявлена на .ls-dock в learn.html) сохраняется под вспышкой. */
#lsRoot .ls-dock .ls-pick.lib-catch{animation:lib-catch 760ms ease-out}
#lsRoot .ls-dock .ls-pick.lib-catch svg{animation:lib-note 620ms cubic-bezier(.22,.9,.3,1);color:var(--lib-star)}
@keyframes lib-catch{
  0%{box-shadow:var(--пульт-тень),0 0 0 0 rgba(var(--lib-glow),0)}
  22%{box-shadow:var(--пульт-тень),0 0 0 2px rgba(var(--lib-glow),.9),0 0 22px 2px rgba(var(--lib-glow),.55)}
  100%{box-shadow:var(--пульт-тень),0 0 0 10px rgba(var(--lib-glow),0),0 0 22px 2px rgba(var(--lib-glow),0)}}
@keyframes lib-note{0%{transform:scale(1)}30%{transform:scale(1.5) rotate(-10deg)}65%{transform:scale(.92)}100%{transform:none}}

/* ----------------------- КАТАЛОГ: ИЗБРАННОЕ / НЕДАВНИЕ ---------------------- */
/* Вид — часть каталога, а не промо-врезка: те же строки, что в «Уже собраны», и
   чипы в тоне «Раскрыть всё». NN/g ловили, как блок «недавнее», оформленный иначе
   остального, люди пролистывали как рекламу (Enriched Site Search Suggestions, 2022). */
.lib-mine{margin:var(--s4,16px) 0 var(--s5,24px)}
.lib-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.lib-tab{display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;padding:0 15px 0 12px;
  border-radius:999px;border:1px solid var(--lib-tab-line);background:transparent;color:var(--lib-tab-ink);
  font:inherit;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lib-tab .lib-s,.lib-tab .lib-c{width:16px;height:16px}
.lib-tab .lib-s-l{stroke:var(--lib-star)}
.lib-tab .lib-s-f{fill:var(--lib-star);stroke:var(--lib-star)}
.lib-tab:active{background:rgba(var(--lib-glow),.14)}
.lib-tab:focus-visible{outline:2px solid var(--lib-star);outline-offset:2px}
/* Выбранная — литой металл пульта (тот же, что у ▶ и включённого повтора). */
.lib-tab.on{color:#2A1710;border-color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%),
             linear-gradient(160deg,#FDF2E6,#F0CDA9 34%,#DFAE86 62%,#F6DEC8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.45),0 6px 16px rgba(190,130,95,.28)}
.lib-tab.on .lib-s-l,.lib-tab.on .lib-s-f{stroke:#7A4A1A;fill:#7A4A1A}
.lib-tab.on .lib-s-l{fill:none}
.lib-tab.on .lib-c{stroke:#2A1710}
.lib-n{min-width:20px;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:0;
  line-height:1.3;text-align:center;font-variant-numeric:tabular-nums;background:rgba(var(--lib-glow),.2);color:inherit}
.lib-tab.on .lib-n{background:#2A1710;color:#F6DEC8}
.lib-panel .ls-item{margin-bottom:8px}
.lib-hint{display:flex;align-items:center;gap:10px;margin:0;padding:4px 2px;color:var(--mut);font-size:13px;line-height:1.45}
.lib-hint .lib-s,.lib-hint .lib-c{flex:0 0 auto;width:20px;height:20px;color:var(--lib-star)}
.lib-more{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;margin:0;border:0;
  border-radius:999px;background:transparent;color:var(--lib-tab-ink);font:inherit;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lib-more i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.lib-more.open i{transform:translateY(2px) rotate(225deg)}
.lib-more:active{background:rgba(var(--lib-glow),.12)}
.lib-more:focus-visible{outline:2px solid var(--lib-star);outline-offset:2px}
/* Метка «в избранном» в общем списке: маленькая залитая звезда после названия.
   В самой вкладке «Избранное» её нет — там она у каждой строки и ничего не говорит. */
.sp-two .lib-mk{display:none;flex:0 0 auto;width:13px;height:13px;background:var(--lib-mk);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.88 6.5.95-4.7 4.58 1.11 6.47L12 17.43l-5.81 3.05 1.11-6.47-4.7-4.58 6.5-.95z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.88 6.5.95-4.7 4.58 1.11 6.47L12 17.43l-5.81 3.05 1.11-6.47-4.7-4.58 6.5-.95z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sp-two.lib-on .lib-mk{display:inline-block}
.lib-panel[data-tab="saved"] .sp-two .lib-mk{display:none}

/* ------------------------- ГРИМЁРКА: КВАДРАТ СПРАВА ------------------------ */
/* Тот же ритм, что у ряда «Чат | Мессенджер» над ним: широкая плитка + квадрат 22%
   через 8px. Золото остаётся одно — «Разучить песню»; квадрат — сталь вторичного
   действия (материал .tile.st-t, переменные --st-* из cabinet.css), ребро сверху
   золотое — роль «песня» (--st-edge-gold). Ряд рисуется сеткой только когда квадрат
   есть: не загрузился library.js — золотая кнопка остаётся во всю ширину. */
.home .hm-zone .lib-cta-row{margin:14px 14px 16px}
.home .hm-zone.pc-panel.bare .lib-cta-row{margin:0}
.home .hm-zone .lib-cta-row .lesson-cta,
.home .hm-zone.pc-panel .lib-cta-row .lesson-cta{margin:0}
.home .lib-cta-row:has(>.lib-cab){display:grid;grid-template-columns:minmax(0,1fr) 22%;gap:8px;align-items:stretch}
/* Стрелка «→» — знак конца ряда; в разделённом ряду эту роль берёт квадрат, а её
   22px нужны названию: «Разучить песню» иначе ломается на две строки. */
.home .lib-cta-row:has(>.lib-cab) .lesson-cta .lc-arrow{display:none}
@media (max-width:370px){.home .lib-cta-row:has(>.lib-cab) .lesson-cta .lc-emoji{display:none}}
.lib-cab{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-width:0;min-height:84px;padding:10px 4px 9px;box-sizing:border-box;border-radius:var(--r,14px);
  text-decoration:none;text-align:center;color:var(--st-chrome-ink,#1B2233);
  background:var(--st-chrome,linear-gradient(180deg,#F7F9FD,#D9E1ED 40%,#FFF 50%,#C6D0E0 57%,#A8B3C7));
  border:1px solid var(--st-chrome-line,rgba(23,32,56,.26));
  box-shadow:var(--st-bevel,inset 0 1px 0 rgba(255,255,255,.85)),var(--st-cast,0 8px 22px rgba(23,32,56,.15));
  -webkit-tap-highlight-color:transparent}
.lib-cab::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,var(--st-edge-gold,#C2865A) 22%,var(--st-edge-gold,#C2865A) 78%,transparent)}
.lib-cab::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.85) 50%,transparent 66%);
  transform:translateX(-130%);transition:transform 520ms var(--ease,ease)}
.lib-cab:active::after{transform:translateX(130%)}
.lib-cab>*{position:relative;z-index:2}
.lib-cab-ic{display:inline-flex;align-items:center;gap:5px;line-height:1}
.lib-cab .lib-s-l{stroke:#8A5620}
.lib-cab .lib-s-f{fill:#C98A52;stroke:#8A5620}
.lib-cab-n{font-size:18px;font-weight:850;letter-spacing:-.01em;line-height:1;color:#1B2233;font-variant-numeric:tabular-nums}
.lib-cab-n:empty{display:none}
.lib-cab small{display:block;max-width:100%;font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1.2;
  color:var(--st-chrome-mut,#333B4C);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-cab:focus-visible{outline:3px solid var(--accent2,#C2865A);outline-offset:2px}
@media (max-width:380px){.lib-cab small{font-size:9.5px;letter-spacing:0;text-overflow:clip}}

/* Плашка экрана песни (.ls-toast, learn.html) стоит left:50% — и потому по ширине
   получала только правую половину экрана: на 390px подсказка звезды ломалась в
   четыре строки шириной 195px. max-content даёт ей ширину текста, потолок max-width
   у неё свой. Касается и «это была последняя песня» — там та же поломка. */
.ls-toast{width:max-content}

/* --------------------------- УМЕНЬШИТЬ ДВИЖЕНИЕ --------------------------- */
/* Полёта нет вовсе (library.js его не запускает), вспышки знака нет; остаются
   мгновенная заливка звезды и свечение «← ♪» — это цвет, а не движение. */
@media (prefers-reduced-motion:reduce){
  .lib-s-f{transition:opacity 1ms linear}
  .lib-star.pop .lib-s,.lib-star.unpop .lib-s,.lib-star.pop::after,
  #lsRoot .ls-dock .ls-pick.lib-catch svg{animation:none}
  .lib-cab::after{display:none}
}