/* ============================================================
   FPLN.CSS — Flight plan display (Airbus A350 FMS style)
   ============================================================ */

/* ── Screen container ── */
.fpln-screen {
  width: 100%;
  max-width: 800px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--mono);
  padding: .6rem .8rem;
}

/* ── Header ── */
.fpln-header {
  background: var(--white);
  padding: .35rem .5rem;
  margin-bottom: .2rem;
}

.fpln-title {
  font-size: 1.1rem;
  letter-spacing: .16em;
  color: black;
}

/* ── Column headers ── */
.fpln-col-headers {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr 1.4fr 24px 1fr 1fr;
  padding: .35rem 0;
  border-bottom: 1px solid var(--white);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--white);
}

.fpln-col-headers span {
  padding: 0 .3rem;
}

.fpln-col-headers span:nth-child(n+2):nth-child(-n+4) {
  text-align: right;
}

.fpln-col-headers span:nth-child(n+6) {
  text-align: right;
}

/* ── Body — vertical stack, no gap for continuous line ── */
.fpln-body {
  display: flex;
  flex-direction: column;
  max-height: 520px;
  overflow-y: auto;
  padding-right: .6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}

/* ── Shared grid for waypoint rows and segment rows ── */
.fpln-row,
.fpln-seg {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr 1.4fr 24px 1fr 1fr;
  align-items: center;
}

/* ── Waypoint row ── */
.fpln-row {
  min-height: 36px;
  font-size: 1.02rem;
  letter-spacing: .06em;
  color: var(--green);
  cursor: pointer;
  transition: background .15s;
}

.fpln-row:hover {
  background: rgba(0, 255, 106, .05);
}

.fpln-name {
  font-weight: 700;
  letter-spacing: .1em;
  padding-left: .2rem;
}

.fpln-utc,
.fpln-spd,
.fpln-alt {
  text-align: right;
  padding-right: .3rem;
}

/* ── Segment row (between waypoints) ── */
.fpln-seg {
  min-height: 26px;
  font-size: .92rem;
  letter-spacing: .06em;
  color: var(--green);
}

.fpln-seg-line {
  grid-column: 5;
}

.fpln-seg-trk {
  grid-column: 6;
  text-align: right;
  padding-right: .3rem;
}

.fpln-seg-dist {
  grid-column: 7;
  text-align: right;
  padding-right: .3rem;
}

/* ── Vertical line + diamond (node column) ── */
.fpln-node,
.fpln-seg-line {
  position: relative;
  height: 100%;
  justify-self: center;
  width: 100%;
}

/* Continuous vertical line through node and segment cells */
.fpln-node::before,
.fpln-seg-line::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--green);
}

/* First and last nodes: line extends full height (to table edges) */

/* Diamond marker at each waypoint */
.fpln-node::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--green);
  background: var(--surface);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 1;
}

/* ── Horizontal ticks ── */

/* Left tick: from diamond left point toward ALT column */
.fpln-tick-left {
  position: absolute;
  top: 50%;
  right: calc(50% + 5px);
  width: 10px;
  height: 2px;
  margin-top: -1px;
  background: var(--green);
  z-index: 1;
}

/* Right tick: from vertical line toward TRK on segment rows */
.fpln-seg-tick {
  position: absolute;
  top: 50%;
  left: calc(50% + 1px);
  width: 10px;
  height: 2px;
  margin-top: -1px;
  background: var(--green);
}

/* ── Active waypoint — everything turns white ── */
.fpln-row-active {
  color: var(--white);
}

.fpln-row-active .fpln-node::before {
  background: var(--white);
}

.fpln-row-active .fpln-node::after {
  border-color: var(--white);
}

.fpln-row-active .fpln-tick-left {
  background: var(--white);
}

/* Active segment (the segment ABOVE the active waypoint) */
.fpln-seg-active {
  color: var(--white);
}

.fpln-seg-active .fpln-seg-line::before {
  background: var(--white);
}

.fpln-seg-active .fpln-seg-tick {
  background: var(--white);
}

/* ── Footer — same grid as table rows for column alignment ── */
.fpln-footer {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr 1.4fr 24px 1fr 1fr;
  align-items: center;
  border-top: 1px solid var(--white);
  margin-top: .4rem;
  font-size: .92rem;
  letter-spacing: .08em;
  color: var(--green);
}

/* FMS-style button — grey with 3D relief */
.fpln-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3a3f4a;
  border-top: 1px solid #6a7080;
  border-left: 1px solid #6a7080;
  border-right: 1px solid var(--inset);
  border-bottom: 1px solid var(--inset);
  font-family: var(--mono);
  font-size: .92rem;
  letter-spacing: .12em;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
}

.fpln-btn:hover {
  background: #4a5060;
}

.fpln-btn-dest {
  font-weight: 700;
  padding: .4rem .8rem;
  margin-left: .2rem;
}

.fpln-btn-icon {
  padding: .6rem .9rem;
  color: var(--white);
}

.fpln-btn-icon:hover {
  background: #4a5060;
}

.fpln-btn-icon svg {
  display: block;
}

/* Footer data fields */
.fpln-footer-time {
  text-align: right;
  padding-right: .3rem;
  color: var(--white);
}

.fpln-footer-fuel {
  text-align: right;
  padding-right: .3rem;
  color: var(--amber);
}

.fpln-footer-dist {
  text-align: right;
  padding-right: .3rem;
  color: var(--white);
}

.fpln-footer-unit {
  color: #5a6aae;
}

.fpln-footer-spacer {
  /* Empty grid cell for the line column */
}

/* Group the two icon buttons together, flush against each other */
.fpln-footer-buttons {
  grid-column: 6 / 8;
  display: flex;
  justify-content: flex-end;
  gap: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .fpln-screen { max-width: 100%; padding: .4rem .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .fpln-col-headers,
  .fpln-row,
  .fpln-seg { grid-template-columns: 1.6fr 1.2fr 1fr 1.4fr 20px 1fr 1fr; min-width: 380px; }

  .fpln-row { font-size: .68rem; min-height: 26px; }
  .fpln-seg { font-size: .6rem; min-height: 18px; }
  .fpln-col-headers { font-size: .52rem; }
  .fpln-footer { font-size: .6rem; gap: .4rem; flex-wrap: wrap; }
}

@media (max-width: 400px) {
  .fpln-col-headers,
  .fpln-row,
  .fpln-seg { grid-template-columns: 1.6fr 1.2fr 1fr 1.4fr 18px 1fr 1fr; min-width: 340px; }

  .fpln-row { font-size: .6rem; }
  .fpln-title { font-size: .68rem; }
}