:root {
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#20363b;
  background:#f3f6f5;
  font-size:14px;
  --app-header-height:70px;
  --analysis-panel-width:min(460px,42vw);
  --green:#176b65;
  --border:#d7e1df;
  --ui-space:8px;
  --ui-caption-size:12px;
  --ui-control-radius:7px;
  --ui-text:#20363b;
  --ui-muted:#526e67;
  --ui-field-border:#a8c3be;
  --ui-focus:#b47b20;
  --ui-error:#a62f2f;
  --ui-selected:#eef6f3;
  --ui-preview:#fff5df;
  --ui-card-radius:9px;
  --ui-dialog-radius:14px;
  --ui-space-small:4px;
  --ui-space-large:16px;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  height:100dvh;
  overflow:hidden;
}
button,input,select {
  font:inherit;
}
button {
  cursor:pointer;
  border:1px solid var(--border);
  background:#fff;
  color:#21454a;
  border-radius:var(--ui-control-radius);
  padding:9px 12px;
  min-height:38px;
}
button:hover {
  background:#edf5f2;
  border-color:#91b2ad;
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid var(--ui-focus);
  outline-offset:2px;
}
button:disabled {
  opacity:.45;
  cursor:default;
}
button.primary,button[aria-pressed=true] {
  background:var(--green);
  color:#fff;
  border-color:var(--green);
}
a {
  color:#126b73;
}
header {
  height:70px;
  background:#183f43;
  color:#fff;
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 20px;
  position:relative;
  z-index:20;
  box-shadow:0 1px 7px #0003;
}
.brand {
  text-decoration:none;
  color:#fff;
  font-size:22px;
  font-weight:750;
  letter-spacing:-.6px;
  min-width:160px;
}
.brand span {
  display:block;
  font-size:11px;
  font-weight:450;
  letter-spacing:1.2px;
  text-transform:uppercase;
  opacity:.8;
}
header .home {
  margin-left:auto;
  white-space:nowrap;
  color:#e1efeb;
  font-size:13px;
}
#menu {
  background:transparent;
  border-color:#ffffff40;
  color:white;
  font-size:20px;
  padding:3px 10px;
}
form {
  position:relative;
  display:flex;
  gap:6px;
  max-width:650px;
  flex:1;
}
input:not([type=range]):not([type=checkbox]):not([type=file]):not([type=color]),select {
  width:100%;
  padding:10px;
  border:1px solid #b7cac5;
  border-radius:6px;
  color:#213e42;
  background:#fff;
  min-width:0;
}
#query {
  border:0;
  min-height:40px;
}
#search-submit {
  background:#b7dfce;
  color:#153e3a;
  border:0;
  font-weight:650;
}
.results {
  position:absolute;
  top:48px;
  left:0;
  right:0;
  background:#fff;
  color:#21454a;
  max-height:55vh;
  overflow:auto;
  box-shadow:0 8px 22px #0003;
  border-radius:8px;
}
.results:empty {
  display:none;
}
.results button {
  display:block;
  text-align:left;
  width:100%;
  border:0;
  border-bottom:1px solid #e2ece8;
  border-radius:0;
}
.results p {
  padding:12px;
  margin:0;
}
main {
  height:calc(100dvh - 70px);
  display:flex;
}
aside {
  width:340px;
  flex-shrink:0;
  overflow:auto;
  background:#f5f8f6;
  border-right:1px solid var(--border);
  z-index:12;
}
aside.closed {
  display:none;
}
.tabs {
  display:flex;
  gap:0;
  padding:0 12px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:#f5f8f6;
  z-index:1;
}
.tabs button {
  flex:1;
  background:transparent;
  border:0;
  border-radius:0;
  padding:12px 4px;
  color:#57716f;
}
.tabs button[aria-selected=true] {
  color:#155d57;
  border-bottom:3px solid #176b65;
  font-weight:700;
}
section[role=tabpanel] {
  padding:18px;
}
label {
  display:block;
  font-weight:600;
  margin-bottom:7px;
}
p {
  line-height:1.6;
}
.muted {
  font-size:12px;
  color:#58716f;
  line-height:1.6;
}
#filter-count {
  margin:5px 0 14px;
}
.layer-card {
  padding:15px 12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  margin:0 0 12px;
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.3px;
  font-weight:650;
  color:#718480;
  margin-bottom:9px;
}
.layer-card label:not(.range-label) {
  font-size:16px;
}
.layer-card select {
  font-size:12px;
  padding:9px 6px;
}
select optgroup {
  font-weight:700;
}
.range-label {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#607570;
  margin:12px 0 0;
}
.range-label output {
  font-variant-numeric:tabular-nums;
  color:#234c46;
}
input[type=range] {
  width:100%;
  accent-color:var(--green);
  cursor:pointer;
}
.layer-info {
  font-size:11px;
  color:#607773;
  margin-top:8px;
}
.layer-info a {
  margin-right:10px;
}
.layer-info details {
  margin-top:8px;
}
.layer-info .description {
  max-height:260px;
  overflow:auto;
  line-height:1.6;
  padding:8px 0;
  font-size:12px;
}
.description img {
  max-width:100%;
  height:auto;
}
.description table {
  width:100%;
}
.row {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:10px 0;
}
#map-wrap {
  position:relative;
  min-width:0;
  flex:1;
  background:#e3e9e6;
}
#map {
  width:100%;
  height:100%;
}
.tools {
  position:absolute;
  left:14px;
  top:14px;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  pointer-events:none;
}
.tools button {
  pointer-events:auto;
  box-shadow:0 2px 5px #163c4320;
  font-size:12px;
}
.compass {
  position:absolute;
  right:12px;
  top:14px;
  border:1px solid var(--border);
  border-radius:9px;
  box-shadow:0 2px 5px #0001;
}
.compass button {
  border:0;
  font-size:12px;
  width:100%;
  min-height:32px;
}
.compass label {
  font-size:10px;
  font-weight:400;
  text-align:center;
  margin:5px 0 0;
}
.compass input {
  margin-top:4px;
}
.coordinate-bar {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:#fffffff0;
  border-top:1px solid var(--border);
  padding:8px 13px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:12px;
}
.coordinate-bar output {
  font-variant-numeric:tabular-nums;
  font-size:14px;
  user-select:all;
}
.coordinate-bar span {
  color:#61716d;
  font-size:11px;
}
.coordinate-bar button {
  padding:3px 9px;
  min-height:28px;
  margin-left:auto;
  font-size:11px;
}
.ol-zoom {
  top:auto;
  bottom:110px;
  left:auto;
  right:14px;
}
.ol-zoom button {
  width:36px;
  height:38px;
  min-height:38px;
}
@media(pointer:coarse) {
  .ol-zoom button {
    width:44px;
    height:44px;
    min-height:44px;
  }
}
.ol-rotate {
  display:none;
}
.ol-attribution {
  bottom:49px;
  right:8px;
  font-size:10px;
  max-width:70%;
  background:#fffd;
  border-radius:4px;
}
.ol-scale-line {
  bottom:57px;
  left:12px;
}
.mode-hint {
  position:absolute;
  top:102px;
  left:14px;
  background:#183f43ed;
  color:#fff;
  border-radius:7px;
  padding:9px 13px;
  font-size:12px;
  line-height:1.5;
}
.tile-status {
  position:absolute;
  bottom:92px;
  left:12px;
  max-width:65%;
  padding:7px 10px;
  background:#fff5d7ed;
  color:#67491d;
  border-radius:6px;
  font-size:11px;
  pointer-events:none;
}
#toast {
  position:fixed;
  bottom:72px;
  left:50%;
  transform:translateX(-50%);
  max-width:90vw;
  background:#183f43;
  color:#fff;
  padding:12px 20px;
  border-radius:9px;
  box-shadow:0 4px 24px #0003;
  z-index:40;
  font-size:13px;
}
.track {
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  padding:12px;
  margin:12px 0;
}
.track.selected {
  border-color:#176b65;
  box-shadow:0 0 0 1px #176b65;
}
.track-title {
  display:flex;
  align-items:center;
  gap:7px;
}
.track-title input {
  accent-color:#176b65;
}
.track-title button {
  text-align:left;
  border:0;
  padding:3px;
  min-height:26px;
  font-weight:650;
  overflow-wrap:anywhere;
  flex:1;
}
.track input.name {
  margin:8px 0 3px;
  font-size:12px;
}
.track .row button {
  padding:5px 8px;
  font-size:11px;
  min-height:30px;
}
.track small {
  color:#60736d;
}
.track .delete {
  color:#a24137;
}
h2 {
  font-size:16px;
  margin-top:24px;
}
.sr {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
[hidden] {
  display:none!important;
}
@media(max-width:760px) {
  header {
    height:104px;
    padding:8px 12px;
    gap:10px;
    align-content:center;
    flex-wrap:wrap;
  }
  .brand {
    font-size:18px;
    min-width:0;
    flex:1;
  }
  .brand span {
    font-size:9px;
  }
  .home {
    font-size:11px!important;
  }
  form {
    flex-basis:100%;
    max-width:none;
    order:2;
  }
  #query {
    font-size:13px;
    min-height:35px;
  }
  #search-submit {
    min-height:35px;
    padding:6px 11px;
  }
  main {
    height:calc(100dvh - 104px);
  }
  aside {
    position:absolute;
    top:104px;
    bottom:0;
    left:0;
    width:min(340px,88vw);
    box-shadow:8px 0 24px #0002;
  }
  .tools {
    left:10px;
    top:10px;
    gap:4px;
  }
  .tools button {
    font-size:11px;
    padding:6px 8px;
    min-height:34px;
  }
  .compass {
    right:7px;
    top:10px;
    padding:5px;
  }
  .coordinate-bar {
    gap:5px;
    padding:7px 9px;
  }
  .coordinate-bar span {
    width:100%;
  }
  .coordinate-bar output {
    font-size:13px;
  }
  .ol-attribution {
    bottom:67px;
  }
  .ol-scale-line {
    bottom:74px;
  }
  .ol-zoom {
    bottom:120px;
  }
  .mode-hint {
    top:126px;
    left:10px;
    max-width:calc(100% - 92px);
    font-size:11px;
  }
  .tile-status {
    bottom:104px;
  }
  .tabs button {
    font-size:11px;
  }
}
.ol-attribution.ol-uncollapsible {
  bottom:49px;
  right:8px;
  max-width:calc(100% - 24px);
  text-align:right;
}
.ol-attribution.ol-uncollapsible ul {
  font-size:10px;
  white-space:normal;
  line-height:1.3;
  padding:2px 6px;
}
@media(max-width:760px) {
  .ol-attribution.ol-uncollapsible {
    bottom:67px;
    font-size:9px;
    max-width:calc(100% - 24px);
  }
}
.icon-tool svg {
  width:25px;
  height:20px;
  display:block;
}
.icon-tool {
  padding:8px!important;
}
.compass {
  width:76px;
  padding:4px;
  background:#fffffff5;
}
.compass button {
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.compass svg {
  width:62px;
  height:62px;
  transition:transform .08s linear;
}
.compass output {
  font-size:10px;
  color:#486269;
  line-height:14px;
}
.ruler-delete {
  border:2px solid #fff;
  border-radius:50%;
  width:28px;
  height:28px;
  min-height:28px;
  padding:0;
  font-size:22px;
  line-height:20px;
  background:#b34639;
  color:white;
  box-shadow:0 1px 7px #0004;
}
.ruler-delete:hover {
  background:#92342c;
  color:#fff;
}
.track-style {
  align-items:center;
  margin:10px 0;
}
.track-style label {
  font-size:11px;
  margin:0;
  display:flex;
  align-items:center;
}
.track-style input[type=color] {
  height:29px;
  padding:1px;
  border:1px solid #b7cac5;
  border-radius:5px;
  cursor:pointer;
}
.track-style select {
  width:70px;
  padding:5px;
  font-size:11px;
}
dialog {
  border:1px solid #b7cac5;
  border-radius:12px;
  padding:24px;
  color:#203f43;
  max-width:min(430px,90vw);
  width:400px;
  box-shadow:0 12px 60px #0003;
}
dialog::backdrop {
  background:#102e3c70;
}
dialog h2 {
  margin:0 0 20px;
}
dialog input {
  margin-bottom:12px;
}
@media(max-width:760px) {
  .compass {
    width:70px;
  }
  .compass svg {
    width:56px;
    height:56px;
  }
}
.track-style {
  gap:9px;
  flex-wrap:wrap;
}
.track-style label:first-child select {
  width:92px;
}
.track-style input[type=color] {
  width:25px;
}
.track-style label {
  gap:4px;
}
.track-style label {
  white-space:nowrap;
}
.track-style select,.track-style input[type=color] {
  flex-shrink:0;
}
#map3d {
  position:absolute;
  inset:0;
  z-index:1;
}
.tools,.compass,.coordinate-bar,.mode-hint,.tile-status {
  z-index:4;
}
.tools {
  right:90px;
}
.maplibregl-ctrl-bottom-right {
  bottom:52px!important;
}
.maplibregl-ctrl-bottom-left {
  bottom:52px!important;
}
#terrain-controls {
  position:absolute;
  right:12px;
  top:108px;
  width:150px;
  background:#fffffff0;
  border:1px solid #d7e1df;
  border-radius:8px;
  padding:10px;
  z-index:5;
}
#terrain-controls label {
  font-size:11px;
  margin:0 0 5px;
}
#three-note {
  position:absolute;
  top:90px;
  left:14px;
  background:#fffffff0;
  border-radius:5px;
  padding:6px 9px;
  max-width:55%;
  font-size:11px;
  z-index:5;
}
#task-panel {
  position:absolute;
  left:14px;
  bottom:85px;
  width:370px;
  max-width:calc(100% - 30px);
  max-height:55%;
  overflow:auto;
  background:#fffffff5;
  border:1px solid #b2c9c2;
  border-radius:10px;
  box-shadow:0 5px 26px #0003;
  padding:16px;
  z-index:7;
}
#task-panel h2 {
  margin:0;
  font-size:16px;
}
#task-panel p {
  font-size:12px;
  margin:10px 0;
}
#task-controls label {
  font-size:12px;
  width:100%;
}
#task-controls select {
  width:100px;
  margin-left:8px;
}
.height-chart {
  width:100%;
  height:120px;
  background:#f0f5f2;
  border-radius:5px;
}
#shared-banner {
  position:absolute;
  top:70px;
  left:340px;
  right:0;
  background:#fff4c9;
  color:#594b25;
  padding:6px 12px;
  z-index:25;
  font-size:11px;
  display:flex;
  gap:10px;
  align-items:center;
}
#shared-banner button {
  margin-left:auto;
  min-height:26px;
  padding:3px 7px;
  font-size:11px;
}
#share-dialog p {
  font-size:13px;
  line-height:1.6;
}
#share-dialog>button {
  margin:10px 4px 0 0;
}
#share-output {
  margin-top:15px;
}
@media(max-width:760px) {
  #shared-banner {
    top:104px;
    left:0;
    font-size:10px;
  }
  #task-panel {
    bottom:99px;
    max-height:50%;
    padding:12px;
  }
  #three-note {
    top:150px;
    font-size:10px;
    max-width:calc(100% - 110px);
  }
  #terrain-controls {
    top:104px;
    right:7px;
    width:90px;
    padding:6px;
  }
  .tools {
    right:82px;
  }
  .maplibregl-ctrl-bottom-right {
    bottom:70px!important;
  }
}
.shared-map #shared-banner {
  left:0;
  top:0;
  right:0;
}
.shared-map .tools,.shared-map .compass {
  top:66px;
}
.shared-map #terrain-controls {
  top:160px;
}
.shared-map #three-note {
  top:142px;
}
@media(max-width:760px) {
  .shared-map .tools,.shared-map .compass {
    top:76px;
  }
  .shared-map #terrain-controls {
    top:170px;
  }
  .shared-map #three-note {
    top:215px;
  }
}
/* Track editing: structured dialog, collapsible guidance and owned waypoints. */
#name-form {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  max-width:none;
  margin:0;
  flex:none;
}
#name-form h2 {
  margin:0 0 4px;
  font-size:18px;
}
#name-form label {
  margin:0;
  font-size:13px;
}
#name-form #point-name {
  margin:0;
  width:100%;
  height:44px;
  min-height:44px;
  font-size:14px;
}
#name-form .row {
  margin:4px 0 0;
  justify-content:flex-end;
  gap:8px;
}
#name-form button {
  white-space:nowrap;
}
#name-dialog {
  padding:22px;
  width:420px;
  max-width:calc(100vw - 32px);
}
.task-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.task-heading h2 {
  flex:1;
}
#task-collapse {
  padding:4px 8px;
  min-height:30px;
  font-size:11px;
  white-space:nowrap;
}
.editor-help {
  font-size:12px;
  line-height:1.5;
  margin:10px 0;
  color:#54716d;
}
.editor-help summary {
  cursor:pointer;
  color:#176b65;
  font-weight:600;
  padding:4px 0;
}
.editor-help p {
  margin:6px 0!important;
}
.mode-hint {
  pointer-events:auto;
  max-width:min(440px,calc(100% - 120px));
}
.mode-hint summary {
  cursor:pointer;
  font-weight:600;
}
.mode-hint[open] #mode-hint-text {
  padding-top:7px;
}
.waypoint-list {
  border-top:1px solid #dce7e2;
  margin-top:12px;
  padding-top:10px;
}
.waypoint-list>summary {
  font-size:12px;
  font-weight:600;
  color:#176b65;
  cursor:pointer;
}
.waypoint-card {
  border:0;
  border-left:3px solid #91b8a9;
  border-radius:0 7px 7px 0;
  margin:10px 0 0 9px;
  padding:8px 8px 4px 10px;
  background:#f2f8f5;
}
.waypoint-card .track-title button {
  font-size:12px;
}
.waypoint-card input.name {
  background:#fff;
}
@media(max-width:520px) {
  #name-dialog {
    padding:18px;
  }
  #name-form .row button {
    flex:1;
  }
  .task-heading {
    align-items:flex-start;
  }
  .mode-hint {
    max-width:calc(100% - 92px);
  }
}
/* Compact track list with a dedicated route inspector. */
.tabs button {
  font-size:13px;
}
#tracks-pane {
  padding:14px;
}
.tracks-tools>.muted {
  display:none;
}
.tracks-tools>.row {
  margin:0 0 10px;
}
.tracks-tools button {
  font-size:12px;
  padding:7px 9px;
}
.compact-track {
  padding:10px 11px;
  margin:8px 0;
  box-shadow:0 1px 3px #183f4305;
}
.compact-track .track-title {
  gap:8px;
  min-width:0;
}
.compact-track .track-name {
  font-size:13px;
  font-weight:650;
  min-width:0;
  line-height:1.4;
  padding:3px 0;
}
.track-title input[type=checkbox] {
  margin:0;
  flex-shrink:0;
}
.track-swatch {
  width:24px;
  height:4px;
  border-radius:4px;
  flex-shrink:0;
  display:inline-block;
}
.track-distance {
  font-size:12px;
  color:#52716e;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.compact-actions {
  margin:8px 0 0!important;
}
.compact-actions .track-open {
  color:#176b65;
  font-weight:600;
}
.compact-actions button {
  flex:1;
}
.selected-track-settings {
  margin-top:10px;
  padding-top:5px;
  border-top:1px solid #e2eae7;
}
.selected-track-settings .track-style {
  justify-content:space-between;
  margin:8px 0 0;
}
.compact-track .track-style label {
  font-size:12px;
}
.compact-track .track-style input[type=color] {
  height:30px;
}
.compact-track .waypoint-list {
  margin-top:10px;
  padding-top:8px;
}
.compact-track .waypoint-card {
  box-shadow:none;
  margin:7px 0 0 7px;
  padding:5px 6px 5px 9px;
}
.waypoint-card .track-swatch {
  width:7px;
  height:7px;
  border-radius:50%;
}
.waypoint-card .track-name {
  font-weight:500;
}
.track-menu {
  position:relative;
  flex-shrink:0;
  align-self:center;
}
.track-menu>summary {
  list-style:none;
  cursor:pointer;
  font-weight:700;
  font-size:22px;
  line-height:26px;
  text-align:center;
  min-width:28px;
  min-height:30px;
  border-radius:5px;
  color:#42655e;
}
.track-menu>summary::-webkit-details-marker {
  display:none;
}
.track-menu>summary:hover {
  background:#eaf3ef;
}
.track-menu[open]>summary {
  background:#dcece5;
}
.track-menu-items {
  position:absolute;
  right:0;
  top:32px;
  min-width:220px;
  max-width:75vw;
  padding:6px;
  background:white;
  box-shadow:0 6px 22px #183f4333;
  border:1px solid #cbdcd5;
  border-radius:8px;
  z-index:16;
}
.track-menu-items button {
  display:block;
  width:100%;
  text-align:left;
  border:0;
  border-radius:4px;
  padding:9px!important;
  font-size:12px!important;
  min-height:36px!important;
}
.track-menu-items .delete {
  color:#a24137;
}
.track-detail-open .tracks-tools {
  display:none;
}
.route-back {
  font-size:12px;
  border:0;
  background:transparent;
  padding:4px 0;
  min-height:32px;
}
.route-heading {
  padding:14px 0;
  border-bottom:1px solid #d7e1df;
}
.route-heading .eyebrow {
  font-size:10px;
  letter-spacing:1px;
}
.route-heading h2 {
  font-size:21px;
  line-height:1.3;
  overflow-wrap:anywhere;
  margin:0 0 10px;
}
.route-totals {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:13px;
  color:#4b6b62;
}
.route-totals strong {
  font-size:22px;
  color:#183f43;
}
.route-actions button {
  font-size:12px;
  flex:1;
  padding:8px;
}
.route-section {
  margin-top:10px;
  background:white;
  border:1px solid #d7e1df;
  border-radius:8px;
  padding:10px;
}
.route-section>summary {
  display:flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  list-style:none;
  line-height:1.4;
}
.route-section>summary:before {
  content:'›';
  font-size:20px;
  color:#58716f;
}
.route-section[open]>summary:before {
  content:'⌄';
  font-size:16px;
}
.route-section>summary strong {
  flex:1;
  font-size:13px;
  min-width:0;
  overflow-wrap:anywhere;
}
.route-section .section-actions {
  margin:9px 0 5px;
}
.section-actions>button {
  font-size:11px;
  min-height:30px;
  padding:4px 7px;
}
.section-actions>.track-menu {
  margin-left:auto;
}
.route-section .track-style {
  font-size:11px;
  justify-content:space-between;
  gap:6px;
}
.route-tree {
  border-left:1px dashed #9dbab0;
  margin:14px 0 0 8px;
  padding-left:14px;
}
.route-endpoint {
  font-size:11px;
  color:#627b73;
  position:relative;
  padding:4px 0;
}
.route-endpoint:before {
  content:'';
  position:absolute;
  left:-18px;
  top:9px;
  width:7px;
  height:7px;
  background:#749e90;
  border:1px solid white;
  border-radius:50%;
}
.route-waypoint {
  position:relative;
  padding:5px 0;
  border-bottom:1px solid #edf2ef;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3px;
}
.route-waypoint>button {
  flex:1;
  text-align:left;
  border:0;
  padding:4px 0;
  min-height:30px;
  font-size:13px;
  overflow-wrap:anywhere;
}
.route-waypoint>small {
  font-size:11px;
  color:#627b73;
}
.route-waypoint .name {
  flex-basis:80%;
  width:80%!important;
  font-size:12px;
}
.route-elevation {
  margin-top:18px;
  padding-top:4px;
  border-top:1px solid #d7e1df;
}
.route-elevation h3 {
  font-size:15px;
  margin:12px 0 8px;
}
.route-elevation p {
  margin:7px 0;
}
.route-profile {
  width:100%;
  height:auto;
  display:block;
  background:#f0f5f2;
  border-radius:6px;
}
.profile-request {
  font-size:12px;
  width:100%;
  text-align:left;
  margin-top:7px;
  overflow-wrap:anywhere;
}
@media(min-width:1000px) {
  aside {
    width:360px;
  }
  #shared-banner {
    left:360px;
  }
}
@media(max-width:760px) {
  .route-heading h2 {
    font-size:19px;
  }
  .route-totals strong {
    font-size:20px;
  }
  .compact-track .track-name {
    font-size:12px;
  }
}
.compact-track .track-style label:first-child select,.route-section .track-style label:first-child select {
  width:80px;
}
.compact-track .track-style input[type=color] {
  width:25px;
}
.track-style label {
  flex-wrap:wrap;
}
.route-section .track-style {
  flex-wrap:wrap;
}
.track-menu>summary:focus-visible {
  outline:3px solid #e3a73f;
  outline-offset:2px;
}
/* Route tools and a separate elevation dock below both map renderers. */
#map-area {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  flex:1;
  overflow:hidden;
}
#map-area>#map-wrap {
  min-height:0;
}
#route-profile-dock {
  flex-shrink:0;
  border-top:1px solid #b7cac5;
  background:#fff;
  padding:8px 18px;
  color:#203f43;
  overflow:auto;
}
.profile-dock-heading {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:30px;
}
.profile-dock-heading strong {
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
}
.profile-dock-heading button {
  font-size:11px;
  padding:3px 9px;
  min-height:28px;
}
#route-profile-dock .route-profile {
  width:100%;
  display:block;
  touch-action:none;
}
#route-profile-dock .profile-readout {
  display:block;
  font-size:12px;
  min-height:20px;
  margin:4px 0 0;
}
#route-profile-dock p {
  margin:8px 0;
}
#track-create-actions,#track-import-actions {
  display:grid;
  gap:7px;
}
#track-create-actions {
  grid-template-columns:1fr 1fr;
}
#track-import-actions {
  grid-template-columns:1fr 1fr 1fr;
}
#track-create-actions button,#track-import-actions button {
  white-space:nowrap;
  min-width:0;
  font-size:11px;
  padding:8px 4px;
}
#track-create-actions #plan-route {
  font-size:11px;
}
.tracks-tools>.row:last-child {
  padding-top:10px;
  border-top:1px solid #d7e1df;
}
@media(max-width:760px) {
  #route-profile-dock {
    padding:6px 10px;
  }
  .profile-dock-heading strong {
    font-size:12px;
  }
  .profile-dock-heading button {
    min-height:30px;
  }
}
/* Small track utilities: per-download formats, reversible visibility and profile sizing. */
.track-download-dialog {
  width:min(430px,calc(100vw - 32px));
  padding:22px;
}
.track-download-dialog h2 {
  margin:0 0 16px;
}
.export-format-choice {
  display:block;
  text-align:left;
  width:100%;
  padding:12px;
  margin:8px 0;
}
.export-format-choice strong {
  display:block;
  font-size:15px;
  margin-bottom:4px;
}
.export-format-choice span {
  display:block;
  color:#58716f;
  font-size:12px;
  line-height:1.5;
}
.export-cancel {
  display:block;
  margin:16px 0 0 auto;
}
.track-visibility {
  gap:8px;
  border-top:1px solid #d7e1df;
  padding-top:10px;
}
.track-visibility button {
  flex:1;
  font-size:12px;
}
#toast button {
  margin-left:14px;
  color:#183f43;
  background:#d4eee3;
  border:0;
  min-height:32px;
  padding:5px 12px;
  font-weight:650;
}
#route-profile-dock {
  max-height:65%;
  position:relative;
  padding-top:14px;
}
#route-profile-dock .route-profile {
  height:var(--profile-chart-height,150px);
  min-height:96px;
}
.profile-resize-handle {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:13px;
  cursor:ns-resize;
  touch-action:none;
  z-index:1;
}
.profile-resize-handle:before {
  content:'';
  position:absolute;
  width:44px;
  height:3px;
  border-radius:3px;
  background:#adc6be;
  top:4px;
  left:calc(50% - 22px);
}
.profile-resize-handle:hover:before,.profile-resize-handle:focus-visible:before {
  background:#176b65;
}
.profile-resize-handle:focus-visible {
  outline:2px solid #176b65;
  outline-offset:-2px;
}
@media(max-width:760px) {
  #route-profile-dock {
    max-height:65%;
  }
  #route-profile-dock .route-profile {
    height:var(--profile-chart-height,115px);
  }
}
.track-detail-open .track-visibility {
  display:none;
}
.track-color-palette,.waypoint-icon-palette {
  min-width:0;
  border:0;
  padding:0;
  margin:8px 0;
}
.track-color-palette legend,.waypoint-icon-palette legend {
  font-size:12px;
  font-weight:600;
  margin-bottom:7px;
}
.track-color-palette {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  width:100%;
}
.palette-swatch {
  flex:0 0 28px!important;
  width:28px;
  min-height:28px!important;
  height:28px;
  padding:0!important;
  border:1px solid #9ab2aa;
  border-radius:6px;
}
.palette-swatch[aria-pressed=true] {
  outline:2px solid #176b65;
  outline-offset:2px;
  box-shadow:inset 0 0 0 2px white;
}
.track-style {
  display:block;
}
.track-style>label {
  display:flex;
  justify-content:flex-start;
  gap:10px;
  margin-top:12px;
}
.point-appearance {
  width:100%;
}
.waypoint-icon-palette {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.waypoint-icon-choice {
  display:flex;
  align-items:center;
  gap:5px;
  text-align:left;
  min-width:0;
  font-size:11px;
  padding:5px;
}
.waypoint-icon-choice svg {
  display:block;
  width:26px;
  height:26px;
  flex-shrink:0;
}
.waypoint-icon-choice[aria-pressed=true] {
  color:#183f43;
  border-color:#176b65;
  background:#e1f1e9;
  box-shadow:0 0 0 1px #176b65;
}
.waypoint-icon-choice span:last-child {
  overflow-wrap:anywhere;
}
.waypoint-icon-choice:focus-visible,.palette-swatch:focus-visible {
  outline:3px solid #e3a73f;
  outline-offset:2px;
}
#name-dialog {
  max-height:calc(100dvh - 32px);
  overflow:auto;
}
#name-form>.point-appearance {
  margin:0;
}
#name-form>.row {
  position:sticky;
  bottom:-22px;
  background:#fff;
  padding:10px 0 4px;
  margin-bottom:0;
  z-index:2;
}
#point-appearance-fields .waypoint-icon-palette {
  margin-bottom:0;
}
#point-appearance-fields .waypoint-icon-choice {
  min-height:36px;
}
.waypoint-swatch {
  display:inline-flex;
  width:21px;
  height:21px;
  flex:0 0 21px;
}
.waypoint-swatch svg {
  width:21px;
  height:21px;
  display:block;
}
.waypoint-card .track-title {
  min-height:28px;
}
.waypoint-card.selected {
  box-shadow:none;
}
.waypoint-card .track-name {
  font-size:12px;
}
.compact-track {
  cursor:pointer;
}
.compact-track:focus-visible {
  outline:2px solid #176b65;
  outline-offset:2px;
}
.track-title .track-color-button,.route-section .track-color-button,.route-totals .track-color-button {
  flex:0 0 24px;
  width:24px;
  height:18px;
  min-height:18px;
  padding:0;
  border:0;
  border-top:7px solid white;
  border-bottom:7px solid white;
  border-radius:0;
  background-clip:padding-box;
}
.track-color-button:hover,.track-color-button:focus-visible {
  outline:2px solid #176b65;
  outline-offset:2px;
}
.appearance-done {
  font-size:12px;
  margin-top:8px;
}
.route-section .section-name {
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  text-align:left;
  font-size:13px;
  font-weight:650;
  padding:0;
  white-space:normal;
  overflow-wrap:anywhere;
}
.route-section .section-name:hover {
  color:#176b65;
}
.split-confirm {
  background:#176b65;
  color:#fff;
  border:2px solid #fff;
  box-shadow:0 2px 10px #183f4360;
  white-space:nowrap;
  min-height:44px;
}
.split-confirm:hover {
  background:#135852;
}
@media(max-width:760px) {
  .track-menu-items button {
    min-height:44px!important;
  }
}
.route-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.route-actions button {
  min-width:0;
  overflow-wrap:anywhere;
}
.route-section .section-actions {
  display:flex;
  align-items:stretch;
}
.route-section .section-actions>button {
  flex:1;
  min-width:0;
}
.route-section>summary .section-name {
  min-width:0;
}
.daily-summary {
  overflow-x:auto;
}
.daily-summary th {
  white-space:normal;
  vertical-align:bottom;
}
.daily-summary td {
  vertical-align:top;
}
.coordinate-bar #share-point {
  margin-left:auto;
}
.coordinate-bar #share-point:not([hidden])+button {
  margin-left:0;
}
@media(max-width:420px) {
  .coordinate-bar:has(#share-point:not([hidden])) span {
    display:none;
  }
  .coordinate-bar:has(#share-point:not([hidden])) output {
    flex-basis:100%;
  }
  .coordinate-bar #share-point {
    margin-left:0;
  }
}
/* The flight owns its synchronized profile; restore the route dock on exit. */
body.flyover-active #route-profile-dock {
  display:none!important;
}
.layer-options {
  margin-top:12px;
  border-top:1px solid #d7e1df;
  padding-top:10px;
}
.layer-options label {
  font-size:11px!important;
  margin:8px 0;
}
.layer-options select,.layer-options input {
  font-size:12px;
}
.layer-options>button {
  font-size:11px;
  min-height:30px;
  padding:4px 8px;
}
.contour-palette {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.contour-color {
  width:24px;
  height:24px;
  min-height:24px;
  padding:0;
  border:1px solid #829c97;
  border-radius:50%;
}
.contour-color[aria-pressed=true] {
  outline:2px solid #176b65;
  outline-offset:2px;
}
.layer-options p {
  margin:8px 0 0;
}
/* Catalogue and revision belong after the active panel content. */
#panel {
  display:flex;
  flex-direction:column;
  overflow:auto;
}
#panel.closed {
  display:none;
}
#panel>.tabs {
  flex-shrink:0;
}
#panel>section[role=tabpanel] {
  flex:1 0 auto;
  min-height:0;
  overflow:visible;
}
.panel-footer {
  flex-shrink:0;
  margin-top:auto;
  padding:14px 18px 18px;
  border-top:1px solid var(--border);
  font-size:12px;
  line-height:1.5;
}
.panel-footer a {
  display:inline-block;
  color:#58716f;
  text-decoration:underline;
  text-underline-offset:3px;
}
.panel-footer a:hover {
  color:var(--green);
}
@media(min-width:761px) {
  .coordinate-bar {
    left:auto;
    right:0;
    max-width:calc(100% - 18px);
    gap:8px;
    border:1px solid var(--border);
    border-right:0;
    border-bottom:0;
    border-radius:8px 0 0 0;
    padding:6px 10px;
  }
  .coordinate-bar #coordinate-label {
    display:none;
  }
  .coordinate-bar button,.coordinate-bar #share-point,.coordinate-bar #share-point:not([hidden])+button {
    margin-left:0;
  }
  .coordinate-bar output {
    font-size:12px;
    white-space:nowrap;
  }
  .coordinate-bar #point-elevation {
    font-size:11px;
  }
  .coordinate-bar #point-details {
    margin-left:0;
  }
}
/* Stable point-panel width and high-contrast map scale. */
@media(min-width:761px) {
  .coordinate-bar {
    width:520px;
    min-height:42px;
    flex-wrap:nowrap;
  }
  .coordinate-bar #coordinates {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .coordinate-bar #point-elevation {
    flex:0 0 74px;
    width:74px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .coordinate-bar button {
    flex-shrink:0;
    padding:3px 6px;
  }
  .ol-attribution {
    right:528px;
    bottom:8px;
    max-width:calc(100% - 548px);
  }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
    position:absolute;
    right:528px;
    bottom:-44px;
    margin:0;
    max-width:220px;
  }
}
.ol-scale-line {
  background:#fff;
  border:1px solid #829c97;
  box-shadow:0 1px 4px #183f4333;
  padding:4px 5px;
  border-radius:5px;
  opacity:1;
}
.ol-scale-line-inner {
  color:#173e43;
  border:2px solid #173e43;
  border-top:0;
  background:#fff;
  font-size:11px;
  font-weight:700;
  line-height:16px;
  text-shadow:none;
  transition:width .15s;
  margin:0;
}
.maplibregl-ctrl-scale {
  background:#fff;
  color:#173e43;
  border-color:#173e43;
  font-size:11px;
  font-weight:700;
  text-shadow:none;
  box-shadow:0 1px 4px #183f4333;
}
.ol-attribution button {
  width:25px;
  height:25px;
  min-height:25px;
  margin:0;
  padding:0;
  font-size:15px;
  color:#173e43;
  background:#fff;
}
.ol-attribution ul {
  white-space:normal;
  text-align:left;
  max-height:120px;
  overflow:auto;
  line-height:1.45;
  color:#173e43;
  background:#fff;
}
.ol-attribution:not(.ol-collapsed) {
  background:#fff;
  border:1px solid #a8bcb6;
  border-radius:5px;
}
.ol-attribution.ol-collapsed {
  background:transparent;
}
@media(min-width:761px) and (max-width:1100px) {
  .ol-attribution {
    left:12px;
    right:auto;
    bottom:53px;
    max-width:calc(100% - 24px);
  }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
    right:0;
    bottom:0;
    max-width:260px;
  }
}
/* Keep the scale near the lower edge, clear of the point panel. */
@media(min-width:761px) {
  .ol-scale-line {
    bottom:8px;
  }
  .maplibregl-ctrl-bottom-left {
    bottom:0!important;
  }
}

.track-save-status{font-size:11px;color:var(--muted,#547178);margin:4px 0 8px;min-height:1.3em}.track-save-status[data-state="error"]{color:#a52d22;font-weight:600}.track-save-status[data-state="pending"]{color:#865e13}

/* Short screens keep the map usable; the profile remains manually resizable. */
@media(max-height:500px) {
  #route-profile-dock { max-height:50%; padding-bottom:4px; }
  #route-profile-dock .route-profile { height:var(--profile-chart-height,96px); }
  .profile-dock-heading { min-height:28px; }
}

.layer-info details>summary {
  min-height:28px;
  padding:5px 0;
  font-size:var(--ui-caption-size);
  cursor:pointer;
}

/* Shared interaction states. Selection does not enable geometry editing. */
.compact-track.selected { background:var(--ui-selected); }
.compact-track.is-editing,.route-section.is-editing,.single-route-content.is-editing {
  border-color:var(--ui-focus);
  outline:2px dashed var(--ui-focus);
  outline-offset:-2px;
}
.mode-hint[data-edit-state=geometry] {
  background:var(--ui-preview);
  color:#67491d;
  border:1px solid var(--ui-focus);
}
.mode-hint[data-edit-state=geometry] summary {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:var(--ui-caption-size);
  min-height:20px;
}
#task-panel:has(#task-apply:not([hidden])) { border-color:var(--ui-focus); }
.track-title .track-distance,.track-title .track-menu { flex-shrink:0; }
.compact-track .track-name { overflow-wrap:anywhere; }
.compact-track .track-title { min-width:0; }
.route-inspector .route-actions { gap:var(--ui-space); }
.route-inspector .route-actions button { flex:1 1 130px; }
.route-inspector .daily-summary table { font-variant-numeric:tabular-nums; }
.route-inspector .daily-summary th:not(:first-child),
.route-inspector .daily-summary td:not(:first-child) { text-align:right; }
.route-inspector .daily-summary td:first-child button { overflow-wrap:anywhere; }
dialog {
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 24px);
  overscroll-behavior:contain;
}
dialog input,dialog select,dialog textarea { min-width:0; max-width:100%; }
@media(pointer:coarse) {
  .track-title .track-color-button,.route-section .track-color-button,.route-totals .track-color-button {
    height:32px;
    min-height:32px;
    border-top-width:14px;
    border-bottom-width:14px;
    flex-basis:32px;
    width:32px;
  }
  .track-menu>summary { min-width:32px; min-height:32px; }
}