html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111218;              /* dark page background */
  color: #e2e2e5;
}

#layout {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* Left sidebar – dark panel */
#sidebar {
  width: 270px;
  background: #151720;              /* slightly lighter than page bg */
  border-right: 1px solid #2b2e3a;
  padding: 12px 14px;
  box-sizing: border-box;
  font-size: 14px;
  color: #e2e2e5;
  overflow-y: auto;
}

#sidebar h2 {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

#sidebar h3 {
  margin: 12px 0 5px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a5a8b5;
}

.sidebar-section {
  padding: 6px 0 10px 0;
  border-top: 1px solid #262938;
}

.sidebar-section:first-of-type {
  border-top: none;
  padding-top: 2px;
}

/* Buttons: muted, archival feel */
#sidebar button {
  display: inline-block;
  margin: 3px 6px 3px 0;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 3px;
  border: 1px solid #3b3f50;
  background: #222638;
  color: #f4f4f6;
  cursor: pointer;
}

#sidebar button:hover {
  background: #313651;
}

/* Select box */
#sidebar select {
  width: 100%;
  padding: 4px 6px;
  font-size: 13px;
  border-radius: 3px;
  border: 1px solid #3b3f50;
  background: #1b1e2a;
  color: #f4f4f6;
  box-sizing: border-box;
}

#sidebar select:focus {
  outline: 1px solid #5f87ff;
  outline-offset: 1px;
}

/* Map area – light map against dark frame */
#map-container {
  flex: 1;
  position: relative;
  background: #111218;     /* same as page, frames the map */
}

#mapid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Leaflet controls: push off edges a bit */
.leaflet-top.leaflet-left {
  margin-left: 10px;
}
.leaflet-top.leaflet-right {
  margin-right: 10px;
}

/* Legend: slightly translucent on dark background */
.leaflet-control-legend {
  background: rgba(17, 18, 24, 0.9);
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
  border-radius: 4px;
  border: 1px solid #303447;
  color: #e2e2e5;
}

.leaflet-control-legend strong {
  display: block;
  margin-bottom: 3px;
  color: #f0f0f4;
}

.leaflet-control-legend .legend-row {
  white-space: nowrap;
  margin-bottom: 2px;
}
/* Branch nav list */
#branch-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.branch-item {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  margin: 1px 0;
  font-size: 13px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: transparent;
  color: #e2e2e5;
  text-align: left;
  cursor: pointer;
}

.branch-item:hover {
  background: rgba(255,255,255,0.03);
}

.branch-item.active {
  background: #222638;
  border-color: #3b3f50;
}

/* Colour swatch matching branch colours */
.branch-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  border: 1px solid #111218;
}

/* Use the same colours as branchColorMap */
.branch-swatch[data-branch-swatch="all"]      { background: #bbbbbb; }
.branch-swatch[data-branch-swatch="ROOT_JM"]  { background: #000000; }
.branch-swatch[data-branch-swatch="B1_HENRY"] { background: #e41a1c; }
.branch-swatch[data-branch-swatch="B2_JOHN"]  { background: #377eb8; }
.branch-swatch[data-branch-swatch="B3_JANE"]  { background: #4daf4a; }
.branch-swatch[data-branch-swatch="B4_MARTHA"]{ background: #984ea3; }
.branch-swatch[data-branch-swatch="B5_ANN"]   { background: #ff7f00; }
.branch-swatch[data-branch-swatch="B6_WILLIAM"]{ background: #a65628; }
.branch-swatch[data-branch-swatch="B7_JAMES"] { background: #f781bf; }
.branch-swatch[data-branch-swatch="B8_GEORGE"]{ background: #999999; }
    #top-buttons {
      width: 100%;
      text-align: right;
      padding: 4px 8px;
    }

    #top-buttons button {
      margin-left: 4px;
      color: #fff;
      background-color: #000;
    }

    .life-event-icon {
      text-shadow: 0 0 2px #fff;
    }

    .life-event-church {
      color: #1f77b4; /* church icon colour */
    }

    .life-event-house {
      color: #1f77b4; /* house icon colour (same or neutral, as you prefer) */
    }

    .gen-symbol {
      color: #666;
      text-shadow:
        0 0 2px #ffffff,
        0 0 4px #ffffff;
    }

.leaflet-control-legend {
  background: rgba(17, 18, 24, 0.9);
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
  border-radius: 4px;
  border: 1px solid #303447;
  color: #d0d0d5;           /* darker, more solid text */
}

.leaflet-control-legend strong {
  display: block;
  margin-bottom: 3px;
  color: #f8f8fa;           /* near-white heading */
}

.leaflet-control-legend .legend-row {
  white-space: nowrap;
  margin-bottom: 2px;
  color: #d0d0d5;           /* ensure rows inherit the stronger colour */
}

.church-events-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.church-events-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.church-events-table th,
.church-events-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid #e0e0e0;
}

.church-events-table th {
  background: #f6f6f6;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
}

.church-events-table tr:nth-child(even) td {
  background: #fafafa;
}

.church-events-table tr:hover td {
  background: #f1f7ff;
}

.church-events-table td:nth-child(1) {   /* Year */
  width: 4rem;
  white-space: nowrap;
}

.church-events-table td:nth-child(2) {   /* Person */
  font-weight: 600;
}

.church-events-table td:nth-child(3) {   /* Detail */
  font-style: italic;
}