/* Shared flight-table vocabulary for /zboruri/ and its route pages. This sheet
   loads after site.css; the board's inline styles load after it and own the
   card reflow and day-toggle padding. Route-only rules stay under .route-page
   so their mobile reflow cannot catch the board between its breakpoints. The
   complete tone set is needed because live rows surface states absent from a
   freshly seeded route page. */

/* ── shared: topbar ─────────────────────────────────────────────────────── */

/* Override site.css's auto margin and trim the 1rem topbar gap to 0.6rem. */
.topbar-meta {
  margin-left: auto;
  margin-right: -0.4rem;
}

.resource-nav {
  margin-left: 0;
}

/* ── shared: table shell ────────────────────────────────────────────────── */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel), var(--shadow-edge);
  overflow: hidden;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}

/* Shared columns; each page owns its extra columns and width deviations. */
.col-time {
  width: 8rem;
}

.col-flight {
  width: 7rem;
}

.col-status {
  width: 10rem;
}

th.col-status-cell {
  text-align: center;
  padding-right: calc(var(--space-4) + 3.2rem);
}

td.col-status-cell {
  text-align: center;
}

thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

tbody td {
  padding: 0.78rem var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* ── shared: times and flight numbers ───────────────────────────────────── */

.flight-num {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.time {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Inline on desktop; page-specific responsive rules may restack it. */
.time-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 0.34rem;
  white-space: nowrap;
}

.time.superseded {
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Mango only for a late completion — the row writers gate this on the
   status-completed-late pill, so the two can't disagree. */
.time.is-late {
  color: var(--badge-mango-text);
}

/* ── shared: status pills, tones, delta chip ────────────────────────────── */

.flight-status {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-mono);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-text {
  min-height: 1.35rem;
  padding: 0.12rem 0.42rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Boxed tones share the ATERIZAT width; min-width still lets longer labels
   grow. Scheduled and Neconfirmat remain borderless and content-sized. */
.status-text:not(.status-scheduled) {
  min-width: 4.8rem;
  justify-content: center;
}

.status-landed,
.status-departed {
  border-color: var(--badge-green-text);
  background: var(--badge-green-bg);
  color: var(--badge-green-text);
}

.status-completed-late {
  border-color: var(--badge-mango-text);
  background: var(--badge-mango-bg);
  color: var(--badge-mango-text);
}

.status-enroute {
  border-color: var(--badge-cool-text);
  background: var(--badge-cool-bg);
  color: var(--badge-cool-text);
}

.status-disrupted {
  border-color: var(--badge-red-text);
  background: var(--badge-red-bg);
  color: var(--badge-red-text);
}

/* A diverted flight operated elsewhere, so violet distinguishes it from a
   red cancellation and avoids making mass diversions read as cancellations. */
.status-diverted {
  border-color: var(--badge-violet-text);
  background: var(--badge-violet-bg);
  color: var(--badge-violet-text);
}

.status-block {
  display: inline-flex;
  align-items: center;
}

/* These tracks exactly fill the status column's 8rem content box: a uniform
   pill, 0.3rem gap and three-digit delta. Borderless labels may overflow the
   first track symmetrically while staying on the pills' centre axis. */
td.col-status-cell .status-block {
  display: inline-grid;
  grid-template-columns: 4.8rem 2.9rem;
  justify-items: center;
  align-items: center;
  gap: 0.3rem;
}

/* Keep every delta aligned in the three-digit track. */
td.col-status-cell .flight-delta {
  margin-left: 0;
  min-width: 2.9rem;
  justify-content: center;
}

.flight-delta {
  display: inline-flex;
  align-items: center;
  margin-left: 0.3rem;
  min-height: 1.35rem;
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Recede past rows with background only; their real data keeps full contrast. */
.past-row td {
  background: var(--surface-muted);
}

/* Pages own day-band padding: the board pads .day-toggle; routes pad the cell. */
.day-separator td {
  background: color-mix(in srgb, var(--surface-muted) 88%, var(--surface));
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.empty-state {
  padding: var(--space-6);
}

/* ── shared: notes, a11y ────────────────────────────────────────────────── */

.tz-note {
  margin: var(--space-3) 0 0;
  padding: 0 var(--space-1);
  color: var(--text-faint);
  font-size: 0.8rem;
}

.tz-note-icon {
  margin-right: 0.25em;
  font-size: 0.9em;
  opacity: 0.75;
}

/* Visually hidden, exposed to assistive technology. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══ route pages (.route-page) ═══════════════════════════════════════════ */

/* ── breadcrumb ─────────────────────────────────────────────────────────── */

.route-page .crumbs {
  margin-top: var(--space-4);
  font-size: var(--fs-meta);
  color: var(--text-faint);
}

.route-page .crumbs a { color: var(--text-muted); }

.route-page .crumbs .sep {
  margin: 0 0.45rem;
  color: var(--border-strong);
}

.route-page .crumbs [aria-current] { color: var(--text-faint); }

/* ── endpoint lockup ────────────────────────────────────────────────────── */

/* The route-wide endpoint view; tables use Iași time because that is all the
   feed provides. */
.route-page .lockup {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel), var(--shadow-edge);
}

.route-page .endpoint .iata {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text);
}

.route-page .endpoint .city {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

.route-page .endpoint.to { text-align: right; }

.route-page .path {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.route-page .path .block-time {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.route-page .path-line {
  position: relative;
  width: 100%;
  height: 9px;
}

.route-page .path-line::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--border-strong) 0 4px,
    transparent 4px 8px
  );
}

.route-page .path-line .dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--accent);
}

.route-page .path-line .dot.start { left: 0; }
.route-page .path-line .dot.end { right: 0; }

.route-page .path-line .plane {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 0.35rem;
  background: var(--surface);
  color: var(--accent);
  line-height: 0;
}

/* ── fact strip ─────────────────────────────────────────────────────────── */

/* Only facts supported by the five-day window. Terminal stays on each table
   heading because it differs by direction: T4 outbound, T3 inbound. */
.route-page .facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.route-page .facts li {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}

.route-page .facts .k {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.route-page .facts .v {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

/* Derived from the live window, not a schedule file. If that window shows no
   repeatable pattern, render nothing rather than guess. */
.route-page .pattern {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 3.5%, var(--surface));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.route-page .pattern strong { color: var(--text); }

/* ── direction sections ─────────────────────────────────────────────────── */

/* Space only adjacent directions so the last one does not push .table-notes;
   .pattern supplies the gap above the first. */
.route-page .dir {
  scroll-margin-top: var(--space-5);
}

.route-page .dir + .dir {
  margin-top: var(--space-6);
}

.route-page .dir-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

/* Typography comes from site.css's h2.section-heading; only margin is local. */
.route-page .dir h2 {
  margin: 0;
}

.route-page .dir h2 .arrow {
  font-style: normal;
  margin: 0 0.15em;
  color: var(--text-faint);
}

.route-page .dir-meta {
  flex: 0 0 auto;
  font-size: var(--fs-meta);
  color: var(--text-faint);
}

.route-page .term {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-muted);
}

/* ── route table deviations ─────────────────────────────────────────────── */

/* A route has fewer carriers than the airport board, so 9rem is sufficient. */
.route-page .col-airline { width: 9rem; }

/* Exactly one auto column absorbs slack under table-layout: fixed; without it,
   fixed widths scale proportionally and the shared Oră/Zbor/Stare anchors
   drift. Aircraft is the longest, most variable field and the route reflows
   before this column becomes too narrow. */
.route-page .col-craft { width: auto; }

/* Baseline-align textual cells, including a two-size .time-pair. Status stays
   middle-aligned because it contains pills rather than text. */
.route-page tbody td {
  vertical-align: baseline;
}

.route-page td.col-status-cell { vertical-align: middle; }

.route-page .day-separator td {
  padding: var(--space-3) var(--space-4);
}

/* Carrier is repetitive on a route page, while aircraft varies per row, so
   mute only the carrier. Scope to tbody to preserve the header's shared tone. */
.route-page tbody .col-airline-cell { color: var(--text-muted); }

/* A hyphenated registration is one token and must not split on mobile. */
.route-page .craft .reg {
  margin-left: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  white-space: nowrap;
}

.route-page .craft.none { color: var(--text-faint); }

.route-page .table-notes {
  margin-bottom: var(--space-6);
}

/* ── route mobile ───────────────────────────────────────────────────────── */

/* At 50rem the aircraft field starts wrapping while the other columns remain
   single-line. Reflow for readability; the auto aircraft column means this is
   no longer an overflow boundary. */
@media (max-width: 50rem) {
  /* Keep the horizontal flight path between its endpoints. */
  .route-page .lockup {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .route-page .endpoint .iata { font-size: 1.4rem; }
  .route-page .endpoint .city { font-size: var(--fs-micro); }
  .route-page .path .block-time { font-size: 0.62rem; }

  .route-page .dir-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  /* Release fixed widths so reflowed rows fill the panel instead of scrolling. */
  .route-page .table-wrap { overflow-x: visible; }

  .route-page table { table-layout: auto; }

  .route-page .col-time,
  .route-page .col-flight,
  .route-page .col-airline,
  .route-page .col-craft,
  .route-page .col-status { width: auto; }

  .route-page thead { display: none; }

  .route-page tbody,
  .route-page tbody tr,
  .route-page tbody td { display: block; }

  /* Force a stable scan line (time, status) above an identity line; natural DOM
     flow otherwise moves status when a completed row includes an aircraft. */
  .route-page tbody tr {
    /* One token controls both flex spacing and middot offset. */
    --cell-gap: 0.35rem;

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--cell-gap);
    row-gap: 0.2rem;
    padding: 0.7rem var(--space-4);
    border-bottom: 1px solid var(--border);
  }

  .route-page tbody tr:last-child { border-bottom: 0; }

  /* Flight cells hand padding to their shared row; single-cell utility rows
     retain their own padding. */
  .route-page tbody tr:not(.day-separator):not(.empty-row) td {
    padding: 0;
    border-bottom: 0;
  }

  /* Reorder visually so renderRow, its prerender mirror and desktop DOM order
     stay unchanged. Flex keeps long identity tokens intact instead of wrapping
     inside grid tracks. These positional selectors assume exactly five cells;
     a changed row schema needs an explicit ordering hook. */
  .route-page tbody td:first-child { order: 1; }
  .route-page td.col-status-cell {
    order: 2;
    /* The content-sized cell has no internal slack for text-align. */
    margin-left: auto;
  }
  .route-page tbody td:nth-child(2) { order: 4; }
  .route-page .col-airline-cell { order: 5; }
  .route-page tbody .craft { order: 6; }

  /* A full-basis pseudo-element forces the chosen line break. Single-cell rows
     have nothing to split and must be excluded. */
  .route-page tbody tr:not(.day-separator):not(.empty-row)::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    height: 0;
  }

  /* Style the middot-separated identity line as one secondary sentence. */
  .route-page tbody td:nth-child(2),
  .route-page .col-airline-cell,
  .route-page tbody .craft { font-size: var(--fs-meta); }

  /* Without columns, a stronger aircraft token would read as stray emphasis. */
  .route-page tbody .craft { color: var(--text-muted); }

  /* Trail separators so a wrapped line never begins with a detached middot. */
  .route-page tbody td:nth-child(2)::after,
  .route-page .col-airline-cell::after {
    content: "·";
    margin-left: var(--cell-gap);
    color: var(--text-faint);
  }

  /* Remove the carrier's separator when the aircraft is hidden. Browsers
     without :has() degrade to a harmless trailing middot. */
  .route-page tbody tr:has(.craft.none) .col-airline-cell::after {
    content: none;
  }

  /* Single-cell rows need neither reordering nor shared row padding. */
  .route-page .day-separator,
  .route-page .empty-row { display: block; padding: 0; }

  .route-page .day-separator td,
  .route-page .empty-row td { display: block; }

  /* Replace the desktop status grid with an inline pair and explicit gap. */
  .route-page td.col-status-cell .status-block {
    display: inline-flex;
    gap: 0.3rem;
  }

  /* Cells no longer fill the flex row, so tint the row itself. */
  .route-page tbody tr.past-row { background: var(--surface-muted); }

  /* Match the board's size step-down, but keep both route times inline because
     the scan line contains only time and status. */
  .route-page .time { font-size: 0.98rem; }

  .route-page .time-pair .time.superseded { font-size: 0.8rem; }

  /* Hide the mobile aircraft dash; the :has() rule also removes its separator. */
  .route-page .craft.none { display: none; }
}