/* Strona „Mapa – kalkulator azymutów”: tylko style dodatkowe, reszta w OgrafOpis.css */
.lead { color: var(--muted); margin: 0 0 14px; }

/* Mapa */
#map-container { width: 100%; height: clamp(380px, 68vh, 640px); border: 1px solid var(--rule); border-top: 3px solid var(--accent); }
#map { width: 100%; height: 100%; }

/* Panel sterowania pod mapą */
.controls { background: var(--panel); border: 1px solid var(--rule); border-top: 0; padding: 14px 16px; margin-bottom: 8px; }
.controls .row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.controls .field { flex: 1 1 280px; }
.controls label { display: block; font-weight: 600; color: var(--head); margin-bottom: 4px; font-size: 0.95rem; }
.controls input[type="text"] { width: 100%; font: inherit; font-family: var(--mono); padding: 8px 10px; border: 1px solid #b9c4cf; background: #fff; color: var(--text); border-radius: 2px; }
.controls input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.controls button { font: inherit; font-weight: 600; padding: 9px 18px; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 2px; cursor: pointer; }
.controls button:hover { background: #155a8c; }
.controls button.secondary { background: #fff; color: var(--head); border-color: #b9c4cf; }
.controls button.secondary:hover { background: var(--panel); border-color: var(--accent); }
.controls .hint { margin: 10px 0 0; font-size: 0.9rem; color: var(--muted); }
.controls .message { margin: 8px 0 0; min-height: 1.4em; font-size: 0.92rem; color: #b3261e; font-weight: 600; }

/* Okienko markera (Leaflet) */
.leaflet-popup-content .remove-btn { margin-top: 6px; font: inherit; font-weight: 600; padding: 4px 12px; background: #fff; color: #b3261e; border: 1px solid #b3261e; border-radius: 2px; cursor: pointer; }
.leaflet-popup-content .remove-btn:hover { background: #b3261e; color: #fff; }

/* Tabele wyników */
.tablewrap { overflow-x: auto; }
table { width: 100%; margin: 8px 0 14px; border-collapse: collapse; font-size: 0.93rem; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 10px; text-align: right; vertical-align: top; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; color: var(--head); border-bottom: 2px solid var(--head); text-align: right; }
th:first-child, td:first-child { text-align: left; }
td { font-family: var(--mono); font-size: 0.9em; }
td:first-child { font-family: var(--sans); font-size: 1em; }
.grid2 > div { min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0 28px; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1.6fr; } }