/*
 * Placeholder for <project-bar> until project-bar.js has loaded and defined it.
 * Same height, colour and text positions as the real bar, so the page does not
 * jump when it appears. Pages link this in <head> (it is tiny and must be render
 * blocking). Once the element is defined, none of this applies.
 */
project-bar:not(:defined) {
  display: block;
  position: sticky;
  top: 0;
  z-index: 2000;
  box-sizing: border-box;
  height: 48px;
  padding: 0 16px;
  overflow: hidden;
  background: #1c1917;
  color: #f5f5f4;
  font: 600 15px/48px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap;
}

project-bar:not(:defined):not([root])::before {
  content: "\2039  Projects";
  margin-right: 14px;
  padding-right: 14px;
  border-right: 1px solid #44403c;
  color: #d6d3d1;
  font-size: 14px;
  font-weight: 400;
}

project-bar:not(:defined)::after {
  content: attr(name);
}

/* A page that will show tabs reserves their row (under the bar on narrow screens). */
@media (max-width: 720px) {
  project-bar:not(:defined)[tabs] {
    height: 92px;
  }
}