/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FIDS v8 — Shared Styles
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── CSS Variables ──────────────────────────────────────────────────────── */
:root {
  /* Core palette */
  --bg-primary: #0c0c0e;
  --bg-secondary: #141416;
  --bg-card: #1a1a1f;
  --bg-input: #27272a;
  --bg-hover: #2a2a2d;

  --border-subtle: #1e1e21;
  --border-default: #2a2a2d;
  --border-medium: #3f3f46;
  --border-strong: #52525b;

  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.8);
  --text-muted: rgba(255,255,255,0.45);
  --text-dim: rgba(255,255,255,0.25);
  --text-ghost: rgba(255,255,255,0.12);

  --accent: #eab308;
  --accent-hover: #facc15;
  --accent-bg: rgba(234,179,8,0.08);
  --accent-border: rgba(234,179,8,0.3);

  --success: #10b981;
  --danger: #dc2626;
  --info: #60a5fa;

  /* Typography — default to Bricolage Grotesque (the board default).
     Switchable at runtime by overriding --font-primary on body.
     See css/font.css for the full set of named font stacks. */
  /* The Japanese, Chinese and Arabic web fonts close every stack, so those
     languages render on a host with no fonts of its own (the stream host).
     BoardStrings.withScripts() adds the same tail to a stack set at run time. */
  --font-primary: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, var(--fids-script-fonts, 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans Arabic'), sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-primary);
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--text-primary);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Font Face ──────────────────────────────────────────────────────────── */
/* Font families are loaded via Google Fonts CDN in font.css.
   Active font selected via --font-primary (see :root above). */

/* ── Common Components ──────────────────────────────────────────────────── */

/* Inputs & Selects */


/* Gold line divider */
.gold-line {
  width: 60px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto;
  opacity: 0.6;
}


/* v23937 — solid, never pulsing (see .live-dot in fids.css). */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: none;
}


/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Utility */
.hidden { display: none !important; }
.fade-out { opacity: 0; pointer-events: none; }

/* ──────────────────────────────────────────────────────────────────────
   Transition Loader — covers the board while data loads and views swap.
   Shown by default (opacity:1), hidden when JS calls hideFidsLoader().
   ────────────────────────────────────────────────────────────────────── */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * BOOT LOADER (v218.99.19) — Airport Operations Console aesthetic
 * Light theme by default. Add data-theme="dark" to flip.
 * Self-contained — does not depend on menu.css load order.
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#fidsLoader {
  --ld-bg-1: #fbfcfe;
  --ld-bg-2: #eef2f8;
  --ld-bg-radial-1: rgba(217, 119, 6, 0.06);
  --ld-bg-radial-2: rgba(8, 145, 178, 0.05);
  --ld-text:        #0f172a;
  --ld-text-2:      #475569;
  --ld-text-muted:  #94a3b8;
  --ld-accent:      #d97706;
  --ld-accent-soft: rgba(217, 119, 6, 0.18);
  --ld-border:      rgba(15, 23, 42, 0.08);
  --ld-grain-dot:   rgba(15, 23, 42, 0.022);

  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ld-text);
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(ellipse at 80% 20%, var(--ld-bg-radial-1) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, var(--ld-bg-radial-2) 0%, transparent 50%),
    linear-gradient(155deg, var(--ld-bg-1) 0%, var(--ld-bg-2) 100%);
  opacity: 1;
  pointer-events: auto;
 /* v23159 — a slower, gentler hand-off (t have to
     be so fast either they can fade slower'). Now that the loader sits on the
     board's own ground, this reads as the screen settling rather than one
     thing being swapped for another. The .is-gone timeout in each page's
     _fidsHideLoader() is matched to it. */
  transition: opacity 1.2s ease 0.1s;
}
/* v23159 — the dark palette is also reachable from <html>, which is where the
   head script now stamps the resolved theme before first paint. The original
   selector only matched the attribute ON the loader, and nothing could set
   that until the element existed — which is what produced the white-then-dark
   flash on every overnight boot. Both selectors are kept so a cached page that
   still stamps the loader directly behaves exactly as before. */
#fidsLoader[data-theme="dark"],
html[data-theme="dark"] #fidsLoader {
  --ld-bg-1: #070b14;
  --ld-bg-2: #0f1424;
  --ld-bg-radial-1: rgba(251, 191, 36, 0.06);
  --ld-bg-radial-2: rgba(34, 211, 238, 0.05);
  --ld-text:        #f1f5f9;
  --ld-text-2:      #cbd5e1;
  --ld-text-muted:  #64748b;
  --ld-accent:      #fbbf24;
  --ld-accent-soft: rgba(251, 191, 36, 0.22);
  --ld-border:      rgba(255, 255, 255, 0.08);
  --ld-grain-dot:   rgba(255, 255, 255, 0.018);
}
/* v23159 — NO WELCOME SCREEN ON A ROTATION HOP. ?rotate= navigates the whole
   document every dwell period, so replaying the boot loader each time is what
   made the boards flash continuously rather than only at startup. Measured: the
   board needs ~11s to populate, so a 30s dwell spent roughly a third of every
   cycle showing the loader instead of flights. The arriving page stamps
   data-boot-hop on <html> when it recognises the navigation as a rotation, and
   the loader simply never paints. A cold boot is unaffected. */
html[data-boot-hop="1"] #fidsLoader { display: none !important; }

/* v23159 — the loader sits on the board's OWN ground once the board has told us
   what that is. The stock palettes are a guess from the clock; the board at YQM
   is rgb(13,77,139), which is neither of them, so the loader was a different
   colour from the screen it covered and the handover read as a flash. The value
   is recorded by _fidsHideLoader() the first time the board paints and replayed
   here on every subsequent load. Ink still comes from the theme, which the head
   script now derives from this colour's luminance rather than the hour. */
html[data-boot-ground="1"] #fidsLoader {
  background: var(--boot-ground) !important;
}

#fidsLoader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--ld-grain-dot) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.7;
}
#fidsLoader.is-hidden { opacity: 0; pointer-events: none; }
#fidsLoader.is-gone   { display: none; }

.fids-loader-brand {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--ld-text-muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.fids-loader-title {
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ld-text);
  margin: 0 0 4px;
  line-height: 1;
}
.fids-loader-sub {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ld-text-muted);
  margin-bottom: 48px;
  text-transform: uppercase;
}
.fids-loader-bar {
  position: relative;
  width: 64px;
  height: 64px;
  background: transparent;
  border-radius: 50%;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fids-loader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--ld-border);
  border-radius: 50%;
}
.fids-loader-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: var(--ld-accent);
  border-right-color: var(--ld-accent-soft);
  border-radius: 50%;
  animation: fids-loader-spin 1.4s linear infinite;
  background: transparent;
}
.fids-loader-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ld-accent);
  box-shadow: 0 0 14px var(--ld-accent-soft);
  animation: fids-loader-pulse 2s ease-in-out infinite;
}
@keyframes fids-loader-spin {
  to { transform: rotate(360deg); }
}
@keyframes fids-loader-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}
@keyframes fidsLoaderSlide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(370%); }
}
.fids-loader-status {
  margin-top: 32px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ld-text-2);
  min-height: 14px;
  text-transform: uppercase;
}

/* Hide the old boot loader's FIDS/GIDS/BIDS text + bar if one is ever drawn.
   v24042 — the old loader logo's rules (.fids-loader-logo, its pulse, and a
   filter that turned it flat white on the dark loader) are removed: no page
   draws that class any more. The loaders' logo is .ocb-logo in each page,
   orion-connected-on-dark.svg in its own colours, and no rule may whiten it
   (tests/loader-logo-colour.test.js). */
#fidsLoader .fids-loader-brand,
#fidsLoader .fids-loader-title,
#fidsLoader .fids-loader-sub,
#fidsLoader .fids-loader-bar,
#fidsLoader .fids-loader-status { display: none !important; }


/* ═══ THE NINE BOARD LANGUAGES — scripts, direction, line breaking ═════════
   v23970. Every half of a pair carries its language (lang="…"), and an Arabic
   half its direction (dir="rtl", which the browser isolates), so these rules
   reach exactly the words in that language. docs/BOARD-LANGUAGES.md.        */

/* Japanese, Chinese, Arabic: every font stack ends in var(--fids-script-fonts)
   (BoardStrings.withScripts adds it to a stack set at run time), so the
   board's own font draws Latin and digits and the script's web font (Google
   Fonts, loaded by each board page) draws the rest. The variable is resolved
   on each element, so a Chinese half — or a whole board showing Chinese —
   takes the simplified-Chinese forms of the characters it shares with
   Japanese, and a Japanese one the Japanese forms. */
:root { --fids-script-fonts: 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans Arabic'; }
[lang="ja"] { --fids-script-fonts: 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans Arabic'; }
[lang|="zh"] { --fids-script-fonts: 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Arabic'; }
[lang="ar"] { --fids-script-fonts: 'Noto Sans Arabic', 'Noto Sans JP', 'Noto Sans SC'; }
[lang="ja"]:not(html) {
  word-break: auto-phrase;   /* break between phrases, never inside a word */
  line-break: strict;
}
[lang|="zh"]:not(html) { line-break: strict; }
/* Arabic letters join; tracking pulls them apart — on the Arabic element and
   on everything inside it that is not marked as another language. */
[lang="ar"]:not(html),
[lang="ar"]:not(html) *:not([lang]) { letter-spacing: 0 !important; }
/* Each half is isolated, so an Arabic half and a Latin half (or a Japanese
   date and an Arabic one) can never reorder each other. */
.bs-h, bdi[lang] { unicode-bidi: isolate; }
/* A board that shows ONE language at a time carries it on its table or its
   screen (lang="ar" on #fidsTable, on the baggage view). Its columns keep
   their order, so the direction is set where the words are — each heading,
   each status, each label — never on the table or the screen itself, which
   would mirror the columns. */
#fidsTable:lang(ar) th, #fidsTable:lang(ar) td.td-status,
[lang="ar"] .b3-status, [lang="ar"] .bidsv2-carousel-label,
[lang="ar"] .bidsv2-col-hdr, [lang="ar"] .bidsv2-status, [lang="ar"] .bidsv2-empty,
#fidsTable:lang(ar) .fids-empty, [lang="ar"] .fids-empty-msg { direction: rtl; unicode-bidi: isolate; }

/* ?i18n=provenance (localhost only): every careful translation — our words,
   where the airline or government publishes none in that language — is
   outlined, so the pictures show which words are ours. */
html[data-i18n-provenance] [data-i18n-src="careful"] {
  outline: 2px dashed #f5a623 !important;
  outline-offset: 2px;
}
html[data-i18n-provenance] [data-i18n-src="careful"]::after {
  content: '\2248';
  color: #f5a623;
  font-size: 0.6em;
  vertical-align: super;
  margin-inline-start: 0.15em;
}

/* ── v24008 — DAY AND NIGHT: THE CROSSFADE A SURFACE OPTS INTO ──────────────
   js/fids-sun.js puts fids-day or fids-night on <html> for the board's own
   airport and moves it at that airport's sunrise and sunset. A surface that
   changes between the two looks adds .fids-dn-fade and changes over two
   seconds instead of cutting. The transition waits for fids-dn-ready, which
   the engine adds only after the first state has been painted, so a screen
   booting at night comes up dark rather than fading from light. */
:root { --fids-dn-fade: 2s; }
html.fids-dn-ready .fids-dn-fade {
  transition: background-color var(--fids-dn-fade) ease, color var(--fids-dn-fade) ease,
    border-color var(--fids-dn-fade) ease, box-shadow var(--fids-dn-fade) ease,
    opacity var(--fids-dn-fade) ease, fill var(--fids-dn-fade) ease, stroke var(--fids-dn-fade) ease;
}