/* 📂 My sheet music (js/folder.js, 2026-09-27): the folder that fills itself.
   It is a shelf of Free Play, so the rows are Free Play's own; this is the
   two piles' headings and the menu's door. */
.fp-shelf-h.folder { color: #ffd98a; margin-top: 18px; }
.fp-shelf-h.folder.done { color: #7dffb2; }
.fp-shelf-h.folder:first-child { margin-top: 6px; }

/* THE DOOR shares 🗺 MY PLAN's row, half each: the player's plan and the
   player's pieces. It is not a key of the keybed below, which is one octave
   and stays seven. The free tier's menu has no .menu-under (premium.css), so
   the door is a member's; the shelf itself is on Free Play for everybody. */
.menu-under > #plan-btn.mode-btn:has(+ #folder-btn),
.menu-under > #folder-btn.mode-btn { grid-column: span 3; }
.menu-under > #folder-btn.mode-btn { border-color: rgba(255, 217, 138, .5); }
html[data-menu="stage"] #menu .menu-under > #plan-btn.mode-btn:has(+ #folder-btn),
html[data-menu="stage"] #menu .menu-under:has(> #atlantis-btn.hidden) > #plan-btn.mode-btn:has(+ #folder-btn),
html[data-menu="stage"] #menu .menu-under > #folder-btn.mode-btn,
html[data-menu="stage"] #menu .menu-under:has(> #atlantis-btn.hidden) > #folder-btn.mode-btn { grid-column: span 3; }
html[data-menu="stage"] #menu .menu-under > #folder-btn.mode-btn { border-color: rgba(255, 217, 138, .5); color: #fff3d6; }

/* the letters to jump by, over a folder long enough to scroll */
.fp-letters { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.fp-letters button {
  min-width: 32px; height: 32px; padding: 0 6px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  color: #e9e4f6; font: 800 13px/1 inherit; letter-spacing: .5px;
}
.fp-letters button:hover { border-color: #34d3ff; color: #34d3ff; }
.song-card.fp-jumped { animation: fp-jumped 1.1s ease-out 1; }
@keyframes fp-jumped { 0% { box-shadow: 0 0 0 2px #ffd98a, 0 0 22px rgba(255, 217, 138, .6); } 100% { box-shadow: 0 0 0 2px rgba(255, 217, 138, 0), 0 0 0 rgba(255, 217, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .song-card.fp-jumped { animation: none; } }