/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the dev overlay strip and the skip segment button. */
/* ---- the dev overlay strip (js/dev-overlay.js): a diagnostic bar along the top edge, off by default ----
   Off unless armed from Settings (a settings toggle, no magic keys). Above every surface so a
   dev can read it while any of them is up, and it never eats a press meant for the UI under it. On
   the demo rig it drops below the disclosure strip that is fixed to the same top edge. */
#devbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: -18px;
  padding: 4px 12px 2px;
  box-sizing: border-box;
  background: rgba(6, 6, 8, 0.9);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--type-micro);
  line-height: 1.4;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
body.demo #devbar {
  top: 34px;
}
/* The cells stand 18px apart and their lines 2px apart. The strip reaches 18px past the screen's left
   edge so a line's first cell starts at the padding, and the last line's 2px is taken off the padding. */
#devbar > * {
  margin-left: 18px;
  margin-bottom: 2px;
}
.devbar-cell {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.devbar-cell > * + * {
  margin-left: 6px;
}
.devbar-k {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: var(--type-micro);
}
.devbar-v {
  color: var(--text);
}

/* Skip Intro / Skip Credits: a plain button over the picture, clear of the transport row below it -
   js/skip-segment.js/js/on-demand-open.js own its show/hide timing, this is only its box. button.primary
   (css/base.css) already gives it the accent face and focus ring every other primary control
   uses - nothing reinvented here. */
#skipSegment {
  position: absolute;
  right: calc(var(--hud-pad-r) + var(--safe-right));
  bottom: calc(120px + var(--safe-bottom));
  z-index: 16;
}