/* The shared eight-tick generation indicator, kept quiet in the global header. */
.header-active-job {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  color: var(--muted, #666);
  text-decoration: none;
  background: transparent;
}
.header-active-job[hidden], .header-active-job--mobile { display: none; }
.header-active-job:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.header-active-job:active { background: color-mix(in srgb, currentColor 9%, transparent); }
.header-active-job__spinner { position: relative; display: block; width: 20px; height: 20px; }
.header-active-job__spinner i {
  position: absolute; left: 9px; top: 0; width: 2px; height: 6px;
  border-radius: 1px; background: currentColor; transform-origin: 1px 10px;
  transform: rotate(calc(var(--tick) * 45deg));
  animation: header-job-tick 1s linear infinite;
  animation-delay: calc(var(--tick) * .125s - 1s);
}
@keyframes header-job-tick { from { opacity: 1; } to { opacity: .25; } }
@media (hover: hover) and (pointer: fine) {
  .header-active-job:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
}
@media (max-width: 959px) {
  .header-active-job--mobile:not([hidden]) { display: inline-grid; }
  .site-header:has(.header-active-job--mobile:not([hidden])) { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  /* A block text box is required for ellipsis: inline-flex clips its anonymous
     flex child instead. The existing full home-link aria-label is unchanged. */
  .site-header:has(.header-active-job--mobile:not([hidden])) .brand {
    display: block; width: 100%; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) { .header-active-job__spinner i { animation: none; opacity: .7; } }
@media (forced-colors: active) { .header-active-job { color: LinkText; } .header-active-job__spinner i { background: LinkText; } }