/* Flight viewer palette and unified comparison page. */
.viewer-page {
  background: #f3f4f2;
  color: #1c2820;
}
.viewer-page .header {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 48px;
  padding: 0;
  margin-bottom: 18px;
}
.viewer-page .brand {
  width: 190px;
  height: 42px;
  overflow: hidden;
  flex: none;
}
.viewer-page .brand img {
  display: block;
  width: 225px;
  max-width: none;
  height: auto;
  transform: translate(-21px, -18px);
  filter: brightness(0) saturate(100%) opacity(.84);
}
.viewer-page .header-actions .route-link {
  background: #f6f9f5;
  border-color: #d5ded5;
  color: #275f3b;
}
.viewer-page .header-actions .route-link:hover {
  background: #edf4ec;
  border-color: #a9c1ad;
}
.viewer-page .library { background: #f5f7f5; }
.viewer-page .library > button {
  background: #538f82;
  color: #fff;
}
.viewer-page .library > button:hover { background: #3f766b; }
.viewer-page .flight-list .flight.active {
  border-color: #a8c6ad;
  box-shadow: inset 3px 0 #5b9a8f;
}
.viewer-page .library-tools{border-top:1px solid #dce6df;margin-top:16px;padding-top:14px;display:grid;gap:10px}.viewer-page .library-tools #backup-library{width:100%;background:#f8f3e9;color:#76633f;border:1px solid #e1d5ba;padding:8px 10px;border-radius:8px;cursor:pointer}.viewer-page .library-tools .workspace-import{border:1px solid #dbe6df;border-radius:8px;padding:8px 10px;background:#fff;font-size:.8rem}.viewer-page .library-tools .workspace-import summary{color:#42796e;cursor:pointer;font-weight:650}.viewer-page .library-tools .workspace-import label{display:grid;gap:4px;margin-top:10px}.viewer-page .library-tools .workspace-import button{margin:8px 0;border:1px solid #cfdbd0;border-radius:7px;padding:7px;background:#f6f9f5;color:#315b3d;cursor:pointer}
.viewer-page .flight-classification {
  max-width: 170px;
  margin: 6px 0 0;
  font-size:.7rem;
}
.viewer-page .flight-classification select{padding:5px 8px;font-size:.76rem}
.viewer-page .workspace-heading>span{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.viewer-page .workspace-heading>span>strong{flex-basis:100%}.viewer-page .workspace-heading>span>small{margin:0}
.viewer-page .workspace-heading{padding:18px 20px 10px}
.viewer-page .workspace-heading>span>strong{font-size:1.5rem;line-height:1.15;letter-spacing:-.025em}
.viewer-page #recording-state,.viewer-page .workspace-toolbar>label{display:none}
.viewer-page .workspace-toolbar{display:none}
.viewer-page .flight-classification{display:flex;align-items:center;gap:10px;max-width:none;min-width:205px;margin:8px 0 0;font-size:.78rem;font-weight:600;color:#557062;white-space:nowrap}
.viewer-page .flight-classification select{font-size:.78rem}
.viewer-page .library-tools .unit-switch{justify-content:center;margin:2px 0 0}
.viewer-page .deployment-stages {
  border-color: #e2e9e4;
  overflow: hidden;
}
.viewer-page .deployment-stage,
.viewer-page .deployment-stage.deployment-total {
  background: #fff;
  box-shadow: none;
  border-color: #e2e9e4;
}
.viewer-page .deployment-stage svg,
.viewer-page .deployment-stage.deployment-total svg {
  background: color-mix(in srgb, var(--stage-color) 12%, white);
  color: var(--stage-color);
}
.viewer-page .deployment-stage strong,
.viewer-page .deployment-stage.deployment-total strong { color: #3f6e61; }
.viewer-page .deployment-totals-label {
  background: #fafcfb;
  color: #5c7580;
  border-color: #e2e9e4;
}
.viewer-page .metric-help > button {
  background: transparent;
  color: #3f6e61;
  border:0;
  padding:2px 5px;
  font-size:1rem;
}
.viewer-page .deployment-summary{position:relative}.viewer-page .deployment-summary>.metric-help{position:absolute;right:8px;top:8px;margin:0}.viewer-page .terrain-controls{width:fit-content;max-width:100%;margin:4px 0 8px;padding:3px 7px;border:1px solid #e1e9e3;border-radius:7px;background:#f9fbf9;font-size:.72rem}.viewer-page .terrain-controls>summary{cursor:pointer;color:#567366;font-size:.72rem}.viewer-page .terrain-controls[open]{width:100%;box-sizing:border-box}.viewer-page .terrain-controls .controls{gap:8px}.viewer-page .terrain-sample-label{font-weight:650;color:#486b58}
.viewer-page .flight-playback {
  margin: 18px 0;
  padding: 16px;
  background: #f6f9f7;
  border: 1px solid #dfe9e1;
  border-radius: 12px;
}
.viewer-page .flight-playback > label { margin-bottom: 8px; }
.viewer-page .flight-playback-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.viewer-page .flight-playback-actions #inspectPlay {
  background: #538f82;
  border-color: #538f82;
  color: #fff;
}
.viewer-page .flight-playback-actions #inspectPlay:hover { background: #3f766b; }
.viewer-page .flight-comparison {
  margin: 18px 0;
  padding: 20px;
  background: #f8fbf9;
  border: 1px solid #dfe9e1;
  border-radius: 12px;
}
.viewer-page .comparison-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.viewer-page .comparison-heading h3 { margin: 0 0 3px; color: #294638; }
.viewer-page .comparison-heading p { margin: 0; color: #65776b; font-size: .82rem; }
.viewer-page .comparison-heading label { width: min(100%, 350px); }
.viewer-page .comparison-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.viewer-page .comparison-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  background: #fff;
  border: 1px solid #e0e9e2;
  border-radius: 7px;
  color: #315544;
  font-size: .8rem;
}
.viewer-page .comparison-key span::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--comparison-color);
  flex: none;
}
.viewer-page [data-comparison] svg {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid #e1eae4;
  border-radius: 8px;
}
.viewer-page .flight-comparison .track-3d-tools {
  margin: 12px 0 0;
  background: #f6f9f7;
  border-color: #dfe9e1;
}
.viewer-page .workspace-charts {
  border: 1px solid #dfe9e1;
  border-radius: 9px;
  padding: 12px;
  background: #fff;
}
.viewer-page .workspace-charts > summary {
  display: list-item;
  color: #3f6e61;
}
.viewer-page .workspace-analysis { background: #fff; }
.viewer-page input[type=range] { accent-color: #538f82; }
.viewer-page .unit-switch input:checked { background: #538f82; }
@media (max-width: 650px) {
  .viewer-page .header { flex-wrap: wrap; }
  .viewer-page .brand { width: 175px; height: 39px; }
  .viewer-page .brand img { width: 205px; transform: translate(-19px, -17px); }
  .viewer-page .flight-comparison { padding: 14px; }
}