/* GNSS Satellite Map & Waypoint Planner Styles */

.gnss-map-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 280px;
  background: var(--pane, #32373c);
  color: var(--text, #ffffff);
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  position: relative;
  overflow: hidden;
}

/* Floating quick-action strip over map (top-left) */
.gnss-floating-bar {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 15;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}

.gnss-floating-bar > * {
  pointer-events: auto;
}

/* Center-on-vehicle control, bottom-right over the map */
.gnss-bottom-cluster {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  pointer-events: none;
}

.gnss-bottom-cluster > * {
  pointer-events: auto;
}

.gnss-map-pane button.gnss-center-btn,
.gnss-map-pane button.gnss-center-btn[aria-pressed="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.28));
  border-radius: 4px;
  color: var(--text-2, #c9ced3);
  cursor: pointer;
  transition: all 0.15s ease;
}

.gnss-map-pane button.gnss-center-btn:hover,
.gnss-map-pane button.gnss-center-btn[aria-pressed="true"]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--hairline, rgba(255, 255, 255, 0.28));
  color: var(--text, #ffffff);
}

.gnss-map-pane button.gnss-center-btn.is-centered,
.gnss-map-pane button.gnss-center-btn.is-centered[aria-pressed="true"] {
  background: transparent;
  color: var(--text, #ffffff);
}

.gnss-action-btn,
.gnss-btn {
  background: rgba(24, 27, 30, 0.85);
  color: var(--text-2, #e7eaec);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
  border-radius: 2px;
  padding: 4px 8px;
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  transition: background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}

.gnss-action-btn:hover,
.gnss-btn:hover {
  background: var(--hover, #424950);
  color: var(--text, #ffffff);
  border-color: rgba(255, 255, 255, 0.35);
}

.gnss-action-btn:active,
.gnss-action-btn.active,
.gnss-action-btn[aria-pressed="true"],
.gnss-btn:active,
.gnss-btn.active,
.gnss-btn[aria-pressed="true"] {
  background: var(--accent, #2f4a8a);
  border-color: var(--accent-line, #6f8fd6);
  color: var(--text, #ffffff);
}

.gnss-command-status {
  background: var(--pane, #32373c);
  border: 1px solid var(--accent-line, #6f8fd6);
  color: var(--text-2, #e7eaec);
  padding: 4px 8px;
  max-width: 100%;
}


.gnss-map-pane button.gnss-command-close { padding: 0 2px; border: 0; background: transparent; color: inherit; cursor: pointer; }

.gnss-command-status.error { border-color: var(--alert-red, #b8302a); }
.gnss-command-status.hidden { display: none; }

/* Status badges matching system readouts */
.gnss-badge {
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.gnss-badge.no-fix {
  background: rgb(216 183 88 / 0.15);
  color: var(--alert-amber, #d8b758);
  border: 1px solid rgba(216, 183, 88, 0.4);
}

.gnss-badge.dead-reckoning {
  background: rgb(47 74 138 / 0.3);
  color: var(--accent-line, #6f8fd6);
  border: 1px solid var(--accent, #2f4a8a);
}

.gnss-badge.live-fix {
  background: rgb(47 158 68 / 0.2);
  color: var(--alert-green, #2f9e44);
  border: 1px solid rgba(47, 158, 68, 0.4);
}

/* Warnings banner matching .off-path-banner */
.gnss-warning-banner {
  position: absolute;
  top: 66px;
  left: 6px;
  right: 6px;
  background: rgba(24, 27, 30, 0.96);
  border: 1px solid var(--alert-amber, #d8b758);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 3px;
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  color: var(--text-2, #e7eaec);
  white-space: normal;
}

.gnss-warning-banner.danger {
  border-color: var(--alert-red, #b8302a);
}

.gnss-warning-banner.caution {
  border-color: var(--alert-amber, #d8b758);
}

.gnss-dismiss-btn {
  background: transparent;
  border: none;
  color: var(--text-3, #c9ced3);
  cursor: pointer;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1;
}

.gnss-dismiss-btn:hover {
  color: var(--text, #ffffff);
}

.gnss-warning-banner.hidden,
.gnss-pose-dialog.hidden {
  display: none !important;
}

/* Map canvas container */
.gnss-map-container {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.gnss-leaflet-map {
  z-index: 0; /* contains Leaflet's own 400-1000 layers so the bar and HUD stay on top */
  width: 100%;
  height: 100%;
  background: #14171a;
}

/* Telemetry & details HUD overlay */
.gnss-hud-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  max-width: 320px;
}
.gnss-hud-overlay > * {
  pointer-events: auto;
}
.gnss-hud-panel {
  background: rgba(20, 23, 26, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
  border-radius: 3px;
  padding: 6px 10px;
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  color: var(--text-3, #c9ced3);
}

.gnss-hud-details > summary {
  pointer-events: auto;
  cursor: pointer;
  color: var(--text-3, #c9ced3);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gnss-hud-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  line-height: 1.45;
}

.gnss-hud-label {
  color: var(--text-3, #c9ced3);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gnss-hud-value {
  color: var(--value, #ece8e2);
  font-family: inherit;
  font-size: 10.5px;
}

/* Pose Seed / Orientation dialog */
.gnss-pose-dialog {
  position: absolute;
  top: 40px;
  left: 6px;
  z-index: 25;
  background: var(--raised, #3a4046);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  padding: 10px 12px;
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  color: var(--text-2, #e7eaec);
  width: 250px;
}

.gnss-pose-dialog h3 {
  margin: 0 0 8px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text, #ffffff);
}

.gnss-pose-dialog label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-3, #c9ced3);
  font-size: 10.5px;
}

.gnss-pose-dialog label span {
  color: var(--value, #ece8e2);
  font-weight: 600;
}

.gnss-pose-dialog input[type="range"] {
  width: 100%;
  margin-top: 4px;
  accent-color: var(--accent-line, #6f8fd6);
}

.gnss-pose-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}

.gnss-pose-dialog-actions button {
  min-height: 24px;
  height: 24px;
  padding: 0 10px;
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  cursor: pointer;
  border-radius: 2px;
  background: var(--pane, #32373c);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
  color: var(--text-2, #e7eaec);
  transition: background 120ms var(--ease);
}

.gnss-pose-dialog-actions button:hover {
  background: var(--hover, #424950);
  color: var(--text, #ffffff);
}

.gnss-pose-dialog-actions button.action-confirm {
  background: var(--accent, #2f4a8a);
  border-color: var(--accent-line, #6f8fd6);
  color: var(--text, #ffffff);
}

.gnss-pose-dialog-actions button.action-confirm:hover {
  background: var(--accent-hover, #3a5aa3);
}

/* Heading seed dialog: same look as the pose dialog, dial only */
.gnss-heading-dialog {
  position: absolute;
  top: 40px;
  left: 6px;
  z-index: 25;
  background: var(--raised, #3a4046);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  padding: 10px 12px;
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  color: var(--text-2, #e7eaec);
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.gnss-heading-dialog.hidden { display: none !important; }
.gnss-heading-dialog h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text, #ffffff);
}
.gnss-heading-dialog .gnss-heading-value {
  font-size: 14px;
  color: var(--value, #ece8e2);
}

/* Waypoint Leaflet Marker Pins */
.gnss-waypoint-container {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}

.gnss-waypoint-container:active { cursor: grabbing; }

.gnss-waypoint-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pane, #32373c);
  border: 1.5px solid var(--accent-line, #6f8fd6);
  color: var(--text, #ffffff);
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  position: relative;
}

.gnss-waypoint-heading-arrow {
  position: absolute;
  pointer-events: none;
  transform-origin: center;
}

.gnss-waypoint-rotate-handle {
  pointer-events: all;
  cursor: crosshair;
}

/* While placing waypoints a click past an arrow tip places one; Shift-drag still rotates. */
.gnss-adding-waypoints .gnss-waypoint-rotate-handle { pointer-events: none; }

.gnss-waypoint-rotate-handle line,
.gnss-waypoint-rotate-knob {
  stroke: var(--accent-line, #6f8fd6);
  stroke-width: 1.5;
}

.gnss-waypoint-rotate-knob { fill: var(--pane, #32373c); }

.gnss-map-pane .leaflet-popup-content-wrapper,
.gnss-map-pane .leaflet-popup-tip {
  background: var(--pane, #32373c);
  color: var(--text-2, #e7eaec);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
  border-radius: 2px;
}

.gnss-map-pane .leaflet-popup-content {
  margin: 10px 12px;
}

.gnss-map-pane .leaflet-popup-close-button {
  color: var(--text-3, #c9ced3) !important;
}

.gnss-waypoint-editor {
  min-width: 180px;
  text-align: center;
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
}

.gnss-waypoint-editor h4 {
  margin: 0 0 4px;
  color: var(--text, #ffffff);
  font-size: 12px;
}

.gnss-heading-dial {
  width: 94px;
  height: 94px;
  margin: 0 auto 4px;
  position: relative;
  border: 1px solid var(--accent-line, #6f8fd6);
  border-radius: 50%;
  background: var(--raised, #3a4046);
  color: var(--text-3, #c9ced3);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.gnss-heading-dial:focus-visible {
  outline: 2px solid var(--accent-line, #6f8fd6);
  outline-offset: 2px;
}

.gnss-heading-dial > span:not(.gnss-dial-arrow) {
  position: absolute;
  font-size: 10px;
}

.gnss-dial-n { top: 3px; left: 43px; }
.gnss-dial-e { top: 39px; right: 5px; }
.gnss-dial-s { bottom: 3px; left: 43px; }
.gnss-dial-w { top: 39px; left: 5px; }

.gnss-dial-arrow {
  position: absolute;
  inset: 19px;
  color: var(--accent-line, #6f8fd6);
  font: 600 42px/52px var(--sans, sans-serif);
  text-align: center;
  transform-origin: center;
}

.gnss-heading-value {
  display: block;
  color: var(--value, #ece8e2);
  margin-bottom: 7px;
}

.gnss-heading-presets,
.gnss-waypoint-actions {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.gnss-heading-presets .gnss-btn { min-width: 31px; }
.gnss-waypoint-actions { margin-top: 7px; }

/* Leaflet dark theme tweaks */
.leaflet-container {
  background: #14171a !important;
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace) !important;
}

.leaflet-bar a {
  background-color: rgba(20, 23, 26, 0.8) !important;
  border-color: var(--hairline, rgba(255, 255, 255, 0.22)) !important;
  color: var(--text, #ffffff) !important;
}

.leaflet-bar a:hover {
  background-color: var(--hover, #424950) !important;
}

.leaflet-control-attribution {
  background: rgba(20, 23, 26, 0.6) !important;
  color: var(--text-3, #c9ced3) !important;
  font-size: 8px !important;
  line-height: 1.25 !important;
  padding: 0 4px !important;
}

.leaflet-control-attribution a {
  color: var(--text-3, #c9ced3) !important;
}

.link-loss-policy > * + * { display: block; margin-top: 4px; }
.link-loss-policy > summary { cursor: pointer; }
.link-loss-policy select { width: 100%; }
.link-loss-policy > label:has(input) { display: flex; align-items: center; gap: 6px; }
.link-loss-policy label input { width: 64px; flex: none; margin-left: auto; }

/* Route upload: the long-route warning, then the progress while the vehicle stands */
.route-upload {
  position: absolute;
  top: 66px;
  left: 6px;
  z-index: 25;
  width: min(380px, calc(100% - 12px));
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(24, 27, 30, 0.96);
  border: 1px solid var(--accent-line, #6f8fd6);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  color: var(--text-2, #e7eaec);
}

.route-upload.caution { border-color: var(--alert-amber, #d8b758); }
.route-upload.hidden { display: none; }
.route-upload-bar { height: 6px; background: var(--hairline, rgba(255, 255, 255, 0.22)); }
.route-upload-bar[hidden] { display: none; }
.route-upload-bar span { display: block; height: 100%; width: 0; background: var(--accent-line, #6f8fd6); }
.route-upload-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Route report: docked under the map after a plan, so it covers none of the map's controls */
.route-report {
  flex: none;
  max-height: 45%; /* the map keeps most of a short pane; the card scrolls */
  overflow-y: auto;
  border-top: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
  background: rgba(24, 27, 30, 0.96);
  color: var(--text-2, #e7eaec);
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
}

.route-report[hidden] { display: none; }

.route-report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
}

.route-report-badge {
  padding: 2px 7px;
  border: 1px solid currentColor;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.route-report-km { color: var(--text, #e6e2dc); font-size: 17px; letter-spacing: 0.02em; }
.route-report-muted { color: var(--text-3, #b6b8b7); }
.route-report-confidence { margin-left: auto; }

.route-report-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 10px;
}

.route-report-profile { flex: 1 1 320px; min-width: 0; cursor: crosshair; }
.route-report-side { flex: 1 1 300px; min-width: 0; }

.route-report-chart { height: 84px; }
.route-report-chart svg { display: block; width: 100%; height: 100%; }
.route-report-area { fill: rgb(111 143 214 / 0.18); }
.route-report-line { fill: none; stroke: var(--accent-line, #6f8fd6); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.route-report-cursor { stroke: var(--text, #e6e2dc); stroke-width: 1; vector-effect: non-scaling-stroke; }
.route-report-cursor[hidden] { display: none; }

.route-report-strip { display: block; width: 100%; height: 6px; margin-top: 2px; }

.route-report-scale {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
  color: var(--text-3, #b6b8b7);
  font-size: 9.5px;
}

.route-report-surface {
  display: flex;
  height: 8px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
}

.route-report-surface i { display: block; height: 100%; }

.route-report-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 5px 0 4px;
  color: var(--text-3, #b6b8b7);
  font-size: 10px;
}

.route-report-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: -1px; }

.surface-road { background: var(--accent-line, #6f8fd6); }
.surface-track { background: var(--alert-green, #2f9e44); }
.surface-path { background: var(--alert-amber, #d8b758); }
.surface-off_road { background: var(--alert-red, #b8302a); }

.route-report-badge.difficulty-easy { color: var(--alert-green, #2f9e44); }
.route-report-badge.difficulty-moderate { color: var(--alert-amber, #d8b758); }
.route-report-badge.difficulty-hard { color: var(--alert-red, #b8302a); }
.route-report-badge.difficulty-very-hard { color: var(--text, #e6e2dc); background: var(--alert-red, #b8302a); border-color: var(--alert-red, #b8302a); }
.route-report-strip .difficulty-easy { fill: var(--alert-green, #2f9e44); }
.route-report-strip .difficulty-moderate { fill: var(--alert-amber, #d8b758); }
.route-report-strip .difficulty-hard { fill: var(--alert-red, #b8302a); }
.route-report-strip .difficulty-very-hard { fill: var(--state-stop, #9c2b26); }

.route-report-row {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 4px 0;
  border-top: 1px solid rgb(230 226 220 / 0.08);
  color: var(--text-2, #e7eaec);
  text-align: left;
}

/* Rows, not buttons: these outrank theme.css's `.shell button` look, loaded before this file. */
.route-report button.route-report-row {
  min-height: 0;
  border: 0;
  border-top: 1px solid rgb(230 226 220 / 0.08);
  background: none;
  color: var(--text-2, #e7eaec);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.route-report button.route-report-row:hover:not(:disabled) { background: var(--hover, #424950); color: var(--text, #e6e2dc); }
.route-report button.route-report-row[aria-pressed="true"] { box-shadow: inset 2px 0 0 var(--accent-line, #6f8fd6); }

.route-report-severity {
  flex: none;
  width: 38px;
  padding: 1px 0 0 4px;
  color: var(--text-3, #b6b8b7);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.severity-stop .route-report-severity { color: var(--alert-red, #b8302a); }
.severity-warn .route-report-severity { color: var(--alert-amber, #d8b758); }

.route-report button.route-report-more { padding-left: 4px; color: var(--text-3, #b6b8b7); }

.route-report-section {
  padding: 8px 0 3px 4px;
  color: var(--text-3, #b6b8b7);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.route-report-sources { padding-left: 4px; color: var(--text-3, #b6b8b7); }

.gnss-menu-actions { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.route-options { display: grid; gap: 4px; }
.map-layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.map-layers-label { grid-column: 1 / -1; font-size: 14px; color: var(--text-3, var(--muted)); }
.route-options-label { font-size: 14px; color: var(--text-3, var(--muted)); }
.route-options-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.route-options-ways label { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; color: var(--text); white-space: nowrap; }
.route-options-ways input { width: 16px; height: 16px; min-height: 16px; flex: 0 0 16px; margin: 0; padding: 0; accent-color: var(--accent-line); }

.drawn-paths { display: grid; gap: 4px; }
.drawn-paths-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; font-size: 14px; color: var(--text); }

/* Compass: heading readout and cardinal ring, top-right over the map */
.gnss-compass {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 5px;
  background: rgba(20, 23, 26, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
  border-radius: 3px;
  color: var(--text-3, #c9ced3);
  font: var(--label-font, 400 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace);
  pointer-events: none;
}
.gnss-compass.hidden,
.gnss-compass[data-hud-off] { display: none; }
.gnss-compass-ring {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.08), transparent 70%);
}
.gnss-compass-tick {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gnss-compass-tick.is-n { top: 3px; left: 50%; transform: translateX(-50%); color: var(--accent, #38bdf8); }
.gnss-compass-tick.is-s { bottom: 3px; left: 50%; transform: translateX(-50%); }
.gnss-compass-tick.is-e { right: 4px; top: 50%; transform: translateY(-50%); }
.gnss-compass-tick.is-w { left: 4px; top: 50%; transform: translateY(-50%); }
.gnss-compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 14px solid var(--value, #ece8e2);
  transform: translate(-50%, -100%);
}
.gnss-compass-readout {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--value, #ece8e2);
}
.gnss-compass-readout strong { font-size: 13px; letter-spacing: 0.02em; }
.gnss-compass-state { font-size: 9px; color: var(--text-3, #c9ced3); max-width: 74px; text-align: center; line-height: 1.2; }