/* lczkit map site. Dark, because an LCZ palette is built for a light figure on a dark ground. */

:root {
  --bg: #0d1013;
  --panel: #151a1f;
  --line: #262d35;
  --text: #e6eaef;
  --muted: #8f9aa6;
  --accent: #6aa9ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#map {
  position: absolute;
  inset: 0 340px 0 0;
}

#panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  overflow-y: auto;
  padding: 16px;
  background: var(--panel);
  border-left: 1px solid var(--line);
}

@media (max-width: 720px) {
  #map {
    inset: 0 0 45% 0;
  }
  #panel {
    top: 55%;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

h1 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.01em;
}

h2 {
  margin: 20px 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

h3 {
  margin: 16px 0 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

section {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

footer {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

label {
  display: block;
  margin: 10px 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

label.checkbox {
  display: flex;
  gap: 8px;
  align-items: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text);
}

select {
  width: 100%;
  padding: 6px 8px;
  background: #0f1418;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
}

.muted {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--accent);
  word-break: break-all;
}

.error {
  background: #3a1a1a;
  border: 1px solid #6b2b2b;
  border-radius: 4px;
  padding: 10px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0;
  font-size: 12px;
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex: 0 0 auto;
}

dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  margin: 0;
  font-size: 12px;
}

dt {
  color: var(--muted);
}

dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bar-row {
  display: grid;
  grid-template-columns: 26px 1fr 42px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.bar-label {
  color: var(--muted);
  text-align: right;
}

.bar-track {
  height: 9px;
  background: #0f1418;
  border-radius: 2px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

.bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ---------------------------------------------------------------- base map and opacity */

#base-picker {
  margin: 0 0 8px;
}

#base-section .checkbox {
  display: block;
  margin: 2px 0 6px;
}

input[type="range"] {
  width: 100%;
  margin: 4px 0 0;
  accent-color: var(--accent);
}

/* The value under the cursor. Reserves its line so the panel does not jump as the pointer moves
   on and off the map, which is more distracting than the readout is useful. */
.readout {
  min-height: 1.5em;
  margin: 4px 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------- disclosure */

details {
  margin: 10px 0;
  border-top: 1px solid var(--line);
}

summary {
  padding: 8px 0 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

summary:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.note {
  margin: 4px 0 8px;
  font-size: 11px;
}

/* A cell classified on one or two parameters is a different claim from one classified on seven,
   and the map paints them identically. */
.badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 7px;
  border: 1px solid #7a5a1e;
  border-radius: 10px;
  background: #2a2113;
  color: #e8c37a;
  font-size: 11px;
}

/* The no-value row on a continuous legend, set apart from the ramp it is not part of. */
.legend-row.nodata {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
}