/* All rules are scoped to .flight-analyzer, so that the page can be embedded in an existing site
   without changing the style of the host page, and the host styles do not change the tool. */
.flight-analyzer {
  --bg: #f6f7f9; --card: #ffffff; --text: #1d2330; --muted: #5d6677; --line: #dfe3ea;
  --accent: #1f6feb; --accent-soft: #e6efff; --warn: #b4540a; --track: #7a8499;
  --land: #d1242f; --turn: #00a6c8; --report: #1a7f37; --hover: #ffec6e;
}

[data-color-mode=dark] {
    .flight-analyzer {
    --bg: #12151b; --card: #1a1f28; --text: #e6e9ef; --muted: #98a1b3; --line: #2b3240;
    --accent: #5b9bff; --accent-soft: #1d2a42; --warn: #e3924a; --track: #7f8aa0;
    --land: #ff6b73; --turn: #3fd0ee; --report: #56c271; --hover: #6b5a00;
  }
}

.flight-analyzer, .flight-analyzer * { box-sizing: border-box; }
.flight-analyzer { max-width: 1100px; margin: 0 auto; padding: 16px 8px 16px;
  background: var(--bg); color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.flight-analyzer h1 { font-size: 1.5rem; margin: 0 0 4px; }
.flight-analyzer h2 { font-size: 1.15rem; margin: 0 0 12px; }
.flight-analyzer .sub { color: var(--muted); margin: 0 0 20px; }
.flight-analyzer .card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; margin-bottom: 16px; }
.flight-analyzer #drop { display: block; width: 100%; border: 2px dashed var(--line); border-radius: 10px; padding: 28px 16px; text-align: center;
  cursor: pointer; background: var(--card); transition: border-color .15s, background .15s; }
.flight-analyzer #drop.over, .flight-analyzer #drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.flight-analyzer #drop strong { color: var(--accent); }
.flight-analyzer #file { display: none; }
.flight-analyzer .params { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-top: 12px; }
.flight-analyzer .params label { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); gap: 4px; }
.flight-analyzer .params input[type=number] { width: 110px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.flight-analyzer .params .check { flex-direction: row; align-items: center; gap: 6px; }
.flight-analyzer .table-wrap { overflow-x: auto; }
.flight-analyzer table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.flight-analyzer th, .flight-analyzer td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.flight-analyzer th { color: var(--muted); font-weight: 600; font-size: .8rem; }
.flight-analyzer td.n, .flight-analyzer th.n { text-align: right; font-variant-numeric: tabular-nums; }
.flight-analyzer ul.summary { margin: 0 0 12px; padding-left: 20px; }
.flight-analyzer ul.summary li { margin-bottom: 6px; }
.flight-analyzer .note { color: var(--muted); font-size: .85rem; }
.flight-analyzer .error { color: var(--warn); font-weight: 600; }
.flight-analyzer .charts { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .flight-analyzer .charts { grid-template-columns: 1fr 1fr; } }
.flight-analyzer .charts.wide { grid-template-columns: 1fr; }
.flight-analyzer svg { width: 100%; height: auto; display: block; }
.flight-analyzer .legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--muted); margin-top: 8px; }
.flight-analyzer .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.flight-analyzer .hidden { display: none; }
.flight-analyzer tr[data-turn]:hover, .flight-analyzer tr[data-turn].hl { background: var(--hover); }
.flight-analyzer .halo { opacity: 0; pointer-events: none; }
.flight-analyzer .halo.hl { opacity: 1; }
.flight-analyzer .turn-mark { cursor: pointer; }
.flight-analyzer .mapbox { position: relative; }
.flight-analyzer #mapsvg { cursor: grab; touch-action: none; user-select: none; }
.flight-analyzer #mapsvg.dragging { cursor: grabbing; }
.flight-analyzer .zoombtns { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.flight-analyzer .zoombtns button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--text); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.flight-analyzer .zoombtns button:hover { border-color: var(--accent); color: var(--accent); }
.flight-analyzer summary { cursor: pointer; }
.flight-analyzer summary h2 { display: inline; margin: 0; }