/* Aircraft type pages (aircraft/page.aspx). Light first, dark under body.dark-mode (css/dark-mode.css convention).
   Phones (767 px and under): key numbers two per row, the specs table stacked, nothing wider than the screen. */
.ac-page { max-width: 1100px; margin: 0 auto; overflow-wrap: break-word; }
.ac-crumb { color: #666; font-size: 13px; margin: 10px 0 4px; }
.ac-crumb a { color: var(--blue-text, #1078b3); text-decoration: none; }
.ac-crumb a:hover, .ac-crumb a:focus { text-decoration: underline; }
.ac-page h1 { font-size: 28px; line-height: 1.2; margin: 4px 0 10px; }
.ac-page h2 { font-size: 20px; margin: 28px 0 10px; }
.ac-about { font-size: 16px; line-height: 1.6; max-width: 820px; margin: 0 0 18px; }

/* Key numbers: a row of tiles. */
.ac-key { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; padding: 0; }
.ac-key > div { border: 1px solid #dfe5ea; border-radius: 10px; padding: 10px 12px; background: #fff; min-width: 0; }
.ac-key dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #5b6770; margin: 0 0 4px; }
.ac-key dd { margin: 0; font-size: 15px; line-height: 1.4; color: #222; }
/* The engines line is the longest: two columns wide where there is room. */
.ac-key > .ac-key-wide { grid-column: span 2; }
.ac-key dd small { display: block; color: #666; font-size: 12px; }

/* Photo, then the drawing below it, each the content width up to 700 px (side by side the drawing's dimension text was
   too small to read); the drawing always on a light panel (its lines are #1078b3 on transparent). */
.ac-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 700px; margin: 0 0 8px; }
.ac-media figure { margin: 0; min-width: 0; }
.ac-media img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ac-photo img { aspect-ratio: 3 / 2; object-fit: cover; background: #eef2f5; }
.ac-drawing-panel { background: #fff; border: 1px solid #dfe5ea; border-radius: 8px; padding: 6px; }
.ac-drawing-panel img { border-radius: 0; }
/* The side view (aircraft/tools/draw-side.js) sits right below the top view in the same figure, the same width. */
.ac-drawing-panel + .ac-drawing-panel { margin-top: 8px; }
.ac-media figcaption { color: #666; font-size: 12px; margin: 6px 0 0; }
.ac-media figcaption a { color: inherit; }

/* Full specs. */
.ac-specs { border-collapse: collapse; width: 100%; max-width: 720px; font-size: 15px; }
.ac-specs th, .ac-specs td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e6eaee; vertical-align: top; }
.ac-specs th { width: 38%; font-weight: 600; color: #444; }

/* Who flies it now. */
.ac-shared-note { background: #f3f8fc; border-left: 3px solid #169fe6; padding: 8px 12px; margin: 0 0 14px; font-size: 14px; }
.ac-code { font-size: 16px; margin: 18px 0 8px; }
.ac-ops { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ac-op { border: 1px solid #dfe5ea; border-radius: 10px; padding: 12px 14px; background: #fff; min-width: 0; }
.ac-op h3 { display: inline; font-size: 16px; line-height: 1.35; margin: 0; }
.ac-op h3 a { color: var(--blue-text, #1078b3); text-decoration: none; }
.ac-op h3 a:hover, .ac-op h3 a:focus { text-decoration: underline; }
.ac-op-n { color: #666; font-size: 13px; margin-left: 6px; white-space: nowrap; }
.ac-seats { margin: 6px 0 0; font-size: 14px; }
.ac-seats-typ { color: #666; }
.ac-routes { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.ac-routes li { padding: 2px 0; }
.ac-more { color: #666; }
.ac-other, .ac-note, .ac-none, .ac-unavailable { font-size: 14px; color: #555; margin: 12px 0 0; }
.ac-unavailable { font-style: italic; }

/* In the air now (filled by the live list script). */
.ac-code-label { font-weight: 600; font-size: 14px; margin: 10px 0 6px; }
.ac-live { min-height: 2em; }
.ac-live-wait { color: #666; font-size: 14px; margin: 0; }
/* "Show them on the live map" under each list: the tracker's type search (/flights/?type=CODE). White on #1078b3 in both themes. */
.ac-live-map { margin: 4px 0 14px; }
#acLive .ac-map-btn { display: inline-block; padding: 7px 14px; border-radius: 6px; background: #1078b3; color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none; }
#acLive .ac-map-btn:hover, #acLive .ac-map-btn:focus { background: #0d6aa0; color: #fff !important; text-decoration: none; }
/* The live table (flights/js/landing-live.js, table.fn-days.ll-table without its Aircraft column): the base .fn-days
   rules of flights/css/number.css and the .lp-now .ll-* rules of flights/landing.aspx, scoped to #acLive. */
#acLive .fn-days { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
#acLive .fn-days th, #acLive .fn-days td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e3e9ee; white-space: nowrap; }
#acLive .ll-fl a { text-decoration: none; }
#acLive .ll-map { font-size: 13px; }
#acLive .ll-all { margin-top: 10px; padding: 6px 14px; border: 1px solid #169fe6; border-radius: 4px; background: #fff; color: #1078b3; cursor: pointer; }
#acLive .ll-row[hidden] { display: none; }
#acLive .ll-meta { color: #555; font-size: 13px; }
#acLive .ll-note { color: #555; font-size: 14px; }
#acLive .ll-sort { border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; white-space: nowrap; }
#acLive .ll-sort:hover, #acLive .ll-sort:focus-visible { color: #1078b3; text-decoration: underline; }
#acLive .ll-arrow { font-size: 10px; }

/* Shared code page: one card per variant. */
.ac-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin: 6px 0 10px; }
.ac-card { border: 1px solid #dfe5ea; border-radius: 12px; padding: 12px 14px; background: #fafcfd; min-width: 0; }
.ac-card h2 { margin: 0 0 10px; font-size: 18px; }
.ac-card .ac-key { grid-template-columns: 1fr 1fr; margin-bottom: 8px; }
.ac-card .ac-key > .ac-key-wide { grid-column: span 2; }
.ac-card-more { margin: 0; font-size: 14px; }

.ac-history { font-size: 16px; line-height: 1.6; max-width: 820px; }
.ac-last, .ac-sources { padding-left: 20px; line-height: 1.6; }
.ac-sources { font-size: 14px; }
.ac-sources a { word-break: break-word; }

/* Model page: the variants side by side (phones: one card per variant, labels from data-label). */
.ac-variants { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0 0 8px; }
.ac-variants th, .ac-variants td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e6eaee; vertical-align: top; }
.ac-variants thead th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #5b6770; border-bottom-width: 2px; }
.ac-variants tbody th { font-weight: 600; white-space: nowrap; }
.ac-variants a { color: var(--blue-text, #1078b3); text-decoration: none; }
.ac-variants a:hover, .ac-variants a:focus { text-decoration: underline; }

/* Maker page: models in service and retired. */
.ac-maker-list { list-style: none; padding: 0; margin: 0 0 8px; }
.ac-maker-list li { padding: 8px 0; border-bottom: 1px solid #e6eaee; line-height: 1.5; }
.ac-maker-model { font-weight: 600; font-size: 16px; }
.ac-maker-vars { display: block; font-size: 14px; color: #555; }
.ac-maker-list a, .ac-all a, .ac-hub a, .ac-seen-list a { color: var(--blue-text, #1078b3); text-decoration: none; }
.ac-maker-list a:hover, .ac-maker-list a:focus, .ac-all a:hover, .ac-all a:focus, .ac-hub a:hover, .ac-hub a:focus,
.ac-seen-list a:hover, .ac-seen-list a:focus { text-decoration: underline; }
.ac-when { color: #666; font-size: 13px; }
.ac-all { margin: 22px 0 0; font-size: 15px; }

/* Hub: the sticky search bar (the airlines/default.aspx pattern; the page carries the two overflow overrides). The
   opaque background is load-bearing: the lists scroll behind it. */
.ac-search { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 10px 0 9px; background: #fff; border-bottom: 1px solid #dfe7ee; }
.ac-search-field { position: relative; flex: 1 1 260px; max-width: 460px; }
.ac-search-field svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #169fe6; pointer-events: none; }
.ac-search-field input[type="text"] { width: 100%; box-sizing: border-box; margin: 0; padding: 10px 40px; font-size: 16px;
  border: 2px solid #169fe6; border-radius: 8px; outline: none; background: #fff; color: #222; }
.ac-search-field input[type="text"]:focus { border-color: #1078b3; box-shadow: 0 0 0 3px rgba(22, 159, 230, .18); }
.ac-search-clear { position: absolute; right: 6px; top: 50%; margin-top: -15px; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: #e3eef6; color: #4a5b68; font-size: 18px; line-height: 30px; cursor: pointer; display: none; }
.ac-search-field.has-text .ac-search-clear { display: block; }
.ac-search-count { font-size: 12px; color: #666; }
/* Hub: the kind filter chips (inside the sticky bar, shown by aircraft-search.js) and the cards' coloured labels.
   Kind colours: jet #1078b3, turboprop #b45309, helicopter #0b7a75, military #4b5563, private #6d28d9, retired #8a8a8a (dark values below). */
.ac-chips { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.ac-chips[hidden] { display: none; }
#main .ac-chip { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 36px; margin: 0; padding: 6px 12px;
  border: 1px solid #dfe5ea; border-radius: 18px; background: #eef4f9; color: #1d2733; font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer; }
#main .ac-chip svg { width: 18px; height: 18px; flex: none; }
#main .ac-chip .ac-chip-n { font-size: 12px; color: #5d6b78; }
#main .ac-chip:hover { border-color: #1078b3; }
#main .ac-chip:focus-visible { outline: 2px solid #1078b3; outline-offset: 2px; }
#main .ac-chip[aria-pressed="true"] { background: #1078b3; border-color: #1078b3; color: #fff; }
#main .ac-chip[aria-pressed="true"] svg { color: inherit; }
#main .ac-chip[aria-pressed="true"] .ac-chip-n { color: inherit; opacity: .85; }
@media (max-width: 480px) {
  .ac-chips { gap: 6px; }
  #main .ac-chip { padding: 6px 9px; gap: 5px; font-size: 13px; }
  #main .ac-chip svg { width: 16px; height: 16px; }
}
.ac-chip-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: #dfe5ea; }
.ac-k-jet { color: #1078b3; } .ac-k-prop { color: #b45309; } .ac-k-heli { color: #0b7a75; } .ac-k-piston { color: #be123c; } .ac-k-mil { color: #4b5563; } .ac-k-biz { color: #6d28d9; } .ac-k-ret { color: #8a8a8a; }
.ac-hub-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ac-kinds { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.ac-hub-retired > .ac-hub-maker > .ac-hub-models > li:not(.ac-hub-model) .ac-kinds { margin-left: 8px; vertical-align: middle; }
.ac-kind { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; border-radius: 4px; padding: 1px 6px; white-space: nowrap; border: 1px solid currentColor; }
.ac-hub [hidden] { display: none !important; }
/* #main h2 { margin: 0 } (site.css) outranks a class rule on the headings, so the sections carry the space. */
.ac-hub-maker { margin-top: 14px; }
.ac-hub-maker > h2, .ac-hub-maker > h3, .ac-hub-retired > h2, .ac-seen > h2 { padding-bottom: 6px; }
.ac-hub-retired, .ac-seen { margin-top: 30px; }
.ac-hub-retired .ac-none { margin-top: 4px; }
.ac-hub-maker h3 { font-size: 17px; margin: 14px 0 6px; }
.ac-hub-models { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ac-hub-model { border: 1px solid #dfe5ea; border-radius: 10px; padding: 10px 12px; background: #fff; min-width: 0; }
.ac-hub-model-link { font-weight: 600; font-size: 16px; }
.ac-hub-vars { list-style: none; padding: 0; margin: 6px 0 0; font-size: 14px; line-height: 1.6; }
.ac-codes { color: #666; font-size: 12px; }
.ac-hub-retired > .ac-hub-maker > .ac-hub-models > li:not(.ac-hub-model) { border: 1px solid #dfe5ea; border-radius: 10px; padding: 10px 12px; background: #fff; font-size: 15px; }
.ac-search-empty { font-style: italic; color: #555; margin: 14px 0; }
/* Jump links to each maker, shown with two or more makers. */
.ac-jump { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 14px; }
.ac-jump a { color: var(--blue-text, #1078b3); }
.ac-seen-list { margin: 0; padding-left: 24px; columns: 2; column-gap: 32px; font-size: 15px; line-height: 1.7; }

@media (max-width: 1000px) {
  .ac-key { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-key > .ac-key-wide { grid-column: span 1; }
}
@media (max-width: 767px) {
  .ac-page h1 { font-size: 23px; }
  .ac-key, .ac-card .ac-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ac-card .ac-key > .ac-key-wide { grid-column: span 2; }
  .ac-key dd { font-size: 14px; }
  .ac-ops, .ac-cards { grid-template-columns: minmax(0, 1fr); }
  .ac-specs, .ac-specs tbody, .ac-specs tr, .ac-specs th, .ac-specs td { display: block; width: auto; }
  .ac-specs tr { border-bottom: 1px solid #e6eaee; padding: 6px 0; }
  .ac-specs th, .ac-specs td { border: 0; padding: 2px 0; }
  .ac-specs th { font-size: 13px; color: #5b6770; }
  .ac-variants, .ac-variants tbody, .ac-variants tr, .ac-variants th, .ac-variants td { display: block; width: auto; }
  .ac-variants thead { display: none; }
  .ac-variants tr { border: 1px solid #dfe5ea; border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
  .ac-variants th, .ac-variants td { border: 0; padding: 3px 0; }
  .ac-variants tbody th { font-size: 16px; padding-bottom: 4px; }
  .ac-variants td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: #5b6770; }
  .ac-hub-models { grid-template-columns: minmax(0, 1fr); }
  .ac-seen-list { columns: 1; }
}
/* Small tablets (601 to 767 px): the live table scrolls sideways in its .table-responsive wrapper; the Flight column
   stays put (landing.aspx). Phones get cards (below). */
@media (min-width: 601px) and (max-width: 767px) {
  #acLive .ll-table .ll-ph { display: none; }
  #acLive .ll-table th, #acLive .ll-table td { padding: 6px 6px; }
  #acLive .ll-table th:first-child, #acLive .ll-table td:first-child { position: sticky; left: -5px; z-index: 1; background: #fff; box-shadow: inset -1px 0 0 #c9d4dc; }
}

body.dark-mode .ac-crumb, body.dark-mode .ac-op-n, body.dark-mode .ac-seats-typ, body.dark-mode .ac-more,
body.dark-mode .ac-media figcaption, body.dark-mode .ac-live-wait, body.dark-mode .ac-key dd small { color: #aaa; }
body.dark-mode .ac-crumb a, body.dark-mode .ac-op h3 a { color: var(--blue-text, #4da6ff); }
body.dark-mode .ac-key > div, body.dark-mode .ac-op { background: #1e1e1e; border-color: #3a3a3a; }
body.dark-mode .ac-key dt { color: #9fb0bc; }
body.dark-mode .ac-key dd { color: #e6e6e6; }
body.dark-mode .ac-card { background: #1a1a1a; border-color: #3a3a3a; }
/* The drawing keeps its light panel in dark mode too (blue lines on a dark ground are hard to read). */
body.dark-mode .ac-drawing-panel { background: #f4f6f8; border-color: #3a3a3a; }
body.dark-mode .ac-photo img { background: #2b2b2b; }
body.dark-mode .ac-shared-note { background: #16232d; border-left-color: #4da6ff; }
body.dark-mode .ac-other, body.dark-mode .ac-note, body.dark-mode .ac-none, body.dark-mode .ac-unavailable { color: #bbb; }
/* The specs and variants tables take the site's standard dark table look (css/dark-mode.css, !important cell colours). */
@media (max-width: 767px) {
  body.dark-mode .ac-specs tr, body.dark-mode .ac-variants tr { border-color: #3a3a3a; }
  /* The variant name heads its card as in light mode, not as the site's grey dark th bar, and the cells drop the row
     stripes. dark-mode.css styles these with !important up to body.dark-mode #main table tr:first-child th (1,2,4),
     hence the id here. */
  body.dark-mode #main .ac-page .ac-variants tbody tr th { background: transparent !important; color: #e6e6e6 !important; border: 0 !important; }
  body.dark-mode #main .ac-page .ac-variants tbody tr td { background: transparent !important; }
}
body.dark-mode .ac-variants thead th, body.dark-mode .ac-variants td::before { color: #9fb0bc; }
body.dark-mode .ac-variants a, body.dark-mode .ac-maker-list a, body.dark-mode .ac-all a, body.dark-mode .ac-hub a,
body.dark-mode .ac-seen-list a { color: var(--blue-text, #4da6ff); }
body.dark-mode .ac-maker-list li { border-color: #3a3a3a; }
body.dark-mode .ac-maker-vars, body.dark-mode .ac-when, body.dark-mode .ac-codes, body.dark-mode .ac-search-count { color: #aaa; }
body.dark-mode .ac-search { background: #1e1e1e; border-bottom-color: #3a3a3a; }
body.dark-mode .ac-search-field input[type="text"] { background: #2a2a2a; color: #eee; border-color: #555; }
body.dark-mode .ac-search-field svg { color: #4da6ff; }
body.dark-mode .ac-search-clear { background: #3a3a3a; color: #ddd; }
body.dark-mode .ac-hub-model, body.dark-mode .ac-hub-retired > .ac-hub-maker > .ac-hub-models > li:not(.ac-hub-model) { background: #1e1e1e; border-color: #3a3a3a; }
body.dark-mode .ac-chip-sep { background: #3a3a3a; }
body.dark-mode #main .ac-chip { background: #262c33; border-color: #3a3a3a; color: #e6e6e6; }
body.dark-mode #main .ac-chip .ac-chip-n { color: #a8a8a8; }
body.dark-mode #main .ac-chip[aria-pressed="true"] .ac-chip-n { color: inherit; opacity: .85; }
body.dark-mode #main .ac-chip:hover { border-color: #4da6ff; }
body.dark-mode #main .ac-chip:focus-visible { outline-color: #4da6ff; }
body.dark-mode #main .ac-chip[aria-pressed="true"] { background: #4da6ff; border-color: #4da6ff; color: #0d1520; }
body.dark-mode .ac-k-jet { color: #4da6ff; } body.dark-mode .ac-k-prop { color: #f5a524; } body.dark-mode .ac-k-heli { color: #3fd0c4; } body.dark-mode .ac-k-piston { color: #ff8fa3; }
body.dark-mode .ac-k-mil { color: #b6bec9; } body.dark-mode .ac-k-biz { color: #b79cff; } body.dark-mode .ac-k-ret { color: #9a9a9a; }
body.dark-mode #main .ac-chip[aria-pressed="true"] svg { color: inherit; }
body.dark-mode .ac-search-empty { color: #bbb; }
body.dark-mode .ac-jump a { color: var(--blue-text, #4da6ff); }
/* The live table in dark mode (cell colours come from dark-mode.css). */
body.dark-mode #acLive .fn-days th, body.dark-mode #acLive .fn-days td { border-color: #3a4652; }
body.dark-mode #acLive .ll-meta, body.dark-mode #acLive .ll-note { color: #b8c2cc; }
body.dark-mode #acLive .ll-sort:hover, body.dark-mode #acLive .ll-sort:focus-visible { color: #4da6ff; }
body.dark-mode #acLive .ll-all { background: transparent; color: #4da6ff; border-color: #4da6ff; }
@media (min-width: 601px) and (max-width: 767px) {
  body.dark-mode #acLive .ll-table th:first-child, body.dark-mode #acLive .ll-table td:first-child { box-shadow: inset -1px 0 0 #5a6470; }
}
/* Member photos (aircraft/js/aircraft-photos.js; spec docs/superpowers/specs/2026-10-27-member-aircraft-photos-design.md):
   the thumbnail strip, the viewer it opens, and the "Add your photos" panel. Copied from the lounge page's .lf-photo-* and .lf-add-*. */
.ap-section { max-width: 700px; }
.ap-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ap-photo-thumb { box-sizing: border-box; width: 120px; height: 90px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #eef2f5; cursor: pointer; line-height: 0; overflow: hidden; }
.ap-photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-photo-thumb:hover, .ap-photo-thumb:focus-visible { border-color: #169fe6; outline: none; }
.ap-invite { margin: 0 0 10px; }
.ap-add { margin: 6px 0 10px; }
.ap-add-btn { display: inline-block; box-sizing: border-box; min-height: 40px; padding: 8px 14px; border: 1px solid #169fe6; border-radius: 6px; background: #fff; color: #1078b3; font-weight: bold; font-size: 14px; cursor: pointer; text-decoration: none; }
.ap-add-btn[disabled] { opacity: 0.5; cursor: default; }
.ap-add-note, .ap-add-guide, .ap-add-msg { font-size: 14px; color: #444; margin: 6px 0; }
.ap-add-panel { margin-top: 8px; padding: 12px; border: 1px solid #d5dde5; border-radius: 8px; max-width: 700px; }
.ap-add-list { margin: 4px 0; }
.ap-add-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.ap-add-item img { width: 96px; height: 72px; object-fit: cover; border-radius: 4px; background: #eef2f5; }
.ap-add-consent { display: block; margin: 10px 0; font-size: 14px; color: #333; }
.ap-add-err { flex-basis: 100%; margin: 0; font-size: 13px; color: #c62828; }
/* The viewer: a dark layer over the page in both themes. */
.ap-viewer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9500; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 12px 12px; background: rgba(0, 0, 0, 0.88); box-sizing: border-box; }
.ap-viewer-img { display: block; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; border-radius: 4px; }
.ap-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: 10px; color: #eee; font-size: 14px; text-align: center; }
.ap-viewer-credit { margin: 0; color: #eee; }
.ap-viewer-close, .ap-viewer-prev, .ap-viewer-next { position: absolute; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; border-radius: 6px; font-size: 15px; }
.ap-viewer-close { top: 8px; right: 8px; min-height: 40px; padding: 6px 14px; }
.ap-viewer-prev, .ap-viewer-next { top: 50%; width: 44px; height: 56px; margin-top: -28px; font-size: 32px; line-height: 1; }
.ap-viewer-prev { left: 4px; }
.ap-viewer-next { right: 4px; }
.ap-viewer-prev[hidden], .ap-viewer-next[hidden], .ap-report[hidden] { display: none; }
.ap-report { border: 0; background: none; color: #9fd0f5; text-decoration: underline; cursor: pointer; font-size: 14px; padding: 4px; }
.ap-report-msg { color: #ddd; }
@media (max-width: 767px) {
  .ap-photo-thumb { width: calc(33.333% - 6px); height: auto; aspect-ratio: 4 / 3; }
  .ap-add-btn { min-height: 44px; }
}
body.dark-mode .ap-photo-thumb { background: #2a2a2a; }
body.dark-mode .ap-photo-thumb:hover, body.dark-mode .ap-photo-thumb:focus-visible { border-color: #4da6ff; }
body.dark-mode .ap-add-btn { background: #1e1e1e; color: #4da6ff; border-color: #4da6ff; }
body.dark-mode .ap-add-note, body.dark-mode .ap-add-guide, body.dark-mode .ap-add-msg, body.dark-mode .ap-add-consent { color: #ccc; }
body.dark-mode .ap-add-panel { border-color: #444; }
body.dark-mode .ap-add-err { color: #ff8a80; }
body.dark-mode .ap-add-item img { background: #2a2a2a; }
/* Phones (600 px and under): the live table as cards, a copy of the .fn-cards rules of flights/css/number.css scoped to
   #acLive (this page does not load number.css; keep the two in step). */
@media (max-width: 600px) {
  #acLive .table-responsive:has(> table.fn-cards) { overflow-x: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  #acLive .table-responsive > table.fn-cards, #acLive table.fn-cards, #acLive table.fn-cards > thead, #acLive table.fn-cards > tbody { display: block !important; width: auto; max-width: 100% !important; }
  #acLive table.fn-cards { border: 0; margin-bottom: 8px; }
  #acLive table.fn-cards > thead > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
  #acLive table.fn-cards > thead > tr:has(.ll-sort)::before { content: "Sort by"; content: "Sort by" / ""; font-size: 13px; color: #5b6770; margin-right: 2px; }
  #acLive table.fn-cards > thead > tr > th { display: block; position: static; padding: 0; border: 0; background: none; box-shadow: none; white-space: nowrap; }
  #acLive table.fn-cards > thead > tr > th:not(:has(.ll-sort)), #acLive 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%); }
  #acLive 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; }
  #acLive table.fn-cards > thead th[aria-sort] .ll-sort { background: #e3f1fb; border-color: #1078b3; color: #0d5f8c; }
  #acLive 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; }
  #acLive table.fn-cards > tbody > tr[hidden] { display: none; }
  #acLive table.fn-cards > tbody > tr::before, #acLive table.fn-cards > tbody > tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  #acLive table.fn-cards > tbody > tr::after { order: 5; }
  #acLive 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; }
  #acLive table.fn-cards > tbody > tr > td:empty { display: none; }
  #acLive table.fn-cards > tbody > tr > td.fc-main { order: 0; font-weight: 700; font-size: 15px; }
  #acLive table.fn-cards > tbody > tr > td.fc-route { order: 1; }
  #acLive 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. */
  #acLive table.fn-cards > tbody > tr > td.fc-route[data-label] { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #acLive table.fn-cards > tbody > tr > td.fc-aside { order: 2; margin-left: auto; text-align: right; }
  #acLive table.fn-cards > tbody > tr > td.fc-full, #acLive table.fn-cards > tbody > tr > td.fc-line, #acLive table.fn-cards > tbody > tr > td.fc-end { order: 6; }
  #acLive table.fn-cards > tbody > tr > td.fc-full { flex-basis: 100%; }
  #acLive table.fn-cards > tbody > tr > td.fc-end { margin-left: auto; }
  #acLive 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; }
  #acLive table.fn-cards > tbody > tr > td.fc-to::before { content: "\2192  "; content: "\2192  " / "to"; color: #5b6770; }
  #acLive table.fn-cards > tbody > tr > td a { display: inline-flex; align-items: center; min-height: 44px; }
  #acLive table.fn-cards > tbody > tr > td summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: #1078b3; font-weight: 600; }
  #acLive table.fn-cards > tbody > tr > td summary::before { content: "\25B8"; margin-right: 5px; }
  #acLive table.fn-cards > tbody > tr > td details[open] > summary::before { content: "\25BE"; }
  #acLive table.fn-cards > tbody > tr > td .ll-ph { display: inline; }
  body.dark-mode #acLive table.fn-cards > thead > tr:has(.ll-sort)::before, body.dark-mode #acLive table.fn-cards > tbody > tr > td[data-label]::before,
  body.dark-mode #acLive table.fn-cards > tbody > tr > td.fc-to::before { color: #9fb0bc; }
  body.dark-mode #acLive table.fn-cards > thead > tr > th { background: none !important; border: 0 !important; }
  body.dark-mode #acLive table.fn-cards > tbody > tr > td summary { color: #4da6ff; }
  body.dark-mode #acLive table.fn-cards > thead .ll-sort { background: #1f2a33; border-color: #4a5763; color: #4da6ff; }
  body.dark-mode #acLive table.fn-cards > thead th[aria-sort] .ll-sort { background: #1078b3; border-color: #1078b3; color: #fff; }
  body.dark-mode #acLive table.fn-cards > tbody > tr { background: #242424; border-color: #3a4652; }
  body.dark-mode #acLive table.fn-cards > tbody > tr > td { background: transparent !important; border: 0 !important; box-shadow: none; }
}