/* The read-only tour's two additions: a strip saying what this is, and a notice for anything the
   tour will not do. Everything else on the page is the app's own stylesheet, untouched. */
.tour-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  padding:8px 16px; background:var(--ink,#1E2833); color:#fff;
  font:500 13px/1.4 var(--font-ui,system-ui,sans-serif);
}
.tour-bar__tag{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--brand-rust,#B4441F); padding:2px 8px;
}
.tour-bar__text{ flex:1 1 280px; }
.tour-bar__text b{ font-weight:700; }
.tour-bar__link{ color:#fff; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.tour-bar__link:hover{ color:#F2A58E; }

/* Above 960px the signed-in body is a fixed-height flex ROW (rail | pane | workspace), so a bar
   dropped into it becomes a fourth column. Pin it instead and give the body its height back as
   padding (box-sizing is border-box app-wide). Below 960px the body is a column and the bar
   simply sits first. */
body{ --tour-h:38px; }
.tour-bar{ flex:0 0 auto; width:100%; }
@media (min-width:961px){
  body.app{ padding-top:var(--tour-h); }
  body.app .tour-bar{
    position:fixed; top:0; left:0; right:0; height:var(--tour-h); z-index:900;
    flex-wrap:nowrap; padding-top:0; padding-bottom:0;
  }
  body.app .tour-bar__text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

.tour-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,12px);
  max-width:min(520px, calc(100vw - 32px)); padding:12px 16px;
  background:var(--ink,#1E2833); color:#fff; font:500 14px/1.45 var(--font-ui,system-ui,sans-serif);
  box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s; z-index:1000;
}
.tour-toast.on{ opacity:1; transform:translate(-50%,0); }