/* IMPERS1 (2026-08-11): THE HONESTY BANNER.
 *
 * A slim bar across the top of the cockpit that says whose seat this is, while Sebastian is looking
 * through it. It is HIS view only: it paints from the whoami impersonation block, and an ordinary
 * session never receives one, so an agent's cockpit cannot draw this even by accident.
 *
 * WHY IT PUSHES THE HEADER DOWN RATHER THAN FLOATING OVER IT (HK6). The topbar is sticky at top:0
 * and every full bleed peer stage starts at --peer-top, the topbar's MEASURED bottom. A bar that
 * floated over the header would cover the account cluster at exactly the widths where the header is
 * tallest, which is where he is most likely to be verifying a screen. So the topbar's sticky offset
 * moves down by this bar's height and the peer stages follow --peer-top as they already do. The one
 * thing the CSS cannot do on its own is re-measure, so impersonation-banner.js calls pbgPeerTop()
 * after it mounts. See [[hk6-peer-top-header-measurement]].
 *
 * BOTH THEMES, and the colour is not decoration: this is the one surface on the cockpit that must
 * never be mistaken for ordinary chrome, because mistaking it means acting inside somebody else's
 * seat believing it is your own.
 *
 * No pill shapes, no dashes, no emoji.
 */

:root { --impers-h: 0px; }
html.pbg-impersonating { --impers-h: 38px; }

/* MAKING ROOM, ON TWO KINDS OF HOST (IMPFIX1, 2026-08-12).
 *
 * THE COCKPIT manages its own header offset: its topbar is sticky at top:0 and every full bleed peer
 * stage starts at --peer-top, the topbar's measured bottom. So there the bar moves the SLIDER, and
 * the stages follow as they already do. It declares itself with data-impers-host="cockpit".
 *
 * EVERY OTHER SURFACE a look can land on (the sign in door, the signing ceremony, the interview, the
 * numbers page, the roster) has an ordinary document flow and a header that is not sticky, so a
 * fixed bar at top:0 would sit ON TOP of it. There the body simply starts lower. Written as a
 * :not(), so a page added tomorrow makes room by default and only a host that has done the work
 * opts out of it: the failure direction is a page pushed down by 38px, never a page with its own
 * language control hidden under an amber bar.
 *
 * Only under the impersonating class either way, so an ordinary page's geometry is byte for byte
 * what it was. */
html.pbg-impersonating[data-impers-host="cockpit"] .topbar { top: var(--impers-h); }
html.pbg-impersonating:not([data-impers-host="cockpit"]) body { padding-top: var(--impers-h); }

.impers-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--impers-h);
  /* Above the topbar (200) and above the peer stages (80 to 95), below the seat lock full screen:
     a kicked cockpit is not a cockpit anybody is verifying. */
  z-index: 260;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 14px;
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2;
  color: #1a1205;
  /* A SOLID COLOUR FIRST, then the gradient over it. Measured by
     verify-impersonation-banner.mjs, which reads the computed background and found it fully
     TRANSPARENT: a gradient is a background-image, so a bar declared with `background:` alone has no
     background-colour at all. It looked right on screen and would have been see through the moment
     the image failed to paint, which on a bar that sits over the header means unreadable words over
     somebody else's cockpit. The gradient is the finish; this line is the floor. */
  background-color: #f0b03a;
  background-image: linear-gradient(180deg, #ffc94d, #f0b03a);
  border-bottom: 1px solid rgba(0, 0, 0, .22);
  box-shadow: 0 1px 10px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.impers-bar .left { color: rgba(26, 18, 5, .72); font-variant-numeric: tabular-nums; white-space: nowrap; }
.impers-bar button.out {
  font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  color: #fff5df; background: #241a06; border: 1px solid rgba(0, 0, 0, .34);
  border-radius: 9px; padding: 6px 15px; cursor: pointer; flex: 0 0 auto;
}
.impers-bar button.out:hover { background: #3a2a0a; }
.impers-bar button:disabled { opacity: .55; cursor: default; }

/* IMPFIX1: THE NAME IS THE DOOR TO THE SWITCHER, so the sentence naming the seat is a button. It is
   dressed to read as the sentence it always was, with only the chevron and a hover ground saying it
   can be pressed: a second loud button on a bar this slim would compete with Salir, and Salir is the
   one control that must never be hunted for. */
.impers-bar .who {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 13px; font-weight: 500; color: inherit;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  padding: 4px 9px; cursor: pointer;
}
.impers-bar .who:hover { background: rgba(0, 0, 0, .11); border-color: rgba(0, 0, 0, .18); }
.impers-bar .who strong { font-weight: 700; }
/* A chevron drawn in CSS: an inline svg would be a second icon set on a file that deliberately owns
   its own markup, and this is the only glyph the bar has. */
.impers-bar .who .caret {
  width: 7px; height: 7px; flex: 0 0 auto; margin-top: -3px;
  border-right: 2px solid rgba(26, 18, 5, .66); border-bottom: 2px solid rgba(26, 18, 5, .66);
  transform: rotate(45deg);
}

/* ---- THE SEAT SWITCHER -------------------------------------------------------------------------
 *
 * A panel hanging off the bar, not a dialog: it is a list he glances at and presses once, and a modal
 * would darken the very screen he opened the walk to look at. Its own surface colours, because it
 * belongs to the bar and not to the seat underneath, and the seat underneath may be any of our
 * surfaces in either theme. z-index one above the bar, so nothing the page owns can cover the list. */
.impers-switch {
  position: fixed; top: calc(var(--impers-h) + 6px); left: 50%; transform: translateX(-50%);
  z-index: 261;
  width: min(420px, calc(100vw - 24px));
  max-height: min(60vh, 520px);
  display: flex; flex-direction: column;
  background: #16130c;
  color: #f6efdd;
  border: 1px solid rgba(240, 176, 58, .55);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  overflow: hidden;
  font-family: inherit; font-size: 13px;
}
.impers-switch-h {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(246, 239, 221, .62);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.impers-switch-h span { flex: 1 1 auto; min-width: 0; }
.impers-switch-x {
  position: relative; width: 22px; height: 22px; flex: 0 0 auto;
  background: transparent; border: 0; border-radius: 7px; cursor: pointer;
}
.impers-switch-x:hover { background: rgba(255, 255, 255, .1); }
/* The close key, drawn as two strokes. Not a dash: these are the two diagonals of an X. */
.impers-switch-x::before, .impers-switch-x::after {
  content: ''; position: absolute; left: 4px; top: 10px; width: 14px; height: 2px;
  background: rgba(246, 239, 221, .8); border-radius: 1px;
}
.impers-switch-x::before { transform: rotate(45deg); }
.impers-switch-x::after { transform: rotate(-45deg); }

.impers-search {
  margin: 10px 12px; padding: 9px 11px;
  font-family: inherit; font-size: 13px;
  color: #f6efdd; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
  outline: none;
}
.impers-search:focus { border-color: rgba(240, 176, 58, .7); background: rgba(255, 255, 255, .1); }
.impers-search::placeholder { color: rgba(246, 239, 221, .42); }

.impers-rows { overflow-y: auto; padding: 0 8px 10px; }
.impers-row {
  display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left;
  padding: 9px 10px; margin: 1px 0;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: #f6efdd; background: transparent; border: 0; border-radius: 9px; cursor: pointer;
}
.impers-row:hover:not(:disabled) { background: rgba(240, 176, 58, .17); }
.impers-row:disabled { opacity: .5; cursor: default; }
.impers-row .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impers-row .em { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: rgba(246, 239, 221, .5); }
.impers-row .mark { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(240, 176, 58, .95); }
.impers-row.here { background: rgba(255, 255, 255, .06); }
/* THE WAY BACK, above the search box and never inside the filtered list, so it cannot be typed out
   of reach. It wears the bar's own amber because it is the same act Salir is. */
.impers-row.back {
  margin: 10px 12px 0; padding: 10px 12px; width: calc(100% - 24px);
  font-weight: 700; color: #241a06;
  background-color: #f0b03a;
  background-image: linear-gradient(180deg, #ffc94d, #f0b03a);
}
.impers-row.back:hover:not(:disabled) { background-image: linear-gradient(180deg, #ffd464, #f5b845); }
.impers-note { padding: 12px 12px 4px; font-size: 12.5px; color: rgba(246, 239, 221, .62); }
.impers-note.bad { color: #ffbdb0; }

/* Light theme keeps the same amber, because the whole value of this bar is that it looks like
   nothing else in either theme. Only the text contrast is restated so nothing inherits away. */
html[data-theme="light"] .impers-bar { color: #1a1205; }

@media (max-width: 620px) {
  html.pbg-impersonating { --impers-h: 44px; }
  .impers-bar { gap: 10px; font-size: 12px; }
  /* At this width the elapsed figure is the first thing worth losing: the name and the way out are
     what the bar is for. */
  .impers-bar .left { display: none; }
  .impers-switch { width: calc(100vw - 16px); max-height: 70vh; }
}