/* Customer review portal (Components/Portal). Status chips are also used on the staff Playlist Reviews page. */

.portal-hero h1 { font-size: 1.9rem; font-weight: 600; color: #1d2033; margin: 0 0 6px; letter-spacing: -.01em; }
.portal-hero p { color: #6b7088; margin: 0 0 32px; max-width: 620px; line-height: 1.55; }
.portal-section { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #8a8fa3; margin: 28px 0 12px; }
.portal-empty { text-align: center; color: #8a8fa3; padding: 64px 16px; }
.portal-back { display: inline-block; color: #5c6bc0; text-decoration: none; font-size: .9rem; margin-bottom: 18px; }
.portal-back:hover { text-decoration: underline; }
.muted { color: #8a8fa3; }

/* Playlist cards */
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.review-card {
    display: block; background: #fff; border-radius: 16px; padding: 20px; text-decoration: none; color: inherit;
    border: 1px solid #eceef5; box-shadow: 0 1px 2px rgba(20,24,60,.04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.review-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20,24,60,.09); border-color: #dfe2f0; }
.review-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.review-art {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, #1a237e 0%, #5c6bc0 60%, #7e57c2 100%);
}
.review-card h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 4px; color: #1d2033; }
.review-card p { font-size: .85rem; color: #8a8fa3; margin: 0 0 14px; }
.review-cta { font-size: .85rem; font-weight: 500; color: #3949ab; }

/* Status chips */
.status-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; white-space: nowrap; }
.status-pending { background: #eef0fb; color: #3949ab; }
.status-approved { background: #e7f5ea; color: #2e7d32; }
.status-changes { background: #fff1e0; color: #b45309; }

/* Review page */
.review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.review-head h1 { font-size: 1.8rem; font-weight: 600; margin: 0 0 4px; color: #1d2033; letter-spacing: -.01em; }
.review-head p { margin: 0; }
.curator-note {
    background: #fff; border: 1px solid #eceef5; border-left: 4px solid #5c6bc0; border-radius: 12px;
    padding: 14px 18px; margin-bottom: 22px; line-height: 1.55; color: #3a3e55;
}
.curator-text { white-space: pre-line; }
/* The router focuses the page heading for screen readers; no visible ring needed */
.portal-hero h1:focus, .review-head h1:focus { outline: none; }
.curator-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8a8fa3; margin-bottom: 4px; }
.listen-hint { font-size: .85rem; margin: 0 0 8px; }

/* Track list */
.track-list { background: #fff; border-radius: 16px; border: 1px solid #eceef5; overflow: hidden; }
.track {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 18px;
    cursor: pointer; border-bottom: 1px solid #f1f2f8; user-select: none; outline: none;
}
.track:last-child { border-bottom: none; }
.track:hover, .track:focus-visible { background: #f8f9fd; }
.track.active { background: #f2f3fc; }
.track-num { width: 22px; text-align: right; color: #a3a7ba; font-size: .85rem; font-variant-numeric: tabular-nums; }
.track-play {
    position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
    background: #eef0fb; color: #3949ab; transition: background .15s, color .15s;
}
.track:hover .track-play, .track.active .track-play { background: #3949ab; color: #fff; }
.track-play svg { width: 20px; height: 20px; fill: currentColor; }
.track .icon-pause, .track .spinner { display: none; }
.track.playing .icon-play { display: none; }
.track.playing .icon-pause { display: block; }
.track.loading .icon-play { display: none; }
.track.loading .spinner {
    display: block; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: portal-spin .8s linear infinite;
}
.track.failed .track-artist::after { content: " · preview unavailable"; color: #c62828; }
@keyframes portal-spin { to { transform: rotate(360deg); } }
.track-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.track-title { font-weight: 500; color: #1d2033; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist { font-size: .85rem; color: #8a8fa3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-year { font-size: .85rem; color: #a3a7ba; font-variant-numeric: tabular-nums; }
.track-progress {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, #5c6bc0, #7e57c2); transition: width .25s linear;
}

/* Decision */
.decision-panel { margin-top: 28px; background: #fff; border-radius: 16px; border: 1px solid #eceef5; padding: 22px; }
.decision-panel h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 14px; color: #1d2033; }
.decision-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.decision-done { display: flex; align-items: flex-start; gap: 14px; }
.decision-done .mud-icon-root { font-size: 32px; }
.decision-done.approved .mud-icon-root { color: #2e7d32; }
.decision-done.changes .mud-icon-root { color: #b45309; }
.decision-done strong { display: block; color: #1d2033; }
.decision-comment { margin: 8px 0 0; color: #3a3e55; font-style: italic; white-space: pre-line; }

@media (max-width: 600px) {
    .portal-hero h1, .review-head h1 { font-size: 1.45rem; }
    .track { padding: 12px; gap: 10px; }
    .track-num, .track-year { display: none; }
    .decision-actions .mud-button-root { flex: 1; }
}