:root{
  --ink:#efe7d8; --secondary:#9c9080; --muted:#8a7a66; --dim:#665b4c;
  --wood:linear-gradient(178deg,#5f4029,#33210f); --wood-border:#1a1108;
  --well:#0c0907; --accent:#c8a97a;
  --spine-h:44px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:radial-gradient(120% 100% at 20% -10%, #221b15 0%, #110e0b 55%, #070606 100%);
  background-attachment:fixed;
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding-top:128px;   /* room for the fixed deck */
  padding-bottom:0;
}
h2{font-family:'Archivo Narrow',sans-serif; font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); font-weight:700;}
button{font-family:inherit; cursor:pointer;}
.count{color:var(--dim); font-weight:400; letter-spacing:.14em; font-family:'Courier Prime',monospace; font-size:11px;}

/* ---------- now playing deck ---------- */
.deck{
  position:fixed; top:0; left:0; right:0; z-index:30;
  background:linear-gradient(180deg,#241b12,#140e08);
  border-bottom:1px solid #0a0705;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.85);
}
.deck.drop-hover{box-shadow:0 14px 34px -14px rgba(0,0,0,.85), inset 0 0 0 2px var(--accent);}
.deck:not([data-empty]) .np-cassette{cursor:grab;}
.deck:not([data-empty]) .np-cassette:active{cursor:grabbing;}
.deck-inner{ display:flex; align-items:center; gap:22px; max-width:1280px; margin:0 auto; padding:15px 32px; }
.np-cassette{
  position:relative; width:150px; height:96px; flex:none;
  border-radius:8px; overflow:hidden; background:#0e0b08;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px -8px rgba(0,0,0,.7);
  transition:opacity .3s ease;
}
.np-cassette .np-art{position:absolute; inset:0; background-size:cover; background-position:center;}
.np-cassette .np-reels{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:34px;}
.np-cassette .reel{
  width:38px; height:38px; border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.85) 0 12deg, rgba(255,255,255,.25) 12deg 24deg);
  box-shadow:0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 9px rgba(20,15,10,.72), 0 0 10px rgba(0,0,0,.5);
  animation:spin 2.4s linear infinite; animation-play-state:paused;
}
.deck.playing .reel{animation-play-state:running;}
@keyframes spin{to{transform:rotate(360deg);}}
.np-empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px; color:var(--dim); font-size:11px; letter-spacing:.03em; font-family:'Courier Prime',monospace;}
.deck:not([data-empty]) .np-empty{display:none;}
.np-meta{flex:1; min-width:0;}
.np-song{font-family:'Archivo Narrow',sans-serif; font-size:22px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.np-album{font-size:13px; color:var(--secondary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.np-track-of{font-family:'Courier Prime',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);}
.np-meta-foot{display:flex; align-items:center; gap:12px; margin-top:8px;}
.np-share{display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 8px; flex:none;
  font-family:'Archivo',sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#cfc4ae; background:transparent; border:none; border-radius:20px; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); transition:background .15s, color .15s, transform .1s;}
.np-share:hover{background:rgba(255,255,255,.06); color:var(--ink);}
.np-share:active{transform:scale(.94);}
.np-share svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round;}
.np-share.copied{color:#231a10; background:#d6b686; box-shadow:none;}
.np-controls{display:flex; align-items:center; gap:8px; flex:none;}
.ctl{width:38px; height:38px; border-radius:50%; background:#2a2016; color:var(--ink); border:1px solid #3d2e1f;
  font-size:14px; display:grid; place-items:center; transition:background .15s, transform .1s;}
.ctl:hover{background:#3a2c1d;}
.ctl:active{transform:scale(.92);}
.ctl-big{width:48px; height:48px; font-size:17px; background:var(--accent); color:#241300; border-color:#e6cda4;}
.ctl-big:hover{background:#e6cda4;}
/* transport toggle group: tracklist + back-of-case notes */
.ctl.toggle{background:transparent; color:#cfc4ae; border:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);}
.ctl.toggle:hover{background:rgba(255,255,255,.06);}
.ctl.toggle.on{background:#d6b686; color:#231a10; box-shadow:none;}

.sleeve{max-width:1280px; margin:0 auto; padding:12px 32px 22px; border-top:1px dashed rgba(255,255,255,.12);}
[hidden]{display:none !important;}

/* ---- the inlay tracklist ---- */
.inlay{--paper:linear-gradient(180deg,#faf5e6,#efe7d1); --rule:rgba(64,54,36,.26); --ink:#1d1a15; --dim:#8a7f68; --cue:#a8562f; --src:#7a6f58; --wash:rgba(168,86,47,.09);
  background:var(--paper); border-radius:3px; padding:12px 18px 6px; max-width:940px; margin:0 auto;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.05);}
.inlay.album{--paper:linear-gradient(180deg,#f7f7f4,#ebebe6); --rule:rgba(30,32,34,.16); --ink:#16181a; --dim:#7d8086; --cue:#9a6b2f; --wash:rgba(154,107,47,.08);}
.inlay-grid{display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:column; grid-template-rows:repeat(var(--rows),auto); column-gap:26px;}
.ilr{display:flex; align-items:flex-end; gap:8px; padding:3px 6px 3px 2px; border-bottom:1px solid var(--rule); cursor:pointer;}
.ilr-n{width:15px; flex:none; text-align:right; color:var(--dim); font-size:12px;}
.inlay.mix .ilr-n{font-family:var(--hand,cursive);}
.inlay.album .ilr-n{font-family:'Courier Prime',monospace;}
.ilr-main{flex:1; min-width:0; display:flex; align-items:baseline; gap:8px;}
.ilr-nm{flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink);}
.inlay.mix .ilr-nm{font-family:var(--hand,'Permanent Marker',cursive); font-size:14px; line-height:18px; text-transform:uppercase; padding-right:3px;}
.inlay.album .ilr-nm{font-family:'Courier Prime',monospace; font-size:12px; line-height:18px;}
.ilr-src{flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase;
  font-family:var(--hand,cursive); font-size:12px; line-height:18px; color:var(--src); padding-right:4px;}
.ilr-cue{flex:none; color:var(--cue); font-size:9px; visibility:hidden;}
.ilr-d{flex:none; color:var(--dim); font-size:11px; font-variant-numeric:tabular-nums; font-family:'Courier Prime',monospace;}
.ilr.on{background:var(--wash);}
.ilr.on .ilr-nm{color:var(--cue);}
.ilr.on .ilr-cue{visibility:visible;}

/* ---- the note card ---- */
.notecard{max-width:560px; margin:0 auto;}
.nc-loading{padding:40px 0; text-align:center; color:var(--muted); font-family:'Courier Prime',monospace; letter-spacing:.14em; text-transform:uppercase; font-size:11px;}
.nc-box{position:relative; padding-bottom:10px;}
.nc-stack{position:absolute; left:0; right:0; border-radius:2px;}
.nc-stack-3{top:10px; left:8px; right:8px; height:100%; background:#c6bfa8;}
.nc-stack-2{top:5px; left:4px; right:4px; height:100%; background:#d8d2bd;}
.nc-card{position:relative; z-index:1; background:linear-gradient(180deg,#fbf8ee,#f1ebdb); border-radius:2px;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.14); padding:17px 20px 15px;
  min-height:286px; display:flex; flex-direction:column;}
.nc-hd{display:grid; grid-template-columns:1fr auto; align-items:start; gap:3px 12px; padding-bottom:10px; border-bottom:2px solid #c3453c;}
.nc-title{grid-column:1; grid-row:1; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:17px; color:#191510;
  background:transparent; border:none; outline:none; width:100%; padding:0;}
.nc-title::placeholder{color:#a3987f;}
.nc-sub{grid-column:1; grid-row:2; font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.06em; color:#7a715f;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-top:2px;}
.nc-seg{grid-column:2; grid-row:1; display:flex; border-radius:3px; box-shadow:inset 0 0 0 1px #c9bfa6; overflow:hidden;}
.nc-segbtn{border:none; background:transparent; color:#7a715f; height:18px; padding:0 6px; font-family:'Archivo',sans-serif;
  font-size:9px; letter-spacing:.03em; text-transform:uppercase;}
.nc-segbtn.on{background:#c3453c; color:#fbf8ee;}
.nc-filed{grid-column:2; grid-row:2; text-align:right; font-family:'Courier Prime',monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:#a3987f; padding-top:4px;}
.nc-body{flex:1; margin:12px 0 10px; min-height:138px; width:100%; border:none; outline:none; resize:none; color:#2c2a26;
  font-family:'Reenie Beanie',cursive; font-size:21px; line-height:23px; padding:0 2px;
  background:repeating-linear-gradient(180deg, transparent 0 22px, #d6cfba 22px 23px); background-attachment:local;}
.nc-body::placeholder{color:#bcb29a;}
.nc-foot{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.nc-pager{display:flex; align-items:center; gap:1px;}
.nc-arrow{width:18px; height:18px; border-radius:50%; background:#e7ddc5; color:#5a5140; border:1px solid #cdc2a6; font-size:11px; line-height:1; display:grid; place-items:center;}
.nc-arrow:hover{background:#dccfb2;}
.nc-of{min-width:12px; text-align:center; font-family:'Courier Prime',monospace; font-size:10px; color:#7a715f;}
.nc-actions{display:flex; align-items:center; gap:4px;}
.nc-bin{background:transparent; color:#8a5049; border:1px solid #d3c8b2; border-radius:10px; padding:0 7px; height:18px;
  font-family:'Archivo',sans-serif; font-size:9.5px;}
.nc-bin:hover{background:rgba(138,80,73,.08);}
.nc-new{background:#d6b686; color:#231a10; border:none; border-radius:10px; padding:0 8px; height:18px; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:10px; letter-spacing:.02em; text-transform:uppercase;}
.nc-new:hover{background:#e2c79c;}
.nc-hint{max-width:560px; margin:10px auto 0; text-align:center; font-size:11px; color:var(--muted); line-height:1.4;}

/* ---------- layout ---------- */
main{max-width:1280px; margin:0 auto; padding:26px 32px 90px;}
body.drawer-open main{padding-bottom:48vh;}
.libline{font-family:'Archivo Narrow',sans-serif; font-size:11.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-bottom:22px;}
.section-head{display:flex; align-items:center; justify-content:space-between; margin:6px 0 14px;}
.btn{background:#2a2016; color:var(--ink); border:1px solid #3d2e1f; border-radius:7px; padding:7px 13px; font-size:12px;}
.btn:hover{background:#3a2c1d;}
.search{background:#140f0a; border:1px solid #33271a; border-radius:7px; color:var(--ink); padding:7px 12px; font-size:13px; width:220px; font-family:inherit;}
.search:focus{outline:none; border-color:var(--accent);}
.foot-hint{font-family:'Courier Prime',monospace; font-size:10.5px; letter-spacing:.06em; color:var(--dim); padding:26px 2px 0;}

/* ---------- racks: single-column stacks ---------- */
.racks-row{display:flex; gap:26px; flex-wrap:wrap; perspective:2200px; perspective-origin:0% 50%; align-items:flex-start;}
.rack{
  position:relative;
  flex:1 1 380px; min-width:330px; max-width:520px;
  padding:26px 11px 16px; border-radius:4px; border:1px solid #1a0f06;
  /* walnut: fine grain + wide figure (divergent angles) + sheen + stock */
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.22) 0 1px, rgba(255,255,255,.045) 1px 2px, rgba(0,0,0,0) 2px 6px),
    repeating-linear-gradient(89.4deg, rgba(0,0,0,.14) 0 2px, rgba(0,0,0,0) 2px 17px),
    radial-gradient(120% 60% at 18% 30%, rgba(255,255,255,.10), rgba(0,0,0,0) 60%),
    linear-gradient(177deg, #5b3a24, #2c1a0d);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -3px 6px rgba(0,0,0,.5),
    0 40px 80px -34px rgba(0,0,0,.9);
}
.rack{cursor:grab;}
.rack.rack-dragging{cursor:grabbing; opacity:.4; transition:opacity .12s;}
/* insertion marker sits in the gap on the side the stack will land */
.rack.rack-drop-before::before, .rack.rack-drop-after::after{content:''; position:absolute; z-index:8;
  top:-4px; bottom:-4px; width:4px; border-radius:3px; background:var(--accent); box-shadow:0 0 12px var(--accent);}
.rack.rack-drop-before::before{left:-15px;}
.rack.rack-drop-after::after{right:-15px;}
.rack-overlay{position:absolute; inset:0; border-radius:4px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,0) 18%, rgba(0,0,0,.22));}
.rack-inner{position:relative; display:flex; flex-direction:column;}

/* torn masking-tape stack label — overhangs the top edge, hand-applied.
   width shrinks to the text up to one full line, then wraps to a second. */
.tape{position:absolute; top:-9px; left:16px; min-width:96px; z-index:5;
  transform:rotate(var(--rot,-1.4deg)); filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));}
.tape-stock{position:absolute; inset:0; opacity:.96;
  background:linear-gradient(180deg,#f6f2e6,#e7e1cf);}
.tape-grain{position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 3px, rgba(255,255,255,.05) 3px 7px);}
.tape-text{position:relative; display:block; padding:7px 17px; text-align:center;
  font-family:'Permanent Marker',cursive; font-size:15px; line-height:1.06; letter-spacing:.02em; color:#22201c;
  text-transform:uppercase; white-space:normal; overflow-wrap:break-word; word-break:break-word; cursor:text;}
.tape-text:focus{outline:none;}
.tape-text:empty::before{content:'—'; opacity:.4;}
.tape-text::selection{background:rgba(34,32,28,.18);}

.rack-del{position:absolute; top:6px; right:8px; z-index:4;
  background:rgba(0,0,0,.3); color:#e7d9c4; border:1px solid rgba(255,255,255,.08); border-radius:6px; font-size:10px; padding:4px 8px;
  font-family:'Courier Prime',monospace; letter-spacing:.08em; cursor:pointer;}
.rack-del:hover{background:rgba(0,0,0,.5);}
.well{
  display:flex; flex-direction:column; gap:1px; background:var(--well); padding:2px; border-radius:2px;
  box-shadow:inset 0 6px 16px rgba(0,0,0,.8); min-height:52px;
}
.well.over{box-shadow:inset 0 0 0 2px var(--accent), inset 0 6px 16px rgba(0,0,0,.8);}
.well-empty{display:flex; align-items:center; justify-content:center; height:66px; color:#5b5142;
  font-family:'Courier Prime',monospace; font-size:10.5px; letter-spacing:.1em; text-align:center;}

/* ---------- drawer ---------- */
.drawer{
  position:fixed; left:0; right:0; bottom:0; z-index:26;
  height:46vh; max-height:560px;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#1b130c,#100b06);
  border-top:1px solid #3a2a1a;
  box-shadow:0 -24px 48px -22px rgba(0,0,0,.9);
  transform:translateY(0); transition:transform .38s cubic-bezier(.2,.9,.25,1);
}
.drawer.collapsed{transform:translateY(calc(100% - 54px));}
.drawer-head{
  height:54px; flex:none; display:flex; align-items:center; gap:16px; padding:0 32px;
  cursor:pointer; user-select:none;
  background:linear-gradient(180deg,#251a10,#180f08); border-bottom:1px solid #2a1d12;
}
.dh-toggle{flex:none; width:16px; text-align:center; font-size:12px; color:var(--accent); transition:transform .38s ease;}
.drawer:not(.collapsed) .dh-toggle{transform:rotate(180deg);}
.dh-title{font-family:'Archivo Narrow',sans-serif; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); font-weight:700;}
.drawer-head .search{margin-left:auto;}
.drawer-tapes{
  flex:1; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); gap:1px 22px;
  align-content:start; background:var(--well); padding:12px 32px 40px;
  perspective:2200px; perspective-origin:0% 50%;
}
.drawer-tapes.over{box-shadow:inset 0 0 0 2px var(--accent);}
.drawer-empty{color:var(--dim); font-family:'Courier Prime',monospace; font-size:12px; padding:24px; grid-column:1/-1; text-align:center;}

/* ---------- the spine ---------- */
.spine{
  position:relative; height:var(--spine-h); cursor:pointer;
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.2,.9,.25,1), filter .3s ease;
}
.spine:hover{transform:translateX(46px) rotateY(-5deg); filter:brightness(1.08); z-index:6;}
.spine.dragging{opacity:.34;}
.spine.playing{outline:1px solid rgba(200,169,122,.5);}
.spine.insert-before{box-shadow:0 -2px 0 var(--accent);}
.spine .case{position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(180deg,#dedad3 0%,#b6b1a9 5%,#8e8a83 48%,#5d5952 53%,#7e7a73 78%,#494540 100%);
  box-shadow:0 4px 9px -3px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.7);}
.spine .hinge{position:absolute; top:2px; bottom:2px; width:9px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.34) 0 1px,rgba(0,0,0,.24) 1px 3px);}
.spine .hinge.l{left:0; border-radius:2px 0 0 2px;}
.spine .hinge.r{right:0; border-radius:0 2px 2px 0; background:repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 1px,rgba(0,0,0,.24) 1px 3px);}
.spine .insert{position:absolute; left:10px; right:10px; top:3px; bottom:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.3), inset 0 1px 2px rgba(255,255,255,.35);}
.spine .shade{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 26%,rgba(0,0,0,.06) 70%,rgba(0,0,0,.22));}
.spine .gloss{position:absolute; inset:0; border-radius:2px; pointer-events:none;
  background:linear-gradient(102deg,rgba(255,255,255,.2) 0 12%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 76%,rgba(255,255,255,.12) 90%);}
.spine .sp-play{position:absolute; top:50%; right:14px; transform:translateY(-50%); z-index:4;
  width:22px; height:22px; border-radius:50%; background:rgba(15,10,5,.7); color:#fff; border:none;
  font-size:9px; display:grid; place-items:center; opacity:0; transition:opacity .15s; pointer-events:none;}
.spine:hover .sp-play{opacity:.92;}
.spine-ghost{height:var(--spine-h); border-radius:2px; background:rgba(200,169,122,.05); box-shadow:inset 0 0 0 1px rgba(200,169,122,.32);}

/* the five templates (rendered inside .insert) */
.tpl{position:absolute; inset:0;}
/* shared left cover-art strip on every spine */
.sp-cover{flex:none; width:34px; background-size:cover; background-position:center; box-shadow:inset -1px 0 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);}
/* A. bold */
.tpl-bold{display:flex; align-items:stretch;}
.b-body{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:0 8px 0 9px;}
.b-title{font-family:'Bebas Neue',sans-serif; font-size:24px; line-height:1; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.b-artist{font-family:'Archivo',sans-serif; font-weight:600; font-size:9px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.72;}
.b-right{margin-left:auto; flex:none; display:flex; align-items:center; gap:6px;}
.b-cat{font-family:'Courier Prime',monospace; font-size:7.5px; letter-spacing:.1em; opacity:.7;}
.b-side{width:14px; height:14px; display:grid; place-items:center; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:9.5px;}
/* B. strip */
.tpl-strip{display:flex; align-items:stretch;}
.s-bar{width:5px; flex:none;}
.s-mid{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:0 8px; gap:1px;}
.s-artist{font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:9px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.s-strip{align-self:stretch; background:#fbfaf6; padding:2px 6px; box-shadow:0 0 0 1px rgba(0,0,0,.18);}
.s-strip .s-title{font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:13px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#16130f;}
.s-rail{flex:none; width:44px; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; padding:4px 7px 4px 0;
  font-family:'Courier Prime',monospace; font-size:7px; letter-spacing:.08em; opacity:.75;}
/* C. typed */
.tpl-typed{display:flex; align-items:stretch;}
.ty-body{flex:1; min-width:0; display:flex; align-items:center; gap:9px; padding:0 8px;}
.ty-mid{min-width:0; display:flex; flex-direction:column; gap:1px;}
.ty-title{font-family:'Courier Prime',monospace; font-weight:700; font-size:12px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ty-sub{font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:.1em; text-transform:uppercase; opacity:.62; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ty-right{margin-left:auto; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
.ty-rule{width:26px; height:3px;}
.ty-side{font-family:'Courier Prime',monospace; font-size:7px; letter-spacing:.14em; opacity:.6;}
/* D. art */
.tpl-art{display:flex; align-items:stretch;}
.ar-crop{flex:none; width:38px; background-size:cover; background-position:center; box-shadow:inset -1px 0 0 rgba(0,0,0,.2);}
.ar-mid{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:0 9px; gap:1px;}
.ar-title{font-family:'Playfair Display',serif; font-weight:700; font-size:14px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ar-artist{font-family:'Archivo',sans-serif; font-size:8px; letter-spacing:.22em; text-transform:uppercase; opacity:.66; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ar-bar{flex:none; width:5px;}
/* E. band */
.tpl-band{display:flex; align-items:stretch;}
.bd-col{flex:1; min-width:0; display:flex; flex-direction:column;}
.bd-band{flex:none; height:15px; display:flex; align-items:center; justify-content:space-between; padding:0 8px;}
.bd-artist{font-family:'Archivo',sans-serif; font-weight:700; font-size:8px; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bd-cat{font-family:'Courier Prime',monospace; font-size:7px; letter-spacing:.1em; opacity:.85; flex:none;}
.bd-low{flex:1; display:flex; align-items:center; gap:8px; padding:0 8px;}
.bd-title{font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bd-len{margin-left:auto; flex:none; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:10px; letter-spacing:.1em; opacity:.6;}

.fly-layer{position:fixed; inset:0; pointer-events:none; z-index:60;}  /* above the deck, drawers and tape-deck panel so drags stay on top */
.fly-clone{position:fixed; will-change:transform; transition:transform .5s cubic-bezier(.5,0,.2,1), opacity .5s ease;}
/* the spine that follows the finger/cursor while dragging */
.drag-clone{position:fixed; left:0; top:0; z-index:50; pointer-events:none; opacity:.94;
  transform:translate(0,0); transition:none; box-shadow:0 20px 40px -12px rgba(0,0,0,.85);}
.spine{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
/* kill text selection while dragging (mouse sweep) */
body.nosel, body.nosel *{-webkit-user-select:none !important; user-select:none !important;}

.demo-banner{background:linear-gradient(180deg,#3a2a12,#281c0c); border:1px solid #5a4526; color:#e9d9b8;
  font-family:'Courier Prime',monospace; font-size:12px; line-height:1.4; letter-spacing:.01em;
  padding:9px 14px; border-radius:8px; margin-bottom:16px;}
.demo-banner b{color:#f0c674;}

/* ---------- mobile ---------- */
@media (max-width:720px){
  body{padding-top:130px;}
  .deck-inner{flex-wrap:wrap; padding:10px 14px 8px; gap:8px 12px;}
  .np-cassette{width:84px; height:54px;}
  .np-cassette .np-reels{gap:20px;}
  .np-cassette .reel{width:24px; height:24px; box-shadow:0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 6px rgba(20,15,10,.72), 0 0 8px rgba(0,0,0,.5);}
  .np-meta{order:0; flex:1 1 auto; min-width:0;}
  .np-song{font-size:16px;}
  .np-album{font-size:11px;}
  .np-track-of{display:none;}
  .np-controls{order:3; flex-basis:100%; justify-content:center; gap:10px;}
  .ctl{width:36px; height:36px; font-size:13px;}
  .ctl-big{width:44px; height:44px; font-size:15px;}
  main{padding:16px 14px 90px;}
  .libline{font-size:10px; letter-spacing:.2em; margin-bottom:16px;}
  .racks-row{flex-direction:column; gap:16px;}
  /* column layout makes flex-basis a height; reset it so a stack is only as tall as its tapes */
  .rack{flex:0 0 auto; min-width:0; max-width:none; width:100%;}
  /* stacked column → insertion marker runs horizontally above/below */
  .rack.rack-drop-before::before, .rack.rack-drop-after::after{left:-4px; right:-4px; top:auto; bottom:auto; width:auto; height:4px;}
  .rack.rack-drop-before::before{top:-10px;}
  .rack.rack-drop-after::after{bottom:-10px;}
  .drawer{height:56vh;}
  body.drawer-open main{padding-bottom:58vh;}
  .drawer-head{padding:0 16px;}
  .drawer-tapes{grid-template-columns:1fr; padding:12px 14px 40px;}
  .search{width:132px;}
  .sleeve{padding:10px 16px 16px;}
  .inlay{padding:12px 14px 4px;}
  .inlay-grid{grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none;}
  .nc-segbtn{height:20px; padding:0 8px;}
  .nc-arrow{width:20px; height:20px; font-size:12px;}
  .nc-bin,.nc-new{height:20px;}
  .spine:hover{transform:none; filter:none;}   /* no hover-pull on touch */
}

/* ============================================================================
   THE WRITER — custom tapes, the eight hands, and the two-bay writer shell
   ============================================================================ */

/* ---- custom-tape spine (the hand renders here too) ---- */
.spine-tape .tape-insert{display:flex; align-items:center; gap:9px; padding:0 9px 0 0;}
.spine-tape .sp-cover{height:100%; width:38px; box-shadow:inset -1px 0 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.14);}
.spine-tape .hand-write:first-child{padding-left:11px;}   /* no cover → indent the title off the edge */
.hand-nib{flex:none; width:15px; height:15px; display:inline-flex; opacity:.72;}
.nib-svg{width:100%; height:100%;}
.hand-write{position:relative; flex:1; min-width:0; overflow:hidden; display:flex; align-items:center; height:100%;}
.hand-ink{position:relative; z-index:2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.hand-bigcaps{overflow:visible; text-overflow:clip;}   /* overruns; the card clips it */
.hand-ph{opacity:.42;}
.hand-swipe{position:absolute; left:0; right:0; top:12%; bottom:12%; z-index:1; pointer-events:none;}
.hand-strip{position:absolute; left:-4px; right:-4px; top:50%; height:1.5em; z-index:1; pointer-events:none;
  transform:translateY(-50%) rotate(-1.2deg); background:linear-gradient(180deg,#f7f4e8,#e7e1cf); box-shadow:0 2px 4px rgba(0,0,0,.45);}
.hand-onstrip{z-index:2;}
.tape-meta{flex:none; font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(0,0,0,.32); color:#f2ecdf; padding:2px 5px; border-radius:3px;}

/* bin an empty blank straight from the shelf/drawer (hover on desktop, always on mobile) */
.spine-bin{position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:6; opacity:0;
  width:26px; height:26px; border-radius:7px; border:1px solid rgba(0,0,0,.3); cursor:pointer;
  background:rgba(16,12,9,.85); color:#e7b7ab; font-size:13px; line-height:1; transition:opacity .12s;}
.spine-tape:hover .spine-bin{opacity:.92;}
.spine-bin:hover{background:#3a1e18; border-color:#8c4a3f;}

/* ---- writer shell: desktop right side drawer ---- */
.writer{position:fixed; top:0; right:0; height:100%; width:min(520px,92vw); z-index:40;
  background:linear-gradient(180deg,#1a1713,#100e0c); border-left:1px solid #2a2016;
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.85); display:flex; flex-direction:column;
  transform:translateX(0); transition:transform .38s cubic-bezier(.2,.9,.25,1);}
.writer.collapsed{transform:translateX(100%);}
.writer-handle{position:absolute; top:50%; left:0; transform:translate(-100%,-50%);
  writing-mode:vertical-rl; text-orientation:mixed; display:flex; align-items:center;
  padding:18px 9px; border:1px solid #2a2016; border-right:0; border-radius:12px 0 0 12px; cursor:pointer;
  background:linear-gradient(180deg,#241b12,#140e08); color:#efe7d8;
  font-family:'Archivo Narrow',sans-serif; font-weight:700; letter-spacing:.26em; font-size:12px; text-transform:uppercase;}
.writer-head{display:none;}
.writer-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px;}
.buy-row{display:flex;}
.writer.is-readonly .buy-row{display:none;}

/* ---- bays ---- */
.bay{flex:none; background:#151210; border:1px solid #241c14; border-radius:12px; padding:12px 12px 14px; display:flex; flex-direction:column; gap:10px;}
#readBay{min-height:200px;}
#writeBay{min-height:300px;}
.bay.over{box-shadow:inset 0 0 0 2px var(--accent);}
.bay-head{display:flex; align-items:center; gap:10px;}
.bay-tag{font-family:'Courier Prime',monospace; font-size:10px; letter-spacing:.18em; color:#241a0e; background:var(--accent);
  padding:3px 8px; border-radius:5px; font-weight:700;}
.bay-tag.warn{background:#8c4a3f; color:#f6ded8;}
.bay-title{font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:14px; color:var(--ink); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bay-x{margin-left:auto; background:transparent; border:1px solid #3d2e1f; color:var(--secondary); border-radius:8px;
  font-family:'Courier Prime',monospace; font-size:10px; letter-spacing:.1em; padding:5px 9px; cursor:pointer; min-height:32px;}
.bay-x:hover{background:#241c14; color:var(--ink);}
.bay-eject{margin-left:auto; flex:none; width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:1px solid #3d2e1f; background:transparent; color:var(--accent); font-size:14px; line-height:1;}
.bay-eject:hover{background:var(--accent); color:#241a0e; border-color:transparent;}
.bay-empty{color:var(--dim); font-family:'Courier Prime',monospace; font-size:12px; line-height:1.6; padding:14px 6px;}
.bay-reject{background:rgba(58,22,18,.5); border:1px solid #8c4a3f; border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:5px;}
.bay-reject strong{color:#f0c3b8; font-family:'Archivo Narrow',sans-serif; letter-spacing:.06em; font-size:14px;}
.bay-reject span{color:#d99b8c; font-size:12px; line-height:1.5;}

/* ---- the cassette slot: drop target on top, tape sits in it, drag it back out ---- */
.bay-slot{min-height:60px; border:1px dashed #3d2e1f; border-radius:8px; padding:8px; display:flex; align-items:center;
  background:rgba(0,0,0,.18); transition:box-shadow .12s, border-color .12s;}
.bay-slot.filled{border-style:solid; border-color:#241c14; background:rgba(0,0,0,.3); padding:8px 10px;}
.bay-slot.reject{border-color:#8c4a3f; background:rgba(58,22,18,.35);}
.bay-slot.over{border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent);}
.slot-empty{color:var(--dim); font-family:'Courier Prime',monospace; font-size:11.5px; line-height:1.55;}
.bay-slot .spine.in-slot{flex:1; cursor:grab;}
.bay-slot .spine.in-slot:hover{transform:none; filter:brightness(1.05); z-index:auto;}
.bay-body:empty{display:none;}
/* write-bay spine: a normal cassette, but the cover picks an image and the title edits in place */
.spine-tape.editing .sp-cover-btn{cursor:pointer;}
.sp-cover-add{display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.35);}
.sp-cover-add span{font-size:15px; opacity:.85; line-height:1;}
.hand-edit{cursor:text; outline:none; min-width:2ch;}
.hand-edit:empty::before{content:attr(data-ph); opacity:.42;}

/* ---- read-bay list ---- */
.rb-list, .wb-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; max-height:210px; overflow-y:auto;}
.rb-row{display:grid; grid-template-columns:20px minmax(0,1fr) auto auto 40px; align-items:center; gap:8px; padding:6px 4px; border-bottom:1px solid rgba(255,255,255,.04);}
.rb-i{font-family:'Courier Prime',monospace; font-size:10px; color:var(--dim); text-align:right;}
.rb-name{min-width:0; font-size:13px; color:var(--ink); display:flex; align-items:center; gap:6px;}
.rb-nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rb-badge{flex:none; font-family:'Courier Prime',monospace; font-size:9px; color:#241a0e; background:var(--accent); padding:1px 4px; border-radius:3px;}
.rb-from{font-size:10px; color:var(--muted); font-family:'Courier Prime',monospace; letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:110px;}
.rb-dur{font-family:'Courier Prime',monospace; font-size:10px; color:var(--dim);}
.rb-add{width:34px; height:34px; border-radius:50%; border:1px solid var(--accent); background:transparent; color:var(--accent);
  font-size:18px; line-height:1; cursor:pointer; justify-self:end;}
.rb-add:hover{background:var(--accent); color:#241a0e;}
.rb-add.off{border-color:#33281c; color:var(--dim); display:flex; align-items:center; justify-content:center; cursor:default; font-size:16px;}

/* ---- write-bay: the J-card is the form ---- */
.jcard{position:relative; display:flex; align-items:center; gap:12px; padding:13px 15px; min-height:64px; border-radius:4px; overflow:hidden;
  border:1px solid rgba(0,0,0,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.4);}
.jc-cover{flex:none; width:40px; height:40px; border-radius:3px; z-index:3; cursor:pointer;
  background-size:cover; background-position:center; background-color:rgba(0,0,0,.28);
  border:1px solid rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; color:#fff;}
.jc-cover span{font-size:22px; opacity:.85; line-height:1;}
.jc-name{flex:1; min-width:0; background:transparent; border:0; outline:none; padding:0; z-index:3;}
.jc-name::placeholder{color:currentColor; opacity:.4;}
.jc-nib{flex:none; width:18px; height:18px; opacity:.7; z-index:3; display:inline-flex;}
.jc-swipe{position:absolute; left:64px; right:16px; top:50%; height:1.5em; transform:translateY(-50%); z-index:1;}
.jc-strip{position:absolute; left:60px; right:12px; top:50%; height:32px; z-index:1;
  transform:translateY(-50%) rotate(-1.2deg); background:linear-gradient(180deg,#f7f4e8,#e7e1cf); box-shadow:0 2px 5px rgba(0,0,0,.45);}

/* ---- hand chips + cover palette ---- */
.hand-chips{display:flex; flex-wrap:wrap; gap:6px;}
.hand-chip{min-height:38px; padding:5px 11px; border-radius:20px; border:1px solid #33281c; background:#241c14; color:var(--ink);
  font-size:15px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; gap:6px;}
.hand-chip.on{border-color:var(--accent); background:#2f2417; box-shadow:inset 0 0 0 1px var(--accent);}
.chip-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px rgba(0,0,0,.3);}
.from-cover{display:flex; align-items:center; gap:6px;}
.fc-tag{font-family:'Courier Prime',monospace; font-size:9px; letter-spacing:.14em; color:var(--muted);}
.fc-sw{width:18px; height:18px; border-radius:4px; border:1px solid rgba(255,255,255,.18);}

/* ---- write-bay track list ---- */
.wb-row{display:grid; grid-template-columns:minmax(0,1fr) auto auto 34px; align-items:center; gap:8px; padding:6px 4px; border-bottom:1px solid rgba(255,255,255,.04);}
.wb-name{min-width:0; font-size:13px; color:var(--ink); display:flex; align-items:center; gap:6px;}
.wb-nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wb-copy{flex:none; font-family:'Courier Prime',monospace; font-size:9px; color:var(--muted); border:1px solid #33281c; padding:1px 4px; border-radius:3px;}
.wb-from{font-size:10px; color:var(--muted); font-family:'Courier Prime',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100px;}
.wb-dur{font-family:'Courier Prime',monospace; font-size:10px; color:var(--dim);}
.wb-x{width:30px; height:30px; border-radius:7px; border:1px solid #3d2e1f; background:transparent; color:var(--secondary); font-size:15px; cursor:pointer; justify-self:end;}
.wb-x:hover{background:#3a1e18; color:#f0c3b8; border-color:#8c4a3f;}
.wb-empty{list-style:none; color:var(--dim); font-family:'Courier Prime',monospace; font-size:11px; padding:10px 4px;}

/* ---- meter + gate + actions ---- */
.meter{display:flex; align-items:center; gap:10px;}
.meter-bar{flex:1; height:5px; border-radius:3px; background:rgba(0,0,0,.4); overflow:hidden;}
.meter-bar i{display:block; height:100%; background:var(--accent); transition:width .2s;}
.meter.over .meter-bar i{background:#d9a05b;}
.meter-t{font-family:'Courier Prime',monospace; font-size:10px; letter-spacing:.06em; color:var(--secondary);}
.meter.over .meter-t{color:#d9a05b;}
.gate{font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.04em; color:var(--muted);}
.gate.ok{color:#a8b58f;}
.wb-actions{display:flex; gap:8px; justify-content:flex-end;}
.btn.accent{background:var(--accent); color:#241a0e; border-color:transparent; font-weight:700;}
.btn.accent:hover{filter:brightness(1.06); background:var(--accent);}
.btn.accent:disabled{opacity:.4; cursor:not-allowed; filter:none;}
.btn.ghost{background:transparent; border-color:#3d2e1f; color:var(--secondary);}
.btn.ghost:hover{background:#241c14; color:var(--ink);}
.btn.danger{background:transparent; border-color:#5c3129; color:#d99b8c; margin-right:auto;}
.btn.danger:hover{background:#3a1e18; color:#f0c3b8; border-color:#8c4a3f;}

.wsr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ---- desktop: shift page content so the drawer never covers the shelf ---- */
@media(min-width:721px){
  body.writer-open main{margin-right:min(520px,92vw); transition:margin-right .38s cubic-bezier(.2,.9,.25,1);}
  body.writer-open .deck{right:min(520px,92vw); transition:right .38s cubic-bezier(.2,.9,.25,1);}
  body.writer-open .drawer{right:min(520px,92vw);}
}

/* ---- mobile: writer becomes a second bottom drawer above the unsorted one ---- */
@media(max-width:720px){
  .writer{top:auto; left:0; right:0; width:100%; height:520px; z-index:24;
    border-left:0; border-radius:16px 16px 0 0; overflow:hidden;
    transform:none; transition:height .3s cubic-bezier(.2,.9,.25,1), bottom .3s cubic-bezier(.2,.9,.25,1);}
  .writer.collapsed{height:46px; transform:none;}
  .writer-handle{display:none;}
  .writer-head{display:flex; align-items:center; gap:10px; height:46px; padding:0 16px; cursor:pointer; flex:none;}
  .wh-grab{width:24px; height:4px; border-radius:2px; background:#3d2e1f;}
  .wh-title{font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--secondary);}
  .wh-sum{flex:1; min-width:0; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .wh-chev{color:var(--dim);}
  .writer:not(.collapsed) .wh-chev{transform:rotate(180deg);}
  .writer-body{min-height:0;}
  .hand-chips{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .hand-chip{min-height:40px;}
  .rb-add{width:30px; height:30px; font-size:16px;}
  main{padding-bottom:120px;}
  body.drawer-open main{padding-bottom:58vh;}
}