body { max-width: 60rem; margin: 1.5rem auto; padding: 0 1rem; font: 1rem/1.5 Georgia, "Times New Roman", serif; color: #1a1a1a; background: #fff; }
@media (prefers-color-scheme: dark) { body { color: #e6e6e6; background: #141414; } a { color: #9cc4ff; } }
h1 { font-weight: normal; font-size: 1.9rem; margin: 0 0 .4rem; }
h2 { font-weight: normal; font-size: 1.2rem; margin: 1.5rem 0 .25rem; border-bottom: 1px solid #ccc; }
.draft { color: #a33; font-style: italic; }

/* Filters: one row per kind. A small label in a fixed column on the left, the controls
   wrapping in a block of their own on the right; on a phone the label sits above the controls. */
form { margin: 1rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
form .row { display: grid; grid-template-columns: 5rem 1fr; align-items: baseline; padding: .5rem 0; }
form .row + .row { border-top: 1px solid #eee; }
.rowlabel { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #777; }
.ctl { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; min-width: 0; }
.ctl label { white-space: nowrap; }
select { max-width: 100%; }
@media (max-width: 40rem) { form .row { grid-template-columns: 1fr; row-gap: .3rem; } }
input, select, button { font: inherit; }
button.clear, .nudge button { font-size: .85rem; padding: .1rem .5rem; border: 1px solid #bbb; border-radius: .25rem; background: transparent; color: inherit; cursor: pointer; }
button.clear:hover, .nudge button:hover { border-color: #666; }
.nudge { white-space: nowrap; }
#q { flex: 1 1 12rem; padding: .2rem .4rem; }
.presets { font-size: .9em; }
.presets a { margin-right: .7rem; }

#map { height: 60vh; min-height: 24rem; margin: .5rem 0 .25rem; background: #eee; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
td { padding: .25rem .5rem .25rem 0; vertical-align: top; }
@media (max-width: 40rem) { tr { display: grid; grid-template-columns: max-content 1fr; column-gap: .6rem; padding: .3rem 0; } td { padding: 0; } td.city { grid-column: 2; } }
td.when { white-space: nowrap; color: #555; }
td.city a { color: inherit; }
.tag { font-size: .8em; color: #555; }
details { margin: 0 0 .75rem; font-size: .95rem; }
summary { cursor: pointer; color: #555; }
.pyramid { margin: .3rem 0 0; padding-left: 1.4rem; }
.pyramid li { margin: .15rem 0; }

/* Legend: three colours (who plays), dot size for the level. */
.legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 1rem; font-size: .85rem; color: #555; }
.legend span { white-space: nowrap; }
.legend .key { margin-right: -.4rem; }
.dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; border: 1px solid rgba(0,0,0,.4); margin: 0 .25em 0 .1em; vertical-align: baseline; }
.dot.men { background: #3b6ea5; }
.dot.women { background: #c0562a; }
.dot.both { background: #7a5c99; }
.legend i.size { display: inline-block; border-radius: 50%; background: #999; border: 1px solid #333; vertical-align: middle; margin-right: .25em; }

/* Labels beside dots, shown only where they do not collide (see placeLabels in app.js). */
.leaflet-tooltip.marker-label { background: rgba(255,255,255,.85); border: 1px solid rgba(0,0,0,.15); border-radius: 3px; padding: 1px 5px; font: 600 .75rem/1.3 Georgia, serif; color: #1a1a1a; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.2); pointer-events: none; }
.leaflet-tooltip.marker-label::before { display: none; }

.pop { font: .9rem/1.35 Georgia, serif; }
.pop b { display: block; margin-bottom: .2rem; }
.none { color: #666; }
#meta { color: #666; font-size: .9rem; }
@media (prefers-color-scheme: dark) {
  td.when, .tag, #meta, .none, summary, .legend, .rowlabel { color: #999; }
  h2 { border-color: #444; } form { border-color: #333; } form .row + .row { border-color: #2a2a2a; } #map { background: #222; }
  button.clear, .nudge button { border-color: #555; }
}