/* The site header on every page (thin_protocol::site_header): the brand on
   the left, the sections in the middle, who is signed in on the right.
   Self-contained — its own font, colours and box — so it reads the same over
   every page, whatever that page's own stylesheet says. */
.bt-header {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 24px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 10px 24px;
  position: relative;
  z-index: 40;
  background: #16362e;
  color: #f4f6f1;
  border: 0;
  border-bottom: 1px solid rgba(244, 246, 241, .16);
  font: 400 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}
.bt-header[hidden] { display: none; }
.bt-header a { color: inherit; text-decoration: none; }
.bt-header a:focus-visible { outline: 2px solid #e0b36b; outline-offset: 2px; border-radius: 6px; }

.bt-brand { justify-self: start; display: flex; align-items: center; gap: 11px; min-width: 0; max-width: 100%; }
.bt-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  border: 1px solid rgba(244, 246, 241, .55);
  border-radius: 7px;
  font: 600 22px/1 Georgia, "Times New Roman", serif;
}
.bt-names { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.bt-name, .bt-slogan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-name { font-size: 16px; font-weight: 700; }
.bt-slogan { font-size: 12px; opacity: .78; }

.bt-nav { justify-self: center; display: flex; gap: 4px; }
.bt-nav a { padding: 7px 12px; border-radius: 7px; font-weight: 500; white-space: nowrap; opacity: .86; }
.bt-nav a:hover { opacity: 1; background: rgba(244, 246, 241, .1); }
.bt-nav a[aria-current="page"] { opacity: 1; background: rgba(244, 246, 241, .14); box-shadow: inset 0 -2px 0 #e0b36b; }

/* Either side gives up width before it overlaps the sections: the address
   is cut short (its whole value is its title), never the controls. */
.bt-user { justify-self: end; display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.bt-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
/* Where the server keeps accounts, the address is the way to the Account page. */
.bt-header a.bt-who { border-radius: 6px; }
.bt-header a.bt-who:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-header a.bt-who[aria-current="page"] { text-decoration: underline; text-decoration-color: #e0b36b; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bt-guest { opacity: .85; white-space: nowrap; }
.bt-action {
  flex: none;
  white-space: nowrap;
  padding: 5px 13px;
  border: 1px solid rgba(244, 246, 241, .55);
  border-radius: 999px;
  font-weight: 600;
}
.bt-action:hover { background: rgba(244, 246, 241, .12); }

/* The team's staging server (TP_ENVIRONMENT=staging): a badge beside the
   brand on every page, so a staged model is never mistaken for the demo. */
.bt-env {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e0b36b;
  color: #16362e;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Narrow screens: the brand and the viewer share the first row — the brand
   whole, the viewer in what is left — and the sections take a row of their
   own, centred while they fit. When they do not, the row scrolls from its
   first item: auto margins centre it, where justify-content would push the
   first items out of reach. */
@media (max-width: 860px) {
  .bt-header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand user" "nav nav";
    padding: 10px 16px;
  }
  .bt-brand { grid-area: brand; }
  .bt-user { grid-area: user; }
  .bt-nav { grid-area: nav; justify-self: stretch; overflow-x: auto; scrollbar-width: thin; }
  .bt-nav a:first-child { margin-left: auto; }
  .bt-nav a:last-child { margin-right: auto; }
  .bt-slogan { display: none; }
}
@media (max-width: 480px) {
  .bt-header { column-gap: 14px; }
  .bt-user { gap: 8px; }
  .bt-nav { gap: 0; }
  .bt-nav a { padding: 6px 8px; font-size: 13px; }
}
@media print {
  .bt-header { display: none !important; }
}

/* Pages that carried their own copy of the brand give it up to the header
   (the server marks a page it adds the header to with data-bt-site). */
/* Models: outside operator mode its band holds nothing but the brand, and in
   operator mode it keeps the operator's controls without the brand. */
html:not([data-presentation="operator"]) body[data-bt-site] > header:has(> a.brand[href="index.html"]) { display: none; }
body[data-bt-site] > header > a.brand[href="index.html"] { display: none; }
/* The results page, opened on its own, keeps its actions without the brand. */
body[data-bt-site] header.top > a.brand#brand-home { display: none; }