* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; font-family: Georgia, 'Times New Roman', serif; }

#map { position: absolute; inset: 0; background: #b8cbd9; }

#brand {
  position: absolute; top: 16px; left: 16px; z-index: 5;
  background: rgba(250, 246, 237, 0.94); border: 1px solid #d8cdb6;
  border-radius: 10px; padding: 10px 16px;
  box-shadow: 0 2px 10px rgba(60, 45, 20, 0.18);
}
#brand h1 { font-size: 19px; color: #4a3a22; letter-spacing: 0.02em; }
#brand p { font-size: 12px; color: #8a7a5c; margin-top: 2px; }

/* search */
#search-wrap { position: relative; margin-top: 9px; width: min(268px, 72vw); }
#search-input {
  width: 100%; font-family: Georgia, serif; font-size: 13.5px;
  color: #3d2f18; background: #fffdf7; border: 1px solid #c9bda2;
  border-radius: 8px; padding: 6px 10px; outline: none;
}
#search-input:focus { border-color: #8b2d2d; }
#search-input::placeholder { color: #a89877; }
#search-results {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 20;
  width: min(340px, 90vw); max-height: min(58vh, 460px); overflow-y: auto;
  background: #fffdf7; border: 1px solid #d8cdb6; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(60, 45, 20, 0.25);
}
#search-results.hidden { display: none; }
.sr-group {
  font-family: sans-serif; font-size: 10.5px; font-weight: bold;
  letter-spacing: 0.1em; text-transform: uppercase; color: #8a7a5c;
  background: #f3ecdd; padding: 5px 10px 3px;
  border-bottom: 1px solid #e7dcc4;
  position: sticky; top: 0;
}
.sr-item { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #f3ecdd; }
.sr-item:hover, .sr-item.active { background: #f3e7cf; }
.sr-name { font-size: 13.5px; color: #2f2410; display: block; }
.sr-meta { font-size: 11px; color: #8a7a5c; display: block; margin-top: 1px; }
.sr-empty { font-size: 12.5px; color: #9a8a68; font-style: italic; padding: 10px; }

/* stats */
#stats-btn {
  margin-top: 7px; border: none; background: none; cursor: pointer;
  font-family: sans-serif; font-size: 11px; color: #6b4c2a;
  text-decoration: underline dotted; padding: 0;
}
#stats-btn:hover { color: #8b2d2d; }
#stats-modal {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(40, 30, 15, 0.45);
  display: flex; align-items: center; justify-content: center;
}
#stats-modal.hidden { display: none; }
#stats-card {
  position: relative; width: min(480px, 92vw); max-height: 84vh;
  overflow-y: auto; background: #faf6ed; border: 1px solid #d8cdb6;
  border-radius: 12px; padding: 22px 26px;
  box-shadow: 0 8px 30px rgba(30, 20, 5, 0.4);
}
#stats-close {
  position: absolute; top: 8px; right: 12px; border: none;
  background: none; font-size: 24px; color: #8a7a5c; cursor: pointer;
}
#stats-close:hover { color: #4a3a22; }
#stats-card h2 { font-size: 20px; color: #4a3a22; margin-bottom: 10px; }
.stats-lead { font-size: 13.5px; line-height: 1.5; color: #3d2f18; margin-bottom: 10px; }
.stats-table { border-collapse: collapse; margin: 6px 0 12px; width: 100%; }
.stats-table td { padding: 3.5px 0; font-size: 13.5px; color: #3d2f18;
  border-bottom: 1px solid #eee3cd; }
.stats-table td.n { text-align: right; padding-right: 12px; width: 58px;
  font-variant-numeric: tabular-nums; font-weight: bold; color: #8b2d2d; }
.stats-table .hint { font-size: 11.5px; color: #8a7a5c; }
.stats-domains { font-size: 12px; color: #6b5a3a; line-height: 1.5; }

/* search-jump target card */
.card.hl { border-color: #8b2d2d; box-shadow: 0 0 0 1px #8b2d2d33; }

#year-control {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; gap: 10px;
  background: rgba(250, 246, 237, 0.94); border: 1px solid #d8cdb6;
  border-radius: 12px; padding: 10px 18px;
  box-shadow: 0 2px 10px rgba(60, 45, 20, 0.18);
}
#year-slider { width: min(46vw, 520px); accent-color: #8b2d2d; }
#year-label {
  font-size: 26px; font-weight: bold; color: #4a3a22;
  min-width: 76px; text-align: center; font-variant-numeric: tabular-nums;
}
#year-minus, #year-plus {
  border: 1px solid #c9bda2; background: #f3ecdd; color: #4a3a22;
  width: 28px; height: 28px; border-radius: 50%; font-size: 16px;
  cursor: pointer; line-height: 1;
}
#year-minus:hover, #year-plus:hover { background: #e7dcc4; }

#credits {
  position: absolute; bottom: 6px; left: 10px; z-index: 5;
  font-size: 11px; color: #5a4f3a; font-family: sans-serif;
  background: rgba(250, 246, 237, 0.8); padding: 2px 8px; border-radius: 6px;
}
#credits a { color: #6b4c2a; }

/* world basemap labels (majors per slice, count scales with zoom) */
.world-label {
  font-family: Georgia, serif; font-size: 11px; color: #5a4a2e;
  text-shadow: 0 0 3px #f4eddc, 0 0 3px #f4eddc, 0 0 3px #f4eddc;
  pointer-events: none; white-space: nowrap; text-align: center;
  letter-spacing: 0.03em;
}
.world-label.major { font-size: 12.5px; font-weight: bold; color: #3d2f18; }

/* polity label markers */
.polity-label {
  font-family: Georgia, serif; font-size: 13px; font-weight: bold;
  color: #3d2f18; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
  pointer-events: none; white-space: nowrap; text-align: center;
}
.polity-label small { display: block; font-weight: normal; font-size: 10px; }

/* side panel */
#panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 10;
  width: min(460px, 96vw); overflow-y: auto;
  background: #faf6ed; border-left: 1px solid #d8cdb6;
  box-shadow: -4px 0 18px rgba(60, 45, 20, 0.25);
  padding: 18px 20px 30px;
}
#panel.hidden { display: none; }
#panel-close {
  position: absolute; top: 10px; right: 12px; border: none;
  background: none; font-size: 26px; color: #8a7a5c; cursor: pointer;
}
#panel-close:hover { color: #4a3a22; }

#panel h2 { font-size: 22px; color: #4a3a22; margin-bottom: 2px; padding-right: 30px; }
#panel .polity-meta { font-size: 12px; color: #8a7a5c; margin-bottom: 10px; }
#panel .polity-meta a { color: #6b4c2a; }
#panel .approx-note {
  font-size: 11px; color: #9a8a68; font-style: italic; margin-bottom: 14px;
}

.panel-year {
  font-size: 13px; color: #8b2d2d; font-weight: bold;
  font-family: sans-serif; letter-spacing: 0.15em; margin-bottom: 2px;
}
.overview {
  font-size: 14.5px; line-height: 1.5; color: #3d2f18;
  margin: 10px 0 14px; padding: 10px 12px;
  background: #f3ecdd; border-left: 3px solid #c9a13b; border-radius: 4px;
}

.tabs { display: flex; gap: 4px; margin: 4px 0 14px; flex-wrap: wrap; }
.tab {
  border: 1px solid #c9bda2; background: #f3ecdd; color: #6b5a3a;
  font-family: sans-serif; font-size: 12.5px; padding: 6px 13px;
  border-radius: 16px; cursor: pointer;
}
.tab:hover { background: #e7dcc4; }
.tab.active {
  background: #8b2d2d; border-color: #8b2d2d; color: #faf6ed;
  font-weight: bold;
}

.pope-chip {
  font-size: 13px; color: #4a3a22; margin-bottom: 12px;
  background: #f3ecdd; border-radius: 6px; padding: 6px 10px;
  border: 1px solid #e2d8c2;
}
.pope-chip a { color: #6b4c2a; }
.pope-chip span { color: #8a7a5c; font-size: 12px; }

.cards { display: flex; flex-direction: column; gap: 10px; }
.card {
  background: #ffffff; border: 1px solid #e2d8c2; border-radius: 8px;
  padding: 10px 13px; box-shadow: 0 1px 3px rgba(60, 45, 20, 0.07);
}
.card header { font-size: 15px; font-weight: bold; color: #2f2410; }
.card header a { color: #2f2410; text-decoration: none; border-bottom: 1px dotted #b8a880; }
.card header a:hover { color: #8b2d2d; }
.card .yrs { font-weight: normal; font-size: 12px; color: #8a7a5c; margin-left: 4px; }
.card p { font-size: 13.5px; line-height: 1.45; color: #4a3f2c; margin-top: 4px; }
.card.auto { opacity: 0.88; border-style: dashed; }

.empty-note {
  font-size: 13.5px; color: #9a8a68; font-style: italic;
  padding: 14px 4px;
}