@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

@font-face {
  font-family: 'JeppSans';
  font-weight: 400;
  src: url('../../../fonts/jp-font/JeppSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'JeppSans';
  font-weight: 700;
  src: url('../../../fonts/jp-font/JeppSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'JeppSans';
  font-weight: 400;
  font-stretch: condensed;
  src: url('../../../fonts/jp-font/JeppSans-Narrow.ttf') format('truetype');
}

/* Navigation Trainer Styles */


/* Remove padding from dashboard__main when navigation trainer is loaded */
.dashboard__main:has(.navigation-trainer) {
    padding: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.dashboard__main.pt-30:has(.navigation-trainer) {
    padding-top: 0 !important;
}

.dashboard__main:has(.navigation-trainer) .trainer_wrap {
    width: 100%;
    height: calc(100vh - var(--header-height, 70px));
    overflow: hidden;
}

.layout-no-header .dashboard__main:has(.navigation-trainer) .trainer_wrap {
    height: 100vh;
}

/* ---- Sidebar edge toggle tab ---- */
.sidebar-edge-toggle {
    position: fixed;
    top: 50%;
    left: var(--sidebar-width, 260px);
    transform: translateY(-50%);
    z-index: 110;
    width: 16px;
    height: 48px;
    border: none;
    border-radius: 0 6px 6px 0;
    background: var(--color-fd-blue-4, #081433);
    color: rgba(255,255,255,0.7);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, color 0.2s, left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 6px rgba(0,0,0,0.2);
}
.sidebar-edge-toggle:hover {
    background: var(--color-fd-blue-3, #112151);
    color: #fff;
}
.sidebar-edge-toggle i {
    transition: transform 0.35s ease;
}
/* When sidebar is hidden, slide the tab to left edge of screen */
.-is-sidebar-hidden .sidebar-edge-toggle {
    left: 0;
}
/* Flip chevron when sidebar is hidden */
.-is-sidebar-hidden .sidebar-edge-toggle i {
    transform: rotate(180deg);
}

.navigation-trainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #e8e4df;
    position: relative;
}

#nav-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#nav-canvas.reposition-cursor {
    cursor: crosshair;
}

/* ---- Status badge (HTML, above blind overlay) ---- */
.nav-status-badge {
    display: none;               /* hidden by default, shown only in blind mode */
    position: absolute;
    top: 50px;                   /* below fd-watermark bar */
    left: 12px;
    z-index: 25;                 /* above .nav-blind (z-index: 20) */
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font: bold 13px JeppSans, sans-serif;
    color: #fff;
    cursor: pointer;
    user-select: none;
    background: rgba(40, 120, 60, 0.85);
    transition: background 0.2s;
}

.nav-status-badge.is-paused {
    background: rgba(180, 60, 60, 0.92);
}

.nav-status-badge.is-visible {
    display: flex;
}

/* ---- Blind mode overlay ---- */
.nav-blind {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    opacity: 0;
    backdrop-filter: blur(0);
    background: rgba(0, 0, 0, 0);
    transition: opacity 0.6s ease, backdrop-filter 0.6s ease, background 0.6s ease;
    color: var(--color-fd-light-2, #f9ffe6);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nav-blind i {
    font-size: 32px;
    opacity: 0.6;
}

.nav-blind.active {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(18px);
    background: rgba(8, 20, 51, 0.7);
}

/* ---- Force dark sidebar for navigation trainer ---- */
.dashboard:has(.navigation-trainer) .dashboard__sidebar {
    background: var(--color-fd-blue-4, #081433) !important;
    border-right-color: var(--color-fd-blue-3, #112151) !important;
}

/* ---- Sidebar styles ---- */
.nav-sidebar-section {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-fd-blue-3, #112151);
}

.nav-sidebar-section h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-fd-green-4, #a5be00);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-sidebar-section h6 i {
    font-size: 12px;
    opacity: 0.7;
}

/* ---- Collapsible sections ---- */
.nav-sidebar-section.is-collapsible > .nav-section-header {
    cursor: pointer;
    user-select: none;
}
.nav-sidebar-section.is-collapsible > .nav-section-header h6 {
    margin-bottom: 0;
}
.nav-section-chevron {
    font-size: 10px;
    opacity: 0.5;
    transition: transform 0.25s ease;
    margin-left: auto;
}
.nav-sidebar-section.is-collapsible.is-collapsed .nav-section-chevron {
    transform: rotate(-90deg);
}
.nav-section-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    max-height: 600px;
    opacity: 1;
    margin-top: 8px;
}
.nav-sidebar-section.is-collapsed > .nav-section-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

/* ---- View section rows ---- */
.nav-view-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
}

.nav-view-row + .nav-view-row {
    border-top: 1px solid rgba(255,255,255,0.04);
}

.nav-select {
    font-size: 12px;
    padding: 3px 8px;
    background: #2a2a2a;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 3px;
    cursor: pointer;
    max-width: 140px;
}

.nav-select-sm {
    font-size: 11px;
    padding: 2px 6px;
    background: #2a2a2a;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 3px;
    cursor: pointer;
}

.nav-view-label {
    font-size: 12px;
    color: var(--color-fd-light-2, #f9ffe6);
    opacity: 0.7;
}

.nav-view-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---- Sub-group (e.g. Map layers inside View) ---- */
.nav-subgroup {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.nav-subgroup-label {
    display: flex;
    align-items: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-fd-green-4, #a5be00);
    margin-bottom: 4px;
    opacity: 0.8;
}

/* Small button size */
.btn-xs {
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
}

.nav-sidebar-section select {
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-fd-blue-3, #112151);
    background: var(--color-fd-blue-5, #010714);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.nav-sidebar-section select option {
    background: var(--color-fd-blue-4, #081433);
    color: #fff;
}



.nav-zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-zoom-level {
    font-size: 12px;
    color: var(--color-fd-light-2, #f9ffe6);
    text-align: center;
    min-width: 34px;
}

.nav-kbd-table {
    width: 100%;
    font-size: 12px;
    color: var(--color-fd-light-2, #f9ffe6);
    opacity: 0.8;
}

.nav-kbd-table td {
    padding: 3px 0;
}

.nav-kbd-table kbd {
    display: inline-block;
    background: var(--color-fd-blue-3, #112151);
    border: 1px solid var(--color-fd-blue-5, #010714);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: monospace;
    color: var(--color-fd-green-4, #a5be00);
}

.nav-kbd-table .kbd-label {
    text-align: right;
    padding-right: 8px;
    color: var(--color-fd-light-2, #f9ffe6);
    opacity: 0.6;
}

/* ---- Section header with toggle ---- */
.nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-section-header h6 {
    margin-bottom: 0;
}

/* Toggle switch */
.nav-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.nav-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.nav-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    transition: background 0.25s, border-color 0.25s;
}

.nav-switch-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: transform 0.25s, background 0.25s;
}

.nav-switch input:checked + .nav-switch-slider {
    background: var(--color-fd-green-4, #a5be00);
    border-color: var(--color-fd-green-4, #a5be00);
}

.nav-switch input:checked + .nav-switch-slider::before {
    transform: translateY(-50%) translateX(16px);
    background: #fff;
}

/* Small variant */
.nav-switch-sm {
    width: 32px;
    height: 18px;
}

.nav-switch-sm .nav-switch-slider::before {
    height: 12px;
    width: 12px;
    left: 2px;
}

.nav-switch-sm input:checked + .nav-switch-slider::before {
    transform: translateY(-50%) translateX(14px);
}

.mt-6 { margin-top: 6px; }

/* ---- Blind-mode prominent toggle ---- */
.nav-blind-toggle-row {
    margin: 6px 0 4px;
}

.nav-blind-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    transition: background .2s, color .2s, border-color .2s;
}

.nav-blind-btn input { display: none; }

.nav-blind-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.nav-blind-btn:has(input:checked) {
    background: rgba(200, 80, 40, 0.45);
    border-color: rgba(230, 120, 60, 0.6);
    color: #fff;
}

/* ---- Pause button ---- */
#pause-btn {
    white-space: nowrap;
}

/* ---- Wind section ---- */
.nav-wind-wrapper {
    position: relative;
}

.nav-wind-cover {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--color-fd-blue-5, #010714);
    border: 1px dashed var(--color-fd-green-4, #a5be00);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: var(--color-fd-green-4, #a5be00);
    font-size: 12px;
    text-align: center;
    padding: 6px;
    transition: background 0.2s;
}

.nav-wind-cover:hover {
    background: var(--color-fd-blue-3, #112151);
}

.nav-wind-cover i {
    font-size: 18px;
}

.nav-wind-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.nav-wind-row label {
    font-size: 11px;
    color: var(--color-fd-light-2, #f9ffe6);
    opacity: 0.7;
    min-width: 36px;
    margin: 0;
}

.nav-wind-row input[type="number"] {
    width: 100%;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--color-fd-blue-3, #112151);
    background: var(--color-fd-blue-5, #010714);
    color: #fff;
    font-size: 13px;
    text-align: center;
}

.nav-wind-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.nav-wind-actions .btn {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    font-size: 12px;
}

/* ---- Instrument Panel ---- */
.instrument-panel {
    padding: 20px 24px 14px;
    background: #3b3b3b;
    border: 3px solid #555;
    border-bottom: none;
    display: inline-flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: calc(50% + var(--sidebar-width, 0px) / 2);
    transform: translateX(-50%) translateY(0);
    z-index: 90;
    gap: 16px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 -4px 16px rgba(0,0,0,0.35),
        0 -1px 4px rgba(0,0,0,0.2);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity  0.35s cubic-bezier(0.4, 0, 0.2, 1),
                left     0.4s  cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

.instrument-panel.is-hidden {
    transform: translateX(-50%) translateY(105%);
    opacity: 0;
    pointer-events: none;
}

/* Screw dots on the panel */
.instrument-panel::before,
.instrument-panel::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #666, #2a2a2a);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.1);
    top: 8px;
}
.instrument-panel::before { left: 10px; }
.instrument-panel::after { right: 10px; }

/* PFD mode — tighter padding, dark background */
.instrument-panel.pfd-mode {
    padding: 6px;
    background: #1a1a1a;
    border-color: #333;
}
.instrument-panel.pfd-mode::before,
.instrument-panel.pfd-mode::after {
    display: none;
}
.pfd-outer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.pfd-wrapper {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.pfd-left {
    display: flex;
    flex-direction: column;
}
.pfd-canvas {
    display: block;
    border-radius: 4px 0 0 0;
}

/* ── G1000 softkey bar below the PFD ── */
.pfd-softkeys {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    background: #2a2a2a;
    border-top: 1px solid #444;
    padding: 0 8px;
    height: 42px;
    border-radius: 0 0 0 4px;
}
.pfd-softkey {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 40px;
    position: relative;
}
/* Vertical line from top edge down to the cap */
.pfd-softkey-line {
    display: block;
    width: 1px;
    height: 6px;
    background: #888;
}
/* The rounded square cap button */
.pfd-softkey-cap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 60%, #1a1a1a 100%);
    border: 1px solid #555;
    border-radius: 4px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pfd-softkey:hover .pfd-softkey-cap {
    background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 60%, #2a2a2a 100%);
    border-color: #777;
}
.pfd-softkey:active .pfd-softkey-cap {
    background: linear-gradient(180deg, #333 0%, #222 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
.pfd-softkey-arrow {
    font-size: 10px;
    color: #ccc;
    line-height: 1;
}
/* Label below the cap — hidden by default */
.pfd-softkey-label {
    display: none;
}

/* PFD knobs panel (right side bezel strip) */
.pfd-knobs {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 6px;
    background: #2a2a2a;
    border-left: 2px solid #444;
    border-radius: 0 6px 0 0;
    gap: 10px;
    min-width: 48px;
}

.pfd-knob-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pfd-knob-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: #ccc;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pfd-knob {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    /* Knurled edge: repeating conic gradient for ridges */
    background:
        radial-gradient(circle at 50% 50%, #333 55%, transparent 56%),
        repeating-conic-gradient(#555 0deg 3deg, #2a2a2a 3deg 6deg);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.6),
        inset 0 0 8px rgba(0,0,0,0.4),
        inset 0 1px 1px rgba(255,255,255,0.08);
}

/* Flat dark cap on top of the knurled ring */
.pfd-knob::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 40%, #3a3a3a, #1a1a1a);
    pointer-events: none;
}

/* Hide the old pointer line */
.pfd-knob-pointer {
    display: none;
}

/* Invisible left/right click zones over the knob (like analog VOR) */
.pfd-knob-btn {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
}
.pfd-knob-btn.minus { left: 0; }
.pfd-knob-btn.plus  { right: 0; }

.instrument-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.instrument {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        inset 0 0 0 3px #2a2a2a,
        inset 0 0 0 5px #444;
    background: #1a1a1a;
}

/* Layers for regular (non-VOR/HSI/RMI/ASI-dynamic) instruments */
.instrument:not(.vor):not(.hsi):not(.rmi):not(.asi-dynamic) > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ---- Dynamic ASI ---- */
.instrument.asi-dynamic {
    overflow: hidden;
}
.instrument.asi-dynamic .asi-dial {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
/* Needle: original PNG image */
.instrument.asi-dynamic .asi-needle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('/trainers_shell/navigation/img/instruments/asi-needle.png') no-repeat center center;
    background-size: contain;
    transform-origin: 50% 50%;
    transform: rotate(30deg);
    z-index: 10;
    pointer-events: none;
}

/* ASI bezel overlay — same PNG as other instruments */
.instrument.asi-dynamic .asi-bezel {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 15;
    pointer-events: none;
}

/* ---- VOR instrument ---- */
.instrument.vor {
    overflow: visible;
}

/* The circular dial wrapper */
.instrument.vor .dial {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

/* Layers inside the VOR dial */
.instrument.vor .dial > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.instrument.vor .needle {
    transform-origin: 50% 23%;
}

/* OBS knob – flat dark circle with white border */
.instrument.vor .obs {
    position: absolute;
    bottom: -2px;
    left: 8px;
    width: 34px;
    height: 34px;
    background: #222;
    border-radius: 50%;
    border: 2px solid #ccc;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* "OBS" label centered inside the knob */
.instrument.vor .obs::after {
    content: 'OBS';
    color: #ccc;
    font-size: 8px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    letter-spacing: 0.5px;
}

.instrument.vor .knob_btn {
    cursor: pointer;
    position: absolute;
    bottom: 2px;
    width: 25px;
    height: 50px;
    z-index: 5;
    background: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.instrument.vor .knob_btn.minus { left: -10px; }
.instrument.vor .knob_btn.plus  { left: 15px; }

/* Shared tooltip style for OBS knob buttons */
.instrument.vor .knob_btn:hover::before {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    width: 26px;
    height: 26px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 10;
    pointer-events: none;
}
.instrument.vor .knob_btn.minus:hover::before {
    content: '−';
    left: 0;
}
.instrument.vor .knob_btn.plus:hover::before {
    content: '+';
    right: 0;
}

.instrument.vor .to,
.instrument.vor .from,
.instrument.vor .flag { display: none; }

.instrument.vor .to.active,
.instrument.vor .from.active,
.instrument.vor .flag.active { display: block; }

/* ---- HSI instrument ---- */
.instrument.hsi > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}
.instrument.hsi .bezel   { z-index: 5; pointer-events: none; }
.instrument.hsi .cdi     { z-index: 4; }
.instrument.hsi .course  { z-index: 3; }
.instrument.hsi .plate   { z-index: 2; }
.instrument.hsi .to,
.instrument.hsi .from    { z-index: 3; }

.instrument.hsi .hdg-knob {
    top: 155px;
    width: 40px;
    height: 40px;
    z-index: 2;
}

.instrument.hsi .knob_btn {
    cursor: pointer;
    position: absolute;
    bottom: 2px;
    width: 25px;
    height: 50px;
    z-index: 10;
    background: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.instrument.hsi .knob_btn.minus { left: -10px; }
.instrument.hsi .knob_btn.plus  { left: 15px; }

.instrument.hsi .knob_btn:hover::before {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    width: 26px;
    height: 26px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 10;
    pointer-events: none;
}
.instrument.hsi .knob_btn.minus:hover::before {
    content: '−';
    left: 0;
}
.instrument.hsi .knob_btn.plus:hover::before {
    content: '+';
    right: 0;
}

/* Touch devices: enlarge knobs for circular drag */
@media (pointer: coarse) {
    /* Make PFD CRS knob bigger for finger drag */
    .pfd-knob {
        width: 46px;
        height: 46px;
    }

    /* Hide all +/− buttons on touch — circular drag only */
    .instrument.vor .knob_btn,
    .instrument.hsi .knob_btn,
    .pfd-knob-btn {
        display: none !important;
    }
}

/* ---- RMI instrument ---- */
.instrument.rmi {
    border-radius: 8px;
    width: 200px;
    height: 200px;
    background: #1a1a1a;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        inset 0 0 0 3px #2a2a2a,
        inset 0 0 0 5px #444;
    overflow: hidden;
}

.instrument.rmi > div:not(.rmi-sel) {
    position: absolute;
    width: 85%;
    height: 85%;
    top: 7.5%;
    left: 7.5%;
    background-repeat: no-repeat;
    background-size: contain;
}
.instrument.rmi .bezel        { z-index: 5; pointer-events: none; }
.instrument.rmi .needle-yellow { z-index: 3; }
.instrument.rmi .needle-green  { z-index: 2; }
.instrument.rmi .compass      { z-index: 1; }

/* ADF/VOR rotary selectors — container, no pointer-events so needles stay clickable */
.instrument.rmi .rmi-sel {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    user-select: none;
}
/* Left selector (yellow) */
.instrument.rmi .rmi-sel-y {
    left: 0;
    bottom: 0;
}
/* Right selector (green) */
.instrument.rmi .rmi-sel-g {
    right: 0;
    bottom: 0;
}

/* Shared label style */
.instrument.rmi .rmi-sel-label {
    position: absolute;
    font-size: 8px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
}

/* ADF label — stacked vertically A D F on the side edges, close to circle */
.instrument.rmi .rmi-sel-adf {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    gap: 0;
}
/* ADF: left side just outside circle edge, right side mirrored */
.instrument.rmi .rmi-sel-y .rmi-sel-adf {
    left: 8px;
    bottom: 54px;
}
.instrument.rmi .rmi-sel-g .rmi-sel-adf {
    right: 8px;
    bottom: 54px;
}

/* VOR label — at bottom, tucked under circle edge */
.instrument.rmi .rmi-sel-y .rmi-sel-vor {
    bottom: 22px;
    left: 30px;
}
.instrument.rmi .rmi-sel-g .rmi-sel-vor {
    bottom: 22px;
    right: 30px;
}

/* Colored arrow — container with real dimensions so rotation works from center */
.instrument.rmi .rmi-sel-arrow {
    position: absolute;
    width: 10px;
    height: 18px;
    transition: transform 0.25s ease;
    /* transform-origin defaults to center (5px 9px) */
}
/* Triangle head */
.instrument.rmi .rmi-sel-arrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid;
}
/* Tail line */
.instrument.rmi .rmi-sel-arrow::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 4px;
    width: 2px;
    height: 8px;
}
.instrument.rmi .rmi-sel-y .rmi-sel-arrow {
    left: 18px;
    bottom: 36px;
}
/* Yellow: outlined triangle + double tail */
.instrument.rmi .rmi-sel-y .rmi-sel-arrow::before {
    border: none;
    width: 10px;
    height: 9px;
    top: 0;
    left: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 9'%3E%3Cpolygon points='5,0.5 9.5,8.5 0.5,8.5' fill='none' stroke='%23ffc900' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain;
}
.instrument.rmi .rmi-sel-y .rmi-sel-arrow::after {
    background: #ffc900;
    left: 2px;
    top: 9px;
    width: 1.5px;
    height: 9px;
    box-shadow: 5px 0 0 0 #ffc900;
}
.instrument.rmi .rmi-sel-g .rmi-sel-arrow {
    right: 16px;
    bottom: 36px;
}
.instrument.rmi .rmi-sel-g .rmi-sel-arrow::before {
    border-bottom-color: #6ca400;
}
.instrument.rmi .rmi-sel-g .rmi-sel-arrow::after {
    background: #6ca400;
}

/* White rectangular toggle button */
.instrument.rmi .rmi-sel-btn {
    position: absolute;
    bottom: 14px;
    width: 18px;
    height: 8px;
    background: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
    border-radius: 1px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.9);
}
.instrument.rmi .rmi-sel-btn:hover {
    background: #fff;
}
.instrument.rmi .rmi-sel-btn:active {
    background: #ccc;
}
.instrument.rmi .rmi-sel-y .rmi-sel-btn {
    left: 17px;
}
.instrument.rmi .rmi-sel-g .rmi-sel-btn {
    right: 17px;
}

.nav-scale-bar {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}

.nav-scale-bar .bar {
    height: 3px;
    background: rgba(0,0,0,0.4);
    border-left: 1px solid rgba(0,0,0,0.4);
    border-right: 1px solid rgba(0,0,0,0.4);
}

.nav-scale-bar .label {
    font-size: 11px;
    color: rgba(0,0,0,0.5);
    margin-top: 2px;
    font-family: sans-serif;
}



/* ---- Right stack (NAV + Chrono/Clock + DME) ---- */
.right-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-left: 2px solid #555;
    margin-left: 8px;
    padding: 0 10px;
    align-self: stretch;
}

/* ---- Radio / NAV selector panel ---- */
.radio-panel {
    display: flex;
    gap: 0;
    background: #3a3a3a;
    border: 2px solid #555;
    border-radius: 6px;
    overflow: hidden;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.08);
}

/* ADF panel — same style */
.adf-panel {
    margin-top: 0;
}

.radio-col-full {
    width: 100%;
}

.radio-col {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.radio-col + .radio-col {
    border-left: 1px solid #555;
}

.radio-col-header {
    text-align: center;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: bold;
    font-family: 'Consolas', 'Courier New', monospace;
    color: #ccc;
    letter-spacing: 1px;
    background: #4a4a4a;
}

.radio-list {
    position: relative;
    background: #0a0a0a;
    margin: 0 6px 3px;
    padding: 2px 0;
    min-height: 32px;
    clip-path: polygon(
        8px 0%, calc(100% - 8px) 0%,
        100% 8px, 100% calc(100% - 8px),
        calc(100% - 8px) 100%, 8px 100%,
        0% calc(100% - 8px), 0% 8px
    );
}

.radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    color: #888;
}

.radio-item:hover {
    background: rgba(255,255,255,0.06);
}

.radio-item.active {
    color: #fff;
}

.radio-led {
    display: inline-block;
    width: 12px;
    height: 5px;
    border-radius: 1px;
    background: #333;
    flex-shrink: 0;
}

.radio-item.active .radio-led {
    background: #7fbf00;
    box-shadow: 0 0 4px rgba(127, 191, 0, 0.6);
}

.radio-label {
    white-space: nowrap;
}

/* ---- Digital Row (Chrono + Clock side by side) ---- */
.digital-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    align-self: center;
}

/* ---- Digital Gauges (Clock, Chrono, DME) ---- */
.gauge-digital {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Outer bezel wrapper — gives the "panel-mounted" look */
.gauge-digital-outer {
    background: #3a3a3a;
    border: 2px solid #555;
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.gauge-digital-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: #bbb;
    letter-spacing: 2px;
    text-align: center;
}

/* Display bezel — simple rounded with border */
.gauge-digital-bezel {
    background: #080808;
    padding: 0px 8px;
    text-align: center;
    border: 2px solid #888;
    border-radius: 6px;
}

.gauge-digital-display {
    font-family: 'Share Tech Mono', monospace;
    font-size: 18px;
    color: #e03030;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(224, 48, 48, 0.4);
}

/* ---- Chrono buttons ---- */
.gauge-digital-buttons {
    display: flex;
    gap: 6px;
}

.gauge-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: #ccc;
    background: #444;
    border: 1px solid #666;
    border-radius: 3px;
    padding: 2px 10px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.15s;
}

.gauge-btn:hover { background: #555; }
.gauge-btn:active { background: #666; }

/* ---- DME single-line display ---- */
.dme-outer { min-width: 225px; }

.dme-bezel {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding: 0px 8px;
    white-space: nowrap;
}

/* Fixed-width value spans so display doesn't resize */
.dme-bezel .dme-dist {
    display: inline-block;
    width: 4.5ch;
    text-align: right;
}

.dme-bezel .dme-spd {
    display: inline-block;
    width: 3ch;
    text-align: right;
}

.dme-bezel .dme-min {
    display: inline-block;
    width: 4.5ch;
    text-align: right;
}

.dme-unit {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: #e03030;
    letter-spacing: 1px;
    margin-left: 2px;
    margin-right: 10px;
    text-shadow: 0 0 4px rgba(224, 48, 48, 0.3);
}

.dme-unit:last-child { margin-right: 0; }

.dme-bezel .gauge-digital-display {
    font-size: 18px;
}

/* DME rotary selector */
.dme-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

/* N1 label on top, knob below */
.dme-selector-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.dme-selector-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: #bbb;
    letter-spacing: 1px;
}

.dme-knob {
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 40% 35%, #888, #333);
    border: 2px solid #555;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s;
}

/* Knob pointer line */
.dme-knob::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    width: 2px;
    height: 8px;
    background: #ddd;
    transform: translateX(-50%);
    border-radius: 1px;
}

/* ============================================
   Tablet & Mobile — instrument panel scaling
   ============================================ */

/* When sidebar is hidden on desktop, center on full screen */
.-is-sidebar-hidden .instrument-panel {
    left: 50%;
}

/* Tablets (≤991px): scale down instrument panel and fix sidebar */
@media (max-width: 991px) {
    /* Hide edge toggle on small screens (FAB is used instead) */
    .sidebar-edge-toggle { display: none; }

    /* Remove sidebar margin so navigation fills the full width */
    .dashboard__main:has(.navigation-trainer) {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Scale the instrument panel to fit tablet screens */
    .instrument-panel {
        left: 50%;
        transform: translateX(-50%) translateY(0) scale(0.75);
        transform-origin: bottom center;
        gap: 10px;
        padding: 14px 16px 10px;
    }
    .instrument-panel.is-hidden {
        transform: translateX(-50%) translateY(105%) scale(0.75);
    }
}

/* Smaller tablets / large phones (≤768px) */
@media (max-width: 768px) {
    .instrument-panel {
        transform: translateX(-50%) translateY(0) scale(0.6);
        gap: 8px;
        padding: 10px 12px 8px;
    }
    .instrument-panel.is-hidden {
        transform: translateX(-50%) translateY(105%) scale(0.6);
    }
}

/* Phones (≤575px) */
@media (max-width: 575px) {
    .instrument-panel {
        transform: translateX(-50%) translateY(0) scale(0.45);
        gap: 6px;
        padding: 8px 10px 6px;
    }
    .instrument-panel.is-hidden {
        transform: translateX(-50%) translateY(105%) scale(0.45);
    }
}

/* ============================================
   On-screen touch controls (D-pad + actions)
   ============================================ */

/* Hidden by default — shown only on touch-capable devices */
.touch-controls {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 900;
    pointer-events: none;
    padding: 16px 14px 24px;
}

/* Show only on touch devices */
@media (pointer: coarse) {
    .touch-controls {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

.touch-btn {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 40, 60, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(30, 40, 60, 0.35);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    font-size: 18px;
    width: 52px;
    height: 52px;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.touch-btn:active,
.touch-btn.is-pressed {
    background: rgba(30, 40, 60, 0.65);
    transform: scale(0.92);
}

/* Quick-action row below D-pad */
.touch-actions {
    display: flex;
    gap: 6px;
    pointer-events: auto;
}
.touch-action-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
}

/* Amber — Pause */
.touch-btn--amber {
    background: rgba(180, 130, 0, 0.5);
    border-color: rgba(200, 150, 0, 0.45);
}
.touch-btn--amber:active,
.touch-btn--amber.is-pressed {
    background: rgba(180, 130, 0, 0.7);
}
.touch-btn--amber.is-active {
    background: rgba(200, 150, 0, 0.75);
    border-color: rgba(220, 170, 0, 0.6);
}

/* Teal — Panel toggle */
.touch-btn--teal {
    background: rgba(0, 140, 160, 0.5);
    border-color: rgba(0, 160, 180, 0.45);
}
.touch-btn--teal:active,
.touch-btn--teal.is-pressed {
    background: rgba(0, 140, 160, 0.7);
}

/* D-pad layout: 3x3 grid */
.touch-dpad {
    display: grid;
    grid-template-columns: 52px 52px 52px;
    grid-template-rows: 52px 52px 52px;
    gap: 6px;
}

.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-center{ grid-column: 2; grid-row: 2; border-radius: 50%; font-size: 14px; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 3; }

/* Center button (wings level) — different style */
.dpad-center {
    background: rgba(180, 140, 0, 0.55);
    border-color: rgba(200, 160, 0, 0.5);
    color: rgba(255, 255, 255, 0.95);
}
.dpad-center:active,
.dpad-center.is-pressed {
    background: rgba(180, 140, 0, 0.75);
}



/* When instrument panel is visible, push controls above it */
@media (pointer: coarse) {
    .touch-controls {
        bottom: 220px;
        transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .instrument-panel.is-hidden ~ .touch-controls {
        bottom: 16px;
    }
}
@media (pointer: coarse) and (max-width: 991px) {
    .touch-controls {
        bottom: 170px;
    }
    .instrument-panel.is-hidden ~ .touch-controls {
        bottom: 16px;
    }
}
@media (pointer: coarse) and (max-width: 768px) {
    .touch-controls {
        bottom: 140px;
    }
    .instrument-panel.is-hidden ~ .touch-controls {
        bottom: 16px;
    }
}
@media (pointer: coarse) and (max-width: 575px) {
    .touch-controls {
        bottom: 110px;
    }
    .instrument-panel.is-hidden ~ .touch-controls {
        bottom: 12px;
    }
    .touch-btn {
        width: 44px;
        height: 44px;
        font-size: 15px;
        border-radius: 10px;
    }
    .touch-dpad {
        grid-template-columns: 44px 44px 44px;
        grid-template-rows: 44px 44px 44px;
        gap: 4px;
    }
}

/* ═══════════════════════════════════════════════════════
   Keyboard Controls Modal
   ═══════════════════════════════════════════════════════ */
.kbd-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}
.kbd-modal-backdrop.is-open {
    display: flex;
}

.kbd-modal {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 20px 24px;
    max-width: 780px;
    width: 96vw;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    animation: kbdModalIn 0.2s ease-out;
    color: #1a1a2e;
}
@keyframes kbdModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.kbd-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.kbd-modal-header h6 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-fd-blue-4, #081433);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kbd-modal-close {
    background: none;
    border: none;
    color: rgba(0,0,0,0.35);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.kbd-modal-close:hover { color: #1a1a2e; }

/* Legend */
.kbd-legend {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.kbd-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(0,0,0,0.5);
}
.kbd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.kbd-dot-flight { background: #4a9eff; }
.kbd-dot-zoom   { background: #a5be00; }
.kbd-dot-pause  { background: #ff6b6b; }
.kbd-dot-panel  { background: #b388ff; }

/* Keyboard layout — proportional 1u = 38px */
.kbd-board {
    display: flex;
    gap: 14px;
    margin-bottom: 8px;
}
.kbd-main-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kbd-row {
    display: flex;
    gap: 3px;
}

/* Individual key — base style */
.kbd-key {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f1f5;
    border: 1px solid #d0d3da;
    border-bottom-width: 2px;
    border-radius: 4px;
    color: rgba(0,0,0,0.25);
    font-size: 10px;
    font-family: 'Share Tech Mono', monospace;
    transition: all 0.15s;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Key widths — 1u = 38px, gap 3px accounted */
.kbd-u1   { width: 38px; }
.kbd-u125 { width: 50px; font-size: 8px; }
.kbd-u15  { width: 60px; font-size: 9px; }
.kbd-u175 { width: 69px; font-size: 9px; }
.kbd-u2   { width: 79px; font-size: 9px; }
.kbd-u225 { width: 89px; font-size: 9px; }
.kbd-u275 { width: 108px; font-size: 9px; }
.kbd-u625 { flex: 1; }

/* Active key highlight colors */
.kbd-key.kbd-active-flight {
    background: rgba(74, 158, 255, 0.12);
    border-color: #4a9eff;
    color: #2979d6;
    box-shadow: 0 2px 6px rgba(74, 158, 255, 0.2);
}
.kbd-key.kbd-active-zoom {
    background: rgba(120, 150, 0, 0.1);
    border-color: #7a9a00;
    color: #5a7200;
    box-shadow: 0 2px 6px rgba(120, 150, 0, 0.18);
}
.kbd-key.kbd-active-pause {
    background: rgba(220, 60, 60, 0.1);
    border-color: #e05050;
    color: #c03030;
    box-shadow: 0 2px 6px rgba(220, 60, 60, 0.18);
}
.kbd-key.kbd-active-panel {
    background: rgba(140, 90, 230, 0.1);
    border-color: #9060e0;
    color: #7040c0;
    box-shadow: 0 2px 6px rgba(140, 90, 230, 0.18);
}

/* F-key row */
.kbd-frow { margin-bottom: 6px; }
.kbd-frow .kbd-key { height: 24px; font-size: 8px; }
.kbd-fgap { width: 14px; flex-shrink: 0; }

/* Right block: nav + arrows stacked — aligned to rows 2-5 */
.kbd-right-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    /* skip F-row (24px) + margin (6px) + number-row (30px) + gap (3px) = 63px */
    padding-top: 63px;
}

/* Navigation cluster (Ins/Del/Home/End/PgUp/PgDn) */
.kbd-nav-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kbd-nav { width: 38px; height: 28px; font-size: 8px; }

/* Arrow key cluster */
.kbd-arrow-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.kbd-arrow { width: 34px; height: 28px; font-size: 13px; }
.kbd-arrows-top { display: flex; }
.kbd-arrows-bottom { display: flex; gap: 2px; }

/* Action labels list */
.kbd-actions-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 12px;
}
.kbd-action-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(0,0,0,0.55);
}
.kbd-action-item kbd {
    display: inline-block;
    background: #f0f1f5;
    border: 1px solid #d0d3da;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: 'Share Tech Mono', monospace;
    color: rgba(0,0,0,0.4);
    min-width: 18px;
    text-align: center;
}
.kbd-action-item span { opacity: 0.8; }

/* Color-code action labels */
.kbd-cat-flight kbd { border-color: #4a9eff; color: #2979d6; }
.kbd-cat-zoom kbd   { border-color: #7a9a00; color: #5a7200; }
.kbd-cat-pause kbd  { border-color: #e05050; color: #c03030; }
.kbd-cat-panel kbd  { border-color: #9060e0; color: #7040c0; }