/* ==================== планшет и десктоп ==================== */

@media (min-width: 768px) {
  :root { --pad-t: 28px; --gutter: 24px; --card-pad: 20px; }

  body { background: var(--black); }

  /* Панельная оболочка Spotify: сайдбар + контент + now-playing на всю ширину.
     .dock отдаёт своих детей (.mini и .tabbar) прямо в грид через display:contents,
     поэтому вся отделка лежит на самих .mini/.tabbar. */
  .app {
    display: grid;
    grid-template-columns: 76px 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "nav main" "now now";
    column-gap: 8px;
    padding: 8px;
    background: var(--black);
    height: 100vh; height: 100dvh;
  }
  .dock { display: contents; }

  .screens { grid-area: main; background: var(--bg); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 0 0 1px var(--line-soft); }

  .tabbar {
    grid-area: nav;
    flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
    padding: 20px 8px;
    background: var(--surface-1); border-top: 0; border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line-soft);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  /* Вордмарк сжат до буквы: в рельс 76px целиком он не входит. */
  .tabbar::before {
    content: 'B';
    display: block; padding: 4px 0 20px;
    font-size: 22px; font-weight: 800; letter-spacing: 0.02em; color: var(--accent);
  }
  .tab { flex: none; align-self: stretch; padding: 12px 0; border-radius: var(--r-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
  .tab--on { background: var(--surface-3); }

  .mini { grid-area: now; margin-top: 8px; padding: 12px 20px 14px; border-top: 0; border-radius: var(--r-card); background: var(--surface-1); box-shadow: 0 0 0 1px var(--line-soft); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mini__text b { font-size: 14px; }
  .mini__bar { left: 20px; right: 20px; width: auto; bottom: 4px; border-radius: 2px; overflow: hidden; }

  .toast { position: fixed; bottom: 40px; }

  /* Шапка: вордмарк живёт в сайдбаре, приветствие становится заголовком */
  .head .wordmark { display: none; }
  .head__sub { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--t1); }

  /* Карусели превращаются в сетку карточек */
  .rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    overflow: visible;
  }
  .rail--sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .card-track { width: auto; padding: 12px; }
  .card-track__meta { padding: 8px 4px 2px; }
  .cover--lg, .cover--md { width: 100%; height: auto; aspect-ratio: 1 / 1; }

  /* Экраны без сетки карточек (поиск, медиатека, профиль, звук) собираются в
     одну колонку по центру панели: заголовок, поиск, карточки и списки
     выравниваются друг по другу, а не липнут к левому краю. Главную это не
     касается — там сетка обложек занимает всю ширину. */
  #screen-search > *,
  #screen-library > *,
  #screen-profile > *,
  #screen-sound > *,
  #screen-album > *,
  #screen-artist > * {
    width: 100%;
    max-width: calc(760px + var(--gutter) * 2);
    margin-inline: auto;
  }

  /* Шторки становятся центрированными модалками поверх затемнения */
  .sheet {
    position: absolute; inset: 0;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    transform: none;
    opacity: 0; transition: opacity var(--dur-sheet) var(--ease);
  }
  .sheet--open { opacity: 1; }
  .sheet__bg, .sheet__scrim { display: none; }
  /* Шторка тут — модалка по центру, тянуть её вниз незачем. */
  .sheet { --drag: 0; }
  .sheet__body {
    height: auto; max-height: min(860px, 92vh); width: calc(100% - 48px);
    border-radius: 16px;
    background: var(--surface-1);
    box-shadow: var(--shadow-2);
    padding: 24px 28px calc(24px + var(--safe-b));
    overflow-y: auto; scrollbar-width: none;
  }
  .sheet__body::-webkit-scrollbar { display: none; }
  .sheet--open .sheet__body { animation: modal-in var(--dur-sheet) var(--ease); }
  @keyframes modal-in { from { transform: scale(0.96); opacity: 0.6; } }

  #sheet-player .sheet__body { max-width: 460px; background: linear-gradient(180deg, #24447f 0%, #16265c 30%, var(--bg) 75%); }
  #sheet-player .art { flex: none; padding: 4px 0 24px; }
  #sheet-player .cover--xl { height: auto; width: 100%; max-width: 300px; }
  #sheet-lyrics .sheet__body { max-width: 560px; height: 88vh; padding: 24px 0 20px; }
  #sheet-lyrics .lyrics { padding-bottom: 30%; }
  #sheet-premium .sheet__body { max-width: 440px; }
  #sheet-queue .sheet__body { max-width: 460px; height: 80vh; }
}

/* Приветствие на десктопе: кегль текста уже задан через clamp, растёт только
   кнопка. Отрицательные поля — .app здесь имеет padding 8px, а inset:0
   считается от него, и слой не закрыл бы края. */
@media (min-width: 768px) {
  .welcome { margin: -8px; }
  .welcome__play { width: 112px; height: 112px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  .rail { gap: 20px; }
}

/* Ховеры только там, где есть мышь */
@media (hover: hover) {
  .iconbtn:hover { background: var(--surface-3); }
  .chip:hover:not(.chip--on) { background: var(--surface-3); }
  .card-track:hover { background: var(--surface-2); }
  .trackrow:hover { background: var(--wash); }
  .trackrow--on:hover { background: var(--accent-tint); }
  .row:hover { background: var(--wash); }
  .tab:hover:not(.tab--on) { color: var(--t1); }
  .btn-round:hover { background: var(--accent-hi); transform: scale(1.04); }
  .tbtn:hover { color: var(--t1); }
  .likebtn:hover { background: var(--surface-3); }
  .actionbar__btn:hover { background: var(--surface-3); color: var(--t1); }
  .ghostbtn:hover { background: var(--surface-3); }
  .ghostbtn--accent:hover { background: var(--accent-hi); }
  .cta:hover { background: var(--accent-hi); }
  .seg__item:hover:not(.seg__item--on) { background: var(--surface-3); }
  .plan:hover { background: var(--surface-2); }
  .plan--on:hover { background: var(--accent-tint); }
  .promo:hover { transform: scale(1.01); }
  .linkbtn:hover { color: var(--accent-hi); }
  .welcome__play:hover { background: var(--accent-hi); transform: scale(1.04); }
}

/* Просят меньше прозрачности — материалы становятся плотными, блюр не нужен. */
@media (prefers-reduced-transparency: reduce) {
  .mini, .tabbar { background: var(--surface-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .badge-quality { background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Просят больше контраста — приглушённый текст поднимаем, поверхности
   отделяем видимой границей вместо одной только заливки. */
@media (prefers-contrast: more) {
  :root { --t2: #d6d6d6; --t3: #b8b8b8; --t4: #a0a0a0; --line: rgba(255, 255, 255, 0.28); }
  .card, .promo, .plan, .mini, .tabbar { border: 1px solid var(--line); }
  .chip:not(.chip--on) { border: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  /* Правило выше гасит длительности, но НЕ задержки, а в приветствии они
     доходят до 4.4s — без обнуления экран просто простоял бы пустым. */
  .welcome *, #sheet-player.player--intro, #sheet-player.player--intro *,
  #sheet-player.player--intro .sheet__body::before,
  .app--intro .screens, .app--intro .tabbar, .app--intro .mini { animation-delay: 0s !important; }
  /* Тайминги — не анимация, глобальное правило их тоже не трогает. */
  .welcome { --text-dur: 0s; --go-dur: 0.12s; --build-dur: 0.12s; }
  /* Меньше движения — не значит «без обратной связи»: вместо въезда сбоку
     остаётся мягкое проявление, чтобы смена экрана всё же читалась. */
  .screen--push, .screen--pop { animation: fade 200ms var(--ease) !important; }
  /* Скелетон: бегущий блик заморозился бы глобальным капом на случайном кадре —
     убираем его совсем, остаётся статичный плейсхолдер. */
  .skel { animation: none !important; }
  .skel::after { display: none; }
  /* Сцена сжимается до сути: сразу кнопка. Показать текст статикой нельзя —
     он лежит в той же ячейке сетки и наложился бы на кнопку. */
}