/* CURRENT Studio — Edit window (toolbar, rulers, track headers, lanes, count-in readout).
   Builds on daw-base.css tokens only. Flat, rectangular, 1px dividers. Min type 11px.
   No transitions / animations anywhere (nothing moves at idle). */

/* ================================================================ toolbar */
#daw-toolbar{ background: var(--bg-1); border-bottom: 1px solid var(--line); }
.de-tb{
  display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 4px;
  padding: 4px 6px; min-height: 56px; user-select: none; -webkit-user-select: none;
  font-family: var(--daw-font); color: var(--text);
}
.de-g{
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px; min-height: 46px;
  border-right: 1px solid var(--line-soft);
}
.de-g:first-child{ padding-left: 2px; }
.de-stack{ display: flex; flex-direction: column; gap: 4px; }
.de-row{ display: flex; align-items: center; gap: 4px; }

.de-tb button{
  height: 20px; padding: 0 7px;
  font-family: var(--daw-font); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap; color: var(--text);
}
.de-tb button svg{ width: 12px; height: 12px; fill: currentColor; flex: none; display: block; }
.de-cap{ font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text-dim); line-height: 1; }
.de-v{ font-family: var(--daw-mono); font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }

/* lit = toggled-on state that is not an exclusive selection */
.daw .de-tb button.lit, .daw .de-hdrs button.lit{
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--ctl));
}
.de-tb button.lit .de-cap{ color: color-mix(in srgb, var(--accent) 75%, var(--text-dim)); }
.de-tb button.lit .de-v{ color: var(--accent); }

/* segmented groups: 1px seams, one outer border */
.de-seg{
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.daw .de-seg > button{ border: 0; border-radius: 0; height: 20px; }
.daw .de-seg > button:hover{ background: var(--ctl-hi); }
.daw .de-seg > button.on{ background: var(--accent); color: var(--accent-ink); }

.de-win{ grid-template-columns: 40px; }
.daw .de-win > button{ height: 20px; }
.daw .de-win > button.on{ background: var(--text); color: var(--bg-0); }

.de-modes{ grid-template-columns: 48px 48px; }

.de-tools{ display: flex; flex-direction: column; gap: 3px; }
.de-toolseg{ grid-template-columns: repeat(4, 26px); }
.daw .de-toolseg > button{ height: 26px; padding: 0; }
.de-toolseg svg{ width: 15px !important; height: 15px !important; }
.daw .de-toolseg > button.lit{ border: 0; background: color-mix(in srgb, var(--accent) 16%, var(--ctl)); color: var(--accent); }
.daw .de-tb .de-smart{
  height: 6px; width: 81px; padding: 0; border-radius: 2px;
  background: var(--ctl); border: 1px solid var(--line);
}
.daw .de-tb .de-smart:hover{ background: var(--ctl-hi); }
.daw .de-tb .de-smart.on{ background: var(--accent); border-color: var(--accent); }

/* counters */
.de-g-ctr{ gap: 9px; }
.de-ctr{
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto; row-gap: 1px; align-items: baseline; align-content: center;
  height: 46px; padding: 2px 9px 2px 9px; cursor: pointer;
  background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r);
}
.de-ctr:hover{ border-color: var(--text-faint); }
.de-ctr-main{
  font-family: var(--daw-mono); font-size: 22px; line-height: 25px; font-weight: 500;
  white-space: pre; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.de-ctr-sub{ font-family: var(--daw-mono); font-size: 11px; line-height: 14px; white-space: pre; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.de-ctr-u{ display: none; }

.de-sel{ display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; }
.de-sel span{ font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text-faint); text-align: right; line-height: 15px; }
.de-sel b{ font-family: var(--daw-mono); font-size: 11px; line-height: 15px; font-weight: 500; white-space: pre; color: var(--text); font-variant-numeric: tabular-nums; min-width: 11ch; }
.de-sel b.none{ color: var(--text-faint); }

/* grid / zoom */
.daw .de-tb .de-grid{ width: 98px; justify-content: space-between; padding: 0 5px 0 7px; }
.de-grid .de-v{ margin-left: auto; margin-right: 1px; }
.de-zoom{ grid-auto-flow: column; grid-auto-columns: 22px; }
.daw .de-zoom > button{ padding: 0; }
.daw .de-tb .de-scrollbtn{ width: 36px; padding: 0; font-family: var(--daw-mono); font-weight: 500; letter-spacing: 0; }

/* transport */
.de-xport{ grid-auto-flow: column; grid-auto-columns: 25px; }
.daw .de-xport > button{ height: 28px; padding: 0; position: relative; }
.de-xport svg{ width: 14px !important; height: 14px !important; }
.daw .de-xport > button[data-act="play"].on{ background: var(--accent); color: var(--accent-ink); }
.de-recbtn{ color: var(--st-rec) !important; }
.daw .de-xport > button.rec-on{ background: var(--st-rec); color: #fff !important; }
.de-subg{ display: none; position: absolute; right: 2px; bottom: 2px; }
.de-subg svg{ width: 9px !important; height: 9px !important; }
.loopmode > .de-subg{ display: block; }
.daw .de-tb .de-loopbtn{ width: 28px; height: 30px; padding: 0; }
.de-loopbtn svg{ width: 15px !important; height: 15px !important; }

/* count-in / click */
.de-cntseg{ grid-template-columns: 106px 18px; }
.daw .de-cntseg > button{ justify-content: space-between; padding: 0 7px; }
.daw .de-cntseg > .de-caretbtn{ padding: 0; justify-content: center; }
.daw .de-cntseg > button.lit{ border: 0; }
.daw .de-clickseg > .de-click{ justify-content: flex-start; gap: 5px; }
.de-click .de-v{ margin-left: auto; }

/* tempo / meta */
.de-tempo{
  display: flex; align-items: center; gap: 8px; height: 20px; padding: 0 7px; width: 88px;
  background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r);
  cursor: ns-resize;
}
.de-tempo:hover{ border-color: var(--text-faint); }
.de-tempo .de-v{ margin-left: auto; font-size: 12px; }
.de-meta{ display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 1px; }
.de-meta{ width: 88px; white-space: nowrap; }
.de-key{ margin-left: auto; overflow: hidden; text-overflow: ellipsis; }

/* live recording status strip — sits over the sub-counter row inside the counter box (no layout shift) */
.de-recstrip{
  display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 17px;
  align-items: center; gap: 10px; padding: 0 9px;
  background: var(--st-rec); color: #fff;
  font-family: var(--daw-mono); font-size: 11px; font-weight: 700; letter-spacing: .03em; white-space: pre;
  font-variant-numeric: tabular-nums;
}
.de-recstrip span:last-child{ margin-left: auto; }
.de-tb.is-rec .de-recstrip{ display: flex; }
.de-recdot{ width: 7px; height: 7px; background: #fff; border-radius: 50%; flex: none; }

/* inline text inputs (tempo, rename, spot) */
.daw .de-inl{
  font-family: var(--daw-mono); font-size: 12px; color: var(--text);
  background: var(--bg-0); border: 1px solid var(--accent); border-radius: 2px;
  height: 18px; padding: 0 4px; width: 64px; outline: none;
}

/* ================================================================ edit area */
#daw-edit.de{
  position: relative; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; height: 100%; background: var(--bg-0);
  --de-hw: 220px;
}
#daw-edit.de[hidden]{ display: none; }
.de-scroll{ position: relative; z-index: 0; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.de-stick{ position: sticky; top: 0; left: 0; width: 0; height: 0; z-index: 2; }
.de-cv{ position: absolute; top: 0; left: var(--de-hw); display: block; touch-action: none; }
.de-ph{ position: absolute; top: 0; left: var(--de-hw); width: 1px; background: var(--accent); pointer-events: none; will-change: transform; }
.de-ph.rec{ background: var(--st-rec); }
.de-ph-cap{ position: absolute; top: 0; left: -5px; width: 0; height: 0; border-left: 5.5px solid transparent; border-right: 5.5px solid transparent; border-top: 8px solid var(--accent); }
.de-ph.rec .de-ph-cap{ border-top-color: var(--st-rec); }
.de-content{ position: relative; }

.de-corner{
  position: sticky; top: 0; left: 0; z-index: 4;
  width: var(--de-hw); height: 54px;
  display: grid; grid-template-rows: 18px 18px 18px;
  background: var(--bg-1); border-right: 1px solid var(--line);
}
.de-rl{
  font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text-faint);
  text-align: right; padding-right: 9px; line-height: 17px;
  border-bottom: 1px solid var(--line-soft);
}
.de-rl:last-child{ border-bottom-color: var(--line); }
.de-grip{ position: absolute; top: 0; bottom: 0; left: calc(var(--de-hw) - 3px); width: 6px; cursor: col-resize; z-index: 6; }
.de-grip:hover{ background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ================================================================ track headers */
.de-hdrs{
  position: sticky; left: 0; z-index: 3;
  width: var(--de-hw); background: var(--bg-1);
  border-right: 1px solid var(--line);
  user-select: none; -webkit-user-select: none;
}
.de-hdrs.dragging{ cursor: grabbing; }
.de-drop{ display: none; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); pointer-events: none; z-index: 2; }

.de-h{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  padding: 3px 6px 0 11px;
  border-bottom: 1px solid var(--bg-0);
  background: var(--bg-1);
}
.de-h-trk{ cursor: grab; }
.de-h-trk.sel{ background: var(--bg-3); }
.de-h-trk.sel .de-h-name{ color: #fff; }
.de-h-sw{ position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.de-h-r1, .de-h-r2{ display: flex; align-items: center; gap: 3px; height: 18px; flex: none; }
.de-h-name{
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); line-height: 18px;
}
.daw .de-h-in{ flex: 1; min-width: 0; width: auto; font-family: var(--daw-font); font-size: 12px; font-weight: 600; }
.daw .de-hdrs button{ font-family: var(--daw-font); }
.daw .de-h-tk{
  height: 18px; padding: 0 3px 0 5px; gap: 2px; display: inline-flex; align-items: center;
  font-family: var(--daw-mono); font-size: 11px; font-weight: 500;
}
.de-h-tk svg{ width: 10px; height: 10px; fill: currentColor; display: block; }
.de-h-tkph{ width: 0; }
.daw .de-h-ht{ width: 20px; height: 18px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); }
.de-h-ht svg{ width: 11px; height: 11px; display: block; }

.daw .de-hb{
  width: 21px; height: 18px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--text-dim);
}
.de-hb svg{ width: 11px; height: 11px; fill: currentColor; display: block; }
.daw .de-hb:disabled{ opacity: .35; cursor: default; }
.daw .de-hb:disabled:hover{ background: var(--ctl); }
.daw .de-hb.rec{ color: color-mix(in srgb, var(--st-rec) 70%, var(--text-dim)); }
.daw .de-hb.rec.on{ background: var(--st-rec); border-color: var(--st-rec); color: #fff; }
.daw .de-hb.inp.on{ background: var(--st-input); border-color: var(--st-input); color: #0b1a10; }
.daw .de-hb.solo.on{ background: var(--st-solo); border-color: var(--st-solo); color: #1c1705; }
.daw .de-hb.mute.on{ background: var(--st-mute); border-color: var(--st-mute); color: #1d1206; }
.de-h-gen{
  width: 45px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--text-faint);
  background: var(--bg-0); border: 1px solid var(--line-soft); border-radius: var(--r);
}
.de-h-meter{
  flex: 1; min-width: 24px; height: 6px; margin-left: 4px; position: relative; overflow: hidden;
  background: var(--bg-0); border: 1px solid var(--line-soft); visibility: hidden;
}
.armed .de-h-meter{ visibility: visible; }
.de-h-meter i{ position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--m-low); }
.de-h-meter i[data-z="mid"]{ background: var(--m-mid); }
.de-h-meter i[data-z="high"]{ background: var(--m-high); }
.de-h-meter i[data-z="clip"]{ background: var(--m-clip); }
.de-h-r3{
  font-size: 11px; line-height: 14px; color: var(--text-dim); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.part .de-h-r3{ color: var(--text-faint); }
.daw .de-h-src{
  height: 14px; max-width: 100%; padding: 0; border: 0; background: transparent; border-radius: 0;
  display: inline-flex; align-items: center; gap: 3px; overflow: hidden;
  font-family: var(--daw-font); font-size: 11px; font-weight: 400; letter-spacing: .02em; color: var(--text-dim);
  white-space: nowrap; cursor: pointer;
}
.de-h-src span{ overflow: hidden; text-overflow: ellipsis; }
.daw .de-h-src:hover{ background: transparent; color: var(--text); }
.de-h-src svg{ width: 9px; height: 9px; fill: currentColor; flex: none; display: block; }

/* heights */
.h-mini{ flex-direction: row; align-items: center; gap: 4px; padding-top: 0; }
.h-mini .de-h-r1{ flex: 1; min-width: 0; }
.h-mini .de-h-r3, .h-mini .de-h-meter, .h-mini .de-h-gen{ display: none; }
.h-small .de-h-r3{ display: none; }

/* take lanes */
.de-h-take{
  flex-direction: row; align-items: center; gap: 5px;
  padding: 0 6px 0 24px; background: var(--bg-0); cursor: default;
}
.de-h-take .de-h-sw{ opacity: .35; }
.de-h-ind{ position: absolute; left: 13px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.de-tk-n{ font-family: var(--daw-mono); font-size: 11px; font-weight: 500; color: var(--text-dim); min-width: 22px; }
.de-h-take.act .de-tk-n{ color: var(--text); }
.de-tk-act{ font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--accent); }
.de-tk-part{ font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text-faint); }
.de-fill{ flex: 1; }

.de-hfoot{ height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 11px; }
.daw .de-add{ height: 22px; padding: 0 6px 0 5px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.de-add svg{ width: 11px; height: 11px; fill: currentColor; display: block; }
.de-hcount{ font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text-faint); }

/* ================================================================ menus */
.de-menu{
  position: fixed; z-index: 1000; min-width: 168px; padding: 3px 0;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--daw-font); font-size: 12px; color: var(--text); box-sizing: border-box;
  user-select: none; -webkit-user-select: none;
}
.de-menu *{ box-sizing: border-box; }
.de-mhd{ padding: 4px 10px 3px 24px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text-faint); white-space: nowrap; }
.de-msep{ height: 1px; margin: 3px 0; background: var(--line); }
.de-mi{ display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 6px; cursor: default; white-space: nowrap; }
.de-mi:hover, .de-mi.open{ background: var(--ctl-hi); }
.de-mi.dis{ color: var(--text-faint); }
.de-mi.dis:hover{ background: transparent; }
.de-mck{ width: 12px; height: 12px; flex: none; color: var(--accent); }
.de-mck svg, .de-marr svg{ width: 12px; height: 12px; display: block; fill: currentColor; }
.de-ml{ flex: 1; }
.de-mh{ margin-left: 16px; font-family: var(--daw-mono); font-size: 11px; color: var(--text-dim); }
.de-marr{ margin-left: 10px; color: var(--text-dim); }
.de-spot{ padding: 3px 0 8px; min-width: 220px; }
.de-spot-row{ display: flex; align-items: center; gap: 10px; padding: 6px 10px 8px 24px; }
.de-spot-row .de-inl{ width: 110px; height: 22px; }
.daw .de-spot-row .de-inl-wide{ width: 170px; font-family: var(--daw-font); }
.de-menu-tall{ max-height: calc(100vh - 16px); overflow-y: auto; }
.de-spot-ft{ display: flex; justify-content: flex-end; gap: 6px; padding: 0 10px; }
.daw .de-spot-ft button{ height: 22px; font-size: 11px; font-weight: 600; letter-spacing: .06em; }

/* ================================================================ count-in readout */
.de-cin{
  position: fixed; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 316px; padding: 10px 12px 10px; z-index: 900; pointer-events: none;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--daw-font); color: var(--text);
}
.de-cin[hidden]{ display: none; }
#daw-overlay > .de-cin{ pointer-events: none; }
.de-cin-hd{ display: flex; align-items: baseline; justify-content: space-between; }
.de-cin-bar{ font-family: var(--daw-mono); font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.de-cin-bar b{ color: var(--text); font-weight: 700; }
.de-cin-beats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 9px 0 9px; }
.de-cin-beats i{
  height: 50px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-0); border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--daw-mono); font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.de-cin-beats i.past{ background: var(--ctl); color: var(--text-dim); }
.de-cin-beats i.hit{ background: var(--text); border-color: var(--text); color: var(--bg-0); }
.de-cin-beats i.hit.down{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.de-cin.final .de-cin-beats i{ font-size: 30px; font-weight: 700; }
.de-cin-ft{ display: flex; justify-content: space-between; gap: 10px; font-family: var(--daw-mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.de-cin-ft span:last-child{ overflow: hidden; text-overflow: ellipsis; color: var(--st-rec); }

/* ================================================================ import / sounds */
.daw .de-tb .de-tbw{ width: 66px; justify-content: flex-start; padding: 0 6px; }

.de-body{ flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; }
.de-body > .de-scroll{ min-width: 0; }

.de-lib{
  position: relative; flex: none; width: var(--de-lw, 260px); min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-1); border-left: 1px solid var(--line);
  user-select: none; -webkit-user-select: none;
}
.de-lib[hidden]{ display: none; }
.de-lib.drop{ outline: 1px solid var(--accent); outline-offset: -1px; }
.de-lib-grip{ position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
.de-lib-grip:hover{ background: color-mix(in srgb, var(--accent) 35%, transparent); }
.de-lib-hd{ flex: none; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px 0 11px; border-bottom: 1px solid var(--line-soft); }
.de-lib-n{ font-family: var(--daw-mono); font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.daw .de-lib-imp{ height: 20px; padding: 0 7px 0 6px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.de-lib-imp svg{ width: 11px; height: 11px; display: block; }
.de-lib-sr{ flex: none; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.daw .de-lib-q{
  width: 100%; height: 22px; padding: 0 7px; outline: none;
  background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--daw-font); font-size: 12px; color: var(--text);
}
.daw .de-lib-q:focus{ border-color: var(--accent); }
.de-lib-q::placeholder{ color: var(--text-faint); }
.de-lib-list{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.daw .de-lib-gh{
  width: 100%; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 9px 0 7px;
  background: var(--bg-2); border: 0; border-bottom: 1px solid var(--bg-0); border-radius: 0;
  font-family: var(--daw-font); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text-dim); text-align: left;
}
.daw .de-lib-gh:hover{ background: var(--ctl); color: var(--text); }
.de-lib-gh i{ width: 10px; height: 10px; flex: none; }
.de-lib-gh svg{ width: 10px; height: 10px; display: block; fill: currentColor; }
.de-lib-gh.shut svg{ transform: rotate(-90deg); }
.de-lib-gn{ margin-left: auto; font-family: var(--daw-mono); font-weight: 500; letter-spacing: 0; color: var(--text-faint); }
.de-lib-row{
  display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 6px 0 11px;
  border-bottom: 1px solid var(--line-soft); border-left: 2px solid transparent; cursor: pointer;
}
.de-lib-row:hover{ background: var(--ctl); }
.de-lib-row.playing{ background: color-mix(in srgb, var(--accent) 11%, var(--bg-1)); border-left-color: var(--accent); }
.de-lib-ic{ width: 10px; height: 10px; flex: none; color: var(--text-faint); }
.de-lib-ic svg{ width: 10px; height: 10px; display: block; fill: currentColor; }
.de-lib-row:hover .de-lib-ic{ color: var(--text-dim); }
.de-lib-row.playing .de-lib-ic{ color: var(--accent); }
.de-lib-nm{ flex: 1; min-width: 0; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.de-lib-meta{ flex: none; font-family: var(--daw-mono); font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.daw .de-lib-x{
  width: 18px; height: 18px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text-faint);
}
.daw .de-lib-x:hover{ background: var(--ctl-hi); color: var(--text); }
.de-lib-x svg{ width: 10px; height: 10px; display: block; }
.de-lib-empty{ padding: 14px 12px; font-size: 12px; color: var(--text-dim); }
.de-lib-ft{ flex: none; padding: 6px 11px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* static import / notice line (no spinner) */
.de-status{
  position: absolute; left: calc(var(--de-hw) + 10px); bottom: 12px; z-index: 7; max-width: 56%;
  padding: 5px 10px; pointer-events: none;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r);
  font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.de-status[hidden]{ display: none; }
.de-status[data-kind="bad"]{ border-color: var(--st-rec); }
.de-status[data-kind="warn"]{ border-color: var(--m-high); }

/* inline clip rename over the name bar */
.daw .de-clip-in{ position: absolute; z-index: 8; height: 16px; padding: 0 4px; font-family: var(--daw-font); font-size: 11px; font-weight: 600; }

/* confirm (destructive) */
.de-confirm{ padding-bottom: 8px; }
.de-cf-body{ max-width: 300px; padding: 2px 14px 10px 24px; font-size: 12px; line-height: 1.45; color: var(--text); white-space: normal; }
.daw .de-danger{ background: var(--st-rec); border-color: var(--st-rec); color: #fff; }
.daw .de-danger:hover{ background: color-mix(in srgb, var(--st-rec) 85%, #fff); }