.cockpit {
  border:1px solid #435256;
  border-radius:14px;
  overflow:hidden;
  background:#172024;
  box-shadow:0 16px 40px #0003
}

.windshield {
  position:relative;
  height:270px;
  overflow:hidden;
  border-bottom:6px solid #090f12;
  background:#b5ced2
}

.landscape {
  width:100%;
  height:100%;
  display:block
}

.windshield:after {
  content:'';
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 70px #09232950;
  pointer-events:none
}
.windshield[data-weather="caution"] .landscape { filter: saturate(.65) contrast(.92); }
.windshield[data-weather="caution"]:before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(#d7dcce5c,#b9c5bb35); }
.windshield[data-region="metro"] .landscape { filter: hue-rotate(12deg) saturate(.75); }
.windshield[data-region="cedar"] .landscape { filter: hue-rotate(-8deg) saturate(1.05); }
.windshield[data-region="lake"] .landscape { filter: hue-rotate(18deg) saturate(.9); }
.windshield[data-weather="caution"][data-region] .landscape { filter: saturate(.58) contrast(.9); }

.windshield-top {
  position:absolute;
  top:19px;
  left:24px;
  right:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1;
  font:10px var(--mono);
  color:#f5f4e9
}

.flight-tag {
  background:#18343cbd;
  border:1px solid #f4fff52b;
  border-radius:4px;
  padding:7px 10px
}

.flight-tag span {
  opacity:.65;
  margin-left:13px;
  font-size:9px
}

.day-tag {
  color:#19363a;
  font-size:9px;
  letter-spacing:1px
}

.windshield-caption {
  position:absolute;
  bottom:27px;
  left:28px;
  right:28px;
  display:flex;
  flex-direction:column;
  color:#fff;
  z-index:2;
  text-shadow:0 1px 6px #0008
}

.windshield-caption .eyebrow {
  color:#d9e6dc;
  font-size:8px;
  margin-bottom:5px
}

.windshield-caption strong {
  font:500 21px var(--heading)
}

.windshield-caption>span:last-child {
  font:10px var(--mono);
  margin-top:8px;
  color:#e0ebe2
}

.horizon-mark {
  position:absolute;
  top:45%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:14px;
  align-items:center;
  color:#fff9
}

.horizon-mark span {
  width:37px;
  border-top:2px solid #fff9
}

.horizon-mark b {
  font-size:22px
}

.window-pillar {
  position:absolute;
  width:25px;
  height:115%;
  background:linear-gradient(90deg,#283335,#11191c);
  top:-10px;
  z-index:2
}

.window-pillar.left {
  left:-14px;
  transform:rotate(-11deg)
}

.window-pillar.right {
  right:-14px;
  transform:rotate(11deg)
}

.dashboard {
  padding:17px;
  background:linear-gradient(150deg,#253034,#182125 70%)
}

.dash-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:8px var(--mono);
  letter-spacing:1px;
  color:#93a4a9;
  padding:0 3px 14px
}

.dash-top .live-dot {
  margin-right:5px;
  width:4px;
  height:4px
}

.instrument-strip {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  margin-bottom:15px;
  border:1px solid #3a464a;
  border-radius:7px;
  background:#141f23
}

.instrument-strip>div {
  padding:13px 18px;
  border-right:1px solid #334044
}

.instrument-strip>div:last-child {
  border:0
}

.instrument-label {
  display:block;
  color:#a3b4b8;
  font:8px var(--mono);
  letter-spacing:1px
}

.instrument-label small {
  color:var(--lime);
  font-size:8px;
  margin-left:5px
}

.instrument-strip strong {
  display:block;
  font:500 clamp(23px,2.5vw,33px) var(--heading);
  margin:5px 0;
  color:#e4e9de
}

.instrument-strip strong small {
  font:10px var(--mono);
  color:#96a99e;
  margin-left:4px
}

.instrument-foot {
  font:8px var(--mono);
  color:#98aaa9
}

.displays {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:12px
}

.map-display,.weather-display {
  border:1px solid #445047;
  background:#101f1d;
  border-radius:7px;
  overflow:hidden;
  box-shadow:0 0 0 3px #11191d
}

.display-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #2c4138;
  padding:12px 13px;
  color:#c5d5b9
}

.display-heading h2 {
  font:9px var(--mono);
  letter-spacing:1px;
  margin:0
}

.display-heading>span {
  font:11px var(--mono)
}

#nav-map {
  display:block;
  width:100%;
  height:auto;
  font-family:var(--mono)
}

.map-footer {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 10px;
  font:7px var(--mono);
  color:#a2b7a7;
  border-top:1px solid #2c4138
}

.plane-key {
  color:var(--lime);
  display:inline-flex;
  align-items:center;
  gap:6px
}

.plane-key svg {
  width:22px;
  height:16px;
  overflow:visible;
  fill:currentColor;
  flex:0 0 auto
}

.aircraft-silhouette {
  fill:var(--lime);
  stroke:#101f1d;
  stroke-width:.8;
  paint-order:stroke
}

.weather-display {
  padding-bottom:8px
}

.weather-location {
  display:block;
  margin:16px 13px 0;
  font:7px var(--mono);
  letter-spacing:.8px;
  color:#a5b5a9
}

.visibility {
  display:flex;
  gap:12px;
  align-items:center;
  margin:1px 13px 8px;
  color:var(--lime)
}

.visibility>strong {
  font:500 47px var(--heading)
}

.visibility>div {
  font:12px var(--mono)
}

.visibility span {
  display:block;
  font:6px var(--mono);
  letter-spacing:.5px;
  margin-top:5px;
  color:#a5b5a9
}

.weather-details {
  margin:0 13px
}

.weather-details>div {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font:9px var(--mono);
  padding:6px 0;
  border-bottom:1px solid #2b3c32
}

.weather-details dt {
  color:#a0b0a3
}

.weather-details dd {
  margin:0;
  color:#e0e6d1
}

.weather-note {
  color:#bccbac;
  margin:11px 13px 3px;
  font-size:9px;
  line-height:1.5
}

.weather-display.caution .visibility {
  color:var(--amber)
}

.weather-display.caution {
  border-color:#957545
}

.equipment-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding:16px 3px;
  color:#bfcca9;
  font:7px var(--mono)
}

.equipment-row .eyebrow {
  font-size:7px
}

.equipment-row .missing {
  color:var(--amber)
}

.radio-panel {
  display:flex;
  align-items:center;
  gap:20px;
  padding:10px 17px;
  border:1px solid #3e4a4b;
  background:#10191b;
  border-radius:6px
}

.radio-panel .eyebrow {
  font-size:7px
}

.radio-panel strong {
  display:block;
  font:24px var(--mono);
  color:var(--lime);
  margin-top:3px
}

.radio-active {
  color:var(--lime);
  margin-left:7px
}

.radio-panel>span:not(.radio-knob) {
  font:9px var(--mono);
  color:#a8b4a5;
  flex:1
}

.radio-knob {
  width:32px;
  height:32px;
  border-radius:50%;
  border:4px solid #344044;
  background:linear-gradient(120deg,#4d5959,#151d20);
  box-shadow:0 2px 5px #000
}

@media(min-width:1450px) {
.windshield {
    height:320px
  }
.weather-location {
    margin-top:20px
  }
.weather-details>div {
    padding:10px 0
  }
.weather-note {
    font-size:11px
  }
.visibility span {
    font-size:8px
  }
.equipment-row {
    font-size:9px
  }
.weather-details>div {
    font-size:11px
  }
.map-footer {
    font-size:9px
  }
}

@media(max-width:1050px) {
.windshield {
    height:235px
  }
.dashboard {
    padding:12px
  }
.displays {
    grid-template-columns:1fr
  }
.weather-display {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:10px
  }
.weather-display .display-heading {
    grid-column:1/-1
  }
.weather-location {
    grid-column:1;
    grid-row:2;
    margin-top:12px
  }
.visibility {
    grid-column:1;
    grid-row:3
  }
.weather-details {
    grid-column:2;
    grid-row:2/4;
    margin-top:8px
  }
.weather-note {
    grid-column:1/-1;
    margin-top:0
  }
.instrument-strip>div {
    padding:12px
  }
.map-display {
    max-height:290px
  }
#nav-map {
    max-height:215px
  }
.equipment-row {
    gap:8px
  }
.dash-top {
    font-size:6px
  }
}

@media(max-width:760px) {
.windshield {
    height:230px
  }
.displays {
    grid-template-columns:1.2fr 1fr
  }
.weather-display {
    display:block
  }
.weather-location {
    margin-top:16px
  }
.weather-details {
    margin-top:0
  }
.weather-note {
    margin-top:10px
  }
.map-display {
    max-height:none
  }
#nav-map {
    max-height:none;
    height:calc(100% - 70px);
    min-height:180px
  }
.instrument-strip strong {
    font-size:28px
  }
.equipment-row {
    font-size:7px
  }
.dashboard {
    padding:13px
  }
.dash-top {
    font-size:7px
  }
}

@media(max-width:380px) {
.displays {
    grid-template-columns:1fr
  }
.weather-display {
    display:grid
  }
.weather-note {
    grid-column:1/-1
  }
.instrument-strip>div {
    padding:10px 8px
  }
.instrument-strip strong {
    font-size:25px
  }
.flight-tag span {
    display:none
  }
}

/* Readable instruments and clearly labeled conditions. */
.windshield-caption { text-shadow: 0 2px 4px #071816; }
.windshield-caption .eyebrow { font-size: 12px; color: #fff; }
.windshield-caption > span:last-child { font-size: 14px; line-height: 1.5; }
.windshield-caption strong { font-size: 24px; }
.windshield-top, .flight-tag span, .day-tag { font-size: 12px; }
.flight-tag { background: #102c35e8; }
.day-tag { font-weight: bold; }
.dash-top { font-size: 12px; line-height: 1.5; gap: 12px; flex-wrap: wrap; }
.instrument-label, .instrument-label small, .instrument-foot { font-size: 12px; line-height: 1.5; }
.instrument-strip strong small { font-size: 14px; }
.instrument-strip > div { padding: 14px 12px; }
.instrument-strip strong { font-size: 32px; }
.displays { grid-template-columns: minmax(0, 1.35fr) minmax(220px, 1fr); }
.display-heading h2, .display-heading > span { font-size: 13px; letter-spacing: .3px; }
#nav-map { height: auto; min-height: 0; max-height: none; }
#nav-map text { font-size: 21px; }
#aircraft-label { font-size: 20px; }
.map-display { max-height: none; }
.map-footer { font-size: 12px; line-height: 1.5; gap: 10px; }
.map-boundary, .map-caption { margin: 9px 12px; color: #d0ddd2; font-size: 13px; line-height: 1.5; }
.map-caption { color: #b7cbbd; }
.weather-display { display: block; }
.weather-location { font-size: 12px; line-height: 1.5; color: #c3d2c8; }
.visibility > strong { font-size: 48px; }
.visibility > div { font-size: 17px; }
.visibility span { font-size: 12px; line-height: 1.5; }
.weather-details > div { font-size: 14px; line-height: 1.5; padding: 8px 0; }
.weather-details dt { color: #c6d1c7; }
.weather-note { font-size: 14px; line-height: 1.6; color: #d2dfc8; }
.equipment-row { font-size: 13px; line-height: 1.6; gap: 9px 16px; }
.equipment-row .eyebrow { width: 100%; font-size: 12px; }
.equipment-row > span:not(.eyebrow) { padding: 5px 9px; border: 1px solid #52604b; border-radius: 4px; }
.equipment-row > .missing { border-color: #c89961 !important; background: #3f3426; font-weight: 600; }
.radio-panel .eyebrow, .radio-panel > span:not(.radio-knob) { font-size: 12px; line-height: 1.5; }
.radio-panel strong { font-size: 25px; }
@media (max-width: 1150px) {
  .displays { grid-template-columns: 1fr; }
  .weather-display { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .weather-display .display-heading, .weather-note { grid-column: 1 / -1; }
  .weather-location { grid-column: 1; grid-row: 2; }
  .visibility { grid-column: 1; grid-row: 3; }
  .weather-details { grid-column: 2; grid-row: 2 / 4; margin-top: 12px; }
}
@media (max-width: 760px) {
  .displays { grid-template-columns: 1fr; }
  .windshield { height: 250px; }
  .instrument-strip { grid-template-columns: 1.2fr 1fr 1fr; }
  .instrument-strip strong { font-size: 26px; }
  .instrument-strip > div { padding: 12px 8px; }
  .instrument-label { letter-spacing: 0; }
  .radio-panel { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 380px) {
  .instrument-strip { grid-template-columns: 1fr 1fr; }
  .instrument-strip > div:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #435458; }
  .weather-display { display: block; }
  .flight-tag span { display: none; }
  .day-tag { font-size: 12px; }
  .windshield-top { left: 18px; right: 18px; }
}

/* The ground view has its own flat horizon and clipped pavement. */
.windshield[data-view="ground"] .horizon-mark { display: none; }
.windshield[data-view="ground"] .windshield-caption {
  bottom: auto;
  top: 64px;
  left: 24px;
  right: 24px;
  max-width: 440px;
  padding: 10px 13px;
  border-radius: 6px;
  background: #102b35e8;
  text-shadow: none;
}
.windshield[data-view="ground"] .windshield-caption .eyebrow { display: none; }
.windshield[data-view="ground"] .windshield-caption strong { font-size: 20px; }
.windshield[data-view="ground"] .windshield-caption > span:last-child { font-size: 13px; margin-top: 5px; }
@media (max-width: 760px) {
  .windshield[data-view="ground"] { height: 320px; }
  .windshield[data-view="ground"] .windshield-caption { top: 60px; left: 18px; right: 18px; }
}