* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0d1117; color: #e6edf3; min-height: 100vh;
}

header {
  background: #161b22; border-bottom: 1px solid #30363d; padding: 1.25rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
header h1        { font-size: 1.4rem; font-weight: 600; color: #58a6ff; }
.version-badge {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em;
  background: #0d419d; color: #79c0ff; border: 1px solid #1f6feb;
  border-radius: 3px; padding: 0.15em 0.5em; vertical-align: middle;
  text-transform: uppercase; position: relative; top: -2px;
}
header .subtitle { font-size: 0.85rem; color: #8b949e; margin-top: 0.2rem; }
.header-actions  { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; flex-shrink: 0; }
.header-btns     { display: flex; align-items: center; gap: 0.75rem; }
.deploy-status   { font-size: 0.8rem; color: #8b949e; min-height: 1.1em; text-align: right; max-width: 32rem; }
.deploy-status.ok  { color: #3fb950; }
.deploy-status.err { color: #f85149; }

.library-link {
  font-size: 0.82rem; font-weight: 500; color: #8b949e;
  text-decoration: none; border: 1px solid #30363d;
  border-radius: 6px; padding: 0.4rem 0.85rem; white-space: nowrap;
}
.library-link:hover { color: #e6edf3; border-color: #8b949e; }

.migrate-btn {
  background: #0d419d; color: #79c0ff; border: 1px solid #1f6feb;
  border-radius: 6px; padding: 0.4rem 1rem; font-size: 0.82rem; font-weight: 500;
}
.migrate-btn:hover:not(:disabled) { background: #1158c7; color: #cae8ff; border-color: #58a6ff; }
.migrate-btn:disabled { opacity: 0.45; cursor: not-allowed; }

main {
  max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem;
  display: flex; flex-direction: column; gap: 2rem;
}

section {
  background: #161b22; border: 1px solid #30363d;
  border-radius: 6px; padding: 1.5rem;
}

.section-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1rem; }
h2 { font-size: 1rem; font-weight: 600; color: #e6edf3; margin-bottom: 0.5rem; }
.section-header h2 { margin-bottom: 0; }
.route-count { font-size: 0.8rem; color: #8b949e; }

.rebuild-btn {
  background: transparent; color: #8b949e; border: 1px solid #30363d;
  border-radius: 6px; padding: 0.3rem 0.75rem; font-size: 0.78rem; font-weight: 500;
}
.rebuild-btn:hover:not(:disabled) { background: #21262d; color: #e6edf3; border-color: #8b949e; }
.rebuild-status { font-size: 0.78rem; color: #8b949e; }
.rebuild-ok    { color: #3fb950; }
.rebuild-error { color: #f85149; }

p { font-size: 0.875rem; color: #8b949e; margin-bottom: 1rem; }
code {
  background: #0d1117; border: 1px solid #30363d; border-radius: 3px;
  padding: 0.1em 0.4em; font-size: 0.8rem; color: #79c0ff;
}

/* ── Buttons ── */
button {
  background: #238636; color: #fff; border: 1px solid #2ea043;
  border-radius: 6px; padding: 0.5rem 1.25rem;
  font-size: 0.875rem; cursor: pointer; font-weight: 500;
}
button:hover:not(:disabled) { background: #2ea043; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Ingest ── */
#ingest-status { margin-top: 0.75rem; font-size: 0.85rem; color: #8b949e; }
#ingest-status.error { color: #f85149; }

.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat {
  background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
  padding: 0.55rem 1rem; text-align: center; min-width: 88px;
}
.stat-value { font-size: 1.5rem; font-weight: 600; color: #58a6ff; }
.stat-label { font-size: 0.72rem; color: #8b949e; margin-top: 0.1rem; }
.stat-new      .stat-value { color: #3fb950; }
.stat-dup      .stat-value { color: #8b949e; }
.stat-conflict .stat-value { color: #e3b341; }
.stat-error    .stat-value { color: #f85149; }

#ingest-details { margin-top: 0.75rem; }
#ingest-details summary { font-size: 0.8rem; color: #8b949e; cursor: pointer; user-select: none; padding: 0.35rem 0; }
#ingest-details summary:hover { color: #e6edf3; }

/* ── Badges ── */
.badge {
  display: inline-block; font-size: 0.68rem; font-weight: 600;
  padding: 0.15em 0.55em; border-radius: 2em;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-new      { background: #1a4a2a; color: #3fb950; border: 1px solid #238636; }
.badge-dup      { background: #1c2128; color: #8b949e; border: 1px solid #30363d; }
.badge-conflict { background: #4a2800; color: #e3b341; border: 1px solid #9e6a03; }
.badge-error    { background: #3d1212; color: #f85149; border: 1px solid #8b1a1a; }

/* ── Shared table ── */
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead tr { border-bottom: 1px solid #30363d; }
th {
  text-align: left; padding: 0.5rem 0.75rem; color: #8b949e;
  font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
}
td { padding: 0.55rem 0.75rem; border-bottom: 1px solid #21262d; color: #e6edf3; vertical-align: middle; }
tbody tr:hover { background: #1c2128; }

/* ── Ingest table ── */
#ingest-table td:first-child { color: #8b949e; width: 2.5rem; }
#ingest-table td:nth-child(2) { width: 6.5rem; }
#ingest-table td:nth-child(5) { width: 3rem; text-align: right; color: #8b949e; }
#ingest-table td:last-child   { color: #8b949e; font-size: 0.8rem; }
.row-duplicate { opacity: 0.45; }
.row-conflict  { background: rgba(74,40,0,0.15); }
.dim { color: #8b949e; font-size: 0.8rem; }

/* ── Toolbar ── */
.toolbar {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  background: #1c2128; border: 1px solid #30363d; border-radius: 6px;
  padding: 0.6rem 0.85rem; margin-bottom: 0.85rem;
}
.toolbar-hidden { display: none; }
.selection-label { font-size: 0.85rem; color: #8b949e; flex: 1; }
.toolbar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.action-btn {
  background: #21262d; color: #e6edf3; border: 1px solid #30363d;
  border-radius: 6px; padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 500;
}
.action-btn:hover:not(:disabled) { background: #30363d; border-color: #8b949e; }
.action-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.action-btn-danger:hover:not(:disabled) { background: #3d1212; border-color: #8b1a1a; color: #f85149; }

/* ── Library table columns ── */
.loading-msg, .empty-msg { font-size: 0.875rem; color: #8b949e; padding: 0.5rem 0; }
.col-check       { width: 2.25rem; }
.col-dist        { width: 5.5rem; text-align: right; white-space: nowrap; color: #8b949e; font-size: 0.82rem; }
.col-return      { width: 7.5rem; }
.col-ex          { width: 2.5rem; text-align: center; }
.col-edit        { width: 6.5rem; text-align: right; white-space: nowrap; }
.col-dest-detail { color: #8b949e; font-size: 0.82rem; }
.col-dest-type   { width: 6rem; }
.col-dest-gulf   { width: 3.5rem; text-align: center; }
.col-dest-dist   { width: 5.5rem; text-align: right; color: #8b949e; font-size: 0.82rem; }
.dest-edit-row select,
.edit-field select { background: #0d1117; color: #e6edf3; border: 1px solid #30363d; border-radius: 6px; padding: 0.45rem 0.6rem; font-size: 0.875rem; width: 100%; }
.dest-edit-row select:focus,
.edit-field select:focus { border-color: #58a6ff; outline: none; }

/* ── Library rows ── */
tr.route-row { cursor: pointer; }
tr.route-row:hover { background: #1c2128; }
tr.route-row.editing { background: #1c2128; }
tr.row-excluded { display: none; }
table.show-excluded tr.row-excluded { display: table-row; opacity: 0.45; }

.show-excluded-label {
  font-size: 0.78rem; color: #8b949e; display: flex; align-items: center;
  gap: 0.35rem; cursor: pointer; user-select: none; margin-left: auto; margin-right: 0.5rem;
}
.show-excluded-label:hover { color: #e6edf3; }

.col-name-header { white-space: nowrap; }
.col-prefix-note { font-size: 0.6rem; vertical-align: middle; position: relative; top: -1px; }

.folder-link-btn {
  background: none; border: none; padding: 0; font-size: inherit; font-weight: inherit;
  color: #79c0ff; cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.folder-link-btn:hover { color: #cae8ff; background: none; }

/* ── Name cell ── */
.display-name { font-weight: 500; }
.gpx-name { display: block; font-size: 0.75rem; margin-top: 0.1rem; }

.return-label {
  font-size: 0.8rem; color: #79c0ff;
  background: #0d1b2a; border: 1px solid #1f6feb;
  border-radius: 3px; padding: 0.1em 0.45em;
  font-family: monospace; letter-spacing: 0.02em;
  white-space: nowrap; display: inline-block;
}

.row-highlight { animation: rowflash 1.5s ease-out; }
@keyframes rowflash { 0%,20% { background: #1a3a5c; } 100% { background: transparent; } }

.dest-route-badge {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  background: #0d2137; color: #58a6ff; border: 1px solid #1f6feb;
  border-radius: 4px; padding: 0.1em 0.45em; margin-left: 0.4rem;
  cursor: pointer; white-space: nowrap; vertical-align: middle;
}
.dest-route-badge:hover { background: #1158c7; color: #cae8ff; border-color: #58a6ff; }

.prefix-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  background: #12261a; color: #3fb950; border: 1px solid #238636;
  border-radius: 3px; padding: 0.1em 0.4em;
  font-family: monospace; text-transform: uppercase;
}

.dest-badge {
  color: #79c0ff; cursor: default; vertical-align: middle; display: inline-flex;
}

/* ── NEW badge — shown on routes missing name, description, or waypoint prefix ── */
/* Amber tone mirrors the papagknows guidance-warning caution style. */
.new-badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  background: rgba(255, 198, 107, 0.12); color: #ffc66b;
  border: 1px solid rgba(255, 198, 107, 0.4);
  border-radius: 3px; padding: 0.1em 0.45em;
  font-family: monospace; text-transform: uppercase;
  vertical-align: middle; position: relative; top: -1px;
}
.ex-dot { color: #e3b341; font-size: 0.85rem; }

/* ── Edit button ── */
.edit-btn {
  background: transparent; color: #8b949e; border: 1px solid #30363d;
  border-radius: 4px; padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: 500;
}
.edit-btn:hover { background: #21262d; color: #e6edf3; border-color: #8b949e; }

/* ── Edit row ── */
tr.edit-row td { background: #0d1117; border-bottom: 2px solid #1f6feb; padding: 0.85rem 0.75rem 0.85rem 3rem; }

.edit-form { display: flex; flex-direction: column; gap: 0.75rem; }

.edit-field { display: flex; flex-direction: column; gap: 0.3rem; }
.edit-field-inline { flex-direction: row; align-items: center; }

.edit-field label {
  font-size: 0.78rem; color: #8b949e; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
}
.edit-field-inline label { text-transform: none; font-size: 0.875rem; color: #e6edf3; font-weight: normal; display: flex; align-items: center; gap: 0.4rem; }

.char-hint { text-transform: none; font-weight: normal; letter-spacing: 0; color: #6e7681; font-size: 0.72rem; }

.edit-field input[type="text"] {
  background: #161b22; border: 1px solid #30363d; border-radius: 6px;
  color: #e6edf3; font-size: 0.875rem; padding: 0.4rem 0.65rem;
  outline: none; width: 100%; max-width: 420px;
}
.edit-field input[type="text"]:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.1); }

.return-input-wrap { display: flex; align-items: center; gap: 0.6rem; }
.return-input-wrap input { font-family: monospace; max-width: 200px; }
.return-input-wrap .ef-description { font-family: inherit; max-width: 420px; }

.char-counter { font-size: 0.78rem; color: #8b949e; white-space: nowrap; }
.char-over    { color: #f85149 !important; }

.edit-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }

.save-btn {
  background: #238636; color: #fff; border: 1px solid #2ea043;
  border-radius: 6px; padding: 0.4rem 1rem; font-size: 0.82rem; font-weight: 500;
}
.save-btn:hover:not(:disabled) { background: #2ea043; }
.save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cancel-btn {
  background: transparent; color: #8b949e; border: 1px solid #30363d;
  border-radius: 6px; padding: 0.4rem 0.85rem; font-size: 0.82rem;
}
.cancel-btn:hover { background: #21262d; color: #e6edf3; }

.delete-route-btn {
  background: transparent; color: #8b949e; border: 1px solid #30363d;
  border-radius: 6px; padding: 0.4rem 0.85rem; font-size: 0.82rem;
}
.delete-route-btn:hover:not(:disabled) { background: #3d1212; border-color: #8b1a1a; color: #f85149; }
.delete-route-btn:disabled { opacity: 0.45; cursor: not-allowed; }

input[type="checkbox"] { cursor: pointer; accent-color: #58a6ff; }

/* ── Bundle history ── */
.col-bdate    { width: 11rem; color: #8b949e; }
.col-brcount  { width: 5rem; text-align: center; }
.col-bin-type { width: 5rem; color: #8b949e; }
tr.bundle-row { cursor: pointer; }
tr.bundle-detail td { background: #0d1117; padding: 0.5rem 0.75rem 0.75rem 1.5rem; font-size: 0.8rem; color: #8b949e; border-bottom: 2px solid #30363d; }
.bundle-route-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.bundle-route-chip {
  background: #1c2128; border: 1px solid #30363d; border-radius: 4px;
  padding: 0.15em 0.55em; font-size: 0.75rem; color: #e6edf3;
}
.bundle-route-chip.has-return { border-color: #1f6feb; color: #79c0ff; }
.bundle-missing { font-size: 0.8rem; color: #e3b341; }
tr.bin-row { opacity: 0.7; }
tr.bin-row:hover { opacity: 1; }
.bundle-del-btn { margin-left: 0.3rem; }
.bundle-del-btn:hover { background: #3d1212 !important; border-color: #8b1a1a !important; color: #f85149 !important; }

/* ── Collapsible sections ── */
.collapse-btn {
  background: transparent; border: none; color: #8b949e;
  font-size: 0.78rem; padding: 0.1rem 0.35rem; cursor: pointer; line-height: 1;
  flex-shrink: 0;
}
.collapse-btn:hover { color: #e6edf3; }
section.collapsed > *:not(.section-header) { display: none !important; }
section.collapsed .section-header { margin-bottom: 0; }

.section-group-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0 0.4rem; margin-bottom: -0.5rem;
  border-bottom: 2px solid #1f6feb;
}
.section-group-header h3 {
  font-size: 0.95rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #58a6ff;
}
.group-collapse-btn {
  background: transparent; border: none; color: #58a6ff;
  font-size: 0.85rem; padding: 0.1rem 0.35rem; cursor: pointer; line-height: 1;
  margin-left: auto; flex-shrink: 0;
}
.group-collapse-btn:hover { color: #cae8ff; }

/* ── Waypoint category filter ── */
.wp-filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.wp-filter-bar:empty { display: none; }
.wp-filter-btn {
  background: #21262d; color: #8b949e; border: 1px solid #30363d;
  border-radius: 2em; padding: 0.2em 0.75em; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
}
.wp-filter-btn:hover { background: #30363d; color: #e6edf3; }
.wp-filter-btn.active { color: #fff; border-color: transparent; }

/* ── Waypoint Library ── */
.col-wp-cat    { width: 8rem; }
.col-wp-coords { width: 15rem; font-family: monospace; font-size: 0.8rem; color: #8b949e; }

.cat-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  padding: 0.15em 0.55em; border-radius: 2em;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cat-destination { background: #0d1b2a; color: #58a6ff;  border: 1px solid #1f6feb; }
.cat-nav-fix     { background: #2d1f00; color: #e3b341;  border: 1px solid #9e6a03; }
.cat-anchorage   { background: #0d2a12; color: #3fb950;  border: 1px solid #238636; }
.cat-fuel        { background: #2d1200; color: #ff8c4b;  border: 1px solid #9e3d00; }
.cat-poi         { background: #1c1040; color: #d2a8ff;  border: 1px solid #8957e5; }

.wp-select {
  background: #161b22; border: 1px solid #30363d; border-radius: 6px;
  color: #e6edf3; font-size: 0.875rem; padding: 0.4rem 0.65rem;
  outline: none; width: 100%;
}
.wp-select:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.1); }
.wp-coord-row { display: flex; gap: 0.75rem; }
.wp-coord-row .edit-field { flex: 1; }
.wp-cat-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.25rem; }
.wp-cat-check { font-size: 0.875rem; color: #e6edf3; display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }

/* ── Waypoint modal z-index — must sit above the map modal (101) ── */
#wp-overlay { z-index: 200; }
#wp-modal   { z-index: 201; }


/* ── Leaflet layer control ── */
.leaflet-control-layers,
.leaflet-control-layers-expanded {
  background: #161b22 !important; color: #e6edf3 !important;
  border: 1px solid #30363d !important; border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.leaflet-control-layers label,
.leaflet-control-layers span { color: #e6edf3 !important; }
.leaflet-control-layers input[type="radio"],
.leaflet-control-layers input[type="checkbox"] { accent-color: #58a6ff; }
.leaflet-control-layers-separator { border-top: 1px solid #30363d !important; }
.leaflet-control-layers-toggle { background-color: #161b22 !important; }
.leaflet-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── Waypoint map popup ── */
.wp-leaflet-popup .leaflet-popup-content-wrapper {
  background: #161b22; border: 1px solid #30363d; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5); color: #e6edf3; padding: 0;
}
.wp-leaflet-popup .leaflet-popup-content { margin: 0.75rem; font-size: 0.82rem; min-width: 190px; }
.wp-leaflet-popup .leaflet-popup-tip    { background: #161b22; }
.wp-leaflet-popup .leaflet-popup-close-button { color: #8b949e !important; top: 4px; right: 6px; }
.wp-popup-label  { font-weight: 600; font-size: 0.875rem; margin-bottom: 4px; }
.wp-popup-source { font-size: 0.75rem; color: #8b949e; margin-bottom: 4px; }
.wp-popup-coords { font-family: monospace; font-size: 0.78rem; color: #8b949e; margin: 4px 0; line-height: 1.6; }
.wp-popup-notes  { font-size: 0.78rem; color: #8b949e; margin-top: 4px; font-style: italic; }
.wp-popup-btn    {
  margin-top: 8px; width: 100%; background: #238636; color: #fff;
  border: 1px solid #2ea043; border-radius: 4px; padding: 0.3rem 0.6rem;
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
}
.wp-popup-btn:hover { background: #2ea043; }
.wp-popup-btn.edit  { background: #0d419d; border-color: #1f6feb; }
.wp-popup-btn.edit:hover { background: #1158c7; }

/* ── Export modal ── */
.export-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(480px, 92vw); background: #161b22;
  border: 1px solid #30363d; border-radius: 8px; z-index: 101; flex-direction: column;
}
.export-modal:not([hidden]) { display: flex; }
.export-modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.export-modal-body .edit-field input[type="text"] { max-width: 100%; }
.export-route-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 220px; overflow-y: auto; }
.export-route-item { font-size: 0.82rem; color: #e6edf3; padding: 0.3rem 0.5rem; background: #0d1117; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.export-route-item .dim { font-size: 0.75rem; }
.export-error { font-size: 0.82rem; color: #f85149; }

/* ── Map modal ── */
.map-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100;
}
.map-modal {
  position: fixed; top: 5vh; left: 5vw; width: 90vw; height: 90vh;
  background: #161b22; border: 1px solid #30363d; border-radius: 8px;
  z-index: 101; flex-direction: column; overflow: hidden;
}
.map-modal:not([hidden]) { display: flex; }
.map-modal-header {
  display: flex; flex-direction: column; padding: 0.75rem 1rem 0.6rem;
  border-bottom: 1px solid #30363d; flex-shrink: 0; gap: 0.4rem;
}
.map-modal-header-row { display: flex; align-items: center; gap: 0.75rem; }
.map-modal-title { font-size: 0.95rem; font-weight: 600; color: #e6edf3; flex: 1; }
.map-close-btn {
  background: transparent; color: #8b949e; border: 1px solid #30363d;
  border-radius: 4px; padding: 0.25rem 0.6rem; font-size: 0.85rem;
}
.map-close-btn:hover { background: #21262d; color: #e6edf3; }
.map-actions { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 2px; }
.map-actions:empty { display: none; }
.map-exclude-btn {
  background: transparent; border-radius: 4px;
  padding: 0.25rem 0.65rem; font-size: 0.78rem; font-weight: 500;
  opacity: 0.75; transition: opacity 0.15s;
}
.map-exclude-btn:hover:not(:disabled) { opacity: 1; background: rgba(255,255,255,0.07); }
.map-exclude-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.map-container-div { flex: 1; }

/* ── Route Alignment Analysis ────────────────────────────────────────────────── */
.alignment-group { margin-bottom: 1.5rem; }
.alignment-group-header {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 0.5rem 0 0.4rem; border-bottom: 1px solid #30363d; margin-bottom: 0.5rem;
}
.alignment-master-name { font-weight: 600; color: #f0d090; font-size: 0.95rem; }
.alignment-coords { font-family: monospace; font-size: 0.78rem; color: #8b949e; }
.alignment-summary { font-size: 0.78rem; color: #8b949e; margin-left: auto; }
.alignment-none { font-size: 0.82rem; color: #6e7681; padding: 0.4rem 0; }
.alignment-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 0.25rem; }
.alignment-table th {
  text-align: left; color: #6e7681; font-weight: 500;
  padding: 0.25rem 0.75rem 0.25rem 0; border-bottom: 1px solid #21262d; white-space: nowrap;
}
.alignment-table td { padding: 0.3rem 0.75rem 0.3rem 0; border-bottom: 1px solid #161b22; }
.alignment-table .mono { font-family: monospace; font-size: 0.78rem; }
.alignment-table .align-center { text-align: center; }
.alignment-table .align-dist { font-family: monospace; font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
/* Distance colour coding */
.align-exact .align-dist { color: #3fb950; }   /* < 1 m  — exact */
.align-close .align-dist { color: #f0d090; }   /* 1–10 m — close */
.align-drift .align-dist { color: #ffa657; }   /* 10–50 m — notable drift */
.align-far   .align-dist { color: #f85149; }   /* > 50 m  — significant */
/* Checkbox cell and return-route auto note */
.align-check { width: 1.5rem; text-align: center; }
.align-auto-note { width: 1.5rem; text-align: center; font-size: 0.72rem; color: #6e7681; white-space: nowrap; }
/* Apply corrections footer */
.align-apply-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 0.75rem; padding: 0.5rem 0;
}
.btn-align-apply {
  background: #1f6feb; color: #fff; border: none; border-radius: 6px;
  padding: 0.35rem 0.9rem; font-size: 0.82rem; cursor: pointer;
}
.btn-align-apply:disabled { opacity: 0.45; cursor: default; }
.align-apply-result { font-size: 0.8rem; }
.align-route-link { cursor: pointer; color: #58a6ff; }
.align-route-link:hover { text-decoration: underline; }

/* ── Master waypoint ─────────────────────────────────────────────────────────── */
.col-wp-master { width: 1.5rem; text-align: center; color: #6e7681; font-size: 0.8rem; }
.wp-master-star { color: #f0d090; font-size: 1rem; }
.wp-master-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 400; }
.wp-master-label input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; accent-color: #f0d090; }

/* ── Protocol Thresholds section ────────────────────────────────────────────── */
.thresholds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.65rem 1.25rem;
  margin: 0.75rem 0 1rem;
}
.threshold-field { display: flex; flex-direction: column; gap: 0.25rem; }
.threshold-field label {
  font-size: 0.72rem; font-weight: 500; color: #8b949e; letter-spacing: 0.04em;
}
.threshold-field input {
  background: #161b22; border: 1px solid #30363d; border-radius: 6px;
  color: #e6edf3; font-size: 0.9rem; padding: 0.4rem 0.65rem;
  width: 100%; font-family: inherit;
}
.threshold-field input:focus { outline: none; border-color: #58a6ff; }
.thresholds-actions { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.thresholds-history-toggle {
  background: transparent; border: none; color: #8b949e;
  font-size: 0.75rem; cursor: pointer; padding: 0; letter-spacing: 0.04em;
}
.thresholds-history-toggle:hover { color: #e6edf3; }
.thresholds-history-wrap { margin-top: 0.25rem; }
.thresholds-history-table {
  width: 100%; border-collapse: collapse; font-size: 0.75rem;
  color: #8b949e; margin-top: 0.5rem;
}
.thresholds-history-table th {
  text-align: left; color: #6e7681; font-weight: 500;
  padding: 0.2rem 0.75rem 0.3rem 0; border-bottom: 1px solid #21262d;
}
.thresholds-history-table td { padding: 0.2rem 0.75rem 0.2rem 0; border-bottom: 1px solid #21262d; }

/* ── Mobile responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Header: stack title + buttons vertically instead of side-by-side */
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
  }

  /* Keep title on one line — shrink font slightly if needed */
  header h1 { font-size: 1.15rem; white-space: nowrap; }

  /* Buttons row: left-align, let it wrap naturally */
  .header-actions { align-items: flex-start; }
  .header-btns    { flex-wrap: wrap; }

  /* Reduce main and section padding to reclaim horizontal space */
  main    { padding: 0 0.75rem; margin: 1rem auto; }
  section { padding: 1rem; }

  /* Make all tables horizontally scrollable rather than clipping */
  section { overflow-x: auto; }

  /* Section header: allow wrapping on narrow screens */
  .section-header { flex-wrap: wrap; }

  /* Tighten the route library action buttons (Edit / Map / Replace) */
  .action-row { gap: 0.25rem; }
  .edit-btn, .map-btn, .replace-btn { padding: 0.3rem 0.5rem; font-size: 0.75rem; }

}