body{padding:14px 16px 48px}
.app{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.top h1{margin:0;font-size:19px}
.grow{flex:1 1 20px}
.status{font-size:13px;color:var(--muted)}
.who{font-size:13px;color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.main{min-width:0;display:flex;flex-direction:column;gap:18px}
.stage{min-width:0}
.sheet-wrap{position:relative;margin:0 auto;box-shadow:0 1px 2px rgba(10,12,40,.18),0 12px 32px rgba(10,12,40,.16)}
.scaler{transform-origin:0 0;width:794px}
.blank{width:794px;height:520px;display:grid;place-items:center;background:var(--surface);color:var(--muted);font-size:20px;text-align:center;padding:40px}

/* song browser (right-hand side) */
.side{position:sticky;top:12px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 24px);overflow:auto}
.browser,.takes{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.browser{flex:0 1 auto;min-height:0}
.takes h2{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.songs{max-height:34vh}
.browser h2,.comments h2{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.browser input[type=search]{width:100%;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);padding:8px 10px}
.songs{list-style:none;margin:0;padding:0;overflow:auto;display:flex;flex-direction:column;gap:4px}
.songs button{width:100%;text-align:left;background:transparent;border:1.5px solid transparent;border-radius:10px;padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.songs button:hover{background:var(--soft)}
.songs button[aria-current="true"]{background:var(--soft);border-color:var(--accent)}
.songs .nm{font-weight:700}
.songs .mt{font-size:12.5px;color:var(--muted)}
.empty{color:var(--muted);font-size:14px;padding:6px 2px}

/* comments */
.comments{width:min(100%,794px);margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cm{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg)}
.cm header{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted)}
.cm header strong{color:var(--fg)}
.cm header .grow{flex:1}
.cm p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.xbtn{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:6px}
.xbtn:hover{color:var(--danger)}
.cform{display:flex;flex-direction:column;gap:8px}
.cform textarea{width:100%;min-height:76px;resize:vertical;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);padding:9px 11px}
.cform .row{display:flex;align-items:center;gap:10px}
.cform .count{font-size:12.5px;color:var(--muted)}
.msg{font-size:13px;color:var(--muted)}
.msg.err{color:var(--danger)}

.songbar{display:none}
.viewbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line,#ccd);border-radius:10px;overflow:hidden}
.seg button{border:0;background:transparent;padding:8px 16px;font:inherit;cursor:pointer;min-height:40px}
.seg button[aria-pressed=true]{background:#2F7BFF;color:#fff}
.vb-text{display:inline-flex;gap:6px}
.vb-text .btn[aria-pressed=true]{background:#2F7BFF;color:#fff}
.stage.reading .sheet-wrap{width:auto!important;height:auto!important;box-shadow:none}
.stage.reading .scaler{width:auto!important;transform:none!important}
.blank{padding:40px;text-align:center;color:var(--muted)}

@media (max-width:980px){
  .layout{display:flex;flex-direction:column;gap:16px}
  .main,.side{display:contents}
  .stage{order:1}.takes{order:2}.comments{order:3}.viewbar{order:0}
  .browser{display:none}
  .songbar{display:flex;gap:8px;align-items:center;margin:0 0 12px;position:sticky;top:0;z-index:5;background:var(--bg,#fff);padding:6px 0}
  .sb-select{flex:1;min-width:0;font-size:16px}
  .sb-step{min-width:48px;font-size:22px;padding:0}
  .who{display:none}
}
/* sections that have a time marker in the loaded take */
.sheet .cell.has-mark{cursor:pointer}
.sheet .cell.has-mark .chip{outline:2px dashed rgba(47,123,255,.6);outline-offset:3px}
.sheet .cell.playing .chip{outline:3px solid #2F7BFF;outline-offset:3px}

.sheet.read .rd-sec.has-mark .rd-head{cursor:pointer}

.subnav{display:flex;gap:4px}
.subnav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:8px 10px;border-radius:8px;min-height:40px;display:inline-flex;align-items:center}
.subnav a:hover{background:var(--soft);color:var(--fg)}
#editBtn{text-decoration:none;display:inline-flex;align-items:center}
#editBtn[aria-disabled=true]{opacity:.5;pointer-events:none}