/* Scope Compass - Wat is er nieuw (sprint PU, ticket PU5): het scherm, de stip op het hulpmenu en de
   eenmalige melding. Eigen bestand, zodat styles.css (een hotspot) erbuiten blijft. Wit, één indigo
   accent (de stip, het label Nieuw en de links); geen statuskleuren. Leesbreedte zoals een artikel.
   De telefoonregels staan onderaan in één blok binnen (max-width: 640px): marges van 16px, tikdoelen
   van 44px en de melding boven de onderbalk. */

/* ---- de stip: op het ?-icoon, in het hulpmenu, op de hamburger en in de lade ---- */
.nw-stip-dragend { position: relative; }
.nw-stip {
  position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 999px;
  background: var(--pri); box-shadow: 0 0 0 2px var(--surface); pointer-events: none;
}
.topbar-hamburger .nw-stip { top: 9px; right: 9px; }
.bn-item .nw-stip { top: 8px; right: calc(50% - 16px); }
.nw-tel {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--pri-soft); color: var(--pri-text); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center;
}
.nw-stip-rij { position: static; display: inline-block; margin-left: auto; box-shadow: none; }
.menu-item kbd.nw-kbd {
  margin-left: auto; font: inherit; font-size: 12px; color: var(--text-3); background: var(--sunken);
  border: 1px solid var(--border-2); border-radius: 4px; padding: 0 5px; line-height: 18px;
}
.nw-hulpmenu { min-width: 250px; }

/* ---- het scherm ---- */
.nw-pagina { max-width: 760px; display: flex; flex-direction: column; gap: 24px; }
.nw-kop { display: flex; align-items: center; gap: 16px; }
.nw-kop-tekst { min-width: 0; }
.nw-h { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.nw-kop-tekst p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.nw-kop-link { color: var(--pri-text); text-decoration: none; white-space: nowrap; }
.nw-kop-link:hover { text-decoration: underline; }

.nw-editie {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh);
  padding: 24px; display: flex; flex-direction: column; gap: 24px;
}
.nw-editie-kop { display: flex; flex-direction: column; gap: 6px; }
.nw-editie-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.nw-nieuw-pil {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--pri-soft); color: var(--pri-text); font-size: 12px; font-weight: 600;
}
.nw-editie-titel { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.nw-intro { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }

.nw-punt { display: flex; flex-direction: column; gap: 16px; }
.nw-punt + .nw-punt { padding-top: 24px; border-top: 1px solid var(--border); }
.nw-punt-tekst { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nw-punt-titel { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.nw-uitleg { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.nw-uitleg p { margin: 0 0 8px; }
.nw-uitleg p:last-child { margin-bottom: 0; }
.nw-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  color: var(--pri-text); font-weight: 600; font-size: 14px; text-decoration: none; touch-action: manipulation;
}
.nw-link .ic { font-size: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.nw-link:hover .ic { transform: translateX(2px); }
.nw-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 4px; }
.nw-link.is-klein { font-size: 13px; font-weight: 500; }

/* Het beeld: altijd 16:9, nooit hoger. Met een video een poster met een rustige afspeelknop. */
.nw-media {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--border); background: var(--sunken); padding: 0;
}
.nw-media img, .nw-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.nw-media video { object-fit: contain; background: #0f1015; }
button.nw-speel { cursor: pointer; font: inherit; color: inherit; touch-action: manipulation; }
.nw-speel:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.nw-speel-knop {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); color: var(--pri);
  box-shadow: 0 6px 24px rgba(16, 24, 40, .18); transition: transform var(--dur-fast) var(--ease-out);
}
.nw-speel-knop .ic { font-size: 26px; margin-left: 3px; display: inline-flex; }
.nw-speel-knop svg path { fill: currentColor; }
.nw-speel:hover .nw-speel-knop { transform: scale(1.04); }
.nw-speel:active .nw-speel-knop { transform: scale(.97); }
.nw-speel-label {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--text); font-size: 13px; font-weight: 500;
}

.nw-ook { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 20px; }
.nw-ook-kop { margin: 0 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.nw-ook ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.nw-ook li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
/* Het icoon zoals in de mail: indigo, 20px, op de hoogte van de eerste regel. */
.nw-ook-icoon { flex: none; display: inline-flex; font-size: 20px; color: var(--pri); margin-top: 1px; }
.nw-ook-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.nw-ook li b { color: var(--text); font-weight: 600; }

/* ---- leeg, laden, fout ---- */
.nw-leeg {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.nw-leeg h3 { margin: 4px 0 0; font-size: 16px; }
.nw-leeg p { margin: 0; color: var(--text-2); font-size: 14px; }
.nw-fout {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--red-soft);
}
.nw-fout > .ic { font-size: 20px; color: var(--red-strong); flex: none; }
.nw-fout > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; font-size: 14px; }
.nw-fout span { color: var(--text-2); }
.nw-skel { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.nw-skel-blok, .nw-skel-regel {
  display: block; border-radius: 6px; background: linear-gradient(90deg, var(--sunken) 0%, var(--border) 50%, var(--sunken) 100%);
  background-size: 200% 100%; animation: nw-schemer 1.4s ease-in-out infinite;
}
.nw-skel-blok.is-beeld { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); }
.nw-skel-regel { height: 12px; width: 100%; }
.nw-skel-regel.is-kort { width: 45%; height: 16px; }
@keyframes nw-schemer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- de eenmalige melding ---- */
.nw-melding {
  position: fixed; right: 24px; bottom: 24px; z-index: 1200; width: min(380px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
@starting-style { .nw-melding { opacity: 0; transform: translateY(8px); } }
.nw-melding-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nw-melding-tekst { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.nw-melding-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.nw-melding-x { flex: none; margin: -4px -4px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .nw-skel-blok, .nw-skel-regel { animation: none; }
  .nw-melding, .nw-link .ic, .nw-speel-knop { transition: none; }
}

/* ---- telefoon ---- */
@media (max-width: 640px) {
  .nw-pagina { gap: 16px; }
  .nw-kop { gap: 12px; align-items: flex-start; }
  .nw-h { font-size: 20px; }
  .nw-kop-link { display: flex; align-items: center; min-height: var(--touch); width: max-content; }
  .nw-editie { padding: 16px; gap: 20px; }
  .nw-editie-titel { font-size: 18px; }
  .nw-editie-meta, .nw-speel-label, .nw-kop-tekst p { font-size: 14px; }
  .nw-punt + .nw-punt { padding-top: 20px; }
  .nw-punt-titel { font-size: 16px; }
  .nw-uitleg, .nw-intro { font-size: 16px; }
  .nw-link { min-height: var(--touch); font-size: 15px; }
  .nw-link.is-klein { font-size: 14px; }
  .nw-ook { padding: 12px 16px; }
  .nw-ook li { font-size: 15px; }
  .nw-speel-knop { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .nw-melding { left: 16px; right: 16px; width: auto; bottom: calc(var(--bottomnav-h) + 12px + var(--safe-b)); }
  .nw-melding-knoppen .btn { flex: 1; min-height: var(--touch); }
  .nw-melding-x { width: var(--touch); height: var(--touch); margin: -12px -12px 0 0; }
  .side-acties .navtab .nw-stip-rij { margin-left: auto; }
}