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: 6.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; }
@media (max-width: 40rem) { form .row { grid-template-columns: 1fr; row-gap: .3rem; } }
input, select, button { font: inherit; }
select { max-width: min(22rem, calc(100vw - 9rem)); }
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; }
.presets a { margin-right: .6rem; }
.presets { font-size: .9rem; }

#map { height: 60vh; min-height: 24rem; margin: .5rem 0 .25rem; background: #eee; }
.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%; margin: 0 .25em 0 .1em; vertical-align: baseline; border: 1px solid rgba(0,0,0,.35); }
.dot.football { background: #e0864f; }
.dot.hurling { background: #5aa06e; }
.dot.both { background: #9a8a7a; }
.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; }

details { margin: .5rem 0 1rem; }
summary { cursor: pointer; color: #555; }
#guide-body { font-size: .95rem; }
#guide-body h3 { font-weight: normal; font-size: 1.05rem; margin: .8rem 0 .2rem; }
#guide-body dl { margin: 0 0 0 .5rem; }
#guide-body dt { color: #555; margin-top: .3rem; }
#guide-body dd { margin: 0 0 0 1.2rem; }
#guide-body .tier { display: inline-block; min-width: 3.4em; color: #555; }
#guide-body a { color: inherit; }
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.venue { grid-column: 2; } }
td.when { white-space: nowrap; color: #555; }
td.venue a { color: inherit; }
td small a { color: inherit; }
.tag { color: #555; }
.tbc { color: #a33; font-size: .85em; }
.pop { font: .9rem/1.35 Georgia, serif; }
.pop b { display: block; margin-bottom: .2rem; }
.none, #season { color: #666; }
#meta { color: #666; font-size: .9rem; }
@media (prefers-color-scheme: dark) {
  td.when, #meta, .none, .tag, .legend, summary, #guide-body dt, #guide-body .tier, #season, .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; }
}