/* Shared tab bar for every page in the simulator.
 *
 * This lives in one file because it previously existed as three copies that drifted:
 * range-bench.html had its own 42px-high bar with a green active underline and was
 * missing a tab entirely, so the header visibly jumped when moving between pages.
 * Colours are literal rather than var() so a page's own palette cannot change it.
 *
 * The nav markup must be identical on every page, with only the `active` class moving:
 *
 *   <nav class="app-tabs">
 *     <div class="app-brand">Defender Puma</div>
 *     <a class="app-tab" href="index.html">CAN Simulator</a>
 *     <a class="app-tab" href="range-bench.html">Range Estimator</a>
 *     <a class="app-tab" href="layout.html">Layout Spec</a>
 *   </nav>
 */

.app-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  margin: 0;
  background: #111114;
  border-bottom: 1px solid #1e1e24;
}

.app-brand {
  display: flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6a6a78;
  margin-right: 24px;
  padding: 14px 0;
}

.app-tab {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6a6a78;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}

.app-tab:hover { color: #e0e0e6; }

.app-tab.active {
  color: #fff;
  border-bottom-color: #FF8C00;
}