/* Public band profile */

.band-public-page {
     margin-bottom: 0;
}

.band-name {
     color: #17202a;
     font-size: 2rem;
     font-weight: 700;
     margin: 0 0 1rem;
     text-shadow: none;
}

.band-box,
.dashboard-box {
     background: #fbfcfd;
     border: 1px solid #dfe5eb;
     border-radius: 6px;
     color: #17202a;
     margin: 0 0 1rem;
     padding: 1rem;
     box-shadow: none;
}

.band-profile-header,
.band-profile-left {
     display: flex;
     align-items: flex-start;
     gap: 1rem;
}

.band-profile-left {
     flex-wrap: wrap;
}

.band-media-stage {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
}

.band-media-stage-frame {
     position: relative;
     width: 270px;
     max-width: 100%;
     aspect-ratio: 1 / 1;
     border-radius: 6px;
     overflow: hidden;
     border: 1px solid #dfe5eb;
     background: #f1f4f8;
     box-shadow: none;
}

.band-profile-image,
.band-profile-video {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.band-profile-video {
     background: #000;
}

.band-video-toggle,
.band-video-close,
.video-entry-button,
.track-item-button,
.btn {
     appearance: none;
     background: #000;
     border: 1px solid #000;
     border-radius: 6px;
     color: #fff;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 0.85rem;
     font-weight: 700;
     line-height: 1;
     padding: 0.5rem 1rem;
     text-decoration: none;
}

.track-item-button {
     background: transparent;
     border-color: transparent;
     color: #000;
     justify-content: flex-start;
     padding: 0;
     text-decoration: none;
}

.band-video-toggle {
     bottom: 1rem;
     left: 50%;
     position: absolute;
     transform: translateX(-50%);
}

.band-video-close {
     position: absolute;
     right: 0.5rem;
     top: 0.5rem;
}

.band-video-toggle:hover,
.band-video-close:hover,
.video-entry-button:hover,
.track-item-button:hover,
.btn:hover {
     background: #222;
     color: #fff;
}

.track-item-button:hover,
.track-item-button:focus-visible {
     background: transparent;
     color: #000;
     text-decoration: underline;
}

.band-media-caption,
.media-item-meta {
     color: #4b5968;
     font-size: 0.85rem;
     margin: 0;
}

.band-media-caption {
     max-width: 270px;
}

.band-media-caption-label {
     color: #2a4d69;
     font-weight: 700;
}

.band-meta {
     flex: 1 1 280px;
}

.band-meta p,
.dashboard-box p {
     margin: 0 0 0.5rem;
}

.band-meta a,
.dashboard-box a {
     color: #145ea8;
}

.band-stat-row {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.5rem;
     margin-top: 1rem;
}

.band-stat-row span {
     border: 1px solid #d7dee6;
     border-radius: 4px;
     padding: 0.5rem;
}

.band-stat-row strong {
     color: #2a4d69;
     display: block;
     font-size: 1.1rem;
}

.band-bio {
     margin-top: 1rem;
}

.band-story {
     margin: 0 0 0.5rem;
     line-height: 1.5;
}

.read-more {
     color: #145ea8;
     font-weight: 700;
     margin-left: 0.5rem;
}

.back-btn {
     margin-top: 0.5rem;
}

.public-band-layout-grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
     gap: 1rem;
     align-items: start;
}

.public-band-main-column {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}

.dashboard-box h2 {
     border-bottom: 1px solid #dfe5eb;
     color: #2a4d69;
     font-size: 1.1rem;
     margin: 0 0 0.5rem;
     padding-bottom: 0.5rem;
}

.band-member-list,
.track-list,
.video-list {
     margin: 0;
     padding-left: 1rem;
}

.band-member-list li,
.track-item,
.video-entry {
     margin-bottom: 0.5rem;
}

.track-item-button {
     border-radius: 4px;
     padding: 0.35rem 0.5rem;
}

.track-item.active-track .track-item-button {
     background: #000;
     color: #fff;
}

.band-rating-row {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-top: 0.5rem;
}

.band-rating-form,
.song-rating-form {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-top: 0.5rem;
}

.rating-login {
     color: #145ea8;
     font-size: 0.85rem;
}

.rating-control {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.5rem;
}

.rating-value {
     background: #fff;
     border: 1px solid #b9c4cf;
     border-radius: 4px;
     color: #17202a;
     padding: 0.35rem 0.5rem;
     width: 4.75rem;
}

.rating-check-button {
     appearance: none;
     background: #18833d;
     border: 1px solid #45c86b;
     border-radius: 4px;
     color: #fff;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     font-weight: 900;
     height: 2rem;
     line-height: 1;
     padding: 0;
     width: 2rem;
}

.rating-check-button:hover,
.rating-check-button:focus-visible {
     background: #20a34b;
}

.rating-login {
     display: inline-flex;
     margin-top: 0.5rem;
}

.rating-locked {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     color: #4b5968;
     font-size: 0.85rem;
     margin-top: 0.5rem;
}

.rating-locked-check {
     background: #18833d;
     border: 1px solid #45c86b;
     border-radius: 999px;
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 0.75rem;
     font-weight: 900;
     height: 1.25rem;
     line-height: 1;
     width: 1.25rem;
}

.music-player {
     margin-bottom: 1rem;
}

.music-player audio {
     width: 100%;
}

.audio-transport {
     display: flex;
     flex-wrap: wrap;
     gap: 0.4rem;
     margin-top: 0.5rem;
}

.audio-transport-button {
     appearance: none;
     border: 1px solid #98a3ad;
     border-radius: 8px;
     background: linear-gradient(180deg, #fbfdff 0%, #e7edf3 100%);
     color: #17202a;
     cursor: pointer;
     font: inherit;
     font-size: 1rem;
     font-weight: 700;
     line-height: 1;
     padding: 0.35rem 0.55rem;
     min-width: 2rem;
     box-shadow:
          inset 0 1px 1px rgba(255, 255, 255, 0.95),
          inset 0 -2px 3px rgba(0, 0, 0, 0.18),
          inset 0 0 0 1px rgba(255, 255, 255, 0.55),
          0 1px 1px rgba(0, 0, 0, 0.08);
}

.audio-transport-button:hover,
.audio-transport-button:focus-visible {
     background: linear-gradient(180deg, #ffffff 0%, #e1e8ee 100%);
     box-shadow:
          inset 0 1px 1px rgba(255, 255, 255, 1),
          inset 0 -2px 3px rgba(0, 0, 0, 0.22),
          inset 0 0 0 1px rgba(255, 255, 255, 0.65),
          0 1px 2px rgba(0, 0, 0, 0.12);
}

.profile-media-tabbar {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 1rem;
     border-bottom: 1px solid #dfe5eb;
}

.profile-media-tab {
     appearance: none;
     border: 1px solid #dfe5eb;
     border-bottom: 0;
     border-radius: 6px 6px 0 0;
     background: #eef3f7;
     color: #2a4d69;
     cursor: pointer;
     font: inherit;
     font-weight: 700;
     padding: 0.55rem 0.9rem;
     position: relative;
     top: 1px;
}

.profile-media-tab.is-active {
     background: #fff;
     color: #000;
}

.profile-media-panel[hidden] {
     display: none;
}

.profile-media-panel {
     padding-top: 0.25rem;
}

.playlist-track-list {
     padding-left: 0;
     list-style: none;
}

.playlist-track-item {
     display: flex;
     align-items: center;
     gap: 0.65rem;
     margin-bottom: 0.55rem;
}

.playlist-song-art {
     flex: 0 0 45px;
     width: 45px;
     height: 45px;
     overflow: hidden;
     border: 1px solid #dfe5eb;
     border-radius: 4px;
     background: #f1f4f8;
}

.playlist-song-art img {
     display: block;
     width: 45px;
     height: 45px;
     object-fit: cover;
}

.playlist-song-title {
     font-weight: 700;
}

.playlist-artist-name {
     color: #4b5968;
}

.video-section {
     margin-top: 1rem;
}

.video-entry {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.5rem;
}

.video-entry-title {
     flex: 1 1 160px;
     font-weight: 700;
}

.explicit-pill {
     border: 1px solid #b84536;
     border-radius: 999px;
     color: #b84536;
     display: inline-flex;
     font-size: 0.7rem;
     margin-left: 0.5rem;
     padding: 0.1rem 0.45rem;
     text-transform: uppercase;
}

@media (max-width: 768px) {
     .band-profile-header,
     .band-profile-left,
     .public-band-layout-grid {
          display: block;
     }

     .band-media-stage-frame,
     .band-media-caption {
          width: 100%;
          max-width: 320px;
     }

     .band-meta,
     .public-band-main-column {
          margin-top: 1rem;
     }

     .band-stat-row {
          grid-template-columns: 1fr;
     }
}