/* ===== dr_rota_mapping_modal_html (HTML form) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.

   NOT ROOT-SCOPED, on purpose. window.pxShowOverlay
   MOVES #dr-mapping-overlay out of this form's root into the shared layout's
   #px-modal-portal while the pop-up is open, so a :where(.dr-mapping-host)
   ancestor would stop matching exactly when the rules are needed.
   #dr-mapping-message names only its own id and travels with the overlay for
   the same reason. Both ids are this section's own, so nothing leaks beyond
   the pop-up.

   No second class is needed anywhere. #dr-mapping-overlay .px-modal is (1,1,0)
   and #dr-mapping-overlay .px-modal-body in the media block is (1,1,0),
   against the dependency's .px-modal and .px-modal-body at (0,1,0), so both
   win on specificity and neither depends on which sheet loads later - which
   matters, because ensure_theme_injected() appends the dependency's sheet to
   <head> at runtime, after every head_html link. The select,
   th, small and td rules are (1,0,1) for the same reason.

   --dr-accent is NOT declared here. This pop-up has no .dr-info button, so it
   reads the token nowhere; drivers.css declares it on #dr-mapping-overlay for
   the one case that reads it.

   The [hidden] rule is an attribute rule, not a class, so the designer canvas
   hides the notice and the table exactly as the browser does and no live-class
   gate is needed. */

#dr-mapping-overlay .px-modal { width:93vw; max-height:90vh; }
#dr-mapping-overlay th, #dr-mapping-overlay small, #dr-mapping-overlay .dr-keyline { color:var(--px-text-muted); font-size:12px; }
#dr-mapping-overlay select { width:100%; min-width:0; padding:8px; color:var(--px-text-primary); background:var(--px-bg-card); border:1px solid var(--px-border); border-radius:var(--px-radius); }
#dr-mapping-overlay .dr-deleted { color:var(--px-text-muted); background:var(--px-bg-elevated); }
#dr-mapping-overlay [hidden] { display:none !important; }
#dr-mapping-message { color:var(--px-warning-ink); }
@media(max-width:600px) {
  #dr-mapping-overlay .px-modal-body { padding:12px; }
  #dr-mapping-overlay td { overflow-wrap:anywhere; }
  #dr-mapping-overlay th:first-child { width:40%; }
}