/* panel.css — shared stylesheet for the new Skywatch tab pages (Center, Inbound).
   Safari-9-safe by design: NO CSS Grid, NO flex gap. Layout = inline-block +
   tables + explicit margins, so ONE page works on modern browsers AND the iOS 9
   iPad. Palette via var() with hex fallbacks (var() works on Safari 9.1). */
:root {
  --bg: #0a0e14; --bg-card: #131922; --bg-card-2: #1a212d; --border: #232a36;
  --fg: #e8edf2; --fg-dim: #8a96a8; --fg-faint: #5a6678;
  --accent: #4ec3ff; --warn: #ffb347; --hot: #ff5b5b; --green: #6dd97a; --gold: #ffd24a;
  --fedex-orange: #ff6600;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: #0a0e14; background: var(--bg);
  color: #e8edf2; color: var(--fg);
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
a { color: #4ec3ff; color: var(--accent); text-decoration: none; }

header { padding: 10px 18px 0; border-bottom: 1px solid #232a36; border-bottom: 1px solid var(--border);
  background: #0f141c; position: sticky; top: 0; z-index: 20; }
header .top { overflow: hidden; }
header .logo { width: 28px; height: 28px; float: left; margin-right: 10px; }
header h1 { font-size: 19px; margin: 0; display: inline; line-height: 30px; }
header .sub { float: right; font-size: 12px; color: #8a96a8; color: var(--fg-dim); line-height: 30px; }

/* tab bar — inline-block links, no flex */
.tabs { margin-top: 8px; white-space: nowrap; overflow-x: auto; }
.tabs a {
  display: inline-block; padding: 8px 16px; font-size: 14px; font-weight: 600;
  color: #8a96a8; color: var(--fg-dim); border-bottom: 2px solid transparent;
}
.tabs a.active { color: #4ec3ff; color: var(--accent); border-bottom-color: #4ec3ff; border-bottom-color: var(--accent); }
.tabs a:active { color: #e8edf2; color: var(--fg); }

main { max-width: 1100px; margin: 0 auto; padding: 16px 18px 60px; }
h2 { font-size: 13px; color: #8a96a8; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .7px; margin: 20px 0 8px; }
.sub-note { font-size: 12px; color: #5a6678; color: var(--fg-faint); }

/* big-number tiles (inline-block) */
.tiles { margin-bottom: 6px; }
.tile {
  display: inline-block; vertical-align: top; margin: 0 8px 10px 0;
  background: #131922; background: var(--bg-card);
  border: 1px solid #232a36; border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px; min-width: 130px;
}
.tile .v { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile .k { font-size: 11px; color: #8a96a8; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .6px; margin-top: 4px; }
.tile .sub { font-size: 11px; color: #5a6678; color: var(--fg-faint); margin-top: 3px; }
.tile.hot .v { color: #ff6600; color: var(--fedex-orange); }
.tile.go .v { color: #6dd97a; color: var(--green); }
.tile.accent .v { color: #4ec3ff; color: var(--accent); }

/* boards: side-by-side cards via inline-block (no grid) */
.cols { font-size: 0; }   /* kill inline-block whitespace */
.col { display: inline-block; vertical-align: top; width: 49%; min-width: 280px; margin: 0 .5% 12px; font-size: 14px; }
.card { background: #131922; background: var(--bg-card); border: 1px solid #232a36; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }

table.lb { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lb th { text-align: left; font-size: 11px; color: #5a6678; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .5px; padding: 4px 6px; border-bottom: 1px solid #232a36; border-bottom: 1px solid var(--border); }
table.lb th.num, table.lb td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.lb td { padding: 6px; border-bottom: 1px solid #1a212d; }
table.lb .rank { color: #5a6678; color: var(--fg-faint); width: 22px; }
table.lb .muted { color: #5a6678; color: var(--fg-faint); font-size: 11px; }
.eta { color: #ffd24a; color: var(--gold); font-weight: 700; }
.brg { color: #4ec3ff; color: var(--accent); }
.empty { color: #5a6678; color: var(--fg-faint); padding: 14px 4px; }
.updated { font-size: 11px; color: #5a6678; color: var(--fg-faint); margin-top: 10px; }