/* GENERATED FILE. DO NOT EDIT.
 *
 * Source: NB Admin repo, shared/nb-header/nb-header.css
 * Regenerate: cd "NB Admin" && npm run build && npm run sync:shared
 *
 * Edits here are overwritten by the next sync, and `npm run sync:shared -- --check` fails the
 * build (this repo's as well as the hub's) while they survive.
 */

/* NB shared header bar.
 *
 * CANONICAL SOURCE. Edit here, then run `npm run sync:shared` from the NB Admin repo. The copies
 * under each app's public/vendor (or static/vendor) directory are generated and carry a banner
 * saying so.
 *
 * Every selector is namespaced `nb-`, and every rule is anchored to `.nb-header`, because this file
 * is dropped into three pages that already have their own `header {}`, `.tabs`, `button` and `nav`
 * rules. An unanchored `header { background: ... }` here would repaint whatever the host page
 * happens to call a header, which is exactly the kind of breakage a vendored stylesheet must not
 * cause.
 *
 * Fixed colours, not host CSS variables. Client Truth has a dark-mode block and a blue accent; the
 * OnOffboarder and the hub are light-only and violet. A shared bar that inherited those would be
 * three different bars. The point of the thing is that it is the same object on every page, so it
 * carries its own palette.
 */

.nb-header {
  /* New Breed brand palette (Brand Guidelines): Violet accent on Charcoal-free white. */
  background: linear-gradient(90deg, #5b2cd6 0%, #733bf6 100%);
  color: #fff;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'proxima-nova', 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  /* Above sticky table headers and Client Truth's own sticky header, which both sit at z-index 10. */
  position: relative;
  z-index: 30;
}

.nb-header * {
  box-sizing: border-box;
}

.nb-header .nb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── brand ───────────────────────────────────────────────────────────────── */

.nb-header .nb-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Margin, not a gap on .nb-row: the row wraps, and the wrapped line should not inherit the
     brand's wider spacing. */
  margin-right: 4px;
}

.nb-header .nb-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.nb-header .nb-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0;
}

.nb-header .nb-spacer {
  margin-left: auto;
}

.nb-header .nb-actor {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  /* An email is the longest thing on the row and the least important to read in full. It yields
     first when the bar is tight, rather than pushing the buttons off the end. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── chips ───────────────────────────────────────────────────────────────── */

/* Small facts about the current view: "generated 2h ago", "kantata: csv", a role. Readable but
   quiet; they are context for the numbers below, not controls. */
.nb-header .nb-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.nb-header .nb-chip[hidden] {
  display: none;
}

/* Chip STATES.
 *
 * Added because bookmarks.css was already reaching into `.nb-header .nb-chip` to define exactly
 * these two, which SCHEMA.md §1.6 forbids, and it was right to want them: a chip reading "policy
 * push failed" that looks identical to one reading "in sync" is a chip that does not work. The
 * override was a bug report against this file, so it is fixed here and the local rule is deleted.
 *
 * Kept to four kinds rather than mirroring nb-ui's seven. These sit on the violet gradient, not on a
 * page surface, so the status washes are unavailable. The palette here is white at three opacities
 * plus one solid fill for danger, which is the only state worth breaking the bar's colour for.
 *
 * Text still carries the meaning. On violet, `ok` and `neutral` are close by necessity, so a chip
 * that says only "✓" would be unreadable on the surface it lives on.
 */
.nb-header .nb-chip[data-kind='ok'] {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
}

.nb-header .nb-chip[data-kind='warn'] {
  background: #fff6e5;
  color: #7a5200;
}

.nb-header .nb-chip[data-kind='error'] {
  background: #ffebe9;
  color: #a40e26;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.nb-header .nb-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nb-header .nb-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.nb-header .nb-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.nb-header .nb-btn:disabled:hover {
  background: transparent;
}

.nb-header .nb-btn[hidden] {
  display: none;
}

/* Focus has to be visible against violet, and the host pages' focus rings are tuned for a light
   background. */
.nb-header .nb-btn:focus-visible,
.nb-header .nb-tab:focus-visible,
.nb-header .nb-tools li a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.nb-header form {
  margin: 0;
  display: inline-flex;
}

/* ── tools dropdown ──────────────────────────────────────────────────────── */

.nb-header .nb-tools {
  position: relative;
}

.nb-header .nb-tools > button::after {
  content: '';
  display: inline-block;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

.nb-header .nb-tools[data-open='true'] > button {
  background: #fff;
  color: #733bf6;
  border-color: #fff;
}

.nb-header .nb-tools ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 320px;
  max-width: min(380px, calc(100vw - 32px));
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  color: #373a36;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(55, 58, 54, 0.24);
  text-align: left;
}

.nb-header .nb-tools[data-open='false'] ul {
  display: none;
}

.nb-header .nb-tools li a {
  display: block;
  padding: 9px 10px;
  border-radius: 7px;
  text-decoration: none;
  color: #373a36;
}

.nb-header .nb-tools li a:hover,
.nb-header .nb-tools li a:focus-visible {
  background: #edf5fc;
}

/* The hover transition belongs to the component, not to whichever page happens to mount it.
 *
 * The hub's stylesheet was setting this on `.nb-header .nb-tools li a`, the third `.nb-*` override
 * found in that file, and the only one grep missed on the first pass because it was tucked inside a
 * `prefers-reduced-motion` block next to an unrelated selector. Conformance test C-2 found it.
 *
 * Guarded on `no-preference` rather than transitioning by default: a menu that animates for someone
 * whose OS asked for no motion is a small thing moving in the corner of their eye, on every hover, on
 * every page in the estate. */
@media (prefers-reduced-motion: no-preference) {
  .nb-header .nb-tools li a {
    transition:
      background-color 120ms ease,
      border-color 120ms ease;
  }
}

.nb-header .nb-tools .nb-tool-name {
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nb-header .nb-tools .nb-tool-blurb {
  font-size: 12px;
  color: #57606a;
  margin-top: 1px;
}

/* The tool you are already in stays listed and stays readable (a menu that hides the current
   item makes you doubt you are where you think you are), but it is not a link. */
.nb-header .nb-tools li[data-current='true'] > span {
  display: block;
  padding: 9px 10px;
  border-radius: 7px;
  background: #f3ecfc;
}

.nb-header .nb-tools .nb-tool-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  color: #57606a;
}

.nb-header .nb-tools li[data-current='true'] .nb-tool-tag {
  background: #fff;
  border-color: #d6c4f7;
  color: #5b2cd6;
}

/* Says the quiet part out loud: switching tools means signing in again. Each app owns its own
   OAuth flow, session cookie and allowlist, so this is a property of the architecture rather
   than a rough edge to apologise for. */
.nb-header .nb-tools .nb-tools-note {
  font-size: 11px;
  color: #57606a;
  border-top: 1px solid #e1e4e8;
  margin: 6px 4px 2px;
  padding: 7px 6px 3px;
}

/* ── tabs ────────────────────────────────────────────────────────────────── */

.nb-header .nb-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Buttons and anchors share every rule. A navigating tab is an anchor (see buildTabs) and must be
   visually indistinguishable from an in-page one. The difference is what it does, not how it
   looks. `text-decoration: none` and the inherited colour are the only two extras an anchor needs. */
.nb-header .nb-tab {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}

.nb-header .nb-tab:hover {
  background: rgba(255, 255, 255, 0.12);
}

a.nb-tab {
  text-decoration: none;
  display: inline-block;
}

/* `page` for a navigating anchor, `true` for an in-page switch. Both are current; they are separate
   tokens because assistive tech announces them differently, and the selector honours both rather
   than forcing one vocabulary on the other. */
.nb-header .nb-tab[aria-current='true'],
.nb-header .nb-tab[aria-current='page'] {
  background: #fff;
  color: #733bf6;
  border-color: #fff;
}

.nb-header .nb-tab[hidden] {
  display: none;
}

/* Trailing controls on the tab row: CSV downloads and the like. */
.nb-header .nb-row-tabs .nb-extras {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Anchors passed in as `tabs.extras` take the bar's styling, not the host page's.
 *
 * Client Truth was already setting `.nb-header .nb-extras a { text-decoration: none }` locally,
 * which SCHEMA.md §1.6 forbids, and again the override was a real gap: this file only ever styled
 * `.nb-btn`, so a plain <a> handed to `extras` fell through to the host page's link rules and
 * rendered underlined dark-violet-on-violet. Callers pass anchors because a CSV download should be a
 * real link that middle-clicks and right-clicks like one, so the fix belongs here.
 *
 * Not folded into `.nb-btn`: an anchor styled as a button but not carrying `nb-btn` should still
 * look deliberate rather than broken, which is the state a host page cannot fix any more. */
.nb-header .nb-extras a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
}

.nb-header .nb-extras a:hover {
  text-decoration: underline;
}

/* ── narrow ──────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .nb-header {
    padding: 10px 14px;
  }

  /* Below this width the actor is competing with the buttons for room, and the buttons win:
     you can always find out who you are signed in as, but you cannot sign out of a button
     that has been pushed off the edge. */
  .nb-header .nb-actor {
    display: none;
  }

  .nb-header .nb-tools ul {
    right: auto;
    left: 0;
  }
}