/* GLEE Studio Audio: transport, song overview and step grid.
   Builds on studio.css + journey.css tokens so it reads as the same family. */
body[data-medium=audio] .ws-workspace{height:calc(100dvh - 272px);min-height:560px}
body[data-medium=audio] .ws-center{grid-template-rows:60px minmax(0,1fr) 52px}

/* ---------- toolbar ---------- */
.au-tool-label{font:10px var(--ws-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ws-muted);margin:0 var(--space-4) 0 var(--space-12)}
#draw-length{min-height:44px;width:86px;font-size:var(--text-12)}
.ws-view-tools>label[for=tempo]{font:10px var(--ws-mono);letter-spacing:.12em;text-transform:uppercase}
.ws-view-tools #tempo{width:64px;min-height:44px;text-align:center;font:12px var(--ws-mono)}
.au-unit{font:10px var(--ws-mono);color:var(--ws-muted);margin-right:var(--space-8)}
.ws-view-tools .au-loop{display:flex;align-items:center;gap:var(--space-4);min-height:44px;padding:0 var(--space-4);cursor:pointer;font-size:var(--text-12);color:var(--ws-text)}
#mark-mode[aria-pressed=true]{color:var(--ws-accent);border-color:var(--ws-accent);background:color-mix(in srgb,var(--ws-accent) 16%,var(--ws-raised))}

/* ---------- stage ---------- */
.au-stage{display:flex;flex-direction:column;background:var(--ws-ground)}
.au-transport{flex:none;display:flex;align-items:center;gap:var(--space-12);min-height:60px;padding:var(--space-8) var(--space-12);border-bottom:1px solid var(--ws-line);background:linear-gradient(180deg,var(--c-surface-2),var(--c-surface));min-width:0}
.au-play{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-width:104px;min-height:44px;padding:0 var(--space-16)!important;border-radius:var(--ws-radius-pill)!important;border:1px solid var(--ws-gold)!important;background:var(--ws-gold)!important;color:#1e1408!important;font-weight:700;font-size:var(--text-14)}
.au-play:hover{background:var(--ws-accent)!important;border-color:var(--ws-accent)!important}
.au-play[aria-pressed=true]{background:transparent!important;color:var(--ws-accent)!important;border-color:var(--ws-accent)!important}
.au-play-icon{font-size:var(--text-11);line-height:1}
.au-position{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px var(--ws-mono);color:var(--ws-muted)}
body[data-playing=true] .au-position{color:var(--ws-text)}
.au-mark-chip{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;min-height:36px!important;padding:0 var(--space-12)!important;border:1px dashed var(--ws-gold)!important;border-radius:var(--ws-radius-pill)!important;background:color-mix(in srgb,var(--ws-gold) 12%,transparent)!important;color:var(--ws-accent);font-size:var(--text-12);white-space:nowrap}
.au-mark-text{overflow:hidden;text-overflow:ellipsis}
.au-scope{margin-left:auto;flex:0 1 200px;min-width:64px;height:40px;border:1px solid var(--ws-line);border-radius:var(--ws-radius-s);background:var(--c-ink)}

.au-overview{flex:none;max-height:min(42%,182px);overflow-y:auto;border-bottom:1px solid var(--ws-line);scrollbar-width:thin;scrollbar-color:var(--c-surface-3) transparent}
.au-ov-row{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:36px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.05)}
.au-ov-row:last-child{border-bottom:0}
.au-ov-name{display:flex;align-items:center;gap:var(--space-8);height:100%;min-height:0!important;padding:0 var(--space-8) 0 var(--space-12)!important;border:0!important;border-right:1px solid var(--ws-line)!important;border-radius:0!important;background:transparent!important;text-align:left;font-size:var(--text-12);color:var(--ws-text)}
.au-ov-name i{flex:none;width:9px;height:9px;border-radius:50%}
.au-ov-name span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-ov-name small{font:10px var(--ws-mono);color:var(--ws-muted)}
.au-ov-name:hover{background:var(--c-surface-2)!important}
.au-ov-name[aria-pressed=true]{background:var(--c-surface-2)!important;box-shadow:inset 3px 0 0 var(--ws-accent);color:var(--ws-accent)}
.au-ov-row[data-muted] .au-ov-name span{color:var(--ws-muted)}
.au-ov-strip{display:block;width:100%;height:100%;min-height:0;cursor:pointer;touch-action:pan-y}
body[data-marking=true] .au-ov-strip{touch-action:none;cursor:col-resize}

.au-roll{position:relative;flex:1;min-height:0;display:flex;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--c-surface-3) transparent}
.au-keys{flex:none;position:sticky;left:0;align-self:flex-start;background:var(--c-surface);border-right:1px solid var(--ws-line)}
.au-grid-scroll{flex:1;min-width:0;align-self:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--c-surface-3) transparent}
.au-grid{display:block;cursor:crosshair;touch-action:none}
.au-grid:focus{outline:none}.au-grid:focus-visible{outline:2px solid var(--ws-accent);outline-offset:-2px}
body[data-marking=true] .au-grid{cursor:col-resize}
body[data-preview] .au-grid{cursor:not-allowed}
@media(pointer:coarse){.au-grid{touch-action:pan-x pan-y}body[data-marking=true] .au-grid{touch-action:none}}
.au-help{flex:none;display:flex;align-items:center;min-height:34px;margin:0;padding:var(--space-4) 160px var(--space-4) var(--space-12);border-top:1px solid var(--ws-line);font:10px/1.4 var(--ws-mono);color:var(--ws-muted)}

.au-empty{position:absolute;inset:60px 0 0;z-index:2;display:grid;place-content:center;justify-items:center;gap:var(--space-8);padding:var(--space-24);text-align:center;background:radial-gradient(ellipse at 50% 40%,var(--c-surface-2),var(--ws-ground) 70%)}
.au-empty h2{margin:0;font:400 28px/1.2 Georgia,serif;color:var(--c-paper)}
.au-empty p{margin:0;color:var(--ws-muted);font-size:var(--text-14)}
.au-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-8);margin-top:var(--space-12)}
.au-empty-actions button{min-height:44px;padding:0 var(--space-16);font-size:var(--text-13)}

/* Ask Studio's preview badge sits bottom-left, clear of the transport. */
body[data-preview] .au-stage::before{top:auto;bottom:6px;left:12px;z-index:5}
body[data-preview] .au-help{color:transparent}

/* ---------- left panel ---------- */
.au-track-row>span.au-dot{flex:none;width:10px!important;height:10px;border-radius:50%;margin:0 var(--space-4)}
.au-list-empty{color:var(--ws-muted);padding:var(--space-8);margin:0}
.ws-library-grid button>span{text-align:center}

/* ---------- right panel ---------- */
#track-name{margin:0 var(--space-16) var(--space-16);width:calc(100% - 32px);font-size:var(--text-12)}
.au-toggles{display:flex;gap:var(--space-24);margin-bottom:var(--space-12)}
.au-toggles .ws-check{margin:0!important;color:var(--ws-text)}
.au-field[hidden]{display:none}
.ws-right select{width:100%;min-height:44px;margin-bottom:var(--space-12);font-size:var(--text-12)}
.au-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.au-note-label{margin:0 0 var(--space-12);color:var(--ws-muted);font-size:var(--text-12);line-height:1.5}
#note-controls[hidden]{display:none}
.ws-right #note-delete{display:block;width:100%;margin:0 0 var(--space-12);min-height:44px}
.au-note-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.au-note-actions button{min-height:44px;font-size:var(--text-12)}
.ws-right .ws-color-row input[type=color]{min-height:44px;width:56px}

/* ---------- narrow screens ---------- */
@media(max-width:1150px){.au-tool-label{display:none}.au-ov-row{grid-template-columns:124px minmax(0,1fr)}}
@media(max-width:850px){
 body[data-medium=audio] .ws-workspace{height:740px;min-height:740px}
 body[data-medium=audio] .ws-center{grid-template-rows:auto minmax(0,1fr) auto}
 body[data-medium=audio] .ws-left,body[data-medium=audio] .ws-right{max-height:740px}
 body[data-medium=audio] .ws-toolbar{flex-wrap:wrap;gap:var(--space-4) var(--space-8);padding:var(--space-8)}
 body[data-medium=audio] .ws-status{min-height:64px}
 .au-transport{gap:var(--space-8);padding:var(--space-8) var(--space-12)}
 .au-ov-row{grid-template-columns:112px minmax(0,1fr);height:44px}
 .au-ov-name small{display:none}
 .au-overview{max-height:min(40%,180px)}
 .au-help{padding-right:var(--space-12)}
 body[data-medium=audio] .ws-tools #mark-mode>span{display:inline}
 .au-empty{inset:60px 0 0}
}
@media(max-width:440px){
 .au-play{min-width:92px}
 .au-transport:has(.au-mark-chip:not([hidden])) .au-position{display:none}
 .au-scope{flex-basis:84px}
 .ws-view-tools #tempo{width:56px}
 .au-ov-row{grid-template-columns:100px minmax(0,1fr)}
 .au-help{font-size:var(--text-10)}
}