/* Shared shell for all icecharts pages. */
:root {
  --bg: #0b121a;
  --panel: #0f1720;
  --panel-2: #16212d;
  --line: #2b3947;
  --fg: #e8eef4;
  --muted: #97a6b6;
  --accent: #2b7de9;
  --accent-2: #ffb000;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--fg); font-size: 14px;
}
a { color: var(--accent); }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 8px 14px; position: relative; z-index: 1200;
}
.nav .brand { font-weight: 650; margin-right: 12px; white-space: nowrap; flex: 0 0 auto; }
.nav .brand small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.nav a {
  color: var(--fg); text-decoration: none; padding: 6px 11px;
  border-radius: 7px; font-size: 13px; opacity: .8;
}
.nav a:hover { background: var(--panel-2); opacity: 1; }
.nav a.active { background: var(--accent); color: #fff; opacity: 1; }
/* Middle links scroll horizontally on narrow windows instead of wrapping the whole bar --
   wrapping used to push the sign-out/language cluster onto a second row where it read as
   "missing". This keeps brand + sign-out pinned on one row no matter the window width. */
.nav .nav-links {
  display: flex; gap: 4px; overflow-x: auto; flex: 1 1 auto; min-width: 0;
  scrollbar-width: none;
}
.nav .nav-links::-webkit-scrollbar { display: none; }
.nav .spacer { display: none; }
.nav .stamp { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ── layout ──────────────────────────────────────────────────────────── */
.page { padding: 16px 18px 40px; max-width: 1500px; margin: 0 auto; }
.page h1 { font-size: 19px; margin: 4px 0 2px; }
.page .sub { color: var(--muted); margin-bottom: 18px; font-size: 13px; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
}
.card h2 { font-size: 15px; margin: 0 0 10px; }

/* ── controls ────────────────────────────────────────────────────────── */
label.field { display: block; font-size: 12px; color: var(--muted); margin: 0 0 4px; }
select, input[type=text], input[type=number] {
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 9px; font-size: 13px; width: 100%;
}
button, .btn {
  background: var(--accent); color: #fff; border: 0; border-radius: 7px;
  padding: 8px 13px; font-size: 13px; cursor: pointer; text-decoration: none;
  display: inline-block; white-space: nowrap;
}
button.alt, .btn.alt { background: var(--panel-2); border: 1px solid var(--line); }
button.danger, .btn.danger { background: #b13a3a; }
button:hover, .btn:hover { filter: brightness(1.12); }
button:disabled { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 150px; }
.row > .narrow { flex: 0 0 auto; }

/* ── table ───────────────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; }
th { background: var(--panel-2); font-weight: 600; }
td.center, th.center { text-align: center; }
.scroll-x { overflow-x: auto; }

/* ── leaflet mini-map controls ──────────────────────────────────────── */
/* satpicker.js's Map/Sat base-layer toggle -- the small locator map on the main page
   (bottom-left panel) and the satellite-scene picker on Charts & Export / Compare. Was two
   bare inline-styled <a> tags on Leaflet's own plain-white .leaflet-bar box (bold-vs-not-
   bold text for active/inactive) -- read as unstyled next to the rest of this app's dark
   theme. Leaflet's default `.leaflet-bar a` rule (fixed 26x26 icon-button sizing, block
   display, border-bottom) is built for its vertical zoom-control toolbar, not a two-item
   text toggle, so that gets neutralized here too -- same !important-override pattern as
   .leaflet-control-attribution below. Active/inactive now mirrors .nav a.active (var(--accent)
   fill for the selected side) instead of the old bold/not-bold text. */
.locator-toggle {
  background: var(--panel) !important; border: 1px solid var(--line) !important;
  border-radius: 999px !important; box-shadow: none !important;
  padding: 2px; display: flex; gap: 2px; color-scheme: dark;
}
.locator-toggle a {
  width: auto !important; height: auto !important; line-height: normal !important;
  display: inline-block !important; border: 0 !important; margin: 0 !important;
  color: var(--muted); text-decoration: none; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 500; text-align: center;
}
.locator-toggle a:hover { color: var(--fg); background: var(--panel-2); }
.locator-toggle a.active { background: var(--accent); color: #fff; }
.locator-toggle a.active:hover { background: var(--accent); }

/* ── misc ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.badge.live { color: #7ee08a; border-color: #2f5d38; }
.swatch {
  display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid #0006; vertical-align: middle; margin-right: 5px;
}
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.err { color: #ff8f8f; }
.star-blue { color: #6fa8ff; }
.star-red { color: #ff6f6f; }