/* SPM station controls v1.0.0 */
.spm-station-controls {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px solid var(--bs-border-color, #6610f2);
  border-radius: 16px;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  text-align: left;
  font: inherit;
}
.spm-station-controls .spm-station-play {
  min-width: 60px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #6610f2;
  border-radius: 10px;
  background: #6610f2;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.spm-station-controls .spm-station-volume { display: block; min-width: 0; margin: 0; }
.spm-station-controls .spm-station-volume-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.3;
}
.spm-station-controls input[type="range"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  accent-color: #6610f2;
  cursor: pointer;
}
.spm-station-controls .spm-station-status {
  grid-column: 1 / -1;
  font-size: 0.875rem;
}
.spm-station-controls .spm-station-status:empty { display: none; }
.spm-station-controls button:focus-visible,
.spm-station-controls input:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
[data-bs-theme="dark"] .spm-station-controls input[type="range"] { accent-color: #ffd700; }

.spm-station-play { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
@media (max-width: 767px) {
  .spm-station-controls .spm-station-play-label { display: none; }
  .spm-station-controls .spm-station-play { min-width: 44px; font-size: 1.3rem; }
}

.spm-station-controls { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
.spm-station-status, .spm-program-panel { grid-column: 1 / -1; }
.spm-station-program, .spm-program-close, .spm-program-slot {
  min-height: 44px; border: 1px solid var(--bs-border-color, #6610f2);
  border-radius: 8px; padding: 6px 8px; font: inherit;
  color: var(--bs-body-color, #212529); background: var(--bs-secondary-bg, #eee); cursor: pointer;
}
.spm-program-panel { border-top: 1px solid var(--bs-border-color); padding-top: 12px; }
.spm-program-panel[hidden] { display: none; }
.spm-program-panel p { font-size: .875rem; margin: 0 0 10px; }
.spm-program-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.spm-program-slot { position: relative; overflow-wrap: anywhere; font-size: .8rem; touch-action: none; user-select: none; }
.spm-program-holding::after { content: ''; position: absolute; bottom: 2px; left: 4px; right: 4px; height: 4px; background: var(--bs-body-color); transform: scaleX(var(--preset-progress, 0)); transform-origin: left; }
.spm-program-message { display: block; font-size: .875rem; margin: 8px 0; }
.spm-station-controls button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }