/* Fonts are loaded from app.py (external_stylesheets), not via @import. */

/* ---- palette ---- */
:root {
  --page-bg: #bbc5c0;
  --ink:     #1f282f;
  --accent:  #50727c;
  --edge:    #FFFFFF99;
}

/* ---- base ---- */
body {
  margin: 0;
  background-color: var(--page-bg);
  color: var(--ink);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.page {
  max-width: 90rem;
  margin: 0 auto;
  padding: 1.5rem 2rem 2.5rem;
}

h1 {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 1.25rem;
}

.hint {
  margin: 0 0 0.75rem;
  text-align: center;
  font-size: 0.95rem;
}

.controls {
  display: flex;
  justify-content: center;
  margin: 0 0 1.25rem;
}

/* ---- panels ----
   The wrapper owns the height; the graph fills it (height:100% in app.py).
   overflow + isolation stop a plot that is briefly drawn at the wrong size
   from painting over the neighbouring panel. svh does not change when a
   mobile address bar shows/hides; the plain vh line is the fallback. */
.panel {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  margin: 0 0 2rem;
}
.panel > .dash-graph,
.panel .js-plotly-plot {
  height: 100%;
  width: 100%;
}

.panel-map {
  height: 60vh;
  height: clamp(320px, 60svh, 720px);
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}
.panel-ts {
  height: 55vh;
  height: clamp(400px, 55svh, 620px);
}
.panel-total {
  height: 45vh;
  height: clamp(300px, 45svh, 480px);
  margin-bottom: 0;
}

/* ---- dropdown (id=area-dd) ---- */
#area-dd * {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
#area-dd .Select-control {
  background-color: var(--page-bg);
  border: 0.12rem solid var(--edge);
  border-radius: 0.5rem;
  box-shadow: none;
}
#area-dd .is-focused .Select-control {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
#area-dd .Select-value-label,
#area-dd .Select-placeholder {
  color: var(--ink);
}
#area-dd .Select-arrow {
  border-top-color: var(--ink);
}
#area-dd .Select-menu-outer {
  z-index: 10;               /* menu opens above the chart panel below */
  background-color: var(--page-bg);
  border: 0.12rem solid var(--edge);
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: none;
}
#area-dd .Select-option             { color: var(--ink); }
#area-dd .Select-option.is-focused  { background-color: #FFFFFF22; }
#area-dd .Select-option.is-selected { background-color: #FFFFFF33; }

.controls { position: relative; z-index: 5; }

/* ---- mobile ---- */
@media (max-width: 640px) {
  .page { padding: 0.75rem 0.6rem 1.25rem; }
  h1    { font-size: 1.4rem; }

  .panel-map   { height: 55vh; height: clamp(300px, 55svh, 520px); }
  /* taller: the legend sits below the plot */
  .panel-ts    { height: 70vh; height: clamp(460px, 75svh, 700px); }
  .panel-total { height: 50vh; height: clamp(300px, 50svh, 440px); }

  #area-dd { width: 100% !important; }
}