/* Generated by build_extra.py: the "Sample data" switcher in the controls under the device, and a top bar
   that keeps a long product name, the badge and the Documentation link on one line on phones. */
@media (max-width: 420px) {
  .top { gap: 10px; }
  .brand { gap: 8px; font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
  .demo-badge { font-size: 10px; padding: 4px 8px; white-space: nowrap; }
  .top a { white-space: nowrap; font-size: 13px; }
}
.switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); }
.switch span { padding: 0 8px 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.switch span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.controls .switch button { background: transparent; border: 0; padding: 8px 13px; font-size: 13px; }
.controls .switch button:hover { background: rgba(255, 255, 255, .1); }
.controls .switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
/* full screen: the app stops above a dark band that holds "Close full screen", so the button covers nothing */
body.expanded .mac { bottom: 60px; }
body.expanded { background: var(--bg); }
body.expanded .close { bottom: 12px; }
@media (max-width: 720px) {
  /* one more row of controls under the phone */
  .sticky { padding-bottom: 150px; }
  body.phone .mac { width: min(400px, 88vw, calc((100vh - 168px) * .45)); }
  .controls .switch button { padding: 7px 10px; }
}