* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }
body { display: flex; flex-direction: column; }

#toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 8px 12px; background: #f7f7f7; border-bottom: 1px solid #ddd;
}
#toolbar .group { display: inline-flex; align-items: center; gap: 6px; }
#title-input { padding: 4px 8px; font-size: 14px; min-width: 180px; }
#toolbar button { padding: 5px 10px; font-size: 13px; cursor: pointer; }
.chip.active { outline: 2px solid #333; font-weight: bold; }
.hint { color: #888; font-size: 12px; }

#map { flex: 1 1 auto; position: relative; }

#help {
  position: absolute; left: 16px; top: 16px; z-index: 500;
  width: 300px; max-width: calc(100% - 32px);
  background: rgba(255,255,255,0.95); border: 1px solid #ccc; border-radius: 6px;
  padding: 10px 12px; font-size: 13px; line-height: 1.7;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#help.hidden { display: none; }
#help .help-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
#help .help-head b { font-size: 14px; }
#help #help-close { cursor: pointer; color: #888; font-size: 20px; line-height: 1; padding: 0 4px; }
#help #help-close:hover { color: #333; }
#help ol { margin: 4px 0 0; padding-left: 18px; }
#help li { margin: 3px 0; }

#legend {
  position: absolute; right: 16px; bottom: 16px;
  background: rgba(255,255,255,0.92); border: 1px solid #ccc; border-radius: 4px;
  padding: 8px 10px; font-size: 13px; line-height: 1.6;
}
#legend .row { display: flex; align-items: center; gap: 6px; }
#legend .swatch { width: 14px; height: 14px; display: inline-block; border: 1px solid #999; }

.banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #d9432f; color: #fff; padding: 8px 12px; font-size: 14px;
}
.hidden { display: none; }