/* The DAW (Central Production and the Studio in Central Usage): dark, calm, readable from a few feet away.
   Graphite surfaces, warm white text, brass for what's on and selected, red only for recording. */
.cdaw{--d-bg:#0F1114;--d-bg2:#14171B;--d-panel:#1A1D22;--d-panel2:#22262C;--d-panel3:#2B3038;--d-line:#2E333B;--d-line2:#414854;--d-fg:#ECE7DD;--d-mut:#9AA1AB;--d-dim:#6B727C;--d-acc:#E2C27E;--d-acc2:#F0D9A4;--d-accfg:#1A1408;--d-rec:#E5484D;--d-solo:#8DB5DE;--d-mute:#E8A65A;
  position:relative;display:flex;flex-direction:column;min-height:0;flex:1 1 auto;background:var(--d-bg);color:var(--d-fg);font:13px/1.4 Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;user-select:none;-webkit-user-select:none;overflow:hidden}
.cdaw *{box-sizing:border-box}.cdaw [hidden]{display:none!important}
.cdaw button{font:inherit;color:var(--d-fg);background:var(--d-panel2);border:1px solid var(--d-line);border-radius:7px;padding:4px 9px;cursor:pointer;white-space:nowrap;line-height:1.3}
.cdaw button:hover:not(:disabled){background:var(--d-panel3);border-color:var(--d-line2)}.cdaw button:disabled{opacity:.4;cursor:default}
.cdaw button.on{background:#2A2416;border-color:var(--d-acc);color:var(--d-acc2)}
.cdaw button.primary{background:var(--d-acc);border-color:var(--d-acc);color:var(--d-accfg);font-weight:650}
.cdaw button.ghost{background:transparent;border-color:transparent;color:var(--d-mut)}
.cdaw input,.cdaw select{font:inherit;color:var(--d-fg);background:#0B0D10;border:1px solid var(--d-line);border-radius:6px;padding:3px 6px;min-width:0}
.cdaw input:focus,.cdaw select:focus{outline:none;border-color:var(--d-acc)}
.cdaw input[type=range]{accent-color:var(--d-acc);padding:0;background:transparent;border:0}
.cdaw input[type=checkbox]{accent-color:var(--d-acc)}
.cdaw :focus-visible{outline:2px solid var(--d-acc);outline-offset:1px}
.cdaw kbd{margin-left:auto;padding-left:18px;color:var(--d-dim);font:inherit;font-size:11px}
.cd-dim{color:var(--d-dim);font-size:12px}.cd-f{display:inline-flex;align-items:center;gap:5px;color:var(--d-mut);font-size:12px}.cd-check{display:inline-flex;gap:6px;align-items:center;color:var(--d-mut)}
.cd-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.cd-line.end{justify-content:flex-end;margin-top:12px}
.cd-seg{display:inline-flex;border:1px solid var(--d-line);border-radius:7px;overflow:hidden}.cd-seg button{border:0;border-radius:0}.cd-seg button+button{border-left:1px solid var(--d-line)}
.cd-lock{color:#E8A65A;font-size:12px}
.cd-link{background:none!important;border:0!important;color:var(--d-acc2)!important;padding:0!important;text-decoration:underline}

/* toolbar */
.cd-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:7px 10px;background:linear-gradient(180deg,#191C21,#15181C);border-bottom:1px solid #000}
.cd-g{display:inline-flex;align-items:center;gap:5px}
.cd-transport button{min-width:34px;font-size:14px}
.cd-play.on{background:var(--d-acc)!important;color:var(--d-accfg)!important;border-color:var(--d-acc)!important}
.cd-recbtn{color:var(--d-rec)}.cd-recbtn.on{background:var(--d-rec)!important;color:#fff!important;border-color:var(--d-rec)!important;animation:cdBlink 1s steps(2) infinite}
@keyframes cdBlink{50%{opacity:.6}}
.cd-lcd{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:112px;padding:2px 10px;background:#090A0C;border:1px solid var(--d-line);border-radius:7px;font-variant-numeric:tabular-nums;line-height:1.1}
.cd-pos{font:700 17px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--d-acc2)}.cd-time{font:11px ui-monospace,Menlo,monospace;color:var(--d-mut)}
.cd-bpm{width:66px}
.cd-views{margin-left:auto}
.cd-prod{background:#2A2416!important;border-color:#5A4A26!important;color:var(--d-acc2)!important}
.cd-status{flex:1 1 220px;display:flex;flex-wrap:wrap;gap:4px 14px;min-height:15px;font-size:12px;order:9}.cd-lat{color:var(--d-dim)}.cd-msg{color:var(--d-acc2)}.cd-msg.bad{color:#EF8A6B}

/* main: browser + arrange */
.cd-main{flex:1 1 auto;display:flex;min-height:200px}
.cd-browser{width:250px;flex:0 0 250px;display:flex;flex-direction:column;border-right:1px solid var(--d-line);background:var(--d-bg2);min-height:0}
.cd-btabs{display:flex;padding:6px;gap:3px}.cd-btabs button{flex:1}
.cd-bq{margin:0 6px 6px}
.cd-blist{flex:1 1 auto;overflow:auto;padding:0 6px 8px;display:flex;flex-direction:column;gap:2px}
.cd-bcat{margin-bottom:6px}
.cd-bitem{display:grid;grid-template-columns:26px 1fr;gap:6px;align-items:center;padding:4px 6px;border-radius:7px;cursor:pointer}
.cd-bitem:hover{background:var(--d-panel2)}.cd-bitem.locked{opacity:.55}
.cd-bitem span{display:flex;flex-direction:column;min-width:0}.cd-bitem b{font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cd-bitem i{font-style:normal;color:var(--d-dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-bplay{padding:2px 0!important;width:26px;font-size:11px!important}
.cd-bgroup{margin:8px 4px 2px;color:var(--d-mut);font-size:11px;font-weight:650;letter-spacing:.03em}
.cd-bwide{width:100%;margin:2px 0 6px}
.cd-arrange{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.cd-lanes-wrap{flex:1 1 auto;overflow:auto;position:relative;background:var(--d-bg)}
.cd-content{position:relative;min-height:100%}
.cd-grid{position:absolute;z-index:0;pointer-events:none}
.cd-rulerrow{position:sticky;top:0;z-index:6;display:flex;background:#14171B;border-bottom:1px solid #000}
.cd-corner{position:sticky;left:0;z-index:7;width:220px;flex:0 0 220px;display:flex;align-items:center;justify-content:center;background:#14171B;border-right:1px solid var(--d-line)}
.cd-compact .cd-corner,.cd-compact .cd-head{width:170px;flex-basis:170px}
.cd-ruler{position:sticky;left:220px;display:block;cursor:pointer}
.cd-compact .cd-ruler{left:170px}
.cd-rows{position:relative;z-index:1}
.cd-row{display:flex;border-bottom:1px solid #0A0B0D}
.cd-head{position:sticky;left:0;z-index:3;width:220px;flex:0 0 220px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:5px 8px 5px 12px;background:var(--d-panel);border-right:1px solid var(--d-line);overflow:hidden}
.cd-row.sel>.cd-head{background:#23262C}
.cd-tc{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--tc)}
.cd-hl1,.cd-hl2{display:flex;align-items:center;gap:4px}
.cd-ticon{width:16px;text-align:center;color:var(--d-mut);font-size:12px}
.cd-tname{flex:1;font-weight:620;background:transparent!important;border-color:transparent!important;padding:2px 4px!important}.cd-tname:hover{border-color:var(--d-line)!important}
.cd-tmenu{padding:1px 6px!important}
.cd-hl2 button{padding:1px 0!important;width:22px;font-size:11px!important;font-weight:700}
.cd-m.on{background:var(--d-mute)!important;color:#1A1408!important;border-color:var(--d-mute)!important}.cd-s.on{background:var(--d-solo)!important;color:#071321!important;border-color:var(--d-solo)!important}.cd-r.on{background:var(--d-rec)!important;color:#fff!important;border-color:var(--d-rec)!important}
.cd-r{color:var(--d-rec)}.cd-i.auto{color:var(--d-acc)}.cd-i.on{background:#2A3A24!important;border-color:#5E8A4C!important;color:#BFE3A8!important}.cd-a.on{color:var(--d-acc2);border-color:var(--d-acc)}
.cd-vol{width:58px}.cd-hmeter{width:30px;height:6px;border-radius:2px;flex:0 0 30px}
.cd-row:not(.cd-autorow) .cd-head{min-height:40px}
.cd-row.bus .cd-head{background:#181B1F}
.cd-lane{position:relative;flex:1 1 auto;min-width:0}
.cd-autorow{background:#0C0D10}.cd-autohead{flex-direction:row!important;align-items:center;justify-content:flex-start!important;background:#15181C!important}.cd-autohead select{max-width:130px;font-size:11px}.cd-arange{color:var(--d-dim);font-size:10px}
.cd-autocv{position:absolute;left:0;top:2px;cursor:crosshair}
.cd-endrow{border:0}.cd-endhead{background:transparent!important;border-right:0!important;padding:10px!important}.cd-endlane{height:60px}
.cd-playhead{position:absolute;left:0;top:0;bottom:0;width:1px;will-change:transform;background:var(--d-acc2);z-index:5;pointer-events:none;box-shadow:0 0 6px rgba(240,217,164,.5)}
.cd-playhead.rec{background:var(--d-rec);box-shadow:0 0 6px rgba(229,72,77,.6)}
.cd-band{position:absolute;z-index:8;border:1px solid var(--d-acc);background:rgba(226,194,126,.1);pointer-events:none}
/* clips */
.cd-clip{position:absolute;top:2px;bottom:2px;border-radius:6px;background:color-mix(in srgb,var(--cc) 30%,#16191D);border:1px solid color-mix(in srgb,var(--cc) 65%,#000);overflow:hidden;cursor:grab;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cd-clip.sel{border-color:var(--d-acc2);box-shadow:0 0 0 1px var(--d-acc2),inset 0 1px 0 rgba(255,255,255,.08);background:color-mix(in srgb,var(--cc) 42%,#16191D)}
.cd-clip.muted{opacity:.4;filter:grayscale(.7)}
.cd-cname{position:absolute;left:6px;top:1px;right:22px;font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#F4EFE6;text-shadow:0 1px 1px rgba(0,0,0,.6);pointer-events:none}
.cd-takes{position:absolute;right:4px;top:1px;font-size:10px;color:var(--d-acc2);pointer-events:none}
.cd-ccv{position:absolute;left:0;top:15px;pointer-events:none;background-repeat:no-repeat}
.cd-hl,.cd-hr{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:2}.cd-hl{left:0}.cd-hr{right:0}
.cd-clip:hover .cd-hl,.cd-clip:hover .cd-hr{background:rgba(255,255,255,.08)}
.cd-fi,.cd-fo{position:absolute;top:0;width:10px;height:10px;border-radius:50%;background:var(--d-acc2);border:2px solid #1A1408;z-index:3;cursor:ew-resize;opacity:0;margin-top:-3px}
.cd-clip:hover .cd-fi,.cd-clip:hover .cd-fo,.cd-clip.sel .cd-fi,.cd-clip.sel .cd-fo{opacity:1}

/* dock */
.cd-dock{flex:0 0 auto;display:flex;flex-direction:column;border-top:1px solid #000;background:var(--d-bg2);min-height:0}
.cd-dock-grip{height:5px;cursor:ns-resize;background:#0A0B0D}.cd-dock:not(.open) .cd-dock-grip{display:none}
.cd-dtabs{display:flex;align-items:center;gap:3px;padding:4px 8px;border-bottom:1px solid var(--d-line)}
.cd-dtabs button{background:transparent;border-color:transparent;color:var(--d-mut)}.cd-dtabs button.on{background:var(--d-panel);border-color:var(--d-line2);color:var(--d-acc2)}
.cd-dtitle{margin-left:12px;color:var(--d-mut);font-size:12px}
.cd-dock:not(.open) .cd-dbody{display:none}
.cd-dbody{flex:1 1 auto;min-height:0;overflow:auto;position:relative}
.cd-empty{padding:28px;text-align:center;color:var(--d-mut)}.cd-empty p{margin:4px 0}
.cd-edtools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 10px;border-bottom:1px solid var(--d-line);position:sticky;top:0;background:var(--d-bg2);z-index:2}
.cd-roll{display:flex;flex-direction:column;height:calc(100% - 42px)}
.cd-roll-scroll{flex:1 1 auto;overflow:auto;min-height:80px}
.cd-roll-cv{display:block;cursor:crosshair}
.cd-vel-cv{flex:0 0 64px;width:100%;height:64px;border-top:1px solid var(--d-line);cursor:ns-resize}
.cd-drums{overflow:auto;padding:6px 10px}
.cd-dgrid{display:grid;gap:2px;min-width:600px}
.cd-dname{text-align:left;font-size:11px!important;padding:2px 6px!important;background:var(--d-panel)!important}
.cd-step{display:block;height:22px;border-radius:3px;background:#1B1E23;cursor:pointer}
.cd-step.beat{background:#22262C}.cd-step.bar{box-shadow:inset 2px 0 0 #3A414C}
.cd-step.on{background:color-mix(in srgb,var(--d-acc) calc(40% + var(--v,.8) * 60%),#22262C)}
.cd-audio{padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.cd-aw{width:100%;height:110px;border:1px solid var(--d-line);border-radius:6px}
.cd-acontrols{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.cd-warp,.cd-takelist{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cd-sound{padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.cd-layer{background:var(--d-panel);border:1px solid var(--d-line);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}
.cd-layer select[data-ls=sound]{min-width:260px}
/* mixer */
.cd-mixer{display:flex;height:100%}
.cd-strips{display:flex;gap:4px;padding:6px;overflow-x:auto;align-items:stretch;flex:1 1 auto}
.cd-strip{width:96px;flex:0 0 96px;display:flex;flex-direction:column;gap:4px;padding:5px;border-radius:8px;background:var(--d-panel);border:1px solid var(--d-line);border-top:3px solid var(--tc)}
.cd-strip.sel{border-color:var(--d-line2);background:#20232A}.cd-strip.master{width:110px;flex-basis:110px;background:#1E1C17}.cd-strip.bus{background:#181B1F}
.cd-sname{font-weight:650;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.cd-ins{display:flex;flex-direction:column;gap:2px;min-height:54px}
.cd-insert{display:flex;border:1px solid var(--d-line);border-radius:5px;overflow:hidden;background:#15181C}
.cd-insert button{border:0!important;border-radius:0!important;padding:1px 3px!important;font-size:10px!important;background:transparent!important}
.cd-insert .cd-fxname{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}.cd-insert.open{border-color:var(--d-acc)}
.cd-insert.off .cd-fxname{color:var(--d-dim);text-decoration:line-through}.cd-insert.locked{opacity:.55}
.cd-pwr{color:#9BCB86!important}.cd-insert.off .cd-pwr{color:var(--d-dim)!important}
.cd-addfx,.cd-addsend{font-size:10px!important;padding:1px 4px!important;color:var(--d-mut)!important;background:transparent!important;border-style:dashed!important}
.cd-sends{display:flex;flex-direction:column;gap:2px;min-height:30px}
.cd-send{display:flex;flex-direction:column;font-size:10px;color:var(--d-mut)}.cd-send input{width:100%}
.cd-panrow{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--d-mut);min-height:18px}.cd-panrow input{width:60px}
.cd-faderrow{flex:1 1 auto;display:flex;gap:4px;justify-content:center;min-height:110px;position:relative}
.cd-fader{writing-mode:vertical-lr;direction:rtl;width:22px;height:100%;min-height:100px}
.cd-meter{width:12px;height:100%;border-radius:3px;cursor:pointer}
.cd-scale{display:flex;flex-direction:column;justify-content:space-between;font-size:8px;color:var(--d-dim);padding:2px 0}
.cd-db{text-align:center;font:11px ui-monospace,Menlo,monospace;color:var(--d-mut)}
.cd-sbtns{display:flex;gap:2px;justify-content:center}.cd-sbtns button{width:26px;padding:1px 0!important;font-size:11px!important;font-weight:700}
.cd-out{font-size:10px!important;width:100%}
.cd-sep{width:6px;flex:0 0 6px}
.cd-addbus{align-self:flex-start;writing-mode:vertical-lr;padding:10px 4px!important;font-size:11px!important;color:var(--d-mut)!important;border-style:dashed!important;background:transparent!important}
.cd-fxpanel{width:320px;flex:0 0 320px;border-left:1px solid var(--d-line);padding:8px 10px;overflow:auto;background:var(--d-panel)}
.cd-fxhead{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}.cd-fxhead button{margin-left:auto}
.cd-knobs{display:flex;flex-direction:column;gap:6px}
.cd-knob{display:grid;grid-template-columns:90px 1fr 64px 22px;gap:6px;align-items:center;font-size:12px;color:var(--d-mut)}
.cd-knob output{font-size:11px;color:var(--d-fg);font-variant-numeric:tabular-nums}.cd-knob.off{opacity:.45}
.cd-autobtn{padding:0!important;width:22px;font-size:10px!important}
/* pop-ups */
.cd-pop{position:absolute;z-index:40;min-width:240px;max-width:340px;max-height:70vh;overflow:auto;background:var(--d-panel);border:1px solid var(--d-line2);border-radius:9px;box-shadow:0 16px 40px rgba(0,0,0,.6);padding:4px;display:flex;flex-direction:column}
.cd-pop button{display:flex;align-items:center;text-align:left;background:none;border:0;border-radius:5px;padding:6px 10px;white-space:normal}.cd-pop button:hover:not(:disabled){background:var(--d-panel3)}
.cd-pop hr{border:0;border-top:1px solid var(--d-line);margin:3px 2px}
.cd-modal{position:absolute;inset:0;z-index:45;background:rgba(5,6,8,.55);display:flex;align-items:flex-start;justify-content:center;padding-top:10vh}
.cd-dialog{width:min(440px,92%);background:var(--d-panel);border:1px solid var(--d-line2);border-radius:12px;padding:14px 16px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.cd-dialog h3{margin:0 0 8px;color:var(--d-acc2);font-size:15px}.cd-dialog p{margin:4px 0 8px;color:var(--d-mut)}
.cd-form{display:flex;flex-direction:column;gap:8px}.cd-form label{display:flex;flex-direction:column;gap:4px;color:var(--d-mut)}
@media (prefers-reduced-motion:reduce){.cd-recbtn.on{animation:none}}
@media (max-width:820px){.cd-browser{position:absolute;z-index:20;left:0;top:auto;bottom:0;height:60%;box-shadow:6px 0 20px rgba(0,0,0,.5)}.cd-fxpanel{width:240px;flex-basis:240px}}
/* (a mixer strip keeps its parts; the fader takes what's left, and the mixer scrolls when the dock is short) */
.cd-strip>*{flex-shrink:0}.cd-strip>.cd-faderrow{flex:1 1 auto;min-height:96px}
.cd-strips{overflow:auto}.cd-ins{min-height:0}.cd-sends{min-height:0}

/* Settings → Audio */
.cd-audio { display: flex; flex-direction: column; gap: 8px; min-width: min(560px, 90vw); }
.cd-audio .cd-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cd-audio label.cd-line select { flex: 1; min-width: 0; }
.cd-audio label { display: flex; gap: 6px; align-items: center; }
.cd-audio h4 { margin: 8px 0 0; }
.cd-auinfo { line-height: 1.6; }
.cd-dialog.cd-wide { max-width: 680px; }
.cd-native { display: flex; flex-direction: column; gap: 6px; padding: 6px 2px; flex-basis: 100%; }
.cd-native p { margin: 0; }

/* ---------------------------------------------------------------- (10.2) the family look (docs/DESIGN-SYSTEM.md)
   The DAW's own colours follow the shared tokens, so a church's colours (Settings → Look) reach the Studio too. */
.cdaw { --d-bg: var(--bg2, #0F1114); --d-bg2: color-mix(in srgb, var(--bg, #111317), #000 12%); --d-panel: var(--panel, #1A1D22); --d-panel2: var(--panel2, #22262C); --d-panel3: var(--panel3, #2B3038);
  --d-line: var(--line, #2E333B); --d-line2: var(--line2, #414854); --d-fg: var(--text, #ECE7DD); --d-mut: var(--muted, #9AA1AB); --d-dim: var(--dim, #6B727C);
  --d-acc: var(--accent, #E2C27E); --d-acc2: var(--accentHi, #F0D9A4); --d-accfg: var(--accentText, #1A1408); font-family: var(--font, Archivo, system-ui, sans-serif); }
.cdaw button.on { background: color-mix(in srgb, var(--d-acc), transparent 84%); }
/* the toolbar: groups read as groups, the transport stands out */
.cd-top { gap: 6px 10px; padding: 8px 12px; background: var(--d-panel); border-bottom: 1px solid var(--d-line); }
.cd-top > .cd-g { padding-right: 10px; border-right: 1px solid var(--d-line); }
.cd-top > .cd-g.cd-views { border-right: 0; }
.cd-transport button { min-width: 38px; min-height: 34px; font-size: 15px; }
.cd-lcd { min-width: 124px; padding: 3px 12px; }
.cd-lcd .cd-pos { font-size: 17px; color: var(--d-acc2); letter-spacing: .02em; }
/* track headers: a readable name, real buttons, a meter you can see from the desk */
.cd-corner, .cd-head { width: 248px; flex-basis: 248px; }
.cd-ruler { left: 248px; }
.cd-compact .cd-corner, .cd-compact .cd-head { width: 190px; flex-basis: 190px; }
.cd-compact .cd-ruler { left: 190px; }
.cd-tname { font-size: 14px; font-weight: 600; }
.cd-hl1, .cd-hl2 { gap: 5px; }
.cd-hl2 button { width: 26px; height: 24px; font-size: 11px !important; border-radius: 5px; }
.cd-vol { flex: 1; min-width: 50px; width: auto; }
.cd-hmeter { width: 40px; height: 8px; flex: 0 0 40px; border-radius: 3px; }
.cd-row:not(.cd-autorow) .cd-head { min-height: 56px; }
.cd-row.sel > .cd-head { background: color-mix(in srgb, var(--d-acc), var(--d-panel) 90%); box-shadow: inset -2px 0 0 var(--d-acc); }
.cd-dtabs button { min-height: 30px; }
/* Central Production hides the toolbar's own undo / redo: the top bar has them for every kind of project */
.cp-editor .cd-top .cd-g:has(> [data-a="undo"]) { display: none; }