/* Step 4: only the existing profile editor adopts Design System v1.
 * IDs and dynamic legacy classes are preserved for unchanged profile JS.
 */
.trilho-ds.bewerk-panel {
  display: none;
  margin-block-end: var(--trilho-space-6);
}
.trilho-ds.bewerk-panel.open { display: block; }
.trilho-ds .bewerk-titel {
  margin: 0 0 var(--trilho-space-6);
  font: 700 var(--trilho-text-lg)/1.3 var(--trilho-font-ui);
}
.trilho-ds .veld-groep { margin-block-end: var(--trilho-space-4); }
.trilho-ds .activiteiten-keuze {
  display: flex; flex-wrap: wrap; gap: var(--trilho-space-2);
}
/* Activity buttons are inserted by unchanged JS; preserve act-pill/actief.
 * This is a multi-select, not the single-choice segmented radio component.
 */
.trilho-ds .act-pill {
  min-block-size: var(--trilho-touch-large); min-inline-size: var(--trilho-touch);
  max-inline-size: 100%; padding: var(--trilho-space-2) var(--trilho-space-4);
  border: var(--trilho-border-width) solid var(--trilho-control-border);
  border-radius: var(--trilho-radius-control);
  background: var(--trilho-surface); color: var(--trilho-ink);
  font: 600 var(--trilho-text-base)/1.5 var(--trilho-font-ui);
  overflow-wrap: anywhere; cursor: pointer;
}
.trilho-ds .act-pill.actief {
  background: var(--trilho-forest); color: var(--trilho-surface);
  border-color: var(--trilho-forest);
  text-decoration: underline; text-underline-offset: .2em;
}
@media (hover: hover) {
  .trilho-ds .act-pill:hover { background: var(--trilho-canvas-deep); }
  .trilho-ds .act-pill.actief:hover { background: var(--trilho-forest-hover); }
}
.trilho-ds .opslaan-knop { margin-block-start: var(--trilho-space-2); }
.trilho-ds .opslaan-feedback {
  margin-block-start: var(--trilho-space-2); min-block-size: 1.5em;
  font-size: var(--trilho-text-sm); overflow-wrap: anywhere;
}
.trilho-ds .opslaan-feedback.ok { color: var(--trilho-success); }
.trilho-ds .opslaan-feedback.fout { color: var(--trilho-destructive); }
@media (max-width: 600px) {
  .trilho-ds.bewerk-panel { padding: var(--trilho-space-4); }
}
@media (forced-colors: active) {
  .trilho-ds .act-pill.actief { outline: 2px solid Highlight; outline-offset: -4px; }
}