/* ===== Preview chrome: a frosted glass bar above the phone, styled like the site's top navigation (chrome.css .nav-pill).
   Phones and tablets turn it into a vertical glass dock on the right edge (see responsive.css).
   chrome.css itself can't be loaded here because the app's tab bar also uses the .nav class, so the glass tokens are repeated on #preview-bar. ===== */
#preview-bar{
  /* Glass tokens: chrome.css's .nav values (light here, dark below). Text, accent and surface come from the
     site palette in base.css. */
  --nb-glass:rgba(255,255,255,.72);
  --nb-sheen:rgba(236,232,251,.55);
  --nb-edge:rgba(99,64,224,.18);
  --nb-hi:rgba(255,255,255,.6);
  --nb-low:rgba(60,40,140,.08);
  --nb-drop:rgba(70,45,160,.22);
  --nb-drop-deep:rgba(70,45,160,.4);
  --nb-btn:rgba(255,255,255,.3);
  --nb-btn-hover:rgba(255,255,255,.5);
  --nb-accent:var(--accent);
  --nb-accent-hi:var(--accent-hi);
  --nb-on-accent:var(--on-accent);
  --nb-text:var(--text);
  --nb-surface:var(--surface);

  position:relative; z-index:5; width:100%; max-width:420px; height:var(--bar-h); margin:auto 0 12px;
  display:flex; align-items:center; padding:0 8px; border-radius:999px; color:var(--nb-text); font-family:var(--font-site);
  background:linear-gradient(155deg, var(--nb-sheen) 0%, var(--nb-glass) 48%, var(--nb-glass) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--nb-edge);
  box-shadow:
    inset 0 1px 0 var(--nb-hi),
    inset 0 -1px 0 var(--nb-low),
    0 2px 4px -2px var(--nb-drop),
    0 14px 28px -14px var(--nb-drop),
    0 40px 80px -36px var(--nb-drop-deep);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme='light']) #preview-bar{
    --nb-glass:rgba(28,24,42,.72);
    --nb-sheen:rgba(33,28,51,.65);
    --nb-edge:rgba(200,185,255,.18);
    --nb-hi:rgba(255,255,255,.14);
    --nb-low:rgba(0,0,0,.35);
    --nb-drop:rgba(0,0,0,.5);
    --nb-drop-deep:rgba(0,0,0,.75);
    --nb-btn:rgba(255,255,255,.06);
    --nb-btn-hover:rgba(255,255,255,.12);
  }
}
:root[data-theme='dark'] #preview-bar{
  --nb-glass:rgba(28,24,42,.72);
  --nb-sheen:rgba(33,28,51,.65);
  --nb-edge:rgba(200,185,255,.18);
  --nb-hi:rgba(255,255,255,.14);
  --nb-low:rgba(0,0,0,.35);
  --nb-drop:rgba(0,0,0,.5);
  --nb-drop-deep:rgba(0,0,0,.75);
  --nb-btn:rgba(255,255,255,.06);
  --nb-btn-hover:rgba(255,255,255,.12);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #preview-bar{ background:var(--nb-surface); }
}
@media (prefers-reduced-transparency:reduce){
  #preview-bar{ background:var(--nb-surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
#frame-wrap{ margin-bottom:auto; }
/* Controls share the bar's width evenly, so every gap between them is the same */
#preview-bar-items{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:2px; }

/* Icon buttons, like chrome.css's .ib */
.pv-ib{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0;
  min-inline-size:42px; min-block-size:42px; border-radius:999px;
  color:var(--nb-text); text-decoration:none; font-size:19px; background:none; border:0; cursor:pointer; transition:background .2s;
}
.pv-ib:hover{ background:var(--nb-btn-hover); }
/* Privacy Policy: an icon button like the others (as in the site's nav); its label stays as the accessible name and tooltip */
.pv-chip .lg{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* Feedback: the bar's primary button, like the site nav's "View the preview" */
.pv-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0; text-decoration:none;
  min-block-size:42px; padding:0 16px; border-radius:999px; border:0; cursor:pointer;
  font-size:14px; font-weight:700; white-space:nowrap; color:var(--nb-on-accent);
  background:linear-gradient(180deg, var(--nb-accent-hi), var(--nb-accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12), 0 10px 24px -12px var(--nb-accent);
  transition:box-shadow .2s;
}
.pv-cta i{ font-size:17px; }
.pv-cta:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12), 0 16px 30px -12px var(--nb-accent); }
/* Forced colours drop the gradient, so keep a button outline */
@media (forced-colors:active){ .pv-cta{ border:1px solid ButtonText; } }
#preview-bar :focus-visible{ outline:2px solid var(--sage-4); outline-offset:2px; }

/* Text for screen readers only */
.pv-vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* The collapse toggle only exists in the full-screen dock */
#dock-toggle{ display:none; }