:root {
  --ink: #3f3f3f;
  --muted: #69736d;
  --green: #508d24;
  --green-dark: #3f701c;
  --green-soft: #f1f6ee;
  --line: #dce3d8;
  --warning: #fff7df;
  --danger: #9a3d32;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: "Gentium Basic", Georgia, serif; }
button, input, select { font: inherit; }

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 90px;
  padding: 18px max(24px, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid #ecefec;
}

.editor-brand { color: var(--green); font: 32px "Playfair Display", Georgia, serif; letter-spacing: 5px; text-decoration: none; }
.editor-header nav { display: flex; gap: 8px; }
.editor-header nav a { padding: 9px 11px; color: #626a65; font: 11px Montserrat, sans-serif; letter-spacing: .6px; text-decoration: none; text-transform: uppercase; }
.editor-header nav a:hover, .editor-header nav a:focus { background: var(--green-soft); color: var(--green-dark); }

main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0; }
.editor-intro { max-width: 820px; }
.eyebrow { margin: 0 0 7px; color: var(--green); font: 700 11px Montserrat, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; }
h1 { margin: 0 0 10px; color: #42514c; font-size: clamp(34px, 5vw, 50px); }
.editor-intro > p:not(.eyebrow) { font-size: 18px; line-height: 1.5; }
.editor-warning { margin-top: 16px; padding: 11px 14px; background: var(--warning); border-left: 4px solid #d6a32d; font-size: 14px; }

.editor-controls {
  display: grid;
  grid-template-columns: .65fr 1.15fr 1.15fr auto;
  align-items: end;
  gap: 12px;
  margin-top: 26px;
  padding: 16px;
  background: var(--green-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.editor-controls label > span, .coordinate-fields label > span, .panel-label {
  display: block;
  margin: 0 0 6px;
  color: #53615a;
  font: 700 11px Montserrat, sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
}

select, input[type="number"], input[type="search"], input[type="text"] { width: 100%; height: 42px; padding: 0 11px; background: #fff; border: 1px solid #cbd5c8; border-radius: 3px; color: var(--ink); }
button { min-height: 42px; padding: 0 15px; background: #fff; border: 1px solid #bfc9bc; border-radius: 3px; color: #42514c; cursor: pointer; }
button:hover, button:focus { border-color: var(--green); outline: 2px solid rgba(80, 141, 36, .2); }
button.primary, #download-json { background: #42514c; border-color: #42514c; color: #fff; }
button.primary:hover, #download-json:hover { background: var(--green); border-color: var(--green); }
button.danger { color: var(--danger); }
button:disabled { cursor: not-allowed; opacity: .5; }

.record-manager { margin-top: 14px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.record-manager summary { padding: 13px 16px; color: #42514c; font: 700 12px Montserrat, sans-serif; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }
.record-manager[open] summary { border-bottom: 1px solid var(--line); }
.record-manager-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 18px; }
.record-form { display: grid; align-content: start; gap: 11px; }
.record-form + .record-form { padding-left: 24px; border-left: 1px solid var(--line); }
.record-form h2 { margin: 0 0 3px; color: #42514c; font-size: 21px; }
.record-form label > span { display: block; margin: 0 0 5px; color: #53615a; font: 700 10px Montserrat, sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.record-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.record-manager-note { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 13px; }

.place-search { position: relative; margin-top: 14px; padding: 14px 16px; background: #f8faf7; border: 1px solid var(--line); border-radius: 5px; }
.place-search label { display: block; margin-bottom: 6px; color: #53615a; font: 700 11px Montserrat, sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.place-search-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.place-search-results { color: var(--muted); font-size: 14px; }
.place-search-results:not(:empty) { margin-top: 9px; }
.place-search-results ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.place-search-results button { width: 100%; min-height: 0; padding: 8px 10px; text-align: left; line-height: 1.3; }

.editor-workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr); min-height: 620px; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 8px 30px rgba(48, 62, 53, .08); }
#coordinate-map { min-height: 620px; background: #e8eee5; }
.coordinate-panel { padding: 22px; border-left: 1px solid var(--line); }
.coordinate-panel h2 { margin: 0; color: #42514c; font-size: 28px; line-height: 1.15; }
.selected-county { margin: 5px 0 0; color: var(--muted); }
.coordinate-state { margin: 20px 0; padding: 10px 12px; background: #f5f7f4; border: 1px solid var(--line); border-radius: 3px; font-size: 14px; }
.coordinate-state.verified { background: #edf7e8; border-color: #bdd7ae; color: #315c18; }
.coordinate-state.unmapped { background: #fff5ed; border-color: #e4c8b5; color: #894927; }
.coordinate-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coordinate-help { color: var(--muted); font-size: 13px; line-height: 1.45; }
.panel-actions { display: grid; gap: 8px; margin-top: 16px; }
.associated-sites { margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); }
.associated-sites h3 { margin: 0 0 8px; color: #42514c; font-size: 18px; }
.associated-sites ul { margin: 0; padding-left: 19px; color: var(--muted); }
.associated-sites li { margin: 4px 0; }
.associated-sites li.selected-site { color: var(--green-dark); font-weight: 700; }

.export-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 16px 18px; background: #f5f7f4; border: 1px solid var(--line); border-radius: 5px; }
.export-panel strong, .export-panel span { display: block; }
.export-panel span { margin-top: 3px; color: var(--muted); font-size: 13px; }
.export-actions { display: flex; gap: 8px; }
.leaflet-interactive:focus { outline: 3px solid rgba(80, 141, 36, .45); }

@media (max-width: 800px) {
  .editor-controls { grid-template-columns: 1fr 1fr; }
  .editor-controls button { grid-column: 1 / -1; }
  .editor-workspace { grid-template-columns: 1fr; }
  #coordinate-map { min-height: 480px; }
  .coordinate-panel { border-top: 1px solid var(--line); border-left: 0; }
  .record-manager-grid { grid-template-columns: 1fr; }
  .record-form + .record-form { padding-top: 20px; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 560px) {
  .editor-header { align-items: flex-start; flex-direction: column; padding: 18px; }
  main { width: calc(100% - 24px); padding-top: 28px; }
  .editor-controls, .coordinate-fields { grid-template-columns: 1fr; }
  .place-search-row { grid-template-columns: 1fr; }
  .export-panel { align-items: stretch; flex-direction: column; }
  .export-actions { flex-direction: column; }
  #coordinate-map { min-height: 420px; }
}