/* Vor - det, siden (vor.js) har brug for ud over Mimirs app.css (.knap, .skyder, .afspiller).
   Pc-vinduet får de samme grundregler fra pc.css, så de to ser ens ud. */
.vor .vor-raekke { display: flex; gap: 8px; }
.vor .vor-raekke .knap { margin: 0; flex: 1; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.vor .afspiller > .vor-raekke .knap:first-child { flex: 1.4; }
.vor .knap.til { background: var(--guld); color: #1B1408; border-color: var(--guld); }
.vor .knap[data-v="gem"] { margin-top: 6px; }

/* bølgen: tegnes én gang, alt andet er lag ovenpå */
.vor .vor-boelge { margin-top: 10px; background: var(--kort2); border: 1px solid var(--kant); border-radius: 10px; overflow: hidden; }
.vor .vor-rul { overflow-x: auto; overflow-y: hidden; }
.vor .vor-spor { position: relative; height: 64px; touch-action: pan-x; cursor: crosshair; user-select: none; }
.vor .vor-spor canvas { display: block; }
.vor .vor-lag { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.vor .vor-lag.klip { background: repeating-linear-gradient(135deg, rgba(229,138,122,.45) 0 6px, rgba(229,138,122,.15) 6px 12px); }
.vor .vor-lag.stille { background: rgba(15,18,24,.7); border-left: 1px solid var(--kant); border-right: 1px solid var(--kant); }
.vor .vor-lag.styrke { border-top: 3px solid; }
.vor .vor-lag.styrke.op { border-color: var(--ok, #86BC8C); background: rgba(134,188,140,.12); }
.vor .vor-lag.styrke.ned { border-color: var(--fejl); background: rgba(229,138,122,.10); }
.vor .vor-lag span { position: absolute; top: 2px; left: 4px; font-size: 11px; color: var(--tekst); white-space: nowrap; }
.vor .vor-valgt { position: absolute; top: 0; bottom: 0; background: rgba(227,182,90,.25); border: 1px solid var(--guld); pointer-events: none; }
.vor .vor-hoved { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--tekst); pointer-events: none; will-change: transform; }
.vor .tid .vor-fyld { flex: 1; }
.vor .vor-lille { background: var(--kort2); color: var(--tekst); border: 1px solid var(--kant); border-radius: 8px; width: 34px; height: 30px; font-size: 18px; line-height: 1; cursor: pointer; }
.vor .vor-vaerktoej { margin-top: 10px; }
.vor .vor-vaerktoej .vor-raekke { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin-top: 6px; }
@media (max-width: 520px) {           /* mobilen: to og to - står der en alene til sidst, fylder den rækken */
  .vor .vor-vaerktoej .vor-raekke { grid-template-columns: 1fr 1fr; }
  .vor .vor-vaerktoej .knap:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.vor .vor-vaerktoej .knap { font-size: 14px; padding-top: 10px; padding-bottom: 10px; }

/* afsnittene (Rens, Stemme, Dynamik ...) */
.vor .vor-gruppe { background: var(--kort); border: 1px solid var(--kant); border-radius: 12px; margin-bottom: 10px; padding: 0 10px; }
.vor .vor-gruppe > summary { list-style: none; cursor: pointer; padding: 12px 4px; display: flex; gap: 10px; align-items: baseline; }
.vor .vor-gruppe > summary::-webkit-details-marker { display: none; }
.vor .vor-gruppe > summary::before { content: "›"; color: var(--daempet); transition: transform .15s; display: inline-block; }
.vor .vor-gruppe[open] > summary::before { transform: rotate(90deg); }
.vor .vor-gruppe > summary span { margin-left: auto; }
.vor .vor-gruppe .skyder:last-child { margin-bottom: 10px; }
.vor .vor-maal { margin-top: 8px; }
.vor .vor-maal .knap { font-size: 14px; padding-top: 10px; padding-bottom: 10px; }