/* ---------- header: brand, session chips, file pickers ---------- */
header{
  /* wraps rather than overflowing once the controls no longer fit on one line — the #app grid
     gives the header an `auto` row, so a second line just makes it taller */
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:10px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:9px; white-space:nowrap}
.brand b{font-size:15px; letter-spacing:.2px}
.brand span{color:var(--muted); font-size:12px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--bore);box-shadow:0 0 10px var(--bore)}
.spacer{flex:1}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border:1px solid var(--line2);
      border-radius:999px; color:var(--ink2); font-size:12px; background:var(--panel)}
.chip b{color:var(--ink); font-variant-numeric:tabular-nums}
.chip .k{width:7px;height:7px;border-radius:50%}
button.btn, label.btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  background:var(--panel2); color:var(--ink); border:1px solid var(--line2);
  padding:7px 12px; border-radius:8px; font-size:13px; font-family:var(--font);
}
button.btn:hover, label.btn:hover{border-color:var(--bore); color:#fff}
.btn svg{width:15px;height:15px}
/* a .btn with nothing to act on yet (Export before a session is loaded) — greyed rather than
   hidden, so the feature is discoverable and its title says what it is waiting for */
button.btn:disabled{opacity:.4; cursor:default}
button.btn:disabled:hover{border-color:var(--line2); color:var(--ink)}

/* inline control group in the header — same shell as .btn, but it holds live inputs rather than
   being one click target, so it does not take .btn's hover/cursor. */
.hctl{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
      background:var(--panel2); color:var(--ink2); border:1px solid var(--line2);
      padding:5px 10px; border-radius:8px; font-size:12px}
.hctl svg{width:15px;height:15px; color:var(--muted); flex:none}
.hctl select{background:transparent; color:var(--ink); border:0; outline:none; cursor:pointer;
             font-size:12.5px; font-family:var(--font)}
.hctl select option{background:var(--panel2); color:var(--ink)}   /* Windows/Linux drop the inherit */
.hctl input[type=number]{width:46px; background:var(--panel); color:var(--ink); border:1px solid var(--line);
             border-radius:5px; padding:2px 4px; font-size:12px; font-family:var(--mono); text-align:right}
.hctl input[type=number]:focus{outline:none; border-color:var(--bore)}
.hctl .u{color:var(--muted); margin-left:1px}
/* the box means nothing when every satellite is plotted, so it greys out instead of sitting
   there looking live — same convention as .tog.off over the stage */
.hctl-box.off{opacity:.38; pointer-events:none}