/* songcode — the little player (player.js). Dark by default, light when the
   host says so. System fonts only, so the widget needs no font host. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
/* The page around the card, only where the card is the whole page (the
   embed and the widget). songco.de/mcp/ shows the same card in its own page. */
html.scp-page, html.scp-page body { margin: 0; padding: 0; background: transparent; }
html.scp-page body { font: 14px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }

.scp {
  --bg: #131315;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f4f4f6;
  --text-2: rgba(235, 235, 245, 0.62);
  --track: rgba(255, 255, 255, 0.1);
  --accent: #b8ff2e;
  --accent-ink: #0d1300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'play text mark' 'bar bar bar' 'time time open';
  align-items: center;
  gap: 10px 14px;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
}
.scp[data-theme='light'] {
  --bg: #ffffff;
  --line: rgba(0, 0, 0, 0.1);
  --text: #111113;
  --text-2: rgba(20, 20, 26, 0.6);
  --track: rgba(0, 0, 0, 0.08);
  --accent: #26262a;
  --accent-ink: #b8ff2e;
}
html:has(.scp[data-theme='light']) { color-scheme: light; }

.scp-play {
  grid-area: play;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}
.scp-play:hover:not(:disabled) { transform: scale(1.05); }
.scp-play:active:not(:disabled) { transform: scale(0.96); }
.scp-play:disabled { opacity: 0.35; cursor: default; }
.scp-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.scp-play svg { width: 18px; height: 18px; fill: currentColor; }
.scp-play .i-stop { display: none; }
.scp[data-state='playing'] .scp-play .i-play { display: none; }
.scp[data-state='playing'] .scp-play .i-stop { display: block; }
.scp[data-state='loading'] .scp-play svg,
.scp[data-state='writing'] .scp-play svg { display: none; }
.scp[data-state='loading'] .scp-play::after,
.scp[data-state='writing'] .scp-play::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: scp-spin 0.8s linear infinite;
}
@keyframes scp-spin { to { transform: rotate(360deg); } }

.scp-text { grid-area: text; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scp-title { overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.scp-meta { overflow: hidden; color: var(--text-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.scp-mark { grid-area: mark; justify-self: end; width: 26px; height: 26px; opacity: 0.9; }

.scp-track { grid-area: bar; height: 4px; overflow: hidden; border-radius: 2px; background: var(--track); }
.scp-bar { height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 120ms linear; }
.scp[data-state='writing'] .scp-bar { width: 30%; transform: none; animation: scp-slide 1.4s ease-in-out infinite; opacity: 0.6; }
@keyframes scp-slide { from { margin-left: -30%; } to { margin-left: 100%; } }

.scp-time { grid-area: time; min-height: 16px; color: var(--text-2); font: 12px ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.scp-open { grid-area: open; justify-self: end; color: var(--text-2); font-size: 12.5px; text-decoration: none; }
.scp-open:hover { color: var(--text); }
.scp-note { grid-column: 1 / -1; margin: 0; color: var(--text-2); font-size: 12.5px; }
.scp[data-state='error'] .scp-note { color: #ff6b5f; }

@media (prefers-reduced-motion: reduce) {
  .scp-bar, .scp-play { transition: none; }
}

/* thin, quiet scrollbars, as in the app (public/styles.css): no arrows, no
   track, a rounded thumb */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border: 3px solid transparent;
  border-radius: 99px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.28); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }