/* Dongjing Meng Hua Lu — volume drawer prototype, 2026-08-31 */
.dj-volume-archive{padding-top:clamp(78px,8vw,126px)}
.dj-drawer-stack{border-top:1px solid var(--dj-ink)}
.dj-volume-drawer{position:relative;border-bottom:1px solid var(--dj-rule)}
.dj-volume-drawer>summary{list-style:none;display:grid;grid-template-columns:72px minmax(260px,1fr) 92px 116px 34px;gap:22px;align-items:center;min-height:96px;padding:14px 0;cursor:pointer;transition:background-color .18s ease,color .18s ease}
.dj-volume-drawer>summary::-webkit-details-marker{display:none}
.dj-volume-drawer>summary:hover{background:rgba(255,255,255,.2)}
.dj-volume-drawer>summary:focus-visible{outline:2px solid var(--dj-red);outline-offset:5px}
.dj-volume-drawer[open]>summary{background:rgba(255,255,255,.24)}
.dj-volume-drawer[open]>summary:before{content:"";position:absolute;left:0;top:14px;height:68px;width:3px;background:var(--dj-red)}
.dj-drawer-number{color:var(--dj-red);font:760 .75rem/1 var(--dj-mono);letter-spacing:.08em}
.dj-drawer-title{min-width:0}
.dj-drawer-title b{display:block;font-size:1.08rem;line-height:1.25;letter-spacing:.015em}
.dj-drawer-title small{display:block;margin-top:6px;color:var(--dj-muted);font:700 .75rem/1.35 var(--dj-mono);letter-spacing:.085em}
.dj-drawer-range,.dj-drawer-progress,.dj-drawer-status{font:760 .75rem/1.3 var(--dj-mono);letter-spacing:.075em}
.dj-drawer-range{color:var(--dj-muted)}
.dj-drawer-progress{text-align:right;color:var(--dj-muted)}
.dj-volume-drawer.is-complete .dj-drawer-progress{color:var(--dj-red)}
.dj-volume-drawer.is-current .dj-drawer-progress,.dj-volume-drawer.is-current .dj-drawer-status{color:var(--dj-red)}
.dj-drawer-status{position:relative;display:flex;justify-content:center;align-items:center;width:30px;height:30px;border:1px solid var(--dj-rule);border-radius:50%;font-size:0}
.dj-drawer-status:before,.dj-drawer-status:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:currentColor;transform:translate(-50%,-50%);transition:transform .2s ease}
.dj-drawer-status:after{transform:translate(-50%,-50%) rotate(90deg)}
.dj-volume-drawer[open] .dj-drawer-status:after{transform:translate(-50%,-50%) rotate(0)}
.dj-drawer-panel{margin:0 0 24px 72px;padding:0 24px 8px 28px;border-left:1px solid var(--dj-ink);background:rgba(255,255,255,.16)}
.dj-drawer-panel-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.56fr);gap:40px;padding:24px 0;border-bottom:1px solid var(--dj-rule)}
.dj-drawer-panel-intro h3{margin:0;font-size:clamp(1.8rem,3vw,3.4rem);font-weight:590;line-height:.96;letter-spacing:-.04em}
.dj-drawer-panel-intro p{margin:0;color:var(--dj-muted);font-family:var(--dj-serif);font-size:.92rem;line-height:1.58}
.dj-drawer-entries{border-top:0}
.dj-drawer-entry{display:grid;grid-template-columns:48px minmax(220px,.9fr) minmax(220px,1fr) 92px 82px;gap:18px;align-items:center;min-height:82px;padding:12px 0;border-bottom:1px solid var(--dj-rule);text-decoration:none}
.dj-drawer-entry:hover{background:rgba(255,255,255,.18)}
.dj-drawer-entry>span:first-child{color:var(--dj-red);font:760 .75rem/1 var(--dj-mono)}
.dj-drawer-entry-title strong{display:block;font-size:1rem;line-height:1.3}
.dj-drawer-entry-title small{display:block;margin-top:4px;color:var(--dj-muted);font-family:var(--dj-song);font-size:.88rem;font-weight:400;font-synthesis:none}
.dj-drawer-entry-note{color:var(--dj-muted);font-family:var(--dj-serif);font-size:.84rem;line-height:1.46}
.dj-drawer-entry-state,.dj-drawer-entry-time{font:760 .75rem/1.3 var(--dj-mono);letter-spacing:.07em}
.dj-drawer-entry-state{color:var(--dj-red)}
.dj-drawer-entry-time{text-align:right;color:var(--dj-muted)}
.dj-drawer-entry.is-queued{color:#635c4c;cursor:default}
.dj-drawer-entry.is-queued:hover{background:transparent}
.dj-drawer-entry.is-queued .dj-drawer-entry-state{color:var(--dj-muted)}
.dj-drawer-empty{display:grid;grid-template-columns:160px minmax(0,1fr);gap:28px;padding:28px 0;color:var(--dj-muted)}
.dj-drawer-empty small{color:var(--dj-red);font:760 .75rem/1.3 var(--dj-mono);letter-spacing:.08em}
.dj-drawer-empty p{max-width:64ch;margin:0;font-family:var(--dj-serif);font-size:.92rem;line-height:1.58}
@media(max-width:980px){.dj-volume-drawer>summary{grid-template-columns:58px minmax(0,1fr) 82px 98px 30px;gap:14px}.dj-drawer-panel{margin-left:58px}.dj-drawer-entry{grid-template-columns:44px minmax(180px,.9fr) minmax(190px,1fr) 76px}.dj-drawer-entry-time{display:none}}
@media(max-width:720px){.dj-volume-drawer>summary{grid-template-columns:46px minmax(0,1fr) 70px 30px;min-height:84px}.dj-drawer-range{display:none}.dj-drawer-progress{text-align:right}.dj-drawer-panel{margin-left:0;padding:0 16px 8px 18px;border-left:0;border-top:1px solid var(--dj-ink)}.dj-drawer-panel-intro{grid-template-columns:1fr;gap:12px}.dj-drawer-entry{grid-template-columns:38px minmax(0,1fr) 72px;gap:12px}.dj-drawer-entry-note{grid-column:2 / -1;grid-row:2;padding:0 0 6px}.dj-drawer-entry-state{grid-column:3;grid-row:1;text-align:right}.dj-drawer-entry-time{display:none}.dj-drawer-empty{grid-template-columns:1fr;gap:8px}}
@media(prefers-reduced-motion:reduce){.dj-volume-drawer>summary,.dj-drawer-status:after{transition:none}}