/* viewport-stage.css — the admin device preview (shell/viewport-stage.js, spec
   docs/superpowers/specs/2026-10-09-viewport-switcher-design.md), the page inside its iframe,
   the cycle button's icon (shell/viewport-switcher.js) and the admin's header row on phones.
   Tokens from tokens.css only, so both themes work.

   The stage covers the whole window above every other layer, toasts (base.css, 10002)
   included: a slim bar in the header colours, so the cycle and exit buttons keep the
   .btn-logout header style, over an area that centres the device frame. The JS writes the
   iframe's device size and transform and the wrapper's scaled size inline; the area's size
   must come from the stage alone (flex: 1, min sizes 0, overflow hidden) because the JS
   measures it to compute the scale. */

/* The header buttons' text line is 0.85rem × line-height 1.5 (shell.css, reset.css); the
   icon takes the same height so the button lines up with the settings gear. A fixed width:
   reset.css gives every svg max-width: 100%, which made the icon count as 0 px wide, so a
   full header row squeezed the button down to its padding with an empty box inside (phones,
   360–430 px). With max-width: none the button's minimum width includes the whole icon. */
.btn-viewport svg {
  display: block;
  width: 20px;
  height: 20px;
  max-width: none;
}

/* Phones (shell.css's breakpoint): the header wraps and .dash-user gets a row of its own,
   which the other buttons already fill at 360–390 px. With the cycle button in, that row
   wraps too (rows as close as the header's own, shell.css gap 0.3rem) instead of running
   past the right edge and cutting off Log Out. Only an admin's row has the button: every
   other header is unchanged. */
@media (max-width: 768px) {
  .dash-user:has(> .btn-viewport) {
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }
}

.vp-stage {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
}

.vp-stage-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--header-bg);
  color: var(--text-inverted);
  box-shadow: var(--shadow-md);
}

.vp-stage-label {
  flex: 1;
  min-width: 0;
  font-size: var(--text-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Margin, not padding: the JS reads clientWidth / clientHeight as the room for the device. */
.vp-stage-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vp-frame {
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-md);
  outline: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-raised);
}

.vp-frame iframe {
  display: block;
  border: 0;
  transform-origin: top left;
}

/* The page inside the stage's iframe: main.js boot() marks its <html> with data-vp-inner-frame
   (shell/viewport-switcher.js isInnerFrame()). Phones and tablets draw overlay scrollbars that
   take no room. A desktop with classic scrollbars (Windows) gave the frame's root scrollbar
   ~15 px of the preset's width, so at Phone portrait media queries saw 390 px while the content
   was laid out at 375 px; inner scroll boxes lost the same. Here no scrollbar takes any room:
   every box still scrolls (wheel, keys, touch), none draws a bar. scrollbar-width is the
   standard property (on the root it governs the viewport's scrollbars); ::-webkit-scrollbar
   covers engines without it. */
html[data-vp-inner-frame],
html[data-vp-inner-frame] * {
  scrollbar-width: none;
}

html[data-vp-inner-frame]::-webkit-scrollbar,
html[data-vp-inner-frame] *::-webkit-scrollbar {
  display: none;
}