/* layout1930 (Joao 7:21-7:24 PM CT Oct 20, review draft): light refinements only, same design/flow. UI layer, no audio/licensing/checkout logic. */
/* 1) bigger, sticky video */
@media (min-width:1025px){
  body.os:not(.lib-wait) .app{grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr)}
  body.os:not(.lib-wait) .stage-col .stage.has-video{position:sticky;top:0;z-index:30;box-shadow:0 10px 18px -8px #000}
  body.os:not(.lib-wait) .stage-col .transport{position:sticky;top:var(--gl-stage-h,0px);z-index:29;background:#000}
}
@media (max-width:1024px){
  /* phone/tablet: solid compact step bar (nothing shows through), video pinned right under it */
  .flow-nav{background:#000!important;padding-top:6px;padding-bottom:6px;margin-top:0;margin-bottom:8px}
  body.gl-vid .flow-nav{position:relative!important}
  body.gl-vid .stage.has-video{position:sticky;top:0;z-index:38;box-shadow:0 10px 18px -8px #000}
  body.gl-vid .intro{display:none}
}
@media (max-width:560px){
  .flow-steps{display:none} .flow-bar{margin-bottom:4px}
  .gl-steplbl{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi,#d4af6a);padding:2px 0}
}
.gl-steplbl{display:none}
/* 2) slimmer track rows: title + mini waveform on one line */
#tracks .track{grid-template-columns:30px minmax(0,1fr) minmax(60px,26%) auto;gap:2px 10px;padding:7px 8px;min-height:0}
#tracks .track .t-wave{grid-column:3;grid-row:1 / span 2;height:16px}
#tracks .track .t-right{grid-column:4;grid-row:1 / span 2}
#tracks .track .t-title{font-size:14px;line-height:1.25}
#tracks .track .t-meta{font-size:11px}
#tracks .track .t-play{width:28px;height:28px}
@media (max-width:560px){ #tracks .track{grid-template-columns:34px minmax(0,1fr) 54px auto;padding:7px 4px;min-height:52px} }
/* 3) one sticky bottom action bar: selected track, play/pause, Mix, gold Finish & Export */
.gl-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:12px;padding:10px clamp(12px,3vw,32px) calc(10px + env(safe-area-inset-bottom));
  background:#050505;border-top:1px solid var(--line,#222);box-shadow:0 -8px 20px -10px #000}
.gl-bar[hidden]{display:none}
.gl-play{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--gold,#b8924a);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.gl-play .i-pause{display:none} .gl-bar.playing .gl-play .i-play{display:none} .gl-bar.playing .gl-play .i-pause{display:block}
.gl-info{flex:1 1 auto;min-width:0}
.gl-t{font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-m{font-size:11px;color:var(--dim,#888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-mix{flex:0 0 auto;min-height:42px;padding:0 16px;border:1px solid var(--line-hi,#444);background:transparent;color:#fff;letter-spacing:.14em;text-transform:uppercase;font-size:11px;cursor:pointer}
.gl-mix[aria-pressed="true"]{border-color:var(--gold,#b8924a);color:var(--gold-hi,#d4af6a)}
.gl-bar .gs-finish{flex:0 0 auto;margin:0;width:auto;min-height:42px;padding:0 18px;white-space:nowrap}
body.gl-bar-on .mini-player{display:none!important}
body.gl-bar-on .os-lic{bottom:calc(76px + env(safe-area-inset-bottom))}
body.gl-bar-on .foot{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
body.gl-bar-on .stage-col{padding-bottom:90px!important}
body.gl-bar-on .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
@media (max-width:560px){ .gl-bar{gap:8px;padding-left:10px;padding-right:10px} .gl-mix{padding:0 10px} .gl-bar .gs-finish{padding:0 12px;font-size:11px} .gl-m{display:none} }
body.creator-open .gl-bar,body.lib-wait .gl-bar{display:none!important}
.gl-bar .gl-exp{background:var(--gold);border:1px solid var(--gold);color:#0a0a0a;font:700 12px/1.2 Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;animation:gsFinPulse 2s ease-in-out infinite;display:flex;align-items:center}
.gl-bar .gl-exp:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
@media (prefers-reduced-motion:reduce){.gl-bar .gl-exp{animation:none}}
@media (max-width:560px){.gl-bar .gl-lx{display:none}.gl-info{flex:1 1 0}}

/* v92 (Oct 20 live-site checks; DRAFT): minimal fixes, same look and flow. */
/* 1) Auto-match cards: the grid track grew to the cards' nowrap meta text (375-460px in a 294-324px column on phones),
      widening the page and pushing the bottom bar's play / Export off-screen. Keep the column at the container width. */
.dnd-cards{grid-template-columns:minmax(0,1fr)}
.dnd-card{min-width:0;max-width:100%}
/* 2) Creator top bar on small phones: "New clip" stays on one line */
@media (max-width:420px){.cr-newclip{white-space:nowrap;letter-spacing:.06em;padding:10px 2px;min-width:0}.cr-filt{padding:7px 8px;letter-spacing:.08em}.cr-topr{gap:4px}}
/* 3) Creator on short phone screens (e.g. 375x667): the 9:16 stage is ~110px wide, so the track info and Prev/Next buttons
      overlapped each other and the $ button. Hide the two hint lines, show Prev/Next as arrow-only 40px buttons (aria-labels unchanged). */
@media (max-height:700px) and (max-width:820px){
  .creator .cr-tip,.creator .cr-hint{display:none!important}
  .creator .cr-info{padding:24px 10px 10px 10px}   /* arrows sit left, $ sits bottom-right: the title can use the full width */
  .creator .cr-tnav{gap:6px;margin-top:6px;flex-direction:column;align-items:flex-start}
  .creator .cr-tbtn{min-width:40px;min-height:40px;width:40px;padding:0;gap:0;font-size:0;letter-spacing:0}
  .creator .cr-tbtn span{font-size:22px;margin-top:-2px}
}
/* 4) Mix / step jumps land BELOW the pinned video (desktop: video + transport; phone: video), not under it: Back, faders and stems stay visible */
@media (min-width:1025px){ body.os:not(.lib-wait) .stage-col [id^="flowStep"], body.os:not(.lib-wait) .stage-col #mixer{scroll-margin-top:calc(var(--gl-stage-h,0px) + var(--gl-tr-h,64px) + 8px)} }
@media (max-width:1024px){ body.gl-vid [id^="flowStep"], body.gl-vid #mixer{scroll-margin-top:calc(var(--gl-stage-h,0px) + 8px)} }

/* S126: bolder MIX with icon + gold MULTI-TRACK, same size */
.gl-bar .gl-mix{display:inline-flex;align-items:center;gap:6px;min-height:42px;font:700 12px/1 Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid #fff;color:#fff;border-radius:2px}
.gl-bar .gl-mt{border-color:var(--gold,#b8924a);color:var(--gold-hi,#d4af6a)}
.gl-bar .gl-mt:hover,.gl-bar .gl-mix:hover{background:rgba(212,175,106,.12)}
@media (max-width:560px){.gl-bar .gl-mix{padding:0 8px;font-size:10px;letter-spacing:.06em;gap:4px}.gl-bar .gl-mix svg{width:14px;height:14px}.gl-bar .gl-info{display:none}}

/* S126 footer copyright: small, muted, centered; .foot already pads past the fixed bar when body.gl-bar-on */
.foot .foot-copy{align-self:stretch;text-align:center;font-size:11px;color:var(--muted,#8a8a8a);opacity:.75;margin-top:10px;letter-spacing:.02em}
body.gl-bar-on .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
/* S126 bar: MIX and MULTI-TRACK same size; on phones the bar takes 2 rows (play + project tools / MIX · MULTI-TRACK · EXPORT) so nothing runs off-screen */
.gl-bar .gl-mix{min-width:150px;justify-content:center}
@media (max-width:560px){
  body .gl-bar{flex-wrap:wrap;row-gap:8px}
  body .gl-bar .gl-mix{flex:1 1 0;min-width:0;justify-content:center}
  body .gl-bar .gs-tb{flex:1 1 calc(100% - 60px);justify-content:flex-end}
  body.gl-bar-on .foot{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  body.gl-bar-on .stage-col{padding-bottom:150px!important}
  body.gl-bar-on .toast{bottom:calc(132px + env(safe-area-inset-bottom))}
}

/* S132 (Joao 2:15 PM CT): while MIX is open the video shrinks to a compact player pinned at the top with the transport right under it; lanes scroll below */
body.gl-mixopen .stage.has-video{position:sticky!important;top:0;z-index:38;aspect-ratio:auto!important;height:32vh;max-height:360px;width:100%}
@media (min-width:1025px){ body.gl-mixopen .stage.has-video{height:min(360px,42vh)} }
body.gl-mixopen .stage-col .transport{position:sticky!important;top:var(--gl-stage-h,0px);z-index:37;background:#000}
body.gl-mixopen #gsMt,body.gl-mixopen #mixer,body.gl-mixopen [id^="flowStep"]{scroll-margin-top:calc(var(--gl-stage-h,0px) + var(--gl-tr-h,56px) + 8px)!important}
/* S132 (Joao 2:16 PM CT): one button system for the bottom bar. Primary (MIX, Export) 48px and bold; secondary (Undo, Redo, Save...) 44px outlined, all the same size */
body .gl-bar .gl-play{width:48px;height:48px}
body .gl-bar .gl-mix,body .gl-bar .gl-exp{min-height:48px;padding:0 20px;border-radius:6px;font:700 13px/1 Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;justify-content:center;box-sizing:border-box}
body .gl-bar .gl-mix{border:1.5px solid #fff;background:transparent;color:#fff;transition:background .15s,color .15s,border-color .15s}
body .gl-bar .gl-mix[aria-pressed="true"],body.gl-mixopen .gl-bar .gl-mix{background:var(--gold,#c9a24a);border-color:var(--gold,#c9a24a);color:#0a0a0a}
body .gl-bar .gl-mix[aria-pressed="true"]:hover{background:var(--gold-hi,#d4af6a)}
body .gl-bar .gs-tb{display:flex;align-items:center;gap:6px}
body .gl-bar .gs-tb button{min-height:44px;min-width:44px;height:44px;padding:0 10px;box-sizing:border-box;border:1px solid #555;background:transparent;color:#ddd;border-radius:6px;font:600 11px/1 Helvetica,Arial,sans-serif;letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
body .gl-bar .gs-tb button:hover:not(:disabled){border-color:var(--gold,#c9a24a);color:#fff}
body .gl-bar .gs-tb button:disabled{opacity:.4}
@media (max-width:560px){
  body .gl-bar .gl-mix,body .gl-bar .gl-exp{flex:1 1 0;min-width:0;padding:0 10px;font-size:12px;letter-spacing:.08em}
  body .gl-bar .gs-tb button{flex:1 1 0;padding:0 4px;font-size:10px}
}
@media (min-width:561px){ body .gl-bar .gs-tb button{width:112px;padding:0 6px;overflow:hidden;text-overflow:ellipsis} }

/* S133 (Joao 2:26 PM CT): Save project reads gold (site gold fill, dark text) at its secondary size; MIX active stays distinct: bigger, plus a dark inset ring */
body .gl-bar .gs-tb #gsVersSave{background:var(--gold,#c9a24a);border-color:var(--gold,#c9a24a);color:#0a0a0a;font-weight:700}
body .gl-bar .gs-tb #gsVersSave:hover:not(:disabled){background:var(--gold-hi,#d4af6a);border-color:var(--gold-hi,#d4af6a);color:#0a0a0a}
body .gl-bar .gl-mix[aria-pressed="true"],body.gl-mixopen .gl-bar .gl-mix{box-shadow:inset 0 0 0 2px #0a0a0a,0 0 0 1px var(--gold,#c9a24a)}