/* The shoebox of tapes and the blank tape, under the boom box. Same one theme as the rest of the foundry. */
.shoebox { width: min(100%, 560px); display: grid; gap: 22px; }
.spines { display: flex; flex-wrap: wrap; gap: 4px 3px; align-items: flex-end; padding: 14px 12px 0; border: 4px solid #6b4a2a; border-top: 0; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #2a1a12, #3a2416); box-shadow: inset 0 12px 18px #000a; min-height: 60px; }
.spine { writing-mode: vertical-rl; text-orientation: mixed; height: 168px; width: 30px; padding: 8px 0; border: 2px solid #0b070d; border-radius: 3px 3px 0 0; cursor: pointer;
  background: var(--ink, #f2e2c4); color: #120a15; font: 12px/1 Georgia, serif; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  rotate: var(--lean, 0deg); transform-origin: 50% 100%; transition: transform .2s ease; }
.spine:hover, .spine:focus-visible { transform: translateY(-10px); outline: none; }
.spine:focus-visible { box-shadow: 0 0 0 3px var(--teal); }
.spine.out { transform: translateY(-22px); }
.spine.crate { width: 64px; height: 120px; writing-mode: horizontal-tb; text-align: center; font-size: 22px; background: repeating-linear-gradient(0deg, #7a5230 0 16px, #2a1a12 16px 22px); color: var(--blush); border-radius: 3px; }

.spine.rummage { width: 44px; height: 60px; writing-mode: horizontal-tb; text-align: center; font-size: 24px; background: #c9a24b; border-radius: 50% 50% 3px 3px; }

.jcard { background: #f3e6d3; color: #120a15; border-radius: 3px; padding: 14px 14px 16px; box-shadow: 0 14px 30px #000a; display: grid; gap: 10px; }
.jcard[hidden] { display: none; }
.jcard header { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #120a15; padding-bottom: 8px; }
.jcard h2 { margin: 0; font: bold 19px/1.2 Georgia, serif; flex: 1; overflow-wrap: anywhere; }
.fold { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: #120a15; padding: 4px 8px; }
.dig, .jcard header input, .fromfor input { font: 16px/1.3 Georgia, serif; color: #120a15; background: transparent; border: 0; border-bottom: 1px dashed #7a6a5c; padding: 4px 2px; width: 100%; }
.jcard header input { font-weight: bold; font-size: 19px; border-bottom: 0; }
.fromfor { margin: 0; display: flex; gap: 14px; flex-wrap: wrap; font: italic 14px/1.2 Georgia, serif; }
.fromfor label { display: flex; align-items: baseline; gap: 6px; flex: 1 1 160px; }
.dig:focus-visible, .jcard input:focus-visible { outline: 2px dashed #2f6f8f; outline-offset: 2px; }
.songs { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; counter-reset: song; }
.mix .songs { max-height: none; }
.songs li { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px dotted #b9a892; counter-increment: song; }
.mix .songs li::before { content: counter(song); width: 1.6em; text-align: right; font: 12px/1 Georgia, serif; color: #7a6a5c; }
.songs .words { flex: 1; min-width: 0; font: 15px/1.25 Georgia, serif; overflow-wrap: anywhere; }
.songs .words b { font-weight: normal; } .songs .words i { color: #6a5a4e; font-size: 13px; }
.songs button { border: 2px solid #120a15; background: #e9d3a6; color: #120a15; border-radius: 50%; width: 28px; height: 28px; flex: none; cursor: pointer; font: bold 15px/1 Georgia, serif; padding: 0; }
.songs button:hover, .songs button:focus-visible { background: #ffe9a8; outline: none; }
.songs .hear { font-size: 11px; background: #cfe8d5; } .songs .hear.none { width: 28px; flex: none; border: 0; background: transparent; }
.songs .off { background: #f7cfd8; } .songs .up { background: transparent; border-color: transparent; }
.songs .more { justify-content: center; border: 0; } .songs .more button { width: auto; height: auto; border-radius: 0; border: 0; padding: 8px 14px 8px 24px; }
.songs .hear.on { background: #120a15; color: #f3e6d3; }
.songs .whole { flex: none; font: italic 12px/1 Georgia, serif; color: #7a1f3d; white-space: nowrap; }
.todeck { flex: none; font: italic 13px/1 Georgia, serif; color: #120a15; background: #cfe8d5; border: 1px solid #120a15; border-radius: 3px; padding: 6px 8px; cursor: pointer; }
.todeck[hidden] { display: none; }
.room { margin: 0; min-height: 1.2em; font: italic 14px/1.2 Georgia, serif; color: #7a2e55; }
.tags { display: flex; gap: 12px; flex-wrap: wrap; }
.tag { font: italic 15px/1 Georgia, serif; color: #120a15; background: #e9d3a6; border: 0; padding: 9px 14px 9px 24px; cursor: pointer; clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%); }
.tag:hover, .tag:focus-visible { background: #ffe9a8; outline: none; } .tag.plain { background: #6f6796; color: #f6e3da; }
.link { width: 100%; font: 12px/1.2 Consolas, monospace; padding: 7px 9px; border: 1px dashed #7a6a5c; border-radius: 3px; background: #fff8ec; color: #120a15; }
.link[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .spine { transition: none; } }
.songs li.indie { display: block; border: 0; padding: 4px 0; }
.songs li.indie iframe { display: block; width: 100%; border: 0; }
.songs li.indie .buy { display: inline-block; margin-top: 8px; font: italic 15px/1 Georgia, serif; color: #7a1f3d; }
.spine.indie { font-weight: bold; }
.slotin { display: grid; gap: 8px; } .slotin textarea { font: 15px/1.3 Georgia, serif; color: #120a15; background: #fff8e6; border: 1px dashed #7a6a5c; padding: 6px; width: 100%; resize: vertical; }