/* The "Embed this map" button and dialog. */

.cm-embed-btn {
    padding: 8px 14px; font: 600 13px system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #003366; background: #fff; border: 1px solid #003366; border-radius: 999px; cursor: pointer;
}
.cm-embed-btn:hover { background: #f1ede3; }

/* Not for somebody standing in the port app: they are not about to paste an iframe into a website. */
@media (display-mode: standalone) { .cm-embed-btn { display: none; } }

.cm-embed-dialog {
    width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 18px 20px;
    border: 0; border-radius: 14px; background: #fff; color: #003366; overflow: auto;
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cm-embed-dialog::backdrop { background: rgba(0, 20, 40, .55); }
.cm-embed-dialog h2 { margin: 0 0 4px; font-size: 20px; }
.cm-embed-dialog h3 { margin: 14px 0 4px; font-size: 13px; }
.cm-embed-lede { margin: 0 0 12px; color: #5a6672; }
.cm-embed-close-form { position: absolute; top: 8px; right: 10px; margin: 0; }
.cm-embed-close { font-size: 26px; line-height: 1; background: none; border: 0; cursor: pointer; color: #003366; }

.cm-embed-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 18px; }
.cm-embed-fields { display: grid; gap: 10px; align-content: start; }
.cm-embed-fields label { display: grid; gap: 4px; font-weight: 600; font-size: 12px; }
.cm-embed-fields select, .cm-embed-fields input {
    padding: 8px 10px; font: 500 14px system-ui, sans-serif; border: 1px solid #d8d3c7; border-radius: 8px; background: #fff; color: #003366;
}
.cm-embed-wh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-embed-state { margin: 0; font-size: 12px; color: #5a6672; }

#cePreview { width: 100%; height: 280px; border: 1px solid #d8d3c7; border-radius: 8px; background: #f7f5f0; }
.cm-embed-out textarea {
    width: 100%; box-sizing: border-box; padding: 8px 10px; font: 12px/1.45 ui-monospace, Consolas, monospace;
    border: 1px solid #d8d3c7; border-radius: 8px; background: #f7f5f0; color: #003366; resize: vertical;
}
.cm-embed-out .cm-btn { margin: 6px 0; }
.cm-embed-status { min-height: 1.4em; margin: 6px 0 0; color: #15803d; font-weight: 600; }

@media (max-width: 720px) {
    .cm-embed-grid { grid-template-columns: 1fr; }
    .cm-embed-dialog { padding: 14px 14px 18px; border-radius: 14px 14px 0 0; margin-bottom: 0; }
}