/* ==========================================================================
   WFS-CISS flight list
   ONE renderer, TWO layouts. Mobile-first: rows are cards by default and
   become a real table once their CONTAINER is wide enough. There is no JS
   re-render on resize, so expanded rows and event handlers survive rotation
   and window drags.
   ========================================================================== */

.wfs-flights-wrap {
  width: 100%;
  /* Query container for the table/card switch below. Keying the switch off
     the WRAPPER rather than the viewport is what lets the same renderer serve
     a full-width search panel and a half-width board column: at 1600px the
     board still only gives each column ~530px, and a viewport-based rule
     forced a table into it and scrolled sideways. */
  container-type: inline-size;
}

.wfs-flights {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* --------------------------------------------------------------------------
   CARD MODE (default, container < 520px)
   -------------------------------------------------------------------------- */

/* NOTE ON SPECIFICITY
   Every rule in both layouts is qualified with .wfs-flights, so card mode and
   table mode weigh the same and the cascade is decided by source order alone.
   Mixing `.wfs-flights td` (0,1,1) with a bare `.wfs-flight__cell` (0,1,0)
   silently keeps display:block at desktop width - the header flips to a table
   while the cells stay stacked. */

.wfs-flights,
.wfs-flights tbody,
.wfs-flights tr,
.wfs-flights td {
  display: block;
}

/* Hidden visually, still in the a11y tree so the table keeps column headers. */
.wfs-flights thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wfs-flights .wfs-flight {
  position: relative;
  border: 1px solid var(--wfs-border);
  border-radius: var(--wfs-r-md);
  margin: 0 var(--wfs-s3) var(--wfs-s3);
  padding: var(--wfs-s3);
  background: var(--wfs-surface);
  cursor: pointer;
  transition: border-color var(--wfs-t-fast) var(--wfs-ease),
              background var(--wfs-t-fast) var(--wfs-ease);
}

.wfs-flights .wfs-flight:hover { background: var(--wfs-surface-hover); }

.wfs-flights .wfs-flight[aria-expanded="true"] {
  border-color: var(--wfs-primary);
  background: var(--wfs-surface-hover);
}

.wfs-flights .wfs-flight__cell {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--wfs-s3);
  align-items: baseline;
  padding: 3px 0;
  font-size: var(--wfs-fs-sm);
}

.wfs-flights .wfs-flight__cell::before {
  content: attr(data-label);
  font-size: var(--wfs-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wfs-ls-caps);
  color: var(--wfs-text-faint);
}

/* A cell with no value is noise on a phone. */
.wfs-flights .wfs-flight__cell:empty { display: none; }

/* Lead cells (flight number + time) become the card header: bigger, unlabelled,
   side by side. A card then reads "MNB150  04:50" at a glance instead of as
   nine equal label/value rows. */
.wfs-flights .wfs-flight__cell--lead {
  display: inline-flex;
  width: auto;
  padding: 0 var(--wfs-s3) var(--wfs-s2) 0;
  font-size: var(--wfs-fs-lg);
  font-weight: 700;
}

.wfs-flights .wfs-flight__cell--lead::before { content: none; }

.wfs-flights .wfs-flight__chevron {
  position: absolute;
  top: var(--wfs-s3);
  right: var(--wfs-s3);
  color: var(--wfs-text-faint);
  transition: transform var(--wfs-t-med) var(--wfs-ease);
  font-size: var(--wfs-fs-sm);
}

.wfs-flights .wfs-flight[aria-expanded="true"] .wfs-flight__chevron {
  transform: rotate(180deg);
  color: var(--wfs-primary);
}

/* Detail row: a sibling <tr>, so it is simply the next block in card mode
   and a full-width colspan row in table mode. One DOM, one behaviour. */
.wfs-flights .wfs-flight-detail { margin: calc(var(--wfs-s3) * -1) var(--wfs-s3) var(--wfs-s3); }
.wfs-flights .wfs-flight-detail[hidden] { display: none; }

.wfs-flights .wfs-flight-detail__cell {
  padding: 0;
  background: var(--wfs-surface-sunken);
  border: 1px solid var(--wfs-primary);
  border-top: 0;
  border-radius: 0 0 var(--wfs-r-md) var(--wfs-r-md);
}

/* --------------------------------------------------------------------------
   TABLE MODE (container >= 520px)
   -------------------------------------------------------------------------- */

@container (min-width: 520px) {
  .wfs-flights { display: table; table-layout: auto; }
  .wfs-flights thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
  .wfs-flights tbody { display: table-row-group; }

  /* The header row needs restoring too. Left as display:block it becomes an
     anonymous table of its own, so the header columns size independently of
     the body columns and nothing lines up. */
  .wfs-flights thead tr { display: table-row; }

  .wfs-flights th {
    text-align: left;
    padding: var(--wfs-s2) var(--wfs-s3);
    font-size: var(--wfs-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--wfs-ls-caps);
    color: var(--wfs-text-faint);
    white-space: nowrap;
    border-bottom: 1px solid var(--wfs-border);
    background: var(--wfs-surface-sunken);
  }

  .wfs-flights .wfs-flight {
    display: table-row;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .wfs-flights .wfs-flight > td { border-bottom: 1px solid var(--wfs-border); }

  .wfs-flights .wfs-flight:hover > td { background: var(--wfs-surface-hover); }

  .wfs-flights .wfs-flight[aria-expanded="true"] > td {
    background: var(--wfs-surface-hover);
    border-bottom-color: transparent;
  }

  .wfs-flights .wfs-flight__cell,
  .wfs-flights .wfs-flight__cell--lead {
    display: table-cell;
    width: auto;
    padding: var(--wfs-s2) var(--wfs-s3);
    vertical-align: middle;
    font-size: var(--wfs-fs-sm);
    font-weight: 400;
    white-space: nowrap;
  }

  .wfs-flights .wfs-flight__cell::before { content: none; }
  .wfs-flights .wfs-flight__cell:empty { display: table-cell; }

  .wfs-flights .wfs-flight__cell--lead { font-weight: 700; font-size: var(--wfs-fs-sm); }

  .wfs-flights .wfs-flight__chevron {
    position: static;
    display: table-cell;
    width: 32px;
    text-align: center;
    vertical-align: middle;
  }

  .wfs-flights .wfs-flight-detail { display: table-row; margin: 0; }

  .wfs-flights .wfs-flight-detail__cell {
    display: table-cell;
    border: 0;
    border-bottom: 1px solid var(--wfs-border);
    border-left: 3px solid var(--wfs-primary);
    border-radius: 0;
  }
}

/* --------------------------------------------------------------------------
   Expansion animation
   `hidden` cannot animate, so a clip wrapper animates grid-template-rows
   0fr -> 1fr. That works whether the ancestor is display:block (card mode)
   or display:table-row (table mode), which a max-height hack does not.
   -------------------------------------------------------------------------- */

.wfs-fdetail__clip {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--wfs-t-med) var(--wfs-ease);
}

.wfs-flights .wfs-flight-detail.is-open .wfs-fdetail__clip { grid-template-rows: 1fr; }

.wfs-fdetail__clip > .wfs-fdetail {
  overflow: hidden;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wfs-fdetail__clip { transition: none; }
}

/* --------------------------------------------------------------------------
   Detail panel contents
   -------------------------------------------------------------------------- */

.wfs-fdetail__inner { padding: var(--wfs-s4); }

.wfs-fdetail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--wfs-s5);
}

.wfs-fgroup__title {
  font-size: var(--wfs-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wfs-ls-caps);
  color: var(--wfs-text-faint);
  padding-bottom: var(--wfs-s1);
  margin-bottom: var(--wfs-s2);
  border-bottom: 1px solid var(--wfs-border);
}

.wfs-fgroup__body {
  display: flex;
  flex-direction: column;
  gap: var(--wfs-s2);
}

.wfs-ffield {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--wfs-s2);
  align-items: baseline;
  font-size: var(--wfs-fs-sm);
}

.wfs-ffield__label { color: var(--wfs-text-muted); font-size: var(--wfs-fs-xs); }
.wfs-ffield__value { color: var(--wfs-text); font-weight: 500; overflow-wrap: anywhere; }

/* ---- timeline -------------------------------------------------------- */
.wfs-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.wfs-tick {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: var(--wfs-s2);
  align-items: center;
  padding: var(--wfs-s1) 0;
  position: relative;
}

.wfs-tick__marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wfs-border-strong);
  justify-self: center;
  position: relative;
  z-index: 1;
}

.wfs-tick--actual .wfs-tick__marker { background: var(--wfs-success); }
.wfs-tick--target .wfs-tick__marker { background: var(--wfs-warn); }
.wfs-tick--estimated .wfs-tick__marker { background: var(--wfs-primary); }

/* connecting line between markers */
.wfs-tick:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  bottom: -50%;
  width: 1px;
  background: var(--wfs-border);
}

.wfs-tick__label { font-size: var(--wfs-fs-xs); color: var(--wfs-text-muted); }

.wfs-tick__time {
  font-family: var(--wfs-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--wfs-fs-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--wfs-s2);
}

.wfs-delta {
  font-size: var(--wfs-fs-xs);
  font-weight: 600;
  padding: 0 var(--wfs-s1);
  border-radius: var(--wfs-r-sm);
}

.wfs-delta--late  { background: var(--wfs-danger-soft);  color: var(--wfs-danger-fg); }
.wfs-delta--early { background: var(--wfs-success-soft); color: var(--wfs-success-fg); }

/* ---- handler / WFS highlight ----------------------------------------- */
.wfs-handler {
  display: flex;
  align-items: center;
  gap: var(--wfs-s2);
  font-size: var(--wfs-fs-sm);
  padding: var(--wfs-s1) 0;
}

.wfs-handler__type {
  font-size: var(--wfs-fs-xs);
  font-weight: 700;
  font-family: var(--wfs-font-mono);
  color: var(--wfs-text-faint);
  min-width: 58px;
}

.wfs-handler--own {
  background: var(--wfs-info-soft);
  border-radius: var(--wfs-r-sm);
  padding: var(--wfs-s1) var(--wfs-s2);
  margin: 0 calc(var(--wfs-s2) * -1);
}

.wfs-handler--own .wfs-handler__type,
.wfs-handler--own .wfs-handler__name { color: var(--wfs-info-fg); font-weight: 700; }

/* ---- alerts inside the detail panel ---------------------------------- */
.wfs-falert {
  grid-column: 1 / -1;
  background: var(--wfs-warn-soft);
  color: var(--wfs-warn-fg);
  border-radius: var(--wfs-r-md);
  padding: var(--wfs-s3);
  margin-bottom: var(--wfs-s4);
  font-size: var(--wfs-fs-sm);
}

.wfs-falert__title { font-weight: 700; }
.wfs-falert details { margin-top: var(--wfs-s1); }
.wfs-falert summary { cursor: pointer; font-size: var(--wfs-fs-xs); }

.wfs-fdetail__foot {
  margin-top: var(--wfs-s4);
  padding-top: var(--wfs-s2);
  border-top: 1px solid var(--wfs-border);
  font-size: var(--wfs-fs-xs);
  color: var(--wfs-text-faint);
}

/* ---- codeshare "+N more" --------------------------------------------- */
.wfs-more-btn {
  border: 0;
  background: transparent;
  color: var(--wfs-primary-fg);
  font-size: var(--wfs-fs-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 2px var(--wfs-s1);
}

.wfs-more-btn:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Wide-only columns (Reg / Type)
   Present in card mode as ordinary labelled rows, and in table mode only once
   the container can actually hold them. The board's half-width columns land in
   the 520-759px band and quietly drop back to six columns; the search panel is
   wider and keeps all eight. No renderer variant needed.
   -------------------------------------------------------------------------- */

@container (min-width: 520px) and (max-width: 759px) {
  .wfs-flights .wfs-flight__cell--wide,
  .wfs-flights .wfs-flights__th--wide {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Aircraft photo (JetPhotos via jetapi.dev)
   -------------------------------------------------------------------------- */

.wfs-acphoto {
  position: relative;
  display: block;
  margin-bottom: var(--wfs-s3);
  border-radius: var(--wfs-r-md);
  overflow: hidden;
  background: var(--wfs-surface-hover);
  line-height: 0;
}

.wfs-acphoto:hover { text-decoration: none; }

.wfs-acphoto__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Credit is not decoration: these photos are the photographer's copyright and
   the frame links back to the JetPhotos page. */
.wfs-acphoto__credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--wfs-s2) var(--wfs-s3);
  font-size: var(--wfs-fs-xs);
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
}

.wfs-acphoto__skel {
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  border-radius: var(--wfs-r-md);
}