@font-face {
  font-family: "Departure Mono";
  src: url("/static/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-display: swap;
}

/* Paleta: bursztyn tablicy odlotów na czarnym tle */
:root {
  --void: #000000;
  --amber: #ffb23f;
  --amber-dim: #a8742a;
  --ash: #5e584e;
  --rule: #2a2620;
  --paper: #f6eedc;
  --alarm: #ff6b4a;
  --fs: 16.5px;     /* Departure Mono rysowany jest na siatce 11 px: 11 / 16.5 / 22 / 33 */
  --fs-s: 11px;
  --fs-l: 22px;
  --fs-xl: 33px;
  --pad: 18px;
}

* { box-sizing: border-box; }

/* ciemne paski przewijania (Chrome, Edge, Firefox) */
html { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: #3a352d transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; background: var(--void); }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: #2e2a24; border: 2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--amber-dim); }
::-webkit-scrollbar-corner { background: var(--void); }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--void);
  color: var(--amber);
  font-family: "Departure Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--fs);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: grid;
  grid-template-rows: minmax(260px, 55vh) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

/* ---------- globus ---------- */
.sky { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
#globe { position: absolute; inset: 0; }
#globe canvas { display: block; }

.hud { position: absolute; z-index: 2; font-size: var(--fs-s); }
.hud-tl { top: 14px; left: var(--pad); pointer-events: none; color: var(--amber-dim); display: flex; align-items: center; gap: 1.5ch; }
.hud-tl .back { pointer-events: auto; font-size: var(--fs); background: var(--amber); color: var(--void); padding: 2px 8px; }
.hud-tl .back::before, .hud-tl .back::after { content: none; }
.hud-tl .back[hidden] { display: none; }
.hud-br { right: calc(min(460px, 36%) + 2 * var(--pad)); bottom: 12px; color: var(--ash); pointer-events: none; text-align: right; line-height: 1.7; }

/* dymek kraju */
.tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  font-size: var(--fs-s);
  line-height: 1.6;
  color: var(--amber);
  background: rgba(0, 0, 0, 0.88);
  border-left: 2px solid var(--amber);
  padding: 4px 8px;
  white-space: nowrap;
}
.tip b { color: var(--paper); font-weight: 400; }

/* dymki globusa (globe.gl) w stylu terminala */
.float-tooltip-kap {
  font: var(--fs-s) / 1.6 "Departure Mono", ui-monospace, monospace !important;
  color: var(--amber) !important;
  background: rgba(0, 0, 0, 0.88) !important;
  border-left: 2px solid var(--amber);
  border-radius: 0 !important;
  padding: 4px 8px !important;
}
.float-tooltip-kap b { color: var(--paper); font-weight: 400; }

.card {
  left: var(--pad);
  bottom: 16px;
  width: min(430px, calc(100% - 2 * var(--pad)));
  max-height: calc(100% - 90px);
  overflow: auto;
  padding: 12px 16px 14px;
  background: rgba(0, 0, 0, 0.88);
  border-left: 2px solid var(--amber);
  line-height: 1.6;
}
.card h2 { margin: 0; font-weight: 400; font-size: var(--fs-l); color: var(--paper); line-height: 1.2; padding-right: 2.5ch; }
.card .x, .chat .x {
  position: sticky;
  top: 0;
  float: right;
  margin: -4px -6px 0 0;
  font: inherit;
  font-size: var(--fs-l);
  line-height: 1;
  color: var(--amber-dim);
  background: rgba(0, 0, 0, 0.6);
  border: 0;
  padding: 2px 6px;
  cursor: pointer;
}
.card .x:hover, .chat .x:hover { color: var(--paper); }
.card .x:focus-visible, .chat .x:focus-visible { outline: 1px solid var(--amber); }
/* czat z agentem (prawa strona globusu) */
.chat {
  right: var(--pad);
  top: 12px;
  bottom: 12px;
  width: min(460px, 36%);
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.82);
  border-left: 2px solid var(--amber);
  font-size: var(--fs-s);
  line-height: 1.6;
}
.chat-head { display: flex; align-items: center; gap: 1ch; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--rule); }
.chat-head .title { flex: 1; color: var(--paper); font-size: var(--fs-l); line-height: 1.2; }
.chat-head .x { position: static; float: none; margin: 0; }
.chat .msgs { flex: 1; overflow: auto; padding: 8px 14px; }
.chat .m { margin: 0 0 12px; white-space: pre-wrap; }
.chat .m .who { display: block; color: var(--ash); }
.chat .m.user { color: var(--amber); }
.chat .m.agent { color: var(--paper); }
.chat .m.err { color: var(--alarm); }
.chat .m.hint { color: var(--amber-dim); white-space: normal; }
.chat .m.hint i { font-style: normal; color: var(--paper); }
.chat .m .meta { display: flex; flex-wrap: wrap; gap: 4px 1.5ch; margin-top: 4px; white-space: normal; }
.chat .m .step { color: var(--amber-dim); }
.chat .pending .step:last-child { color: var(--amber); }
.chat .keybox { white-space: normal; color: var(--amber); border-top: 1px solid var(--rule); padding-top: 8px; }
.chat .keybox b { color: var(--paper); font-weight: 400; }
.chat .keybox .row { display: flex; gap: 1ch; margin-top: 6px; }
.chat .keybox input, .chat-in input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--paper);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  outline: 0;
  caret-color: var(--amber);
}
.chat .keybox input:focus, .chat-in input:focus { border-bottom-color: var(--amber-dim); }
.chat-in { display: flex; align-items: center; gap: 1ch; padding: 8px 10px 10px 14px; border-top: 1px solid var(--rule); font-size: var(--fs); }
.chat-in input::placeholder { color: var(--ash); }
.chat.min { bottom: auto; }
.chat.min .msgs, .chat.min .chat-in, .chat.min [data-chat="new"] { display: none; }
.chat .tog { font-size: var(--fs-s); }
.chat-in .tog { font-size: var(--fs); }
.card .sub { color: var(--amber-dim); margin-bottom: 8px; }
.card .big { font-size: var(--fs-xl); color: var(--paper); line-height: 1.1; margin: 4px 0 6px; }
.card .row { display: flex; gap: 2.5ch; flex-wrap: wrap; }
.card .why { margin: 8px 0 0; padding: 0; list-style: none; }
.card .why li { padding-left: 2ch; }
.card h3 { font-weight: 400; font-size: var(--fs-s); color: var(--ash); margin: 10px 0 2px; }
.card .alt { display: grid; grid-template-columns: auto auto 1fr; gap: 0 2ch; }
.card .alt .now { color: var(--paper); }
.card .actions { margin-top: 10px; display: flex; gap: 2.5ch; flex-wrap: wrap; }
.card a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--amber-dim); }
.card a:hover { border-bottom-color: var(--paper); }
.card a:focus-visible { outline: 1px solid var(--amber); outline-offset: 3px; }
.card .flag { color: var(--alarm); }
.card .budget .ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0.8ch; margin: 2px 0 6px; font-size: var(--fs-s); }
.card .budget .ctl input { width: 4ch; font: inherit; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid var(--rule); text-align: right; }
.card .budget .bgrid { display: grid; grid-template-columns: auto auto 1fr; gap: 0 2ch; }
.card .budget .num { text-align: right; color: var(--paper); }
.card .budget .tot { color: var(--paper); border-top: 1px solid var(--rule); padding-top: 2px; margin-top: 2px; }
.card .budget .bgrid .dim:last-child { border-top: 1px solid var(--rule); padding-top: 2px; margin-top: 2px; }
.card .spark { display: block; width: 100%; height: 54px; margin: 4px 0 2px; }
.card .spark polyline { fill: none; stroke: var(--amber); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.card .spark .now { stroke: var(--paper); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

/* Etykiety lotnisk na globusie (CSS2D) */
.tag {
  pointer-events: none;
  font-family: "Departure Mono", ui-monospace, monospace;
  font-size: var(--fs-s);
  color: var(--void);
  background: var(--amber);
  padding: 1px 5px;
  transform: translate(8px, -50%);
  white-space: nowrap;
}
.tag span { margin-left: 1ch; }
.tag.dest { background: var(--paper); }

/* ---------- terminal ---------- */
.term {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  min-height: 0;
  padding: 8px var(--pad) 0;
}
.status {
  font-size: var(--fs-s);
  color: var(--amber-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status .demo { color: var(--paper); }
.status .bad { color: var(--alarm); }

.prompt {
  display: flex;
  gap: 1ch;
  align-items: center;
  padding: 6px 0 5px;
  border-bottom: 1px solid var(--rule);
}
.prompt:focus-within { border-bottom-color: var(--amber-dim); }
.prompt input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--paper);
  font: inherit;
  caret-color: var(--amber);
}
.prompt input::placeholder { color: var(--ash); }

/* pasek filtrów */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 3ch;
  padding: 8px 0 4px;
  font-size: var(--fs);
  line-height: 1.5;
  color: var(--amber-dim);
}
.fg { display: flex; align-items: center; gap: 0.4ch; white-space: nowrap; }
.fl { color: var(--ash); margin-right: 0.6ch; }
.tog {
  font: inherit;
  color: var(--amber-dim);
  background: none;
  border: 0;
  padding: 0 0.6ch;
  cursor: pointer;
}
.tog::before { content: "["; color: var(--ash); }
.tog::after { content: "]"; color: var(--ash); }
.tog:hover { color: var(--paper); }
.tog[aria-pressed="true"] { background: var(--amber); color: var(--void); }
.tog[aria-pressed="true"]::before, .tog[aria-pressed="true"]::after { color: var(--void); }
.tog.plain { color: var(--ash); }
.tog:focus-visible, .filters input:focus-visible, .filters select:focus-visible { outline: 1px solid var(--amber); outline-offset: 1px; }
.filters input, .filters select {
  font: inherit;
  color: var(--paper);
  background: var(--void);
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0 0.3ch;
}
.filters input { width: auto; text-align: right; }
.filters select { max-width: 28ch; }
.fg.pref { color: var(--ash); }
.fg.pref .fl { margin-left: 0.6ch; }
.filters select option { background: #0d0c0a; color: var(--paper); }

.out {
  font-size: var(--fs-s);
  color: var(--amber-dim);
  white-space: pre-wrap;
  padding: 5px 0 3px;
  min-height: 2.2em;
  max-height: 5em;
  overflow: auto;
}
.out .err { color: var(--alarm); }
.out .ok { color: var(--paper); }

.board-wrap { overflow: auto; min-height: 0; padding-bottom: 12px; }
.board { border-collapse: collapse; width: 100%; white-space: nowrap; }
.board th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--void);
  color: var(--ash);
  font-weight: 400;
  font-size: var(--fs-s);
  text-align: left;
  padding: 6px 1.5ch 5px 0;
  border-bottom: 1px solid var(--rule);
}
.board td { padding: 2px 1.5ch 2px 0; }
.board .num { text-align: right; }
.board th[data-sort] { cursor: pointer; user-select: none; }
.board th[data-sort]:hover, .board th.sorted { color: var(--amber); }
.board th .arr { display: inline-block; min-width: 1ch; margin-left: 0.3ch; }
.board tbody tr { cursor: pointer; }
.board tbody tr:hover td { color: var(--paper); }
.board tbody tr.sel td,
.board tbody tr.sel td * { background: var(--amber); color: var(--void); }
.board td:first-child, .board th:first-child { padding-left: 1ch; }
.price { color: var(--paper); }
.board .city { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.dim { color: var(--ash); }
.meter {
  display: inline-block;
  position: relative;
  width: 8ch;
  height: 0.6em;
  vertical-align: 0.05em;
  margin-right: 0.6ch;
  background: var(--rule);
}
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--amber); }
.meter.hi i { background: var(--paper); }
.meter.lo i { background: var(--ash); }
.board tbody tr.sel .meter { background: rgba(0, 0, 0, 0.22); }
.board tbody tr.sel .meter i { background: var(--void); }
.empty { color: var(--amber-dim); font-size: var(--fs-s); margin: 14px 0; }

@media (max-width: 760px) {
  :root { --fs: 13.75px; --fs-l: 22px; --fs-xl: 27.5px; --pad: 12px; }
  .app { grid-template-rows: minmax(220px, 46vh) minmax(0, 1fr); }
  .hide-s, .hud-br { display: none; }
  .board .city { max-width: 11ch; }
  .board td, .board th { padding-right: 1ch; }
  .meter { width: 5ch; }
  /* na telefonie karta jest skrótem, żeby nie zasłaniała globusu */
  .card { bottom: 10px; padding: 8px 12px 10px; max-height: 48%; }
  .card .why, .card h3, .card .alt, .card .note, .card .row.dim, .card .spark { display: none; }
  .chat { left: var(--pad); width: auto; top: 8px; bottom: 8px; }
  .chat.min { left: auto; }
  .filters { max-height: 9em; overflow: auto; }
  .card .big { font-size: var(--fs-l); margin: 2px 0; }
}

/* ekran logowania (tylko na serwerze z ADMIN_TOKEN) */
.login { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--void); }
.login form { display: grid; gap: 10px; width: min(380px, 86vw); }
.login .ttl { font-size: var(--fs-xl); color: var(--paper); line-height: 1.1; }
.login label { color: var(--ash); font-size: var(--fs-s); }
.login input {
  font: inherit; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid var(--amber-dim);
  padding: 4px 0; outline: 0; caret-color: var(--amber);
}
.login .tog { justify-self: start; font-size: var(--fs); }
.login .msg { color: var(--alarm); font-size: var(--fs-s); min-height: 1.6em; }
.login[hidden] { display: none; }

/* gotowe pytania nad polem czatu */
.chat .chips { display: flex; flex-wrap: wrap; gap: 4px 1ch; padding: 8px 14px 0; border-top: 1px solid var(--rule); }
.chat.min .chips { display: none; }
.chat-in { border-top: 0; }

/* noclegi w karcie trasy */
.card .stays .hl { display: grid; gap: 2px; margin: 4px 0; }
.card .stays .hrow {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0 1.5ch; text-align: left;
  font: inherit; font-size: var(--fs-s); color: var(--amber); background: transparent; border: 0;
  border-left: 2px solid transparent; padding: 3px 6px; cursor: pointer;
}
.card .stays .hrow .dim { grid-column: 1 / -1; }
.card .stays .hrow .hn { color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .stays .hrow:hover { background: rgba(255, 178, 63, 0.08); }
.card .stays .hrow.on { border-left-color: var(--amber); background: rgba(255, 178, 63, 0.14); }
.card .stays input { width: 22ch; font: inherit; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid var(--rule); }