/* The playground's own chrome: the bar, the graph's stage, the dock and the
   readout, in the DAW page's palette (ui/index.html): the dark panel, its
   lines, the chain's blue for what is on or connected, amber hot, red for
   clipping only. The surfaces bring their own rules (ui/playground.css). */
:root {
  color-scheme: dark;
  --bg: #0d0f13; --panel: #15171c; --panel2: #171a21; --line: #262b33; --line2: #333a46;
  --ink: #d5d9e0; --dim: #8b93a1; --faint: #6f7787; --blue: #5f9ed6; --blue-soft: rgba(95, 158, 214, 0.14);
  --amber: #e8c76a; --red: #e0534a;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; overflow: hidden;
       font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
button, .btn { background: #232833; color: var(--ink); border: 1px solid var(--line2); border-radius: 4px; padding: 4px 10px;
               font: inherit; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
button:hover:not(:disabled), .btn:hover { background: #2c323e; }
button:disabled { opacity: .45; cursor: default; }
button.on { border-color: var(--blue); background: var(--blue-soft); }
.dim { color: var(--dim); }

#bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
#bar h1 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
#bar h1 span { color: var(--dim); font-weight: 400; }
#bar .sources, #bar .add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#bar .out { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#sourceName { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter { width: 96px; height: 10px; display: grid; gap: 2px; }
.meter i { display: block; height: 4px; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); border-radius: 1px; }
.meter i.hot { background: var(--amber); }
.meter i.clip { background: var(--red); }

#main { flex: 1; min-height: 0; display: flex; }
#stage { flex: 1; min-width: 0; position: relative; overflow: hidden; outline: none;
         background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 24px 24px; }
#dock { flex: none; width: 580px; max-width: 60vw; border-left: 1px solid var(--line); overflow: auto; position: relative; background: #101218; }
#dockEmpty { padding: 24px; text-align: center; }

/* The graph */
.graph .world { position: absolute; inset: 0; transform-origin: 0 0; }
.graph .edges { position: absolute; left: 0; top: 0; pointer-events: none; }
.graph .edges path { fill: none; }
.graph .edge { stroke: #4a515e; stroke-width: 2; }
.graph .edge.selected { stroke: var(--blue); stroke-width: 2.5; }
.graph .hit { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.graph .pending { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 4 4; }
.graph .cards { position: absolute; inset: 0; pointer-events: none; }
.card { position: absolute; left: 0; top: 0; width: 196px; height: 74px; pointer-events: auto; cursor: grab; user-select: none;
        background: var(--panel2); border: 1px solid var(--line2); border-radius: 6px; padding: 8px 10px; display: grid; gap: 2px; align-content: start;
        transition: box-shadow var(--motion, 160ms), border-color var(--motion, 160ms); }
.card:hover { border-color: #4a515e; }
.card.selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.card.target { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.card.refused { border-style: dashed; border-color: var(--faint); }
.card.bypassed .name { color: var(--faint); text-decoration: line-through; }
.card.source, .card.output { background: #13161c; }
.card .head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card .name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .sub { color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .head button { padding: 0 6px; height: 20px; font-size: 11px; }
.card .bypass { width: 20px; padding: 0; justify-content: center; }
.card .bypass::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3d4656; }
.card .bypass.on::before { background: var(--blue); box-shadow: 0 0 6px rgba(95, 158, 214, .8); }
.card .level { height: 4px; background: #0f1116; border-radius: 2px; overflow: hidden; margin-top: 6px; }
.card .level i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.card .level i.clip { background: var(--red); }
.port { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
        background: var(--bg); border: 2px solid #4a515e; cursor: crosshair; }
.port.in { left: -7px; } .port.out { right: -7px; }
.port:hover, .card.target .port.in { border-color: var(--blue); background: var(--blue-soft); }

#readout { flex: none; padding: 6px 16px; border-top: 1px solid var(--line); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

[hidden] { display: none !important; }
#startOverlay { position: fixed; inset: 0; background: rgba(8, 9, 12, .72); display: grid; place-items: center; z-index: 50; }
#startOverlay .card { position: static; width: auto; height: auto; padding: 22px 26px; gap: 12px; cursor: default; justify-items: center; }
#startOverlay p { margin: 0; }

@media (max-width: 900px) {
  #main { flex-direction: column; }
  #dock { width: auto; max-width: none; height: 55%; border-left: 0; border-top: 1px solid var(--line); }
}

/* The dock hosts the DAW's surface for the selected plugin, docked and
   filling it: the surface fits the height it has (ui.md). */
#dock { display: flex; flex-direction: column; overflow: hidden; }
#surfaceHost { flex: 1; min-height: 0; position: relative; display: flex; }
#surfaceHost:empty { display: none; }
#surfaceHost > .surfwin:not(.floating) { width: 100% !important; height: 100%; border-left: 0; }
/* What only the DAW can do: drawn as it is there, pressed it says why. */
#surfaceHost .unsupported { opacity: .35; cursor: not-allowed; }
#dockEmpty[hidden] { display: none; }