html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }

#map { position: absolute; inset: 0; }
#map svg {
  display: block;
  width: 100%;
  height: 100%;
  background: #eef3f7;
  cursor: grab;
  touch-action: none;
}
#map svg.dragging { cursor: grabbing; }

.country { fill: #d7dee3; stroke: #ffffff; stroke-width: 0.3; fill-rule: evenodd; }
.country.has-books { fill: #8fb8d6; cursor: pointer; }
.country.country-hovered, .country.country-selected { fill: #f2a154; }

.marker { cursor: pointer; }
.markers-group-hidden { display: none; }
.marker-pin-box, .marker-pin-tail { fill: #e4572e; }
.marker:hover .marker-pin-box, .marker:hover .marker-pin-tail { fill: #c8431c; }
.marker-count {
  fill: #ffffff; font-weight: bold; text-anchor: middle;
  dominant-baseline: central; pointer-events: none;
}

.marker-tooltip { pointer-events: none; }
.marker-tooltip-bg { fill: rgba(30, 30, 30, 0.85); }
.marker-tooltip-text { fill: #ffffff; text-anchor: middle; dominant-baseline: alphabetic; }

header {
  position: absolute; top: 0; left: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.9); padding: 0.2em 0.8em 0.4em 0.4em;
  border-bottom-right-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  display: flex; align-items: center; gap: 0.1em;
}
header span { flex-shrink: 0; font-size: 1.3em; }
header h1 { margin: 0; font-size: 1.1em; }
header h1 a { color: inherit; text-decoration: none; }
header h1 a:hover { text-decoration: underline; }

#book-panel {
  position: fixed; top: 0; right: 0; z-index: 1000;
  width: var(--book-panel-width, 25vw); height: 100%; overflow-y: auto;
  background: white; box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  padding: 0 1em 1em; box-sizing: border-box;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
#book-panel.open { transform: translateX(0); }
#book-panel img { width: 100%; border-radius: 4px; }
#book-panel-resizer {
  position: fixed; top: 0; right: calc(var(--book-panel-width, 25vw) - 6px);
  z-index: 1050;
  width: 12px; height: 100%;
  cursor: ew-resize; touch-action: none; background: transparent;
  transform: translateX(var(--book-panel-width, 25vw));
  transition: transform 0.25s ease;
}
#book-panel-resizer.open { transform: translateX(0); }
#book-panel-resizer::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 6px; height: 60px; border-radius: 2px;
  background: #ccc; transform: translate(-50%, -50%);
}
#book-panel-resizer:hover::after,
#book-panel-resizer.dragging::after { background: #2f6fab; }
#book-panel-toggle {
  position: fixed; top: 1em; right: 1em; z-index: 1100;
  width: 3em; height: 3em; border-radius: 50%; border: none;
  background: #2f6fab; color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: right 0.25s ease;
}
#book-panel-toggle svg { width: 1.3em; height: 1.3em; }
#book-panel-toggle.open { right: calc(var(--book-panel-width, 25vw) + 1em); }

/* Sits immediately left of #book-panel-toggle (3em button + 0.75em gap),
   and shifts in step with it via :has() rather than duplicating the "open"
   class, since this button's own toggled state is unrelated to the panel. */
#marker-toggle {
  position: fixed; top: 1em; right: calc(1em + 3.75em); z-index: 1100;
  width: 3em; height: 3em; border-radius: 50%; border: none;
  background: #2f6fab; color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: right 0.25s ease;
}
#marker-toggle svg { width: 1.3em; height: 1.3em; }
#marker-toggle.markers-off { background: #9aa5ad; }
body:has(#book-panel-toggle.open) #marker-toggle { right: calc(var(--book-panel-width, 25vw) + 1em + 3.75em); }
#book-detail-back {
  position: sticky; top: 0; z-index: 1;
  display: block; width: calc(100% + 2em);
  margin: 0 -1em 0.5em; padding: 0.75em 1em;
  border: none; background: white; color: #2f6fab;
  cursor: pointer; font-size: 0.9em;
}
.book-meta { color: #555; }
.book-edition { font-size: 0.85em; color: #888; }

.country-filter { margin-top: 1em; margin-bottom: 0.75em; }
#country-filter-toggle {
  width: 100%; text-align: left; padding: 0.5em; border: 1px solid #ccc;
  border-radius: 4px; background: #f7f7f7; cursor: pointer; font-size: 0.95em;
}
#country-filter-toggle .filter-arrow { font-size: 0.8em; }
#country-filter-options {
  list-style: none; margin: 0.25em 0 0; padding: 0;
  border: 1px solid #ddd; border-radius: 4px; max-height: 200px; overflow-y: auto;
}
#country-filter-options li.filter-option,
#country-filter-options .continent-select { padding: 0.5em; cursor: pointer; }
#country-filter-options li.filter-option:hover,
#country-filter-options .continent-select:hover { background: #f0f0f0; }

.continent-group { list-style: none; }
.continent-row { display: flex; align-items: center; }
.continent-select {
  flex: 1; display: block; width: 100%; text-align: left;
  background: none; border: none; font: inherit; color: inherit;
}
.continent-count, .country-count { color: #777; font-size: 0.85em; margin-left: 0.35em; }
.continent-expand {
  flex-shrink: 0; width: 2em; padding: 0.5em 0; text-align: center;
  background: none; border: none; cursor: pointer; font-size: 0.8em; color: #555;
}
.continent-countries { list-style: none; margin: 0; padding: 0; background: #fafafa; }
.continent-countries li.filter-option { padding-left: 1.75em; }

#book-list { list-style: none; margin: 0; padding: 0; }
#book-list li {
  display: flex; gap: 0.75em; align-items: center; padding: 0.6em 0;
  border-bottom: 1px solid #eee; cursor: pointer;
}
#book-list li img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
#book-list li div { display: flex; flex-direction: column; }
#book-list li span { font-size: 0.85em; color: #666; }

@media (max-width: 600px) {
  #book-panel {
    top: auto; bottom: 0; left: 0; right: 0; z-index: 1000;
    width: 100%; height: var(--book-panel-height, min(50vh, 600px));
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
    transform: translateY(100%);
  }
  #book-panel.open { transform: translateY(0); }
  #book-panel-resizer {
    top: auto; left: 0; right: 0;
    bottom: calc(var(--book-panel-height, min(50vh, 600px)) - 6px);
    width: 100%; height: 12px;
    cursor: ns-resize;
    transform: translateY(var(--book-panel-height, min(50vh, 600px)));
  }
  #book-panel-resizer.open { transform: translateY(0); }
  #book-panel-resizer::after { width: 60px; height: 6px; }
  #book-panel-toggle {
    top: auto; right: 1em; bottom: 1em;
    transition: bottom 0.25s ease;
  }
  #book-panel-toggle.open { right: 1em; bottom: calc(var(--book-panel-height, min(50vh, 600px)) + 1em); }

  #marker-toggle {
    top: auto; right: calc(1em + 3.75em); bottom: 1em;
    transition: bottom 0.25s ease;
  }
  body:has(#book-panel-toggle.open) #marker-toggle {
    right: calc(1em + 3.75em); bottom: calc(var(--book-panel-height, min(50vh, 600px)) + 1em);
  }

  /* While the panel covers the bottom half, give the map only the free
     top half so its starting view is centered there instead of being
     centered on the full screen and cut off by the panel. */
  body:has(#book-panel.open) #map { bottom: var(--book-panel-height, min(50vh, 600px)); }
}