/* NGN header lockup: "NGN logo | <app icon> App name" (ngn/brand#8).
   Generated by scripts/build-appmarks.py from tokens/brand.json; do not edit.
   Markup: apps/lockup/lockup.html. Size: set --ngn-lockup-height (default
   components.logo.header). Theme: follows prefers-color-scheme; an explicit
   data-theme="light|dark" on the lockup or an ancestor overrides it. Colours
   use brand.css's fixed --brand-light-* / --brand-dark-* when present. */
.ngn-lockup {
  --ngn-lockup-height: 28px;
  --ngn-lockup-fg: var(--brand-light-fg, #10202e);
  --ngn-lockup-rule: var(--brand-light-border-strong, #6b8096);
  --ngn-lockup-logo-light: inline-block;
  --ngn-lockup-logo-dark: none;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ngn-lockup-height) * 0.3);
  height: var(--ngn-lockup-height);
  color: var(--ngn-lockup-fg);
  font-family: var(--brand-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  text-decoration: none;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .ngn-lockup {
    --ngn-lockup-fg: var(--brand-dark-fg, #e6edf3);
    --ngn-lockup-rule: var(--brand-dark-border-strong, #5f7690);
    --ngn-lockup-logo-light: none;
    --ngn-lockup-logo-dark: inline-block;
  }
}
[data-theme='dark'] .ngn-lockup, .ngn-lockup.ngn-lockup[data-theme='dark'] {
  --ngn-lockup-fg: var(--brand-dark-fg, #e6edf3);
  --ngn-lockup-rule: var(--brand-dark-border-strong, #5f7690);
  --ngn-lockup-logo-light: none;
  --ngn-lockup-logo-dark: inline-block;
}
[data-theme='light'] .ngn-lockup, .ngn-lockup.ngn-lockup[data-theme='light'] {
  --ngn-lockup-fg: var(--brand-light-fg, #10202e);
  --ngn-lockup-rule: var(--brand-light-border-strong, #6b8096);
  --ngn-lockup-logo-light: inline-block;
  --ngn-lockup-logo-dark: none;
}
.ngn-lockup:focus-visible {
  outline: var(--brand-focus-width, 2px) solid var(--brand-focus, #0067ab);
  outline-offset: var(--brand-focus-offset, 2px);
  border-radius: 4px;
}
.ngn-lockup-logo {
  height: var(--ngn-lockup-height);
  width: calc(var(--ngn-lockup-height) * 3.9577);
  /* the wordmark file's side margins (80px of 142px each side) */
  margin-inline: calc(var(--ngn-lockup-height) * -0.5634);
  /* optical centre: the middle of the n on the centre line, the g's
     descender ignored (ngn/brand#10); moves the drawing, not the layout */
  position: relative;
  top: calc(var(--ngn-lockup-height) * 0.1514);
}
.ngn-lockup-logo-light { display: var(--ngn-lockup-logo-light); }
.ngn-lockup-logo-dark { display: var(--ngn-lockup-logo-dark); }
.ngn-lockup-rule {
  width: 1px;
  height: calc(var(--ngn-lockup-height) * 0.86);
  margin-inline: calc(var(--ngn-lockup-height) * 0.15) calc(var(--ngn-lockup-height) * 0.02);
  background: var(--ngn-lockup-rule);
}
.ngn-lockup-icon {
  width: calc(var(--ngn-lockup-height) * 0.86);
  height: calc(var(--ngn-lockup-height) * 0.86);
  margin-inline-end: calc(var(--ngn-lockup-height) * -0.06);
  flex: none;
}
.ngn-lockup-name {
  font-size: calc(var(--ngn-lockup-height) * 0.68);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}