/* === Color variables (map + table) === */
:root {
  --min:   Cyan;      /* Best */
  --q20:   Lime;      /* Near-Good */
  --q40:   DarkKhaki; /* Neutral */
  --q60:   Orange;    /* Near-Bad */
  --q80:   OrangeRed; /* Bad */
  --max:   Magenta;   /* Worst */
}

#loading-message { font-family: sans-serif; font-weight: bold; padding: 2em; text-align: center; }

#loading-text { font-size: 1.25em; margin-bottom: 1em; }

#progress-container { display: flex; align-items: center; justify-content: center; gap: 1em; }

#progress-start, #progress-end { font-size: 0.9em; min-width: 3ch; }

#progress-bar-wrapper { flex-grow: 1;  background: #eee; height: 1em; border-radius: 5px;
                        overflow: hidden; max-width: 600px; }

#progress-bar { height: 100%; width: 0%; background: steelblue; transition: width 0.1s ease; }

#sidebar legend { font-size: 0.85em; font-weight: bold; margin-bottom: 0.25em; }

/* === Map layout === */
#map-wrapper      { width: 100%; height: 600px; display: none; }
#map              { width: 100%; height: 100%; min-height: 600px; }
.leaflet-container{ height: 100%; }

#selected-tract   { font-weight: bold; padding: 0.5em 0; color: #444; }

/* === Summary table (unique) === */
#summary-table {
  width: 100%;
  margin-top: 1em;
  border-collapse: collapse;
  font-size: 0.65em;        /* shrink overall font */
  border: 1px solid #666;   /* dark outer border */
}

#summary-table th,
#summary-table td {
  border: 1px solid #bbb;   /* light grid lines */
  padding: 0.35em 0.8em;    /* compact spacing */
}

#summary-table th:first-child,
#summary-table td:first-child,
#summary-table th:nth-child(2),
#summary-table td:nth-child(2) {
  text-align: left;         /* left-align the first two columns */
}

/* Highlight for current variable row */
.current-var td {
  background: rgba(255, 255, 150, 0.1);
}

/* ─── Quantile strip on the highlighted (current-stat) row ───
   Table columns (1-based):
     1 Statistic   2 Description   3 Min   4 ≤ 20 %   5 ≤ 40 %   6 ≤ 60 %   7 ≤ 80 %   8 Max   9 Tract         */

.current-var td:nth-child(3){ background: var(--min ); }   /*  Min    */
.current-var td:nth-child(4){ background: var(--q20 ); }   /*  ≤ 20 % */
.current-var td:nth-child(5){ background: var(--q40 ); }   /*  ≤ 40 % */
.current-var td:nth-child(6){ background: var(--q60 ); }   /*  ≤ 60 % */
.current-var td:nth-child(7){ background: var(--q80 ); }   /*  ≤ 80 % */
.current-var td:nth-child(8){ background: var(--max ); }   /*  Max    */
/* Text colour for coloured cells */
/* ─── Text-colour helpers (light backgrounds → dark text; dark → light) ─── */
/* Right-align numeric cells in body */
#summary-table tbody td { text-align: right; }
#busy-overlay{
  position: fixed; inset: 0;           /* full-screen */
  background: rgba(255,255,255,.6);    /* translucent white */
  display:none; place-content:center;  /* hide by default */
  z-index: 9999;                       /* above everything */
  backdrop-filter: blur(2px);          /* subtle glass */
}

#busy-overlay .box{
  font: 700 1.2rem/1.4 system-ui;
  padding:.8em 1.2em; border-radius:6px;
  background:#333; color:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.2);
}
/*
#summary-table .qMin,
#summary-table .q20,
#summary-table .q40 { color:#000; }

#summary-table .q60,
#summary-table .q80 { color:#000; }

#summary-table .qMax { color:#fff; }
#main    { border: 1px solid red; }
#sidebar { border: 1px solid blue; }
*/