/* Standalone event component: uses the event's Plens semantic palette. */
.prp { margin: 24px 0 32px; padding: clamp(16px, 3vw, 28px); background: var(--mp-vertrekvlak); border-radius: var(--mp-r, 20px); color: var(--mp-inkt); min-width: 0; }
.prp *, .prp-grades * { box-sizing: border-box; }
.prp-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.prp h3, .prp-grades h3 { margin: 0; font: 800 clamp(22px, 3vw, 30px)/1.12 var(--mp-kop); letter-spacing: -.02em; }
.prp-tabs { display: flex; padding: 4px; gap: 4px; border: 1px solid var(--mp-lijn); background: var(--mp-bg); border-radius: 999px; }
.prp-tabs button { min-width: 72px; min-height: 48px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--mp-inkt); font: 700 16px var(--mp-tekst); cursor: pointer; }
.prp-tabs button[aria-pressed="true"] { color: var(--mp-blauw-inkt); background: var(--mp-blauw); }
.prp-source, .prp-note { color: var(--mp-zacht); font: 400 14px/1.5 var(--mp-tekst); margin: 12px 0 0; overflow-wrap: anywhere; }
.prp-chart { margin: 18px 0 0; }
.prp-chart svg { display: block; width: 100%; height: 238px; overflow: visible; touch-action: pan-y; }
.prp-grid { stroke: var(--mp-lijn); stroke-width: 1; }
.prp-boundary { stroke: var(--mp-zacht); stroke-width: 1; stroke-dasharray: 4 5; }
.prp-axis { fill: var(--mp-zacht); font: 16px var(--mp-tekst); }
.prp-line { fill: none; stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.prp-series-0 { stroke: var(--mp-blauw); }
.prp-series-1 { stroke: var(--mp-inkt); stroke-dasharray: 7 5; }
.prp-series-2 { stroke: var(--mp-zacht); stroke-dasharray: 2 5; }
.prp-marker { stroke: var(--mp-blauw); stroke-width: 2; vector-effect: non-scaling-stroke; }
.prp-legend, .prp-gradelegend { margin: 8px 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.prp-key { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--mp-inkt); }
.prp-swatch { width: 22px; display: inline-block; flex: 0 0 22px; border-top: 3px solid var(--mp-blauw); }
.prp-key-1 .prp-swatch { border-color: var(--mp-inkt); border-top-style: dashed; }
.prp-key-2 .prp-swatch { border-color: var(--mp-zacht); border-top-style: dotted; }
.prp-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.prp-position { font-family: var(--mp-kop); font-size: 21px; font-variant-numeric: tabular-nums; }
.prp-control input { grid-column: 1 / -1; width: 100%; min-height: 48px; accent-color: var(--mp-blauw); cursor: pointer; margin: 0; }
.prp-details { margin: 12px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.prp-details > div { padding-top: 12px; border-top: 1px solid var(--mp-lijn); min-width: 0; }
.prp-details dt { font-size: 14px; color: var(--mp-zacht); }
.prp-details dd { margin: 4px 0 0; font: 800 clamp(18px, 2.5vw, 25px)/1.2 var(--mp-kop); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.prp button:focus-visible, .prp input:focus-visible { outline: 3px solid var(--mp-blauw); outline-offset: 3px; }
.prp-grades { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--mp-lijn); }
.prp-gradebar { display: flex; width: 100%; height: 18px; overflow: hidden; border-radius: 8px; margin-top: 16px; background: var(--mp-vlak); }
.prp-grade-down { background: var(--mp-zacht); }
.prp-grade-flat { background: var(--mp-blauw); }
.prp-grade-up { background: var(--mp-inkt); }
.prp-grade-unknown { background: var(--mp-lijn); }
.prp-gradelegend { font-size: 14px; margin: 12px 0; }
@media (max-width: 540px) {
  .prp-control { grid-template-columns: 1fr; gap: 4px; }
  .prp-control input { grid-column: 1; }
  .prp-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prp-legend { flex-direction: column; gap: 8px; }
}
@media (forced-colors: active) {
  .prp-line, .prp-marker { stroke: CanvasText; }
  .prp-tabs button[aria-pressed="true"] { outline: 2px solid Highlight; }
  .prp-gradebar { border: 1px solid CanvasText; }
}

.prp-source a { color: inherit; text-underline-offset: 3px; }
.prp-explanation { margin-top: 16px; color: var(--mp-zacht); font: 400 14px/1.5 var(--mp-tekst); }
.prp-explanation summary { width: fit-content; min-height: 48px; display: flex; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.prp-explanation:focus-within { outline-offset: 4px; }
@media (max-width: 540px) { .prp-details > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* The combined workspace owns its heading and tabs; profiles are a plain plot. */
.prp--unified { margin: 0; padding: 0; border-radius: 0; background: transparent; }
.prp--unified[hidden] { display: none; }
.prp--unified .prp-source { margin: 0 0 4px; font-size: 13px; }
.prp--unified .prp-chart { margin-top: 8px; }
.prp--unified .prp-legend { gap: 6px 16px; margin: 0 0 12px; }
.prp--unified .prp-key { font-size: 13px; }
.prp--unified .prp-details { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 16px; margin: 4px 0 0; }
.prp--unified .prp-details dt { font-size: 13px; }
.prp--unified .prp-details dd { font-size: clamp(18px, 2.2vw, 24px); }
.prp--unified .prp-explanation { margin-top: 8px; font-size: 13px; }
.prp-shared-control { margin: 0; color: var(--mp-inkt); font-family: var(--mp-tekst); }
.prp-shared-control input:focus-visible { outline: 3px solid var(--mp-blauw); outline-offset: 3px; }
#weer-werkruimte .prp-grades { margin-top: 20px; padding-top: 16px; }
#weer-werkruimte .prp-grades h3 { font-size: 20px; }
@media (max-width: 700px) {
  .prp--unified .prp-details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
  .prp--unified .prp-legend { flex-direction: row; }
  .prp--unified .prp-details > div:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 380px) {
  .prp--unified .prp-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prp--unified .prp-details > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Waarden op jouw positie, direct onder de schuif (Alan, 30-10-2026). Eerst
   stonden ze onder de grafiek, met een bovenrand op een afgeronde tegel: dat
   gaf halve randen, en lange labels braken af in tegels van ongelijke hoogte.
   Nu: gelijke tegels met zachte diepte, korte labels op één regel, de eenheid
   klein naast het getal en de windrichting als pijl met windstreek. */
html body .mp dl.prp-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
html body .mp dl.prp-tegels[hidden] { display: none; }
/* Wint van de oude regel die de laatste oneven tegel over de volle breedte trok. */
html body .mp dl.prp-tegels > div:nth-child(n) { grid-column: auto; }
html body .mp dl.prp-tegels > div {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px 12px 13px;
  border: 0;
  border-radius: 16px;
  background: var(--mp-wit);
  box-shadow: 0 1px 2px rgba(10, 27, 61, .06), 0 6px 18px rgba(10, 27, 61, .07);
}
html body .mp dl.prp-tegels dt { overflow: hidden; color: var(--mp-zacht); font: 600 13px/1.25 var(--mp-tekst); white-space: nowrap; text-overflow: ellipsis; }
html body .mp dl.prp-tegels dd { display: flex; align-items: baseline; gap: 4px; min-width: 0; margin: 0; color: var(--mp-inkt); font: 800 22px/1.1 var(--mp-kop); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
html body .mp dl.prp-tegels dd small { color: var(--mp-zacht); font: 600 13px/1 var(--mp-tekst); letter-spacing: 0; }
html body .mp dl.prp-tegels dd .prp-leeg { color: var(--mp-zacht); font: 600 15px/1.2 var(--mp-tekst); letter-spacing: 0; }
html body .mp dl.prp-tegels .prp-sub { display: block; overflow: hidden; letter-spacing: 0; margin: 0; color: var(--mp-zacht); font: 400 12px/1.3 var(--mp-tekst); white-space: nowrap; text-overflow: ellipsis; }
.prp-pijl { flex: none; align-self: center; color: var(--mp-blauw); }
.prp-pijl path, .prp-pijlen path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.prp-pijlen { color: var(--mp-blauw); }
.prp-key-pijl { align-items: center; }
.prp-key-pijl .prp-pijl { width: 18px; height: 18px; }
@media (min-width: 701px) { html body .mp dl.prp-tegels.prp-tegels--vijf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 340px) { html body .mp dl.prp-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (forced-colors: active) { html body .mp dl.prp-tegels > div { border: 1px solid CanvasText; } .prp-pijl, .prp-pijlen { color: CanvasText; } }
/* In de werkruimte geen dubbele witruimte tussen de tegels en het paneel eronder. */
body .mp .mp-omgeving[data-enhanced] > .mp-sectie { padding-top: 20px; }
body .mp .mp-omgeving[data-enhanced] > .mp-sectie > .mp-sectiekop + * { margin-top: 0; }