:root{
  --panel-bg: rgba(255,255,255,0.92);
  --panel-border: rgba(0,0,0,0.12);
  --shadow: 0 6px 18px rgba(0,0,0,0.08);
}
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
header { padding: 12px 14px; border-bottom: 1px solid #eee; }
#map { height: 65vh; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
button { padding: 10px 12px; border:1px solid #ccc; border-radius: 10px; background:#fff; cursor:pointer; }
button:disabled { opacity:0.6; cursor:not-allowed; }
#status { padding: 10px 14px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; }
.note { color:#444; font-size: 12px; }
code { background: #f6f6f6; padding: 2px 6px; border-radius: 8px; }

.legend {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  min-width: 290px;
}
.legend-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}
.legend-header h4{
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}
.legend-toggle{
  border: 1px solid rgba(0,0,0,0.16);
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.legend-toggle:active{ transform: translateY(0.5px); }
.legend.collapsed #legend-items,
.legend.collapsed .footer{ display:none; }
.legend.collapsed{ min-width: unset; }

.legend .item { display:flex; gap:8px; align-items:flex-start; margin: 6px 0; }
.swatch { width: 12px; height: 12px; border-radius: 4px; margin-top: 2px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.15); }
.legend .meta { font-size: 12px; color: #222; }
.legend .meta small { display:block; color:#555; }
.legend .footer { margin-top: 8px; font-size: 12px; color:#444; }

.icon-badge{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.92);
  font-size: 16px;
  line-height: 1;
}
.icon-badge span{ transform: translateY(-0.5px); }


/* Bottom events bar */
#map { height: 62vh; } /* leave room for events bar + status */

.events-bar{
  position: relative;
  border-top: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  padding: 10px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.events-title{
  font-weight: 650;
  font-size: 14px;
}
.events-buttons{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}
.evt-btn{
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.20);
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  cursor: pointer;
}
.evt-btn.active{
  border-color: rgba(2,132,199,0.7);
  box-shadow: 0 0 0 3px rgba(2,132,199,0.15);
}
.events-hint{
  font-size: 12px;
  color: #444;
  flex: 1 1 260px;
}


/* Leaflet events control */
.events-ctl{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  padding: 10px 12px;
  min-width: 320px;
}
.events-ctl-title{
  font-weight: 650;
  font-size: 13px;
  margin-bottom: 8px;
}
.events-ctl-row{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  align-items:center;
}
.events-ctl button{
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.20);
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  cursor: pointer;
}
.events-ctl button:disabled{ opacity:0.55; cursor:not-allowed; }
.events-ctl-hint{
  margin-top: 8px;
  font-size: 12px;
  color:#444;
}

#eventsBar{ display:none !important; }

.events-bar{display:none !important;}

.construction-icon{
  font-size: 22px;
  line-height: 28px;
  text-align:center;
}

.emoji-icon{ font-size: 22px; line-height: 28px; text-align:center; }


#bottomPanel{
  display:flex;
  gap:14px;
  align-items:stretch;
  border-top: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.92);
}
#status{
  width: 280px;
  min-width: 260px;
  max-width: 320px;
  white-space: pre-line;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";
  font-size: 12px;
}
#instructions{
  flex:1;
  padding: 10px 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 13px;
}
#instructions h3{
  margin: 0 0 6px 0;
  font-size: 13px;
}
#instructions ol{
  margin: 0;
  padding-left: 18px;
}
#instructions li{ margin: 2px 0; }
#instructions .sub{ margin-top: 6px; padding-left: 16px; }
#instructions code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";
  font-size: 12px;
}

.events-ctl-auto{
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:6px;
  user-select:none;
}
.events-ctl-auto input{ transform: translateY(1px); }