/* ============================================================
   PFD.CSS — Primary Flight Display instruments
   Airbus A350 authentic style
   Speed tape, attitude indicator, altitude tape, V/S, heading
   ============================================================ */

/* ============================================================
   PFD-SPECIFIC CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Layout */
  --pfd-width:   620px;    /* max-width shared by pfd-container, pfd-wrapper, heading-tape */
  --tape-bg:     #5A5B62;  /* grey background of speed / alt / VS tapes and heading band */
  --tape-height: 430px;    /* height of speed and altitude tapes — must match JS TAPE_HEIGHT */
  --adi-crop-width: 310px; /* visible width of the ADI: the 360px circle is cut by two vertical edges,
                              A350 style (sahome.fr cockpit, 2026-10-08; wider would leave the ±60°
                              double green bank limits hanging in the void) */

  /* Z-index hierarchy (all values are in the pfd-container stacking context)
     2   .alt-tape             scrolling tape, creates local stacking context
     4   .attitude::after      ADI circular mask (box-shadow)
     5   .attitude::before     ADI side crop (vertical band, --adi-crop-width)
     6   .alt-tape-outer       clip-path creates stacking context — must be above attitude::before
     6   .vs-zero-bar          V/S amber zero reference bar (local to vspeed-strip)
     9   .alt-selected         selected altitude cursor (local to alt-tape-outer)
     10  .alt-box              current altitude readout box (local to alt-tape-outer)
     10  .alt-current-bar      current altitude amber bar (local to alt-tape-outer, DOM before alt-box)
     10  .speed-box            current speed amber lines (local to speed-tape)
     15  .tape-bottom-overlay  speed / QNH bottom overlays
     20  .l-marker             side L-markers
     20  .bank-arc-container   bank angle arc + pointer
     20  .heading-tape::after  heading cursor (amber bar)
     30  .fma-row              Flight Mode Annunciator (topmost)             */
}

/* ============================================================
   PFD CONTAINER — shared stacking root for pfd-wrapper + heading-tape-wrapper
   Allows .alt-bottom to be positioned above the heading tape background
   ============================================================ */
.pfd-container {
  position: relative;
  width: 100%;
  max-width: var(--pfd-width);
  margin: 0 auto;
}

/* ============================================================
   PFD WRAPPER
   ============================================================ */
.pfd-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  max-width: var(--pfd-width);
  background: black;
  position: relative;
  border: 5px solid black;
  border-bottom: none;
  padding-top: 44px;
  padding-bottom: 40px;
}

/* ============================================================
   SPEED TAPE (left column)
   ============================================================ */
.speed-tape {
  width: 76px;
  height: var(--tape-height);
  background: linear-gradient(90deg, var(--tape-bg) 0%, var(--tape-bg) 65%, black 65%);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  border-top: 2px solid var(--white);
  margin-top: 25px;
}

/* Top mask removed — FMA row now covers this area */

.speed-tape .tape-track {
  position: absolute;
  left: 0; right: 0;
  top: 0;
}

.speed-tape .speed-tape-mark {
  position: absolute;
  left: 4px;
  width: 32px;
  text-align: right;
  font-size: 1rem;
  color: var(--white);
  line-height: 1;
}

.speed-tape .speed-tape-mark::after {
  content: '';
  position: absolute;
  right: -13px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 1px;
  background: var(--white);
}

/* Minor tick marks on speed tape — no label, tick aligned with majors */
.speed-tape .speed-tape-mark-minor {
  font-size: 0;
  left: auto;
  right: 27px;
  width: 8px;
  height: 1px;
  background: var(--white);
}

.speed-tape .speed-tape-mark-minor::after {
  display: none;
}

/* Bottom overlay — covers bottom of tape, shows target values */
.tape-bottom-overlay {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 52px;
  background: black;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  pointer-events: none;
  border-top: 2px solid var(--white);
}

/* .alt-bottom is now a direct child of .pfd-container (not inside alt-tape-outer),
   so it paints above heading-tape-wrapper. Override the default left/right stretch
   with coordinates derived from fixed CSS dimensions:
     right = border-right(5) + vs-strip-outer(34) + alt-tape-outer margin-right(4) = 43px
     width = alt-tape width = 72px
     bottom = pfd-container height(493) - pfd-wrapper height(485) = 8px */
.pfd-container > .alt-bottom {
  left: auto;
  right: 43px;
  bottom: 48px; /* = 8px base + 40px pfd-wrapper padding-bottom */
  width: 72px;
}

.spd-target-label {
  font-size: 1.1rem;
  color: var(--green);
  letter-spacing: .06em;
}

.alt-target-label {
  font-size: 1.1rem;
  color: var(--magenta);
  letter-spacing: .06em;
}

.alt-qnh-label {
  font-size: .85rem;
  color: var(--accent);
  letter-spacing: .08em;
  border: 1px solid var(--amber);
  padding: .05rem .25rem;
}

/* Current speed box */
/* Current speed — two amber line segments with gap for text */
.speed-box {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  height: 2px;
  background: transparent;
  font-size: 0;
  pointer-events: none;
}

.speed-box::before {
  content: '';
  position: absolute;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--amber);
}

.speed-box::after {
  content: '';
  position: absolute;
  right: 0;
  width: 40px;
  height: 2px;
  background: var(--amber);
}

/* Selected speed bug — magenta outlined triangle (SVG), right side of tape */
.spd-selected {
  position: absolute;
  right: 5px;
  z-index: 9;
  transform: translateY(-12px);
}

/* Speed limit markers — double magenta ticks above and below target */
.spd-limit-upper,
.spd-limit-lower {
  position: absolute;
  right: 7px;
  height: 6px;
  z-index: 9;
  pointer-events: none;
}

.spd-limit-upper::before,
.spd-limit-upper::after,
.spd-limit-lower::before,
.spd-limit-lower::after {
  content: '';
  position: absolute;
  right: 0;
  width: 20px;
  height: 2px;
  background: var(--magenta);
}

.spd-limit-upper::before { top: 0; }
.spd-limit-upper::after  { top: 4px; }
.spd-limit-lower::before { top: 0; }
.spd-limit-lower::after  { top: 4px; }

/* VMO barber pole (above 340 kts) and stall barber pole (below 190 kts) —
   red/black horizontal stripe pattern, flush with grey zone right edge */
.spd-barber,
.spd-barber-low {
  position: absolute;
  left: 49px;
  width: 13px;
  z-index: 8;
  pointer-events: none;
  border-right: 1px solid var(--red);
  background: repeating-linear-gradient(
    180deg,
    var(--red) 0px,
    var(--red) 9px,
    black      9px,
    black      18px
  );
}

/* Speed trend arrow — amber vertical arrow with triangular tip */
.speed-trend {
  position: absolute;
  left: 36px;
  width: 2px;
  background: var(--amber);
  pointer-events: none;
  z-index: 9;
}

/* Arrowhead — triangular tip, flipped by JS via scaleY */
.speed-trend::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid var(--amber);
}

/* When arrow points up, tip at top */
.speed-trend.trend-up::after {
  top: 0;
  border-bottom: 7px solid var(--amber);
  border-top: none;
  transform: translateX(-50%) translateY(-7px);
}

/* When arrow points down, tip at bottom */
.speed-trend.trend-down::after {
  bottom: 0;
  border-top: 7px solid var(--amber);
  border-bottom: none;
  transform: translateX(-50%) translateY(7px);
}

/* ============================================================
   ATTITUDE INDICATOR (center)
   ============================================================ */
.attitude {
  flex: 1;
  height: 480px;
  position: relative;
  overflow: hidden;
  background: black;
}

/* Black side frames — mask left and right edges of the horizon */
/* Side crop — A350 style: a centered vertical band of --adi-crop-width; its shadow blacks out
   everything left and right of it, so the circle below gets flat left and right edges.
   The band spans the full height, so the top and bottom of the circle stay round. */
.attitude::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--adi-crop-width);
  transform: translateX(-50%);
  box-shadow: 0 0 0 600px black;
  z-index: 5;
  pointer-events: none;
}

/* Circular clipping mask — A350 style: large circle cropped on sides
   The circle is taller than the visible area, so the left/right edges
   get clipped by the attitude container's overflow:hidden */
.attitude::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 300px black;
  z-index: 4;
  pointer-events: none;
}

/* Sky / Ground split — rotated by JS for bank */
.adi-horizon {
  position: absolute;
  inset: -60px;
  transform-origin: center center;
}

.adi-sky {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  background: linear-gradient(180deg, #0a3a7a 0%, #1a70c0 100%);
}

.adi-ground {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #8b3510 0%, #5a1e08 100%);
}

.adi-horizon-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--white);
  z-index: 2;
}

/* Vertical ticks on the ground side of the horizon line */
.adi-horizon-line::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0; right: 0;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 38px,
    var(--white) 38px,
    var(--white) 40px
  );
}

/* Pitch ladder marks — white bars */
.pitch-ladder {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  z-index: 3;
  pointer-events: none;
}

.pitch-mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pitch-mark .bar {
  height: 1.5px;
  background: var(--white);
  opacity: .85;
}

.pitch-mark .bar-major { width: 50px; }
.pitch-mark .bar-minor { width: 25px; }

.pitch-mark .lbl {
  font-size: .72rem;
  color: var(--white);
  opacity: .85;
  width: 24px;
  text-align: center;
}

/* Flight Director — green cross centered on attitude indicator */
.flight-director {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: none;
}

.fd-bar {
  position: absolute;
  background: var(--green);
}

.fd-horizontal {
  width: 120px;
  height: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fd-vertical {
  width: 3px;
  height: 120px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fd-center-box {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border: 2px solid #D3C83B;
  z-index: 1;
}

/* Side L-markers — fixed lateral reference, black with amber border */
.l-marker {
  position: absolute;
  top: 50%;
  z-index: 20;
  pointer-events: none;
}

.l-marker-left {
  left: 80px;
  transform: translateY(calc(-25% + 6px));
}

.l-marker-right {
  right: 80px;
  transform: translateY(calc(-25% + 6px));
}

/* Fixed aircraft symbol — amber/yellow like A350 */
.aircraft-symbol {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  pointer-events: none;
}

.aircraft-symbol svg {
  overflow: visible;
}

/* Bank angle arc container — centered on attitude, circle top
   top: 45px = ADI center y (240) − SVG cy (195); keeps ticks aligned outside the ADI circle */
.bank-arc-container {
  position: absolute;
  left: 50%;
  top: 45px;
  transform: translateX(-50%);
  width: 360px;
  height: 205px;
  z-index: 20;
  pointer-events: none;
}

.bank-arc-svg {
  position: absolute;
  top: 0; left: 0;
}

.bank-pointer-shape {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 180px 195px; /* rotation pivot = SVG arc center (cx=180, cy=195) */
}

/* Flight mode annunciator row — spans full PFD width, above instruments */
.fma-row {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  background: black;
  font-size: .82rem;
  letter-spacing: .08em;
  z-index: 30;
  height: 44px;
}

.fma-cell {
  text-align: center;
  flex: 1;
  border-right: 2px solid #555;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .1rem .15rem;
  gap: 0;
  min-width: 0;
}

.fma-cell:last-child { border-right: none; }

/* Bottom-aligned variant (Cell 4 — BARO/QNH) */
.fma-cell.fma-cell-bottom {
  justify-content: flex-end;
  padding-bottom: .2rem;
}

/* Individual text lines inside FMA cells */
.fma-line {
  display: block;
  font-size: .78rem;
  line-height: 1.15;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* Color classes — two-class specificity is sufficient, no !important needed */
.fma-row .fma-green   { color: var(--green); }
.fma-row .fma-white   { color: var(--white); }
.fma-row .fma-magenta { color: var(--magenta); }
.fma-row .fma-cyan    { color: var(--accent); }

/* ============================================================
   ALTITUDE TAPE (right column)
   ============================================================ */

/* Outer wrapper — clip-path clips cursor vertically to tape bounds while allowing
   left protrusion for the amber bar and cursor; z-index:6 compensates for the
   stacking context created by clip-path (must stay above attitude::before z:5) */
.alt-tape-outer {
  position: relative;
  flex-shrink: 0;
  margin-top: 25px;
  margin-right: 4px;
  z-index: 6;
  clip-path: inset(0 0 0 -20px);
}

.alt-tape {
  width: 72px;
  height: var(--tape-height);
  background: linear-gradient(90deg, var(--tape-bg) 0%, var(--tape-bg) 65%, black 65%);
  border-top: 2px solid var(--white);
  position: relative;
  overflow: hidden;
  z-index: 2; /* creates stacking context: above bar (z-index 1), below alt-box (z-index 10) */
}

.alt-tape .alt-tape-mark {
  position: absolute;
  left: 4px;
  font-size: .82rem;
  color: var(--white);
  line-height: 1;
}

/* Tick aligned to right edge of grey zone (65% × 72px ≈ 47px from tape left)
   mark starts at left:4px → left:35px on ::after gives right edge at 4+35+8 = 47px */
.alt-tape .alt-tape-mark::after {
  content: '';
  position: absolute;
  left: 35px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 1px;
  background: var(--white);
}

/* Minor tick marks — right edge at 39+8 = 47px, aligned with grey zone boundary */
.alt-tape .alt-tape-mark-minor {
  font-size: 0;
  left: 39px;
  width: 8px;
  height: 1px;
  background: var(--white);
}

.alt-tape .alt-tape-mark-minor::after,
.alt-tape .alt-tape-mark-minor::before {
  display: none;
}

/* Current altitude box */
.alt-box {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: black;
  border: 1.5px solid var(--amber);
  text-align: center;
  padding: .2rem .2rem;
  pointer-events: none;
}

.alt-box::before {
  display: none;
}

.alt-box .alt-hundreds {
  font-size: 1rem;
  color: var(--green);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

/* Amber bar at the current altitude.
   z-index: 10 → above attitude::before black mask (z-index 5) and alt-tape (z-index 2).
   alt-box also has z-index 10 but comes later in DOM, so alt-box paints on top of the bar.
   Extends 8px left toward ADI + 8px visible on the grey tape edge. */
.alt-current-bar {
  position: absolute;
  left: -16px;
  width: 24px;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: var(--amber);
  z-index: 10;
  pointer-events: none;
}

/* Selected altitude cursor — lives in alt-tape-outer (no overflow:hidden) so it can
   extend left of the tape; left:-8px gives ~8px of visible protrusion */
.alt-selected {
  position: absolute;
  left: -8px;
  width: 40px;
  height: 80px;
  background: url('../gfx/alt_cursor.png') no-repeat center / contain;
  transform: translateY(-50%);
  z-index: 9;
  pointer-events: none;
}

/* ============================================================
   VERTICAL SPEED (far right strip)
   ============================================================ */

/* Outer wrapper — flex item, no overflow clipping, so zero bar can extend left toward alt-tape */
.vs-strip-outer {
  position: relative;
  flex-shrink: 0;
  margin-top: 26px; /* moved from .vspeed-strip */
}

.vspeed-strip {
  width: 34px;
  height: 420px;
  background: var(--tape-bg);
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 10px 0, 34px 30px, 34px 390px, 10px 420px, 0 420px);
}

.vspeed-scale {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

.vspeed-mark {
  position: absolute;
  left: 2px;
  font-size: .82rem;
  color: var(--white);
  line-height: 1;
  transform: translateY(-50%);
}

.vspeed-mark::after {
  content: '';
  position: absolute;
  right: -9px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 6px;
  background: var(--white);
}

.vspeed-mark-minor {
  position: absolute;
  left: 13px;
  width: 5px; height: 2px;
  background: var(--white);
  transform: translateY(-50%);
}

/* Amber bar at zero V/S — inside vspeed-strip, left portion only (clear of "0" label at right). */
.vs-zero-bar {
  position: absolute;
  left: 0;
  width: 18px;
  top: 214px;
  height: 2px;
  background: var(--amber);
  z-index: 6; /* above needle (z-index 5) */
  pointer-events: none;
}

/* Pivoting needle — pivot hidden off-right, only tip visible in strip */
.vspeed-needle {
  position: absolute;
  right: -60px;
  top: 214px;
  width: 100px;
  height: 3px;
  background: var(--green);
  transform-origin: right center;
  transform: rotate(0deg);
  z-index: 5;
  border-radius: 1px 0 0 1px;
}

.vspeed-value {
  position: absolute;
  left: 2px;
  transform: translateY(-50%);
  font-size: .55rem;
  color: var(--green);
  letter-spacing: .04em;
  background-color: black;
  white-space: nowrap;
  pointer-events: none;
  z-index: 7; /* above needle (z-index 5) and vs-zero-bar (z-index 6) */
}

/* ============================================================
   HEADING TAPE (below PFD)
   ============================================================ */
.heading-tape-wrapper {
  width: 100%;
  max-width: var(--pfd-width);
  height: 40px;
  background: black;
  position: relative;
  margin-top: -2rem; /* collapse the main gap between PFD and heading tape */
  border: 5px solid black;
  border-top: none;
}

/* Gray band aligned on the ADI column — black margins match speed tape (76px left)
   and alt tape + V/S strip (110px right) */
.heading-tape-inner {
  position: absolute;
  top: 0; bottom: 0;
  left: 76px; right: 110px;
  background: var(--tape-bg);
  overflow: hidden;
  border-top: 1px solid var(--white);
  border-left: 1px solid var(--white);
  border-right: 1px solid var(--white);
}

.heading-track {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: stretch;
}

.hdg-mark {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  height: 100%;
}

.hdg-mark .hdg-tick {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--white);
}

.hdg-mark .hdg-label {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .75rem;
  color: var(--white);
  white-space: nowrap;
}

/* Center cursor — amber vertical bar, overflows above the band */
.heading-tape-wrapper::after {
  content: '';
  position: absolute;
  top: -14px;
  left: calc(50% - 17px);
  transform: translateX(-50%);
  width: 3px;
  height: 25px;
  background: var(--amber);
  z-index: 20;
}

/* Target heading diamond */
.hdg-diamond {
  position: absolute;
  top: 2px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--green);
  background: transparent;
  transform: translateX(-50%) rotate(45deg);
  z-index: 10;
  pointer-events: none;
}

/* ============================================================
   RESPONSIVE — mobile adjustments
   ============================================================ */
/* sahome.fr cockpit (2026-10-08): the original rule spread the L-markers apart on mobile
   (left/right: 30px) for the squeezed PFD. With the phone zoom (index.php) the PFD keeps
   nearly its native width, and spread markers would stick out of the cropped ADI: removed. */