/* Preview chrome. Deliberately outside every direction's token set — this bar is
   scaffolding for choosing a direction, not part of any of them, so it must not
   inherit or influence the design being judged. Self-contained colours only. */
#preview-bar{
  position:relative; z-index:60;
  background:#111517; color:#C9D3D6;
  font:500 11px/1 ui-monospace,"SF Mono",Menlo,monospace;
  letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid #222A2D;
  padding-top:env(safe-area-inset-top,0px);
}
#preview-bar .pb{
  max-width:1200px; margin:0 auto; padding:0 22px;
  display:flex; align-items:center; gap:14px; min-height:38px; flex-wrap:wrap;
}
#preview-bar .pb-lab{color:#6E7D81; white-space:nowrap}
#preview-bar .pb-links{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
#preview-bar a{
  color:#C9D3D6; text-decoration:none; padding:6px 10px; border-radius:3px;
  border:1px solid #2A3336; white-space:nowrap;
}
#preview-bar a:hover{border-color:#4A585C; color:#fff}
#preview-bar a[aria-current="page"]{background:#E8EEF0; color:#111517; border-color:#E8EEF0}
#preview-bar a.home{border-color:transparent; color:#6E7D81; padding-left:0}
#preview-bar a.home:hover{color:#C9D3D6}
@media(max-width:560px){
  #preview-bar .pb{padding:7px 16px; gap:8px}
  #preview-bar .pb-links{margin-left:0; width:100%}
  #preview-bar a{flex:1; text-align:center; padding:6px 4px}
}
@media print{#preview-bar{display:none}}