#clubmain {
  display: flex;
  height: calc(100vh - 54px);
}
#map { flex: 1 1 60%; background: #1a1d22; }
#side {
  flex: 1 1 40%;
  max-width: 520px;
  overflow-y: auto;
  padding: 10px 14px;
  border-left: 1px solid #2a2e35;
}
#side h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6a7280;
  margin: 14px 0 6px;
}
.cards { display: flex; flex-direction: column; gap: 6px; }
.card {
  background: #1e2228;
  border: 1px solid #2a2e35;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
}
.card .t { color: #e8ecf2; font-weight: 600; }
.card .m { color: #8a919c; font-size: 12px; }
.card a { color: #7da7e0; text-decoration: none; }
.card a:hover { text-decoration: underline; }
.kind {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0 5px;
  border-radius: 3px;
  margin-right: 6px;
  background: #2e4a68;
  color: #cfe0f2;
}
.kind.swap { background: #6a4a2e; color: #f2e0cf; }
.kind.exam { background: #5a2e68; color: #e8cff2; }
.kind.social { background: #2e6848; color: #cff2dc; }
.kind.operating { background: #68562e; color: #f2eacf; }
/* nets had no colour of their own and wore the base (meeting-blue) chip,
   so a month view full of weekly nets read as a month full of meetings.
   Purple, matching their map pins. meeting gets its own too, so the base
   colour stops meaning anything by accident. */
.kind.net { background: #4a3658; color: #e0cff0; }
.kind.meeting { background: #2e4a68; color: #cfe0f2; }
/* Deployed live while the data is still being built. Eight states so far, and
   plenty of clubs with no events at all -- a visitor has no way to tell a
   thin listing from a complete one, so say it where it cannot be missed.
   Pinned to the header's top right rather than left in flow, because #clubctl
   wraps to its own row at most widths and would carry the badge down with it. */
header { position: relative; padding-right: 205px; }
.wip {
  position: absolute;
  top: 9px;
  right: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  color: #f0b169;
  background: #2b2015;
  border: 1px solid #6b4a20;
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
  cursor: help;
}
/* Too narrow to reserve a corner: let it sit in the flow instead of covering
   the controls it is warning about. */
@media (max-width: 820px) {
  header { padding-right: 14px; }
  .wip { position: static; }
}

#clubctl { display: flex; align-items: center; gap: 10px; font-size: 13px; }
#clubctl select {
  font: 12px system-ui, sans-serif;
  padding: 2px 6px;
  border: 1px solid #3a404a;
  border-radius: 4px;
  background: #1e2228;
  color: #d8dce2;
}
#clubctl label { display: inline-flex; align-items: center; gap: 4px; color: #8a919c; }
.empty { color: #6a7280; font-size: 12px; font-style: italic; }
.warn { color: #e08585; font-size: 12px; }
#clubctl input {
  font: 12px ui-monospace, monospace;
  padding: 2px 6px;
  border: 1px solid #3a404a;
  border-radius: 4px;
  background: #1e2228;
  color: #d8dce2;
}
/* dark-friendly leaflet chrome */
.leaflet-container { background: #1a1d22; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #1e2228; color: #d8dce2; }

/* --- side panel tabs --- */
#sidetabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #2a2e35;
  margin-bottom: 8px;
}
#sidetabs a {
  padding: 5px 11px;
  font-size: 13px;
  color: #8a919c;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
#sidetabs a:hover { color: #d8dce2; }
#sidetabs a.on { color: #e8ecf2; border-bottom-color: #2e4a68; }

/* --- the shared filter ---
   Above the tabs because it governs the map and every list, not just the
   agenda it used to live inside. Each button carries its map pin colour, so
   the row doubles as the legend the three removed checkboxes used to be. */
#showfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid #2a2e35;
}
#showfilter button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 11px system-ui, sans-serif;
  padding: 2px 9px 2px 7px;
  border: 1px solid #3a404a;
  border-radius: 10px;
  background: #1e2228;
  color: #8a919c;
  cursor: pointer;
}
#showfilter button.on { background: #2e4a68; border-color: #4a6a8a; color: #e8ecf2; }
#showfilter button .swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  /* Dimmed while off, so the row still reads as a legend but the ticked
     ones are obvious at a glance. */
  opacity: .35;
}
#showfilter button.on .swatch { opacity: 1; }
#showfilter button.sweep { margin-left: auto; padding: 2px 9px; color: #6a7280; }

/* Shared with the filter above it: the map view narrows every list, not just
   the calendar, so the switch cannot live inside one pane. */
#viewbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 12px;
  color: #8a919c;
}
#viewbar label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* How much of the list the map view is hiding. Without it a short list reads
   as thin data rather than as a tight zoom. */
.listnote { color: #6a7280; font-size: 11.5px; padding-bottom: 2px; }

.unhide { color: #7da7e0; }

.daygroup { margin-bottom: 12px; }
.dayhead {
  position: sticky;
  top: 0;
  background: #14161a;
  padding: 3px 0;
  font-size: 12px;
  font-weight: 600;
  color: #7da7e0;
  border-bottom: 1px solid #2a2e35;
  margin-bottom: 5px;
}
.dayhead .rel { color: #6a7280; font-weight: 400; margin-left: 6px; }
.slot { display: flex; gap: 9px; padding: 4px 0; align-items: baseline; }
.slot .time {
  flex: 0 0 62px;
  color: #8a919c;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.slot .body { flex: 1; min-width: 0; }
.slot .t { color: #e8ecf2; }
.slot .m { color: #8a919c; font-size: 12px; }
.slot.recurring .time::after { content: " ⟳"; color: #4a5260; }

/* --- feed builder --- */
.feedform { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.feedform label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #8a919c; }
.feedform input {
  font: 13px ui-monospace, monospace;
  padding: 4px 7px;
  border: 1px solid #3a404a;
  border-radius: 4px;
  background: #1e2228;
  color: #d8dce2;
}
.feedform .hint { color: #6a7280; font-size: 11px; }
#f-kinds { display: flex; flex-wrap: wrap; gap: 4px; }
#f-kinds button {
  font: 11px system-ui, sans-serif;
  padding: 2px 8px;
  border: 1px solid #3a404a;
  border-radius: 10px;
  background: #1e2228;
  color: #8a919c;
  cursor: pointer;
}
#f-kinds button.on { background: #2e4a68; border-color: #4a6a8a; color: #e8ecf2; }
.feedurl {
  background: #1a1d22;
  border: 1px solid #2a2e35;
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.feedurl code {
  font: 12px/1.5 ui-monospace, monospace;
  color: #94c97f;
  word-break: break-all;
}
.feedbtns { display: flex; align-items: center; gap: 10px; }
.feedbtns button, .feedbtns a {
  font: 12px system-ui, sans-serif;
  padding: 4px 11px;
  border: 1px solid #3a404a;
  border-radius: 4px;
  background: #1e2228;
  color: #d8dce2;
  cursor: pointer;
  text-decoration: none;
}
.feedbtns button:hover, .feedbtns a:hover { background: #2a3038; }

/* --- agenda <-> map linkage --- */
#agendabar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #8a919c;
}
#agendabar label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
#agendanote { color: #6a7280; }

.slot { cursor: default; border-radius: 4px; }
.slot:hover { background: #1e2228; }
/* An entry with no position can't be located on the map; say so quietly
   rather than letting it look like a hover that does nothing. */
.slot.unplaced .time { opacity: .5; }
.slot.unplaced:hover { background: transparent; }
.approx { color: #6a7280; cursor: help; }

/* hover ping: the ring pulses so it reads as transient, not a new pin */
.hoverping { animation: ping 1.1s ease-out infinite; transform-origin: center; }
@keyframes ping {
  0%   { opacity: 1;  stroke-width: 3; }
  70%  { opacity: .35; stroke-width: 1; }
  100% { opacity: 1;  stroke-width: 3; }
}
.hovertip {
  background: #1e2228;
  border: 1px solid #3a404a;
  color: #e8ecf2;
  font: 12px system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.hovertip::before { border-top-color: #3a404a; }
@media (prefers-reduced-motion: reduce) {
  .hoverping { animation: none; }
}
.grid {
  font: 12px ui-monospace, monospace;
  color: #94c97f;
  padding: 1px 6px;
  border: 1px solid #2a2e35;
  border-radius: 4px;
  cursor: help;
}
.ok { color: #94c97f; }

/* club focus chip: "everything from this club" is active */
.chipfilter {
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid #4a6a3e;
  border-radius: 10px;
  background: #223026;
  color: #b8d9a8;
}
.chipfilter a { color: #d8ecc8; text-decoration: none; margin-left: 4px; }

/* month-grid calendar view */
#calmode button, #monthnav button {
  font: 12px system-ui, sans-serif;
  padding: 1px 8px;
  border: 1px solid #3a404a;
  border-radius: 4px;
  background: #1e2228;
  color: #d8dce2;
  cursor: pointer;
}
#calmode button.on { background: #2e4a68; border-color: #4a6a88; }
#monthnav { margin-left: 8px; }
#mlabel { font-size: 13px; font-weight: 600; margin: 0 4px; }
#calgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 8px;
}
.mdow { font-size: 11px; color: #8a919c; text-align: center; padding: 2px 0; }
.mcell {
  min-height: 64px;
  border: 1px solid #262b33;
  border-radius: 4px;
  padding: 2px;
  overflow: hidden;
  background: #171a1f;
}
.mcell.mout { opacity: .4; }
.mcell.mtoday { border-color: #94c97f; }
.mday { font-size: 11px; color: #8a919c; margin-bottom: 2px; }
.mev {
  font-size: 10.5px;
  line-height: 1.35;
  padding: 0 3px;
  margin-bottom: 1px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.mmore { font-size: 10px; color: #8a919c; cursor: help; }

/* co-located map pins are deconflicted into a ring by clubs.js drawPins;
   the hairlines back to the anchor are plain Leaflet polylines */

/* time-range picker */
#viewbar label { margin-right: 10px; }
#timerange, #customrange input {
  font: 12px system-ui, sans-serif;
  background: #14171b;
  color: #d8dce2;
  border: 1px solid #3a404a;
  border-radius: 4px;
  padding: 1px 4px;
}

/* rf map: the position-confidence legend. Blue means the geocoder
   resolved the site the source named; dark yellow means the position is
   an estimate (a town centre, or provenance we never recorded). The
   dashed chip stands for a town boundary polygon. */
#rflegend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px;
            color: #8a919c; margin-top: 4px; }
#rflegend span { display: inline-flex; align-items: center; gap: 5px; }
#rflegend .chip-town {
  background: rgba(184,149,47,.15);
  border: 1px dashed #b8952f;
}

/* rf map: the modelled-coverage colour ramp. Built from the API so it
   cannot drift from the ramp the rasters were painted with. */
#signallegend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px;
  font-size: 12px; color: #c4cad4; margin-top: 4px;
  padding: 4px 6px; border: 1px solid #3a404a; border-radius: 4px;
  background: #14171b;
}
#signallegend span { display: inline-flex; align-items: center; gap: 5px; }
#signallegend .m { color: #8a919c; }
#signallegend .chip { width: 16px; }
/* Nearest-neighbour: the rasters are model output on a known grid, and a
   browser's smooth upscale would invent gradients between cells that were
   computed separately. Blocky is the honest rendering. */
.coverageraster { image-rendering: pixelated; }
#rasteropacity { width: 70px; vertical-align: middle; }

/* rf map: the reach tool's armed state and its result bar */
#reachtool.on { background: #2a3038; color: #fff; border-color: #7da7e0; }
#reachbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  font-size: 12px; color: #c4cad4; margin-top: 4px;
  padding: 4px 6px; border: 1px solid #3a404a; border-radius: 4px;
  background: #14171b;
}
#rfmode, #bandsel, #rxheight {
  font: 12px system-ui, sans-serif; background: #14171b; color: #d8dce2;
  border: 1px solid #3a404a; border-radius: 4px; padding: 1px 4px;
}