/* location.css — styles specific to the Location page (location.html):
   the device selector, two-column map + details layout. Shared map,
   panel, diagnostics, and history styles come from base.css. */

.device-select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: 240px;
}
.device-select:focus { outline: none; border-color: var(--green); }

.loc-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  margin-bottom: 26px;
  align-items: start;
}
.loc-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.loc-side { display: grid; gap: 16px; }
.map-wrap--large { aspect-ratio: 16 / 10; margin-bottom: 0; }

@media (max-width: 900px) {
  .loc-layout { grid-template-columns: 1fr; }
}