/* FWLB DAW shell.
   CSS grid frame: transport on top, bank | centre | inspector, status at the bottom.
   The CENTRE is sacred — the bank and inspector collapse to protect its width,
   because every work surface here is a horizontal timeline. */

:root {
  --bg: #13131a; --panel: #1b1b24; --sunk: #0c0c12;
  --line: #333; --line2: #444;
  --ink: #ddd; --dim: #888; --q: #9af;
  --go: #5a4; --warn: #d84; --bad: #c55;
  --wave: #5b6cff; --sel: rgba(90,170,255,.22); --loop: rgba(253,212,68,.28);
  --intro: rgba(120,220,160,.20);
}

* { box-sizing: border-box; }
body {
  margin: 0; height: 100vh; display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg); color: var(--ink);
  font: 13px system-ui, sans-serif; overflow: hidden;
}
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, Consolas, monospace; }
.q { color: var(--q); }
.dim { color: var(--dim); }

/* ---- transport ---- */
#bar {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--panel);
}
#bar .grp { display: flex; align-items: center; gap: 7px; }
#clock { color: var(--q); min-width: 82px; }
#modes { display: flex; gap: 4px; margin: 0 auto; }
#modes button {
  padding: 6px 16px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--dim); font-weight: 600; letter-spacing: .04em;
}
#modes button:hover { color: var(--ink); background: #22222c; }
/* the active mode must be unmistakable — a keyboard toggle is useless if you
   cannot tell at a glance which lens you are looking through */
#modes button.on {
  background: #34406a; color: #fff; border-color: #4a5a94;
  box-shadow: inset 0 -2px 0 var(--q);
}

button {
  background: #2a2a36; color: var(--ink); border: 1px solid #555;
  border-radius: 6px; padding: 6px 11px; cursor: pointer;
}
button:hover { background: #343442; }
button:disabled { opacity: .4; cursor: default; }
button.go { background: var(--go); color: #000; border-color: var(--go); font-weight: 600; }
button.on { background: #34406a; border-color: #4a5a94; }
input, select {
  background: #222; color: var(--ink); border: 1px solid #555;
  border-radius: 4px; padding: 4px 6px;
}
input[type=range] { padding: 0; }

/* ---- main grid ---- */
#app { display: grid; grid-template-columns: 250px 1fr 0; min-height: 0; }
#app.insp { grid-template-columns: 250px 1fr 260px; }
#app.nobank { grid-template-columns: 0 1fr 0; }
#app.nobank.insp { grid-template-columns: 0 1fr 260px; }

#bank, #inspector { overflow: auto; background: var(--panel); }
#bank { border-right: 1px solid var(--line); }
#inspector { border-left: 1px solid var(--line); padding: 10px; }
#app.nobank #bank, #app:not(.insp) #inspector { display: none; }

.bankhead { display: flex; gap: 5px; padding: 7px; border-bottom: 1px solid var(--line); }
.bankhead input { flex: 1; min-width: 0; }

#importbox {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 7px;
  border-bottom: 1px solid var(--line); background: #171720;
}
#importbox input[type=text], #importbox #impPath { flex: 1; min-width: 0; }
#importbox select { flex: 1; min-width: 0; }
#importbox .hint { flex-basis: 100%; font-size: 10px; }
.imp {
  background: #2a2a36; border: 1px solid #555; border-radius: 6px;
  padding: 5px 9px; cursor: pointer; white-space: nowrap;
}
.imp:hover { background: #343442; }

/* drag-over state: the whole window is the drop target, so the cue must be global */
body.dropping::after {
  content: 'drop audio to load it';
  position: fixed; inset: 0; z-index: 99;
  background: rgba(52,64,106,.55); border: 3px dashed var(--q);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; pointer-events: none;
}

#tree { padding: 4px 0 20px; }
.grp-h {
  padding: 5px 9px; color: var(--dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; cursor: pointer; user-select: none;
}
.grp-h:hover { color: var(--ink); }
.row {
  padding: 4px 10px 4px 18px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.row:hover { background: #22222c; }
.row.sel { background: #34406a; }
.row .id { color: var(--q); font-weight: 600; }
.row .tag { color: var(--dim); font-size: 11px; }
.row .star { color: var(--warn); }

/* ---- centre ---- */
#centre { overflow: auto; padding: 14px; min-width: 0; }
h2 { font-size: 16px; margin: 0 0 3px; }
.sub { color: var(--q); }
.bar2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 9px 0; }
.sep { width: 1px; height: 22px; background: var(--line2); margin: 0 3px; }
.info { color: var(--dim); margin: 5px 0; }
.wrap { overflow-x: auto; background: var(--sunk); border: 1px solid var(--line); border-radius: 6px; }
canvas { display: block; }

.src { display: inline-block; padding: 5px 10px; margin: 3px 4px 0 0;
  border: 1px solid var(--line2); border-radius: 6px; cursor: pointer; background: #1d1d26; }
.src.sel { background: var(--go); color: #000; border-color: var(--go); }

/* ---- status ---- */
#statusbar {
  display: flex; gap: 14px; padding: 4px 11px; font-size: 11px;
  background: #161d2b; color: #9cf; border-top: 1px solid #2a3550;
  white-space: nowrap; overflow: hidden;
}
#saved { margin-left: auto; text-overflow: ellipsis; overflow: hidden; }
#saved a { color: #7fd1ff; cursor: pointer; }

#toast {
  position: fixed; bottom: 34px; right: 16px; background: #243; color: #cfc;
  padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .3s;
  pointer-events: none; max-width: 60vw;
}
#toast.bad { background: #422; color: #fcc; }

/* ---- music mode ---- */
.seamgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.seamgrid figure { margin: 0; }
.seamgrid figcaption { color: var(--dim); font-size: 11px; margin-bottom: 3px; }
.readout { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
.readout label { color: var(--dim); }
.readout input { width: 110px; }
.verdict { padding: 7px 10px; border-radius: 6px; margin: 8px 0; }
.verdict.ok { background: #1c3020; color: #9e6; }
.verdict.warn { background: #33280f; color: #eb6; }
.verdict.bad { background: #3a1e1e; color: #f99; }