/* Reviewpaneel (26 okt 2026). Werkt met de rollen uit ontwerp.css (--kleur-*), dus licht en donker
   lopen vanzelf mee. Het podium voor video en slides is in beide weergaven donker: beeld beoordeel
   je op een neutrale, donkere achtergrond, net als in een montageprogramma. */

body.rv-open { overflow: hidden; }

.rv-bg {
  position: fixed; inset: 0; z-index: 900;
  background: rgb(var(--scrim-rgb, 6 0 46) / 0.32);
}
.rv-paneel {
  --rv-podium: #07051a;
  --rv-podium-rand: #1c1a33;
  --rv-mark: rgb(254 117 29 / 0.20);
  --rv-mark-sterk: rgb(254 117 29 / 0.42);
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(1180px, 100vw);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--kleur-achtergrond); color: var(--kleur-tekst);
  font-family: var(--font-basis);
  box-shadow: -24px 0 60px -20px rgb(var(--schaduw-rgb, 6 0 46) / 0.35);
  transform: translateX(100%); transition: transform 220ms cubic-bezier(.2,.8,.2,1);
  container-type: inline-size; container-name: rv;
}
.rv-paneel.rv-in { transform: none; }
.rv-paneel.rv-vol { width: 100vw; }
@media (prefers-reduced-motion: reduce) { .rv-paneel { transition: none; } }

/* ---------- kop ---------- */
.rv-kop { border-bottom: 1px solid var(--kleur-rand); padding: 12px 16px 0; display: grid; gap: 8px; }
.rv-laden { padding: 8px 0 14px; color: var(--kleur-tekst-2); }
.rv-kop-rij { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-kop-onder { justify-content: space-between; gap: 8px; }
.rv-titelblok { min-width: 0; flex: 1; }
.rv-klant { font-size: 12px; color: var(--kleur-tekst-2); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-fase-onder { display: none; }
.rv-titel { font-weight: 700; font-size: 16px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-fase {
  flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pil);
  background: var(--kleur-vlak-2); color: var(--kleur-tekst-2); white-space: nowrap;
}
.rv-kop-acties { display: flex; gap: 4px; flex: none; }
.rv-ic {
  width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--radius-s);
  border: 0; background: transparent; color: var(--kleur-tekst); cursor: pointer;
}
.rv-ic svg { width: 18px; height: 18px; }
.rv-ic:hover { background: var(--kleur-vlak-2); }
.rv-ic:disabled { opacity: .35; cursor: default; }
.rv-ic-klein { width: 30px; height: 30px; }
.rv-ic-klein svg { width: 15px; height: 15px; }
.rv-ic:focus-visible, .rv-knop:focus-visible, .rv-tab:focus-visible, .rv-versie:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: 2px; }

.rv-tabs { display: flex; gap: 2px; }
.rv-tab {
  position: relative; border: 0; background: none; cursor: pointer; color: var(--kleur-tekst-2);
  font: inherit; font-weight: 600; font-size: 14px; padding: 8px 12px 11px; display: inline-flex; align-items: center; gap: 6px;
}
.rv-tab.actief { color: var(--kleur-tekst); }
.rv-tab.actief::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--kleur-accent); }
.rv-tel {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pil); display: inline-grid; place-items: center;
  background: var(--kleur-accent); color: var(--kleur-op-accent); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rv-tel-zacht { background: var(--kleur-vlak-2); color: var(--kleur-tekst-2); }
.rv-versies { display: flex; gap: 4px; padding-bottom: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rv-versie {
  border: 1px solid var(--kleur-rand); background: transparent; color: var(--kleur-tekst-2); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pil); font-variant-numeric: tabular-nums;
}
.rv-versie.actief { background: var(--kleur-tekst); border-color: var(--kleur-tekst); color: var(--kleur-achtergrond); }

/* ---------- lijf: inhoud links, opmerkingen rechts (smal: onder elkaar) ---------- */
.rv-lijf { display: grid; grid-template-columns: minmax(0, 1fr); overflow: auto; min-height: 0; }
.rv-inhoud { position: relative; padding: 16px; min-width: 0; }
.rv-rail { display: flex; flex-direction: column; border-top: 1px solid var(--kleur-rand); background: var(--kleur-achtergrond); min-width: 0; }
@container rv (min-width: 820px) {
  .rv-lijf { grid-template-columns: minmax(0, 1fr) 360px; overflow: hidden; }
  .rv-inhoud { overflow: auto; padding: 20px 24px; }
  .rv-rail { border-top: 0; border-left: 1px solid var(--kleur-rand); overflow: hidden; }
  .rv-lijst { overflow: auto; flex: 1; }
}
@container rv (min-width: 1300px) { .rv-lijf { grid-template-columns: minmax(0, 1fr) 400px; } }

.rv-melding {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--st-amber-zacht); border: 1px solid var(--st-amber-rand); color: var(--kleur-tekst);
  border-radius: var(--radius-s); padding: 8px 12px; font-size: 13px; margin-bottom: 12px;
}
.rv-melding-zacht { background: var(--kleur-vlak); border-color: var(--kleur-rand); color: var(--kleur-tekst-2); }
.rv-leeg { color: var(--kleur-tekst-2); font-size: 14px; padding: 16px; margin: 0; }
.rv-leegblok { max-width: 520px; margin: 40px auto; text-align: center; display: grid; gap: 10px; justify-items: center; }
.rv-leegblok h4 { margin: 0; font-size: 17px; }
.rv-leegblok p { margin: 0; color: var(--kleur-tekst-2); line-height: 1.5; }
.rv-hint { color: var(--kleur-tekst-2); font-size: 12px; }
.rv-fout { color: var(--st-rood); font-size: 13px; min-height: 0; }
.rv-rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; }

@keyframes rv-draai { to { transform: rotate(360deg); } }
.rv-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--kleur-rand); border-top-color: var(--kleur-accent); animation: rv-draai 900ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .rv-spinner { animation-duration: 3s; } }

/* ---------- knoppen en invoer ---------- */
.rv-knop {
  font: inherit; font-weight: 700; font-size: 14px; border-radius: var(--radius-pil); cursor: pointer;
  padding: 9px 16px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  transition: background var(--duur), border-color var(--duur);
}
.rv-knop svg { width: 16px; height: 16px; }
.rv-knop:disabled { opacity: .5; cursor: progress; }
.rv-knop-hoofd { background: var(--kleur-accent); color: var(--kleur-op-accent); }
.rv-knop-hoofd:hover:not(:disabled) { background: var(--kleur-accent-hover); }
.rv-knop-licht { background: transparent; color: var(--kleur-tekst); border-color: var(--kleur-rand-sterk); }
.rv-knop-licht:hover:not(:disabled) { background: var(--kleur-vlak-2); }
.rv-klein { font-size: 13px; padding: 6px 12px; }
/* Besluit: rood = Revisie, groen = Akkoord (Niek, 26 okt 2026). Op donker zijn de statuskleuren licht, dus navy tekst. */
.rv-paneel { --rv-op-status: #fff; }
:root[data-thema="donker"] .rv-paneel { --rv-op-status: var(--vs-navy); }
.rv-knop-revisie { background: var(--st-rood); color: var(--rv-op-status); }
.rv-knop-akkoord { background: var(--st-groen); color: var(--rv-op-status); }
.rv-knop-revisie:hover:not(:disabled), .rv-knop-akkoord:hover:not(:disabled) { filter: brightness(1.08); }
.rv-voet-acties .rv-knop { padding: 10px 22px; font-size: 15px; }
.rv-link { background: none; border: 0; padding: 4px 6px; color: var(--kleur-tekst-2); font-weight: 600; font-size: 12px; border-radius: 6px; }
.rv-link:hover { color: var(--kleur-tekst); background: var(--kleur-vlak-2); }
.rv-link svg { width: 13px; height: 13px; }
.rv-link-rood:hover { color: var(--st-rood); }
.rv-in {
  font: inherit; font-size: 14px; color: var(--kleur-tekst); background: var(--kleur-achtergrond);
  border: 1px solid var(--kleur-rand-sterk); border-radius: var(--radius-s); padding: 9px 11px; width: 100%; min-width: 0;
}
.rv-in:focus { outline: 2px solid var(--kleur-focus); outline-offset: -1px; border-color: transparent; }
.rv-rij > .rv-in { flex: 1 1 220px; width: auto; }
.rv-vinkje { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.rv-vinkje input { accent-color: var(--vs-oranje); width: 16px; height: 16px; }

/* ---------- script ---------- */
.rv-scriptbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 auto 14px; max-width: 72ch; }
.rv-bron { font-size: 12px; font-weight: 700; color: var(--kleur-tekst-2); text-transform: uppercase; letter-spacing: .06em; }
.rv-scriptbalk .rv-hint { flex: 1; }
.rv-vel { max-width: 72ch; margin: 0 auto; display: grid; gap: 22px; padding-bottom: 40px; }
.rv-blok-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kleur-tekst-2); margin-bottom: 6px; }
.rv-blok-tekst { font-size: 16px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-blok-tekst::selection, .rv-blok-tekst *::selection { background: var(--rv-mark-sterk); }
.rv-mark { background: var(--rv-mark); color: inherit; border-bottom: 2px solid var(--kleur-accent); border-radius: 2px; cursor: pointer; padding: 0 1px; }
.rv-mark.af { background: var(--kleur-vlak-2); border-bottom-color: var(--kleur-rand-sterk); }
.rv-mark.gekozen { background: var(--rv-mark-sterk); }
.rv-mark.concept { background: transparent; border-bottom-style: dashed; }
.rv-zweef {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  background: var(--kleur-tekst); color: var(--kleur-achtergrond); border: 0; border-radius: var(--radius-pil);
  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--schaduw);
}
.rv-zweef svg { width: 15px; height: 15px; }
.rv-zweef[hidden] { display: none; }
.rv-bewerk { display: grid; gap: 14px; max-width: 72ch; margin: 0 auto; }
.rv-bewerk-blok { display: grid; gap: 6px; }
.rv-in-label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.rv-in-tekst { font-size: 15px; line-height: 1.6; resize: vertical; }
.rv-bewerk-acties { justify-content: flex-end; max-width: 72ch; margin: 14px auto 0; }
.rv-bewerk-acties .rv-vinkje { margin-right: auto; }
.rv-import { display: grid; gap: 10px; width: 100%; text-align: left; margin-top: 6px; }
.rv-import.compact { max-width: 72ch; margin: 0 auto 16px; }
.rv-uitslag { display: grid; gap: 8px; font-size: 14px; }
.rv-uitslag p { margin: 0; }
.rv-uitslag h5 { margin: 8px 0 0; font-size: 13px; }
.rv-los { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--kleur-rand); border-radius: var(--radius-s); }
.rv-los > div { min-width: 0; }

/* ---------- podium: video en slides ---------- */
.rv-podiumwrap { display: grid; gap: 0; border-radius: var(--radius-m); overflow: hidden; background: var(--rv-podium); border: 1px solid var(--rv-podium-rand); }
.rv-podium { position: relative; height: clamp(300px, 62vh, 880px); background: var(--rv-podium); }
.rv-vol .rv-podium { height: calc(100dvh - 200px); }
.rv-podium video, .rv-podium img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.rv-teken { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.rv-teken.actief { pointer-events: auto; cursor: crosshair; }
.rv-pijl { position: absolute; top: 50%; transform: translateY(-50%); background: rgb(0 0 0 / .45); color: #fff; z-index: 2; width: 40px; height: 40px; border-radius: 50%; }
.rv-pijl:hover { background: rgb(0 0 0 / .65); }
.rv-pijl-l { left: 10px; } .rv-pijl-r { right: 10px; }

.rv-bediening {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #0f0d26; color: #e9eaf2;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.rv-bediening .rv-ic { color: #e9eaf2; }
.rv-bediening .rv-ic:hover { background: rgb(255 255 255 / .08); }
.rv-speel { width: 38px; height: 38px; }
.rv-klok { white-space: nowrap; padding: 0 6px; min-width: 84px; }
.rv-tijdlijn { position: relative; flex: 1; height: 30px; cursor: pointer; touch-action: none; }
.rv-tijdlijn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgb(255 255 255 / .18); }
.rv-tijdlijn-vol { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--vs-oranje); width: 0; pointer-events: none; }
.rv-tijdlijn-knop { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; pointer-events: none; }
.rv-marker {
  position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; padding: 0; border-radius: 50%;
  border: 2px solid #0f0d26; background: var(--vs-oranje); cursor: pointer; z-index: 1;
}
.rv-marker.intern { background: #e3b04b; }
.rv-marker.af { background: #6b7587; }
.rv-marker.gekozen { transform: scale(1.35); background: #fff; }
.rv-snel { background: transparent; color: #e9eaf2; border: 1px solid rgb(255 255 255 / .2); border-radius: 6px; font: inherit; font-size: 12px; padding: 3px 4px; }
.rv-snel option { color: #000; }

.rv-strook { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; scroll-snap-type: x proximity; }
.rv-duim {
  position: relative; flex: none; width: 64px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px solid transparent; background: var(--rv-podium); scroll-snap-align: center;
}
.rv-duim.actief { border-color: var(--kleur-accent); }
.rv-duim img, .rv-duim video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.rv-duim-nr { position: absolute; left: 4px; bottom: 4px; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .7); }
.rv-duim-tel { position: absolute; right: 3px; top: 3px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--vs-oranje); color: var(--vs-navy); font-size: 10px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }

/* ---------- opmerkingen ---------- */
.rv-rail-kop { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--kleur-rand); }
.rv-rail-kop h4 { margin: 0; font-size: 14px; }
.rv-filter { margin-left: auto; display: inline-flex; background: var(--kleur-vlak-2); border-radius: var(--radius-pil); padding: 2px; }
.rv-filter button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--kleur-tekst-2); padding: 4px 10px; border-radius: var(--radius-pil); cursor: pointer; }
.rv-filter button.actief { background: var(--kleur-achtergrond); color: var(--kleur-tekst); box-shadow: 0 1px 2px rgb(var(--schaduw-rgb, 6 0 46) / .12); }
.rv-lijst-tussenkop { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--kleur-tekst-2); padding: 14px 16px 6px; }
.rv-opm { padding: 12px 16px; border-bottom: 1px solid var(--kleur-rand); cursor: pointer; display: grid; gap: 6px; }
.rv-opm:hover { background: var(--kleur-vlak); }
.rv-opm.gekozen { background: var(--kleur-vlak-2); }
.rv-opm.intern { background: color-mix(in srgb, var(--st-amber-zacht) 55%, transparent); }
.rv-opm.af { opacity: .62; }
.rv-opm.af .rv-tekst { text-decoration: line-through; text-decoration-color: var(--kleur-rand-sterk); }
.rv-opm-kop { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; flex-wrap: wrap; }
.rv-avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--kleur-tekst); color: var(--kleur-achtergrond); flex: none; }
.rv-avatar.klant { background: var(--kleur-accent); color: var(--kleur-op-accent); }
.rv-naam { font-weight: 700; }
.rv-rol { color: var(--kleur-tekst-2); }
.rv-datum { margin-left: auto; color: var(--kleur-tekst-2); font-variant-numeric: tabular-nums; }
.rv-pil { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-pil); background: var(--kleur-vlak-2); color: var(--kleur-tekst-2); }
.rv-pil.intern { background: var(--st-amber-zacht); color: var(--st-amber); border: 1px solid var(--st-amber-rand); }
.rv-waar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-tijdchip {
  font: inherit; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: var(--radius-pil);
  background: var(--kleur-tekst); color: var(--kleur-achtergrond); border: 0;
}
button.rv-tijdchip { cursor: pointer; }
.rv-tekenchip { display: inline-grid; place-items: center; color: var(--kleur-tekst-2); }
.rv-tekenchip svg { width: 14px; height: 14px; }
.rv-citaat { display: block; font-size: 13px; color: var(--kleur-tekst-2); border-left: 2px solid var(--kleur-accent); padding-left: 8px; quotes: "“" "”"; line-height: 1.45; }
.rv-citaat.weg { border-left-color: var(--kleur-rand-sterk); text-decoration: line-through; }
.rv-tekst { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-antwoord { margin-left: 28px; padding-left: 10px; border-left: 1px solid var(--kleur-rand); display: grid; gap: 3px; }
.rv-opm-acties { display: flex; gap: 2px; margin-left: 22px; flex-wrap: wrap; }

.rv-composer {
  position: sticky; bottom: 0; display: grid; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--kleur-rand); background: var(--kleur-achtergrond); margin-top: auto;
}
.rv-composer.intern { background: var(--st-amber-zacht); }
.rv-context { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 24px; }
.rv-context .rv-citaat { flex: 1 1 200px; }
.rv-tekenknop {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--kleur-rand-sterk); background: transparent; color: var(--kleur-tekst);
  font: inherit; font-size: 12px; font-weight: 700; border-radius: var(--radius-pil); padding: 3px 10px; cursor: pointer;
}
.rv-tekenknop svg { width: 13px; height: 13px; }
.rv-tekenknop.actief { background: var(--kleur-accent); border-color: var(--kleur-accent); color: var(--kleur-op-accent); }
.rv-kleuren { display: inline-flex; gap: 5px; }
.rv-kleur { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--kleur-achtergrond); box-shadow: 0 0 0 1px var(--kleur-rand-sterk); cursor: pointer; padding: 0; }
.rv-kleur.actief { box-shadow: 0 0 0 2px var(--kleur-tekst); }
.rv-composer-tekst { resize: vertical; min-height: 44px; }
.rv-composer-onder { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.rv-composer-onder .rv-vinkje { margin-right: auto; }
@media (hover: none) { .rv-sneltoets { display: none; } }

/* ---------- voet ---------- */
.rv-voet {
  display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kleur-rand); background: var(--kleur-vlak);
}
.rv-voet.leeg { display: none; }
.rv-voet-acties { display: flex; gap: 8px; margin-left: auto; }
.rv-besluit { font-size: 13px; font-weight: 600; color: var(--kleur-tekst-2); }
.rv-besluit.akkoord { color: var(--st-groen); }
.rv-besluit.revisie { color: var(--st-rood); }

.rv-toast {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 5; max-width: min(90%, 520px);
  background: var(--kleur-tekst); color: var(--kleur-achtergrond); padding: 10px 16px; border-radius: var(--radius-s);
  font-size: 14px; font-weight: 600; box-shadow: var(--schaduw); transition: opacity 400ms;
}
.rv-toast.weg { opacity: 0; }

/* ---------- telefoon ---------- */
@container rv (max-width: 560px) {
  .rv-kop { padding: 10px 12px 0; }
  .rv-fase-boven { display: none; }
  .rv-fase-onder { display: inline-block; margin-right: auto; font-size: 11px; padding: 3px 8px; max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
  .rv-titel { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; }
  .rv-kop-acties .rv-ic { width: 34px; height: 34px; }
  .rv-tab { padding: 8px 10px 11px; }
  .rv-voet-acties .rv-knop { white-space: nowrap; padding: 10px 12px; }
  .rv-scriptbalk .rv-hint { flex-basis: 100%; order: 3; }
  .rv-inhoud { padding: 12px; }
  .rv-podium { height: 58vh; }
  .rv-vol .rv-podium { height: calc(100dvh - 210px); }
  .rv-podiumwrap { border-radius: var(--radius-s); }
  .rv-bediening { gap: 2px; padding: 6px; }
  .rv-bediening .rv-ic-klein { display: none; }
  .rv-klok { min-width: 0; padding: 0 4px; }
  .rv-voet-acties { width: 100%; }
  .rv-voet-acties .rv-knop { flex: 1; justify-content: center; }
  .rv-blok-tekst { font-size: 15px; }
}
@media (max-width: 560px) { .rv-paneel { width: 100vw; } }

/* Knop op het bord: open opmerkingen bij een item */
.pl-review { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--kleur-rand-sterk); background: transparent; color: var(--kleur-tekst-2); border-radius: var(--radius-pil); font: inherit; font-size: 11px; font-weight: 700; padding: 2px 8px 2px 6px; margin-left: 6px; cursor: pointer; vertical-align: middle; }
.pl-review svg { width: 13px; height: 13px; }
.pl-review:hover { background: var(--kleur-vlak-2); color: var(--kleur-tekst); }
.pl-review.open { background: var(--kleur-accent); border-color: var(--kleur-accent); color: var(--kleur-op-accent); }