/*
 * The shared bar, worn by every page in the toolkit and by Tesseract.
 *
 * It keeps the toolkit's identity (the black logo block, the elum amber rule,
 * the spaced wordmark) and takes its colours from Tesseract's design tokens
 * where they exist, so the same bar follows the theme inside Tesseract and
 * stays light on the Django pages, which have no theme to follow.
 *
 * That is what every `var(--x, literal)` below is doing: the literal is the
 * Django pages, the token is Tesseract. Nothing here may depend on a token
 * being defined.
 */

:root {
  /* The bar's own height, published so a page that fills the rest of the
     window can subtract it rather than guess. */
  --chrome-h: 56px;
  --chrome-brand-bg: #111318;
  /* The elum amber, the one the sign-in page builds its card strip from. */
  --chrome-amber: #ecb200;
}

/* Sticky, so which product you are in is answered wherever a long page has
   been scrolled to rather than only at its top. */
.chrome-bar {
  display: flex;
  align-items: stretch;
  height: var(--chrome-h);
  background: var(--card, #ffffff);
  border-bottom: 1px solid var(--border, #e4e4ea);
  box-shadow: var(--shadow, 0 1px 3px rgba(20, 25, 40, 0.1));
  position: sticky;
  top: 0;
  z-index: 50;
}

.chrome-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 0 20px;
  background: var(--chrome-brand-bg);
  text-decoration: none;
  cursor: pointer;
}

/* logo.png is white lettering on transparency, which is why the block behind
   it is black on every theme rather than following --card. */
.chrome-brand img {
  display: block;
  max-height: 26px;
}

.chrome-wordmark {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 4px;
  color: #ffffff;
}

.chrome-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 16px;
  padding-right: 4px;
  border-left: 5px solid var(--chrome-amber);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg, #1d2433);
  text-decoration: none;
}

/* A link only where a page passes `title_url`; it stays the same title either
   way, and says so by underlining only under the pointer. */
a.chrome-title:hover {
  text-decoration: underline;
}

.chrome-title img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.chrome-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel, #f2f2f5);
  border: 1px solid var(--border, #e4e4ea);
  color: var(--muted, #6b7280);
}

/* Grows into whatever the brand block and title leave, rather than being only
   as wide as its contents and pushed right by an auto margin. Nothing here
   stretches on the Django pages -- a row of links and a name, all sized by
   their text -- so justify-content puts them back at the right-hand end. What
   the growing is for is Tesseract's search, which is the one thing in this bar
   that can use the room. */
.chrome-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1;
  padding: 0 16px;
}

.chrome-right a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted, #6b7280);
  text-decoration: none;
  white-space: nowrap;
}

.chrome-right a:hover {
  color: var(--fg, #1d2433);
}

/* The brand block's black rather than a token: --primary is a text colour in
   Tesseract's dark palette, so a circle painted with it would be white
   lettering on near-white. */
.chrome-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--chrome-brand-bg);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.chrome-who {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg, #1d2433);
}

/* Narrow enough that something has to go. The wordmark stays: with the title
   beside it, it is the bar's answer to which product this is, and the answer
   should not depend on the width of the window. The user's own name is the
   one thing here they already know. */
@media (max-width: 720px) {
  .chrome-who {
    display: none;
  }

  .chrome-brand {
    padding: 0 14px;
    gap: 8px;
  }

  .chrome-wordmark {
    font-size: 15px;
    letter-spacing: 2px;
  }

  .chrome-title {
    padding-left: 12px;
    font-size: 16px;
  }
}