/* style — the app header, dev switch and version chip.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- header ---------- */
/* Fixed, not sticky. The header is the app's own chrome — branding, version,
   project, profile — so it has to survive a workspace taking over the screen:
   the node space and batch space both open below it rather than over it. It
   starts after the rail and outranks every overlay, but not the rail itself.
   #app pays for the space it occupies with a matching padding-top. */
#header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 9px 22px;
  position: fixed; top: 0; left: 46px; right: 0; z-index: var(--z-drawer);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; }
.hdr-actions { display: flex; align-items: center; gap: 4px; }
.brand-logo { height: 15px; width: auto; display: block; }
.icon-btn {
  background: none; border: none; color: var(--text-dim); font-size: 15px;
  cursor: pointer; padding: 3px 7px; border-radius: 3px;
}
.icon-btn:hover { color: #fff; background: var(--card); }

/* ---- Dev mode switch --------------------------------------------------
   Sits beside the version number, because it is the thing that decides where
   that version comes from. A real switch, not a click hidden on the version
   text: you can see which way it is set without touching it. Hovering either
   the switch or its label opens a plain-English explanation below — the panel
   is 14px from the right edge, so the bubble hangs leftward from the switch
   rather than centred on it, and can never push a scrollbar out. */
#hdr-dev { position: relative; display: flex; align-items: center; }
#hdr-dev-sw {
  display: flex; align-items: center; gap: 5px;
  background: none; border: 1px solid transparent; border-radius: 3px;
  padding: 3px 5px; cursor: pointer; font-family: inherit;
  color: var(--text-faint);
  font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
#hdr-dev-sw:hover { color: var(--text-dim); border-color: var(--border); }
#hdr-dev-sw .hd-track {
  position: relative; width: 20px; height: 11px; border-radius: 3px;
  background: var(--border-dash); transition: background .12s; flex: none;
}
#hdr-dev-sw .hd-knob {
  position: absolute; top: 2px; left: 2px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--bg); transition: left .12s;
}
#hdr-dev.on #hdr-dev-sw { color: var(--accent); }
#hdr-dev.on #hdr-dev-sw .hd-track { background: var(--accent); }
#hdr-dev.on #hdr-dev-sw .hd-knob { left: 11px; }
/* Armed = one click in, waiting for the second. Dashed so it reads as a
   question rather than a state. */
#hdr-dev.armed #hdr-dev-sw { color: var(--accent); border-color: var(--accent); }
#hdr-dev.armed #hdr-dev-sw .hd-track { background: var(--accent-soft); }
#hdr-dev.busy #hdr-dev-sw { color: var(--accent); cursor: progress; }
#hdr-dev.busy #hdr-dev-sw .hd-track { background: var(--accent-soft); }

#hdr-dev .hd-tip {
  position: absolute; top: 100%; right: -4px; margin-top: 6px;
  width: 246px; z-index: var(--z-sticky);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transition: opacity .1s;
  text-transform: none; letter-spacing: 0; pointer-events: none;
}
#hdr-dev:hover .hd-tip, #hdr-dev.armed .hd-tip, #hdr-dev.busy .hd-tip {
  opacity: 1; visibility: visible;
}
#hdr-dev .hd-tip-t {
  font-size: 10px; font-weight: 800; color: var(--text); margin-bottom: 4px;
}
#hdr-dev .hd-tip p {
  margin: 0 0 5px; font-size: 10.5px; line-height: 1.45; color: var(--text-dim); font-weight: 400;
}
#hdr-dev .hd-tip-a {
  font-size: 10px; font-weight: 700; color: var(--accent);
  border-top: 1px solid var(--border); padding-top: 5px; margin-top: 2px;
}

/* The grey version chip was removed — see index.html. The editor shell
   puts the version in the header itself. */