/* 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; }
}