/* v3 (Tobias 2026-10-29): små kort som datorn placerar, spårramar, och en stor sida per block.
   Allt annat (blocken, rattarna, färgerna) är v1:s egna, ur app.css. */

/* Korten: v1:s stängda block. Ta bort och fäll ut sköts på blockets sida, inte på kortet. */
.v3 #world > .node > header { cursor: pointer; }
.v3 #world > .node > header .x, .v3 #world > .node > header .shade { display: none; }
.v3 #world > .node > header { padding-right: 18px; }
.v3 #world .modtags { display: none; }
.v3 #world > .node.sel { outline: 2px solid var(--line); outline-offset: 2px; box-shadow: 4px 4px 0 #0007; }
.v3 #world > .node.dim { opacity: .3; }
.v3 #world.v3anim > .node { transition: left .3s ease, top .3s ease; }
/* Modulationen slutar under kortet, inte i titelraden (i v3 ritas den bara för det öppna blocket). */
.v3 #world > .node > .modin { top: auto; bottom: -6px; left: 12px; }
.v3badge { font: bold 9px/12px var(--mono); padding: 0 3px; background: var(--mod); border: 1px solid var(--line); border-radius: 2px; flex: none; }
.v3badge:empty { display: none; }

/* Spårramarna: allt som slutar i samma mixerkanal. Klockans skena går längs ramens överkant. */
#frames { position: absolute; left: 0; top: 0; pointer-events: none; }
.v3frame { position: absolute; background: #b3b3b3cc; border: 1px solid #6f6f6f; border-left: 6px solid; }
.v3frame.loose { border-style: dashed; border-left-style: solid; background: #b3b3b366; }
.v3fl { position: absolute; right: 6px; top: 3px; font: bold 10px var(--ui); background: var(--face); border: 1px solid var(--line); padding: 0 6px; white-space: nowrap; }

/* Mixern: en rad per kanal, i höjd med spåret som går in i den. */
.v3chans { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.v3ch { position: absolute; left: 0; right: 0; height: 18px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 14px; font: 10px var(--ui); white-space: nowrap; }
.v3ch i { width: 8px; height: 8px; border: 1px solid var(--line); flex: none; }
.v3dot { position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--au); border: 1px solid var(--line); }

/* Zoomen i menyraden. */
.zgrp { display: flex; align-items: stretch; margin-left: 10px; }
#zoom { font: 10px/22px var(--mono); min-width: 40px; text-align: center; }

/* Blockets sida: till höger, hela höjden; på en smal skärm hela bredden. */
#page { position: fixed; top: 22px; right: 0; bottom: 0; width: min(600px, 100vw); z-index: 99990; display: flex; flex-direction: column;
  background: var(--win); border-left: 2px solid var(--line); box-shadow: -6px 0 0 #0003; font-size: 12px; }
#page[hidden] { display: none; }
#page > header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.ptitle { font: bold 20px var(--ui); }
.ptrack { color: #fff; font: bold 11px var(--ui); padding: 1px 8px; border: 1px solid var(--line); }
.ptrack[hidden] { display: none; }
.pgap { flex: 1; }
.pscroll { overflow: auto; padding: 2px 16px 28px; }
#page h4 { display: flex; align-items: center; gap: 8px; font: bold 12px var(--ui); margin: 14px 0 8px; }
#page h4::after { content: ''; flex: 1; height: 11px; background: repeating-linear-gradient(var(--mid) 0 1px, var(--light) 1px 2px); opacity: .55; }
.prow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); background: var(--light); margin-bottom: 3px; }
.prow .mchip { font-size: 10px; line-height: 15px; }
.plink { background: none; border: 0; border-radius: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.plink:active { background: none; color: inherit; }
.pj { width: 12px; height: 12px; border: 2px solid var(--line); flex: none; border-radius: 50%; background: var(--au); }
.pj.ev { border-radius: 2px; background: var(--ev); }
.pj.ev.pulse { background: var(--trg); }
.pnone { color: var(--dim); font-style: italic; padding: 2px 0 4px; }
.paddmod { margin-top: 4px; border-style: dashed; }
.paddmod[hidden] { display: none; }
.ppick { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ppick[hidden] { display: none; }
#page.picking .pnode .knob[data-k] { outline: 2px dashed #7c4fc4; outline-offset: 2px; cursor: crosshair; }

/* Inställningarna är blockets egna (samma rattar som i v1), större och utan blockets ram. */
#page .pnode.node, .hpage .pnode.node { position: static; background: none; border: 0; box-shadow: none; }
#page .pnode .body, .hpage .pnode .body { position: static; display: grid; width: auto; max-width: 100%; padding: 0; border: 0; box-shadow: none; background: none; }
#page .knob, .hpage .knob { width: 62px; }
#page .knob svg, .hpage .knob svg { width: 46px; height: 46px; }
#page .knob .val, #page .knob .lab, .hpage .knob .val, .hpage .knob .lab { font-size: 10.5px; }
#page .knob.sm, .hpage .knob.sm { width: 52px; }
#page .knob.sm svg, .hpage .knob.sm svg { width: 34px; height: 34px; }
/* Song står rakt under Clock; ingången sitter på ovansidan. */
.v3 #world > .node-song > .port.in { left: 14px; top: -9px; }
/* Mixerkortet (Tobias 2026-10-30): per kanal alltid synliga M (mute), S (solo) och små rattar för volym och panorering.
   Värdet syns i en ruta ovanför ratten medan man pekar på den eller vrider. */
.v3 #world > .node-mix, .hprev .node-mix { min-width: 290px; }
.v3ch { height: 24px; }
.v3ch .v3dot { top: 8px; }
.v3ch .v3nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; cursor: text; }
.v3ch .v3nm:hover, .strip .nm[data-ch]:hover { text-decoration: underline dotted; }
.strip .nm[data-ch] { cursor: text; }
input.chname { pointer-events: auto; flex: 1; min-width: 0; font: 10px var(--ui); padding: 0 3px; height: 15px; border: 1px solid var(--line); background: var(--field); }
.strip input.chname { width: 100%; box-sizing: border-box; height: 18px; font-size: 11px; }
.v3ch.silent .v3nm, .v3ch.silent > i { opacity: 0.4; }
.v3ms { pointer-events: auto; flex: none; width: 18px; height: 16px; padding: 0; font: bold 9px/14px var(--ui); text-align: center;
  border: 1px solid var(--line); background: var(--light); color: var(--text); cursor: pointer; }
.v3ms:hover { background: var(--face); }
.v3ms.mu.on { background: #e8590c; color: #fff; }
.v3ms.so.on { background: #f2c94c; color: #000; }
.v3knob.knob { pointer-events: auto; width: 22px; flex: none; position: relative; gap: 0; }
.v3knob.knob svg { width: 22px; height: 22px; }
.v3knob .lab { display: none; }
.v3knob .val { display: none; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%); min-width: 30px; z-index: 3; }
.v3knob:hover .val, .v3knob:active .val { display: block; }

/* Låtarna (Tobias 2026-10-29): namnet i menyraden, och Open… = en sida till höger med sökning och listan. */
#songname { font: bold 11px/22px var(--ui); padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
#songs { position: fixed; top: 22px; right: 0; bottom: 0; width: min(520px, 100vw); z-index: 99991; display: flex; flex-direction: column;
  background: var(--win); border-left: 2px solid var(--line); box-shadow: -6px 0 0 #0003; font-size: 12px; }
#songs[hidden] { display: none; }
#songs > header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.ssearch { width: 100%; box-sizing: border-box; margin: 12px 0 10px; padding: 6px 8px; font: 13px var(--ui); border: 1px solid var(--line); background: var(--field); }
.srec { border: 1px solid var(--line); background: var(--light); margin-bottom: 4px; }
.srec > .stop { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; }
.srec > .stop:hover { background: var(--face); }
.srec .sname { font: bold 12px var(--ui); flex: 1; }
.srec .sinfo { font: 10px var(--mono); color: var(--dim); white-space: nowrap; }
.srec .schips { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 8px 6px; }
.srec .schips i { font: normal 10px var(--ui); padding: 0 5px; border: 1px solid var(--line); }
.srec .smore { width: 22px; padding: 0; }
.srec .sact { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 8px; }
.srec .sact[hidden] { display: none; }
.snone { color: var(--dim); font-style: italic; padding: 8px 0; }
#menu.addto > .file { display: none; }
/* Song-kortet: bredare, så att namnet (tryck = välj delen) är den stora ytan och − + inte är i vägen. */
.v3 #world > .node-song { min-width: 170px; }

/* Hjälpen (omgjord 2026-10-29, Tobias: «ny grafik för block. Gör texten något större»): kortet och blockets sida bredvid
   varandra, delarnas texter till höger; större text överallt. */
#help .scroll { font: 14px/1.55 var(--ui); padding: 14px 22px 32px; }
#help > header .title { font-size: 13px; }
#help h3 { font: bold 20px var(--ui); margin: 30px 0 4px; padding-top: 12px; }
#help .about { font-size: 15px; color: var(--text); margin: 0 0 12px; max-width: 75ch; }
#help .toc { gap: 6px 16px; font-size: 14px; margin: 8px 0 14px; }
#help .toc b { font-size: 12px; }
#help dl { gap: 6px 14px; }
#help .caption { font-size: 14px; max-width: 75ch; }
#help h4 { font-size: 12px; margin: 16px 0 6px; }
.hrow { display: grid; grid-template-columns: minmax(0, auto) minmax(260px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .hrow { grid-template-columns: 1fr; } }
.hpics { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.hcap { position: absolute; left: 10px; top: 6px; font: bold 10px var(--ui); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.hprev { padding: 40px 30px 22px 22px; min-width: 150px; }
.hprev .node { position: relative; }
.hpage { position: relative; background: var(--win); border: 2px solid var(--line); box-shadow: 4px 4px 0 #0003; padding: 32px 18px 16px; max-width: 640px; }
.hparts { gap: 8px 10px; font-size: 14px; }
.hl-tag { min-width: 20px; height: 20px; border-radius: 10px; font: bold 12px/17px var(--mono); }
.hexw text { font-size: 11px; }
.hprev .node > header .x, .hprev .node > header .shade, .hex .node > header .x, .hex .node > header .shade { display: none; }
.hprev .node > header, .hex .node > header { padding-right: 18px; }

/* Sequencer- och Chords-kortet har fast bredd (Tobias 2026-10-30: «Sequencer blocket är för smalt och ändrar storlek varje
   gång den ändrar från ingen not till not»): tonraden får ändra sig utan att kortet, layouten och trådarna hoppar. */
.v3 #world > .node-seq, .hprev .node-seq { width: 180px; }
.v3 #world > .node-chords, .hprev .node-chords { width: 260px; }
:is(.node-seq, .node-chords) > header .sum { flex: 1; min-width: 0; }
:is(.node-seq, .node-chords) > header .playing { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.node-seq, .node-chords) > header .stripes { flex: 0 0 12px; }

/* Ett värde skrivs in i rattens ruta (Tobias 2026-10-30). */
.knob .val { cursor: text; }
.knob input.kval { font: 9px var(--mono); width: 56px; box-sizing: border-box; text-align: center; padding: 1px 2px; border: 1px solid var(--line); background: var(--field); }
#page .knob input.kval, .hpage .knob input.kval { font-size: 10.5px; width: 64px; }
.v3knob input.kval { position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%); z-index: 4; }
.v3 #world > .node.modhot { outline: 2px dashed var(--mod); outline-offset: 2px; }