/* ja/calculators/latlong-distance-bearing/styles.css */

.es001-grid {
  display: grid;
  gap: 16px;
}

.es001-span-2 {
  grid-column: 1 / -1;
}

.es001-muted {
  color: #475569;
}

.es001-row {
  display: grid;
  gap: 12px;
}

.es001-hint {
  margin: 6px 0 0;
}

.es001-field {
  display: grid;
  gap: 6px;
}

.es001-inline-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.es001-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.es001-retry {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.es001-error {
  color: #b91c1c;
  min-height: 1.2em;
}

.es001-warning {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
  color: #92400e;
  padding: 10px 12px;
  border-radius: 12px;
}

.es001-summary {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.es001-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.es001-table th,
.es001-table td {
  padding: 10px 10px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

.es001-table th {
  width: 42%;
  text-align: left;
  color: #475569;
  font-weight: 600;
  background: #f8fafc;
}

.es001-table tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.7);
}

.es001-table tr:last-child th,
.es001-table tr:last-child td {
  border-bottom: none;
}

.es001-unit-note {
  display: grid;
  gap: 4px;
}

.es001-map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.es001-map-links a {
  font-weight: 600;
}

.es001-map-links a[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
  text-decoration: none;
  color: #64748b;
}

.es001-compass {
  display: grid;
  gap: 8px;
  align-items: start;
}

.es001-compass-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.es001-compass-toggle label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.es001-compass svg {
  width: 180px;
  max-width: 100%;
  height: auto;
}

.es001-compass .small {
  color: #475569;
}

@media (min-width: 980px) {
  .es001-grid {
    grid-template-columns: minmax(340px, 420px) 1fr;
    align-items: start;
  }
}