/*
  MUSIC GOLD — SAGE INSTRUMENT THEME
  Isolated override layer inspired by minimal retro audio hardware.
  Remove this stylesheet link from index.html to restore the blue theme.
*/

:root {
  --v4-bg: #050705;
  --v4-panel: #080c08;
  --v4-panel-raised: #0b100b;
  --v4-line: #364236;
  --v4-line-soft: #202820;
  --v4-text: #e4eadf;
  --v4-muted: #7e8b76;
  --v4-orange: #aebaa1;
  --v4-active: #293329;
  --sage-main: #aebaa1;
  --sage-dark: #364236;
  --sage-black: #050705;
  --sage-panel: #0b100b;
  --sage-mid: #7e8b76;
  --sage-soft: #d9e0d3;
  --sage-pink: #ec5f7d;
  --sage-gold: #e6b84a;
}

html,
body,
.discovery-machine {
  color: var(--sage-soft);
  background: var(--sage-black);
}

::selection {
  color: var(--sage-black);
  background: var(--sage-main);
}

/* Instrument frame */
.machine-header,
.site-footer {
  background: #060906;
  border-color: var(--sage-dark);
  box-shadow: none;
}

.machine-brand strong {
  color: var(--sage-soft);
}

.header-context {
  scrollbar-color: var(--sage-dark) transparent;
}

.header-context::-webkit-scrollbar-thumb {
  background: var(--sage-dark);
}

.context-tag,
.header-song-actions {
  border-color: var(--sage-dark);
}

.context-tag small,
.context-icon,
.footer-stat span,
.footer-toggle span,
.quest-completion > span {
  color: var(--sage-mid);
}

.context-tag strong,
.quest-completion strong,
.footer-toggle strong {
  color: var(--sage-soft);
}

.machine-header .machine-brand:hover,
.machine-header .machine-brand:focus-visible,
.machine-header .context-tag:hover,
.machine-header .context-tag:focus-visible,
.machine-header #headerSongTag:hover,
.machine-header #headerSongTag:focus-visible,
#headerSongTag.copied {
  color: inherit;
  background: var(--sage-dark);
  border-color: var(--sage-main);
  box-shadow: inset 0 0 0 1px rgba(174, 186, 161, .12);
}

.machine-header .context-tag:hover small,
.machine-header .context-tag:focus-visible small,
.machine-header .context-tag:hover .context-icon,
.machine-header .context-tag:focus-visible .context-icon,
#headerSongTag.copied small {
  color: var(--sage-main);
}

/* Browser panel */
.browser-panel {
  background: var(--sage-panel);
  border-color: var(--sage-dark);
  box-shadow: none;
}

.browser-level,
.country-list,
.playlist-list,
.single-song-list {
  background: linear-gradient(180deg, #0a0f0a 0%, #060906 100%);
  scrollbar-color: var(--sage-dark) var(--sage-black);
}

.library-header,
.country-context-header,
.song-list-heading {
  color: var(--sage-soft);
  background: #080c08;
  border-color: var(--sage-dark);
}

.library-header strong,
.country-context-header strong,
.country-globe,
.level-back {
  color: var(--sage-main);
}

.country-row,
.playlist-row,
.single-song-list .song-row {
  color: var(--sage-soft);
  background: rgba(8, 12, 8, .7);
  border-bottom-color: #202820;
  box-shadow: none;
}

.playlist-row:hover,
.playlist-row.active,
.single-song-list .song-row:hover,
.single-song-list .song-row.active,
.country-row:hover,
.country-row.active {
  color: var(--sage-soft);
  background: #293329;
  box-shadow: inset 0 1px 0 rgba(174, 186, 161, .13), inset 0 -1px 0 rgba(174, 186, 161, .1);
}

.playlist-row::before,
.playlist-row.active::before,
.single-song-list .song-row::before,
.country-row::before,
.country-row.active::before {
  background:
    linear-gradient(var(--sage-soft),var(--sage-soft)) left top / 7px 2px no-repeat,
    linear-gradient(var(--sage-main),var(--sage-main)) left top / 2px 7px no-repeat,
    linear-gradient(var(--sage-soft),var(--sage-soft)) right top / 7px 2px no-repeat,
    linear-gradient(var(--sage-main),var(--sage-main)) right top / 2px 7px no-repeat,
    linear-gradient(var(--sage-soft),var(--sage-soft)) left bottom / 7px 2px no-repeat,
    linear-gradient(var(--sage-main),var(--sage-main)) left bottom / 2px 7px no-repeat,
    linear-gradient(var(--sage-soft),var(--sage-soft)) right bottom / 7px 2px no-repeat,
    linear-gradient(var(--sage-main),var(--sage-main)) right bottom / 2px 7px no-repeat;
  filter: drop-shadow(0 0 3px rgba(174, 186, 161, .35));
}

.country-row.active::before {
  background:
    linear-gradient(var(--sage-soft),var(--sage-soft)) left top / 14px 2px no-repeat,
    linear-gradient(var(--sage-main),var(--sage-main)) left top / 3px 14px no-repeat,
    linear-gradient(var(--sage-soft),var(--sage-soft)) right top / 14px 2px no-repeat,
    linear-gradient(var(--sage-main),var(--sage-main)) right top / 3px 14px no-repeat,
    linear-gradient(var(--sage-soft),var(--sage-soft)) left bottom / 14px 2px no-repeat,
    linear-gradient(var(--sage-main),var(--sage-main)) left bottom / 3px 14px no-repeat,
    linear-gradient(var(--sage-soft),var(--sage-soft)) right bottom / 14px 2px no-repeat,
    linear-gradient(var(--sage-main),var(--sage-main)) right bottom / 3px 14px no-repeat;
}

.country-row::after {
  background:
    linear-gradient(90deg,
      var(--sage-main) 0,
      var(--sage-main) var(--country-progress, 0%),
      var(--sage-dark) var(--country-progress, 0%),
      var(--sage-dark) 100%);
  box-shadow: none;
}

.country-row strong,
.country-row em,
.playlist-row strong,
.playlist-row em,
.single-song-list .song-title,
.single-song-list .song-views {
  color: var(--sage-soft);
}

[data-browser-level="playlists"] .playlist-row > span:nth-child(2),
[data-browser-level="songs"] .song-row .song-number {
  color: var(--sage-mid);
}

[data-browser-level="playlists"] .playlist-led,
.single-song-list .song-led {
  background: #667260;
  box-shadow: none;
}

[data-browser-level="playlists"] .playlist-row.active .playlist-led,
.single-song-list .song-row.active .song-led {
  background: var(--sage-main);
  box-shadow: 0 0 8px rgba(174, 186, 161, .45);
}

.single-song-list .song-row.seen .song-led {
  background: var(--sage-soft);
  box-shadow: 0 0 7px rgba(217, 224, 211, .3);
}

.single-song-list .song-row.heard .song-led {
  background: var(--sage-gold);
  box-shadow: 0 0 8px rgba(230, 184, 74, .4);
}

.single-song-list .song-row.saved .song-led,
.single-song-list .song-row.saved.active .song-led,
.single-song-list .song-row.saved:hover .song-led {
  background: var(--sage-pink);
  box-shadow: 0 0 8px rgba(236, 95, 125, .5);
}

.single-song-list .song-save-heart {
  color: var(--sage-pink);
}

.playlist-cover,
.single-song-list .song-row-thumbnail {
  background: #060906;
  border-color: var(--sage-dark);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .38);
}

/* Open three-song field */
.song-card-stage,
.song-card:not(.grid-mode),
.card-carousel,
.song-card-strip,
.song-preview-card,
.current-card,
.side-card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.three-column-workspace,
.song-card-stage {
  background: var(--sage-main);
}

.preview-artwork,
.song-card:not(.grid-mode) .current-card .song-card-artwork {
  background: #060906;
  border-color: var(--sage-dark);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}

.side-card-select:hover .preview-artwork,
.side-card-select:focus-visible .preview-artwork {
  border-color: var(--sage-main);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), 0 0 0 1px rgba(174, 186, 161, .1);
}

.song-card-strip .card-position b,
.song-card-strip .card-position i,
.song-card-strip .card-position em,
.preview-card-copy > strong,
.song-card:not(.grid-mode) .current-card .card-title-block h2 {
  color: var(--sage-black);
}

.side-card-select {
  color: var(--sage-black);
}

.preview-card-copy > small,
.song-card:not(.grid-mode) .current-card #currentArtist {
  color: var(--sage-dark);
}

.preview-card-views,
.song-card:not(.grid-mode) .current-card .card-views-line {
  color: #596653;
}

.card-thumbnail-play,
.song-card:not(.grid-mode) .current-card .card-thumbnail-play {
  color: var(--sage-main);
  background: var(--sage-black);
  border-color: var(--sage-dark);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
}

.song-preview-card:hover .card-thumbnail-play,
button.card-thumbnail-play:hover,
button.card-thumbnail-play:focus-visible {
  color: var(--sage-soft);
  background: var(--sage-dark);
  border-color: var(--sage-main);
}

.current-card-action {
  color: var(--sage-main);
  background: #090d09;
  border-color: var(--sage-dark);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}

.current-card-action:hover,
.current-card-action:focus-visible {
  color: var(--sage-soft);
  background: var(--sage-dark);
  border-color: var(--sage-black);
  box-shadow: inset 0 0 0 1px rgba(174, 186, 161, .12);
}

.current-card-action:disabled {
  color: #596454;
  background: #070a07;
  border-color: #252e25;
}

.current-card-heart {
  color: var(--sage-main);
  background: var(--sage-black);
  border-color: var(--sage-dark);
}

.current-card-heart.saved,
.current-card-heart.saved:hover,
.current-card-heart.saved:focus-visible {
  color: var(--sage-pink);
  background: transparent;
  border-color: rgba(236, 95, 125, .6);
  box-shadow: 0 0 16px rgba(236, 95, 125, .12);
}

/* Footer as a black instrument strip with sage readouts */
.site-footer > .footer-toggle,
.quest-completion {
  border-color: var(--sage-dark);
}

.footer-icon {
  color: var(--sage-mid);
}

.site-footer > .footer-toggle:hover,
.site-footer > .footer-toggle:focus-visible {
  background: var(--sage-dark);
  border-color: var(--sage-main);
  box-shadow: inset 0 0 0 1px rgba(174, 186, 161, .1);
}

.site-footer > .footer-toggle:hover span,
.site-footer > .footer-toggle:focus-visible span,
.site-footer > .footer-toggle:hover .footer-icon,
.site-footer > .footer-toggle:focus-visible .footer-icon {
  color: var(--sage-main);
}

.site-footer > .footer-toggle strong {
  color: var(--sage-soft);
}

/* Dense completion field remains gold, framed by the green hardware system. */
.playlist-grid-cell {
  background: #111711;
  border-color: #465244;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .34);
}

.playlist-grid-cell.complete {
  background: linear-gradient(145deg, #efc65e 0%, #b7832d 54%, #70501f 100%);
  border-color: #f1d58a;
}

.playlist-grid-cell.current {
  background: var(--sage-soft);
  border-color: #fff;
  box-shadow: 0 0 0 1px var(--sage-main), 0 0 20px rgba(174, 186, 161, .72);
}

.playlist-grid-cell.liked:not(.current) {
  background: linear-gradient(145deg, #ef7891 0%, #c84465 54%, #72283f 100%);
  border-color: #ffb0c1;
}

/* Final high-specificity cleanup for legacy navy catalog headers. */
.browser-panel .browser-level > .library-header,
.browser-panel [data-browser-level="countries"] > .library-header {
  color: var(--sage-soft);
  background: #080c08;
  border-color: var(--sage-dark);
  box-shadow: none;
}

.browser-panel .browser-level > .library-header strong,
.browser-panel [data-browser-level="countries"] > .library-header strong {
  color: var(--sage-soft);
}