/* Visitor counter — vertical block (native, no external widget). Framework-
   independent plain CSS so it renders identically inside the Tailwind-based
   Footer.jsx and the standalone (no-Tailwind) journal-indexes.astro page.
   Two color variants via a modifier class: .yv-visitors-block.dark / .light */
.yv-visitors-block { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.yv-visitors-block .yv-vb-label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 .6rem;
}
.yv-visitors-block .yv-vb-count {
  font-family: Fraunces, Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 700;
  line-height: 1.1; margin: 0;
}
.yv-visitors-block .yv-vb-count-label { font-size: .75rem; margin: .2rem 0 1rem; }
.yv-visitors-block .yv-vb-countries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.yv-visitors-block .yv-vb-countries li { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; }
.yv-visitors-block .yv-vb-cflag { flex: none; font-size: 1rem; line-height: 1; }
.yv-visitors-block .yv-vb-cname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yv-visitors-block .yv-vb-ccount { flex: none; font-variant-numeric: tabular-nums; }

/* World map — simplified continent silhouettes + a bubble per country, sized by visit count */
.yv-visitors-block .yv-vb-map { position: relative; margin-top: .9rem; max-width: 320px; }
.yv-visitors-block .yv-vb-map-svg { display: block; width: 100%; height: auto; }
.yv-visitors-block .yv-vb-land path { fill: currentColor; opacity: .16; stroke: none; }
.yv-visitors-block .yv-vb-bubble {
  fill: #08b2e3; fill-opacity: .55; stroke: #08b2e3; stroke-width: 1.2; cursor: pointer;
  transition: fill-opacity .15s, transform .15s; transform-box: fill-box; transform-origin: center;
}
.yv-visitors-block .yv-vb-bubble:hover, .yv-visitors-block .yv-vb-bubble:focus {
  fill-opacity: .85; transform: scale(1.15); outline: none;
}
.yv-visitors-block .yv-vb-tooltip {
  position: absolute; transform: translate(-50%, -130%); pointer-events: none;
  background: #0f172a; color: #fff; font-size: .72rem; font-weight: 600;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  opacity: 0; transition: opacity .12s; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 5;
}
.yv-visitors-block .yv-vb-tooltip.show { opacity: 1; }

.yv-visitors-block.dark { color: rgba(255,255,255,.85); }
.yv-visitors-block.dark .yv-vb-label { color: #67d9f5; }
.yv-visitors-block.dark .yv-vb-count { color: #fff; }
.yv-visitors-block.dark .yv-vb-count-label { color: rgba(255,255,255,.5); }
.yv-visitors-block.dark .yv-vb-cname { color: rgba(255,255,255,.72); }
.yv-visitors-block.dark .yv-vb-ccount { color: rgba(255,255,255,.5); }
.yv-visitors-block.dark .yv-vb-land path { color: rgba(255,255,255,.4); }

.yv-visitors-block.light { color: #334155; }
.yv-visitors-block.light .yv-vb-label { color: #08b2e3; }
.yv-visitors-block.light .yv-vb-count { color: #0f172a; }
.yv-visitors-block.light .yv-vb-count-label { color: #64748b; }
.yv-visitors-block.light .yv-vb-cname { color: #334155; }
.yv-visitors-block.light .yv-vb-ccount { color: #64748b; }
.yv-visitors-block.light .yv-vb-land path { color: #64748b; }