/* The click popup (register D0.41): two bordered tables, a centred footer, the button. */
.maplibregl-popup { max-width: none; }
.maplibregl-popup-content { padding: 14px 18px 12px; border-radius: 4px; }
.circumstances { font: 15px/1.35 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: #222; }
.circumstances table { border-collapse: collapse; margin: 0 0 12px; }
.circumstances td, .circumstances th { border: 1px solid #dfe3e8; padding: 7px 10px; text-align: left; font-weight: 600; white-space: nowrap; }
.circumstances thead th { font-weight: 700; }
.circumstances tr.interior td { background: #e9ecef; }
.circumstances table.header td:first-child { min-width: 14em; }
.circumstances table.header td:last-child { min-width: 10em; }
.circumstances .footer { margin: 0 0 10px; text-align: center; color: #444; font-size: 14px; font-weight: 400; }
.circumstances .actions { margin: 0; text-align: center; }
.popup-button { font: inherit; font-weight: 600; padding: 8px 16px; border: 0; border-radius: 4px; background: #0d6efd; color: #fff; cursor: pointer; }
.popup-button:hover { background: #0b5ed7; }
.popup-button.secondary { background: #6c757d; }
.popup-button.secondary:hover { background: #5c636a; }

/* TEMPORARY (D0.41): the raw result panel, over the map's left edge; goes with the Raw button. */
#raw-panel {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    max-width: min(60%, 1100px); max-height: calc(100% - 24px); overflow: auto; box-sizing: border-box;
    padding: 10px 14px 12px; border-radius: 4px;
    background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    font: 14px/1.35 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: #222;
}
#raw-panel[hidden] { display: none; }
.raw-title { font-weight: 700; font-size: 15px; }
#raw-close { font: 20px/1 sans-serif; padding: 0 4px; border: 0; background: none; color: #555; cursor: pointer; }
#raw-text { margin: 0; font: 12px/1.45 Consolas, "Courier New", monospace; white-space: pre; }
.circumstances.pending, .circumstances.failed { padding: 4px 2px; font-weight: 400; }
.circumstances.failed { color: #b02a37; }

/* The lunar limb panel (D0.29): one polar plot per panel, over the map's right edge. */
#limb-panel {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    max-width: calc(100% - 24px); max-height: calc(100% - 24px); overflow: auto; box-sizing: border-box;
    padding: 10px 14px 12px; border-radius: 4px;
    background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    font: 14px/1.35 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: #222;
}
#limb-panel[hidden] { display: none; }
.limb-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
#limb-title { font-weight: 700; font-size: 15px; }
#limb-close { font: 20px/1 sans-serif; padding: 0 4px; border: 0; background: none; color: #555; cursor: pointer; }
#limb-close:hover { color: #000; }
#limb-plots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.limb-plot { margin: 0; text-align: center; }
.limb-plot canvas { display: block; }
.limb-plot figcaption { font-weight: 600; margin-top: 2px; }
.limb-legend { margin: 8px 0 0; text-align: center; color: #444; font-size: 13px; max-width: 380px; }
.limb-legend .lunar { color: #1a4fd6; font-weight: 600; }
.limb-legend .solar { color: #d62828; font-weight: 600; }
.limb-legend .zenith { color: #2a9d3f; font-weight: 600; }