#reference-panel {
  flex: none;
  margin: 6px 9px;
  border: 1px solid #cbd9d1;
  border-radius: 6px;
  font-size: 12px;
  background: #f6faf8;
}
#reference-panel > summary {
  padding: 7px 10px;
  cursor: pointer;
  font-weight: 650;
}
.reference-body {
  padding: 0 10px 10px;
  max-height: 48vh;
  overflow: auto;
}
.reference-body p {
  margin: 8px 0;
}
.reference-body > details > label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  flex-wrap: wrap;
}
.reference-body select,
.reference-body input {
  max-width: 230px;
  font-size: 12px;
}
.reference-options {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 9px 0;
}
.reference-options label {
  display: flex;
  gap: 4px;
  align-items: center;
}
.reference-options button,
.reference-list button {
  font-size: 12px;
  padding: 6px 8px;
}
.reference-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.reference-list button {
  text-align: left;
}
.reference-detail dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.reference-detail dd {
  margin: 0;
}
.reference-detail details {
  overflow: auto;
  max-height: 240px;
  margin: 10px 0;
}
.reference-legend {
  margin-top: 8px;
  border-top: 1px solid #d7e2da;
  padding-top: 6px;
}
.reference-legend div {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
}
.reference-legend i {
  width: 20px;
  height: 4px;
  display: inline-block;
}
.reference-map-picker {
  max-width: 250px;
}
.reference-map-picker select {
  max-width: 200px;
  font-size: 12px;
}
.reference-list { display: block; overflow-x: auto; }
.reference-list .record-table { width: 100%; }
.reference-chart-scroll { overflow-x: auto; }
.reference-heatmap { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 890px; }
.reference-heatmap th { font-size: 11px; padding: 2px; }
.reference-heatmap button { font-size: 12px; padding: 5px 2px; min-width: 32px; border: 0; color: #102f28; }
.reference-heatmap .insufficient { outline: 1px dashed #aa864a; }
.reference-heatmap .missing { background: #e5e7e6; }
.reference-day-chart { height: 150px; display: grid; grid-template-columns: repeat(24,minmax(14px,1fr)); gap: 2px; align-items: end; padding-top: 8px; }
.reference-day-chart button { position: relative; display: flex; flex-direction: column; justify-content: end; align-items: center; height: 100%; padding: 0 1px 18px; border: 0; background: transparent; }
.reference-day-chart i { display: block; width: 100%; background: #287da5; }
.reference-day-chart small { position: absolute; bottom: 0; font-size: 10px; }
.reference-day-chart .imputed i { background: #d79d35; }
.reference-day-chart .missing i { background: #acb5b0; }
.reference-day-chart .error i { background: #b85444; }
.reference-chart-legend { display: flex; gap: 12px; margin: 6px 0; font-size: 11px; }
.reference-chart-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; background: #287da5; margin-right: 4px; }
.reference-chart-legend .imputed::before { background: #d79d35; }
.reference-chart-legend .missing::before { background: #acb5b0; }
.reference-chart-legend .error::before { background: #b85444; }

/* The map keeps acquisition state visible even when a different work tab is open. */
#map-pane { position:relative; }
.reference-map-status { flex:0 0 auto; padding:7px 10px; margin:0; border-top:1px solid #d5e2da; border-bottom:1px solid #d5e2da; background:#f5faf7; color:#29483b; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.reference-map-status[data-reference-state=failed],.reference-map-status[data-reference-state=stale] { background:#fff5df; color:#735017; }
.reference-map-detail { position:absolute; z-index:3; right:12px; bottom:45px; width:min(340px,calc(100% - 24px)); box-sizing:border-box; max-height:45%; overflow:auto; background:#fff; border:1px solid #b7cdc1; border-radius:8px; padding:10px 12px; box-shadow:0 5px 18px #17332924; font-size:12px; line-height:1.5; }
.reference-map-detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.reference-map-detail-heading strong { overflow-wrap:anywhere; }
.reference-map-detail p { margin:6px 0; overflow-wrap:anywhere; }
.reference-map-detail button { flex:none; font-size:12px; padding:4px 8px; }
.reference-map-status[hidden],.reference-map-detail[hidden] { display:none!important; }