/* Graph container scales fluidly */
/* frontend.css */
/* DO NOT REMOVE COMMENTS FROM THIS FILE */
.grapham-plugin { position: relative; }
.wp-block-grapham-diagram > .grapham-graph-container { width: 100%; min-height: 400px; position: relative; }
.grapham-graph-container svg { width: 100% !important; height: 100% !important; }

/* MicroModal default overrides */
.grapham-plugin #grapham-modal { display: none; }
.grapham-plugin #grapham-modal[aria-hidden="false"] { display: block; }

/* Overlay */
.grapham-plugin .modal__overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; }

/* Container */
.grapham-plugin .modal__container { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #fff; max-width: 100%; width: calc(100% - 40px); box-sizing: border-box; padding: 26px; border-radius: 3px; z-index: 1001; overflow: hidden; }

/* Content area (scroll if too tall) */
.grapham-plugin .modal__content { max-height: calc(100vh - 120px); overflow-y: auto; }

/* Close button */
.grapham-plugin .modal__close { position: absolute; top: 2px; right: 2px; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* Close icon */
.grapham-plugin .modal__close::after { content: '×'; display: block; color: #333; }

.grapham-plugin .grapham-mapping-block { display: none; }

.grapham-plugin .grapham-mapping-cellid { display: none; }

/* Responsive adjustments */
@media (max-width: 600px) {
    .grapham-plugin .modal__container { top: 0; width: calc(100% - 40px); padding: 15px; }
}