/* The one header bar, shared by every customer-facing surface.
 *
 * Before this file there were three different headers: the signup page's
 * masthead, /apps's bare <h1> with an inline "Sign out" button, and the
 * telemetry dashboard's white topbar. Same product, three front doors.
 *
 * SELF-CONTAINED ON PURPOSE. This sheet is linked by pages that load
 * octet-brand.css (--font-mono, --ink), by pages that load
 * octetproof.com/octet.css (--mono, --paper-ink), and by the telemetry
 * dashboard, which loads neither and calls its ink --fg. Those three
 * disagree about what every token is named, so the bar names its own
 * under .masthead rather than inheriting whichever happens to exist.
 *
 * On pages that also load octetproof.com/octet.css this MUST be linked
 * after it: octet.css carries a .masthead of its own and the last
 * declaration of equal specificity wins.
 */

.masthead {
  --mh-ink: #0d0d0c;
  --mh-muted: #5b574e;
  --mh-rule: rgba(13, 13, 12, .08);
  --mh-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* ONE line-height for every text item in the bar. They are centred as boxes
     (align-items:center), so the glyphs only line up if the boxes are built
     the same way — mixing 11px/1.35 for the email with 10px/1 for the links
     measured 1.5px out. 1.3 rather than 1 because the email carries
     overflow:hidden for its ellipsis, and a line box shorter than the glyph
     box clipped the tops of its ascenders. */
  --mh-line: 1.3;

  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px 44px;
  border-bottom: 1px solid var(--mh-rule);
  background: transparent;
}

.masthead .brand { display: flex; align-items: center; text-decoration: none; color: inherit; }
/* The wordmark's viewBox is 489x126, so 22px high is ~85px wide. Big enough
   to read as a word, small enough not to outweigh the nav beside it. */
.masthead .brand svg,
.masthead .brand .octet-logo { display: block; height: 22px; width: auto; color: var(--mh-ink); }

/* Names the surface, for tools that are one product among several. Sits with
   the wordmark rather than in the nav, because it is identity, not a link. */
.masthead .masthead__product {
  font-family: var(--mh-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mh-muted); white-space: nowrap; line-height: var(--mh-line);
  margin-left: -20px; padding-left: 14px; border-left: 1px solid var(--mh-rule);
}

/* margin-left:auto rather than justify-content:space-between, because the
   bar has two or three children depending on the surface: brand + nav when
   signed out, brand + nav + account when signed in. Pushing nav right puts
   both trailing groups at the right edge in either case. */
.masthead nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.masthead nav a {
  font-family: var(--mh-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--mh-ink);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  white-space: nowrap; line-height: var(--mh-line);
}
.masthead nav a.active,
.masthead nav a:hover { border-bottom-color: var(--mh-ink); }

/* Account cluster: who you are and how to leave. Signed-in surfaces only. */
.masthead .masthead__account {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--mh-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mh-muted); white-space: nowrap;
  /* The cluster's own line-height too, so its items are measured against the
     same strut as the nav's rather than against whatever the host page set on
     body (1.55 here, 1.5 on the telemetry dashboard, unset elsewhere). */
  line-height: var(--mh-line);
}
/* An email is the one thing in this bar that can be arbitrarily long, so it
   is the one thing allowed to truncate. Lowercase because an uppercased
   address is not the address. */
.masthead .masthead__who {
  text-transform: none; letter-spacing: .04em;
  max-width: 24ch; overflow: hidden; text-overflow: ellipsis;
  /* THE SAME BOX MODEL AS A NAV LINK, to the pixel: same font-size, same
     line-height, same 2px bottom padding. Anything else misaligns, because
     align-items:center centres the BOXES and the glyphs then sit wherever
     their own line box puts them — an 11px/1.35 box measured 1.5px low
     against the 10px/1 links beside it. Matching the metrics makes it exact
     rather than nudged, and independent of the loaded face.
     line-height is stated, not inherited: the three surfaces this bar sits on
     disagree about the body value (1.55, 1.5, unset). */
  font-size: 10px;
  line-height: var(--mh-line);
  padding-bottom: 2px;
}
.masthead form { margin: 0; display: inline; }
/* Specific enough to beat the plain `button` rule in all three of the
   stylesheets this bar sits on top of, without !important. */
.masthead .masthead__out {
  font-family: var(--mh-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  background: none; color: var(--mh-muted);
  border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  padding: 0 0 2px; margin: 0; line-height: var(--mh-line); cursor: pointer;
}
.masthead .masthead__out:hover { background: none; color: var(--mh-ink); border-bottom-color: var(--mh-ink); }
.masthead .masthead__out:focus-visible { outline: 2px solid #5ca6cd; outline-offset: 3px; }

/* Licence switcher, telemetry dashboard only. Small, quiet, in the cluster
   rather than competing with the nav. */
.masthead .masthead__lic { display: inline-flex; align-items: center; gap: 7px; }
.masthead .masthead__lic label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mh-muted); }
.masthead .masthead__lic select {
  font-family: var(--mh-mono); font-size: 11px;
  padding: 4px 7px; border: 1px solid #cbc6bb; border-radius: 6px;
  background: #fff; color: var(--mh-ink);
}

@media (max-width: 1180px) {
  .masthead { gap: 22px; }
  .masthead nav { gap: 16px; }
  .masthead nav a { font-size: 9.5px; letter-spacing: .14em; }
}
@media (max-width: 980px) {
  .masthead nav { gap: 12px; }
  .masthead .masthead__account { gap: 12px; }
}
@media (max-width: 768px) {
  /* Stacked, and the nav becomes a horizontal scroller rather than wrapping
     into two ragged rows. Same treatment the signup page already used. */
  .masthead {
    flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 14px 18px 10px;
  }
  .masthead .brand svg,
  .masthead .brand .octet-logo { height: 18px; }
  .masthead .masthead__product { margin-left: 0; padding-left: 0; border-left: 0; }
  .masthead nav {
    margin-left: 0; width: 100%;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 14px; padding-bottom: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .masthead nav::-webkit-scrollbar { display: none; }
  .masthead nav a { font-size: 9.5px; letter-spacing: .14em; }
  .masthead .masthead__account { width: 100%; gap: 14px; }
  .masthead .masthead__who { max-width: none; flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .masthead { padding: 12px 14px 8px; }
}