@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@250;300;350;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;600;700&display=swap");

#observablehq-sidebar-close {
  display: none !important;
}

:root {
  --sans-serif: "Work Sans", sans-serif;
  --serif: "Libre Baskerville", serif;
}
@media (min-width: 1200px) {
    .two-col {
        display: grid;
        grid-template-columns: 7fr 4fr;
        gap: 3rem;
    }
}


.subtitle {
  font-size: 0.8rem;
  color: var(--theme-foreground-muted);
  font-family: var(--sans-serif);
  margin-bottom: 1rem;
}

.card {
  margin: 0.3rem;
}

.card h2 {
  font-family: var(--sans-serif);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.0em;
  font-weight: 350;
}

.big { 
  font-family: var(--sans-serif); 
  font-size: 1.5rem;
}
.big.temp    { color: #e15759; }
.big.temp-lo { color: #c97a9c; }
.big.rh      { color: #4c78d9; }
.big.rh-lo   { color: #5ab5c8; }
.big.ws      { color: #41aa55; }
.big.ws-lo   { color: #3bbfb2; }
.big.wb      { color: #f28e2b; }
.big.wb-lo   { color: #e4a96f; }

.observablehq form {
  margin-bottom: 10px;
}

/* ── Date input label + field size ── */
.observablehq form label {
  font-size: 0.9rem;   /* adjust label size */
  /* letter-spacing: 0.02rem; */
  font-family: var(--sans-serif); 

}

.observablehq form input[type="date"] {
  font-size: 0.85rem;   /* adjust field text size */
  letter-spacing: 0.02rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.chart-card {
  border: none;
  background: transparent;
  padding: 0px;
  margin: 0px;
  margin-bottom: 10px;
}

.chart-row {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 0.3rem;
  align-items: center;
}

.stat-card-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

small.ref {
  display: block;
  font-family: var(--sans-serif);
  font-size: 0.72rem;
  color: var(--theme-foreground-muted);
  margin-top: 0.25rem;
}

/* ── Reload button ── */
.reload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 1.1rem;
  font-family: var(--sans-serif);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--theme-foreground);
  background: transparent;
  border: 1.5px solid var(--theme-foreground-faint);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.reload-btn:hover:not(:disabled) {
  border-color: var(--theme-foreground-muted);
  background: var(--theme-background-alt);
}
.reload-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.reload-btn svg {
  transition: transform 0.5s ease;
}
.reload-btn.loading svg {
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.reload-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.6rem;
  /* justify-content: flex-end; */
}

.reload-status {
  font-family: var(--sans-serif);
  font-size: 0.75rem;
  color: var(--theme-foreground-muted);
}

#observablehq-footer { display: none; }

.leaflet-container {
  cursor: crosshair;
}

.leaflet-dragging .leaflet-container {
  cursor: grabbing;
}

.control-hint {
    margin-top: 1rem;
}