:root {
  --bg: #121316;
  --bg-2: #16171a;
  --panel: #1c1d21;
  --panel-2: #24252a;
  --line: #2e3035;
  --line-2: #3a3c42;
  --text: #f2f3f5;
  --text-2: #c9cbd0;
  --muted: #8e9198;
  --yellow: #f1c933;
  --yellow-soft: rgba(241, 201, 51, 0.12);
  --navy: #073590;
  --blue: #6f9bff;
  --green: #3ccf7a;
  --amber: #ffb547;
  --red: #ff5d5d;
  --radius: 16px;
  --radius-sm: 11px;
  --side: 248px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  /* Text in yellow (the fill stays --yellow), hovers, fields, the top bar. */
  --yellow-ink: #f1c933;
  --hover: #202126;
  --line-hover: #4a4d54;
  --field-focus: #1a1b1f;
  --topbar: rgba(18, 19, 22, 0.86);
  --tabbar: rgba(22, 23, 26, 0.94);
  color-scheme: dark;
}
/* Light theme (Profile → Appearance). The brand surfaces (dashboard banner, heroes,
   passport, podium, sign-in art, event covers, maps, toasts) and the flight deck
   stay dark on purpose: they keep the dark palette below. */
:root[data-theme="light"] {
  --bg: #f3f4f7;
  --bg-2: #eceef2;
  --panel: #ffffff;
  --panel-2: #f4f5f8;
  --line: #e1e3e8;
  --line-2: #cfd2d9;
  --text: #16181d;
  --text-2: #3b404a;
  --muted: #6a707c;
  --yellow-ink: #8a6500;
  --yellow-soft: rgba(241, 201, 51, 0.22);
  --blue: #2c5fd4;
  --green: #17864a;
  --amber: #a86400;
  --red: #d33a3a;
  --shadow: 0 18px 50px rgba(20, 24, 33, 0.12);
  --hover: #eef0f4;
  --line-hover: #b8bcc5;
  --field-focus: #ffffff;
  --topbar: rgba(243, 244, 247, 0.88);
  --tabbar: rgba(255, 255, 255, 0.94);
  color-scheme: light;
}
:root[data-theme="light"] :is(.hero, .event-banner, .login-art, .ft-hero, .bs-hero, .bd-hero, .lb-podium, .pp-id, .pp-map, .dx-head, .pl-hero, .ea-cover, .ac-hero, .ops-app, .fl-ops, .og-tour-back,
  .content.deck, .route-map, .mini-map, .toast, .music-dock) {
  --bg: #121316; --bg-2: #16171a; --panel: #1c1d21; --panel-2: #24252a; --line: #2e3035; --line-2: #3a3c42;
  --text: #f2f3f5; --text-2: #c9cbd0; --muted: #8e9198; --yellow-ink: #f1c933; --yellow-soft: rgba(241, 201, 51, 0.12);
  --blue: #6f9bff; --green: #3ccf7a; --amber: #ffb547; --red: #ff5d5d;
  --hover: #202126; --line-hover: #4a4d54; --field-focus: #1a1b1f; --topbar: rgba(18, 19, 22, 0.86);
  color-scheme: dark; color: var(--text);
}
:root[data-theme="light"] .content.deck { background: var(--bg); }
* { box-sizing: border-box; }
/* No rubber-band scrolling past the top or bottom of the page. */
html { -webkit-text-size-adjust: 100%; background: var(--bg); overscroll-behavior: none; }
body { overscroll-behavior: none; }
.drawer-body, .palette-list, .side { overscroll-behavior: contain; }
/* Tables and phase pills only scroll sideways: the page keeps scrolling over them. */
.table-wrap, .ck-phases, .fd-tabs { overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Poppins", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
svg { flex: 0 0 auto; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* ---------- Shell ---------- */
.app { min-height: 100vh; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); }
.side {
  position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 4px;
  padding: 18px 14px; border-right: 1px solid var(--line); background: var(--bg-2); overflow: hidden;
}
/* The links scroll on their own (short windows); the brand and the PIREP button stay. */
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { border-radius: 6px; background: var(--line); }
.side > .brand, .side-flight, .side-foot { flex: 0 0 auto; }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; }
.brand img { width: 34px; height: 34px; }
.brand b { display: block; font-size: 14px; letter-spacing: 0.04em; line-height: 1.2; }
.brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; }
.brand .beta { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--yellow-soft); color: var(--yellow-ink); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; vertical-align: 2px; }
.nav-sec { padding: 14px 10px 6px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 14px; font-weight: 500; border: 1px solid transparent; transition: background 0.15s, color 0.15s;
}
.nav-link svg { width: 18px; height: 18px; color: var(--muted); }
.nav-link:hover { background: var(--panel); color: var(--text); }
.nav-link[aria-current="page"] { background: var(--yellow-soft); color: var(--yellow-ink); border-color: rgba(241, 201, 51, 0.22); }
.nav-link[aria-current="page"] svg { color: var(--yellow-ink); }
.nav-link .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--yellow); color: #111; font-size: 11px; font-weight: 700; text-align: center; }
.nav-link .ext { margin-left: auto; width: 14px; height: 14px; }
.side-foot { padding-top: 10px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 28px;
  background: var(--topbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.topbar .crumb { font-weight: 600; font-size: 15px; }
.topbar .spacer { flex: 1; }
.top-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 600; position: relative; }
.top-btn:hover { border-color: var(--line-2); }
.top-btn svg { width: 17px; height: 17px; color: var(--text-2); }
.top-btn .dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--panel); }
.me-btn { padding: 0 12px 0 4px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--panel-2); display: grid; place-items: center; color: var(--yellow-ink); font-weight: 700; font-size: 12px; overflow: hidden; }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.content { width: 100%; max-width: 1280px; margin: 0 auto; padding: 26px 28px 80px; }

.menu { position: fixed; z-index: 70; width: 270px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); animation: pop 0.14s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.menu-head { display: flex; gap: 11px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head b { display: block; font-size: 14px; }
.menu-head small { display: block; color: var(--muted); font-size: 12px; }
.menu button, .menu a { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 10px; font-size: 14px; text-align: left; }
.menu button:hover, .menu a:hover { background: var(--panel-2); }
.menu svg { width: 17px; height: 17px; color: var(--muted); }
.menu .danger, .menu .danger svg { color: var(--red); }
.menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu a.menu-head { gap: 11px; padding: 10px; margin-bottom: 4px; border-radius: 12px; border-bottom: 0; }
.menu a.menu-head:hover { background: var(--panel-2); }
.menu-head > div { flex: 1; min-width: 0; }
.menu-head b, .menu-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-head .go { width: 16px; height: 16px; flex: none; }
.menu-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 6px 4px 2px; padding: 3px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); }
.menu .menu-theme button { justify-content: center; gap: 6px; padding: 7px 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); border-radius: 8px; }
.menu .menu-theme button svg { width: 14px; height: 14px; }
.menu .menu-theme button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.menu .menu-theme button[aria-pressed="true"] svg { color: var(--yellow-ink); }
.menu-foot { display: flex; align-items: center; gap: 4px; }
.menu .menu-foot a { flex: 1; width: auto; gap: 6px; color: var(--muted); font-size: 13px; }
.menu .menu-foot a svg { width: 13px; height: 13px; }
.menu .menu-foot button { width: auto; flex: none; }

.bottom-nav { display: none; }

/* ---------- Page ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.eyebrow { color: var(--yellow-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.page-head h1 { margin: 4px 0 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.page-head p { margin: 6px 0 0; color: var(--muted); max-width: 640px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.dash { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.card-head .more { margin-left: auto; color: var(--yellow-ink); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.card-head .more svg { width: 15px; height: 15px; }
.card.flush .card-head { padding: 16px 18px 0; }

.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .k { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.stat .k svg { width: 15px; height: 15px; }
.stat .v { margin-top: 6px; font-family: var(--mono); font-size: 26px; font-weight: 700; line-height: 1.15; }
.stat .s { margin-top: 2px; color: var(--muted); font-size: 12px; }

/* Hero */
.hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 26px; border: 1px solid rgba(80, 120, 220, 0.35);
  background: radial-gradient(700px 300px at 100% 0%, rgba(241, 201, 51, 0.16), transparent 60%), linear-gradient(135deg, #0b2a6e 0%, #08214f 55%, #0d1b38 100%);
}
.hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 320px; height: 320px; background: url("/harp.png") center / contain no-repeat; opacity: 0.06; pointer-events: none; }
.hero-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero h2 { margin: 0; font-size: 26px; line-height: 1.2; }
.hero .sub { color: #c7d3f1; font-size: 14px; margin-top: 2px; }
.hero .sub b { color: var(--yellow-ink); font-family: var(--mono); }
.rank-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; font-weight: 600; }
.rank-pill svg { width: 16px; height: 16px; color: var(--yellow-ink); }
.hero-progress { margin-top: 22px; position: relative; z-index: 1; }
.hero-progress .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #c7d3f1; margin-bottom: 8px; }
.hero-progress .row b { color: var(--text); }
.bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f1c933, #ffe17a); transition: width 0.8s cubic-bezier(.2, .8, .2, 1); }
.hero-stats { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: relative; z-index: 1; }
.hero-stats > div { padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); }
.hero-stats .v { font-family: var(--mono); font-weight: 700; font-size: 21px; }
.hero-stats .k { color: #b6c3e6; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* Quick actions */
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.action {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.action:hover { border-color: rgba(241, 201, 51, 0.45); transform: translateY(-2px); background: var(--hover); }
.action .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--yellow-soft); color: var(--yellow-ink); }
.action .ico svg { width: 19px; height: 19px; }
.action b { font-size: 14px; }
.action small { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* Lists */
.list { display: flex; flex-direction: column; }
.row-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; }
.row-item:first-child { border-top: 0; }
button.row-item:hover, a.row-item:hover { background: var(--hover); }
.route { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 16px; }
.route .sep { width: 15px; height: 15px; color: var(--muted); stroke-width: 2.4; }
.meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta b { color: var(--text-2); font-weight: 600; }
.right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.right .big { font-family: var(--mono); font-weight: 700; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip.green { color: var(--green); border-color: rgba(60, 207, 122, 0.4); background: rgba(60, 207, 122, 0.07); }
.chip.amber { color: var(--amber); border-color: rgba(255, 181, 71, 0.4); background: rgba(255, 181, 71, 0.07); }
.chip.red { color: var(--red); border-color: rgba(255, 93, 93, 0.4); background: rgba(255, 93, 93, 0.07); }
.chip.yellow { color: var(--yellow-ink); border-color: rgba(241, 201, 51, 0.4); background: var(--yellow-soft); }
.chip.blue { color: var(--blue); border-color: rgba(111, 155, 255, 0.4); background: rgba(111, 155, 255, 0.07); }

/* Forms / filters */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.input, .select {
  height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background-color: var(--bg-2); color: var(--text);
  outline: none; min-width: 0; font-size: 15px; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.input:hover, .select:hover { border-color: var(--line-hover); }
.input:focus, .select:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); background-color: var(--field-focus); }
.input::placeholder, textarea::placeholder { color: #6c6f76; font-family: "Poppins", system-ui, sans-serif; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23f1c933' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.select option { background: var(--panel); color: var(--text); }
textarea.input { height: auto; min-height: 100px; padding: 12px 14px; line-height: 1.5; resize: vertical; font-family: "Poppins", system-ui, sans-serif; }
input[type="date"].input, input[type="time"].input { color-scheme: dark; accent-color: var(--yellow); font-family: var(--mono); font-weight: 600; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.85; filter: invert(78%) sepia(64%) saturate(600%) hue-rotate(2deg) brightness(102%); }
/* "1 h 40 min" style field with the unit inside */
.unit-field { display: inline-flex; align-items: center; height: 46px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.unit-field:hover { border-color: var(--line-hover); }
.unit-field:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); }
.unit-field input { width: 46px; height: 100%; border: 0; background: transparent; text-align: right; font-family: var(--mono); font-size: 19px; font-weight: 700; outline: none; padding: 0 4px 0 10px; }
.unit-field span { color: var(--muted); font-size: 13px; padding-right: 10px; }
.unit-field .sep { width: 1px; align-self: stretch; background: var(--line); padding: 0; margin: 10px 2px; }
.stepper { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-family: var(--mono); font-weight: 700; font-size: 13px; }
.stepper:hover { border-color: var(--yellow); color: var(--yellow-ink); }
.quick-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.quick-chips button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.quick-chips button:hover { border-color: var(--line-hover); }
.quick-chips button[aria-pressed="true"] { border-color: var(--yellow); color: var(--yellow-ink); background: var(--yellow-soft); }
.utc-badge { display: inline-flex; align-items: center; height: 46px; padding: 0 12px; border-radius: 12px; border: 1px dashed var(--line-2); color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.input.icao { width: 108px; text-transform: uppercase; font-family: var(--mono); }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 7px 13px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--yellow); color: #111; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--yellow); background: var(--yellow); color: #111; font-weight: 700; font-size: 14px; }
.btn svg { width: 17px; height: 17px; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--muted); }
.btn:disabled { opacity: 0.5; cursor: default; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; color: var(--muted); font-size: 13px; }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; padding: 12px 18px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--hover); }
.table .num { font-family: var(--mono); text-align: right; }
.table-wrap { overflow-x: auto; }

/* Drawer */
.drawer-back { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); animation: fade 0.15s; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; z-index: 81; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--bg-2); border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: slide 0.2s cubic-bezier(.2, .8, .2, 1); }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 18px; }
.drawer-body { padding: 20px; overflow-y: auto; flex: 1; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); margin-left: auto; }
.icon-btn svg { width: 18px; height: 18px; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kv > div { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.kv .k { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.kv .v { font-family: var(--mono); font-weight: 700; font-size: 16px; margin-top: 2px; }
.note-box { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text-2); font-size: 14px; white-space: pre-wrap; }
.note-box.red { border-color: rgba(255, 93, 93, 0.4); color: #ffc2c2; }

/* Route map (SVG) */
.mini-map { width: 100%; height: 200px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #1d2a44, #121a2b); border: 1px solid var(--line); display: block; margin-bottom: 16px; }

/* Events */
.event-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line); text-align: left; padding: 0; transition: border-color 0.15s, transform 0.15s; }
.event-card:hover { border-color: rgba(241, 201, 51, 0.45); transform: translateY(-2px); }
.event-banner { height: 120px; position: relative; padding: 16px; display: flex; align-items: flex-end; background: radial-gradient(400px 160px at 90% 0%, rgba(241, 201, 51, 0.25), transparent 60%), linear-gradient(135deg, #0b2a6e, #0d1b38); }
.event-banner .date { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.event-banner h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.event-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }

/* Ranks */
.ladder { display: flex; flex-direction: column; gap: 8px; }
.rung { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.rung .n { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); font-family: var(--mono); font-weight: 700; }
.rung.done .n { background: rgba(60, 207, 122, 0.12); color: var(--green); }
.rung.current { border-color: rgba(241, 201, 51, 0.5); background: linear-gradient(90deg, var(--yellow-soft), transparent 70%); }
.rung.current .n { background: var(--yellow); color: #111; }
.rung b { display: block; }
.rung small { color: var(--muted); font-size: 12.5px; }

/* Empty / loading */
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty svg { width: 34px; height: 34px; color: var(--line-2); margin-bottom: 10px; }
.empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.skeleton { border-radius: 12px; background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.error-box { padding: 16px 18px; border-radius: var(--radius); border: 1px solid rgba(255, 93, 93, 0.4); background: rgba(255, 93, 93, 0.06); color: #ffc2c2; }

/* Login */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.login-art { position: relative; overflow: hidden; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(800px 400px at 80% 10%, rgba(241, 201, 51, 0.18), transparent 60%), linear-gradient(150deg, #0b2a6e, #071634 70%); }
.login-art::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 460px; height: 460px; background: url("/harp.png") center / contain no-repeat; opacity: 0.08; }
.login-art h2 { font-size: 44px; line-height: 1.08; margin: 0; max-width: 520px; letter-spacing: -0.02em; }
.login-art h2 em { font-style: normal; color: var(--yellow-ink); }
.login-art ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; position: relative; z-index: 1; }
.login-art li { display: flex; gap: 12px; align-items: center; color: #d5def5; }
.login-art li svg { width: 18px; height: 18px; color: var(--yellow-ink); }
.login-panel { display: grid; place-items: center; padding: 32px 20px; }
.login-box { width: min(380px, 100%); }
.login-box img { width: 54px; height: 54px; }
.login-box h1 { margin: 18px 0 6px; font-size: 26px; }
.login-box p { color: var(--muted); margin: 0 0 24px; }
.discord { width: 100%; height: 50px; border-radius: 14px; border: 0; background: #5865f2; color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.discord:hover { background: #4f5bdc; }
.discord svg { width: 22px; height: 22px; }
.login-box .fine { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.login-box .fine a { color: var(--yellow-ink); }
.login-join { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; text-align: center; }
.login-join > span { font-weight: 600; font-size: 14px; }
.login-join .btn { width: 100%; justify-content: center; }
.login-join small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.login-join.nudge .btn { border-color: var(--yellow); color: var(--yellow-ink); }

/* Flight deck */

.deck-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(7, 53, 144, 0.35), transparent 70%); }
.deck-flight { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 360px; flex-wrap: wrap; }
.deck-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deck-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--yellow); color: #111; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.deck-badge svg { width: 14px; height: 14px; }
.deck-badge.free { background: var(--panel-2); color: var(--text-2); }
.ops-frame { flex: 1; width: 100%; border: 0; display: block; background: var(--bg-2); min-height: 0; }
.btn.sm { height: 36px; padding: 0 13px; font-size: 13px; border-radius: 10px; }
.btn .ext { width: 13px; height: 13px; opacity: 0.6; }
.select.sm { height: 36px; padding: 0 32px 0 10px; font-size: 13px; border-radius: 10px; background-position: right 10px center; }
.label { display: block; margin: 14px 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.book-btn { height: 30px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(241, 201, 51, 0.5); background: var(--yellow-soft); color: var(--yellow-ink); font-size: 12.5px; font-weight: 700; }
.book-btn:hover { background: var(--yellow); color: #111; }
.book-btn.on { background: var(--yellow); color: #111; }
.book-pair { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.file-mini { height: 30px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 700; }
.file-mini:hover { border-color: rgba(241, 201, 51, 0.6); color: var(--yellow-ink); }
.booking-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--radius); border: 1px solid rgba(241, 201, 51, 0.4); background: linear-gradient(90deg, var(--yellow-soft), transparent 80%); }


/* ---------- Polish ---------- */
.route .apt { display: inline-flex; align-items: center; gap: 7px; }
/* 3D buildings at the airport in Infinite Flight */
.ap3d { display: inline-flex; align-items: center; gap: 3px; margin-left: -2px; padding: 1px 5px 1px 4px; border-radius: 6px; background: rgba(111, 155, 255, 0.14); border: 1px solid rgba(111, 155, 255, 0.35); color: #9db8ff; font-family: var(--sans, inherit); font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.3; vertical-align: middle; }
.ap3d svg { width: 10px; height: 10px; stroke-width: 2.4; }
.flag { width: 1.25em !important; height: 0.94em; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); flex: 0 0 auto; background-size: cover; }
.route-map { position: relative; height: 240px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #252525; margin-bottom: 16px; }
.route-map-slot { position: absolute; inset: 0; }
.route-map-tag { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: var(--yellow-ink); font-size: 11px; font-weight: 700; }
.apt-marker { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: #111; border: 1px solid var(--yellow); color: var(--yellow-ink); }
.airports { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.airport { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.airport .code { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; font-size: 17px; }
.airport .name { color: var(--text-2); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.airport .city { color: var(--muted); font-size: 12px; }
.section-title { margin: 20px 0 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.landing-hero { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 10px; }
.landing-hero .rate { font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1; }
.landing-hero .grade { font-size: 13px; font-weight: 700; }
.tdz { position: relative; height: 34px; border-radius: 8px; background: #2b2c31; margin: 12px 0 4px; overflow: hidden; }
.tdz .zone { position: absolute; top: 0; bottom: 0; background: rgba(60, 207, 122, 0.16); border-left: 2px solid rgba(60, 207, 122, 0.6); border-right: 2px solid rgba(60, 207, 122, 0.6); }
.tdz .mark { position: absolute; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--yellow); box-shadow: 0 0 10px rgba(241, 201, 51, 0.7); }
.tdz .stripes { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.12) 22px 34px); mask: linear-gradient(transparent 40%, #000 40% 60%, transparent 60%); }
.tdz-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 8px; }
.page-enter { animation: page-in 0.22s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
.brand-mini { display: none; }
.brand-mini img { width: 28px; height: 28px; display: block; }
.top-btn.icon { width: 38px; padding: 0; justify-content: center; }
.top-btn.file-btn { background: var(--yellow); border-color: var(--yellow); color: #111; }
.top-btn.file-btn svg { color: #111; }
.top-btn.file-btn:hover { filter: brightness(1.05); }
.top-btn .kbd { margin-left: 4px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); font-size: 11px; font-family: var(--mono); }
.top-btn .count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--yellow); color: #111; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }

/* Toasts */
.toasts { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; background: #24252a; border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 14px; font-weight: 600; animation: toast-in 0.2s ease-out; pointer-events: auto; }
.toast svg { width: 18px; height: 18px; color: var(--green); }
.toast.err svg { color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* Next flight card (sidebar) */
.side-flight { display: block; margin: 10px 2px 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(241, 201, 51, 0.35); background: linear-gradient(160deg, rgba(241, 201, 51, 0.12), transparent 70%); }
.side-flight .k { color: var(--yellow-ink); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.side-flight .r { font-family: var(--mono); font-weight: 700; font-size: 15px; margin-top: 4px; }
.side-flight .m { color: var(--muted); font-size: 12px; }
.side-flight:hover { border-color: var(--yellow); }

/* Command palette */
.palette-back { position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: fade 0.12s; }
.palette { width: min(620px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; animation: pop 0.14s ease-out; }
.palette input { height: 56px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 0 18px 0 50px; font-size: 16px; outline: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238e9198' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 18px center no-repeat; }
.palette-list { overflow-y: auto; padding: 6px; }
.palette-sec { padding: 10px 12px 4px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: none; text-align: left; font-size: 14px; }
.palette-item svg { width: 17px; height: 17px; color: var(--muted); }
.palette-item[aria-selected="true"] { background: var(--panel-2); }
.palette-item .hint { margin-left: auto; color: var(--muted); font-size: 12px; }
.palette-foot { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; }

/* Flight deck steps + live */
.steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.step svg { width: 13px; height: 13px; }
.step.done { color: var(--green); border-color: rgba(60, 207, 122, 0.35); }
.step.now { color: #111; background: var(--yellow); border-color: var(--yellow); }
.step-sep { width: 10px; height: 1px; background: var(--line-2); }
.live-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(60, 207, 122, 0.1); border: 1px solid rgba(60, 207, 122, 0.4); color: var(--green); font-size: 12px; font-weight: 700; }
.live-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.btn.pulse { animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(241, 201, 51, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(241, 201, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(241, 201, 51, 0); } }

/* Routes: quick filters, mobile cards */
.quick { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; }
.quick button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.quick button[aria-pressed="true"] { border-color: var(--yellow); color: var(--yellow-ink); background: var(--yellow-soft); }
.route-cards { display: none; }
.filters-toggle { display: none; }
.month-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 18px 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--bg-2); }
.month-head:first-child { border-top: 0; }
.month-head b { color: var(--text-2); font-family: var(--mono); letter-spacing: 0; }
.notam-text b { color: var(--text); }


/* ---------- Flight deck (native Ops Center) ---------- */
.content.deck { height: auto; display: block; padding: 0 0 80px; max-width: none; }
.fd { width: 100%; }
.fd-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 28px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(7, 53, 144, 0.38), transparent 75%); }
.fd-flight { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 320px; }
.fd-route { min-width: 0; }
.fd-route .route { font-size: 19px; }
.fd-status { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 220px; }
.fd-progress { width: 100%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.fd-progress span { display: block; height: 100%; background: linear-gradient(90deg, #3ccf7a, #9be15d); border-radius: inherit; transition: width 0.4s; }
.fd-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.icon-btn.on { background: var(--yellow); color: #111; border-color: var(--yellow); }
.fd-tabs { position: sticky; top: 63px; z-index: 20; display: flex; gap: 4px; padding: 8px 24px; background: rgba(18, 19, 22, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); overflow-x: auto; }
.fd-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; position: relative; }
.fd-tabs button svg { width: 17px; height: 17px; }
.fd-tabs button:hover { color: var(--text); background: var(--panel); }
.fd-tabs button[aria-current="page"] { color: var(--text); background: var(--panel-2); }
.fd-tabs button[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -9px; height: 2px; border-radius: 2px; background: var(--yellow); }
.fd-tabs .n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: blink 1.6s infinite; }
.link-btn { border: 0; background: none; color: var(--yellow-ink); font-weight: 700; font-size: 12.5px; padding: 4px 6px; border-radius: 7px; cursor: pointer; }
.link-btn:hover { background: var(--yellow-soft); }

/* Checklist */
.ck { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; max-width: 1280px; margin: 0 auto; padding: 22px 28px 0; align-items: start; }
.ck-phases { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 2px; }
.ck-sec { padding: 12px 10px 4px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ck-phase { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: none; text-align: left; font-size: 14px; color: var(--text-2); }
.ck-phase:hover { background: var(--panel); }
.ck-phase[aria-current="step"] { background: var(--yellow-soft); border-color: rgba(241, 201, 51, 0.3); color: var(--yellow-ink); }
.ck-phase .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; flex: 0 0 auto; }
.ck-phase .dot svg { width: 11px; height: 11px; color: #111; }
.ck-phase.partial .dot { border-color: var(--yellow); }
.ck-phase.done .dot { background: var(--green); border-color: var(--green); }
.ck-phase .t { flex: 1; }
.ck-phase .n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.ck-main { min-width: 0; }
.ck-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ck-head h2 { margin: 2px 0 0; font-size: 26px; letter-spacing: -0.01em; }
.ck-count { display: flex; align-items: center; gap: 10px; }
.ck-ring { font-family: var(--mono); font-weight: 700; font-size: 13px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }
.ck-ring.done { color: #111; background: var(--green); border-color: var(--green); }
.ck-group { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; transition: box-shadow 0.3s; }
.ck-group.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 2px var(--yellow); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ck-group.optional { border-style: dashed; }
.ck-group-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ck-group.collapsed .ck-group-head { border-bottom: 0; }
.ck-group-head .sp, .ck-row .sp, .ck-timer .sp, .pf-top .sp, .lv-head .sp { flex: 1; }
.ck-group-head .ref { font-family: var(--mono); color: #111; background: var(--yellow); padding: 1px 7px; border-radius: 6px; letter-spacing: 0; }
.ck-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; }
.ck-toggle .chev { width: 15px; height: 15px; transition: transform 0.15s; }
.ck-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.ck-items > * { border-top: 1px solid var(--line); }
.ck-items > *:first-child { border-top: 0; }
.ck-item { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 13px 16px; border: 0; background: none; text-align: left; position: relative; transition: background 0.12s; }
.ck-item:hover { background: #222327; }
.ck-item.next { box-shadow: inset 3px 0 0 var(--yellow); background: rgba(241, 201, 51, 0.04); }
.ck-box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-2); display: grid; place-items: center; flex: 0 0 auto; margin-top: -2px; transition: all 0.12s; }
.ck-box svg { width: 16px; height: 16px; color: #111; opacity: 0; transform: scale(0.6); transition: all 0.15s; }
.ck-item.next .ck-box { border-color: var(--yellow); }
.ck-item.on .ck-box { background: var(--green); border-color: var(--green); }
.ck-item.on .ck-box svg { opacity: 1; transform: scale(1); }
.ck-item.on .ck-text, .ck-item.on .ck-resp { color: var(--muted); }
.ck-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ck-ch { display: grid; grid-template-columns: minmax(0, max-content) minmax(14px, 1fr) auto; align-items: baseline; gap: 10px; }
.ck-text { font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 14.5px; }
.ck-lead { border-bottom: 2px dotted #4a4c52; transform: translateY(-4px); }
.ck-resp { font-weight: 700; color: var(--yellow-ink); font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.ck-resp.info { color: var(--muted); }
.ck-sub { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.ck-sub b { color: var(--yellow-ink); font-family: var(--mono); font-weight: 700; }
.ck-sheet { margin-left: auto; color: var(--yellow-ink); font-weight: 700; cursor: pointer; }
.ck-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; flex-wrap: wrap; font-size: 14px; }
.ck-row > svg { width: 17px; height: 17px; flex: 0 0 auto; }
.ck-row .ck-bullet { width: 26px; text-align: center; color: var(--muted); }
.ck-row .ck-text { font-weight: 500; color: var(--text-2); }
.ck-row.caution { background: rgba(255, 181, 71, 0.07); color: var(--amber); font-weight: 600; }
.ck-row.warn { background: rgba(255, 93, 93, 0.07); color: var(--red); font-weight: 600; }
.ck-row.goto { color: var(--text-2); }
.ck-row.goto > svg { color: var(--yellow-ink); }
.ck-row.media { color: var(--text-2); align-items: center; }
.ck-row.media > svg { color: var(--yellow-ink); flex: none; }
.ck-row.media .btn.on { border-color: rgba(241, 201, 51, 0.5); color: var(--yellow-ink); }
.ck-row.speeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.spd { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.spd .f { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.spd .v { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--yellow-ink); }
.ck-timer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: rgba(7, 53, 144, 0.18); }
.ck-timer .lbl { color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ck-timer .input.sm { width: 84px; height: 36px; }
.ck-timer .clk { font-family: var(--mono); font-weight: 700; font-size: 22px; min-width: 70px; }
.ck-timer .clk.done { color: var(--green); }
.btn.on { background: var(--yellow); color: #111; border-color: var(--yellow); }
.ck-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ck-nav .btn:last-child { flex: 0 1 auto; }
.ck-hint { text-align: center; color: var(--muted); font-size: 12.5px; margin: 16px 0 0; }
.ck-hint kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--panel); }
.music-dock { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 320px; border-radius: 16px; overflow: hidden; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.music-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; font-size: 13px; font-weight: 600; }
.music-dock iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Performance */
.pf { max-width: 1100px; margin: 0 auto; padding: 22px 28px 0; }
.pf-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pf .card { margin-bottom: 14px; }
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pf-tile { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; min-width: 0; }
.pf-tile .k { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.pf-tile .v { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--yellow-ink); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tile .v.dim { color: #5b5e66; }
.pf-tile .s { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.pf-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 14px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-field .lb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pf-field .auto { color: var(--green); background: rgba(60, 207, 122, 0.1); border: 1px solid rgba(60, 207, 122, 0.35); padding: 0 6px; border-radius: 6px; font-size: 9.5px; letter-spacing: 0.06em; }
.pf-field .input, .pf-field .select { width: 100%; }
.pf-field .is-auto { border-color: rgba(60, 207, 122, 0.45); }
.pf-field .hint { color: var(--muted); font-size: 11.5px; }
.sb-box { padding: 14px; border-radius: 14px; border: 1px solid rgba(80, 120, 220, 0.4); background: rgba(7, 53, 144, 0.2); }
.or { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Live */
.lv { max-width: 1280px; margin: 0 auto; padding: 22px 28px 0; }
.lv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lv-head .cs { font-family: var(--mono); font-weight: 700; font-size: 20px; color: var(--yellow-ink); }
.lv-route { display: flex; align-items: center; gap: 14px; margin: 14px 0; }
.lv-route .apt { font-family: var(--mono); font-weight: 700; }
.lv-route .track { position: relative; flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); }
.lv-route .track span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--yellow); }
.lv-route .track i { position: absolute; top: 50%; transform: translate(-50%, -55%); font-style: normal; color: var(--yellow-ink); }
.lv .pf-tiles { margin-bottom: 14px; }

@media (max-width: 1000px) {
  .ck { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 0; gap: 12px; }
  .ck-phases { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .ck-phases::-webkit-scrollbar { display: none; }
  .ck-sec { display: none; }
  .ck-phase { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); padding: 7px 11px; font-size: 13px; }
  .ck-phase .n { display: none; }
  .fd-head { padding: 12px 16px; gap: 10px; }
  .fd-status { min-width: 0; flex: 1 1 100%; }
  .fd-tabs { top: 59px; padding: 6px 12px; }
  .pf, .lv { padding: 16px 16px 0; }
}
@media (max-width: 560px) {
  .ck-ch { grid-template-columns: minmax(0, 1fr) auto; }
  .ck-lead { display: none; }
  .ck-text { font-size: 13.5px; }
  .ck-item { padding: 12px 14px; gap: 12px; }
  .ck-head h2 { font-size: 22px; }
  .ck-nav .btn { padding: 0 12px; font-size: 13px; }
  .music-dock { left: 12px; right: 12px; width: auto; bottom: 84px; }
  .pf-tile .v { font-size: 19px; }
  .fd-actions .btn.sm { padding: 0 10px; }
}

/* Route details */
.clickable { cursor: pointer; }
.row-item.clickable:hover, tr.clickable:hover td { background: var(--hover); }
.rd-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.rd-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.rd-facts svg { color: var(--muted); }
.rd-facts b { font-family: var(--mono); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-facts span { color: var(--muted); font-size: 11px; }
.rd-facts .hl { border-color: rgba(241, 201, 51, 0.45); background: var(--yellow-soft); }
.rd-facts .hl b, .rd-facts .hl svg { color: var(--yellow-ink); }
.rd-book { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.rd-apt { padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.rd-apt-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rd-role { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.rd-apt .code { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; font-size: 18px; }
.rd-apt .name { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.rd-apt .city { color: var(--muted); font-size: 12px; }
.rd-wx { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.rd-wx span { display: inline-flex; align-items: center; gap: 5px; }
.rd-metar { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); color: var(--muted); font-size: 11.5px; line-height: 1.5; word-break: break-word; }
.rd-live { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.rd-live b { color: var(--text); }
.rd-pilot { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.fd-route.clickable:hover .route { color: var(--yellow-ink); }
@media (max-width: 560px) { .rd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.howto { text-align: left; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.howto-icon { width: 30px; height: 30px; color: var(--yellow-ink); margin-bottom: 10px; }
.howto b { display: block; font-size: 16px; margin-bottom: 4px; }
.howto p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.howto ol { margin: 0 0 16px; padding-left: 20px; color: var(--text-2); font-size: 14px; display: grid; gap: 6px; }

/* Collapsible sidebar */
.app { transition: grid-template-columns 0.2s ease; }
.app.mini { grid-template-columns: 76px minmax(0, 1fr); }
.app.mini .side { padding: 18px 10px; align-items: stretch; }
.app.mini .brand div, .app.mini .nav-sec, .app.mini .side-flight, .app.mini .side-label, .app.mini .side .nav-link .ext, .app.mini .side .nav-link .count { display: none; }
.app.mini .brand { justify-content: center; padding: 4px 0 14px; }
.app.mini .side .nav-link { justify-content: center; padding: 10px 0; font-size: 0; gap: 0; }
.app.mini .side .nav-link svg { width: 20px; height: 20px; }
.app.mini .side-foot .btn { padding: 0; }
.app.mini .side .nav-sec + .nav-link, .app.mini .side div + div > .nav-link:first-of-type { margin-top: 0; }
.app.mini .side-nav > div + div { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.side-toggle { margin-left: -6px; }

/* File a PIREP */
.file-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 18px; align-items: start; }
.file-flight { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); text-align: left; }
.file-flight:hover:not(:disabled) { border-color: var(--line-2); background: var(--hover); }
.file-flight.on { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); }
.file-flight:disabled { opacity: 0.5; cursor: default; }
.file-form { position: sticky; top: 84px; }
.file-route { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.file-verdict { display: flex; align-items: center; gap: 8px; margin: 14px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 181, 71, 0.08); border: 1px solid rgba(255, 181, 71, 0.3); color: var(--amber); font-size: 13px; }
.file-verdict.ok { background: rgba(60, 207, 122, 0.08); border-color: rgba(60, 207, 122, 0.35); color: var(--green); }
.filed { text-align: center; padding: 30px 10px; }
.filed h2 { margin: 14px 0 6px; }
.filed p { margin: 0 0 20px; }
.filed-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #111; }
.filed-ico.pending { background: var(--amber); }
.filed-ico svg { width: 34px; height: 34px; }
@media (max-width: 920px) { .file-grid { grid-template-columns: minmax(0, 1fr); } .file-form { position: static; } .side-toggle { display: none; } }

.route-cities { color: var(--text-2); font-size: 12.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-cities span { color: var(--muted); margin: 0 3px; }

/* Featured routes */
.ft-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding: 22px 24px; border-radius: 20px; border: 1px solid rgba(241, 201, 51, 0.35);
  background: radial-gradient(600px 220px at 100% 0%, rgba(241, 201, 51, 0.2), transparent 60%), linear-gradient(135deg, #0b2a6e, #0d1b38); }
.ft-hero h2 { margin: 4px 0 4px; font-size: 26px; }
.ft-hero p { margin: 0; color: #c7d3f1; }
.ft-stats { display: flex; gap: 10px; }
.ft-stats > div { min-width: 96px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); text-align: center; }
.ft-stats b { display: block; font-family: var(--mono); font-size: 24px; }
.ft-stats small { font-size: 14px; color: #b6c3e6; }
.ft-stats span { color: #b6c3e6; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ft-legend { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.ft-botw { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(241, 201, 51, 0.3); background: rgba(241, 201, 51, 0.07); }
.ft-botw > svg { width: 20px; height: 20px; color: #f1c933; flex: none; }
.ft-botw div { display: grid; gap: 2px; min-width: 0; }
.ft-botw b small { font-family: var(--mono, ui-monospace, monospace); color: #f1c933; font-weight: 600; margin-left: 4px; }
.ft-botw span { font-size: 13px; color: var(--muted, #9aa3b2); }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.ft-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.ft-card:hover { transform: translateY(-2px); border-color: rgba(241, 201, 51, 0.45); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }
.ft-card.flown { opacity: 0.75; }
.ft-top { display: flex; align-items: center; gap: 8px; }
.ft-mult { padding: 4px 10px; border-radius: 10px; background: var(--yellow); color: #111; font-family: var(--mono); font-weight: 700; font-size: 14px; }
.ft-num { font-family: var(--mono); font-weight: 700; color: var(--text-2); margin-right: auto; }
.ft-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.ft-route .code { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-weight: 700; font-size: 22px; }
.ft-route div[style] .code { justify-content: flex-end; }
.ft-route .city { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-line { display: flex; align-items: center; color: var(--yellow-ink); position: relative; width: 56px; justify-content: center; }
.ft-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-2); }
.ft-line svg { position: relative; background: var(--panel); padding: 0 4px; width: 22px; }
.ft-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.ft-meta b { color: var(--text); font-family: var(--mono); }
.ft-meta b.y { color: var(--yellow-ink); }
.ft-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; }
.ft-past { margin-top: 12px; }
@media (max-width: 760px) { .ft-hero { grid-template-columns: minmax(0, 1fr); } }

/* Bases */
.bs-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; padding: 22px; border-radius: 22px; border: 1px solid rgba(241, 201, 51, 0.3);
  background: radial-gradient(600px 260px at 0% 0%, rgba(241, 201, 51, 0.12), transparent 60%), linear-gradient(140deg, #0b2a6e, #0b1730 70%); }
.bs-info h2 { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; font-size: 32px; letter-spacing: -0.01em; }
.bs-info h2 .flag { width: 1.1em !important; height: 0.82em; }
.bs-info h2 .mono { color: #b6c3e6; font-size: 18px; }
.bs-info p { margin: 0; color: #c7d3f1; font-size: 14px; }
.bs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.bs-stats > div { padding: 11px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); }
.bs-stats b { display: block; font-family: var(--mono); font-size: 22px; }
.bs-stats b.y { color: var(--yellow-ink); }
.bs-stats span { color: #b6c3e6; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.bs-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.bs-map { min-width: 0; }
.bs-map .route-map { margin: 0; height: 100% !important; min-height: 300px; border-color: rgba(255, 255, 255, 0.1); }
.bs-net { display: block; width: 100%; height: 100%; min-height: 260px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(circle at 50% 45%, rgba(111, 155, 255, 0.12), rgba(0, 0, 0, 0.25)); }
.bs-map-empty { height: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, 0.18); color: #b6c3e6; font-size: 14px; text-align: center; padding: 20px; }
.bs-map-empty svg { width: 30px; height: 30px; color: var(--yellow-ink); }
.bs-transfer { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(111, 155, 255, 0.45); background: rgba(111, 155, 255, 0.08); }
.bs-transfer-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(111, 155, 255, 0.18); color: var(--blue); flex: 0 0 auto; }
.bs-transfer b { color: var(--blue); }
.bs-transfer p { margin: 4px 0 10px; color: var(--text-2); font-size: 13.5px; }
.bs-transfer.here { border-color: rgba(241, 201, 51, 0.5); background: rgba(241, 201, 51, 0.08); }
.bs-transfer.here .bs-transfer-ico { background: var(--yellow-soft); color: var(--yellow-ink); }
.bs-transfer.here b { color: var(--yellow-ink); }
.bs-transfer.here p { margin-bottom: 0; }
.bs-transfer-routes { display: flex; gap: 8px; flex-wrap: wrap; }
.bs-rules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bs-rule { padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.bs-rule .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--panel-2); color: var(--text-2); margin-bottom: 12px; }
.bs-rule .ic svg { width: 19px; height: 19px; }
.bs-rule .ic.green { background: rgba(60, 207, 122, 0.12); color: var(--green); }
.bs-rule .ic.red { background: rgba(255, 93, 93, 0.12); color: var(--red); }
.bs-rule .ic.blue { background: rgba(111, 155, 255, 0.14); color: var(--blue); }
.bs-rule .ic.yellow { background: var(--yellow-soft); color: var(--yellow-ink); }
.bs-rule > b { display: block; font-size: 14.5px; line-height: 1.3; margin-bottom: 6px; }
.bs-rule p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
/* Inside the text: a bold word stays in the line; a multiplier is a small inline pill. */
.bs-rule p b { color: var(--text-2); font-weight: 600; }
.bs-rule p .chip { display: inline-flex; height: auto; padding: 0 7px; margin: 0 1px; font-size: 11.5px; line-height: 18px; vertical-align: 1px; }
.bs-country { margin-bottom: 20px; }
.bs-country h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; }
.bs-country h3 span { color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.bs-hub { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); transition: border-color 0.15s; }
.bs-hub:hover { border-color: var(--line-2); }
.bs-hub.mine { border-color: rgba(60, 207, 122, 0.55); background: linear-gradient(160deg, rgba(60, 207, 122, 0.08), var(--panel) 60%); }
.bs-hub.moving { border-color: rgba(111, 155, 255, 0.55); }
.bs-hub .top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.bs-hub .top b { display: block; font-size: 15px; }
.bs-hub .top .mono { color: var(--muted); font-size: 12px; }
.bs-hub .name { color: var(--text-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-hub .nums { display: flex; gap: 12px; color: var(--muted); font-size: 12px; }
.bs-hub .nums span { display: inline-flex; align-items: center; gap: 5px; }
.bs-hub .act { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.book-btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 1180px) { .bs-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bs-rules > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 920px) { .bs-hero { grid-template-columns: minmax(0, 1fr); } .bs-map .route-map { min-height: 240px; } }
@media (max-width: 560px) { .bs-rules { grid-template-columns: minmax(0, 1fr); } .bs-info h2 { font-size: 26px; } .bs-transfer { flex-wrap: wrap; } }
.base-notice { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; font-size: 13px; }
/* Base rules card (File page, route drawer) */
.bn { --bn: var(--text-2); --bn-soft: var(--panel-2); --bn-line: var(--line-2); margin: 14px 0 4px; border-radius: 14px; border: 1px solid var(--bn-line); background: linear-gradient(160deg, var(--bn-soft), transparent 70%); overflow: hidden; }
.bn.green { --bn: var(--green); --bn-soft: rgba(60, 207, 122, 0.1); --bn-line: rgba(60, 207, 122, 0.35); }
.bn.blue { --bn: var(--blue); --bn-soft: rgba(111, 155, 255, 0.12); --bn-line: rgba(111, 155, 255, 0.38); }
.bn.red { --bn: var(--red); --bn-soft: rgba(255, 93, 93, 0.1); --bn-line: rgba(255, 93, 93, 0.35); }
.bn.amber { --bn: var(--amber); --bn-soft: rgba(255, 181, 71, 0.1); --bn-line: rgba(255, 181, 71, 0.35); }
.bn.yellow { --bn: var(--yellow); --bn-soft: var(--yellow-soft); --bn-line: rgba(241, 201, 51, 0.35); }
.bn:first-child { margin-top: 0; }
.bn-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.bn-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; color: var(--bn); background: var(--bn-soft); border: 1px solid var(--bn-line); }
.bn-ic svg { width: 17px; height: 17px; }
.bn-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bn-txt b { font-size: 14px; color: var(--text); }
.bn-txt small { color: var(--muted); font-size: 12.5px; }
.bn-mult { font-family: var(--mono); font-weight: 800; font-size: 18px; color: var(--bn); flex: 0 0 auto; }
.bn-confirm { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-top: 1px solid var(--bn-line); background: rgba(0, 0, 0, 0.18); cursor: pointer; }
.bn-confirm input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bn-switch { position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line-2); flex: 0 0 auto; margin-top: 1px; transition: background 0.15s, border-color 0.15s; }
.bn-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s; }
.bn-confirm input:checked + .bn-switch { background: var(--bn); border-color: var(--bn); }
.bn-confirm input:checked + .bn-switch i { transform: translateX(16px); background: #111; }
.bn-confirm input:focus-visible + .bn-switch { outline: 2px solid var(--bn); outline-offset: 2px; }
.bn-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bn-label b { font-size: 13.5px; color: var(--text); }
.bn-label small { color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.bn-foot { padding: 0 10px 10px 58px; margin-top: -6px; }
.base-notice .leave { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 93, 93, 0.4); background: rgba(255, 93, 93, 0.06); color: var(--text-2); cursor: pointer; }
.base-notice .leave input { width: 18px; height: 18px; accent-color: var(--red); margin-top: 1px; flex: 0 0 auto; }
.base-notice .leave.free { border-color: rgba(255, 181, 71, 0.4); background: rgba(255, 181, 71, 0.06); }
.base-notice .leave.free input { accent-color: var(--amber); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .cols-4, .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .topbar { padding: 10px 16px; }
  .content { padding: 18px 16px 110px; }
  .cols-3, .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .hero { padding: 20px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-mini { display: block; }
  .top-btn.deck-link, .me-code { display: none; }
  .me-btn { padding: 0 4px; }
  .topbar { gap: 8px; }
  .route-table { display: none; }
  .route-cards { display: block; }
  .filters-toggle { display: inline-flex; }
  .toolbar.collapsible:not(.open) > :not(.always) { display: none; }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .steps .step-sep { display: none; }
  .deck-strip { padding: 10px 14px; }
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--tabbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border: 0; background: none; color: var(--muted); font-size: 10.5px; font-weight: 600; border-radius: 10px; }
  .bottom-nav svg { width: 21px; height: 21px; }
  .bottom-nav [aria-current="page"] { color: var(--yellow-ink); }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-art { display: none; }
  .page-head h1 { font-size: 24px; }
  .table td, .table th { padding: 10px 14px; }
}
@media (max-width: 560px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat .v { font-size: 22px; }
  .hero h2 { font-size: 22px; }
  .row-item { padding: 12px 14px; }
  .kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .topbar .crumb { display: none; }
  .top-btn .label-text, .top-btn .kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Bases dashboard ---------- */
.bd { display: grid; gap: 14px; }
.bd-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; padding: 20px; border-radius: 20px; border: 1px solid rgba(241, 201, 51, 0.3);
  background: radial-gradient(600px 260px at 0% 0%, rgba(241, 201, 51, 0.12), transparent 60%), linear-gradient(140deg, #0b2a6e, #0b1730 70%); }
.bd-id { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.bd-id h2 { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; font-size: 34px; letter-spacing: -0.01em; }
.bd-id h2 .flag { width: 1.1em !important; height: 0.82em; }
.bd-id h2 .mono { color: #b6c3e6; font-size: 18px; }
.bd-id p { margin: 0; color: #c7d3f1; font-size: 14px; }
.bd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.bd-chips .chip svg { width: 13px; height: 13px; }
.bd-confirm { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #e3e9fb; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.bd-hero .bs-map .route-map { min-height: 260px; }
.bd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bd-kpi { display: flex; flex-direction: column; padding: 16px 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.bd-kpi .k { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bd-kpi .k svg { width: 15px; height: 15px; }
.bd-kpi .v { margin-top: 6px; font-family: var(--mono); font-size: 26px; font-weight: 700; line-height: 1.15; }
.bd-kpi .s { margin-top: auto; padding-top: 6px; color: var(--muted); font-size: 12px; }
.bd-kpi.hl { border-color: rgba(60, 207, 122, 0.35); background: linear-gradient(160deg, rgba(60, 207, 122, 0.09), var(--panel) 65%); }
.bd-kpi.hl .v { color: var(--green); }
.bd-spark { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin-top: 10px; }
.bd-spark i { flex: 1; border-radius: 3px; background: var(--panel-2); min-height: 3px; }
.bd-spark i.on { background: var(--yellow); }
.bd-bar { height: 6px; margin-top: 12px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.bd-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--amber), var(--yellow)); }
.bd-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 12px; }
/* Cards side by side share one height: lists start at the top, footers sit at the bottom. */
.bd-cols > .card, .st-cols > .card { display: flex; flex-direction: column; }
.bd-cols > .card > .bd-list, .st-cols > .card > .bd-list, .bd-cols > .card > .empty, .st-cols > .card > .empty, .st-cols > .card > .st-when { flex: 1; }
.bd-cols > .card > .empty, .st-cols > .card > .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bd-list { display: flex; flex-direction: column; gap: 2px; }
.bd-list > .bd-foot { margin-top: auto; }
.bd-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; margin: 0 -8px; border-radius: 10px; color: inherit; text-decoration: none; min-width: 0; }
a.bd-row:hover { background: var(--panel-2); }
.bd-row.me { background: var(--yellow-soft); }
.bd-row .name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bd-row .name b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row .name .mono { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row .n { font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.bd-row .rank { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); font-size: 11px; flex: 0 0 auto; }
.bd-row .flag { flex: 0 0 auto; }
.bd-meter { flex: 0 0 70px; height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.bd-meter i { display: block; height: 100%; border-radius: inherit; background: var(--yellow); }
.bd-foot { font-size: 11.5px; padding-top: 8px; }
.bd-empty { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 20px; border: 1px dashed rgba(241, 201, 51, 0.4); background: var(--yellow-soft); }
.bd-empty .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(241, 201, 51, 0.16); color: var(--yellow-ink); flex: 0 0 auto; }
.bd-empty h2 { margin: 0 0 4px; font-size: 20px; }
.bd-empty p { margin: 0; color: var(--text-2); font-size: 14px; }
.bd-rules { margin-top: 14px; }
.bd-rules .bs-rule { background: var(--panel-2); border-color: transparent; }
.bs-rule .ic.amber { background: rgba(255, 181, 71, 0.12); color: var(--amber); }
#pick { scroll-margin-top: 80px; }
@media (max-width: 1180px) { .bd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bd-cols > :last-child:nth-child(odd) { grid-column: 1 / -1; } .bd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 920px) { .bd-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .bd-cols { grid-template-columns: minmax(0, 1fr); } .bd-id h2 { font-size: 27px; } .bd-empty { flex-wrap: wrap; } }
@media (max-width: 420px) { .bd-kpis { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Stats ---------- */
.st { display: grid; gap: 14px; }
.st-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1180px) { .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bd-kpi.y { border-color: rgba(241, 201, 51, 0.4); background: linear-gradient(160deg, rgba(241, 201, 51, 0.1), var(--panel) 65%); }
.bd-kpi.y .v { color: var(--yellow-ink); }
.st-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; height: 190px; align-items: end; }
.st-months .col, .st-bars .col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.st-months .val { font-size: 11px; color: var(--text-2); height: 14px; line-height: 14px; }
.st-months .bar, .st-bars .bar { flex: 1; height: auto; width: 100%; display: flex; align-items: flex-end; border-radius: 8px; background: var(--panel-2); overflow: hidden; }
.st-months .bar i, .st-bars .bar i { display: block; width: 100%; border-radius: 8px 8px 0 0; background: rgba(241, 201, 51, 0.55); transition: height 0.4s; }
.st-months .bar i.best, .st-bars .bar i.best { background: var(--yellow); }
.st-months .col.now .lbl { color: var(--yellow-ink); font-weight: 700; }
.st-months .lbl, .st-bars .lbl { font-size: 11px; color: var(--muted); white-space: nowrap; height: 14px; line-height: 14px; overflow: visible; }
.st-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-cols.two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.st-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-2); color: var(--text-2); flex: 0 0 auto; }
.st-ico svg { width: 14px; height: 14px; }
.st-when { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; }
.st-when .eyebrow { font-size: 10.5px; margin-bottom: 8px; }
.st-bars { display: flex; gap: 6px; height: 130px; }
.st-bars .col { flex: 1; }
.st-bars.thin { gap: 2px; }
.st-bars.thin .bar, .st-bars.thin .bar i { border-radius: 3px 3px 0 0; }
.bd-row .n.neg { color: var(--red); }
@media (max-width: 1180px) { .st-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-cols > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 760px) { .st-cols, .st-cols.two, .st-when { grid-template-columns: minmax(0, 1fr); } .st-months { gap: 4px; } .st-months .val { font-size: 9.5px; } }

/* ---------- Leaderboard ---------- */
.lb { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.lb-main { display: grid; gap: 12px; min-width: 0; }
.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; padding: 22px 18px 0; border-radius: 20px; border: 1px solid rgba(241, 201, 51, 0.3);
  background: radial-gradient(500px 220px at 50% 0%, rgba(241, 201, 51, 0.16), transparent 70%), linear-gradient(160deg, #0b2a6e, #0b1730 75%); overflow: hidden; }
.lb-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.lb-step b { font-size: 14.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; }
.lb-step .cs { color: #b6c3e6; font-size: 11.5px; }
.lb-step .val { font-size: 17px; font-weight: 700; color: var(--yellow-ink); margin-top: 2px; }
.lb-step .block { width: 100%; margin-top: 10px; display: grid; place-items: center; border-radius: 14px 14px 0 0; font-family: var(--mono); font-weight: 800; font-size: 26px; color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 0; }
.lb-step.p1 .block { height: 96px; background: linear-gradient(180deg, rgba(241, 201, 51, 0.5), rgba(241, 201, 51, 0.12)); color: #111; border-color: rgba(241, 201, 51, 0.6); }
.lb-step.p2 .block { height: 70px; }
.lb-step.p3 .block { height: 52px; }
.lb-step .avatar { width: 52px; height: 52px; font-size: 18px; border: 2px solid rgba(255, 255, 255, 0.25); }
.lb-step.p1 .avatar { width: 68px; height: 68px; font-size: 24px; border-color: var(--yellow); }
.lb-step .crown { width: 26px; height: 26px; color: var(--yellow-ink); margin-bottom: -2px; }
.lb-step.me b { color: var(--yellow-ink); }
.lb-me { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(241, 201, 51, 0.45); background: var(--yellow-soft); font-size: 14px; }
.lb-me .pos { font-size: 18px; font-weight: 800; color: var(--yellow-ink); }
.lb-list { display: grid; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); min-width: 0; }
.lb-row:first-child { border-top: 0; }
.lb-row.me { background: var(--yellow-soft); }
.lb-row .pos { width: 28px; color: var(--muted); font-weight: 700; font-size: 13px; text-align: right; flex: 0 0 auto; }
.lb-row .name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lb-row .name b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .name .mono { color: var(--muted); font-size: 11.5px; }
.lb-row .aux { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.lb-row .val { font-weight: 700; font-size: 14px; min-width: 76px; text-align: right; flex: 0 0 auto; }
@media (max-width: 1000px) { .lb { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lb-podium { padding: 16px 10px 0; gap: 6px; } .lb-step b { font-size: 12.5px; } .lb-step .val { font-size: 14px; } .lb-row .aux { display: none; } }

/* ---------- Passport ---------- */
.pp { display: grid; gap: 14px; }
/* ID page */
.pp-id { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; padding: 20px 22px 18px; border-radius: 22px; border: 1px solid rgba(241, 201, 51, 0.35); position: relative; overflow: hidden;
  background: repeating-radial-gradient(circle at 85% 20%, rgba(241, 201, 51, 0.035) 0 2px, transparent 2px 9px), radial-gradient(700px 300px at 0% 0%, rgba(241, 201, 51, 0.12), transparent 60%), linear-gradient(140deg, #0b2a6e, #0b1730 70%); }
.pp-id-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-id-head { display: flex; align-items: center; gap: 10px; }
.pp-id-head img { width: 26px; height: 26px; }
.pp-id-head span { color: #c7d3f1; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.pp-id-head b { margin-left: auto; color: var(--yellow-ink); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.pp-id-body { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.pp-photo { width: 104px; height: 128px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; border: 2px solid rgba(241, 201, 51, 0.5); background: #0b1730; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.pp-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); }
.pp-photo span { font-size: 42px; font-weight: 800; color: var(--yellow-ink); }
.pp-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 0; flex: 1; min-width: 0; }
.pp-fields .wide { grid-column: 1 / -1; }
.pp-fields dt { color: #8fa1cc; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.pp-fields dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-fields .wide dd { font-size: 22px; font-weight: 700; }
.pp-fields dd .mono { color: #b6c3e6; font-size: 12px; }
.pp-mrz { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.15); color: rgba(199, 211, 241, 0.55); font-size: 13px; letter-spacing: 0.14em; white-space: nowrap; overflow: hidden; }
.pp-rings { display: flex; gap: 14px; align-items: center; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.pp-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 92px; }
.pp-ring .dial { position: relative; width: 84px; height: 84px; }
.pp-ring svg { width: 84px; height: 84px; display: block; }
.pp-ring .track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 7; }
.pp-ring .fill { fill: none; stroke: var(--yellow); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray 0.6s; }
.pp-ring .dial b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.pp-ring .dial b small { font-size: 11px; color: #b6c3e6; margin: 6px 0 0 1px; }
.pp-ring .lbl { margin-top: 6px; color: #e3e9fb; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pp-ring .sub { color: #8fa1cc; font-size: 11px; }
/* Map */
.pp-map { position: relative; height: clamp(380px, 58vh, 600px); border-radius: 20px; border: 1px solid var(--line); background: #0b1730; overflow: hidden; }
.pp-map-bar { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.pp-map-bar > * { pointer-events: auto; }
.pp-legend { display: flex; gap: 12px; padding: 7px 11px; border-radius: 10px; background: rgba(11, 23, 48, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; color: #c7d3f1; backdrop-filter: blur(6px); }
.pp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pp-legend i { width: 10px; height: 10px; border-radius: 3px; background: #3d6ff0; }
.pp-legend i.v { background: var(--yellow); }
.pp-legend i.o { background: #1a1b1f; border: 1px solid rgba(255, 255, 255, 0.2); }
.pp-svg { position: absolute; inset: 0; }
.pp-svg > svg { display: block; }
.pp-svg.empty, .pp-svg-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; color: #b6c3e6; font-size: 14px; }
.pp-svg.empty svg, .pp-svg-wait svg { width: 30px; height: 30px; color: var(--yellow-ink); }
.pp-svg > .route-map { position: absolute; inset: 0; height: auto !important; margin: 0; border: 0; border-radius: 0; }
.pp-svg .sea { fill: #0b1730; }
.pp-svg .land { fill: #0f1626; stroke: rgba(255, 255, 255, 0.05); stroke-width: 0.6; transition: fill 0.15s; }
.pp-svg .land.n { fill: #3159c4; stroke: rgba(157, 182, 255, 0.35); cursor: pointer; }
.pp-svg .land.v { fill: #f1c933; stroke: rgba(11, 23, 48, 0.6); stroke-width: 0.8; cursor: pointer; }
.pp-svg .land.n:hover, .pp-svg .land.n.focus { fill: #4673e6; }
.pp-svg .land.v:hover, .pp-svg .land.v.focus { fill: #ffe17a; }
.pp-svg .apt { fill: #0b1730; stroke: #fff; stroke-width: 1.2; pointer-events: none; }
.pp-svg .lbl { fill: #2a2006; font-weight: 700; text-anchor: middle; dominant-baseline: middle; pointer-events: none; font-family: Poppins, sans-serif; }
.pp-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 12px)); display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; background: rgba(11, 23, 48, 0.95); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 12.5px; white-space: nowrap; pointer-events: none; }
.pp-tip span { color: #b6c3e6; }
.pp-tip.off { opacity: 0.85; }
.pp-tip.off span { color: #8a93a8; }
.pp-card { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: min(330px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(11, 23, 48, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); }
.pp-card .head { display: flex; align-items: center; gap: 8px; }
.pp-card .head b { font-size: 16px; flex: 1; min-width: 0; }
.pp-card .head .chip svg { width: 12px; height: 12px; }
.pp-card .facts { display: flex; gap: 14px; color: #c7d3f1; font-size: 12.5px; flex-wrap: wrap; }
.pp-card .facts span { display: inline-flex; align-items: center; gap: 5px; }
.pp-card .apts { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-card .apts a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: var(--text); font-size: 12px; text-decoration: none; }
.pp-card .apts a:hover { background: rgba(255, 255, 255, 0.12); }
.pp-card .apts .mono { color: var(--muted); font-size: 11px; }
.pp-card p { margin: 0; font-size: 13px; }
/* Stamps and continents */
.pp-bottom { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.pp-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px 12px; padding: 6px 2px 4px; }
.pp-stamp { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.pp-stamp .ring { width: 124px; height: 124px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px; text-align: center;
  border: 2.5px solid rgba(241, 201, 51, 0.6); box-shadow: inset 0 0 0 4px #1b1c1f, inset 0 0 0 5.5px rgba(241, 201, 51, 0.35); background: radial-gradient(circle, rgba(241, 201, 51, 0.08), transparent 70%); transition: transform 0.15s, border-color 0.15s; }
.pp-stamp.r0 .ring { transform: rotate(-8deg); } .pp-stamp.r1 .ring { transform: rotate(5deg); } .pp-stamp.r2 .ring { transform: rotate(-3deg); } .pp-stamp.r3 .ring { transform: rotate(9deg); }
.pp-stamp:hover .ring, .pp-stamp.on .ring { transform: rotate(0) scale(1.05); border-color: var(--yellow); }
.pp-stamp .flag { width: 1.6em !important; height: 1.2em; border-radius: 2px; }
.pp-stamp b { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.15; max-width: 92px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; }
.pp-stamp .when { color: var(--yellow-ink); font-size: 11px; font-weight: 700; }
.pp-stamp .via { color: var(--muted); font-size: 10px; letter-spacing: 0.1em; }
.pp-conts { display: flex; flex-direction: column; }
.pp-cont { padding: 12px 0; border-top: 1px solid var(--line); }
.pp-cont:first-of-type { border-top: 0; padding-top: 0; }
.pp-cont header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pp-cont header b { font-size: 14.5px; }
.pp-cont header span { color: var(--muted); font-size: 12px; }
.pp-bar { height: 5px; border-radius: 99px; background: var(--panel-2); overflow: hidden; margin-bottom: 10px; }
.pp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--yellow); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chips + .pp-more { margin-top: 8px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 8px; border: 1px dashed var(--line-2); background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; transition: border-color 0.15s, background 0.15s; }
.pp-chip .flag { width: 1.15em !important; filter: grayscale(0.85); opacity: 0.7; }
.pp-chip:hover, .pp-chip.focus { border-color: var(--muted); color: var(--text-2); }
.pp-chip.on { border: 1px solid rgba(241, 201, 51, 0.45); background: var(--yellow-soft); color: var(--text); }
.pp-chip.on .flag { filter: none; opacity: 1; }
.pp-chip.on:hover, .pp-chip.on.focus { border-color: var(--yellow); background: rgba(241, 201, 51, 0.2); }
.pp-more { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pp-more:hover { color: var(--text-2); }
.pp-more svg { width: 15px; height: 15px; transition: transform 0.15s; }
.pp-more svg.up { transform: rotate(180deg); }
.pp-more + .pp-chips { margin-top: 8px; }
.pp-none { margin: 0; font-size: 12.5px; }
/* New stamp (File page) */
.new-stamp { display: flex; align-items: center; gap: 16px; margin: 6px auto 18px; padding: 14px 18px 14px 14px; max-width: 460px; border-radius: 18px; border: 1px solid rgba(241, 201, 51, 0.45); background: var(--yellow-soft); color: var(--text); text-decoration: none; text-align: left; }
.new-stamp .ring { width: 96px; height: 96px; flex: 0 0 auto; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transform: rotate(-8deg);
  border: 2.5px solid var(--yellow); box-shadow: inset 0 0 0 4px #1b1c1f, inset 0 0 0 5.5px rgba(241, 201, 51, 0.5); animation: stamp-in 0.5s cubic-bezier(.2, 1.4, .4, 1); }
.new-stamp .ring .flag { width: 1.5em !important; }
.new-stamp .ring b { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; max-width: 76px; text-align: center; line-height: 1.15; }
.new-stamp .ring .mono { color: var(--yellow-ink); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.new-stamp .txt { font-size: 14px; font-weight: 600; }
@keyframes stamp-in { from { transform: rotate(-30deg) scale(1.8); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
@media (max-width: 1100px) { .pp-id { grid-template-columns: minmax(0, 1fr); } .pp-rings { padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); justify-content: space-around; } .pp-bottom { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .pp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-photo { width: 80px; height: 100px; } .pp-id-body { gap: 12px; } .pp-fields .wide dd { font-size: 18px; } .pp-mrz { font-size: 10.5px; } .pp-map { height: 360px; } }
@media (max-width: 460px) { .pp-id-body { flex-direction: column; } .pp-ring { min-width: 0; } .pp-ring .dial, .pp-ring svg { width: 72px; height: 72px; } .pp-ring .dial b { font-size: 20px; } .pp-card { left: 8px; right: 8px; bottom: 8px; width: auto; } .pp-stamp .ring { width: 110px; height: 110px; } }

/* Routes: country filter (from the Passport) */
.country-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(241, 201, 51, 0.35); background: var(--yellow-soft); }
.country-filter .flag { width: 1.5em !important; height: 1.1em; border-radius: 2px; }
.country-filter b { font-size: 15px; }
.country-filter .seg button { height: 30px; font-size: 12.5px; }
.country-filter .muted { font-size: 13px; }
.country-filter .link-btn { margin-left: auto; }

/* Passport: map + side panel */
.pp-explore { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: stretch; }
.pp-explore .pp-map { height: clamp(420px, 62vh, 620px); }
.pp-panel { display: flex; flex-direction: column; min-width: 0; height: clamp(420px, 62vh, 620px); border-radius: 20px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.pp-next, .pp-country { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior-y: auto; }
.pp-next-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pp-next-head b { font-size: 16px; }
.pp-next-head span { color: var(--muted); font-size: 12px; }
.pp-note { margin: -4px 0 0; font-size: 12.5px; }
.pp-next-list { display: flex; flex-direction: column; gap: 4px; }
.pp-next-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.pp-next-row:hover, .pp-next-row.focus { background: var(--panel-2); border-color: var(--line-2); }
.pp-next-row .flag { width: 1.5em !important; height: 1.1em; border-radius: 2px; flex: 0 0 auto; }
.pp-next-row .name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-next-row .name b { font-size: 14px; }
.pp-next-row .name span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-next-row .go { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.pp-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pp-back:hover { color: var(--text); background: var(--panel-2); }
.pp-back svg { width: 15px; height: 15px; }
.pp-country .head { display: flex; align-items: center; gap: 12px; }
.pp-country .head .flag { width: 2.4em !important; height: 1.8em; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.pp-country .head b { display: block; font-size: 20px; line-height: 1.2; }
.pp-country .head span { color: var(--muted); font-size: 12.5px; }
.pp-stamped { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 99px; background: var(--yellow-soft); border: 1px solid rgba(241, 201, 51, 0.45); color: var(--yellow-ink); font-size: 13px; font-weight: 700; }
.pp-stamped svg { width: 15px; height: 15px; }
.pp-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 4px 0 0; padding: 12px; border-radius: 12px; background: var(--panel-2); }
.pp-kv dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pp-kv dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.pp-kv > div { min-width: 0; }
.pp-sub { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pp-apts { display: flex; flex-direction: column; gap: 4px; }
.pp-apts a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); color: var(--text); text-decoration: none; font-size: 13.5px; }
.pp-apts a:hover { background: var(--line); }
.pp-apts a svg { color: var(--yellow-ink); flex: 0 0 auto; }
.pp-apts a span:first-of-type { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-apts .mono { color: var(--muted); font-size: 12px; }
.pp-apts em { font-style: normal; color: var(--muted); font-size: 12px; }
.pp-todo { padding: 12px; border-radius: 12px; background: rgba(61, 111, 240, 0.1); border: 1px solid rgba(61, 111, 240, 0.35); font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.pp-todo b { color: var(--text); }
.pp-direct { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--panel-2); }
.pp-direct .lbl { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pp-direct .row { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.pp-direct .row > div { display: flex; flex-direction: column; min-width: 0; }
.pp-direct .row b { font-size: 15px; }
.pp-direct .row span { color: var(--muted); font-size: 12.5px; }
.btn.full { width: 100%; margin-top: auto; }
@media (max-width: 1100px) { .pp-explore { grid-template-columns: minmax(0, 1fr); } .pp-panel { height: auto; max-height: none; } .pp-next, .pp-country { overflow: visible; } }
@media (max-width: 680px) { .pp-explore .pp-map { height: 360px; } }

/* Codeshare (purple) */
.chip.purple { color: #b48cff; border-color: rgba(180, 140, 255, 0.4); background: rgba(180, 140, 255, 0.08); }
.bn.purple { --bn: #b48cff; --bn-soft: rgba(180, 140, 255, 0.1); --bn-line: rgba(180, 140, 255, 0.35); }
.pp-legend i.p, .pp-split-row i.p { background: #9b6bff; }
.pp-svg .land.p { fill: #6a48c9; stroke: rgba(190, 160, 255, 0.35); cursor: pointer; }
.pp-svg .land.p:hover, .pp-svg .land.p.focus { fill: #7f5ce0; }
.pp-split { display: flex; flex-direction: column; gap: 6px; }
.pp-split-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); color: var(--text); text-decoration: none; border: 1px solid transparent; }
.pp-split-row:hover { border-color: var(--line-2); }
.pp-split-row i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; background: #3d6ff0; }
.pp-split-row span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-split-row b { font-size: 13.5px; }
.pp-split-row small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-split-row em { font-style: normal; font-family: var(--mono); font-weight: 700; font-size: 14px; }
.pp-split-row svg { width: 15px; height: 15px; color: var(--muted); }
.pp-split > small { font-size: 11.5px; line-height: 1.45; }

/* ---------- Dashboard ---------- */
.dx-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; align-items: center; padding: 20px 22px; border-radius: 20px; border: 1px solid rgba(241, 201, 51, 0.28);
  background: radial-gradient(600px 240px at 0% 0%, rgba(241, 201, 51, 0.1), transparent 60%), linear-gradient(140deg, #0b2a6e, #0b1730 70%); }
.dx-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dx-top { display: flex; align-items: center; gap: 16px; }
.dx-top .avatar.lg { width: 58px; height: 58px; flex: 0 0 auto; border: 2px solid rgba(241, 201, 51, 0.45); }
.dx-hello { min-width: 0; flex: 1; }
.dx-date { color: var(--yellow-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.dx-hello h1 { margin: 2px 0 4px; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #c7d3f1; font-size: 13px; }
.dx-sub b { color: var(--yellow-ink); font-size: 12.5px; }
.dx-sub .mono { color: #b6c3e6; font-size: 12px; }
.dx-harp { display: inline-flex; align-items: center; gap: 5px; }
.dx-harp svg { width: 14px; height: 14px; color: var(--yellow-ink); }
.dx-rank .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; color: #c7d3f1; font-size: 13px; }
.dx-rank .row > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.dx-rank .row > span:first-child { flex: 1; overflow: hidden; }
.dx-rank .row > span:first-child .names { overflow: hidden; text-overflow: ellipsis; }
.dx-rank .row > span:last-child { flex: 0 0 auto; }
.dx-rank .row svg { width: 15px; height: 15px; color: var(--yellow-ink); flex: 0 0 auto; }
.dx-rank .row b { color: var(--text); }
.dx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dx-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-width: 0; border-radius: 14px; background: rgba(9, 15, 32, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); text-decoration: none; transition: border-color 0.15s; }
a.dx-kpi:hover { border-color: rgba(241, 201, 51, 0.45); }
.dx-kpi .k { display: inline-flex; align-items: center; gap: 6px; color: #b6c3e6; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.dx-kpi .k svg { width: 13px; height: 13px; color: var(--yellow-ink); }
.dx-kpi b { font-size: 23px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-kpi small { color: #8fa1cc; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 14px; }
.dx-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dx-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; min-width: 0; overflow: hidden; transition: border-color 0.15s; }
a.dx-card:hover { border-color: rgba(241, 201, 51, 0.45); }
.dx-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dx-tag svg { width: 14px; height: 14px; color: var(--yellow-ink); }
.dx-next.on { border-color: rgba(241, 201, 51, 0.4); background: linear-gradient(160deg, rgba(241, 201, 51, 0.08), var(--panel) 60%); }
.dx-route { display: flex; align-items: center; gap: 10px; }
.dx-route b { font-size: 24px; letter-spacing: 0.02em; }
.dx-route .line { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--yellow-ink); min-width: 24px; }
.dx-route .line i { flex: 1; height: 0; border-top: 2px dashed var(--line-2); }
.dx-route .line svg { width: 16px; height: 16px; transform: rotate(45deg); }
.dx-cities { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-meta { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dx-next .btn, .dx-next .book-pair { margin-top: auto; align-self: flex-start; }
.dx-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dx-big b { font-size: 26px; line-height: 1; }
.dx-big span { color: var(--muted); font-size: 12.5px; }
@media (max-width: 1100px) { .dx-head { grid-template-columns: minmax(0, 1fr); } .dx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-row:not(.two) > :first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .dx-head { padding: 16px; gap: 14px; }
  .dx-top { flex-wrap: wrap; gap: 12px; }
  .dx-top .avatar.lg { width: 46px; height: 46px; }
  .dx-hello h1 { font-size: 21px; }
  .dx-kpis { gap: 8px; }
  .dx-kpi { padding: 10px 12px; }
  .dx-kpi b { font-size: 19px; }
  .dx-row, .dx-row.two { grid-template-columns: minmax(0, 1fr); }

  .dx-route b { font-size: 21px; }
}

/* Dashboard: live flight (one discreet line) */
.dx-live { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 14px; border: 1px solid rgba(60, 207, 122, 0.3); background: var(--panel); color: var(--text); text-decoration: none; min-width: 0; transition: border-color 0.15s; }
.dx-live:hover { border-color: rgba(60, 207, 122, 0.6); }
.dx-live-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; flex: 0 0 auto; }
.dx-live-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: live-dot 1.4s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: 0.3; } }
.dx-live-cs { color: var(--text-2); font-size: 12.5px; flex: 0 0 auto; }
.dx-live-route { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.dx-live-route b { font-size: 13.5px; flex: 0 0 auto; }
.dx-track { position: relative; flex: 1; min-width: 40px; height: 3px; border-radius: 99px; background: var(--line-2); }
.dx-track span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--green); transition: width 1s ease; }
.dx-track i { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; color: var(--green); transition: left 1s ease; }
.dx-track i svg { width: 15px; height: 15px; transform: rotate(45deg); }
.dx-live-facts { color: var(--muted); font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.dx-live .go { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
@media (max-width: 760px) {
  .dx-live { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .dx-live-cs { display: none; }
  .dx-live-route { order: 3; flex-basis: 100%; }
  .dx-live-facts { margin-left: auto; font-size: 11.5px; }
}
/* Dashboard: routes of the week */
.dx-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dx-feat-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid transparent; cursor: pointer; min-width: 0; transition: border-color 0.15s; }
.dx-feat-card:hover { border-color: rgba(241, 201, 51, 0.4); }
.dx-feat-card .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dx-feat-card .cities { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-feat-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.dx-feat-card .meta { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
@media (max-width: 760px) {
  .dx-feat { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -4px; padding: 0 4px 4px; overscroll-behavior-x: contain; }
  .dx-feat-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* Dashboard: richer header, sparklines, activity, passport, entrance */
.dx-head { position: relative; overflow: hidden; isolation: isolate; }
.dx-head::before, .dx-head::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; border-radius: 50%; filter: blur(70px); opacity: 0.35; pointer-events: none; }
.dx-head::before { background: #2b5bff; top: -220px; right: 10%; animation: dx-drift 14s ease-in-out infinite alternate; }
.dx-head::after { background: #f1c933; bottom: -300px; left: -120px; opacity: 0.16; animation: dx-drift 18s ease-in-out infinite alternate-reverse; }
@keyframes dx-drift { to { transform: translate(-60px, 40px) scale(1.15); } }
.dx-kpi { position: relative; }
.dx-streak { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 140, 50, 0.1); color: #ffad5c; font-size: 12px; font-weight: 700; }
.dx-streak svg { width: 13px; height: 13px; }
.dx-heat { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 3px; }
.dx-heat .col { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.dx-heat i, .dx-heat-foot .legend i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--panel-2); }
.dx-heat i.l1, .dx-heat-foot i.l1 { background: rgba(241, 201, 51, 0.28); }
.dx-heat i.l2, .dx-heat-foot i.l2 { background: rgba(241, 201, 51, 0.5); }
.dx-heat i.l3, .dx-heat-foot i.l3 { background: rgba(241, 201, 51, 0.75); }
.dx-heat i.l4, .dx-heat-foot i.l4 { background: #f1c933; }
.dx-heat i.fut { opacity: 0.25; }
.dx-heat i.today { outline: 1.5px solid #fff; outline-offset: 1px; }
.dx-heat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.dx-heat-foot .legend { display: inline-flex; align-items: center; gap: 3px; }
.dx-heat-foot .legend i { width: 9px; }
.dx-stamps { display: flex; align-items: center; margin-top: auto; padding-top: 4px; }
.dx-stamps .st { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; margin-left: -8px; background: #1b1c1f; border: 2px solid rgba(241, 201, 51, 0.6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.dx-stamps .st:first-child { margin-left: 0; border-color: var(--yellow); }
.dx-stamps .st .flag { width: 1.35em !important; height: 1em; border-radius: 2px; }
.dx-page > * { animation: dx-in 0.5s cubic-bezier(.2, .7, .3, 1) both; }
.dx-page > :nth-child(2) { animation-delay: 0.06s; } .dx-page > :nth-child(3) { animation-delay: 0.12s; } .dx-page > :nth-child(4) { animation-delay: 0.18s; } .dx-page > :nth-child(5) { animation-delay: 0.24s; }
@keyframes dx-in { from { opacity: 0; transform: translateY(10px); } }

/* Dashboard: figure boxes */
.dx-kpi { display: grid; grid-template-rows: auto auto auto 1fr; gap: 3px; padding: 13px 14px 12px; }
.dx-kpi .v { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.dx-kpi .v b { font-size: 26px; line-height: 1.1; }
.dx-kpi .v em { font-style: normal; font-family: var(--mono); color: #8fa1cc; font-size: 13px; font-weight: 600; }
.dx-kpi small { display: block; color: #b6c3e6; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-kpi small b { color: var(--text); font-weight: 600; }
.dx-kpi .viz { display: flex; align-items: flex-end; height: 22px; margin-top: 6px; }
.dx-delta { font-style: normal; margin-left: 6px; font-size: 10px; color: #8fa1cc; }
.dx-delta.up { color: var(--green); } .dx-delta.down { color: #ff8a8a; }
.dx-mbars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; align-items: end; width: 100%; height: 100%; }
.dx-mbars i { display: block; border-radius: 3px 3px 1px 1px; background: rgba(241, 201, 51, 0.32); }
.dx-mbars i.now { background: var(--yellow); box-shadow: 0 0 10px rgba(241, 201, 51, 0.35); }
.dx-prog { display: block; width: 100%; height: 6px; margin-bottom: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.dx-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f1c933, #ffe17a); }
/* Dashboard: passport (cover style) */
.dx-pass { gap: 14px; }
.dx-pass-latest { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.dx-pass-latest b { color: var(--text); }
.dx-pass-head { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.dx-pass-head img { width: 28px; height: 28px; }
.dx-pass-head span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dx-pass-head b { color: var(--yellow-ink); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; }
.dx-pass-head small { color: var(--muted); font-size: 11px; }
.dx-pass-head svg { width: 18px; height: 18px; color: #8fa1cc; }
.dx-pass-head:hover svg { color: var(--yellow-ink); }
.dx-pass-count { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.dx-pass-count > b { grid-row: 1 / 3; font-size: 40px; line-height: 1; color: var(--yellow-ink); }
.dx-pass-count > span { color: var(--text-2); font-size: 13px; }
.dx-stamps { display: flex; align-items: center; margin-top: 6px; }
.dx-stamps .st { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-left: -7px; background: var(--panel-2); border: 2px solid rgba(241, 201, 51, 0.55); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.dx-stamps .st:first-child { margin-left: 0; border-color: var(--yellow); }
.dx-stamps .st .flag { width: 1.15em !important; height: 0.85em; border-radius: 2px; }
.dx-nextstamp { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 12px; border-radius: 14px; background: rgba(9, 15, 32, 0.6); border: 1px dashed rgba(241, 201, 51, 0.4); }
.dx-nextstamp .lbl { color: var(--yellow-ink); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.dx-nextstamp .row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dx-nextstamp .row > .flag { width: 1.7em !important; height: 1.25em; border-radius: 3px; flex: 0 0 auto; }
.dx-nextstamp .txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dx-nextstamp .txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-nextstamp .txt small { color: #8fa1cc; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-pass-note { margin: auto 0 0; font-size: 12.5px; }
/* Dashboard: rows of two cards with one height */
.dx-pair { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.dx-pair.one { grid-template-columns: minmax(0, 1fr); }
.dx-pair > .card { display: flex; flex-direction: column; margin: 0; }
.dx-pair > .card > .list, .dx-pair > .card > .dx-feat { flex: 1; }
@media (max-width: 1100px) { .dx-pair { grid-template-columns: minmax(0, 1fr); } }
.dx-kpi small b { font-size: inherit; line-height: inherit; font-family: inherit; }
.dx-heat i { border-radius: 2px; }
@media (max-width: 760px) { .dx-heat, .dx-heat .col { gap: 2px; } }
.dx-next .dx-cities .flag { width: 1.2em !important; border-radius: 2px; margin-right: 2px; }
/* Dashboard: NOTAMs and suggestion tag */
.dx-count { margin-left: 8px; padding: 1px 7px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font-size: 11px; letter-spacing: 0; }
.dx-notam { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 18px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; transition: background 0.15s; }
.dx-notam:first-child { border-top: 0; }
.dx-notam:hover { background: var(--panel-2); }
.dx-notam .ic { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); }
.dx-notam .ic.new { background: var(--yellow-soft); color: var(--yellow-ink); }
.dx-notam .ic svg { width: 16px; height: 16px; }
.dx-notam .body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.dx-notam .t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dx-notam .t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-notam .t em { font-style: normal; flex: 0 0 auto; padding: 1px 7px; border-radius: 99px; background: var(--yellow); color: #111; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.dx-notam .p { color: var(--muted); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dx-notam .d { color: var(--muted); font-size: 11px; opacity: 0.8; }
.dx-notam .go { width: 16px; height: 16px; color: var(--muted); margin-top: 8px; flex: 0 0 auto; }
.dx-notam-full { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.dx-newstamp { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: var(--yellow-soft); border: 1px solid rgba(241, 201, 51, 0.35); color: var(--yellow-ink); font-size: 11.5px; font-weight: 600; }
.dx-newstamp .flag { width: 1.15em !important; border-radius: 2px; }

/* ---------- Flight deck: steps, start screen, end of flight ---------- */
.fd-flow { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); overflow-x: auto; }
.fd-flow .sep { flex: 1; min-width: 14px; height: 2px; border-radius: 2px; background: var(--line-2); }
.fd-flow .sep.done { background: var(--green); }
.fd-step { display: inline-flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border: 0; border-radius: 99px; background: none; color: var(--muted); text-align: left; flex: 0 0 auto; cursor: pointer; }
.fd-step:disabled { cursor: default; }
.fd-step .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line-2); flex: 0 0 auto; }
.fd-step .n svg { width: 15px; height: 15px; }
.fd-step .l { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.fd-step .l small { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.fd-step.done { color: var(--green); }
.fd-step.done .n { background: rgba(60, 207, 122, 0.12); border-color: rgba(60, 207, 122, 0.45); }
.fd-step.now { color: var(--text); }
.fd-step.now .n { background: var(--yellow); border-color: var(--yellow); color: #111; box-shadow: 0 0 0 4px rgba(241, 201, 51, 0.18); }
.fd-step:not(:disabled):hover .n { border-color: var(--muted); }
.fd-endbtn { flex: 0 0 auto; margin-left: 6px; }
.fd-end { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(60, 207, 122, 0.45); background: radial-gradient(500px 160px at 0% 0%, rgba(60, 207, 122, 0.14), transparent 70%), var(--panel); }
.fd-end .ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; background: rgba(60, 207, 122, 0.14); color: var(--green); }
.fd-end .ic svg { width: 22px; height: 22px; }
.fd-end .txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fd-end .txt b { font-size: 17px; }
.fd-end .txt span { color: var(--text-2); font-size: 13.5px; }
.fd-end .act { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.fd-pick-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px); gap: 18px; align-items: center; padding: 24px; border-radius: 20px; border: 1px solid rgba(241, 201, 51, 0.3); background: radial-gradient(600px 220px at 0% 0%, rgba(241, 201, 51, 0.1), transparent 60%), var(--panel); }
.fd-pick-hero .ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--yellow-soft); color: var(--yellow-ink); align-self: start; }
.fd-pick-hero .ic svg { width: 26px; height: 26px; }
.fd-pick-hero h2 { margin: 0 0 6px; font-size: 24px; }
.fd-pick-hero p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 560px; }
.fd-pick-hero .act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.fd-suggest { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--panel-2); border: 1px dashed rgba(241, 201, 51, 0.4); }
.fd-suggest .lbl { color: var(--yellow-ink); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.fd-suggest .meta { color: var(--muted); font-size: 12.5px; }
.fd-suggest .btn { align-self: flex-start; }
.fd-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.fd-how-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.fd-how-step .n { position: absolute; top: 12px; right: 14px; color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.fd-how-step > svg { width: 20px; height: 20px; color: var(--yellow-ink); }
.fd-how-step b { font-size: 14.5px; }
.fd-how-step p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.fd-free { display: block; margin: 14px auto 0; }
@media (max-width: 1000px) { .fd-pick-hero { grid-template-columns: auto minmax(0, 1fr); } .fd-suggest { grid-column: 1 / -1; } .fd-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .fd-step .l { display: none; }
  .fd-step.now .l { display: flex; }
  .fd-pick-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .fd-pick-hero h2 { font-size: 20px; }
  .fd-how { grid-template-columns: minmax(0, 1fr); }
  .fd-end { flex-wrap: wrap; }
  .fd-end .act { width: 100%; }
  .fd-end .act .btn:first-child { flex: 1; }
}
.fd > .dx-live { width: 100%; margin-bottom: 14px; font: inherit; text-align: left; cursor: pointer; }

/* ---------- Borders: one rounding and one border colour per level ---------- */
/* Dashboard: boxes 16px (var(--radius)), tiles inside 11px; neutral borders, colour only for state. */
.dx-head { border-radius: var(--radius); border-color: rgba(255, 255, 255, 0.08); }
.dx-card, .dx-live { border-radius: var(--radius); }
.dx-kpi, .dx-feat-card, .dx-nextstamp, .fd-suggest, .fd-how-step { border-radius: var(--radius-sm); }
.dx-next.on { border-color: var(--line); }
.dx-live { border-color: rgba(60, 207, 122, 0.28); }
/* Flight deck: full-width bands like its header and tabs, not floating boxes. */
.fd > .fd-flow { margin: 0; padding: 10px 28px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.fd > .fd-end { margin: 0; padding: 14px 28px; border: 0; border-bottom: 1px solid rgba(60, 207, 122, 0.35); border-radius: 0; }
.fd > .dx-live { margin: 0; padding: 9px 28px; border: 0; border-bottom: 1px solid rgba(60, 207, 122, 0.28); border-radius: 0; background: linear-gradient(90deg, rgba(60, 207, 122, 0.07), var(--panel) 40%); }
.fd-pick > .fd-pick-hero, .fd-pick > .fd-how { margin-left: 28px; margin-right: 28px; }
.fd-pick > .fd-pick-hero { margin-top: 22px; border-radius: var(--radius); border-color: var(--line); }
.fd-pick > .fd-how { margin-top: 12px; }
@media (max-width: 680px) {
  .fd > .fd-flow, .fd > .fd-end, .fd > .dx-live { padding-left: 16px; padding-right: 16px; }
  .fd-pick > .fd-pick-hero, .fd-pick > .fd-how { margin-left: 16px; margin-right: 16px; }
}
/* Phones and tablets: no sidebar column, even when the sidebar was collapsed on desktop. */
@media (max-width: 920px) { .app, .app.mini { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .fd-endbtn span { display: none; } .fd-endbtn { padding: 0 10px; } .dx-live .go { display: none; } .fd-flow { gap: 6px; } }
@media (max-width: 680px) { .fd-flow .sep { min-width: 6px; } .fd-step { padding-right: 4px; } .fd-step .n { width: 28px; height: 28px; } }
/* Flight deck header on phones: two compact lines (flight, then controls). */
@media (max-width: 680px) {
  .fd-head { padding: 10px 16px; gap: 10px; }
  .fd-flight { flex: 1 1 100%; gap: 10px; }
  .deck-badge { padding: 3px 8px; font-size: 10px; gap: 4px; }
  .deck-badge svg { width: 12px; height: 12px; }
  .fd-route .route { font-size: 16px; }
  .fd-route .meta { font-size: 12px; }
  .fd-actions { flex-wrap: nowrap; gap: 6px; width: 100%; }
  .fd-actions .seg button { height: 32px; padding: 0 10px; font-size: 12.5px; }
  .fd-setup span { display: none; }
  .fd-actions .fd-setup, .fd-actions .icon-btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; flex: 0 0 auto; }
  .fd-actions .seg { margin-right: auto; }
}
/* Flight deck header on phones: one line (the flight) and an options menu. */
.fd-more { display: none; }
.fd-menu { display: flex; flex-direction: column; gap: 6px; }
.fd-menu .lbl { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.fd-menu .seg { margin-bottom: 8px; }
.fd-menu .nav-link { width: 100%; border: 0; background: var(--panel-2); text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.fd-menu .nav-link small { margin-left: auto; color: var(--muted); font-size: 12px; }
.fd-menu .nav-link.on svg { color: var(--yellow-ink); }
.fd-menu .nav-link.danger, .fd-menu .nav-link.danger svg { color: var(--red); }
@media (max-width: 680px) {
  .fd-head { flex-wrap: nowrap; padding: 10px 16px; }
  .fd-head .deck-badge, .fd-head .fd-actions { display: none; }
  .fd-flight { flex: 1 1 auto; }
  .fd-more { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; flex: 0 0 auto; margin-left: 0; }
}
/* Flight deck tabs: the underline stays inside the bar (no vertical overflow); on phones the 3 tabs share the width. */
.fd-tabs { --tab-pad: 8px; padding-top: var(--tab-pad); padding-bottom: var(--tab-pad); overflow-y: hidden; scrollbar-width: none; }
.fd-tabs::-webkit-scrollbar { display: none; }
.fd-tabs button[aria-current="page"]::after { bottom: calc(-1 * var(--tab-pad)); }
.fd-tabs .short { display: none; }
@media (max-width: 920px) { .fd-tabs { --tab-pad: 6px; } }
@media (max-width: 680px) {
  .fd-tabs { gap: 2px; padding-left: 8px; padding-right: 8px; }
  .fd-tabs button { flex: 1 1 0; justify-content: center; gap: 6px; padding: 0 6px; font-size: 13px; }
  .fd-tabs .full { display: none; }
  .fd-tabs .short { display: inline; }
}
/* Flight options: the aircraft switch splits the width in two. */
.fd-menu .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; }
.fd-menu .seg button { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; font-size: 14px; }
.seg button:focus-visible { outline-offset: -2px; }
/* Keyboard tip: only where there is a keyboard and a mouse. */
@media (max-width: 920px), (hover: none) { .ck-hint { display: none; } }

/* ---------- Crew assistant ---------- */
.ai-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(27, 28, 31, 0.92); color: var(--yellow-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); opacity: 0.85; transition: opacity 0.15s, border-color 0.15s; }
.ai-fab:hover { opacity: 1; border-color: rgba(241, 201, 51, 0.55); }
.ai-fab svg { width: 18px; height: 18px; }
.ai-panel { position: fixed; right: 24px; bottom: 24px; z-index: 70; width: min(410px, calc(100vw - 48px)); height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column;
  border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg, #121316); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); overflow: hidden; animation: dx-in 0.2s ease both; }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, rgba(43, 91, 255, 0.18), transparent 70%); }
.ai-head > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ai-head b { font-size: 14.5px; }
.ai-head small { color: var(--muted); font-size: 11.5px; }
.ai-head .icon-btn { margin-left: 0; width: 32px; height: 32px; }
.ai-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--yellow-soft); color: var(--yellow-ink); flex: 0 0 auto; }
.ai-ic svg { width: 17px; height: 17px; }
.ai-ic.big { width: 46px; height: 46px; border-radius: 14px; }
.ai-ic.big svg { width: 22px; height: 22px; }
.ai-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-hello { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: auto 0; padding: 10px; }
.ai-hello b { font-size: 16px; margin-top: 6px; }
.ai-hello p { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ai-sugs { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ai-sugs button { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
.ai-sugs button:hover { border-color: rgba(241, 201, 51, 0.45); }
.ai-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; word-wrap: break-word; }
.ai-msg.user { align-self: flex-end; background: var(--yellow); color: #111; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.ai-msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ai-msg p { margin: 0 0 8px; } .ai-msg p:last-child { margin-bottom: 0; }
.ai-msg ul { margin: 0 0 8px; padding-left: 18px; } .ai-msg ul:last-child { margin-bottom: 0; }
.ai-msg li { margin: 2px 0; }
.ai-link { display: inline; padding: 0; border: 0; background: none; color: var(--yellow-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ai-link.route { padding: 1px 7px; border-radius: 7px; background: var(--yellow-soft); text-decoration: none; font-family: var(--mono); font-size: 12.5px; }
.ai-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ai-dot 1.2s infinite ease-in-out; }
.ai-typing i:nth-child(2) { animation-delay: 0.15s; } .ai-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-error { align-self: stretch; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 93, 93, 0.08); border: 1px solid rgba(255, 93, 93, 0.35); color: var(--text-2); font-size: 13px; }
.ai-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ai-input textarea { flex: 1; resize: none; min-height: 40px; max-height: 120px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; line-height: 1.35; }
.ai-input textarea:focus { outline: none; border-color: rgba(241, 201, 51, 0.6); }
.ai-input .btn { width: 40px; height: 40px; padding: 0; flex: 0 0 auto; }
.ai-foot { padding: 0 12px 10px; color: var(--muted); font-size: 11px; text-align: center; }
/* On a phone the pages fill the screen: the assistant opens from "More" instead of a button over them. */
@media (max-width: 920px) { .ai-fab { display: none; } }
.more-ai svg { color: var(--yellow-ink); }
@media (max-width: 680px) { .ai-panel { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; } }

/* ---------- Staff tools (Admin: Recruitment, Academy, Careers, Settings) ----------
   No class names starting with "ad-": ad blockers hide them. */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.9s linear infinite; }
.staff-nav { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: flex-end; margin: -6px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.staff-nav-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.staff-nav-cap { width: 100%; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 4px 2px; }
.staff-nav button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--text-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.staff-nav button svg { width: 16px; height: 16px; color: var(--muted); }
.staff-nav button:hover { background: var(--panel); }
.staff-nav button.on { background: var(--yellow-soft); border-color: rgba(241, 201, 51, 0.35); color: var(--yellow-ink); }
.staff-nav button.on svg { color: var(--yellow-ink); }
.hq-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hq-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hq-filters { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.hq-filters button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 11px; border-radius: 9px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.hq-filters button span { font-family: var(--mono); font-size: 11px; padding: 0 6px; border-radius: 6px; background: var(--panel-2); color: var(--text-2); }
.hq-filters button.on { background: var(--yellow); color: #111; }
.hq-filters button.on span { background: rgba(0, 0, 0, 0.15); color: #111; }
.hq-search { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.hq-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.hq-search .input { width: 100%; padding-left: 36px; }
.hq-error { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255, 93, 93, 0.4); background: rgba(255, 93, 93, 0.06); color: #ffc2c2; font-size: 13.5px; }
.hq-error svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--red); }
.hq-person { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text-2); font-weight: 700; }
.hq-person img { width: 100%; height: 100%; object-fit: cover; }
.hq-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hq-who b { display: block; font-weight: 600; }
.hq-who small, .hq-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.hq-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--panel-2); color: var(--yellow-ink); flex-shrink: 0; }
.hq-icon svg { width: 17px; height: 17px; }
.hq-count { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.hq-count svg { width: 14px; height: 14px; }
.hq-chev, .hq-go svg { width: 16px; height: 16px; color: var(--muted); }
.hq-table tbody tr { cursor: pointer; }
.hq-table td.hq-go { width: 32px; padding-left: 0; }
.hq-log tbody tr { cursor: default; }
.hq-log td { white-space: normal; vertical-align: top; }
.hq-log td.nowrap { white-space: nowrap; }
.hq-wrap { display: block; font-weight: 600; max-width: 520px; }
.hq-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hq-head > div { min-width: 0; flex: 1; }
.hq-head b { display: block; font-weight: 600; }
.hq-head small { color: var(--muted); font-size: 12.5px; }
.hq-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hq-kv { margin-bottom: 4px; }
.hq-kv .wide { grid-column: 1 / -1; }
.hq-kv .v.sm { font-family: inherit; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.hq-block { margin-top: 16px; }
.hq-block h4 { margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.hq-block p { margin: 0; color: var(--text-2); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.hq-issues { margin: 0; padding-left: 18px; color: var(--amber); line-height: 1.5; font-size: 13.5px; }
.hq-issues li + li { margin-top: 4px; }
/* Partner (codeshare) flight fields on the File page */
.cs-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.cs-field { display: block; min-width: 0; }
.cs-field .input { width: 100%; }
@media (max-width: 480px) { .cs-fields { grid-template-columns: minmax(0, 1fr); } }
.hq-block > .btn { margin-top: 10px; }
/* Correcting a PIREP (staff drawer) */
.hq-correct-open { margin-top: 16px; }
.hq-correct { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.hq-correct .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; }
.hq-correct .label { display: block; margin: 10px 0 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.hq-correct > .select, .hq-correct-mult .select { width: 100%; }
.hq-correct-mult { display: flex; gap: 8px; }
.hq-correct-mult .select { flex: 1; min-width: 0; }
.hq-correct-mult .input { width: 90px; }
.hq-correct .hq-correct-sum { margin-top: 12px; font-size: 13.5px; }
.hq-edits { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.hq-edits ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.hq-edits li + li { margin-top: 4px; }
.hq-details summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 13.5px; }
.hq-details summary svg { width: 15px; height: 15px; }
.hq-details[open] summary { margin-bottom: 8px; }
.hq-details .select { width: 100%; margin-top: 8px; }
.hq-details pre { white-space: pre-wrap; margin: 0; padding: 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; }
.hq-details dl { margin: 6px 0 0; display: grid; gap: 2px; font-size: 12px; }
.hq-details dl div { display: flex; gap: 8px; }
.hq-details dt { color: var(--muted); }
.hq-details dd { margin: 0; overflow-wrap: anywhere; }
.hq-textarea { width: 100%; height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.hq-copy { display: flex; gap: 8px; margin-top: 10px; }
.hq-copy .input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; }
.hq-attempts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hq-attempts li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; }
.hq-attempts small { margin-left: auto; color: var(--muted); font-size: 12px; }
.hq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.hq-hint { font-size: 12.5px; }
.btn.ghost.danger { background: transparent; color: var(--red); border-color: rgba(255, 93, 93, 0.45); }
.btn.ghost.danger:hover { background: rgba(255, 93, 93, 0.08); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.hq-lead { margin: 0 0 12px; font-size: 13.5px; }
.hq-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hq-form-row .input { min-width: 180px; }
.hq-form-row .grow, .grow { flex: 1; }
.hq-form .input:not(textarea) { width: 100%; }
.hq-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.hq-two .seg { flex-wrap: wrap; }
.hq-pools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.hq-pool { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.hq-pool span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.hq-pool b { font-family: var(--mono); font-size: 24px; }
.hq-pool small { color: var(--muted); font-size: 12px; }
.hq-pool i { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.hq-pool i em { display: block; height: 100%; background: var(--green); }
.hq-pool.amber i em { background: var(--amber); }
.hq-pool.red i em { background: var(--red); }
.hq-pool.red small { color: var(--red); }
.hq-pool.on { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); }
.hq-questions { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.hq-question header { display: flex; align-items: center; gap: 8px; }
.hq-question header .btn { margin-left: auto; }
.hq-question h3 { margin: 10px 0; font-size: 15px; line-height: 1.45; font-weight: 600; }
.hq-question ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.hq-question ol.two { grid-template-columns: 1fr 1fr; }
.hq-question li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--bg-2); color: var(--text-2); font-size: 13px; line-height: 1.4; }
.hq-question li b { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; background: var(--panel-2); font-size: 11px; }
.hq-question li b svg { width: 13px; height: 13px; }
.hq-question li.is-right { background: rgba(60, 207, 122, 0.08); color: var(--text); }
.hq-question li.is-right b { background: var(--green); color: #0b2516; }
.hq-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hq-answers li { display: flex; gap: 8px; }
.hq-answers li button { flex-shrink: 0; width: 42px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-weight: 700; display: grid; place-items: center; }
.hq-answers li button svg { width: 17px; height: 17px; }
.hq-answers li.is-right button { background: var(--green); border-color: var(--green); color: #0b2516; }
.hq-answers li .input { flex: 1; min-width: 0; }
.hq-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.hq-tiles button { text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); display: grid; gap: 2px; }
.hq-tiles button:hover { border-color: var(--line-2); }
.hq-tiles b { font-family: var(--mono); font-size: 24px; }
.hq-tiles span { color: var(--muted); font-size: 12.5px; }
.hq-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.hq-tokens code { padding: 3px 8px; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.hq-messages { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.hq-message header { display: flex; align-items: flex-start; gap: 12px; }
.hq-message header > div { flex: 1; min-width: 0; }
.hq-message h3 { margin: 4px 0 2px; font-size: 15px; }
.hq-message header p { margin: 0; font-size: 13px; }
.hq-message.off { opacity: 0.7; }
.hq-message .hq-details { margin-top: 10px; }
.hq-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.hq-switch input { width: 18px; height: 18px; accent-color: var(--yellow); }
.seg button svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }
.seg.sm button { padding: 5px 10px; font-size: 12px; }

/* Academy desk */
.acd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.acd-stat { padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); display: grid; }
.acd-stat b { font-family: var(--mono); font-size: 22px; }
.acd-stat span { color: var(--muted); font-size: 12.5px; }
.acd-stat.act { border-color: rgba(241, 201, 51, 0.4); background: var(--yellow-soft); }
.acd-stat.act b { color: var(--yellow-ink); }
.acd-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.acd-queue { position: sticky; top: 84px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; }
.acd-queue-top { padding: 12px; display: grid; gap: 10px; border-bottom: 1px solid var(--line); }
.acd-queue-top .hq-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acd-queue-top .hq-filters button { justify-content: center; padding: 6px 4px; }
.acd-queue-top .hq-search { max-width: none; min-width: 0; }
.acd-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.acd-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 11px; border: 1px solid transparent; background: none; text-align: left; color: var(--text); }
.acd-list button:hover { background: var(--panel-2); }
.acd-list button.on { background: var(--yellow-soft); border-color: rgba(241, 201, 51, 0.35); }
.acd-li { flex: 1; min-width: 0; display: grid; }
.acd-li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acd-li small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acd-list time { color: var(--muted); font-size: 11.5px; white-space: nowrap; align-self: flex-start; margin-top: 2px; }
.acd-hint { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acd-hint i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.acd-hint.yellow i { background: var(--yellow); }
.acd-hint.red i { background: var(--red); }
.acd-hint.green i { background: var(--green); }
.acd-hint.blue i { background: var(--blue); }
.acd-hint em { color: var(--muted); font-style: normal; }
.acd-empty, .acd-none { display: grid; justify-items: center; gap: 4px; padding: 28px 18px; text-align: center; color: var(--muted); font-size: 13px; }
.acd-empty svg, .acd-none svg { width: 26px; height: 26px; color: var(--muted); margin-bottom: 4px; }
.acd-empty b, .acd-none b { color: var(--text); font-size: 14.5px; }
.acd-none { padding: 60px 18px; }
.acd-back { display: none; align-items: center; gap: 6px; margin-bottom: 10px; }
.acd-back svg { width: 15px; height: 15px; }
.acd-file { min-width: 0; display: grid; gap: 14px; }
.acd-file-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acd-id { flex: 1; min-width: 180px; }
.acd-id h2 { margin: 0; font-size: 20px; }
.acd-id p { margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 13px; }
.acd-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.acd-tools .icon-btn { margin-left: auto; }
.acd-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); border-left: 3px solid var(--line-2); }
.acd-next span { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.acd-next h3 { margin: 3px 0 2px; font-size: 16px; }
.acd-next p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.acd-next.yellow { border-left-color: var(--yellow); background: linear-gradient(90deg, var(--yellow-soft), var(--panel) 60%); }
.acd-next.red { border-left-color: var(--red); }
.acd-next.green { border-left-color: var(--green); }
.acd-next.blue { border-left-color: var(--blue); }
.acd-next-act { display: flex; gap: 8px; flex-wrap: wrap; }
.acd-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.acd-col { display: grid; gap: 14px; min-width: 0; }
.acd-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.acd-card-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.acd-card-head h3 svg { width: 17px; height: 17px; color: var(--yellow-ink); }
.acd-card-head h3 span { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.acd-card-head > .chip, .acd-card-head > .btn, .acd-card-head > .muted { margin-left: auto; }
.acd-card-head > .btn, .acd-card-head > .chip { white-space: nowrap; flex-shrink: 0; }
.acd-card-head { align-items: flex-start; }
.acd-noflight { display: flex; gap: 12px; align-items: flex-start; }
.acd-noflight svg { width: 22px; height: 22px; color: var(--muted); }
.acd-noflight p { margin: 3px 0 0; font-size: 13px; }
.acd-route { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.acd-route > div { display: grid; }
.acd-route > div.end { text-align: right; }
.acd-route b { font-family: var(--mono); font-size: 22px; }
.acd-route small { color: var(--muted); font-size: 12px; }
.acd-route-line { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--yellow-ink); }
.acd-route-line i { flex: 1; border-top: 1px dashed var(--line-2); }
.acd-route-line svg { width: 17px; height: 17px; }
.acd-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.acd-facts div { padding: 9px 11px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.acd-facts dt { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.acd-facts dd { margin: 2px 0 0; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.acd-tries { list-style: none; display: flex; gap: 8px; margin: 12px 0 0; padding: 0; }
.acd-tries li { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); font-family: var(--mono); font-size: 12px; }
.acd-tries li svg { width: 15px; height: 15px; }
.acd-tries li.now { border-color: var(--yellow); color: var(--yellow-ink); }
.acd-tries li.pass { background: var(--green); border-color: var(--green); color: #0b2516; }
.acd-tries li.fail { background: rgba(255, 93, 93, 0.15); border-color: var(--red); color: var(--red); }
.acd-card-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acd-extend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.acd-extend .input { min-width: 200px; height: 36px; }
.acd-section { padding: 10px 0; border-top: 1px solid var(--line); }
.acd-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.acd-section-head b { font-size: 14px; }
.acd-section .seg button.r-okay[aria-pressed="true"] { background: var(--amber); }
.acd-section .seg button.r-improve[aria-pressed="true"] { background: var(--red); color: #fff; }
.acd-review-meta { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.acd-review-meta label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.acd-review-meta em { text-transform: none; letter-spacing: 0; font-weight: 500; font-style: normal; }
.acd-minutes span { display: flex; align-items: center; gap: 6px; }
.acd-minutes .input { width: 80px; }
.acd-minutes b { color: var(--text-2); font-size: 13px; letter-spacing: 0; text-transform: none; }
.acd-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.acd-verdict button { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); text-align: left; }
.acd-verdict button svg { width: 20px; height: 20px; color: var(--muted); }
.acd-verdict button span { display: grid; }
.acd-verdict button small { color: var(--muted); font-size: 12px; }
.acd-verdict button.on.pass { border-color: var(--green); background: rgba(60, 207, 122, 0.08); }
.acd-verdict button.on.pass svg { color: var(--green); }
.acd-verdict button.on.fail { border-color: var(--red); background: rgba(255, 93, 93, 0.07); }
.acd-verdict button.on.fail svg { color: var(--red); }
.acd-check { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
.acd-check input { width: 17px; height: 17px; accent-color: var(--red); }
.acd-review-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.acd-review-foot p { margin: 0; flex: 1; min-width: 200px; font-size: 13.5px; }
.acd-review-foot p.green { color: var(--green); }
.acd-review-foot p.red { color: var(--red); }
.acd-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acd-history li { display: flex; gap: 10px; align-items: flex-start; }
.acd-history p { margin: 3px 0; color: var(--text-2); font-size: 13.5px; }
.acd-history small { font-size: 12px; }
.acd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acd-steps li { display: flex; gap: 10px; align-items: center; }
.acd-steps li > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); flex-shrink: 0; }
.acd-steps li > span svg { width: 14px; height: 14px; }
.acd-steps li.done > span { background: var(--green); border-color: var(--green); color: #0b2516; }
.acd-steps div { display: grid; }
.acd-steps b { font-size: 13.5px; font-weight: 600; }
.acd-steps small { color: var(--muted); font-size: 12px; }
.acd-message, .acd-note { display: grid; gap: 8px; }
.acd-message .btn, .acd-note .btn { justify-self: start; }
.acd-notes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.acd-notes li { padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.acd-notes p { margin: 0 0 3px; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.acd-notes small { font-size: 12px; }
.acd-sub { margin: 14px 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.acd-activity { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 7px; }
.acd-activity li { display: grid; font-size: 13px; }
.acd-activity small { font-size: 11.5px; }
.acd-danger { display: grid; gap: 8px; margin-top: 22px; padding: 14px; border-radius: 13px; border: 1px solid rgba(255, 93, 93, 0.35); background: rgba(255, 93, 93, 0.04); }
.acd-danger b { color: var(--red); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.acd-danger .btn { justify-content: flex-start; }
.acd-feedback { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acd-fb-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: none; color: var(--text); text-align: left; }
.acd-fb-meta { display: grid; text-align: right; font-size: 13px; }
.acd-fb-meta small { color: var(--muted); font-size: 12px; }
.acd-fb-body { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.acd-fb-summary { margin: 12px 0 0; color: var(--text-2); font-size: 14px; }
.acd-fb-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; }
.acd-fb-sections > div { padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--green); }
.acd-fb-sections > div.okay { border-left-color: var(--amber); }
.acd-fb-sections > div.improve { border-left-color: var(--red); }
.acd-fb-sections span { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.acd-fb-sections em { color: var(--muted); font-style: normal; font-size: 12px; }
.acd-fb-sections p { margin: 4px 0 0; color: var(--text-2); font-size: 13px; white-space: pre-wrap; }
.acd-fb-body footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; }

@media (max-width: 1180px) {
  .acd-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .acd-layout { grid-template-columns: minmax(0, 1fr); }
  .acd-queue { position: static; max-height: none; }
  .acd-layout.has-file .acd-queue { display: none; }
  .acd-back { display: inline-flex; }
  .acd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .staff-nav { flex-wrap: nowrap; overflow-x: auto; gap: 14px; margin-left: -16px; margin-right: -16px; padding: 0 16px 10px; scrollbar-width: none; }
  .staff-nav::-webkit-scrollbar { display: none; }
  .staff-nav-group { flex-wrap: nowrap; }
  .hq-pools, .hq-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hq-pool, .hq-tiles button { padding: 10px; }
  .hq-pool small { display: none; }
  .hq-messages, .hq-questions { grid-template-columns: minmax(0, 1fr); }
  .hq-two { grid-template-columns: minmax(0, 1fr); }
  .acd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acd-verdict { grid-template-columns: minmax(0, 1fr); }
  .acd-review-meta { grid-template-columns: minmax(0, 1fr); }
  .acd-fb-meta { display: none; }
  .hq-search { min-width: 0; max-width: none; flex-basis: 100%; }
  .hq-form-row .input { min-width: 0; flex-basis: 100%; }
}

/* ---------- Live map (VA) ---------- */
.lm { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.lm-map { position: sticky; top: 84px; height: calc(100vh - 200px); min-height: 440px; }
.lm-map .route-map { height: 100% !important; border-radius: var(--radius); }
.lm-count { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(18, 19, 22, 0.86); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; }
.lm-count .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(60, 207, 122, 0.2); }
.lm-nomap { height: 100%; min-height: 200px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 20px; }
.lm-nomap svg { width: 26px; height: 26px; }
.lm-list { display: grid; gap: 10px; }
.lm-list-head { display: flex; align-items: center; gap: 10px; }
.lm-list-head .muted { font-size: 12.5px; }
.lm-flight { display: grid; gap: 9px; text-align: left; color: var(--text); padding: 14px; cursor: pointer; transition: border-color 0.15s; }
.lm-flight:hover { border-color: var(--line-2); }
.lm-flight.on { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); }
.lm-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lm-who > div { flex: 1; min-width: 0; display: grid; }
.lm-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-who small { color: var(--muted); font-size: 12px; }
.lm-anon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); }
.lm-anon svg { width: 16px; height: 16px; }
.lm-noplan { font-size: 13px; }
.lm-progress { height: 4px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.lm-progress i { display: block; height: 100%; background: var(--yellow); }
.lm-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.lm-ac { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.lm-ac svg { width: 14px; height: 14px; flex-shrink: 0; }
.lm-profile { display: inline-flex; align-items: center; gap: 5px; color: var(--yellow-ink); font-weight: 700; font-size: 13px; }
.lm-profile svg { width: 14px; height: 14px; }
/* The marker is the aircraft itself (30 px, centred on its position); the label hangs beside it. */
.plane-marker { position: relative; display: block; width: 30px; height: 30px; border: 0; background: none; padding: 0; cursor: pointer; }
.plane-marker .pm-label { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.plane-marker .pm-icon { display: grid; place-items: center; width: 30px; height: 30px; transition: transform 0.3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.plane-marker .pm-icon svg { width: 26px; height: 26px; }
.plane-marker .pm-label { padding: 2px 7px; border-radius: 7px; background: rgba(18, 19, 22, 0.88); border: 1px solid var(--line-2); color: var(--text); font: 700 11px var(--mono); white-space: nowrap; }
.plane-marker.on .pm-label { background: var(--yellow); color: #111; border-color: var(--yellow); }
.plane-marker.on .pm-icon svg path { fill: #fff; }

/* ---------- Pilots (roster and profiles) ---------- */
.pl-table td { white-space: nowrap; }
.pl-table td .hq-who b { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.nowrap { white-space: nowrap; }
.pl-back { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 12px; font-size: 13px; }
.pl-back svg { width: 15px; height: 15px; }
.pl-hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 22px; background: linear-gradient(120deg, rgba(7, 53, 144, 0.35), var(--panel) 55%); }
.pl-id { flex: 1; min-width: 220px; }
.pl-id h1 { margin: 4px 0 8px; font-size: 28px; line-height: 1.15; }
.pl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: 13px; }
.pl-meta span, .pl-meta a { display: inline-flex; align-items: center; gap: 5px; }
.pl-meta a { color: var(--yellow-ink); font-weight: 600; }
.pl-meta svg { width: 14px; height: 14px; }
.pl-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.pl-stat { display: grid; gap: 2px; padding: 14px 16px; }
.pl-stat svg { width: 17px; height: 17px; color: var(--yellow-ink); margin-bottom: 4px; }
.pl-stat b { font-family: var(--mono); font-size: 20px; }
.pl-stat span { color: var(--muted); font-size: 12px; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pl-rank { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pl-rank b { font-size: 16px; }
.pl-rank span { font-size: 13px; }
.pl-bar { height: 6px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.pl-bar i { display: block; height: 100%; background: var(--yellow); border-radius: 6px; }
.pl-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-flags .flag { width: 26px; height: 19px; border-radius: 4px; }
.pl-ac > div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.pl-ac > div:first-child { border-top: 0; }
.pl-ac b { font-family: var(--mono); }

/* ---------- Tours ---------- */
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tr-card { display: grid; gap: 10px; color: var(--text); transition: border-color 0.15s, transform 0.15s; }
.tr-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.tr-card h3 { margin: 0; font-size: 18px; }
.tr-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tr-dates { margin-left: auto; font-size: 12.5px; }
.tr-desc { margin: 0; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-stops { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.tr-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text-2); }
.tr-facts span { display: inline-flex; align-items: center; gap: 5px; }
.tr-facts svg { width: 14px; height: 14px; color: var(--muted); }
.tr-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.tr-mine { display: flex; align-items: center; gap: 10px; }
.tr-mine .pl-bar { flex: 1; min-width: 60px; }
.tr-mine span { font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.tr-mine.big span { font-size: 13.5px; }
.tr-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 20px; align-items: center; padding: 22px; background: linear-gradient(120deg, rgba(241, 201, 51, 0.08), var(--panel) 55%); }
.tr-hero h1 { margin: 8px 0; font-size: 28px; line-height: 1.15; }
.tr-hero p { margin: 0; white-space: pre-wrap; }
.tr-cta { display: grid; gap: 10px; justify-items: start; }
.tr-cta .tr-mine { width: 100%; }
.tr-map { margin-bottom: 16px; overflow: hidden; }
.tr-legs { list-style: none; margin: 0; padding: 0; }
.tr-legs li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.tr-legs li:first-child { border-top: 0; }
.tr-legs li.next { background: var(--yellow-soft); }
.tr-n { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); font: 700 12px var(--mono); color: var(--muted); }
.tr-n svg { width: 15px; height: 15px; }
.tr-legs li.done .tr-n { background: var(--green); border-color: var(--green); color: #0b2516; }
.tr-legs li.review .tr-n { border-color: var(--amber); color: var(--amber); }
.tr-legs li.next .tr-n { border-color: var(--yellow); color: var(--yellow-ink); }
.tr-leg { flex: 1; min-width: 0; }
.tr-pilot .tr-mine { min-width: 130px; }
.ta-legs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.ta-legs li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.ta-legs li.gap { border-color: rgba(255, 181, 71, 0.55); }
.ta-legs li.gap .meta { color: var(--amber); }
.ta-tools { display: flex; gap: 4px; }
.ta-tools .icon-btn { width: 30px; height: 30px; margin: 0; }
.ta-tools .icon-btn svg { width: 15px; height: 15px; }
.ta-tools .icon-btn:disabled { opacity: 0.35; }
.ta-pick { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px dashed var(--line-2); }
.ta-pick .hq-search { max-width: none; }
.ta-pick .list { max-height: 300px; overflow-y: auto; }
.ta-pick .row-item { padding: 10px 6px; }

@media (max-width: 1100px) {
  .lm { grid-template-columns: minmax(0, 1fr); }
  .lm-map { position: relative; top: 0; height: 52vh; min-height: 320px; }
  .pl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-grid, .tr-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-hero { padding: 16px; }
  .pl-id h1, .tr-hero h1 { font-size: 22px; }
  .tr-grid { grid-template-columns: minmax(0, 1fr); }
  .tr-dates { margin-left: 0; width: 100%; }
  .tr-legs li { padding: 10px 12px; flex-wrap: wrap; }
  .tr-legs li .btn { margin-left: 42px; }
  .ta-legs li { flex-wrap: wrap; }
}

/* Academy: deadlines and review helpers */
.acd-due { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; justify-self: start; }
.acd-due.soon { background: rgba(255, 181, 71, 0.12); color: var(--amber); }
.acd-due.overdue { background: rgba(255, 93, 93, 0.12); color: var(--red); }
.acd-review-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: -4px 0 6px; font-size: 12.5px; }
.acd-review-tools .muted { margin-right: auto; }
.acd-phrases { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.acd-phrases button { border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text-2); border-radius: 999px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; }
.acd-phrases button.good:hover { border-color: var(--green); color: var(--green); }
.acd-phrases button.improve:hover { border-color: var(--amber); color: var(--amber); }
.acd-minutes .link-btn { justify-self: start; padding: 2px 0; font-size: 12px; letter-spacing: 0; text-transform: none; }
.acd-queue-top .hq-filters button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.staff-nav button .staff-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--yellow); color: #111; font: 700 11px var(--mono); display: inline-grid; place-items: center; }
.hq-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.hq-pager .icon-btn { margin: 0; }
.hq-pager .icon-btn:disabled { opacity: 0.35; }
.pr-records { padding-top: 16px; margin-top: 22px; border-top: 1px solid var(--line); }
.pr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pr-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.pr-grid .input { width: 100%; }
@media (max-width: 640px) { .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fa-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.fa-head label { display: grid; gap: 6px; }
.fa-head .select { min-width: 220px; }
.fa-row .select.sm { max-width: 190px; }
.fa-botw { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid rgba(241, 201, 51, 0.28); border-radius: 12px; background: rgba(241, 201, 51, 0.06); }
.fa-botw > svg { width: 18px; height: 18px; color: #f1c933; align-self: center; }
.fa-botw label { display: grid; gap: 6px; }
.fa-botw .input { width: 160px; text-transform: uppercase; font-family: var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; }
.fa-botw .muted { align-self: center; font-size: 13px; }

/* Admin shell: grouped side menu on large screens, a scrolling bar on phones */
.staff-shell { display: block; }
.staff-main { min-width: 0; }
.staff-nav { position: relative; }
.staff-nav button .lbl { white-space: nowrap; }
/* Side menu: never wider than its column (labels shorten with "…"), a slim scrollbar
   only while hovered, and a fade at the bottom while more sections are below. */
@media (min-width: 1180px) {
  .staff-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 26px; align-items: start; }
  .staff-nav { position: sticky; top: 84px; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 12px; margin: 0 -8px 0 0; padding: 2px 8px 0 0; border-bottom: 0;
    max-height: calc(100vh - 104px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .staff-nav:hover, .staff-nav:focus-within { scrollbar-color: var(--line-2) transparent; }
  .staff-nav::-webkit-scrollbar { width: 6px; }
  .staff-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
  .staff-nav:hover::-webkit-scrollbar-thumb { background: var(--line-2); }
  .staff-nav::after { content: ""; position: sticky; bottom: 0; flex: none; height: 28px; margin-top: -12px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
  .staff-nav-group { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 1px; min-width: 0; }
  .staff-nav-cap { width: auto; margin: 0 0 4px 12px; }
  .staff-nav button { justify-content: flex-start; width: 100%; min-width: 0; height: 34px; }
  .staff-nav button svg { flex: none; }
  .staff-nav button .lbl { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
  .staff-nav button .staff-badge { flex: none; }
}
@media (max-width: 1179px) {
  .staff-nav { flex-wrap: nowrap; overflow-x: auto; gap: 14px; scrollbar-width: none; }
  .staff-nav::-webkit-scrollbar { display: none; }
  .staff-nav-group { flex-wrap: nowrap; }
  .staff-nav-cap { width: auto; margin: 0 4px 0 0; }
}

/* Events admin */
.ea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ea-card { display: flex; flex-direction: column; }
.ea-cover { position: relative; min-height: 150px; display: flex; align-items: flex-end; padding: 16px; background: radial-gradient(circle at 80% 0%, rgba(241, 201, 51, 0.25), transparent 55%), linear-gradient(135deg, #0b2a6b, #073590 55%, #121316); background-size: cover; background-position: center; overflow: hidden; }
.ea-cover.big { min-height: 190px; border-radius: 14px; }
.ea-route { position: absolute; right: 14px; top: 10px; font-size: 32px; font-weight: 800; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.12); white-space: nowrap; }
.ea-cover-text { position: relative; display: grid; gap: 2px; color: #fff; min-width: 0; }
.ea-cover-text span { color: var(--yellow-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ea-cover-text h3 { margin: 0; font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.ea-cover-text small { color: rgba(255, 255, 255, 0.8); font-size: 12.5px; }
.ea-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.ea-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.ea-preview { display: grid; gap: 10px; margin-bottom: 6px; }
.ea-preview-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ea-preview-tools small { flex-basis: 100%; font-size: 12px; }
.ea-section { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text); font-size: 14px; }
.ea-w { width: 100%; }
.ea-more { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.ea-more summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.ea-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ea-grid4 label { display: grid; gap: 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.ea-grid4 .input { width: 100%; }
.ea-crew .select.sm { width: 110px; }
@media (max-width: 640px) { .ea-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ea-grid { grid-template-columns: minmax(0, 1fr); } }
.event-banner.has-img { background-size: cover; background-position: center; }
.event-photo { height: 180px; margin: -4px 0 14px; border-radius: 14px; background-size: cover; background-position: center; border: 1px solid var(--line); }
.event-gates { display: flex; flex-wrap: wrap; gap: 6px; }

/* Network admin */
.nw-readonly { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; }
.nw-readonly svg { width: 15px; height: 15px; }
.nw-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.nw-fields:disabled { opacity: 0.85; }
.nw-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.nw-apt { display: block; min-height: 18px; margin-top: 4px; font-size: 12px; color: var(--text-2); }
.nw-apt .flag { width: 16px; height: 12px; vertical-align: -1px; }
.nw-apt.bad { color: var(--amber); }
.nw-opts { display: grid; gap: 6px; }
.nw-opt { display: flex; gap: 6px; align-items: center; }
.nw-opt .select { flex: 1; min-width: 0; }
.nw-opt .icon-btn { margin: 0; width: 34px; height: 34px; }
.nw-calc { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 4px; }
.nw-preview { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; max-height: 380px; overflow-y: auto; }
.nw-preview .row-item.bad .meta { color: var(--red); }
.nw-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.nw-box { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); }
.nw-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #fff; padding: 3px; }
.nw-bases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.nw-base { display: grid; gap: 4px; text-align: left; color: var(--text); }
.nw-base:hover { border-color: var(--line-2); }
.nw-base > b { font-size: 16px; display: flex; align-items: center; gap: 6px; }
.nw-code { font-size: 13px; font-weight: 700; color: var(--yellow-ink); }
.nw-base-n { display: flex; gap: 14px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.nw-base-n b { color: var(--text); font-family: var(--mono); }
.nw-bar { height: 4px; border-radius: 4px; background: var(--panel-2); margin-top: 6px; overflow: hidden; }
.nw-bar i { display: block; height: 100%; background: var(--yellow); border-radius: 4px; }
.nw-x { font-size: 16px; font-weight: 700; color: var(--yellow-ink); }
.nw-range { width: 100%; accent-color: var(--yellow); }
.nw-ladder { list-style: none; margin: 0; padding: 0; }
.nw-ladder li + li { border-top: 1px solid var(--line); }
.nw-ladder button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: none; border: 0; color: var(--text); text-align: left; }
.nw-ladder button:hover { background: var(--hover); }
.nw-h { min-width: 70px; font-weight: 700; color: var(--yellow-ink); }
.nw-hm { display: flex; align-items: center; gap: 6px; }
.nw-hm .input { width: 80px; }
.nw-hm span { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .nw-calc { grid-template-columns: 1fr 1fr; } .nw-calc .btn { grid-column: 1 / -1; } .nw-groups { grid-template-columns: minmax(0, 1fr); } }

/* Insights */
.in-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.in-tile { display: grid; gap: 2px; padding: 14px 16px; }
.in-tile svg { width: 17px; height: 17px; color: var(--yellow-ink); margin-bottom: 4px; }
.in-tile b { font-family: var(--mono); font-size: 22px; }
.in-tile span { font-size: 13px; font-weight: 600; }
.in-tile small { color: var(--muted); font-size: 11.5px; }
.in-chart { display: flex; align-items: flex-end; gap: 3px; height: 200px; padding-top: 10px; }
.in-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.in-col i { display: block; width: 100%; max-width: 38px; min-height: 2px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--yellow), rgba(241, 201, 51, 0.55)); }
.in-col:hover i { background: var(--yellow); }
.in-col span { font-size: 10px; color: var(--muted); white-space: nowrap; }
.in-rank { list-style: none; margin: 0; padding: 0; }
.in-rank li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); }
.in-rank li:first-child { border-top: 0; }
.in-rank li.win { background: var(--yellow-soft); }
.in-rank .hq-who { flex: 1; color: var(--text); }
.in-pos { width: 26px; text-align: center; font: 700 13px var(--mono); color: var(--muted); }
.in-pos svg { width: 18px; height: 18px; color: var(--yellow-ink); }
.in-num { display: grid; text-align: right; }
.in-num small { color: var(--muted); font-size: 11.5px; }
@media (max-width: 1100px) { .in-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .in-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-chart { height: 150px; } }

/* System status banner, changelog */
.status-banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid; font-size: 13.5px; }
.status-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.status-banner div { display: grid; gap: 2px; }
.status-banner span { color: var(--text-2); }
.status-banner.degraded { border-color: rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.08); color: var(--amber); }
.status-banner.outage { border-color: rgba(255, 93, 93, 0.45); background: rgba(255, 93, 93, 0.08); color: var(--red); }
.st-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-level { display: grid; justify-items: start; gap: 8px; padding: 14px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); text-align: left; }
.st-level svg { width: 20px; height: 20px; }
.st-level.green svg { color: var(--green); }
.st-level.amber svg { color: var(--amber); }
.st-level.red svg { color: var(--red); }
.st-level.on.green { border-color: var(--green); background: rgba(60, 207, 122, 0.08); }
.st-level.on.amber { border-color: var(--amber); background: rgba(255, 181, 71, 0.08); }
.st-level.on.red { border-color: var(--red); background: rgba(255, 93, 93, 0.08); }
.cl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 820px; }
.cl-entry header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cl-entry h2 { margin: 0; font-size: 18px; flex: 1; min-width: 200px; }
.cl-entry time { font-size: 12.5px; }
.cl-preview { min-height: 180px; }
.md { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.md h3, .md h4, .md h5 { margin: 14px 0 6px; color: var(--text); font-size: 14.5px; }
.md p { margin: 6px 0; }
.md ul, .md ol { margin: 6px 0; padding-left: 20px; }
.md li { margin: 3px 0; }
.md code { padding: 1px 6px; border-radius: 6px; background: var(--bg-2); font-family: var(--mono); font-size: 12.5px; }
.md a { color: var(--yellow-ink); }
@media (max-width: 640px) { .st-levels { grid-template-columns: minmax(0, 1fr); } }

/* Getting started */
.gs-card { gap: 14px; padding: 16px 18px; border-color: rgba(241, 201, 51, 0.24);
  background: radial-gradient(520px 180px at 0% 0%, rgba(241, 201, 51, 0.07), transparent 65%), var(--panel); }
.gs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) auto; grid-template-areas: "intro progress hide"; align-items: center; gap: 12px 20px; }
.gs-intro { grid-area: intro; min-width: 0; }
.gs-tag { margin: 0; }
.gs-lead { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.gs-progress { grid-area: progress; display: grid; gap: 6px; min-width: 0; }
.gs-count { color: var(--muted); font-size: 12px; }
.gs-count b { color: var(--yellow-ink); font-size: 13px; }
.gs-bar { display: block; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.gs-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f1c933, #ffe17a); transition: width 0.6s cubic-bezier(.2, .8, .2, 1); }
.gs-hide { grid-area: hide; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; transition: color 0.15s, border-color 0.15s; }
.gs-hide:hover { color: var(--text); border-color: var(--muted); }
.gs-hide svg { width: 14px; height: 14px; }
.gs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gs-step { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 13px; border-radius: 14px; background: var(--panel-2); border: 1px solid transparent; }
.gs-step.gs-next { border-color: rgba(241, 201, 51, 0.45); background: linear-gradient(160deg, rgba(241, 201, 51, 0.09), var(--panel-2) 65%); }
.gs-step.gs-done { background: transparent; border-color: var(--line); }
.gs-step-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gs-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); background: var(--panel); color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.gs-next .gs-mark { background: var(--yellow); border-color: var(--yellow); color: #111; box-shadow: 0 0 0 4px rgba(241, 201, 51, 0.14); }
.gs-done .gs-mark { background: rgba(60, 207, 122, 0.12); border-color: rgba(60, 207, 122, 0.45); color: var(--green); }
.gs-mark svg { width: 14px; height: 14px; stroke-width: 3; }
.gs-name { margin: 0; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.gs-done .gs-name { color: var(--text-2); }
.gs-why { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.gs-why b { color: var(--text-2); font-weight: 600; }
.gs-why .mono { color: var(--text-2); font-size: 11.5px; }
.gs-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; padding-top: 2px; }
.gs-actions .btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.gs-actions .btn svg { width: 14px; height: 14px; }
.gs-link { color: var(--text-2); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.gs-link:hover { color: var(--yellow-ink); text-decoration-color: currentColor; }
.gs-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.gs-note svg { width: 15px; height: 15px; margin-top: 1px; color: var(--blue); }
.gs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gs-card a:focus-visible, .gs-card button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (max-width: 1240px) { .gs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .gs-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "intro hide" "progress progress"; align-items: start; }
}
@media (max-width: 600px) {
  .gs-card { padding: 14px; }
  .gs-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gs-step { padding: 11px 12px; }
  .gs-why, .gs-actions { padding-left: 36px; }
}

/* Legal pages */
.lg-page { max-width: 760px; }
.lg-tabs { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.lg-tabs a { padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); transition: color 0.15s, background 0.15s; }
.lg-tabs a:hover { color: var(--text); }
.lg-tabs a[aria-current="page"] { background: var(--yellow); color: #111; }
.lg-doc { padding: 26px 28px 28px; overflow-wrap: break-word; }
.lg-meta { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lg-meta p { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.65; }
.lg-doc section { padding-top: 22px; scroll-margin-top: 80px; }
.lg-doc h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 16.5px; line-height: 1.35; }
.lg-num { flex: 0 0 auto; min-width: 22px; color: var(--yellow-ink); font-family: var(--mono); font-size: 13.5px; }
.lg-doc section p, .lg-doc section ul { margin: 0 0 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.7; }
.lg-doc section ul { padding-left: 20px; }
.lg-doc section > :last-child { margin-bottom: 0; }
.lg-doc li { margin: 4px 0; }
.lg-doc li::marker { color: var(--muted); }
.lg-doc b { color: var(--text); font-weight: 600; }
.lg-doc a { color: var(--yellow-ink); }
.lg-foot { margin: 14px 4px 0; color: var(--muted); font-size: 12.5px; }
.lg-links { margin: 22px 0 0; color: var(--muted); font-size: 12.5px; }
.lg-links a { color: var(--text-2); }
.lg-links a:hover { color: var(--yellow-ink); }
.lg-public { min-height: 100vh; background: var(--bg); }
.lg-public-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.lg-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lg-brand img { width: 32px; height: 32px; }
.lg-brand b { display: block; font-size: 13.5px; letter-spacing: 0.04em; line-height: 1.2; }
.lg-brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; }
.lg-public-main { width: 100%; max-width: 808px; margin: 0 auto; padding: 28px 24px 64px; }
@media (max-width: 560px) {
  .lg-doc { padding: 18px 16px 20px; }
  .lg-doc h2 { font-size: 15.5px; }
  .lg-public-bar { padding: 10px 16px; }
  .lg-public-main { padding: 20px 16px 48px; }
}

/* Academy space (trainees) */
.ac-app { min-height: 100vh; background: var(--bg); }
.ac-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px max(16px, calc((100vw - 960px) / 2)); background: var(--topbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.ac-brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.ac-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.ac-brand small { color: var(--muted); font-size: 11.5px; }
.ac-brand b { white-space: nowrap; }
.ac-top .sp { flex: 1; }
.ac-main { max-width: 960px; margin: 0 auto; padding: 22px 16px 60px; display: grid; gap: 16px; }
.ac-hero { position: relative; overflow: hidden; display: grid; gap: 18px; padding: 24px; border-radius: 22px; border: 1px solid var(--line);
  background: radial-gradient(600px 240px at 100% 0%, rgba(241, 201, 51, 0.14), transparent 60%), linear-gradient(135deg, #0b2a6e, #0b1730 70%); color: var(--text); }
.ac-hero h1 { margin: 4px 0 2px; font-size: clamp(24px, 4vw, 30px); }
.ac-hero p { margin: 0; color: #c7d3f1; }
.ac-hero.done { text-align: center; justify-items: center; padding: 40px 24px; }
.ac-hero.done .btn { margin-top: 6px; }
.ac-cap { width: 44px; height: 44px; color: var(--yellow); }
.ac-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
.ac-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); }
.ac-steps .dot { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--mono); border: 1.5px solid rgba(255, 255, 255, 0.25); color: #b6c3e6; }
.ac-steps .dot svg { width: 14px; height: 14px; }
.ac-steps b { font-size: 13.5px; }
.ac-steps small { color: #8fa1cc; font-size: 11.5px; line-height: 1.35; }
.ac-steps li.done .dot { background: var(--green); border-color: var(--green); color: #0b1730; }
.ac-steps li.now { border-color: rgba(241, 201, 51, 0.55); background: rgba(241, 201, 51, 0.08); }
.ac-steps li.now .dot { border-color: var(--yellow); color: var(--yellow); }
.ac-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.ac-route { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 12px; margin: 2px 0 14px; }
.ac-route b { display: block; font-size: 26px; letter-spacing: 0.02em; }
.ac-route small { color: var(--muted); font-size: 12.5px; }
.ac-route .r { text-align: right; }
.ac-arc { position: relative; height: 22px; display: grid; place-items: center; }
.ac-arc::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px); }
.ac-arc svg { position: relative; width: 26px; height: 18px; color: var(--yellow-ink); background: var(--panel); padding: 0 4px; transform: rotate(45deg); }
.ac-kv { margin-bottom: 10px; }
.ac-late { color: var(--red); }
.ac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ac-actions .ext { width: 12px; height: 12px; opacity: 0.6; }
.ac-how { margin: 0 0 12px; padding-left: 20px; color: var(--text-2); line-height: 1.6; font-size: 14px; }
.ac-how a { color: var(--yellow-ink); }
.ac-flights { display: grid; gap: 8px; }
.ac-flight { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "route chip" "meta chip"; gap: 2px 10px; align-items: center; width: 100%; padding: 11px 13px; text-align: left; border-radius: 13px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.ac-flight > :first-child { grid-area: route; min-width: 0; }
.ac-flight .meta { grid-area: meta; }
.ac-flight .chip { grid-area: chip; }
.ac-flight:disabled { opacity: 0.55; cursor: default; }
.ac-flight:not(:disabled):hover { border-color: var(--line-hover); }
.ac-flight.on { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); }
.ac-review { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.ac-review b { display: block; }
.ac-review small { color: var(--muted); font-size: 13px; }
.ac-pulse { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--yellow-soft); color: var(--yellow-ink); animation: ac-pulse 2s ease-in-out infinite; }
@keyframes ac-pulse { 50% { box-shadow: 0 0 0 8px rgba(241, 201, 51, 0.08); } }
.ac-attempt + .ac-attempt { border-top: 1px solid var(--line); }
.ac-attempt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; padding: 14px 18px; border: 0; background: none; color: var(--text); text-align: left; }
.ac-attempt-head .muted { font-size: 13px; }
.ac-attempt-body { display: grid; gap: 10px; padding: 0 18px 16px; }
.ac-attempt-body p { margin: 0; color: var(--text-2); line-height: 1.55; white-space: pre-wrap; }
.ac-section { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; }
.ac-section .chip { justify-content: center; }
@media (max-width: 520px) {
  .ac-brand small, .ac-top .btn .lbl { display: none; }
  .ac-hero { padding: 20px 18px; }
}
@media (max-width: 760px) {
  .ac-grid { grid-template-columns: minmax(0, 1fr); }
  .ac-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-section { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ac-section .chip { justify-self: start; }
}
.acd-logged { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(60, 207, 122, 0.3); background: rgba(60, 207, 122, 0.06); font-size: 13.5px; }

/* Ops Control */
.ops-app { min-height: 100vh; background: var(--bg); color: var(--text); }
.ops-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--topbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.ops-brand { display: flex; align-items: center; gap: 9px; color: var(--text); }
.ops-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.ops-brand b { letter-spacing: 0.06em; text-transform: uppercase; font-size: 13.5px; white-space: nowrap; }
.ops-brand small { color: var(--muted); font-size: 11px; }
.ops-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.ops-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.ops-tabs button svg { width: 15px; height: 15px; }
.ops-tabs button[aria-selected="true"] { background: var(--yellow-soft); color: var(--yellow-ink); }
.ops-top .sp { flex: 1; }
.ops-clock { color: var(--text-2); font-size: 13px; }
.ops-main { max-width: 1240px; margin: 0 auto; padding: 18px 16px 60px; }
.ops-deck { padding-top: 0; }
.ops-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.ops-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ops-card-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.ops-card-head h3 svg { width: 16px; height: 16px; color: var(--yellow-ink); }
.ops-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ops-col { display: grid; gap: 16px; min-width: 0; }
.ops-flight-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ops-flight-head .eyebrow { color: var(--muted); }
.ops-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 12px; }
.ops-times div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); min-width: 0; }
.ops-times small { color: var(--muted); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.ops-times b { font-size: 20px; }
.ops-times em { font-style: normal; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-live { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.ops-live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none; }
.ops-live.on { color: var(--text-2); }
.ops-live.on .dot { background: var(--green); box-shadow: 0 0 0 4px rgba(60, 207, 122, 0.15); }
.ops-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ops-counters div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.ops-counters svg { grid-row: span 2; width: 18px; height: 18px; color: var(--muted); }
.ops-counters b { font-size: 20px; }
.ops-counters b small { color: var(--muted); font-size: 12px; }
.ops-counters span { color: var(--muted); font-size: 12px; }
.ops-counters .hl { border-color: rgba(241, 201, 51, 0.35); }
.ops-counters .hl svg { color: var(--yellow-ink); }
.ops-gantt { display: grid; gap: 6px; }
.ops-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: 13px; }
.ops-row .lbl { display: flex; align-items: center; gap: 7px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-row .lbl svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.ops-row .track { position: relative; height: 12px; border-radius: 6px; background: var(--panel-2); }
.ops-row .bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: rgba(111, 155, 255, 0.22); overflow: hidden; }
.ops-row .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); }
.ops-row.done .bar { background: rgba(60, 207, 122, 0.25); }
.ops-row.done .fill { background: var(--green); }
.ops-row.delayed .bar { box-shadow: inset 0 0 0 1px var(--amber); }
.ops-row.delayed .lbl { color: var(--amber); }
.ops-row .now { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--yellow); border-radius: 2px; }
.ops-row .st { text-align: right; color: var(--muted); font: 600 12px var(--mono); }
.ops-row .st svg { width: 14px; height: 14px; color: var(--green); }
.ops-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 13px; }
.ops-sheet div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.ops-sheet span { color: var(--muted); }
.ops-sheet small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.ops-sheet .over b, .ops-sheet .over small { color: var(--red); }
.ops-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ops-arrived { display: flex; align-items: center; gap: 14px; }
.ops-arrived > svg { width: 30px; height: 30px; color: var(--green); flex: none; }
.ops-arrived.late > svg { color: var(--amber); }
.ops-arrived div { flex: 1; min-width: 0; }
.ops-arrived h3 { margin: 0; }
.ops-arrived p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.ops-cancel { justify-self: start; color: var(--muted); font-size: 12.5px; }
.ops-side { position: sticky; top: 72px; display: grid; gap: 16px; align-content: start; }
.ops-dispatch { display: flex; flex-direction: column; max-height: calc(100vh - 90px); }
.ops-feed { flex: 1; min-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.ops-msg { align-self: flex-start; max-width: 92%; padding: 9px 11px; border-radius: 12px 12px 12px 4px; background: var(--panel-2); border: 1px solid var(--line); }
.ops-msg b { display: flex; align-items: center; gap: 5px; font-size: 12.5px; margin-bottom: 2px; }
.ops-msg p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.ops-msg small { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.ops-msg.me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--yellow-soft); border-color: rgba(241, 201, 51, 0.3); }
.ops-msg.event { border-color: rgba(255, 181, 71, 0.45); }
.ops-msg.event b { color: var(--amber); }
.ops-msg.warn { border-color: rgba(255, 93, 93, 0.4); }
.ops-msg.release { border-color: rgba(60, 207, 122, 0.45); }
.ops-msg.release b { color: var(--green); }
.ops-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.ops-chips button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text-2); font-size: 12px; }
.ops-chips button:hover { border-color: var(--yellow); }
.ops-input { display: flex; gap: 8px; }
.ops-input .input { flex: 1; min-width: 0; }
.ops-start { max-width: 720px; margin: 0 auto; display: grid; gap: 16px; }
.ops-hero { background: radial-gradient(600px 220px at 100% 0%, rgba(241, 201, 51, 0.12), transparent 60%), linear-gradient(135deg, #0b2a6e, #0b1730 70%); }
.ops-hero h1 { margin: 4px 0 2px; font-size: clamp(22px, 4vw, 28px); }
.ops-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 12px 0 6px; }
.ops-form .input { width: 130px; }
.ops-hero .btn { margin-top: 10px; }
.ops-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ops-how li { display: flex; gap: 10px; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.ops-how svg { width: 20px; height: 20px; color: var(--yellow-ink); flex: none; }
.ops-how b { display: block; font-size: 14px; }
.ops-how span { color: var(--muted); font-size: 13px; line-height: 1.45; }
@media (max-width: 980px) {
  .ops-grid { grid-template-columns: minmax(0, 1fr); }
  .ops-side { position: static; }
  .ops-dispatch { max-height: none; }
  .ops-feed { max-height: 420px; }
}
@media (max-width: 640px) {
  .ops-top { gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
  .ops-brand small, .ops-top .btn .lbl, .ops-clock { display: none; }
  .ops-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-counters div { grid-template-columns: minmax(0, 1fr); padding: 9px 10px; }
  .ops-counters svg { display: none; }
  .ops-counters b { font-size: 17px; }
  .ops-row { grid-template-columns: 104px minmax(0, 1fr) 30px; gap: 8px; font-size: 12px; }
  .ops-sheet { grid-template-columns: minmax(0, 1fr); }
  .ops-how { grid-template-columns: minmax(0, 1fr); }
}

/* Ops Control V2 */
.ops-duty { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.ops-duty svg { width: 14px; height: 14px; color: var(--yellow-ink); }
.ops-duty i { width: 1px; height: 14px; background: var(--line-2); }
.ops-duty.low { border-color: rgba(255, 93, 93, 0.5); color: var(--red); }
.ops-network { margin-bottom: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.ops-network button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 14px; border: 0; background: none; color: var(--text-2); font-size: 13.5px; text-align: left; }
.ops-network svg { width: 16px; height: 16px; color: var(--green); }
.ops-network.busy svg { color: var(--amber); }
.ops-network span { color: var(--muted); }
.ops-network.busy span { color: var(--amber); }
.ops-network p { margin: 0; padding: 0 14px 12px 39px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ops-decision { border-color: rgba(255, 181, 71, 0.55); box-shadow: 0 0 0 3px rgba(255, 181, 71, 0.08); animation: ops-in 0.3s ease-out; }
@keyframes ops-in { from { transform: translateY(6px); opacity: 0; } }
.ops-decision header { display: flex; gap: 11px; align-items: flex-start; }
.ops-decision header > svg { width: 20px; height: 20px; color: var(--amber); flex: none; margin-top: 2px; }
.ops-decision header div { flex: 1; min-width: 0; }
.ops-decision header p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }
.ops-decision header > .mono { color: var(--amber); font-size: 15px; }
.ops-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ops-options button { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; text-align: left; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); }
.ops-options button:hover:not(:disabled) { border-color: var(--yellow); }
.ops-options small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.ops-advisory header { display: flex; align-items: center; gap: 9px; }
.ops-advisory header svg { width: 18px; height: 18px; color: var(--amber); }
.ops-advisory ul { margin: 8px 0 0; padding-left: 20px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ops-advisory li.warn { color: var(--amber); }
.ops-arrived { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; }
.ops-arrived .ops-actions { grid-column: 1 / -1; margin-top: 0; }
.ops-score { --v: 0; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; align-content: center; flex: none;
  background: radial-gradient(closest-side, var(--panel) 78%, transparent 79% 100%), conic-gradient(var(--green) calc(var(--v) * 1%), var(--line) 0); }
.ops-arrived.late .ops-score { background: radial-gradient(closest-side, var(--panel) 78%, transparent 79% 100%), conic-gradient(var(--amber) calc(var(--v) * 1%), var(--line) 0); }
.ops-score b { font-size: 24px; line-height: 1; }
.ops-score small { color: var(--muted); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.ops-arrived .txt p { margin: 3px 0 0; font-size: 13.5px; }
.ops-next .seg { margin: 0; }
.ops-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ops-routes button { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; text-align: left; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-size: 13.5px; }
.ops-routes button:hover:not(:disabled) { border-color: var(--yellow); }
.ops-routes button:disabled { opacity: 0.5; }
.ops-routes .muted { font-size: 12px; }
.ops-sectors { display: grid; gap: 6px; }
.ops-sectors div { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px minmax(0, 110px); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.ops-sectors div:last-child { border-bottom: 0; }
.ops-sectors .mono:nth-child(3) { text-align: right; }
.ops-sectors small { text-align: right; }
.ops-board { max-width: 900px; margin: 0 auto; display: grid; gap: 16px; }
.ops-board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ops-board-head h1 { margin: 2px 0; }
.ops-board-head p { margin: 0; font-size: 13.5px; max-width: 520px; }
.ops-mine { margin: 0; }
.ops-rank { list-style: none; margin: 0; padding: 0; }
.ops-rank li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 70px 50px; grid-template-areas: "pos name otp score" "pos meta meta meta"; gap: 0 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ops-rank li:last-child { border-bottom: 0; }
.ops-rank .pos { grid-area: pos; color: var(--muted); font-weight: 700; }
.ops-rank b { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-rank .otp { grid-area: otp; text-align: right; color: var(--green); font-weight: 700; }
.ops-rank li > .mono:nth-of-type(3) { grid-area: score; text-align: right; }
.ops-rank small { grid-area: meta; font-size: 12px; }
.ops-rank li.me { background: var(--yellow-soft); }
.ops-rank li:nth-child(1) .pos { color: var(--yellow-ink); }
@media (max-width: 640px) {
  .ops-options, .ops-routes { grid-template-columns: minmax(0, 1fr); }
  .ops-duty b, .ops-duty i { display: none; }
  .ops-tabs { order: 10; width: 100%; }
  .ops-tabs button { flex: 1; justify-content: center; white-space: nowrap; }
  .ops-tabs .lbl { display: none; }
  .ops-duty-log .ops-card-head { flex-wrap: wrap; row-gap: 4px; }
  .ops-duty-log .ops-card-head h3 { white-space: nowrap; }
  .ops-sectors div { grid-template-columns: minmax(0, 1fr) auto 34px; }
  .ops-sectors small { display: none; }
}
.ops-times em.late { color: var(--amber); }
/* The selected flight on the live map */
.lm-detail { display: grid; gap: 12px; padding: 16px; border-color: rgba(241, 201, 51, 0.45); }
.lm-detail header { display: flex; align-items: center; gap: 10px; }
.lm-detail header > div { flex: 1; min-width: 0; display: grid; }
.lm-detail header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-detail header small { color: var(--muted); font-size: 12px; }
.lm-detail-route { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 12px; }
.lm-detail-route b { display: block; font-size: 20px; }
.lm-detail-route small { color: var(--muted); font-size: 12px; }
.lm-detail-route .r { text-align: right; }
.lm-detail-route .bar { position: relative; height: 4px; border-radius: 99px; background: var(--panel-2); }
.lm-detail-route .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--yellow); }
.lm-detail-route .bar span { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: #111; }
.lm-detail-route .bar svg { width: 13px; height: 13px; transform: rotate(45deg); }
.lm-detail-pct { margin: -4px 0 0; color: var(--text-2); font-size: 13px; }
.lm-detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.lm-detail-facts div { padding: 8px 10px; border-radius: 10px; background: var(--panel-2); min-width: 0; }
.lm-detail-facts dt { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 600; }
.lm-detail-facts dt svg { width: 12px; height: 12px; }
.lm-detail-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-detail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: 12.5px; }
.lm-detail-foot span { display: inline-flex; align-items: center; gap: 5px; }
.lm-detail-foot svg { width: 13px; height: 13px; }
.lm-detail-foot .lm-profile { margin-left: auto; }
@media (max-width: 420px) { .lm-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The live flight, small, in the top bar of every other page: green, Ops blue in Ops Control. */
.top-live { --c: var(--green); --c-soft: rgba(60, 207, 122, 0.1); display: inline-flex; align-items: center; gap: 9px; min-width: 0; height: 32px; margin-left: 6px; padding: 0 12px 0 10px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: var(--c-soft); color: var(--text); font-size: 12px; white-space: nowrap; text-decoration: none; transition: border-color 0.15s; }
.top-live:hover { border-color: var(--c); }
.top-live > i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); animation: live-dot 1.4s ease-in-out infinite; }
.top-live .cs { font-weight: 700; color: var(--c); }
.top-live .rt { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.top-live .rt svg { width: 12px; height: 12px; color: var(--c); }
.top-live .fx { color: var(--muted); }
.top-live.ops { --c: var(--blue); --c-soft: rgba(111, 155, 255, 0.1); }
@media (max-width: 1180px) { .top-live .fx { display: none; } }
@media (max-width: 920px) { .top-live .rt { display: none; } .top-live { height: 30px; padding: 0 10px; margin-left: 0; } }
@media (max-width: 420px) { .top-live { gap: 6px; padding: 0 9px; } .top-live .cs { font-size: 11px; } }
/* Flown in Ops Control: the live line in Ops blue. */
.dx-live.ops { border-color: rgba(111, 155, 255, 0.35); }
.dx-live.ops:hover { border-color: rgba(111, 155, 255, 0.7); }
.dx-live.ops .dx-live-tag { color: var(--blue); }
.dx-live.ops .dx-live-tag i { background: var(--blue); }
.dx-live.ops .dx-track span { background: var(--blue); }
.dx-live.ops .dx-track i { color: var(--blue); }
.fd > .dx-live.ops { border-bottom-color: rgba(111, 155, 255, 0.28); background: linear-gradient(90deg, rgba(111, 155, 255, 0.07), var(--panel) 40%); }

/* Staff PIREP review: the pilot's Infinite Flight logbook */
.hq-iflog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hq-iflog-head h4 { margin: 0; }
.hq-iflog-sub { margin: 8px 0 !important; font-size: 12.5px; }
.hq-iflog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hq-iflog-list li { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.hq-iflog-list li.this { border-color: color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 8%, var(--panel)); }
.hq-iflog-list li.route { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.hq-iflog-list .r { display: flex; align-items: center; gap: 8px; }
.hq-iflog-list .r b { font-size: 14px; }
.hq-iflog-list .r .t { margin-left: auto; color: var(--text-2); font-size: 12.5px; }
.hq-iflog-list .r .chip { font-size: 10.5px; }
.hq-iflog-list .m { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* File a PIREP: everything recent is filed */
.file-done-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.file-done { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--green) 9%, transparent), transparent 60%), var(--panel); }
.file-done .ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.file-done .ic svg { width: 22px; height: 22px; }
.file-done .txt { flex: 1 1 260px; min-width: 0; }
.file-done .txt b { display: block; font-size: 17px; margin-bottom: 2px; }
.file-done .txt p { margin: 0; color: var(--text-2); font-size: 14px; }
.file-done .acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.file-sub { margin: 14px 0 0; color: var(--muted); }
.file-hint { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 13px; }
a.file-flight { color: inherit; text-decoration: none; }
.file-flight.done .chip { display: inline-flex; align-items: center; gap: 4px; }
.file-flight:disabled { opacity: 0.6; }
.mult-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: 2px; }
.mult-chip svg { width: 12px; height: 12px; }
.hq-time { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; white-space: nowrap; }

/* The suggested next flight: one strong card (the way back to the base above all) */
.sg { --sg: var(--yellow); display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin: 0 0 14px; padding: 20px 22px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--sg) 45%, var(--line)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sg) 14%, transparent), transparent 60%), var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.sg.home { --sg: var(--green); border-width: 2px; }
.sg.base { --sg: var(--green); }
.sg.warn { --sg: var(--amber); }
.sg-main { display: grid; gap: 8px; flex: 1 1 380px; min-width: 0; }
.sg-tag { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--sg) 16%, transparent);
  color: color-mix(in srgb, var(--sg) 80%, var(--text)); font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.sg-tag svg { width: 15px; height: 15px; }
.sg-route { display: flex; align-items: center; gap: 12px; max-width: 520px; }
.sg-route b { font-size: 34px; letter-spacing: 0.02em; }
.sg-route .line { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--sg); min-width: 30px; }
.sg-route .line i { flex: 1; height: 0; border-top: 2px dashed var(--line-2); }
.sg-route .line svg { width: 20px; height: 20px; transform: rotate(45deg); }
.sg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; color: var(--text-2); font-size: 14px; }
.sg-meta .chip { display: inline-flex; align-items: center; gap: 5px; }
.sg-why { margin: 2px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 720px; }
.sg-why b { color: var(--text); }
.sg-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.sg-cta .btn { height: 46px; padding: 0 20px; font-size: 15px; }
.sg-cta .btn svg { width: 17px; height: 17px; }
.sg.home .sg-cta .btn { background: var(--green); border-color: var(--green); color: #06210f; }
.sg.compact .sg-route b { font-size: 26px; }
@media (max-width: 680px) { .sg { padding: 16px; } .sg-route b { font-size: 26px; } .sg-cta { align-items: stretch; width: 100%; } .sg-cta .btn { justify-content: center; } }
.booked-base { align-self: flex-start; }

/* Booking while a flight is in progress: where does it go? */
.bk-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(8, 9, 11, 0.62); backdrop-filter: blur(6px); animation: bk-in 0.16s ease-out; }
@keyframes bk-in { from { opacity: 0; } }
.bk-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.bk-card .eyebrow { color: var(--yellow-ink, var(--yellow)); }
.bk-card h3 { margin: 6px 0 6px; font-size: 20px; }
.bk-lead { margin: 0 0 16px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.bk-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.bk-x:hover { background: var(--panel-2); color: var(--text); }
.bk-x svg { width: 18px; height: 18px; }
.bk-opts { display: grid; gap: 10px; }
.bk-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.bk-opt:hover:not(:disabled) { border-color: var(--line-2); background: color-mix(in srgb, var(--panel-2) 80%, white 4%); }
.bk-opt:disabled { cursor: default; opacity: 0.6; }
.bk-opt .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--yellow-soft, rgba(241, 201, 51, 0.12)); color: var(--yellow-ink, var(--yellow)); }
.bk-opt .ic svg { width: 18px; height: 18px; }
.bk-opt.danger .ic { background: rgba(255, 93, 93, 0.12); color: var(--red); }
.bk-opt b { display: block; font-size: 14.5px; }
.bk-opt small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* Bases: out of the base, the way back */
.bs-away { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; white-space: normal; border-color: rgba(241, 201, 51, 0.4); margin: 0 0 16px; }
.bs-away > svg { color: var(--yellow); flex: none; }
.bs-away > span { flex: 1; min-width: 220px; }
/* A phone: the cube alone (the blue chip says it), so route lines fit next to their figures. */
@media (max-width: 420px) { .ap3d { font-size: 0; gap: 0; padding: 2px 3px; margin-left: -3px; } .ap3d svg { width: 10px; height: 10px; } .route { gap: 8px; } .route .apt { gap: 5px; } }

/* Zulu time in the top bars */
.zulu { display: inline-flex; align-items: baseline; gap: 1px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--text); white-space: nowrap; }
.zulu small { font-size: 10.5px; color: var(--muted); font-weight: 700; margin-left: 1px; }
.top-zulu { height: 38px; padding: 0 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); align-items: center; }
.ox-zulu { height: 34px; padding: 0 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.05); align-items: center; color: #f2f3f5; }
@media (max-width: 760px) {
  .app.has-island .top-zulu { display: none; }
  .has-island .ox-zulu { display: none; }
  .top-zulu { padding: 0 8px; font-size: 12.5px; }
}

/* A flight in the File list: the route and its line wrap, the time and the chip keep their place. */
.file-flight > div:first-child { flex: 1 1 auto; min-width: 0; }
.file-flight .meta { overflow-wrap: anywhere; }
.file-flight .right { flex: none; }

/* ---------- Linking Infinite Flight, proved (IfcLink, IfcGate) ---------- */
.ifc-link { display: grid; gap: 10px; }
.ifc-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ifc-row .input { flex: 1 1 200px; min-width: 0; }
.ifc-who { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--text-2); font-size: 14px; }
.ifc-who svg { flex: none; width: 16px; height: 16px; color: var(--yellow-ink); }
.ifc-ways { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.ifc-ways li { display: grid; gap: 4px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ifc-ways li > b { color: var(--text); font-size: 14px; }
.ifc-code { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.ifc-code code { padding: 6px 12px; border-radius: 9px; border: 1px dashed rgba(241, 201, 51, 0.55); background: rgba(241, 201, 51, 0.08); color: var(--yellow-ink); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
.ifc-exp { color: var(--muted); font-size: 12px; }
.ifc-gate { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 50% -10%, rgba(30, 60, 140, 0.35), transparent 60%), var(--bg); }
.ifc-card { width: min(560px, 100%); display: grid; gap: 12px; padding: 28px 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.ifc-card h1 { margin: 0; font-size: 24px; line-height: 1.25; }
.ifc-card > p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.ifc-why { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.ifc-why li { display: flex; gap: 8px; align-items: flex-start; color: var(--text-2); font-size: 13.5px; }
.ifc-why svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--green); }
.ifc-out { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); }
.ifc-out svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .ifc-card { padding: 22px 18px; } .ifc-card h1 { font-size: 21px; } }

/* Why a flight leaves the base: the card's "Why?", and the chip's popover. */
.bn-why-btn { flex: none; padding: 3px 9px; border-radius: 99px; border: 1px solid currentColor; background: none; color: inherit; font: 700 12px inherit; cursor: pointer; opacity: 0.85; }
.bn-why-btn:hover, .bn-why-btn[aria-expanded="true"] { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.bn-why { margin: 10px 0 0; padding: 10px 12px 10px 28px; display: grid; gap: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.18); color: var(--text-2); font-size: 13px; line-height: 1.5; }
.bn-why b { color: var(--text); }
.booked-base-wrap { position: relative; display: inline-flex; }
.booked-base.why { cursor: pointer; border: 0; font: inherit; }
.booked-base.why em { margin-left: 6px; padding-left: 6px; border-left: 1px solid currentColor; font-style: normal; font-weight: 800; opacity: 0.9; }
.booked-base-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(380px, calc(100vw - 32px)); border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.booked-base-pop .bn-why { margin: 0; background: none; }
.crash-box { display: grid; gap: 8px; max-width: 560px; margin: 24px auto; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(255, 93, 93, 0.4); background: rgba(255, 93, 93, 0.06); color: var(--text-2); }
.crash-box b { color: var(--text); font-size: 15px; }
.crash-box div { display: flex; gap: 8px; margin-top: 4px; }
.update-banner { position: fixed; z-index: 70; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 16px; border-radius: 14px; border: 1px solid rgba(241, 201, 51, 0.5); background: var(--panel); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); color: var(--text-2); font-size: 13.5px; }
.update-banner b { color: var(--text); }
@media (max-width: 920px) { .update-banner { bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* The x2 welcome bonus from recruitment: on the dashboard until used, and on the File page */
.dx-card.wb-card { flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px; border-color: rgba(241, 201, 51, 0.34);
  background: linear-gradient(110deg, rgba(241, 201, 51, 0.13), rgba(241, 201, 51, 0.02) 55%), var(--panel, var(--bg-2)); }
.wb-x { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--yellow); color: #1a1505; font-size: 24px; font-weight: 800; }
.wb-txt { flex: 1; min-width: 0; }
.wb-txt .dx-tag { margin: 0 0 4px; }
.wb-txt p { margin: 0; color: var(--text-2); line-height: 1.5; font-size: 14px; }
.wb-txt p b { color: var(--text); }
.wb-card > .btn { flex: none; }
@media (max-width: 640px) { .dx-card.wb-card { flex-wrap: wrap; align-items: flex-start; } .wb-x { width: 48px; height: 48px; font-size: 19px; border-radius: 12px; } .wb-txt { flex: 1 1 calc(100% - 64px); } .wb-card > .btn { flex: 1 1 100%; justify-content: center; } }
.wb-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(241, 201, 51, 0.35);
  background: rgba(241, 201, 51, 0.08); color: var(--text-2); font-size: 13.5px; line-height: 1.45; text-align: left; }
.wb-note svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--yellow); }
.wb-note b { color: var(--text); }
.wb-note.wait { border-color: var(--line); background: var(--bg-2); }
.wb-note.wait svg { color: var(--muted); }
.wb-used { max-width: 460px; margin: 4px auto 14px; }
/* Academy desk: the actions card, closing a file, a closed file */
.acd-next.red { background: linear-gradient(90deg, rgba(255, 93, 93, 0.1), var(--panel) 60%); }
.acd-next > div > span svg { vertical-align: -2px; }
.acd-close-btn { color: var(--red); border-color: rgba(255, 93, 93, 0.4); }
.acd-close-btn:hover { background: rgba(255, 93, 93, 0.08); }
.acd-actions { display: grid; gap: 4px; }
.acd-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.acd-action:first-of-type { border-top: 0; }
.acd-action > span { display: grid; gap: 2px; min-width: 0; }
.acd-action b { font-size: 14px; }
.acd-action small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.acd-action .select, .acd-action .btn { flex: none; }
.acd-action.danger b { color: var(--red); }
.acd-reasons { display: grid; gap: 6px; }
.acd-reasons button { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.acd-reasons button.on { border-color: var(--red); background: rgba(255, 93, 93, 0.08); font-weight: 600; }
.acd-consequences { margin-top: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.acd-consequences b { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.acd-consequences ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.acd-consequences li { display: flex; gap: 8px; align-items: flex-start; }
.acd-consequences svg { flex: none; margin-top: 2px; color: var(--muted); }
.acd-closure { border-color: rgba(255, 93, 93, 0.3); }
.acd-closure h3 svg { color: var(--red); }
.acd-facts .late dd, .acd-facts dd.late { color: var(--red); }
.acd-closure-note { margin: 10px 0 0; color: var(--text-2); font-style: italic; }
@media (max-width: 640px) { .acd-action { flex-wrap: wrap; } .acd-action .select, .acd-action .btn { width: 100%; } }
/* Academy desk: room for the file next to three navigation columns */
.acd-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.acd-facts { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
@media (max-width: 1640px) { .acd-grid { grid-template-columns: minmax(0, 1fr); } }
.acd-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.acd-action .select { min-width: 150px; }
.nav-link .beta-tag, .ox-brand .beta-tag { background: rgba(241, 201, 51, 0.16); color: #f1c933; border-radius: 5px; padding: 1px 5px; font-size: 9px; font-weight: 700; margin-left: 6px; }
/* Role editor: staff permissions, job title, the public Staff team */
.pr-perms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.pr-perms label { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; }
.pr-perms label.on { border-color: rgba(241, 201, 51, 0.55); background: var(--yellow-soft); }
.pr-perms input { margin-top: 3px; accent-color: var(--yellow); flex: none; }
.pr-perms span { display: grid; gap: 2px; min-width: 0; }
.pr-perms b { font-size: 13.5px; }
.pr-perms small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.pr-team { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.pr-team label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.pr-team input[type="checkbox"] { accent-color: var(--yellow); }
.pr-team .input { width: 64px; }
@media (max-width: 640px) { .pr-perms { grid-template-columns: minmax(0, 1fr); } }
/* Removing a pilot from FRVG */
.pr-remove { margin-top: 22px; padding: 14px; border-radius: 13px; border: 1px solid rgba(255, 93, 93, 0.35); background: rgba(255, 93, 93, 0.04); }
.pr-remove h4 { color: var(--red); }
.pr-remove-what { margin: 10px 0 0; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
/* The base chip on a booked or Ops flight: wraps on a phone instead of running off the card */
.booked-base-wrap { max-width: 100%; }
.booked-base, .booked-base.why { white-space: normal; text-align: left; max-width: 100%; line-height: 1.35; height: auto; overflow-wrap: anywhere; }
/* Notifications that open what they're about */
.inbox-item { display: block; color: inherit; text-decoration: none; }
.inbox-item.link { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.inbox-item.link:hover { border-color: var(--line-2); background: var(--panel-2); }
/* What's new: the full width of the page (long release notes read better wide) */
.cl-list { max-width: 1240px; }
.cl-entry .md { max-width: none; }
.booked-base { width: fit-content; }

/* Staff: the IFC account found before linking it by hand (Admin → pilot). */
.pi-found { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.pi-found img, .pi-found .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.pi-found > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pi-found small { color: var(--muted); font-size: 12.5px; }
.pi-found small a { color: var(--yellow-ink); }

/* The callsign picker (the gate before the Crew Center, the Profile). */
.cs-pick { text-align: left; }
.cs-row { display: flex; align-items: center; gap: 8px; }
.cs-row .input { width: 96px; text-align: center; font-size: 20px; letter-spacing: 0.12em; }
.cs-pre { color: var(--muted); font-size: 16px; font-weight: 700; }
.cs-state { margin: 10px 0 0; font-size: 14px; }
.cs-state p { margin: 0; }
.cs-state.ok { display: flex; align-items: center; gap: 6px; color: var(--green); }
.cs-state.ok svg { width: 16px; height: 16px; }
.cs-state.taken { color: var(--amber); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cs-chips button { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 13px; }
.cs-chips button:hover { border-color: var(--yellow); }

/* Routes: IFATC open right now (Expert) at either end. */
.atc-chip { display: inline-flex; align-items: center; gap: 4px; }
.atc-chip svg { width: 12px; height: 12px; }
.quick .atc-quick { display: inline-flex; align-items: center; gap: 7px; }
.quick .atc-quick .live-dot { display: inline-block; }

/* A pilot's Infinite Flight record (profile, Admin). */
.if-rec { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.if-rec > div { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.if-rec b { font-family: var(--mono); font-size: 16px; }
.if-rec span { color: var(--muted); font-size: 11.5px; }
.if-rec .low b { color: var(--red); }
.if-rec-warn { margin: 10px 0 0; color: var(--red); font-size: 13px; }

/* "Follow my flight": the public page of a pilot's live flight. */
.fw { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); }
.fw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--topbar); }
.fw-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: 0.04em; }
.fw-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 99px; background: rgba(60, 207, 122, 0.14); color: var(--green); font-size: 12.5px; font-weight: 700; }
.fw-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: blink 1.6s infinite; }
.fw-map { position: relative; min-height: 46vh; }
.fw-map > * { position: absolute; inset: 0; }
.fw-card { display: grid; gap: 14px; padding: 18px; border-top: 1px solid var(--line); background: var(--bg-2); }
.fw-who { display: flex; align-items: center; gap: 12px; }
.fw-who img, .fw-who .avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.fw-who b { display: block; font-size: 17px; }
.fw-who small { color: var(--muted); font-size: 13px; }
.fw-route { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.fw-route b { font-size: 22px; }
.fw-route small { display: block; color: var(--muted); font-size: 12.5px; }
.fw-mid { display: grid; gap: 6px; text-align: center; color: var(--muted); font-size: 12.5px; }
.fw-bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.fw-bar i { display: block; height: 100%; border-radius: 3px; background: var(--yellow); }
.fw-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fw-facts > div { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.fw-facts svg { width: 16px; height: 16px; color: var(--yellow-ink); }
.fw-facts b { font-family: var(--mono); font-size: 16px; }
.fw-facts span { color: var(--muted); font-size: 12px; }
.fw-foot { margin: 0; color: var(--muted); font-size: 12px; }
.fw-foot a { color: var(--yellow-ink); }
.fw-empty { display: grid; place-items: center; align-content: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--muted); }
.fw-empty svg { width: 34px; height: 34px; color: var(--yellow-ink); }
.fw-empty h1 { margin: 0; color: var(--text); font-size: 22px; }
.fw-empty p { margin: 0; max-width: 360px; }
@media (min-width: 980px) { .fw { grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; } .fw-top { grid-column: 1 / -1; } .fw-card { border-top: 0; border-left: 1px solid var(--line); align-content: start; } .fw-map { min-height: 0; } }
@media (max-width: 560px) { .fw-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Logbook ---------- */
.lg-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.lg-date { display: grid; justify-items: center; align-content: center; width: 50px; height: 54px; flex: 0 0 auto; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.lg-date b { font-family: var(--mono); font-size: 18px; line-height: 1; }
.lg-date span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 3px; }
.lg-main { min-width: 0; flex: 1; }
.lg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lg-tags .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; }
.lg-tags .chip svg { width: 11px; height: 11px; }
.lg-atc { display: flex; gap: 10px; align-items: flex-start; }
.lg-atc svg { width: 16px; height: 16px; color: var(--green); flex: 0 0 auto; margin-top: 2px; }
.lg-approach { margin: 0 0 14px; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.lg-approach svg { width: 100%; height: auto; display: block; }
.lg-approach text { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.lg-approach .g { stroke: var(--line); }
.lg-approach .ideal { stroke: #6f9bff; stroke-width: 2; stroke-dasharray: 7 6; fill: none; }
.lg-approach .flown { stroke: var(--yellow); stroke-width: 3.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.lg-approach .speed { stroke: var(--green); stroke-width: 2; fill: none; opacity: 0.8; }
.lg-approach figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.lg-key { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.lg-key i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-left: 6px; }
.lg-key .k1 { background: var(--yellow); } .lg-key .k2 { background: #6f9bff; } .lg-key .k3 { background: var(--green); }
@media (max-width: 760px) {
  .lg-date { width: 42px; height: 48px; }
}
.lg-profile .mark { stroke: var(--muted); stroke-dasharray: 3 4; }
.lg-profile text { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.lg-id { font-size: 11.5px; overflow-wrap: anywhere; }

/* Stats: the period (all time / today in Zulu) and whose. */
.st-switches { display: flex; flex-wrap: wrap; gap: 8px; }
.st-today-r { display: flex; gap: 10px; align-items: baseline; }

/* Support tickets (Admin → Support) and the Discord ticket of a staff application. */
.sp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-report { list-style: none; margin: 14px 0 0; padding: 12px 14px; display: grid; gap: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line, rgba(255, 255, 255, 0.08)); }
.sp-report li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.sp-report li svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.sp-report li.ok svg { color: #3ba55d; }
.sp-report li.bad svg { color: #f1c933; }
.sp-filter { margin: 12px 16px; }
.sp-row .sp-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row .sp-title b { font-family: var(--mono, ui-monospace, monospace); color: #f1c933; margin-right: 4px; }
.sp-transcript { display: grid; gap: 10px; }
.sp-msg { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.sp-msg.bot { background: rgba(241, 201, 51, 0.05); }
.sp-msg-head { display: flex; gap: 8px; align-items: baseline; }
.sp-msg-head small { color: var(--muted); font-size: 12px; }
.sp-msg p { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; }
.sp-msg .sp-embed { padding-left: 10px; border-left: 3px solid #f1c933; color: var(--muted); }
.sp-msg a { display: block; margin-top: 4px; font-size: 13px; }
.dt-box { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(88, 101, 242, 0.35); background: rgba(88, 101, 242, 0.07); }
.dt-box h4 { display: flex; align-items: center; gap: 8px; }
.dt-box h4 svg { width: 16px; height: 16px; color: #8b95ff; }
.dt-box .muted { margin: 0 0 10px; }
.dt-kinds { margin-bottom: 10px; }

/* Support page: the Crew assistant first, then the staff on Discord (pages/Support.jsx). */
.sup2 { display: grid; gap: 18px; max-width: 1180px; width: 100%; margin: 0 auto; }
.sup2-head { padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(120% 140% at 0% 0%, rgba(43, 91, 255, 0.22), transparent 60%), radial-gradient(90% 120% at 100% 0%, rgba(241, 201, 51, 0.12), transparent 55%), var(--panel); }
.sup2-head h1 { margin: 4px 0 6px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.01em; }
.sup2-head p { margin: 0; max-width: 640px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.sup2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.sup2-chat { display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.sup2-chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, rgba(43, 91, 255, 0.12), transparent 70%); }
.sup2-chat-head > div { display: grid; flex: 1; min-width: 0; }
.sup2-chat-head b { font-size: 14.5px; }
.sup2-chat-head small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.sup2-chat-head small i { width: 7px; height: 7px; border-radius: 50%; background: #3ba55d; box-shadow: 0 0 0 3px rgba(59, 165, 93, 0.18); }
.sup2-chat-head small i.off { background: #8b95ff; box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.2); }
.sup2-avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--yellow-soft); color: var(--yellow-ink); }
.sup2-avatar svg { width: 17px; height: 17px; }
.sup2-avatar.sm { width: 26px; height: 26px; border-radius: 8px; margin-top: 2px; }
.sup2-avatar.sm svg { width: 13px; height: 13px; }
.sup2-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-height: 380px; max-height: min(62vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.sup2-row { display: flex; gap: 8px; align-items: flex-start; }
.sup2-row.user { justify-content: flex-end; }
.sup2-row .ai-msg { max-width: min(85%, 640px); font-size: 14px; }
.sup2-hello { margin: auto 0; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 18px 8px; }
.sup2-hello b { font-size: 17px; }
.sup2-hello p { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; }
.sup2-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 620px; }
.sup2-topics button { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg, transparent); color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.sup2-topics button:hover { border-color: rgba(241, 201, 51, 0.5); transform: translateY(-1px); }
.sup2-topics svg { width: 16px; height: 16px; color: var(--yellow-ink); flex: none; }
.sup2-ticket { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid rgba(88, 101, 242, 0.5); background: linear-gradient(120deg, rgba(88, 101, 242, 0.18), rgba(88, 101, 242, 0.06)); }
.sup2-ticket.done { border-color: var(--line); background: var(--bg-2, transparent); }
.sup2-ticket > svg { width: 24px; height: 24px; color: #8b95ff; flex: none; }
.sup2-ticket > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sup2-ticket span { color: var(--muted); font-size: 13px; }
.sup2-input { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.sup2-input textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg, var(--panel)); color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.4; }
.sup2-input textarea:focus { outline: none; border-color: rgba(241, 201, 51, 0.6); }
.sup2-input .btn { width: 44px; height: 44px; padding: 0; flex: none; }
.sup2-transfer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 14px 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(88, 101, 242, 0.55); background: rgba(88, 101, 242, 0.07); }
.sup2-transfer > span { display: flex; align-items: center; gap: 8px; color: var(--text-2, var(--text)); font-size: 13.5px; }
.sup2-transfer > span svg, .sup2-confirm b svg { width: 16px; height: 16px; color: #8b95ff; }
.sup2-transfer .btn { border-color: rgba(88, 101, 242, 0.6); }
.sup2-confirm { display: grid; gap: 8px; margin: 0 14px 12px; padding: 14px; border-radius: 12px; border: 1px solid rgba(88, 101, 242, 0.6); background: rgba(88, 101, 242, 0.1); }
.sup2-confirm b { display: flex; align-items: center; gap: 8px; }
.sup2-confirm p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sup2-confirm textarea { resize: vertical; }
.sup2-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sup2-foot { padding: 0 14px 12px; color: var(--muted); font-size: 11.5px; text-align: center; }
.sup2-side { display: grid; gap: 14px; position: sticky; top: 76px; }
.sup2-card { padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.sup2-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.sup2-card h3 svg { width: 16px; height: 16px; }
.sup2-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; } .sup2-card p:last-child { margin: 0; }
.sup2-card.status.live { border-color: rgba(88, 101, 242, 0.55); background: linear-gradient(160deg, rgba(88, 101, 242, 0.16), var(--panel) 70%); }
.sup2-card.status.live h3 { color: #8b95ff; }
.sup2-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sup2-steps li { display: flex; gap: 10px; align-items: flex-start; }
.sup2-steps li > div { display: grid; gap: 2px; }
.sup2-steps b { font-size: 13.5px; }
.sup2-steps li > div span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.sup2-step { position: relative; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--yellow-soft); color: var(--yellow-ink); }
.sup2-step svg { width: 16px; height: 16px; }
.sup2-step em { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; background: var(--yellow); color: #111; }
.sup2-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sup2-tips li { display: flex; gap: 9px; align-items: center; font-size: 13px; }
.sup2-tips svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
@media (max-width: 980px) { .sup2-grid { grid-template-columns: 1fr; } .sup2-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width: 640px) {
  .sup2-head { padding: 16px; }
  .sup2-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sup2-body { min-height: 300px; max-height: 60vh; padding: 12px; }
  .sup2-ticket { flex-wrap: wrap; } .sup2-ticket .btn { width: 100%; justify-content: center; }
  .sup2-transfer .btn, .sup2-confirm-actions .btn { width: 100%; justify-content: center; }
}
.sp-open { display: block; min-width: 0; flex: 1; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp-open:hover .sp-title { text-decoration: underline; text-underline-offset: 2px; }
.sp-bot { width: 15px; height: 15px; color: #8b95ff; vertical-align: -2px; margin-right: 6px; }
.sp-quote { font-style: italic; }
.sp-handover { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(88, 101, 242, 0.35); background: rgba(88, 101, 242, 0.07); }
.sp-handover h4 { display: flex; align-items: center; gap: 8px; }
.sp-handover h4 svg { width: 16px; height: 16px; color: #8b95ff; }
.sp-handover h5 { margin: 10px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.sp-handover p { margin: 0; white-space: pre-wrap; }
.sp-rich p, .sp-rich ul { margin: 6px 0 0; } .sp-rich ul { padding-left: 18px; }
.sup-fixed { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(59, 165, 93, 0.14); color: #5fd38a; }
.sup-fixed svg { width: 13px; height: 13px; }

/* The move to our own servers (Maintenance.jsx): red, on every page until it's done. */
.maint-banner { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(229, 72, 77, 0.65); background: linear-gradient(120deg, rgba(229, 72, 77, 0.22), rgba(229, 72, 77, 0.1)); color: var(--text); }
.maint-banner > svg { width: 22px; height: 22px; color: #ff6b6f; flex: none; margin-top: 1px; }
.maint-banner > div { display: grid; gap: 4px; min-width: 0; }
.maint-banner b { color: #ff8a8d; font-size: 14.5px; }
.maint-banner span { color: var(--text-2, var(--text)); font-size: 13.5px; line-height: 1.5; }
.maint-banner.compact { margin: 0; border-radius: 0; border-width: 0 0 1px; padding: 9px 16px; align-items: center; }
.maint-banner.compact b { font-size: 13px; }
.login-box .maint-banner { text-align: left; }
.maint-strip { position: relative; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 18px; background: #c4282d; color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.25); }
.maint-strip > svg { width: 18px; height: 18px; flex: none; }
.maint-strip p { margin: 0; font-size: 13.5px; line-height: 1.45; text-align: center; max-width: 1100px; }
.maint-strip b { font-weight: 700; }
@media (max-width: 640px) { .maint-strip { justify-content: flex-start; padding: 9px 14px; } .maint-strip p { text-align: left; font-size: 12.5px; } }
.maint-strip { padding-right: 52px; }
.maint-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; }
.maint-close:hover { background: rgba(255, 255, 255, 0.26); }
.maint-close svg { width: 16px; height: 16px; }

/* ---------- Pilot Academy (the trainee's space): one next step, then the details ---------- */
.ax-main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 64px; }
.ax-page { display: grid; gap: 16px; }
.ax-app .eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow-ink); }
.ax-small { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ax-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ax-big { height: 46px; padding: 0 20px; font-size: 15px; }

/* Hello and progress */
.ax-hello { display: grid; gap: 18px; }
.ax-hello h1 { margin: 4px 0 4px; font-size: clamp(26px, 4vw, 36px); }
.ax-hello p { margin: 0; font-size: 14.5px; }
.ax-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ax-track li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.ax-track .dot { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); font-size: 12.5px; font-weight: 700; }
.ax-track .dot svg { width: 15px; height: 15px; }
.ax-track b { color: var(--text-2); font-size: 14px; }
.ax-track small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-track li.done .dot { background: rgba(60, 207, 122, 0.15); color: var(--green); }
.ax-track li.now { border-color: rgba(241, 201, 51, 0.55); background: linear-gradient(180deg, var(--yellow-soft), var(--panel)); }
.ax-track li.now .dot { background: var(--yellow); color: #10224d; }
.ax-track li.now b { color: var(--text); }

/* The next step */
.ax-next { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 24px 26px; border-radius: 20px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 160% at 100% 0%, rgba(241, 201, 51, 0.18), transparent 55%), linear-gradient(135deg, #10224d, #0b1736); border: 1px solid rgba(241, 201, 51, 0.4); }
.ax-next.calm { border-color: rgba(255, 255, 255, 0.1); background: radial-gradient(120% 160% at 100% 0%, rgba(111, 155, 255, 0.14), transparent 55%), linear-gradient(135deg, #10224d, #0b1736); }
.ax-next .ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(241, 201, 51, 0.16); color: var(--yellow); }
.ax-next.calm .ic { background: rgba(255, 255, 255, 0.08); color: #c9d4ee; }
.ax-next .ic svg { width: 26px; height: 26px; }
.ax-next h2 { margin: 4px 0 6px; font-size: clamp(20px, 3vw, 26px); color: #fff; }
.ax-next p { margin: 0; color: #c9d4ee; font-size: 14.5px; line-height: 1.55; max-width: 680px; }
.ax-next .eyebrow { color: var(--yellow); }
.ax-next.calm .eyebrow { color: #8ea0c9; }
.ax-next .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, 0.22); }

/* Cards */
.ax-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ax-card { padding: 18px 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.ax-card.flush { padding: 0; overflow: hidden; }
.ax-card.flush > header { padding: 18px 20px 6px; }
.ax-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ax-card h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; }
.ax-card h3 svg { width: 17px; height: 17px; color: var(--muted); }
.ax-route { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 14px; }
.ax-route b { display: block; font-size: 30px; line-height: 1; }
.ax-route small { color: var(--muted); font-size: 13px; }
.ax-route .r { text-align: right; }
.ax-route .arc { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
.ax-route .arc svg { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; color: var(--yellow-ink); transform: translate(-50%, -50%) rotate(45deg); background: var(--panel); padding: 2px; box-sizing: content-box; }
.ax-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ax-facts div { padding: 10px 12px; border-radius: 11px; background: var(--panel-2); }
.ax-facts dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ax-facts dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 600; }
.ax-facts dd small { color: var(--muted); font-weight: 500; }
.ax-facts .late dd { color: var(--red); }
.ax-note { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--yellow-soft); border: 1px solid rgba(241, 201, 51, 0.3); }
.ax-note svg { flex: none; width: 17px; height: 17px; color: var(--yellow-ink); margin-top: 2px; }
.ax-note p { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.ax-assessed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ax-assessed li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--line-2); }
.ax-assessed b { font-size: 14px; }
.ax-assessed span { color: var(--text-2); font-size: 13px; line-height: 1.5; }

/* Logging the flight */
.ax-log.closed { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ax-log.closed > header { margin: 0; flex: 1 1 200px; }
.ax-log.closed p { flex: 2 1 300px; margin: 0; }
.ax-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-steps > li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; opacity: 0.55; }
.ax-steps > li.now, .ax-steps > li.done { opacity: 1; }
.ax-steps > li::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: var(--line); }
.ax-steps > li:last-child::before { display: none; }
.ax-steps .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); font-weight: 800; }
.ax-steps .n svg { width: 16px; height: 16px; }
.ax-steps li.now .n { background: var(--yellow); color: #10224d; }
.ax-steps li.done .n { background: rgba(60, 207, 122, 0.15); color: var(--green); }
.ax-steps > li > div > b { display: block; margin: 7px 0 2px; font-size: 15px; }
.ax-steps .input { width: 100%; margin-top: 8px; }
.ax-steps .btn { margin-top: 10px; }
.ax-flights { display: grid; gap: 8px; margin-top: 10px; }
.ax-flights button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); text-align: left; }
.ax-flights button:hover:not(:disabled) { border-color: var(--yellow); }
.ax-flights button.on { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(241, 201, 51, 0.15); }
.ax-flights button:disabled { opacity: 0.55; cursor: not-allowed; }
.ax-flights span { color: var(--muted); font-size: 12.5px; }
.ax-flights em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; color: var(--muted); padding: 3px 9px; border-radius: 99px; background: var(--panel); }
.ax-flights em.ok { color: var(--green); background: rgba(60, 207, 122, 0.1); }
.ax-flights em svg { width: 13px; height: 13px; }

/* Attempts and feedback */
.ax-attempts { display: grid; }
.ax-attempt { border-top: 1px solid var(--line); }
.ax-attempt .head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 20px; border: 0; background: none; color: var(--text); text-align: left; }
.ax-attempt .head .muted { flex: 1; font-size: 13px; }
.ax-attempt .chev { width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s; }
.ax-attempt.open .chev { transform: rotate(180deg); }
.ax-attempt .body { display: grid; gap: 12px; padding: 0 20px 18px; }
.ax-summary { margin: 0; font-size: 14.5px; line-height: 1.6; }
.ax-ratings { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.ax-rating { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border-left: 3px solid var(--line-2); }
.ax-rating.good { border-left-color: var(--green); }
.ax-rating.okay { border-left-color: var(--amber); }
.ax-rating.improve { border-left-color: var(--red); }
.ax-rating .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ax-rating p { margin: 6px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

/* Certified */
.ax-certified { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; border-radius: 22px; text-align: center; color: #fff;
  background: radial-gradient(100% 120% at 50% 0%, rgba(241, 201, 51, 0.22), transparent 60%), linear-gradient(135deg, #10224d, #0b1736); }
.ax-certified h1 { margin: 4px 0; font-size: clamp(30px, 5vw, 44px); color: #fff; }
.ax-certified p { margin: 0 0 10px; color: #c9d4ee; max-width: 520px; }
.ax-certified .eyebrow { color: var(--yellow); }
.ax-cap { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--yellow); color: #10224d; margin-bottom: 6px; }
.ax-cap svg { width: 38px; height: 38px; }

@media (max-width: 860px) {
  .ax-grid { grid-template-columns: minmax(0, 1fr); }
  .ax-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ax-next { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .ax-next .ic { width: 44px; height: 44px; }
  .ax-actions .btn { flex: 1 1 100%; justify-content: center; }
  .ax-flights button { grid-template-columns: minmax(0, 1fr); }
  .ax-route b { font-size: 24px; }
  .ax-attempt .head { flex-wrap: wrap; padding: 14px 16px; }
  .ax-attempt .head .muted { order: 3; flex-basis: 100%; }
}
.ax-app .ac-top { padding-left: max(16px, calc((100vw - 1040px) / 2)); padding-right: max(16px, calc((100vw - 1040px) / 2)); }
.ax-col { display: grid; gap: 16px; }
.ax-ready { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ax-ready button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 0; background: none; color: var(--text-2); font-size: 13.5px; line-height: 1.45; text-align: left; }
.ax-ready button:hover { background: var(--panel-2); }
.ax-ready .box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line-2); color: transparent; }
.ax-ready .box svg { width: 13px; height: 13px; }
.ax-ready button.on { color: var(--muted); text-decoration: line-through; }
.ax-ready button.on .box { background: var(--green); border-color: var(--green); color: #fff; }
/* Deadline passed: the file closes automatically after 3 days */
.ax-next.late { border-color: rgba(229, 72, 77, 0.45); background: radial-gradient(120% 160% at 100% 0%, rgba(229, 72, 77, 0.18), transparent 55%), linear-gradient(135deg, #2a1418, #170c10); }
.ax-next.late .ic { background: rgba(229, 72, 77, 0.16); color: #ff8a8f; }
.ax-next.late .eyebrow { color: #ff8a8f; }

/* ---------- The web app (html.pwa: installed on the home screen, or ?app=1) ----------
   Only here: the browser version of the site is untouched. On a phone it reads as an app:
   a tab bar with the flight in the middle, a Menu tab for the rest, a back button on the
   pages under it, pull to reload, no text selection or long-press previews on the controls. */
.pwa body { -webkit-user-select: none; user-select: none; }
.pwa :is(input, textarea, select, [contenteditable], .content p, .content td, .content .mono, .drawer-body, .ai-panel) { -webkit-user-select: text; user-select: text; }
.pwa :is(.app-tabs, .topbar, .ox-bottom, .ox-top) a { -webkit-touch-callout: none; }
.pwa .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
.pwa .ox-top { padding-top: calc(10px + env(safe-area-inset-top)); }
.app-tabs { display: none; }

@media (max-width: 920px) {
  /* The top bar: the page's title (a back button under Menu), the flight island, search, alerts. */
  .pwa .topbar { padding-left: 14px; padding-right: 14px; gap: 6px; min-height: 56px; }
  .pwa .topbar .crumb { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .pwa .has-island .topbar .crumb { display: none; }
  .pwa .brand-mini, .pwa .topbar .file-btn, .pwa .topbar .me-btn, .pwa .topbar .top-zulu { display: none; }
  .pwa .topbar .search-btn { width: 38px; padding: 0; justify-content: center; }
  .app-back { display: grid; place-items: center; width: 34px; height: 38px; margin-left: -8px; border: 0; background: none; color: var(--yellow-ink); }
  .app-back svg { width: 26px; height: 26px; }
  .pwa .content { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  .pwa .toasts { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .pwa .update-banner { bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* Fields at 16 px: iOS doesn't zoom the page when one is tapped. */
  .pwa :is(input, select, textarea) { font-size: max(16px, 1em); }

  /* The tab bar. */
  .pwa .app-tabs {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    padding: 6px 8px calc(4px + env(safe-area-inset-bottom)); background: var(--tabbar); border-top: 1px solid var(--line);
    backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  }
  .app-tabs a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 2px; color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; transition: color 0.15s, transform 0.12s; }
  .app-tabs a:active { transform: scale(0.92); }
  .app-tabs .ic { position: relative; display: grid; place-items: center; width: 54px; height: 30px; border-radius: 15px; transition: background 0.2s; }
  .app-tabs .ic svg { width: 23px; height: 23px; }
  .app-tabs .ic .avatar { width: 26px; height: 26px; font-size: 11px; box-shadow: 0 0 0 2px transparent; transition: box-shadow 0.2s; }
  .app-tabs a[aria-current="page"] { color: var(--yellow-ink); }
  .app-tabs a[aria-current="page"]:not(.center) .ic { background: var(--yellow-soft); }
  .app-tabs a[aria-current="page"] .avatar { box-shadow: 0 0 0 2px var(--yellow-ink); }
  .app-tabs .badge { position: absolute; top: -3px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font: 700 10px/17px system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
  /* The middle tab: the flight, raised. */
  .app-tabs a.center .ic { width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; background: var(--yellow); color: #111; box-shadow: 0 8px 20px rgba(241, 201, 51, 0.32), 0 0 0 5px var(--bg); }
  .app-tabs a.center .ic svg { width: 25px; height: 25px; }
  .app-tabs a.center[aria-current="page"] .ic { box-shadow: 0 8px 22px rgba(241, 201, 51, 0.45), 0 0 0 5px var(--bg), 0 0 0 7px rgba(241, 201, 51, 0.35); }
  .app-tabs a.center .dot { position: absolute; top: 4px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--yellow); }
  .app-tabs a.center.pulse .ic { animation: app-pulse 1.8s infinite; }
  @keyframes app-pulse { 50% { box-shadow: 0 8px 26px rgba(241, 201, 51, 0.6), 0 0 0 5px var(--bg), 0 0 0 11px rgba(241, 201, 51, 0.18); } }
  .pwa .ai-fab { display: none; }
}
/* A tablet in the app keeps the sidebar (no tab bar). */

/* Pull to reload. */
.ptr { position: fixed; z-index: 60; top: calc(env(safe-area-inset-top) + 64px); left: 50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow); color: var(--muted); pointer-events: none; transition: color 0.15s; }
.ptr svg { width: 18px; height: 18px; }
.ptr.ready { color: var(--yellow-ink); }
.ptr.busy svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- The Menu tab ---------- */
.am { display: grid; gap: 10px; max-width: 640px; margin: 0 auto; }
.am-me { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(23, 58, 138, 0.5), rgba(13, 34, 87, 0.25)), var(--panel); border: 1px solid var(--line); }
.am-me .avatar { width: 58px; height: 58px; font-size: 22px; box-shadow: 0 0 0 2px rgba(241, 201, 51, 0.5); }
.am-me > div { min-width: 0; flex: 1; display: grid; gap: 1px; }
.am-me b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-me small { color: var(--text-2); font-size: 12.5px; }
.am-me small.mono { color: var(--muted); font-size: 11.5px; }
.am-go { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.am-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.am-tiles a { display: grid; justify-items: center; gap: 6px; padding: 14px 4px 11px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text-2); transition: transform 0.12s; }
.am-tiles a:active, .am-row:active, .am-me:active { transform: scale(0.98); }
.am-tiles svg { width: 22px; height: 22px; color: var(--yellow-ink); }
.am-sec { margin: 8px 6px -4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.am-group { border-radius: 18px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.am-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 14px; border: 0; background: none; text-align: left; font-size: 15px; font-weight: 500; color: var(--text); transition: background 0.12s, transform 0.12s; }
.am-row + .am-row { border-top: 1px solid var(--line); }
.am-row:hover { background: var(--hover); }
.am-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--panel-2); flex: 0 0 auto; }
.am-ic svg { width: 17px; height: 17px; color: var(--text-2); }
.am-l { flex: 1; min-width: 0; }
.am-count { min-width: 22px; padding: 1px 7px; border-radius: 11px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; }
.am-row.danger, .am-row.danger .am-ic svg { color: var(--red); }
.am-theme .seg button { padding: 6px 10px; font-size: 12.5px; }
.am-foot { margin: 10px 0 0; color: var(--muted); font-size: 11.5px; text-align: center; line-height: 1.6; }

/* The base chip's "Why?" on one line (it broke as "Wh y?" on a phone). */
.pwa .booked-base.why em { white-space: nowrap; overflow-wrap: normal; }

/* ---------- "Get the app" (the browser version: InstallPrompt.jsx) ----------
   A sheet from the bottom on a phone, a card in the middle on a computer. */
.ip-back { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade 0.2s; }
.ip-sheet { position: relative; width: min(440px, 100%); padding: 24px 22px 20px; border-radius: 24px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow); animation: ip-up 0.32s cubic-bezier(0.2, 0.9, 0.25, 1); }
@keyframes ip-up { from { opacity: 0; transform: translateY(26px) scale(0.98); } }
.ip-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--panel-2); color: var(--muted); }
.ip-x svg { width: 16px; height: 16px; }
.ip-head { display: flex; gap: 16px; align-items: center; padding-right: 26px; }
.ip-head img { width: 68px; height: 68px; border-radius: 17px; flex: 0 0 auto; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.ip-head h2 { margin: 0 0 3px; font-size: 19px; }
.ip-head p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ip-points { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ip-points li { position: relative; padding-left: 26px; color: var(--text-2); font-size: 14px; }
.ip-points li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px var(--yellow-soft); }
.ip-steps { display: grid; gap: 10px; margin: 18px 0 0; padding: 14px; list-style: none; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.ip-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ip-steps li b { color: var(--text); }
.ip-steps .n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; background: var(--yellow); color: #111; font-size: 12.5px; font-weight: 800; }
.ip-glyph { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 0 2px; border-radius: 7px; background: var(--panel-2); color: var(--blue); vertical-align: -6px; font-style: normal; }
.ip-glyph svg { width: 15px; height: 15px; }
.ip-steps .ip-note { display: block; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.ip-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.ip-foot .btn { min-width: 112px; justify-content: center; }
@media (max-width: 560px) {
  .ip-back { place-items: end stretch; padding: 0; }
  .ip-sheet { width: 100%; border-radius: 26px 26px 0 0; padding: 26px 20px calc(18px + env(safe-area-inset-bottom)); border-bottom: 0; animation-name: ip-sheet; }
  .ip-sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--line-2); }
  @keyframes ip-sheet { from { transform: translateY(100%); } }
  .ip-foot .btn { flex: 1; }
}

/* ---------- /app: Get the app ---------- */
.ga { display: grid; gap: 16px; max-width: 760px; }
.ga .page-head { margin-bottom: 4px; }
.ga-hero { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, rgba(23, 58, 138, 0.45), rgba(13, 34, 87, 0.2)), var(--panel); border: 1px solid var(--line); flex-wrap: wrap; }
.ga-hero img { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.ga-id { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.ga-id b { font-size: 18px; }
.ga-id small { color: var(--text-2); font-size: 13px; }
.ga-hint { color: var(--muted); font-size: 13.5px; }
.ga-in { display: inline-flex; align-items: center; gap: 6px; }
.ga-in svg { width: 15px; height: 15px; }
.ga-tabs { width: fit-content; max-width: 100%; overflow-x: auto; }
.ga-tabs button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ga-tabs svg { width: 15px; height: 15px; }
.ga-tabs em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--yellow-soft); color: var(--yellow-ink); }
.ga-tabs button[aria-pressed="true"] em { background: rgba(0, 0, 0, 0.15); color: #111; }
.ga-steps { margin: 0; }
.ga-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ga-points div { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.ga-points b { font-size: 14px; }
.ga-points span { color: var(--muted); font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) {
  .ga-points { grid-template-columns: minmax(0, 1fr); }
  .ga-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .ga-tabs button { justify-content: center; padding: 8px 4px; font-size: 12.5px; }
  .ga-tabs em, .ga-tabs svg { display: none; }
}

/* Charts (src/charts.jsx): stats pages, public and staff. */
.ch { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ch-seg button { font-size: 12.5px; }
.ch-toggle { border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ch-toggle.on { border-color: rgba(241, 201, 51, 0.6); background: var(--yellow-soft); color: var(--yellow-ink); }
/* The summary always on its own line: charts side by side start at the same height. */
.ch-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; flex-basis: 100%; min-height: 44px; }
.ch-sum span { display: flex; flex-direction: column; line-height: 1.15; }
.ch-sum small { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ch-sum b { font-family: var(--mono); font-size: 14px; color: var(--text); }
.ch-sum em { font-style: normal; color: var(--muted); font-size: 11px; }
.ch-plot { position: relative; min-width: 0; outline: none; border-radius: var(--radius-sm); }
.ch-plot:focus-visible { box-shadow: 0 0 0 2px var(--yellow-soft); }
.ch-plot svg { display: block; overflow: visible; touch-action: pan-y; }
.ch-grid line { stroke: var(--line); stroke-width: 1; }
.ch-grid text, .ch-x, .ch-avg text { fill: var(--muted); font: 600 10.5px var(--mono); }
.ch-axis { stroke: var(--line-2); stroke-width: 1; }
.ch-col { fill: rgba(241, 201, 51, 0.55); transition: fill 0.12s; }
.ch-col.peak { fill: var(--yellow); }
.ch-col.on { fill: #ffe27a; }
.ch-avg text { fill: var(--text-2); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.ch-avg line { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; }
.ch-cross { stroke: var(--text-2); stroke-width: 1; opacity: 0.45; }
.ch-line { fill: none; stroke: var(--yellow); stroke-width: 2.2; stroke-linejoin: round; }
.ch-area { fill: rgba(241, 201, 51, 0.14); }
.ch-dot { fill: var(--yellow); stroke: var(--bg); stroke-width: 2; }
.ch-tip { position: absolute; top: 4px; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 3px; min-width: 150px;
  padding: 9px 11px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 12px; }
.ch-tip[data-side="right"] { transform: translateX(10px); }
.ch-tip[data-side="left"] { transform: translateX(calc(-100% - 10px)); }
.ch-tip b { font-size: 12.5px; margin-bottom: 2px; }
.ch-tip span { display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); color: var(--text-2); }
.ch-tip span i { font-style: normal; font-family: inherit; color: var(--muted); font-family: system-ui, sans-serif; }
.ch-tip span.on { color: var(--yellow-ink); font-weight: 700; }
.ch-tip span.sub { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; }
.ch-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.ch-facts b { color: var(--text); font-family: var(--mono); margin-left: 4px; }
.ch-facts .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.green, .ch-split .green { background: var(--green); }
.dot.amber, .ch-split .amber { background: var(--amber); }
.dot.red, .ch-split .red { background: var(--red); }
.ch-split { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--panel-2); }
.ch-split i { display: block; min-width: 4px; }
.ch-delta { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 2px 7px; border-radius: 999px; font: 700 11px var(--mono); vertical-align: middle; }
.ch-delta svg { width: 12px; height: 12px; }
.ch-delta.up { color: var(--green); background: rgba(54, 201, 111, 0.12); }
.ch-delta.down { color: var(--red); background: rgba(240, 80, 80, 0.12); }
.ch-delta.flat { color: var(--muted); background: var(--panel-2); }

/* Heat map: 7 days × 24 hours, row and column totals. */
.ch-heat { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-x: auto; }
.ch-heat-grid { display: grid; grid-template-columns: 34px repeat(24, minmax(9px, 1fr)) 34px; gap: 3px; align-items: center; min-width: 380px; }
.ch-heat-grid .hh { color: var(--muted); font: 600 9.5px var(--mono); text-align: left; }
.ch-heat-grid .dd { color: var(--muted); font-size: 11px; font-weight: 600; }
.ch-heat-grid .tot { color: var(--text-2); font-size: 11px; text-align: right; }
.ch-heat-grid .cell { aspect-ratio: 1; min-height: 9px; border: 0; padding: 0; border-radius: 3px; cursor: pointer;
  background: color-mix(in srgb, var(--yellow) calc(var(--a) * 100%), var(--panel-2)); }
.ch-heat-grid .cell.on, .ch-heat-grid .cell:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.ch-heat-grid .colbar { height: 26px; display: flex; align-items: flex-end; }
.ch-heat-grid .colbar i { display: block; width: 100%; background: rgba(241, 201, 51, 0.45); border-radius: 2px 2px 0 0; }
.ch-heat-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.ch-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.ch-legend i { width: 80px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--panel-2), var(--yellow)); }

/* Sortable ranking table. */
.ch-table { display: flex; flex-direction: column; }
.ch-tr { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) repeat(var(--cols, 2), auto) 40px; gap: 10px; align-items: center;
  padding: 9px 14px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 13px; }
.ch-tr.head { border-top: 0; padding-top: 4px; padding-bottom: 6px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
a.ch-tr:hover { background: var(--hover); }
.ch-tr .rank { color: var(--muted); font-size: 11.5px; }
.ch-tr .name { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 5px; }
.ch-meter { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; background: rgba(241, 201, 51, 0.6); }
.ch-tr .num, .ch-tr .share { text-align: right; white-space: nowrap; min-width: 34px; }
.ch-tr.head .num { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.ch-tr.head .num svg { width: 13px; height: 13px; }
.ch-tr.head .num.on, .ch-tr .num.on { color: var(--yellow-ink); }
.ch-tr .share { color: var(--muted); font-size: 12px; }
.ch-empty { padding: 18px 16px; font-size: 13px; }
.st-rt { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .ch-tr { padding: 9px 12px; gap: 8px; grid-template-columns: 20px minmax(0, 1fr) repeat(var(--cols, 2), auto) 44px; }
}

/* Flight profile (PIREP): altitude + ground speed along the distance flown. */
.pe .pe-hint { font-size: 11.5px; margin-left: auto; }
.pe-alt.on { border-color: rgba(241, 201, 51, 0.6); background: var(--yellow-soft); color: var(--yellow-ink); }
.pe-gs.on { border-color: rgba(95, 155, 255, 0.6); background: rgba(95, 155, 255, 0.14); color: #8fb6ff; }
.pe-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.pe-line.alt { stroke: var(--yellow); }
.pe-line.gs { stroke: #5f9bff; stroke-width: 1.6; }
.pe-area { fill: rgba(241, 201, 51, 0.1); }
.pe-gs-t { fill: #7fa8f0; font: 600 10.5px var(--mono); }
.pe-dot.alt { fill: var(--yellow); stroke: var(--bg); stroke-width: 2; }
.pe-dot.gs { fill: #5f9bff; stroke: var(--bg); stroke-width: 2; }
.pe-mark line { stroke: var(--text-2); stroke-dasharray: 3 4; opacity: 0.55; }
.pe-mark text { fill: var(--text-2); font: 700 10px var(--mono); }
.pe-phase { opacity: 0.06; }
.pe-phase.ground { fill: var(--text-2); }
.pe-phase.climb { fill: var(--green); }
.pe-phase.descent { fill: #5f9bff; }
.pe-sel { fill: rgba(241, 201, 51, 0.16); stroke: var(--yellow); stroke-dasharray: 3 3; }
.pe svg { cursor: crosshair; user-select: none; }
.pe-reset { align-self: flex-start; }
.pe-phases { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.pe-ph.ground { background: var(--muted); }
.pe-ph.climb { background: var(--green); }
.pe-ph.cruise { background: var(--yellow); }
.pe-ph.descent { background: #5f9bff; }

/* Key figures (stats pages) and sections. */
.ch-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ch-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* No hole on the last row, whatever the number of figures: the last ones widen. */
@media (min-width: 1181px) {
  .ch-kpis:not(.three) > :last-child:nth-child(4n + 1) { grid-column: span 4; }
  .ch-kpis:not(.three) > :last-child:nth-child(4n + 2), .ch-kpis:not(.three) > :nth-last-child(2):nth-child(4n + 1) { grid-column: span 2; }
  .ch-kpis:not(.three) > :last-child:nth-child(4n + 3) { grid-column: span 2; }
  .ch-kpis.three > :last-child:nth-child(3n + 1) { grid-column: span 3; }
  .ch-kpis.three > :last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@media (max-width: 1180px) {
  .ch-kpis, .ch-kpis.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-kpis > :last-child:nth-child(odd) { grid-column: span 2; }
}
.ch-kpi { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 18px 0; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.ch-kpi .k { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ch-kpi .k svg { width: 15px; height: 15px; }
.ch-kpi .v { margin-top: 8px; font-family: var(--mono); font-size: 27px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-kpi .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; min-height: 20px; padding-bottom: 14px; }
.ch-kpi .row .ch-delta { margin-left: 0; }
.ch-kpi .s { color: var(--muted); font-size: 12px; }
.ch-kpi.accent { border-color: rgba(241, 201, 51, 0.42); background: linear-gradient(160deg, rgba(241, 201, 51, 0.11), var(--panel) 62%); }
.ch-kpi.accent .v { color: var(--yellow-ink); }
.ch-spark { display: block; width: calc(100% + 36px); margin: -6px -18px 0; height: 34px; }
.ch-spark polygon { fill: rgba(241, 201, 51, 0.12); }
.ch-spark polyline { fill: none; stroke: rgba(241, 201, 51, 0.75); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ch-section { display: flex; flex-direction: column; gap: 12px; }
.ch-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ch-section-head h2 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow-ink); }
.ch-section-head span { color: var(--muted); font-size: 12.5px; }
.ch-grid2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; }
.ch-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ch-grid2 > .card, .ch-grid3 > .card { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 1180px) { .ch-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ch-grid3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 900px) { .ch-grid2, .ch-grid3 { grid-template-columns: minmax(0, 1fr); } .ch-grid3 > :last-child:nth-child(odd) { grid-column: auto; } }

/* ---------- Flight (Crew Center): the booked flight, before you fly, Ops Control ---------- */
.fl { display: grid; gap: 16px; }
.fl > .dx-live { width: 100%; }

/* No booking: pick a route */
.fl-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 20px; align-items: center; padding: 24px;
  background: radial-gradient(600px 220px at 0% 0%, var(--yellow-soft), transparent 60%), var(--panel); }
.fl-pick h1 { margin: 4px 0 4px; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.fl-pick-main > p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.fl-pick-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 18px; }
.fl-pick-opts a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px; align-items: center; padding: 12px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); transition: border-color 0.15s, transform 0.15s; }
.fl-pick-opts a:hover { border-color: rgba(241, 201, 51, 0.5); transform: translateY(-1px); }
.fl-pick-opts svg { grid-row: span 2; width: 20px; height: 20px; color: var(--yellow-ink); }
.fl-pick-opts b { font-size: 14px; }
.fl-pick-opts small { color: var(--muted); font-size: 12px; }
.fl-suggest { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px dashed rgba(241, 201, 51, 0.45); min-width: 0; }
.fl-suggest .lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow-ink); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.fl-suggest .lbl svg { width: 13px; height: 13px; }
.fl-suggest .btn { align-self: flex-start; }
.fl-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fl-how li { position: relative; display: flex; gap: 10px; padding: 14px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
.fl-how li > svg { width: 19px; height: 19px; color: var(--yellow-ink); flex: none; margin-top: 1px; }
.fl-how b { display: block; font-size: 14px; }
.fl-how span:not(.n) { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.fl-how .n { position: absolute; top: 10px; right: 12px; color: var(--muted); font-size: 11px; font-weight: 700; }

/* Booked: the flight, and its map beside it */
.fl-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px; }
.fl-hero.has-map { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.fl-hero-info { display: flex; flex-direction: column; min-width: 0; }
.fl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: live-dot 1.4s ease-in-out infinite; }
.fl-route { align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.fl-route .route { font-size: 28px; gap: 14px; flex-wrap: wrap; }
.fl-route .route .sep { width: 22px; height: 22px; }
.fl-route:hover .route { color: var(--yellow-ink); }
.fl-hero .route-cities { font-size: 13.5px; }
.fl-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 18px 0 0; }
.fl-facts div { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); min-width: 0; }
.fl-facts dt { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-facts .hl { grid-column: span 2; border-color: rgba(241, 201, 51, 0.45); background: var(--yellow-soft); }
.fl-facts .hl dd { color: var(--yellow-ink); }
.fl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; }
.fl-map { min-height: 240px; border-radius: 14px; overflow: hidden; }
.fl-map .route-map, .fl-map .mini-map { height: 100%; min-height: 240px; margin: 0; }

/* Ops Control (the way to fly it) and Before you fly, side by side */
.fl-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.fl-row.solo { grid-template-columns: minmax(0, 1fr); }

/* A brand surface: stays dark in the light theme, like the heroes (see styles.css). */
.fl-ops { position: relative; overflow: hidden; container-type: inline-size; display: flex; flex-direction: column; padding: 22px; border-radius: var(--radius);
  border: 1px solid rgba(80, 120, 220, 0.35); color: var(--text);
  background: radial-gradient(520px 240px at 100% 0%, rgba(241, 201, 51, 0.14), transparent 60%), linear-gradient(140deg, #0b2a6e 0%, #0a1f4d 50%, #0d1528 100%); }
:root[data-theme="light"] .fl-ops {
  --bg: #121316; --panel: #1c1d21; --panel-2: #24252a; --line: #2e3035; --line-2: #3a3c42; --text: #f2f3f5; --text-2: #c9cbd0; --muted: #8e9198;
  --yellow-ink: #f1c933; --yellow-soft: rgba(241, 201, 51, 0.12); --blue: #6f9bff; --green: #3ccf7a; --amber: #ffb547; --red: #ff5d5d; color-scheme: dark;
}
/* A radar sweeping in the corner: the "live" in Ops. */
.fl-ops-radar { position: absolute; right: -110px; top: -110px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(241, 201, 51, 0.13) 0 1px, transparent 1.5px 40px);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%); }
.fl-ops-radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(241, 201, 51, 0.28), transparent 60deg); animation: fl-sweep 6s linear infinite; }
@keyframes fl-sweep { to { transform: rotate(1turn); } }
.fl-ops > :not(.fl-ops-radar) { position: relative; }
.fl-ops-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fl-ops-top .eyebrow { display: inline-flex; align-items: center; gap: 7px; }
.fl-ops-top .eyebrow svg { width: 14px; height: 14px; }
.fl-ops h2 { margin: 8px 0 6px; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
.fl-ops-lead { margin: 0; color: #c7d3f1; font-size: 14.5px; line-height: 1.55; max-width: 560px; }
.fl-ops-lead b { color: var(--text); font-family: var(--mono); }
.fl-ops-run { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(60, 207, 122, 0.1); border: 1px solid rgba(60, 207, 122, 0.35); color: var(--text-2); font-size: 13.5px; }
.fl-ops-run .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; box-shadow: 0 0 0 4px rgba(60, 207, 122, 0.18); animation: live-dot 1.4s ease-in-out infinite; }
.fl-ops-run b { color: var(--text); }
.fl-ops-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.fl-ops-points li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); }
.fl-ops-points .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(241, 201, 51, 0.14); color: var(--yellow-ink); }
.fl-ops-points .ic svg { width: 18px; height: 18px; }
.fl-ops-points b { display: block; font-size: 14px; }
.fl-ops-points span:not(.ic) { display: block; color: #b6c3e6; font-size: 12.5px; line-height: 1.45; }
@container (min-width: 760px) { .fl-ops-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fl-ops-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fl-ops-act .btn.ghost { border-color: rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.18); }
.fl-ops-act .btn.ghost:hover { border-color: rgba(255, 255, 255, 0.55); }
.fl-ops-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; color: #9fb0d8; font-size: 12.5px; line-height: 1.5; }
.fl-ops-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.fl-ops-note.warn { margin-top: 10px; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255, 181, 71, 0.35); background: rgba(255, 181, 71, 0.08); color: var(--text-2); }
.fl-ops-note.warn svg { color: var(--amber); }
.fl-ops-note .link-btn { padding: 0 2px; font-size: 12.5px; }

/* Before you fly */
.fl-before { display: flex; flex-direction: column; }
.fl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fl-steps li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 10px 0 14px; }
/* The line joining the steps */
.fl-steps li:not(:last-child)::before { content: ""; position: absolute; left: 14.5px; top: 42px; bottom: -4px; width: 1px; background: var(--line-2); }
.fl-steps .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text-2); font-size: 13px; font-weight: 700; }
.fl-steps .n svg { width: 15px; height: 15px; }
.fl-steps li.done .n { background: rgba(60, 207, 122, 0.12); border-color: rgba(60, 207, 122, 0.45); color: var(--green); }
.fl-steps b { display: block; font-size: 14.5px; padding-top: 4px; }
.fl-steps p { margin: 3px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.fl-steps p b { display: inline; padding: 0; font-size: inherit; color: var(--text-2); }
.fl-steps p a { color: var(--yellow-ink); font-weight: 600; }
.fl-steps .link-btn { margin-left: -6px; }
.fl-warn { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 181, 71, 0.4); background: rgba(255, 181, 71, 0.07); color: var(--text-2) !important; }
.fl-cs { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px dashed rgba(241, 201, 51, 0.5); background: var(--yellow-soft); color: var(--text); }
.fl-cs .mono { font-size: 15px; font-weight: 700; color: var(--yellow-ink); letter-spacing: 0.04em; }
.fl-cs small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fl-cs svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.fl-cs:hover svg { color: var(--yellow-ink); }

@media (max-width: 1100px) { .fl-row { grid-template-columns: minmax(0, 1fr); } .fl-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .fl-hero.has-map { grid-template-columns: minmax(0, 1fr); }
  .fl-map, .fl-map .route-map, .fl-map .mini-map { min-height: 200px; height: 200px; }
  .fl-pick { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .fl-pick, .fl-hero, .fl-ops { padding: 18px; }
  .fl-pick h1 { font-size: 24px; }
  .fl-route .route { font-size: 22px; gap: 10px; }
  .fl-route .route .sep { width: 18px; height: 18px; }
  .fl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-actions .btn:first-child { flex: 1 1 100%; }
  .fl-actions .btn.ghost { flex: 1 1 0; gap: 6px; padding: 0 8px; font-size: 13px; white-space: nowrap; }
  .fl-ops h2 { font-size: 22px; }
  .fl-ops-act .btn { flex: 1 1 100%; }
  .fl-how { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ops Control: Infinite Flight Live (preview), the organization's fleet ---------- */
/* Colours come from the theme variables only: the page sits in .ops-app (dark in both
   themes), the aircraft drawer on <body> (follows the theme), the tail picker anywhere. */
.ifl { display: grid; gap: 16px; max-width: 1180px; margin: 0 auto; min-width: 0; }
.ifl-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; font-size: clamp(24px, 4.4vw, 32px); line-height: 1.15; letter-spacing: -0.01em; }
.ifl-head h1 .chip { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ifl-head p { margin: 0; max-width: 680px; color: var(--text-2); font-size: 14.5px; }
.ifl-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; white-space: normal; }
.ifl-note svg { width: 17px; height: 17px; margin-top: 2px; color: var(--amber); flex: none; }
.ifl-foot { margin: 4px 0 0; white-space: normal; }
.ifl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.ifl-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--yellow-soft); border: 1px solid rgba(241, 201, 51, 0.35); color: var(--yellow-ink); flex: none; }
.ifl-mark svg { width: 22px; height: 22px; }

/* Not set up: what it does, what the admin does */
.ifl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ifl-tiles > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; row-gap: 2px; align-content: start; padding: 14px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
.ifl-tiles svg { grid-row: span 2; width: 20px; height: 20px; color: var(--yellow-ink); margin-top: 2px; }
.ifl-tiles b { font-size: 14px; }
.ifl-tiles span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.ifl-setup h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-size: 17px; }
.ifl-setup h2 svg { width: 19px; height: 19px; color: var(--yellow-ink); }
.ifl-setup > p { margin: 0 0 12px; font-size: 14px; }
.ifl-setup ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--text-2); font-size: 14px; }
.ifl-setup a { color: var(--yellow-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ifl-setup code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2); font: 12px/1.5 var(--mono); overflow-wrap: anywhere; }
.ifl-setup code.in { display: inline; margin: 0; padding: 1px 6px; border-radius: 6px; }

/* Connect, and connected without an organization */
.ifl-connect { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: radial-gradient(520px 200px at 0% 0%, var(--yellow-soft), transparent 65%), var(--panel); }
.ifl-connect > div { min-width: 0; }
.ifl-connect h2 { margin: 2px 0 6px; font-size: 20px; }
.ifl-connect p { margin: 0; max-width: 620px; color: var(--text-2); font-size: 14.5px; }
.ifl-points { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 7px; }
.ifl-points li { display: flex; align-items: flex-start; gap: 9px; color: var(--text-2); font-size: 13.5px; }
.ifl-points svg { width: 16px; height: 16px; margin-top: 2px; color: var(--green); flex: none; }

/* The organization */
.ifl-org { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; }
.ifl-org .ifl-mark { grid-row: span 2; }
.ifl-org-txt { min-width: 0; }
.ifl-org-txt h2 { margin: 2px 0 0; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.ifl-kpis { grid-row: span 2; display: grid; grid-template-columns: repeat(3, minmax(64px, auto)); gap: 8px; margin: 0; }
.ifl-kpis div { padding: 8px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); text-align: center; }
.ifl-kpis dt { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ifl-kpis dd { margin: 0; font-size: 20px; font-weight: 700; }
.ifl-disconnect { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.ifl-disconnect svg { width: 13px; height: 13px; }

/* The fleet */
.ifl-fleet { display: grid; gap: 10px; min-width: 0; }
.ifl-sec-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ifl-sec-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.ifl-sec-head h2 svg { width: 16px; height: 16px; color: var(--yellow-ink); }
.ifl-sec-head .meta { flex: 1; min-width: 0; margin: 0; }
.ifl-sec-head .icon-btn { margin-left: 0; width: 34px; height: 34px; }
.ifl-sec-head .icon-btn svg { width: 16px; height: 16px; }
.ifl-spin { animation: ifl-spin 0.9s linear infinite; }
@keyframes ifl-spin { to { transform: rotate(1turn); } }
.ifl-warn { display: flex; align-items: center; gap: 6px; margin: 0; white-space: normal; color: var(--amber); }
.ifl-warn svg { width: 14px; height: 14px; flex: none; }
.ifl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ifl-ac { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 15px 12px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel); color: var(--text); text-align: left; transition: border-color 0.15s, transform 0.15s, background 0.15s; }
.ifl-ac:hover { border-color: rgba(241, 201, 51, 0.5); transform: translateY(-1px); }
.ifl-ac:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.ifl-ac-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.ifl-reg { font-size: 23px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.1; }
.ifl-ac-type { color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifl-where { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-2); font-size: 12.5px; }
.ifl-where svg { width: 13px; height: 13px; color: var(--muted); flex: none; }
.ifl-where, .ifl-ac-foot .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifl-ac-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12px; }
.ifl-ac-foot .who { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ifl-ac-foot svg { width: 12px; height: 12px; flex: none; }
.ifl-ac-foot > span:last-child { flex: none; }
.ifl-ac.stale .ifl-where, .ifl-ac.stale .ifl-ac-foot { opacity: 0.75; }
.ifl-ac-flag { position: absolute; top: -8px; right: 12px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* The aircraft drawer: schedule and flight log */
.ifl-dr-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--text-2); font-size: 13px; }
.ifl-dr-facts > span:not(.chip) { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ifl-dr-facts svg { width: 14px; height: 14px; color: var(--muted); }
.ifl-dr-sec { margin-top: 20px; }
.ifl-dr-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ifl-dr-sec h3 svg { width: 15px; height: 15px; color: var(--yellow-ink); }
.ifl-sched { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ifl-sched li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 9px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; }
.ifl-sched small { grid-column: 1 / 3; color: var(--muted); }
.ifl-sched .chip { grid-column: 3; grid-row: 1 / span 2; text-transform: capitalize; }
.ifl-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ifl-flight { padding: 11px 13px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.ifl-flight-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; }
.ifl-flight .meta { white-space: normal; }
.ifl-crew { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ifl-crew span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.ifl-crew svg { width: 12px; height: 12px; color: var(--muted); }
.ifl-crew small { color: var(--muted); font-size: 11px; }
.ifl-more { margin-top: 12px; }

/* Owners and admins: publish the rotation */
.ifl-publish { display: grid; min-width: 0; }
.ifl-publish .ifl-sec-head h2 { white-space: normal; }
.ifl-publish .ifl-sec-head .chip { margin-left: auto; }
.ifl-lead { margin: 10px 0 0; max-width: 760px; color: var(--text-2); font-size: 14px; }
.ifl-empty { margin: 14px 0 0; font-size: 14px; }
.ifl-publish .select { width: 100%; max-width: 420px; }
.ifl-sectors { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ifl-sectors label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 9px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.ifl-sectors label:has(input:checked) { border-color: rgba(241, 201, 51, 0.5); background: var(--yellow-soft); }
.ifl-sectors input, .ifl-check input { width: 16px; height: 16px; accent-color: var(--yellow); margin: 0; }
.ifl-sectors small { color: var(--muted); }
.ifl-check { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: var(--text-2); font-size: 13.5px; cursor: pointer; }
.ifl-result { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.ifl-result li { display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); }
.ifl-result svg { width: 16px; height: 16px; margin-top: 2px; color: var(--muted); flex: none; }
.ifl-result .ok svg { color: var(--green); }
.ifl-result .ko svg { color: var(--red); }

/* The Ops tail picker (flight start) */
.ifl-pick { display: grid; gap: 8px; min-width: 0; }
.ifl-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ifl-pick-head .label { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifl-pick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 196px; overflow-y: auto; overscroll-behavior: contain; }
.ifl-pick-item { display: flex; flex-direction: column; align-items: flex-start; min-width: 104px; padding: 7px 11px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); text-align: left; transition: border-color 0.15s, background 0.15s; }
.ifl-pick-item b { font-size: 14.5px; letter-spacing: 0.03em; }
.ifl-pick-item small { color: var(--muted); font-size: 11.5px; }
.ifl-pick-item:hover:not(:disabled) { border-color: var(--line-hover); }
.ifl-pick-item[aria-checked="true"] { border-color: var(--yellow); background: var(--yellow-soft); }
.ifl-pick-item[aria-checked="true"] small { color: var(--yellow-ink); }
.ifl-pick-item:disabled { opacity: 0.45; cursor: not-allowed; }
.ifl-pick-note { white-space: normal; }
.ifl-pick-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0; color: var(--muted); font-size: 13px; }
.ifl-pick-hint svg { width: 14px; height: 14px; color: var(--yellow-ink); flex: none; }
.ifl-pick-hint > span:not(.chip) { flex: 1 1 180px; min-width: 0; }
.ifl-pick-hint a { color: var(--yellow-ink); font-weight: 600; }

@media (max-width: 760px) {
  .ifl-tiles { grid-template-columns: minmax(0, 1fr); }
  .ifl-org { grid-template-columns: auto minmax(0, 1fr); }
  .ifl-org .ifl-mark { grid-row: auto; }
  .ifl-kpis { grid-row: auto; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ifl-disconnect { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .ifl-connect { flex-direction: column; padding: 18px; }
  .ifl-connect .btn { width: 100%; }
  .ifl-kpis div { padding: 7px 6px; }
  .ifl-grid { grid-template-columns: minmax(0, 1fr); }
  .ifl-publish .ifl-sec-head { flex-wrap: wrap; }
  .ifl-publish .ifl-sec-head .chip { margin-left: 0; }
}

/* ---------- Ops Control V3: the shell, the flight stages, home, boards, logbook ---------- */
.oa-shell .ops-top { gap: 10px; }
.oa-nav { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.oa-nav::-webkit-scrollbar { display: none; }
.oa-nav a, .oa-bottom a, .oa-bottom button { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none; background: none; border: 0; }
.oa-nav a svg { width: 15px; height: 15px; }
.oa-nav a:hover { color: var(--text); background: var(--hover); }
.oa-nav a[aria-current="page"] { background: var(--yellow-soft); color: var(--yellow-ink); }
.oa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(111, 155, 255, 0.18); animation: oa-blink 1.6s ease-in-out infinite; }
.oa-dot.green { background: var(--green); box-shadow: 0 0 0 3px rgba(60, 207, 122, 0.18); }
.oa-dot.amber { background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 181, 71, 0.18); }
@keyframes oa-blink { 50% { opacity: 0.45; } }
.oa-bottom { display: none; }
.oa-main.wide { max-width: 1480px; margin: 0 auto; padding: 18px 16px 60px; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.meta.warn { color: var(--amber); }
.pulse { animation: oa-blink 1.2s ease-in-out infinite; color: var(--amber); }

/* Stages */
.oa-stepper { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.oa-stepper li { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; min-width: 0; }
.oa-stepper .n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 11.5px; }
.oa-stepper .n svg { width: 13px; height: 13px; }
.oa-stepper .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-stepper li.done { color: var(--text-2); }
.oa-stepper li.done .n { background: rgba(60, 207, 122, 0.14); border-color: rgba(60, 207, 122, 0.5); color: var(--green); }
.oa-stepper li.now { color: var(--text); border-color: rgba(241, 201, 51, 0.55); background: linear-gradient(180deg, var(--yellow-soft), transparent); }
.oa-stepper li.now .n { background: var(--yellow); border-color: var(--yellow); color: #10224d; }

/* What to do now */
.oa-now { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.oa-now .ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--panel-2); color: var(--yellow-ink); }
.oa-now .ic svg { width: 20px; height: 20px; }
.oa-now > div { flex: 1; min-width: 0; }
.oa-now b { font-size: 15.5px; }
.oa-now p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.oa-now.act { border-color: rgba(255, 181, 71, 0.6); box-shadow: 0 0 0 3px rgba(255, 181, 71, 0.08); }
.oa-now.act .ic { color: var(--amber); background: rgba(255, 181, 71, 0.12); animation: oa-blink 1.6s ease-in-out infinite; }
.oa-now.go { border-color: rgba(60, 207, 122, 0.5); }
.oa-now.go .ic { color: var(--green); background: rgba(60, 207, 122, 0.12); }

/* Briefing, tech log */
.oa-brief { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.oa-brief li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.oa-brief li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--yellow-ink); }
.oa-brief li.warn, .oa-brief li.warn svg { color: var(--amber); }
.oa-tech { border-color: rgba(255, 181, 71, 0.35); }
.oa-tech p { margin: 0 0 6px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.oa-tech.compact .ops-card-head { margin-bottom: 6px; }

/* The captain's confirmations */
.oa-confirm { border-color: rgba(241, 201, 51, 0.6); box-shadow: 0 0 0 3px rgba(241, 201, 51, 0.08); animation: ops-in 0.3s ease-out; }
.oa-confirm header { display: flex; gap: 11px; align-items: flex-start; }
.oa-confirm header > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--yellow-ink); }
.oa-confirm header div { flex: 1; min-width: 0; }
.oa-confirm header p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }
.oa-confirm header > .mono { color: var(--yellow-ink); font-size: 15px; }
.oa-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 12px 0 0; }
.oa-figures div { padding: 9px 11px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.oa-figures dt { color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.oa-figures dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.oa-ack { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; background: rgba(60, 207, 122, 0.12); color: var(--green); }
.oa-ack.ops { background: rgba(255, 181, 71, 0.12); color: var(--amber); }
.ops-row.confirm .bar { border: 1px dashed var(--yellow); }
.ops-decision.air { border-color: rgba(255, 93, 93, 0.5); box-shadow: 0 0 0 3px rgba(255, 93, 93, 0.08); }
.ops-decision.air header > svg { color: var(--red); }

/* En route */
.oa-track { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.oa-track .bar { position: relative; flex: 1; height: 6px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); }
.oa-track .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, rgba(241, 201, 51, 0.3), var(--yellow)); }
.oa-track .bar b { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: #10224d; }
.oa-track .bar b svg { width: 14px; height: 14px; transform: rotate(45deg); }

/* Arrival: challenge, P&L */
.oa-challenge { display: flex; gap: 12px; align-items: center; }
.oa-challenge > svg { flex: none; width: 22px; height: 22px; color: var(--muted); }
.oa-challenge.ok { border-color: rgba(241, 201, 51, 0.55); background: linear-gradient(90deg, var(--yellow-soft), var(--panel) 60%); }
.oa-challenge.ok > svg { color: var(--yellow-ink); }
.oa-challenge p { margin: 2px 0 0; font-size: 13.5px; }
.oa-finance .ops-card-head b { font-size: 20px; }
.oa-pl-bar { display: flex; gap: 3px; height: 10px; margin: 2px 0 10px; }
.oa-pl-bar i { border-radius: 99px; min-width: 4px; }
.oa-pl-bar .rev { background: var(--green); }
.oa-pl-bar .cost { background: var(--red); opacity: 0.75; }
.oa-pl-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--text-2); margin-bottom: 8px; }
.oa-pl { margin: 10px 0 0; display: grid; gap: 0; }
.oa-pl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.oa-pl dt { color: var(--text-2); }
.oa-pl dd { margin: 0; }
.oa-pl .revenue dd, .oa-pl .bonus dd { color: var(--green); }
.oa-pl .cost dd { color: var(--text-2); }

/* Badges */
.oa-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.oa-badge { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); opacity: 0.5; filter: grayscale(1); }
.oa-badge.on { opacity: 1; filter: none; }
.oa-badge .ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(205, 127, 50, 0.16); color: #e2a065; }
.oa-badge.silver .ic { background: rgba(192, 202, 220, 0.14); color: #d5ddeb; }
.oa-badge.gold .ic { background: rgba(241, 201, 51, 0.16); color: var(--yellow); }
.oa-badge.on.gold { border-color: rgba(241, 201, 51, 0.45); }
.oa-badge .ic svg { width: 17px; height: 17px; }
.oa-badge .t { min-width: 0; display: flex; flex-direction: column; }
.oa-badge b { font-size: 13.5px; }
.oa-badge small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.oa-badge.sm { padding: 5px; border-radius: 50%; }
.oa-badges:has(.oa-badge.sm) { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

/* Start: first flight of the day or a turnaround */
.oa-kind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; }
.oa-kind button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); }
.oa-kind button svg { grid-row: span 2; width: 20px; height: 20px; margin-top: 2px; color: var(--muted); }
.oa-kind button small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.oa-kind button[aria-checked="true"] { border-color: var(--yellow); background: linear-gradient(180deg, var(--yellow-soft), var(--panel-2)); }
.oa-kind button[aria-checked="true"] svg { color: var(--yellow-ink); }

/* Home */
.oa-home { display: grid; gap: 16px; }
.oa-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.oa-hello h1 { margin: 4px 0 0; font-size: clamp(26px, 4vw, 36px); }
.oa-streak { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; background: rgba(255, 120, 60, 0.12); border: 1px solid rgba(255, 120, 60, 0.4); color: #ff9a5c; font-weight: 700; font-size: 13.5px; }
.oa-streak svg { width: 16px; height: 16px; }
.oa-home .ops-network { margin: 0; }
.oa-next { position: relative; display: grid; gap: 8px; padding: 22px 24px; border-radius: calc(var(--radius) + 4px); border: 1px solid var(--line-2); color: var(--text); text-decoration: none; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(241, 201, 51, 0.16), transparent 55%), linear-gradient(135deg, #0f2150, #0b1736); }
.oa-next.on { border-color: rgba(241, 201, 51, 0.5); }
.oa-next .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.oa-next h2 { display: flex; align-items: center; gap: 14px; margin: 4px 0; font-size: clamp(28px, 5vw, 46px); letter-spacing: 0.02em; }
.oa-next h2 svg { width: 26px; height: 26px; color: var(--yellow); transform: rotate(45deg); }
.oa-next p { margin: 0; color: #c9d4ee; font-size: 14px; max-width: 640px; line-height: 1.5; }
.oa-next .btn { justify-self: start; margin-top: 6px; }
.oa-mini-steps { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.oa-mini-steps li { padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #8ea0c9; border: 1px solid rgba(255, 255, 255, 0.08); }
.oa-mini-steps li.done { color: var(--green); border-color: rgba(60, 207, 122, 0.35); }
.oa-mini-steps li.now { color: #10224d; background: var(--yellow); border-color: var(--yellow); }
.oa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.oa-kpis div { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.oa-kpis small { color: var(--muted); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.oa-kpis b { font-size: 24px; }
.oa-kpis em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.oa-home-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.oa-home-grid .oa-badges { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.oa-room { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; }
.oa-room:hover { border-color: var(--yellow); }
.oa-room .ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(60, 207, 122, 0.12); color: var(--green); }
.oa-room > div { flex: 1; }
.oa-room p { margin: 2px 0 0; font-size: 13.5px; }

/* Boards */
.oa-board-tabs { align-self: flex-start; }
.oa-board-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.oa-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.oa-podium .oa-pod { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 10px 0; text-align: center; min-width: 0; }
.oa-podium .oa-pod b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-podium .medal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; background: rgba(192, 202, 220, 0.16); color: #d5ddeb; }
.oa-podium .s1 .medal { background: var(--yellow); color: #10224d; width: 42px; height: 42px; font-size: 18px; }
.oa-podium .s3 .medal { background: rgba(205, 127, 50, 0.2); color: #e2a065; }
.oa-podium .oa-pod i { display: block; width: 100%; margin-top: 8px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-bottom: 0; height: 46px; }
.oa-podium .s1 i { height: 78px; border-color: rgba(241, 201, 51, 0.45); }
.oa-podium .s2 i { height: 60px; }
.oa-podium .me b { color: var(--yellow-ink); }
.ops-rank .otp.neg { color: var(--red); }
.oa-shell .ops-rank li { grid-template-columns: 36px minmax(0, 1fr) minmax(70px, auto) 50px; }
.oa-shell .ops-rank .otp { white-space: nowrap; }

/* Logbook */
.oa-logbook { display: grid; gap: 16px; max-width: 1000px; margin: 0 auto; }
.oa-badges.all { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.oa-history { list-style: none; margin: 10px 0 0; padding: 0; }
.oa-history li { border-top: 1px solid var(--line); }
.oa-history .row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 40px 90px 20px; gap: 12px; align-items: center; width: 100%; padding: 12px 18px; background: none; border: 0; color: var(--text); text-align: left; }
.oa-history .row:hover { background: var(--hover); }
.oa-history .when { display: flex; flex-direction: column; font-size: 13px; }
.oa-history .when small, .oa-history .what small { color: var(--muted); font-size: 12px; }
.oa-history .what { display: flex; flex-direction: column; min-width: 0; }
.oa-history .score { text-align: right; }
.oa-history .money { text-align: right; font-weight: 700; }
.oa-history .chev { width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s; }
.oa-history li.open .chev { transform: rotate(180deg); }
.oa-detail { display: grid; gap: 12px; padding: 4px 18px 18px; }
.oa-detail .ops-card { background: var(--panel-2); }

/* Settings */
.oa-settings { display: grid; gap: 8px; }
.oa-switch { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.oa-switch span { display: flex; flex-direction: column; gap: 3px; }
.oa-switch small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.oa-switch input { flex: none; width: 40px; height: 22px; margin-top: 2px; accent-color: var(--yellow); }

@media (max-width: 1100px) {
  .oa-nav .lbl { display: none; }
  .oa-nav a[aria-current="page"] .lbl { display: inline; }
}
@media (max-width: 980px) {
  .oa-home-grid { grid-template-columns: minmax(0, 1fr); }
  .oa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .oa-nav { display: none; }
  .oa-shell .ops-top { flex-wrap: nowrap; }
  .oa-shell .ops-top > a.btn { display: none; }
  .oa-shell { padding-bottom: 66px; }
  .oa-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--topbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .oa-bottom a, .oa-bottom button { flex-direction: column; justify-content: center; gap: 2px; height: 50px; padding: 0 2px; font-size: 11px; }
  .oa-bottom svg { width: 19px; height: 19px; }
  .oa-bottom a[aria-current="page"] { color: var(--yellow-ink); background: var(--yellow-soft); }
  .oa-bottom .oa-dot { position: absolute; top: 8px; right: calc(50% - 16px); }
  .oa-stepper { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .oa-stepper li { justify-content: center; padding: 8px 4px; }
  .oa-stepper .l { display: none; }
  .oa-stepper li.now .l { display: none; }
  .oa-now { align-items: flex-start; flex-wrap: wrap; }
  .oa-now .btn { margin-left: 54px; }
  .oa-kind { grid-template-columns: minmax(0, 1fr); }
  .oa-history .row { grid-template-columns: 52px minmax(0, 1fr) auto 70px 16px; padding: 12px 14px; }
  .oa-history .score { display: none; }
  .oa-podium .oa-pod i { height: 36px; }
  .oa-podium .s1 i { height: 58px; }
  .oa-podium .s2 i { height: 46px; }
}
@media (max-width: 420px) {
  .oa-kpis b { font-size: 20px; }
  .oa-next { padding: 18px; }
  .ops-top .ops-clock { display: none; }
}
/* A phone: the sector on its own line, the punctuality and the money under it. */
@media (max-width: 520px) {
  .oa-history .row { grid-template-columns: 50px minmax(0, 1fr) auto 16px; grid-template-areas: "when what what chev" "when chip money chev"; column-gap: 10px; row-gap: 6px; }
  .oa-history .when { grid-area: when; align-self: start; }
  .oa-history .what { grid-area: what; }
  .oa-history .row > .chip { grid-area: chip; justify-self: start; }
  .oa-history .money { grid-area: money; }
  .oa-history .chev { grid-area: chev; }
}

/* ---------- Ops Control: the flight card (ShareCard) ---------- */
/* The image is dark in both themes; the frame around it follows the theme. Laid out by
   the card's own width (container query), so it fits a 390 px phone wherever it sits. */
.osc { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; }
.osc-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.osc-head h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2, var(--text)); white-space: nowrap; }
.osc-head span { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; font-weight: 600; }

.osc-frame { position: relative; display: block; aspect-ratio: 1200 / 630; overflow: hidden; border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--line); background: linear-gradient(135deg, #0b1736, #10224d); }
.osc-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.25s ease, transform 0.25s ease; }
.osc-frame:hover img { transform: scale(1.01); }
.osc-frame:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
/* While it loads: a shimmer on the card's own navy. */
.osc-frame[data-state="loading"] img { opacity: 0; }
.osc-frame[data-state="loading"]::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%); background-size: 200% 100%; animation: osc-shimmer 1.2s infinite; }
.osc-frame[data-state="failed"] img { opacity: 0; }
.osc-failed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px;
  color: #c9d3ec; font-size: 13px; font-weight: 600; text-align: center; }
.osc-failed svg { width: 22px; height: 22px; color: #8494bd; }
@keyframes osc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Download and Copy link side by side, the Discord post below; in one row when there's room. */
.osc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.osc-actions .btn { min-width: 0; white-space: nowrap; }
/* Posted by Ops in #live (the pilot doesn't post it): where it stands. */
.osc-posted { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; font-size: 13px; color: var(--muted); }
.osc-posted svg { width: 14px; height: 14px; }
.osc-posted.done { color: var(--green); }
@container (min-width: 520px) {
  .osc-actions { grid-template-columns: auto auto minmax(0, 1fr); }
  .osc-posted { grid-column: auto; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .osc-frame img { transition: none; }
  .osc-frame:hover img { transform: none; }
  .osc-frame[data-state="loading"]::after { animation: none; }
}

/* ---------- Ops Control: "How Ops works" (Guide) and the first-run tour ---------- */
/* The guide sits in .ops-app, dark in both themes. The tour is drawn on <body>, so it
   takes the dark palette itself in the light theme (same values as .ops-app). */
:root[data-theme="light"] .og-tour-back {
  --bg: #121316; --bg-2: #16171a; --panel: #1c1d21; --panel-2: #24252a; --line: #2e3035; --line-2: #3a3c42; --text: #f2f3f5; --text-2: #c9cbd0; --muted: #8e9198;
  --yellow-ink: #f1c933; --yellow-soft: rgba(241, 201, 51, 0.12); --blue: #6f9bff; --green: #3ccf7a; --amber: #ffb547; --red: #ff5d5d; color-scheme: dark; color: var(--text);
}
.og { max-width: 1120px; margin: 0 auto; }

/* Hero */
.og-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: center; padding: 30px;
  border-radius: 20px; border: 1px solid rgba(80, 120, 220, 0.35);
  background: radial-gradient(640px 260px at 100% 0%, rgba(241, 201, 51, 0.14), transparent 60%), linear-gradient(135deg, #0b2a6e 0%, #0a1f4d 55%, #0d1528 100%); }
.og-hero h1 { margin: 6px 0 8px; font-size: clamp(28px, 5vw, 40px); line-height: 1.08; letter-spacing: -0.02em; }
.og-hero p { margin: 0; max-width: 580px; color: #c7d3f1; font-size: 15.5px; line-height: 1.6; }
.og-hero-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.og-hero-act .btn.ghost { border-color: rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.18); }
.og-hero-art { position: relative; width: 220px; height: 220px; justify-self: center; display: grid; place-items: center; }
.og-hero-art > i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(241, 201, 51, 0.35); animation: og-ring 4.5s ease-out infinite; }
.og-hero-art > i:nth-child(2) { animation-delay: 1.5s; }
.og-hero-art > i:nth-child(3) { animation-delay: 3s; }
.og-hero-ic { width: 88px; height: 88px; border-radius: 26px; display: grid; place-items: center; background: rgba(241, 201, 51, 0.14); border: 1px solid rgba(241, 201, 51, 0.4); color: var(--yellow-ink); box-shadow: 0 0 60px rgba(241, 201, 51, 0.18); }
.og-hero-ic svg { width: 42px; height: 42px; }
.og-hero-art .og-orbit { position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.14); animation: og-spin 14s linear infinite; }
.og-hero-art .og-orbit svg { position: absolute; top: -11px; left: calc(50% - 11px); width: 22px; height: 22px; color: var(--text); transform: rotate(45deg); }
@keyframes og-ring { from { transform: scale(0.45); opacity: 0.9; } to { transform: scale(1.05); opacity: 0; } }
@keyframes og-spin { to { transform: rotate(1turn); } }

/* Layout: table of contents beside the sections */
.og-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; margin-top: 28px; align-items: start; }
.og-toc { position: sticky; top: 76px; }
.og-toc-toggle { display: none; }
.og-toc ol { list-style: none; margin: 0; padding: 0 0 0 2px; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.og-toc a { display: flex; align-items: center; gap: 10px; margin-left: -2px; padding: 7px 10px; border-left: 2px solid transparent; border-radius: 0 9px 9px 0; color: var(--muted); font-size: 13.5px; font-weight: 500; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.og-toc a svg { width: 15px; height: 15px; }
.og-toc a:hover { color: var(--text); background: var(--panel); }
.og-toc a[aria-current="true"] { color: var(--yellow-ink); border-left-color: var(--yellow); background: var(--yellow-soft); font-weight: 600; }
.og-main { display: grid; gap: 52px; min-width: 0; max-width: 800px; padding-bottom: 40px; }

/* Sections */
.og-sec { scroll-margin-top: 84px; min-width: 0; }
.og-anim .og-sec { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.og-anim .og-sec.in { opacity: 1; transform: none; }
.og-sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.og-sec-head h2 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.og-num { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; }
.og-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--yellow-soft); border: 1px solid rgba(241, 201, 51, 0.3); color: var(--yellow-ink); }
.og-ic svg { width: 21px; height: 21px; }
.og-ic.sm { width: 32px; height: 32px; border-radius: 10px; }
.og-ic.sm svg { width: 16px; height: 16px; }
.og-sec > p { margin: 0 0 14px; color: var(--text-2); font-size: 15px; line-height: 1.65; }
.og-sec > p:last-child { margin-bottom: 0; }
.og-sec p b { color: var(--text); }
.og-small { font-size: 13.5px !important; color: var(--muted) !important; }
.og-flow { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }

.og-tiles { display: grid; gap: 10px; margin: 0 0 14px; }
.og-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.og-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.og-tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.og-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.og-tile > svg { width: 20px; height: 20px; color: var(--yellow-ink); margin-bottom: 4px; }
.og-tile b { font-size: 14.5px; }
.og-tile span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.og-cards { display: grid; gap: 10px; margin: 0 0 14px; }
.og-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.og-card { padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.og-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.og-card header b { font-size: 15px; }
.og-card p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }

.og-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.og-facts div { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.og-facts dt { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.og-facts dd { margin: 2px 0 0; font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--yellow-ink); }
.og-facts small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }

.og-callout { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid rgba(111, 155, 255, 0.35); background: rgba(111, 155, 255, 0.07); font-size: 14px !important; }
.og-callout > svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--blue); }
.og-callout.good { border-color: rgba(60, 207, 122, 0.35); background: rgba(60, 207, 122, 0.07); }
.og-callout.good > svg { color: var(--green); }
.og-callout.night { border-color: rgba(180, 140, 255, 0.35); background: rgba(180, 140, 255, 0.07); }
.og-callout.night > svg { color: #b48cff; }

/* The turnaround timeline */
.og-turn { margin: 0 0 14px; padding: 16px 16px 12px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.og-turn ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.og-turn li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13px; }
.og-turn .lbl { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-turn li.you .lbl { color: var(--text); font-weight: 600; }
.og-turn .track { position: relative; height: 14px; border-radius: 7px; background: var(--panel-2); }
.og-turn .track i { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: rgba(111, 155, 255, 0.45); transform-origin: left; }
.og-turn li.you .track i { background: linear-gradient(90deg, rgba(60, 207, 122, 0.4), rgba(60, 207, 122, 0.75)); }
.og-turn .track b, .og-turn-key b { position: absolute; right: -9px; top: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: #111; box-shadow: 0 0 0 3px var(--panel); }
.og-turn .track b svg, .og-turn-key b svg { width: 12px; height: 12px; stroke-width: 3; }
.og-anim .og-sec .og-turn .track i { transform: scaleX(0); }
.og-anim .og-sec.in .og-turn .track i { animation: og-grow 0.6s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(0.25s + var(--i) * 0.07s); }
@keyframes og-grow { to { transform: scaleX(1); } }
.og-turn-axis { display: flex; justify-content: space-between; margin: 10px 0 0 142px; color: var(--muted); font-size: 11px; }
.og-turn-key { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.og-turn-key b { position: static; box-shadow: none; }
.og-confirms { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.og-confirms li { display: flex; gap: 11px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
.og-confirms b { display: block; font-size: 14px; }
.og-confirms span:not(.og-ic) { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* Decisions: the example card */
.og-chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.og-chips li { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; }
.og-mock { position: relative; margin: 0 0 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--panel); }
.og-tag { position: absolute; top: -9px; right: 14px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.og-decision { border: 1px solid rgba(255, 181, 71, 0.55); box-shadow: 0 0 0 3px rgba(255, 181, 71, 0.08); }
.og-decision header { display: flex; gap: 11px; align-items: flex-start; }
.og-decision header > svg { width: 20px; height: 20px; color: var(--amber); flex: none; margin-top: 2px; }
.og-decision header div { flex: 1; min-width: 0; }
.og-decision header p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }
.og-timer { color: var(--amber); font-size: 15px; font-weight: 700; }
.og-timer-bar { display: block; height: 3px; margin: 12px 0 0; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.og-timer-bar i { display: block; height: 100%; background: var(--amber); transform-origin: left; animation: og-drain 12s linear infinite; }
@keyframes og-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.og-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.og-opts div { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); }
.og-opts div:first-child { border-color: rgba(241, 201, 51, 0.45); }
.og-opts b { font-size: 14px; }
.og-opts small { color: var(--muted); font-size: 12px; }

/* Arrival: the P&L */
.og-pnl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.og-pnl > div { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
.og-pnl h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.og-pnl h3 svg { width: 16px; height: 16px; }
.og-pnl .in h3 { color: var(--green); }
.og-pnl .out h3 { color: var(--red); }
.og-pnl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.og-pnl li { position: relative; padding-left: 16px; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.og-pnl li::before { position: absolute; left: 0; font-family: var(--mono); font-weight: 700; }
.og-pnl .in li::before { content: "+"; color: var(--green); }
.og-pnl .out li::before { content: "−"; color: var(--red); }

/* The flight card (example) */
.og-card-row { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: center; }
.og-fcard { position: relative; padding: 16px; border-radius: 18px; border: 1px solid rgba(80, 120, 220, 0.4); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  background: radial-gradient(300px 140px at 100% 0%, rgba(241, 201, 51, 0.16), transparent 60%), linear-gradient(140deg, #0b2a6e, #0d1528); transform: rotate(-1.5deg); }
.og-fcard .top { display: flex; align-items: center; gap: 10px; }
.og-fcard .top > span:not(.chip) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.og-fcard .top small { color: #9fb0d8; font-size: 11.5px; }
.og-fcard .rt { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 22px; }
.og-fcard .rt i { flex: 1; height: 0; border-top: 2px dashed rgba(255, 255, 255, 0.25); }
.og-fcard .rt svg { width: 20px; height: 20px; color: var(--yellow-ink); transform: rotate(45deg); }
.og-fcard .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.og-fcard .stats div { display: flex; flex-direction: column; padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); min-width: 0; }
.og-fcard .stats small { color: #9fb0d8; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.og-fcard .stats b { font-size: 13px; white-space: nowrap; }
.og-card-txt p { margin: 0 0 10px; color: var(--text-2); font-size: 15px; line-height: 1.65; }

/* FAQ */
.og-faq { display: grid; gap: 8px; }
.og-faq details { border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
.og-faq details[open] { border-color: var(--line-2); }
.og-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; }
.og-faq summary::-webkit-details-marker { display: none; }
.og-faq summary svg { width: 17px; height: 17px; color: var(--muted); transition: transform 0.2s; flex: none; }
.og-faq details[open] summary svg { transform: rotate(180deg); color: var(--yellow-ink); }
.og-faq details p { margin: 0; padding: 0 16px 14px; color: var(--text-2); font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) {
  .og-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .og-hero-art { display: none; }
  .og-body { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 16px; }
  /* Phones and tablets: the contents fold into one line, open on demand. */
  .og-toc { position: static; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
  .og-toc-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none; color: var(--text); text-align: left; }
  .og-toc-toggle span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
  .og-toc-toggle b { flex: 1; min-width: 0; font-size: 14px; color: var(--yellow-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .og-toc-toggle svg { width: 17px; height: 17px; color: var(--muted); transition: transform 0.2s; }
  .og-toc.open .og-toc-toggle svg { transform: rotate(180deg); }
  .og-toc ol { display: none; border-left: 0; padding: 0 6px 8px; }
  .og-toc.open ol { display: grid; }
  .og-toc a { margin-left: 0; border-left: 0; border-radius: 9px; }
  .og-main { gap: 40px; }
}
@media (max-width: 640px) {
  .og-sec-head h2 { font-size: 20px; }
  .og-ic { width: 38px; height: 38px; }
  .og-tiles.two, .og-tiles.three, .og-tiles.four, .og-cards.two, .og-confirms, .og-pnl, .og-opts, .og-card-row { grid-template-columns: minmax(0, 1fr); }
  .og-facts { grid-template-columns: minmax(0, 1fr); }
  .og-facts div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
  .og-facts dt { grid-column: 1 / -1; }
  .og-facts dd { font-size: 19px; }
  .og-turn { padding: 14px 12px 10px; }
  .og-turn li { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: 12px; }
  .og-turn-axis { margin-left: 104px; font-size: 10px; }
  .og-turn-axis span:nth-child(2), .og-turn-axis span:nth-child(3) { display: none; }
  .og-fcard { transform: none; }
  .og-fcard .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- The first-run tour ---------- */
.og-tour-back { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 16, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade 0.2s; }
.og-tour { --og-accent: #f1c933; position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 26px 24px 18px; border-radius: 22px;
  border: 1px solid rgba(80, 120, 220, 0.35); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); text-align: center; outline: none;
  background: radial-gradient(420px 220px at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%), linear-gradient(160deg, #0b2a6e 0%, #0b1a3c 45%, #11141c 100%);
  animation: og-pop 0.28s cubic-bezier(.2, .8, .2, 1); }
@keyframes og-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.og-tour-slide { display: flex; flex-direction: column; align-items: center; min-height: 330px; }
.og-tour-slide.next { animation: og-in-next 0.35s cubic-bezier(.2, .8, .2, 1); }
.og-tour-slide.back { animation: og-in-back 0.35s cubic-bezier(.2, .8, .2, 1); }
@keyframes og-in-next { from { opacity: 0; transform: translateX(28px); } }
@keyframes og-in-back { from { opacity: 0; transform: translateX(-28px); } }
.og-tour-art { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin: 4px 0 14px; }
.og-tour-art > i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--og-accent); opacity: 0; animation: og-ring 3s ease-out infinite; }
.og-tour-art > i:nth-child(2) { animation-delay: 1s; }
.og-tour-art > i:nth-child(3) { animation-delay: 2s; }
.og-tour-art .og-orbit { position: absolute; inset: 10px; border-radius: 50%; animation: og-spin 6s linear infinite; }
.og-tour-art .og-orbit b { position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--og-accent); box-shadow: 0 0 12px var(--og-accent); }
.og-tour-ic { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; color: var(--og-accent);
  background: rgba(255, 255, 255, 0.06); background: color-mix(in srgb, var(--og-accent) 16%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.16); border-color: color-mix(in srgb, var(--og-accent) 45%, transparent);
  box-shadow: 0 0 50px color-mix(in srgb, var(--og-accent) 25%, transparent); animation: og-float 4s ease-in-out infinite; }
.og-tour-ic svg { width: 40px; height: 40px; }
@keyframes og-float { 50% { transform: translateY(-5px); } }
.og-tour .eyebrow { color: var(--og-accent); }
.og-tour h2 { margin: 6px 0 8px; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.og-tour p { margin: 0; color: #c7d3f1; font-size: 14.5px; line-height: 1.6; max-width: 360px; }
.og-tour-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.og-tour-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-2); font-size: 12px; font-weight: 600;
  opacity: 0; animation: og-chip 0.4s ease-out forwards; }
.og-tour-chips li:nth-child(2) { animation-delay: 0.08s; }
.og-tour-chips li:nth-child(3) { animation-delay: 0.16s; }
.og-tour-chips svg { width: 12px; height: 12px; color: var(--og-accent); stroke-width: 3; }
@keyframes og-chip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.og-dots { display: flex; justify-content: center; gap: 6px; margin: 20px 0 16px; }
.og-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.22); transition: width 0.25s, background 0.25s; }
.og-dots button.seen { background: rgba(255, 255, 255, 0.5); }
.og-dots button[aria-current="step"] { width: 24px; background: var(--og-accent); }
/* A bigger tap target than the dot itself. */
.og-dots button { position: relative; }
.og-dots button::after { content: ""; position: absolute; inset: -8px -3px; }
.og-tour-foot { display: flex; align-items: center; gap: 8px; }
.og-tour-foot .sp { flex: 1; }
.og-skip { color: var(--muted); font-size: 13px; }
.og-skip:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.og-tour-foot .btn.ghost { border-color: rgba(255, 255, 255, 0.25); }
@media (max-width: 420px) {
  .og-tour { padding: 22px 18px 16px; }
  .og-tour-slide { min-height: 0; }
  .og-tour-art { width: 120px; height: 120px; }
  .og-tour-ic { width: 70px; height: 70px; border-radius: 22px; }
  .og-tour-ic svg { width: 32px; height: 32px; }
  .og-tour h2 { font-size: 21px; }
}

/* ---------- Ask the docs: a question box under the hero ---------- */
.og-ask { display: grid; gap: 14px; margin-top: 18px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid rgba(241, 201, 51, 0.35);
  background: linear-gradient(135deg, rgba(241, 201, 51, 0.08), transparent 60%), var(--panel); }
.og-ask-head { display: flex; gap: 12px; align-items: flex-start; }
.og-ask-head h2 { margin: 0; font-size: 18px; }
.og-ask-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.og-ask-form { display: flex; gap: 8px; }
.og-ask-form .input { flex: 1; min-width: 0; height: 44px; }
.og-ask-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.og-ask-chips button { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2); font-size: 13px; cursor: pointer; }
.og-ask-chips button:hover { border-color: var(--yellow); color: var(--text); }
.og-ask-wait { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); }
.og-ask-wait svg { width: 16px; height: 16px; }
.og-ask-answer { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.og-ask-answer small { color: var(--muted); }
.og-ask-answer p { margin: 0; line-height: 1.55; }
.og-ask-answer a { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow-ink); font-weight: 600; font-size: 14px; }
.og-ask-answer a svg { width: 14px; height: 14px; }
.og-ask-answer.err p { color: var(--muted); }
@media (max-width: 560px) { .og-ask { padding: 16px; } .og-ask-form { flex-direction: column; } .og-ask-form .input { flex: none; } }

/* ---------- Ops live board (src/ops-app/LiveBoard.jsx): the Operations Control Centre wall ----------
   The map first (every FRVG aircraft, the Ops flights highlighted), then today's numbers,
   the departures board and the side cards. The screens of the wall (map, board, numbers,
   TV mode) are always dark, like the real thing. Sizes are in em so TV mode scales
   everything from one font size. The map's markers are styled here too (.olm-p). */
.olb {
  --fids-bg: #07080a; --fids-panel: #0c0e11; --fids-row: #0e1014; --fids-row-2: #111419; --fids-hover: #171b21; --fids-line: #1d2128;
  --fids-ink: #f1c933; --fids-white: #eef0f3; --fids-text: #c9cbd0; --fids-dim: #7f8590;
  --st-sched: #e9ebef; --st-turn: #7aa7ff; --st-board: #4be08a; --st-closing: #ffb547; --st-go: #3ccf7a; --st-taxi: #5fd4e8;
  --st-air: #f1c933; --st-landed: #b4b9c2; --st-late: #ff6b5d;
  display: grid; gap: 16px; align-items: start; min-width: 0;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas: "head head" "map map" "kpis kpis" "fids side";
  color: var(--text); font-size: 15px;
}
.olb .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.olb-head { grid-area: head; display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; min-width: 0; }
.olb-title { flex: 1 1 260px; min-width: 0; }
.olb-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--yellow-ink); font-size: 0.73em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.olb-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: olb-onair 1.8s ease-out infinite; }
@keyframes olb-onair { 0% { box-shadow: 0 0 0 0 rgba(255, 93, 93, 0.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 93, 93, 0); } }
.olb-title h1 { margin: 2px 0 0; font-size: 1.87em; line-height: 1.1; letter-spacing: -0.01em; }
.olb-clock { display: inline-flex; align-items: baseline; gap: 6px; color: var(--fids-ink); font-size: 1.6em; }
.olb-clock .olb-flap { align-self: center; }
.olb-sec { font: 700 0.5em var(--mono); color: var(--muted); min-width: 2ch; }
.olb-clock small { font: 700 0.36em var(--mono); color: var(--muted); letter-spacing: 0.14em; }
.olb-tools { display: flex; align-items: center; gap: 8px; }
.olb-btn, .olb-fresh {
  display: inline-flex; align-items: center; gap: 7px; height: 2.4em; padding: 0 0.85em; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--text); font-size: 0.87em; font-weight: 600; line-height: 1; white-space: nowrap;
}
.olb-btn svg, .olb-fresh svg { width: 1.15em; height: 1.15em; }
.olb-btn:hover:not(:disabled), .olb-fresh:hover { border-color: var(--line-hover); }
.olb-btn:disabled { opacity: 0.5; cursor: default; }
.olb-btn.tv-btn { border-color: var(--yellow); background: var(--yellow); color: #111; }
.olb-fresh { color: var(--muted); font-family: var(--mono); border-color: var(--line); }
.olb-fresh svg { color: var(--green); }
.olb-fresh.off svg, .olb-fresh.off { color: var(--amber); }

/* ---------- Split-flap tiles ---------- */
.olb-flap { display: inline-flex; gap: 0.08em; perspective: 24em; font-family: var(--mono); font-weight: 700; line-height: 1; white-space: nowrap; }
.olb-flap i {
  position: relative; display: inline-grid; place-items: center; width: 0.86em; height: 1.36em; border-radius: 0.14em; font-style: normal; color: inherit;
  background: linear-gradient(180deg, #1e2127 0 50%, #16181d 50% 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 1px rgba(0, 0, 0, 0.55);
  backface-visibility: hidden; transform-origin: 50% 50%;
  animation: olb-flip 0.55s cubic-bezier(0.3, 1.45, 0.6, 1) both; animation-delay: calc(var(--d, 0ms) + var(--i, 0) * 26ms);
}
.olb-flap i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.6); }
@keyframes olb-flip { 0% { transform: rotateX(88deg); filter: brightness(1.8); } 55% { transform: rotateX(-14deg); } 100% { transform: none; filter: none; } }

/* ---------- Today's numbers ---------- */
.olb-kpis {
  grid-area: kpis; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; min-width: 0;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--fids-line); background: var(--fids-line);
}
.olb-kpi { display: grid; gap: 6px; align-content: start; padding: 0.95em 1.05em; min-width: 0; background: var(--fids-panel); color: var(--fids-white); }
.olb-kpi .k { display: flex; align-items: center; gap: 7px; color: var(--fids-dim); font-size: 0.72em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.olb-kpi .k svg { width: 1.3em; height: 1.3em; }
.olb-kpi .v { font-size: 1.6em; min-height: 1.36em; }
.olb-kpi .v .olb-flap { color: var(--fids-white); }
.olb-kpi .s { color: var(--fids-dim); font-size: 0.78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olb-kpi.live .k svg { color: var(--st-go); animation: olb-blink 2s ease-in-out infinite; }
.olb-kpi.good .v .olb-flap { color: var(--st-go); }
.olb-kpi.warn .v .olb-flap { color: var(--st-closing); }
.olb-kpi.bad .v .olb-flap { color: var(--st-late); }
@keyframes olb-blink { 50% { opacity: 0.35; } }

/* ---------- The map (the hero): every FRVG aircraft ---------- */
.olb-map-wrap { grid-area: map; position: relative; min-width: 0; }
.olb-map { position: relative; height: 62vh; height: clamp(400px, 62vh, 800px); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--fids-line); background: #0b0d10; isolation: isolate; }
.olb-map .route-map { height: 100% !important; margin: 0; border: 0; border-radius: 0; }
/* Screen corners, like the wall's monitors. */
.olb-map::after {
  content: ""; position: absolute; inset: 10px; z-index: 3; pointer-events: none; --c: rgba(241, 201, 51, 0.55);
  background:
    linear-gradient(var(--c), var(--c)) top left / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 18px no-repeat;
}
/* Glass over the map: the filter bar, the legend, the empty state, the card. */
.olm-bar { position: absolute; z-index: 4; top: 18px; left: 18px; right: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; }
.olm-bar > * { pointer-events: auto; flex: none; }
.olm-seg, .olm-btn, .olm-legend, .olm-empty { background: rgba(10, 11, 14, 0.84); border: 1px solid rgba(255, 255, 255, 0.11); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.olm-seg { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
.olm-seg button { display: inline-flex; align-items: center; gap: 0.5em; height: 2.15em; padding: 0 0.9em; border: 0; border-radius: 999px; background: none; color: var(--fids-dim); font-size: 0.83em; font-weight: 600; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.olm-seg button:hover { color: var(--fids-white); }
.olm-seg button[aria-checked="true"] { background: rgba(255, 255, 255, 0.11); color: var(--fids-white); }
.olm-seg b { min-width: 1.6em; padding: 0.1em 0.45em; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--fids-ink); font: 700 0.95em var(--mono); text-align: center; }
.olm-live { width: 7px; height: 7px; border-radius: 50%; background: var(--st-go); box-shadow: 0 0 0 3px rgba(60, 207, 122, 0.22); animation: olb-blink 2s ease-in-out infinite; }
.olm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 2.45em; min-width: 2.45em; padding: 0 0.7em; border-radius: 999px; color: var(--fids-text); font-size: 0.83em; font-weight: 600; }
.olm-btn svg { width: 1.25em; height: 1.25em; }
.olm-btn:hover { color: var(--fids-white); border-color: rgba(255, 255, 255, 0.24); }
.olm-btn.me { color: #a9c1ff; border-color: rgba(111, 155, 255, 0.45); }
.olm-btn.far { color: var(--fids-ink); border-color: rgba(241, 201, 51, 0.35); }
.olm-legend { position: absolute; z-index: 4; bottom: 38px; left: 14px; display: flex; flex-wrap: wrap; row-gap: 0.4em; max-width: calc(100% - 28px); gap: 0.95em; margin: 0; padding: 0.55em 0.9em; list-style: none; border-radius: 10px; color: var(--fids-dim); font-size: 0.74em; font-weight: 600; pointer-events: none; }
.olm-legend li { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
.olm-legend i { width: 9px; height: 9px; border-radius: 50%; }
.olm-legend .ops i { background: #f1c933; box-shadow: 0 0 0 2px #0b0d10, 0 0 0 3.5px rgba(241, 201, 51, 0.7); }
.olm-legend .stand i { background: var(--st-board); border: 2px solid #0b0d10; box-shadow: 0 0 0 1.5px var(--st-board); }
.olm-legend .va i { background: #c3cad6; }
.olm-legend .me i { background: #fff; box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px #6f9bff; }
.olm-empty { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; width: min(360px, calc(100% - 48px)); padding: 1.2em 1.3em; border-radius: 16px; color: var(--fids-white); text-align: center; pointer-events: none; }
.olm-empty svg { width: 1.6em; height: 1.6em; color: var(--fids-ink); animation: olb-blink 2.4s ease-in-out infinite; }
.olm-empty span { color: var(--fids-dim); font-size: 0.85em; line-height: 1.5; }

/* The aircraft markers and the selected route's airports: src/styles/ops-map.css (shared with the Flight page's map). */

/* The selected aircraft's card: docked on the map; a bottom sheet on a phone. */
.olm-detail {
  position: absolute; z-index: 6; top: 12px; right: 12px; width: min(24em, calc(46% - 12px)); max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 0.8em; align-content: start; padding: 0.95em; border-radius: 16px; color: var(--fids-white);
  background: rgba(10, 11, 14, 0.93); border: 1px solid rgba(255, 255, 255, 0.11); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: olm-in 0.25s ease-out; scrollbar-width: thin;
}
.olm-detail.ops { border-color: rgba(241, 201, 51, 0.32); }
.olm-detail.me { border-color: rgba(111, 155, 255, 0.5); }
@keyframes olm-in { from { opacity: 0; transform: translateX(10px); } }
.olm-detail header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.olm-detail header .avatar, .olm-anon { width: 2.6em; height: 2.6em; flex: none; font-size: 0.95em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.olm-anon { display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--fids-dim); }
.olm-anon svg { width: 1.2em; height: 1.2em; }
.olm-detail .who { flex: 1; min-width: 0; display: grid; }
.olm-detail .who b { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olm-detail .who small { color: var(--fids-dim); font: 600 0.78em var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olm-you, .olb-you { flex: none; padding: 0.1em 0.5em; border-radius: 999px; background: rgba(111, 155, 255, 0.18); color: #a9c1ff; font: 700 0.62rem var(--mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.olm-status { flex: none; color: var(--st); text-transform: uppercase; font-family: var(--mono); max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; }
.olm-opsline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: -0.2em; padding: 0.45em 0.7em; border-radius: 10px; background: rgba(241, 201, 51, 0.07); color: var(--fids-dim); font-size: 0.8em; }
.olm-opsline .olm-fn { color: var(--fids-ink); font: 700 1.05em var(--mono); letter-spacing: 0.04em; }
.olm-opsline .mono { font-size: 0.95em; }
.olm-opsline a { margin-left: auto; color: #a9c1ff; font-weight: 700; }
.olm-route { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 12px; }
.olm-route > span { display: grid; min-width: 0; max-width: 8.5em; }
.olm-route .r { text-align: right; }
.olm-route b { font: 700 1.3em var(--mono); color: var(--fids-white); letter-spacing: 0.04em; }
.olm-route small { color: var(--fids-dim); font-size: 0.72em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olm-track { position: relative; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.09); }
.olm-track i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, rgba(241, 201, 51, 0.35), var(--fids-ink)); }
.olm-track em { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--fids-ink); color: #111; box-shadow: 0 0 0 3px rgba(10, 11, 14, 0.93); }
.olm-track em svg { width: 0.95em; height: 0.95em; transform: rotate(45deg); }
.olm-line { margin: -0.2em 0 0; color: var(--fids-text); font: 600 0.78em var(--mono); }
.olm-detail .olb-alert { margin: 0; }
.olm-note { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--st-turn); font-size: 0.82em; font-weight: 600; }
.olm-note svg { width: 1.1em; height: 1.1em; flex: none; }
.olm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.olm-grid.ops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.olm-grid.ops div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0.45em 0.65em; }
.olm-grid.ops dd { margin: 0; flex: none; }
.olm-grid div { min-width: 0; padding: 0.5em 0.6em; border-radius: 10px; background: rgba(255, 255, 255, 0.045); }
.olm-grid.ops div { background: rgba(241, 201, 51, 0.05); }
.olm-grid dt { display: flex; align-items: center; gap: 5px; color: var(--fids-dim); font-size: 0.64em; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olm-grid dt svg { width: 1.15em; height: 1.15em; flex: none; }
.olm-grid dd { margin: 2px 0 0; font: 700 0.86em var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olm-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--fids-dim); font-size: 0.78em; }
.olm-foot span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.olm-foot svg { width: 1.1em; height: 1.1em; flex: none; }
.olm-grab { display: none; }
.olb-x { width: 2em; height: 2em; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: none; color: var(--fids-text); flex: none; }
.olb-x svg { width: 1.1em; height: 1.1em; }
.olb-x:hover { color: var(--fids-white); border-color: rgba(255, 255, 255, 0.25); }
.olb-pill { display: inline-flex; align-items: center; gap: 5px; padding: 0.2em 0.7em; border-radius: 999px; border: 1px solid currentColor; font-size: 0.73em; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.olb-alert { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--st-closing); font-size: 0.82em; font-weight: 600; }
.olb-alert svg { width: 1.15em; height: 1.15em; flex: none; animation: olb-blink 1.4s ease-in-out infinite; }

/* Without Mapbox: the radar scope. */
.olb-radar { position: relative; height: 100%; min-height: 240px; overflow: hidden; background: radial-gradient(circle at 50% 50%, #0f1c15 0%, #0a0f0c 55%, #07090a 100%); }
.olb-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.olb-radar .r-grid line { stroke: rgba(120, 220, 160, 0.09); stroke-width: 1; }
.olb-radar .r-grid text { fill: rgba(120, 220, 160, 0.38); font: 600 11px var(--mono); }
.olb-radar .r-rings circle { fill: none; stroke: rgba(120, 220, 160, 0.12); stroke-dasharray: 2 6; }
.olb-radar .r-route { fill: none; stroke: #f2f3f5; stroke-opacity: 0.6; stroke-width: 1.6; stroke-dasharray: 6 6; }
.olb-radar .r-apt circle { fill: #f1c933; stroke: #0b0d10; stroke-width: 2; }
.olb-radar .r-apt text { fill: #f1c933; font: 700 13px var(--mono); text-anchor: middle; }
.olb-radar .r-blip { cursor: pointer; outline: none; }
.olb-radar .r-blip path { fill: #f1c933; stroke: #111; stroke-width: 1; }
.olb-radar .r-blip text { fill: #eef0f3; font: 700 12px var(--mono); paint-order: stroke; stroke: #07090a; stroke-width: 3px; }
.olb-radar .r-blip .r-halo { fill: rgba(241, 201, 51, 0.1); stroke: rgba(241, 201, 51, 0.4); transform-box: fill-box; transform-origin: center; animation: olb-ping 2.4s ease-out infinite; }
.olb-radar .r-blip.va path { fill: #c3cad6; }
.olb-radar .r-blip.va text { fill: #aeb5c1; font-weight: 600; font-size: 11px; }
.olb-radar .r-blip.ops .r-halo { fill: rgba(10, 11, 14, 0.3); stroke: var(--st, rgba(241, 201, 51, 0.6)); stroke-width: 2; }
.olb-radar .r-blip.ops text { fill: #f1c933; }
.olb-radar .r-blip .r-sub { fill: var(--st, #8e9198); font-size: 10.5px; letter-spacing: 0.05em; }
.olb-radar .r-blip .r-stand { fill: var(--st, #f1c933); stroke: #07090a; stroke-width: 2; }
.olb-radar .r-blip.stand .r-halo { animation: none; opacity: 0; }
.olb-radar .r-blip.me path { fill: #fff; }
.olb-radar .r-blip.me .r-halo { fill: rgba(111, 155, 255, 0.18); stroke: #6f9bff; }
.olb-radar .r-blip.me text { fill: #b9cdff; }
.olb-radar .r-blip.me .r-sub { fill: #e7edfb; }
.olb-radar .r-blip.on path { fill: #fff; }
.olb-radar .r-blip.on .r-halo { stroke: #fff; animation: none; opacity: 1; transform: scale(0.75); }
.olb-radar .r-blip.on text { fill: #f1c933; }
.olb-radar .r-blip:focus-visible .r-halo { stroke: #fff; stroke-width: 2; }
.olb-radar .r-flown { fill: none; stroke: #f1c933; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.olb-radar .r-apt.divert circle { fill: var(--st-late); }
.olb-radar .r-apt.divert text { fill: var(--st-late); }
.olb-radar .r-apt.dim circle { fill: #5c626c; }
.olb-radar .r-apt.dim text { fill: #7f8590; text-decoration: line-through; }
@keyframes olb-ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.olb-sweep {
  position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg 285deg, rgba(90, 230, 150, 0.2) 360deg); animation: olb-sweep 6s linear infinite;
}
@keyframes olb-sweep { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- The departures board (FIDS) ---------- */
.olb-fids {
  grid-area: fids; min-width: 0; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: var(--fids-bg); border: 1px solid var(--fids-line); color: var(--fids-white); font-size: 0.94em;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.8);
  container: fids / inline-size; /* its columns follow its own width (beside the side cards, in TV mode, on a phone) */
}
.olb-fids-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 0.9em 1.2em; background: linear-gradient(180deg, #10296a, #0a1c48); border-bottom: 2px solid var(--fids-ink); }
.olb-fids-title { display: inline-flex; align-items: center; gap: 0.6em; }
.olb-fids-title svg { width: 1.6em; height: 1.6em; color: var(--fids-ink); }
.olb-fids-title b { font-size: 1.45em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.olb-fids-meta { margin-left: auto; color: #b9c6e8; font: 600 0.78em var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Fills up to the next refresh. */
.olb-refresh { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; }
.olb-refresh i { display: block; height: 100%; background: #fff; opacity: 0.6; transform-origin: left; animation: olb-fill var(--refresh, 30s) linear both; }
@keyframes olb-fill { from { transform: scaleX(0); } }
.olb-cols, .olb-row {
  display: grid; align-items: center; gap: 0 1em; padding-left: 1.2em; padding-right: 1.2em;
  grid-template-columns: 5.2em 6.6em minmax(0, 1.35fr) 6.2em minmax(0, 1fr) 11.4em;
}
.olb-cols { padding-top: 0.55em; padding-bottom: 0.55em; background: var(--fids-panel); border-bottom: 1px solid var(--fids-line); }
.olb-cols span { color: var(--fids-dim); font: 700 0.7em var(--mono); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.olb-fids-body { min-height: 0; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px); }
.olb-rows { list-style: none; margin: 0; padding: 0; }
.olb-row {
  position: relative; width: 100%; min-height: 3.5em; padding-top: 0.5em; padding-bottom: 0.5em; border: 0; border-bottom: 1px solid var(--fids-line);
  background: var(--fids-row); color: inherit; font: inherit; text-align: left; transition: background 0.15s;
}
.olb-rows li:nth-child(even) .olb-row { background: var(--fids-row-2); }
.olb-rows li:last-child .olb-row { border-bottom: 0; }
.olb-rows .olb-row:hover { background: var(--fids-hover); }
.olb-rows .olb-row.on { background: linear-gradient(90deg, rgba(241, 201, 51, 0.16), rgba(241, 201, 51, 0.03) 65%); box-shadow: inset 3px 0 0 var(--fids-ink); }
.olb-rows .olb-row.me:not(.on) { box-shadow: inset 3px 0 0 #6f9bff; }
.olb-row:focus-visible { outline: 2px solid var(--fids-ink); outline-offset: -2px; }
.olb-row > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.olb-row small { color: var(--fids-dim); font: 600 0.74em var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olb-row .c-time .olb-flap { color: var(--fids-ink); text-shadow: 0 0 0.6em rgba(241, 201, 51, 0.35); }
.olb-row .c-time .exp { color: var(--st-closing); text-transform: uppercase; }
.olb-row .c-flight b { display: flex; align-items: center; gap: 0.45em; color: var(--fids-ink); font: 700 1.1em var(--mono); letter-spacing: 0.04em; }
.olb-row .c-dest b { font-size: 1.06em; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olb-row .c-dest s { margin-left: 0.6em; color: var(--fids-dim); font-size: 0.78em; font-weight: 500; letter-spacing: 0.04em; }
.olb-row .c-ac b { font: 700 1em var(--mono); letter-spacing: 0.04em; color: var(--fids-white); }
.olb-row .c-pilot { flex-direction: row; align-items: center; gap: 0.6em; }
.olb-row .c-pilot .avatar { width: 1.9em; height: 1.9em; flex: none; font-size: 0.8em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.olb-row .c-pilot span { color: var(--fids-text); font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olb-row .c-status { align-items: flex-start; }
.c-status .olb-flap { color: var(--st); }
.olb-st-sched { --st: var(--st-sched); }
.olb-st-turn { --st: var(--st-turn); }
.olb-st-board { --st: var(--st-board); }
.olb-st-closing { --st: var(--st-closing); }
.olb-st-go { --st: var(--st-go); }
.olb-st-taxi { --st: var(--st-taxi); }
.olb-st-air { --st: var(--st-air); }
.olb-st-landed { --st: var(--st-landed); }
.olb-st-late { --st: var(--st-late); }
/* Boarding flashes, as on the real boards. */
.olb-st-board .olb-flap { animation: olb-flash 1.6s steps(1) 1s infinite; }
@keyframes olb-flash { 50% { color: rgba(75, 224, 138, 0.28); } }
.olb-sub { display: flex; align-items: center; gap: 0.45em; max-width: 100%; font: normal 600 0.72em var(--mono); color: var(--fids-dim); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olb-sub.alert { color: var(--st-closing); }
.olb-sub.late { color: var(--st-late); }
.olb-sub svg { width: 1.2em; height: 1.2em; flex: none; animation: olb-blink 1.4s ease-in-out infinite; }
.olb-mini { width: 4.4em; height: 4px; flex: none; border-radius: 2px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.olb-mini i { display: block; height: 100%; background: var(--st-turn); }
.olb-mini.air i { background: var(--st-air); }
.olb-quiet { display: grid; justify-items: center; gap: 10px; padding: 2.8em 1.4em 3em; text-align: center; }
.olb-quiet .olb-flap { color: var(--fids-ink); font-size: 1.25em; margin-bottom: 6px; }
.olb-quiet b { font-size: 1.3em; }
.olb-quiet p { margin: 0; max-width: 470px; color: var(--fids-dim); font-size: 0.95em; line-height: 1.55; }
.olb-quiet .btn { margin-top: 8px; }

/* ---------- Network bulletin and leaders ---------- */
.olb-side { grid-area: side; display: grid; gap: 16px; align-content: start; min-width: 0; }
.olb-card { min-width: 0; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.olb-card > header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.olb-card > header svg { width: 17px; height: 17px; color: var(--yellow-ink); flex: none; }
.olb-card h2 { flex: 1; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.olb-net .olb-pill { color: var(--green); border-color: rgba(60, 207, 122, 0.45); }
.olb-net.busy > header svg, .olb-net.busy .olb-pill { color: var(--amber); }
.olb-net.busy .olb-pill { border-color: rgba(255, 181, 71, 0.45); }
.olb-net ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.olb-net li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); font-size: 12px; }
.olb-net li b { font-family: var(--mono); }
.olb-net li span { color: var(--amber); font-family: var(--mono); }
.olb-net li svg { width: 13px; height: 13px; color: var(--amber); }
.olb-net p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.olb-leaders ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; margin: 0; padding: 0; }
.olb-leaders li { display: grid; justify-items: center; gap: 3px; min-width: 0; text-align: center; }
.olb-leaders .avatar { width: 42px; height: 42px; margin-bottom: 4px; font-size: 15px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--line-2); }
.olb-leaders .p1 .avatar { width: 54px; height: 54px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--yellow); }
.olb-leaders li b { max-width: 100%; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olb-leaders .olb-otp { color: var(--green); font: 700 16px var(--mono); }
.olb-leaders .p1 .olb-otp { font-size: 20px; }
.olb-leaders small { color: var(--muted); font-size: 11px; }
.olb-leaders .olb-step {
  display: grid; place-items: center; width: 100%; height: 40px; margin-top: 6px; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--panel-2), transparent); color: var(--muted); font: 700 18px var(--mono);
}
.olb-leaders .p1 .olb-step { height: 56px; border-color: var(--yellow); background: linear-gradient(180deg, var(--yellow), rgba(241, 201, 51, 0.18)); color: #111; }
.olb-leaders .p3 .olb-step { height: 28px; }
.olb-none { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ---------- Loading ---------- */
.olb-skel-kpis { grid-area: kpis; }
.olb-skel-map { grid-area: map; min-width: 0; }
.olb-skel-map .skeleton { height: clamp(300px, 58vh, 800px) !important; border-radius: var(--radius); }
.olb-skel-side { grid-area: side; }
.olb-skel-fids { grid-area: fids; }
.olb-error { grid-area: kpis; display: grid; gap: 10px; justify-items: start; }

/* ---------- TV mode: the whole screen, bigger type, the board paging ---------- */
.olb-ticker { grid-area: ticker; display: flex; align-items: stretch; min-width: 0; border-radius: 12px; overflow: hidden; background: #0a1c48; border: 1px solid #1a3270; }
.olb-ticker-tag { display: inline-flex; align-items: center; gap: 0.5em; padding: 0 1em; background: var(--fids-ink); color: #111; font: 700 0.85em var(--mono); letter-spacing: 0.16em; }
.olb-ticker-tag svg { width: 1.1em; height: 1.1em; }
.olb-ticker-track { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.olb-ticker-run { display: inline-flex; padding: 0.65em 0; white-space: nowrap; animation: olb-ticker var(--dur, 40s) linear infinite; }
.olb-ticker-run span { padding-right: 5em; color: #e6ecff; }
@keyframes olb-ticker { to { transform: translateX(-50%); } }
.olb.tv {
  position: fixed; inset: 0; z-index: 300; height: 100vh; height: 100dvh; overflow: hidden; padding: 1em 1.3em; gap: 0.9em;
  font-size: clamp(14px, 0.55vw + 7px, 26px); color: var(--fids-white); align-items: stretch;
  background: radial-gradient(1200px 520px at 12% -12%, rgba(16, 41, 106, 0.55), transparent 60%), #060709;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "kpis kpis" "map fids" "ticker ticker";
}
.olb.tv:fullscreen { padding-top: max(1em, env(safe-area-inset-top)); }
.olb::backdrop { background: #060709; }
.olb.tv .olb-side { display: none; }
.olb.tv .olb-map-wrap, .olb.tv .olb-map { height: 100%; min-height: 0; }
.olb.tv .olm-legend { display: none; }
.olb.tv .olb-fids { height: 100%; min-height: 0; font-size: 1em; }
.olb.tv .olb-fids-body { flex: 1; overflow: hidden; }
.olb.tv .olb-row { height: 3.6em; }
.olb.tv .olb-btn, .olb.tv .olb-fresh { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: var(--fids-white); }
.olb.tv .olb-btn.tv-btn { background: transparent; color: var(--fids-ink); border-color: rgba(241, 201, 51, 0.5); }
.olb.tv .olb-btn[aria-pressed="true"]:not(.tv-btn) { border-color: var(--fids-ink); color: var(--fids-ink); }
.olb.tv .olb-eyebrow { color: var(--fids-ink); }
.olb.tv .olb-sec, .olb.tv .olb-clock small { color: var(--fids-dim); }
.olb.tv .olb-tools { transition: opacity 0.4s; }
.olb.tv.idle .olb-tools { opacity: 0; }
.olb.tv.idle, .olb.tv.idle * { cursor: none !important; }

/* Light theme: the wall's screens stay dark (as the .ops-app shell does); TV mode is all screen. */
:root[data-theme="light"] .olb.tv {
  --bg: #121316; --bg-2: #16171a; --panel: #1c1d21; --panel-2: #24252a; --line: #2e3035; --line-2: #3a3c42;
  --text: #f2f3f5; --text-2: #c9cbd0; --muted: #8e9198; --yellow-ink: #f1c933; --yellow-soft: rgba(241, 201, 51, 0.12);
  --blue: #6f9bff; --green: #3ccf7a; --amber: #ffb547; --red: #ff5d5d; --hover: #202126; --line-hover: #4a4d54;
  color-scheme: dark;
}
:root[data-theme="light"] .olb-fids, :root[data-theme="light"] .olb-kpis, :root[data-theme="light"] .olb-map { color-scheme: dark; }

/* ---------- The board's columns, by its own width ---------- */
@container fids (max-width: 56em) {
  .olb-cols, .olb-row { grid-template-columns: 5.2em 6.6em minmax(0, 1fr) 6.2em 11.4em; }
  .c-pilot { display: none !important; }
}
/* Two lines a flight: time | flight, destination | remarks. */
@container fids (max-width: 40em) {
  .olb-fids-head { padding: 0.75em 0.9em; gap: 10px; }
  .olb-fids-title b { font-size: 1.2em; }
  .olb-fids-meta { font-size: 0.7em; }
  .olb-cols { display: none; }
  .olb-row {
    grid-template-columns: 4.6em minmax(0, 1fr) auto; grid-template-areas: "time flight status" "time dest status";
    gap: 0.15em 0.65em; padding: 0.6em 0.75em; min-height: 0;
  }
  .olb-row .c-time { grid-area: time; align-self: start; }
  .olb-row .c-flight { grid-area: flight; flex-direction: row; align-items: baseline; gap: 0.5em; }
  .olb-row .c-dest { grid-area: dest; }
  .olb-row .c-dest small { display: none; }
  .olb-row .c-status { grid-area: status; align-self: center; align-items: flex-end; }
  .olb-row .c-status .olb-flap { font-size: 0.86em; }
  .olb-row .olb-sub { max-width: 11em; }
  .olb-row .c-ac, .olb-row .c-pilot { display: none !important; }
  .olb-row .c-time .olb-flap { font-size: 0.92em; }
}
@container fids (max-width: 27em) {
  .olb-row .c-status .olb-flap { font-size: 0.78em; }
  .olb-row { grid-template-columns: 4.2em minmax(0, 1fr) auto; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .olb { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
  .olb:not(.tv) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "kpis" "fids" "side"; }
  .olb:not(.tv) .olb-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .olb-map { height: 58vh; height: clamp(360px, 58vh, 640px); }
}
@media (max-width: 760px) {
  .olm-legend { display: none; }
  /* The card: a bottom sheet over the page, above the Ops bottom bar; one tap opens it in full. */
  .olb:not(.tv) .olm-detail {
    position: fixed; z-index: 46; left: 8px; right: 8px; top: auto; bottom: calc(78px + env(safe-area-inset-bottom)); width: auto;
    max-height: min(56vh, 440px); gap: 0.65em; padding: 0 0.85em 0.85em; border-radius: 18px; animation: olm-up 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);
  }
  .olb:not(.tv) .olm-detail.open { max-height: calc(100vh - 150px); max-height: calc(100svh - 150px); }
  .olm-detail .olm-grab { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 22px; margin: 0 -0.85em; padding: 0; border: 0; background: rgba(10, 11, 14, 0.96); color: var(--fids-dim); }
  .olm-detail .olm-grab i { width: 36px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
  .olm-detail .olm-grab svg { width: 14px; height: 14px; transition: transform 0.2s; }
  .olm-detail.open .olm-grab svg { transform: rotate(180deg); }
  .olm-detail.sheet:not(.open) .olm-grid ~ .olm-grid, .olm-detail.sheet:not(.open) .olm-grid div:nth-child(n+4), .olm-detail.sheet:not(.open) .olm-foot { display: none; }
  .olm-detail.sheet:not(.open) .olm-grid.ops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .olm-detail.sheet:not(.open) .olm-grid.ops div:nth-child(-n+3) { display: block; padding: 0.5em 0.6em; }
  .olm-detail.sheet:not(.open) .olm-grid.ops dd { margin-top: 2px; }
}
@keyframes olm-up { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 640px) {
  .olb { gap: 12px; font-size: 14px; }
  .olb-head { gap: 10px 14px; }
  .olb-title { flex-basis: 100%; }
  .olb-title h1 { font-size: 1.6em; }
  .olb-clock { font-size: 1.3em; margin-right: auto; }
  .olb-tools { gap: 6px; }
  .olb-btn span { display: none; }
  .olb-btn { padding: 0 0.7em; }
  .olb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .olb-kpi { padding: 0.8em 0.85em; }
  .olb-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .olb-kpi .v { font-size: 1.35em; }
  .olb-map { height: 55vh; height: clamp(300px, 55svh, 560px); }
  .olm-bar { top: 14px; left: 14px; right: 14px; gap: 6px; }
  .olm-seg button { padding: 0 0.75em; }
  .olm-btn.me span, .olm-btn.far .t, .olm-btn.paths .t, .olm-btn.wx .t { display: none; }
  .olm-bar { flex-wrap: wrap; }
  .olm-btn.wx b { margin-left: 0; }
  .olb:not(.tv) .olb-side { grid-template-columns: minmax(0, 1fr); }
  /* TV mode on a phone: the board under the map. */
  .olb.tv { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 0.8fr) minmax(0, 1.2fr) auto; grid-template-areas: "head" "kpis" "map" "fids" "ticker"; padding: 0.7em; gap: 0.6em; }
  .olb.tv .olb-title { display: none; }
  .olb.tv .olb-kpi .s { display: none; }
  .olb.tv .olb-row { height: auto; }
}
@media (max-width: 380px) {
  .olm-seg button { gap: 0.35em; padding: 0 0.6em; }
}
/* "Paths" on: every flight's leg on the map */
.olm-btn.paths.on { border-color: rgba(111, 155, 255, 0.6); color: #b9cdff; background: rgba(28, 40, 70, 0.88); }
.olm-btn.paths.on svg { color: #6f9bff; }
.olb-radar .r-path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.65; stroke: #3ccf7a; }
.olb-radar .r-path.ops { stroke: #6f9bff; }

/* The network today: sources, news items opening on their headlines, the SIGMETs. */
.olb-net ul { flex-direction: column; flex-wrap: nowrap; }
.olb-net li { display: block; padding: 0; }
.olb-net li > button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 9px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.olb-net li > button .ox-src { margin-left: auto; }
.olb-net li.news { border-color: rgba(255, 181, 71, 0.4); }
.olb-net-more { display: grid; gap: 6px; padding: 0 10px 9px; }
.olb-net-more p { font-size: 12.5px; }
.olb-net li .olb-net-more span { color: inherit; font-family: inherit; }
.olb-net .olb-sig { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-size: 12.5px; }
.olm-btn.wx.on { border-color: rgba(255, 93, 93, 0.55); color: #ffc2c2; background: rgba(70, 24, 28, 0.85); }
.olm-btn.wx b { font-family: var(--mono); }
.olb-radar .r-area { fill: rgba(255, 181, 71, 0.12); stroke: rgba(255, 181, 71, 0.7); stroke-width: 1.2; stroke-dasharray: 4 3; }
.olb-radar .r-area.hz-TS { fill: rgba(255, 93, 93, 0.13); stroke: rgba(255, 93, 93, 0.75); }
.olb-radar .r-area.hz-ICE { fill: rgba(111, 195, 255, 0.12); stroke: rgba(111, 195, 255, 0.7); }
.olb-radar .r-area.hz-VA { fill: rgba(178, 140, 255, 0.14); stroke: rgba(178, 140, 255, 0.75); }
.olb-net .ox-src { color: color-mix(in srgb, var(--c) 78%, var(--text)); font-family: inherit; }

/* ---------- SIGMETs, as on an aviation weather chart ---------- */
.hz-TS { --hz: #ff5d5d; } .hz-TURB, .hz-MTW { --hz: #ffb547; } .hz-ICE { --hz: #6fc3ff; } .hz-VA { --hz: #b28cff; }
/* The label on each area (a Mapbox marker): the hazard, its levels, how it moves. */
.sig-tag { display: grid; justify-items: center; gap: 1px; padding: 3px 7px 4px; border-radius: 6px; cursor: pointer; font-family: var(--mono); line-height: 1.15; text-align: center;
  background: rgba(10, 11, 14, 0.88); border: 1px solid color-mix(in srgb, var(--hz, #ffb547) 70%, transparent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); color: #e9edf3; }
.sig-tag b { color: var(--hz, #ffb547); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; }
.sig-tag span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; }
.sig-tag small { color: #9aa3b2; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; }
.sig-tag:hover, .sig-tag.on { background: color-mix(in srgb, var(--hz, #ffb547) 22%, rgba(10, 11, 14, 0.94)); }
/* The legend's hazards: a hatched swatch. */
.olm-legend .sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.14); }
.olm-legend .sig i { width: 12px; height: 9px; border-radius: 2px; border: 1px solid var(--hz); background: repeating-linear-gradient(135deg, var(--hz) 0 1.5px, transparent 1.5px 4px); }
/* The radar's areas and labels (without Mapbox). */
.olb-radar .r-area { cursor: pointer; fill: color-mix(in srgb, var(--hz, #ffb547) 10%, transparent); stroke: var(--hz, #ffb547); stroke-width: 1.3; stroke-dasharray: none; }
.olb-radar .r-area.on { stroke-width: 2.6; }
.olb-radar .r-sig { cursor: pointer; }
.olb-radar .r-sig text { fill: #e9edf3; font: 700 9px var(--mono); text-anchor: middle; paint-order: stroke; stroke: rgba(10, 11, 14, 0.9); stroke-width: 3px; }
.olb-radar .r-sig text.c { fill: var(--hz, #ffb547); font-size: 10px; }
/* The SIGMET card. */
.olm-sig { border-color: color-mix(in srgb, var(--hz) 45%, transparent); }
.olm-sig-code { flex: none; display: grid; place-items: center; min-width: 3.2em; height: 2.6em; padding: 0 0.5em; border-radius: 10px; font: 800 0.8em var(--mono); letter-spacing: 0.05em; color: var(--hz);
  border: 1px solid color-mix(in srgb, var(--hz) 60%, transparent); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--hz) 22%, transparent) 0 2px, transparent 2px 6px); }
.olm-sig-real { flex: none; color: var(--hz); border-color: color-mix(in srgb, var(--hz) 50%, transparent); font-family: var(--mono); }
.olm-grid.sig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.olm-grid.sig div { background: color-mix(in srgb, var(--hz) 6%, rgba(255, 255, 255, 0.03)); }
.olm-sig-raw { margin: 0; padding: 0.7em 0.8em; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); color: #cfd6e0;
  font: 600 0.72em/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.olm-sig-src { margin: 0; color: var(--fids-dim); font-size: 0.74em; line-height: 1.5; }
/* The bulletin's list. */
.olb-net .olb-sigs { margin: 0 0 10px; }
.olb-net .olb-sigs .olb-sig { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.olb-net .olb-sigs .olb-sig > span:not(.ox-src) { flex: 1; }
.olb-net .olb-sigs .olb-sig svg { width: 14px; height: 14px; color: var(--muted); }
.olb-net .olb-sigs .olb-sig svg.down { transform: rotate(180deg); }
.olb-net .olb-sigs ul { flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 8px 0 0; }
.olb-net .olb-sigs li { padding: 0; border: 0; background: none; }
.olb-net .olb-sigs li button { display: grid; grid-template-columns: 5.6em 3.4em 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.olb-net .olb-sigs li button:hover { border-color: var(--line-hover); }
.olb-net .olb-sigs li span, .olb-net .olb-sigs li small { color: var(--text-2); font-family: inherit; }
.olb-net .olb-sigs li .mono { font-family: var(--mono); }
.olb-hz { color: var(--hz); font: 800 11px var(--mono); letter-spacing: 0.04em; }
.hz-CLOSED { --hz: #ff2e88; } .hz-CONFLICT { --hz: #e45bff; }
.olm-legend .sig.hz-CLOSED i { background: repeating-linear-gradient(135deg, var(--hz) 0 1.5px, transparent 1.5px 4px), repeating-linear-gradient(45deg, var(--hz) 0 1.5px, transparent 1.5px 4px); }
.olm-legend .sig.hz-CONFLICT i { border-style: dashed; }
.olm-btn.as.on { border-color: rgba(228, 91, 255, 0.55); color: #f2c6ff; background: rgba(54, 20, 62, 0.85); }
.olm-btn.as b { font-family: var(--mono); }
.olb-radar .r-area.hz-CONFLICT { stroke-dasharray: 5 3; }
.olm-sig-text { margin: 0; color: var(--fids-text); font-size: 0.82em; line-height: 1.5; }
.olm-sig-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: #f2c6ff; font-size: 0.8em; font-weight: 700; }
.olm-sig-link svg { width: 1em; height: 1em; }
.olb-net .olb-sigs li.zone button { grid-template-columns: 4.4em minmax(0, 1fr) auto auto; }
.olb-net .olb-sigs li.zone span:not(.mono) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olb-net .olb-sigs li.zone .mono { color: var(--muted); font-size: 11px; }
.olb-net .olb-sigs li small { text-align: right; white-space: nowrap; }

/* ---------- The Flight page's map: its views, the SIGMET card and Mapbox's marks
   (src/ops-app/FlightMap.jsx, src/RouteMap.jsx). This file loads before ops-map.css and
   ops-x.css (alphabetical order): what it changes there, it does with more specific selectors. */

/* Mapbox's logo and attribution, quieter on every map: the logo a little smaller and toned
   down (whole and legible, as Mapbox's terms ask), the attribution folded behind a small dark
   "i" that opens it (as faint as it can be and still stand out 3:1, the room's dimmed corner
   included). */
.route-map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 8px 8px; }
.route-map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 8px 8px 0; }
.route-map a.mapboxgl-ctrl-logo { transform: scale(0.8); transform-origin: 0 100%; opacity: 0.68; transition: opacity 0.2s; }
.route-map a.mapboxgl-ctrl-logo:hover, .route-map a.mapboxgl-ctrl-logo:focus-visible { opacity: 1; }
.route-map .mapboxgl-ctrl.mapboxgl-ctrl-attrib.mapboxgl-compact {
  min-height: 20px; padding: 0 20px 0 0; border-radius: 10px; background: rgba(10, 11, 14, 0.5); border: 1px solid rgba(255, 255, 255, 0.07);
  color: #9aa1ad; font-size: 10.5px; line-height: 20px; box-sizing: border-box;
}
.route-map .mapboxgl-ctrl.mapboxgl-ctrl-attrib.mapboxgl-compact-show { padding: 0 22px 0 9px; background: rgba(10, 11, 14, 0.9); border-color: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.route-map .mapboxgl-ctrl-attrib .mapboxgl-ctrl-attrib-button { width: 20px; height: 20px; top: -1px; background-color: transparent; filter: invert(1); opacity: 0.7; box-shadow: none; }
.route-map .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button { background-color: transparent; opacity: 0.8; }
.route-map .mapboxgl-ctrl-attrib .mapboxgl-ctrl-attrib-button:hover { opacity: 0.9; }
.route-map .mapboxgl-ctrl-attrib:has(.mapboxgl-ctrl-attrib-button:focus-visible) { outline: 2px solid #fff; outline-offset: 1px; }
.route-map .mapboxgl-ctrl-attrib a { color: #c9cbd0; }
/* On the Flight page's maps: just above whatever covers the map's bottom (the pass on the
   hero), at the two ends of the chips' column. */
.olm-fm .mapboxgl-ctrl-bottom-left, .olm-fm .mapboxgl-ctrl-bottom-right { bottom: var(--olm-under, 0px); }
.ox-hero .olm-fm.ox-heromap .mapboxgl-ctrl-bottom-left { top: auto; bottom: var(--olm-under, 0px); left: max(16px, calc(50% - 604px)); }
.ox-hero .olm-fm.ox-heromap .mapboxgl-ctrl-bottom-right { top: auto; bottom: var(--olm-under, 0px); right: max(12px, calc(50% - 608px)); }
@media (max-width: 759px) {
  .ox-hero .olm-fm.ox-heromap .mapboxgl-ctrl-bottom-left { left: 8px; }
  .ox-hero .olm-fm.ox-heromap .mapboxgl-ctrl-bottom-right { right: 4px; }
}

/* The chips row's right end: "Follow" and the views. */
.olm-fm-end { flex: none; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.olm-fm-end > * { pointer-events: auto; }
.olm-fm-end .olm-fm-follow { margin-left: 0; }

/* The view switcher: a segmented control the height of a chip (40 px targets on touch). */
.olm-views { position: relative; }
.olm-views-toggle { display: none; }
.olm-views-group {
  display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(10, 11, 14, 0.8); border: 1px solid rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.olm-view {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--fids-text, #c9cbd0); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.olm-view svg { flex: none; width: 13px; height: 13px; color: var(--fids-dim, #7f8590); transition: color 0.15s; }
.olm-view:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.olm-view:hover svg { color: var(--fids-text, #c9cbd0); }
.olm-view[aria-checked="true"] { color: var(--fids-ink, #f1c933); background: rgba(241, 201, 51, 0.15); box-shadow: inset 0 0 0 1px rgba(241, 201, 51, 0.42); }
.olm-view[aria-checked="true"] svg { color: var(--fids-ink, #f1c933); }
/* In Auto: a dot on the view Auto shows now. */
.olm-view.picked::after { content: ""; position: absolute; top: 2px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--fids-ink, #f1c933); box-shadow: 0 0 0 2px rgba(10, 11, 14, 0.9); }
.olm-view-now { display: none; }
.olm-view:focus-visible, .olm-views-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (pointer: coarse) {
  .olm-views-group { border-radius: 14px; }
  .olm-view { height: 40px; padding: 0 13px; border-radius: 11px; }
}
/* On a phone or a small tablet: one button (the view's icon; "A" in Auto) that opens the list
   (the four views in a row leave the chips no room once "Follow" shows). */
@media (max-width: 899px) {
  .olm-views-toggle {
    position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; cursor: pointer;
    background: rgba(10, 11, 14, 0.84); border: 1px solid rgba(255, 255, 255, 0.11); color: var(--fids-white, #eef0f3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .olm-views-toggle svg { width: 18px; height: 18px; color: var(--fids-ink, #f1c933); }
  .olm-views.open .olm-views-toggle { border-color: rgba(241, 201, 51, 0.5); }
  .olm-views-a { position: absolute; right: 4px; bottom: 3px; color: var(--fids-white, #eef0f3); font: 800 8.5px/1 var(--mono); font-style: normal; }
  .olm-views-group { display: none; position: absolute; z-index: 6; top: calc(100% + 6px); right: 0; flex-direction: column; align-items: stretch; width: 224px; padding: 6px; border-radius: 14px; background: rgba(12, 14, 20, 0.95); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5); }
  .olm-views.open .olm-views-group { display: flex; }
  .olm-view { height: 44px; padding: 0 12px; gap: 10px; border-radius: 10px; font-size: 14px; }
  .olm-view svg { width: 17px; height: 17px; }
  .olm-view.picked::after { display: none; }
  .olm-view-now { display: inline; margin-left: auto; color: #9aa1ad; font-size: 11.5px; font-weight: 600; }
  /* A map too short for the list (the pass over a compact hero): beside the button, in two
     columns, clear of the pass. */
  .olm-views.tight .olm-views-group { top: 0; right: calc(100% + 6px); width: 248px; }
  .olm-views.tight.open .olm-views-group { display: grid; grid-template-columns: 1fr 1fr; }
  .olm-views.tight .olm-view { padding: 0 10px; gap: 8px; font-size: 13px; }
  .olm-views.tight .olm-view-now { display: none; }
  .olm-views.tight .olm-view.picked::after { display: block; top: 6px; right: 6px; }
}

/* A SIGMET or an airspace opened on the map: under the chips, its hazard's colour down the side. */
.olm-fm-card {
  position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; display: flex; align-items: flex-start; gap: 10px; max-width: min(520px, 100%); padding: 9px 8px 9px 13px;
  border-radius: 12px; background: rgba(10, 11, 14, 0.9); border: 1px solid rgba(255, 255, 255, 0.11); color: var(--fids-white, #eef0f3); pointer-events: auto;
  box-shadow: inset 3px 0 0 var(--hz, #ffb547), 0 10px 24px rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.olm-fm-card-code { flex: none; padding-top: 2px; color: var(--hz, #ffb547); font: 800 11px var(--mono); letter-spacing: 0.06em; white-space: nowrap; }
.olm-fm-card-t { display: grid; gap: 3px; min-width: 0; }
.olm-fm-card-t strong { font-size: 13px; font-weight: 700; line-height: 1.3; }
.olm-fm-card-t span { color: var(--fids-text, #c9cbd0); font: 600 11.5px/1.45 var(--mono); }
.olm-fm-card-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -4px 0 -4px auto; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--fids-dim, #7f8590); cursor: pointer; }
.olm-fm-card-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.olm-fm-card-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.olm-fm-card-x svg { width: 15px; height: 15px; }
@media (pointer: coarse) { .olm-fm-card-x { width: 40px; height: 40px; margin: -10px -2px -10px auto; } }

/* Without Mapbox: the SIGMETs and airspace on the scope. */
.olm-scope .s-area { fill: var(--hz, #ffb547); fill-opacity: 0.09; stroke: var(--hz, #ffb547); stroke-opacity: 0.75; stroke-width: 1.2; }
.olm-scope .s-area.hz-CLOSED { fill-opacity: 0.06; }
.olm-scope .s-area.hz-CONFLICT { fill-opacity: 0.04; stroke-dasharray: 5 3; }

@media (prefers-reduced-motion: reduce) { .olm-view, .olm-view svg, .route-map a.mapboxgl-ctrl-logo { transition: none; } }

/* ---------- Ops maps: the aircraft markers (the Ops room and the Flight page) and the
   Flight page's map (src/ops-app/FlightMap.jsx) ----------
   Markers are MapView's .plane-marker buttons with .olm-p (src/RouteMap.jsx); the status
   colours (--st, from .olb-st-*) come from the board's palette. Ops is always dark (the
   .ops-app shell keeps the dark palette in the light theme), and so are its maps. */
/* The board's palette, for the Flight page's map (the Ops room has it on .olb). */
.olm-fm {
  --st-sched: #e9ebef; --st-turn: #7aa7ff; --st-board: #4be08a; --st-closing: #ffb547; --st-go: #3ccf7a; --st-taxi: #5fd4e8;
  --st-air: #f1c933; --st-landed: #b4b9c2; --st-late: #ff6b5d;
  --fids-ink: #f1c933; --fids-white: #eef0f3; --fids-text: #c9cbd0; --fids-dim: #7f8590;
}

/* The aircraft (MapView's .plane-marker): FRVG traffic quiet and grey; the Ops flights in
   the board's yellow with a ring in their status colour; yours in blue; on stand, a
   status dot at the airport. */
.olm-p { width: 26px; height: 26px; }
.olm-p .pm-icon { position: relative; width: 26px; height: 26px; }
.olm-p .pm-icon svg { position: relative; z-index: 1; width: 20px; height: 20px; }
.olm-p .pm-icon svg path { fill: #c3cad6; stroke: #0b0d10; }
.olm-p .pm-label {
  left: 27px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(9, 10, 13, 0.88); border: 1px solid rgba(255, 255, 255, 0.12);
  color: #aeb5c1; font: 600 10.5px var(--mono); letter-spacing: 0.02em; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.olm-p .pm-sub { color: var(--st, var(--fids-dim)); font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.olm-p.quiet .pm-label { opacity: 0; transition: opacity 0.15s; }
.olm-p.quiet:hover .pm-label, .olm-p.quiet:focus-visible .pm-label { opacity: 1; }
.olm-p:focus-visible { outline: none; }
.olm-p:focus-visible .pm-icon, .olm-p:focus-visible .pm-dot { outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%; }
.olm-p.ops { z-index: 2; }
.olm-p.ops .pm-icon svg { width: 22px; height: 22px; }
.olm-p.ops .pm-icon svg path { fill: #f1c933; }
.olm-p.ops .pm-icon::before, .olm-p.ops:not(.stand) .pm-icon::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--st, #f1c933); }
.olm-p.ops .pm-icon::before { background: rgba(10, 11, 14, 0.55); }
.olm-p.ops .pm-icon::after { animation: olm-ping 2.4s ease-out infinite; }
@keyframes olm-ping { from { transform: scale(1); opacity: 0.75; } to { transform: scale(2); opacity: 0; } }
.olm-p.ops .pm-label { color: var(--fids-ink); font-weight: 700; border-color: rgba(241, 201, 51, 0.28); box-shadow: inset 3px 0 0 var(--st, #f1c933), 0 4px 12px rgba(0, 0, 0, 0.4); padding-left: 9px; }
.olm-p.stand { width: 14px; height: 14px; }
.olm-p .pm-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--st, #f1c933); border: 3px solid #0b0d10; box-shadow: 0 0 0 1.5px var(--st, #f1c933), 0 2px 6px rgba(0, 0, 0, 0.6); }
.olm-p.stand .pm-label { left: 19px; }
.olm-p.olb-st-board .pm-dot { animation: olm-dot 1.6s steps(1) infinite; }
@keyframes olm-dot { 50% { background: #0b0d10; } }
.olm-p.me { z-index: 3; }
.olm-p.me .pm-icon::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #6f9bff; background: rgba(111, 155, 255, 0.22); box-shadow: 0 0 16px rgba(111, 155, 255, 0.65); }
.olm-p.me .pm-icon svg path { fill: #fff; }
.olm-p.me .pm-dot { box-shadow: 0 0 0 1.5px var(--st, #f1c933), 0 0 0 4px #6f9bff, 0 0 14px rgba(111, 155, 255, 0.7); }
.olm-p.me .pm-label { color: #b9cdff; font-weight: 700; border-color: rgba(111, 155, 255, 0.55); box-shadow: inset 3px 0 0 #6f9bff, 0 4px 12px rgba(0, 0, 0, 0.4); padding-left: 9px; }
.olm-p.me .pm-sub { color: #e7edfb; }
.olm-p.on { z-index: 4; }
.olm-p.on .pm-icon::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #fff; background: rgba(255, 255, 255, 0.16); box-shadow: 0 0 18px rgba(255, 255, 255, 0.35); }
.olm-p.on .pm-icon svg path { fill: #fff; }
.olm-p.on .pm-label { background: #f1c933; border-color: #f1c933; color: #111; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
.olm-p.on .pm-sub { color: #4a3b00; }
/* A label that would run into a neighbour or off the map goes on the marker's left (the Ops
   room places them), its accent on the marker's side. */
.olm-p.flip .pm-label { left: auto; right: 27px; }
.olm-p.stand.flip .pm-label { left: auto; right: 19px; }
.olm-p.ops.flip:not(.on) .pm-label { padding: 2px 9px 2px 7px; box-shadow: inset -3px 0 0 var(--st, #f1c933), 0 4px 12px rgba(0, 0, 0, 0.4); }
.olm-p.me.flip:not(.on) .pm-label { padding: 2px 9px 2px 7px; box-shadow: inset -3px 0 0 #6f9bff, 0 4px 12px rgba(0, 0, 0, 0.4); }
/* The selected aircraft's airports. */
.apt-marker.olm-apt { padding: 2px 7px; background: rgba(9, 10, 13, 0.92); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
.apt-marker.divert { border-color: var(--st-late); color: var(--st-late); }
.apt-marker.dim { border-color: rgba(255, 255, 255, 0.2); color: var(--fids-dim); text-decoration: line-through; }
.apt-marker.alt { border-style: dashed; border-color: rgba(255, 255, 255, 0.35); color: var(--fids-text); }

/* ---------- The Flight page's map ---------- */
.olm-fm { position: relative; min-height: 180px; border-radius: var(--ox-r, 16px); overflow: hidden; isolation: isolate; background: #0b0d10; border: 1px solid var(--ox-edge, rgba(255, 255, 255, 0.06)); color: var(--fids-white); }
.olm-fm .route-map { height: 100% !important; margin: 0; border: 0; border-radius: 0; }
.olm-fm-bar { position: absolute; z-index: 4; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 6px; min-width: 0; pointer-events: none; }
.olm-fm-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; font: 700 12px var(--mono); letter-spacing: 0.02em; white-space: nowrap;
  background: rgba(10, 11, 14, 0.84); border: 1px solid rgba(255, 255, 255, 0.11); color: var(--fids-white); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.olm-fm-chip svg { width: 13px; height: 13px; color: var(--fids-ink); }
.olm-fm-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-go); box-shadow: 0 0 0 3px rgba(60, 207, 122, 0.22); animation: olm-blink 2s ease-in-out infinite; }
.olm-fm-chip.dim { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fids-text); font-weight: 600; }
.olm-fm-chip.dim { display: inline-block; line-height: 26px; }
.olm-fm-follow { margin-left: auto; pointer-events: auto; cursor: pointer; color: var(--fids-ink, #f1c933); border-color: rgba(241, 201, 51, 0.45); }
.olm-fm-follow:hover { background: rgba(241, 201, 51, 0.14); }
@media (max-width: 420px) { .olm-fm-chip { height: 26px; padding: 0 9px; font-size: 11px; } .olm-fm-chip.dim { line-height: 24px; } }
@keyframes olm-blink { 50% { opacity: 0.35; } }
.olm-fm-none { height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; padding: 20px; color: var(--fids-dim); font-size: 13px; text-align: center; }
.olm-fm-none svg { width: 22px; height: 22px; color: var(--fids-ink); }
/* Without Mapbox: the scope. */
.olm-scope { display: block; width: 100%; height: 100%; background: radial-gradient(120% 120% at 50% 40%, #121a2c 0%, #0b0f18 60%, #080a0f 100%); }
.olm-scope .s-plan { fill: none; stroke: #f2f3f5; stroke-opacity: 0.55; stroke-width: 1.6; stroke-dasharray: 6 6; }
.olm-scope .s-flown { fill: none; stroke: #f1c933; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.olm-scope .s-apt circle { fill: #f1c933; stroke: #0b0d10; stroke-width: 2; }
.olm-scope .s-apt text { fill: #f1c933; font: 700 12px var(--mono); paint-order: stroke; stroke: #0b0d10; stroke-width: 3px; }
.olm-scope .s-apt.dim circle { fill: #5c626c; }
.olm-scope .s-apt.dim text { fill: #8a909a; text-decoration: line-through; }
.olm-scope .s-apt.divert circle { fill: var(--st-late); }
.olm-scope .s-apt.divert text { fill: var(--st-late); }
.olm-scope .s-apt.alt circle { fill: #0b0d10; stroke: #9aa0aa; stroke-dasharray: 2 2; }
.olm-scope .s-apt.alt text { fill: #9aa0aa; font-weight: 600; }
.olm-scope .s-plane circle { fill: rgba(241, 201, 51, 0.12); stroke: rgba(241, 201, 51, 0.6); stroke-width: 1.5; }
.olm-scope .s-plane path { fill: #f1c933; stroke: #0b0d10; stroke-width: 1; }

/* ---------- The Ops room, immersive (src/ops-app/LiveBoard.jsx) ----------
   As on the Flight page: the map is the stage, edge to edge under the Ops top bar. The title,
   the filters and today's numbers float over it on glass, the selected aircraft's card docks
   on its right (a bottom sheet on a phone); the departures board and the side cards follow
   below, in the page's own column. TV mode keeps its wall layout (ops-live.css): there the
   stage's wrappers step aside (display: contents) and its pieces go back to their grid areas.
   --olr-top and --olr-foot (set by LiveBoard, measured) are how much of the map the glass on
   top and at the bottom covers. */
main.ox-wide.ox-roompage { max-width: none; padding: 0 0 70px; }
.olb.tv .olr-stage, .olb.tv .olr-top, .olb.tv .olr-below { display: contents; }
.olb:not(.tv) { display: block; }
.olr-skip { display: none; }

/* ---------- The stage ---------- */
.olb:not(.tv) .olr-stage {
  --olr-pad: max(20px, calc(50% - 720px)); /* what floats lines up with the page's column below (1480px) */
  --olr-glass: linear-gradient(180deg, rgba(18, 28, 54, 0.68), rgba(11, 17, 34, 0.88));
  --olr-chip: rgba(13, 19, 36, 0.74);
  --olr-edge: rgba(255, 255, 255, 0.1);
  --fids-dim: #9aa3b2; /* the board's grey, a step lighter over glass (contrast) */
  --top: max(var(--olr-top, 0px), 104px); --foot: max(var(--olr-foot, 0px), 100px);
  position: relative; height: calc(100vh - 60px); height: calc(100dvh - 60px); min-height: 520px; overflow: hidden; background: #0b0d10;
}
/* (No stacking context on the stage or the map's wrapper: the card keeps its z-index against
   the page, the phone's bottom sheet stays above the board when the page scrolls.) */
.olb:not(.tv) .olb-map-wrap { position: absolute; inset: 0; }
.olb:not(.tv) .olb-map { height: 100%; border: 0; border-radius: 0; }
/* Shade under the title (it continues the top bar's glass), and the map fading into the page
   (in place of the wall's screen corners, TV mode only); Mapbox's logo stays above the fade. */
.olb:not(.tv) .olr-stage::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: calc(var(--top) + 64px); pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 15, 22, 0.9), rgba(12, 15, 22, 0.6) 48%, rgba(12, 15, 22, 0)); }
.olb:not(.tv) .olb-map::after { inset: auto 0 0; z-index: 5; height: calc(var(--foot) + 70px); background: linear-gradient(180deg, rgba(18, 19, 22, 0), rgba(18, 19, 22, 0.55) 55%, var(--bg)); transition: opacity 0.2s; }

/* On top: the title, the clock and the tools, then the filters. The map stays draggable
   between them. */
.olb:not(.tv) .olr-top { position: absolute; z-index: 5; inset: 0 0 auto; display: grid; gap: 12px; padding: 18px var(--olr-pad) 0; pointer-events: none; }
.olb:not(.tv) .olr-top .olb-head { grid-area: auto; flex-wrap: nowrap; gap: 12px 18px; pointer-events: none; }
.olb:not(.tv) .olr-top .olb-head > * { pointer-events: auto; }
.olb:not(.tv) .olb-title { flex: 1 1 auto; }
.olb:not(.tv) .olb-title h1 { font-size: 1.7em; color: #f4f6fa; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.olb:not(.tv) .olb-eyebrow { color: var(--fids-ink); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.olb:not(.tv) .olb-clock { font-size: 1.45em; }
.olb:not(.tv) .olb-clock small, .olb:not(.tv) .olb-sec { color: var(--fids-dim); }
.olb:not(.tv) .olr-top .olb-btn, .olb:not(.tv) .olr-top .olb-fresh {
  height: 40px; border-color: var(--olr-edge); background: var(--olr-chip); color: #e6eaf1;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.olb:not(.tv) .olr-top .olb-fresh { color: var(--fids-dim); }
.olb:not(.tv) .olr-top .olb-fresh.off { color: var(--amber); }
.olb:not(.tv) .olr-top .olb-btn.tv-btn { background: rgba(241, 201, 51, 0.12); border-color: rgba(241, 201, 51, 0.42); color: var(--fids-ink); }
.olb:not(.tv) .olr-top .olb-btn:hover:not(:disabled), .olb:not(.tv) .olr-top .olb-fresh:hover { border-color: rgba(255, 255, 255, 0.26); color: #fff; }
.olb:not(.tv) .olr-top .olb-btn.tv-btn:hover:not(:disabled) { background: rgba(241, 201, 51, 0.2); border-color: rgba(241, 201, 51, 0.7); color: var(--fids-ink); }
/* The filter bar, under the title (on the map itself in TV mode). */
.olb:not(.tv) .olr-top .olm-bar { position: static; gap: 8px; }
.olb:not(.tv) .olr-top :is(.olm-seg, .olm-btn) { background: var(--olr-chip); border-color: var(--olr-edge); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
.olb:not(.tv) .olr-top .olm-seg { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
.olb:not(.tv) .olr-top .olm-btn { height: 2.6em; min-width: 2.6em; }
.olb:not(.tv) .olr-top .olm-seg button { height: 2.3em; }
.olb:not(.tv) .olr-top .olm-btn.me { background: rgba(28, 40, 72, 0.8); }
.olb:not(.tv) .olr-top .olm-btn.paths.on { background: rgba(28, 40, 70, 0.88); }
.olb:not(.tv) .olr-top .olm-btn.wx.on { background: rgba(70, 24, 28, 0.85); }
.olb:not(.tv) .olr-top .olm-btn.as.on { background: rgba(54, 20, 62, 0.85); }
/* A card docked on the right: the filters keep to its left. */
.olb:not(.tv) .olr-stage.carded .olr-top .olm-bar { padding-right: calc(clamp(300px, 34vw, 380px) + 12px); }
/* (Narrower: their words go, so they stay on one row; each button keeps its name.) */
@media (max-width: 1279px) {
  .olb:not(.tv) .olr-stage.carded .olr-top .olm-btn .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Keyboard: straight to the board, past the aircraft on the map. */
.olb:not(.tv) .olr-skip {
  position: absolute; z-index: 8; top: 10px; left: var(--olr-pad); display: block; padding: 10px 16px; border-radius: 10px; border: 0;
  background: var(--fids-ink); color: #111; font-family: inherit; font-size: 13px; font-weight: 700; pointer-events: auto; transform: translateY(-160%);
}
.olb:not(.tv) .olr-skip:focus-visible { transform: none; outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Today's numbers: a glass strip along the bottom of the stage ---------- */
.olb:not(.tv) .olr-stage .olb-kpis {
  position: absolute; z-index: 5; left: var(--olr-pad); right: var(--olr-pad); bottom: 30px; gap: 0; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-radius: var(--ox-r, 16px); border: 1px solid var(--olr-edge); background: var(--olr-glass);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: opacity 0.2s;
}
.olb:not(.tv) .olr-stage .olb-kpi { gap: 4px; padding: 0.75em 1.05em 0.8em; background: none; box-shadow: -1px 0 0 rgba(255, 255, 255, 0.07), 0 -1px 0 rgba(255, 255, 255, 0.07); }
.olb:not(.tv) .olr-stage .olb-kpi .v { font-size: 1.45em; }
/* Each tile's line in full, on two lines when narrow (the wall in TV mode keeps it to one). */
.olb:not(.tv) .olr-stage .olb-kpi .s { white-space: normal; line-height: 1.3; }
.olb-kpi-go { border: 0; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s; }
.olb-kpi-go .s { display: inline-flex; align-items: center; gap: 4px; }
.olb-kpi-go .s svg { width: 1.2em; height: 1.2em; flex: none; transition: transform 0.2s; }
.olb-kpi-go .k svg { color: var(--fids-ink); }
.olb:not(.tv) .olr-stage .olb-kpi-go:hover { background: rgba(255, 255, 255, 0.05); }
.olb-kpi-go:hover .s svg { transform: translateY(2px); }
.olb-kpi-go:focus-visible { outline: 2px solid var(--fids-ink); outline-offset: -3px; }

/* ---------- Over the map: the legend, the empty state, the card ---------- */
.olb:not(.tv) .olr-stage .olm-legend { z-index: 6; left: var(--olr-pad); bottom: calc(var(--foot) + 12px); background: var(--olr-chip); border-color: var(--olr-edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--fids-dim); transition: opacity 0.2s; }
/* An aircraft or an area tag on the map with keyboard focus: the glass along the bottom (and
   the fade into the page) steps aside, so the focused mark is never hidden under it. */
.olb:not(.tv) .olr-stage:has(.olb-map :focus-visible) :is(.olb-kpis, .olm-legend) { opacity: 0; pointer-events: none; }
.olb:not(.tv) .olr-stage:has(.olb-map :focus-visible) .olb-map::after { opacity: 0; }
.olb:not(.tv) .olr-stage .olm-empty { top: calc(50% + (var(--top) - var(--foot)) / 2); background: var(--olr-glass); border-color: var(--olr-edge); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.olb:not(.tv) .olr-stage .olm-detail:not(.sheet) {
  top: calc(var(--top) + 14px); right: var(--olr-pad); width: clamp(300px, 34vw, 380px); max-height: calc(100% - var(--top) - var(--foot) - 30px);
  background: var(--olr-glass); border-color: var(--olr-edge); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.olb:not(.tv) .olr-stage .olm-detail.ops:not(.sheet) { border-color: rgba(241, 201, 51, 0.3); }
.olb:not(.tv) .olr-stage .olm-detail.me:not(.sheet) { border-color: rgba(111, 155, 255, 0.45); }
.olb:not(.tv) .olr-stage .olm-detail.olm-sig:not(.sheet) { border-color: color-mix(in srgb, var(--hz) 45%, transparent); }
.olb:not(.tv) .olr-stage .olm-detail .olb-x { width: 36px; height: 36px; border-radius: 10px; }
.olb:not(.tv) .olr-stage .olm-track em { box-shadow: 0 0 0 3px rgba(13, 20, 38, 0.95); }

/* Mapbox's logo and attribution: in the band under today's numbers, at the two ends of the
   page's column. The logo itself is as on every map (smaller and toned down, ops-map-views.css). */
.olb:not(.tv) .olb-map .mapboxgl-ctrl-bottom-left, .olb:not(.tv) .olb-map .mapboxgl-ctrl-bottom-right { z-index: 6; bottom: 2px; }
.olb:not(.tv) .olb-map .mapboxgl-ctrl-bottom-left { left: calc(var(--olr-pad) - 10px); }
.olb:not(.tv) .olb-map .mapboxgl-ctrl-bottom-right { right: calc(var(--olr-pad) - 8px); }
.olb .olb-map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 4px 10px; }
.olb .olb-map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 8px 4px 0; }
.olb .olb-map .mapboxgl-ctrl-attrib { padding: 0 4px; background: none; font-size: 9.5px; line-height: 16px; opacity: 0.6; transition: opacity 0.2s; }
.olb .olb-map .mapboxgl-ctrl-attrib a { color: #c3cad6; }
.olb .olb-map .mapboxgl-ctrl-attrib.mapboxgl-compact { min-height: 20px; background: rgba(13, 19, 36, 0.6); }
.olb .olb-map .mapboxgl-ctrl-attrib:is(:hover, :focus-within) { opacity: 1; }

/* ---------- Below the stage: the board and the side cards, in the page's column ---------- */
.olb:not(.tv) .olr-below {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "fids side"; gap: 16px; align-items: start;
  max-width: 1480px; margin: 0 auto; padding: 6px 20px 0;
}
.olb:not(.tv) .olb-fids { scroll-margin-top: 72px; }
/* Departures, then arrivals (TV: one at a time, in the board's place). */
.olb-boards { grid-area: fids; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.olb.tv .olb-boards { min-height: 0; }
.olb.tv .olb-boards > .olb-fids { flex: 1; min-height: 0; }
.olb-fids.arr .olb-fids-head { background: linear-gradient(180deg, #123a2f, #0b2620); }
.olb-fids:focus { outline: none; }
.olb-fids:focus-visible { outline: 2px solid var(--fids-ink); outline-offset: 3px; }
.olb:not(.tv) .olb-card { padding: 18px; border-radius: var(--ox-r, 16px); border-color: var(--ox-edge, var(--line)); background: var(--ox-card, var(--panel)); }
.olb:not(.tv) .olb-side { gap: 16px; }

/* ---------- Loading, or the board out of reach ---------- */
.olb:not(.tv) .olr-stage.waiting .olb-skel-map { position: absolute; inset: 0; z-index: 0; }
.olb:not(.tv) .olr-stage.waiting .olb-skel-map .grid, .olb:not(.tv) .olr-stage.waiting .olb-skel-map .skeleton { height: 100% !important; border-radius: 0; }
.olb:not(.tv) .olr-stage.waiting .olb-error {
  grid-area: auto; position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 40px)); padding: 18px;
  border-radius: var(--ox-r, 16px); border: 1px solid var(--olr-edge); background: var(--olr-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}

/* ---------- Keyboard focus, on the map and around it ---------- */
.olb :is(.olm-seg button, .olm-btn, .olb-btn, .olb-fresh, .olb-x, .olm-grab, .olm-opsline a, .olm-sig-link, .olb-card button):focus-visible { outline: 2px solid var(--fids-ink); outline-offset: 2px; }
.olb .olm-seg button:focus-visible { outline-offset: -2px; }
.olb-radar .r-blip:focus-visible path, .olb-radar .r-blip:focus-visible .r-stand { stroke: #fff; stroke-width: 2.5; }
.olb-radar .r-blip:focus-visible text { fill: #fff; text-decoration: underline; }
.olb-radar .r-hit { fill: transparent; stroke: none; pointer-events: all; }
.olb-radar .r-sig:focus-visible { outline: none; }
.olb-radar .r-sig:focus-visible text { fill: #fff; text-decoration: underline; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .olb:not(.tv) .olr-below { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
  .olb:not(.tv) .olr-below { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fids" "side"; }
  .olb:not(.tv) .olr-below .olb-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .olb:not(.tv) .olr-stage .olb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A phone: the stage between the top bar and the bottom bar; the filters and today's numbers
   in rows that scroll sideways, every control a full finger wide. */
@media (max-width: 760px) {
  .olb:not(.tv) .olr-stage {
    --olr-pad: 12px; --top: max(var(--olr-top, 0px), 100px); --foot: max(var(--olr-foot, 0px), 84px);
    /* 40px short of the bottom bar: the board's top peeks out (and gives the thumb somewhere to scroll the page) */
    height: calc(100vh - 54px - 70px - 40px); height: calc(100svh - 54px - 70px - 40px - env(safe-area-inset-bottom)); min-height: 440px;
  }
  .olb:not(.tv) .olr-top { padding-top: 10px; gap: 8px; }
  .olb:not(.tv) .olr-top .olb-head { gap: 6px; flex-wrap: nowrap; }
  .olb:not(.tv) .olb-title { flex: 1 1 auto; flex-basis: auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
  .olb:not(.tv) .olb-eyebrow { font-size: 0; gap: 0; } /* the on-air light stays, beside the title */
  .olb:not(.tv) .olb-title h1 { margin: 0; font-size: 1.4em; white-space: nowrap; }
  .olb:not(.tv) .olb-clock { margin: 0; font-size: 1.05em; }
  .olb:not(.tv) .olb-sec { display: none; }
  .olb:not(.tv) .olr-top .olb-btn, .olb:not(.tv) .olr-top .olb-fresh { height: 44px; min-width: 44px; justify-content: center; padding: 0 0.75em; }
  .olb:not(.tv) .olr-top .olb-tools { gap: 6px; }
  .olb:not(.tv) .olr-top .olm-bar {
    flex-wrap: nowrap; gap: 6px; margin: 0 -12px; padding: 0 12px 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; pointer-events: auto;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .olb:not(.tv) .olr-top .olm-bar::-webkit-scrollbar { display: none; }
  .olb:not(.tv) .olr-top .olm-bar::after { content: ""; flex: 0 0 16px; }
  .olb:not(.tv) .olr-top .olm-seg { padding: 0; border: 0; box-shadow: inset 0 0 0 1px var(--olr-edge), 0 8px 24px rgba(0, 0, 0, 0.28); }
  .olb:not(.tv) .olr-top .olm-seg button { height: 44px; padding: 0 0.95em; }
  .olb:not(.tv) .olr-top .olm-btn { height: 44px; min-width: 44px; padding: 0 0.8em; }
  .olb:not(.tv) .olr-top .olm-btn.as .t { display: none; }
  .olb:not(.tv) .olr-stage.carded .olr-top .olm-bar { padding-right: 12px; }
  /* Today's numbers: tiles in a row that scrolls sideways (the last one leads to the board). */
  .olb:not(.tv) .olr-stage .olb-kpis {
    left: 0; right: 0; bottom: 28px; display: flex; gap: 8px; padding: 0 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none;
    border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .olb:not(.tv) .olr-stage .olb-kpis::-webkit-scrollbar { display: none; }
  .olb:not(.tv) .olr-stage .olb-kpi {
    flex: 0 0 auto; width: 44%; min-width: 148px; padding: 0.7em 0.9em; scroll-snap-align: start; border-radius: 14px; border: 1px solid var(--olr-edge); background: var(--olr-glass);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  }
  .olb:not(.tv) .olr-stage .olb-kpi:last-child:nth-child(odd) { grid-column: auto; }
  .olb:not(.tv) .olr-stage .olb-kpi .v { font-size: 1.3em; }
  .olb:not(.tv) .olr-stage .olb-kpi-go { border-radius: 14px; }
  .olb:not(.tv) .olr-below { padding: 4px 12px 0; gap: 12px; }
  .olb:not(.tv) .olr-below .olb-side { gap: 12px; }
  .olb:not(.tv) .olb-fids { scroll-margin-top: 64px; }
  /* The sheet: the same glass as the rest of the stage, nearly opaque over the page. */
  .olb:not(.tv) .olm-detail.sheet { background: linear-gradient(180deg, rgba(20, 30, 56, 0.94), rgba(11, 17, 34, 0.97)); border-color: var(--olr-edge, rgba(255, 255, 255, 0.1)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  .olb:not(.tv) .olm-detail.sheet .olm-grab { height: 44px; background: rgba(18, 27, 50, 0.98); }
  /* The aircraft on the map: a finger-sized target around each marker. */
  .olb .olm-p::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
  .olb .olm-p.stand::after { inset: -15px; }
  .olb:not(.tv) .olm-detail.sheet .olb-x { width: 44px; height: 44px; border-radius: 12px; }
}
@media (max-width: 640px) {
  .olb:not(.tv) .olr-below .olb-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .olb:not(.tv) .olb-clock small { display: none; }
}

/* ---------- Less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .olb .olb-sweep, .olb .olb-eyebrow i, .olb .olm-live, .olb .olb-kpi.live .k svg, .olb .olm-empty svg, .olb .olb-alert svg, .olb .olb-sub svg,
  .olb .olb-st-board .olb-flap, .olb .olm-p.olb-st-board .pm-dot { animation: none; }
  .olb .olb-sweep { display: none; }
  .olb .olb-flap i { animation: none; }
  .olb .olb-radar .r-blip .r-halo { animation: none; transform: scale(0.75); opacity: 0.8; }
  .olb .olm-p.ops .pm-icon::after { animation: none; opacity: 0; }
  .olb .olm-detail, .olb:not(.tv) .olm-detail { animation: none; }
  .olb-kpi-go .s svg, .olb .olm-detail .olm-grab svg { transition: none; }
}

/* ---------- Ops Control: the redesign (action first) ----------
   One accent for what the captain must do (yellow), status colours for status only,
   fewer borders, more room. Everything here lives inside .ox-app. */
.ox-app { --ox-gap: 16px; --ox-r: 16px; --ox-card: #161b26; --ox-card-2: #1c2230; --ox-edge: rgba(255, 255, 255, 0.06); --ox-edge-2: rgba(255, 255, 255, 0.1); }
.ox-app .mono { font-family: var(--mono); }

/* Shell */
.ox-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px; background: rgba(12, 15, 22, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--ox-edge); }
.ox-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.ox-brand b { font-size: 15px; letter-spacing: 0.01em; white-space: nowrap; }
.ox-nav { display: flex; gap: 2px; margin-left: 10px; }
.ox-nav a, .ox-bottom a { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.ox-nav a svg { width: 16px; height: 16px; }
.ox-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.ox-nav a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.ox-nav a[aria-current="page"] svg { color: var(--yellow); }
.ox-badge-n { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--yellow); color: #10224d; font-style: normal; font-size: 11px; font-weight: 800; }
.ox-top .sp { flex: 1; }
.ox-duty { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.05); font-size: 13px; color: var(--text-2); }
.ox-duty svg { width: 15px; height: 15px; color: var(--yellow); }
.ox-duty small { color: var(--muted); font-size: 12px; }
.ox-duty.low small { color: var(--red); }
.ox-account { position: relative; }
.ox-me { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 6px 0 4px; border-radius: 99px; border: 1px solid var(--ox-edge-2); background: none; color: var(--muted); }
.ox-me svg { width: 15px; height: 15px; }
.ox-menu { position: absolute; right: 0; top: 46px; z-index: 50; display: grid; min-width: 240px; padding: 6px; border-radius: 14px; background: #1a2030; border: 1px solid var(--ox-edge-2); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); animation: ops-in 0.18s ease-out; }
.ox-menu .who { display: grid; padding: 8px 10px 10px; border-bottom: 1px solid var(--ox-edge); margin-bottom: 4px; }
.ox-menu .who small { color: var(--muted); }
.ox-menu a, .ox-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; border: 0; background: none; color: var(--text-2); font-size: 14px; text-align: left; text-decoration: none; }
.ox-menu a:hover, .ox-menu button:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.ox-menu svg { width: 16px; height: 16px; color: var(--muted); }
.ox-menu em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--yellow-ink); }
.ox-menu .danger { color: var(--red); }
.ox-bottom { display: none; }
.ox-page { max-width: 1240px; margin: 0 auto; padding: 22px 20px 70px; }
.ox-wide { max-width: 1480px; margin: 0 auto; padding: 18px 16px 70px; }
.ox-app .eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow-ink); }
.ox-sub { margin: 6px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ox-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ox-page-head h1 { margin: 4px 0 0; }

/* Panels */
.ox-panel { display: block; padding: 18px 20px; border-radius: var(--ox-r); background: var(--ox-card); border: 1px solid var(--ox-edge); color: var(--text); text-decoration: none; }
.ox-panel.flush { padding: 0; overflow: hidden; }
.ox-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ox-panel h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; }
.ox-panel h3 svg { width: 17px; height: 17px; color: var(--muted); }
.ox-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.ox-bar.thin { height: 4px; margin-bottom: 12px; }
.ox-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgba(241, 201, 51, 0.5), var(--yellow)); transition: width 0.6s ease; }

/* The flight strip */
.ox-flight { display: grid; gap: var(--ox-gap); }
.ox-strip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 20px 22px; border-radius: calc(var(--ox-r) + 2px);
  background: radial-gradient(120% 160% at 100% 0%, rgba(241, 201, 51, 0.1), transparent 55%), linear-gradient(135deg, #10224d, #0b1736); border: 1px solid rgba(255, 255, 255, 0.08); }
.ox-strip-id { display: grid; gap: 2px; min-width: 0; }
.ox-strip-id .fn { color: var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.ox-strip-id .route { display: flex; align-items: center; gap: 12px; font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.ox-strip-id .route svg { width: 22px; height: 22px; color: var(--yellow); transform: rotate(45deg); }
.ox-strip-id .sub { color: #a9b8db; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-strip-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 26px; margin: 0; }
.ox-strip-facts div { display: grid; align-content: start; }
.ox-strip-facts dt { color: #8ea0c9; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.ox-strip-facts dd { margin: 2px 0 0; color: #fff; font-size: 17px; font-weight: 700; }
.ox-strip-facts small { color: #8ea0c9; font-size: 12px; }
.ox-strip-facts .key { padding: 8px 14px; margin: -8px 0; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.ox-strip-facts .key dd { font-size: 24px; }
.ox-strip-facts .key.ok dd { color: var(--green); }
.ox-strip-facts .key.warn dd { color: var(--amber); }
.ox-strip-facts .key.late dd { color: var(--red); }
.ox-live { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; justify-self: start; max-width: 100%; color: #8ea0c9; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-live i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5b6a8c; }
.ox-live.on { color: #c9d4ee; }
.ox-live.on i { background: var(--green); box-shadow: 0 0 0 4px rgba(60, 207, 122, 0.18); animation: oa-blink 2s ease-in-out infinite; }

/* The five stages: a quiet track beside the tabs (the pass above says the phase in words). */
.ox-phases { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; gap: 0; min-width: 0; }
.ox-phases li { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.ox-phases li b { font-weight: inherit; overflow: hidden; text-overflow: ellipsis; }
.ox-phases li::after { content: ""; flex: 1 1 14px; min-width: 10px; height: 1px; margin: 0 8px 0 2px; background: rgba(255, 255, 255, 0.1); }
.ox-phases li:last-child { flex: 0 1 auto; }
.ox-phases li:last-child::after { display: none; }
.ox-phases li > span[aria-hidden] { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); font: 600 10.5px var(--mono); }
.ox-phases li > span[aria-hidden] svg { width: 11px; height: 11px; }
.ox-phases li.done { color: var(--text-2); }
.ox-phases li.done > span[aria-hidden] { border-color: transparent; background: rgba(60, 207, 122, 0.14); color: var(--green); }
.ox-phases li.done::after { background: rgba(60, 207, 122, 0.35); }
.ox-phases li.now { color: var(--text); font-weight: 600; }
.ox-phases li.now > span[aria-hidden] { border-color: transparent; background: var(--yellow); color: #10224d; box-shadow: 0 0 0 3px rgba(241, 201, 51, 0.16); }

/* Layout */
.ox-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--ox-gap); align-items: start; }
.ox-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ox-gap); min-width: 0; }

/* Your move */
.ox-move { display: grid; gap: 10px; }
.ox-move > header { display: flex; align-items: center; gap: 10px; }
.ox-move h2 { margin: 0; font-size: 19px; }
.ox-count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: var(--yellow); color: #10224d; font-weight: 800; font-size: 13px; }
.ox-next { margin: 0; color: var(--muted); font-size: 13px; }
.ox-calm { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--ox-r); background: rgba(60, 207, 122, 0.06); border: 1px solid rgba(60, 207, 122, 0.22); }
.ox-calm > svg { flex: none; width: 22px; height: 22px; padding: 6px; box-sizing: content-box; border-radius: 50%; background: rgba(60, 207, 122, 0.14); color: var(--green); }
.ox-calm p { margin: 2px 0 0; color: var(--text-2); font-size: 14px; }
.ox-act { position: relative; display: grid; gap: 10px; padding: 18px 20px 18px 22px; border-radius: var(--ox-r); background: var(--ox-card-2); border: 1px solid var(--ox-edge-2); overflow: hidden; animation: ops-in 0.25s ease-out; }
.ox-act::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-2); }
.ox-act.you { border-color: rgba(241, 201, 51, 0.35); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.ox-act.you::before { background: var(--yellow); }
.ox-act.urgent { border-color: rgba(255, 93, 93, 0.45); }
.ox-act.urgent::before { background: var(--red); }
.ox-act.go { border-color: rgba(60, 207, 122, 0.35); }
.ox-act.go::before { background: var(--green); }
.ox-act.calm { background: var(--ox-card); }
.ox-act-head { display: flex; align-items: flex-start; gap: 12px; }
.ox-act-head .ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.ox-act-head .ic svg { width: 19px; height: 19px; }
.ox-act.you .ic { background: rgba(241, 201, 51, 0.13); color: var(--yellow); }
.ox-act.urgent .ic { background: rgba(255, 93, 93, 0.14); color: var(--red); }
.ox-act.go .ic { background: rgba(60, 207, 122, 0.14); color: var(--green); }
.ox-act-head .tt { flex: 1; min-width: 0; }
.ox-act.urgent .eyebrow { color: var(--red); }
.ox-act.go .eyebrow { color: var(--green); }
.ox-act.calm .eyebrow { color: var(--muted); }
.ox-act h3 { margin: 3px 0 0; font-size: 18px; line-height: 1.3; }
.ox-act-text { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.ox-act-hint { margin: 0; color: var(--amber); font-size: 13px; }
.ox-timer { flex: none; display: grid; justify-items: end; gap: 1px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); text-align: right; }
.ox-timer small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.ox-timer b { font-size: 17px; color: var(--yellow); }
.ox-timer.hot b { color: var(--red); animation: oa-blink 1s ease-in-out infinite; }
.ox-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 0; }
.ox-figs div { padding: 10px 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); }
.ox-figs dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ox-figs dd { margin: 3px 0 0; font-size: 16px; font-weight: 700; }
.ox-figs dd small { color: var(--muted); font-weight: 500; font-size: 12px; }
.ox-figs.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ox-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ox-options button { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 13px; text-align: left; border: 1px solid var(--ox-edge-2); background: rgba(255, 255, 255, 0.03); color: var(--text); transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.ox-options button:hover:not(:disabled) { border-color: var(--yellow); background: rgba(241, 201, 51, 0.06); }
.ox-options button:active:not(:disabled) { transform: scale(0.99); }
.ox-options b { font-size: 15px; }
.ox-options small { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.ox-options i { justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 99px; font-style: normal; font-size: 11px; color: var(--muted); background: rgba(255, 255, 255, 0.06); }
.ox-act-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ox-figs + .ox-act-btns { margin-top: 14px; }
.ox-act-btns .btn:first-child:not(.ghost) { min-width: 180px; justify-content: center; }

/* Stage panels */
.ox-plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 18px; }
.ox-plan li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--ox-edge-2); font-size: 13.5px; }
.ox-plan span { color: var(--muted); font-size: 12px; min-width: 32px; }
.ox-plan em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--yellow-ink); white-space: nowrap; }
.ox-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 12px 0 10px; color: var(--muted); font-size: 13px; }
.ox-counts b { color: var(--text); font-size: 15px; }
.ox-chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--ox-edge-2); background: none; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.ox-chip-btn svg { width: 14px; height: 14px; }
.ox-chip-btn.on { border-color: var(--yellow); color: var(--yellow-ink); }
.ox-tasks { list-style: none; margin: 0; padding: 0; display: grid; }
.ox-tasks li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--ox-edge); font-size: 14px; }
.ox-tasks li:last-child { border-bottom: 0; }
.ox-tasks .st { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); }
.ox-tasks .st svg { width: 14px; height: 14px; }
.ox-tasks .st i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.ox-tasks .lb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.ox-tasks em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.ox-tasks em.pilot { color: var(--green); background: rgba(60, 207, 122, 0.1); }
.ox-tasks em.ops, .ox-tasks em.late { color: var(--amber); background: rgba(255, 181, 71, 0.1); }
.ox-tasks .tm { color: var(--muted); font-size: 12.5px; }
.ox-tasks li.done { color: var(--muted); }
.ox-tasks li.done .st { background: rgba(60, 207, 122, 0.14); color: var(--green); }
.ox-tasks li.active .st i { background: var(--blue); box-shadow: 0 0 0 4px rgba(111, 155, 255, 0.2); animation: oa-blink 1.4s ease-in-out infinite; }
.ox-tasks li.active .tm { color: var(--blue); }
.ox-tasks li.confirm { margin: 2px -8px; padding: 9px 12px; border-radius: 10px; background: rgba(241, 201, 51, 0.08); border-bottom-color: transparent; font-weight: 600; }
.ox-tasks li.confirm .st { background: var(--yellow); color: #10224d; }
.ox-tasks li.confirm .tm { color: var(--yellow-ink); font-weight: 700; }
.ox-track { display: flex; align-items: center; gap: 12px; margin: 2px 0 16px; }
.ox-track .bar { position: relative; flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); }
.ox-track .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, rgba(241, 201, 51, 0.3), var(--yellow)); }
.ox-track .bar b { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: #10224d; }
.ox-track .bar b svg { width: 15px; height: 15px; transform: rotate(45deg); }
.ox-notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ox-notes li { display: flex; gap: 9px; align-items: flex-start; color: var(--text-2); font-size: 13.5px; }
.ox-notes li svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--muted); }
.ox-notes li.warn, .ox-notes li.warn svg { color: var(--amber); }

/* Debrief */
.ox-debrief { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 22px 24px; border-radius: calc(var(--ox-r) + 2px);
  background: radial-gradient(120% 160% at 0% 0%, rgba(60, 207, 122, 0.12), transparent 55%), var(--ox-card); border: 1px solid rgba(60, 207, 122, 0.3); }
.ox-debrief.late { background: radial-gradient(120% 160% at 0% 0%, rgba(255, 181, 71, 0.12), transparent 55%), var(--ox-card); border-color: rgba(255, 181, 71, 0.35); }
.ox-debrief h2 { margin: 4px 0 12px; font-size: 26px; }
.ox-debrief dl { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.ox-debrief dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ox-debrief dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; }
.ox-debrief .ops-score b { font-size: 30px; }
.ox-fold { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; margin-bottom: 12px; border: 0; background: none; color: var(--text); text-align: left; }
.ox-fold h3 { flex: 1; }
.ox-fold > b { font-size: 18px; }
.ox-fold > svg { width: 18px; height: 18px; color: var(--muted); transition: transform 0.2s; }
.ox-fold[aria-expanded="true"] > svg { transform: rotate(180deg); }
.oa-pl .total { border-top: 1px solid var(--ox-edge-2); border-bottom: 0; font-weight: 700; }
.ox-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ox-routes button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icao city go" "icao meta go"; gap: 0 12px; align-items: center; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--ox-edge-2); background: rgba(255, 255, 255, 0.03); color: var(--text); text-align: left; }
.ox-routes button:hover:not(:disabled) { border-color: var(--yellow); }
.ox-routes button:disabled { opacity: 0.45; }
.ox-routes b { grid-area: icao; font-size: 18px; }
.ox-routes span { grid-area: city; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-routes small { grid-area: meta; color: var(--muted); font-size: 12px; }
.ox-routes svg, .ox-routes em { grid-area: go; width: 16px; height: 16px; color: var(--muted); font-style: normal; font-size: 11.5px; width: auto; }
.ox-end { display: inline-flex; margin-top: 14px; }

/* The day */
.ox-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ox-chain li { display: grid; gap: 2px; padding: 9px 13px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ox-edge); }
.ox-chain li b { font-size: 14px; }
.ox-chain li small { color: var(--muted); font-size: 12px; }
.ox-chain li.ok b { color: var(--text); }
.ox-chain li.late small.res { color: var(--amber); }
.ox-chain li .fn { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.ox-chain li small.sched { color: var(--text-2); font-size: 11.5px; }
.ox-chain li.now { border-color: rgba(241, 201, 51, 0.5); background: rgba(241, 201, 51, 0.06); }
.ox-chain li.now small.res { color: var(--yellow-ink); font-weight: 700; }

/* Alongside */
.ox-side { position: sticky; top: 76px; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 12px; padding: 14px; border-radius: var(--ox-r); background: var(--ox-card); border: 1px solid var(--ox-edge); }
.ox-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.ox-tabs button { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.ox-tabs button svg { width: 15px; height: 15px; flex: none; }
.ox-tabs button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ox-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.ox-tabs.big { margin: 16px 0; max-width: 520px; }
.ox-tabs.big button { height: 40px; font-size: 14px; }
.ox-chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ox-feed { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; max-height: min(56vh, 560px); overflow-y: auto; padding-right: 4px; }
.ox-msg { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-size: 13.5px; }
.ox-msg b { display: block; margin-bottom: 2px; font-size: 12.5px; color: var(--text-2); }
.ox-msg p { margin: 0; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.ox-msg small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.ox-msg.event { background: rgba(255, 181, 71, 0.07); }
.ox-msg.event b { color: var(--amber); }
.ox-msg.warn b { color: var(--amber); }
.ox-msg.release { background: rgba(60, 207, 122, 0.07); }
.ox-msg.release b { color: var(--green); }
.ox-msg.me { justify-self: end; max-width: 88%; background: rgba(241, 201, 51, 0.1); }
.ox-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ox-quick button { height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--ox-edge-2); background: none; color: var(--text-2); font-size: 12px; }
.ox-quick button:hover:not(:disabled) { border-color: var(--yellow); color: var(--text); }
.ox-input { display: flex; gap: 8px; }
.ox-input .input { flex: 1; min-width: 0; }
.ox-brief { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ox-brief li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ox-brief li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.ox-brief li.warn svg { color: var(--amber); }
.ox-sheet { margin: 0; display: grid; }
.ox-sheet div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--ox-edge-2); font-size: 13.5px; }
.ox-sheet dt { color: var(--text-2); }
.ox-sheet dd { margin: 0; font-weight: 700; }
.ox-sheet small { grid-column: 2; text-align: right; color: var(--muted); font-size: 11.5px; }
.ox-sheet .over dd, .ox-sheet .over small { color: var(--red); }

/* Start */
.ox-start { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.ox-start-head h1 { display: flex; align-items: center; gap: 14px; margin: 6px 0 2px; font-size: clamp(32px, 6vw, 48px); }
.ox-start-head h1 svg { width: 28px; height: 28px; color: var(--yellow); transform: rotate(45deg); }
.ox-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ox-steps > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
.ox-steps > li::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 4px; width: 2px; background: rgba(255, 255, 255, 0.08); }
.ox-steps > li:last-child::before { display: none; }
.ox-steps .n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(241, 201, 51, 0.12); color: var(--yellow); font-weight: 800; }
.ox-steps > li > div > b { display: block; margin: 9px 0 10px; font-size: 16px; }
.ox-time { width: 140px; font-size: 18px; }
.ox-go { margin-top: 12px; height: 48px; padding: 0 22px; font-size: 15px; }

/* Today */
.ox-today { display: grid; gap: var(--ox-gap); }
.ox-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ox-hello h1 { margin: 4px 0 0; font-size: clamp(26px, 4vw, 36px); }
.ox-up { position: relative; display: grid; gap: 10px; padding: 24px 26px; border-radius: calc(var(--ox-r) + 4px); color: var(--text); text-decoration: none;
  background: radial-gradient(120% 140% at 100% 0%, rgba(241, 201, 51, 0.16), transparent 55%), linear-gradient(135deg, #10224d, #0b1736); border: 1px solid rgba(255, 255, 255, 0.08); }
.ox-up.on { border-color: rgba(241, 201, 51, 0.45); }
.ox-up .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ox-up h2 { display: flex; align-items: center; gap: 14px; margin: 2px 0; font-size: clamp(30px, 5vw, 46px); color: #fff; }
.ox-up h2 svg { width: 26px; height: 26px; color: var(--yellow); transform: rotate(45deg); }
.ox-up p { margin: 0; color: #c9d4ee; font-size: 14.5px; max-width: 640px; line-height: 1.5; }
.ox-up .btn { justify-self: start; margin-top: 4px; }
.ox-up-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(241, 201, 51, 0.12); border: 1px solid rgba(241, 201, 51, 0.35); color: #fff; }
.ox-up-act span { color: var(--yellow); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.ox-up-act.urgent { background: rgba(255, 93, 93, 0.12); border-color: rgba(255, 93, 93, 0.4); }
.ox-up-act.go { background: rgba(60, 207, 122, 0.12); border-color: rgba(60, 207, 122, 0.4); }
.ox-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ox-mini li { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #8ea0c9; background: rgba(255, 255, 255, 0.05); }
.ox-mini li.done { color: var(--green); }
.ox-mini li.now { color: #10224d; background: var(--yellow); }
.ox-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ox-kpis div { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--ox-r); background: var(--ox-card); border: 1px solid var(--ox-edge); }
.ox-kpis dt { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ox-kpis dd { margin: 2px 0 0; font-size: 26px; font-weight: 700; }
.ox-kpis small { color: var(--muted); font-size: 12.5px; }
.ox-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ox-gap); }
.ox-room:hover { border-color: rgba(241, 201, 51, 0.4); }
.ox-room header > svg { width: 18px; height: 18px; color: var(--muted); }
.ox-room .big { margin: 0 0 10px; color: var(--text-2); }
.ox-room .big b { font-size: 28px; color: var(--text); margin-right: 6px; }
.ox-room ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.ox-room li { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; font-size: 13px; color: var(--text-2); }
.ox-room li em { font-style: normal; color: var(--muted); text-transform: capitalize; }
.oa-badges.compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ox-today .ops-network { margin: 0; }

/* Me */
.ox-me-page { display: grid; gap: 0; max-width: 1040px; margin: 0 auto; }
.ox-me-page .ox-kpis { margin-bottom: 0; }
.ox-me-page .ops-board { max-width: none; }

@media (max-width: 1100px) {
  .ox-nav a span { display: none; }
  .ox-nav a[aria-current="page"] span { display: inline; }
  .ox-strip { grid-template-columns: minmax(0, 1fr); }
  .ox-strip-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .ox-grid { grid-template-columns: minmax(0, 1fr); }
  .ox-side { position: static; }
  .ox-feed { max-height: 380px; }
  .ox-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ox-top { height: 54px; padding: 0 12px; gap: 8px; }
  .ox-nav { display: none; }
  .ox-brand b { font-size: 14px; }
  .ox-app { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ox-page { padding: 14px 12px 40px; }
  /* A phone: a floating dock. The four pages, a pill behind the one you're on; the way back to
     the Crew Center apart, at the end. */
  .ox-bottom { position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: center; gap: 2px; height: 62px; padding: 5px; border-radius: 22px; background: rgba(16, 20, 29, 0.9); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
  .ox-bottom a { flex-direction: column; justify-content: center; gap: 4px; height: 52px; padding: 0; border-radius: 17px; font-size: 10.5px; letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent; }
  .ox-bottom a::before { content: ""; position: absolute; top: 3px; left: 50%; width: 48px; height: 28px; margin-left: -24px; border-radius: 14px; background: rgba(241, 201, 51, 0.16); opacity: 0; transform: scaleX(0.55); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 1.3, 0.6, 1); }
  .ox-bottom a > * { position: relative; }
  .ox-bottom a svg { width: 21px; height: 21px; transition: color 0.2s ease; }
  .ox-bottom a:active { background: rgba(255, 255, 255, 0.04); }
  .ox-bottom a[aria-current="page"] { color: var(--text); }
  .ox-bottom a[aria-current="page"]::before { opacity: 1; transform: none; }
  .ox-bottom a[aria-current="page"] svg { color: var(--yellow); }
  .ox-bottom .ox-badge-n { position: absolute; z-index: 1; top: 1px; left: calc(50% + 7px); box-shadow: 0 0 0 2px #10141d; }
  .ox-strip { padding: 16px; gap: 12px; }
  .ox-strip-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .ox-strip-facts .key { grid-column: 1 / -1; margin: 0; }
  .ox-phases li { font-size: 0; gap: 0; padding-right: 4px; }
  .ox-phases li.now { font-size: 12.5px; gap: 6px; }
  .ox-act { padding: 16px 16px 16px 18px; }
  .ox-act-head { flex-wrap: wrap; }
  .ox-timer { order: 3; width: 100%; grid-auto-flow: column; justify-content: space-between; align-items: center; text-align: left; }
  .ox-timer small { max-width: none; }
  .ox-options { grid-template-columns: minmax(0, 1fr); }
  .ox-figs.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ox-act-btns .btn:first-child:not(.ghost) { flex: 1 1 100%; }
  .ox-debrief { grid-template-columns: auto minmax(0, 1fr); padding: 18px; gap: 16px; }
  .ox-debrief > .btn { grid-column: 1 / -1; justify-self: start; }
  .ox-routes { grid-template-columns: minmax(0, 1fr); }
  .ox-two { grid-template-columns: minmax(0, 1fr); }
  .ox-kpis dd { font-size: 22px; }
  .ox-up { padding: 20px 18px; }
  .ox-steps > li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .ox-steps .n { width: 34px; height: 34px; }
  .ox-steps > li::before { left: 16px; top: 34px; }
}
.ox-panel.flush .oa-history { margin: 0; }
.ox-panel.flush .oa-history li:first-child { border-top: 0; }
.ox-issues { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: #ff9b9b; font-size: 13.5px; }
.ox-ofp { display: grid; gap: 6px; }
.ox-ofp .st { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ox-ofp .st.approved, .ox-ofp .st.remarks { color: var(--green); }
.ox-ofp .st.rejected { color: var(--red); }
.ox-ofp ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; color: var(--text-2); }
.ox-ofp li.warn { color: var(--amber); }
.ox-ofp li.fail { color: #ff9b9b; }
.ox-waiting { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "e t" "b t"; gap: 2px 14px; align-items: center; max-width: min(420px, calc(100vw - 36px)); padding: 12px 16px; border-radius: 14px; background: #1f2534; border: 1px solid rgba(241, 201, 51, 0.5); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); color: var(--text); text-decoration: none; animation: ops-in 0.25s ease-out; }
.ox-waiting .eyebrow { grid-area: e; }
.ox-waiting b { grid-area: b; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-waiting .mono { grid-area: t; font-size: 18px; font-weight: 700; color: var(--yellow); }
.ox-waiting.urgent { border-color: rgba(255, 93, 93, 0.6); }
.ox-waiting.urgent .eyebrow, .ox-waiting.urgent .mono { color: var(--red); }
@media (max-width: 760px) { .ox-waiting { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: none; } }
.ox-ref { margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(255, 181, 71, 0.12); color: var(--amber); font-style: normal; font-family: var(--mono); font-size: 11px; white-space: nowrap; }

/* The flight plan: SimBrief already filled in, picked up by itself */
.ox-sb { display: grid; gap: 10px; padding: 14px 16px; border-radius: 13px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ox-edge-2); }
.ox-sb p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ox-sb-head { display: flex; align-items: center; gap: 8px; }
.ox-sb-head svg { width: 17px; height: 17px; color: var(--yellow); }
.ox-sb-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ox-sb-row .input { flex: 1 1 200px; min-width: 0; }
.ox-sb .ox-sb-alt { font-size: 12.5px; color: var(--muted); }
.ox-sb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: sb; }
.ox-sb-steps li { position: relative; display: grid; gap: 2px; padding-left: 32px; counter-increment: sb; }
.ox-sb-steps li::before { content: counter(sb); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(241, 201, 51, 0.14); color: var(--yellow); font-size: 12px; font-weight: 800; }
.ox-sb-steps b { font-size: 14px; }
.ox-sb-steps span { color: var(--text-2); font-size: 13px; line-height: 1.45; }
.ox-sb .ox-act-btns .btn svg { width: 15px; height: 15px; }
.ox-sb-status { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; font-size: 12.5px !important; color: var(--muted) !important; }
.ox-sb-status .wait { display: inline-flex; align-items: center; gap: 7px; color: var(--yellow-ink); font-weight: 600; }
.ox-sb-status .wait svg { width: 14px; height: 14px; }
.ox-sb-status .who { margin-left: auto; }
.ox-sb-status .who b { color: var(--text-2); }

/* Cancel the flight */
.ox-cancel { display: grid; justify-items: start; gap: 10px; padding: 2px 4px; }
.ox-cancel > .link-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.ox-cancel > .link-btn svg { width: 15px; height: 15px; }
.ox-cancel > .link-btn:hover { color: var(--red); }
.ox-cancel.sure { padding: 14px 16px; border-radius: 13px; background: rgba(255, 93, 93, 0.06); border: 1px solid rgba(255, 93, 93, 0.35); }
.ox-cancel p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ox-cancel p b { color: var(--text); }

/* The next sector, and the day's plan */
.ox-next-planned { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 13px; background: rgba(241, 201, 51, 0.06); border: 1px solid rgba(241, 201, 51, 0.35); }
.ox-next-planned > div { display: grid; gap: 2px; }
.ox-next-planned .ox-onward { max-width: 46ch; margin-top: 4px; color: var(--text-2); line-height: 1.45; }
.ox-next-planned b { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; }
.ox-next-planned b svg { width: 16px; height: 16px; color: var(--yellow); }
.ox-next-planned small { color: var(--text-2); font-size: 12.5px; }
.ox-others { display: block; margin-top: 12px; font-size: 13px; }
.ox-tag { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(241, 201, 51, 0.14); color: var(--yellow-ink); font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ox-chain li.plan { position: relative; padding-right: 34px; border-style: dashed; border-color: rgba(241, 201, 51, 0.35); background: none; }
.ox-chain li.plan small { color: var(--text-2); }
.ox-chain li.plan .x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 0; background: none; color: var(--muted); }
.ox-chain li.plan .x:hover { background: rgba(255, 93, 93, 0.12); color: var(--red); }
.ox-chain li.plan .x svg { width: 14px; height: 14px; }
.ox-plan-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ox-plan-add .btn small { margin-left: 4px; color: var(--muted); font-size: 11.5px; }
.ox-day .ox-sub { margin-top: 12px; }

/* Start: the return as well */
.ox-check { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 14px; cursor: pointer; }
.ox-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--yellow); flex: none; }
.ox-check span { display: grid; gap: 2px; }
.ox-check b { font-size: 14px; }
.ox-check small { color: var(--muted); font-size: 12.5px; }

/* The flight on the map */
.ox-mapcard header { margin-bottom: 12px; }
.ox-mapcard .muted { font-size: 12.5px; }

/* En route: the flight's progress */
.ox-route { display: grid; gap: 10px; margin: 2px 0 16px; }
.ox-route-ends { display: flex; justify-content: space-between; gap: 12px; }
.ox-route-ends > div { display: grid; gap: 1px; min-width: 0; }
.ox-route-ends .r { text-align: right; }
.ox-route-ends b { font-size: 20px; letter-spacing: 0.02em; }
.ox-route-ends small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-route-bar { position: relative; height: 34px; margin: 0 15px; }
.ox-route-bar::before { content: ""; position: absolute; left: -15px; right: -15px; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 6px, transparent 6px 12px); }
.ox-route-bar .fill { position: absolute; left: -15px; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; background: linear-gradient(90deg, rgba(241, 201, 51, 0.25), var(--yellow)); transition: width 1.2s ease; }
.ox-route-bar .fill::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -1px; border-radius: 50%; background: var(--yellow); }
.ox-route-bar::after { content: ""; position: absolute; right: -16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); background: var(--ox-card); box-sizing: border-box; }
.ox-route-bar .ac { position: absolute; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: var(--yellow); color: #10224d; box-shadow: 0 0 0 5px rgba(241, 201, 51, 0.16), 0 6px 18px rgba(0, 0, 0, 0.35); transition: left 1.2s ease; z-index: 1; }
.ox-route-bar .ac svg { width: 17px; height: 17px; transform: rotate(45deg); }
.ox-route-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--text-2); font-size: 12.5px; }

/* In the air: stay on the page. One slim line; open, how the decisions work. */
.ox-stay { border-radius: 14px; background: var(--ox-card); border: 1px solid var(--ox-edge); }
.ox-stay.warned { border-color: rgba(255, 181, 71, 0.35); }
.ox-stay-h { margin: 0; font: inherit; }
.ox-stay-h button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 14px 10px 12px; border: 0; border-radius: inherit; background: none; color: var(--text); text-align: left; cursor: pointer; }
.ox-stay-h button:hover { background: rgba(255, 255, 255, 0.025); }
.ox-stay-h .ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(111, 155, 255, 0.12); color: #a9c1ff; }
.ox-stay-h .ic svg { width: 16px; height: 16px; }
.ox-stay-h .t { flex: 1; display: grid; gap: 1px; min-width: 0; }
.ox-stay-h .t b { font-size: 14px; font-weight: 600; }
.ox-stay-h .t small { color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.4; }
.ox-stay-h em { flex: none; padding: 2px 8px; border-radius: 99px; background: rgba(255, 181, 71, 0.12); font-style: normal; color: var(--amber); font-size: 12px; font-weight: 700; }
.ox-stay-h .more { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.ox-stay-h .more svg { width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s; }
.ox-stay.open .ox-stay-h .more svg { transform: rotate(180deg); }
.ox-stay ul { list-style: none; margin: 0; padding: 2px 16px 16px 56px; display: grid; gap: 8px; }
.ox-stay li { display: flex; gap: 9px; align-items: flex-start; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.ox-stay li > svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--muted); }
.ox-stay li.ok > svg { color: var(--green); }
.ox-stay li b { color: var(--text); font-weight: 600; }
@media (max-width: 560px) { .ox-stay-h .more { font-size: 0; gap: 0; } .ox-stay ul { padding-left: 16px; } }

/* The Ops chat: the dark scrollbars, new messages sliding in, Ops typing */
.ox-app, .ox-app * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
.ox-app ::-webkit-scrollbar { width: 8px; height: 8px; }
.ox-app ::-webkit-scrollbar-track { background: transparent; }
.ox-app ::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(255, 255, 255, 0.14); border: 2px solid transparent; background-clip: padding-box; }
.ox-app ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); background-clip: padding-box; }
.ox-app ::-webkit-scrollbar-corner { background: transparent; }
.ox-feed { overscroll-behavior: contain; scroll-behavior: smooth; }
.ox-msg.new { animation: ox-msg-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ox-msg.me.new { transform-origin: right bottom; }
@keyframes ox-msg-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.ox-msg.chat.ops { border: 1px solid rgba(111, 155, 255, 0.22); background: rgba(111, 155, 255, 0.06); }
.ox-msg .who { display: inline-flex; align-items: center; gap: 5px; color: var(--blue) !important; font-size: 11px !important; letter-spacing: 0.08em; text-transform: uppercase; }
.ox-msg .who svg { width: 12px; height: 12px; }
.ox-msg.sending { opacity: 0.75; }
.ox-msg.typing { justify-self: start; display: flex; align-items: center; gap: 10px; padding: 10px 14px; animation: ox-msg-in 0.25s ease-out both; }
.ox-msg.typing .who { margin: 0; }
.ox-msg .dots { display: inline-flex; gap: 4px; }
.ox-msg .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: 0.35; animation: ox-dot 1s ease-in-out infinite; }
.ox-msg .dots i:nth-child(2) { animation-delay: 0.15s; }
.ox-msg .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ox-dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ox-msg .caret { display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--blue); animation: ox-caret 0.8s steps(2) infinite; }
@keyframes ox-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ox-msg.new, .ox-msg.typing { animation: none; } .ox-msg .dots i { animation: none; opacity: 0.7; } }

/* A rare event in flight: in front of every Ops page */
.ox-alert { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(6, 9, 15, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ops-in 0.2s ease-out; }
.ox-alert-card { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: 12px; padding: 22px 22px 18px; border-radius: 20px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255, 93, 93, 0.14), transparent 60%), #171c28; border: 1px solid rgba(255, 93, 93, 0.5);
  box-shadow: 0 0 0 6px rgba(255, 93, 93, 0.08), 0 30px 80px rgba(0, 0, 0, 0.55); animation: ox-alert-in 0.35s cubic-bezier(0.2, 0.9, 0.2, 1.1) both; }
@keyframes ox-alert-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.ox-alert-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ox-alert-top .tag { display: inline-flex; align-items: center; gap: 7px; color: var(--red); font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.ox-alert-top .tag svg { width: 16px; height: 16px; animation: live-dot 1s ease-in-out infinite; }
.ox-alert-top .clock { padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 18px; font-weight: 700; }
.ox-alert-top .clock.hot { color: var(--red); background: rgba(255, 93, 93, 0.12); }
.ox-alert h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.ox-alert-card > p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.ox-alert .ox-options { margin-top: 4px; }
.ox-alert-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; color: var(--muted); font-size: 12.5px; }
.ox-alert-foot .link-btn { color: var(--text-2); }

/* The destination's ATIS, close to arrival */
.ox-atis { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(111, 155, 255, 0.06); border: 1px solid rgba(111, 155, 255, 0.25); }
.ox-atis .eyebrow { color: var(--blue); }
.ox-atis p { margin: 6px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }

/* The flight strip: on time or late at a glance, and the base rules */
.ox-strip-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ox-otp { --c: var(--green); display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.ox-otp i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.ox-otp small { color: var(--text-2); font-weight: 500; font-size: 11.5px; }
.ox-otp.warn { --c: var(--amber); }
.ox-otp.late { --c: var(--red); }
.ox-strip-tags .chip { height: 30px; display: inline-flex; align-items: center; }
.ox-start > .bn { margin: -6px 0 18px; }
.ox-start.empty .sg { margin-bottom: 18px; text-align: left; }
.ox-up + .sg, .ox-today .sg { margin: 0; }

/* Every sector from an airport: search and sort */
.ox-picker { display: grid; gap: 8px; margin-top: 12px; }
.ox-picker-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ox-search { position: relative; flex: 1 1 260px; min-width: 0; }
.ox-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.ox-search .input { width: 100%; padding-left: 36px; }
.ox-picker .ox-routes { margin-top: 0; }
.ox-picker .ox-sub { margin: 0; }
.ox-more { justify-self: start; font-size: 13px; }
.ox-routes span .ox-tag + .ox-tag { margin-left: 4px; }

/* The on-time badge, when late: a button that opens where the minutes come from. */
button.ox-otp.why { cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; }
button.ox-otp.why em { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--c) 40%, transparent); font-style: normal; font-size: 12px; font-weight: 700; color: var(--text); }
button.ox-otp.why em svg { width: 14px; height: 14px; transition: transform 0.2s; }
button.ox-otp.why.open em svg { transform: rotate(180deg); }
button.ox-otp.why:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.ox-why { --c: var(--amber); grid-column: 1 / -1; display: grid; gap: 12px; padding: 16px 18px; border-radius: 14px; background: rgba(6, 12, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); animation: ox-why-in 0.22s ease-out; }
.ox-why.late { --c: var(--red); }
@keyframes ox-why-in { from { opacity: 0; transform: translateY(-4px); } }
.ox-why-head { display: flex; align-items: baseline; gap: 8px; }
.ox-why-head b { color: var(--c); font-size: 18px; font-weight: 800; }
.ox-why-head span { color: #8ea0c9; font-size: 13px; }
.ox-why ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ox-why li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ox-why li:first-child { border-top: 0; }
.ox-why .who { justify-self: start; padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255, 255, 255, 0.07); color: #c9d4ee; }
.ox-why .who.you { background: rgba(241, 201, 51, 0.14); color: var(--yellow); }
.ox-why .who.atc { background: rgba(111, 155, 255, 0.15); color: #9db8ff; }
.ox-why .what { display: grid; gap: 2px; min-width: 0; }
.ox-why .what b { color: #fff; font-size: 14px; font-weight: 600; }
.ox-why .what small { color: #8ea0c9; font-size: 12.5px; line-height: 1.45; }
.ox-why .min { justify-self: end; color: var(--c); font-size: 14px; font-weight: 800; }
.ox-why li.gain .min { color: var(--green); }
.ox-why li.zero .min, .ox-why li.zero .what b { color: #8ea0c9; }
.ox-why li.now .what b::after { content: "now"; margin-left: 8px; padding: 1px 6px; border-radius: 5px; background: var(--c); color: #0b1736; font-size: 10px; font-weight: 800; text-transform: uppercase; vertical-align: 2px; }
.ox-why .tip { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(241, 201, 51, 0.08); color: #f2e3a6; font-size: 13px; }
.ox-why .tip svg { flex: none; width: 16px; height: 16px; color: var(--yellow); margin-top: 1px; }
.ox-why .rule { margin: 0; color: #6f7fa6; font-size: 12px; }
@media (max-width: 640px) {
  .ox-why li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who min" "what what"; gap: 6px 10px; }
  .ox-why .who { grid-area: who; } .ox-why .what { grid-area: what; } .ox-why .min { grid-area: min; }
}
.ox-sheet-src { margin: 0 0 6px; padding: 9px 12px; border-radius: 10px; background: rgba(60, 207, 122, 0.08); color: #bfe9cf; font-size: 12.5px; line-height: 1.45; }

/* After landing: a turnaround, or standby. */
.ox-duty { white-space: nowrap; }
.ox-duty.standby svg { color: #9db8ff; }
.ox-after { display: grid; gap: 12px; margin-top: 4px; }
.ox-after-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ox-after-opts .opt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--ox-edge-2, rgba(255, 255, 255, 0.1)); background: rgba(255, 255, 255, 0.03); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ox-after-opts .opt svg { grid-row: span 2; width: 20px; height: 20px; color: var(--text-2); }
.ox-after-opts .opt b { font-size: 14.5px; }
.ox-after-opts .opt small { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ox-after-opts .opt:hover { background: rgba(255, 255, 255, 0.06); }
.ox-after-opts .opt.on { border-color: color-mix(in srgb, var(--yellow) 60%, transparent); background: rgba(241, 201, 51, 0.08); }
.ox-after-opts .opt.on svg { color: var(--yellow); }
.ox-after-turn { display: grid; gap: 10px; }
.ox-after-turn > .seg { justify-self: start; }
.ox-after-sum header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ox-after-sum p { margin: 6px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ox-after-sum.turnaround h3 svg { color: var(--yellow); }
.ox-after-sum.standby h3 svg { color: #9db8ff; }
.ox-standby { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.ox-standby .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(111, 155, 255, 0.14); color: #9db8ff; }
.ox-standby .ic svg { width: 22px; height: 22px; }
.ox-standby h3 { margin: 0 0 4px; }
.ox-standby p { margin: 0 0 12px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 640px) { .ox-after-opts { grid-template-columns: minmax(0, 1fr); } }

/* The flight strip as a boarding pass. */
.ox-strip.pass { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px 24px 18px; }
.ox-pass-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ox-pass-top .fn { color: var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; flex: none; }
.ox-pass-top .meta { color: #a9b8db; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ox-pass-top .meta b { color: #fff; font-weight: 600; }
.ox-pass-top .ox-live { margin-left: auto; flex: 0 1 auto; grid-column: auto; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); font-size: 12px; }
.ox-pass-route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1.1fr) minmax(0, 1fr); align-items: center; gap: 18px; }
.ox-pass-route .end { display: grid; gap: 2px; min-width: 0; }
.ox-pass-route .end.to { text-align: right; justify-items: end; }
.ox-pass-route .code { color: #fff; font-size: clamp(30px, 4.2vw, 44px); font-weight: 700; letter-spacing: 0.03em; line-height: 1.05; }
.ox-pass-route .city { color: #a9b8db; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ox-pass-route .time { display: grid; gap: 1px; margin-top: 8px; }
.ox-pass-route .time b { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.1; }
.ox-pass-route .time small { color: #8ea0c9; font-size: 12px; white-space: nowrap; }
.ox-pass-route .time.ok b { color: var(--green); }
.ox-pass-route .time.warn b { color: var(--amber); }
.ox-pass-route .time.late b { color: var(--red); }
.ox-pass-route .mid { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.ox-pass-route .mid .dur { color: #c9d4ee; font-size: 13px; font-weight: 700; }
.ox-pass-route .mid .line { display: flex; align-items: center; gap: 10px; width: 100%; }
.ox-pass-route .mid .line i { flex: 1; height: 0; border-top: 2px dashed rgba(169, 184, 219, 0.35); }
.ox-pass-route .mid .line svg { flex: none; width: 22px; height: 22px; color: var(--yellow); transform: rotate(45deg); }
.ox-pass-route .mid .ph { color: #8ea0c9; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ox-strip.pass .ox-strip-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
@media (max-width: 640px) {
  .ox-strip.pass { padding: 16px; gap: 14px; }
  .ox-pass-top { flex-wrap: wrap; row-gap: 8px; }
  .ox-pass-top .ox-live { margin-left: 0; }
  /* Top-aligned, so the two codes line up when one time's note takes two lines. */
  .ox-pass-route { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 8px; align-items: start; }
  .ox-pass-route .mid { align-self: center; }
  .ox-pass-route .code { font-size: 28px; }
  .ox-pass-route .time b { font-size: 18px; }
  .ox-pass-route .time small { white-space: normal; }
  .ox-pass-route .mid .ph { display: none; }
}
.ox-chat-left { margin: 6px 2px 0; font-size: 11.5px; color: var(--muted); }
.ox-chat-left.low { color: var(--amber); }
.ox-chat-left.out { color: var(--text-2); }

/* Staff: what the dispatcher learnt. */
.oa-lessons { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.oa-lessons h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.oa-lessons h4 svg { width: 16px; height: 16px; color: var(--yellow); }
.oa-lessons-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.oa-lessons-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: l; }
.oa-lessons-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.oa-lessons-list .x { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.oa-lessons-list .x:hover { background: var(--panel); color: var(--red); }
.oa-lessons-list .x svg { width: 14px; height: 14px; }
.oa-lessons-review summary { cursor: pointer; color: var(--text-2); font-size: 12.5px; }
.oa-lessons-review ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.oa-lessons-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* The sectors still waiting for their PIREP */
.ox-pireps { border-color: rgba(241, 201, 51, 0.35); }
.ox-pireps > header { margin-bottom: 6px; }
.ox-pireps h3 svg { color: var(--yellow); }
.ox-pireps > p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.ox-pireps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ox-pireps li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ox-edge); font-size: 13.5px; }
.ox-pireps li small { color: var(--muted); }
.ox-pireps li .btn { margin: 0; }
@media (max-width: 560px) {
  .ox-pireps li { grid-template-columns: auto minmax(0, 1fr); }
  .ox-pireps li small { grid-column: 1 / -1; }
  .ox-pireps li .btn { grid-column: 1 / -1; justify-content: center; }
}
.ox-sub.warn { color: #ffc27a; }
.ox-sub.warn .link-btn { font-weight: 700; }
.ox-time[aria-invalid] { border-color: rgba(255, 140, 90, 0.6); }
/* The day's header: the title on one line, the duty clock under it on a phone */
.ox-day > header { flex-wrap: wrap; row-gap: 4px; }
.ox-day > header h3 { white-space: nowrap; }

/* ---------- The way back to the Crew Center ---------- */
.ox-cc { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px; border-radius: 99px; border: 1px solid rgba(241, 201, 51, 0.45); background: rgba(241, 201, 51, 0.08); color: var(--yellow-ink, var(--yellow)); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.ox-cc:hover { background: rgba(241, 201, 51, 0.16); border-color: var(--yellow); }
.ox-cc svg { width: 15px; height: 15px; }
.ox-cc .short { display: none; }
.ox-bottom-cc { display: none !important; }
@media (max-width: 1100px) { .ox-cc .long { display: none; } .ox-cc .short { display: inline; } }
@media (max-width: 760px) {
  .ox-cc { display: none; }
  .ox-bottom-cc { display: flex !important; min-width: 74px; margin-left: 3px; padding: 0 8px !important; color: var(--yellow) !important; }
  .ox-bottom-cc::before { display: none; }
  .ox-bottom-cc::after { content: ""; position: absolute; left: -3px; top: 12px; bottom: 12px; width: 1px; background: rgba(255, 255, 255, 0.09); }
  .ox-bottom-cc span { white-space: nowrap; }
}

/* ---------- The island: the flight, live, in the top bar ---------- */
.oi-slot { position: relative; height: 34px; min-width: 0; }
/* Its own colours: black like the iPhone's, readable on the Crew Center's light theme too. */
.oi { --text: #f2f3f5; --text-2: #c9cbd0; --muted: #8e9198; --yellow: #f1c933; --yellow-ink: #f1c933; --green: #3ccf7a; --red: #ff5d5d; --amber: #ffb547; color-scheme: dark; }
.oi .btn.ghost { color: #f2f3f5; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); }
.oi { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 35; overflow: hidden; height: 34px; border-radius: 999px; background: #050608; border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); color: var(--text);
  transition: width 0.5s cubic-bezier(0.34, 1.32, 0.64, 1), height 0.5s cubic-bezier(0.34, 1.32, 0.64, 1), border-radius 0.4s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.oi.open { border-radius: 24px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04); }
.oi.you:not(.open) { border-color: rgba(241, 201, 51, 0.55); }
.oi.urgent { border-color: rgba(255, 93, 93, 0.7); }
.oi.go:not(.open) { border-color: rgba(60, 207, 122, 0.5); }

.oi-small { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 4px; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; transition: opacity 0.18s ease; }
.oi.open .oi-small { opacity: 0; pointer-events: none; }
.oi-ic { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(111, 155, 255, 0.16); color: #9db8ff; font-style: normal; }
.oi-ic svg { width: 13px; height: 13px; }
.oi-ic.you { background: rgba(241, 201, 51, 0.18); color: var(--yellow); }
.oi-ic.urgent { background: rgba(255, 93, 93, 0.2); color: var(--red); }
.oi-ic.go, .oi-ic.ok { background: rgba(60, 207, 122, 0.16); color: var(--green); }
.oi-ic.late { background: rgba(255, 181, 71, 0.16); color: var(--amber); }
.oi.you:not(.open) .oi-ic::after, .oi.urgent:not(.open) .oi-ic::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: oi-ping 1.8s ease-out infinite; }
@keyframes oi-ping { 0% { transform: scale(0.8); opacity: 0.7; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.oi-fn { color: var(--yellow); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
.oi-text { min-width: 0; flex: 0 1 auto; max-width: 230px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; }
.oi-small > :not(.oi-text) { flex: none; }
/* Little room: the flight number and the figure (ETA, minutes, clock) first. */
.oi-small.tight .oi-text:not(:only-of-type) { display: none; }
.oi-small.tight .oi-ring { display: none; }
.oi-small.tight.pressing .oi-text { display: inline; }
.oi-small.tight.pressing .oi-fn { display: none; }
/* The island carries the aircraft and the duty time: the duty chip steps aside for it. */
.has-island .ox-duty { display: none; }
.oi-fig { color: var(--text-2); font-size: 12.5px; }
.oi-clock { color: var(--yellow); font-size: 13px; font-weight: 700; }
.oi-clock.hot { color: var(--red); }
.oi-clock.big { font-size: 20px; align-self: start; }
.oi-n { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--yellow); color: #111; font-size: 11px; font-weight: 800; font-style: normal; }
.oi-ring { flex: none; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--yellow) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.14) 0);
  -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px); mask: radial-gradient(circle, transparent 4.5px, #000 5px); }

.oi-big { position: absolute; top: 0; left: 0; width: min(392px, calc(100vw - 20px)); display: grid; gap: 10px; padding: 12px 14px 12px; opacity: 0; pointer-events: none; transition: opacity 0.22s ease 0.06s; }
.oi.open .oi-big { opacity: 1; pointer-events: auto; }
.oi-fold { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: var(--muted); cursor: pointer; }
.oi-fold:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }
.oi-fold svg { width: 15px; height: 15px; }
.oi-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-right: 32px; }
.oi-head .oi-ic { width: 34px; height: 34px; }
.oi-head .oi-ic svg { width: 17px; height: 17px; }
.oi-what { display: grid; gap: 1px; min-width: 0; }
.oi-what .eyebrow { font-size: 10.5px; color: var(--muted); }
.oi-what b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-what small { color: var(--text-2); font-size: 12px; }
.oi-fig.big { font-size: 15px; font-weight: 700; color: var(--text); }
.oi-bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.oi-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgba(241, 201, 51, 0.55), var(--yellow)); transition: width 0.6s ease; }
.oi-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(241, 201, 51, 0.32); }
.oi-act.urgent { border-color: rgba(255, 93, 93, 0.55); background: rgba(255, 93, 93, 0.06); }
.oi-act-t { display: grid; gap: 2px; min-width: 0; }
.oi-act-t .eyebrow { font-size: 10.5px; color: var(--yellow-ink, var(--yellow)); }
.oi-act.urgent .oi-act-t .eyebrow { color: var(--red); }
.oi-act-t b { font-size: 14px; line-height: 1.3; }
.oi-act-b { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.oi-act-b .btn { margin: 0; }
.oi-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.oi-open { justify-self: end; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.oi-open:hover { color: var(--text); }
.oi-open svg { width: 13px; height: 13px; }

@media (max-width: 760px) {
  /* A phone: the island at the top centre, the brand's name and the duty chip out of its way. */
  .oi-slot { position: static; flex: 1; }
  .oi { top: 9px; }
  .has-island .ox-brand b, .has-island .ox-duty { display: none; }
  .oi-text { max-width: 128px; }
}
/* On a computer: with the buttons on the right (where the duty chip was), opening leftwards and down. */
@media (min-width: 761px) {
  .oi { left: auto; right: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .oi { transition: none; } .oi-ic::after { animation: none !important; } }

/* In the Crew Center's top bar: by the buttons on the right; on a phone, within its slot. */
.oi-slot.cc { position: relative !important; height: 34px; }
@media (max-width: 760px) {
  .oi-slot.cc .oi { top: 0; left: 50%; right: auto; transform: translateX(-50%); }
  /* Open, it takes the width of the screen at the top (the slot is too narrow to grow from). */
  .oi-slot.cc .oi.open { position: fixed; top: 10px; left: 10px; right: 10px; width: auto !important; transform: none; transform-origin: top center; animation: oi-pop 0.42s cubic-bezier(0.34, 1.32, 0.64, 1); }
}
@keyframes oi-pop { from { opacity: 0.3; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .oi-slot.cc .oi.open { animation: none; } }
/* A phone's Crew Center bar: the search moves to More while the island is there; very little
   room, the island keeps its icon, its figure (ETA, minutes, clock) and its count. */
.more-search { display: none !important; }
@media (max-width: 760px) {
  .app.has-island .topbar .search-btn { display: none; }
  .app.has-island .more-search { display: flex !important; }
}
.oi-small.micro .oi-fn { display: none; }

/* The flight's colour, as on the live banner: blue with Ops Control, green without. Yellow and
   red stay for what waits for the captain. */
.oi.k-ops { --accent: #6f9bff; --accent-soft: rgba(111, 155, 255, 0.17); }
.oi.k-plain { --accent: #3ccf7a; --accent-soft: rgba(60, 207, 122, 0.16); }
.oi.k-ops:not(.open), .oi.k-plain:not(.open) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.oi.k-ops.open, .oi.k-plain.open { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.oi.k-ops .oi-fn, .oi.k-plain .oi-fn, .oi.k-ops .oi-what .eyebrow, .oi.k-plain .oi-what .eyebrow { color: var(--accent); }
.oi.k-ops .oi-ic:is(.calm, .ok, .go), .oi.k-plain .oi-ic:is(.calm, .ok, .go) { background: var(--accent-soft); color: var(--accent); }
.oi.k-ops .oi-ring, .oi.k-plain .oi-ring { background: conic-gradient(var(--accent) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.14) 0); }
.oi.k-ops .oi-bar i, .oi.k-plain .oi-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, transparent), var(--accent)); }
/* (Waiting for the captain: the flight keeps its colour, the icon pulses yellow and the count
   shows; a decision in flight turns the island red.) */
.oi.urgent { border-color: rgba(255, 93, 93, 0.7); }

/* ---------- The real world: source tags, NOTAMs, the network bar ---------- */
.ox-src { display: inline-flex; align-items: center; flex: none; height: 19px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap; vertical-align: 1px; --c: var(--muted);
  color: color-mix(in srgb, var(--c) 78%, var(--text)); background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); }
.ox-src.news { --c: var(--amber); }
.ox-src.sigmet { --c: var(--red); }
.ox-src.metar { --c: var(--blue); }
.ox-app .eyebrow .ox-src { margin-left: 8px; letter-spacing: 0.04em; }
.ox-brief li .ox-src { margin-left: 4px; }

.ox-notams ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ox-notams > ul > li { border-radius: 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ox-edge); }
.ox-notams > ul > li.open { background: rgba(255, 255, 255, 0.05); }
.ox-notams > ul > li > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.ox-notams > ul > li > button .t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ox-notams > ul > li > button b { font-size: 13.5px; overflow-wrap: anywhere; }
.ox-notams > ul > li > button small { color: var(--muted); font-size: 12.5px; }
.ox-notams > ul > li > button > svg { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform 0.15s; }
.ox-notams > ul > li.open > button > svg { transform: rotate(180deg); }
.ox-notam-more { display: grid; gap: 8px; padding: 0 12px 12px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.ox-notam-more p { margin: 0; }
.ox-notam-more code { display: block; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.ox-heads { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ox-heads li { display: grid; gap: 1px; font-size: 12.5px; line-height: 1.4; }
.ox-heads a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.ox-heads a:hover { text-decoration-color: var(--text); }
.ox-heads small { color: var(--muted); font-size: 11.5px; }
@media (max-width: 640px) {
  .ox-notams > ul > li > button { flex-wrap: wrap; }
  .ox-notams > ul > li > button .t { flex-basis: calc(100% - 30px); order: 2; }
  .ox-notams > ul > li > button > svg { order: 1; margin-left: auto; }
}

.ops-network.real svg { color: var(--amber); }
.ops-network-more { display: grid; gap: 10px; padding: 0 14px 12px 39px; }
.ops-network .ops-network-more p { padding: 0; }
.ops-network .ops-network-more li > span:not(.ox-src) { color: var(--text-2); }
.ops-network .ops-network-more .ox-src { color: color-mix(in srgb, var(--c) 78%, var(--text)); }
.ops-network-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ops-network-more li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.ops-network-more li > span:not(.ox-src) { flex: 1; min-width: 200px; }
.ops-network-more .ox-heads { flex-basis: 100%; padding-left: 2px; }

/* AP+ (Autopilot+): the pilot stepped away, Infinite Flight flies on. A violet tag, a dimmer aircraft. */
.ox-ap, .olm-ap, .chip.lm-ap { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; margin-right: 8px; border-radius: 6px; font: 700 10.5px var(--mono); letter-spacing: 0.04em;
  color: color-mix(in srgb, #b28cff 78%, var(--text)); background: rgba(178, 140, 255, 0.14); border: 1px solid rgba(178, 140, 255, 0.4); }
.olm-ap { margin: 0 0 0 6px; }
.chip.lm-ap { margin: 0; }
.plane-marker:not(.olm-p) .pm-sub { margin-left: 6px; font-size: 9.5px; letter-spacing: 0.06em; }
.ox-ap-note { margin: -4px 0 12px; padding: 9px 12px; border-radius: 10px; background: rgba(178, 140, 255, 0.08); border: 1px solid rgba(178, 140, 255, 0.25); color: var(--text-2); font-size: 13px; line-height: 1.45; }
.plane-marker.ap .pm-icon { opacity: 0.7; }
.plane-marker.ap .pm-sub { color: #c9b3ff; }
.olb-radar .r-blip.ap { opacity: 0.75; }

/* Night curfew at the arrival: strongly advised against. */
.ox-curfew { display: flex; gap: 12px; margin: 12px 0; padding: 14px 16px; border-radius: 13px; background: rgba(255, 93, 93, 0.09); border: 1px solid rgba(255, 93, 93, 0.45); }
.ox-curfew > svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--red); }
.ox-curfew b { color: var(--text); }
.ox-curfew > div > b:first-child { display: block; font-size: 15px; color: color-mix(in srgb, var(--red) 70%, var(--text)); }
.ox-curfew p { margin: 6px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ox-curfew p.adv { font-weight: 700; color: var(--text); }
.ox-curfew .ox-act-btns { margin-top: 10px; }
.btn.ghost.danger { background: transparent; border-color: rgba(255, 93, 93, 0.55); color: color-mix(in srgb, var(--red) 75%, var(--text)); }
.ox-tag.curfew { color: color-mix(in srgb, var(--red) 75%, var(--text)); background: rgba(255, 93, 93, 0.12); border-color: rgba(255, 93, 93, 0.4); }
.ox-routes button.curfew { border-color: rgba(255, 93, 93, 0.4); }
.ox-chain li.curfew .sched { color: color-mix(in srgb, var(--red) 70%, var(--text)); }
.ox-ap-note.warn { background: rgba(255, 181, 71, 0.1); border-color: rgba(255, 181, 71, 0.4); color: var(--text); }
.ox-src.easa { --c: #e45bff; }

/* Before a flight: the Ops room first. */
.ox-before { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; background: rgba(111, 155, 255, 0.07); border: 1px solid rgba(111, 155, 255, 0.28); }
.ox-before .ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(111, 155, 255, 0.14); color: #a9c1ff; }
.ox-before .ic svg { width: 19px; height: 19px; }
.ox-before > div { flex: 1; min-width: 0; }
.ox-before b { font-size: 14.5px; }
.ox-before p { margin: 3px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.ox-before .btn { flex: none; }
@media (max-width: 640px) { .ox-before { flex-wrap: wrap; } .ox-before .btn { flex: 1 1 100%; justify-content: center; } }

/* SimBrief: what to type in "Avoid the following". */
.ox-sb-avoid { display: grid; gap: 6px; margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: rgba(228, 91, 255, 0.07); border: 1px solid rgba(228, 91, 255, 0.3); }
.ox-sb-avoid > span { color: var(--text-2); font-size: 13px; }
.ox-sb-avoid small { color: var(--muted); font-size: 12px; }
.ox-sb-avoid .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ox-sb-avoid .chips button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(228, 91, 255, 0.4); background: rgba(0, 0, 0, 0.2); color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ox-sb-avoid .chips button svg { width: 13px; height: 13px; color: var(--muted); }
.ox-sb-avoid .chips button.all { border-style: dashed; font-family: inherit; }

/* One tap PIREP: the button, "Edit first" beside it; then what became of it. */
.ox-pirep-go { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ox-pirep-go .link-btn { font-size: 13px; }
.ox-pirep-done { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 700; font-size: 14px; }
.ox-pirep-done svg { width: 16px; height: 16px; }

/* ---------- The top bar on a phone or a tablet: never wider than the screen ----------
   (Up to 920 px: below that the nav, the Crew Center link, the duty chip and the account don't all
   fit beside the brand's name.) */
.ox-app { overflow-x: clip; }
@media (max-width: 920px) {
  .ox-top > * { flex-shrink: 0; }
  .ox-top .oi-slot { flex: 1 1 0; min-width: 0; }
  .ox-duty { flex: 0 1 auto; min-width: 0; gap: 6px; padding: 0 10px; overflow: hidden; }
  .ox-duty b, .ox-duty small { overflow: hidden; text-overflow: ellipsis; }
  .ox-zulu { font-size: 13px; }
  /* The aircraft of the day takes the brand's place: the harp alone says where you are. */
  .ox-top:has(.ox-duty) .ox-brand b { display: none; }
}
@media (max-width: 400px) {
  .ox-top { gap: 6px; padding: 0 10px; }
  .ox-duty small .k { display: none; }
}
@media (max-width: 340px) {
  .ox-duty small { display: none; }
}
/* A narrow phone: the on-time badge drops its "ETA vs STA" note rather than its "Why?". */
.ox-otp { max-width: 100%; white-space: nowrap; }
@media (max-width: 380px) { .ox-otp small { display: none; } }
/* The way back to the Crew Center in the bottom bar: its name on two lines when the bar is tight. */
@media (max-width: 400px) { .ox-bottom-cc span { white-space: normal; line-height: 1.05; text-align: center; } }
/* The approved flight plan, which a new OFP can still replace until take-off. */
.ox-ofp-again { display: grid; gap: 12px; }
.ox-ofp-again .txt { flex: 1 1 320px; min-width: 0; display: grid; gap: 3px; }
.ox-ofp-again .txt > b { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; }
.ox-ofp-again .txt b svg { width: 16px; height: 16px; color: var(--green); }
.ox-ofp-again .txt span { color: var(--text-2); font-size: 13px; line-height: 1.45; }
.ox-ofp-again .txt .wait { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow-ink); }
.ox-ofp-again .txt .wait svg { width: 14px; height: 14px; }
.ox-ofp-again .ox-act-btns { margin: 0; }
.ox-runup { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(111, 155, 255, 0.08); border: 1px solid rgba(111, 155, 255, 0.3); color: var(--text-2); font-size: 13px; line-height: 1.5; }
.ox-runup svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #9db8ff; }
.ox-runup b { color: var(--text); }
/* The stand for a turnaround not started yet: airstairs or a jetbridge, changeable. */
.ox-stand { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; }
.ox-after-sum .ox-stand { margin: 10px 0 0; }
.ox-stand .seg button[aria-checked="true"] { background: var(--yellow); color: #111; }
.ox-stand .seg button:disabled, .ox-stand .seg button[aria-disabled="true"] { opacity: 0.6; }
.ox-stand small { color: var(--muted); font-size: 12px; }
.ox-chain li.plan .ox-stand-chip { justify-self: start; margin-top: 3px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--ox-edge-2); background: rgba(255, 255, 255, 0.04); color: var(--text-2); font: 600 11px var(--mono); cursor: pointer; }
.ox-chain li.plan .ox-stand-chip:hover { border-color: rgba(241, 201, 51, 0.5); color: var(--text); }
.ox-chain li.plan .ox-stand-chip.jet { border-color: rgba(111, 155, 255, 0.45); color: #b9cdff; }
/* After a diversion: the positioning flight first. */
.ox-repo { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; padding: 16px 18px; border-radius: var(--ox-r); background: linear-gradient(120deg, rgba(111, 155, 255, 0.1), transparent 70%), var(--ox-card); border: 1px solid rgba(111, 155, 255, 0.35); }
.ox-repo .ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(111, 155, 255, 0.16); color: #9db8ff; }
.ox-repo .ic svg { width: 20px; height: 20px; }
.ox-repo b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.ox-repo p { margin: 0 0 6px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.ox-repo small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
/* The Flight page's tabs: Ops, the checklist (following the flight), the performance sheets.
   A segmented control, the stages beside it (under it on a phone). */
.ox-deckbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; padding-top: 2px; scroll-margin-top: 72px; } /* clear of the sticky top bar */
.ox-deckbar .ox-phases { flex: 0 1 600px; }
.ox-ftabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 13px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--ox-edge); max-width: 100%; }
.ox-ftabs button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border: 0; border-radius: 10px; background: none; color: var(--muted);
  font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 0.15s, background 0.15s; }
.ox-ftabs button svg { flex: none; width: 16px; height: 16px; }
.ox-ftabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.ox-ftabs button[aria-selected="true"] { background: #222938; color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.28); }
.ox-ftabs button[aria-selected="true"] svg { color: var(--yellow); }
.ox-ftab-n { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); color: var(--text-2); font-size: 11px; font-weight: 600; }
.ox-ftab-n em { font-family: "Poppins", system-ui, sans-serif; font-style: normal; font-weight: 500; color: var(--muted); max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.ox-ftab-n.done { background: rgba(60, 207, 122, 0.12); color: var(--green); }
.ox-ftabs .ox-badge-n { margin-left: 2px; }
.ox-deck .ck { margin-top: 0; }
.ox-deck .ox-act-list, .ox-deck > .ox-main > section:first-child { margin-bottom: 14px; }
.ox-follow { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: rgba(111, 155, 255, 0.07); border: 1px solid rgba(111, 155, 255, 0.25); color: var(--text-2); font-size: 13px; }
.ox-follow b { color: var(--text); }
.ox-deck .ck, .ox-deck .pf { padding: 0; margin: 0; max-width: none; }
.ox-ftabs button.fresh { color: var(--text); animation: ox-tabpulse 1.6s ease-in-out infinite; }
@keyframes ox-tabpulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(241, 201, 51, 0.25); } 50% { box-shadow: inset 0 0 0 1px rgba(241, 201, 51, 0.8); background: rgba(241, 201, 51, 0.08); } }
/* The checklist of the moment, at the top of the Ops tab. */
.ox-cknow { padding: 14px 16px; }
.ox-cknow > header { margin-bottom: 10px; align-items: flex-start; }
.ox-cknow-h { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ox-cknow-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.ox-cknow-x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ox-edge); background: none; color: var(--muted); cursor: pointer; }
.ox-cknow-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.ox-cknow-x svg { width: 15px; height: 15px; }
.ox-cknow-acts { display: inline-flex; gap: 14px; margin-left: auto; }
.ox-cknow-h h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.ox-cknow-h h3 svg { width: 18px; height: 18px; color: var(--yellow); flex: none; }
.ox-cknow.done { padding-block: 12px; }
.ox-cknow.done > header { margin-bottom: 4px; }
.ox-cknow.done .ox-cknow-h h3 svg { color: var(--green); }
.ox-cknow.fresh { border-color: rgba(241, 201, 51, 0.7); animation: ox-cknow-in 2.2s ease-out 3; }
.ox-cknow.fresh .eyebrow { color: var(--yellow); }
@keyframes ox-cknow-in { 0% { box-shadow: 0 0 0 0 rgba(241, 201, 51, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(241, 201, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(241, 201, 51, 0); } }
.ox-cknow-done, .ox-cknow-next { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; color: var(--text-2); font-size: 13.5px; }

.ox-cknow-list .ck-group { margin-bottom: 10px; background: rgba(255, 255, 255, 0.02); }
.ox-cknow-list .ck-group:last-of-type { margin-bottom: 6px; }
.ox-cknow-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.ox-cknow-behind { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--ox-edge); color: var(--muted); font-size: 12.5px; }
.ox-cknow-behind b { color: var(--amber, #ffb547); font-weight: 600; }
.ck-group.now { border-color: rgba(241, 201, 51, 0.55); box-shadow: 0 0 0 1px rgba(241, 201, 51, 0.18); }
.ck-now { font-style: normal; margin-right: 8px; padding: 1px 7px; border-radius: 6px; background: var(--yellow); color: #111; letter-spacing: 0.06em; }

.ox-ofp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.ox-ofp-head .txt { flex: 1 1 320px; }
.ox-ifload { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--ox-edge); }
.ox-ifload-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ox-ifload-head > b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.ox-ifload-head > b svg { width: 16px; height: 16px; color: var(--blue); }
.ox-ifload .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.ox-ifload .chip svg { width: 13px; height: 13px; }
.ox-ifload .chip.ok { color: var(--green); background: rgba(60, 207, 122, 0.1); border: 1px solid rgba(60, 207, 122, 0.3); }
.ox-ifload .chip.warn { color: var(--amber); background: rgba(255, 181, 71, 0.1); border: 1px solid rgba(255, 181, 71, 0.35); }
.ox-ifload-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ox-ifload-tiles .t { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ox-edge); min-width: 0; }
.ox-ifload-tiles .t .k { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ox-ifload-tiles .t b { font-size: 18px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-ifload-tiles .t small { color: var(--muted); font-size: 11.5px; }
.ox-ifload-tiles .t.off { border-color: rgba(255, 181, 71, 0.5); background: rgba(255, 181, 71, 0.06); }
.ox-ifload-tiles .t.off b { color: var(--yellow-ink, #f1c933); }
.ox-ifload p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.ox-ifload > small { color: var(--muted); font-size: 12px; }
.ox-ifload > small.warn { color: var(--amber); }
.ox-cknow-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(111, 155, 255, 0.07); border: 1px solid rgba(111, 155, 255, 0.25); color: var(--text-2); font-size: 13px; }
@media (max-width: 480px) { .ox-ifload-tiles { grid-template-columns: minmax(0, 1fr); } .ox-ifload-tiles .t { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; } .ox-ifload-tiles .t small { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .ox-cknow.fresh, .ox-ftabs button.fresh { animation: none; } }
@media (max-width: 760px) { .ox-ftabs { display: flex; width: 100%; } .ox-ftabs button { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 8px; gap: 6px; } .ox-ftab-n em { display: none; } }
@media (max-width: 380px) { .ox-ftabs button > svg { display: none; } }
@media (max-width: 1100px) { .ox-ftab-n em { display: none; } }

/* The Flight page: the map as the hero, big and edge to edge, the flight's pass laid over its
   lower edge, everything else below. */
.ox-page.ox-heropage { max-width: none; padding: 0 0 70px; }
.ox-flight.heroed { display: block; }
.ox-hero { position: relative; height: clamp(400px, 64vh, 760px); background: #0b0d10; transition: height 0.35s ease; }
.ox-hero.compact { height: clamp(260px, 40vh, 440px); }
.ox-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 200px; background: linear-gradient(to bottom, rgba(18, 19, 22, 0), var(--bg)); pointer-events: none; z-index: 3; }
.ox-hero .olm-fm.ox-heromap { height: 100%; min-height: 0; border: 0; border-radius: 0; }
.ox-hero .olm-fm.ox-heromap .olm-fm-bar { top: 18px; left: max(20px, calc(50% - 600px)); right: max(20px, calc(50% - 600px)); }
/* (Mapbox's logo and attribution on the hero map: see ops-map-views.css.) */
.ox-flight-body { position: relative; z-index: 4; display: grid; gap: var(--ox-gap); max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.ox-hero-pass { margin-top: -112px; }
.ox-hero-pass .ox-strip.pass { background: linear-gradient(180deg, rgba(16, 26, 52, 0.62), rgba(12, 18, 36, 0.9)); border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
@media (max-width: 759px) {
  .ox-hero { height: clamp(330px, 56vh, 540px); }
  .ox-hero.compact { height: clamp(220px, 32vh, 300px); }
  .ox-hero .olm-fm.ox-heromap .olm-fm-bar { top: 12px; left: 12px; right: 12px; }
  .ox-hero-pass { margin-top: -84px; }
  .ox-flight-body { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .ox-hero { transition: none; } }

/* In the air: the pass's line is the progress, the live figures under the route. */
.ox-pass-route .mid.prog { gap: 8px; }
.ox-pass-route .mid .track { position: relative; width: 100%; height: 22px; display: block; }
.ox-pass-route .mid .track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(169, 184, 219, 0.3); }
.ox-pass-route .mid .track .fill { position: absolute; left: 0; top: calc(50% - 1.5px); height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(241, 201, 51, 0.35), var(--yellow)); transition: width 0.8s ease; }
.ox-pass-route .mid .track b { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: #10224d; box-shadow: 0 0 0 5px rgba(241, 201, 51, 0.16); transition: left 0.8s ease; }
.ox-pass-route .mid .track b svg { width: 14px; height: 14px; transform: rotate(45deg); color: #10224d; }
.ox-pass-live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ox-pass-live div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.06); min-width: 0; }
.ox-pass-live dt { color: #8ea0c9; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.ox-pass-live dd { margin: 3px 0 0; color: #fff; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-pass-live dd small { color: #8ea0c9; font-size: 11.5px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .ox-pass-route .mid .track .fill, .ox-pass-route .mid .track b { transition: none; } }

/* ---------- The Flight page below the hero: one calm system ----------
   The same section header everywhere (an icon chip, the title, a quiet figure on the right), one
   card style, one spacing rhythm. Colour is for status and for what waits for the captain. */
.ox-flight { --muted: #9a9ea7; } /* a touch lighter: 4.5:1 or better on every card of this page */
.ox-flight .input::placeholder { color: #8b8f97; }
.ox-flight-body { gap: 20px; padding-bottom: 8px; }
.ox-flight .ox-main { gap: 16px; }
.ox-flight .ox-grid { gap: 20px; }
.ox-flight .ox-panel { padding: 20px 22px; }

/* Section headers */
.ox-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 32px; margin: 0 0 14px; }
.ox-head h2 { flex: 1 1 auto; display: flex; align-items: center; gap: 11px; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.005em; color: var(--text); }
.ox-head h2 .ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: var(--text-2); }
.ox-head h2 .ic svg { width: 16px; height: 16px; }
.ox-head h2 .tt { min-width: 0; }
.ox-head-meta { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ox-head > .seg, .ox-head > .link-btn, .ox-head > .ox-ap { flex: none; }
.ox-ofp-again .ox-head .ic { background: rgba(60, 207, 122, 0.12); color: var(--green); }
.ox-notams.real .ox-head .ic { background: rgba(255, 181, 71, 0.12); color: var(--amber); }
.ox-day .ox-head .ic, .ox-enroute .ox-head .ic { background: rgba(111, 155, 255, 0.12); color: #a9c1ff; }
.ox-after-sum.turnaround .ox-head .ic { background: rgba(241, 201, 51, 0.12); color: var(--yellow); }
.ox-after-sum.standby .ox-head .ic { background: rgba(111, 155, 255, 0.12); color: #9db8ff; }
.ox-after-sum > p { margin: 0; }
.ox-day > .ox-head { row-gap: 2px; }
.ox-day > .ox-head h2 { white-space: nowrap; }
.ox-ofp-again { gap: 0; }
.ox-ofp-again .ox-ofp-head { margin-bottom: 14px; }
.ox-ofp-again .ox-ofp-head:last-child { margin-bottom: 0; }
.ox-ofp-again .txt { gap: 6px; }
.ox-ifload-head > h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
.ox-ifload-head > h3 svg { width: 16px; height: 16px; color: var(--blue); }
.ox-standby h2 { margin: 0 0 4px; font-size: 16px; }
.ox-fold-h { margin: 0 0 12px; font: inherit; }
.ox-fold-h .ox-fold { margin: 0; min-height: 32px; cursor: pointer; }
.ox-fold .ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: var(--text-2); }
.ox-fold .ic svg { width: 16px; height: 16px; }
.ox-fold .tt { flex: 1; font-size: 15px; font-weight: 600; }
.ox-fold > b { font-size: 17px; }

/* Your move: the title a step up from the sections, the cards below it */
.ox-move { gap: 12px; }
.ox-move > header { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.ox-move h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: 0.005em; }
.ox-count { min-width: 22px; height: 22px; padding: 0 7px; font-size: 12px; }
.ox-next { padding: 0 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ox-calm { gap: 14px; padding: 14px 16px; background: var(--ox-card); border: 1px solid var(--ox-edge); }
.ox-calm > svg { width: 18px; height: 18px; padding: 7px; background: rgba(60, 207, 122, 0.12); }
.ox-calm b { font-size: 14.5px; font-weight: 600; }
.ox-calm p { margin-top: 1px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ox-act-info, .ox-act-do { display: grid; gap: 10px; min-width: 0; }
.ox-act-do:not(:has(> :not(:empty))) { display: none; }
.ox-act h3 { font-size: 17px; font-weight: 600; }
.ox-act-text { line-height: 1.55; max-width: 72ch; }

/* What can't wait, right under the pass: the title with a beacon, then the cards; on a wide
   screen each card reads across (what it is on the left, the answer on the right). */
.ox-now > header h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.ox-now > header h2::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(241, 201, 51, 0.18); animation: ox-beacon 1.8s ease-in-out infinite; }
.ox-now.urgent > header h2::before { background: var(--red); box-shadow: 0 0 0 4px rgba(255, 93, 93, 0.2); }
@keyframes ox-beacon { 50% { box-shadow: 0 0 0 7px rgba(241, 201, 51, 0); } }
.ox-now .ox-act { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.ox-now .ox-act.urgent { background: linear-gradient(120deg, rgba(255, 93, 93, 0.08), transparent 60%), var(--ox-card-2); }
@media (min-width: 900px) {
  .ox-now .ox-act { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 32px; align-items: start; padding: 20px 24px 20px 26px; }
  .ox-now .ox-act-do { padding-left: 32px; margin-left: -1px; border-left: 1px solid var(--ox-edge); }
  .ox-now .ox-options { grid-template-columns: minmax(0, 1fr); }
  .ox-now .ox-figs + .ox-act-btns { margin-top: 4px; }
  /* The small answers as tall as the main one beside them (no ragged row). */
  .ox-now .ox-act-btns { align-items: stretch; }
  .ox-now .ox-act-btns .btn.sm { min-height: 42px; }
}

/* The checklist of the moment: its title as a section title */
.ox-cknow { padding: 16px 18px; }
.ox-cknow-h h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 600; }
.ox-cknow-h h2 svg { width: 18px; height: 18px; color: var(--yellow); flex: none; }
.ox-cknow.done .ox-cknow-h h2 svg { color: var(--green); }
.ox-cknow-x { width: 36px; height: 36px; }

/* The Performance tab: its cards and their titles as on the Ops tab (the crew Flight Deck keeps
   its own look). */
.ox-flight .ox-deck .card { border-radius: var(--ox-r); background: var(--ox-card); border-color: var(--ox-edge); padding: 20px 22px; }
.ox-flight .ox-deck .card-head h2 { text-transform: none; letter-spacing: 0.005em; font-size: 15px; font-weight: 600; color: var(--text); }

/* Inner surfaces: one quiet style */
.ox-flight :is(.ox-figs div, .ox-ifload-tiles .t) { border-radius: 11px; }
.ox-flight .ox-bar { height: 5px; }
.ox-flight .ox-chain li { border-radius: 12px; }

/* Alongside: the Ops chat, the briefing, the load sheet */
.ox-flight .ox-side { top: 76px; gap: 12px; padding: 12px; border-radius: var(--ox-r); background: var(--ox-card); border-color: var(--ox-edge); }
.ox-side .ox-tabs { gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--ox-edge); }
.ox-side .ox-tabs button { height: 34px; border-radius: 9px; font-size: 13px; cursor: pointer; transition: color 0.15s, background 0.15s; }
.ox-side .ox-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.ox-side .ox-tabs button[aria-selected="true"] { background: #222938; color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 10px rgba(0, 0, 0, 0.25); }
.ox-side .ox-tabs button[aria-selected="true"] svg { color: var(--yellow); }
.ox-side-panel { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 2px 2px 4px; }
.ox-flight .ox-feed { gap: 8px; max-height: min(60vh, 600px); padding-top: 10px; border-radius: 10px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.ox-flight .ox-msg { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ox-edge); }
.ox-flight .ox-msg b { font-weight: 600; }
.ox-flight .ox-msg.event { background: rgba(255, 181, 71, 0.06); border-color: rgba(255, 181, 71, 0.2); }
.ox-flight .ox-msg.release { background: rgba(60, 207, 122, 0.06); border-color: rgba(60, 207, 122, 0.2); }
.ox-flight .ox-msg.me { background: rgba(241, 201, 51, 0.09); border-color: rgba(241, 201, 51, 0.22); }
.ox-flight .ox-quick button { height: 32px; padding: 0 12px; cursor: pointer; }
.ox-flight .ox-input .btn.sm { width: 46px; height: 46px; padding: 0; }
.ox-flight .ox-brief li { gap: 11px; }
.ox-flight .ox-sheet div { padding: 10px 0; }
.ox-sheet .ox-over { color: var(--red); font-weight: 700; }
.ox-flight .pf-tile .v.dim { color: var(--muted); } /* the "–" of a figure still to come: readable */

/* Focus: always visible from the keyboard, never shown for a tap or a click */
.ox-app :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.ox-app :is(.ox-ftabs, .ox-tabs, .seg) button:focus-visible, .ox-app .ck-item:focus-visible, .ox-app .ox-stay-h button:focus-visible,
.ox-app .ox-notams li > button:focus-visible, .ox-app .ox-feed:focus-visible { outline-offset: -2px; }
.ox-app :is(button.ox-otp, .ox-quick button, .ox-chip-btn, .ox-cknow-x, .ox-cc):focus-visible { border-radius: 99px; }
.ox-app .btn:focus-visible { border-radius: 12px; }
.ox-app .btn.sm:focus-visible, .ox-app :is(.ox-ftabs, .ox-tabs) button:focus-visible { border-radius: 10px; }
.ox-app :is(.ox-options button, .ox-routes button, .ox-after-opts .opt, .ox-stay-h button):focus-visible { border-radius: 13px; }

/* Text for screen readers only */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* Targets: 32 px at least everywhere on the page, 44 px for the main actions on a phone */
.ox-flight .link-btn { min-height: 32px; }
.ox-flight .ox-chain li.plan .x { width: 30px; height: 30px; right: 4px; }
.ox-flight .ox-chain li.plan .ox-stand-chip { min-height: 26px; }
@media (max-width: 760px) {
  .ox-flight .btn { min-height: 44px; }
  .ox-flight .btn.sm { min-height: 40px; }
  .ox-flight .seg button { min-height: 36px; }
  .ox-flight .link-btn { min-height: 36px; }
  .ox-flight .ox-quick button { height: 36px; }
  .ox-flight .ox-chip-btn { height: 36px; }
  .ox-flight .ox-side .ox-tabs button { height: 42px; }
  .ox-flight button.ox-otp.why { height: 36px; }
  .ox-cknow-x { width: 40px; height: 40px; }
}

/* A phone: the stages above the tabs, tighter rhythm, the on-time badge kept inside the pass */
@media (max-width: 760px) {
  .ox-flight-body { gap: 14px; }
  .ox-flight .ox-grid { gap: 14px; }
  .ox-flight .ox-main { gap: 14px; }
  .ox-flight .ox-panel { padding: 16px; }
  .ox-deckbar { gap: 12px; scroll-margin-top: 64px; }
  .ox-deckbar .ox-phases { order: -1; flex: 1 1 100%; padding: 0 2px; }
  .ox-flight .ox-deck .card { padding: 16px; }
  .ox-head { margin-bottom: 12px; }
  .ox-move h2 { font-size: 16px; }
  .ox-act h3 { font-size: 16px; }
}
@media (max-width: 440px) {
  .ox-otp small { display: none; }
  .ox-strip-tags .ox-otp { max-width: 100%; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .ox-now > header h2::before { animation: none; }
  .ox-stay-h .more svg, .ox-ftabs button, .ox-side .ox-tabs button { transition: none; }
}

/* The pass's live figures: short labels on a phone, all four on one line */
.ox-pass-live dt .sh { display: none; }
.ox-pass-live dd small { color: #8ea0c9; font-size: 0.72em; font-weight: 500; }
.ox-pass-live dd small.since { font-size: 11.5px; }
@media (max-width: 640px) {
  .ox-pass-live { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 10px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .ox-pass-live div { padding: 0 6px; border: 0; border-radius: 0; background: none; }
  .ox-pass-live div + div { border-left: 1px solid rgba(255, 255, 255, 0.07); }
  .ox-pass-live div:first-child { padding-left: 0; }
  /* The units go up into the short labels. The long labels and the units stay for screen readers
     ("Altitude FL240", "Ground speed 410 kt"): the short labels are hidden from them. */
  .ox-pass-live dt .lg, .ox-pass-live dd small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ox-pass-live dt .sh { display: inline; }
  .ox-pass-live dd { font-size: 15px; }
  .ox-pass-live dt .sh small { font-size: inherit; font-weight: 500; color: inherit; }
  .ox-pass-route .mid .dur .w { display: none; }
}
/* A narrow phone in flight: the flight number and the aircraft share one line, so the live figures
   (and what can't wait) stay on the first screen. The live tag goes to screen readers only: the
   map's chips already show the flight is live. */
@media (max-width: 400px) {
  .ox-strip.pass.flying .ox-pass-top { flex-wrap: nowrap; }
  .ox-strip.pass.flying .ox-pass-top .ox-live { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 560px) {
  .ox-head-meta { flex: 1 1 100%; padding-left: 43px; margin-top: -6px; }
}

/* What the aircraft is doing now, over the map just above the pass. */
.ox-livestat { position: absolute; z-index: 4; left: max(20px, calc(50% - 600px)); bottom: calc(112px + 14px); display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100% - 40px));
  padding: 10px 16px 10px 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(16, 26, 52, 0.72), rgba(12, 18, 36, 0.9)); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); }
.ox-livestat > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #9aa1ad; }
.ox-livestat.live > i { background: var(--yellow); box-shadow: 0 0 0 0 rgba(241, 201, 51, 0.6); animation: ox-livestat-pulse 1.8s ease-out infinite; }
.ox-livestat.go > i { background: var(--green); }
.ox-livestat.warn > i { background: var(--amber); }
.ox-livestat div { display: grid; gap: 1px; min-width: 0; }
.ox-livestat b { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.01em; }
.ox-livestat small { font-family: var(--mono); font-size: 12.5px; color: #c9d4ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes ox-livestat-pulse { 0% { box-shadow: 0 0 0 0 rgba(241, 201, 51, 0.55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(241, 201, 51, 0); } }
.ox-hero.compact .ox-livestat { bottom: calc(112px + 10px); }
@media (max-width: 759px) { .ox-livestat { left: 12px; bottom: calc(84px + 10px); padding: 8px 12px; max-width: calc(100% - 24px); } .ox-livestat b { font-size: 14.5px; } }
@media (prefers-reduced-motion: reduce) { .ox-livestat.live > i { animation: none; } }

/* A sector's PIREP, said plainly (filed by itself, filed, not filed and why, to file). */
.ox-pirepline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; color: var(--text-2); }
.ox-pirepline > svg { width: 17px; height: 17px; flex: none; }
.ox-pirepline > span { flex: 1 1 220px; min-width: 0; }
.ox-pirepline b { color: var(--text); }
.ox-pirepline.ok { background: rgba(60, 207, 122, 0.08); border: 1px solid rgba(60, 207, 122, 0.3); }
.ox-pirepline.ok > svg { color: var(--green); }
.ox-pirepline.todo { background: rgba(241, 201, 51, 0.07); border: 1px solid rgba(241, 201, 51, 0.35); }
.ox-pirepline.todo > svg { color: var(--yellow); }
.ox-pirepline.warn { background: rgba(255, 181, 71, 0.08); border: 1px solid rgba(255, 181, 71, 0.4); }
.ox-pirepline.warn > svg { color: var(--amber); }
/* The handover between two sectors. */
.ox-handover { display: grid; gap: 14px; border-color: rgba(60, 207, 122, 0.25); }
.ox-handover-done h3 { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 18px; }
.ox-handover-done h3 > svg { width: 18px; height: 18px; color: var(--green); }
.ox-handover-done h3 .mono { color: var(--text-2); font-size: 15px; }
.ox-handover-done dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ox-handover-done dl div { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); min-width: 0; }
.ox-handover-done dt { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ox-handover-done dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-handover-done dd.pos { color: var(--green); } .ox-handover-done dd.neg { color: var(--red); }
.ox-handover-next { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ox-edge); color: var(--text-2); font-size: 14px; }
.ox-handover-next > svg { width: 18px; height: 18px; color: var(--yellow); flex: none; }
.ox-handover-next b { color: var(--text); }
@media (max-width: 640px) { .ox-handover-done dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Staff: the month's Mapbox loads, in the account menu. */
.ox-maploads { display: grid; gap: 1px; margin: 4px 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 12px; color: var(--muted); }
.ox-maploads b { color: var(--text); font-size: 14px; }

/* Before Junior First Officer: the free trials, then what opens Ops Control. */
.ox-trial { margin: 0; }
.ox-locked .ox-panel { max-width: 640px; margin: 24px auto; display: grid; gap: 10px; }
.ox-locked h1 { margin: 0; font-size: 26px; }
.ox-locked p { margin: 0; color: var(--text-2); line-height: 1.55; }
.ox-locked-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ox-locked-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(241, 201, 51, 0.45), var(--yellow)); }

/* The documentation link on Today. */
.ox-docs-link { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--ox-edge-2); background: rgba(255, 255, 255, 0.03); color: var(--text); text-decoration: none; }
.ox-docs-link:hover { border-color: rgba(241, 201, 51, 0.5); color: var(--text); }
.ox-docs-link .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(241, 201, 51, 0.12); color: var(--yellow); flex: none; }
.ox-docs-link .ic svg { width: 18px; height: 18px; }
.ox-docs-link > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ox-docs-link small { color: var(--muted); font-size: 13px; }
.ox-docs-link > svg { width: 16px; height: 16px; color: var(--muted); flex: none; }

/* PIREP detail (Logbook drawer): wide panel, hero, key figures, tabs. */
.drawer.wide { width: min(860px, 100vw); }
.pd-hero { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.pd-route { display: flex; flex-direction: column; gap: 2px; }
/* Codes are always 4 letters (same width): the line between them is centred. */
.pd-r1 { display: flex; align-items: center; gap: 14px; }
.pd-r1 > b { font-size: 26px; letter-spacing: 0.02em; line-height: 1.1; flex: none; }
.pd-r1 .pd-track { flex: 1; }
.pd-r2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: baseline; }
.pd-route .city { min-width: 0; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-route .city.r { text-align: right; }
.pd-meta { color: var(--text-2); font-size: 12px; }
.pd-track { display: flex; align-items: center; gap: 10px; color: var(--yellow); }
.pd-track span { flex: 1; height: 1.5px; background: linear-gradient(90deg, rgba(241, 201, 51, 0.15), rgba(241, 201, 51, 0.7)); border-radius: 2px; }
.pd-track span:last-of-type { background: linear-gradient(90deg, rgba(241, 201, 51, 0.7), rgba(241, 201, 51, 0.15)); }
.pd-track svg { width: 18px; height: 18px; transform: rotate(45deg); flex: none; }
.pd-track .dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--yellow); flex: none; }
.pd-track .dot.to { background: var(--yellow); }
.pd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-chips .chip svg { width: 13px; height: 13px; }
.pd-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.pd-tiles > div { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.pd-tiles small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pd-tiles b { display: block; margin-top: 3px; font-family: var(--mono); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-tabs { margin-bottom: 14px; flex-wrap: wrap; }
.pd-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.pd-small { font-size: 12.5px; margin: 4px 0 10px; }
.pd-legend { display: flex; align-items: center; gap: 3px; margin: -4px 0 12px; font-size: 11.5px; color: var(--muted); }
.pd-legend > span:first-child { margin-right: 6px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
.pd-legend i { width: 22px; height: 6px; border-radius: 3px; }
.pd-legend > span:last-child { margin-left: 8px; }
.pd-countries { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pd-countries > div { display: grid; grid-template-columns: 22px 150px 1fr 70px; align-items: center; gap: 10px; font-size: 13px; }
.pd-countries i { height: 6px; border-radius: 3px; background: rgba(241, 201, 51, 0.6); }
.pd-countries .sea i { background: rgba(95, 155, 255, 0.5); }
.pd-countries b { text-align: right; font-size: 12.5px; }
.pd-sea { color: #8fb6ff; text-align: center; }
.pd-mult { margin-top: 12px; }
.pd-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.pd-step { display: inline-flex; align-items: center; gap: 6px; }
.pd-step small { color: var(--muted); font-size: 11.5px; }
.pd-bands { display: flex; flex-direction: column; gap: 6px; }
.pd-bands > div { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: 10px; font-size: 12.5px; }
.pd-bands i { display: block; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.pd-bands em { display: block; height: 100%; border-radius: 4px; }
.pd-bands b { text-align: right; }
@media (max-width: 640px) {
  .pd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-r1 > b { font-size: 21px; }
  .pd-r1 { gap: 10px; }
  .pd-countries > div { grid-template-columns: 22px 110px 1fr 64px; }
}

/* Tour page (Tours.jsx): hero with the join / progress panel, rules, richer itinerary. */
.tr-hero-x { align-items: stretch; padding: 24px; gap: 24px; }
.tr-hero-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tr-hero-x h1 { margin: 2px 0 0; font-size: 32px; }
.tr-hero-x .chip svg { width: 13px; height: 13px; }
.tr-lead { font-size: 14.5px; line-height: 1.55; }
.tr-route { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.tr-route span { display: inline-flex; align-items: center; gap: 6px; }
.tr-route i { font-style: normal; color: var(--yellow); opacity: 0.8; }
.tr-window { margin-top: 6px; }
.tr-window-bar { height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.tr-window-bar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(241, 201, 51, 0.5), var(--yellow)); border-radius: inherit; }
.tr-window-dates { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--muted); font-size: 11.5px; }
.tr-panel { align-content: center; justify-items: stretch; padding: 18px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--line); }
.tr-ring { --p: 0; justify-self: center; width: 132px; height: 132px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--panel-2) 78%, transparent 79% 100%), conic-gradient(var(--yellow) calc(var(--p) * 1%), var(--line) 0); }
.tr-ring b { font-family: var(--mono); font-size: 28px; color: var(--yellow-ink); line-height: 1; }
.tr-ring small { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.tr-panel-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.tr-panel-facts span { display: flex; flex-direction: column; }
.tr-panel-facts small { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tr-panel-facts b { font-size: 15px; }
.tr-book { justify-content: flex-start; gap: 10px; padding: 12px 14px; text-align: left; }
.tr-book > span { display: flex; flex-direction: column; line-height: 1.2; }
.tr-book small { font-size: 11.5px; font-weight: 600; opacity: 0.8; }
.tr-leave { justify-self: center; font-size: 12.5px; }
.tr-done { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: var(--radius-sm); background: rgba(60, 207, 122, 0.12); color: var(--green); font-weight: 700; }
.tr-done svg { width: 18px; height: 18px; }
.tr-join-title { font-size: 17px; font-weight: 800; }
.tr-kpis { margin-top: 14px; }
.tr-flags-inline { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.tr-map { margin-top: 14px; }
.tr-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tr-rule { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.tr-rule .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--yellow-soft); color: var(--yellow-ink); }
.tr-rule .ic svg { width: 18px; height: 18px; }
.tr-rule b { font-size: 14px; }
.tr-rule p { margin: 0; color: var(--text-2); font-size: 12.8px; line-height: 1.5; }
.tr-grid2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.tr-legs-x li { align-items: flex-start; padding: 14px 18px; }
.tr-legs-x li.next { background: linear-gradient(90deg, rgba(241, 201, 51, 0.08), transparent 70%); }
.tr-legs-x li.done .tr-n { background: rgba(60, 207, 122, 0.15); color: var(--green); }
.tr-legs-x .tr-leg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tr-leg-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-leg-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); }
.tr-rank { width: 18px; color: var(--muted); font-size: 12px; text-align: right; }
@media (max-width: 1180px) { .tr-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .tr-hero-x { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .tr-rules { grid-template-columns: minmax(0, 1fr); } .tr-hero-x h1 { font-size: 25px; } }