/* 248 Anthems — player structural base. Sites skin via the custom props. */
.ap {
  --ap-bg: transparent;
  --ap-fg: currentColor;
  --ap-dim: color-mix(in srgb, currentColor 55%, transparent);
  --ap-line: color-mix(in srgb, currentColor 18%, transparent);
  --ap-accent: #c8ff2e;
  --ap-accent-fg: #0a0a0a;
  --ap-radius: 14px;
  --ap-row-radius: 10px;
  --ap-font: inherit;
  font-family: var(--ap-font);
  background: var(--ap-bg);
  color: var(--ap-fg);
  border-radius: var(--ap-radius);
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}
.ap * { box-sizing: border-box; }
.ap button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.ap-now { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ap-kicker { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ap-dim); }
.ap-title { font-size: clamp(1.05rem, 2.4vw, 1.5rem); font-weight: 650; line-height: 1.15; margin-top: .2rem; }
.ap-sub { color: var(--ap-dim); font-size: .85rem; margin-top: .3rem; }
.ap-pending .ap-sub { font-style: italic; }

.ap-transport { display: flex; align-items: center; gap: .5rem; }
.ap-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transition: transform .15s ease, background .2s ease, color .2s ease; }
.ap-btn svg { width: 22px; height: 22px; }
.ap-btn:hover { transform: scale(1.06); }
.ap-btn:active { transform: scale(.94); }
.ap-play { width: 58px; height: 58px; background: var(--ap-accent); color: var(--ap-accent-fg); }
.ap-play svg { width: 26px; height: 26px; }

.ap-seek { display: flex; align-items: center; gap: .7rem; }
.ap-time { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--ap-dim); min-width: 2.9em; }
.ap-time:last-of-type { text-align: right; }
.ap-bar { position: relative; flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.ap-bar::before { content: ""; position: absolute; inset: 9px 0; border-radius: 99px; background: var(--ap-line); }
.ap-bar-buffer, .ap-bar-fill { position: absolute; inset: 9px auto 9px 0; width: 0; border-radius: 99px; pointer-events: none; }
.ap-bar-buffer { background: color-mix(in srgb, currentColor 26%, transparent); }
.ap-bar-fill { background: var(--ap-accent); }
.ap-bar-knob { position: absolute; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--ap-accent); transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ap-accent) 22%, transparent); }
.ap-bar:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 3px; border-radius: 99px; }

.ap-mute svg { width: 20px; height: 20px; }
.ap-vol { width: 84px; accent-color: var(--ap-accent); }
@media (max-width: 560px) { .ap-vol { display: none; } .ap-seek { gap: .45rem; } }

.ap-status { min-height: 1.1em; font-size: .8rem; color: var(--ap-dim); opacity: 0; transition: opacity .25s ease; }
.ap-status-show { opacity: 1; }

.ap-panels { display: grid; gap: 1rem; }
.ap-lib-open .ap-panels { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .ap-lib-open .ap-panels { grid-template-columns: 1fr; } }

.ap-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; flex-wrap: wrap; }
.ap-panel-title { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ap-dim); font-weight: 600; margin: 0; }
.ap-count { opacity: .6; }
.ap-panel-actions { display: flex; gap: .5rem; }
.ap-mini { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; padding: .4rem .8rem; border-radius: 99px; border: 1px solid var(--ap-line); transition: border-color .2s ease, background .2s ease; }
.ap-mini:hover { border-color: var(--ap-accent); }
.ap-mini svg { width: 15px; height: 15px; }
.ap-filter { width: 100%; max-width: 260px; font: inherit; font-size: .82rem; color: inherit; background: transparent; border: 1px solid var(--ap-line); border-radius: 99px; padding: .45rem .9rem; }
.ap-filter:focus { outline: none; border-color: var(--ap-accent); }

.ap-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ap-library { display: grid; gap: .3rem; max-height: 380px; overflow: auto; padding-right: .3rem; }
.ap-lib-course { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ap-dim); margin: .7rem 0 .2rem; }
.ap-lib-course:first-child { margin-top: 0; }

.ap-row { display: flex; align-items: center; gap: .4rem; border-radius: var(--ap-row-radius); padding: .3rem .5rem; transition: background .18s ease; }
.ap-row:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.ap-row-current { background: color-mix(in srgb, var(--ap-accent) 13%, transparent); }
.ap-row-main { display: flex; align-items: center; gap: .8rem; flex: 1; text-align: left; padding: .35rem .2rem; min-width: 0; }
.ap-row-num { font-variant-numeric: tabular-nums; font-size: .75rem; color: var(--ap-dim); width: 1.8em; flex: none; }
.ap-row-text { min-width: 0; flex: 1; display: grid; gap: .12rem; }
.ap-row-title { font-size: .92rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-row-meta { font-size: .74rem; color: var(--ap-dim); display: flex; gap: .6rem; align-items: center; }
.ap-badge { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ap-line); border-radius: 99px; padding: .1rem .5rem; }
.ap-row-actions { display: flex; gap: .1rem; opacity: 0; transition: opacity .15s ease; }
.ap-row:hover .ap-row-actions, .ap-row:focus-within .ap-row-actions { opacity: 1; }
@media (hover: none) { .ap-row-actions { opacity: .8; } }
.ap-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--ap-dim); }
.ap-icon:hover:not(:disabled) { color: var(--ap-fg); background: color-mix(in srgb, currentColor 10%, transparent); }
.ap-icon svg { width: 15px; height: 15px; }
.ap-icon-down svg { transform: rotate(180deg); }
.ap-add:disabled { cursor: default; color: var(--ap-accent); }
.ap-lib-row { padding-left: .9rem; }

.ap-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; width: 1.8em; }
.ap-eq i { width: 3px; background: var(--ap-accent); animation: ap-eq .9s ease-in-out infinite; }
.ap-eq i:nth-child(2) { animation-delay: .25s; }
.ap-eq i:nth-child(3) { animation-delay: .5s; }
@keyframes ap-eq { 0%,100% { height: 4px; } 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .ap-eq i { animation: none; height: 8px; }
  .ap-btn { transition: none; }
}