/*
  THE TEACHSITE BAR — styles. Paste alongside `bar.html`.

  🔴 IT CARRIES ITS OWN COLOURS AND INHERITS NOTHING. The four surfaces this goes on have two
  different palettes between them — the course tools are a cool blue-grey family and formats is
  a warm brown one — and a bar built on `currentColor` or on shared variable names would come out
  a different colour on each, or, where a name is missing, resolve to black on a near-black
  ground. Every value here is literal for that reason. It is deliberately quiet on all of them:
  the bar is a way out of a page, never a thing to look at.

  ⚠️ ALL SELECTORS ARE PREFIXED `ts-`. This stylesheet lands in four codebases that were written
  separately and share no conventions; an unprefixed `.bar` or `nav a` would silently restyle
  something that was already there.
*/

.ts-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1.15rem;
  padding: 0.6rem 1.15rem;
  background: #14100c;
  border-bottom: 1px solid #2b2018;
  font-family: "Anonymous Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  line-height: 1.9;
}

.ts-bar a {
  color: #b8ad9c;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ts-bar a:hover,
.ts-bar a:focus-visible {
  color: #e3a63a;
  border-bottom-color: #e3a63a;
}

.ts-bar__home {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #ece4d3;
}

.ts-bar__home img { display: block; }

/* A rule rather than a bullet or a slash: the home link is the place, the rest are things in it,
   and a separator that reads as punctuation would make them a list of equals. */
.ts-bar__rule {
  width: 1px;
  height: 0.95rem;
  background: #2b2018;
}

/* On a narrow screen the bar wraps rather than scrolling sideways. A horizontally scrolling nav
   hides its last item behind an edge with nothing saying so, and the last item here is a real
   destination rather than an overflow. */
@media (max-width: 30rem) {
  .ts-bar { gap: 0 0.9rem; padding: 0.55rem 0.9rem; font-size: 0.74rem; }
  .ts-bar__rule { display: none; }
}