/* /flights/{number}/ (flights/number.aspx). Blue theme: #169fe6, hover #1078b3; dark mode accent #4da6ff. */
.fn-page { max-width: 900px; margin: 0 auto; padding: 0 12px 24px; }
.fn-crumb { font-size: 13px; margin: 10px 0 4px; }
.fn-page h1 { font-size: 26px; margin: 4px 0 14px; }
.fn-live { margin: 0 0 16px; }
/* #main a (site.css) is an id rule that turns every link blue and underlined, so the button needs an id rule too or its white text came out blue on blue. */
.fn-btn, .fn-btn:visited, #main a.fn-btn, #main a.fn-btn:visited { display: inline-block; background: #1078b3; color: #fff; padding: 9px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.fn-btn:hover, .fn-btn:focus, #main a.fn-btn:hover, #main a.fn-btn:focus { background: #0d6aa0; color: #fff; text-decoration: none; }
.fn-live-text { margin: 8px 0 0; font-weight: 600; }
.fn-intro { font-size: 16px; line-height: 1.55; }
.fn-h { font-size: 20px; margin: 22px 0 10px; }
.fn-leg { border: 1px solid #d9e2ea; border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; }
.fn-leg h3 { font-size: 17px; margin: 0 0 8px; }
.fn-leg dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.fn-leg dt { font-weight: 600; }
.fn-leg dd { margin: 0; }
.fn-ap { margin: 10px 0 0; font-size: 14px; }
.fn-ap a { margin-right: 12px; }
.fn-days { width: 100%; border-collapse: collapse; font-size: 14px; }
.fn-days th, .fn-days td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e3e9ee; }
.fn-days { margin-bottom: 8px; }
#main .fn-page h2.fn-h { margin: 30px 0 10px; }
.fn-h + .fn-more { margin-top: 0; }
.fn-more { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.fn-more li { margin: 0; }
.fn-more a, #main .fn-more a { display: inline-block; padding: 7px 14px; border: 1px solid #cfe3f2; border-radius: 18px; background: #f3f9fd; font-size: 14px; text-decoration: none; }
.fn-more a:hover, #main .fn-more a:hover { background: #e3f1fb; border-color: #9fcbea; text-decoration: none; }
.fn-note { margin: 22px 0 0; padding: 12px 0 0; border-top: 1px solid #e3e9ee; color: #6b7680; font-size: 13px; line-height: 1.5; }
.fn-note, .fn-old { color: #6b7680; font-size: 13px; }
body.dark-mode .fn-more a, body.dark-mode #main .fn-more a { background: #1f2a33; border-color: #3a4652; }
body.dark-mode .fn-more a:hover, body.dark-mode #main .fn-more a:hover { background: #26343f; }
body.dark-mode .fn-note { border-color: #3a4652; }
.fn-fail { background: #fff4e5; border: 1px solid #f0c48a; padding: 12px; border-radius: 6px; }
@media (max-width: 767px) { .fn-page h1 { font-size: 21px; } .fn-leg dl { grid-template-columns: 1fr; } .fn-leg dt { margin-top: 4px; } }
body.dark-mode .fn-leg { border-color: #3a4652; }
body.dark-mode .fn-days th, body.dark-mode .fn-days td { border-color: #3a4652; }
body.dark-mode .fn-note, body.dark-mode .fn-old { color: #b8c2cc; }
body.dark-mode .fn-fail { background: #3a2c17; border-color: #7a5a2a; }
/* dark-mode.css colours every #main link #4da6ff, which put blue text on the blue button (owner, 2026-10-20). */
body.dark-mode #main a.fn-btn, body.dark-mode #main a.fn-btn:visited { color: #fff; }
body.dark-mode #main a.fn-btn:hover, body.dark-mode #main a.fn-btn:focus { color: #fff; background: #0d6aa0; }
/* Phones (600 px and under): every table.fn-cards (the flight number page's last 14 days, the landing pages' tables
   and their live "In the air now" list) draws each row as a card, so no table needs sideways scrolling (owner,
   2026-10-25). The cells' classes place them: fc-main (the flight, airport or date) starts the first line, fc-route
   (the other airport, the route) follows it, fc-aside sits at its right end; the plain cells share the second line,
   each after its data-label; then fc-full cells take a line of their own, and fc-line starts a last line that an
   fc-end cell ends (the route table's aircraft and its Recent flights button). The header row becomes the sort buttons
   (LandingLive.sortable and the live list); headers without a button are hidden from sight but still read.
   landing-live.js gives these tables ARIA table roles, as display: flex drops the table semantics in some browsers;
   the number page writes them in its markup. Links and buttons are at least 44 px tall. #main: the rules must win over
   the pages' own table rules (landing.aspx, site.css .table-responsive > table, dark-mode.css cell colours).
   A copy scoped to #acLive is in aircraft/css/aircraft.css (keep the two in step). */
@media (max-width: 600px) {
  #main .table-responsive:has(> table.fn-cards) { overflow-x: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  #main .table-responsive > table.fn-cards, #main table.fn-cards, #main table.fn-cards > thead, #main table.fn-cards > tbody { display: block !important; width: auto; max-width: 100% !important; }
  #main table.fn-cards { border: 0; margin-bottom: 8px; }
  #main table.fn-cards > thead > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
  #main table.fn-cards > thead > tr:has(.ll-sort)::before { content: "Sort by"; content: "Sort by" / ""; font-size: 13px; color: #5b6770; margin-right: 2px; }
  #main table.fn-cards > thead > tr > th { display: block; position: static; padding: 0; border: 0; background: none; box-shadow: none; white-space: nowrap; }
  #main table.fn-cards > thead > tr > th:not(:has(.ll-sort)), #main table.fn-cards:not(.lp-sortable):not(.ll-table) > thead > tr > th {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  #main table.fn-cards > thead .ll-sort { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; box-sizing: border-box;
    border: 1px solid #c9d4dc; border-radius: 22px; background: #fff; color: #1078b3; font-size: 13px; font-weight: 600; text-decoration: none; }
  #main table.fn-cards > thead th[aria-sort] .ll-sort { background: #e3f1fb; border-color: #1078b3; color: #0d5f8c; }
  #main table.fn-cards > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 0; padding: 4px 12px;
    margin: 0 0 8px; border: 1px solid #d9e2ea; border-radius: 8px; background: #fff; }
  #main table.fn-cards > tbody > tr[hidden] { display: none; }
  #main table.fn-cards > tbody > tr::before, #main table.fn-cards > tbody > tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  #main table.fn-cards > tbody > tr::after { order: 5; }
  #main table.fn-cards > tbody > tr > td { display: block; order: 4; min-width: 0; max-width: 100%; padding: 2px 0; border: 0; white-space: normal;
    line-height: 1.4; text-align: left; position: static; box-shadow: none; overflow-wrap: anywhere; }
  #main table.fn-cards > tbody > tr > td:empty { display: none; }
  #main table.fn-cards > tbody > tr > td.fc-main { order: 0; font-weight: 700; font-size: 15px; }
  #main table.fn-cards > tbody > tr > td.fc-route { order: 1; }
  #main table.fn-cards > tbody > tr > td.fc-route + td.fc-route { margin-left: -6px; }
  /* Next departures and arrivals (the route cell with a "to"/"from" label): a long place name is cut short so the
     time keeps its place at the end of the first line; the code stays in view. */
  #main table.fn-cards > tbody > tr > td.fc-route[data-label] { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #main table.fn-cards > tbody > tr > td.fc-aside { order: 2; margin-left: auto; text-align: right; }
  #main table.fn-cards > tbody > tr > td.fc-full, #main table.fn-cards > tbody > tr > td.fc-line, #main table.fn-cards > tbody > tr > td.fc-end { order: 6; }
  #main table.fn-cards > tbody > tr > td.fc-full { flex-basis: 100%; }
  #main table.fn-cards > tbody > tr > td.fc-end { margin-left: auto; }
  #main table.fn-cards > tbody > tr > td[data-label]::before { content: attr(data-label) " "; content: attr(data-label) " " / ""; color: #5b6770; font-size: 12px; font-weight: 600; }
  #main table.fn-cards > tbody > tr > td.fc-to::before { content: "\2192  "; content: "\2192  " / "to"; color: #5b6770; }
  #main table.fn-cards > tbody > tr > td a { display: inline-flex; align-items: center; min-height: 44px; }
  #main table.fn-cards > tbody > tr > td summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: #1078b3; font-weight: 600; }
  #main table.fn-cards > tbody > tr > td summary::before { content: "\25B8"; margin-right: 5px; }
  #main table.fn-cards > tbody > tr > td details[open] > summary::before { content: "\25BE"; }
  #main table.fn-cards > tbody > tr > td .ll-ph { display: inline; }
  body.dark-mode #main table.fn-cards > thead > tr:has(.ll-sort)::before, body.dark-mode #main table.fn-cards > tbody > tr > td[data-label]::before,
  body.dark-mode #main table.fn-cards > tbody > tr > td.fc-to::before { color: #9fb0bc; }
  body.dark-mode #main table.fn-cards > thead > tr > th { background: none !important; border: 0 !important; }
  body.dark-mode #main table.fn-cards > tbody > tr > td summary { color: #4da6ff; }
  body.dark-mode #main table.fn-cards > thead .ll-sort { background: #1f2a33; border-color: #4a5763; color: #4da6ff; }
  body.dark-mode #main table.fn-cards > thead th[aria-sort] .ll-sort { background: #1078b3; border-color: #1078b3; color: #fff; }
  body.dark-mode #main table.fn-cards > tbody > tr { background: #242424; border-color: #3a4652; }
  body.dark-mode #main table.fn-cards > tbody > tr > td { background: transparent !important; border: 0 !important; box-shadow: none; }
}