/* Editor-shell (golf 3, PAG-033, DSC-101).
 *
 * De frame-, handvat- en toolbarstijlen van de bewerklaag staan in
 * editor_chrome.css (ds-*); hier staat alleen wat de interactieve shell
 * daarbovenop nodig heeft: de Concept/Live-schakelaar wisselt van staat via
 * aria-pressed, en dat kan niet met utilities per staat in de ERB. */

.pe-toggle-optie {
  color: var(--color-subtle);
}
.pe-toggle-optie:hover {
  color: var(--color-black);
}
.pe-toggle-optie[aria-pressed="true"] {
  background: var(--color-black);
  color: var(--color-offwhite);
}

/* Sectie-controls (golf 4, PAG-047): de bovenste sectie heeft geen ↑-knop en
 * de onderste geen ↓-knop. De frames zijn de enige kinderen van het
 * document-element, dus first/last-child wijst ze exact aan; kan niet met
 * utilities omdat de knop in het gedeelde icon_button-component rendert. */
[data-page-editable="section"]:first-child [data-test-id="editor-sectie-omhoog"],
[data-page-editable="section"]:last-child [data-test-id="editor-sectie-omlaag"] {
  display: none;
}

/* UX-audit-wave2 (page-editor-widgets #5, PAG-122) + FEEDBACK ronde 4: de
 * MOVE-greep versleept naar een 2D-gridcel, wat op de éénkoloms mobiele layout
 * niet werkt en met touch nauwelijks (zie pages/editor/_mobile_notice, dezelfde
 * md-breakpoint). Onder md verbergen we de greep dus in plaats van een
 * onwerkbare affordance te tonen; de rest van de bewerklaag (selecteren,
 * toolbar-knoppen, de breedte/hoogte-dropdowns) blijft bruikbaar via tap. */
@media (width < 48rem) {
  .ds-widget-toolbar-grip {
    display: none;
  }
}