/* Opmaak van de opnames-module: opnemer, speler, lijst, wachtkaart en
   transcript. Kleuren en maten via eigen variabelen op .kit-opnames, zodat een
   project ze in zijn eigen stylesheet overschrijft (bijv. .kit-opnames { --op-accent: #1F4E79 }). */
.kit-opnames {
  --op-accent: #0a66c2; --op-accent-diep: #084d94; --op-tekst: #1d1d1f; --op-zacht: #6e6e73;
  --op-lijn: #e5e5ea; --op-vlak: #fff; --op-achter: #f5f5f7; --op-zweef: rgba(120, 120, 128, .12);
  --op-opname: #d70015; --op-fout: #d70015; --op-ok: #1f7a3f; --op-radius: 8px;
  --op-sp-1: #1F4E79; --op-sp-2: #9A5E1C; --op-sp-3: #2E6B4F; --op-sp-4: #7A3E8C;
  --op-sp-5: #A33A3A; --op-sp-6: #1D6F7E; --op-sp-7: #6B5B1F; --op-sp-8: #4A4A6A;
  --op-tekst-maat: 17px; --op-tekst-regel: 1.55; --op-marge: 7.5rem;
  color: var(--op-tekst); font: inherit;
}
@media (prefers-color-scheme: dark) {
  .kit-opnames {
    --op-accent: #4c9aff; --op-accent-diep: #76b3ff; --op-tekst: #f5f5f7; --op-zacht: #a1a1a6;
    --op-lijn: #38383a; --op-vlak: #1c1c1e; --op-achter: #000; --op-zweef: rgba(120, 120, 128, .22);
    --op-opname: #ff453a; --op-fout: #ff6961; --op-ok: #5dc97a;
    --op-sp-1: #7fb3e6; --op-sp-2: #e0a060; --op-sp-3: #7cc8a0; --op-sp-4: #c48fd6;
    --op-sp-5: #e88a8a; --op-sp-6: #6fc4d4; --op-sp-7: #d1bd6a; --op-sp-8: #a9a9d0;
  }
}
.kit-opnames *, .kit-opnames *::before, .kit-opnames *::after { box-sizing: border-box; }
.kit-opnames [hidden], .kit-opnames[hidden] { display: none !important; }
/* projecten hebben vaak een globale button-stijl (min-height, padding, kleur); elke knop hier zet die zelf */
.kit-opnames :where(button) { min-height: 0; }
.kit-op-zacht { color: var(--op-zacht); font-size: 13px; }
.kit-op-icoon { display: inline-flex; align-items: center; line-height: 0; }
.kit-op-draai { animation: kit-op-draai .9s linear infinite; }
@keyframes kit-op-draai { to { transform: rotate(360deg); } }

/* ---- knoppen ---- */
.kit-op-knop {
  display: inline-flex; min-height: 44px; align-items: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 500;
  min-height: 44px; padding: 0 16px; border-radius: var(--op-radius); border: 1px solid var(--op-lijn);
  background: var(--op-vlak); color: var(--op-tekst); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.kit-op-knop:hover { border-color: var(--op-accent); color: var(--op-accent); }
.kit-op-knop:focus-visible, .kit-op-ik:focus-visible, .kit-op-play:focus-visible, .kit-op-lijst-knop:focus-visible, .kit-op-tijd:focus-visible, button.kit-op-wie:focus-visible, .kit-op-chip-weg:focus-visible, .kit-op-bewerk-knop:focus-visible { outline: 2px solid var(--op-accent); outline-offset: 2px; }
.kit-op-knop:disabled, .kit-op-ik:disabled { opacity: .5; cursor: default; }
.kit-op-primair { background: var(--op-accent); border-color: var(--op-accent); color: #fff; }
.kit-op-primair:hover { background: var(--op-accent-diep); border-color: var(--op-accent-diep); color: #fff; }
.kit-op-stil { background: transparent; }
.kit-op-stop { border-color: var(--op-opname); color: var(--op-opname); }
.kit-op-stop:hover { background: var(--op-opname); color: #fff; border-color: var(--op-opname); }
.kit-op-knoppen { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kit-op-link { font: inherit; color: var(--op-accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.kit-op-ik {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--op-lijn); border-radius: 6px; background: var(--op-vlak); color: var(--op-tekst); cursor: pointer; flex: 0 0 auto; transition: .15s;
}
.kit-op-ik:hover { border-color: var(--op-accent); color: var(--op-accent); background: var(--op-zweef); }
.kit-op-ik-primair { background: var(--op-accent); border-color: var(--op-accent); color: #fff; }
.kit-op-ik-primair:hover { background: var(--op-accent-diep); border-color: var(--op-accent-diep); color: #fff; }

/* ---- status en voortgang ---- */
.kit-op-status { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--op-zacht); min-height: 0; }
.kit-op-status:empty { display: none; }
.kit-op-status[data-soort="fout"] { color: var(--op-fout); }
.kit-op-status[data-soort="klaar"] { color: var(--op-ok); }
.kit-op-status[data-soort="opnemen"]::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--op-opname); margin-right: 6px; vertical-align: 1px; animation: kit-op-puls 1.2s ease-in-out infinite; }
@keyframes kit-op-puls { 50% { opacity: .35; } }
.kit-op-voortgang { display: block; height: 6px; border-radius: 3px; background: var(--op-lijn); overflow: hidden; margin-top: 12px; }
.kit-op-voortgang-vul { display: block; height: 100%; width: 0; background: var(--op-accent); transition: width .2s; }

/* ---- opnemer ---- */
.kit-op-opnemer { display: block; }
.kit-op-herstel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--op-lijn); border-left: 4px solid var(--op-accent); border-radius: var(--op-radius); background: var(--op-achter); font-size: 14px; }
.kit-op-herstel-tekst { flex: 1 1 16rem; }
.kit-op-vink { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--op-tekst); margin: 0 0 12px; cursor: pointer; }
.kit-op-vink input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--op-accent); flex: 0 0 auto; }
.kit-op-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kit-op-tijd { font-variant-numeric: tabular-nums; }
.kit-op-opnemer .kit-op-tijd { font-size: 17px; font-weight: 600; min-width: 3.5rem; }
.kit-op-opnemer[data-staat="rust"] .kit-op-tijd, .kit-op-opnemer[data-staat="rust"] .kit-op-meter { display: none; }
.kit-op-meter { flex: 1 1 6rem; height: 8px; border-radius: 4px; background: var(--op-lijn); overflow: hidden; }
.kit-op-meter-vul { display: block; height: 100%; width: 0; background: var(--op-opname); transition: width .06s linear; }
.kit-op-opnemer[data-staat="opnemen"] .kit-op-start { display: none; }
.kit-op-opnemer[data-staat="opnemen"] .kit-op-stop { box-shadow: 0 0 0 calc(var(--n, 0) * 6px) color-mix(in srgb, var(--op-opname) 25%, transparent); }

/* ---- speler ---- */
.kit-op-speler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kit-op-audio { display: none; }
.kit-op-play { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--op-accent); color: #fff; cursor: pointer; flex: 0 0 auto; transition: background .15s; }
.kit-op-play:hover { background: var(--op-accent-diep); }
.kit-op-range { flex: 1 1 8rem; min-width: 6rem; margin: 0; accent-color: var(--op-accent); height: 24px; cursor: pointer; }
.kit-op-tijden { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--op-zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kit-op-snel, .kit-op-spring { font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--op-zacht); background: none; border: 1px solid var(--op-lijn); border-radius: 7px; height: 36px; min-width: 3.25rem; cursor: pointer; flex: 0 0 auto; padding: 0 8px; }
.kit-op-spring { min-width: 2.5rem; border-color: transparent; }
.kit-op-snel:hover, .kit-op-spring:hover { color: var(--op-accent); border-color: var(--op-accent); }
.kit-op-speler-extra { flex-basis: 100%; font-size: 13px; color: var(--op-fout); }
.kit-op-speler-extra:empty { display: none; }

/* ---- lijst ---- */
.kit-op-lijst-items { list-style: none; margin: 0; padding: 0; }
.kit-op-lijst-items li { border-top: 1px solid var(--op-lijn); }
.kit-op-lijst-items li:first-child { border-top: 0; }
.kit-op-lijst-knop { display: flex; min-height: 44px; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; font: inherit; padding: 10px 12px; border: 0; background: none; color: var(--op-tekst); cursor: pointer; border-radius: 6px; }
.kit-op-lijst-knop:hover { background: var(--op-zweef); }
.kit-op-lijst-knop[aria-current="true"] { background: color-mix(in srgb, var(--op-accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--op-accent); }
.kit-op-lijst-titel { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.kit-op-lijst-feiten { font-size: 13px; color: var(--op-zacht); }
.kit-op-stand { font-size: 12px; color: var(--op-zacht); }
.kit-op-stand::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--op-zacht); margin-right: 6px; vertical-align: 1px; }
.kit-op-stand[data-stand="klaar"]::before { background: var(--op-ok); }
.kit-op-stand[data-stand="fout"]::before { background: var(--op-fout); }
.kit-op-stand[data-stand="wacht"]::before, .kit-op-stand[data-stand="bezig"]::before, .kit-op-stand[data-stand="uploaden"]::before { background: var(--op-accent); animation: kit-op-puls 1.2s ease-in-out infinite; }

/* ---- wachtkaart ---- */
.kit-op-wacht { display: block; }
.kit-op-wacht-rij { display: flex; align-items: center; gap: 10px; color: var(--op-accent); }
.kit-op-wacht-kop { font-size: 17px; color: var(--op-tekst); }
.kit-op-wacht p { margin: 6px 0 0; font-size: 14px; }
.kit-op-wacht .kit-op-knop { margin-top: 12px; }

/* ---- transcript ---- */
.kit-op-transcript { display: flex; flex-direction: column; gap: 16px; }
.kit-op-tr-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--op-zacht); }
.kit-op-legenda { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; }
.kit-op-spreker { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.kit-op-stip { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.kit-op-tr-status { flex: 1 1 auto; }
.kit-op-tr-status:empty { display: none; }
.kit-op-volg { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; margin-left: auto; }
.kit-op-volg input { width: 16px; height: 16px; margin: 0; accent-color: var(--op-accent); }
.kit-op-waarschuwing { margin: -4px 0 0; padding: 8px 12px; font-size: 14px; line-height: 1.4; color: var(--op-tekst); background: color-mix(in srgb, var(--op-fout) 10%, var(--op-vlak)); border: 1px solid color-mix(in srgb, var(--op-fout) 40%, transparent); border-left: 4px solid var(--op-fout); border-radius: var(--op-radius); }
/* meer-menu: details/summary, zodat het zonder script open en dicht gaat */
.kit-op-meer { position: relative; margin-left: 8px; }
.kit-op-meer-knop { list-style: none; min-height: 32px; padding: 0 10px; font-size: 13px; gap: 4px; }
.kit-op-meer-knop::-webkit-details-marker { display: none; }
.kit-op-meer[open] .kit-op-meer-knop { border-color: var(--op-accent); color: var(--op-accent); }
.kit-op-meer-lijst { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 15rem; padding: 4px; background: var(--op-vlak); border: 1px solid var(--op-lijn); border-radius: var(--op-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.kit-op-meer-item { display: block; width: 100%; min-height: 44px; padding: 0 12px; font: inherit; font-size: 14px; text-align: left; color: var(--op-tekst); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.kit-op-meer-item:hover, .kit-op-meer-item:focus-visible { background: var(--op-zweef); color: var(--op-accent); outline: none; }
.kit-op-tr-regels { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--op-zacht); margin-top: -8px; }
.kit-op-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.kit-op-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; line-height: 1.3; padding: 3px 8px; border: 1px solid var(--op-lijn); border-radius: 20px; color: var(--op-zacht); background: var(--op-vlak); }
.kit-op-chip-vanaf { color: var(--op-zacht); }
.kit-op-chip-weg { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px -6px -4px 0; font: inherit; color: var(--op-zacht); background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.kit-op-chip-weg:hover { color: var(--op-fout); }

.kit-op-beurten { display: flex; flex-direction: column; }
.kit-op-beurt {
  display: grid; grid-template-columns: var(--op-marge) minmax(0, 1fr); column-gap: 16px; row-gap: 4px;
  padding: 12px 16px; margin: 0 -16px; border-radius: var(--op-radius); box-shadow: inset 0 0 0 0 transparent; transition: background .15s, box-shadow .15s;
}
.kit-op-beurt.kit-op-actief { background: var(--op-achter); box-shadow: inset 3px 0 0 var(--op-accent); }
.kit-op-marge { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.kit-op-wie { font-size: 13px; line-height: 1.4; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
button.kit-op-wie { font-family: inherit; background: none; border: 0; padding: 0 2px; margin-left: -2px; cursor: pointer; border-radius: 4px; text-decoration: underline dotted transparent; text-underline-offset: 3px; transition: text-decoration-color .15s; }
button.kit-op-wie:hover, button.kit-op-wie:focus-visible { text-decoration-color: currentColor; }
.kit-op-s1 .kit-op-wie { color: var(--op-sp-1); } .kit-op-s2 .kit-op-wie { color: var(--op-sp-2); } .kit-op-s3 .kit-op-wie { color: var(--op-sp-3); } .kit-op-s4 .kit-op-wie { color: var(--op-sp-4); }
.kit-op-s5 .kit-op-wie { color: var(--op-sp-5); } .kit-op-s6 .kit-op-wie { color: var(--op-sp-6); } .kit-op-s7 .kit-op-wie { color: var(--op-sp-7); } .kit-op-s8 .kit-op-wie { color: var(--op-sp-8); }
.kit-op-beurt .kit-op-tijd { font: inherit; font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--op-zacht); background: none; border: 0; padding: 0; cursor: pointer; margin-top: 4px; }
.kit-op-beurt .kit-op-tijd:hover, .kit-op-beurt .kit-op-tijd:focus-visible { color: var(--op-accent); text-decoration: underline; }
.kit-op-bewerk-knop { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; margin: 0 0 0 -5px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--op-zacht); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.kit-op-beurt:hover .kit-op-bewerk-knop, .kit-op-bewerk-knop:focus-visible, .kit-op-beurt:focus-within .kit-op-bewerk-knop { opacity: 1; }
.kit-op-bewerk-knop:hover { background: var(--op-zweef); color: var(--op-accent); }
.kit-op-txt { grid-column: 2; margin: 0; font-size: var(--op-tekst-maat); line-height: var(--op-tekst-regel); color: var(--op-tekst); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 68ch; }
.kit-op-los .kit-op-txt { color: var(--op-zacht); }
.kit-op-transcript[data-bewerkbaar] .kit-op-txt { cursor: text; border-radius: 4px; margin: 0 -4px; padding: 0 4px; transition: background .15s; }
.kit-op-transcript[data-bewerkbaar] .kit-op-txt:hover { background: var(--op-zweef); }

/* naam wijzigen en beurt bewerken, in het blok zelf */
.kit-op-pop { grid-column: 2; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.kit-op-naam-veld { font: inherit; font-size: 13px; font-weight: 600; color: var(--op-tekst); height: 32px; width: 12ch; min-width: 6ch; max-width: 100%; padding: 0 8px; border: 1px solid var(--op-lijn); border-radius: 6px; background: var(--op-vlak); }
.kit-op-naam-veld:focus, .kit-op-bewerk-tekst:focus { outline: none; border-color: var(--op-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--op-accent) 25%, transparent); }
.kit-op-pop-was { font-size: 12px; color: var(--op-zacht); margin-left: 4px; white-space: nowrap; }
.kit-op-pop-was:empty { display: none; }
.kit-op-pop-knoppen { display: inline-flex; align-items: center; gap: 4px; }
.kit-op-pop-fout { flex-basis: 100%; font-size: 12px; line-height: 1.4; color: var(--op-zacht); }
.kit-op-pop-fout:empty { display: none; }
.kit-op-bewerk { grid-column: 2; display: flex; flex-direction: column; align-items: stretch; gap: 4px; max-width: 68ch; }
.kit-op-bewerk .kit-op-pop-knoppen { align-self: flex-end; }
.kit-op-bewerk-tekst { width: 100%; font: inherit; font-size: var(--op-tekst-maat); line-height: var(--op-tekst-regel); color: var(--op-tekst); padding: 4px 8px; border: 1px solid var(--op-lijn); border-radius: 6px; resize: vertical; overflow: hidden; min-height: 3.4em; background: var(--op-vlak); }

/* volledige tekst bewerken (in plaats van de beurten) en de dialoog Tekst vervangen */
.kit-op-paneel { display: block; }
.kit-op-volledig { display: flex; flex-direction: column; gap: 8px; }
.kit-op-volledig .kit-op-zacht { margin: 0; }
.kit-op-volledig-tekst { width: 100%; min-height: 24rem; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--op-tekst); padding: 8px 10px; border: 1px solid var(--op-lijn); border-radius: 6px; background: var(--op-vlak); resize: vertical; white-space: pre-wrap; }
.kit-op-volledig-tekst:focus, .kit-op-veld:focus { outline: none; border-color: var(--op-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--op-accent) 25%, transparent); }
.kit-op-dialoog { width: min(26rem, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--op-lijn); border-radius: 12px; background: var(--op-vlak); color: var(--op-tekst); box-shadow: 0 16px 48px rgba(0, 0, 0, .2); }
.kit-op-dialoog::backdrop { background: rgba(0, 0, 0, .35); }
.kit-op-dialoog-form { display: flex; flex-direction: column; gap: 10px; }
.kit-op-dialoog-form .kit-op-zacht { margin: 0; font-size: 13px; }
.kit-op-dialoog-kop { margin: 0; font-size: 17px; font-weight: 600; }
.kit-op-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--op-zacht); }
.kit-op-veld { font: inherit; font-size: 15px; font-weight: 400; color: var(--op-tekst); min-height: 44px; padding: 0 10px; border: 1px solid var(--op-lijn); border-radius: 6px; background: var(--op-vlak); width: 100%; }
.kit-op-dialoog-knoppen { justify-content: flex-end; margin-top: 4px; }
.kit-op-dialoog-form .kit-op-pop-fout { margin: 0; flex-basis: auto; }

/* voet: stand, versies, downloads, acties */
.kit-op-tr-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: 13px; color: var(--op-zacht); padding-top: 16px; border-top: 1px solid var(--op-lijn); }
.kit-op-tr-voet-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.kit-op-tr-stand[data-stand="goedgekeurd"] { color: var(--op-ok); font-weight: 600; }
.kit-op-tr-stand[data-stand="concept"] { color: var(--op-tekst); }
.kit-op-versies { font: inherit; font-size: 13px; color: var(--op-tekst); background: var(--op-vlak); border: 1px solid var(--op-lijn); border-radius: 6px; padding: 4px 8px; max-width: 16rem; }
.kit-op-tr-links { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.kit-op-tr-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--op-zacht); text-decoration: none; }
.kit-op-tr-links a:hover { color: var(--op-accent); text-decoration: underline; }

@media (max-width: 640px) {
  .kit-op-beurt { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 12px 8px; margin: 0 -8px; }
  .kit-op-marge, .kit-op-txt, .kit-op-pop, .kit-op-bewerk { grid-column: 1; }
  .kit-op-marge { flex-direction: row; align-items: baseline; gap: 12px; }
  .kit-op-beurt .kit-op-tijd { margin-top: 0; }
  .kit-op-bewerk-knop { opacity: 1; margin: 0; width: 44px; height: 44px; }
  .kit-op-volg span { display: none; }
  .kit-op-snel { display: none; }
}
/* tikdoelen op aanraakschermen: de knoppen in de naam- en bewerkpop minstens 44×44 (HIG) */
@media (max-width: 640px), (pointer: coarse) {
  .kit-op-pop .kit-op-ik, .kit-op-bewerk .kit-op-ik { width: 44px; height: 44px; }
  .kit-op-naam-veld { height: 44px; font-size: 16px; }
  .kit-op-pop { gap: 8px; }
  .kit-op-chip-weg { width: 32px; height: 32px; margin: -6px -8px -6px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-op-draai { animation-duration: 2.4s; }
  .kit-op-status[data-soort="opnemen"]::before, .kit-op-stand::before { animation: none; }
}