/* Moving Music player in the site's style (Nov 9, 2026).
   The player (bennett-hue/moving-music-player, player.js) adds its own stylesheet to <head> when it
   starts, after this file. Every rule here starts with "html body" so it outranks the player's rules
   without !important. Colors and type follow chrome.css and inner.css: paper, card, ink, one red,
   EB Garamond for titles, Work Sans for buttons and numbers, square corners, sentence case.
   The round play buttons stay round: they are the one shape everybody reads as "play". */

html body .mmp-bar,
html body .mmp-add-all-wrap,
html body .mmp-simple-audio-wrapper,
html body .mmp-card-play,
html body .mmp-toast,
html body .mmp-share-overlay,
html body .mmp-import-banner{
  --mmp-paper:#f3ede1;
  --mmp-paper-2:#e8dec9;
  --mmp-card:#fbf8f2;
  --mmp-ink:#231f1b;
  --mmp-ink-2:#5a5248;
  --mmp-rule:#cbbfa6;
  --mmp-rule-dark:#8d8068;
  --mmp-red:#8a2f22;
  --mmp-red-dark:#6f2419;
  --mmp-pink:#F9CEC5;
  --mmp-serif:"EB Garamond",Georgia,serif;
  --mmp-sans:"Work Sans","Helvetica Neue",Arial,sans-serif;
}

/* The bar */
html body .mmp-bar{background:var(--mmp-card);color:var(--mmp-ink);border-top:1px solid var(--mmp-rule);box-shadow:0 -1px 2px rgba(35,31,27,.05),0 -6px 18px rgba(35,31,27,.08);font-family:var(--mmp-sans)}
html body .mmp-progress{background:rgba(35,31,27,.12)}
html body .mmp-progress-fill{background:var(--mmp-red)}
html body .mmp-progress-thumb{background:var(--mmp-red);border-color:var(--mmp-card);box-shadow:0 1px 2px rgba(35,31,27,.3)}
html body .mmp-thumb{border-radius:0;background:var(--mmp-paper);border:1px solid var(--mmp-rule);color:var(--mmp-ink-2)}
html body .mmp-title{font-family:var(--mmp-serif);font-size:19px;font-weight:500;line-height:1.25;color:var(--mmp-ink)}
html body .mmp-title-empty{color:var(--mmp-ink-2)}
html body .mmp-title a.mmp-title-link:hover,
html body .mmp-title .mmp-title-idle:hover{color:var(--mmp-red)}
html body .mmp-time,
html body .mmp-time-display{font-family:var(--mmp-sans);font-size:12px;color:var(--mmp-ink-2)}
html body .mmp-btn{color:var(--mmp-ink);border-radius:2px}
html body .mmp-btn:hover{background:var(--mmp-paper-2)}
html body .mmp-btn-play{background:var(--mmp-red);color:var(--mmp-card);border-radius:50%}
html body .mmp-btn-play:hover{background:var(--mmp-red-dark);opacity:1}

/* The open playlist */
html body .mmp-expanded{background:var(--mmp-card);border-top:1px solid var(--mmp-rule);padding:4px 0 8px}
html body .mmp-queue-header{padding:8px 16px 8px 20px;font-family:var(--mmp-serif);font-style:italic;font-size:18px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--mmp-ink-2)}
html body .mmp-queue-header{gap:10px}
html body .mmp-queue-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html body .mmp-queue-actions{flex:0 0 auto}
html body .mmp-setlist-btn,
html body .mmp-queue-clear{background:transparent;color:var(--mmp-ink);border:1px solid var(--mmp-rule-dark);border-radius:2px;padding:4px 11px;font-family:var(--mmp-sans);font-style:normal;font-size:13px;font-weight:500;line-height:1.3;letter-spacing:0;text-transform:none}
html body .mmp-setlist-btn-icon{padding:4px 7px}
html body .mmp-setlist-btn:hover,
html body .mmp-queue-clear:hover{background:transparent;color:var(--mmp-red);border-color:var(--mmp-red)}
html body .mmp-queue-item{gap:10px;padding:7px 16px 7px 14px;border-bottom:1px solid var(--mmp-rule)}
html body .mmp-queue-item:last-child{border-bottom:0}
html body .mmp-queue-item:hover{background:var(--mmp-paper)}
html body .mmp-queue-item.is-current{background:var(--mmp-paper);font-weight:inherit}
html body .mmp-queue-title{font-family:var(--mmp-serif);font-size:18px;line-height:1.3;color:var(--mmp-ink)}
html body .mmp-queue-title:hover,
html body .mmp-queue-item.is-current .mmp-queue-title{color:var(--mmp-red)}
html body .mmp-queue-play{color:var(--mmp-ink-2);border-radius:2px}
html body .mmp-queue-play:hover,
html body .mmp-queue-item.is-current .mmp-queue-play{background:transparent;color:var(--mmp-red)}
html body .mmp-queue-handle{color:var(--mmp-rule-dark)}
html body .mmp-queue-remove{color:var(--mmp-ink-2);border-radius:2px}
html body .mmp-queue-remove:hover{background:transparent;color:var(--mmp-red)}
html body .mmp-queue-icon{color:var(--mmp-ink-2)}
html body .mmp-queue-empty{font-family:var(--mmp-serif);font-style:italic;font-size:17px;color:var(--mmp-ink-2)}
html body .mmp-queue-ghost{background:var(--mmp-pink);opacity:.6}

/* Saved playlists */
html body .mmp-setlist-section{padding:12px 16px 4px 20px;font-family:var(--mmp-serif);font-style:italic;font-size:17px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--mmp-ink-2)}
html body button.mmp-setlist-section:hover{color:var(--mmp-red)}
html body .mmp-setlist-item{padding:9px 16px 9px 20px;border-bottom:1px solid var(--mmp-rule)}
html body .mmp-setlist-item:hover{background:var(--mmp-paper)}
html body .mmp-setlist-name{font-family:var(--mmp-serif);font-size:18px;font-weight:500;color:var(--mmp-ink)}
html body .mmp-setlist-item:hover .mmp-setlist-name{color:var(--mmp-red)}
html body .mmp-setlist-meta{font-family:var(--mmp-sans);font-size:12px;color:var(--mmp-ink-2)}
html body .mmp-setlist-del,
html body .mmp-setlist-share{color:var(--mmp-ink-2);border-radius:2px}
html body .mmp-setlist-del:hover,
html body .mmp-setlist-share:hover,
html body .mmp-setlist-share.is-shared{background:transparent;color:var(--mmp-red)}

/* On song lists: Add all to playlist, Show tags, and the add icon on each row */
html body .mmp-add-all,
html body .mmp-show-tags{background:transparent;border-radius:2px;padding:6px 13px;font-family:var(--mmp-sans);font-size:14px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none}
html body .mmp-add-all{color:var(--mmp-ink);border:1px solid var(--mmp-ink)}
html body .mmp-add-all svg{color:var(--mmp-red)}
html body .mmp-add-all:hover{background:var(--mmp-ink);color:var(--mmp-card)}
html body .mmp-add-all:hover svg{color:var(--mmp-card)}
html body .mmp-show-tags{color:var(--mmp-ink-2);border:1px solid var(--mmp-rule-dark)}
html body .mmp-show-tags:hover{color:var(--mmp-ink);border-color:var(--mmp-ink)}
html body .mmp-card-play,
html body.mm-signed-in .mmp-card-play{color:var(--mmp-ink-2);border-radius:2px}
html body .mmp-card-play.is-added,
html body.mm-signed-in .mmp-card-play.is-added{color:var(--mmp-red)}
html body .mmp-card-play.is-locked,
html body.mm-signed-in .mmp-card-play.is-locked{color:var(--mmp-rule-dark)}
html body .mmp-card-play:hover{background:var(--mmp-paper-2);color:var(--mmp-red)}

/* The play row on a song page */
html body .mmp-simple-audio{background:var(--mmp-paper);border:1px solid var(--mmp-rule);border-radius:0;padding:10px 14px 10px 10px}
html body .mmp-simple-audio.is-current{background:rgba(138,47,34,.05);border-color:var(--mmp-red)}
html body .mmp-simple-audio-icon{background:var(--mmp-red);color:var(--mmp-card)}
html body .mmp-simple-audio-play:hover .mmp-simple-audio-icon{background:var(--mmp-red-dark)}
html body .mmp-simple-audio-title{font-family:var(--mmp-serif);font-size:19px;font-weight:500;color:var(--mmp-ink)}
html body .mmp-simple-audio-add{background:transparent;color:var(--mmp-ink);border:1px solid var(--mmp-ink);border-radius:2px;padding:7px 13px;font-family:var(--mmp-sans);font-size:14px;font-weight:600}
html body .mmp-simple-audio-add:hover{background:var(--mmp-ink);color:var(--mmp-card);opacity:1}
html body .mmp-simple-audio-add.is-in-playlist{background:var(--mmp-paper-2);color:var(--mmp-red);border-color:var(--mmp-paper-2)}

/* Messages, sharing, and the shared-playlist banner */
html body .mmp-toast{background:var(--mmp-ink);color:var(--mmp-card);border-radius:2px;font-family:var(--mmp-sans);font-size:14px;font-weight:500}
html body .mmp-share-overlay{background:rgba(35,31,27,.45)}
html body .mmp-share-modal{background:var(--mmp-card);color:var(--mmp-ink);border-radius:2px;font-family:var(--mmp-sans)}
html body .mmp-share-title{font-family:var(--mmp-serif);font-size:24px;font-weight:500}
html body .mmp-share-sub{color:var(--mmp-ink-2);font-size:14px}
html body .mmp-share-url{background:var(--mmp-paper);color:var(--mmp-ink);border:1px solid var(--mmp-rule-dark);border-radius:2px}
html body .mmp-share-btn,
html body .mmp-import-btn{background:transparent;color:var(--mmp-ink);border:1px solid var(--mmp-ink);border-radius:2px;font-family:var(--mmp-sans);font-size:14px;font-weight:600}
html body .mmp-share-btn.is-primary,
html body .mmp-import-btn.is-primary{background:var(--mmp-red);border-color:var(--mmp-red);color:var(--mmp-card)}
html body .mmp-import-banner{background:var(--mmp-card);color:var(--mmp-ink);border-bottom:1px solid var(--mmp-red);font-family:var(--mmp-sans)}
html body .mmp-import-name{font-family:var(--mmp-serif);font-size:18px;font-weight:500}
html body .mmp-import-dismiss{color:var(--mmp-ink-2)}

@media (max-width:600px){
  html body .mmp-progress{background:transparent}
  html body .mmp-progress::before{background:rgba(35,31,27,.14);border-radius:0}
  html body .mmp-progress-fill{border-radius:0}
  html body .mmp-title{font-size:17px}
  html body .mmp-queue-header{padding:8px 10px 8px 14px;font-size:16px}
  html body .mmp-setlist-btn,
  html body .mmp-queue-clear{padding:4px 8px}
}