/* tokens */
:root {
  --color-divider: #e8e4e0;
  --color-muted: #bbb;
  --color-dim: #aaa;
}

/* base */
body { background: #f5f2ec; color: #1a1a18; }
.sub { font-size: 12px; color: #888; }
.sub em { color: #555; font-style: normal; }
.flex-col { flex: 1; min-width: 0; }
.color-exp { color: var(--arc-export-color); }
.color-imp { color: var(--arc-import-color); }

/* map */
svg { display: block; width: 100%; height: auto; touch-action: none; }
.country { cursor: default; transition: opacity .12s; }
.country:hover { opacity: .7; }
body.dim-active #map, body.dim-active #map * { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><line x1='4' y1='4' x2='16' y2='16' stroke='%23555' stroke-width='2.5' stroke-linecap='round'/><line x1='16' y1='4' x2='4' y2='16' stroke='%23555' stroke-width='2.5' stroke-linecap='round'/></svg>") 10 10, auto !important; }
body.dim-active #map [data-dim-visible] { cursor: pointer !important; }

/* page chrome */
#page-heading { font-size: 20px; font-weight: 500; letter-spacing: -.3px; }
#page-heading-mob { font-size: 13px; font-weight: 500; letter-spacing: -.2px; line-height: 1.3; margin-bottom: 4px; }

/* page quote (pq-) */
#page-heading-sub, #page-heading-sub-mob { margin: 2px 0 4px; }
.pq-text { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 13px; color: #555; margin: 0 0 3px; line-height: 1.45; }
.pq-attr { font-size: 10px; color: #999; margin: 0; }
.pq-author { font-variant: small-caps; letter-spacing: 0.07em; color: #666; }
.pq-attr cite { font-style: italic; }
#zoom-hint { font-size: 10px; color: var(--color-dim); pointer-events: none; }
#legend { font-size: 11px; color: #888; }
#legend-bar { height: 10px; border-radius: 5px; overflow: hidden; flex: 1; max-width: 280px; }
#legend-ticks { display: flex; justify-content: space-between; width: 280px; font-size: 10px; color: var(--color-dim); margin-top: 3px; }
@media (max-width: 767.98px) {
  #legend-bar { max-width: 90px; }
  #legend-ticks { width: 90px; font-size: 8px; }
}

/* tooltip (tt-) */
#tooltip {
  position: absolute; pointer-events: none; display: none;
  background: #f5f5f5; border: 1px solid #e0dcd6;
  border-radius: 8px; padding: 12px 14px; font-size: 12px;
  color: #1a1a18; max-width: 540px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  z-index: 1000;
}
.tt-columns { display: flex; gap: 0; margin-top: 2px; }
.tt-vdiv { width: 1px; background: var(--color-divider); flex-shrink: 0; margin: 0 10px; }
.tt-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; justify-content: space-between; }
.tt-name-inner { display: flex; align-items: center; gap: 7px; }
.tt-pop { font-size: 10px; color: var(--color-muted); font-weight: normal; white-space: nowrap; }
.tt-rank { font-size: 10px; color: var(--color-muted); font-weight: normal; white-space: nowrap; margin-left: 6px; }
.tt-pop-rank { display: flex; align-items: center; margin-left: 8px; flex-shrink: 0; }
.tt-flag { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.tt-count { font-size: 28px; font-weight: 500; line-height: 1; margin: 4px 0 2px; }
.tt-count-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.tt-count-row .tt-count { margin-bottom: 0; }
.tt-count-row .tt-sub { margin-bottom: 0; }
.tt-label { font-size: 11px; color: #999; margin-bottom: 2px; }
.tt-not-qualified { font-size: 10px; color: var(--color-muted); font-style: italic; margin-bottom: 6px; }
#tooltip.tt-non-qualified { background: #e8e8e8; }
.tt-sub { font-size: 10px; color: var(--color-muted); margin-bottom: 6px; }
.tt-nations { font-size: 12px; color: #777; margin-bottom: 0; font-style: italic; border-bottom: 1px solid #c8c4be; padding-bottom: 6px; }
.tt-player { font-size: 10px; color: #555; padding: 3px 0; border-top: 1px solid #f0ede8; display: flex; justify-content: space-between; gap: 8px; }
.tt-nations + .tt-players .tt-player:first-child { border-top: none; }
.tt-nation { color: var(--color-dim); font-size: 10px; white-space: nowrap; }.tt-more-label { text-align: right; color: var(--color-muted); font-size: 10px; padding-top: 6px; }
.tt-players.tt-more::after { content: 'etc.'; display: block; text-align: left; font-style: italic; color: var(--color-muted); font-size: 10px; padding-top: 2px; }
.tt-divider { border-top: 1px solid var(--color-divider); margin: 8px 0 4px; }

/* player table (pt-) */
#player-table { margin-top: 4px; }
#pt-export-count, #pt-native-section, #pt-import-section { border-top: 2px solid var(--color-divider); margin-top: 24px; padding-top: 12px; }
.pt-title { font-size: 16px; font-weight: 500; }
.pt-country-flag { height: 20px; width: auto; border-radius: 2px; }
.pt-nation-header { display: flex; align-items: center; gap: 8px; padding: 10px 4px 4px; border-bottom: 1px solid #f0ede8; cursor: pointer; border-radius: 4px; }
.pt-nation-header:hover { background: rgba(0,0,0,.04); }
.pt-nation-header img { height: 14px; width: auto; border-radius: 2px; }
.pt-nation-name { font-size: 13px; font-weight: 500; color: #1a1a18; }
.pt-nation-count { font-size: 11px; color: var(--color-dim); }
.pt-player-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 4px 28px; border-bottom: 1px solid #f8f5f2; font-size: 12px; color: #444; }
.pt-player-row:last-child { border-bottom: none; }
.pt-caps { color: var(--color-dim); font-size: 11px; white-space: nowrap; }
.pt-wiki { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--color-muted); }
.pt-wiki:hover { border-bottom-color: #7b2d8b; color: #7b2d8b; }