/* Player bar and expanded sheet. */

@layer player {
  #player {
    position: fixed;
    z-index: var(--z-player);
    left: calc(var(--rail-w) + var(--safe-left));
    right: 0;
    bottom: 0;
    height: calc(var(--player-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    pointer-events: auto;
  }

  .p-bar {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) auto minmax(140px, 0.8fr) auto 160px;
    grid-template-areas: 'id transport volume tools spec';
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-4);
    background: var(--surface-strong);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(var(--blur)) saturate(140%);
  }

  .p-mini {
    grid-area: id;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .p-id { min-width: 0; display: flex; flex-direction: column; }
  .p-id strong, .p-id em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .p-id em { color: var(--text-dim); font-style: normal; font-size: var(--fs-xs); }

  .p-transport { grid-area: transport; display: flex; align-items: center; gap: var(--sp-2); justify-content: center; }
  .p-play { width: 48px; height: 48px; border-radius: 50%; }
  .p-volume { grid-area: volume; display: flex; align-items: center; gap: var(--sp-2); }
  .p-volume__range { width: 110px; }
  .p-tools { grid-area: tools; display: flex; justify-content: flex-end; gap: 2px; }
  .p-spec { grid-area: spec; width: 160px; height: 36px; justify-self: end; }
  .p-song, .p-meta, .p-collapse { display: none; }

  .p-bar.is-expanded {
    position: fixed;
    inset: 0;
    height: auto;
    z-index: var(--z-modal);
    grid-template-columns: 1fr;
    grid-template-areas:
      'id'
      'spec'
      'transport'
      'volume'
      'tools'
      'meta';
    align-content: center;
    justify-items: center;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background:
      radial-gradient(600px 320px at 50% 20%, var(--accent-soft), transparent 70%),
      var(--bg-0);
  }

  .p-bar.is-expanded .p-spec { width: min(520px, 90vw); height: 96px; }
  .p-bar.is-expanded .p-song,
  .p-bar.is-expanded .p-meta,
  .p-bar.is-expanded .p-collapse { display: block; color: var(--text-dim); }
  .p-bar.is-expanded .p-mini { flex-direction: column; text-align: center; }

  .p-queue { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
  .p-eq { display: flex; gap: var(--sp-2); align-items: end; }
  .p-eq label { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text-mute); }
  .p-eq input { writing-mode: vertical-lr; direction: rtl; height: 120px; }

  html[data-mode='mobile'] #player {
    left: 0;
    right: 0;
    bottom: calc(var(--tabbar-h) + var(--safe-bottom));
    height: var(--mini-player-h);
  }

  html[data-mode='mobile'] .p-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'id transport';
  }

  html[data-mode='mobile'] .p-volume,
  html[data-mode='mobile'] .p-tools,
  html[data-mode='mobile'] .p-spec { display: none; }

  html[data-mode='mobile'] .p-bar.is-expanded {
    bottom: 0;
    height: auto;
  }

  html[data-mode='mobile'] .p-bar.is-expanded .p-volume,
  html[data-mode='mobile'] .p-bar.is-expanded .p-tools,
  html[data-mode='mobile'] .p-bar.is-expanded .p-spec { display: flex; }
}