/* The live layer mix: a small working desk after the hero, built with Layrs' own lane conventions.
   Its root carries data-ui, so the product's 1px marks and small labels live inside it; the page around it keeps the house rules. */
/* The mixer is an even section (near-black ground), so its desk and lanes each step up one surface. */
.layer{background:var(--surface)}
.layer-desk[data-ui]{--lane-head:340px;--meter-col:22px;--clip-height:78px;--wave-on:#66772b;--wave-off:#3a3a3a;--wave-played:var(--accent);background:var(--surface-raised);padding:var(--pad);min-width:0}
.layer-desk[data-ui] :focus-visible{outline-offset:2px}
.layer-desk[data-ui] button:disabled{cursor:default}
.layer-desk[data-ui][data-unsupported=true] .layer-lanes,.layer-desk[data-ui][data-unsupported=true] .layer-ruler,.layer-desk[data-ui][data-unsupported=true] .layer-seek{opacity:.45}

/* Transport row: play, the master meter, the clock, the status line and the save controls. */
[data-ui] .layer-head{display:flex;align-items:center;flex-wrap:wrap;gap:22px 30px;margin-bottom:28px}
[data-ui] .layer-transport{display:flex;align-items:center;gap:18px}
[data-ui] .layer-transport .play-toggle{transition:transform 180ms var(--ease),background-color 180ms ease,opacity 180ms ease}
.layer-desk[data-ui][data-loading=true] .play-toggle{opacity:.6;cursor:progress}
[data-ui] .layer-master{width:8px;height:66px;background:#2e2e2e;overflow:clip;position:relative;flex-shrink:0}
[data-ui] .layer-master i{position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom}
[data-ui] .layer-clock{font-variant-numeric:tabular-nums;line-height:1.15;min-width:7.4ch}
[data-ui] .layer-clock strong{display:block;font-size:34px;font-weight:500;letter-spacing:-.035em}
[data-ui] .layer-clock span{display:block;font-size:13px;color:var(--muted);margin-top:4px;white-space:nowrap}
[data-ui] .layer-status{flex:1 1 240px;min-width:0;min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;font-size:15px;line-height:1.4}
[data-ui] .layer-retry{min-height:44px;padding:8px 14px;border:0;background:#2e2e2e;font-size:15px;font-weight:500;transition:background-color 180ms ease,transform 140ms var(--ease)}
[data-ui] .layer-retry:hover{background:var(--ink);color:var(--bg)}
[data-ui] .layer-retry:active{transform:scale(.97)}
[data-ui] .layer-save{display:grid;justify-items:start;gap:8px;margin-left:auto}
[data-ui] .layer-save .button{min-height:52px;padding:12px 22px;font-size:16px}
[data-ui] .layer-save .button:disabled{opacity:.45}
[data-ui] .layer-save-hint{font-size:13px;color:var(--muted);max-width:36ch;line-height:1.45}
[data-ui] .layer-save-hint:empty{display:none}
[data-ui] #layer-download{font-size:15px;min-height:40px;overflow-wrap:anywhere}
[data-ui] #layer-download[data-stale=true]{color:var(--muted)}

/* The timeline: one 10-second ruler, three lanes, one position slider, all on the same column grid. */
[data-ui] .layer-ruler{display:grid;grid-template-columns:var(--lane-head) minmax(0,1fr) var(--meter-col);margin-bottom:6px}
[data-ui] .layer-ruler-track{grid-column:2;position:relative;height:30px;overflow:clip;font-size:12px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
[data-ui] .layer-ruler-track span{position:absolute;top:2px;transform:translateX(-50%);padding:0 4px}
[data-ui] .layer-ruler-track .at-0{left:0;transform:none;padding-left:0}
[data-ui] .layer-ruler-track .at-5{left:50%}
[data-ui] .layer-ruler-track .at-10{left:100%;transform:translateX(-100%);padding-right:0}
[data-ui] .layer-tick{position:absolute;bottom:0;width:1px;height:6px;background:#3a3a3a}
[data-ui] .layer-tick.is-major{height:11px;background:var(--muted)}
[data-ui] .layer-ruler-track .lane-playhead::before{top:auto;height:14px}
[data-ui] .layer-ruler-track .lane-playhead::after{content:'';position:absolute;bottom:12px;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink)}

[data-ui] .layer-lanes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
[data-ui] .lane{display:grid;grid-template-columns:var(--lane-head) minmax(0,1fr) var(--meter-col);background:var(--surface-active);min-height:var(--clip-height);transition:background-color 180ms ease}
[data-ui] .lane-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:2px 6px;padding:8px 14px 8px 10px;min-width:0}
[data-ui] .lane-on{display:flex;align-items:center;gap:12px;min-height:48px;padding:2px 8px 2px 6px;border:0;background:transparent;text-align:left;min-width:0;transition:background-color 180ms ease,transform 140ms var(--ease)}
[data-ui] .lane-on::before{content:'';width:14px;height:14px;flex-shrink:0;background:#2e2e2e;transition:background-color 180ms ease}
[data-ui] .lane-on[aria-pressed=true]::before{background:var(--accent)}
[data-ui] .lane-text{display:block;min-width:0}
[data-ui] .lane-text strong{display:block;font-size:19px;font-weight:500;letter-spacing:-.015em;line-height:1.15;transition:color 180ms ease}
[data-ui] .lane-text span{display:block;font-size:13px;color:var(--muted);line-height:1.3}
[data-ui] .lane-on:hover{background:#2a2a2a}
[data-ui] .lane-mute,[data-ui] .lane-solo{min-width:54px;min-height:44px;padding:0 10px;border:0;background:#2e2e2e;color:var(--muted);font-size:13px;font-weight:500;transition:background-color 180ms ease,color 180ms ease,transform 140ms var(--ease)}
[data-ui] .lane-mute:hover,[data-ui] .lane-solo:hover{color:var(--ink)}
[data-ui] .lane-on:active,[data-ui] .lane-mute:active,[data-ui] .lane-solo:active{transform:scale(.97)}
[data-ui] .lane-mute[aria-pressed=true]{background:var(--ink);color:var(--bg)}
[data-ui] .lane-solo[aria-pressed=true]{background:var(--accent);color:var(--bg)}
[data-ui] .lane-level{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding-left:6px;min-width:0}
[data-ui] .lane-level input{flex:1;min-width:0;min-height:44px;margin:0}
[data-ui] .lane-value{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);min-width:4ch;text-align:right}
[data-ui] .lane[data-on=false] .lane-text strong{color:var(--muted)}
[data-ui] .lane-clip{position:relative;background:var(--bg);overflow:clip;cursor:pointer;min-height:var(--clip-height)}
[data-ui] .lane-wave{position:absolute;inset:0;width:100%;height:100%;display:block}
[data-ui] .lane-wave-played{clip-path:inset(0 100% 0 0)}
[data-ui] .lane-playhead{position:absolute;inset:0;pointer-events:none}
.layer-desk[data-ui][data-playing=true] .lane-playhead{will-change:transform}
[data-ui] .lane-playhead::before{content:'';position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--ink)}
[data-ui] .lane-meter{position:relative;margin:8px;background:#2e2e2e;overflow:clip}
[data-ui] .lane-meter i{position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom}
[data-ui] .lane[data-audible=false] .lane-meter{opacity:.4}

[data-ui] .layer-seek{display:grid;grid-template-columns:var(--lane-head) minmax(0,1fr) var(--meter-col);align-items:center;margin-top:8px}
[data-ui] .layer-seek label{font-size:13px;color:var(--muted);padding-left:16px}
[data-ui] .layer-seek input{grid-column:2;min-height:44px;margin:0}
[data-ui] .layer-note{font-size:var(--small);color:var(--muted);margin-top:var(--note);max-width:var(--span-7);line-height:1.55}
[data-ui] .layer-note a{text-decoration:underline;text-underline-offset:3px}
[data-ui] .layer-note a:hover{color:var(--accent)}

@media(max-width:1100px){
  .layer-desk[data-ui]{--lane-head:300px;padding:24px}
  [data-ui] .layer-head{gap:18px 24px}
}
@media(max-width:800px){
  .layer-desk[data-ui]{--clip-height:66px}
  [data-ui] .lane,[data-ui] .layer-ruler,[data-ui] .layer-seek{grid-template-columns:minmax(0,1fr) var(--meter-col)}
  [data-ui] .lane-head{grid-column:1/-1;padding:8px 10px 6px 6px}
  [data-ui] .layer-ruler-track,[data-ui] .layer-seek input{grid-column:1}
  [data-ui] .layer-seek label{grid-column:1/-1;padding:0 0 4px}
  [data-ui] .layer-save{margin-left:0;width:100%}
  [data-ui] .layer-status{flex-basis:100%}
}
@media(max-width:520px){
  .layer-desk[data-ui]{padding:20px 16px 18px;--clip-height:60px}
  [data-ui] .layer-transport{gap:14px}
  [data-ui] .layer-clock strong{font-size:28px}
  [data-ui] .layer-head{gap:16px;margin-bottom:22px}
  [data-ui] .layer-save .button{width:100%}
  [data-ui] .layer-save-hint{max-width:none}
  [data-ui] .lane-text strong{font-size:18px}
  [data-ui] .lane-mute,[data-ui] .lane-solo{min-width:50px;padding:0 8px}
  [data-ui] .layer-note{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){
  [data-ui] .lane-on:active,[data-ui] .lane-mute:active,[data-ui] .lane-solo:active,[data-ui] .layer-retry:active{transform:none}
}